/* SYNTAX — homepage */

/* ---------- 00 hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--void); }
.hero-fluid { position: absolute; inset: 0; }
.hero-vignette { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 18% 92%, rgba(5,5,6,.0) 0%, rgba(5,5,6,.0) 55%, rgba(5,5,6,.55) 100%),
  linear-gradient(180deg, rgba(5,5,6,.65) 0%, rgba(5,5,6,0) 18%, rgba(5,5,6,0) 70%, rgba(5,5,6,.75) 100%); }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + 24px); padding-bottom: clamp(84px, 13vh, 132px); pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-meta { position: absolute; top: calc(var(--nav-h) + clamp(24px, 6vh, 64px)); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 24px; }
.hero-coords { color: var(--bone-3); }
.hero-title { font-size: var(--t-hero); line-height: .9; letter-spacing: -.04em; max-width: 12ch; }
.hero-title em { padding-right: .06em; }
.hero-foot { margin-top: clamp(28px, 4.5vh, 48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero-foot .lede { max-width: 44ch; color: var(--bone-2); }
.hero-foot .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-foot .btn-ghost { background: rgba(5, 5, 6, .62); border-color: var(--line-3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-foot .btn-ghost:hover { background: rgba(5, 5, 6, .8); border-color: var(--bone); }
.hero-foot .lede { text-shadow: 0 0 18px rgba(5, 5, 6, .9), 0 0 3px rgba(5, 5, 6, .8); }
.hero-hud { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; display: flex; justify-content: space-between; gap: 20px; pointer-events: none; }
.hero-hud .mono { font-size: 10.5px; color: var(--bone-3); }
.hero-stir .arr { display: inline-block; animation: stir 2.4s var(--ease-in-out) infinite; }
@keyframes stir { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 760px) {
  .hero { min-height: 600px; }
  .hero-coords { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-stir { display: none; }
}

/* ---------- rhythm: tighter than the global section spacing — about 200px of air between two sections on a laptop,
   never several empty frames; the pinned worlds supply their own ---------- */
.home .section { padding: clamp(64px, 6.8vw, 104px) 0; }
.home .foundry { padding-bottom: clamp(48px, 5vw, 80px); }

/* ---------- 01 thesis ---------- */
.home .thesis { padding-top: clamp(120px, 14vw, 216px); }
.thesis-text { text-wrap: pretty; margin-top: 40px; font-size: clamp(34px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -.03em; max-width: 21ch; }

/* ---------- 02 foundry ---------- */
/* the foundry sizes itself per layout (desktop ≥1100px of frame: at least 640px; tablet: 855px; phone, below 700px:
   1161px). The page reserves the same so nothing below moves when it mounts. */
.foundry .wrap { container-type: inline-size; }
.foundry-frame { margin-top: clamp(48px, 6vw, 80px); height: clamp(640px, 48vw, 700px); border: 1px solid var(--line); }
@container (max-width: 1101.98px) { .foundry-frame { height: 855px; } }
@container (max-width: 701.98px) { .foundry-frame { height: 1161px; } }
.facts { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts > div { display: flex; flex-direction: column; padding: 26px 24px 0 0; border-right: 1px solid var(--line); margin-right: 24px; }
.facts > div:last-child { border-right: 0; margin-right: 0; }
.facts dt { max-width: 22ch; }
.facts dd { margin: auto 0 0; padding-top: 18px; font-size: clamp(48px, 5.4vw, 88px); line-height: 1; letter-spacing: -.04em; }
.facts dd small { font-size: .32em; letter-spacing: -.01em; color: var(--bone-2); margin-left: .12em; }
.facts dd.facts-sub { margin: 12px 0 0; padding: 0; font-size: 10.5px; letter-spacing: .12em; line-height: 1.5; color: var(--bone-3); }
/* label / numeral / note share rows across the strip, so every numeral sits on one line whatever its label wraps to */
@supports (grid-template-rows: subgrid) {
  .facts > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .facts dd { margin: 0; align-self: end; }
  .facts dd.facts-sub { align-self: start; }
}
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(2) { border-right: 0; margin-right: 0; } .facts > div { padding-bottom: 28px; } }

/* ---------- 03 engine ---------- */
/* A pinned cross-section (home-engine.js draws it): six layers land one by one as the track scrolls, then a release rises
   through all six and leaves signed. Left, the same story as a ledger — the module marks each row waiting / current /
   online / passed from the same smoothed progress, so copy and drawing never disagree. */
.home .engine { padding-bottom: clamp(64px, 6.8vw, 104px); }
.engine-track { position: relative; height: 440vh; height: 440svh; margin-top: clamp(24px, 3vw, 48px); }
.engine-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.engine-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 80px);
  padding-top: calc(var(--nav-h) + 12px); padding-bottom: 20px; }
.engine-copy { align-self: center; min-width: 0; }
.engine-frame { align-self: stretch; height: 100%; max-height: 880px; margin: auto 0; background: transparent; }
.engine-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.eng-cap { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; color: var(--bone-3); }
.eng-cap-r { color: var(--bone-3); }
.eng-layers { border-top: 1px solid var(--line-2); }
/* the current row opens to its natural height (0fr → 1fr rows), so no line is ever clipped or left as an empty gap */
.eng-l { --lc: var(--bone); position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: auto 0fr; column-gap: 10px; align-items: baseline;
  padding: 13px 0 12px; border-bottom: 1px solid var(--line); transition: grid-template-rows .6s var(--ease-out); }
.eng-l.is-cur { grid-template-rows: auto 1fr; }
.eng-l::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--lc); transition: width .7s var(--ease-out); }
.eng-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--bone-3); transition: color .5s var(--ease-out); }
.eng-name { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.1; letter-spacing: -.02em; color: var(--bone); transition: color .5s var(--ease-out); }
.eng-st { font-size: 10px; letter-spacing: .14em; color: var(--bone-3); white-space: nowrap; transition: color .5s var(--ease-out); }
.eng-x { grid-column: 2 / -1; align-self: stretch; min-height: 0; overflow: hidden; }
.eng-what, .eng-do { opacity: 0; transition: opacity .45s var(--ease-out); }
.eng-what { padding-top: 8px; }
.eng-do { margin-top: 6px; }
.eng-what { font-size: 14.5px; line-height: 1.5; color: var(--bone-2); max-width: 48ch; }
.eng-do { font-size: 10px; letter-spacing: .14em; color: var(--lc); }
.eng-l.is-cur .eng-what, .eng-l.is-cur .eng-do { opacity: 1; }
.eng-l.is-cur::before { width: 100%; }
.eng-l.is-cur .eng-n { color: var(--lc); }
/* live (module mounted): the ledger dims what hasn't happened yet */
.engine-stage.is-live .eng-l:not(.is-on):not(.is-cur) .eng-name { color: var(--bone-3); }
.engine-stage.is-live .eng-l:not(.is-on):not(.is-cur) .eng-n { color: var(--bone-3); }
.eng-l.is-on .eng-st { color: var(--bone-2); }
.eng-l.is-ok .eng-st { color: var(--lc); }
.eng-sign.is-cur .eng-name, .eng-sign.is-ok .eng-name { color: var(--signal); }
.eng-sign .eng-do { color: var(--signal); }
.eng-ticks { display: none; }
@media (max-height: 760px) and (min-width: 1000px) { .eng-l { padding: 10px 0 9px; } .eng-name { font-size: 21px; } .eng-cap { padding-bottom: 10px; } }

/* narrow / portrait: the drawing fills the stage; the ledger becomes one line under it plus seven ticks */
@media (max-width: 999.98px), (max-aspect-ratio: 4/5) {
  .engine-track { height: 420vh; height: 420svh; }
  .engine-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; padding-top: calc(var(--nav-h) + 6px); padding-bottom: 16px; }
  .engine-frame { grid-row: 1; max-height: none; }
  .engine-copy { grid-row: 2; align-self: end; }
  .eng-cap { display: none; }
  .eng-layers { position: relative; height: 142px; border-top: 0; }
  .eng-l, .eng-l.is-cur { position: absolute; left: 0; right: 0; top: 0; border: 0; padding: 12px 0 0; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .eng-l::before { display: none; }
  .eng-l.is-cur { opacity: 1; pointer-events: auto; }
  .eng-l .eng-what { box-sizing: content-box; height: 4.5em; padding-top: 6px; opacity: 1; font-size: 14px; transition: none; }
  .eng-l .eng-do { height: 1.4em; margin-top: 4px; opacity: 1; transition: none; }
  .eng-name { font-size: 24px; }
  .eng-ticks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .eng-ticks li { height: 2px; background: var(--line-2); transition: background .5s var(--ease-out); }
  .eng-ticks li.is-on { background: var(--bone-3); }
  .eng-ticks li.is-cur { background: var(--bone); }
  .eng-ticks li.is-ok:nth-child(1), .eng-ticks li.is-ok:nth-child(6) { background: var(--b-cyan); }
  .eng-ticks li.is-ok:nth-child(2) { background: var(--b-teal); }
  .eng-ticks li.is-ok:nth-child(3) { background: var(--bone); }
  .eng-ticks li.is-ok:nth-child(4) { background: var(--b-green); }
  .eng-ticks li.is-ok:nth-child(5) { background: var(--b-red); }
  .eng-ticks li.is-ok:nth-child(7), .eng-ticks li.is-cur:nth-child(7) { background: var(--signal); }
}
@media (max-width: 999.98px) and (max-height: 700px) { .eng-l .eng-what { display: none; } .eng-layers { height: 76px; } }

.engine-coda { margin-top: clamp(40px, 5vw, 80px); display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4.4vw, 80px); row-gap: 28px; align-items: end; }
.engine-coda::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: clamp(4px, 1vw, 12px); }
.eng-coda-h { font-size: clamp(36px, 4.4vw, 72px); line-height: 1.02; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.eng-coda-r .body-2 { font-size: var(--t-lede); line-height: 1.5; max-width: 40ch; }
.eng-cert { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 10.5px; color: var(--bone-3); }
.eng-cert-k { color: var(--bone-3); }
.eng-cert > span:last-child { color: var(--bone-2); }
.eng-cert b { font-weight: 450; color: var(--bone); }
.eng-more { margin-top: 28px; }
@media (max-width: 900px) { .engine-coda { grid-template-columns: minmax(0, 1fr); } }

/* reduced motion: no pin — the settled machine, every layer passed, the release signed */
@media (prefers-reduced-motion: reduce) {
  .engine-track { height: auto; }
  .engine-stage { position: relative; height: auto; }
  .engine-grid { height: auto; }
  .engine-frame { height: 680px; }
  .eng-l, .eng-what, .eng-do, .eng-l::before, .eng-name, .eng-n, .eng-st { transition: none; }
}
@media (prefers-reduced-motion: reduce) and ((max-width: 999.98px) or (max-aspect-ratio: 4/5)) {
  .engine-frame { height: 440px; }
  .eng-layers { height: auto; }
  .eng-l, .eng-l.is-cur { position: relative; opacity: 1; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .eng-l:not(.is-cur) .eng-what, .eng-l:not(.is-cur) .eng-do { display: none; }
  .eng-ticks { display: none; }
}

/* ---------- 04 worlds ---------- */
/* A pinned stage (morph-world canvas + chapter rail) under eight scrolling steps (copy, left column), and a sticky bar at
   the foot of the viewport that docks the live agent loop for the world on screen. morph-world fits every settled object
   into the box this layout leaves free (copy ≤520px left, rail at the right gutter, a 460×248 card bottom-right; narrow:
   the band above copy + card), so the card never sits on an object — and because it is docked rather than scrolled,
   it never crosses one while the object holds either. */
.worlds { position: relative; background: var(--void); --dock-w: min(460px, 38vw); --dock-h: 248px; --dock-b: 24px; --hold: 75vh; --hold: 75svh; --stage-t: 0px; }
/* the finale holds. Progress is measured on the section (eight steps), so the globe settles exactly as the outro step
   fills the screen; the pin inside runs --hold further, and the stage and the outro copy stay put together for that long
   before the page moves on. flow-root keeps the pin's negative margin inside the section box. */
.worlds { display: flow-root; margin-bottom: var(--hold); }
.worlds-pin { position: relative; margin-bottom: calc(-1 * var(--hold)); }
.worlds-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.worlds-canvas { position: absolute; inset: 0; }
.worlds-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,6,.82) 0%, rgba(5,5,6,.45) 34%, rgba(5,5,6,0) 56%), linear-gradient(0deg, rgba(5,5,6,.6), rgba(5,5,6,0) 22%); }
.worlds-rail { position: absolute; right: var(--gutter); top: calc((var(--nav-h) + 100vh - var(--dock-h) - var(--dock-b)) / 2); top: calc((var(--nav-h) + 100svh - var(--dock-h) - var(--dock-b)) / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.worlds-rail li { position: relative; padding-right: 22px; text-align: right; font-size: 10px; color: var(--bone-4); transition: color .5s var(--ease-out); }
.worlds-rail li::after { content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.worlds-rail li.on { color: var(--bone); }
.worlds-rail li.on::after { width: 18px; background: var(--signal); }
/* the steps let the pointer through to the canvas (glyphs scatter under the cursor); only the copy takes it */
.worlds-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.w-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 20px) 0 64px; }
.w-card { max-width: 520px; pointer-events: auto; }
.w-card .k { margin-bottom: 22px; }
.w-card .k .num { color: var(--signal); letter-spacing: .1em; }
.w-card .k .k-x { margin-left: -.4em; }   /* a flex gap stands in for the word space before the descriptor */
.w-card .h2, .w-card h2 { font-size: clamp(40px, 4.8vw, 78px); }
.w-card > p.body-2, .w-card > .lede { margin-top: 22px; max-width: 44ch; }
.w-list { margin-top: 26px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.w-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--bone-2); display: flex; gap: 12px; }
.w-list li::before { content: "→"; color: var(--bone-4); letter-spacing: 0; }
.w-proof { margin-top: 20px; font-size: 10.5px; line-height: 1.6; color: var(--bone-3); }
.w-proof-k { display: block; margin-bottom: 4px; color: var(--bone-3); }
.w-proof a { color: var(--bone-2); }
.w-proof a:hover { color: var(--bone); }
.w-scroll { margin-top: 34px; color: var(--bone-3); }
.w-intro .w-card, .w-outro .w-card { max-width: 600px; }
.w-outro .btn { margin-top: 30px; }
/* the outro step is one screen plus the hold; its copy rides in like every other step, then sticks while the globe turns */
.w-step.w-outro { display: block; min-height: calc(100vh + var(--hold)); min-height: calc(100svh + var(--hold)); padding: 0; }
.w-outro > .wrap { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 64px; }

/* the dock: sticks to the foot of the viewport for the length of the section; one card shows at a time */
.worlds-bar { position: sticky; bottom: 0; z-index: 3; height: calc(var(--dock-h) + var(--dock-b)); margin-top: calc(-1 * (var(--dock-h) + var(--dock-b))); pointer-events: none; }
.worlds-bar-in { position: relative; height: 100%; }
.worlds-dock { position: absolute; right: var(--gutter); bottom: var(--dock-b); width: var(--dock-w); height: var(--dock-h); }
.worlds-dock .w-live { position: absolute; inset: 0; border: 1px solid var(--line-2); background: var(--ink-0); opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.worlds-dock .w-live.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .worlds-dock .w-live { transition: none; transform: none; } }
@media (max-height: 760px) and (min-width: 901px) { .w-list { display: none; } }
/* the rail centres on the band above the dock; below ~1110px morph-world stops reserving the rail's gutter */
@media (max-width: 1108px) { .worlds-rail { display: none; } }

/* narrow / portrait (morph-world's own breakpoint): object in the band at the top, copy above the docked card */
@media (max-width: 900px), (max-aspect-ratio: 9/10) {
  /* the stage starts under the fixed header, so the viewfinder's label and top corners are never behind it */
  .worlds { --dock-w: auto; --dock-h: 232px; --dock-b: 16px; --stage-t: var(--nav-h); --band-b: calc(30.5svh + var(--stage-t) * .695); }
  .worlds-canvas { top: var(--stage-t); }
  .worlds-shade { background: linear-gradient(180deg, var(--void) 0, var(--void) var(--stage-t), rgba(5,5,6,0) calc(var(--stage-t) + 44px)),
    linear-gradient(0deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.8) 52%, rgba(5,5,6,.15) 68%); }
  .worlds-rail { display: none; }
  .worlds-dock { left: var(--gutter); }
  .w-step { align-items: flex-end; padding-bottom: calc(var(--dock-h) + var(--dock-b) + 44px); }
  .w-intro { padding-bottom: 40px; }
  /* a soft scrim travels with the intro copy: the glyph wave is brightest exactly where the copy crosses it */
  .w-intro .w-card { position: relative; }
  .w-intro .w-card::before { content: ""; position: absolute; z-index: -1; inset: -64px calc(-1 * var(--gutter)) -56px; pointer-events: none;
    background: radial-gradient(130% 62% at 32% 52%, rgba(5,5,6,.9) 0%, rgba(5,5,6,.78) 46%, rgba(5,5,6,0) 100%); }
  /* the finale: globe in the band at the top, the copy right under it — one settled frame */
  .w-outro > .wrap { align-items: flex-start; padding-top: calc(var(--band-b) + 48px); padding-bottom: 40px; }
  .w-card .h2 { font-size: clamp(34px, 9.4vw, 52px); }
  .w-card > p.body-2 { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .w-card .k { margin-bottom: 14px; }
  .w-card .k .k-x, .w-proof-x { display: none; }   /* one line: "02 Care" — the descriptor is the first thing a phone would wrap */
  .w-proof-k { margin-bottom: 2px; }
  .w-list { display: none; }
  /* copy rising from below fades out before it reaches the docked card instead of sliding under its edge */
  .worlds-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 36px); opacity: 0; transition: opacity .45s var(--ease-out);
    background: linear-gradient(0deg, var(--void) 0, var(--void) calc(100% - 36px), rgba(5,5,6,0) 100%); }
  .worlds.is-docked .worlds-bar::before { opacity: 1; }
}
/* tall narrow screens (tablets upright): the copy sits between the object band (top 30.5%) and the dock, not on the dock */
@media ((max-width: 900px) or (max-aspect-ratio: 9/10)) and (min-height: 900px) {
  .w-step[data-world] { align-items: center; padding-top: calc(var(--band-b) + 28px); }
}
@media (max-width: 900px) and (max-height: 780px) {
  .w-step[data-world] { padding-bottom: calc(var(--dock-h) + var(--dock-b) + 36px); }
  .w-card .h2 { font-size: clamp(32px, 8.8vw, 44px); }
  .w-card > p.body-2 { margin-top: 12px; font-size: 14px; line-height: 1.45; }
  .w-proof { margin-top: 14px; }
}

/* ---------- 05 lab index ---------- */
/* Fourteen rows, one still beside them: pointing at a row (or reading down the list) brings up a still of that experiment.
   Phones: a small still per row instead. Nothing here runs WebGL — the lab does. */
.lab-index { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4.4vw, 80px); align-items: start; }
.lx-list { border-top: 1px solid var(--line-2); }
.lx-row a { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 13.5em) 22px; column-gap: 16px; align-items: baseline;
  padding: 17px 0 16px; border-bottom: 1px solid var(--line); }
.lx-row a::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--signal); transition: width .6s var(--ease-out); }
.lx-thumb { display: none; }
.lx-n { color: var(--bone-3); transition: color .4s var(--ease-out); }
.lx-t { min-width: 0; }
.lx-title { display: block; font-family: var(--f-display); font-weight: var(--display-weight); font-variation-settings: var(--display-opsz); font-stretch: var(--display-stretch);
  font-size: clamp(23px, 1.95vw, 31px); line-height: 1.08; letter-spacing: -.025em; color: var(--bone-2); transition: color .4s var(--ease-out), transform .6s var(--ease-out); }
.lx-title em { font-style: italic; }
.lx-line { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--bone-3); max-width: 52ch; transition: color .4s var(--ease-out); }
.lx-tag { justify-self: end; text-align: right; font-size: 10px; letter-spacing: .14em; color: var(--bone-3); line-height: 1.6; }
.lx-tag span { display: block; color: var(--bone-3); transition: color .4s var(--ease-out); }
.lx-arr { justify-self: end; font-family: var(--f-mono); color: var(--bone-3); opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.lx-row.on a::before { width: 100%; }
.lx-row.on .lx-n { color: var(--signal); }
.lx-row.on .lx-title { color: var(--bone); transform: translateX(6px); }
.lx-row.on .lx-line { color: var(--bone-2); }
.lx-row.on .lx-tag { color: var(--bone-2); }
.lx-row.on .lx-arr { opacity: 1; transform: none; color: var(--bone); }
.lx-row a:focus-visible { outline-offset: -1px; }

.lx-panel { position: sticky; top: calc(var(--nav-h) + 28px); }
.lx-frame { aspect-ratio: 1 / 1; border: 1px solid var(--line); }
/* the stills are crops of wider lab compositions, so each is framed on its subject (--z zoom about --ox/--oy) and the
   frame's outer edge dissolves (::after below): no half-cut readouts or instructions, the still reads as a glimpse */
.lx-frame > img { --z: 1.045; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(calc(var(--z) * 1.035)); transition: opacity .55s var(--ease-out), transform 1.4s var(--ease-out); }
.lx-frame > img.on { opacity: 1; transform: scale(var(--z)); }
.lx-frame > img:nth-of-type(3) { --z: 1.6; --ox: 20%; --oy: 53%; }
.lx-frame > img:nth-of-type(4) { --z: 1.2; }
.lx-frame > img:nth-of-type(5) { --z: 1.25; --ox: 60%; --oy: 45%; }
.lx-frame > img:nth-of-type(6) { --z: 1.25; --oy: 25%; }
.lx-frame > img:nth-of-type(7) { --z: 1.15; --ox: 40%; --oy: 45%; }
.lx-frame > img:nth-of-type(11) { --z: 1.2; --ox: 55%; --oy: 60%; }
.lx-frame > img:nth-of-type(12) { --z: 1.6; --ox: 62%; --oy: 45%; }
.lx-frame .hud { text-shadow: 0 0 10px rgba(5,5,6,.9), 0 0 2px rgba(5,5,6,.9); }
.lx-cap { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: var(--bone-3); }
.lx-frame .hud .hud-l { color: var(--bone); }
.lx-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,6,.82) 0, rgba(5,5,6,.5) 34px, rgba(5,5,6,0) 76px),
    linear-gradient(90deg, rgb(9,9,11) 0, rgba(9,9,11,0) 12%, rgba(9,9,11,0) 88%, rgb(9,9,11) 100%),
    linear-gradient(0deg, rgb(9,9,11) 0, rgba(9,9,11,0) 20%); }
@media (prefers-reduced-motion: reduce) {
  .lx-frame > img, .lx-frame > img.on { transition: none; transform: scale(var(--z)); }
  .lx-title, .lx-arr, .lx-row a::before { transition: none; transform: none; }
}

/* small laptops: the list column is too narrow for a third column — the tags drop under the line */
@media (min-width: 1000px) and (max-width: 1240px) {
  .lx-row a { grid-template-columns: 40px minmax(0, 1fr) 22px; }
  .lx-tag { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; margin-top: 8px; }
  .lx-tag span { display: inline; }
  .lx-tag span::before { content: " · "; }
  .lx-arr { grid-column: 3; grid-row: 1; }
}

.lab-more { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.lab-more .mono { font-size: 10.5px; color: var(--bone-3); }

@media (max-width: 999.98px) {
  .lab-index { grid-template-columns: minmax(0, 1fr); }
  .lx-panel { display: none; }
  .lx-row a { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "img n" "img t" "img tag"; column-gap: 16px; row-gap: 4px; align-items: start; padding: 16px 0; }
  .lx-thumb { display: block; grid-area: img; width: 76px; height: 76px; object-fit: cover; background: var(--ink-1); border: 1px solid var(--line); }
  .lx-n { grid-area: n; font-size: 10px; }
  .lx-t { grid-area: t; }
  .lx-title { font-size: 23px; color: var(--bone); }
  .lx-line { font-size: 13.5px; color: var(--bone-2); margin-top: 4px; }
  .lx-tag { grid-area: tag; justify-self: start; text-align: left; margin-top: 4px; font-size: 9.5px; }
  .lx-tag span { display: inline; color: var(--bone-3); }
  .lx-tag span::before { content: " · "; }
  .lx-arr { display: none; }
  .lx-row a::before { display: none; }
  .lx-row.on .lx-title { transform: none; }
  .lx-row.on .lx-n { color: var(--bone-3); }
  .lab-more { flex-direction: column; align-items: flex-start; }
}

/* ---------- 06 stryke ---------- */
.stryke-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.stryke-copy h2 { margin-top: 26px; }
.stryke-copy .lede { margin-top: 28px; }
.mini-facts { display: flex; gap: 48px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.mini-facts dd { margin: 10px 0 0; font-size: clamp(40px, 4vw, 60px); line-height: 1; letter-spacing: -.04em; }
.stryke-copy .ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1000px) { .stryke-grid { grid-template-columns: 1fr; } }

/* the module board: a split-flap departure board of the modules stryke.html lists. Rows are a fixed height and the
   authored text sits where the tiles land, so nothing moves when home-board.js mounts */
.board { container-type: inline-size; border: 1px solid var(--line); padding: 62px clamp(20px, 3vw, 40px) 54px; }
.bd { --tile: clamp(11px, 2.35cqw, 15px); font-family: var(--f-mono); }
.bd-h, .bd-r { display: grid; grid-template-columns: 34px minmax(0, 138px) minmax(0, 1fr) 52px; grid-template-areas: "n d m i"; column-gap: 14px; align-items: center; }
.bd-h { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 10px; letter-spacing: .16em; color: var(--bone-3); }
.bd-h > :nth-child(1) { grid-area: n; } .bd-h > :nth-child(2) { grid-area: d; } .bd-h > :nth-child(3) { grid-area: m; } .bd-h > :nth-child(4) { grid-area: i; }
.bd-r { height: 52px; border-bottom: 1px solid var(--line); }
.bd-n { grid-area: n; position: relative; font-size: 10.5px; letter-spacing: .1em; color: var(--bone-3); }
.bd-d { grid-area: d; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .5s var(--ease-out); }
.bd-m { grid-area: m; display: flex; gap: calc(var(--tile) * .2); min-width: 0; font-size: var(--tile); letter-spacing: .02em; text-transform: uppercase; color: var(--bone); white-space: nowrap; line-height: 1; }
.bd-i { grid-area: i; justify-self: end; font-size: 10.5px; letter-spacing: .1em; color: var(--bone-3); }
.bd-m .t { position: relative; flex: none; width: 1.3em; height: 1.86em; display: grid; place-items: center; border-radius: 2px;
  background: linear-gradient(180deg, var(--ink-3) 0, var(--ink-2) 50%, var(--ink-1) 50%, var(--ink-2) 100%); box-shadow: inset 0 0 0 1px rgba(236,232,225,.04); }
.bd-m .t::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(5,5,6,.95); }
.bd-m .t b { display: block; font-weight: 450; line-height: 1; transform-origin: 50% 50%; }
.bd-m .t.sp b { opacity: 0; }
.bd-r.is-flip .bd-d { color: var(--bone); }
.bd-r.is-flip .bd-n::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--b-green); box-shadow: 0 0 0 3px rgba(137,190,67,.16); }
.bd-r .bd-i b { font-weight: 450; color: var(--bone-2); }
@container (max-width: 559.98px) {
  .bd { --tile: clamp(10px, 3.9cqw, 14px); }
  .bd-h, .bd-r { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n d i" "n m m"; column-gap: 10px; row-gap: 7px; }
  .bd-h { grid-template-areas: "n d i"; }
  .bd-h > :nth-child(3) { display: none; }
  .bd-r { height: auto; min-height: 68px; padding: 9px 0 10px; align-content: center; }
  .bd-n { align-self: start; padding-top: 1px; }
  .bd-r.is-flip .bd-n::before { left: -9px; top: 7px; }
}

/* ---------- 07 start: the brief, handed to the live sketch on the contact page ---------- */
.brief { margin-top: clamp(44px, 5.4vw, 76px); display: grid; gap: 16px; }
.brief-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--bone-2); }
.brief-label span { color: var(--bone-3); }
.brief-field { position: relative; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 3px; padding: 24px 26px 22px; transition: border-color .5s var(--ease-out), background .5s var(--ease-out); }
.brief-field:hover { border-color: var(--line-3); }
.brief-field:focus-within { border-color: rgba(250,179,31,.7); background: var(--ink-2); }
.brief-field .vf { position: absolute; width: 11px; height: 11px; pointer-events: none; opacity: 0; transition: transform .7s var(--ease-out), opacity .5s; }
.brief-field .vf.a { top: -1px; left: -1px; border-top: 1.5px solid var(--b-red); border-left: 1.5px solid var(--b-red); transform: translate(-7px, -7px); }
.brief-field .vf.b { top: -1px; right: -1px; border-top: 1.5px solid var(--b-green); border-right: 1.5px solid var(--b-green); transform: translate(7px, -7px); }
.brief-field .vf.c { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--b-teal); border-left: 1.5px solid var(--b-teal); transform: translate(-7px, 7px); }
.brief-field .vf.d { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--b-cyan); border-right: 1.5px solid var(--b-cyan); transform: translate(7px, 7px); }
.brief-field:focus-within .vf { opacity: 1; transform: none; }
.brief-ta { display: block; width: 100%; min-height: 2.66em; margin: 0; padding: 0; border: 0; border-radius: 0; resize: none; overflow: hidden; background: transparent; color: var(--bone); caret-color: var(--signal); outline: none;
  -webkit-appearance: none; appearance: none; font-family: var(--f-display); font-weight: 400; font-variation-settings: "opsz" 30; font-stretch: var(--display-stretch);
  font-size: clamp(22px, 2.35vw, 36px); line-height: 1.33; letter-spacing: -.016em; }
.brief-ta::placeholder { color: var(--bone-3); opacity: 1; }
.brief-ta:focus-visible { outline: none; }
.brief-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; margin-top: 4px; }
.brief-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.brief-ex .brief-label { margin-right: 6px; }
.brief-chip { height: 34px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2);
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out); }
.brief-chip:hover { border-color: var(--bone-3); color: var(--bone); }
.brief-chip[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--void); }
.brief-cta { display: flex; align-items: center; gap: 18px; }
.brief-go { --h: 52px; padding: 0 26px; }
.brief-note { font-size: 10px; color: var(--bone-3); }
.brief-hint { min-height: 1.4em; font-size: 10.5px; letter-spacing: .14em; color: var(--signal); }
.brief.is-empty .brief-field { border-color: rgba(250,179,31,.7); }
@media (max-width: 760px) {
  .brief-field { padding: 18px 18px 16px; }
  .brief-ta { font-size: 22px; min-height: 4em; }
  .brief-ex .brief-label { flex-basis: 100%; margin: 0 0 2px; }
  .brief-chip { height: 38px; }
  .brief-cta { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .brief-go { justify-content: center; }
}

/* phone HUDs: the label keeps its first word, the readout keeps its numbers */
@media (max-width: 640px) { .engine-frame .hud-x, .board .hud-x { display: none; } }

/* ---------- footer wordmark ---------- */
.foot .wordmark { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }