/* =====================================================================
   styles.css — RawGoa · the whole feeling of the place
   Two states, one document:
     [data-mode="susegad"]  sun-bleached heritage · paper, ink, azulejo
     [data-mode="raat"]     bioluminescent night · indigo, lantern, plankton
   Everything is a token. Motion obeys --dur/--ease per state and dies
   politely under prefers-reduced-motion.
   ===================================================================== */

/* ---------------- 1 · tokens ---------------- */

:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fs-scale: 1;
  --max-w: 680px;
  --max-w-wide: 1080px;
  --radius: 15px 19px 16px 20px / 19px 15px 20px 16px;
  --radius-s: 10px 13px 11px 14px / 13px 10px 14px 11px;
}

html[data-mode="susegad"] {
  --paper: #F6F0E2;
  --paper-2: #EFE7D2;
  --paper-3: #E8DDBF;
  --ink: #1C2A25;
  --ink-70: rgba(28, 42, 37, .72);
  --ink-50: rgba(28, 42, 37, .66);
  --ink-25: rgba(28, 42, 37, .25);
  --laterite: #8C3A2B;
  --palm: #0E3B32;
  --teal: #1F6F78;
  --gold: #E8A33D;
  --gold-ink: #8A5B12;          /* the only gold allowed as text — 4.8:1 on paper */
  --accent-action: var(--palm);
  --accent-action-ink: #F6F0E2;
  --card-edge: rgba(28, 42, 37, .55);
  --card-edge-strong: var(--laterite);
  --wash: rgba(31, 111, 120, .07);
  --shadow-ink: 0 10px 30px -18px rgba(28, 42, 37, .45);
  --offset-ink: 3px 4px 0 rgba(140, 58, 43, .18);
  --glow: 0 0 0 rgba(0, 0, 0, 0);   /* must be a valid shadow — 'none' would void the whole list */
  --grain-blend: multiply;
  --grain-opacity: .055;
  --ease: cubic-bezier(.16, .84, .28, 1);
  --ease-spring: cubic-bezier(.22, 1.2, .3, 1);
  --dur: 640ms;
  --dur-fast: 420ms;
  --ambient: 9s;                /* the breathing cycle */
}

html[data-mode="raat"] {
  --paper: #0A0E13;
  --paper-2: #121822;
  --paper-3: #18202D;
  --ink: #E9EEF2;
  --ink-70: rgba(233, 238, 242, .78);
  --ink-50: rgba(233, 238, 242, .58);
  --ink-25: rgba(233, 238, 242, .26);
  --laterite: #FFB454;          /* lantern amber does the accent work now */
  --palm: #123528;
  --teal: #4FE3D0;
  --gold: #FFB454;
  --gold-ink: #FFB454;
  --accent-action: #CC2C64;     /* hibiscus — the only action on screen */
  --accent-action-ink: #FFF3F7;
  --card-edge: rgba(79, 227, 208, .28);
  --card-edge-strong: #4FE3D0;
  --wash: rgba(79, 227, 208, .06);
  --shadow-ink: 0 14px 40px -20px rgba(0, 0, 0, .8);
  --offset-ink: 3px 4px 0 rgba(0, 0, 0, .5);
  --glow: 0 0 24px rgba(79, 227, 208, .14);
  --grain-blend: screen;
  --grain-opacity: .05;
  --ease: cubic-bezier(.3, 1.45, .42, 1);
  --ease-spring: cubic-bezier(.3, 1.6, .4, 1);
  --dur: 260ms;
  --dur-fast: 180ms;
  --ambient: 7s;
  --fs-scale: 1.08;             /* bigger words for the night reader */
}

/* ---------------- 2 · base ---------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: calc(17px * var(--fs-scale));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.66;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 900ms var(--ease), color 900ms var(--ease);
}

::selection { background: var(--gold); color: #1C2A25; }

img, svg { max-width: 100%; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; }

p { max-width: 66ch; }

a { color: var(--gold-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--laterite); color: #F6F0E2; padding: 10px 18px;
  border-radius: var(--radius-s); font-weight: 700; text-decoration: none;
  transition: top 220ms var(--ease);
}
.skip-link:focus { top: 14px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2.5px solid var(--laterite); outline-offset: 3px; border-radius: 4px; }

/* ---------------- 3 · ambient layers: sky, grain, veil, petals ---------------- */

.sky {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(232, 163, 61, .16), transparent 55%),
    radial-gradient(140% 120% at 20% 110%, rgba(31, 111, 120, .10), transparent 50%),
    var(--paper);
  transition: background 900ms var(--ease);
}
html[data-mode="raat"] .sky {
  background:
    radial-gradient(110% 80% at 50% 120%, rgba(79, 227, 208, .07), transparent 60%),
    radial-gradient(90% 60% at 80% -10%, rgba(255, 180, 84, .05), transparent 55%),
    #0A0E13;
}
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 900ms var(--ease); }
#fx-caustics { opacity: .9; }
#fx-plankton { opacity: 0; }
html[data-mode="raat"] #fx-caustics { opacity: 0; }
html[data-mode="raat"] #fx-plankton { opacity: 1; }

.grain {
  position: fixed; inset: -40px; z-index: 40; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(14px, -8px); }
  100% { transform: translate(-10px, 10px); }
}

/* the mode-morph veil: a wash of the ARRIVING state, 900ms, then gone */
.morph-veil {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(79, 227, 208, .16), transparent 60%),
    radial-gradient(120% 100% at 50% 100%, rgba(204, 44, 100, .10), transparent 55%),
    #0A0E13;
  transition: opacity 450ms var(--ease);
}
.morph-veil.on { opacity: .96; }
.morph-veil.to-susegad {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(232, 163, 61, .20), transparent 60%),
    radial-gradient(120% 100% at 50% 100%, rgba(31, 111, 120, .14), transparent 55%),
    #F6F0E2;
}

.petal-field { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.petal-field svg {
  position: absolute; width: 20px; top: -30px;
  animation: petal-fall var(--fall, 7s) linear var(--delay, 0s) forwards;
}
@keyframes petal-fall {
  0% { transform: translate3d(0, -30px, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .85; }
  100% { transform: translate3d(var(--drift, 40px), 108vh, 0) rotate(var(--spin, 300deg)); opacity: 0; }
}

/* ---------------- 4 · the tide (progress that only rises) ---------------- */

.tide {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: 14px 18px 0; pointer-events: none;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tide.on { opacity: 1; }
.tide-water { position: relative; height: 6px; }
.tide-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, rgba(31,111,120,.25), rgba(31,111,120,.45));
  border-radius: 4px;
  transition: width 900ms var(--ease);
}
html[data-mode="raat"] .tide-fill { background: linear-gradient(90deg, rgba(79,227,208,.2), rgba(79,227,208,.5)); box-shadow: 0 0 12px rgba(79,227,208,.35); }
.tide-wave {
  position: absolute; left: -4px; bottom: 0; width: 46px; height: 14px;
  color: var(--teal); opacity: .8; transform: translateX(0);
  filter: drop-shadow(0 1px 0 rgba(28,42,37,.15));
  transition: left 900ms var(--ease);   /* the wave surfs the waterline, never teleports */
}
.tide-wave path { fill: currentColor; }
.tide-label { display: none; }  /* progress lives in the question kicker — one voice, no collision */
.tide-stones { display: none; }

/* ---------------- 5 · header ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 70;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(18px, 4vw, 40px);
  background: linear-gradient(var(--paper) 62%, transparent);
  border-bottom: 1px solid var(--ink-25);
  border-image: linear-gradient(90deg, transparent, var(--ink-25) 18%, var(--ink-25) 82%, transparent) 1;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-word {
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; position: relative; color: var(--ink);
}
.brand-squiggle {
  position: absolute; left: 0; bottom: -4px; width: 100%; height: 9px;
  color: var(--gold-ink); opacity: .8;
}
.mode-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50); font-weight: 700;
  border: 1.5px solid var(--ink-25); border-radius: 99px;
  padding: 6px 14px; background: var(--paper-2);
  box-shadow: var(--offset-ink);
}
.mode-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
  animation: breathe-dot var(--ambient, 9s) ease-in-out infinite;
}
html[data-mode="raat"] .mode-dot { background: #4FE3D0; box-shadow: 0 0 10px rgba(79,227,208,.8); }
@keyframes breathe-dot { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.5); opacity: 1; } }

/* ---------------- 6 · buttons: letterpress, offset ink, rough edges ---------------- */

.cta {
  --cta-bg: var(--accent-action);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 1.12rem;
  color: var(--accent-action-ink); background: var(--cta-bg);
  border: none; border-radius: var(--radius);
  padding: 17px 34px; cursor: pointer;
  box-shadow: var(--offset-ink), var(--shadow-ink), var(--glow);
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease), background-color 900ms var(--ease);
  min-height: 56px; min-width: min(100%, 260px);
}
.cta::before {  /* the rough ink border, drawn inside the clip so it actually paints */
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--laterite); border-radius: inherit;
  filter: url(#rough2); opacity: .55;
}
html[data-mode="susegad"] .cta::before { border-color: rgba(246,240,226,.4); }
.cta::after {  /* paper tooth on the plate */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.cta-label { position: relative; z-index: 1; }
.cta-shine {  /* one slow gold sweep — the reward light (transform only, never layout) */
  position: absolute; top: -20%; bottom: -20%; left: -35%; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: cta-shine 4.6s var(--ease) infinite;
}
@keyframes cta-shine {
  0% { transform: skewX(-18deg) translateX(0); }
  55%, 100% { transform: skewX(-18deg) translateX(560%); }
}
html[data-mode="raat"] .cta {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 46px rgba(204, 44, 100, .48), 0 14px 34px -14px rgba(0, 0, 0, .8);
}
html[data-mode="raat"] .cta::before { border-color: rgba(255, 243, 247, .35); }
.cta:hover { box-shadow: 5px 7px 0 rgba(140,58,43,.22), var(--shadow-ink), var(--glow); }  /* the lift is the magnet's job now */
html[data-mode="raat"] .cta:hover { box-shadow: 5px 7px 0 rgba(0,0,0,.5), 0 0 34px rgba(204,44,100,.35); }
.cta:active { transform: translateY(1px) scale(.98); box-shadow: 1px 2px 0 rgba(140,58,43,.2), var(--glow); }

.magnet { }
.magnet.mag-on { will-change: transform; transition: none; }  /* instant follow; snap-back keeps the mode spring */

.linky {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  color: var(--ink-70); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--ink-25); padding: 10px 6px; min-height: 44px;
}
.linky:hover { color: var(--laterite); text-decoration-color: var(--laterite); }

/* ---------------- 7 · the hero ---------------- */

.hero {
  position: relative; min-height: 88vh;
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 8vh 22px 12vh;
}
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-compass {
  position: absolute; right: -14%; top: 4%;
  width: clamp(300px, 46vw, 560px); height: auto;
  color: var(--ink-25); opacity: .5;
  animation: compass-turn 140s linear infinite;
  pointer-events: none;
}
@keyframes compass-turn { to { transform: rotate(360deg); } }
.hero-frond { position: absolute; color: var(--teal); opacity: .18; width: clamp(180px, 30vw, 380px); }
.fr-a { left: -6%; bottom: -4%; transform: rotate(168deg); animation: frond-sway 12s ease-in-out infinite; }
.fr-b { right: -4%; top: -6%; transform: rotate(-24deg) scaleX(-1); animation: frond-sway 14s ease-in-out infinite reverse; }
@keyframes frond-sway { 0%, 100% { transform: rotate(168deg) translateX(0); } 50% { transform: rotate(170deg) translateX(10px); } }
.fr-b { animation-name: frond-sway-b; }
@keyframes frond-sway-b { 0%, 100% { transform: rotate(-24deg) scaleX(-1) translateX(0); } 50% { transform: rotate(-22deg) scaleX(-1) translateX(-12px); } }

.hero-stamp {
  position: absolute; left: clamp(8px, 4vw, 48px); top: 5vh;
  width: 118px; height: 118px; opacity: .38;
  pointer-events: none;
}
.stamp-rot { width: 100%; height: 100%; animation: compass-turn 46s linear infinite reverse; }
.stamp-rot text { font-family: var(--sans); font-size: 11.5px; letter-spacing: .34em; fill: var(--ink-50); text-transform: uppercase; }
.seal-mini { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; --seal-fill: var(--laterite); }

.hero-kicker {
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: 22px;
}
.hero-h {
  font-size: clamp(2.6rem, 8.4vw, 5.6rem);
  display: grid; gap: 8px; margin-bottom: 30px;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(246,240,226,.6);
}
html[data-mode="raat"] .hero-h { text-shadow: 0 0 34px rgba(233,238,242,.14); }
.hero-h-accent {
  position: relative; font-style: italic; font-weight: 400;
  color: var(--laterite); display: inline-grid; justify-self: center;
}
.accent-squiggle {
  position: absolute; left: 2%; bottom: -.18em; width: 96%; height: .24em;
  color: var(--gold-ink);
}
.accent-squiggle path { stroke-dasharray: 460; stroke-dashoffset: 460; animation: draw-squiggle 1.3s var(--ease) .5s forwards; }
@keyframes draw-squiggle { to { stroke-dashoffset: 0; } }

.hero-sub { font-size: 1.06rem; color: var(--ink-70); max-width: 62ch; margin: 0 auto 34px; }
.hero-cta { display: grid; gap: 14px; justify-items: center; margin-bottom: 30px; }
.hero-price-line { font-size: .88rem; color: var(--ink-50); }
.hero-price-line strong { color: var(--ink); }
.hero-hints { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; }
.hint-chip {
  font-size: .76rem; font-weight: 600; color: var(--ink-70);
  border: 1.4px solid var(--ink-25); border-radius: 99px;
  padding: 6px 13px; background: var(--paper-2); box-shadow: 2px 3px 0 rgba(140,58,43,.1);
}

/* scroll-in reveals (JS arms them via IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease) var(--rd, 0ms), transform var(--dur) var(--ease) var(--rd, 0ms); }

/* ---------------- 8 · editorial bands ---------------- */

.band { position: relative; padding: clamp(56px, 10vh, 110px) 22px; }
.band > * { max-width: var(--max-w-wide); margin-left: auto; margin-right: auto; }
.band-kicker {
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: 14px;
}
.band-h { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-bottom: 40px; }
.band-h + p { color: var(--ink-70); }

/* the azulejo floor: a hand-tiled Portuguese wash behind the "how" band */
.band-tile { position: absolute; inset: 0; color: var(--teal); opacity: .05; pointer-events: none; }
.band-tile rect { width: 100%; height: 100%; }

/* a hand-drawn wave rule between bands */
.band::after {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(520px, 72vw); height: 12px; color: var(--ink-25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12'%3E%3Cpath d='M0 6 Q8 1 16 6 T32 6 T48 6 T64 6' fill='none' stroke='%231C2A25' stroke-width='1.4' opacity='0.5'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
}
html[data-mode="raat"] .band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12'%3E%3Cpath d='M0 6 Q8 1 16 6 T32 6 T48 6 T64 6' fill='none' stroke='%234FE3D0' stroke-width='1.4' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---- the receipts ---- */
.receipts {
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  align-items: start; max-width: 1060px; margin: 0 auto; padding-top: 8px;
}
.receipt {
  position: relative; background: #FBF7EC; color: #1C2A25;
  padding: 20px 22px 26px; border-radius: 4px 5px 4px 5px;
  box-shadow: 0 18px 34px -18px rgba(28,42,37,.4), 1px 2px 0 rgba(28,42,37,.08);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease);
}
html[data-mode="raat"] .receipt { background: #10151E; color: #E9EEF2; box-shadow: 0 18px 40px -16px rgba(0,0,0,.85); border: 1px solid rgba(79,227,208,.16); }
.receipt:nth-child(1) { transform: rotate(-1.6deg); }
.receipt:nth-child(2) { transform: rotate(1.1deg) translateY(10px); }
.receipt:nth-child(3) { transform: rotate(-.6deg); }
.receipt:hover { transform: rotate(0deg) translateY(-6px); }
.receipt-top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .72rem; letter-spacing: .2em; font-weight: 700; color: var(--ink-50, rgba(28,42,37,.52));
  border-bottom: 1.6px dashed currentColor; padding-bottom: 10px; margin-bottom: 12px;
  text-transform: uppercase;
}
.receipt ul { list-style: none; }
.receipt li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: .95rem; color: rgba(28,42,37,.8);
}
html[data-mode="raat"] .receipt li { color: rgba(233,238,242,.72); }
.receipt-total {
  display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px;
  border-top: 1.6px dashed currentColor;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
}
.receipt-total span:last-child { color: #8C3A2B; }
html[data-mode="raat"] .receipt-total span:last-child { color: #FFB454; }
.receipt:nth-child(3) .receipt-total span:last-child { color: #0E3B32; }
html[data-mode="raat"] .receipt:nth-child(3) .receipt-total span:last-child { color: #4FE3D0; }
.receipt-note {
  margin-top: 12px; text-align: center; font-size: .8rem;
  color: rgba(28,42,37,.55); font-style: italic;
}
html[data-mode="raat"] .receipt-note { color: rgba(233,238,242,.55); }
/* torn bottom edge */
.receipt::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px;
  background:
    linear-gradient(45deg, transparent 33.3%, #FBF7EC 33.3% 66.6%, transparent 66.6%),
    linear-gradient(-45deg, transparent 33.3%, #FBF7EC 33.3% 66.6%, transparent 66.6%);
  background-size: 16px 18px; background-position: 0 -9px;
}
html[data-mode="raat"] .receipt::before {
  background:
    linear-gradient(45deg, transparent 33.3%, #10151E 33.3% 66.6%, transparent 66.6%),
    linear-gradient(-45deg, transparent 33.3%, #10151E 33.3% 66.6%, transparent 66.6%);
  background-size: 16px 18px; background-position: 0 -9px;
}

/* ---- the steps ---- */
.steps { list-style: none; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); max-width: 1060px; }
.step { position: relative; padding: 30px 26px; background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow-ink), var(--offset-ink); border: 1.4px solid var(--ink-25); }
html[data-mode="raat"] .step { border-color: rgba(79,227,208,.2); box-shadow: var(--shadow-ink), var(--glow); }
.step-n {
  position: absolute; top: -26px; left: 22px;
  width: 52px; height: 52px; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--laterite);
  background: var(--paper); border: 2.4px solid var(--laterite);
  border-radius: 50% 48% 52% 50% / 50% 52% 48% 50%;
  box-shadow: 2px 3px 0 rgba(140,58,43,.18);
}
html[data-mode="raat"] .step-n { background: var(--paper-2); color: #4FE3D0; border-color: #4FE3D0; }
.step h3 { font-size: 1.3rem; margin: 16px 0 12px; }
.step p { color: var(--ink-70); font-size: .98rem; }

/* ---- what's inside: book mock + list ---- */
.inside-grid { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .inside-grid { grid-template-columns: 5fr 6fr; gap: 64px; } }
.book-mock {
  position: relative; width: min(340px, 86vw); aspect-ratio: 210/262;
  margin: 0 auto; perspective: 1200px; transform-style: preserve-3d;
  animation: book-float 8s ease-in-out infinite;
}
@keyframes book-float { 0%, 100% { transform: rotateX(6deg) rotateY(-6deg) translateY(0); } 50% { transform: rotateX(4deg) rotateY(-8deg) translateY(-12px); } }
.bm-page {
  position: absolute; inset: 0; border-radius: 6px 12px 12px 6px;
  background: #FBF7EC; box-shadow: 0 30px 50px -24px rgba(28,42,37,.5);
}
html[data-mode="raat"] .bm-page { box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
.bm-back { transform: translateZ(-14px) translateY(10px) rotateY(-7deg); background: #E2D6B8; }
.bm-cover {
  display: grid; content: start; justify-items: center; text-align: center;
  padding: 9% 8%; color: #1C2A25;
  border: 1.5px solid rgba(140,58,43,.5); outline: 1px solid rgba(140,58,43,.22); outline-offset: -7px;
  border-radius: 6px 12px 12px 6px;
  position: relative;
}
.bm-cover::before, .bm-cover::after {
  content: ''; position: absolute; width: 34px; height: 34px; color: #1F6F78; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%231F6F78' stroke-width='1.6'%3E%3Cpath d='M26 6 C33 12 34 19 26 26 C18 19 19 12 26 6 Z'/%3E%3Cpath d='M46 26 C39 33 32 34 26 26 C32 18 39 19 46 26 Z'/%3E%3Cpath d='M26 46 C19 39 18 32 26 26 C33 32 34 39 26 46 Z'/%3E%3Cpath d='M6 26 C12 19 19 18 26 26 C18 33 12 34 6 26 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 34px 34px;
}
.bm-cover::before { top: 10px; left: 10px; }
.bm-cover::after { bottom: 10px; right: 10px; }
.bm-kicker { font-size: .52rem; letter-spacing: .34em; color: #8C3A2B; font-weight: 700; }
.bm-name { font-family: var(--serif); font-size: 1.05rem; margin: 8% 0 4%; color: #1C2A25; }
.bm-sentence { font-family: var(--serif); font-style: italic; font-size: .92rem; color: #8C3A2B; max-width: 22ch; }
.bm-route { position: relative; width: 68%; height: 34px; margin: 7% auto; color: #8C3A2B; }
.bm-route::before {
  content: ''; position: absolute; inset: auto 0 6px 0; height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10'%3E%3Cpath d='M2 5 Q14 1 26 5 T50 5 T74 5 T88 5' fill='none' stroke='%238C3A2B' stroke-width='2' stroke-dasharray='4 5' opacity='.65'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}
.bm-route::after {
  content: ''; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: #E8A33D; border: 1.5px solid #8C3A2B;
}
.bm-meta { font-size: .56rem; letter-spacing: .22em; color: rgba(28,42,37,.5); text-transform: uppercase; }

.inside-list { list-style: none; display: grid; gap: 20px; }
.inside-list li { display: grid; gap: 4px; padding-left: 26px; position: relative; }
.inside-list li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 12px;
  border: 2.2px solid var(--laterite); border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
}
.inside-list strong { font-family: var(--serif); font-weight: 600; font-size: 1.14rem; }
.inside-list span { color: var(--ink-70); font-size: .96rem; }

/* ---- final band ---- */
.final { text-align: center; padding-bottom: 16vh; }
.final .band-h { margin-bottom: 14px; }
.final p { margin: 0 auto 30px; color: var(--ink-70); }
.final .cta { min-width: 300px; }

/* ---- footer ---- */
.calm {
  text-align: center; padding: 44px 22px 60px; color: var(--ink-50);
  font-size: .85rem; line-height: 2;
  border-top: 1.4px solid var(--ink-25);
}
.footer-gloss {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 420px; margin: 0 auto 18px;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-70);
}
.footer-gloss .gloss-line { flex: 1; height: 1px; background: var(--ink-25); }
.footer-gloss .gloss-word { font-size: .78rem; font-family: var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }

/* ---------------- 9 · the quiz ---------------- */

#s-quiz { padding: 12vh 22px 14vh; }
#q-slot { max-width: var(--max-w); margin: 0 auto; }
/* raat: the question column becomes a lantern — glass keeps the plankton
   gorgeous AND the words readable. Legibility is not negotiable. */
html[data-mode="raat"] #q-slot {
  background: rgba(14, 19, 28, .6);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(79, 227, 208, .16);
  border-radius: 26px;
  padding: clamp(22px, 4vw, 36px);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .85);
}
html[data-mode="raat"] .claim-sentence,
html[data-mode="raat"] .claim-h {
  text-shadow: 0 0 30px rgba(233, 238, 242, .25), 0 2px 18px rgba(10, 14, 19, .9);
}

.q-kicker {
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: 18px;
}
.q-label {
  font-size: clamp(1.5rem, 4.4vw, 2.2rem); font-weight: 600;
  margin-bottom: 8px; letter-spacing: -.008em;
}
.q-label.big { font-size: clamp(1.8rem, 5.4vw, 2.75rem); }
.q-helper { color: var(--ink-70); font-size: .98rem; margin: 8px 0 22px; }

/* option cards — letterpress plates */
.opts { display: grid; gap: 14px; margin: 26px 0 8px; }
.opt {
  position: relative; display: flex; align-items: center; gap: 15px;
  min-height: 68px; padding: 16px 22px;
  background: var(--paper-2); color: var(--ink);
  border: 1.8px solid var(--card-edge); border-radius: var(--radius);
  font-family: var(--sans); font-size: 1.04rem; font-weight: 500; text-align: left;
  cursor: pointer; box-shadow: var(--offset-ink);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  overflow: hidden;
}
.opt:hover { transform: translateY(-3px); border-color: var(--card-edge-strong); }
.opt:active { transform: scale(.98); }
.opt:focus-visible { outline-offset: 2px; }
.opt-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50% 48% 52% 50% / 50% 52% 48% 50%;
  border: 2.2px solid var(--card-edge-strong); position: relative;
  transition: background-color var(--dur-fast) var(--ease);
}
.opt.picked { border-color: var(--card-edge-strong); background: var(--wash); }
.opt.picked .opt-dot { background: var(--gold); box-shadow: inset 0 0 0 3px var(--paper-2); }
html[data-mode="raat"] .opt.picked .opt-dot { box-shadow: inset 0 0 0 3px #121822; }
.opt.picked .opt-label { color: var(--ink); font-weight: 700; }
/* the ink bloom: a blot blooms behind the picked option, then settles */
.opt .ink-bloom {
  position: absolute; width: 130px; height: 130px; left: -10px; top: 50%;
  pointer-events: none; opacity: 0; color: var(--laterite);
}
.opt.picked .ink-bloom { animation: ink-bloom 700ms var(--ease) forwards; }
@keyframes ink-bloom {
  0% { opacity: 0; transform: translateY(-50%) scale(.3) rotate(8deg); }
  35% { opacity: .18; }
  100% { opacity: .07; transform: translateY(-50%) scale(1.5) rotate(3deg); }
}
.opt.slim { min-height: 52px; justify-content: center; font-weight: 700; }

/* chips (multi-row questions, days, people-or-someone) */
.chips, .sparks { display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .spark {
  min-height: 48px; padding: 10px 18px;
  background: var(--paper-2); color: var(--ink);
  border: 1.6px solid var(--card-edge); border-radius: 99px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600; cursor: pointer;
  box-shadow: 2px 3px 0 rgba(140,58,43,.12);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
html[data-mode="raat"] .chip, html[data-mode="raat"] .spark { box-shadow: 2px 3px 0 rgba(0,0,0,.45); }
.chip:hover, .spark:hover { transform: translateY(-2px); border-color: var(--card-edge-strong); }
.chip:active, .spark:active { transform: scale(.96); }
.chip.on, .spark.on {
  background: var(--gold); color: #1C2A25; border-color: var(--laterite);
  box-shadow: inset 0 0 0 1.5px rgba(140,58,43,.35), 2px 3px 0 rgba(140,58,43,.2);
}
html[data-mode="raat"] .chip.on, html[data-mode="raat"] .spark.on { color: #0A0E13; }

.q-rowline { margin: 20px 0; }
.q-rowlabel { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ink-50); margin-bottom: 10px; display: block; }
.q-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 18px 0; }

/* inputs — underline plates, serif for the sentence */
.q-input, .q-text {
  width: 100%; background: transparent; border: none;
  border-bottom: 2px solid var(--card-edge);
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  padding: 10px 4px; margin: 10px 0 6px;
  transition: border-color var(--dur-fast) var(--ease);
}
.q-input { font-family: var(--sans); font-size: 1.15rem; }
.q-input:focus, .q-text:focus { outline: none; border-color: var(--card-edge-strong); border-bottom-width: 2.4px; }
.q-text { font-style: italic; resize: none; min-height: 66px; }
.q-text::placeholder, .q-input::placeholder { color: var(--ink-25); font-style: italic; }

.q-preview {
  border: 1.6px dashed var(--card-edge); border-radius: var(--radius-s);
  padding: 14px 18px; margin: 18px 0; background: var(--wash);
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink-70);
  opacity: .55; transition: opacity var(--dur) var(--ease);
}
.q-preview.has { opacity: 1; }
.q-preview-lead { font-style: italic; }
.q-preview-sent { color: var(--laterite); font-weight: 600; }

/* the echo — a line that lands like a stamp */
.q-echo { min-height: 58px; display: grid; align-items: start; margin-top: 18px; }
.echo-line {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 1.02rem; color: var(--ink-70); max-width: 60ch;
  animation: echo-in var(--dur) var(--ease);
}
.echo-check { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: 4px; }
.echo-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check 480ms var(--ease) 140ms forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes echo-in { from { opacity: 0; transform: translateY(10px); } }

.q-recovery {
  margin-top: 20px; padding: 12px 16px;
  border-left: 3px solid var(--gold); color: var(--ink-50);
  font-size: .9rem; font-style: italic; background: var(--wash);
  animation: echo-in var(--dur) var(--ease);
}

/* anticipation pulse on the slot before the next question lands */
#q-slot.is-tense .q-label { animation: tense-hold 300ms var(--ease); }
@keyframes tense-hold { 0% { opacity: 1; } 45% { opacity: .35; } 100% { opacity: 1; } }

.walking-dots { display: flex; gap: 8px; margin: 18px 0 40px; }
.walking-dots span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--teal); opacity: .5;
  animation: walk 1.2s ease-in-out infinite;
}
.walking-dots span:nth-child(2) { animation-delay: .18s; }
.walking-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes walk { 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-7px); opacity: .9; } }

/* ---------------- 10 · the reveal ---------------- */

#s-reveal, #s-claim, #s-pay, #s-delivery { padding: 10vh 22px 14vh; }
#s-reveal > *, #s-claim > *, #s-pay > *, #s-delivery > * { max-width: var(--max-w-wide); margin-left: auto; margin-right: auto; }
.screen-enter { animation: screen-rise var(--dur) var(--ease); }
@keyframes screen-rise { from { opacity: 0; transform: translateY(26px); } }

/* ---- the cover, typed ---- */
.reveal-cover {
  position: relative; max-width: 620px; margin: 0 auto 70px;
  background: #FBF7EC; color: #1C2A25;
  padding: clamp(34px, 7vw, 64px) clamp(24px, 6vw, 56px);
  border: 1.6px solid rgba(140,58,43,.55);
  outline: 1px solid rgba(140,58,43,.25); outline-offset: -9px;
  border-radius: 8px 14px 14px 8px;
  box-shadow: 0 40px 70px -34px rgba(28,42,37,.55), 4px 6px 0 rgba(140,58,43,.14);
  text-align: center;
  animation: screen-rise var(--dur) var(--ease);
  transform: rotate(-.4deg);
}
.reveal-cover::after {   /* paper tooth — a physical journal page, not a flat div */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .5;
}
html[data-mode="raat"] .reveal-cover { box-shadow: 0 40px 80px -30px rgba(0,0,0,.95); border-color: rgba(255,180,84,.5); outline-color: rgba(255,180,84,.2); }
.cover-kicker { font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: #1F6F78; font-weight: 700; margin-bottom: 26px; }
.cover-name { font-size: clamp(1.9rem, 6vw, 2.9rem); font-weight: 600; margin-bottom: 6px; }
.cover-dates { font-size: .84rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(28,42,37,.55); margin-bottom: 30px; }
.cover-sentence {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.8rem); color: #8C3A2B; line-height: 1.45;
  max-width: 26ch; margin: 0 auto 34px;
  border-top: 1.4px solid rgba(140,58,43,.3); border-bottom: 1.4px solid rgba(140,58,43,.3);
  padding: 18px 6px; min-height: 84px;
}
.cover-sentence .caret {
  display: inline-block; width: 2px; height: 1em; background: #8C3A2B;
  vertical-align: -.12em; margin-left: 2px; animation: caret-blink 900ms steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.cover-serial { font-size: .66rem; letter-spacing: .26em; color: rgba(28,42,37,.45); text-transform: uppercase; margin-top: 8px; }

/* ---- the map ---- */
.map-fig {
  margin: 30px auto; max-width: 420px; text-align: center;
}
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .map-outline { fill: var(--wash); stroke: var(--ink-70); stroke-width: 2.2; stroke-linejoin: round; filter: url(#rough2); }
html[data-mode="raat"] .map-svg .map-outline { fill: rgba(79,227,208,.05); stroke: rgba(233,238,242,.6); }
.map-svg .map-river { stroke: var(--teal); stroke-width: 1.4; opacity: .5; fill: none; }
.map-svg .map-route { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 5 8; filter: url(#rough2); }
html[data-mode="raat"] .map-svg .map-route { stroke: #4FE3D0; filter: drop-shadow(0 0 5px rgba(79,227,208,.65)); }
.map-svg .map-pin { animation: pin-pop 620ms var(--ease-spring) both; transform-box: fill-box; transform-origin: center; }
@keyframes pin-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.24); } to { transform: scale(1); opacity: 1; } }
.map-svg .map-pin circle { fill: var(--paper); stroke: var(--laterite); stroke-width: 2.2; }
.map-svg .map-pin text { fill: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 11px; text-anchor: middle; }
.map-fig figcaption { font-size: .74rem; color: var(--ink-50); font-style: italic; margin-top: 10px; }

/* ---- the day, written in full ---- */
.reveal-days { max-width: 680px; margin: 0 auto; }
.day {
  position: relative; background: var(--paper-2);
  border: 1.5px solid var(--ink-25); border-radius: var(--radius);
  box-shadow: var(--shadow-ink), var(--offset-ink);
  padding: clamp(24px, 5vw, 44px); margin: 30px 0;
}
html[data-mode="raat"] .day { border-color: rgba(79,227,208,.22); box-shadow: var(--shadow-ink), var(--glow); }
.day-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.day-n {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700;
  border: 1.6px solid var(--gold-ink); border-radius: 99px; padding: 5px 12px;
}
.day-title { font-family: var(--serif); font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 600; }
.day-mood { color: var(--ink-70); font-style: italic; margin: 10px 0 26px; }

.blk { position: relative; padding: 14px 0 14px 84px; border-top: 1.4px solid var(--ink-25); }
.blk:first-of-type { border-top: none; }
.blk-time {
  position: absolute; left: 0; top: 16px; width: 68px; text-align: right;
  font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.blk-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; margin-bottom: 6px; }
.blk-kicker-inline {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-left: 10px; vertical-align: 2px;
}
.blk-why { color: var(--ink-70); font-size: .97rem; }
.blk-enjoy { list-style: none; margin: 10px 0 4px; }
.blk-enjoy li { position: relative; padding: 2.5px 0 2.5px 24px; color: var(--ink-70); font-size: .93rem; }
.blk-enjoy li::before {
  content: ''; position: absolute; left: 4px; top: 12px; width: 9px; height: 9px;
  border: 1.8px solid var(--teal); border-radius: 60% 40% 55% 45%;
}
.blk-meta { font-size: .8rem; color: var(--ink-50); margin-top: 8px; }
.blk.rest { background: var(--wash); border-radius: var(--radius-s); }
.blk.sunrise .blk-time { color: var(--gold-ink); }
.blk.sunrise::after, .blk.evening::after {
  content: ''; position: absolute; left: 26px; top: 42px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold); opacity: .5;
}
.blk.evening::after { background: var(--laterite); }

.nrp {
  margin-top: 14px; padding: 16px 18px 16px 52px; position: relative;
  background: rgba(14,59,50,.08); border-left: 3.5px solid var(--palm); border-radius: var(--radius-s);
  color: var(--ink-70); font-size: .93rem;
}
html[data-mode="raat"] .nrp { background: rgba(79,227,208,.07); border-left-color: #4FE3D0; }
.nrp::before { content: ''; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset -4px 0 0 0 var(--palm); }
html[data-mode="raat"] .nrp::before { box-shadow: inset -4px 0 0 0 #4FE3D0; }
.nrp-kicker { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--palm); display: block; margin-bottom: 6px; }
html[data-mode="raat"] .nrp-kicker { color: #4FE3D0; }

.fork { margin: 26px 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork-opt {
  position: relative; background: var(--paper); border: 1.6px dashed var(--card-edge);
  border-radius: var(--radius-s); padding: 18px 18px 16px;
}
.fork-opt::before {
  content: attr(data-fork); position: absolute; top: -13px; left: 14px;
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
  background: var(--paper); border: 1.8px solid var(--card-edge-strong);
  border-radius: 50% 46% 52% 48%; width: 27px; height: 27px;
  display: grid; place-items: center; color: var(--laterite);
}
.fork-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; margin: 4px 0 6px; }
.fork-why { font-size: .9rem; color: var(--ink-70); }

.conflict {
  margin-top: 10px; padding: 9px 13px; font-size: .8rem;
  border: 1.4px dashed var(--gold-ink); border-radius: var(--radius-s);
  color: var(--ink-70); background: var(--wash);
}
.conflict b { color: var(--gold-ink); letter-spacing: .12em; }

.food { margin: 26px 0; }
.food ul { list-style: none; display: grid; gap: 12px; }
.food li { padding: 12px 16px; background: var(--paper); border-radius: var(--radius-s); border: 1.4px solid var(--ink-25); font-size: .95rem; color: var(--ink-70); }
.food strong { color: var(--ink); font-family: var(--serif); }
.food em { display: block; font-size: .78rem; color: var(--ink-50); margin-top: 3px; }
.blk-kicker { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin: 26px 0 12px; }

.fallback-box {
  margin-top: 22px; padding: 16px 18px;
  border: 1.4px solid var(--ink-25); border-left: 3.5px solid var(--teal);
  border-radius: var(--radius-s); font-size: .92rem; color: var(--ink-70); background: var(--wash);
}
.meeting-box {
  margin-top: 22px; padding: 16px 18px;
  border: 1.4px solid var(--ink-25); border-left: 3.5px solid var(--laterite);
  border-radius: var(--radius-s); font-size: .92rem; color: var(--ink-70); background: var(--paper);
}

/* ---- locked days: real, folded, sealed ---- */
.days-locked { list-style: none; display: grid; gap: 16px; margin: 40px 0 20px; }
.day.locked {
  position: relative; overflow: hidden;
  padding: 18px 60px 18px 24px; margin: 0;
  background: var(--paper-2); box-shadow: var(--offset-ink);
  display: grid; gap: 3px; transition: transform var(--dur-fast) var(--ease);
}
.day.locked:hover { transform: translateY(-3px) rotate(-.4deg); }
.day.locked::before {  /* the folded corner */
  content: ''; position: absolute; right: 0; top: 0; border-style: solid;
  border-width: 0 42px 42px 0; border-color: var(--paper) var(--paper-3) transparent var(--paper-3);
  box-shadow: -3px 3px 8px rgba(28,42,37,.14);
}
.day.locked::after {  /* the wax seal on the fold */
  content: ''; position: absolute; right: 6px; top: 6px; width: 26px; height: 26px;
  background: var(--seal, #8C3A2B); border-radius: 50% 46% 54% 52% / 52% 50% 46% 54%;
  box-shadow: inset -2px -3px 0 rgba(0,0,0,.22), 1px 2px 0 rgba(140,58,43,.25);
  opacity: .9;
}
.day-locked-head { display: flex; gap: 12px; align-items: baseline; }
.day-locked-n { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.day-locked-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--ink-70); }
.day-locked-note { font-size: .82rem; color: var(--ink-50); font-style: italic; }

.claim-cta-wrap { text-align: center; margin: 60px auto 0; display: grid; gap: 16px; justify-items: center; }
.claim-cta-wrap .cta { min-width: 300px; }
.cta-sub { font-size: .85rem; color: var(--ink-50); max-width: 60ch; }

/* ---------------- 11 · the claim ---------------- */

.claim-sentence {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.7rem, 5.6vw, 2.7rem); line-height: 1.3; text-align: center;
  color: var(--ink); max-width: 24ch; margin: 0 auto 40px;
  animation: screen-rise var(--dur) var(--ease);
}
html[data-mode="raat"] .claim-sentence { color: #E9EEF2; text-shadow: 0 0 30px rgba(79,227,208,.25); }
.claim-h { text-align: center; font-size: clamp(1.5rem, 4.6vw, 2.2rem); margin-bottom: 34px; }

.claim-mirror, .claim-anchor, .claim-refund {
  max-width: 620px; margin: 0 auto 18px; padding: 20px 24px;
  background: var(--paper-2); border: 1.4px solid var(--ink-25); border-radius: var(--radius);
  box-shadow: var(--offset-ink); font-size: .98rem; color: var(--ink-70);
}
html[data-mode="raat"] .claim-mirror, html[data-mode="raat"] .claim-anchor, html[data-mode="raat"] .claim-refund { border-color: rgba(79,227,208,.22); box-shadow: var(--glow); }
.claim-anchor { border-style: dashed; font-variant-numeric: tabular-nums; }
.claim-refund { border-left: 3.5px solid var(--teal); }
.claim-refund.quiet { border-left-color: var(--gold-ink); }
.demo-note {
  max-width: 620px; margin: 0 auto 18px; padding: 12px 18px;
  border: 1.6px dashed var(--gold-ink); border-radius: var(--radius-s);
  color: var(--ink-70); font-size: .88rem; background: var(--wash); text-align: center;
}
.claim-privacy { font-size: .8rem; color: var(--ink-50); }
.raat-brake {
  max-width: 620px; margin: 14px auto 0; text-align: center;
  font-size: .86rem; font-style: italic; color: var(--ink-50);
  border-top: 1.4px solid var(--ink-25); padding-top: 14px;
}

/* ---------------- 12 · payment & delivery ---------------- */

.pay-card {
  max-width: 560px; margin: 0 auto; padding: clamp(26px, 6vw, 44px);
  background: var(--paper-2); border: 1.6px solid var(--card-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-ink), var(--offset-ink); text-align: center;
}
html[data-mode="raat"] .pay-card { border-color: rgba(79,227,208,.3); box-shadow: var(--shadow-ink), var(--glow); }
.pay-title { font-size: 1.5rem; margin-bottom: 16px; }
.pay-body { color: var(--ink-70); font-size: .98rem; margin-bottom: 18px; }
.pay-body code { background: var(--wash); padding: 2px 7px; border-radius: 6px; font-size: .85em; }
.pay-amount {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--ink);
  border-top: 1.4px dashed var(--ink-25); border-bottom: 1.4px dashed var(--ink-25);
  padding: 14px 0; margin: 20px 0;
}

.deliver { text-align: center; display: grid; justify-items: center; gap: 14px; }
.deliver .diya { width: 96px; height: 68px; --seal-fill: var(--laterite); --gold-fill: var(--gold); filter: drop-shadow(0 8px 30px rgba(232, 163, 61, .5)); }
.diya-flame { animation: flame-flicker 1.1s ease-in-out infinite; transform-origin: 40px 22px; }
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-1.5deg); }
  30% { transform: scale(1.13, 1.22) rotate(1.2deg); }
  60% { transform: scale(.94, 1.05) rotate(-1deg); }
}
.deliver-line { font-family: var(--serif); font-size: clamp(1.4rem, 4.4vw, 2rem); font-weight: 600; }
.deliver-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

.resume-note {
  margin: 22px auto 0; max-width: 520px; text-align: center;
  padding: 14px 18px; border: 1.4px dashed var(--gold-ink); border-radius: var(--radius-s);
  color: var(--ink-70); font-size: .92rem; background: var(--wash);
}

/* ---------------- 13 · toast ---------------- */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 120; opacity: 0; pointer-events: none;
  background: var(--palm); color: #F6F0E2; font-size: .92rem; font-weight: 600;
  padding: 13px 22px; border-radius: 99px; box-shadow: var(--shadow-ink);
  max-width: min(88vw, 480px); text-align: center;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
html[data-mode="raat"] #toast { background: #10151E; color: #4FE3D0; border: 1.4px solid rgba(79,227,208,.35); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 14 · viewport behaviour ---------------- */

@media (min-width: 900px) {
  .hero { text-align: left; }
  .hero > * { margin-left: 0; max-width: 640px; }
  .hero-cta { justify-items: start; }
  .hero-hints { justify-content: start; }
  .hero-compass { right: 4%; top: 8%; }
}
@media (max-width: 900px) {
  .hero-stamp { display: none; }
}
@media (max-width: 640px) {
  .hero-compass { right: -30%; opacity: .4; }
  .hero-frond { opacity: .1; }
  
  .tide-label { display: none; }
  .blk { padding-left: 0; padding-top: 40px; }
  .blk-time { width: 100%; text-align: left; top: 12px; }
  .blk.sunrise::after, .blk.evening::after { left: auto; right: 14px; top: 18px; }
  .brand-word { font-size: 1.28rem; }
  .mode-pill { padding: 5px 10px; font-size: .64rem; }
  .nrp { padding-left: 18px; padding-top: 34px; }
  .nrp::before { left: 16px; top: 12px; }
}

/* ---------------- 15 · reduced motion: everything rests ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html { scroll-behavior: auto; }
  .grain, .sky canvas, .cta-shine { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .accent-squiggle path { stroke-dashoffset: 0 !important; }
  .book-mock { animation: none; }
}

/* ---------------- 16 · print (the honest fallback, first-class) ---------------- */

@media print {
  .sky, .grain, .tide, .topbar, .calm, .morph-veil, .petal-field, #toast,
  #s-land, #s-quiz, #s-reveal, #s-claim, #s-pay, #s-delivery, .skip-link { display: none !important; }
  body { background: #fff; color: #1C2A25; }
  html {
    --paper: #fff; --paper-2: #fff; --paper-3: #f2efe6;
    --ink: #1C2A25; --ink-70: #3A473F; --ink-50: #55605A; --ink-25: #BBB;
    --gold-ink: #8A5B12; --teal: #1F6F78; --laterite: #8C3A2B;
  }
  #s-print { display: block !important; }
  .print-only { display: block; }
  .page-break { page-break-before: always; }
  /* the print book, styled like the book */
  .pv { font-family: var(--serif); color: #1C2A25; line-height: 1.5; }
  .pv h1 { font-size: 20pt; margin-bottom: 4pt; }
  .pv h2 { font-size: 14pt; margin: 6pt 0 2pt; page-break-after: avoid; }
  .pv-sentence { font-style: italic; color: #8C3A2B; font-size: 13pt; }
  .pv-meta, .pv-note, .pv-mood { font-size: 9pt; color: #55605A; }
  .pv-blk { font-size: 10.5pt; margin: 0 0 8pt; }
  .pv-blk strong { font-family: var(--serif); }
  .pv-letter { font-style: italic; font-size: 11.5pt; }
  .pv-day { margin-top: 14pt; }
}
.print-only { display: none; }