/* =========================================================================
   GNÓMON · main.css
   Direction B "The day" (night default + midday inverted scene)
   with the "Floor Light" plan module from direction C.
   One family: Archivo (wdth 62–125, wght 100–900).
   ========================================================================= */

/* ---------- Font ---------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* the digits and the colon (the clock) as a 10 KB subset of the same font: declared after the full file, so it serves those
   characters and the browser can paint the giant clock in the right face long before the 88 KB file has arrived */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-digits.woff2") format("woff2-variations"), url("../fonts/archivo-digits.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-003A;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* night (brand default) — contrast on --bg: fg 15.77, fg-2 11.97, muted 6.39, primary-on 11.51 */
  --bg: #0B1119;
  --bg-deep: #070B11;
  --bg-map: #0A1018;
  --surface: #111925;
  --fg: #EDEAE3;
  --fg-2: #C9CED4;
  --muted: #8D97A3;
  --line: #26313F;
  --line-2: #3A4656;
  --primary: #F1C27D;
  --primary-h: #F6D29A;
  --on-primary: #0B1119;
  --sun: #F2A77E;
  --accent: #F0A04B;
  /* midday (inverted) — contrast on --day-bg: fg 15.59, muted 5.87, accent 5.02 */
  --day-bg: #E4EAEC;
  --day-fg: #0B1119;
  --day-fg-2: #2A3440;
  --day-muted: #4E5966;
  --day-accent: #8F5410;
  --day-line: #B9C3C8;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(16px, 3.4vw, 56px);
  --hdr: 76px;
  --studio-h: 28px;       /* studio layer above the header ("← Formschwung"); 44 px on touch screens and below 800 px */
  --top: calc(var(--hdr) + var(--studio-h));  /* everything that must clear the header uses this */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --t-micro: 180ms;
  --shadow-c: #1C2633;
  /* the architect's drawing that opens the hero */
  --paper: #EEECE6;
  --ink: #1A1F29;
  color-scheme: dark;
}
@media (max-width: 799px) { :root { --hdr: 60px; --studio-h: 44px; } }
@media (pointer: coarse) { :root { --studio-h: 44px; } }  /* touch target = the strip itself */

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font-family: var(--font); font-size: 17px; line-height: 1.55; font-stretch: 96%; font-weight: 400;
  font-kerning: normal; font-variant-numeric: lining-nums; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; color: var(--fg); font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 12px 16px; border-radius: 4px; font-weight: 600; text-decoration: none; transition: top var(--t-micro) var(--ease); }
.skip:focus { top: 12px; }
.skip:hover { background: var(--primary-h); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
.note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.h2 { font-size: clamp(40px, 5.4vw, 88px); line-height: .98; font-weight: 300; font-stretch: 72%; letter-spacing: -.02em; color: var(--fg); }
.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--fg-2); max-width: 44ch; }
::selection { background: var(--primary); color: var(--on-primary); }

/* ---------- Buttons and links (150–200 ms hover + press) ----------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1px solid transparent;
  font-size: 15px; font-weight: 560; font-stretch: 100%; line-height: 1.1; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), transform 150ms var(--ease);
}
.btn > span { display: inline-block; transition: transform 150ms var(--ease); }
.btn:active { transform: scale(.97); }
.btn[data-magnetic]:active { transform: none; }
.btn[data-magnetic]:active > span { transform: scale(.97); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-h); }
.btn--line { border-color: rgba(237, 234, 227, .32); color: var(--fg); background: transparent; }
.btn--line:hover { border-color: var(--primary); color: var(--primary); }
.link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 520;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color var(--t-micro) var(--ease), text-underline-offset var(--t-micro) var(--ease);
}
.link:hover { color: var(--primary-h); text-underline-offset: 8px; }
.link:active { color: var(--fg); }

/* ---------- Fixed flag: concept design on every screen ------------------- */
.flag {
  position: fixed; right: 0; top: 50%; z-index: 45; margin: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  padding: 14px 7px; border-radius: 0 4px 4px 0;
  background: rgba(7, 11, 17, .78); color: var(--fg-2);
  font-size: 11.5px; line-height: 1; letter-spacing: .03em; font-stretch: 100%;
  pointer-events: none;
}
@media (max-width: 799px) { .flag { display: none; } }

/* ---------- Studio layer: fixed "← Formschwung" strip above the header ------
   Returns to the studio's own site. Neutral, same type family as the concept flag; own row, so it never covers
   the header, the flag or the mobile bar. */
.studio-bar {
  position: fixed; z-index: 52; top: 0; left: 0; right: 0; height: var(--studio-h);
  display: flex; align-items: flex-start; padding: 0 var(--gut);
  background: var(--bg-deep); border-bottom: 1px solid var(--line);
}
.studio-bar__link {
  display: inline-flex; align-items: center; box-sizing: border-box;
  height: var(--studio-h); padding: 0 12px; margin-left: -12px;
  color: var(--fg-2); text-decoration: none; font-size: 12px; font-weight: 500; font-stretch: 100%; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  transition: color var(--t-micro) var(--ease);
}
.studio-bar__t { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; }
.studio-bar__arrow { display: inline-block; font-size: 14px; transition: transform var(--t-micro) var(--ease); }
.studio-bar__link:hover { color: var(--primary); }
.studio-bar__link:hover .studio-bar__arrow { transform: translateX(-2px); }
.studio-bar__link:active { color: var(--primary-h); }
.studio-bar__link:focus-visible { outline: none; }
.studio-bar__link:focus-visible .studio-bar__t { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 2px; }
@media (max-width: 799px) { .studio-bar { padding: 0 16px; } }

/* =========================================================================
   Header
   ========================================================================= */
.hdr {
  position: fixed; inset: var(--studio-h) 0 auto 0; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  color: var(--fg); background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease), color .7s var(--ease), border-color .45s var(--ease);
}
.hdr.is-solid { background: rgba(11, 17, 25, .96); border-bottom-color: rgba(237, 234, 227, .07); }
.hdr.on-day { background: rgba(228, 234, 236, .9); color: var(--day-fg); border-bottom-color: rgba(11, 17, 25, .08); }
.hdr.tone-day { color: var(--day-fg); }
/* over the rendered sky the small header text gets a soft halo of the opposite tone (helps while the sky passes the switch point) */
.hdr:not(.is-solid):not(.on-day) :is(.hdr__nav a, .wordmark, .hdr__res, .hdr__menu) { text-shadow: 0 0 14px rgba(4, 7, 11, .5); }
.hdr.tone-day:not(.is-solid):not(.on-day) :is(.hdr__nav a, .wordmark, .hdr__res, .hdr__menu) { text-shadow: 0 0 14px rgba(236, 240, 243, .6); }
/* A veil of the opposite tone under the header text while the rendered sky is mid-luminance (strength set by app.js, --hdr-ad dark / --hdr-al light).
   Only while the header floats over the scene; the solid header does not need it. */
.hdr::before, .hdr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 10px); z-index: -1; pointer-events: none; transition: opacity .45s var(--ease); }
.hdr::before { background: linear-gradient(to bottom, rgba(4, 7, 11, .94) 0%, rgba(4, 7, 11, .86) 52%, rgba(4, 7, 11, 0) 100%); opacity: var(--hdr-ad, 0); }
.hdr::after { background: linear-gradient(to bottom, rgba(236, 240, 243, .92) 0%, rgba(236, 240, 243, .84) 52%, rgba(236, 240, 243, 0) 100%); opacity: var(--hdr-al, 0); }
.hdr:not(.is-scene)::before, .hdr:not(.is-scene)::after { opacity: 0; }
.hdr__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; transition: opacity var(--t-micro) var(--ease); }
.hdr__logo:hover { opacity: .8; }
.hdr__logo:active { opacity: .6; }
.mark { width: 28px; height: 28px; }
.mark__dial { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.mark__gnomon { fill: currentColor; }
.mark__shadow { stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; fill: none; transition: stroke .7s var(--ease); }
.hdr.on-day .mark__shadow, .hdr.tone-day .mark__shadow { stroke: var(--day-accent); }
.wordmark { font-size: 19px; font-weight: 620; font-stretch: 125%; letter-spacing: .07em; line-height: 1; }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: 28px; }
.hdr__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-stretch: 100%; text-decoration: none; opacity: .86;
  transition: opacity var(--t-micro) var(--ease);
}
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-micro) var(--ease); }
.hdr__nav a:hover { opacity: 1; }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a:active { opacity: .6; }
.hdr__cta { transition: background-color .7s var(--ease), color .7s var(--ease), transform 150ms var(--ease); }
.hdr.on-day .hdr__cta, .hdr.tone-day .hdr__cta { background: var(--day-fg); color: var(--fg); }
.hdr.on-day .hdr__cta:hover, .hdr.tone-day .hdr__cta:hover { background: #253140; }
.hdr__res, .hdr__menu { display: none; }
@media (max-width: 1099px) { .hdr__nav ul { gap: 20px; } .hdr__nav li:nth-child(4) { display: none; } }
@media (max-width: 799px) {
  .hdr { gap: 6px; padding: 0 8px 0 16px; }
  .hdr__nav, .hdr__cta { display: none; }
  .wordmark { font-size: 17px; }
  .mark { width: 24px; height: 24px; }
  .hdr__res {
    display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 12px; font-size: 14.5px; text-decoration: none;
    transition: opacity var(--t-micro) var(--ease);
  }
  .hdr__res:hover { opacity: .8; }
  .hdr__res:active { opacity: .6; }
  .hdr__menu {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 0; font-size: 14.5px;
    transition: opacity var(--t-micro) var(--ease);
  }
  .hdr__menu:hover { opacity: .8; }
  .hdr__menu:active { opacity: .6; }
  .hdr__burger { display: grid; gap: 5px; width: 20px; }
  .hdr__burger i { display: block; height: 1.5px; background: currentColor; }
}
/* Narrow phones: the row (logo + Residences + Menu) must never squeeze the burger icon or clip text.
   <= 374: tighter Residences padding; <= 359: the burger icon is dropped on purpose (the word "Menu" stays); <= 339: smaller wordmark. */
@media (max-width: 374px) { .hdr__res { padding: 0 8px; } }
@media (max-width: 359px) { .hdr__menu { gap: 0; padding: 0 8px; } .hdr__burger { display: none; } }
@media (max-width: 339px) { .wordmark { font-size: 15px; } }

/* ---------- Mobile menu ---------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; padding: 0 16px 28px; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.menu.is-open { opacity: 1; transform: none; }
.menu:not(.is-open) { pointer-events: none; }   /* while it fades out, a tap on Menu reaches the header button, not the overlay */
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); }
.menu__close { min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 1px solid var(--line-2); border-radius: 4px; transition: border-color var(--t-micro) var(--ease), transform 150ms var(--ease); }
.menu__close:hover { border-color: var(--fg); }
.menu__close:active { transform: scale(.97); }
.menu__list { margin-top: 24px; border-top: 1px solid var(--line); }
.menu__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: 30px; line-height: 1.05; font-weight: 300; font-stretch: 78%; letter-spacing: -.01em;
  transition: color var(--t-micro) var(--ease), padding-left var(--t-micro) var(--ease);
}
.menu__list a:hover { color: var(--primary-h); padding-left: 4px; }
.menu__list a:active { color: var(--primary); }
.menu__t { flex: 0 0 76px; font-size: 13px; font-stretch: 100%; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.menu__note { margin-top: auto; padding-top: 28px; font-size: 13px; color: var(--muted); }
body.menu-open { overflow: hidden; }

/* =========================================================================
   0 · The day — opening scene
   ========================================================================= */
.day { position: relative; background: var(--bg); }
.scene {
  position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  background: #070C16; color: var(--fg); isolation: isolate;
  --fx: 50%; --fy: 50%;                     /* focal point of the rendered frames (cover crop) */
}
/* layers: still / back canvas (0) · clock (1) · fore canvas or masked still (2) · scrim (2) · ui (3) · chooser (4) */
.scene__photo, .scene__photo img, .scene__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__photo { z-index: 0; }
.scene__photo img { object-fit: cover; object-position: var(--fx) var(--fy); }
.scene__cv { display: block; z-index: 0; pointer-events: none; }
.scene__fore { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.scene__fore .scene__cv { position: absolute; inset: auto; left: 0; top: 0; z-index: auto; }
/* static modes (reduced motion, no JS, sequence fallback): the still again, cut to the foreground matte */
[data-motion="reduce"] .scene__fore, .no-js .scene__fore, .seq-off .scene__fore {
  display: block;
  background: url(../img/hero/desk/t0540.webp) var(--fx) var(--fy) / cover no-repeat;
  -webkit-mask: url(../img/hero/desk/matte.webp) var(--fx) var(--fy) / cover no-repeat;
  mask: url(../img/hero/desk/matte.webp) var(--fx) var(--fy) / cover no-repeat;
}
@media (max-width: 799px), (max-aspect-ratio: 1/1) {
  [data-motion="reduce"] .scene__fore, .no-js .scene__fore, .seq-off .scene__fore {
    background-image: url(../img/hero/mob/t0540.webp);
    -webkit-mask-image: url(../img/hero/mob/matte.webp); mask-image: url(../img/hero/mob/matte.webp);
  }
}
/* the opening (drawing → render): static layers the browser composites; JS removes them when the render has taken over.
   paper: over the photo, under the clock · ink: over the clock and the foreground (opacity, plus a rising wipe on the building) */
.scene__paper { position: absolute; inset: 0; z-index: 0; background: var(--paper); pointer-events: none; will-change: opacity; }
.scene__ink { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity; }
.scene__ink-c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity; }
.scene__ink-b {
  position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; --wipe: 0;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--wipe) * 112% - 12%), transparent calc(var(--wipe) * 112%));
  mask-image: linear-gradient(to top, #000 calc(var(--wipe) * 112% - 12%), transparent calc(var(--wipe) * 112%));
}
.js[data-motion="ok"]:not(.seq-off) .scene__fore { display: block; }
/* motion modes: the first frame is paper and ink; the canvases take over from there.
   The still stays hidden (the canvas shows it); failsafe after 2.4 s if the script never runs */
.js[data-motion="ok"]:not(.seq-off) .scene__photo { visibility: hidden; }
.js[data-motion="ok"]:not(.seq-on):not(.seq-off) .scene__photo { animation: failShow 0s linear 2.4s forwards; }
.js[data-motion="ok"]:not(.intro-photo) .scene { background: var(--paper); }
.js[data-motion="ok"]:not(.intro-photo) .scene__num { color: var(--ink); animation: failLight 0s linear 2.4s forwards; }
.js[data-motion="ok"]:not(.intro-photo) .ruler { opacity: 0; }
@keyframes failShow { to { visibility: visible; } }
@keyframes failLight { to { color: var(--fg); } }
/* the clock digits: LCP, visible on the first frame. Isolated layer, 5 glyphs.
   The width/weight axis animation is the one documented exception to the
   transform/opacity rule (spec, direction B). */
.scene__num {
  position: absolute; left: 0; right: 0; top: 11.5%;
  text-align: center; line-height: .8; white-space: nowrap; pointer-events: none;
  font-size: min(27.9vw, 46svh); font-weight: 200; font-variation-settings: "wdth" var(--wd, 84), "wght" 160;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em;
  color: var(--fg); contain: layout style; z-index: 1;
  transform: translateY(var(--num-dy, 0px));
  transition: color .6s var(--ease);
}
.scene.is-day .scene__num { color: var(--day-fg); }
/* where neither tone reaches 4.5:1 on its own (the sky passing mid-brightness around 06:00 and 21:00) the digits get a soft halo of the
   opposite tone, strength set in app.js (toneSet) from the measured sky: dark halo under light digits, light halo under dark digits */
.scene { --ck-rgb: 4, 7, 11; }
.scene.is-day { --ck-rgb: 237, 234, 227; }
.scene.has-ckh .scene__num { text-shadow: 0 0 .03em rgba(var(--ck-rgb), var(--ck-a)), 0 0 .08em rgba(var(--ck-rgb), var(--ck-a)), 0 0 .17em rgba(var(--ck-rgb), calc(var(--ck-a) * .9)), 0 0 .34em rgba(var(--ck-rgb), calc(var(--ck-a) * .8)); }
/* v2c · desktop (landscape, 800 px and up): the clock stands in the sky ABOVE the roof line of the building, never behind it.
   --roof is the highest roof edge in the frame at the end of the day (camera push-in 1.06, about the point at 72 % of the height),
   in scene pixels, for the cover-cropped 16:9 frame (roof edge at 0.327 of the frame height, encode.py reads it from the matte).
   The digits' ink spans .03 to .75 of the font size (line-height .8); its bottom edge sits --gap above the roof, its top edge
   at least 8 px under the header. Everything is CSS, so the first paint is already in place (no layout shift when the script starts). */
@media (min-width: 800px) and (min-aspect-ratio: 1/1) {
  .scene {
    --H: max(100svh, 600px);
    --iH: max(56.25vw, var(--H));
    --oy: calc((var(--H) - var(--iH)) / 2);
    --roof: calc(var(--H) * .72 + (var(--oy) + var(--iH) * .327 - var(--H) * .72) * 1.06);
    --gap: clamp(10px, 1.6svh, 18px);
  }
  .scene__num {
    --wd: 118;
    --fs: min(27.9vw, 46svh, calc((var(--roof) - var(--gap) - var(--top) - 10px) / .72));
    font-size: var(--fs);
    top: calc(var(--roof) - var(--gap) - var(--fs) * .75);
  }
}
.scene__scrim { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 52%; pointer-events: none; background: linear-gradient(to top, rgba(4, 7, 11, .8) 0%, rgba(4, 7, 11, .5) 40%, rgba(4, 7, 11, 0) 100%); transition: opacity .6s var(--ease); }
.js[data-motion="ok"]:not(.intro-photo) .scene__scrim { opacity: 0; }

.scene__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 var(--gut) 20px; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.scene__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 18px; }
.scene__lead { max-width: 560px; }
.scene__h1 { font-size: clamp(34px, 3.5vw, 56px); line-height: 1; font-weight: 360; font-stretch: 84%; letter-spacing: -.016em; color: var(--fg); max-width: 14ch; margin-bottom: 14px; text-wrap: balance; }
.scene__lede { font-size: 16.5px; line-height: 1.5; color: var(--fg-2); max-width: 44ch; }
.scene__lead { position: relative; text-shadow: 0 1px 18px rgba(4, 7, 11, .45); }
/* local scrims: the headline and the status panel sit on the roofs and the hillside in the daytime frames (WCAG 1.4.3). A feathered
   dark pool under the text, not a box. Hidden until the render has taken over from the paper. */
.scene__lead::before, .status::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; transition: opacity .6s var(--ease);
  background: rgba(4, 7, 11, var(--sa));
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .1) calc(var(--fx) * .2), rgba(0, 0, 0, .38) calc(var(--fx) * .45), rgba(0, 0, 0, .82) calc(var(--fx) * .8), #000 var(--fx), #000 calc(100% - var(--fx)), rgba(0, 0, 0, .82) calc(100% - var(--fx) * .8), rgba(0, 0, 0, .38) calc(100% - var(--fx) * .45), rgba(0, 0, 0, .1) calc(100% - var(--fx) * .2), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .1) calc(var(--fy) * .2), rgba(0, 0, 0, .38) calc(var(--fy) * .45), rgba(0, 0, 0, .82) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgba(0, 0, 0, .82) calc(100% - var(--fy) * .8), rgba(0, 0, 0, .38) calc(100% - var(--fy) * .45), rgba(0, 0, 0, .1) calc(100% - var(--fy) * .2), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .1) calc(var(--fx) * .2), rgba(0, 0, 0, .38) calc(var(--fx) * .45), rgba(0, 0, 0, .82) calc(var(--fx) * .8), #000 var(--fx), #000 calc(100% - var(--fx)), rgba(0, 0, 0, .82) calc(100% - var(--fx) * .8), rgba(0, 0, 0, .38) calc(100% - var(--fx) * .45), rgba(0, 0, 0, .1) calc(100% - var(--fx) * .2), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .1) calc(var(--fy) * .2), rgba(0, 0, 0, .38) calc(var(--fy) * .45), rgba(0, 0, 0, .82) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgba(0, 0, 0, .82) calc(100% - var(--fy) * .8), rgba(0, 0, 0, .38) calc(100% - var(--fy) * .45), rgba(0, 0, 0, .1) calc(100% - var(--fy) * .2), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* a flat plateau under the text with soft feathered edges (no visible box edge): --sa alpha, --fx / --fy feather width */
.scene__lead::before { --sa: .5; --fx: 90px; --fy: 42px; inset: -60px -100px -40px -100px; }
.status { position: relative; }
.status::before { --sa: .56; --fx: 120px; --fy: 40px; inset: -52px -150px -36px -150px; }
.js[data-motion="ok"]:not(.intro-photo) :is(.scene__lead, .status)::before { opacity: 0; }
.scene__cue { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--fg-2); transition: opacity .4s var(--ease); }
.scene__cue span { position: relative; width: 1px; height: 22px; overflow: hidden; background: rgba(237, 234, 227, .25); }
.scene__cue span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 9px; background: var(--fg); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-10px); } 70%, 100% { transform: translateY(24px); } }
.scene.is-scrolled .scene__cue { opacity: 0; }
.status { text-align: right; max-width: 36ch; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.status__title { font-size: 15.5px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.status__text { margin-bottom: 4px; }
.status__data { color: var(--fg); }
.status__note { color: var(--fg-2); }

.ruler { position: relative; height: 34px; }
.ruler__base { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: rgba(237, 234, 227, .38); }
.ruler__span { position: absolute; top: 11px; height: 3px; background: rgba(237, 234, 227, .22); }
.ruler__fill { position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--sun); transform-origin: left; transform: scaleX(0); }
.ruler__mark { position: absolute; top: 4px; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(7, 11, 17, .6); }
.tick { position: absolute; top: 6px; width: 1px; height: 12px; background: rgba(237, 234, 227, .6); }
.tick span { position: absolute; top: 16px; left: -8px; font-size: 11px; color: #D5DAE0; font-variant-numeric: tabular-nums; }
.tick.is-odd { height: 7px; top: 8.5px; }

/* intro: hidden until the opening runs; CSS failsafe reveals after 2.4 s */
.js[data-motion="ok"]:not(.intro-done) [data-intro] { opacity: 0; animation: introFailsafe .5s ease 2.4s forwards; }
/* the ruler's ticks and base line grow in during the opening, the small elements fade up: CSS animations (compositor), started
   after the drawing (--intro-d) and staggered by --i. Until then the ticks and the base line are collapsed. */
.js[data-motion="ok"]:not(.intro-done) .tick { transform: scaleY(0); transform-origin: 50% 100%; }
.js[data-motion="ok"]:not(.intro-done) .ruler__base { transform: scaleX(0); transform-origin: 0 50%; }
@keyframes tickIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes baseIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes introRise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.js.intro-run:not(.intro-done) .tick { animation: tickIn .35s cubic-bezier(.215, .61, .355, 1) both; animation-delay: calc(var(--intro-d, 0s) + .2s + var(--i, 0) * 15ms); }
.js.intro-run:not(.intro-done) .ruler__base { animation: baseIn .6s cubic-bezier(.215, .61, .355, 1) both; animation-delay: calc(var(--intro-d, 0s) + .1s); }
.js.intro-run:not(.intro-done) [data-intro].intro-in { animation: introRise .45s cubic-bezier(.215, .61, .355, 1) both; animation-delay: calc(var(--intro-d, 0s) + .15s + var(--i, 0) * 35ms); }
/* line split of the headline and lede during the opening (undone afterwards) */
/* a flex column, so the lines' negative margins do not collapse into each other: the block keeps exactly the height of the unsplit text */
.is-split { display: flex; flex-direction: column; }
.ln { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.ln__i { display: block; white-space: nowrap; }
.js.intro-run:not(.intro-done) [data-intro] { animation: none; }
@keyframes introFailsafe { to { opacity: 1; } }

/* ---- 1 · Choose your light (night state of the pinned scene) ---- */
.choose {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--gut) 20px;
  opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden;   /* hidden = out of the tab order while it is not shown */
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.scene.is-choosing .choose { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.scene.is-choosing .scene__ui { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.choose__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 20px; }
.choose__h2 { font-size: clamp(40px, 4.6vw, 76px); line-height: .96; font-weight: 300; font-stretch: 70%; letter-spacing: -.02em; margin-bottom: 12px; }
.choose__head p { max-width: 38ch; color: var(--fg-2); }
.choose__detail { width: min(420px, 40%); padding: 16px 18px 6px; margin-right: -18px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(7, 11, 17, .84); }
.choose__count { font-size: 21px; line-height: 1.2; color: var(--fg); font-weight: 480; font-stretch: 92%; margin-bottom: 6px; }
.choose__info { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(237, 234, 227, .38); }
.seg__b {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 70px; padding: 14px 16px 8px 0; background: none; border: 0; text-align: left; color: var(--fg-2);
  transition: color var(--t-micro) var(--ease);
}
.seg__b::before { content: ""; position: absolute; left: 0; right: 14px; top: -2px; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.seg__b + .seg__b { padding-left: 14px; }
.seg__b + .seg__b::before { left: 14px; }
.seg__b + .seg__b::after { content: ""; position: absolute; left: 0; top: -6px; width: 1px; height: 11px; background: rgba(237, 234, 227, .5); }
.seg__n { font-size: 23px; line-height: 1.05; font-weight: 400; font-stretch: 80%; color: var(--fg); transition: color var(--t-micro) var(--ease); }
.seg__s { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.seg__b:hover::before { transform: scaleX(.22); }
.seg__b:active .seg__n { color: var(--primary); }
.seg__b[aria-pressed="true"]::before { transform: scaleX(1); }
.seg__b[aria-pressed="true"] .seg__n { color: var(--primary); }
.seg__b:focus-visible { outline-offset: -2px; }

/* static chooser (mobile / reduced motion): sits under the night frame */
.choose.is-static { position: static; opacity: 1; transform: none; pointer-events: auto; visibility: visible; padding: 22px 0 0; }
.choose.is-static .choose__row { flex-direction: column; align-items: stretch; gap: 14px; }
.choose.is-static .choose__detail { width: auto; padding: 0; margin: 0; border: 0; background: none; }

/* ---- key frames (mobile / reduced motion) ---- */
.frames { display: none; padding: 80px var(--gut) 56px; background: var(--bg); }
[data-mode="frames"] .frames { display: block; }
.frames__head { margin-bottom: 32px; }
.frames__h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; font-weight: 300; font-stretch: 72%; letter-spacing: -.02em; margin-bottom: 8px; }
.frames__head p { color: var(--fg-2); }
.frames__grid { display: grid; gap: 44px; align-items: start; }
.frame { margin: 0; display: grid; gap: 14px; align-content: start; }
.frame__box { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #070C16; isolation: isolate; }
.frame__box picture, .frame__box img { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame__box img { object-fit: cover; object-position: 50% 50%; }
.frame__alt, .frame__glow { opacity: 0; transition: opacity .7s var(--ease); }
.frame__glow { mix-blend-mode: screen; }
.frame__box.has-alt .frame__alt, .frame__box.has-glow .frame__glow { opacity: 1; }
.frame figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; }
.frame__t { grid-row: span 2; font-size: 32px; line-height: 1; font-weight: 250; font-stretch: 70%; color: var(--fg); font-variant-numeric: tabular-nums; }
.frame__h { font-size: 19px; font-weight: 500; font-stretch: 92%; color: var(--fg); }
.frame__p { font-size: 15px; color: var(--fg-2); }
@media (min-width: 800px) {
  .frames__grid { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
  .frame__box { aspect-ratio: 16 / 10; }
  .frame:last-child .choose.is-static .seg { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   2 · Residences
   ========================================================================= */
.res { position: relative; background: var(--bg); }
.res__pin { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.res__track { display: flex; height: 100%; width: max-content; }
.rp { position: relative; flex: 0 0 100vw; width: 100vw; height: 100%; padding: calc(var(--top) + 84px) calc(var(--gut) + 28px) 36px var(--gut); }
.rp--intro { flex-basis: 78vw; width: 78vw; display: flex; align-items: center; }
.rp__intro { display: grid; grid-template-columns: minmax(0, 560px) minmax(300px, 500px); grid-template-areas: "h fig" "lede fig" "list fig" "note fig"; column-gap: clamp(40px, 5vw, 96px); align-items: start; width: 100%; max-width: 1180px; }
.rp__intro .h2 { grid-area: h; }
.rp__intro .lede { grid-area: lede; }
.rp__intro .keyplan { display: contents; }
.rp__intro .keyplan__list { grid-area: list; }
.rp__intro .note { grid-area: note; }
.keyplan__fig { grid-area: fig; align-self: center; margin: 0; }
.keyplan__fig svg { width: 100%; height: auto; overflow: visible; }
.kp-cell { fill: #F6C979; transition: opacity .3s var(--ease), fill .3s var(--ease); }
.kp-slab { fill: #26313F; }
.kp-lab { fill: var(--fg-2); font-size: 15px; font-family: var(--font); }
.kp-body { fill: #121A25; }
.kp-river { stroke: rgba(237, 234, 227, .22); stroke-width: 1; }
.keyplan__list li { cursor: default; transition: background-color var(--t-micro) var(--ease); }
.keyplan__list li:hover { background: rgba(241, 194, 125, .05); }
.rp__intro .h2 { margin-bottom: 26px; max-width: 13ch; }
.rp__intro .lede { margin-bottom: 40px; }
.keyplan__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); max-width: 640px; margin-bottom: 26px; }
.keyplan__list li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; align-items: baseline; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 16px; }
.keyplan__list b { grid-row: span 2; font-size: 44px; line-height: .9; font-weight: 220; font-stretch: 64%; color: var(--fg); font-variant-numeric: tabular-nums; }
.keyplan__list span { font-size: 13px; color: var(--muted); }
.rp__intro .note { max-width: 62ch; }

/* type tabs (Flip indicator) */
.rtabs { position: absolute; z-index: 5; top: calc(var(--top) + 18px); left: var(--gut); }
.rtabs ul { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(11, 17, 25, .94); }
.rtab {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 12px 14px; border-radius: 4px; text-decoration: none; color: var(--fg-2); font-size: 14px; line-height: 1;
  transition: color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.rtab b { position: relative; z-index: 1; font-weight: 600; font-stretch: 100%; color: var(--fg); }
.rtab span:not(.rtabs__ind) { position: relative; z-index: 1; font-size: 13px; }
.rtab:hover { background: rgba(237, 234, 227, .06); color: var(--fg); }
.rtab:active { background: rgba(237, 234, 227, .1); }
.rtab.is-active { color: var(--on-primary); }
.rtab.is-active b { color: var(--on-primary); }
.rtabs__ind { position: absolute; inset: 0; z-index: 0; border-radius: 4px; background: var(--primary); opacity: 0; pointer-events: none; }
.rtabs__ind.is-on { opacity: 1; }
.rtabs > .rtabs__ind { display: none; }
.res__progress { position: absolute; z-index: 5; left: 0; right: 0; top: var(--top); height: 1px; background: rgba(237, 234, 227, .08); }
.res__progress span { position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left; }

/* a residence type = one scene */
.rt { display: grid; grid-template-columns: minmax(300px, 31%) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.rt + .rt::before { content: ""; position: absolute; left: 0; top: calc(var(--top) + 84px); bottom: 36px; width: 1px; background: var(--line); }
.rt__info { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.rt__idx { display: flex; gap: 14px; align-items: center; font-size: 13.5px; color: var(--fg-2); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.rt__light { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 520; }
.rt__light::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.rt__h { display: flex; flex-direction: column; margin-bottom: 18px; }
.rt__code { font-size: clamp(88px, 10vw, 168px); line-height: .82; font-weight: 200; font-stretch: 62%; letter-spacing: -.02em; color: var(--fg); }
.rt[data-type="ph"] .rt__code { font-size: clamp(60px, 6.4vw, 108px); }
.rt__name { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; font-weight: 380; font-stretch: 88%; color: var(--fg); margin-top: 10px; }
.rt__text { font-size: 15.5px; line-height: 1.55; color: var(--fg-2); max-width: 40ch; margin-bottom: 22px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; border-top: 1px solid var(--line); }
.facts div { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 16px; color: var(--fg); font-variant-numeric: tabular-nums; }
.rt__sun { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; margin-bottom: 14px; }
.rt__sun span:first-child { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.rt__sun strong { font-size: 30px; line-height: 1.1; font-weight: 260; font-stretch: 70%; color: var(--primary); font-variant-numeric: tabular-nums; }
.rt__span { font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rt__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 18px; font-size: 17px; color: var(--fg); }
.rt__info .btn { align-self: flex-start; }

/* ---- Floor Light module ---- */
.fl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: minmax(0, 1fr) auto; gap: 14px 28px; min-height: 0; min-width: 0; }
.fl__stage { position: relative; grid-column: 1; grid-row: 1; min-height: 0; }
.fl__stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl__read { grid-column: 2; grid-row: 1; align-self: center; display: grid; gap: 12px; }
.fl__time { font-size: 72px; line-height: .86; font-weight: 200; font-stretch: 62%; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fl__sun { font-size: 13.5px; line-height: 1.45; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.fl__in { font-size: 14px; line-height: 1.45; color: var(--fg); max-width: 22ch; min-height: 4.4em; }
.fl__compass { width: 104px; }
.compass { width: 100%; height: auto; overflow: visible; }
.compass__ring { fill: none; stroke: rgba(237, 234, 227, .5); stroke-width: 1; }
.compass__ring2 { fill: none; stroke: rgba(237, 234, 227, .16); stroke-width: .7; }
.compass__path { fill: none; stroke: rgba(241, 194, 125, .7); stroke-width: 1.1; stroke-dasharray: 2 3; }
.compass__house { fill: none; stroke: rgba(237, 234, 227, .7); stroke-width: 1; }
.compass text { fill: var(--fg-2); font-size: 9px; font-family: var(--font); }
.compass__dot { fill: var(--primary); stroke: var(--bg); stroke-width: 1.5; }
.fl__ctrl { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: 12px; align-items: center; }
.fl__step, .fl__play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0;
  border: 1px solid rgba(237, 234, 227, .26); border-radius: 50%; background: transparent; color: var(--fg);
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), transform 150ms var(--ease);
}
.fl__play { border-radius: 999px; padding: 0 18px 0 14px; font-size: 14px; white-space: nowrap; }
.fl__step:hover, .fl__play:hover { border-color: var(--primary); }
.fl__step:active, .fl__play:active { transform: scale(.95); }
.fl__step svg, .fl__play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl__play .i-play { fill: currentColor; stroke: none; }
.fl__play .i-pause { display: none; }
.fl__play[aria-pressed="true"] { background: rgba(241, 194, 125, .12); border-color: var(--primary); }
.fl__play[aria-pressed="true"] .i-play { display: none; }
.fl__play[aria-pressed="true"] .i-pause { display: block; }
.fl__range { position: relative; height: 56px; }
.fl__rail { position: absolute; left: 11px; right: 11px; top: 21px; height: 1px; background: rgba(237, 234, 227, .32); pointer-events: none; }
.fl__rail span { position: absolute; top: -1px; height: 3px; background: rgba(241, 194, 125, .6); border-radius: 2px; }
.fl__ticks { position: absolute; left: 11px; right: 11px; top: 32px; display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.fl__ticks span { width: 0; display: flex; justify-content: center; }
.fl__range input { position: absolute; inset: 0 0 auto 0; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fl__range input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.fl__range input::-moz-range-track { height: 44px; background: transparent; }
.fl__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 11px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: 0 0 0 5px rgba(11, 17, 25, .85); transition: transform var(--t-micro) var(--ease); }
.fl__range input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: 0 0 0 5px rgba(11, 17, 25, .85); transition: transform var(--t-micro) var(--ease); }
.fl__range input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.fl__range input:active::-webkit-slider-thumb { transform: scale(.94); }
.fl__range input:focus-visible { outline: none; }
.fl__range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary); }
.fl__range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary); }

/* plan drawing on the night ground */
.fl-svg { overflow: visible; }
.fl-int { fill: #101824; }
.fl-out { fill: #0D141E; }
.fl-fin { stroke: #EDEAE3; stroke-opacity: .07; stroke-width: .012; }
.fl-wall { fill: #D8D2C4; }
.fl-wo { fill: none; stroke: #EDEAE3; stroke-width: .028; }
.fl-glass { fill: #0B1119; stroke: #9AA4B0; stroke-width: .02; transition: stroke .3s var(--ease), fill .3s var(--ease); }
.fl-glass.is-lit { stroke: #F6C979; fill: #4A3A1E; }
.fl-pane { stroke: #9AA4B0; stroke-width: .018; }
.fl-door { fill: none; stroke: #EDEAE3; stroke-opacity: .45; stroke-width: .018; }
.fl-fx rect, .fl-fx circle, .fl-fx ellipse, .fl-fx polygon { fill: none; stroke: #EDEAE3; stroke-opacity: .3; stroke-width: .02; }
.fl-edge { fill: none; stroke: #EDEAE3; stroke-opacity: .5; stroke-width: .02; }
.fl-shade { fill: #070B10; }
.fl-light { mix-blend-mode: screen; }
.fl-labels text { font-family: var(--font); }
.fl-chip { fill: #101824; fill-opacity: .82; }
.fl-rl { fill: #E3E6EA; font-weight: 520; font-stretch: 90%; transition: fill .3s var(--ease); }
.fl-rl.is-lit { fill: #F6D29A; }
.fl-ra { fill: #AEB6BF; font-size: .84em; font-stretch: 100%; }
.fl-scale .fl-ra { stroke: none; }

/* desktop pin is the default; frames mode = vertical list */
:is([data-mode="frames"], [data-mode="lite"]) .res__pin { height: auto; min-height: 0; overflow: visible; }
:is([data-mode="frames"], [data-mode="lite"]) .res__track { flex-direction: column; width: auto; }
:is([data-mode="frames"], [data-mode="lite"]) .rp { flex: none; width: auto; height: auto; padding: 72px var(--gut) 56px; }
:is([data-mode="frames"], [data-mode="lite"]) .rp--intro { padding-top: 120px; }
@media (min-width: 800px) { :is([data-mode="frames"], [data-mode="lite"]) .rp--intro { min-height: 0; } }
:is([data-mode="frames"], [data-mode="lite"]) .rt + .rt::before { left: var(--gut); right: var(--gut); top: 0; bottom: auto; width: auto; height: 1px; }
:is([data-mode="frames"], [data-mode="lite"]) .rtabs { position: sticky; top: var(--top); left: auto; display: block; padding: 10px var(--gut); background: rgba(11, 17, 25, .97); border-bottom: 1px solid var(--line); }
:is([data-mode="frames"], [data-mode="lite"]) .rtabs ul { border: 0; padding: 0; background: none; overflow-x: auto; scrollbar-width: none; }
:is([data-mode="frames"], [data-mode="lite"]) .res__progress { display: none; }
:is([data-mode="frames"], [data-mode="lite"]) .rt { min-height: 0; }
:is([data-mode="frames"], [data-mode="lite"]) .fl { min-height: 640px; }
@media (min-width: 800px) {
  :is([data-mode="frames"], [data-mode="lite"]) .rt { grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); min-height: 760px; }
}
@media (max-width: 799px) {
  .rt { grid-template-columns: 1fr; gap: 28px; }
  .rp--intro .h2 { max-width: 12ch; }
  .keyplan__list { grid-template-columns: 1fr; }
  .rp__intro { grid-template-columns: 1fr; grid-template-areas: "h" "lede" "fig" "list" "note"; }
  .keyplan__fig { margin: 0 0 28px; }
  :is([data-mode="frames"], [data-mode="lite"]) .rtabs { padding: 8px 12px; }
  .rtabs ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .rtabs li { display: flex; }
  .rtabs .rtab { width: 100%; }
  .rtab { flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 4px; min-height: 48px; text-align: center; font-size: 13.5px; }
  .rtab span:not(.rtabs__ind) { font-size: 12px; }
  .fl, :is([data-mode="frames"], [data-mode="lite"]) .fl { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; gap: 16px; }
  .fl__stage { grid-row: 1; aspect-ratio: var(--ar, 1); width: 100%; max-height: 72svh; }
  .fl__read { grid-column: 1; grid-row: 2; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 14px; }
  .fl__time { font-size: 52px; grid-row: span 2; }
  .fl__compass { width: 64px; grid-row: span 2; }
  .fl__sun { grid-column: 3; }
  .fl__in { grid-column: 1 / -1; min-height: 3em; max-width: none; }
  .fl__ctrl { grid-row: 3; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .fl__play { grid-column: 1 / -1; justify-self: start; }
  .rt__code { font-size: 104px; }
  .rt[data-type="ph"] .rt__code { font-size: 72px; }
}

/* =========================================================================
   3 · Location
   ========================================================================= */
.loc { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--bg-map); overflow: hidden; }
.loc__map { position: absolute; inset: 0; }
.loc__map > svg { width: 100%; height: 100%; }
.loc::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 16, 24, .97) 0%, rgba(10, 16, 24, .9) 26%, rgba(10, 16, 24, .45) 40%, rgba(10, 16, 24, 0) 52%); }
.loc__panel { position: relative; z-index: 2; width: min(470px, 40vw); margin-left: var(--gut); padding: calc(var(--top) + 56px) 0 72px; }
.loc__panel .h2 { margin-bottom: 22px; max-width: 11ch; }
.loc__panel .lede { margin-bottom: 34px; font-size: 17px; }
.walk { border-top: 1px solid var(--line); margin-bottom: 18px; }
.walk li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--fg); transition: color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease); }
.walk li.is-on { color: var(--primary); }
.walk__n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.walk__m { color: var(--fg-2); font-variant-numeric: tabular-nums; }

.map { font-family: var(--font); }
.map__water { fill: #0E1926; }
.map__ripline { stroke: #EDEAE3; stroke-opacity: .07; stroke-width: 1.2; }
.map__bank { fill: none; stroke: #A6B8C4; stroke-width: 2.2; stroke-linejoin: round; }
.map__prom { fill: none; stroke: #EDEAE3; stroke-opacity: .32; stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.map__pier { fill: none; stroke: #A6B8C4; stroke-width: 3; stroke-linecap: round; }
.map__river { fill: #8D97A3; font-size: calc(16px * var(--mk, 1)); letter-spacing: .5em; font-stretch: 125%; }
.map__contour { fill: none; stroke: #1E2834; stroke-width: 1.1; }
.map__contour.is-major { stroke: #2C3846; stroke-width: 1.4; }
.map__street { fill: none; stroke: #18212D; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.map__street.is-main { stroke: #1B2532; stroke-width: 15; }
.map__street.is-mid { stroke-width: 11; }
.map__tram { fill: none; stroke: #F1C27D; stroke-opacity: .5; stroke-width: 2; stroke-dasharray: 10 8; }
.map__ring { fill: none; stroke: #EDEAE3; stroke-opacity: .2; stroke-width: 1.2; stroke-dasharray: 3 7; }
.map__ringl { fill: #8D97A3; font-size: calc(13px * var(--mk, 1)); }
.map__sunline { fill: none; stroke: #F2A77E; stroke-width: 1.6; stroke-dasharray: 1 6; stroke-linecap: round; }
.map__sunl { fill: #F2A77E; font-size: calc(13px * var(--mk, 1)); }
.map__route { fill: none; stroke: #F1C27D; stroke-width: 2; stroke-dasharray: 5 6; opacity: 0; transition: opacity .25s var(--ease); }
.map__route.is-on { opacity: 1; }
.map__badge { fill: #0B1119; stroke: #8D97A3; stroke-width: 1.2; transition: fill var(--t-micro) var(--ease), stroke var(--t-micro) var(--ease); }
.map__num { fill: #EDEAE3; font-size: 13px; font-weight: 600; }
.map__poi.is-on .map__badge { fill: #F1C27D; stroke: #F1C27D; }
.map__poi.is-on .map__num { fill: #0B1119; }
.map__label { fill: #EDEAE3; font-size: calc(15px * var(--mk, 1)); font-weight: 500; }
.map__min { fill: #AEB6BF; font-size: calc(13px * var(--mk, 1)); }
.map__dot { fill: #F1C27D; }
.map__pulse { fill: none; stroke: #F1C27D; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.8s var(--ease) infinite; animation-play-state: paused; }
/* an SVG child cannot be composited: it repaints every frame, so it only runs while the map is on screen (is-live, set in app.js) */
.is-live .map__pulse { animation-play-state: running; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.map__sitel { fill: #F1C27D; font-size: calc(14px * var(--mk, 1)); font-weight: 620; font-stretch: 125%; letter-spacing: .08em; }
.map__edge { fill: none; stroke: #8D97A3; stroke-width: 1.5; }
.map.is-compact .map__label, .map.is-compact .map__min, .map.is-compact .map__ringl, .map.is-compact .map__sunl { display: none; }
.map.is-compact .map__badge { r: 27; }
.map.is-compact .map__num { font-size: 28px; }
.map.is-compact .map__sitel { font-size: 20px; }
/* Phones and tablets (< 1200 px): the text first, the map full width below it. The map is fitted to its own box (map.js), so its
   labels are never cropped and never sit under the text panel or the fixed flag. */
@media (max-width: 1199px) {
  .loc { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 8px; }
  .loc__panel { order: 1; }
  .loc__map { order: 2; }
  .loc::before { display: none; }
  .loc__panel { width: auto; max-width: 640px; margin: 0; padding: calc(var(--top) + 48px) var(--gut) 28px; }
  .loc__map { position: relative; inset: auto; height: clamp(520px, 74vw, 780px); }
}
/* 1000-1199 px, landscape laptops and tablets: never taller than the space under the solid header, so the whole map is in view at
   once (1024 x 768: 656 px instead of 758). The floor keeps the labels apart (map.js fits the drawing to this box); below 1000 px the
   box stays as it was (800 x 600 would drop to 488 px and its labels collide). */
@media (min-width: 1000px) and (max-width: 1199px) {
  .loc__map { height: max(540px, min(clamp(520px, 74vw, 780px), calc(100svh - var(--top) - 8px))); }
}
@media (max-width: 799px) {
  .loc__panel { padding: 88px var(--gut) 24px; }
  .loc__map { height: 470px; }
}

/* =========================================================================
   4 · Specification & payments — the midday palette
   ========================================================================= */
.spec { background: var(--day-bg); color: var(--day-fg-2); padding: calc(var(--top) + 96px) 0 112px; color-scheme: light; }
.spec .h2, .spec h3 { color: var(--day-fg); }
.spec .lede { color: var(--day-fg-2); }
.spec .note { color: var(--day-muted); }
.spec :focus-visible { outline-color: var(--day-fg); }
.spec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 88px; }
.stages { position: relative; margin-bottom: 112px; }
.stages__line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--day-line); }
.stages__fill { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--day-fg); transform-origin: left; transform: scaleX(0); }
.stages__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 28px; }
.stage { position: relative; padding-top: 44px; }
.stage__dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--day-bg); border: 1.5px solid var(--day-fg); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.stage.is-on .stage__dot { background: var(--day-accent); border-color: var(--day-accent); transform: scale(1.15); }
.stage__n { font-size: clamp(110px, 13vw, 220px); line-height: .8; font-weight: 200; font-stretch: 62%; letter-spacing: -.03em; color: var(--day-fg); font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.stage__n span { font-size: .42em; font-weight: 300; margin-left: .04em; vertical-align: .9em; }
.stage__h { font-size: 22px; line-height: 1.2; font-weight: 520; font-stretch: 90%; margin-bottom: 8px; }
.stage p:not(.stage__n) { max-width: 32ch; color: var(--day-fg-2); }
.specgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-bottom: 24px; }
.specgrid__c { padding: 22px 0 30px; border-top: 1px solid var(--day-line); }
.specgrid__c h3 { font-size: 18px; font-weight: 600; font-stretch: 96%; margin-bottom: 12px; }
.specgrid__c li { position: relative; padding: 6px 0 6px 18px; font-size: 15.5px; line-height: 1.45; color: var(--day-fg-2); }
.specgrid__c li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 1px; background: var(--day-accent); }
@media (max-width: 799px) {
  .spec { padding: 96px 0 80px; }
  .spec__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
  .stages__line { left: 7px; right: auto; top: 0; bottom: 60px; width: 1px; height: auto; }
  .stages__fill { left: -1px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: top; transform: scaleY(0); }
  .stages__list { grid-template-columns: 1fr; gap: 44px; }
  .stage { padding: 0 0 0 40px; }
  .stage__n { font-size: 112px; }
  .specgrid { grid-template-columns: 1fr; }
}
@media (min-width: 800px) and (max-width: 1099px) { .specgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   5 · Private viewing + questions (night)
   ========================================================================= */
.view { position: relative; padding: calc(var(--top) + 96px) 0 104px; background: radial-gradient(60% 50% at 78% 18%, rgba(241, 194, 125, .07), rgba(241, 194, 125, 0) 70%), var(--bg); }
.view__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.view__intro .h2 { margin-bottom: 24px; max-width: 12ch; }
.view__intro .lede { margin-bottom: 18px; }
.form { display: grid; gap: 26px; max-width: 640px; }
.field { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-size: 13.5px; color: var(--fg-2); padding: 0; }
.field legend { margin-bottom: 10px; }
.opt { color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 50px; padding: 10px 0; background: transparent; color: var(--fg); font-size: 18px; font-stretch: 96%;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; outline: none;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { border-bottom-color: var(--primary); box-shadow: 0 1px 0 0 var(--primary); }
.field input[aria-invalid="true"] { border-bottom-color: #F29A86; }
.field__err { min-height: 0; font-size: 13.5px; color: #F4B1A2; }
.field__err:empty { display: none; }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 15px; color: var(--fg);
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform 150ms var(--ease);
}
.chip:hover span { border-color: var(--fg-2); }
.chip input:active + span { transform: scale(.97); }
.chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__note { font-size: 13.5px; color: var(--fg-2); }
.form__nojs { flex-basis: 100%; font-size: 13.5px; color: var(--fg-2); max-width: 52ch; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn:disabled:hover { background: var(--primary); }
.btn:disabled:active { transform: none; }
.form__status { min-height: 1.5em; font-size: 15px; color: var(--primary); }

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); margin-top: 120px; }
.faq__h { font-size: clamp(30px, 3vw, 44px); line-height: 1; font-weight: 300; font-stretch: 74%; letter-spacing: -.01em; }
.faq__list { border-bottom: 1px solid var(--line); max-width: 760px; }
.faq__i h4 { font-size: inherit; }
.faq__q {
  position: relative; display: block; width: 100%; min-height: 64px; padding: 20px 56px 20px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left;
  font-size: 19px; line-height: 1.3; font-stretch: 92%; color: var(--fg);
  transition: color var(--t-micro) var(--ease);
}
.faq__q::before, .faq__q::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.faq__q::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"]::after { transform: rotate(0deg); }
.faq__q:hover { color: var(--primary); }
.faq__q:active { color: var(--primary-h); }
.faq__a p { padding: 0 56px 24px 0; color: var(--fg-2); max-width: 62ch; }
@media (max-width: 799px) {
  .view { padding: 88px 0 72px; }
  .view__grid, .faq { grid-template-columns: 1fr; gap: 36px; }
  .faq { margin-top: 80px; }
  .faq__q { font-size: 17px; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.foot { background: var(--bg-deep); padding: 72px 0 56px; color: var(--fg-2); overflow: hidden; }
.foot__mark { font-size: min(14.6vw, 230px); line-height: .8; font-weight: 250; font-stretch: 125%; letter-spacing: .01em; color: var(--fg); margin: 0 0 22px -0.04em; white-space: nowrap; }
.foot__now { font-size: 14px; color: var(--fg-2); max-width: 70ch; margin-bottom: 56px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-top: 28px; border-top: 1px solid var(--line); margin-bottom: 40px; }
.foot__nav ul { display: grid; gap: 0; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg); transition: color var(--t-micro) var(--ease); }
.foot__nav a:hover { color: var(--primary); }
.foot__nav a:active { color: var(--primary-h); }
.foot__legal p { font-size: 14px; line-height: 1.6; max-width: 72ch; margin-bottom: 12px; }
.foot__legal strong { color: var(--fg); font-weight: 560; }
.foot__credit { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; font-size: 14px; color: var(--fg-2); }
.foot__credit a { color: var(--primary); text-underline-offset: 4px; transition: color var(--t-micro) var(--ease), text-underline-offset var(--t-micro) var(--ease); display: inline-flex; min-height: 44px; align-items: center; }
.foot__credit a:hover { color: var(--primary-h); text-underline-offset: 7px; }
/* studio links in the footer: back to the studio site, legal notice, privacy (all on formschwung.com) */
.foot__studio { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; font-size: 14px; color: var(--fg-2); }
.foot__studio a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; transition: color var(--t-micro) var(--ease); }
.foot__studio a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 5px; }
.foot__studio a:active { color: var(--primary-h); }
.foot__studio-sep { color: var(--muted); }
/* narrow phones: the links stack, one per line, without the dot separators (a dot could end up alone at the start or the end of a line) */
@media (max-width: 479px) {
  .foot__credit, .foot__studio { flex-direction: column; align-items: flex-start; }
  .foot__credit .foot__studio-sep, .foot__studio .foot__studio-sep { display: none; }
}
@media (max-width: 799px) { .foot { padding: 56px 0 120px; } .foot__grid { grid-template-columns: 1fr; } }

/* ---------- Mobile bottom bar: flag + primary CTA ------------------------ */
.mbar { display: none; }
@media (max-width: 799px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 16px; background: rgba(11, 17, 25, .97); border-top: 1px solid var(--line);
  }
  .mbar__flag { font-size: 12px; line-height: 1.3; color: var(--fg-2); max-width: 15ch; }
  .mbar--note { justify-content: center; padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }   /* 404: the flag alone */
  .mbar--note .mbar__flag { max-width: none; font-size: 13px; text-align: center; }
  .mbar__cta { min-height: 46px; padding: 0 16px; font-size: 14.5px; }
  .scene__ui, .choose:not(.is-static) { padding-bottom: 80px; }
}

/* =========================================================================
   Mobile scene layout
   ========================================================================= */
@media (max-width: 799px) {
  .scene { min-height: 620px; }
  .scene__num { top: 16%; }
  .scene__row { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
  .scene__h1 { font-size: 30px; max-width: 14ch; margin-bottom: 8px; }
  .scene__lede { font-size: 15px; }
  .scene__cue { display: none; }
  .status { text-align: left; font-size: 13px; max-width: none; }
  .status__text { display: none; }
  .tick span { font-size: 10px; left: -7px; }
  .tick:not(.is-odd):nth-child(4n + 1) span { display: none; }
  .seg { grid-template-columns: 1fr 1fr; }
  .seg__b:nth-child(3) { padding-left: 0; }
  .seg__b:nth-child(3)::before { left: 0; }
  .seg__b:nth-child(3)::after { display: none; }
  .seg__b:nth-child(n + 3) { border-top: 1px solid rgba(237, 234, 227, .2); }
  .seg__n { font-size: 21px; }
  .seg__s { font-size: 12.5px; }
}
/* phones: a bigger clock (it is also the largest thing painted in the first second, so it is the LCP element) */
@media (max-width: 599px) {
  .scene__num { top: max(14%, calc(var(--top) + 6px)); font-size: min(39vw, 46svh); }  /* never under the header */
}

/* =========================================================================
   Lite mode (small screens, motion ok): the scene is CSS-sticky inside a tall
   section, the rendered day scrubs with the scroll (no GSAP pin).
   Runway: 220svh of scroll (was 340svh before v2c); the last 12% holds the night for the chooser.
   ========================================================================= */
@media (max-width: 799px) {
  [data-mode="lite"] .day { height: calc(max(100vh, 620px) + 220vh); height: calc(max(100svh, 620px) + 220svh); }
  [data-mode="lite"] .scene { position: sticky; top: 0; }
  /* bottom stack: the opening line first; once the scroll starts it is replaced by the hour's status */
  [data-mode="lite"] .scene__row { display: grid; margin-bottom: 8px; }
  [data-mode="lite"] .scene__lead, [data-mode="lite"] .status { grid-area: 1 / 1; align-self: end; transition: opacity .4s var(--ease), transform .5s var(--ease); }
  [data-mode="lite"] .status { opacity: 0; transform: translateY(12px); pointer-events: none; }
  [data-mode="lite"] .status__text { display: block; }
  [data-mode="lite"] .scene.is-scrolled .scene__lead { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  [data-mode="lite"] .scene.is-scrolled .status { opacity: 1; transform: none; }
  /* the chooser: a compact sheet under the building so the lit windows stay visible */
  [data-mode="lite"] .choose__row { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; }
  [data-mode="lite"] .choose__h2 { font-size: 36px; margin-bottom: 0; }
  [data-mode="lite"] .choose__head p { display: none; }
  [data-mode="lite"] .choose__detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; margin: 0; padding: 0; border: 0; background: none; }
  [data-mode="lite"] .choose__count { font-size: 16px; line-height: 1.25; margin: 0; }
  [data-mode="lite"] .choose .link { flex: none; white-space: nowrap; }
  [data-mode="lite"] .choose__info { display: none; }
  [data-mode="lite"] .seg__b { min-height: 56px; padding: 10px 12px 6px 0; }
  [data-mode="lite"] .seg__n { font-size: 19px; }
  [data-mode="lite"] .seg__s { font-size: 12px; }
}
@media (max-width: 799px) and (max-height: 740px) {
  [data-mode="lite"] .scene__lede { display: none; }
  /* short phones: one row of four, no hour sub-labels, so the sheet stays under the building */
  [data-mode="lite"] .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-mode="lite"] .seg__b { min-height: 48px; padding: 12px 4px 6px 12px; }
  [data-mode="lite"] .seg__b:first-child { padding-left: 0; }
  [data-mode="lite"] .seg__b:nth-child(3)::before { left: 12px; }
  [data-mode="lite"] .seg__b:nth-child(3)::after { display: block; }
  [data-mode="lite"] .seg__b:nth-child(n + 3) { border-top: 0; }
  [data-mode="lite"] .seg__n { font-size: 16.5px; }
  [data-mode="lite"] .seg__s { display: none; }
}
/* static small screens (reduced motion, no JS): the hour label would only repeat the clock, and the building stays clear */
@media (max-width: 799px) {
  :is([data-mode="frames"], .no-js) .status { display: none; }
}

/* =========================================================================
   Reduced motion: no transitions, no loops, everything visible
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .scene__cue span::after, .map__pulse { animation: none !important; }
}

/* No JS: the scene shows its first frame and all content stays readable */
.no-js .scene { height: auto; display: grid; grid-template-rows: minmax(600px, 100svh) auto; }
.no-js .scene__ui { position: relative; grid-row: 1; align-self: end; }
/* the image layers fill the first row only (the chooser sits below them) */
.no-js .scene__photo, .no-js .scene__fore { bottom: auto; height: max(600px, 100svh); }
.no-js .scene__scrim { bottom: auto; top: calc(max(600px, 100svh) * .48); height: calc(max(600px, 100svh) * .52); }
.no-js .choose { position: relative; grid-row: 2; opacity: 1; transform: none; pointer-events: auto; visibility: visible; padding: 56px var(--gut) 40px; background: var(--bg); }
.no-js [data-intro] { opacity: 1; }
@media (max-width: 799px) { .no-js .choose__row { flex-direction: column; align-items: stretch; gap: 14px; } .no-js .choose__detail { width: auto; margin: 0; } }
.no-js .frames { display: block; }
.no-js .res__pin { height: auto; overflow: visible; }
.no-js .res__track { flex-direction: column; width: auto; }
.no-js .rp { width: auto; height: auto; flex: none; padding: 72px var(--gut); }
.no-js .rtabs { position: static; padding: 124px var(--gut) 16px; }
.no-js .loc__map { display: none; }
/* no JS: a solid header (nothing scrolls under a transparent one), no dead Menu button, anchors clear the header, and the plan area says why it is a note and not a drawing */
html.no-js { scroll-padding-top: 112px; }
.no-js .hdr { background: #0b1119; border-bottom-color: rgba(237, 234, 227, .07); }
.no-js .hdr__menu { display: none; }
.no-js .fl { display: block; }
.fl__nojs { max-width: 46ch; padding: 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: rgba(237, 234, 227, .03); color: var(--fg-2); font-size: 15px; line-height: 1.55; }
.fl__nojs strong { display: block; margin-bottom: 6px; color: var(--fg); font-weight: 600; }
.keyplan > noscript { display: block; grid-area: fig; align-self: center; }
@media (max-width: 799px) { .no-js .rp__intro { display: block; } .keyplan > noscript { margin-top: 20px; } }

/* ---------- 404 ------------------------------------------------------------ */
.nf { min-height: calc(100svh - 120px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: calc(var(--top) + 40px) var(--gut) 72px; }
.nf__num { font-size: min(26vw, 340px); line-height: .8; font-weight: 200; font-stretch: 62%; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: 12px; }
.nf .h2 { max-width: 14ch; }