/* proof.css: "Proof first" design round (26 Oct 2026). Real artifacts as the hero of recruiter-path screens.
   Tokens only (tokens.css); both themes; reduced motion; nothing hidden at rest. Used by Home, Work and /work/slow-stock/. */

/* ---------------------------------------------------------------- layout */
.pf-w { max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.pf-sec { padding: clamp(64px, 7vw, 112px) 0; position: relative; }
.pf-sec + .pf-sec { padding-top: 0; }
.pf-band { background: var(--surface-2); }
:root[data-theme="dark"] .pf-band { background: var(--zc-0c1018, #0c1018); }
.pf-band + .pf-sec, .pf-sec + .pf-band { padding-top: clamp(64px, 7vw, 112px); }
.pf-hd { display: grid; gap: 12px; margin: 0 0 clamp(28px, 3.4vw, 48px); max-width: 52rem; }
.pf-hd.split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; }
.pf-k { margin: 0; font: 500 var(--fs-3)/1.3 var(--sans); color: var(--muted); letter-spacing: .01em; }
.pf-k b { color: var(--ink); font-weight: 600; }
.pf-h2 { margin: 0; font: 600 clamp(var(--fs-8), 1.6vw + 18px, var(--fs-10))/1.08 var(--sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.pf-sub { margin: 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.tnum, .ch text, .dt td, .kt-v { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- credit chip (one look, one place: last line of every artifact card) */
.pf-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); background: var(--surface); width: fit-content; max-width: 100%; }
.pf-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }

/* ---------------------------------------------------------------- charts (inline SVG from tools/charts.py) */
.chv { margin: 0; }
.ch { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
@media (max-width: 760px) { .ch.v-w { display: none; } }
@media (min-width: 761px) { .ch.v-n { display: none; } }
.ch .g { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch .ax { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.ch .t { fill: var(--muted); font-size: 12px; }
.ch .l { fill: var(--ink-2); font-size: 14px; font-weight: 500; }
.ch .l.b { fill: var(--ink); font-weight: 600; }
.ch .l.h, .ch .h { fill: var(--warm); }
.ch .v { fill: var(--ink); font-size: 15px; font-weight: 600; }
.ch .vh { fill: var(--warm); font-size: 15px; font-weight: 600; }
.ch .v13 { fill: var(--ink); font-size: 13px; font-weight: 600; }
.ch .v14 { font-size: 14px; font-weight: 600; }
.ch .an { fill: var(--ink-2); font-size: 13px; }
.ch .anh { fill: var(--warm); font-size: 13px; }
.ch .an.b, .ch .anh.b { font-size: 15px; font-weight: 600; }
.ch .f-hot { fill: var(--warm); }
.ch .f-acc { fill: var(--accent); }
.ch .f-mut { fill: var(--s2); }
.ch .f-base { fill: var(--muted); }
.ch .on-hot { fill: var(--bg); }
.ch .on-acc { fill: var(--on-accent); }
.ch .on-mut { fill: var(--ink); }
:root[data-theme="light"] .ch .on-hot { fill: var(--surface); }
.ch .lead, .ch .brk { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.ch .brk.hot { stroke: var(--warm); }
.ch .ln { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ch .ln-ly { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.ch .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* chart keys (HTML, wrap naturally on phones) */
.key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font: 500 var(--fs-2)/1.4 var(--sans); color: var(--ink-2); }
.key li { display: inline-flex; align-items: center; gap: 7px; }
.key i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.key .k-hot { background: var(--warm); } .key .k-acc { background: var(--accent); } .key .k-mut { background: var(--s2); } .key .k-base { background: var(--muted); }
.key .k-ly { height: 0; border-top: 2px dashed var(--line-2); border-radius: 0; }
.src { margin: 12px 0 0; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--muted); }
.src a { color: inherit; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- window frame for real artifacts */
.win { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 500 var(--fs-2)/1 var(--mono); color: var(--muted); }
.win-bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); box-shadow: 14px 0 0 var(--line-2), 28px 0 0 var(--line-2); margin-right: 30px; flex: none; }
.win-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-in { padding: 18px 18px 16px; }

/* ---------------------------------------------------------------- flagship cards (Home: three across; Work: large, alternating) */
.fl-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.fl { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow);
  transition: border-color .24s var(--ease), transform .24s var(--ease); }
.fl:hover, .fl:focus-within { border-color: var(--line-2); transform: translateY(-2px); }
.fl-art { margin: 10px 10px 0; padding: 18px 16px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-height: 236px; display: flex; flex-direction: column; justify-content: center; }
:root[data-theme="light"] .fl-art { background: var(--zc-f8f9fb, #f8f9fb); }
.fl-art .key { margin-top: 10px; }
.fl-b { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.fl-q { margin: 0; font: 600 var(--fs-6)/1.22 var(--sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.fl-n { margin: 2px 0 0; display: grid; gap: 4px; }
.fl-n b { font: 600 var(--fs-9)/1 var(--sans); letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-n span { font: 400 var(--fs-3)/1.45 var(--sans); color: var(--ink-2); }
.fl-a { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding-top: 6px; align-items: center; }
.fl-a .btn.link { padding: 0 2px; font-size: var(--fs-4); }
.fl .pf-chip { margin-top: 4px; }
/* a link that covers the card for one big target; inner links sit above it */
.fl { position: relative; }
.fl-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.fl-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fl-b > *, .fl-art { position: relative; z-index: 1; }
.fl-art { pointer-events: none; }
.fl-art .wb-grid { pointer-events: auto; }

/* KPI tiles */
.kts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kt { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.kt-l { font: 500 var(--fs-1)/1.3 var(--sans); color: var(--muted); }
.kt-v { font: 600 var(--fs-6)/1.1 var(--sans); color: var(--ink); letter-spacing: -.015em; }
.kt-c { font: 600 var(--fs-1)/1.3 var(--sans); color: var(--ink-2); }
.kt-c.up { color: var(--ok); } .kt-c.down { color: var(--warm); }
:root[data-theme="light"] .kt-c.up { color: var(--zc-0a6e5c, #0a6e5c); }
.kt-s { font-weight: 400; color: var(--muted); }
.fl-art .kts + .ch, .fl-art .kts + .wb { margin-top: 10px; }

/* workbook preview (the real Summary sheet layout) */
.wb { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.wb-bar { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 500 var(--fs-1)/1.3 var(--mono); color: var(--ink-2); min-width: 0; }
.wb-file { flex: none; color: var(--ink); }
.wb-fx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.wb-fx i { font-style: italic; margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--line-2); }
.wb-grid { overflow-x: auto; }
.wb-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wb table { border-collapse: collapse; width: 100%; font: 400 var(--fs-2)/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.wb th, .wb td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; text-align: left; }
.wb thead th { background: var(--surface-2); font: 500 var(--fs-1)/1 var(--sans); color: var(--muted); text-align: center; padding: 5px 8px; }
.wb .rn { width: 28px; background: var(--surface-2); color: var(--muted); font: 500 var(--fs-1)/1 var(--sans); text-align: center; }
.wb .hd { font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); white-space: normal; min-width: 7em; }
.wb td.n { text-align: right; }
.wb tbody tr:first-child td:last-child { outline: 2px solid var(--ok); outline-offset: -2px; }
.wb-tabs { display: flex; gap: 2px; padding: 0 6px; border-top: 1px solid var(--line); background: var(--surface-2); overflow: hidden; font: 500 var(--fs-1)/1 var(--sans); color: var(--muted); }
.wb-tabs span { padding: 7px 10px; white-space: nowrap; }
.wb-tabs .on { background: var(--surface); color: var(--ink); border-bottom: 2px solid var(--ok); }
.wb-cap { margin: 0; padding: 8px 10px; border-top: 1px solid var(--line); font: 400 var(--fs-1)/1.4 var(--sans); color: var(--muted); }
.wb-c .wb-cap { display: none; }
.wb-c td:first-of-type { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Home: hero on phones (proof in the first screen) */
@media (max-width: 760px) {
  .hx-a .hero-in { padding-top: 84px; }
  .hx-a .avail { min-height: 0; margin-bottom: 10px; font-size: var(--fs-2); }
  .hx-a .hh-name { font-size: var(--fs-10); }
  .hx-a .hh-line { font-size: var(--fs-7); }
  .hx-a .hh-sub { display: block; margin-top: 10px; font-size: var(--fs-4); line-height: 1.45; }
  .hx-a .hx-proof { display: grid; grid-template-columns: 1fr; gap: 0; margin: 16px 0 0; padding: 0; border-top: 0; max-width: none; }
  .hx-a .hx-proof li { display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--zc-rgba-255-255-255-12, rgba(255,255,255,.12)); }
  .hx-a .hx-proof li:last-child { border-bottom: 1px solid var(--zc-rgba-255-255-255-12, rgba(255,255,255,.12)); }
  .hx-a .hx-proof b { font-size: var(--fs-6); }
  .hx-a .hx-proof span { font-size: var(--fs-2); line-height: 1.35; }
  .hx-a .ctas { margin-top: 16px; }
  /* the globe follows the lockup: room for it between the buttons and the hub chips (heroes.js places it in this gap) */
  .hx-a { height: auto; min-height: 0; }
  .hx-a .lockup { display: flex; flex-direction: column; padding-bottom: calc(min(86vw, 360px) + 132px); }
  .hx-a .lockup > .hx-proof { order: 4; }
  .hx-a .lockup > .ctas { order: 5; }
  .hx-a .hxa-hint { display: none; }
}

/* ---------------------------------------------------------------- Home: start with your role */
.rl-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.rl { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.rl-r { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 var(--fs-5)/1.2 var(--sans); color: var(--ink); }
.rl-r::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.rl[data-ed="ecom"] .rl-r::before { background: var(--warm); }
.rl[data-ed="ops"] .rl-r::before { background: var(--s2); }
.rl-p { margin: 0; display: grid; gap: 6px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.rl-p b { font: 600 var(--fs-9)/1 var(--sans); letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-p span { font: 400 var(--fs-4)/1.45 var(--sans); color: var(--ink-2); }
.rl-s { margin: 0; font: 400 var(--fs-2)/1.4 var(--sans); color: var(--muted); }
.rl-a { display: grid; margin-top: auto; border-top: 1px solid var(--line); }
.rl-a a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; font: 500 var(--fs-4)/1.3 var(--sans); }
.rl-a a + a { border-top: 1px solid var(--line); }
.rl-a a span:last-child { color: var(--accent); transition: transform .24s var(--ease); }
.rl-a a:hover span:last-child, .rl-a a:focus-visible span:last-child { transform: translateX(3px); }
.rl-a a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.rl-a small { display: block; font: 400 var(--fs-2)/1.3 var(--sans); color: var(--muted); }

/* ---------------------------------------------------------------- roles: case studies as text-led rows */
.cs-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cs-r { border-bottom: 1px solid var(--line); }
.cs-a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; padding: 22px 4px; color: inherit; text-decoration: none; transition: background .24s var(--ease); border-radius: 12px; }
.cs-a:hover { background: var(--surface); }
.cs-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-k { display: block; font: 500 var(--fs-2)/1.4 var(--sans); color: var(--muted); }
.cs-t { display: block; margin-top: 4px; font: 600 var(--fs-6)/1.2 var(--sans); color: var(--ink); letter-spacing: -.012em; }
.cs-d { display: block; margin-top: 6px; font: 400 var(--fs-4)/1.45 var(--sans); color: var(--ink-2); }
.cs-n { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.cs-n span { display: grid; gap: 2px; min-width: 0; }
.cs-n b { font: 600 var(--fs-8)/1.05 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-n i { font: 400 var(--fs-2)/1.35 var(--sans); font-style: normal; color: var(--muted); max-width: 15em; }
.cs-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 var(--fs-4)/1 var(--sans); color: var(--accent); white-space: nowrap; }
.cs-a:hover .cs-go span { transform: translateX(3px); }
.cs-go span { transition: transform .24s var(--ease); }
.cs-rows.compact .cs-a { grid-template-columns: minmax(0, 1fr) auto auto; padding: 18px 4px; }
.cs-rows.compact .cs-n b { font-size: var(--fs-7); }

/* ---------------------------------------------------------------- Work: large flagships, alternating */
.fx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--line); }
.fx:first-child { border-top: 0; padding-top: 0; }
.fx.flip > .fx-art { order: 2; }
.fx-art { min-width: 0; }
.fx-art .win-in { padding: 22px 22px 18px; }
.fx-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-q { margin: 0; font: 600 clamp(var(--fs-7), 1vw + 16px, var(--fs-9))/1.12 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.fx-n { margin: 0; display: grid; gap: 6px; }
.fx-n b { font: 600 clamp(var(--fs-10), 2vw + 24px, var(--fs-11))/1 var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-n span { font: 500 var(--fs-4)/1.4 var(--sans); color: var(--ink-2); }
.fx-p { margin: 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); max-width: 34em; }
.fx-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.fx-a .btn.ghost-s, .fl-a .btn.ghost-s, .st .btn.ghost-s { min-height: 44px; }
.fx-art .kts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-art .wb { margin-top: 14px; }

/* ---------------------------------------------------------------- Work: archive of all 31 */
.ar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 18px; }
.ar-tools[hidden] { display: none; }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 var(--fs-3)/1 var(--sans); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.ar-chip:hover { border-color: var(--ink-2); }
.ar-chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.ar-chip:focus-visible, .ar-q input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-chip small { margin-left: 6px; font-size: var(--fs-1); }
.ar-q { flex: 1 1 240px; max-width: 360px; }
.ar-q input { width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 400 var(--fs-4)/1 var(--sans); }
.ar-q input::placeholder { color: var(--muted); }
.ar-count { margin: 0; font: 500 var(--fs-3)/1.3 var(--sans); color: var(--muted); }
.ars { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); view-transition-name: archive; }
.ar { border-bottom: 1px solid var(--line); }
.ar[hidden] { display: none; }
.ar-a { display: grid; grid-template-columns: 2.4em minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) 20px; gap: 6px 24px; align-items: baseline; padding: 14px 6px; color: inherit; text-decoration: none; border-radius: 8px; transition: background .2s var(--ease); }
.ar-a:hover { background: var(--surface); }
.ar-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-n { font: 500 var(--fs-3)/1.4 var(--mono); color: var(--muted); }
.ar-k { display: block; font: 500 var(--fs-1)/1.3 var(--sans); color: var(--muted); letter-spacing: .02em; }
.ar-t { display: block; font: 500 var(--fs-5)/1.35 var(--sans); color: var(--ink); text-wrap: pretty; }
.ar-v b { display: block; font: 600 var(--fs-6)/1.2 var(--sans); color: var(--ink); }
.ar-v span { display: block; font: 400 var(--fs-2)/1.35 var(--sans); color: var(--ink-2); }
.ar-s { font: 400 var(--fs-2)/1.4 var(--sans); color: var(--muted); }
.ar-go { color: var(--accent); justify-self: end; transition: transform .2s var(--ease); }
.ar-a:hover .ar-go { transform: translateX(3px); }
.ar-empty { padding: 24px 6px; color: var(--muted); }

/* ---------------------------------------------------------------- story page (/work/slow-stock/) */
.st-hd { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.st-hd .crumbs { margin: 0 0 22px; }
.st-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.st-h1 { margin: 10px 0 0; font: 600 clamp(var(--fs-10), 2.6vw + 22px, var(--fs-11))/1.02 var(--sans); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.st-q { margin: 18px 0 0; font: 400 var(--fs-lead)/1.4 var(--sans); color: var(--ink-2); text-wrap: pretty; max-width: 30em; }
.st-ans { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; align-items: start; }
.st-ans .big { font: 600 clamp(var(--fs-11), 3vw + 28px, var(--fs-12))/.92 var(--sans); letter-spacing: -.04em; color: var(--warm); font-variant-numeric: tabular-nums; grid-row: span 2; }
.st-ans .lab { margin: 0; font: 600 var(--fs-5)/1.35 var(--sans); color: var(--ink); }
.st-ans .note { margin: 0; font: 400 var(--fs-3)/1.4 var(--sans); color: var(--muted); }
.st-ans .short { grid-column: 1 / -1; margin: 12px 0 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); max-width: 36em; }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 18px 0 0; }
.st-fig .win-in { padding: 22px 22px 18px; }
.st-fig h2, .st-fig .f-h { margin: 0 0 4px; font: 600 var(--fs-5)/1.35 var(--sans); color: var(--ink); text-wrap: balance; }
.f-q { margin: 0 0 18px; font: 400 var(--fs-3)/1.45 var(--sans); color: var(--muted); }
.st-toc { position: sticky; top: 64px; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.st-toc ol { display: flex; gap: 2px; margin: 0 auto; padding: 0 var(--gut); max-width: calc(var(--maxw) + 2 * var(--gut)); list-style: none; overflow-x: auto; scrollbar-width: none; counter-reset: t; }
.st-toc ol::-webkit-scrollbar { display: none; }
.st-toc a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; white-space: nowrap; color: var(--ink-2); text-decoration: none; font: 500 var(--fs-3)/1 var(--sans); border-radius: 8px; }
.st-toc a::before { counter-increment: t; content: counter(t, decimal-leading-zero); font: 500 var(--fs-1)/1 var(--mono); color: var(--muted); }
.st-toc a:hover { color: var(--ink); background: var(--surface); }
.st-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.st { padding: clamp(56px, 6vw, 96px) 0 0; scroll-margin-top: 110px; }
.st-g { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 80px); }
.st-l { display: grid; gap: 8px; align-content: start; }
.st-n { font: 500 var(--fs-2)/1 var(--mono); color: var(--muted); }
.st-h2 { margin: 0; font: 600 clamp(var(--fs-7), 1.1vw + 16px, var(--fs-9))/1.12 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.st-b { min-width: 0; max-width: 46rem; display: grid; gap: 18px; align-content: start; }
.st-b.wide { max-width: none; }
.st-b > p { margin: 0; font: 400 var(--fs-5)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.st-b > p b { color: var(--ink); font-weight: 600; }
.quote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--warm); font: 500 var(--fs-6)/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.scale { display: grid; gap: 8px; margin: 4px 0 0; }
.scale-bar { position: relative; height: 34px; border-radius: 6px; background: var(--s2); overflow: hidden; }
.scale-bar i { position: absolute; inset: 0 auto 0 0; background: var(--warm); border-right: 2px solid var(--bg); }
.scale-k { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--fs-3)/1.35 var(--sans); color: var(--ink-2); }
.scale-k b { color: var(--warm); font-weight: 600; }
.scale-k span:last-child { text-align: right; }

.srcard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.srcard div { padding: 16px 18px; border-right: 1px solid var(--line); min-width: 0; }
.srcard div:last-child { border-right: 0; }
.srcard dt { font: 500 var(--fs-1)/1.3 var(--sans); color: var(--muted); letter-spacing: .02em; }
.srcard dd { margin: 6px 0 0; font: 600 var(--fs-5)/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.srcard dd small { display: block; margin-top: 3px; font: 400 var(--fs-2)/1.35 var(--sans); color: var(--muted); }
.srcard a { color: var(--accent); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 var(--fs-4)/1.55 var(--sans); color: var(--ink-2); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 var(--fs-2)/1.9 var(--mono); color: var(--muted); }
.grps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.grp { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 6px; align-content: start; }
.grp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font: 600 var(--fs-5)/1.3 var(--sans); color: var(--ink); }
.grp-h span { font: 600 var(--fs-6)/1 var(--sans); font-variant-numeric: tabular-nums; }
.grp-h::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--s2); margin-right: -4px; align-self: center; }
.grp.hot .grp-h::before { background: var(--warm); } .grp.acc .grp-h::before { background: var(--accent); } .grp.base .grp-h::before { background: var(--line-2); }
.grp-h em { font-style: normal; margin-right: auto; }
.grp p { margin: 0; font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }

details.sqlx { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
details.sqlx > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; cursor: pointer; list-style: none; font: 500 var(--fs-4)/1.3 var(--sans); color: var(--ink); background: var(--surface-2); border-bottom: 1px solid var(--line); }
details.sqlx > summary::-webkit-details-marker { display: none; }
details.sqlx > summary::after { content: "+"; font: 400 var(--fs-6)/1 var(--mono); color: var(--muted); }
details.sqlx[open] > summary::after { content: "−"; }
details.sqlx > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
details.sqlx:not([open]) > summary { border-bottom: 0; }
pre.sql { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 var(--fs-2)/1.6 var(--mono); color: var(--ink); tab-size: 4; max-height: 520px; }
pre.sql:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sql-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.sql-ft p { margin: 0; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--muted); max-width: 40em; }

.tbl-s { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tbl-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt { width: 100%; border-collapse: collapse; font: 400 var(--fs-3)/1.4 var(--sans); color: var(--ink); }
.dt th { position: sticky; top: 0; text-align: left; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); background: var(--surface-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt tr:last-child td { border-bottom: 0; }
.dt .n { text-align: right; }
.dt .mono, .dt.mono td { font-family: var(--mono); font-size: var(--fs-2); }
.dt .pn { white-space: normal; min-width: 13em; font-weight: 500; }
.dt .nb { display: inline-flex; justify-content: flex-end; align-items: center; gap: 10px; }
.tb { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.tb i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--warm); border-radius: 4px; }
.tbl-s.out { margin-top: -4px; }

.fig { margin: 0; }
.fig + .fig { margin-top: 12px; }
.fnd { display: grid; gap: 28px; }
.ul-next { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ul-next li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); }
.ul-next li::before { content: "→"; color: var(--accent); font-weight: 600; }
.lims { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.lims div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lims dt { font: 600 var(--fs-4)/1.45 var(--sans); color: var(--ink); }
.lims dd { margin: 0; font: 400 var(--fs-4)/1.55 var(--sans); color: var(--ink-2); }
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.who > div { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.who h3 { margin: 0 0 10px; font: 600 var(--fs-5)/1.3 var(--sans); color: var(--ink); }
.who ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font: 400 var(--fs-4)/1.5 var(--sans); color: var(--ink-2); }
.dl-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dl { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .24s var(--ease), transform .24s var(--ease); }
.dl:hover { border-color: var(--line-2); transform: translateY(-2px); }
.dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl-k { font: 500 var(--fs-2)/1.3 var(--mono); color: var(--muted); }
.dl-t { font: 600 var(--fs-5)/1.3 var(--sans); color: var(--ink); }
.dl-p { font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }
.dl-go { margin-top: auto; padding-top: 6px; font: 500 var(--fs-4)/1 var(--sans); color: var(--accent); }
.nx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: inherit; text-decoration: none; margin-top: clamp(48px, 5vw, 80px); transition: border-color .24s var(--ease); }
.nx:hover { border-color: var(--line-2); }
.nx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nx-k { display: block; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.nx-t { display: block; margin-top: 6px; font: 600 var(--fs-7)/1.15 var(--sans); color: var(--ink); letter-spacing: -.015em; }
.nx-d { display: block; margin-top: 8px; font: 400 var(--fs-4)/1.5 var(--sans); color: var(--ink-2); }
.nx-go { display: inline-block; margin-top: 12px; font: 500 var(--fs-4)/1 var(--sans); color: var(--accent); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .fl-g, .rl-g { grid-template-columns: 1fr; }
  .rl-g { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .fl-g { max-width: 620px; }
  .st-top { grid-template-columns: 1fr; }
  .ar-a { grid-template-columns: 2.4em minmax(0, 1.5fr) minmax(0, 1fr) 20px; }
  .ar-s { grid-column: 2 / 4; }
}
@media (max-width: 900px) {
  .fx, .fx.flip { grid-template-columns: 1fr; }
  .fx.flip > .fx-art { order: 0; }
  .st-g { grid-template-columns: 1fr; }
  .dl-g { grid-template-columns: 1fr; }
  .srcard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srcard div:nth-child(2) { border-right: 0; }
  .srcard div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cs-a, .cs-rows.compact .cs-a { grid-template-columns: 1fr; gap: 12px; }
  .pf-hd.split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fl-art { min-height: 0; padding: 16px 14px 12px; }
  .fx-art .kts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-art .win-in, .st-fig .win-in { padding: 16px 14px 14px; }
  .st-ans { grid-template-columns: 1fr; }
  .st-ans .big { grid-row: auto; }
  .grps, .who { grid-template-columns: 1fr; }
  .lims div { grid-template-columns: 1fr; }
  .nx { grid-template-columns: 1fr; padding: 20px; }
  .ar-a { grid-template-columns: 2.2em minmax(0, 1fr) 16px; gap: 6px 12px; padding: 14px 4px; }
  .ar-v, .ar-s { grid-column: 2 / 3; }
  .ar-go { grid-row: 1; grid-column: 3; }
  .ar-v b { display: inline; font-size: var(--fs-5); margin-right: 8px; }
  .ar-v span { display: inline; }
  .ar-q { max-width: none; flex-basis: 100%; }
  .st-toc { top: 0; }
  .fx-n b { font-size: var(--fs-10); }
  details.sqlx pre.sql { max-height: 420px; }
  .wb .hd { min-width: 6em; }
}
@media (prefers-reduced-motion: reduce) {
  .fl, .dl, .cs-go span, .ar-go, .rl-a a span:last-child { transition: none !important; }
  .fl:hover, .fl:focus-within, .dl:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
::view-transition-old(archive), ::view-transition-new(archive) { animation-duration: .22s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Home: everything readable is visible at rest (the old [data-rv] fade waited on scroll) */
body[data-page="home"] [data-rv] { opacity: 1 !important; transform: none !important; }
.fl-qa { color: inherit; text-decoration: none; }
.fl-qa:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fl-qa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wb-c table { table-layout: fixed; }
.wb-c .rn { width: 24px; }
.wb-c thead th:nth-child(2), .wb-c td:nth-child(2) { width: 34%; }
.wb-c .hd { min-width: 0; white-space: normal; font-size: var(--fs-1); line-height: 1.2; }
.wb-c td { overflow: hidden; text-overflow: ellipsis; }
.pf-hd.split > .btn { justify-self: end; }
.fl-art { flex: 1 1 auto; }
.fl-b { flex: 0 0 auto; }
.fl-b .fl-a { margin-top: 6px; }
.st-hd { padding-top: calc(var(--nav-h, 64px) + clamp(24px, 3vw, 44px)); }
.st-b > p.src { font: 400 var(--fs-2)/1.45 var(--sans); color: var(--muted); }
/* story on phones: answer, then the chart, in the first screen; the longer answer sentence follows the chart */
@media (max-width: 760px) {
  .st-hd { padding-top: calc(var(--nav-h, 64px) + 12px); padding-bottom: 40px; }
  .st-hd .crumbs { margin-bottom: 12px; }
  .st-top { display: flex; flex-direction: column; gap: 0; }
  .st-top > div:first-child { display: contents; }
  .st-h1 { font-size: var(--fs-10); margin-top: 6px; }
  .st-q { font-size: var(--fs-5); margin-top: 10px; }
  .st-ans { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; margin-top: 14px; padding-top: 12px; }
  .st-ans .big { font-size: var(--fs-11); grid-row: span 2; }
  .st-ans .lab { font-size: var(--fs-4); }
  .st-ans .short { order: 0; }
  .st-top .st-fig { order: 5; margin-top: 16px; }
  .st-top .st-ans .short { display: none; }
  .st-top .st-meta { order: 7; }
  .st-short-m { display: block; order: 6; margin: 16px 0 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); }
  .st-fig .f-q { display: none; }
}
@media (min-width: 761px) { .st-short-m { display: none; } }
figure.win, figure.st-fig, figure.fig { margin-left: 0; margin-right: 0; }
.st-top > figure { width: 100%; max-width: 100%; min-width: 0; } .win-bar span { min-width: 0; }
.st-b, .fnd { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ V1b motion: charts draw in once, then rest.
   Visible at rest: the start state (.pre) is only ever set by shared/proof-motion.js, and only when it will also play it
   (JS on, IntersectionObserver, no reduced motion, no ?still). One curve: expo.out. Chart draws 0.9 s, UI 0.24 s. */
:root { --expo: cubic-bezier(.16, 1, .3, 1); }
.ch .gx, .ch .gy { transform-box: fill-box; transition: transform .9s var(--expo) calc(var(--i, 0) * 45ms); }
.ch .gx { transform-origin: 0 50%; }
.ch .gy { transform-origin: 50% 100%; }
.ch .dr { stroke-dasharray: 1 0; transition: stroke-dasharray 1.1s var(--expo) .1s; }
.ch .area { transition: opacity .6s var(--expo) .7s; }
.ch text, .ch .lead, .ch .brk, .ch .dot { transition: opacity .3s var(--expo) .75s; }
.pre .ch .gx { transform: scaleX(0); }
.pre .ch .gy { transform: scaleY(0); }
.pre .ch .dr { stroke-dasharray: 0 1; }
.pre .ch .area, .pre .ch text, .pre .ch .lead, .pre .ch .brk, .pre .ch .dot { opacity: 0; }
.pre .ch .t { opacity: 1; }                       /* axis ticks stay: only marks and notes move */
.kt { transition: opacity .5s var(--expo) calc(var(--i, 0) * 70ms), transform .5s var(--expo) calc(var(--i, 0) * 70ms); }
.pre .kt, .pre.kts .kt { opacity: 0; transform: translateY(8px); }
.wb td.n { transition: opacity .3s var(--expo) calc(.9s + var(--r, 0) * 60ms); }
.pre .wb td.n, .wb.pre td.n { opacity: 0; }
.wb-f { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 24ch; transition: max-width .9s steps(23, end) .1s; }
.pre .wb-f, .wb.pre .wb-f { max-width: 0; }
.tb i { transform-origin: 0 50%; transition: transform .9s var(--expo) calc(var(--i, 0) * 50ms); }
.tbl-s.pre .tb i { transform: scaleX(0); }
.scale-bar i { transform-origin: 0 50%; transition: transform 1.1s var(--expo) .2s; }
.scale.pre .scale-bar i { transform: scaleX(0); }
.fl, .fx-art.win { transition: border-color .24s var(--expo), transform .24s var(--expo), box-shadow .24s var(--expo); }
.fl:hover, .fl:focus-within { box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
.fx-art.win:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--ink) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ch .gx, .ch .gy, .ch .dr, .ch .area, .ch text, .kt, .wb td.n, .wb-f, .tb i, .scale-bar i { transition: none !important; }
  .fx-art.win:hover { transform: none; }
}

/* ---------------------------------------------------------------- V1b: role-card mini visuals (real data, play once) */
.rv { margin: -8px -8px 4px; padding: 14px 14px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); height: 236px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
:root[data-theme="light"] .rv { background: var(--zc-f8f9fb, #f8f9fb); }
.rv-cap { margin: auto 0 0; font: 400 var(--fs-1)/1.35 var(--sans); color: var(--muted); }
/* Data: the query types in, then the output bars grow */
.rv-code { display: grid; gap: 1px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-2); white-space: pre; overflow: hidden; }
.rv-l { display: block; overflow: hidden; max-width: calc(var(--n) * 1ch + 1ch); transition: max-width .5s steps(18, end) calc(var(--i) * .32s); }
.rv-l:first-child { color: var(--muted); }
.rv-l:first-child, .pre .rv-l:first-child, .rv.pre .rv-l:first-child { white-space: normal; max-width: none; transition: none; }   /* the comment line wraps on narrow cards (iPhone check, 27 Oct) */
.pre .rv-l, .rv.pre .rv-l { max-width: 0; }
.rv-out { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rv-out li { display: grid; grid-template-columns: 8.4em minmax(0, 1fr) 3.4em; align-items: center; gap: 8px; font: 500 var(--fs-1)/1.2 var(--sans); color: var(--ink-2); }
.rv-out b { text-align: right; color: var(--ink); font-weight: 600; }
.rv-b { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rv-b i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 4px; background: var(--accent); transform-origin: 0 50%; transition: transform .9s var(--expo) calc(1.7s + var(--i) * 80ms); }
.rv-out li:first-child .rv-b i { background: var(--warm); }
.rv-out li b { transition: opacity .3s var(--expo) calc(1.7s + var(--i) * 80ms); }
.rv.pre .rv-b i { transform: scaleX(0); }
.rv.pre .rv-out b { opacity: 0; }
/* Operations: the route, to scale */
.rv-route .ch { overflow: visible; }
.ch .rv-node { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.ch .rv-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; transition: transform 1.6s var(--expo) calc(.3s + var(--i) * .25s); }
.ch .rv-dot.hot { fill: var(--warm); }
.rv.pre .rv-dot { transform: translateX(calc(-1 * var(--x))); }
.rv-stops { display: flex; justify-content: space-between; margin: -6px 0 0; padding: 0; list-style: none; font: 500 var(--fs-1)/1.2 var(--sans); color: var(--muted); }
/* E-commerce: 100 squares, the top 20 light up, a bar fills */
.rv-mosaic { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.rv-mosaic .rv-cap { grid-column: 1 / -1; }
.rv-grid { display: grid; grid-template-columns: repeat(10, 11px); gap: 3px; }
.rv-grid i { width: 11px; height: 11px; border-radius: 2.5px; background: var(--s2); transition: background-color .4s var(--expo) calc(var(--i) * 18ms), transform .4s var(--expo) calc(var(--i) * 18ms); }
.rv-grid i.on { background: var(--warm); }
.rv.pre .rv-grid i { transform: scale(.4); }
.rv.pre .rv-grid i.on { background: var(--s2); }
.rv-side { display: grid; gap: 6px; }
.rv-side b { font: 600 var(--fs-9)/1 var(--sans); color: var(--warm); letter-spacing: -.02em; }
.rv-side span { font: 400 var(--fs-2)/1.35 var(--sans); color: var(--ink-2); }
.rv-fill { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rv-fill i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--warm); border-radius: 4px; transform-origin: 0 50%; transition: transform 1s var(--expo) 1.2s; }
.rv.pre .rv-fill i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .rv *, .ch .rv-dot { transition: none !important; } }
.rv > * { flex-shrink: 0; }
.rv-out li { grid-template-columns: 9.6em minmax(0, 1fr) 3.2em; }
.rv-g { white-space: nowrap; }

/* ---------------------------------------------------------------- V1b: slow stock model (3D, with an SVG still) */
.bk-stage { position: relative; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 90% at 50% 30%, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid var(--line); }
.bk-still { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; transition: opacity .6s var(--expo); }
.bk-units { width: 100%; height: 100%; max-height: 100%; }
.bk-units path { fill: none; stroke-width: 4; stroke-dasharray: 4 1; transition: opacity .3s var(--expo); }
.u-hot { stroke: var(--warm); } .u-acc { stroke: var(--accent); } .u-mut { stroke: var(--s2); } .u-base { stroke: var(--muted); }
.bk-sw.u-hot { background: var(--warm); } .bk-sw.u-acc { background: var(--accent); } .bk-sw.u-mut { background: var(--s2); } .bk-sw.u-base { background: var(--muted); }
.bk-sw.u-all { background: conic-gradient(var(--warm) 0 33%, var(--accent) 0 40%, var(--s2) 0 95%, var(--muted) 0); }
[data-sel="0"] .bk-units path:not([data-g="0"]), [data-sel="1"] .bk-units path:not([data-g="1"]),
[data-sel="2"] .bk-units path:not([data-g="2"]), [data-sel="3"] .bk-units path:not([data-g="3"]) { opacity: .18; }
.bk-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--expo); }
.bk.is-live .bk-c { opacity: 1; }
.bk.is-live .bk-still { opacity: 0; }
.bk-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; min-height: 2.2em; }
.bk-k { font: 600 var(--fs-3)/1.3 var(--sans); color: var(--ink-2); }
.bk-read b { font: 600 var(--fs-8)/1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.bk-l { font: 400 var(--fs-3)/1.4 var(--sans); color: var(--ink-2); }
.bk-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bk-b { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 var(--fs-3)/1 var(--sans); cursor: pointer; transition: background-color .24s var(--expo), border-color .24s var(--expo); }
.bk-b span { color: var(--muted); font-size: var(--fs-2); }
.bk-b:hover { border-color: var(--ink-2); }
.bk-b[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.bk-b[aria-pressed="true"] span { color: inherit; }
.bk-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bk-pz { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bk-pz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-pz-i { position: relative; width: 11px; height: 12px; }
.bk-pz-i::before, .bk-pz-i::after { content: ""; position: absolute; top: 0; width: 3.5px; height: 12px; border-radius: 1px; background: currentColor; }
.bk-pz-i::before { left: 0; } .bk-pz-i::after { right: 0; }
.bk-pz[aria-pressed="true"] .bk-pz-i::before { left: 2px; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; background: none; border-radius: 0; }
.bk-pz[aria-pressed="true"] .bk-pz-i::after { display: none; }
/* the site's Show still / Play 3D pill (phones) */
.bk-p3d { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bk-p3d[hidden] { display: none; }
.bk-p3d .p3d-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 500 var(--fs-3)/1 var(--sans); cursor: pointer; }
.bk-p3d .p3d-b[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.bk-p3d .p3d-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-p3d .p3d-play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.bk-p3d .p3d-still { width: 14px; height: 11px; border: 1.6px solid currentColor; border-radius: 3px; }
.st-lead { padding: 0 0 clamp(40px, 5vw, 72px); }
.st-lead .st-fig { max-width: 820px; margin: 0 auto; }
@media (max-width: 760px) { .bk-b { padding: 0 11px; } .bk-read b { font-size: var(--fs-7); } }

/* ---------------------------------------------------------------- V1b: Work hero, the 31 (a visual index) */
.mz { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.mz-t a { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; min-height: 128px; padding: 10px 11px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .24s var(--expo), transform .24s var(--expo), box-shadow .24s var(--expo); }
.mz-t a:hover, .mz-t a:focus-visible { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--ink) 45%, transparent); z-index: 2; }
.mz-t a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mz-n { font: 500 var(--fs-1)/1 var(--mono); color: var(--muted); }
.mz-c { display: block; align-self: center; }
.mz-c .tiny { width: 100%; height: 40px; }
.mz-typo { font: 600 var(--fs-7)/1 var(--sans); color: var(--ink-2); letter-spacing: -.02em; align-self: center; }
.mz-v { font: 600 var(--fs-4)/1.1 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-q { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; padding: 8px 10px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font: 500 var(--fs-2)/1.35 var(--sans);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s var(--expo), transform .2s var(--expo); min-width: 180px; }
.mz-t a:hover .mz-q, .mz-t a:focus-visible .mz-q { opacity: 1; transform: none; }
.mz-t[data-lane="space"] .ch .f-acc, .mz-t[data-lane="space"] .ch .f-hot { fill: var(--s2); }
.mz-t[data-lane="space"] .ch .ln { stroke: var(--ink-2); }
.mz-t[data-lane="space"] .ch .dot { fill: var(--ink-2); }
.mz-t[data-lane="earth"] .ch .f-acc, .mz-t[data-lane="earth"] .ch .f-hot { fill: var(--warm); }
.mz-t[data-lane="earth"] .ch .ln { stroke: var(--warm); }
.mz-t[data-lane="earth"] .ch .dot { fill: var(--warm); }
.ch.tiny .ln { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ch.tiny .dot { stroke-width: 0; }
.mz-t { transition: opacity .5s var(--expo) calc(var(--i) * 28ms), transform .5s var(--expo) calc(var(--i) * 28ms); }
.mz.pre .mz-t { opacity: 0; transform: translateY(10px) scale(.97); }
.mz-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; }
.mz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-left: 6px; }
.mz-sw:first-child { margin-left: 0; } .mz-sw.s { background: var(--s2); } .mz-sw.e { background: var(--warm); }
.wk-h .lede.mz-lede { max-width: 40em; }
.ar-sp { display: block; width: 72px; }
.ar-sp .tiny { width: 72px; height: 26px; }
.ar-a { grid-template-columns: 2.4em minmax(0, 1.6fr) 72px minmax(0, 1fr) minmax(0, .8fr) 20px; }
@media (max-width: 1100px) {
  .mz { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ar-a { grid-template-columns: 2.4em minmax(0, 1.5fr) 72px minmax(0, 1fr) 20px; }
}
@media (max-width: 760px) {
  .mz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mz-t a { min-height: 104px; padding: 8px 9px; }
  .mz-q { display: none; }
  .mz-v { font-size: var(--fs-3); }
  .ar-a { grid-template-columns: 2.2em minmax(0, 1fr) 16px; }
  .ar-sp { grid-column: 2 / 3; }
}
@media (prefers-reduced-motion: reduce) { .mz-t, .mz-t a { transition: none !important; } .mz-t a:hover { transform: none; } }
.mz-vk { color: var(--muted); font-weight: 500; }
/* role rows with their case-study artwork (the case's own share art, cropped to its drawing) */
.cs-a--img { grid-template-columns: 160px minmax(0, 1.25fr) minmax(0, 1fr) auto; }
.cs-im { display: block; width: 160px; aspect-ratio: 320 / 260; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #070a10; }
.cs-im img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .5s var(--expo); }
.cs-a--img:hover .cs-im img, .cs-a--img:focus-visible .cs-im img { transform: scale(1.1) translate(-2%, -2%); }
@media (max-width: 900px) { .cs-a--img { grid-template-columns: 1fr; } .cs-im { width: 100%; max-width: 420px; aspect-ratio: 16 / 8; } }
@media (prefers-reduced-motion: reduce) { .cs-im img { transition: none; } .cs-a--img:hover .cs-im img { transform: scale(1.04); } }

/* ---------------------------------------------------------------- V1b: Home sculpture band (full bleed) */
.scb { padding: clamp(64px, 7vw, 112px) 0; background: radial-gradient(90% 70% at 70% 30%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 0%, var(--bg) 70%), var(--bg); border-block: 1px solid var(--line); }
:root[data-theme="light"] .scb { background: radial-gradient(90% 70% at 70% 30%, var(--surface) 0%, var(--surface-2) 75%); }
.scb-in { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
.scb-hd { display: grid; gap: 14px; align-content: start; position: sticky; top: 96px; }
.scb-lede { margin: 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); }
.scb-hd .btn { width: fit-content; }
.scb .sc { margin: 0; min-width: 0; }
.scb .chart-frame-head .eyebrow { margin: 0; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.scb .finding { margin: 6px 0 0; font: 600 clamp(var(--fs-7), 1.2vw + 14px, var(--fs-9))/1.12 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.scb .q { margin: 8px 0 0; font: 400 var(--fs-3)/1.45 var(--sans); color: var(--muted); }
.scb .fig-cap { margin: 12px 0 0; font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }
.scb .sc-note { margin: 8px 0 0; font: 400 var(--fs-2)/1.5 var(--sans); color: var(--muted); }
.scb .sc-note a, .scb .fig-src { color: var(--muted); }
.scb .chart-frame-foot { margin-top: 8px; }
.scb .fig-src { margin: 0; font: 400 var(--fs-2)/1.4 var(--sans); }
.scb-in > .pf-chip { grid-column: 2; }
@media (max-width: 900px) { .scb-in { grid-template-columns: 1fr; } .scb-hd { position: static; } .scb-in > .pf-chip { grid-column: 1; } }
/* Home's availability dot is a global .live rule (8 px circle); the sculpture marks itself .live when the 3D runs */
.scb .sc.live { display: block; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; animation: none; }
/* slow stock: Findings is the page's one dark window (full bleed, dark tokens in both themes via .m-scene) */
.st-dark { margin-top: clamp(56px, 6vw, 96px); padding: clamp(56px, 6vw, 96px) 0; background: radial-gradient(80% 60% at 75% 0%, color-mix(in srgb, var(--accent) 12%, var(--bg)) 0%, var(--bg) 65%), var(--bg); color: var(--ink); }
.st-dark + .st { padding-top: clamp(56px, 6vw, 96px); }
.st-dark .win { background: var(--surface); border-color: var(--line); }
@media (max-width: 760px) { .bk-still { padding-top: 68px; } }
/* the skyline still (Simple view, phones): one silhouette per group, highest first */
.bk-sky polygon { stroke: none; transition: opacity .3s var(--expo); }
.bk-sky .s-hot { fill: var(--warm); } .bk-sky .s-acc { fill: var(--accent); } .bk-sky .s-mut { fill: var(--s2); } .bk-sky .s-base { fill: var(--muted); }
.bk-sky .ax { stroke: var(--line-2); }
[data-sel="0"] .bk-sky polygon:not([data-g="0"]), [data-sel="1"] .bk-sky polygon:not([data-g="1"]),
[data-sel="2"] .bk-sky polygon:not([data-g="2"]), [data-sel="3"] .bk-sky polygon:not([data-g="3"]) { opacity: .18; }
/* source tag, top left of every public-data visual on Home (the chart-window header style) */
.rv-tag { margin: 0 0 6px; font: 500 var(--fs-1)/1.3 var(--mono); color: var(--muted); letter-spacing: .01em; }
.fl-art .rv-tag { margin: 0 0 10px; align-self: flex-start; }
.rv-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.rv-mosaic .rv-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.rv-mosaic { display: flex; flex-direction: column; align-items: stretch; }
.rv-body > * { flex-shrink: 0; }
.rv { height: 262px; }
.rl-chip { margin: -2px 0 2px; }
/* workbook preview fits from 1024 up: KPI names wrap, numbers stay on one line; the flagship rows stack below 1180 */
.wb td:nth-child(2) { white-space: normal; min-width: 8.5em; }
.wb td.n { padding-inline: 7px; }
@media (max-width: 1180px) { .fx, .fx.flip { grid-template-columns: 1fr; } .fx.flip > .fx-art { order: 0; } .fx-art { max-width: 760px; } }
/* if it still overflows (phones), it scrolls inside its own frame, with a fade on the right edge while there is more */
.wb-grid { background: linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 18%, transparent), transparent) right / 12px 100% no-repeat scroll; }
.wb-grid table { background: transparent; }
.sf-how a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 3px; }

/* ================================================================ PASS 3 (26 Oct): one warm, quiet frames, titled mosaic, Work board */
/* warm = the finding only. Light fills use #C2621A (4.15:1 on white, above the 3:1 graphics minimum); warm TEXT keeps --warm
   (#8A4F12 in light, 6.55:1). Dark keeps #E9B98C for both. Accent blue = the comparison, grey = context. */
:root[data-theme="light"] { --warm-fill: #c2621a; }
:root[data-theme="dark"], .m-scene { --warm-fill: var(--warm); }
.ch .f-hot, .ch .dot-hot, .bk-sky .s-hot { fill: var(--warm-fill); }
.u-hot { stroke: var(--warm-fill); }
.key .k-hot, .bk-sw.u-hot, .rv-grid i.on, .rv-fill i, .scale-bar i, .tb i, .rv-out li:first-child .rv-b i { background: var(--warm-fill); }
.ch .brk.hot { stroke: var(--warm-fill); }
.ch .rv-dot.hot { fill: var(--warm-fill); }
.ch .f-ctx { fill: var(--line-2); }
.ch .ln-ink { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch .mapd { fill: var(--ink-2); opacity: .8; }
.ch .mapd:nth-child(7n) { fill: var(--warm-fill); opacity: 1; }

/* quiet frame captions: no fake window dots, sans 13 px, muted; mono only for real code and file names */
.win-bar { min-height: 0; padding: 14px 18px 0; border-bottom: 0; background: none; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.win-bar::before { display: none; }
.rv-tag { font: 500 var(--fs-2)/1.3 var(--sans); letter-spacing: 0; }
.rv-cap, .kt-l, .kt-c, .wb-cap { font-size: var(--fs-2); }
.st-fig .win-in, .fx-art .win-in { padding-top: 10px; }

/* ---------------------------------------------------------------- Work hero: the three flagships as one composed board */
.wk-h2 { padding-bottom: clamp(40px, 5vw, 72px); }
.wk-hg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.wk-h2 .wk-hg { padding-inline: 0; }   /* the hero grid sits inside the page wrapper already: no second gutter */
.wk-ht .lede { max-width: 30em; }
.wk-hb { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wk-board { position: relative; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; }
.board-p { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 45%, transparent); padding: 14px 16px 12px; min-width: 0; }
.board-c { margin: 0 0 10px; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.wb1 { grid-column: 1 / 13; grid-row: 1; padding-bottom: 8px; }
.wb2 { grid-column: 1 / 8; grid-row: 2; }
.wb3 { grid-column: 8 / 13; grid-row: 2; }
.board-sky .bk-units { width: 100%; height: auto; display: block; max-height: 230px; }
.wb3 .kts { grid-template-columns: 1fr; }
.board-src { grid-column: 1 / -1; margin: 2px 0 0; font: 400 var(--fs-2)/1.4 var(--sans); color: var(--muted); }
@media (min-width: 1101px) { .wb2 { transform: translateY(-34px) translateX(-18px); } .wb3 { transform: translateY(-34px) translateX(18px); } .wk-board { margin-bottom: -34px; } }

/* ---------------------------------------------------------------- the titled mosaic (Work archive) */
.mz { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; grid-auto-flow: dense; }
.mz-t a { display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 14px; border-radius: 12px; }
.mz-w { grid-column: span 2; }
.mz-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mz-k { font: 500 var(--fs-1)/1.3 var(--sans); color: var(--muted); }
.mz-n { font: 500 var(--fs-1)/1 var(--mono); color: var(--muted); }
.mz-t1 { font: 600 var(--fs-4)/1.3 var(--sans); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mz-c { margin-top: auto; padding-top: 10px; }
.mz-c .tiny { width: 100%; height: auto; display: block; }
.mz-cp { display: none; }
.mz-f { display: grid; gap: 2px; }
.mz-f b { font: 600 var(--fs-6)/1.1 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-l { position: relative; display: block; height: 1.35em; overflow: hidden; font: 400 var(--fs-1)/1.35 var(--sans); color: var(--muted); }
.mz-l1, .mz-l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .24s var(--expo), opacity .24s var(--expo); }
.mz-l2 { position: absolute; inset: 0; opacity: 0; transform: translateY(100%); color: var(--accent); }
.mz-t a:hover .mz-l1, .mz-t a:focus-visible .mz-l1 { opacity: 0; transform: translateY(-100%); }
.mz-t a:hover .mz-l2, .mz-t a:focus-visible .mz-l2 { opacity: 1; transform: none; }
.mz-t a:active { transform: scale(.98); transition-duration: .1s; }
.mz-q, .mz-key, .mz-typo, .mz-vk, .mz-v { display: none; }
.mz-all a { justify-content: space-between; background: var(--btn); border-color: var(--btn); }
.mz-all .mz-k { color: color-mix(in srgb, var(--btn-ink) 70%, transparent); }
.mz-all .mz-t1 { color: var(--btn-ink); font-size: var(--fs-6); }
.mz-go { font: 500 var(--fs-4)/1 var(--sans); color: var(--btn-ink); }
.ar-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 24px; max-width: 100%; }
.ar-chips::-webkit-scrollbar { display: none; }
.ar-chip { flex: none; }
.ar-more { margin: 16px 0 0; text-align: center; }
.ar-more[hidden] { display: none; }
@media (max-width: 1100px) { .mz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mz { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .mz-w { grid-column: auto; }
  .mz-t a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "c top" "c t1" "c f"; gap: 2px 14px; min-height: 88px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .mz-t a:hover, .mz-t a:focus-visible { transform: none; box-shadow: none; }
  .mz-top { grid-area: top; justify-content: flex-start; gap: 10px; }
  .mz-t1 { grid-area: t1; -webkit-line-clamp: 2; }
  .mz-c { display: none; }
  .mz-cp { display: block; grid-area: c; align-self: center; }
  .mz-cp .tiny { width: 64px; height: 40px; display: block; }
  .mz-f { grid-area: f; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .mz-f b { font-size: var(--fs-4); flex: none; }
  .mz-l { flex: 1; min-width: 0; }
  .mz-all a { grid-template-columns: 1fr; grid-template-areas: "top" "t1" "f"; padding: 16px; border-radius: 12px; margin-top: 12px; }
  .wk-hg { grid-template-columns: 1fr; }
  .wb2, .wb3 { display: none; }
  .board-sky .bk-units { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .mz-l1, .mz-l2 { transition: none; } .mz-t a:active { transform: none; } }

/* ---------------------------------------------------------------- Work flagships: chart 7/12 */
.fx { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ---------------------------------------------------------------- Roles rows: 16:10 art, one lead figure in a fixed column */
.cs-a--img { grid-template-columns: 240px minmax(0, 1fr) 200px auto; gap: 8px 28px; }
.cs-im { width: 240px; aspect-ratio: 16 / 10; }
.cs-n1 { display: grid; gap: 4px; justify-items: end; text-align: right; }
.cs-n1 b { font: 600 var(--fs-9)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.cs-n1 i { font: 400 var(--fs-2)/1.4 var(--sans); font-style: normal; color: var(--muted); }
@media (max-width: 900px) { .cs-a--img { grid-template-columns: 1fr; } .cs-im { width: 100%; max-width: 480px; } .cs-n1 { justify-items: start; text-align: left; } }
.mz-c .ch.fl-tile { width: 100%; height: auto; display: block; max-height: 120px; }

/* ---------------------------------------------------------------- Home pass 3 */
/* role cards: label, the public-data visual, his own record in one line, two links (one card, no inner card) */
.rl2 { gap: 12px; padding: 20px 20px 10px; }
.rl2 .rl-r { font-size: var(--fs-6); }
.rl2 .rv { margin: 0; border: 0; border-radius: 12px; height: auto; aspect-ratio: 16 / 10; min-height: 236px; }
.rl-me { margin: 4px 0 0; font: 400 var(--fs-4)/1.5 var(--sans); color: var(--ink-2); }
.rl-me-k { display: block; margin-bottom: 2px; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.rv-cap { font-size: var(--fs-2); }
.rl2 .rl-a { margin-top: auto; }
/* intro: one short paragraph */
.facts2 { padding-block: clamp(40px, 5vw, 72px); }
.facts2 .facts-lead { max-width: 30em; margin: 0; }
/* Selected work: the same frame for all three, chart from the top */
.fl-art { aspect-ratio: 4 / 3; min-height: 0; justify-content: flex-start; gap: 4px; overflow: hidden; flex: none; }
.fl-art .chv { margin-top: 8px; }
.fl-art .kts { grid-template-columns: 1fr 1fr; }
/* the skyline band: Home's one dark window, full bleed */
.skb { padding: clamp(64px, 7vw, 112px) 0; background: radial-gradient(70% 80% at 72% 30%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, var(--bg) 70%), var(--bg); color: var(--ink); }
.skb-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.skb-t { display: grid; gap: 16px; align-content: start; }
.skb-t .btn { width: fit-content; }
.skb-p { margin: 0; font: 400 var(--fs-5)/1.55 var(--sans); color: var(--ink-2); max-width: 26em; }
.skb-fig { margin: 0; min-width: 0; }
.skb-stage { aspect-ratio: 16 / 9; background: radial-gradient(80% 90% at 50% 25%, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%, var(--bg) 75%); border-color: var(--line); }
.skb-read { position: absolute; left: 14px; bottom: 14px; z-index: 2; margin: 0; min-height: 0; max-width: calc(100% - 28px); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.skb-read b { font-size: var(--fs-7); }
.skb-steps { margin-top: 12px; }
.skb-fig .src { margin-top: 8px; }
.skb .bk-still { padding-bottom: 80px; }
/* Roles: four cards with the case art */
.rc-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rc a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: border-color .24s var(--expo), transform .24s var(--expo); }
.rc a:hover, .rc a:focus-visible { border-color: var(--line-2); transform: translateY(-2px); }
.rc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-im { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #070a10; margin-bottom: 8px; }
.rc-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--expo); }
.rc a:hover .rc-im img { transform: scale(1.05); }
.rc-k, .rc-t, .rc-n { padding-inline: 6px; }
.rc-k { font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
.rc-t { font: 600 var(--fs-5)/1.25 var(--sans); color: var(--ink); }
.rc-n { display: grid; gap: 2px; margin-top: auto; padding-top: 8px; }
.rc-n b { font: 600 var(--fs-9)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.rc-n i { font: 400 var(--fs-2)/1.4 var(--sans); font-style: normal; color: var(--muted); }
/* Dashboard row: six titled tiles */
.mz6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mz6 .mz-t a { min-height: 0; }
@media (max-width: 1100px) { .rc-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mz6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skb-in { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rc-g { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rc-n b { font-size: var(--fs-7); }
  .rc-t { font-size: var(--fs-4); }
  .mz6 { grid-template-columns: 1fr; }
  .mz6 .mz-t:nth-child(n+4) { display: none; }
  .rl2 .rv { aspect-ratio: auto; }
  .skb-stage { aspect-ratio: 4 / 3; }
  .skb .bk-still { padding: 60px 12px 92px; }
  .skb-read b { font-size: var(--fs-6); }
}
@media (prefers-reduced-motion: reduce) { .rc a, .rc-im img { transition: none; } .rc a:hover { transform: none; } }
/* the skyline band is dark in both themes; Home does not load mission.css (.m-scene), so the dark set is spelled out here */
.skb { --bg: #070a10; --surface: #121822; --surface-2: #1a2130; --ink: #f2f4f8; --ink-2: #c8cfdb; --muted: #a3acbc; --line: #2e3849; --line-2: #4a566b;
  --accent: #a9beff; --on-accent: #070a10; --s2: #4b5568; --warm: #e9b98c; --warm-fill: #e9b98c; --btn: #f2f4f8; --btn-ink: #070a10; --btn-hover: #ffffff; --shadow: none; color-scheme: dark; }
.skb .bk-b[aria-pressed="true"] { background: #f2f4f8; color: #070a10; border-color: #f2f4f8; }
.skb .btn.primary { background: #f2f4f8; color: #070a10; }
/* Home on phones: Explore as a compact 2 x 2, Contact tighter, frames shorter (pass 3 length target) */
@media (max-width: 760px) {
  body[data-page="home"] .explore .xg { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body[data-page="home"] .explore .xg > li { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; }
  body[data-page="home"] .explore .xt { min-height: 0 !important; height: auto !important; aspect-ratio: auto !important; }
  body[data-page="home"] .explore .xt-i { position: relative !important; inset: auto !important; display: block; aspect-ratio: 4 / 3; height: auto !important; }
  body[data-page="home"] .explore .xt-i img { width: 100%; height: 100%; object-fit: cover; }
  body[data-page="home"] .explore .xt-b { position: static !important; padding: 10px 4px 4px !important; background: none !important; }
  body[data-page="home"] .explore .xt-t { display: none !important; }
  body[data-page="home"] .explore .xt-k { font-size: var(--fs-4) !important; }
  body[data-page="home"] .explore .xt-go { font-size: var(--fs-2) !important; min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="home"] .contact { padding-block: 56px !important; }

  body[data-page="home"] .xp-g { row-gap: 20px; }
}
/* phones: the role cards and the three flagships become swipeable rows with the next card peeking (scroll-snap, no JS) */
@media (max-width: 760px) {
  body[data-page="home"] .rl-g, body[data-page="home"] .fl-g { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 12px; scrollbar-width: none; max-width: none; }
  body[data-page="home"] .rl-g::-webkit-scrollbar, body[data-page="home"] .fl-g::-webkit-scrollbar { display: none; }
  body[data-page="home"] .rl-g > li, body[data-page="home"] .fl-g > li { flex: 0 0 86%; scroll-snap-align: start; }
  body[data-page="home"] .fl:hover, body[data-page="home"] .fl:focus-within { transform: none; }
}

/* ---------------------------------------------------------------- For your team pages (pass 3): real-data heroes, a flat 90-day ruler */
.darkset { --bg: #070a10; --surface: #121822; --surface-2: #1a2130; --ink: #f2f4f8; --ink-2: #c8cfdb; --muted: #a3acbc; --line: #2e3849; --line-2: #4a566b;
  --accent: #a9beff; --on-accent: #070a10; --s2: #4b5568; --warm: #e9b98c; --warm-fill: #e9b98c; --shadow: none; color-scheme: dark; color: var(--ink); }
.fy-proof { list-style: none; margin: 22px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid rgb(255 255 255 / .14); max-width: 680px; }
.fy-proof li { display: grid; gap: 6px; align-content: start; }
.fy-proof b { font: 600 var(--fs-7)/1.05 var(--sans); letter-spacing: -.02em; color: #f2f4f8; }
.fy-proof span { font: 400 var(--fs-3)/1.4 var(--sans); color: #c8cfdb; }
.fy-stage2 { display: flex; flex-direction: column; justify-content: center; }
.fy-vis { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 40px 90px -50px rgb(0 0 0 / .8); }
.fy-vis .rv { margin: 0; border: 0; background: none; padding: 0; height: auto; }
.fy-vis .bk-units { width: 100%; height: auto; display: block; margin: 6px 0 8px; }
.fy-vis-a { padding-left: 0; }
.fy-tag { margin: 10px 0 0; font: 500 var(--fs-2)/1.3 var(--sans); color: #a3acbc; }
body.fy .fy-dp .dp-bar > i { display: none; }
body.fy .fy-dp .dp-r.hl .dp-b i, body.fy .fy-dp .dp-b i { transform: none !important; }
body.fy .fy-dp .dp-v { opacity: 1 !important; }
/* the plan: one ruler, three phases flat on the surface (no cards, no ghost numerals) */
body.fy .fy-track { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.fy .fy-track::before { display: none; }
body.fy .fy-stage { background: none !important; border: 0 !important; border-top: 2px solid var(--line) !important; border-radius: 0 !important; padding: 18px 0 0 !important; }
body.fy .fy-stage.lit { border-top-color: var(--accent) !important; }
body.fy .fy-stage::after { display: none !important; }
body.fy .m-ghost-n { display: none !important; }
/* case and analysis cards: the case's own art, or a mini chart from the analysis */
body.fy .fy-art { display: block; margin: 0 calc(var(--fy-pad, 20px) * -1) 6px; aspect-ratio: 16 / 10; overflow: hidden; background: #070a10; }
body.fy .fy-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--expo); }
body.fy a.card:hover .fy-art img { transform: scale(1.04); }
body.fy .fy-mini { display: block; margin: 0 0 8px; padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
body.fy .fy-mini .tiny { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  body.fy .csv-hero-in { display: flex; flex-direction: column; }
  body.fy .csv-copy { display: contents; }
  body.fy .csv-copy > .crumbs { order: 1; } body.fy .csv-copy > .m-eyebrow { order: 2; } body.fy .csv-copy > h1 { order: 3; }
  body.fy .fy-proof { order: 4; grid-template-columns: 1fr; gap: 0; margin-top: 14px; padding-top: 0; }
  body.fy .fy-proof li { grid-template-columns: 7.2em 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
  body.fy .fy-proof b { font-size: var(--fs-5); }
  body.fy .csv-stage { order: 5; margin-top: 16px; }
  body.fy .csv-copy > .lede { order: 6; margin-top: 16px; }
  body.fy .csv-copy > .h-ctas { order: 7; } body.fy .csv-copy > .lanes { order: 8; }
  body.fy .fy-dp .dp-code { display: none; }
  .fy-vis { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { body.fy .fy-art img { transition: none; } }
body.fy .sec-h .eyebrow { flex-direction: row; gap: 0; margin-bottom: 10px; font: 500 var(--fs-2)/1.3 var(--sans); color: var(--muted); }
body.fy .sec-h .eyebrow .n { display: none; }
:root[data-theme="light"] .darkset .rv, .darkset .rv { background: none; }
:root[data-theme="light"] .darkset .ch .on-hot, :root[data-theme="light"] .skb .ch .on-hot { fill: var(--bg); }
.fy-vis { background: #121822; }
.fy-vis .rv { overflow: visible; padding: 2px 4px; } .fy-vis .rv-svg { max-width: 520px; }
/* slow stock pass 3: chart 1 at full content width; model chips on one row; captions in disclosures */
.st-lead .st-fig { max-width: none; }
.bk-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bk-steps::-webkit-scrollbar { display: none; }
.bk-b { flex: none; }
details.bk-how, details.steps-x { margin-top: 10px; }
details.bk-how > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 500 var(--fs-3)/1.3 var(--sans); color: var(--accent); list-style: none; }
details.bk-how > summary::-webkit-details-marker { display: none; }
details.bk-how > summary::after { content: "+"; margin-left: 8px; font-family: var(--mono); color: var(--muted); }
details.bk-how[open] > summary::after { content: "−"; }
details.bk-how .src { margin-top: 2px; }
details.steps-x .steps { border-top: 0; padding: 0 18px; }
.mz-all .mz-k { color: var(--btn-ink); opacity: 1; }

/* ================================================================ pass 4 polish (26 Oct): Selected work frames
   One shared frame height per row, set by the tallest frame's content (subgrid), each visual centred in it; nothing clipped
   (the old 4:3 box cut the workbook rows and left a dead band under the shorter charts). */
.fl-g { grid-template-rows: auto auto; }
.fl { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.fl > * { min-width: 0; }
.fl-art { aspect-ratio: auto; overflow: visible; justify-content: center; gap: 4px; }
.fl-art > .rv-tag { align-self: flex-start; }
.fl-art > .rv-tag + * { margin-top: auto; }
.fl-art > :last-child { margin-bottom: auto; }
@media (max-width: 760px) {
  .fl { display: flex; }
  .fl-art { flex: none; }   /* phones: each frame its own height; the card's text takes the rest */
}
/* Home's compact workbook: whole values only (no ellipsis inside a number); the "Week before" column is left to the full report */
.fl-art .wb-c tr > :nth-child(4) { display: none; }
.fl-art .wb-c td.n { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (max-width: 760px) { .fl-art .wb-c table { table-layout: auto; } .fl-art .wb-c td { overflow: visible; text-overflow: clip; } }   /* phones: columns fit their values; the sheet scrolls sideways in its frame */

/* Phones: the For heroes stack as a column; centred items left the breadcrumb and eyebrow floating mid-screen beside a
   left-aligned headline. Stretch them to the gutter like every other page (iPhone check, 27 Oct). */
@media (max-width: 900px) { body.fy section.fy-hero .csv-hero-in { align-items: stretch; } }