/* PARA Life — site styles
   Palette is sampled from the illustration set: cream paper, ink-brown line art,
   terracotta flag, butter, sage, the mint gingham of the suitcase house. */

@font-face { font-family: "PARA Sans"; src: url(../assets/fonts/para-sans-400.woff2?v=23) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PARA Sans"; src: url(../assets/fonts/para-sans-500.woff2?v=23) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PARA Sans"; src: url(../assets/fonts/para-sans-700.woff2?v=23) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PARA Hand"; src: url(../assets/fonts/para-hand-400.woff2?v=23) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PARA Hand"; src: url(../assets/fonts/para-hand-700.woff2?v=23) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FAF4E4;
  --paper-2: #F3E9CF;
  --ink: #3A2A1E;
  --ink-2: #6E5846;
  --ink-3: #9C8672;
  --line: rgba(58, 42, 30, .14);
  --terracotta: #D9714A;
  --terracotta-2: #C45F3A;
  --butter: #F6DE9C;
  --peach: #F4C7A6;
  --sage: #B7C99A;
  --mint: #CFE7D6;
  --teal: #81B6B5;
  --teal-2: #6FA5A4;

  --sans: "PARA Sans", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --hand: "PARA Hand", "Chalkboard SE", "Comic Neue", "PARA Sans", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 28px;
  --section: clamp(96px, 13vw, 176px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Paper grain over everything, like the textured fills in the art. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  background: url(../assets/img/grain.png) repeat;
  background-size: 180px;
  opacity: .5;
}
img { display: block; max-width: 100%; height: auto; }

/* ---------- light: the page lives through one day, lit like the house in the app ----------
   The app lights the house with three stacks of layers — dusk, lights on, lights off —
   weighted by its day-night curve. Here the scroll is the clock: JS runs that curve and
   sets --dusk / --on / --off (0..1). Colours come from css/light.css (tools/build_light.py):
   the ambient stays a real multiply, as in the app; every other blend is solved ahead of
   time, so the browser never does colour-dodge or hard-light.
     .sky            the ambient multiplies over the page (the garden), the pond glow, fireflies
     framed pictures the rooms: they keep their own light (the app cuts its furniture out
                     of the global filters the same way) and carry the band of light that
                     rings the house — the sunset rim at dusk, lamplight spilling out at night */
:root {
  --dusk: 0; --on: 0; --off: 0;
  --hw: min(100vw, 1000px); /* one house width: in the app the house fills the phone's width */
  --fg: #3A2A1E; --fg-2: #6E5846; --fg-3: #9C8672; --fg-accent: #C45F3A; --fg-err: #8E2E14;
  /* dusk [2] colour-dodge: a rim of low sun round the house, 5% of its width, fading by 10% */
  --glow-dusk: 0 0 calc(var(--hw) * .05) calc(var(--hw) * .035) rgb(var(--dusk-rim) / calc(var(--dusk-rim-a) * var(--dusk)));
}
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--paper); isolation: isolate; }
.sky > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__amb, .sky__pond { opacity: 0; will-change: opacity; }
/* [1] in the app's order — lightsOn, lightsOff, dusk — each multiplied over what's beneath */
.sky__amb { mix-blend-mode: multiply; }
.sky__amb--on { background: var(--paint-on); }
.sky__amb--off { background: var(--paint-off); }
.sky__amb--dusk { background: var(--paint-dusk); }
/* [2] the pond at the foot of the garden, just off the page's lower-left corner */
.sky__pond--on { background: radial-gradient(ellipse 56% 17% at 0% 100%, rgb(var(--pond-on) / var(--pond-on-a)), rgb(var(--pond-on) / 0)); }
.sky__pond--off { background: radial-gradient(ellipse 56% 17% at 0% 100%, rgb(var(--pond-off) / var(--pond-off-a)), rgb(var(--pond-off) / 0)); }
/* words that sit straight on the page take its light (JS picks --fg* for the page behind them)… */
.day__pin, .letter__head, .soul__copy, .walk__copy, .join__copy {
  --ink: var(--fg); --ink-2: var(--fg-2); --ink-3: var(--fg-3); --terracotta-2: var(--fg-accent);
  color: var(--ink);
}
/* …but not what sits on its own paper */
.day__window, .day__place, .waitlist__row, .btn {
  --ink: #3A2A1E; --ink-2: #6E5846; --ink-3: #9C8672; --terracotta-2: #C45F3A;
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hand { font-family: var(--hand); }
.br-sm { display: none; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--hand);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--terracotta-2);
  margin-bottom: 14px;
}
.h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
}
.caption { color: var(--ink-2); font-size: 17px; text-align: center; }
h1, h2, h3, .caption, .day__caption, .join__lead { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- buttons: stickers with an ink outline ---------- */
.btn {
  --bg: var(--terracotta);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: #FFF8EA;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transform: translateY(0);
  transition: transform .12s steps(2), box-shadow .12s steps(2), background-color .2s;
  white-space: nowrap;
}
.btn:hover { background: var(--terracotta-2); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .link:focus-visible, .now__next:focus-visible, .day__stops button:focus-visible, input:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 3px;
}
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
.link {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  color: var(--ink);
}
.link span { display: inline-block; transition: transform .2s steps(2); }
.link:hover span { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: 68px;
  padding: 0 var(--gutter);
  transition: background-color .3s, box-shadow .3s;
}
.nav.is-solid { background: rgba(250, 244, 228, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav__links a { text-decoration: none; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.lang {
  display: inline-flex;
  padding: 2px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #FFF9EC;
}
.lang button {
  border: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .2s steps(2), color .2s steps(2);
}
.lang button[aria-pressed="true"] { background: var(--ink); color: #FFF9EC; }
.lang button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* ---------- windows (hand-inked frames) ---------- */
.window {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 2px 0 rgba(58, 42, 30, .08), 0 30px 60px -28px rgba(58, 42, 30, .35), var(--glow-dusk);
  isolation: isolate;
}
.window::after, .boil-frame::after {
  content: "";
  position: absolute; inset: 0;
  border: 3px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
  z-index: 20;
  filter: url(#boil-a);
}
.boil-frame::after { animation: boil .5s steps(1, end) infinite; }
@keyframes boil {
  0% { filter: url(#boil-a); }
  33% { filter: url(#boil-b); }
  66% { filter: url(#boil-c); }
}

/* ---------- hero: pinned — headline first, then a round window rises onto Para ---------- */
.hero { position: relative; height: 180vh; }
@supports (height: 100svh) { .hero { height: 180svh; } }
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__copy {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(104px, 16vh, 168px) var(--gutter) 0;
  text-align: center;
  will-change: opacity, transform;
}
.js .hero__copy > * { animation: rise .9s var(--ease) both; }
.js .hero__copy > :nth-child(2) { animation-delay: .08s; }
.js .hero__copy > :nth-child(3) { animation-delay: .16s; }
.js .hero__copy > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  padding: 6px 14px 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #FFF9EC;
  font-size: 14px; font-weight: 500;
  margin-bottom: 28px;
}
.kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero__title {
  font-size: clamp(48px, 7vw, 108px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.04em;
  margin-bottom: 26px;
}
.is-zh .hero__title { font-size: clamp(42px, 6vw, 92px); line-height: 1.1; letter-spacing: -.02em; }
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble__line {
  position: absolute; left: -2%; bottom: -.08em;
  width: 104%; height: .26em;
  overflow: visible;
  z-index: -1;
}
.scribble__line path {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: .85;
  animation: draw .9s .7s steps(9) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-2); line-height: 1.8; margin-bottom: 32px; max-width: 34em; }
.hero__cta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }

/* The round window: only a close-up of Para, never the whole house. JS drives
   --rise / --s (it rises and grows into the middle) and --zoom (leaning in). */
.peek {
  --d: min(62vh, 600px, calc(100vw - 2 * var(--gutter)));
  position: absolute; left: 50%; top: calc(50% + 30px);
  width: var(--d); height: var(--d);
  margin: 0;
  transform: translate(-50%, -50%) translate3d(0, var(--rise, 0px), 0) scale(var(--s, 1));
  will-change: transform;
}
@supports (height: 100svh) { .peek { --d: min(62svh, 600px, calc(100vw - 2 * var(--gutter))); } }
.js .peek { animation: fade 1s .25s var(--ease) both; }
.peek__window {
  position: absolute; inset: 0;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: var(--paper-2);
  isolation: isolate;
}
.peek::before { /* soft drop shadow under the round window */
  content: ""; position: absolute; inset: 6% 8% -4%;
  border-radius: 50%;
  background: rgba(58, 42, 30, .22);
  filter: blur(28px);
  z-index: -1;
}
.peek__ring {
  position: absolute; inset: 0;
  border: 3.5px solid var(--ink);
  border-radius: 50%;
  filter: url(#boil-a);
  pointer-events: none;
}
.peek__cam { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); will-change: transform; }
.peek__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.peek__video.is-on { opacity: 1; }
#house.is-switching { animation: flicker .36s steps(3) both; }
@keyframes flicker { 0% { opacity: .2; } 50% { opacity: .7; } 100% { opacity: 1; } }
@media (min-width: 961px) { .now__text { min-width: 12.5em; } }

.now {
  position: absolute; left: 50%; bottom: -24px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #FFF9EC;
  box-shadow: 0 4px 0 var(--ink);
  white-space: nowrap;
  font-size: 15px;
  opacity: var(--pill, 1);
  transition: opacity .2s steps(2);
}
.now__dot { width: 9px; height: 9px; border-radius: 50%; background: #7DAA5F; box-shadow: 0 0 0 3px rgba(125, 170, 95, .25); animation: blink 2s steps(2) infinite; }
.now.is-sim .now__dot { background: transparent; border: 2px solid var(--ink-3); box-shadow: none; animation: none; }
.now__time { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.now__text { color: var(--ink-2); }
.now__next {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-left: 4px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--butter);
  cursor: pointer;
  transition: transform .3s steps(3);
}
.now__next:hover { transform: rotate(120deg); }
.now__next svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pinned chapters ----------
   Without .motion (reduced motion / no JS) every chapter reads as a plain section.
   With it, each chapter's stage sticks while JS plays its beats against the scroll. */
.chapter { position: relative; }
.chapter__pin { padding: var(--section) var(--gutter); }
.motion .chapter__pin {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  padding: 84px var(--gutter) 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
/* pinned lengths (height − 100) are mirrored in js/site.js — chapter(id, span, …) */
.motion .story { height: 190vh; }
.motion .how { height: 205vh; }
.motion .letter { height: 200vh; }
.motion .walk { height: 220vh; }
@supports (height: 100svh) {
  .motion .story { height: 190svh; }
  .motion .how { height: 205svh; }
  .motion .letter { height: 200svh; }
  .motion .walk { height: 220svh; }
}

/* ---------- origin: the comic arrives in three beats ---------- */
.story__pin { text-align: center; }
.story__head .h2 { margin-bottom: clamp(28px, 4vh, 52px); }
.comic {
  position: relative;
  width: min(1020px, 100%);
  aspect-ratio: 1532 / 945;
  margin: 0 auto;
  /* the smoke and star trail run off the top of the source art — let them fade out */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}
.motion .comic { width: min(1020px, 100%, calc((100vh - 330px) * 1532 / 945)); }
@supports (height: 100svh) { .motion .comic { width: min(1020px, 100%, calc((100svh - 330px) * 1532 / 945)); } }
.comic__beat { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity, transform; }
.story__caption { margin-top: clamp(20px, 3.5vh, 44px); }

/* ---------- how: three beats on one card ---------- */
.how__head { text-align: center; margin-bottom: clamp(28px, 5vh, 64px); }
.how__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  width: min(1080px, 100%);
  margin: 0 auto;
}
.how__stage {
  position: relative;
  justify-self: end;
  width: min(460px, 100%);
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint);
  transition: background-color .3s steps(3);
}
.motion .how__stage { width: min(460px, 100%, calc(100vh - 330px)); }
@supports (height: 100svh) { .motion .how__stage { width: min(460px, 100%, calc(100svh - 330px)); } }
.motion .how__stage[data-beat="0"] { background: var(--butter); }
.motion .how__stage[data-beat="2"] { background: var(--peach); }
.how__clues { position: absolute; inset: 11%; }
.how__clues img { position: absolute; width: 40%; filter: drop-shadow(0 3px 0 rgba(58, 42, 30, .18)); will-change: transform, opacity; }
.how__clues img:nth-child(1) { left: 2%; top: 4%; rotate: -8deg; }
.how__clues img:nth-child(2) { right: 2%; top: 0; rotate: 6deg; }
.how__clues img:nth-child(3) { left: 8%; bottom: 0; rotate: 5deg; }
.how__clues img:nth-child(4) { right: 6%; bottom: 6%; rotate: -5deg; }
.how__para { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.how__letter { position: absolute; left: 16%; right: 16%; top: 20%; will-change: transform, opacity; }
.how__letter img:first-child { width: 100%; }
.how__star { position: absolute; width: 34%; right: -10%; top: -12%; rotate: 12deg; }
html:not(.motion) .how__clues, html:not(.motion) .how__letter { display: none; }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.how__step h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.01em; margin: 2px 0 8px; }
.how__step p { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); max-width: 24em; }
.step__no { display: block; font-size: 15px; color: var(--ink-3); }
.motion .how__step { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .3s steps(3), transform .3s steps(3); }
.motion .how__step.is-on { opacity: 1; transform: none; }

/* ---------- setting out: it heads out with your picks; dusk falls ---------- */
.walk__copy { text-align: center; max-width: 720px; margin: 0 auto clamp(24px, 4vh, 44px); padding: 0 var(--gutter); }
.walk__copy .h2 { margin-bottom: 10px; }
.walk__copy p:last-child { color: var(--ink-2); font-size: 17px; }
.walk .chapter__pin { padding-left: 0; padding-right: 0; }
.walk__band { position: relative; width: 100%; height: clamp(260px, 38vw, 520px); overflow: hidden; background: #DCEBEF; box-shadow: var(--glow-dusk); }
.motion .walk__band { height: clamp(240px, 46vh, 520px); flex: none; }
@supports (height: 100svh) { .motion .walk__band { height: clamp(240px, 46svh, 520px); } }
/* Baked loop, street scrolling right, Para at 31% of the band height (app banner).
   The clip stacks day over night; only the day half shows here (JS sizes it exactly),
   and the night half is drawn over it on the canvas as dusk falls. */
.walk__video {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 200%;
  max-width: none;
  object-fit: cover; object-position: 50% 0;
  display: block;
}
.walk__night { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.note {
  position: absolute; z-index: 3;
  max-width: min(280px, 40vw);
  padding: 9px 14px 11px;
  background: #FFF9EC;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  font-size: 14px; line-height: 1.5;
  text-align: left;
  will-change: transform, opacity;
}
.note__k { font-size: 13px; color: var(--terracotta-2); margin-bottom: 2px; }
.note--a { left: 6%; top: 9%; rotate: -3deg; }
.note--b { right: 6%; top: 20%; rotate: 2.5deg; }

/* ---------- a day: pinned — one scroll is one day ---------- */
.day { position: relative; height: calc(6 * 60vh + 100vh); }
@supports (height: 100svh) { .day { height: calc(6 * 60svh + 100svh); } }
.day__pin {
  --win: min(1180px, calc(100vw - 2 * var(--gutter)), calc((100vh - 270px) * 1920 / 1236));
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(12px, 2vh, 22px);
  padding: 84px var(--gutter) 24px;
}
@supports (height: 100svh) { .day__pin { --win: min(1180px, calc(100vw - 2 * var(--gutter)), calc((100svh - 270px) * 1920 / 1236)); } }
.day__head { width: var(--win); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.day__head .eyebrow { margin-bottom: 8px; }
.day__now { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.day__clock { display: flex; font-size: clamp(52px, 7.4vw, 112px); line-height: .9; font-weight: 700; }
.day__clock span { display: inline-block; width: .6em; text-align: center; }
.day__clock .c { width: .28em; }
.day__place { font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); padding: 2px 12px; border-radius: 8px; background: var(--butter); }
.day__window { width: var(--win); }
.day__scenes { position: relative; aspect-ratio: 1920 / 1236; }
.day__scene { position: absolute; inset: 0; visibility: hidden; }
.day__scene video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hand-inked iris that opens onto the next place */
.day__iris {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border: 3px solid var(--ink);
  border-radius: 50%;
  filter: url(#boil-a);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}
.day__caption { width: var(--win); text-align: center; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); min-height: 1.7em; }
.pop { animation: pop .36s steps(3) both; }
@keyframes pop { from { opacity: 0; } }
.day__stops { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.day__stops button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: none;
  padding: 4px 7px;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 13px;
}
.day__stops .t { font-family: var(--hand); }
.day__stops .d { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.day__stops button[aria-current="step"] { color: var(--ink); font-weight: 700; }
.day__stops button[aria-current="step"] .d { background: var(--terracotta); border-color: var(--ink); }

/* ---------- letter: it arrives, then writes itself line by line ---------- */
.letter__pin { text-align: center; }
.letter__head { margin-bottom: clamp(24px, 4vh, 52px); }
.letter__paper { position: relative; width: min(580px, 100%); margin: 0 auto; will-change: transform; border-radius: 4.5% / 4.9%; box-shadow: var(--glow-dusk); }
.motion .letter__paper { width: min(580px, 100%, calc((100vh - 250px) * 1000 / 926)); }
@supports (height: 100svh) { .motion .letter__paper { width: min(580px, 100%, calc((100svh - 250px) * 1000 / 926)); } }
.letter__text {
  position: absolute;
  left: 17%; right: 17%; top: 12.5%; bottom: 29%;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
  text-align: left;
  font-size: clamp(12.5px, 2.75vw, 16.5px);
  line-height: 1.85;
  color: #5B4432;
}
.letter__body { display: grid; gap: .55em; }
html:not(.is-zh) .letter__body { font-family: var(--hand); line-height: 1.6; letter-spacing: .005em; }
.letter__body .ps { margin-top: .35em; font-size: .92em; color: #7A5F49; }
.letter__sign { align-self: flex-end; font-size: 1.25em; font-weight: 700; color: var(--terracotta-2); margin-top: .2em; }

/* ---------- about Para: static on purpose — a breather between pinned chapters ---------- */
.soul__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section) var(--gutter);
}
.soul__art { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--glow-dusk); }
.soul__art img { width: 100%; }
.soul__art::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: inherit; filter: url(#boil-a); }
.soul .h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.beliefs li { display: flex; gap: 18px; align-items: flex-start; padding-top: 26px; border-top: 2px dashed var(--line); }
.beliefs li:nth-child(2) { transition-delay: .1s; }
.beliefs li:nth-child(3) { transition-delay: .2s; }
.beliefs img { width: 64px; flex: none; margin-top: -4px; }
.beliefs h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.beliefs p { color: var(--ink-2); font-size: 16px; }

/* ---------- join ---------- */
.join {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: var(--section) max(var(--gutter), calc((100vw - 1320px) / 2)) calc(var(--section) * .9);
  overflow: hidden;
}
.join::before {
  /* gingham, continuing the pattern the suitcase illustration sits on */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 34px, transparent 34px 68px);
  opacity: calc(.7 - .4 * (var(--on) + var(--off)));
}
.join > * { position: relative; }
.join .h2 { margin-bottom: 14px; }
.join__lead { font-size: 18px; margin-bottom: 30px; color: var(--ink-2); }
.join__art {
  position: relative;
  margin: 0;
  aspect-ratio: 1800 / 1159;
  isolation: isolate;
}
.join__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
/* lightsOn [3] hard-light spill + [4] screen lift, ringing the house */
.join__art::before {
  content: ""; position: absolute; inset: -12% -9%; z-index: -1;
  background:
    radial-gradient(closest-side, rgb(var(--on-spill) / calc(var(--on-spill-a) * var(--on))) 58%, rgb(var(--on-spill) / 0) 100%),
    radial-gradient(closest-side, rgb(var(--on-lift) / calc(var(--on-lift-a) * var(--on))) 72%, rgb(var(--on-lift) / 0) 100%);
}
/* the lights come on (with a hand-drawn flicker) once the finale is in view, and go out
   when Para goes to sleep */
.motion .join__on, .motion .join__art::before { opacity: 0; }
.motion .join.is-lit .join__on, .motion .join.is-lit .join__art::before { animation: lights 1.2s steps(1, end) .3s forwards; }
.motion .join.is-lit.is-asleep .join__on, .motion .join.is-lit.is-asleep .join__art::before,
html:not(.motion) .join.is-asleep .join__on, html:not(.motion) .join.is-asleep .join__art::before { animation: none; opacity: 0; }
@keyframes lights {
  0% { opacity: 0; } 16% { opacity: 1; } 24% { opacity: 0; } 38% { opacity: 1; }
  46% { opacity: .3; } 60% { opacity: 1; } 100% { opacity: 1; }
}
.waitlist { max-width: 460px; }
.waitlist__row {
  display: flex; gap: 6px;
  padding: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #FFF9EC;
  box-shadow: 0 4px 0 var(--ink);
}
.waitlist input {
  flex: 1 1 0; min-width: 0; width: 0;
  border: 0; background: transparent;
  padding: 0 16px;
  font: inherit; font-size: 16px; color: var(--ink);
  border-radius: 999px;
}
.waitlist input::placeholder { color: var(--ink-3); }
.waitlist input:focus { outline: none; }
.waitlist__row:focus-within { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.waitlist .btn { height: 44px; box-shadow: none; border-width: 2px; }
.waitlist .btn:hover, .waitlist .btn:active { transform: none; box-shadow: none; }
.waitlist .btn[disabled] { opacity: .6; cursor: default; }
.waitlist__msg { font-size: 14px; color: var(--ink-2); margin-top: 16px; padding-left: 8px; }
.waitlist__msg.is-ok { color: var(--ink); font-weight: 700; }
.waitlist__msg.is-err { color: var(--fg-err); font-weight: 500; }
.waitlist__hint { font-size: 13px; color: var(--ink-2); opacity: .85; margin-top: 4px; padding-left: 8px; }
.waitlist__hint a { color: inherit; }

/* ---------- footer ---------- */
.footer {
  display: grid; justify-items: center; gap: 18px;
  padding: 56px var(--gutter) 44px;
  /* lights off: the sky behind is night; a soft dark wash keeps the small print legible */
  background: linear-gradient(to bottom, rgba(38, 38, 50, 0), rgba(38, 38, 50, .55) 45%);
  --tile: 112px;
  color: #E7F0EC;
  text-align: center;
  font-size: 14px;
}
.footer__sleep {
  width: var(--tile); aspect-ratio: 1; display: block;
  border-radius: 26px; /* a Lock Screen widget tile */
  box-shadow:
    0 10px 30px -12px rgba(10, 12, 30, .6),
    /* lightsOff [6]-[7] the wall lamp (lighter), up to the left */
    calc(var(--tile) * -.62) calc(var(--tile) * -.3) calc(var(--tile) * .7) calc(var(--tile) * -.12) rgb(var(--off-lamp) / calc(.95 * var(--off))),
    /* lightsOff [3]-[5] the night-light (screen), down to the right */
    calc(var(--tile) * .6) calc(var(--tile) * .22) calc(var(--tile) * .8) calc(var(--tile) * -.1) rgb(var(--off-night) / calc(.5 * var(--off)));
}
html:not(.js) .footer { background: #474957; }
.footer__motto { font-size: 16px; color: #FFF3D6; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.footer__links a { text-decoration: none; color: #BFD5CF; }
.footer__links a:hover, .footer__lang:hover { color: #fff; }
.footer__lang { border: 0; padding: 0; background: none; color: #BFD5CF; font-size: inherit; cursor: pointer; }
.footer__legal { color: #B3C8C3; font-size: 13px; }

/* ---------- reveal ---------- */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .hero__copy { padding-top: 96px; }
  .peek { --d: min(calc(100vw - 2 * var(--gutter)), 58vh, 440px); top: calc(50% + 24px); }
  @supports (height: 100svh) { .peek { --d: min(calc(100vw - 2 * var(--gutter)), 58svh, 440px); } }
  .how__body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 28px; }
  .how__stage { justify-self: center; width: min(420px, 100%); }
  .motion .how__stage { width: min(78vw, 360px, calc(100vh - 380px)); }
  @supports (height: 100svh) { .motion .how__stage { width: min(78vw, 360px, calc(100svh - 380px)); } }
  .how__step p { margin: 0 auto; }
  .soul__inner { grid-template-columns: minmax(0, 1fr); }
  .soul__art { max-width: 460px; width: 100%; margin: 0 auto; }
  .note { max-width: 46vw; font-size: 12.5px; padding: 7px 10px 9px; }
  .note__k { font-size: 12px; }
  .note--a { left: 3%; top: 6%; }
  .note--b { right: 3%; top: auto; bottom: 8%; }
  .join { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .waitlist { margin: 0 auto; }
  .join__art { max-width: 640px; margin: 0 auto; width: 100%; }

  .day { height: calc(6 * 56vh + 100vh); }
  @supports (height: 100svh) { .day { height: calc(6 * 56svh + 100svh); } }
  .day__pin { --win: min(calc(100vw - 2 * var(--gutter)), calc((100vh - 300px) * 1920 / 1236)); padding-top: 76px; }
  @supports (height: 100svh) { .day__pin { --win: min(calc(100vw - 2 * var(--gutter)), calc((100svh - 300px) * 1920 / 1236)); } }
  .day__head { flex-direction: column; align-items: center; gap: 10px; }
  .day__head .eyebrow { display: none; }
  .day__now { justify-content: center; gap: 12px; }
  .day__clock { font-size: clamp(44px, 13vw, 64px); }
  .day__stops .t { display: none; }
  .day__stops button { padding: 8px 7px; }
}
@media (max-width: 960px) {
  .lang { margin-left: auto; }
  .nav .btn--sm { margin-left: 0; }
}
@media (max-width: 420px) {
  .nav { gap: 12px; }
  .nav__logo img { height: 22px; }
  .nav__cta { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .br-sm { display: inline; }
  .hero__lead br { display: none; }
  .now { font-size: 13px; padding-left: 14px; gap: 8px; bottom: -24px; }
  .now__time { font-size: 15px; }
  .window { --radius: 20px; }
  .tile { --radius: 22px; }
  .letter__text { left: 14%; right: 14%; top: 10%; bottom: 27%; line-height: 1.6; gap: .35em; }
  /* the hand font runs wide; on phones the English letter switches to the compact sans */
  html:not(.is-zh) .letter__body { font-family: var(--sans); line-height: 1.5; }
  .letter__body { gap: .4em; }
}

/* No pinning when motion is reduced (or before JS): the hero is a plain first screen. */
.hero.is-static, html:not(.js) .hero { height: auto; }
.hero.is-static .hero__pin, html:not(.js) .hero__pin {
  position: relative; height: auto; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: 0 0 96px; overflow: visible;
}
.hero.is-static .hero__copy, html:not(.js) .hero__copy { position: relative; }
.hero.is-static .peek, html:not(.js) .peek { position: relative; left: auto; top: auto; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .comic img { opacity: 1 !important; transform: none !important; }
  .scribble__line path { stroke-dashoffset: 0; }
}

/* Human verification stays below the email row, with room on narrow screens. */
.waitlist__challenge { margin-top: 1rem; max-width: 100%; min-height: 0; }
.waitlist__challenge:not(:empty) { min-height: 65px; }
.waitlist[aria-busy="true"] { cursor: progress; }