/* =============================================================
   Message Box — "Analog Love Letter" design system
   Warm pressed-paper stationery · wax-seal accents · postmark
   ============================================================= */

:root {
  --paper:    #f3ead6;   /* warm cream paper            */
  --paper-2:  #ece0c6;   /* slightly deeper card paper  */
  --paper-3:  #e4d5b6;   /* deepest panel               */
  --ink:      #241a12;   /* espresso near-black ink     */
  --ink-soft: #6f6049;   /* faded ink for secondary     */
  --ink-faint:#9d8c6f;   /* hairline / muted captions   */
  --seal:     #b23a2e;   /* wax-seal vermilion          */
  --seal-deep:#8a2920;   /* shadowed seal               */
  --gold:     #a9842f;   /* postal gold accent          */
  --line:     #d4c39f;   /* hairline rules on paper     */

  --shadow:   0 18px 40px -18px rgba(60, 40, 20, .55);
  --shadow-sm:0 8px 20px -12px rgba(60, 40, 20, .5);

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* iPhone safe areas */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  position: relative;
  min-height: 100vh;
}

/* Paper grain overlay — subtle turbulence, multiply blended */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--seal); color: var(--paper); }

.wrap { max-width: 460px; margin: 0 auto; padding: 28px 22px 64px; position: relative; }

/* ---------- Typography ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--seal); margin: 0 0 4px;
}
h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 900; font-size: clamp(44px, 13vw, 60px);
  line-height: .94; letter-spacing: -.02em; margin: 0;
  color: var(--ink);
}
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 25px; letter-spacing: -.01em; margin: 0 0 18px;
}
.serif-italic { font-family: var(--body); font-style: italic; }

.tagline {
  font-family: var(--body); font-style: italic;
  font-size: 19px; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.45;
}

/* ---------- Decorative rules ---------- */
.rule {
  border: 0; border-top: 1.5px dashed var(--line);
  margin: 34px 0;
}
.rule-label {
  display: flex; align-items: center; gap: 14px;
  margin: 40px 0 22px; color: var(--ink-faint);
}
.rule-label::before, .rule-label::after {
  content: ""; flex: 1; border-top: 1.5px dashed var(--line);
}
.rule-label span {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .28em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Wax seal ---------- */
.seal {
  width: 84px; height: 84px; border-radius: 49% 51% 52% 48% / 50% 48% 52% 50%;
  margin: 0 auto;
  background:
    radial-gradient(circle at 36% 30%, #d2503f 0%, var(--seal) 42%, var(--seal-deep) 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.28),
    inset 0 -8px 14px rgba(0,0,0,.4),
    0 10px 22px -8px rgba(120,30,20,.7);
  display: grid; place-items: center;
  position: relative;
  animation: beat 2.4s ease-in-out infinite;
}
.seal svg { width: 40px; height: 40px; fill: var(--seal-deep);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)); }
@keyframes beat {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  12%      { transform: scale(1.07) rotate(-3deg); }
  24%      { transform: scale(1) rotate(-3deg); }
}

/* ---------- Postmark ---------- */
.postmark {
  width: 86px; height: 86px; opacity: .5;
  transform: rotate(-9deg);
}
.postmark circle, .postmark path { fill: none; stroke: var(--seal); stroke-width: 2; }
.postmark text {
  fill: var(--seal); font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .12em;
}

/* ---------- Buttons ---------- */
.btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 18px;
  padding: 16px 20px; border-radius: 3px; border: 0; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s;
  letter-spacing: .01em;
}
.btn + .btn { margin-top: 12px; }
.btn-seal {
  background: linear-gradient(180deg, #c1432f, var(--seal-deep));
  color: var(--paper);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-seal:active { transform: translateY(2px); box-shadow: var(--shadow-sm); }
.btn-quiet {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
}
.btn-quiet:active { transform: translateY(2px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- Cards / steps ---------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px; padding: 22px;
  box-shadow: var(--shadow-sm);
}

.steps { position: relative; margin: 0; padding: 0; list-style: none; }
.steps::before {     /* the postal route line */
  content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px;
  border-left: 2px dashed var(--line);
}
.step { position: relative; display: flex; gap: 18px; padding: 0 0 26px 0; }
.step:last-child { padding-bottom: 0; }
.step .num {
  flex: 0 0 38px; height: 38px; z-index: 1;
  background: var(--paper); border: 2px solid var(--seal);
  color: var(--seal); border-radius: 50%;
  font-family: var(--display); font-weight: 900; font-size: 17px;
  display: grid; place-items: center;
}
.step h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 6px 0 4px; }
.step p  { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.step b  { color: var(--ink); font-style: normal; }

/* ---------- Letter / drop cap ---------- */
.letter p { margin: 0; font-size: 18px; line-height: 1.62; color: #3a2e20; }
.letter p::first-letter {
  font-family: var(--display); font-weight: 900;
  font-size: 58px; float: left; line-height: .8;
  padding: 6px 10px 0 0; color: var(--seal);
}

/* ---------- Forms ---------- */
.field { margin-top: 18px; }
.field label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: 17px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 3px; padding: 14px 15px; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(178,58,46,.16);
}
.hint { font-size: 13px; color: var(--ink-faint); margin-top: 6px; font-style: italic; }

.back {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; margin-bottom: 10px;
}

.alt { text-align: center; margin-top: 24px; color: var(--ink-soft); font-size: 16px; }
.alt a { color: var(--seal); text-decoration: none; font-weight: 500; }

/* status message */
.msg { margin-top: 16px; padding: 12px 14px; border-radius: 3px; font-size: 15px;
  display: none; font-family: var(--body); }
.msg.err { display: block; background: #f0d9c4; color: var(--seal-deep);
  border-left: 3px solid var(--seal); }
.msg.ok  { display: block; background: #dce6cf; color: #41612f;
  border-left: 3px solid #5f7d3c; }

/* ---------- iOS install note (torn paper) ---------- */
.note {
  display: none; margin-top: 30px; background: #fbf4e2;
  border: 1px solid var(--line); padding: 16px 18px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
  box-shadow: var(--shadow-sm); transform: rotate(-.6deg);
}
.note b { color: var(--ink); }

footer {
  margin-top: 50px; text-align: center; color: var(--ink-faint);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---------- Entrance animation ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .85s cubic-bezier(.2,.75,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .seal { animation: none; }
}