/* ==========================================================================
   Growth Terminal — brand layer over the engine's neutral base.css
   Type: Clash Display 600 (display) + General Sans 400/600 (text), self-hosted (Fontshare, ITF Free Font License).
   Surfaces: ink #0d0e10 for the hero, statement, chapters and footer; paper #f2f2f2 (theme-alt) for the
   studio band and the close. Accent: signal orange #fc5802, used for the arrow on every action, the hero's
   last word and the chapter count, never for body text.
   ========================================================================== */
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root { --signal: #fc5802; --ink: #0d0e10; --paper: #f2f2f2; --header-clear: 90svh; }

h1, h2, h3 { letter-spacing: -0.035em; line-height: 0.95; }
em { font-style: normal; }

/* ---------- Header ---------- */
.site-header { color: var(--paper); }
.brand-mark:hover { opacity: 0.72; }
.brand-mark { transition: opacity 0.15s ease-out; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.05rem; }
.site-header .nav-wide { gap: clamp(1rem, 0.4rem + 1.4vw, 1.9rem); }
.site-header .nav-wide > a:not(.btn), .site-header .nav-wide .has-menu > a {
  font-weight: 400; font-size: 0.95rem; letter-spacing: 0.01em; color: rgb(242 242 242 / 0.84); transition: color 0.15s ease-out;
}
.site-header .nav-wide > a:not(.btn):hover, .site-header .nav-wide > a:not(.btn):focus-visible,
.site-header .nav-wide .has-menu > a:hover, .site-header .nav-wide .has-menu > a:focus-visible, .site-header .has-menu.is-open > a { color: var(--paper); }
/* the thin underline only on hover, on the open Work menu and on the current page (a permanent underline on every
   link read heavy, 2026-10-15); the solid bar gets a hairline bottom edge once it has scrolled in */
.site-header .nav-wide .link-underline::after { transform: scaleX(0); }
.site-header .nav-wide .link-underline:hover::after, .site-header .nav-wide .link-underline:focus-visible::after,
.site-header .has-menu.is-open > .link-underline::after, .site-header .nav-wide .link-underline[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav-wide .link-underline[aria-current="page"] { color: var(--paper); text-decoration: none; }   /* .page-work's native underline would double it */
.site-header .has-menu.is-open > .link-underline::after, .site-header .nav-wide .link-underline[aria-current="page"]::after { opacity: 1; }
.site-header[data-header="clear"]::before { box-shadow: inset 0 -1px 0 rgb(242 242 242 / 0.08); background: rgb(13 14 16 / 0.9); }
.site-header .btn-small { padding: 0.55em 1.05em; }
.site-header .brand-mark { letter-spacing: 0.02em; }
/* while the phone sheet is open the header goes solid at once, whatever the scroll */
.site-header:has(.nav-menu[open])::before { animation: none; opacity: 1; background: var(--ink); }
/* the Work dropdown on the ink header: glass, hairline, soft shadow; the type labels muted, the foot in the signal on hover */
/* crisp and easy on the eyes (the founder, 2026-10-15): near-opaque ink so the hero can't muddy it, a hairline top
   light, antialiased type; a defined highlight on hover with the text lifting, nothing vague */
.site-header .menu-panel {
  background: rgb(16 17 20 / 0.96); border-color: rgb(242 242 242 / 0.1); min-width: 18.5rem; border-radius: 0.95rem;
  box-shadow: inset 0 1px 0 rgb(242 242 242 / 0.06), 0 1.4rem 2.8rem -1rem rgb(0 0 0 / 0.7);
  -webkit-font-smoothing: antialiased; -webkit-backdrop-filter: none; backdrop-filter: none;   /* near-opaque already; blur costs a compositing pass */
}
.site-header .menu-panel a { color: rgb(242 242 242 / 0.86); }
.site-header .menu-panel a:hover, .site-header .menu-panel a:focus-visible { color: var(--paper); background: rgb(242 242 242 / 0.09); }
.site-header .menu-panel .menu-type { color: rgb(242 242 242 / 0.52); font-size: 0.8rem; letter-spacing: 0.01em; transition: color 0.08s ease-out; }
.site-header .menu-panel a:hover .menu-type, .site-header .menu-panel a:focus-visible .menu-type { color: rgb(242 242 242 / 0.72); }
.site-header .menu-panel .menu-foot:hover, .site-header .menu-panel .menu-foot:focus-visible { color: var(--signal); }
.nav-menu { display: none; }
@media (max-width: 899px) {
  .site-header .nav-wide { display: none; }
  .nav-menu { display: block; }
  .nav-menu summary {
    list-style: none; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center;
    padding: 0 1.1em; border-radius: 999px; border: 1px solid rgb(242 242 242 / 0.35); font-weight: 600;
  }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu[open] summary { background: var(--paper); color: var(--ink); }
  /* hidden outright while closed: Chrome keeps a closed details' content as a zero-size box with layout containment,
     which becomes the containing block of this fixed sheet, so it laid out at the pill and widened the phone viewport
     to 477 px (measured 2026-10-15) */
  .nav-menu:not([open]) nav { display: none; }
  .nav-menu nav {
    position: fixed; inset: var(--header-h) 0 0 0; overflow-y: auto; display: grid; gap: 0.2rem; align-content: start;
    border-top: 1px solid rgb(242 242 242 / 0.08);
    padding: var(--space-m) var(--gutter) var(--space-l); background: var(--ink);
    border-bottom: 1px solid rgb(242 242 242 / 0.12);
  }
  .nav-menu nav a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.25; text-decoration: none; padding-block: 0.1rem; }
  .nav-menu nav .btn { justify-self: start; margin-bottom: var(--space-s); }
  .nav-menu nav .nav-sub { display: grid; gap: 0.15rem; margin: -0.3rem 0 0.5rem 1rem; }
  .nav-menu nav .nav-sub a { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: rgb(242 242 242 / 0.8); }
}

/* ---------- Actions: a pill with the signal-orange arrow ---------- */
.btn {
  background: var(--color-fg); color: var(--color-bg); gap: 0.85em;
  padding: 0.5em 0.5em 0.5em 1.35em; font-size: 1.05rem;
}
.btn:hover { background: var(--signal); color: var(--ink); }
.btn-arrow {
  display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--signal); color: var(--ink); font-size: 0.95em; line-height: 1;
  transition: transform 0.15s ease-out;
}
.btn:hover .btn-arrow { background: var(--ink); color: var(--paper); transform: rotate(45deg); transition-duration: 0.25s; }
.btn-small { font-size: var(--step--1); padding: 0.35em 0.35em 0.35em 1.1em; }
.btn-small .btn-arrow { width: 1.9em; height: 1.9em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
.actions .link-underline { font-weight: 600; }
.link-underline::after { transform: scaleX(1); opacity: 0.45; }
.link-underline:hover::after, .link-underline:focus-visible::after { opacity: 1; }

/* ---------- Hero: full-bleed hall, the dive into the chair as frames, copy on the dark wall at the left ---------- */
.hero-seq { position: relative; background: var(--ink); color: var(--paper); }
.hero-seq .seq { position: relative; display: block; height: 100svh; min-height: 34rem; padding: 0; }
.hero-seq.seq-held .seq { padding-top: 0; }
.hero-seq .seq-media { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.hero-seq .seq-still img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
/* the rest state: the full-size still over the canvas, sharp where the first frames are soft; its cue fades it out
   as the dive starts (the first frame matches it, so nothing jumps) */
.hero-rest { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-rest img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
/* the hand-off: ink over the last frames, so the velvet dissolves into the statement's background */
.hero-veil { position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: 0; pointer-events: none; }
/* scrim where the words sit (measured with tools/herocontrast2.mjs: the headline holds 4.4:1 or more while it shows) */
.hero-seq .seq-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(13 14 16 / 0.64), rgb(13 14 16 / 0.42) 40%, transparent 62%),
              linear-gradient(0deg, rgb(13 14 16 / 0.5), transparent 32%);
}
.hero-copy { position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(3.5rem, 9svh, 6.5rem); width: min(40rem, 46vw); }
.hero-copy h1 { font-size: clamp(2.9rem, 1.3rem + 4.3vw, 5.6rem); max-width: none; }
.hero-copy h1 em { color: var(--signal); }
.hero-copy .lede { margin-top: var(--space-m); max-width: 31em; font-size: var(--step-1); line-height: 1.45; color: rgb(242 242 242 / 0.88); }
.hero-copy .actions { margin-top: var(--space-l); }
.hero-credit {
  position: absolute; z-index: 3; left: var(--gutter); bottom: 1.1rem; margin: 0;
  font-size: 0.8rem; line-height: 1.4; color: rgb(242 242 242 / 0.72); max-width: 40em;
}
/* Squarer screens (4:3 laptops, iPad landscape): the 16:9 frames are cropped harder (the right side is kept), so the
   throne starts at ~38% of the width. The copy narrows to stay left of it. */
@media (min-width: 900px) and (min-height: 520px) and (max-aspect-ratio: 31/20) {
  .hero-copy { width: 30vw; bottom: clamp(3rem, 8svh, 5rem); }
  .hero-copy h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); }
  .hero-copy .lede { font-size: var(--step-0); max-width: none; }
  .hero-copy .actions { gap: var(--space-s); }
}
/* phones and short windows: the still on top (frames are never downloaded there), the copy below on the dark floor */
@media (max-width: 899px), (max-height: 519px) {
  .hero-seq .seq { height: auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--space-l); }
  .hero-seq .seq-media { position: relative; inset: auto; height: 58svh; min-height: 20rem; }
  .hero-seq .seq-still img, .hero-rest img { object-position: 50% 62%; }
  .hero-seq .seq-media::after { background: linear-gradient(0deg, var(--ink) 2%, rgb(13 14 16 / 0.6) 22%, transparent 48%); }
  .hero-copy { position: relative; left: auto; bottom: auto; width: auto; margin: -6svh var(--gutter) 0; }
  .hero-copy h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 3.6rem); }
  .hero-credit { position: relative; left: auto; bottom: auto; margin: var(--space-l) var(--gutter) 0; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .hero-seq .seq-media { height: 50svh; }
  .hero-seq .seq-still img, .hero-rest img { object-position: 50% 52%; }
  .hero-copy h1 { font-size: 2.35rem; }
  .hero-copy .lede { font-size: var(--step-0); }
}

/* ---------- Statement ---------- */
.statement { background: var(--ink); gap: var(--space-m); }
/* The statement replaces the image in the same viewport, rather than following an ink-only screen. */
#what-we-create.hero-handoff {
  position: absolute; inset: 0; z-index: 4;
  min-height: 0; height: 100%; align-content: center;
  padding-block: calc(var(--header-h) + 1rem) 2rem;
}
#what-we-create.hero-handoff .statement-text { font-size: clamp(2.2rem, 4.8vw, 5.3rem); }
.has-ring-handoff { z-index: 3; background: transparent; }
.has-ring-handoff.is-opening-ring .seq-media,
.has-ring-handoff.is-opening-ring .hero-credit { visibility: hidden; }
.follows-hero-handoff { margin-top: -100svh; position: relative; z-index: 2; }
.hero-ring-underlay { position: fixed; inset: 0; z-index: 2; margin: 0; padding: 0; height: 100svh; }
.hero-ring-underlay[hidden] { display: none; }
.statement-doors { display: none; position: absolute; inset: 0; pointer-events: none; }
#what-we-create.hero-handoff.is-opening { background: transparent; }
.hero-handoff.is-opening > .statement-zoom { visibility: hidden; }
.hero-handoff.is-opening .statement-doors { display: block; }
.statement-door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--ink); }
.statement-door-left { left: 0; }
.statement-door-right { right: 0; }
.statement-door-face {
  position: absolute; top: 0; bottom: 0; width: 100vw;
  display: grid; align-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
}
.statement-door-left .statement-door-face { left: 0; }
.statement-door-right .statement-door-face { right: 0; }
/* after the hero's dive the ink hands off to these words: on desktop they sit in the upper part of the section, so
   they rise into the frame as the hold releases instead of after half a screen of black (the founder: a cleaner
   transition into the next scene, 2026-10-15) */
@media (min-width: 900px) and (min-height: 520px) { #what-we-create { align-content: start; padding-top: 9svh; } }
#what-we-create { overflow: clip; }   /* the pull-out starts at 1.6x: without this the scaled box widened the phone viewport to 477 px (measured 2026-10-15) */
.statement-zoom { display: grid; gap: var(--space-m); justify-items: center; transform-origin: 50% 40%; will-change: transform, opacity; }
.statement-label { font-size: var(--step-0); color: var(--color-muted); margin-inline: auto; }
.statement .statement-text { max-width: 20ch; }

/* ---------- Work ring (ring scene): a dark stage with a soft pool of light on the floor, as in the founder's
   reference video; the screen in front plays, its copy sits under the ring ---------- */
.work-ring { color: var(--paper); background: #000; }   /* pitch dark (the founder, 2026-10-15) */
/* each screen glows a little; the floor mirror is the ring scene's own (data-mirror: a CSS box-reflect of the live
   screens cost 17% dropped frames at 2x, measured 2026-10-15) */
.is-ring .ring-card {
  box-shadow: 0 0 2.6rem rgb(255 255 255 / 0.10), 0 1.6rem 2.4rem -1.2rem rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.09);
}
.work-ring.is-ring { --ring-nav: 4.5rem; }   /* room under the front screen for its reflection */
.is-ring .ring-item.is-front .ring-card { box-shadow: 0 0 3.4rem rgb(255 255 255 / 0.16), 0 1.6rem 2.4rem -1.2rem rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.12); }
.chapter-kicker { color: var(--color-muted); font-size: var(--step-0); }
.chapter-kicker span { color: var(--signal); margin-right: 0.5em; }
.ring-copy h3 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); }
.chapter-lede { font-size: var(--step-1); line-height: 1.4; }
.ring-copy-body p:not(.chapter-lede):not(.chapter-note) { color: rgb(242 242 242 / 0.82); }
.chapter-note { color: var(--color-muted); font-size: var(--step--1); }
.ring-copy .actions { margin-top: var(--space-m); }
.ring-card figcaption { color: rgb(242 242 242 / 0.66); font-size: var(--step--1); }
.ring-card .clip-frame { background: #000; }
/* plain list (reduced motion, ≥ 900 wide): each screen beside its copy */
@media (min-width: 900px) {
  .work-ring:not(.is-ring) .ring-item { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 6rem); }
}
/* the ring's copy band at ≥ 900 wide: kicker and title left, the story and its links on the right */
@media (min-width: 900px) {
  .is-ring .ring-copy {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); grid-template-areas: "head body" ". actions";
    column-gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-content: start;
  }
  .is-ring .ring-copy > * + * { margin-top: 0; }
  .is-ring .ring-copy-head { grid-area: head; }
  .is-ring .ring-copy-body { grid-area: body; }
  .is-ring .ring-copy .actions { grid-area: actions; margin-top: var(--space-s); }
  .is-ring .chapter-lede { font-size: var(--step-0); }
}
.is-ring .ring-copy h3 { font-size: clamp(1.9rem, 1rem + 1.7vw, 3rem); }
.is-ring .ring-copy-head > * + * { margin-top: var(--space-3xs, 0.25rem); }
.is-ring .ring-copy-body > * + * { margin-top: var(--space-2xs); }

.clip-toggle { color: var(--paper); transition: background-color 0.15s ease-out; }
.clip-toggle:hover { background: var(--signal); color: var(--ink); transition-duration: 0.25s; }

/* ---------- Studio band (paper) ---------- */
.studio { padding-block: var(--space-2xl) var(--space-xl); overflow: clip; }
.studio-copy { display: grid; gap: var(--space-l); justify-items: start; }
.studio-copy h2 { font-size: var(--step-4); max-width: 15ch; }
.studio .drift-band { padding-block: var(--space-xl) 0; }
.studio .drift { font-size: clamp(4.5rem, 1.5rem + 12vw, 16rem); line-height: 0.9; }
.studio .drift-small { font-size: clamp(2rem, 1rem + 4vw, 5rem); color: var(--color-muted); margin-top: var(--space-s); }

/* ---------- Close (paper) ---------- */
.close { min-height: 100svh; display: grid; align-content: center; padding-block: var(--space-2xl); }
.close-inner { display: grid; justify-items: start; gap: var(--space-m); }
.close .statement-label { margin-inline: 0; }
.close h2 { font-size: clamp(4.5rem, 1.5rem + 13vw, 19rem); letter-spacing: -0.05em; line-height: 0.88; }
.close-lede { font-size: var(--step-1); line-height: 1.45; color: var(--color-muted); max-width: 30em; }

/* ---------- Footer (ink) ---------- */
.site-footer { display: grid; gap: var(--space-m); grid-template-columns: minmax(0, 1fr); color: var(--color-muted); background: var(--ink); }
.footer-brand p { color: var(--paper); max-width: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); }
.footer-links a { text-decoration: none; color: var(--paper); }
.footer-links a:hover { text-decoration: underline; }
.footer-legal { max-width: 70ch; font-size: 0.8rem; }
@media (min-width: 900px) { .site-footer { grid-template-columns: 1fr 1.4fr; } .footer-legal { grid-column: 1 / -1; } }

/* ==========================================================================
   /work — five studio pieces, each shown in use (work.html)
   ========================================================================== */
.page-work main { background: var(--ink); color: var(--paper); }
.page-work [aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
.work-intro { padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl); }
.work-intro h1 { font-size: clamp(5rem, 2rem + 14vw, 17rem); line-height: 0.85; letter-spacing: -0.05em; }
.work-lede { font-size: var(--step-1); line-height: 1.45; color: rgb(242 242 242 / 0.82); max-width: 38em; margin-top: var(--space-l); }
.work-index { list-style: none; padding: 0; margin: var(--space-xl) 0 0; border-top: 1px solid rgb(242 242 242 / 0.16); }
.work-index a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.15rem var(--space-m); align-items: baseline;
  padding-block: var(--space-m); border-bottom: 1px solid rgb(242 242 242 / 0.16); text-decoration: none;
  transition: color 0.15s ease-out;
}
.work-index a:hover { color: var(--signal); transition-duration: 0.25s; }
.wi-n { color: var(--signal); font-variant-numeric: tabular-nums; }
.wi-name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; }
.wi-type { grid-column: 2; color: var(--color-muted); }
@media (min-width: 900px) {
  .work-index a { grid-template-columns: 4rem minmax(0, 1.3fr) minmax(0, 1fr); }
  .wi-type { grid-column: auto; text-align: right; }
}

/* Each case: copy and facts at the left, the recording at the right, lit by the project's own colour */
.case { padding-block: var(--space-2xl); }
.case-fire { background: radial-gradient(60% 70% at 78% 30%, rgb(252 88 2 / 0.14), transparent 70%), var(--ink); }
.case-veyra { background: radial-gradient(60% 70% at 78% 40%, rgb(201 160 104 / 0.14), transparent 70%), #121110; }
.case-casa { background: #121110; padding-top: var(--space-xl); }
.case-meridian { background: radial-gradient(60% 70% at 78% 40%, rgb(176 80 34 / 0.14), transparent 70%), var(--ink); }
.case-forma { background: radial-gradient(60% 70% at 78% 40%, rgb(252 88 2 / 0.12), transparent 70%), var(--ink); }
.case-grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
  .case-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 6rem); }
  .case-fire .case-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}
.case-copy > * + * { margin-top: var(--space-s); }
.case-kicker { color: var(--color-muted); }
.case-kicker span { color: var(--signal); margin-right: 0.5em; }
.case h2 { font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6rem); }
.case-lede { font-size: var(--step-1); line-height: 1.4; }
.case-note { color: var(--color-muted); font-size: var(--step--1); }
.case-facts { margin: var(--space-l) 0 0; border-top: 1px solid rgb(242 242 242 / 0.14); }
.case-facts > div { display: grid; gap: 0.25rem; padding-block: var(--space-s); border-bottom: 1px solid rgb(242 242 242 / 0.14); }
.case-facts dt { color: var(--color-muted); font-size: var(--step--1); }
.case-facts dd { margin: 0; line-height: 1.45; }
.case-copy .actions { margin-top: var(--space-l); }
.case-film { padding-block: 0; gap: var(--space-xs); }
.case-film .clip-frame { border: 1px solid rgb(242 242 242 / 0.1); box-shadow: 0 30px 80px rgb(0 0 0 / 0.45); background: #000; }
.case-film .clip-frame video { aspect-ratio: 16 / 10; }
.case-film.film-portrait { width: min(100%, 30rem); justify-self: center; }
.case-film.film-portrait .clip-frame video { aspect-ratio: 4 / 5; }
.case-film.film-wide .clip-frame video { aspect-ratio: 2 / 1; }
.case-film figcaption { color: rgb(242 242 242 / 0.66); }

/* Fire / Electricity facts: the engine's dossier rows, on the case's own grid */
.facts { margin-top: var(--space-2xl); }
.facts-title { font-size: var(--step-2); line-height: 1.05; margin-top: var(--space-xl); }
.facts-title:first-child { margin-top: 0; }
.facts-intro { color: rgb(242 242 242 / 0.82); margin-top: var(--space-s); max-width: 46em; }
.facts .dossier-list { margin: var(--space-m) 0 0; }
.facts .dossier-row dt { color: var(--paper); font-size: var(--step-0); font-weight: 600; }
.facts .dossier-row dd { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5; color: rgb(242 242 242 / 0.82); }

/* Rooms in the walkthrough: the page's one pin; a swipe row on phones */
.rooms { background: #121110; padding-block: var(--space-xl); }
.rooms .h-head { margin-bottom: var(--space-m); }
.rooms .panel-media { min-height: 60svh; }
.rooms .panel-copy { gap: 0.2rem; }
.room-n { color: rgb(255 255 255 / 0.82); font-size: var(--step--1); }
.rooms h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.is-horizontal.rooms { padding-block: var(--header-h) 0; }

/* Casa Nera: the window opens onto the house; the title sits on its lower edge */
.casa-expand { background: #121110; }
.casa-expand .expand-copy { text-align: left; justify-self: start; margin-bottom: 9svh; }
.casa-expand .expand-copy h2 { font-size: clamp(3.4rem, 1.6rem + 6vw, 8rem); }
.casa-expand .expand-copy .case-kicker { color: #fff; }
/* two rooms share the screen: 5 panels at 80vw held the pin for 5,100 px (5.7 screens); at 50vw and data-speed 1.3
   it is about 2,200 px (under the 300% pin limit) */
.is-horizontal.rooms .panel { flex-basis: 50vw; height: 66svh; }
/* kicker (small text, 4.5:1) and title over the opened house: measured with tools/expandcontrast.mjs */
.casa-expand .expand-media::after { background: linear-gradient(0deg, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.5) 34%, transparent 60%); }
.casa-expand .expand-copy { text-shadow: 0 1px 18px rgb(0 0 0 / 0.45); }
.case-afterhours { background: radial-gradient(60% 70% at 78% 40%, rgb(214 30 40 / 0.13), transparent 70%), #0b0b0c; }
.case-jetlee { background: radial-gradient(60% 70% at 78% 40%, rgb(226 178 99 / 0.13), transparent 70%), #0e1220; }

/* ---------- High-density rendering polish ---------- */
/* light type on ink: grayscale antialiasing keeps strokes from blooming on 2x screens */
.hero-seq, .statement, .work-ring, .site-footer, .page-work main { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* the split panels move only by transform: keep each on its own layer while they open */
.hero-handoff.is-opening .statement-door { will-change: transform; }