/* ======================================================
   FINAL MAIL THEME (CLEAN + ACCESSIBLE)
   - calm background
   - paper surfaces for readability
   - postcard accents without overlap
   - consistent spacing + alignment
   ====================================================== */

:root{
  --ink:#111a22;
  --muted:#3f4b55;

  --paper:#fffaf0;     /* warm paper */
  --paper2:#f6efe0;    /* parchment */
  --desk:#e6decd;      /* warm desk (not white/gray) */

  --edge:rgba(17,26,34,.16);
  --shadow: 0 18px 40px rgba(0,0,0,.10);
  --shadowSoft: 0 10px 22px rgba(0,0,0,.08);
  --radius: 18px;

  --blue:#1b5fc6;      /* accessible on white */
  --red:#b2202a;
  --gold:#c9b37c;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.55;

  /* calmer texture + warm desk */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.012),
      rgba(0,0,0,.012) 2px,
      transparent 2px,
      transparent 10px
    ),
    radial-gradient(1200px 600px at 15% 10%, rgba(201,179,124,.16), transparent 60%),
    radial-gradient(900px 500px at 85% 12%, rgba(27,95,198,.10), transparent 60%),
    linear-gradient(180deg, var(--desk), var(--desk));
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1120px;margin:26px auto;padding:0 14px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.small{color:var(--muted);font-size:13px;line-height:1.55}
.hr{height:1px;background:rgba(17,26,34,.10);margin:16px 0}

/* Headings hierarchy */
h1,h2,h3{margin:0}
h2{
  font-size:22px;
  font-weight:1000;
  letter-spacing:-0.01em;
}
h3{
  margin-top:16px;
  font-size:15px;
  font-weight:950;
}
.sectionDesc{
  color:var(--muted);
  font-size:14px;
  margin:6px 0 14px;
}

/* HERO */
.hero{
  position:relative;
  border-radius: var(--radius);
  padding:20px 20px 16px;
  color: var(--ink);
  background:
    radial-gradient(800px 420px at 12% 0%, rgba(201,179,124,.18), transparent 60%),
    radial-gradient(700px 420px at 88% 10%, rgba(27,95,198,.10), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: var(--shadowSoft);
  border:1px solid var(--edge);
}

.heroBand{
  height:8px;
  margin:14px -20px -16px;
  background: repeating-linear-gradient(45deg,
    rgba(27,95,198,.95) 0 10px,
    rgba(27,95,198,.95) 10px 12px,
    rgba(255,255,255,.18) 12px 22px,
    rgba(255,255,255,.18) 22px 24px,
    rgba(178,32,42,.95) 24px 34px,
    rgba(178,32,42,.95) 34px 36px);
  opacity:.65;
  border-radius:0 0 var(--radius) var(--radius);
}

.heroTitle{margin:0;font-size:28px;line-height:1.15}
.heroSub{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:90ch;line-height:1.55}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(27,95,198,.22);
  background: rgba(27,95,198,.08);
  color: var(--ink);
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.welcome{
  margin-top:12px;
  border:1px solid rgba(201,179,124,.45);
  background: rgba(201,179,124,.14);
  border-radius: 14px;
  padding:10px 12px;
  color: var(--ink);
  font-size:13px;
  line-height:1.45;
}

.footerNote{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius: 14px;
  padding:11px 16px;
  min-height:44px;
  background: rgba(17,26,34,.06);
  color: var(--ink);
  font-weight:950;
  cursor:pointer;
  border:1px solid var(--edge);
  transition: transform .06s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn:hover{transform: translateY(-1px); text-decoration:none; box-shadow: 0 10px 18px rgba(0,0,0,.10)}
.btn:active{transform: translateY(0px)}

.btnPrimary{
  background: var(--blue);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.btnPaper{
  background: rgba(255,255,255,.55);
  color: var(--ink);
  border:1px solid var(--edge);
}
.btnDanger{
  background: var(--red);
  color:#fff;
  border:0;
}

/* Visible keyboard focus */
:focus-visible{
  outline:3px solid rgba(27,95,198,.95);
  outline-offset:3px;
  border-radius:12px;
}

/* Cards / Sheets */
.card{
  position:relative;
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  border:1px solid var(--edge);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}
.card > *{position:relative; z-index:1}

/* airmail accent stripe on cards */
.card:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:10px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: repeating-linear-gradient(45deg,
    rgba(27,95,198,.95) 0 10px,
    rgba(27,95,198,.95) 10px 12px,
    rgba(255,255,255,.16) 12px 22px,
    rgba(255,255,255,.16) 22px 24px,
    rgba(178,32,42,.95) 24px 34px,
    rgba(178,32,42,.95) 34px 36px);
  opacity:.55;
  pointer-events:none;
}

/* Use this for the "Pick a Code" main section container */
.sectionCard{
  margin-top:18px;
}

/* Paper sheet blocks */
.sheet{
  position:relative;
  border-radius: var(--radius);
  border:1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,250,240,.98), rgba(246,239,224,.96));
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
  overflow:hidden;
}
.sheet > *{position:relative}

/* subtle paper glow */
.sheet:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 520px at 12% 10%, rgba(201,179,124,.12), transparent 62%),
    radial-gradient(620px 480px at 92% 18%, rgba(27,95,198,.08), transparent 62%);
}

/* Typography helpers */
.kicker{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:950;
  color:rgba(17,26,34,.70);
  background: rgba(17,26,34,.04);
  border:1px solid rgba(17,26,34,.10);
  display:inline-flex;
  padding:6px 10px;
  border-radius: 999px;
  line-height:1.3;
}
.title{margin:8px 0 6px;font-size:16px;font-weight:1000;color:var(--ink)}
.hand{font-family: ui-rounded, "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; letter-spacing:.02em;}
.typed{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* Code grid */
.codeGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}
.postcardMini{padding:18px}

.codeTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px dashed rgba(17,26,34,.22);
  background: rgba(17,26,34,.04);
  color: rgba(17,26,34,.85);
  font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
  white-space:normal; line-height:1.25; max-width:100%;
}
.dot{width:6px;height:6px;border-radius:999px;background: rgba(178,32,42,.85);}

.stampBox{
  width:62px;height:62px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(201,179,124,.55), rgba(201,179,124,.10) 60%, rgba(17,26,34,.35) 100%);
  border:1px solid rgba(201,179,124,.78);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:1000;letter-spacing:.12em;font-size:12px;
  flex:0 0 auto;
}

.codeBig{
  font-weight:1000;
  letter-spacing:.18em;
  color: var(--ink);
  font-size:20px;
  margin-top:10px;
}
.splitLine{height:1px;background:rgba(17,26,34,.12);margin:10px 0}
.codeBottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}

/* Info cards */
.infoCards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:14px;
  margin-top:14px;
}
.infoCard{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,250,240,.98), rgba(246,239,224,.96));
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.infoTitle{font-size:15px;font-weight:1000;margin:10px 0 8px}
.infoBullets{margin:0;padding-left:18px;line-height:1.55;color:var(--muted);font-size:13px}

/* Contact box */
.contactBox{
  border:1px solid rgba(201,179,124,.45);
  background: rgba(201,179,124,.12);
  border-radius: 14px;
  padding:12px;
}
.contactLine{font-size:14px;color:var(--ink);font-weight:950}
.contactSub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}

/* Notices */
.notice{padding:10px 12px;border-radius:14px;margin:12px 0;border:1px solid var(--edge)}
.noticeErr{background:#ffe6e6;border-color:#ffb3b3;color:#7a0000}
.noticeOk{background:#e8ffea;border-color:#b8f0bf;color:#0b5a1a}

/* Forms */
label{display:block;font-weight:950;margin:10px 0 6px;color:var(--ink)}
input,textarea,select{
  width:100%;
  padding:12px 14px;
  min-height:44px;
  border:1px solid rgba(17,26,34,.16);
  border-radius: 14px;
  font-size:16px;
  background:#fff;
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus,textarea:focus,select:focus{
  border-color: rgba(27,95,198,.70);
  box-shadow: 0 0 0 4px rgba(27,95,198,.18);
}
textarea{min-height:180px;resize:vertical}
textarea.letter{
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    repeating-linear-gradient(to bottom, rgba(27,95,198,.16) 0px, rgba(27,95,198,.16) 1px, transparent 1px, transparent 26px);
}

/* Postcard layout */
.postcard{display:grid;grid-template-columns: 1.12fr .88fr;gap:14px}
@media (max-width: 880px){ .postcard{grid-template-columns:1fr} }

/* Photo */
.row{display:flex;gap:16px;flex-wrap:wrap}
.photo{
  width:190px;height:190px;border-radius: var(--radius);
  object-fit:cover;
  border:1px solid rgba(17,26,34,.14);
  background:#fff;
  box-shadow: 0 12px 20px rgba(0,0,0,.10);
}

/* Intro overlay (optional) */
.introOverlay{
  position:fixed; inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(17,26,34,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity 260ms ease;
}
.introOverlay.show{opacity:1;pointer-events:auto;}
.introCard{
  width:min(520px, 92vw);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,239,224,.94));
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  padding:16px 16px 12px;
}
.introTitle{margin:0;font-size:16px;font-weight:1000;color: rgba(17,26,34,.92);}
.introText{margin:6px 0 0;font-size:13px;color: rgba(63,75,85,.92);line-height:1.45;}
.introRow{display:flex;align-items:center;justify-content:center;margin-top:12px}

/* Envelope (overlay only) */
.envelope{width:210px;height:130px;position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.20));}
.envelope .back{position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,239,224,.95));border:1px solid rgba(255,255,255,.25);}
.envelope .front{position:absolute;inset:0;border-radius:16px;overflow:hidden;}
.envelope .front:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:88px;background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(246,239,224,.95));clip-path:polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);border-top:1px solid rgba(17,26,34,.10);}
.envelope .front:after{content:"";position:absolute;left:-2px;right:-2px;top:40px;bottom:0;background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(246,239,224,.92));clip-path:polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);opacity:.55;}
.envelope .flap{position:absolute;left:0;right:0;top:-2px;height:78px;background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,239,224,.95));clip-path:polygon(0 100%, 50% 20%, 100% 100%, 100% 0, 0 0);transform-origin:50% 0%;transform:rotateX(0deg);transition:transform 900ms cubic-bezier(.2,.9,.2,1);border-bottom:1px solid rgba(17,26,34,.10);}
.envelope .stripe{position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:0 0 16px 16px;background:repeating-linear-gradient(45deg, rgba(27,95,198,.95) 0 10px, rgba(27,95,198,.95) 10px 12px, rgba(255,255,255,.18) 12px 22px, rgba(255,255,255,.18) 22px 24px, rgba(178,32,42,.95) 24px 34px, rgba(178,32,42,.95) 34px 36px);opacity:.95;}
.envelope .note{position:absolute;left:16px;right:16px;top:24px;height:72px;border-radius:12px;background:rgba(255,255,255,.85);border:1px dashed rgba(17,26,34,.18);transform:translateY(36px);transition:transform 900ms cubic-bezier(.2,.9,.2,1);}
.envelope.envelopeOpen .flap{transform:rotateX(160deg);}
.envelope.envelopeOpen .note{transform:translateY(-6px);}