/* ============================================================
   ASK VEE — style.css
   cinematic in the structure, playful in the interactions,
   romantic in the words.
   ============================================================ */

/* ---------- tokens — romance is deep and warm, not loud ---------- */
:root {
  --ink:         #150A0F;
  --ink-soft:    #1F1016;
  --ivory:       #F5E9E6;
  --ivory-dim:   #C4AEAC;
  --wine:        #7A2438;
  --rose:        #DC8F9C;
  --blush:       #F2D7DA;
  --warm-bg:     #F9F0EC;
  --warm-ink:    #2A171C;
  --gold:        #C9A24B;
  --green-hit:   #3DBB6E;

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-system: system-ui, -apple-system, Roboto, sans-serif;

  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  /* transparent: body's background would paint OVER the fixed negative-z
     layers (.bg, #atmosphere) — the ink lives on html and .bg instead */
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-display);
  overscroll-behavior-y: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:active, a:active { transform: scale(0.97); }

main { user-select: none; -webkit-user-select: none; }
.stage--select, .stage--select * { user-select: text; -webkit-user-select: text; }

/* ---------- type ---------- */
.fr-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 9;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.fr-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  line-height: 1.5;
}
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ivory-dim);
}
.stage--warm .eyebrow { color: rgba(42, 23, 28, 0.6); }

/* soft rose radial glow behind focal text on dark stages */
.glow {
  position: relative;
}
.glow::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 120vw; height: 120vw;
  max-width: 640px; max-height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(220, 143, 156, 0.09) 0%, rgba(220, 143, 156, 0.04) 34%, rgba(220, 143, 156, 0) 66%);
  pointer-events: none;
  z-index: -1;
}

/* ---------- fixtures ---------- */
.bg {
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: -2;
  pointer-events: none;
}
.bg__warm {
  position: absolute; inset: 0;
  background: var(--warm-bg);
  opacity: 0;
}

#atmosphere {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
/* stage 14: the words slam in BEHIND the confetti (§3) */
#atmosphere.atmosphere--front { z-index: 80; }

.flash {
  position: fixed; inset: 0;
  background: var(--ivory);
  opacity: 0;
  z-index: 400;
  pointer-events: none;
}

/* ---------- the stem (scroll progress) ---------- */
.stem {
  position: fixed;
  top: calc(14px + var(--sa-t));
  bottom: calc(14px + var(--sa-b));
  left: calc(12px + var(--sa-l));
  width: 2px;
  z-index: 50;
  pointer-events: none;
  color: var(--ivory);
}
.stem__line {
  position: absolute; left: 0; bottom: 0;
  width: 1.5px; height: 100%;
  background: var(--ivory);
  opacity: 0.55;
  transform: scaleY(0);
  transform-origin: bottom;
}
.stem__nodes { position: absolute; inset: 0; }
.stem__node {
  position: absolute;
  left: -1.25px;
  width: 4px; height: 4px;
  border-radius: 60% 40% 60% 40%;
  background: var(--ivory);
  opacity: 0;
  transform: rotate(45deg);
}
.stem__bud {
  position: absolute;
  left: -13px;
  bottom: -10px;
  width: 28px; height: 42px;
  opacity: 0;
}
.stem__bud svg { width: 100%; height: 100%; }
.bud-half, .bud-bloom { opacity: 0; }

/* ---------- landscape guard ---------- */
.landscape-guard {
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--ivory);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 500;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
@media (orientation: landscape) and (pointer: coarse) {
  html.js .landscape-guard { display: flex; }
}

/* ---------- cursor ---------- */
.cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: var(--ivory);
  vertical-align: -0.1em;
  opacity: 0;
}
html.gsap .cursor--on { animation: blink 1.06s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- sections base ---------- */
.stage {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1.5rem + var(--sa-t)) 1.5rem calc(1.5rem + var(--sa-b));
}
.stage--warm { color: var(--warm-ink); }
.stage--bleed { padding: 0; }

/* ---------- overlays (s00 loader / s01 door) ---------- */
.overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  padding: 2rem 1.5rem;
  /* passive gesture guard while the overlay is up — not a scroll lock */
  touch-action: none;
}
#s00 { z-index: 110; }
html.gsap #s01 { opacity: 0; visibility: hidden; }

/* ============ STAGE 0 — loader ============ */
.loader { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.loader__line {
  width: 42vw; height: 1px;
  background: rgba(245, 233, 230, 0.18);
  position: relative;
}
.loader__fill {
  position: absolute; inset: 0;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: left;
}
.loader__label { text-align: center; }

/* ============ STAGE 1 — the door ============ */
.door {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.6rem; width: 100%; max-width: 340px; text-align: center;
}
.door__lock { width: 42px; color: var(--rose); }
.lock__shackle { transform-origin: 32px 26px; }
.door__q { color: var(--ivory); }
.door__opts { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }
.door__opt {
  position: relative;
  min-height: 52px;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(220, 143, 156, 0.55);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ivory);
}
/* soft glow via pseudo-element OPACITY crossfade — never animate box-shadow (§6) */
.door__opt::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  box-shadow: 0 0 18px 1px rgba(220, 143, 156, 0.42);
  opacity: 0;
  pointer-events: none;
}
.door__opt--glow::after { animation: optglow 1.6s ease-in-out infinite; }
@keyframes optglow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.door__feedback { min-height: 1.6em; color: var(--ivory-dim); opacity: 0; }

/* ============ STAGE 2 — the hook ============ */
.hook { text-align: center; }
.hook__line { min-height: 2.3em; }
html.gsap .hook__sub { opacity: 0; }
.hook__sub { margin-top: 1.6rem; }

/* ============ STAGE 3 — already ============ */
.already {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 3.2rem; text-align: center;
  overflow: hidden;
  padding: 0 0.5rem;
}
.already__grades {
  display: flex; justify-content: center; align-items: baseline;
  gap: 0.55em; width: 100%;
}
html.gsap .already__line { opacity: 0; }

/* ============ STAGE 4 — the gap ============ */
#s04 { overflow: hidden; }
.gap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.1rem;
  width: 100%; text-align: center;
  padding: 1.5rem;
}
.gap__counter {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 9;
  font-variant-numeric: tabular-nums;
  font-size: clamp(4.6rem, 27vw, 8rem);
  line-height: 1;
  min-width: 3ch;
}
.gap__fault {
  position: absolute;
  bottom: calc(2.4rem + var(--sa-b));
  left: 0; right: 0;
}
html.gsap .gap__fault { opacity: 0; }
.gap__crack {
  position: absolute;
  top: 50%; left: -1.5rem; right: -1.5rem;
  height: 1px;
  background: var(--ivory);
  transform: scaleX(0);
}

/* ============ STAGE 5 — the return ============ */
#s05 { overflow: hidden; }
.phone {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 300 / 620;
  color: var(--ivory);
}
.phone__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone__status {
  position: absolute; top: 10px; left: 0; right: 0;
  display: flex; justify-content: flex-start;
  padding: 0 26px;
}
.phone__time {
  font-family: var(--font-system);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  letter-spacing: 0.02em;
}
.phone__screen {
  position: absolute; inset: 34px 16px 20px;
  display: flex; flex-direction: column;
  font-family: var(--font-system);
}
.ph-request {
  position: absolute;
  left: 0; right: 0; top: 26%;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.ph-chip {
  position: relative;
  min-width: 110px; height: 34px;
  perspective: 500px;
}
.ph-chip__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(220, 143, 156, 0.45);
  border-radius: 8px;
  font-family: var(--font-system);
  font-size: 0.82rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ph-chip__face--back { transform: rotateX(180deg); color: var(--ivory-dim); }
.ph-accepted {
  position: absolute;
  left: 0; right: 0; top: 48%;
  text-align: center;
}
.ph-thread {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 7px;
  padding: 0 2px 4px;
}
.row { position: relative; display: flex; }
.row--him { justify-content: flex-end; }
.row--her { justify-content: flex-start; }
.row .typing { position: absolute; bottom: 0; }
.row--her .typing { left: 0; }
.row--him .typing { right: 0; }
.bubble {
  font-family: var(--font-system);
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 7px 12px;
  border-radius: 16px;
  max-width: 80%;
  width: fit-content;
}
.bubble--him { align-self: flex-end; background: var(--ink-soft); color: var(--ivory); border-bottom-right-radius: 5px; }
.bubble--her { align-self: flex-start; background: var(--ivory); color: var(--warm-ink); border-bottom-left-radius: 5px; }
.bubble--apart {
  font-size: 1.05rem;
  padding: 11px 16px;
  border: 1px solid var(--ivory);
  margin-top: 6px;
}
.typing {
  display: flex; gap: 4px; align-items: center;
  padding: 9px 12px;
  border-radius: 16px;
  width: fit-content;
}
.typing--her { align-self: flex-start; background: var(--ivory); }
.typing--him { align-self: flex-end; background: var(--ink-soft); }
.typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  display: block;
}
.typing--her i { color: rgba(42, 23, 28, 0.6); }
.typing--him i { color: var(--ivory-dim); }
html.gsap .typing.typing--live i { animation: tdot 1.1s ease-in-out infinite; }
html.gsap .typing.typing--live i:nth-child(2) { animation-delay: 0.14s; }
html.gsap .typing.typing--live i:nth-child(3) { animation-delay: 0.28s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-3px); opacity: 1; } }
html.gsap .ph-request, html.gsap .ph-accepted,
html.gsap .bubble, html.gsap .typing { opacity: 0; }

/* ============ STAGE 6 — twenty-six days ============ */
#s06 {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.6rem;
  /* narrow side padding: keeps every lit calendar cell ≥48px at 390px (§7) */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 16svh;
  padding-top: 16dvh;
  padding-bottom: 14svh;
  padding-bottom: 14dvh;
}
.june { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 2.2rem; }
.june__head { text-align: center; color: var(--wine); }
.cal { width: 100%; }
.cal__month {
  text-align: center;
  margin-bottom: 0.9rem;
  color: rgba(122, 36, 56, 0.75);
  letter-spacing: 0.22em;
}
.cal__row--head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(42, 23, 28, 0.45);
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px 3px;
}
.cal__cell {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.88rem;
  color: rgba(42, 23, 28, 0.52);
  border-radius: 10px;
}
html.gsap .cal__cell { opacity: 0; }
.cal__cell--lit { color: var(--warm-ink); }
.cal__cell--lit::before {
  content: "";
  position: absolute; inset: 3px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
}
.cal__cell--on::before { opacity: 1; transform: scale(1); }
.cal__cell--stamped::after {
  content: "";
  position: absolute;
  inset: -2px 0 auto auto;
  width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  transform: rotate(-8deg) translate(3px, -3px);
  opacity: 0.85;
}
/* every other day beats with a small rose heart */
.cal__cell--heart { color: rgba(42, 23, 28, 0.52); }
.cal__cell--heart .cal__heart {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 9px; height: 8px;
  margin-left: -4.5px;
  opacity: 0;
  transform: scale(0.4);
}
.cal__cell--heart .cal__heart svg { display: block; width: 100%; height: 100%; }
html.gsap .cal__heart--beat { animation: heartbeat 2.8s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.22); }
  24% { transform: scale(1); }
}
html.no-gsap .cal__heart { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.gsap .cal__heart--beat { animation: none; }
}

/* the minimal we-talked tooltip card */
.cal-tip {
  position: absolute;
  z-index: 62;
  background: var(--blush);
  color: var(--warm-ink);
  border-radius: 12px;
  padding: 0.55rem 1.05rem;
  box-shadow: 0 12px 30px -12px rgba(122, 36, 56, 0.42);
  pointer-events: none;
  white-space: nowrap;
}
.cal-tip[hidden] { display: none; }
.cal-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: var(--blush);
  transform: rotate(45deg);
}
.june__hint { text-align: center; }
html.gsap .cal-entries { display: none; }
.cal-entries { display: flex; flex-direction: column; gap: 1rem; }

.cal-overlay {
  position: fixed; inset: 0;
  z-index: 60;
  display: none;
  background: rgba(21, 10, 15, 0.2);
}
.cal-overlay--open { display: block; }
.cal-card {
  position: fixed;
  left: 50%; top: 50%;
  width: min(82vw, 330px);
  z-index: 61;
  background: var(--blush);
  color: var(--warm-ink);
  border-radius: 16px;
  padding: 1.8rem 1.5rem 1.5rem;
  box-shadow: 0 24px 60px -18px rgba(122, 36, 56, 0.4);
  transform: translate(-50%, -50%);
}
.cal-card[hidden] { display: none; }
.cal-card__close {
  position: absolute; top: 4px; right: 4px;
  z-index: 1;
  width: 48px; height: 48px;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  color: rgba(42, 23, 28, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.cal-card__day {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.cal-card__content { position: relative; }
.polaroid {
  margin-top: 1.1rem;
  background: var(--ivory);
  border: 8px solid var(--blush);
  border-bottom-width: 30px;
  box-shadow: 0 10px 30px -12px rgba(122, 36, 56, 0.32);
  transform: rotate(-2.5deg);
}
.fence-light {
  position: absolute;
  top: -0.4rem; right: 0;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: rgba(42, 23, 28, 0.16);
}
.fence-light--hit { background: var(--green-hit); }

/* ============ STAGE 7 — graduation ============ */
#s07 { overflow: hidden; }
.grad {
  position: absolute; inset: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.grad__fog {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}
html:not(.gsap) .grad__fog { display: none; }
.grad__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.grad__hold {
  position: absolute;
  bottom: calc(2.2rem + var(--sa-b));
  left: 0; right: 0;
  text-align: center;
  color: var(--ivory);
  text-shadow: 0 1px 8px rgba(21, 10, 15, 0.6);
}
html.gsap .grad__hold { animation: holdpulse 2.2s ease-in-out infinite; }
@keyframes holdpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.grad__lines {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5rem 1.6rem calc(2.4rem + var(--sa-b));
  background: linear-gradient(to top, rgba(21, 10, 15, 0.62), rgba(21, 10, 15, 0));
  color: var(--ivory);
  display: flex; flex-direction: column; gap: 0.9rem;
  pointer-events: none;
}
html.gsap .grad__l1, html.gsap .grad__l2 { opacity: 0; }

/* ============ STAGE 8 — fragrance ============ */
.scent {
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem;
  text-align: center;
  max-width: 340px;
}
.scent__bottle { width: 84px; color: var(--warm-ink); }
.bottle__hl { stroke: var(--gold); stroke-width: 1.2; opacity: 0.6; }
.scent__pyramid { display: flex; flex-direction: column; gap: 1.5rem; }
.scent__row { display: flex; flex-direction: column; gap: 0.35rem; }
html.gsap .scent__row, html.gsap .scent__closing { opacity: 0; }
.scent__closing { margin-top: 0.6rem; font-style: italic; }

/* ============ STAGE 9 — little things ============ */
#s09 { overflow: hidden; }
.stack { display: flex; align-items: center; justify-content: center; width: 100%; }
.stack__cards {
  position: relative;
  width: min(76vw, 320px);
  aspect-ratio: 3 / 4;
}
.fcard {
  position: absolute; inset: 0;
  background: var(--blush);
  color: var(--warm-ink);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(122, 36, 56, 0.26);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.55rem;
  text-align: center;
  padding: 1.6rem 1.4rem;
  touch-action: none;
}
.fcard__sub {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.82rem;
  color: rgba(42, 23, 28, 0.7);
}
.fcard__eye {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px;
  color: rgba(122, 36, 56, 0.65);
}
.eye__lid { opacity: 0; }

/* ============ STAGE 10 — the promises ============ */
#s10 { overflow: hidden; }
.prom { position: absolute; inset: 0; }
.pcard {
  position: absolute;
  left: 50%; top: 50%;
  width: min(76vw, 310px);
  aspect-ratio: 3 / 4.1;
  perspective: 1200px;
}
html.gsap .pcard { opacity: 0; pointer-events: none; will-change: transform, opacity; }
html.gsap .pcard--live { pointer-events: auto; }
.pcard__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.pcard__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--blush);
  color: var(--warm-ink);
  border-radius: 16px;
  box-shadow: 0 18px 44px -18px rgba(122, 36, 56, 0.26);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.6rem 1.5rem;
}
.pcard__face h3 { font-size: clamp(1.7rem, 7vw, 2.3rem); color: var(--wine); }
.pcard__back { transform: rotateY(180deg); }
.pcard__back .eyebrow { color: var(--gold); }
.prom__nudge {
  position: absolute;
  bottom: calc(1.6rem + var(--sa-b));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(42, 23, 28, 0.55);
  font-family: var(--font-ui);
  opacity: 0;
}
.prom__seal {
  position: absolute;
  left: 1.5rem; right: 1.5rem;
  top: 58%;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem;
  text-align: center;
}
html.gsap .prom__seal { opacity: 0; }
.prom__lock { width: 36px; color: var(--wine); }
.prom__lock .lock__shackle { transform-origin: 32px 26px; }

/* ============ STAGE 11 — the road ============ */
.road {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.8rem;
  text-align: center;
  max-width: 360px;
}
.road__map { width: min(86vw, 340px); color: var(--warm-ink); }
.road__window { fill: none; stroke: var(--gold); }
.road__window--lit { fill: var(--gold); stroke: var(--gold); }
.road__count {
  color: var(--wine);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 9;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
}
.road__sub { margin-top: 0.4rem; }
html.gsap .road__odo, html.gsap .road__line { opacity: 0; }

/* ============ STAGE 12 — this is us ============ */
#s12 {
  min-height: 150svh;
  min-height: 150dvh;
  align-items: flex-start;
}
.us {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}
.us__reveal {
  position: absolute; inset: 0;
  overflow: hidden;
}
.us__inner { position: absolute; inset: 0; }
.us__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.us__lines {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5rem 1.6rem calc(2.6rem + var(--sa-b));
  background: linear-gradient(to top, rgba(21, 10, 15, 0.62), rgba(21, 10, 15, 0));
  color: var(--ivory);
  display: flex; flex-direction: column; gap: 1rem;
}
html.gsap .us__l1, html.gsap .us__l2 { opacity: 0; }
.us__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(21, 10, 15, 0) 46%, rgba(21, 10, 15, 0.55) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ============ STAGE 13 — the question ============ */
#s13 { z-index: 5; }
.q {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem;
  padding: 1.5rem;
  text-align: center;
}
html.gsap .q__headline { opacity: 0; }
.q__buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}
html.gsap .q__buttons { opacity: 0; }
.q-yes {
  position: relative;
  min-height: 56px;
  padding: 0 2.4rem;
  background: var(--wine);
  color: var(--ivory);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.q-ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  fill: none;
  stroke: var(--rose);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  pointer-events: none;
}
.q-no {
  min-height: 56px;
  padding: 0 2rem;
  border: 1px solid rgba(220, 143, 156, 0.75);
  color: var(--rose);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}
.q-no--free {
  position: fixed;
  left: 0; top: 0;
  margin: 0;
  z-index: 70;
}
.q__frame {
  position: absolute;
  left: var(--sa-l); right: var(--sa-r);
  bottom: 0;
  height: 45%;
  pointer-events: none;
}

/* ============ STAGE 14 — the yes ============ */
#s14 { overflow: hidden; }
.boom {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.2em;
  width: 100%;
}
.slam {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 9;
  line-height: 1.02;
  white-space: nowrap;
  text-align: center;
}
html.gsap .slam { opacity: 0; }
.slam:nth-child(1) { font-size: min(13vw, 5rem); }
.slam:nth-child(2) { font-size: min(16vw, 6rem); }
.slam:nth-child(3) { font-size: min(15vw, 5.6rem); }
.slam:nth-child(4) { font-size: min(9.4vw, 3.6rem); }
.slam:nth-child(5) { font-size: min(24vw, 9rem); }
.slam__blur {
  position: absolute; inset: 0;
  filter: blur(10px);
  opacity: 0;
}
.slam__sharp { position: relative; }

/* ============ STAGE 15 — the card ============ */
#s15 { flex-direction: column; gap: 3rem; }
.keeps {
  display: flex; flex-direction: column; align-items: center;
  gap: 2.6rem;
  width: 100%;
}
html.gsap .keeps__intro, html.gsap .keeps__card, html.gsap .keeps__hint { opacity: 0; }
.keeps__card {
  width: min(84vw, 340px);
  border: 1px solid rgba(220, 143, 156, 0.45);
  border-radius: 4px;
  padding: 2.6rem 1.8rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.89 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.keeps__names {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 9;
  font-size: 1.45rem;
}
.keeps__date { letter-spacing: 0.18em; text-transform: none; }
.keeps__days {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
}
.keeps__lily { width: 38px; margin-top: 0.6rem; color: var(--ivory); }

/* ============ STAGE 16 — the end ============ */
#s16 {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding-top: 34svh;
  padding-top: 34dvh;
  padding-bottom: 0;
}
.end { display: flex; flex-direction: column; align-items: center; width: 100%; }
html.gsap .end__wa, html.gsap .end__love { opacity: 0; }
.end__wa {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0.8rem 1.8rem;
  border: 1px solid rgba(220, 143, 156, 0.55);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ivory);
  text-decoration: none;
}
.end__silence {
  height: 60svh;
  height: 60dvh;
  width: 100%;
}
.end__love {
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem;
  text-align: center;
  padding-bottom: 4rem;
}
.end__iloveyou {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  line-height: 1.4;
}
.end__sig {
  display: flex; align-items: center; gap: 0.9rem;
}
html.gsap .end__sig { opacity: 0; }
.end__j {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ivory-dim);
}
.end__lily { width: 34px; padding: 0; color: var(--ivory); min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.end__lily svg { width: 34px; }
.end__secret {
  min-height: 3.2em;
  max-width: 320px;
  color: var(--ivory);
}
.end__restart {
  margin: 8rem 0 calc(2.2rem + var(--sa-b));
  min-height: 48px;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ivory);
  opacity: 0.4;
}

/* ---------- noscript ---------- */
.noscript {
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.7;
  padding: 3rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}

/* ---------- no-gsap resilience ---------- */
html.no-gsap .overlay { position: static; min-height: auto; opacity: 1 !important; visibility: visible !important; }
html.no-gsap #s00 { display: none; }
html.no-gsap .stage { height: auto; }
html.no-gsap [style] { opacity: 1 !important; }
html.no-gsap .hook__sub, html.no-gsap .already__line, html.no-gsap .gap__fault,
html.no-gsap .bubble, html.no-gsap .ph-request, html.no-gsap .ph-accepted,
html.no-gsap .cal__cell, html.no-gsap .scent__row, html.no-gsap .scent__closing,
html.no-gsap .grad__l1, html.no-gsap .grad__l2, html.no-gsap .road__odo,
html.no-gsap .road__line, html.no-gsap .us__l1, html.no-gsap .us__l2,
html.no-gsap .pcard, html.no-gsap .prom__seal, html.no-gsap .q__headline,
html.no-gsap .q__buttons, html.no-gsap .keeps__intro, html.no-gsap .keeps__card,
html.no-gsap .keeps__hint, html.no-gsap .end__wa, html.no-gsap .end__love,
html.no-gsap .end__sig, html.no-gsap .slam, html.no-gsap .grad__photo {
  opacity: 1 !important; filter: none !important; transform: none !important;
}
html.no-gsap .typing { display: none; }
html.no-gsap .cal-entries { display: flex; }
html.no-gsap .pcard { position: static; margin: 1rem auto; }
html.no-gsap #s10 .prom { position: static; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.5rem; }
html.no-gsap .prom__seal { position: static; }
html.no-gsap .hook__line { min-height: 0; }
html.no-gsap .stem, html.no-gsap #atmosphere { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.gsap .cursor--on { animation-duration: 1.4s; }
  .door__opt--glow::after { animation: none; opacity: 0.85; }
  html.gsap .grad__hold { animation: none; opacity: 0.85; }
  html.gsap .typing.typing--live i { animation: none; opacity: 0.8; }
}