/* =====================================================================
   SURDINA · site.css · v2 "every colour is a room" (concept design – fictional brand)
   Rooms (Ida, v2/plan.md): Ember (opening), Jade (control ring), the visitor's pick (finishes and everything after).
   Each room = a dark wall (copy in warm white) and a saturated floor. Modes on <html data-mode>: live · static.
   01 Fonts + tokens   02 Base   03 Studio strip, flag, header, menu   04 Opening (switch)   05 Control ring
   06 Colour rooms + specs   08 Questions   09 Waitlist   10 Footer, mobile bar   11 Motion pre-states   12 Reduced motion
   ===================================================================== */

/* ---------- 01 Fonts + tokens ---------- */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-surdina.woff2") format("woff2");   /* OFL-1.1; Latin subset + italic a–z . , as ss01 */
}
@font-face {
  font-family: "Surdina Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/surdina-mono-400.woff2") format("woff2");  /* Modified Version (Latin subset) of IBM Plex Mono, OFL-1.1; RFN "Plex" not used */
}

:root {
  --ink: #FFF6EE;                                   /* warm white: copy on every wall */
  --fg: var(--ink); --muted: rgba(255, 246, 238, .74); --chalk: #F4DCCB; --accent: var(--ink);
  --line: rgba(255, 246, 238, .18); --line-2: rgba(255, 246, 238, .4);
  /* the visitor's room (Lapis until a finish is picked): sections after the finishes take its wall */
  --bg: #000D3F; --bg-raised: #001751; --room: #245BBC; --room-chip: #4F68DE;
  --ember-wall: #3F0001; --jade-wall: #004B36;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --mono: "Surdina Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --gut: clamp(40px, 6.67vw, 96px);    /* Ida: 96 px desktop, 40 px ≤ 1024, 20 px ≤ 640 */
  --studio-h: 28px;
  --hd-h: 76px;
  --top-h: calc(var(--studio-h) + var(--hd-h));
  --dock-h: 56px;
  --bar-h: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);   /* Ida --ease-settle */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-micro: .16s; --t-ui: .22s;
}
@media (pointer: coarse) { :root { --studio-h: 44px; } }
@media (max-width: 1024px) { :root { --gut: 40px; } }
@media (max-width: 640px) { :root { --gut: 20px; } body { font-size: 14px; } }
html[data-room="ember"]  { --bg: #3F0001; --bg-raised: #5A0A02; --room: #C44718; --room-chip: #E8754C; }
html[data-room="lapis"]  { --bg: #000D3F; --bg-raised: #001751; --room: #245BBC; --room-chip: #4F68DE; }
html[data-room="pollen"] { --bg: #4A2800; --bg-raised: #643A06; --room: #CA9F4E; --room-chip: #EBC24A; }
html[data-room="jade"]   { --bg: #00281B; --bg-raised: #003A28; --room: #2E9473; --room-chip: #3FAE8B; }
@media (max-width: 799.98px) {
  :root { --studio-h: 44px; --hd-h: 60px; --bar-h: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- 02 Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 15px/1.65 var(--mono); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, picture, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -120px; z-index: 100; padding: 12px 18px; background: var(--fg); color: var(--bg); text-decoration: none; border-radius: 999px; }
.skip:focus { top: calc(var(--studio-h) + 8px); }

.eyebrow { margin: 0 0 18px; font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h2 { margin: 0; font: 400 clamp(40px, 5.6vw, 88px)/1 var(--serif); letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.h3 { margin: 0 0 12px; font: 400 clamp(26px, 2.2vw, 34px)/1.1 var(--serif); letter-spacing: -.01em; }
.lead { margin-top: 22px; color: var(--muted); max-width: 40ch; }
.note { margin-top: 28px; font-size: 13px; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 400 14px/1.2 var(--mono); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-micro) ease, color var(--t-micro) ease, border-color var(--t-micro) ease, transform var(--t-micro) var(--ease);
}
.btn { position: relative; isolation: isolate; border-color: var(--line-2); background: rgba(0, 0, 0, .16); color: var(--fg); }
.btn::before {
  content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: var(--fg);
  opacity: 0; transform: scale(.96); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn:hover { color: #1A0E08; border-color: var(--fg); }
.btn:hover::before { opacity: 1; transform: none; }
.btn:active { transform: scale(.98); transition-duration: .12s; }

/* ---------- 03 Studio strip, flag, header, menu ---------- */
.studio-bar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--studio-h);
  display: flex; align-items: center; padding: 0 var(--gut);
  background: #080807; border-bottom: 1px solid var(--line);
}
.studio-bar__link {
  display: inline-flex; align-items: center; height: var(--studio-h); padding: 0 12px; margin-left: -12px;
  color: var(--muted); font-size: 12px; line-height: 1; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: color var(--t-micro) ease;
}
.studio-bar__t { display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; }
.studio-bar__arrow { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform var(--t-micro) var(--ease); }
.studio-bar__link:hover { color: var(--fg); }
.studio-bar__link:hover .studio-bar__arrow { transform: translateX(-2px); }
.studio-bar__link:focus-visible { outline: none; }
.studio-bar__link:focus-visible .studio-bar__t { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.flag {
  position: fixed; z-index: 75; left: calc(var(--gut) - 8px); bottom: 12px; margin: 0; padding: 4px 8px; border-radius: 2px;
  font-size: 11px; line-height: 1.4; letter-spacing: .06em; color: var(--muted); pointer-events: none;
  background: rgba(0, 0, 0, .42);
}
@media (max-width: 799.98px) {
  .flag { z-index: 75; bottom: auto; top: 0; left: auto; right: var(--gut); height: var(--studio-h); display: flex; align-items: center; padding: 0; background: none; letter-spacing: .02em; }
}
@media (max-width: 419.98px) { .flag { max-width: 17ch; text-align: right; line-height: 1.25; } }   /* k69 B7: two short lines, clear of "Formschwung" */

.hdr {
  position: fixed; z-index: 50; top: var(--studio-h); left: 0; right: 0; height: var(--hd-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gut);
  transition: background-color .15s ease, border-color .15s ease;   /* k69 B7: quick, the headline is 24 px below */
  border-bottom: 1px solid transparent;
}
.hdr.is-solid { background: var(--hdr-bg, var(--bg)); border-bottom-color: var(--line); transition-duration: 0s; }   /* k69 B7: solid at once (no half-clear frame over the headline) */
.hdr__brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  font-size: 13px; letter-spacing: .32em; text-decoration: none; color: var(--fg);
  -webkit-text-stroke: .3px currentColor;   /* a touch heavier than 400, without a third font file */
}
.hdr__nav ul { display: flex; gap: clamp(20px, 2.6vw, 44px); list-style: none; margin: 0; padding: 0; }
.hdr__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--fg); text-decoration: none;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-micro) var(--ease);
}
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a:active { transform: translateY(1px); }
.hdr__menu { display: none; }
@media (max-width: 1079.98px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
}
@media (max-width: 799.98px) {
  .hdr { gap: 12px; }
  .hdr__cta { display: none; }
  .hdr__brand { font-size: 13px; letter-spacing: .32em; }
}

.menu {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(var(--studio-h) + 8px) var(--gut) calc(56px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.menu__close { align-self: flex-end; }
.menu__nav ul { list-style: none; margin: 40px 0 32px; padding: 0; }
.menu__nav a { display: block; padding: 6px 0; font: 400 clamp(40px, 11vw, 64px)/1.1 var(--serif); text-decoration: none; color: var(--fg); }
.menu__nav a:active { color: var(--accent); }
.menu__cta { margin-top: auto; width: 100%; min-height: 52px; }
html.menu-open { overflow: hidden; }

/* ---------- 04 Opening = the switch (Ember room) ---------- */
.hero { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--ember-wall); display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--top-h) + 24px) var(--gut) clamp(64px, 12svh, 140px); }
.hero__media { position: absolute; inset: 0; transform-origin: 62% 60%; }
.hero__poster, .hero__poster img, .hero__beads { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img { object-fit: cover; object-position: 50% 50%; }
.hero__beads { pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 28%, #000 46%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 28%, #000 46%); mask-composite: intersect; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(50,4,0,.66) 0, rgba(50,4,0,.4) 30%, rgba(50,4,0,0) 56%), linear-gradient(180deg, rgba(40,0,0,.55) 0, rgba(40,0,0,0) 26%); }
.hero__copy { position: relative; z-index: 3; }
.hero__h1 { margin: 0; font: 400 clamp(56px, min(9.6vw, 19svh), 156px)/.92 var(--serif); letter-spacing: -.02em; }
.hero__l1, .hero__l2 { display: block; white-space: nowrap; }
.hero__l2 { font-style: normal; font-synthesis: none; font-feature-settings: "ss01" 1; color: var(--chalk); }
.hero__l2 > span { display: inline-block; }
.hero__sub { margin-top: clamp(18px, 3svh, 32px); max-width: 32ch; font-size: clamp(14px, 1.1vw, 17px); text-shadow: 0 0 18px rgba(50, 4, 0, .6); }
.dock { position: relative; display: flex; align-items: center; width: max-content; max-width: 100%; margin-top: clamp(22px, 3.6svh, 40px); }
.hero__cap { margin-top: 18px; max-width: 40ch; min-height: 3.1em; font-size: 13px; line-height: 1.55; color: var(--muted); text-shadow: 0 0 14px rgba(50, 4, 0, .8); }
.hero__note { position: absolute; z-index: 3; right: calc(var(--gut) - 10px); bottom: 12px; margin: 0; max-width: 36ch; padding: 6px 10px; border-radius: 2px; font-size: 11px; line-height: 1.5; color: var(--muted); background: rgba(0, 0, 0, .7); }
html.no-js .dock { display: none; }
img[data-src] { visibility: hidden; }   /* ring images get their source after load (out of the LCP window); scene.js */
/* without JS the cup is a still picture in the place ring.js would put it (no turning band, ticks, dial or hint) */
html.no-js .ring__rot, html.no-js .ring__ticks, html.no-js .ring__dial, html.no-js .ring__hint, html.no-js img[data-src] { display: none; }
html.no-js .ring__cup { left: 70%; top: 54%; transform: translate(-50%, -50%); }
html.no-js .ring__img { position: relative; width: min(110vh, 62vw); height: auto; }
@media (max-width: 799.98px) { html.no-js .ring__cup { left: 50%; top: 56%; } html.no-js .ring__img { width: min(96vw, 63svh); } }
@media (max-width: 799.98px), (max-aspect-ratio: 4/5) {
  .hero { justify-content: flex-start; padding-top: calc(var(--top-h) + clamp(12px, 3svh, 32px)); padding-bottom: calc(var(--bar-h) + 24px); }
  .hero__h1 { font-size: clamp(56px, 14.6vw, 96px); }
  .hero__scrim { background: linear-gradient(180deg, rgba(40,0,0,.6) 0, rgba(40,0,0,.25) 34%, rgba(40,0,0,0) 46%), linear-gradient(0deg, rgba(40,0,0,.55) 0, rgba(40,0,0,0) 22%); }
  .hero__beads { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 30%, #000 44%); mask-image: linear-gradient(180deg, transparent 0, transparent 30%, #000 44%); }
  .hero__copy { flex: 1; display: flex; flex-direction: column; }
  .dock { order: 3; width: 100%; margin-top: auto; }
  .dock .nc { flex: 1; justify-content: space-between; padding-left: 18px; }
  .hero__cap { font-size: 12px; max-width: 34ch; }
  .hero__note { display: none; }
}
@media (max-width: 799.98px) and (max-height: 700px) { .hero__cap { display: none; } }

.nc {
  display: flex; align-items: center; gap: 16px; height: var(--dock-h); padding: 0 5px 0 22px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(40, 6, 0, .62);
}
.nc:focus { outline: none; }
.nc__label { font-size: 14px; white-space: nowrap; }
.nc__track { position: relative; display: flex; padding: 0; border-radius: 999px; background: rgba(255, 246, 238, .08); }
.nc__thumb {
  position: absolute; top: 0; left: 0; width: 76px; height: 44px; border-radius: 999px; background: var(--fg);
  transition: transform var(--t-ui) var(--ease);
}
.nc[data-on] .nc__thumb { transform: translateX(76px); }
.nc__opt { position: relative; display: flex; cursor: pointer; }
.nc__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nc__t {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 76px; height: 44px; border-radius: 999px; font-size: 14px; color: rgba(255, 246, 238, .78);
  transition: color var(--t-micro) ease, transform var(--t-micro) var(--ease);
}
.nc__opt:hover .nc__t { color: var(--fg); }
.nc__opt input:checked + .nc__t { color: #3F0001; }
.nc__opt:active .nc__t { transform: scale(.95); }
.nc__opt input:focus-visible + .nc__t { outline: 2px solid var(--accent); outline-offset: 2px; }
.nc__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; transition: background-color var(--t-ui), opacity var(--t-ui); }
.nc[data-on] .nc__dot { opacity: 1; background: #E8754C; box-shadow: 0 0 0 1px rgba(63, 0, 1, .4); }

/* ---------- 05 Control ring (Jade room) ★ ---------- */
.ring { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--jade-wall); }
.ring__stage { position: absolute; inset: 0; }
.ring__cup { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ring__img, .ring__rot { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.ring__rot { will-change: transform; }
.ring__ticks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
.ring__ticks line { stroke: rgba(255, 246, 238, .55); stroke-width: .5; }
.ring__ticks line.is-major { stroke: #FFF6EE; stroke-width: .9; }
.ring__beads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 34%, #000 52%); mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 34%, #000 52%); }
.ring__dial { position: absolute; z-index: 4; border-radius: 50%; touch-action: none; cursor: grab; }
.ring__dial:active { cursor: grabbing; }
.ring__dial:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.ring__hint { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; background: rgba(0, 40, 27, .92); pointer-events: none; transition: opacity .3s; }
.ring__hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ring.is-used .ring__hint { opacity: 0; }
.ring__copy { position: relative; z-index: 5; width: min(40vw, 560px); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--top-h) + 24px) 0 64px var(--gut); }
.ring__h2 { margin: 0 0 22px; }
.ring__h2 [data-jitter] span { display: inline-block; white-space: pre; }
.ring__text { max-width: 36ch; color: var(--muted); }
.meter { margin-top: 34px; width: min(360px, 30vw); }
.meter__bars { display: flex; gap: 4px; height: 64px; align-items: flex-end; }
.meter__bars i { flex: 1; height: 100%; background: var(--ink); border-radius: 1px; transform-origin: 50% 100%; transform: scaleY(.6); }
.meter__row { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meter__row b { font-weight: 400; color: var(--ink); }
.ring__note { margin-top: 28px; max-width: 36ch; font-size: 11px; color: var(--muted); }
@media (max-width: 799.98px), (max-aspect-ratio: 4/5) {
  .ring { min-height: 0; }
  .ring__stage { position: relative; inset: auto; height: min(112vw, 70svh); }
  .ring__copy { width: auto; min-height: 0; padding: 8px var(--gut) clamp(72px, 16vw, 120px); }
  .meter { width: 100%; max-width: 420px; }
}

/* ---------- 06 Colour rooms (finishes) + specs ---------- */
.rooms { position: relative; z-index: 2; background: #000D3F; }
.rooms[data-room="ember"] { background: #3F0001; } .rooms[data-room="pollen"] { background: #4A2800; } .rooms[data-room="jade"] { background: #00281B; }
.rooms__view { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.rooms__still { position: absolute; inset: 0; }
.rooms__still img, .rooms__layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rooms__still img { object-fit: cover; object-position: 50% 50%; }
.rooms__layer { position: absolute; inset: 0; z-index: 1; }
.rooms.is-live .rooms__still { opacity: 0; }
.rooms__wave { position: absolute; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none; will-change: transform; }
.rooms__wave > .rooms__layer { will-change: transform; inset: auto; }
.rooms__front { position: absolute; z-index: 3; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); pointer-events: none; will-change: transform, opacity; }
.rooms__view::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.52) 0, rgba(0,0,0,.36) 30%, rgba(0,0,0,0) 50%); }
.rooms__copy { position: absolute; z-index: 5; left: var(--gut); top: calc(var(--top-h) + 6svh); width: min(36vw, 520px); }
.rooms__copy .h2 { margin: 0; }
.rooms__lead { margin-top: 20px; max-width: 34ch; color: var(--muted); text-shadow: 0 0 16px rgba(0, 0, 0, .35); }
.rooms__pick, .rooms__name { position: absolute; z-index: 5; left: calc(var(--gut) - 14px); }
.rooms__pick { bottom: clamp(56px, 11svh, 120px); display: flex; gap: 6px; margin: 0; padding: 10px 14px; border: 0; min-width: 0; border-radius: 2px; background: rgba(0, 0, 0, .5); }
.rooms__name { bottom: calc(clamp(56px, 11svh, 120px) + 104px); margin: 0; padding: 6px 14px; border-radius: 2px; font-size: 13px; background: rgba(0, 0, 0, .5); }
.rooms .rooms__tag { top: auto; left: auto; right: var(--gut); bottom: clamp(56px, 11svh, 120px); background: rgba(0, 0, 0, .6); }
.rw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; min-height: 76px; padding: 6px 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.rw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rw__chip { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: transform var(--t-micro) var(--ease); }
.rw__chip::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid transparent; transition: border-color var(--t-ui); }
.rw:has(input:checked) .rw__chip::after { border-color: var(--ink); }
.rw:hover .rw__chip { transform: scale(1.08); }
.rw:active .rw__chip { transform: scale(.94); }
.rw:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.rw__chip--ember { background: #E8754C; } .rw__chip--lapis { background: #4F68DE; } .rw__chip--pollen { background: #EBC24A; } .rw__chip--jade { background: #3FAE8B; }
@media (max-width: 799.98px), (max-aspect-ratio: 4/5) {
  .rooms__view::after { display: none; }
  .rooms__view { min-height: 0; display: flex; flex-direction: column; padding: calc(var(--top-h) + 8px) 0 32px; }
  .rooms__copy { position: relative; left: auto; top: auto; width: auto; padding: 0 var(--gut); order: 1; }
  .rooms__still { position: relative; inset: auto; height: 62.5vw; margin: 24px 0 16px; order: 2; }
  .rooms__name, .rooms__pick { position: relative; left: auto; bottom: auto; align-self: flex-start; margin: 0 var(--gut) 12px; }
  .rooms__pick { order: 3; }
  .rooms__name { order: 4; }
  .rooms .rooms__tag { right: var(--gut); bottom: auto; top: calc(var(--top-h) + 8px); }
}
.sec { position: relative; z-index: 3; background: var(--bg); padding: clamp(104px, 13vw, 200px) var(--gut); scroll-margin-top: 24px; }
.specs-sec { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.specs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.specs > .h3 { grid-column: 1 / 4; }
.specs__list { grid-column: 4 / 13; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.specs__row { position: relative; display: grid; grid-template-columns: minmax(7em, 1fr) 2fr; gap: 16px; padding: 18px 0; }
.specs__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; transition: transform .8s var(--ease); transition-delay: var(--d, 0s); }
.specs__row dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.specs__row dd { margin: 0; }
.specs .note { grid-column: 4 / 13; }
@media (max-width: 999.98px) { .specs { display: block; } .specs__list { grid-template-columns: 1fr; margin-top: 20px; } }
.tag {
  position: absolute; z-index: 4; top: 14px; left: 14px; padding: 5px 11px;
  font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--fg);
}

/* ---------- 08 Questions ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
.faq .sec__head { grid-column: 1 / 5; }
.faq__list { grid-column: 5 / 13; }
.qa { border-top: 1px solid var(--line); }
.faq__list > .qa:first-child { border-top-color: var(--line-2); }
.qa__q { margin: 0; font: 400 clamp(22px, 2vw, 30px)/1.25 var(--serif); }
.qa__q button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 44px;
  padding: 22px 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  transition: color var(--t-micro) ease;
}
.qa__q button:hover { color: var(--chalk); }
.qa__q button:active .qa__icon { transform: scale(.88); }
.qa__icon { position: relative; flex: none; width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: currentColor; transition: transform .22s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa__q button[aria-expanded="true"] .qa__icon::after { transform: rotate(0deg); }
.qa__a { padding: 0 0 28px; max-width: 60ch; color: var(--muted); }
.qa__a.is-opening > * { animation: qa-in .26s var(--ease) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__limits { margin-top: 56px; }
.faq__label { margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 999.98px) { .faq { display: block; } }

/* ---------- 09 Waitlist ---------- */
.waitlist { border-top: 1px solid var(--line); padding-top: clamp(120px, 16vw, 240px); padding-bottom: clamp(120px, 16vw, 240px); }
.wl__in { max-width: 640px; margin: 0 auto; }
.wl { display: grid; gap: 16px; margin-top: 44px; }
.field__l { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field__i {
  width: 100%; height: 56px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-raised); color: var(--fg); font: 400 16px/1 var(--mono);
  transition: border-color var(--t-micro) ease;
}
.field__i::placeholder { color: rgba(255, 246, 238, .6); }
.field__i:hover { border-color: rgba(255, 246, 238, .6); }
.field__i:focus-visible, .field__i:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.field__i[aria-invalid="true"] { border-color: var(--fg); }
.field__err { margin-top: 10px; font-size: 13px; color: var(--fg); }
.wl__btn { justify-self: start; min-height: 52px; padding: 0 28px; }
.wl__demo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.wl__privacy { font-size: 13px; color: var(--muted); }
.wl__status:not(:empty) { padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 14px; }
@media (max-width: 799.98px) { .wl__btn { justify-self: stretch; } }

/* ---------- 10 Footer, mobile bar ---------- */
.ft { position: relative; z-index: 3; background: var(--bg); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 112px) var(--gut) calc(56px + var(--bar-h)); }
.ft__word {
  margin: 0 0 clamp(32px, 4vw, 56px); overflow: hidden; white-space: nowrap;
  font: 400 calc((100vw - 2 * var(--gut)) / 5.1)/.92 var(--mono); letter-spacing: .1em; color: var(--fg);
}
.ft__word span { display: inline-block; }
.ft__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px; }
.ft__line { font-size: 13px; color: var(--muted); }
.ft__nav ul { display: flex; flex-wrap: wrap; gap: 0 28px; list-style: none; margin: 0; padding: 0; }
.ft__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; transition: text-decoration-color var(--t-micro), color var(--t-micro); }
.ft__nav a:hover { text-decoration-color: var(--fg); color: var(--chalk); }

.mbar { display: none; }
@media (max-width: 799.98px) {
  .mbar {
    display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom));
    background: var(--hdr-bg, var(--bg)); border-top: 1px solid var(--line);
    transition: transform .3s var(--ease), visibility .3s, background-color .3s ease;
  }
  .mbar .btn { width: 100%; min-height: 48px; }
  .mbar.is-off { transform: translateY(110%); visibility: hidden; }
}

/* ---------- 11 Motion pre-states (only with html.motion; the boot script removes it if JS does not start) ---------- */
.motion:not(.is-open) .hdr, .motion:not(.is-open) .dock, .motion:not(.is-open) .hero__cap { opacity: 0; }   /* never the LCP candidates (H1, sub line) or the concept flag */
.motion:not(.is-open) .hero__sub { transform: translateY(14px); }
.motion:not(.is-open) .hero__l2 > span { transform: translateY(-.2em); }
.motion:not(.is-open) .hero__media { transform: scale(1.04); }
.motion .specs:not(.is-in) .specs__row::before { transform: scaleX(0); }
.motion .ft__word:not(.is-in) span { transform: translateY(102%); }
.ft__word span { transition: transform 1s var(--ease); }
.motion .waitlist:not(.is-in) .wl__in { opacity: 0; }
.wl__in { transition: opacity .9s ease; }

/* ---------- 12 Reduced motion: no transform animation anywhere, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* preview diagnostics (html[data-diag], only in the preview build): why the 3D is on or off */
.diag { position: fixed; z-index: 76; left: calc(var(--gut) - 8px); bottom: 44px; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--gut) + 16px);
  padding: 4px 4px 4px 10px; border-radius: 2px; background: rgba(0, 0, 0, .82); color: #FFF6EE; font: 11px/1.4 var(--mono); }
.diag__t { overflow-wrap: anywhere; }
.diag__b { flex: none; min-height: 28px; padding: 0 10px; border: 1px solid rgba(255, 246, 238, .5); border-radius: 2px; background: none; color: inherit; font: inherit; cursor: pointer; }
.diag__b:focus-visible { outline: 2px solid #FFF6EE; outline-offset: 2px; }
@media (max-width: 799.98px) { .diag { bottom: calc(var(--bar-h) + 8px); } }

/* ---------- 13 v3 · real-time 3D product (k69). html[data-3d="on"] = candidate (head script), html.is-3d = first 3D frame drawn ----------
   One fixed canvas (.v3d, made by scene.js) behind three see-through zones: opening, tour spacer, finishes. The ring section stays opaque. */
.hero, .tour { --wall: #3F0001; }
.rooms { --wall: #000D3F; } .rooms[data-room="ember"] { --wall: #3F0001; } .rooms[data-room="pollen"] { --wall: #4A2800; } .rooms[data-room="jade"] { --wall: #00281B; }
.tour { height: 0; }
html.is-tour .tour { position: relative; z-index: 2; height: 140vh; }   /* opens only while its start is below the viewport (k69): nothing on screen moves */
.v3d { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; opacity: 0; pointer-events: none; }
.v3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .2s ease; }
html.is-3d .v3d { opacity: 1; background: var(--ember-wall); }
html.is-3d-on .v3d canvas { opacity: 1; }   /* k69 B8: dip, never two products at once */
html.is-3d .hero, html.is-3d .tour, html.is-3d .rooms { background: transparent; }
html.is-3d .hero__poster { opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s .12s; }   /* B8 dip: poster → wall in 0.12 s, then the canvas comes up (is-3d-on, 0.2 s) */
html.is-3d .hero__scrim { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }   /* no seam where the opening meets the tour */
html.is-3d .hero__beads { visibility: hidden; }   /* the storm is drawn on the 3D floor (texture) */
html.is-3d .rooms__still { opacity: 0; }
html.is-3d .hero__copy, html.is-3d .hero__copy * { pointer-events: none; }
html.is-3d .hero__copy .dock, html.is-3d .hero__copy .dock * { pointer-events: auto; }
.turn { position: absolute; z-index: 2; inset: 0; touch-action: pan-y pinch-zoom; cursor: grab; -webkit-tap-highlight-color: transparent; }
.turn:active { cursor: grabbing; }
.turn:focus { outline: none; }
.turn:focus-visible::after { content: ""; position: absolute; left: 48%; right: 8%; top: 22%; bottom: 14%; border: 2px solid var(--ink); border-radius: 40px; pointer-events: none; }
.turn--rooms { z-index: 1; }
.turn-hint { position: absolute; z-index: 3; left: 66%; bottom: clamp(64px, 12svh, 140px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(40, 6, 0, .72); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s ease 2.6s; }
.turn-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.is-3d-on .turn-hint { opacity: 1; }   /* not before the 3D product is up (dip) */
html.is-turned .turn-hint { opacity: 0; transition-delay: 0s; }
@media (max-width: 799.98px), (max-aspect-ratio: 4/5) {
  .turn:focus-visible::after { left: 6%; right: 6%; top: 36%; bottom: 24%; }
  .turn-hint { left: 50%; bottom: calc(var(--bar-h) + var(--dock-h) + 44px); }
  html.is-3d .rooms__view { min-height: 100svh; }
  html.is-3d .rooms__still { flex: 1 0 62.5vw; height: auto; }
}