/* ============================================================
   FONTS
   Fraunces        — warm editorial display serif
   Caveat          — handwritten accents, captions, signature
   Instrument Sans — body reading face
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,300..800&family=Caveat:wght@500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ============================================================
   TOKENS — warm paper / scrapbook palette
   ============================================================ */
:root {
  --f-display: "Fraunces", "Palatino Linotype", Georgia, serif;
  --f-body:    "Instrument Sans", "Helvetica Neue", sans-serif;
  --f-hand:    "Caveat", cursive;

  --c-paper:    #f6efe1;
  --c-paper-2:  #efe3cd;
  --c-paper-3:  #e8dabf;
  --c-card:     #fbf6ea;

  --c-ink:      #2b2115;
  --c-ink-2:    rgba(43, 33, 21, 0.68);
  --c-ink-3:    rgba(43, 33, 21, 0.46);
  --c-ink-4:    rgba(43, 33, 21, 0.20);

  --c-terracotta: #c1502e;
  --c-moss:       #5c7a5c;
  --c-mustard:    #d9a441;
  --c-rose:       #b85c6b;

  --c-accent:   var(--c-terracotta);
  --c-accent-2: rgba(193, 80, 46, 0.16);
  --c-accent-3: rgba(193, 80, 46, 0.08);

  --rule:       rgba(43, 33, 21, 0.16);
  --rule-soft:  rgba(43, 33, 21, 0.09);
  --rule-accent: rgba(193, 80, 46, 0.4);

  --tape-a: rgba(217, 164, 65, 0.42);
  --tape-b: rgba(255, 255, 255, 0.5);

  --r-xl:  4px 18px 4px 18px;
  --r-lg:  14px;
  --r-md:  10px;
  --r-sm:   6px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 0 rgba(43,33,21,0.05), 0 6px 16px rgba(43,33,21,0.10);
  --shadow-md: 0 1px 0 rgba(43,33,21,0.06), 0 14px 32px rgba(43,33,21,0.14);
  --shadow-lg: 0 1px 0 rgba(43,33,21,0.07), 0 26px 60px rgba(43,33,21,0.18);
  --glow-terracotta: 0 0 0 1px rgba(193,80,46,0.3), 0 14px 30px rgba(193,80,46,0.18);
  --glow-mustard: 0 0 0 1px rgba(217,164,65,0.35), 0 14px 30px rgba(217,164,65,0.20);
  --glow-moss: 0 0 0 1px rgba(92,122,92,0.3), 0 14px 30px rgba(92,122,92,0.16);

  --ptr-x: 50%;
  --ptr-y: 30%;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark variant of the same warm scrapbook palette — deep coffee paper
   instead of cream, same terracotta/mustard/moss accents (already
   mid-tone enough to hold contrast on a dark ground). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper: #1c140c;
    --c-paper-2: #241a10;
    --c-paper-3: #2c2013;
    --c-card: #251b12;
    --c-ink: #f3e9d8;
    --c-ink-2: rgba(243, 233, 216, 0.7);
    --c-ink-3: rgba(243, 233, 216, 0.46);
    --c-ink-4: rgba(243, 233, 216, 0.2);
    --c-terracotta: #e07a52;
    --c-mustard: #e6b95c;
    --c-moss: #7ba17b;
    --c-rose: #d17f8f;
    --rule: rgba(243, 233, 216, 0.18);
    --rule-soft: rgba(243, 233, 216, 0.1);
    --tape-a: rgba(230, 185, 92, 0.32);
    --tape-b: rgba(243, 233, 216, 0.14);
  }
}

:root[data-theme="dark"] {
  --c-paper: #1c140c;
  --c-paper-2: #241a10;
  --c-paper-3: #2c2013;
  --c-card: #251b12;
  --c-ink: #f3e9d8;
  --c-ink-2: rgba(243, 233, 216, 0.7);
  --c-ink-3: rgba(243, 233, 216, 0.46);
  --c-ink-4: rgba(243, 233, 216, 0.2);
  --c-terracotta: #e07a52;
  --c-mustard: #e6b95c;
  --c-moss: #7ba17b;
  --c-rose: #d17f8f;
  --rule: rgba(243, 233, 216, 0.18);
  --rule-soft: rgba(243, 233, 216, 0.1);
  --tape-a: rgba(230, 185, 92, 0.32);
  --tape-b: rgba(243, 233, 216, 0.14);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  transition: background 320ms ease, color 320ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at var(--ptr-x) var(--ptr-y), rgba(193, 80, 46, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 4% 0%, rgba(217, 164, 65, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 65% 60% at 100% 100%, rgba(92, 122, 92, 0.08) 0%, transparent 55%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
.ambient, .noise, #celebrationCanvas, .bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient {
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}

.ambient-one {
  width: 42vw; height: 42vw;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle, var(--c-mustard), transparent 70%);
  animation: drift-one 28s var(--ease) infinite;
}

.ambient-two {
  width: 36vw; height: 36vw;
  bottom: -14vw; right: -6vw;
  background: radial-gradient(circle, var(--c-terracotta), transparent 70%);
  animation: drift-two 34s var(--ease) infinite;
}

.ambient-three {
  width: 26vw; height: 26vw;
  top: 42%; left: 58%;
  background: radial-gradient(circle, var(--c-moss), transparent 70%);
  opacity: 0.5;
  animation: drift-three 24s var(--ease) infinite;
}

.bg-particles { z-index: 1; }

.noise {
  z-index: 2;
  opacity: 0.4;
  background-image: radial-gradient(rgba(43, 33, 21, 0.6) 0.4px, transparent 0.5px);
  background-size: 7px 7px;
}

#celebrationCanvas { z-index: 55; }

/* ============================================================
   INTRO LOADER
   ============================================================ */
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--c-paper);
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
}

.intro-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--c-terracotta);
  animation: intro-pulse 1.1s var(--ease) infinite;
}

@keyframes intro-pulse {
  0%, 100% { transform: scale(0.85) rotate(-6deg); opacity: 0.7; }
  50% { transform: scale(1.08) rotate(4deg); opacity: 1; }
}

/* ============================================================
   SMOOTH SCROLL (progressive enhancement — see initSmoothScroll)
   ============================================================ */
.scroll-spacer { display: none; }

body.has-smooth-scroll .shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  will-change: transform;
}

body.has-smooth-scroll .scroll-spacer { display: block; }

body.has-smooth-scroll .hero-photo {
  transform: translateY(calc(var(--scroll, 0) * -0.05px));
}

/* ============================================================
   SPLIT-TEXT WORD REVEAL
   ============================================================ */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

body.is-ready [data-reveal].is-visible .split-word {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 70;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
  background: var(--c-terracotta);
}

.cursor-ring {
  width: 30px; height: 30px;
  margin-left: -15px; margin-top: -15px;
  border: 1.5px solid rgba(43, 33, 21, 0.3);
  transition: width 220ms var(--ease), height 220ms var(--ease), margin 220ms var(--ease), border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.cursor-ring.is-active {
  width: 48px; height: 48px;
  margin-left: -24px; margin-top: -24px;
  border-color: var(--c-terracotta);
  background: rgba(193, 80, 46, 0.08);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.cursor-ring.is-down { width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; }

@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 12px;
  z-index: 100;
  background: var(--c-terracotta);
  color: #fff8ee;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus { top: 12px; }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: var(--rule-soft);
}

.scroll-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--c-terracotta), var(--c-mustard));
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink);
  background: var(--c-card);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--c-ink);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms var(--bounce);
}

.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top:active { transform: translateY(0); }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  position: fixed;
  right: 22px;
  bottom: 76px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink);
  background: var(--c-card);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--c-ink);
  transition: transform 220ms var(--bounce);
}

.theme-toggle:hover { transform: translateY(-3px); }
.theme-toggle:active { transform: translateY(0); }

/* ============================================================
   IMAGE LOADING SKELETON
   ============================================================ */
.gif-frame.is-loading {
  background: linear-gradient(100deg, var(--c-paper-2) 30%, var(--c-paper-3) 50%, var(--c-paper-2) 70%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.gif-frame.is-loading img { opacity: 0; }

/* ============================================================
   LAST UPDATED
   ============================================================ */
.last-updated {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--c-ink-4);
  letter-spacing: 0.02em;
}

/* ============================================================
   SIDE NAV DOTS
   ============================================================ */
.side-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.side-nav-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink-3);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms var(--bounce);
}

.side-nav-dot:hover { transform: scale(1.3); }

.side-nav-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-hand);
  font-size: 1.05rem;
  color: var(--c-ink);
  background: var(--c-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  transform: translateY(-50%) translateX(6px);
  box-shadow: var(--shadow-sm);
}

.side-nav-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.side-nav-dot.is-active {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  transform: scale(1.15);
}

@media (max-width: 1020px) {
  .side-nav { display: none; }
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell {
  position: relative;
  z-index: 3;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 96px;
  display: grid;
  gap: 64px;
}

.shell-compact { width: min(1040px, calc(100% - 40px)); }

[data-reveal] { opacity: 0; transform: translateY(24px); }
body.is-ready [data-reveal].is-visible { animation: reveal 820ms var(--ease) forwards; }

/* ============================================================
   PAPER CARD PRIMITIVE
   ============================================================ */
.board {
  position: relative;
  background: var(--c-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}

/* ============================================================
   HERO — split polaroid layout
   ============================================================ */
.hero-board {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.hero-photo { position: relative; }

.polaroid {
  position: relative;
  background: #fffdf8;
  padding: 14px 14px 46px;
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-4deg);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}

.polaroid:hover { transform: rotate(-1deg) translateY(-4px) scale(1.015); }

.washi-tape {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 96px;
  height: 32px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(
    45deg,
    var(--tape-a), var(--tape-a) 6px,
    var(--tape-b) 6px, var(--tape-b) 12px
  );
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(43,33,21,0.16);
}

.gif-frame {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-paper-2);
}

.gif-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.02); }

.script-line {
  margin: 14px 4px 0;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--c-ink-2);
  text-align: center;
  line-height: 1.1;
}

.hero-copy { display: grid; gap: 20px; }

.please-card { display: contents; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.badge-line, .section-label, .memory-kicker, .afterglow-label {
  margin: 0;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--c-terracotta);
}

.badge-line { display: inline-flex; align-items: center; gap: 8px; }
.badge-line::before { content: "✦"; font-size: 0.9rem; }
.section-label { opacity: 0.9; }
.afterglow-label { color: var(--c-mustard); }
.memory-kicker { color: var(--c-mustard); opacity: 0.9; font-size: 1.05rem; }

.hero-title, .section-head h2, .question-board h2, .mini-card h2,
.memory-title, .letter-signoff strong, .discord-copy h2, .board h3 {
  margin: 0;
  font-family: var(--f-display);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--c-ink);
}

.hero-title {
  font-size: clamp(2.9rem, 5.6vw, 4.8rem);
  font-weight: 600;
  max-width: 13ch;
  position: relative;
}

.hero-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 10px;
  margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c15-8 25 6 40-1s25 6 38-1 25 5 38-2' stroke='%23c1502e' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  opacity: 0.8;
}

.hero-lead, .hero-note, .intro-copy p, .support-copy, .question-copy,
.status-line, .memory-panel p, .memory-blurb, .mini-card p, .letter-body p,
.field-hint, .choice-card span {
  margin: 0;
  line-height: 1.75;
}

.hero-lead { font-size: 1.04rem; color: var(--c-ink-2); max-width: 46ch; }
.hero-note { font-size: 0.88rem; color: var(--c-ink-3); max-width: 40ch; }

.hero-actions, .question-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* ============================================================
   BUTTONS — sticker / stamp style
   ============================================================ */
.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-ink);
  cursor: pointer;
  transition: transform 200ms var(--bounce), box-shadow 200ms ease, background 180ms ease, color 180ms ease;
  box-shadow: 3px 3px 0 var(--c-ink);
}

.button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c-ink); }
.button:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--c-ink); }
.button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--c-ink); }

.button-primary { background: var(--c-terracotta); color: #fff8ee; border-color: var(--c-terracotta); box-shadow: 3px 3px 0 var(--c-ink); }
.button-primary:hover { background: #ab421f; }

.button-secondary { background: var(--c-card); color: var(--c-ink); }
.button-secondary:hover { background: var(--c-paper-2); }

.button-ghost { background: transparent; color: var(--c-ink-2); border-color: var(--rule); box-shadow: none; }
.button-ghost:hover { color: var(--c-ink); border-color: var(--c-ink-3); transform: none; }

/* ============================================================
   MINI STACK (hero highlights) — index-card strip
   ============================================================ */
.mini-stack { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

.mini-card {
  flex: 1 1 220px;
  background: var(--c-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.mini-card:nth-child(odd) { transform: rotate(-1deg); }
.mini-card:nth-child(even) { transform: rotate(0.8deg); }

.mini-card h2 {
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--c-ink);
  line-height: 1.2;
}

.mini-card p { margin-top: 6px; font-size: 0.8rem; color: var(--c-ink-3); }

/* ============================================================
   INTRO RIBBON — torn paper strip
   ============================================================ */
.intro-ribbon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 1.6rem 0;
  border-top: 2px dashed var(--rule);
  border-bottom: 2px dashed var(--rule);
}

.intro-copy { max-width: 50rem; }

.intro-copy h2 {
  margin: 6px 0 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--c-ink);
}

.intro-copy p { color: var(--c-ink-2); font-size: 0.94rem; }

.ribbon-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--c-ink-3);
  color: var(--c-ink-2);
  font-size: 0.85rem;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.05rem;
}

.meter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-terracotta); flex-shrink: 0; animation: pulse-dot 1.8s var(--ease) infinite; }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head { display: grid; gap: 8px; margin-bottom: 1.6rem; }

.section-head h2, .question-board h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  font-style: italic;
  color: var(--c-ink);
}

/* ============================================================
   STORY — horizontal filmstrip + shared detail panel
   ============================================================ */
.story-board { background: transparent; border: none; box-shadow: none; padding: 0; }

.memory-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 10px 6px 26px;
  margin: 0 -6px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-ink-4) transparent;
}

.memory-track::-webkit-scrollbar { height: 8px; }
.memory-track::-webkit-scrollbar-thumb { background: var(--c-ink-4); border-radius: var(--r-pill); }

.memory-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  background: var(--c-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 260ms var(--bounce), box-shadow 260ms ease;
}

.memory-card::before {
  content: "";
  position: absolute;
  inset: 6px 6px auto 6px;
  height: 6px;
  background-image: radial-gradient(circle, var(--c-paper) 2.2px, transparent 2.6px);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.memory-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.memory-card[data-open="true"] {
  border-color: rgba(193, 80, 46, 0.4);
  box-shadow: var(--glow-terracotta);
}

.memory-trigger {
  width: 100%;
  height: 100%;
  padding: 22px 16px 18px;
  border: none;
  background: transparent;
  display: grid;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
}

.memory-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-accent-3);
  color: var(--c-terracotta);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.05rem;
  border: 1.5px solid var(--rule-accent);
}

.memory-copy { display: grid; gap: 4px; }

.memory-title {
  font-family: var(--f-display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.25;
}

.memory-blurb { font-size: 0.8rem; color: var(--c-ink-3); }

.memory-icon { display: none; }

.memory-panel { display: none; }

.filmstrip-detail {
  background: var(--c-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--c-terracotta);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.filmstrip-detail p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--c-ink-2);
  line-height: 1.85;
}

.filmstrip-detail .memory-kicker { display: block; margin-bottom: 8px; }

/* ============================================================
   LETTER + SIDEBAR
   ============================================================ */
.letter-grid, .followup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(280px, 0.86fr);
  gap: 22px;
  align-items: start;
}

.sidebar-stack { display: grid; gap: 18px; }
.letter-panel, .soundtrack-panel, .promise-card { height: 100%; }

.letter-panel {
  position: relative;
  background:
    repeating-linear-gradient(var(--c-card) 0 34px, var(--rule-soft) 34px 35px),
    var(--c-card);
  transform: rotate(-0.5deg);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}

.letter-panel::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-rose);
  opacity: 0.35;
}

.letter-panel::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 28px;
  width: 70px;
  height: 26px;
  transform: rotate(-4deg);
  background: repeating-linear-gradient(45deg, var(--tape-a), var(--tape-a) 6px, var(--tape-b) 6px, var(--tape-b) 12px);
  opacity: 0.85;
  box-shadow: 0 2px 5px rgba(43,33,21,0.14);
}

.letter-body { display: grid; gap: 20px; padding-left: 20px; }

.letter-opener {
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--c-ink);
  line-height: 1.25;
}

.letter-body p { font-size: 0.97rem; color: var(--c-ink-2); line-height: 1.9; }

.letter-signoff {
  display: grid;
  gap: 4px;
  margin: 2.2rem 0 0 20px;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--c-ink-3);
}

.letter-signoff strong {
  font-family: var(--f-hand);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--c-terracotta);
}

/* ============================================================
   SOUNDTRACK — mixtape ticket
   ============================================================ */
.discord-embed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--c-ink-3);
  background: var(--c-paper-2);
  position: relative;
}

.discord-bar {
  position: absolute;
  right: 76px;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-left: 1.5px dashed var(--c-ink-3);
}

.discord-bar::before, .discord-bar::after {
  content: "●";
  position: absolute;
  left: -6px;
  color: var(--c-paper);
  font-size: 12px;
  text-shadow: 0 0 0 var(--c-paper);
  -webkit-text-stroke: 1.5px var(--c-ink-3);
}

.discord-bar::before { top: -14px; }
.discord-bar::after { bottom: -14px; }

.discord-copy { display: grid; gap: 8px; padding-right: 88px; }

.discord-copy h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 500;
  font-style: italic;
  color: var(--c-ink);
}

.spotify-shell {
  margin-top: 14px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
}

.spotify-shell iframe { display: block; width: 100%; min-height: 352px; border: 0; }

.promise-card {
  background: var(--c-card);
  border: 1px solid var(--rule);
  transform: rotate(0.8deg);
}

.promise-card h3 { font-size: 1.5rem; font-weight: 500; font-style: italic; color: var(--c-ink); margin-bottom: 10px; }
.support-copy { font-size: 0.9rem; color: var(--c-ink-2); }

/* ============================================================
   QUESTION — corkboard scattered cards
   ============================================================ */
.question-board { display: grid; gap: 26px; background: transparent; border: none; box-shadow: none; padding: 0; }
.question-board h2 { color: var(--c-ink); }
.question-copy { font-size: 0.96rem; color: var(--c-ink-2); max-width: 54ch; }

.reply-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-top: 8px;
}

.reply-grid.is-hunting { cursor: crosshair; }

.answer-card {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 22px;
  text-align: left;
  display: grid;
  gap: 10px;
  background: var(--c-card);
  color: var(--c-ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--bounce), box-shadow 260ms ease, border-color 220ms ease;
}

.reply-grid .answer-card:nth-child(1) { transform: rotate(-2deg); }
.reply-grid .answer-card:nth-child(2) { transform: rotate(1.4deg) translateY(10px); }
.reply-grid .answer-card:nth-child(3) { transform: rotate(-1deg); }

.answer-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 30px; height: 22px;
  background: repeating-linear-gradient(45deg, var(--tape-a), var(--tape-a) 5px, var(--tape-b) 5px, var(--tape-b) 10px);
  opacity: 0.8;
}

.answer-card:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: var(--shadow-md); }

.answer-card strong { font-size: 1rem; font-weight: 700; color: var(--c-ink); }
.answer-card small { font-size: 0.83rem; color: var(--c-ink-3); line-height: 1.65; }

.answer-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 0.95rem;
}

.answer-yes { border-color: rgba(193, 80, 46, 0.3); }
.answer-yes:hover { border-color: rgba(193, 80, 46, 0.55); box-shadow: var(--glow-terracotta); }
.answer-yes .answer-pill { background: var(--c-accent-2); color: var(--c-terracotta); }

.answer-maybe { border-color: rgba(217, 164, 65, 0.32); }
.answer-maybe:hover { border-color: rgba(217, 164, 65, 0.6); box-shadow: var(--glow-mustard); }
.answer-maybe .answer-pill { background: rgba(217, 164, 65, 0.18); color: #9c6c1e; }

.answer-no { border-color: rgba(92, 122, 92, 0.3); }
.answer-no:hover { border-color: rgba(92, 122, 92, 0.55); box-shadow: var(--glow-moss); }
.answer-no .answer-pill { background: rgba(92, 122, 92, 0.16); color: var(--c-moss); }

.answer-card.is-selected { border-color: rgba(193, 80, 46, 0.5); box-shadow: var(--glow-terracotta); }

.answer-placeholder { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.answer-placeholder::before { display: none; }

.answer-no.is-fleeing {
  position: absolute;
  top: 0; left: 0;
  z-index: 30;
  transform: rotate(var(--flee-rotate, 0deg)) !important;
  transition: left 360ms var(--bounce), top 360ms var(--bounce), transform 360ms var(--bounce), box-shadow 200ms ease;
  box-shadow: var(--glow-moss);
  cursor: grab;
}

.answer-no.is-settled { animation: settle-wobble 460ms var(--bounce); cursor: pointer; }

.status-line { min-height: 1.6em; font-size: 0.9rem; color: var(--c-ink-2); font-weight: 600; font-family: var(--f-hand); font-size: 1.1rem; }

/* ============================================================
   AFTERGLOW — photo receipt
   ============================================================ */
.reply-afterglow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1.5px dashed rgba(193, 80, 46, 0.4);
  background: var(--c-accent-3);
}

.afterglow-media img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); }
.afterglow-copy { display: grid; gap: 6px; }
.afterglow-copy h3 { font-size: 1.4rem; font-weight: 500; font-style: italic; color: var(--c-ink); }
.afterglow-copy p { font-size: 0.88rem; color: var(--c-ink-2); margin: 0; }

/* ============================================================
   CHOICE GRIDS (next page) — stamp choices
   ============================================================ */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }

.choice-card {
  appearance: none;
  border: 1.5px dashed var(--rule);
  border-radius: var(--r-sm);
  padding: 14px;
  background: var(--c-paper);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  color: var(--c-ink);
  transition: transform 220ms var(--bounce), border-color 200ms ease, background 200ms ease;
}

.choice-card:hover { transform: translateY(-3px); border-color: var(--c-terracotta); background: var(--c-card); }
.choice-card strong { font-size: 0.92rem; font-weight: 700; color: var(--c-ink); }
.choice-card span { font-size: 0.8rem; color: var(--c-ink-3); }
.choice-card-small { align-content: center; min-height: 100%; }
.choice-card.is-selected { border-style: solid; border-color: var(--c-terracotta); background: var(--c-accent-3); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field-label { display: block; margin: 0 0 7px; font-family: var(--f-hand); font-weight: 700; font-size: 1.02rem; color: var(--c-ink-2); }

.field-input {
  width: 100%;
  font: inherit;
  font-size: 0.94rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--c-paper);
  color: var(--c-ink);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.field-input::placeholder { color: var(--c-ink-4); }
.field-input:focus { outline: none; border-color: var(--c-terracotta); background: var(--c-card); box-shadow: 0 0 0 4px rgba(193, 80, 46, 0.10); }
.field-input:disabled { opacity: 0.4; cursor: not-allowed; }
.field-textarea { min-height: 130px; resize: vertical; }
.field-textarea-short { min-height: 100px; }
.field-hint { margin-top: 8px; font-size: 0.8rem; color: var(--c-ink-4); line-height: 1.6; }

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@keyframes drift-one {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(5vw, 7vh) scale(1.06); }
  66% { transform: translate(-3vw, 4vh) scale(0.97); }
}
@keyframes drift-two {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-6vw, -4vh) scale(1.08); }
  75% { transform: translate(3vw, -6vh) scale(0.95); }
}
@keyframes drift-three {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-4vw, 5vh) rotate(14deg); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(193, 80, 46, 0.14); }
  50% { box-shadow: 0 0 0 8px rgba(193, 80, 46, 0.05); }
}

@keyframes settle-wobble {
  0% { transform: rotate(0deg) scale(1.08); }
  40% { transform: rotate(-3deg) scale(1); }
  70% { transform: rotate(2deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .hero-board, .letter-grid, .followup-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { max-width: 320px; margin: 0 auto; }
  .reply-grid { grid-template-columns: 1fr; }
  .reply-grid .answer-card { transform: none !important; }
  .reply-afterglow { grid-template-columns: 1fr; }
  .answer-no.is-fleeing { position: static !important; transform: none !important; }
  .letter-panel { transform: none; }
}

@media (max-width: 720px) {
  .shell, .shell-compact { width: calc(100% - 24px); padding-top: 30px; padding-bottom: 60px; gap: 44px; }
  .board { padding: 1.3rem 1.1rem; }
  .hero-title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .section-head h2, .question-board h2, .intro-copy h2, .discord-copy h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .choice-grid { grid-template-columns: 1fr; }
  .hero-actions, .question-actions { flex-direction: column; }
  .button { width: 100%; }
  .memory-card { flex-basis: 200px; }
  .discord-bar, .discord-copy { padding-right: 0; }
  .discord-embed { grid-template-columns: 1fr; }
  .discord-bar { display: none; }
  .letter-body, .letter-signoff { padding-left: 0; }
  .letter-panel::before { display: none; }
  .gif-frame { aspect-ratio: 16/12; }
  .spotify-shell iframe { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ambient { animation: none; opacity: 0.25; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .ambient, .noise, .bg-particles, #celebrationCanvas, .cursor-dot, .cursor-ring,
  .side-nav, .back-to-top, .theme-toggle, .scroll-progress, .intro-loader,
  .skip-link, .reply-grid, .status-line, .hero-actions, .question-actions,
  .choice-grid, .field-input, .field-label, .field-hint, .button, .washi-tape {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  body.has-smooth-scroll .shell {
    position: static;
    transform: none !important;
  }

  .scroll-spacer { display: none !important; }

  .board, .letter-panel, .polaroid {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}