/* ==========================================================================
   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).
   Taste direction "The split stage" (seed 1215969352, palette and type kept): a still half and a reading half,
   the work ring breaking the split full width, the close as an open brief on the signal field.
   Grounds: ink #0d0e10; light #f2f2f2 only as the field behind a held object and inside the brief.
   Accent: signal orange #fc5802, for the arrow on every action, the hero's last word and the close field.
   ========================================================================== */
@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: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-800-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* Hero only. SIL OFL 1.1, see ../fonts/Big-Shoulders-Display-OFL.txt. */
@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;
  /* Taste type.md: five steps for the whole homepage, nothing in between */
  --t-small: 0.9375rem;                              /* 15px: credits, legal, navigation */
  --t-body: 1.125rem;                                /* 18px: the reading column (direction: 17-19px) */
  --t-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); /* 20-24px: the brief's title, the phone index */
  --t-heading: clamp(1.9rem, 3.3vw, 3rem);           /* 30-48px: modest headings in the reading column (direction: 32-44) */
  --t-display: clamp(2.4rem, 0.5rem + 7vw, 7rem);    /* the one display size: the name, the closing line */
  --still-inset: var(--gutter);                      /* the page's one pair of margins (sheet), not the blueprint's 20px */
  --still-w: 47vw;
  --read-pad: clamp(3rem, 4vw, 4.5rem);              /* direction: the reading column's 48-72px padding */
}
@media (max-width: 899px), (max-height: 519px) {
  :root { --t-heading: clamp(1.75rem, 7.4vw, 3rem); --t-display: 10vw; }
}

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: var(--t-small); 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: var(--ink); }   /* solid: at 0.9 the copy scrolling under it read through the wordmark (taste audit, 390 px) */
@media (max-width: 899px) {
  /* Taste's plain navigation bar keeps the wordmark readable over the bright hero wall. */
  .site-header[data-header="clear"] { background: var(--ink); }
}
.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.62); font-size: var(--t-small); 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: var(--t-heading); 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 compact sculpted key with a bare arrow; HEXPOP keeps its original pill and lime badge ---------- */
.btn {
  background: var(--color-fg); color: var(--color-bg); gap: 0.85em;
  padding: 0.5em 0.5em 0.5em 1.35em; font-size: var(--t-body);
}
.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: 1em; 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(--t-small); padding: 0.35em 0.35em 0.35em 1.1em; }
.btn-small .btn-arrow { width: 1.9em; height: 1.9em; }
.btn:not(.hexpop-shake) {
  gap: 0.6em; min-height: 46px; padding: 0.7em 1.35em; border-radius: 1rem; letter-spacing: 0.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fg) 90%, var(--paper)) 0%, var(--color-fg) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -2px 0 rgb(0 0 0 / 0.22), 0 6px 14px -8px rgb(0 0 0 / 0.5);
  transition: background-color 0.15s ease-out, color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.btn-small:not(.hexpop-shake) { min-height: 44px; padding: 0.55em 1.1em; border-radius: 0.9rem; }
.btn:not(.hexpop-shake) .btn-arrow {
  width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: 1.05em;
}
.btn:not(.hexpop-shake):hover .btn-arrow, .btn:not(.hexpop-shake):focus-visible .btn-arrow { background: none; color: inherit; transform: translate(2px, -2px); }
.btn:not(.hexpop-shake):hover, .btn:not(.hexpop-shake):focus-visible { background: var(--signal); color: var(--ink); }
.btn:not(.hexpop-shake):active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.25); transition-duration: 0.08s; }
@media (hover: none) { .btn:not(.hexpop-shake):hover { background: var(--color-fg); color: var(--color-bg); } .btn:not(.hexpop-shake):hover .btn-arrow { transform: none; } }
@media (hover: hover) and (pointer: fine) { .btn:not(.hexpop-shake):hover { transform: translateY(-1px); } }
.btn.hexpop-shake:focus-visible { outline-color: var(--hx-lime); }
@media (prefers-reduced-motion: reduce) { .btn:not(.hexpop-shake), .btn:not(.hexpop-shake):hover, .btn:not(.hexpop-shake):active, .btn:not(.hexpop-shake) .btn-arrow { transform: none !important; } }
.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: the dark room, full size ----------
   The hall fills the screen edge to edge (still, rest layer and the 57-frame dive canvas, timings untouched). The
   copy sits in the darker lower-left of the room on a neutral scrim, so it reads without boxing the picture. */
.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; margin: 0;
  overflow: hidden; overflow: clip; background: var(--ink);
}
.hero-seq .seq-still img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.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%; }
.hero-seq .seq-media::after {   /* neutral scrim under the copy (the one allowed gradient) */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(13 14 16 / 0.82) 0%, rgb(13 14 16 / 0.45) 30%, rgb(13 14 16 / 0) 44%),
              linear-gradient(0deg, rgb(13 14 16 / 0.7) 0%, rgb(13 14 16 / 0) 40%);
}
.hero-copy {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(3rem, 9svh, 6.5rem); top: auto; right: auto;
  width: calc(44vw - var(--gutter)); height: calc(100svh - clamp(3rem, 9svh, 6.5rem) - 5rem);
  display: grid; grid-template-rows: 1fr auto auto auto; justify-items: start; gap: var(--space-m); padding: 0; container-type: inline-size;
}
.hero-copy > * { max-width: none; margin: 0; }
.hero-copy h1 { --hero-hover-image: url("../images/hero-mask-city.webp"); --hero-mask-brightness: 1.55; width: 100%; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; font-family: "Big Shoulders Display", var(--font-display), sans-serif; font-weight: 800; font-size: min(30cqw, calc((100svh - 24rem) / 2.25)); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; }
.hero-copy .hero-reel { position: relative; display: block; width: 100%; height: 2.25em; overflow: hidden; perspective: 600px; }
.hero-copy h1 { position: relative; margin-bottom: 0.55em; }
.hero-copy h1 .hl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; backface-visibility: hidden; }
.hero-copy .lede { margin-top: var(--space-xs); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-copy h1::after {
    content: attr(data-reflection-text); position: absolute; left: 0; right: 0; top: calc(50% + var(--hero-reflection-top, 1.975em));
    height: 2.25em; display: flex; align-items: center; justify-content: center; text-align: center;
    background-image: none; background-size: cover; background-position: center 28%;
    -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none;
    transform: scaleY(-1); transform-origin: center top;
    filter: brightness(var(--hero-mask-brightness, 1.55)) saturate(1.55) blur(0.35px);
    opacity: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--hero-reflection-edge, 1.535em) - 0.75em), #000 var(--hero-reflection-edge, 1.535em)), radial-gradient(circle 185px at var(--mask-x, 50%) var(--mask-y, 50%), #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent calc(var(--hero-reflection-edge, 1.535em) - 0.75em), #000 var(--hero-reflection-edge, 1.535em)), radial-gradient(circle 185px at var(--mask-x, 50%) var(--mask-y, 50%), #000 58%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-copy h1 .hl::after {
    content: attr(data-mask-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center 28%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    pointer-events: none;
    filter: brightness(var(--hero-mask-brightness, 1.55)) saturate(1.55);
    background-image: none; opacity: 0;
    -webkit-mask-image: radial-gradient(circle 185px at var(--mask-x, 50%) var(--mask-y, 50%), #000 58%, transparent 100%);
    mask-image: radial-gradient(circle 185px at var(--mask-x, 50%) var(--mask-y, 50%), #000 58%, transparent 100%);
  }
  @media (hover: hover) and (pointer: fine) {
    .hero-copy h1::after,
    .hero-copy h1 .hl::after { background-image: var(--hero-hover-image, none); }
    .hero-copy h1.is-hovering::after { opacity: var(--hero-reflection-opacity, 0.65); }
    .hero-copy h1.is-hovering .hl::after { opacity: 1; }
  }
}
@media (forced-colors: active) {
  .hero-copy h1 .hl { background: none; color: CanvasText; }
  .hero-copy h1::after,
  .hero-copy h1 .hl::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1::after { transition: none; }
}
.hero-copy .lede { font-size: var(--t-body); line-height: 1.5; color: rgb(242 242 242 / 0.9); max-width: 36ch; }
.hero-copy .actions { gap: var(--space-s) var(--space-m); }
.hero-credit { font-size: 0.8125rem; line-height: 1.4; color: rgb(242 242 242 / 0.6); max-width: 40ch; }
.hero-mark { display: none; }
@media (max-width: 899px), (max-height: 519px) {
  .hero-seq .seq { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero-seq .seq-media { position: relative; inset: auto; height: 100svh; flex: none; }
  .hero-seq .seq-still img, .hero-rest img { object-position: 50% 30%; }
  .hero-seq .seq-media::after { display: none; }
  .hero-copy { position: relative; order: 1; left: auto; right: auto; bottom: auto; width: 100%; height: auto; min-width: 0; box-sizing: border-box; grid-template-rows: auto; background: var(--ink); gap: var(--space-s); padding: var(--space-l) var(--gutter); }
  .hero-copy h1 { font-size: 30cqw; }
  .hero-copy .lede { font-size: 1rem; }
  .hero-credit { display: none; }
}
@media (max-width: 899px) and (min-width: 600px) { .hero-copy { width: auto; } }

/* ---------- 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-mark { 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) */
/* phones and tablets: no screen-tall hold around the words (Taste blank-gap), and the sentence set as a statement,
   not a headline (Taste house rule: statements 32px or less at tablet, 24px on a phone). The word-by-word scrub and
   the desktop split are unchanged. */
@media (max-width: 899px), (max-height: 519px) {
  #what-we-create { min-height: 0; padding-block: var(--space-2xl); }
  #what-we-create .statement-text { font-size: var(--t-lead); line-height: 1.3; max-width: 30ch; }
}
.statement-zoom { display: grid; gap: var(--space-m); justify-items: center; transform-origin: 50% 40%; will-change: transform, opacity; }
.statement .statement-text { max-width: 20ch; }

/* ---------- The index: every piece by name, at every width, right after the ring ---------- */
.work-phone-index { background: #000; color: var(--paper); padding: var(--space-xl) var(--gutter) var(--space-2xl); }
.work-phone-index h2 { margin: 0 0 var(--space-m); font-size: var(--t-heading); }
.work-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(2rem, 5vw, 6rem); }
@media (min-width: 900px) { .work-names { grid-template-columns: 1fr 1fr; } }
.work-names a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem;
  min-height: 3.25rem; padding-block: 0.7rem; color: var(--paper); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lead); letter-spacing: -0.02em;
  transition: color 0.15s ease-out, transform 0.2s ease-out;
}
.work-names a span { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small); letter-spacing: 0.01em; color: rgb(242 242 242 / 0.62); }
.work-names a:hover, .work-names a:focus-visible { color: var(--signal); transform: translateX(0.35rem); }
.wpi-all { display: inline-block; margin-top: var(--space-m); font-weight: 600; }
@media (max-width: 899px), (max-height: 519px) {
  .work-ring #work-title {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    padding: var(--space-xl) var(--gutter) 0; font-size: var(--t-heading); line-height: 1;
  }
  .work-ring.is-ring-free { padding-top: 0; }
}

/* ---------- 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; isolation: isolate; }   /* contains the copy's z-index 300 under the fixed header */   /* 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(--t-body); margin-top: 0.25rem; }
.chapter-kicker span { color: var(--signal); margin-right: 0.5em; }
.ring-copy h3 { font-size: var(--t-heading); }
.chapter-lede { font-size: var(--t-lead); 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(--t-small); }
.ring-copy .actions { margin-top: var(--space-m); }
.ring-card figcaption { color: rgb(242 242 242 / 0.66); font-size: var(--t-small); }
.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(--t-body); }
  .is-ring .ring-copy { width: calc(100% - 2 * var(--gutter)); }   /* the copy band takes the page's own margins (Taste off-centre) */
}
.is-ring .ring-copy h3 { font-size: var(--t-heading); }
.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; min-height: 2.75rem; min-width: 2.75rem; }
.clip-toggle:hover { background: var(--signal); color: var(--ink); transition-duration: 0.25s; }

/* ---------- Studio introduction ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter); background: var(--ink); color: var(--paper);
}
.split-read { display: grid; justify-items: start; gap: var(--space-m); }
.split-read > * { max-width: 42ch; margin: 0; }
.studio-letter h2 { font-size: var(--t-heading); line-height: 1; letter-spacing: -0.03em; }
.studio-letter p { font-size: var(--t-body); line-height: 1.55; color: rgb(242 242 242 / 0.86); }
.studio-letter .btn { margin-top: var(--space-s); }
@media (max-width: 899px), (max-height: 519px) {
  .split { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl) var(--space-2xl); gap: var(--space-l); }
}

/* ---------- Close: one line and one action, in the same room ---------- */
.close {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-m);
  padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem); background: var(--ink); color: var(--paper);
  border-top: 0;
}
.close h2 { margin: 0; max-width: 18ch; font-size: var(--t-heading); line-height: 1; letter-spacing: -0.03em; }
.close-lede { margin: 0; font-size: var(--t-body); line-height: 1.55; max-width: 46ch; color: rgb(242 242 242 / 0.86); }
.close .actions { margin-top: var(--space-xs); }
@media (min-width: 900px) {
  .close { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: auto auto; column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
  .close h2 { grid-row: 1 / 3; font-size: clamp(2.4rem, 1.2rem + 2.6vw, 4rem); }
  .close-lede, .close .actions { grid-column: 2; }
}

/* ---------- Footer: section blueprint "A single quiet line". No block: after 30svh of the page's own ground, one
   line in the navigation's size; what this is at the left, the links centred, the year and legal links at the right.
   The Meta notice stays beneath in the soft ink. ---------- */
.site-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem 1.5rem;
  padding: var(--space-xl) var(--gutter) 1.875rem; background: #0a0b0c; color: rgb(242 242 242 / 0.66); font-size: var(--t-small);
}
.site-footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; }
.footer-links a, .footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--paper); text-decoration: none; }
.footer-links a:hover, .footer-legal a:hover { color: var(--signal); }
.footer-legal { justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.footer-meta { grid-column: 1 / -1; max-width: 70ch; line-height: 1.5; }
@media (max-width: 899px) {
  .site-footer { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: var(--space-l) var(--gutter) 1.5rem; }
  .footer-links { justify-content: flex-start; }
  .footer-legal { justify-self: start; }
}

/* ==========================================================================
   /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; }