/* ZooBC Foundation production translation.
 * This file loads after the legacy stylesheet while the public site is moved
 * onto the approved grid and visual language page by page.
 */

:root,
[data-theme="light"] {
  color-scheme: light;
  --z-ink: #070a10;
  --z-midnight: #0b1420;
  --z-graphite: #34383d;
  --z-taupe: #8b8276;
  --z-stone: #c5bcae;
  --z-bone: #e7dfd3;
  --z-paper: #f8f3e9;
  --z-cyan: #2caeea;
  --z-magenta: #d447bd;
  --z-muted: #596266;
  --z-line: rgba(7, 10, 16, .17);
  --z-surface: #f8f3e9;
  --z-surface-alt: #e7dfd3;
  --z-surface-strong: #c5bcae;
  --z-button: #101820;
  --z-button-text: #f8f3e9;
  --z-header: rgba(248, 243, 233, .94);
  --z-shadow: 0 24px 60px rgba(26, 31, 35, .14);
  --z-shell: min(1480px, calc(100% - 80px));
  --z-gutter: clamp(20px, 2vw, 32px);
  /* Rendered height of the sticky .site-chrome (notice bar(s) + header), used
     by anything that must sit or scroll below it instead of behind it.
     Derived from the actual rules below, box-sizing: border-box throughout
     (foundation.css sets `*, *::before, *::after { box-sizing: border-box }`
     site-wide), not guessed.

     HOW IT WORKS. zbcf_head() (html/lib/layout.php) counts the bars that will
     actually render — enabled AND renderable — and emits them as inline
     custom properties on the <html> tag:
         <html ... style="--z-notice-solid: 1; --z-notice-ticker: 1">
     <html> IS :root, which is the whole point. CSS substitutes var() at the
     element where the property that USES it is DECLARED, not where the value
     is later read — so a count set on a DESCENDANT (an earlier attempt put it
     on .site-chrome) could never reach these calcs. Setting it on the same
     element the declarations live on is what makes them resolve. The computed
     result then inherits to every consumer, including ones far outside the
     chrome: .giveaway-record-nav's `top` and html's own scroll-padding-top.

     PER-STYLE, NOT A FLAT COUNT. The two bars are different heights, so a
     single unit multiplied by a total would be wrong whenever both are live:
       --z-notice-info-unit  59px desktop / 76px narrow
         .global-notice-inner is `min-height: 58px` plus the bar's own 1px
         border-bottom = 59. Under 900px the inner switches to `padding: 13px 0`
         around a taller wrapped line, and under 719px to `17px 0 18px` with the
         action button on its own row — roughly 76px, which is what the narrow
         override below uses.
       --z-notice-alert-unit 35px
         The TestNet bar mirrors zoobc.network: `padding: 8px 13px` plus
         `font: 600 11.5px/1.5` (17.25px line) plus its own 1px top and bottom
         border = 35.25px, taken as 35.
     Defaults (solid 1, ticker 0) reproduce the historical 133px, so a page
     rendered without zbcf_head() still behaves as it always did.

     REMAINING CAVEAT, honestly: the units assume each bar occupies ONE line.
     The TestNet bar wraps to two lines on a narrow viewport (it is flex-wrap:
     wrap by design, copied from the reference), and when it does, the real
     chrome is taller than this calc claims. That under-reserves rather than
     over-reserves, so an anchor target can land slightly under the chrome on
     a phone with both bars enabled. Fixing it properly needs a measured
     height, which needs JS — deliberately not added, because this site has no
     build step and the failure is small and cosmetic. */
  --z-notice-info-unit: 59px;
  --z-notice-alert-unit: 35px;
  --z-header-h: 92px;
  --z-notice-h: calc(var(--z-notice-info, 1) * var(--z-notice-info-unit) + var(--z-notice-alert, 0) * var(--z-notice-alert-unit));
  --z-chrome-h: calc(var(--z-notice-h) + var(--z-header-h));
  --font-sans: "Space Grotesk", sans-serif;
  --font-serif: "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --ink: var(--z-ink);
  --ink-muted: var(--z-muted);
  --ink-faint: #6c7477;
  --bg: var(--z-paper);
  --bg-elev-1: #eee7dc;
  --bg-elev-2: #e1d9ce;
  --bg-elev-3: var(--z-stone);
  --line: var(--z-line);
  --line-strong: rgba(7, 10, 16, .34);
  --accent: #147fa9;
  --accent-strong: #0e607f;
  --accent-soft: #ded5c8;
  --amber: var(--z-magenta);
  --green: var(--z-cyan);
  --red: var(--z-magenta);
  --violet: var(--z-magenta);
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --page-max: 1480px;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
}

/* Community giveaways: useful work becomes a public record. */
.giveaway-hero { display: grid; min-height: min(780px, calc(100svh - 92px)); grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--z-line); }
.giveaway-hero-copy { display: grid; align-items: center; background: var(--z-surface); }
.giveaway-hero-copy-inner { width: min(740px, calc(100% - 80px)); margin-left: max(40px, calc((100vw - min(1480px, calc(100vw - 80px))) / 2)); padding: clamp(92px, 10vw, 150px) 0; }
.giveaway-hero h1, .giveaway-record-hero h1 { margin: 0; font-size: clamp(4rem, 6.2vw, 7.7rem); font-weight: 500; line-height: .87; letter-spacing: -.072em; }
.giveaway-hero h1 span, .giveaway-record-hero h1 span, .giveaway-status h2 span, .giveaway-section-head h2 span, .giveaway-record-close h2 span { display: block; }
.giveaway-hero-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; }
.giveaway-hero-breadcrumb a { color: inherit; text-decoration: none; }
.giveaway-hero-breadcrumb a:hover, .giveaway-hero-breadcrumb a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.giveaway-hero-lede { max-width: 59ch; margin: 42px 0 0; color: var(--z-muted); font-size: clamp(1.12rem, 1rem + .35vw, 1.38rem); }
.giveaway-hero-media { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #0b1017; }
.giveaway-hero-media::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 1px rgba(248,243,233,.12); pointer-events: none; }
.giveaway-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.38) contrast(1.08); }
.giveaway-hero-media figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 24px; color: #f8f3e9; background: rgba(7,10,16,.76); font: 500 .78rem/1.5 var(--font-mono); }

.giveaway-proof { background: var(--z-midnight); color: #f8f3e9; }
.giveaway-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.giveaway-proof-grid > div { min-height: 150px; padding: 34px 28px; border-right: 1px solid rgba(248,243,233,.18); }
.giveaway-proof-grid > div:first-child { border-left: 1px solid rgba(248,243,233,.18); }
.giveaway-proof span, .giveaway-proof strong { display: block; }
.giveaway-proof span { color: #aeb5b7; font: 600 .75rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.giveaway-proof strong { margin-top: 24px; color: #f8f3e9; font-size: clamp(1.45rem, 2vw, 2.3rem); font-weight: 500; letter-spacing: -.04em; }

.giveaway-status, .giveaway-record-close { padding: clamp(100px, 11vw, 160px) 0; background: var(--z-surface-alt); }
.giveaway-status-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); align-items: start; }
.giveaway-status-heading { grid-column: 1 / span 5; }
.giveaway-status-heading h2 { margin: 0; font-size: clamp(3.3rem, 5vw, 6.2rem); font-weight: 500; line-height: .9; letter-spacing: -.066em; }
.giveaway-status-heading > p:last-of-type { max-width: 51ch; margin-top: 38px; color: var(--z-muted); }
.giveaway-status-panel { grid-column: 7 / span 6; padding: clamp(30px, 4vw, 58px); border: 1px solid var(--z-line); background: var(--z-surface); box-shadow: var(--z-shadow); }
.giveaway-status-form label { display: block; margin-bottom: 14px; font: 600 .82rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.giveaway-status-help { max-width: 46ch; margin: 0 0 18px; color: var(--z-muted); font-size: .88rem; }
.giveaway-status-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.giveaway-status-control input { min-width: 0; min-height: 58px; padding: 0 18px; color: var(--z-ink); border: 1px solid var(--z-line); border-right: 0; border-radius: 0; background: var(--z-surface-alt); font: 500 1rem/1 var(--font-mono); }
.giveaway-status-control input::placeholder { color: var(--z-muted); }
.giveaway-status-control .zbc-button { min-height: 58px; }
/* Ledger breakdown and per-kind tabs on the lookup result. */
.giveaway-status-breakdown { display: grid; gap: 6px; margin: 18px 0 4px; }
.giveaway-status-breakdown-row { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; color: var(--z-muted); }
.giveaway-status-breakdown-row.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--z-line); color: var(--z-ink); }
.giveaway-status-tabs { display: flex; gap: 2px; margin: 22px 0 0; border-bottom: 1px solid var(--z-line); }
.giveaway-status-tab { padding: 9px 16px; margin-bottom: -1px; color: var(--z-muted); font: 600 .72rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.giveaway-status-tab:hover { color: var(--z-ink); }
.giveaway-status-tab.is-active { color: var(--z-ink); border-bottom-color: var(--z-cyan); }
.giveaway-status-hint { margin: 10px 0 0; color: var(--z-muted); font-size: .82rem; }
.giveaway-status-privacy, .giveaway-status-threshold, .giveaway-status-address { color: var(--z-muted); font-size: .88rem; }
.giveaway-status-privacy { margin: 14px 0 0; }
.giveaway-status-result:not(:empty) { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--z-line); }
.giveaway-status-message { margin: 0; }
.giveaway-status-error { color: var(--z-magenta); }
.giveaway-status-empty h3 { max-width: 18ch; margin: 0; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.06; letter-spacing: -.04em; }
.giveaway-status-empty > p:not(.giveaway-status-eyebrow) { max-width: 54ch; margin: 20px 0 0; color: var(--z-muted); }
.giveaway-status-empty .giveaway-status-empty-note { padding-top: 20px; border-top: 1px solid var(--z-line); }
.giveaway-status-card-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.giveaway-status-eyebrow { margin: 0 0 5px; color: var(--z-muted); font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.giveaway-status-card h3 { margin: 0; font-size: 1.55rem; }
.giveaway-status-total { font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.giveaway-progress { height: 5px; margin: 27px 0 13px; overflow: hidden; background: var(--z-surface-strong); }
.giveaway-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); }
.giveaway-status-periods { margin-top: 24px; border-top: 1px solid var(--z-line); }
.giveaway-status-period { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--z-line); }
.giveaway-status-period div strong, .giveaway-status-period div span { display: block; }
.giveaway-status-period div span { color: var(--z-muted); font: 500 .76rem/1.5 var(--font-mono); }
.giveaway-status-address { margin: 20px 0 0; }

.giveaway-mechanism, .giveaway-ledger, .giveaway-totals { padding: clamp(110px, 12vw, 176px) 0; }
.giveaway-section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); align-items: end; margin-bottom: 70px; }
.giveaway-section-head > div { grid-column: 1 / span 7; }
.giveaway-section-head > p { grid-column: 9 / span 4; margin: 0; color: var(--z-muted); }
.giveaway-section-head h2 { margin: 0; font-size: clamp(3.4rem, 5vw, 6.5rem); font-weight: 500; line-height: .9; letter-spacing: -.067em; }
.giveaway-mechanism-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line); }
.giveaway-mechanism-grid article { min-height: 340px; padding: clamp(30px, 4vw, 52px); border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); background: var(--z-surface); }
.giveaway-mechanism-grid h3 { margin: 72px 0 18px; font-size: clamp(1.75rem, 2.5vw, 2.65rem); font-weight: 500; letter-spacing: -.045em; }
.giveaway-mechanism-grid p { max-width: 42ch; margin: 0; color: var(--z-muted); }
.giveaway-admin-note { width: 100%; max-width: none; margin: 28px 0 0; color: var(--z-muted); font: 500 .8rem/1.6 var(--font-mono); text-align: right; }
@media (min-width: 901px) {
  .giveaway-admin-note { white-space: nowrap; }
}
.giveaway-ledger { background: var(--z-surface-alt); }
.giveaway-month-list { border-top: 1px solid var(--z-line); }
.giveaway-month-row { position: relative; display: grid; min-height: 190px; padding: 34px 28px; grid-template-columns: 60px 2fr 3fr auto; gap: var(--z-gutter); align-items: center; border: 1px solid var(--z-line); border-top: 0; background: color-mix(in srgb, var(--z-surface) 24%, transparent); transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.giveaway-month-row::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; opacity: 0; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); transition: opacity 180ms ease; }
.giveaway-month-row:hover, .giveaway-month-row:focus-visible { z-index: 2; background: var(--z-surface); box-shadow: var(--z-shadow); text-decoration: none; transform: translateY(-6px); }
.giveaway-month-row:hover::before, .giveaway-month-row:focus-visible::before { opacity: 1; }
.giveaway-month-row h3 { margin: 4px 0 0; font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 500; letter-spacing: -.055em; }
.giveaway-month-row p, .giveaway-month-row dt { margin: 0; color: var(--z-muted); font: 600 .73rem/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.giveaway-month-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; }
.giveaway-month-row dd { margin: 7px 0 0; font-size: 1.16rem; font-weight: 500; }

.giveaway-record-hero { padding: clamp(110px, 12vw, 176px) 0 100px; border-bottom: 1px solid var(--z-line); }
.giveaway-record-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); align-items: end; }
.giveaway-record-hero-grid > div:first-child { grid-column: 1 / span 8; }
.giveaway-record-hero .zbc-kicker { display: flex; align-items: center; gap: .75em; }
.giveaway-breadcrumb { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 160ms ease, text-decoration-color 160ms ease; }
.giveaway-breadcrumb:hover, .giveaway-breadcrumb:focus-visible { color: var(--z-ink); text-decoration-color: var(--z-cyan); }
.giveaway-breadcrumb-current { color: var(--z-muted); }
.giveaway-record-summary { grid-column: 10 / span 3; padding: 30px 0 0; border-top: 1px solid var(--z-line); }
.giveaway-record-summary > p { margin: 28px 0 2px; color: var(--z-muted); font: 600 .74rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.giveaway-record-summary > strong { font-size: 1.36rem; font-weight: 500; }
.giveaway-record-summary dl { margin: 27px 0 0; border-top: 1px solid var(--z-line); }
.giveaway-record-summary dl div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--z-line); }
.giveaway-record-summary dt { color: var(--z-muted); font: 500 .76rem/1.5 var(--font-mono); }
.giveaway-record-summary dd { margin: 0; font-weight: 600; }
.giveaway-record-intro { padding: 82px 0; background: var(--z-surface-alt); }
.giveaway-record-intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.giveaway-record-deck { grid-column: 1 / span 7; margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.35rem); line-height: 1.25; letter-spacing: -.035em; }
.giveaway-record-intro-grid > div { grid-column: 9 / span 4; color: var(--z-muted); }
/* `top: var(--z-chrome-h)` (not `top: 0`) parks this in-page nav below the
   sticky .site-chrome instead of behind it — .site-chrome is also
   `position: sticky; top: 0` with a higher z-index (200 vs. 35 here), so
   without this offset the two would collide once both are stuck, with the
   chrome painting over this nav. */
.giveaway-record-nav { position: sticky; top: var(--z-chrome-h); z-index: 35; border-block: 1px solid var(--z-line); background: var(--z-header); backdrop-filter: blur(16px); }
.giveaway-record-nav .zbc-shell { display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.giveaway-record-nav a { display: flex; min-height: 58px; align-items: center; flex: 0 0 auto; font: 600 .72rem/1.3 var(--font-mono); text-transform: uppercase; }
.giveaway-record-nav a + a { margin-left: 26px; padding-left: 26px; border-left: 1px solid var(--z-line); }
.giveaway-record-nav a:hover { color: var(--z-cyan); text-decoration: none; }
/* scroll-margin-top: 58px is kept unchanged and is NOT double-counting the new
   root `scroll-padding-top` (below). It has only ever represented the local
   `.giveaway-record-nav`'s own rendered height (~58px, from that nav's `a`
   children having `min-height: 58px`) — it predates .site-chrome entirely and
   never accounted for the header. The category heading must clear BOTH the
   site-wide chrome (now handled once, site-wide, by `html`'s
   scroll-padding-top) AND this page's own sticky sub-nav, which sits directly
   below the chrome (see .giveaway-record-nav's `top: var(--z-chrome-h)`
   above) — so the two offsets are additive by design, not redundant. */
.giveaway-category { padding: clamp(90px, 10vw, 150px) 0; border-bottom: 1px solid var(--z-line); scroll-margin-top: 58px; }
.giveaway-category:nth-of-type(even) { background: var(--z-surface-alt); }
.giveaway-category-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.giveaway-category header { grid-column: 1 / span 4; }
.giveaway-category header .zbc-kicker { margin-top: 28px; }
.giveaway-category h2 { margin: 0; font-size: clamp(2.5rem, 4vw, 4.9rem); font-weight: 500; line-height: .96; letter-spacing: -.06em; }
.giveaway-category header > p:last-child { max-width: 44ch; margin-top: 28px; color: var(--z-muted); }
.giveaway-category .giveaway-table-panel { min-width: 0; grid-column: 6 / span 7; }
.giveaway-table-wrap { min-width: 0; overflow-x: auto; border-top: 1px solid var(--z-line); }
.giveaway-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .98rem; }
.giveaway-table th, .giveaway-table td { padding: 19px 16px; border-bottom: 1px solid var(--z-line); text-align: left; vertical-align: top; }
.giveaway-table th:first-child, .giveaway-table td:first-child { padding-left: 0; }
.giveaway-table th:last-child, .giveaway-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.giveaway-category .giveaway-table { table-layout: fixed; font-variant-numeric: tabular-nums; }
.giveaway-category .giveaway-table th:first-child, .giveaway-category .giveaway-table td:first-child { width: 72px; padding-inline: 16px; text-align: center; vertical-align: middle; }
.giveaway-category .giveaway-table th:nth-child(2), .giveaway-category .giveaway-table td:nth-child(2) { width: 24%; }
.giveaway-category .giveaway-table th:last-child, .giveaway-category .giveaway-table td:last-child { width: 88px; padding-inline: 16px; text-align: center; vertical-align: middle; }
.giveaway-table thead th { color: var(--z-muted); font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.giveaway-table tbody tr { transition: background 160ms ease; }
.giveaway-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--z-surface-alt) 34%, transparent); }
.giveaway-table tbody th { min-width: 150px; padding-left: 24px; color: var(--z-ink); background: color-mix(in srgb, var(--z-ink) 3%, transparent); font-weight: 600; transition: color 160ms ease, background 160ms ease; vertical-align: middle; }
.giveaway-table tbody th small { display: block; margin-top: 6px; color: var(--z-muted); font: 500 .72rem/1.4 var(--font-mono); }
.giveaway-table tbody td:nth-child(3) { color: var(--z-muted); }
.giveaway-category .giveaway-table thead th:nth-child(2) { padding-left: 24px; }
@media (hover: hover) {
  .giveaway-table tbody tr:hover { background: color-mix(in srgb, var(--z-cyan) 8%, var(--z-surface)); }
  .giveaway-table tbody tr:hover th { color: var(--z-cyan); background: color-mix(in srgb, var(--z-cyan) 11%, var(--z-surface)); }
  .giveaway-table tbody tr:hover th small { color: var(--z-ink); }
}
.giveaway-total-table { min-width: 1180px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.giveaway-total-table th:first-child, .giveaway-total-table td:first-child { position: sticky; left: 0; z-index: 2; width: 18%; padding-left: 24px; text-align: left; }
.giveaway-total-table thead th:first-child, .giveaway-total-table tfoot th:first-child { z-index: 3; background: var(--z-surface); }
.giveaway-total-table tbody th:first-child { background: color-mix(in srgb, var(--z-ink) 3%, var(--z-surface)); }
.giveaway-total-table th:last-child, .giveaway-total-table td:last-child { width: 11%; padding-right: 16px; }
.giveaway-total-table th:not(:first-child), .giveaway-total-table td:not(:first-child) { text-align: center; vertical-align: middle; }
.giveaway-total-table thead th:not(:first-child) { text-wrap: balance; }
.giveaway-total-table .giveaway-not-awarded { color: var(--z-muted); }
.giveaway-total-table tfoot th, .giveaway-total-table tfoot td { padding-top: 26px; border-bottom: 0; font-weight: 600; }
.giveaway-table-scroll-note { display: none; }
.giveaway-record-close { background: var(--z-midnight); color: #f8f3e9; }
.giveaway-record-close h2, .giveaway-record-close .zbc-kicker, .giveaway-record-close .zbc-text-link { color: #f8f3e9; }
.giveaway-record-close .giveaway-status-heading > p:last-of-type { color: #b8bec0; }
.giveaway-record-close .giveaway-status-panel { color: var(--z-ink); background: var(--z-surface); }

@media (max-width: 1180px) {
  .giveaway-hero-copy-inner { width: calc(100% - 64px); margin-left: 40px; }
  .giveaway-hero h1 { font-size: clamp(3.55rem, 6vw, 6rem); }
  .giveaway-month-row { grid-template-columns: 44px 1.4fr 2fr; }
  .giveaway-month-row > .zbc-text-link { grid-column: 2; }
  .giveaway-table-scroll-note { display: block; margin: -24px 0 18px; color: var(--z-muted); font: 500 .82rem/1.5 var(--font-mono); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .site-header .site-header-inner { position: relative; grid-template-columns: 1fr auto auto; }
  .site-header .site-brand { grid-column: 1; }
  .site-header .nav-toggle { display: inline-flex; grid-column: 3; }
  .site-header .header-tools { grid-column: 2; grid-row: 1; }
  .site-header .header-tools .btn { display: none; }
  /* Drawer anchors to `top: 100%` of `.site-header` (its positioned ancestor) rather
     than a hardcoded header-height px value: `.site-header` itself now renders further
     down the page than 0, because `.site-chrome` sticks the notice bar above it — but
     `top: 100%` is relative to `.site-header`'s own box, so it lands right under the
     header regardless of how tall the notice bar is (0, 1, or several stacked notices).
     `max-height` can't get the same treatment (percentages there resolve against
     `.site-header`'s own height, not remaining viewport space), so it stays a
     svh-minus-px calc. 92px is `.site-header`'s rendered height at this breakpoint;
     `var(--z-notice-h)` (see :root, defined near the top of this file) replaces the
     old hand-estimated `60px` literal with the actual derived notice-bar height,
     scaled by the real rendered bar counts (see --z-notice-solid /
     --z-notice-ticker there).
     `overflow-y: auto` below is still the safety net for the one remaining
     assumption on --z-notice-h: bars of unequal height (see :root comment). */
  .site-header .site-nav { position: absolute; top: 100%; right: -40px; left: -40px; z-index: 60; display: none; max-height: calc(100svh - var(--z-header-h) - var(--z-notice-h)); padding: 0 40px 28px; grid-column: auto; flex-direction: column; align-items: stretch; overflow-y: auto; background: var(--z-surface); border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); box-shadow: var(--z-shadow); }
  .site-header .site-nav.is-open { display: flex; }
  .site-header .site-nav a { display: flex; min-height: 58px; align-items: center; padding: 0; border-bottom: 1px solid var(--z-line); font-size: .86rem; }
  .site-header .site-nav a:hover, .site-header .site-nav a.is-active { text-decoration: none; }
  .site-header .site-nav .mobile-nav-cta { display: flex !important; min-height: 56px; justify-content: center; margin-top: 24px; color: var(--z-button-text); border: 1px solid var(--z-button); background: var(--z-button); }
}

@media (max-width: 900px) {
  .giveaway-hero { min-height: auto; }
  .giveaway-hero-copy-inner { width: calc(100% - 40px); margin-left: 20px; }
  .giveaway-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .giveaway-proof-grid > div:nth-child(3) { border-left: 1px solid rgba(248,243,233,.18); border-top: 1px solid rgba(248,243,233,.18); }
  .giveaway-proof-grid > div:nth-child(4) { border-top: 1px solid rgba(248,243,233,.18); }
  .giveaway-status-heading { grid-column: 1 / span 5; }
  .giveaway-status-panel { grid-column: 6 / span 7; }
  .giveaway-record-hero-grid > div:first-child { grid-column: 1 / span 8; }
  .giveaway-record-summary { grid-column: 9 / span 4; }
  .giveaway-record-deck { grid-column: 1 / span 8; }
  .giveaway-record-intro-grid > div { grid-column: 9 / span 4; }
  .giveaway-category header { grid-column: 1 / span 5; }
  .giveaway-category .giveaway-table-panel { grid-column: 6 / span 7; }
}

@media (max-width: 900px) {
  .giveaway-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; background: var(--z-surface); }
  .giveaway-hero-copy, .giveaway-hero-copy-inner { display: contents; }
  .giveaway-hero-media { grid-area: 1 / 1; height: 100%; min-height: 0; }
  .giveaway-hero-media img { position: absolute; inset: 0; object-position: center 42%; }
  .giveaway-hero-media figcaption { display: none; }
  .giveaway-hero-heading { z-index: 2; display: flex; grid-area: 1 / 1; flex-direction: column; justify-content: flex-start; padding: 28px 20px; color: #f8f3e9; background: linear-gradient(180deg, rgba(7,10,16,.08) 0%, rgba(7,10,16,.2) 28%, rgba(7,10,16,.72) 72%, rgba(7,10,16,1) 100%); }
  .giveaway-hero-heading .zbc-kicker, .giveaway-hero-heading h1 { color: #f8f3e9; }
  .giveaway-hero-heading .zbc-kicker { margin-bottom: 16px; }
  .giveaway-hero-lede { grid-row: 2; max-width: none; margin: 0; padding: 30px 20px 0; }
  .giveaway-hero-copy .zbc-actions { grid-row: 3; margin: 0; padding: 26px 20px 52px; }
  .giveaway-hero h1, .giveaway-record-hero h1 { font-size: clamp(2.9rem, 13vw, 4.5rem); }
  .giveaway-proof-grid { width: 100%; }
  .giveaway-proof-grid > div { min-height: 126px; padding: 26px 20px; }
  .giveaway-status-grid, .giveaway-section-head, .giveaway-record-hero-grid, .giveaway-record-intro-grid, .giveaway-category-grid { display: block; }
  .giveaway-status-panel { margin-top: 50px; padding: 26px 20px; }
  .giveaway-status-control { display: block; }
  .giveaway-status-control input, .giveaway-status-control .zbc-button { width: 100%; }
  .giveaway-status-control input { border-right: 1px solid var(--z-line); border-bottom: 0; }
  .giveaway-status-card-head { align-items: start; flex-direction: column; }
  .giveaway-section-head > p { margin-top: 30px; }
  .giveaway-section-head h2, .giveaway-status-heading h2 { font-size: clamp(3.1rem, 14vw, 4.8rem); }
  .giveaway-mechanism-grid { grid-template-columns: 1fr; }
  .giveaway-mechanism-grid article { min-height: 300px; }
  .giveaway-admin-note { text-align: left; }
  .giveaway-month-row { display: grid; grid-template-columns: 34px 1fr; }
  .giveaway-month-row dl { grid-column: 2; grid-template-columns: 1fr; }
  .giveaway-month-row > .zbc-text-link { grid-column: 2; }
  .giveaway-record-hero { padding: 86px 0 72px; }
  .giveaway-record-summary { margin-top: 54px; }
  .giveaway-record-deck { font-size: 1.45rem; }
  .giveaway-record-intro-grid > div { margin-top: 34px; }
  /* Was `top: 0` — that reset undid the base rule's `top: var(--z-chrome-h)`
     below 720px, re-exposing the exact chrome-overlap regression this
     variable exists to fix. --z-chrome-h is redefined for this breakpoint
     above (in the :root override inside this same media block), so this
     just needs to keep tracking it rather than hardcoding 0. */
  .giveaway-record-nav { top: var(--z-chrome-h); }
  .giveaway-category header { margin-bottom: 48px; }
  .giveaway-table th, .giveaway-table td { padding-block: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .giveaway-month-row, .giveaway-month-row::before { transition: none; }
  .giveaway-month-row:hover, .giveaway-month-row:focus-visible { transform: none; }
  .giveaway-table tbody tr, .giveaway-table tbody th { transition: none; }
}

[data-theme="dark"] {
  color-scheme: dark;
  --z-ink: #f8f3e9;
  --z-midnight: #070a10;
  --z-graphite: #b9b4ad;
  --z-taupe: #746e67;
  --z-stone: #292d32;
  --z-bone: #171b20;
  --z-paper: #0b1017;
  --z-muted: #b3b8b9;
  --z-line: rgba(248, 243, 233, .2);
  --z-surface: #0b1017;
  --z-surface-alt: #151a21;
  --z-surface-strong: #22272d;
  --z-button: #f8f3e9;
  --z-button-text: #070a10;
  --z-header: rgba(11, 16, 23, .94);
  --z-shadow: 0 28px 68px rgba(0, 0, 0, .44);
  --ink-faint: #8e9597;
  --bg-elev-1: #151a21;
  --bg-elev-2: #1d2229;
  --bg-elev-3: #292d32;
  --line-strong: rgba(248, 243, 233, .38);
  --accent: #55c9f7;
  --accent-strong: #8ddfff;
  --accent-soft: #25313a;
}

/* scroll-padding-top reserves space at the top of the scrollport site-wide so
   any in-page anchor jump (URL fragment, `scrollIntoView`, or a page-specific
   in-page nav like .giveaway-record-nav's `#code` links) lands below the
   sticky .site-chrome instead of underneath it. The extra 12px is just a
   small visual gap, not a measured value. */
html { background: var(--z-paper); scroll-padding-top: calc(var(--z-chrome-h) + 12px); }
body { background: var(--z-paper); color: var(--z-ink); font-family: var(--font-sans); font-size: clamp(1.0625rem, 1.01rem + .16vw, 1.16rem); line-height: 1.6; }
.skip-link { top: 0; transform: translateY(-100%); }
.skip-link:focus { top: 0; transform: translateY(0); }
h1, h2, h3, h4, h5, h6 { color: var(--z-ink); font-family: var(--font-sans); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 4px; border-radius: 0; }
::selection { color: #070a10; background: #7ce1ff; }

.zbc-shell { width: var(--z-shell); margin-inline: auto; }
.cube-marker { display: inline-block; width: 18px; height: 21px; flex: 0 0 auto; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.zbc-kicker { margin: 0 0 30px; color: var(--z-cyan); font: 600 clamp(.78rem, .75rem + .1vw, .9rem)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.zbc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 38px; }
.zbc-button { position: relative; display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 23px; border: 1px solid var(--z-ink); border-radius: 0; font: 600 .85rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.zbc-button-primary { overflow: hidden; color: var(--z-button-text); background: var(--z-button); border-color: var(--z-button); }
.zbc-button-primary::before { position: absolute; inset: 0 0 auto; height: 2px; content: ""; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); }
.zbc-button-primary:hover { color: #070a10; background: #7ce1ff; border-color: #7ce1ff; text-decoration: none; transform: translateY(-2px); }
.zbc-button-secondary { background: transparent; color: var(--z-ink); }
.zbc-button-secondary:hover { background: var(--z-surface-alt); border-color: var(--z-cyan); text-decoration: none; transform: translateY(-2px); }
.zbc-text-link { display: inline-flex; align-items: center; width: fit-content; min-height: 42px; padding-block: 4px; border-bottom: 1px solid currentColor; font: 600 .86rem/1.3 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; }
.zbc-text-link:hover { color: var(--z-cyan); border-color: currentColor; text-decoration: none; }

/* Shared site shell */
/* Notice bar and nav pin as one unit so they can never separate on scroll. */
.site-chrome { position: sticky; top: 0; z-index: 200; }
.site-header { position: relative; top: auto; z-index: 50; padding: 0; background: var(--z-header); border-bottom: 1px solid var(--z-line); backdrop-filter: blur(16px); }
/* Three content-sized tracks, not a rigid 12-column grid. The old spans gave
   the brand 2/12 of the shell (far more than its ~130px of content) and left
   the tools only 3/12, which is why "Apply for a Grant" wrapped onto two lines
   while dead space sat between the logo and the menu. auto | 1fr | auto gives
   each end exactly what it needs and hands the slack to the nav, which stays
   centred in its own track. */
.site-header-inner { display: grid; width: var(--z-shell); max-width: none; min-height: 92px; margin: 0 auto; padding: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--z-gutter); }
.site-brand { grid-column: 1; gap: 11px; min-height: 48px; color: var(--z-ink); }
.zbcf-logo-mark { width: 25px; height: 31px; }
.brand-name { gap: 4px; line-height: 1; }
.brand-title { color: var(--z-ink); font-size: 1rem; font-weight: 600; letter-spacing: -.04em; }
.brand-sub { color: var(--z-muted); font: 500 .55rem/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.site-nav { grid-column: 2; display: flex; justify-content: center; gap: clamp(5px, .35vw, 9px); }
.site-nav a { padding: 13px 10px; color: var(--z-muted); border-radius: 0; font: 600 .73rem/1 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a.is-active { color: var(--z-ink); background: transparent; text-decoration: underline; text-decoration-color: var(--z-cyan); text-underline-offset: 8px; }
@media (min-width: 1181px) {
  .site-nav { gap: 0; }
  .site-nav a + a { margin-left: 5px; padding-left: 15px; border-left: 1px solid var(--z-line); }
  .site-nav .nav-group + .nav-group > .nav-group-btn { margin-left: 5px; padding-left: 15px; border-left: 1px solid var(--z-line); }
}
.header-tools { grid-column: 3; justify-self: end; gap: 10px; }
.theme-toggle { width: 46px; height: 46px; border-radius: 0; color: var(--z-ink); border-color: var(--z-line); background: transparent; }
.theme-toggle:hover { color: var(--z-ink); border-color: var(--z-cyan); background: var(--z-surface-alt); }
.site-cta { display: inline-flex; white-space: nowrap; min-height: 46px; align-items: center; padding: 0 16px; color: var(--z-button-text); border: 1px solid var(--z-button); border-radius: 0; background: var(--z-button); font: 600 .73rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.site-cta:hover { color: #070a10; border-color: #7ce1ff; background: #7ce1ff; text-decoration: none; }
.header-tools .btn { min-height: 46px; padding-inline: 12px; border-radius: 0; color: var(--z-ink); font: 600 .73rem/1 var(--font-mono); text-transform: uppercase; }
.nav-toggle { position: relative; display: none; width: 46px; height: 46px; padding: 0; border-radius: 0; color: var(--z-ink); }
.nav-toggle span { position: absolute; left: 12px; width: 20px; height: 1px; background: currentColor; transform-origin: center; transition: top 180ms ease, transform 180ms ease, opacity 140ms ease; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.mobile-nav-cta { display: none !important; }

/* Global announcement channel */
.global-notice { position: relative; z-index: 70; color: var(--notice-ink, #070a10); background: var(--notice-bg, linear-gradient(100deg, #2caeea 0%, #d447bd 100%)); border-bottom: 1px solid rgba(7, 10, 16, .52); box-shadow: 0 7px 22px rgba(7, 10, 16, .2); }
.global-notice-inner { display: grid; width: var(--z-shell); min-height: 58px; margin-inline: auto; align-items: center; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.global-notice-mark { grid-column: 1; width: 15px; height: 18px; background: currentColor; }
.global-notice-label { display: none; }
/* The looping ticker: the original bar's defining behaviour. Three copies of
   the message and a -33.33% keyframe make the loop seamless; the mask fades
   both ends so text appears and disappears rather than being clipped. */
.global-notice-ticker { grid-column: 2 / span 8; min-width: 0; overflow: hidden; color: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.global-notice-track { display: flex; width: max-content; animation: zbc-notice-ticker 21s linear infinite; will-change: transform; }
.global-notice-track span { flex: 0 0 auto; padding-right: clamp(90px, 9vw, 170px); }
/* Pause on hover or keyboard focus so a moving line can actually be read. */
.global-notice:hover .global-notice-track, .global-notice:focus-within .global-notice-track { animation-play-state: paused; }
@keyframes zbc-notice-ticker { to { transform: translateX(-33.333333%); } }
@media (prefers-reduced-motion: reduce) {
  /* A looping marquee is precisely what this setting asks us not to do. Show
     one static copy rather than freezing the animation mid-scroll. */
  .global-notice-track { width: 100%; animation: none; will-change: auto; }
  .global-notice-track span { overflow: hidden; padding-right: 0; text-overflow: ellipsis; }
  .global-notice-track span:not(:first-child) { display: none; }
}
.global-notice-action { grid-column: 10 / span 3; justify-self: end; min-height: 44px; padding: 0 16px; color: var(--notice-ink-inverse, #f8f3e9); border: 1px solid var(--notice-ink, #070a10); border-radius: 0; background: var(--notice-ink, #070a10); font: 600 .8125rem/1 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.global-notice-action:hover { opacity: .84; }

.global-notice-dialog { width: min(760px, calc(100% - 40px)); max-height: calc(100svh - 40px); margin: auto; padding: 0; color: var(--z-ink); border: 1px solid var(--z-line); border-radius: 0; background: var(--z-surface); box-shadow: 0 34px 100px rgba(0, 0, 0, .48); }
.global-notice-dialog::backdrop { background: rgba(7, 10, 16, .78); backdrop-filter: blur(8px); }
.global-notice-dialog-inner { position: relative; padding: clamp(36px, 6vw, 76px); }
.global-notice-dialog-mark { width: 28px; height: 33px; margin-bottom: 28px; }
.global-notice-dialog-label { margin: 0 0 22px; color: var(--z-cyan); font: 600 .8125rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.global-notice-dialog h2 { max-width: 12ch; margin: 0; font-size: clamp(2.6rem, 5vw, 5.1rem); font-weight: 500; line-height: .92; letter-spacing: -.06em; text-wrap: balance; }
.global-notice-dialog-copy { max-width: 58ch; margin-top: 34px; color: var(--z-muted); font-size: clamp(1.0625rem, 1.2vw, 1.2rem); line-height: 1.65; }
.global-notice-dialog-copy p { margin: 0; }
.global-notice-dialog-copy p + p { margin-top: 18px; }
.global-notice-dialog-actions { display: flex; margin-top: 38px; align-items: center; flex-wrap: wrap; gap: 14px; }
.global-notice-dialog-actions .zbc-button { margin-top: 0; }
.global-notice-close-icon { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; padding: 0; color: var(--z-ink); border: 1px solid var(--z-line); border-radius: 0; background: transparent; }
.global-notice-close-icon:hover { border-color: var(--z-cyan); background: var(--z-surface-alt); }
.global-notice-close-icon span { position: absolute; top: 22px; left: 12px; width: 20px; height: 1px; background: currentColor; }
.global-notice-close-icon span:first-child { transform: rotate(45deg); }
.global-notice-close-icon span:last-child { transform: rotate(-45deg); }

@media (max-width: 900px) {
  .global-notice-inner { padding: 13px 0; grid-template-columns: auto 1fr auto; gap: 12px 18px; }
  .global-notice-mark { grid-column: 1; }
  .global-notice-label { display: none; }
  .global-notice-action { grid-column: 3; }
}

@media (max-width: 560px) {
  .global-notice-inner { grid-template-columns: 18px 1fr; padding: 17px 0 18px; }
  .global-notice-mark { grid-column: 1; align-self: start; margin-top: 3px; }
  .global-notice-action { grid-column: 2; justify-self: start; min-height: 44px; margin-top: 2px; padding: 0; border-width: 0 0 1px; }
  .global-notice-action { padding-inline: 14px; border-width: 1px; }
  .global-notice-action:hover { color: #070a10; background: #f8f3e9; }
  .global-notice-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); }
  .global-notice-dialog-inner { padding: 72px 24px 34px; }
  .global-notice-dialog h2 { font-size: clamp(2.45rem, 12vw, 3.75rem); }
  .global-notice-close-icon { top: 12px; right: 12px; }
  .global-notice-dialog-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
}

/* Alert bar (style "alert"). Values copied verbatim from the live bar on
   zoobc.network so the two are pixel-identical — visitors recognise it across
   ZooBC properties, which is the point. Do NOT re-theme it to this site's
   palette or fonts: the system-ui stack and the amber values are deliberate.
   Full-bleed with only 13px of side padding, NOT constrained to var(--z-shell)
   — the shell cap is what forced the copy onto two lines on wide screens.
   The reference also carries position:sticky/top:0/z-index — omitted here
   because our .site-chrome wrapper already pins the whole chrome; duplicating
   it would create a nested sticky context and fight the header. */
.global-notice-alert {
  border: 1px solid rgb(107, 67, 16);
  background: rgb(58, 36, 8);
  color: rgb(245, 199, 126);
  font: 600 11.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: none;
}
.global-notice-alert .global-notice-inner {
  display: flex;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 13px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  grid-template-columns: none;
  text-align: center;
}
/* Drawn, not an emoji: an emoji renders at whatever size and colour the
   visitor's font decides, which is exactly what we cannot have in a bar this
   thin. currentColor keeps it locked to the copy. */
.global-notice-icon { flex-shrink: 0; width: 12px; height: 12px; color: inherit; }
/* The label is never shown (it is the accessible name only). The cube marker
   USED to be hidden here because it was hardcoded into every bar and unwanted
   on this compact one — now that the icon is a per-notice choice, honour it:
   sized to match the warning triangle so either choice sits the same. */
.global-notice-alert .global-notice-label { display: none; }
.global-notice-alert .global-notice-mark { flex-shrink: 0; width: 11px; height: 13px; background: currentColor; }
/* max-width: none escapes foundation.css's global `p { max-width: var(--measure) }`
   (68ch of prose measure). That cap, not the flex layout, is what forced this
   bar onto two lines while half the width sat empty. font-size shrinks before
   the text is allowed to wrap, per the reference behaviour: 11.5px is the
   reference value and the ceiling, never exceeded on wide screens. */
.global-notice-alert .global-notice-text { max-width: none; margin: 0; font: inherit; font-size: clamp(9.5px, .72vw, 11.5px); opacity: .93; }
.global-notice-alert .global-notice-text strong { font-weight: 800; color: inherit; }
/* line-height: 1 is the whole reason this bar is thin. The reference builds its
   pill as an inline <span>, whose padding does not grow the line box, so the
   pill costs nothing vertically. Ours has to be a <button> — it opens the
   modal, and a clickable span is not reachable by keyboard — and a button is
   inline-block, so its line-height and padding DO drive the row's height. At
   the inherited 1.5 that made the pill 23px against 17px of text, and the bar
   inflated to match. Collapsing the pill's line-height to 1 brings it back to
   the text's own height. Do not restore the inherited line-height. */
.global-notice-alert .global-notice-action {
  min-height: 0;
  padding: 2px 9px;
  color: inherit;
  font: inherit;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(0, 0, 0, .3);
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
}
.global-notice-alert .global-notice-action:hover { background: rgba(0, 0, 0, .45); }


/* Hero */
.home-hero { position: relative; min-height: calc(100svh - 92px); overflow: hidden; isolation: isolate; background: #c9c3b8; }
.home-hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; width: 100%; height: 100%; pointer-events: none; }
.home-hero-media iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; border: 0; transform: translate(-50%, -50%) scale(1.18); pointer-events: none; }
.home-hero-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(242,238,230,.56) 0%, rgba(242,238,230,.28) 48%, rgba(242,238,230,.03) 76%); }
[data-theme="dark"] .home-hero-wash { background: linear-gradient(90deg, rgba(7,10,16,.68), rgba(7,10,16,.28) 60%, rgba(7,10,16,.1)); }
.home-hero-grid { display: grid; min-height: calc(100svh - 92px); align-items: end; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); padding: clamp(90px, 9vw, 150px) 0 clamp(100px, 9vw, 138px); }
.home-hero-folio { grid-column: 1 / span 7; padding: clamp(40px, 4.5vw, 70px); background: rgba(248,243,233,.95); border: 1px solid rgba(7,10,16,.17); box-shadow: var(--z-shadow); }
[data-theme="dark"] .home-hero-folio { background: rgba(11,16,23,.94); border-color: var(--z-line); }
.home-hero h1 { margin: 0; font-size: clamp(4.1rem, 6.1vw, 7.35rem); font-weight: 500; line-height: .88; letter-spacing: -.072em; }
.home-hero h1 span, .home-split h2 span, .home-section-head h2 span, .home-closing h2 span { display: block; }
.home-hero h1 .quiet { color: #7a8386; }
[data-theme="dark"] .home-hero h1 .quiet { color: #92999b; }
.home-hero-lead { max-width: 64ch; margin: 38px 0 0; color: var(--z-muted); font-size: clamp(1.1rem, 1.25vw, 1.35rem); line-height: 1.6; }
.home-hero-path { grid-column: 9 / span 4; padding: 34px 38px; color: var(--z-ink); border: 1px solid rgba(7,10,16,.17); background: rgba(248,243,233,.9); box-shadow: var(--z-shadow); }
[data-theme="dark"] .home-hero-path { border-color: var(--z-line); background: rgba(11,16,23,.9); }
.home-hero-path > div { display: grid; min-height: 92px; align-content: center; padding: 22px 0; grid-template-columns: 26px 1fr; column-gap: 15px; border-bottom: 1px solid var(--z-line); }
.home-hero-path > div:last-child { border: 0; }
.home-hero-path .cube-marker { grid-row: 1 / span 2; margin-top: 2px; }
.home-hero-path strong { font-size: 1.05rem; font-weight: 600; }
.home-hero-path small { margin-top: 7px; color: var(--z-muted); font: 500 .8rem/1.5 var(--font-mono); }
.home-horizon { position: absolute; right: 0; bottom: 70px; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--z-cyan) 30%, var(--z-magenta) 76%, transparent); }

/* Compact programme rail: verified participation without interrupting the home narrative. */
/* The three bars under the hero alternate surfaces: news, project, giveaways. */
.home-giveaway-bar { border-bottom: 1px solid var(--z-line); background: var(--z-surface); }
.home-bar-project { background: var(--z-surface-alt); }
/* A square tile the size of the cover frames in the bars above, holding the
   cube mark at a size that reads. The bare 18px glyph in a 100px column was
   invisible. */
.home-bar-tile { display: flex; width: 100%; aspect-ratio: 1 / 1; align-items: center; justify-content: center;
  background: var(--z-surface-alt); border: 1px solid var(--z-line); }
.home-bar-project .home-bar-tile { background: var(--z-surface); }
.home-bar-tile .cube-marker { width: 46%; height: 54%; }
.home-giveaway-bar-grid { display: grid; min-height: 210px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); align-items: center; }
.home-giveaway-bar-grid > .home-bar-tile { grid-column: 1; }
.home-giveaway-bar-copy { grid-column: 2 / span 4; min-width: 0; }
.home-giveaway-bar-copy .zbc-kicker { margin-bottom: 12px; }
.home-giveaway-bar-copy h2 { max-width: 15ch; margin: 0; font-size: clamp(2rem, 2.6vw, 3.2rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.home-giveaway-bar-note { grid-column: 6 / span 3; max-width: 36ch; margin: 0; color: var(--z-muted); font-size: 1rem; line-height: 1.55; }
.home-giveaway-bar-facts { display: grid; grid-column: 9 / span 2; gap: 13px; margin: 0; }
.home-giveaway-bar-facts div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--z-line); }
.home-giveaway-bar-facts dt { color: var(--z-muted); font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.home-giveaway-bar-facts dd { margin: 0; font-weight: 600; white-space: nowrap; }
.home-giveaway-bar-actions { display: grid; grid-column: 11 / span 2; gap: 10px; justify-self: stretch; }
.home-giveaway-bar-actions .zbc-button { min-height: 46px; }

/* Full-bleed alternating editorial splits */
.home-split { display: grid; min-height: 880px; grid-template-columns: 8fr 4fr; background: var(--z-surface); }
.home-split-reverse { grid-template-columns: 4fr 8fr; background: var(--z-surface-alt); }
.home-split-copy { display: flex; align-items: center; min-width: 0; }
.home-split-copy-inner { width: min(100%, 980px); margin-left: max(40px, calc((100vw - min(1480px, calc(100vw - 80px))) / 2)); padding: clamp(90px, 9vw, 150px) clamp(42px, 6vw, 100px) clamp(90px, 9vw, 150px) 0; }
.home-split-reverse .home-split-copy-inner { margin-right: max(40px, calc((100vw - min(1480px, calc(100vw - 80px))) / 2)); margin-left: 0; padding-right: 0; padding-left: clamp(42px, 6vw, 100px); }
.home-split h2 { max-width: 14ch; margin: 0; font-size: clamp(3.6rem, 5.6vw, 7.25rem); font-weight: 500; line-height: .9; letter-spacing: -.068em; }
.home-copy-columns { display: grid; margin-top: 58px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-gutter); padding-top: 32px; border-top: 1px solid var(--z-line); }
.home-copy-columns p { margin: 0; color: var(--z-muted); font-size: clamp(1.05rem, 1.1vw, 1.2rem); line-height: 1.65; }
.home-statement { max-width: 22ch; margin: 64px 0 24px; font-size: clamp(1.65rem, 2.5vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.home-statement span { color: #147fa9; }
[data-theme="dark"] .home-statement span { color: #55c9f7; }
.home-split-media { min-width: 0; min-height: 100%; margin: 0; overflow: hidden; }
.home-split-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Full-bleed isometric network chapter. The blue field is the container. */
.home-network { overflow: hidden; color: #f8f3e9; background: #0a3550; }
.home-network .zbc-kicker { color: #7ce1ff; }
.home-network-head { display: grid; align-items: end; padding: clamp(100px, 9vw, 150px) 0 clamp(60px, 6vw, 92px); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.home-network-head > div { grid-column: 1 / span 7; min-width: 0; }
.home-network-head > p { grid-column: 9 / span 4; max-width: 36ch; margin: 0; color: rgba(248,243,233,.76); font-size: clamp(1.05rem, 1.2vw, 1.22rem); line-height: 1.65; }
.home-network h2 { margin: 0; color: #f8f3e9; font-size: clamp(3.4rem, 5vw, 6.5rem); font-weight: 500; line-height: .9; letter-spacing: -.067em; }
.home-network h2 span { display: block; }
.home-network-stage { position: relative; height: min(78svh, 850px); min-height: 650px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(4,22,34,.1), rgba(4,22,34,.3)); cursor: crosshair; }
.home-network-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-network-hud { position: absolute; inset: 28px 40px auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; }
.home-network-hud p, .home-network-event > span { margin: 0; color: rgba(248,243,233,.74); font: 600 .82rem/1.45 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.home-network-state { display: flex; align-items: center; gap: 12px; color: #f8f3e9 !important; }
.home-network-state .cube-marker { width: 16px; height: 18px; }
.home-network-event { position: absolute; right: 40px; bottom: 35px; width: min(440px, 42%); pointer-events: none; }
.home-network-event > span { display: block; margin-bottom: 10px; color: #7ce1ff; }
.home-network-event p { margin: 0; color: #f8f3e9; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.55; }
.home-network-motion { position: absolute; bottom: 35px; left: 40px; min-width: 128px; min-height: 48px; padding: 0 18px; color: #f8f3e9; border: 1px solid rgba(248,243,233,.55); border-radius: 0; background: transparent; font: 600 .78rem/1 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.home-network-motion:hover, .home-network-motion:focus-visible { color: #070a10; border-color: #7ce1ff; outline: none; background: #7ce1ff; }
.home-network-roles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 28px 0 54px; gap: clamp(12px, 1.6vw, 24px); }
.home-network-roles button { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 0; color: rgba(248,243,233,.62); border: 0; border-radius: 0; background: transparent; font: 600 .78rem/1.35 var(--font-mono); letter-spacing: .045em; text-align: left; text-transform: uppercase; transition: color 160ms ease; }
.home-network-roles .cube-marker { width: 14px; height: 16px; opacity: .48; transition: opacity 160ms ease; }
.home-network-roles button:hover, .home-network-roles button:focus-visible, .home-network-roles button[aria-pressed="true"] { color: #f8f3e9; outline: none; }
.home-network-roles button:hover .cube-marker, .home-network-roles button:focus-visible .cube-marker, .home-network-roles button[aria-pressed="true"] .cube-marker { opacity: 1; }

/* Evidence and route systems */
.home-evidence, .home-routes, .home-news, .home-closing { padding: clamp(100px, 10vw, 160px) 0; }
.home-evidence { background: var(--z-surface-strong); }
.home-routes { background: var(--z-surface); }
.home-news { background: var(--z-surface-alt); }
.home-section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); align-items: end; margin-bottom: 70px; }
.home-section-head > div { grid-column: 1 / span 7; }
.home-section-head > p, .home-section-head > .zbc-text-link { grid-column: 9 / span 4; margin: 0; align-self: end; color: var(--z-muted); font-size: 1.08rem; }
.home-section-head h2, .home-closing h2 { margin: 0; font-size: clamp(3.4rem, 5vw, 6.5rem); font-weight: 500; line-height: .9; letter-spacing: -.067em; }
.home-metric-grid { display: grid; margin-bottom: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.home-metric-grid .metric { min-height: 280px; padding: 34px; border: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-radius: 0; background: #f8f3e9; transition: background 180ms ease, box-shadow 180ms ease; }
.home-metric-grid .metric:hover { background: #e7dfd3; box-shadow: inset 0 3px 0 var(--z-cyan); }
[data-theme="dark"] .home-metric-grid .metric { background: #151a21; }
[data-theme="dark"] .home-metric-grid .metric:hover { background: #0b1420; }
.home-metric-grid .metric-label { color: var(--z-muted); font: 600 .82rem/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.home-metric-grid .metric-value { margin-top: 64px; font-family: var(--font-sans); font-size: clamp(2.25rem, 4vw, 4.8rem); font-weight: 500; letter-spacing: -.06em; }
.home-metric-grid .metric-value a { color: var(--z-ink); }
.home-metric-grid .metric-value a:hover { color: var(--z-cyan); text-decoration: none; }
.home-metric-grid .metric-sub { margin-top: 28px; color: var(--z-muted); font: 500 .78rem/1.5 var(--font-mono); }
.home-metric-grid .pulse { display: inline-block; width: 12px; height: 14px; margin-right: 8px; border-radius: 0; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; animation: none; }
.home-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gutter); }
.home-route { position: relative; display: flex; min-height: 460px; padding: clamp(30px, 3vw, 48px); overflow: hidden; flex-direction: column; border: 1px solid var(--z-line); background: #f8f3e9; transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.home-route::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; opacity: 0; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); transition: opacity 180ms ease; }
[data-theme="dark"] .home-route { border-color: rgba(44,174,234,.22); background: #0b1420; }
[data-theme="dark"] .home-route p { color: #c5bcae; }
.home-route h3 { max-width: 12ch; margin: 72px 0 22px; font-size: clamp(2rem, 2.7vw, 3.25rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.home-route p { max-width: 35ch; margin: 0; color: var(--z-muted); font-size: 1.05rem; }
.home-route .zbc-text-link { margin-top: auto; }
@media (hover: hover) {
  .home-route:hover { background: #e7dfd3; box-shadow: var(--z-shadow); text-decoration: none; transform: translateY(-6px); }
  [data-theme="dark"] .home-route:hover { background: #070a10; }
  .home-route:hover::before { opacity: 1; }
}

/* Real update feed */
.home-news-list { border-top: 1px solid var(--z-line); }
.home-news-item { display: grid; align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); padding: 34px 0; border-bottom: 1px solid var(--z-line); }
.home-news-item time { grid-column: 1 / span 2; color: var(--z-muted); font: 600 .82rem/1.5 var(--font-mono); text-transform: uppercase; }
.home-news-item > div { grid-column: 3 / span 7; }
.home-news-item h3 { margin: 0 0 12px; font-size: clamp(1.75rem, 2.6vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.home-news-item p { margin: 0; color: var(--z-muted); font-size: 1rem; }
.home-news-item > .zbc-text-link { grid-column: 11 / span 2; justify-self: end; }
.home-empty { display: grid; max-width: 850px; padding-top: 35px; grid-template-columns: 30px 1fr; gap: 12px 22px; border-top: 1px solid var(--z-line); }
.home-empty .cube-marker { grid-row: 1 / span 2; }
.home-empty h3 { margin: 0; font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 500; letter-spacing: -.045em; }
.home-empty p { color: var(--z-muted); }

/* Closing image-backed call to action */
.home-closing { position: relative; overflow: hidden; color: #f8f3e9; background: #070a10; isolation: isolate; }
.home-closing-art { position: absolute; inset: 0; z-index: -2; background: url("/assets/images/foundation/silver-cubes.jpg") center / cover no-repeat; filter: grayscale(1) contrast(1.04); }
.home-closing::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(7,10,16,.97) 0 48%, rgba(7,10,16,.75) 76%, rgba(7,10,16,.64)); }
.home-closing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.home-closing-grid > div:first-child { grid-column: 1 / span 7; }
.home-closing h2 { color: #f8f3e9; }
.home-closing-copy { grid-column: 9 / span 4; align-self: end; }
.home-closing-copy p { margin: 0; color: #c4c8c9; font-size: 1.08rem; }
.home-closing .zbc-button-primary { color: #070a10; background: #f8f3e9; border-color: #f8f3e9; }
.home-closing .zbc-button-secondary { color: #f8f3e9; border-color: rgba(248,243,233,.62); }

/* Footer */
.site-footer { margin-top: 0; padding: clamp(48px, 5vw, 72px) 0 32px; color: var(--z-ink); border-top: 0; background: var(--z-surface); }
.site-footer .wrap { width: var(--z-shell); max-width: none; padding: 0; }
.footer-brand { margin-bottom: 62px; }
.footer-brand .zbcf-logo-mark { width: 29px; height: 35px; }
.footer-brand > div > div:first-child { font-family: var(--font-sans) !important; font-size: 1.3rem !important; font-weight: 600; letter-spacing: -.03em; }
.footer-grid { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: var(--z-gutter); padding-top: 36px; border-top: 1px solid var(--z-line); }
.footer-col h5 { margin-bottom: 22px; font: 600 .82rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.footer-col li, .footer-col p { font-size: .98rem; }
.footer-col a { color: var(--z-muted); }
.footer-col a:hover { color: var(--z-cyan); }
.footer-col .footer-giveaway-button { position: relative; display: grid; min-height: 94px; margin: 30px 0 0; padding: 15px; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; overflow: hidden; color: var(--z-ink); border: 1px solid var(--z-line); background: var(--z-surface-alt); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.footer-giveaway-button::before { position: absolute; inset: 0 0 auto; height: 2px; content: ""; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); }
.footer-giveaway-button .cube-marker { width: 16px; height: 18px; }
.footer-giveaway-button strong, .footer-giveaway-button small { display: block; }
.footer-giveaway-button strong { font-size: .9rem; line-height: 1.2; }
.footer-giveaway-button small { margin-top: 7px; color: var(--z-muted); font: 500 .7rem/1.35 var(--font-mono); }
@media (hover: hover) {
  .footer-col .footer-giveaway-button:hover { color: var(--z-ink); border-color: var(--z-cyan); background: var(--z-surface); box-shadow: var(--z-shadow); text-decoration: none; transform: translateY(-4px); }
}
.footer-bottom { margin-top: 64px; padding-top: 25px; color: var(--z-muted); border-top-color: var(--z-line); font: 500 .78rem/1.5 var(--font-mono); }
.network-state { display: inline-flex; align-items: center; gap: 9px; }
.network-state .cube-marker { width: 12px; height: 14px; }
/* "Social Media Disclaimer" in the footer: a <button> (it opens a dialog, it
   does not navigate) drawn as an inline link in the copyright line. */
.footer-disclaimer-link { display: inline; margin-left: .9em; padding: 0; color: inherit; border: 0; border-radius: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.footer-disclaimer-link:hover, .footer-disclaimer-link:focus-visible { color: var(--z-ink); }

/* Legal-text variant of the notice dialog: a readable heading instead of the
   poster-size one, numbered section headings, and the updated-on line as the
   mono label below the title. */
.global-notice-dialog-legal h2 { max-width: none; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; }
.global-notice-dialog-legal h2 + .global-notice-dialog-label { margin: 16px 0 0; }
.global-notice-dialog-legal .global-notice-dialog-copy { max-width: 64ch; margin-top: 28px; font-size: clamp(.98rem, 1.05vw, 1.05rem); line-height: 1.6; }
.global-notice-dialog-legal .global-notice-dialog-copy h3 { margin: 26px 0 0; color: var(--z-ink); font-size: 1.05em; font-weight: 600; letter-spacing: -.01em; }
.global-notice-dialog-legal .global-notice-dialog-copy h3 + p { margin-top: 10px; }
.global-notice-dialog-legal .global-notice-dialog-copy a { color: var(--z-ink); text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 1180px) {
  /* Column spans are no longer needed — the base rule's auto | 1fr | auto
     already sizes to content at every width. Only the nav's own density
     changes here. */
  .site-nav a { padding-inline: 6px; font-size: .67rem; }
  .home-hero-folio { grid-column: 1 / span 8; }
  .home-hero-path { grid-column: 9 / span 4; }
}

@media (max-width: 900px) {
  .home-giveaway-bar-grid { min-height: 250px; padding: 36px 0; align-items: start; }
  .home-giveaway-bar-grid > .home-bar-tile { grid-column: 1; }
  .home-giveaway-bar-copy { grid-column: 2 / span 6; }
  .home-giveaway-bar-note { grid-column: 8 / span 5; }
  .home-giveaway-bar-facts { grid-column: 2 / span 6; }
  .home-giveaway-bar-actions { grid-column: 8 / span 5; align-self: end; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 900px) {
  :root, [data-theme="light"], [data-theme="dark"] { --z-shell: calc(100% - 40px); }
  .site-header-inner { position: relative; grid-template-columns: 1fr auto auto; }
  .site-brand { grid-column: 1; }
  .nav-toggle { display: inline-flex; grid-column: 3; }
  .header-tools { grid-column: 2; grid-row: 1; }
  .header-tools .btn { display: none; }
  /* See the `top: 100%` / max-height comment on `.site-header .site-nav` above (same
     header height at this breakpoint — .site-header-inner min-height is still 92px
     until the 720px breakpoint below). */
  .site-nav { position: absolute; top: 100%; right: -20px; left: -20px; z-index: 60; display: none; max-height: calc(100svh - var(--z-header-h) - var(--z-notice-h)); padding: 0 20px 28px; grid-column: auto; flex-direction: column; align-items: stretch; overflow-y: auto; background: var(--z-surface); border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); box-shadow: var(--z-shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav a { display: flex; min-height: 58px; align-items: center; padding: 0; border-bottom: 1px solid var(--z-line); font-size: .86rem; }
  .site-nav a:hover, .site-nav a.is-active { text-decoration: none; }
  .site-nav .mobile-nav-cta { display: flex !important; min-height: 56px; justify-content: center; margin-top: 24px; color: var(--z-button-text); border: 1px solid var(--z-button); background: var(--z-button); }
  .site-nav .mobile-nav-cta:hover { color: #070a10; border-color: #7ce1ff; background: #7ce1ff; }
  .home-hero-grid { align-content: end; }
  .home-hero-folio { grid-column: 1 / span 9; }
  .home-hero-path { grid-column: 9 / span 4; padding: 24px; }
  .home-split, .home-split-reverse { min-height: auto; grid-template-columns: 1fr 1fr; }
  .home-split-copy-inner, .home-split-reverse .home-split-copy-inner { margin: 0; padding: 80px 40px; }
  .home-copy-columns { grid-template-columns: 1fr; }
  .home-network-head > div { grid-column: 1 / span 8; }
  .home-network-head > p { grid-column: 9 / span 4; }
  .home-network-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-metric-grid, .home-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-route:last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* Narrow-width units. .global-notice-alert's own compaction query is
     `max-width: 719px`, 1px narrower than this 720px header breakpoint — a
     pre-existing mismatch between the two components, immaterial at 1px of
     viewport width. Solid: min-height 34px + 1px outer border = 35px. The
     TestNet bar keeps its 35px single-line unit (it has no compaction query;
     it wraps instead — see the :root caveat). Header drops to 82px, matching
     .site-header-inner below. --z-notice-h and --z-chrome-h are not restated:
     they are calc()s over these units and recompute on their own. */
  :root, [data-theme="light"], [data-theme="dark"] { --z-notice-info-unit: 76px; --z-header-h: 82px; }
  .site-cta { display: none; }
  .site-header-inner { display: flex; min-height: 82px; align-items: center; gap: 10px; }
  .site-brand { flex: 0 1 auto; margin-right: auto; }
  .header-tools { display: flex; flex: 0 0 auto; order: 2; }
  .nav-toggle { flex: 0 0 46px; order: 3; }
  /* Header shrinks to 82px at this breakpoint (.site-header-inner min-height above);
     same `top: 100%` reasoning as the two wider .site-nav rules above. The
     notice-bar allowance is now --z-notice-h (see :root override above)
     instead of a hand-estimated px literal. */
  .site-nav { top: 100%; max-height: calc(100svh - var(--z-header-h) - var(--z-notice-h)); }
  .home-hero { min-height: auto; padding-top: min(52svh, 70vw); }
  .home-hero-media { inset: 0 0 auto; height: min(52svh, 70vw); }
  .home-hero-media iframe { transform: translate(-50%, -50%) scale(1.12); }
  .home-hero-wash { inset: 0 0 auto; height: min(52svh, 70vw); background: linear-gradient(90deg, rgba(242,238,230,.18), rgba(242,238,230,0)); }
  [data-theme="dark"] .home-hero-wash { background: linear-gradient(90deg, rgba(7,10,16,.2), rgba(7,10,16,0)); }
  .home-hero-grid { display: block; width: 100%; min-height: 0; padding: 0; }
  .home-hero-folio { padding: 52px 20px; border-width: 1px 0; box-shadow: none; }
  .home-hero h1 { font-size: clamp(2.05rem, 10.5vw, 4.6rem); line-height: .91; letter-spacing: -.06em; }
  .home-hero-path { margin: 0 20px 48px; box-shadow: none; }
  .home-horizon { bottom: 0; }
  .home-giveaway-bar-grid { display: block; min-height: 0; padding: 54px 0; }
  .home-giveaway-bar-grid > .home-bar-tile { max-width: 140px; margin-bottom: 26px; }
  .home-giveaway-bar-copy h2 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .home-giveaway-bar-note { margin-top: 28px; }
  .home-giveaway-bar-facts { margin-top: 34px; }
  .home-giveaway-bar-actions { display: grid; gap: 10px; margin-top: 30px; }
  .home-giveaway-bar-actions .zbc-button { width: 100%; }
  .home-split, .home-split-reverse { display: flex; flex-direction: column; }
  .home-split-reverse { flex-direction: column-reverse; }
  .home-split-copy-inner, .home-split-reverse .home-split-copy-inner { padding: 82px 20px; }
  .home-split h2 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .home-split-media { height: 72svh; min-height: 560px; }
  .home-copy-columns { margin-top: 42px; }
  .home-network-head { display: block; padding: 82px 0 48px; }
  .home-network-head > p { margin-top: 30px; }
  .home-network h2 { font-size: clamp(3.1rem, 14vw, 4.8rem); }
  .home-network-stage { height: 68svh; min-height: 560px; }
  .home-network-hud { inset: 20px 20px auto; align-items: flex-start; flex-direction: column; gap: 6px; }
  .home-network-event { right: 20px; bottom: 88px; left: 20px; width: auto; }
  .home-network-motion { bottom: 22px; left: 20px; }
  .home-network-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 0 40px; }
  .home-section-head { display: block; margin-bottom: 50px; }
  .home-section-head > p, .home-section-head > .zbc-text-link { margin-top: 30px; }
  .home-section-head h2, .home-closing h2 { font-size: clamp(3.1rem, 14vw, 4.8rem); }
  .home-metric-grid, .home-route-grid { grid-template-columns: 1fr; }
  .home-route:last-child { grid-column: auto; }
  .home-route { min-height: 390px; }
  .home-news-item { display: block; }
  .home-news-item > div { margin: 24px 0; }
  .home-news-item > .zbc-text-link { justify-self: auto; }
  .home-closing-grid { display: block; }
  .home-closing-copy { margin-top: 52px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-media { display: none; }
  .home-hero { background: var(--z-surface-strong); }
  .home-network-stage { cursor: default; }
  .footer-col .footer-giveaway-button { transition: none; }
  .footer-col .footer-giveaway-button:hover { transform: none; }
}

/* People page */
.people-hero { position: relative; min-height: calc(100svh - 92px); overflow: hidden; background: var(--z-surface-alt); isolation: isolate; }
.people-hero-art { position: absolute; inset: 0 0 0 58%; z-index: 0; background: url("/assets/images/foundation/silver-cubes.jpg") center / cover no-repeat; filter: grayscale(1) contrast(1.02); }
.people-hero::after { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: linear-gradient(90deg, var(--z-surface-alt) 0 54%, rgba(231,223,211,.86) 68%, rgba(231,223,211,.08)); }
[data-theme="dark"] .people-hero::after { background: linear-gradient(90deg, var(--z-surface-alt) 0 54%, rgba(21,26,33,.88) 68%, rgba(21,26,33,.12)); }
.people-hero-grid { position: relative; z-index: 2; display: grid; min-height: calc(100svh - 92px); align-items: center; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); padding: clamp(95px, 9vw, 150px) 0; }
.people-hero-copy { grid-column: 1 / span 7; }
.people-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(4.2rem, 6.7vw, 8rem); font-weight: 500; line-height: .87; letter-spacing: -.075em; }
.people-hero h1 span, .people-section-head h2 span, .people-invitation h2 span { display: block; }
.people-hero-lead { max-width: 62ch; margin: 42px 0 0; color: var(--z-muted); font-size: clamp(1.12rem, 1.35vw, 1.38rem); line-height: 1.62; }
.people-hero-status { grid-column: 10 / span 3; align-self: end; margin-bottom: 12px; padding: 0 20px; border-top: 2px solid var(--z-ink); background: color-mix(in srgb, var(--z-surface-alt) 88%, transparent); }
.people-hero-status > div { display: grid; padding: 27px 0; grid-template-columns: 26px 1fr; gap: 6px 14px; border-bottom: 1px solid var(--z-line); }
.people-hero-status .cube-marker { grid-row: 1 / span 2; margin-top: 3px; }
.people-hero-status strong { font-size: 1.05rem; font-weight: 600; }
.people-hero-status small { color: var(--z-muted); font: 500 .8rem/1.45 var(--font-mono); }

.people-founders, .people-paths, .people-invitation { padding: clamp(100px, 10vw, 160px) 0; }
.people-founders { background: var(--z-surface); }
.people-paths { background: var(--z-surface-strong); }
.people-section-head { display: grid; align-items: end; margin-bottom: 72px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.people-section-head > div { grid-column: 1 / span 7; }
.people-section-head > p { grid-column: 9 / span 4; margin: 0; color: var(--z-muted); font-size: 1.08rem; line-height: 1.65; }
.people-section-head h2, .people-invitation h2 { margin: 0; font-size: clamp(3.4rem, 5.2vw, 6.7rem); font-weight: 500; line-height: .9; letter-spacing: -.068em; }

.people-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gutter); }
.people-card { position: relative; display: flex; min-width: 0; flex-direction: column; color: var(--z-ink); border: 1px solid var(--z-line); background: rgba(255,255,255,.18); transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.people-card::before { position: absolute; inset: 0 0 auto; z-index: 3; height: 3px; content: ""; background: linear-gradient(90deg, var(--z-cyan), var(--z-magenta)); transform: scaleX(.12); transform-origin: left; transition: transform 200ms ease; }
.people-card-image { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-bottom: 1px solid var(--z-line); background: var(--z-surface-alt); }
.people-card-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 28%; filter: saturate(.65) contrast(.97); transition: filter 260ms ease, transform 420ms cubic-bezier(.22,.72,.2,1); }
.people-card-image figcaption { position: absolute; right: 0; bottom: 0; padding: 9px 12px; color: #f8f3e9; background: rgba(7,10,16,.88); font: 600 .72rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.people-card-copy { display: flex; min-height: 390px; padding: clamp(28px, 2.7vw, 42px); flex-direction: column; }
.people-card-meta { display: flex; align-items: center; gap: 11px; color: var(--z-muted); font: 600 .8rem/1.4 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.people-card-meta .cube-marker { width: 14px; height: 16px; }
.people-card h3 { max-width: 14ch; margin: 54px 0 12px; font-size: clamp(2rem, 2.8vw, 3.25rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.people-card-title { min-height: 3.2em; margin: 0 0 23px; color: var(--z-ink); font: 600 .86rem/1.6 var(--font-mono); letter-spacing: .025em; text-transform: uppercase; }
.people-card-description { margin: 0 0 34px; color: var(--z-muted); font-size: 1rem; line-height: 1.65; }
.people-card .zbc-text-link { margin-top: auto; }
@media (hover: hover) {
  .people-card:hover { z-index: 2; background: var(--z-surface); box-shadow: var(--z-shadow); text-decoration: none; transform: translateY(-7px); }
  .people-card:hover::before { transform: scaleX(1); }
  .people-card:hover .people-card-image img { filter: saturate(.82) contrast(1); transform: scale(1.025); }
}

.people-path-list { border-top: 1px solid var(--z-line); }
.people-path-row { display: grid; align-items: center; min-height: 142px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); border-bottom: 1px solid var(--z-line); transition: background 180ms ease; }
.people-path-row > .cube-marker { grid-column: 1; }
.people-path-row h3 { grid-column: 2 / span 3; margin: 0; font-size: clamp(1.65rem, 2.4vw, 2.9rem); font-weight: 500; letter-spacing: -.045em; }
.people-path-row p { grid-column: 5 / span 4; margin: 0; color: var(--z-muted); font-size: 1rem; }
.people-path-count { grid-column: 9 / span 2; color: var(--z-muted); font: 500 .8rem/1.5 var(--font-mono); text-transform: uppercase; }
.people-path-row > .zbc-text-link { grid-column: 11 / span 2; justify-self: end; }
.people-path-row:hover { color: var(--z-ink); background: rgba(255,255,255,.16); text-decoration: none; }

.people-invitation { position: relative; overflow: hidden; color: #f8f3e9; background: #070a10; isolation: isolate; }
.people-invitation-image { position: absolute; inset: 0; z-index: -2; background: url("/assets/images/people/contributors.jpg") center 30% / cover no-repeat; filter: grayscale(1); }
.people-invitation::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(7,10,16,.98) 0 54%, rgba(7,10,16,.82) 78%, rgba(7,10,16,.62)); }
.people-invitation-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.people-invitation-grid > div:first-child { grid-column: 1 / span 7; }
.people-invitation h2 { color: #f8f3e9; }
.people-invitation-copy { grid-column: 9 / span 4; align-self: end; }
.people-invitation-copy > p { margin: 0; color: #c4c8c9; font-size: 1.08rem; line-height: 1.65; }
.people-invitation .zbc-button-primary { color: #070a10; background: #f8f3e9; border-color: #f8f3e9; }
.people-invitation .zbc-text-link { color: #f8f3e9; }

@media (max-width: 1120px) {
  .people-hero-copy { grid-column: 1 / span 8; }
  .people-hero-status { grid-column: 9 / span 4; }
  .people-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-path-row p { grid-column: 5 / span 5; }
  .people-path-count { display: none; }
}

@media (max-width: 720px) {
  .people-hero { min-height: auto; padding-top: 54svh; }
  .people-hero-art { inset: 0 0 auto; height: 54svh; }
  .people-hero::after { background: linear-gradient(180deg, transparent 0 42%, var(--z-surface-alt) 54%); }
  [data-theme="dark"] .people-hero::after { background: linear-gradient(180deg, transparent 0 42%, var(--z-surface-alt) 54%); }
  .people-hero-grid { display: block; width: 100%; min-height: 0; padding: 0; }
  .people-hero-copy { padding: 70px 20px 48px; }
  .people-hero h1 { font-size: clamp(2.55rem, 10.25vw, 4rem); line-height: .94; letter-spacing: -.05em; }
  .people-hero-status { margin: 0 20px 70px; }
  .people-section-head { display: block; margin-bottom: 50px; }
  .people-section-head > p { margin-top: 30px; }
  .people-section-head h2, .people-invitation h2 { font-size: clamp(3rem, 13.5vw, 4.6rem); }
  .people-card-grid { grid-template-columns: 1fr; }
  .people-card-copy { min-height: 360px; }
  .people-path-row { display: grid; padding: 30px 0; grid-template-columns: 26px 1fr; gap: 10px 14px; }
  .people-path-row > .cube-marker { grid-column: 1; grid-row: 1 / span 3; }
  .people-path-row h3, .people-path-row p, .people-path-row > .zbc-text-link { grid-column: 2; justify-self: start; }
  .people-path-row p { margin: 8px 0 14px; }
  .people-invitation-grid { display: block; }
  .people-invitation-copy { margin-top: 48px; }
}

/* About and mandate page */
.about-hero { background: var(--z-surface-alt); }
.about-hero-grid { display: grid; min-height: calc(100svh - 92px); align-items: end; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); padding: clamp(100px, 10vw, 160px) 0; }
.about-hero-copy { grid-column: 1 / span 8; min-width: 0; }
.about-hero h1 { margin: 0; font-size: clamp(4.4rem, 7vw, 8.5rem); font-weight: 500; line-height: .87; letter-spacing: -.077em; }
.about-hero h1 span, .about-mandate h2 span, .about-section-head h2 span, .about-independence h2 span, .about-closing h2 span { display: block; }
.about-hero h1 .quiet { color: #6e777b; }
[data-theme="dark"] .about-hero h1 .quiet { color: #979d9e; }
.about-hero-note { grid-column: 9 / span 4; align-self: end; padding: 34px 0 4px; border-top: 2px solid var(--z-ink); }
.about-hero-note .cube-marker { margin-bottom: 34px; }
.about-hero-note p { max-width: 32ch; margin: 0 0 34px; color: var(--z-muted); font-size: clamp(1.08rem, 1.3vw, 1.32rem); line-height: 1.62; }

.about-mandate { padding: clamp(110px, 11vw, 180px) 0; background: var(--z-surface); }
.about-mandate-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.about-mandate-title { grid-column: 1 / span 7; }
.about-mandate h2 { max-width: 13ch; margin: 0; font-size: clamp(3.5rem, 5.4vw, 7rem); font-weight: 500; line-height: .9; letter-spacing: -.07em; }
.about-mandate-copy { grid-column: 9 / span 4; align-self: end; padding-top: 38px; border-top: 1px solid var(--z-line); }
.about-mandate-copy p { margin: 0; color: var(--z-muted); font-size: clamp(1.08rem, 1.25vw, 1.3rem); line-height: 1.67; }
.about-mandate-copy p + p { margin-top: 28px; }

.about-boundaries, .about-separation, .about-governance, .about-status, .about-closing { padding: clamp(100px, 10vw, 160px) 0; }
.about-boundaries { color: #f8f3e9; background: #0b1420; }
.about-boundaries .zbc-kicker { color: #55c9f7; }
.about-boundaries h2, .about-boundaries h3 { color: #f8f3e9; }
.about-boundaries .about-section-head > p { color: #bdc2c4; }
.about-section-head { display: grid; align-items: end; margin-bottom: clamp(54px, 6vw, 84px); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.about-section-head > div { grid-column: 1 / span 8; }
.about-section-head > p { grid-column: 9 / span 4; max-width: 34ch; margin: 0; color: var(--z-muted); font-size: 1.08rem; line-height: 1.65; }
.about-section-head h2, .about-closing h2 { margin: 0; font-size: clamp(3.35rem, 5.1vw, 6.6rem); font-weight: 500; line-height: .9; letter-spacing: -.068em; }
.about-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(248,243,233,.26); border-left: 1px solid rgba(248,243,233,.26); }
.about-boundary { min-height: 610px; padding: clamp(36px, 4.5vw, 70px); border-right: 1px solid rgba(248,243,233,.26); border-bottom: 1px solid rgba(248,243,233,.26); }
.about-boundary h3 { margin: 0 0 72px; font-size: clamp(2.3rem, 3.8vw, 4.8rem); font-weight: 500; letter-spacing: -.06em; }
.about-boundary ul { margin: 0; padding: 0; list-style: none; }
.about-boundary li { display: grid; min-height: 68px; align-items: center; grid-template-columns: 24px 1fr; gap: 18px; color: #d2d5d5; border-top: 1px solid rgba(248,243,233,.18); font-size: clamp(1.02rem, 1.18vw, 1.2rem); }
.about-boundary li .cube-marker { width: 14px; height: 16px; }
.about-boundary-not .cube-marker { opacity: .52; filter: grayscale(1); }

.about-separation { background: var(--z-surface-strong); }
.about-separation-list { border-top: 2px solid var(--z-ink); }
.about-separation-row { display: grid; min-height: 156px; align-items: center; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); border-bottom: 1px solid var(--z-line); }
.about-separation-row > .cube-marker { grid-column: 1; }
.about-separation-row h3 { grid-column: 2 / span 4; margin: 0; font-size: clamp(1.75rem, 2.7vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.about-separation-row p { grid-column: 7 / span 5; margin: 0; color: var(--z-muted); font-size: clamp(1.05rem, 1.2vw, 1.22rem); }

.about-independence { display: grid; min-height: 900px; grid-template-columns: 5fr 7fr; background: var(--z-surface-alt); }
.about-independence-media { min-width: 0; min-height: 100%; margin: 0; overflow: hidden; }
.about-independence-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.03); }
.about-independence-copy { display: flex; min-width: 0; align-items: center; }
.about-independence-inner { width: min(100%, 920px); margin-right: max(40px, calc((100vw - min(1480px, calc(100vw - 80px))) / 2)); padding: clamp(95px, 9vw, 150px) 0 clamp(95px, 9vw, 150px) clamp(48px, 7vw, 115px); }
.about-independence h2 { max-width: 11ch; margin: 0 0 50px; font-size: clamp(3.5rem, 5.2vw, 6.8rem); font-weight: 500; line-height: .89; letter-spacing: -.07em; }
.about-independence-inner > p:not(.zbc-kicker) { max-width: 61ch; margin: 0; color: var(--z-muted); font-size: 1.08rem; line-height: 1.7; }
.about-independence-inner > p + p { margin-top: 25px; }

.about-governance { background: var(--z-surface); }
.about-governance-grid { display: grid; margin-bottom: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line); }
.about-governance-grid article { min-height: 520px; padding: clamp(36px, 4vw, 64px); border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.about-governance-label { margin: 34px 0 72px; color: var(--z-cyan); font: 600 .86rem/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.about-governance-grid h3 { max-width: 13ch; margin: 0 0 28px; font-size: clamp(2.2rem, 3.5vw, 4.4rem); font-weight: 500; line-height: .96; letter-spacing: -.06em; }
.about-governance-grid article > p:last-child { max-width: 49ch; margin: 0; color: var(--z-muted); font-size: 1.05rem; line-height: 1.66; }

.about-status { background: var(--z-surface-alt); }
.about-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gutter); }
.about-status-grid article { display: flex; min-height: 460px; padding: clamp(32px, 3.5vw, 52px); flex-direction: column; border: 1px solid var(--z-line); background: var(--z-surface); transition: box-shadow 180ms ease, transform 180ms ease; }
.about-status-grid h3 { margin: 72px 0 24px; font-size: clamp(2rem, 2.8vw, 3.4rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.about-status-grid p { margin: 0; color: var(--z-muted); font-size: 1.02rem; line-height: 1.66; }
.about-status-grid .zbc-text-link { margin-top: auto; }
@media (hover: hover) { .about-status-grid article:hover { box-shadow: var(--z-shadow); transform: translateY(-6px); } }

.about-closing { color: #f8f3e9; background: #070a10; }
.about-closing .zbc-kicker { color: #55c9f7; }
.about-closing h2 { color: #f8f3e9; }
.about-closing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.about-closing-grid > div:first-child { grid-column: 1 / span 7; }
.about-closing-copy { grid-column: 9 / span 4; align-self: end; }
.about-closing-copy > p { margin: 0; color: #bdc2c4; font-size: 1.08rem; }
.about-closing .zbc-button-primary { color: #070a10; border-color: #f8f3e9; background: #f8f3e9; }
.about-closing .zbc-button-secondary { color: #f8f3e9; border-color: rgba(248,243,233,.65); }
.about-closing .zbc-button-secondary:hover { color: #070a10; background: #f8f3e9; }

@media (max-width: 900px) {
  .about-hero-copy { grid-column: 1 / -1; }
  .about-hero-note { grid-column: 7 / -1; margin-top: 60px; }
  .about-mandate-title { grid-column: 1 / span 8; }
  .about-separation-row p { grid-column: 7 / span 6; }
  .about-independence { grid-template-columns: 1fr 1fr; }
  .about-independence-inner { margin: 0; padding: 80px 40px; }
  .about-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-status-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .about-hero-grid { display: block; min-height: auto; padding: 86px 0 76px; }
  .about-hero h1 { font-size: clamp(2.05rem, 10.5vw, 4.5rem); line-height: .91; letter-spacing: -.06em; }
  .about-hero-note { margin-top: 60px; }
  .about-mandate-grid, .about-section-head, .about-closing-grid { display: block; }
  .about-mandate h2, .about-section-head h2, .about-independence h2, .about-closing h2 { font-size: clamp(3rem, 13.8vw, 4.7rem); }
  .about-mandate-copy, .about-section-head > p, .about-closing-copy { margin-top: 46px; }
  .about-boundary-grid, .about-governance-grid, .about-status-grid { grid-template-columns: 1fr; }
  .about-boundary { min-height: auto; padding: 44px 24px; }
  .about-boundary h3 { margin-bottom: 45px; }
  .about-boundary li { min-height: 74px; }
  .about-separation-row { padding: 34px 0; grid-template-columns: 26px 1fr; gap: 10px 14px; }
  .about-separation-row > .cube-marker { grid-column: 1; grid-row: 1 / span 2; }
  .about-separation-row h3, .about-separation-row p { grid-column: 2; }
  .about-separation-row p { margin-top: 8px; }
  .about-independence { display: flex; min-height: 0; flex-direction: column; }
  .about-independence-media { height: 70svh; min-height: 520px; }
  .about-independence-inner { padding: 82px 20px; }
  .about-governance-grid article { min-height: auto; padding: 42px 24px 52px; }
  .about-governance-label { margin-bottom: 46px; }
  .about-status-grid article, .about-status-grid article:last-child { min-height: 400px; grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .about-status-grid article { transition: none; }
}

/* Source-live page translation layer
 *
 * Remaining public pages retain their captured semantic markup and body copy.
 * These rules translate those existing components into the same locked ZooBC
 * Foundation system used by the redesigned home, people, and about pages.
 */
.page-title { padding: clamp(90px, 9vw, 150px) 0 clamp(70px, 7vw, 110px); border-color: var(--z-line); background: var(--z-surface); }
.page-title .eyebrow, .breadcrumb { color: var(--z-cyan); font: 600 var(--fs-xs)/1.4 var(--font-mono); }
.page-title h1 { max-width: 15ch; margin: 0 0 var(--sp-5); font-size: clamp(3.4rem, 5vw, 6.5rem); font-weight: 500; line-height: .92; letter-spacing: -.065em; }
.page-title .lead { max-width: 62ch; color: var(--z-muted); font-size: clamp(var(--fs-lg), 1.35vw, 1.38rem); line-height: 1.62; }
.section, .section-lg { padding: clamp(90px, 9vw, 150px) 0; }
.section-sm { padding: clamp(54px, 6vw, 84px) 0; }
.section:nth-of-type(even) { background: var(--z-surface-alt); }
.section h2, .section-lg h2 { font-size: clamp(2.3rem, 3.8vw, 4.8rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.section h3, .section-lg h3 { font-size: clamp(1.55rem, 2.2vw, 2.7rem); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.wrap, .wrap-narrow { width: var(--z-shell); max-width: none; padding-inline: 0; }
.wrap-narrow { max-width: none; }
.wrap-narrow > .prose { max-width: 68ch; }

.card, .metric, .notice, .person-card, .empty, input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], textarea, select { border-radius: 0; }
.card, .metric, .notice, .person-card, .empty { border-color: var(--z-line); background: color-mix(in srgb, var(--z-surface) 72%, transparent); }
.card-hover:hover, .person-card:hover { border-color: var(--z-line); box-shadow: var(--z-shadow); transform: translateY(-6px); }
.card-title { font-size: var(--fs-xl); }
.card-body, .notice-body, .card-footer { color: var(--z-muted); font-size: var(--fs-md); }
.card-eyebrow, .metric-label, .metric-sub, .form-field .hint, .breadcrumb { font-size: var(--fs-xs); }
.card-numbered { padding-left: var(--sp-7); }
.card-numbered::before { width: 18px; height: 21px; content: ""; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }

.metric { min-height: 190px; padding: var(--sp-6); }
.metric-value { margin-top: var(--sp-5); font-family: var(--font-sans); font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; }
.pulse { width: 12px; height: 14px; border-radius: 0; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); box-shadow: none; animation: none; -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.pulse.stale { background: var(--z-taupe); }
.pill { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--z-ink); border: 1px solid var(--z-line); border-radius: 0; background: transparent; font-size: var(--fs-xs); }
.pill::before { width: 12px; height: 14px; content: ""; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.pill .pulse { display: none; }
.pill-accent, .pill-amber, .pill-live, .pill-testnet { color: var(--z-ink); border-color: var(--z-line); background: transparent; }

.btn { min-height: 54px; padding: 0 23px; border-radius: 0; font: 600 .85rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.btn-primary { color: var(--z-button-text); border-color: var(--z-button); background: var(--z-button); }
.btn-primary:hover { color: #070a10; border-color: #7ce1ff; background: #7ce1ff; box-shadow: none; }
.btn-secondary, .btn-ghost { color: var(--z-ink); border-color: var(--z-line); background: transparent; }
.btn-secondary:hover, .btn-ghost:hover { color: var(--z-ink); border-color: var(--z-cyan); background: var(--z-surface-alt); }
.btn-sm { min-height: 46px; padding-inline: 16px; font-size: var(--fs-xs); }
.btn-lg { min-height: 60px; padding-inline: var(--sp-6); font-size: var(--fs-sm); }

.prose { max-width: 68ch; color: var(--z-ink); font-family: var(--font-sans); font-size: var(--fs-lg); line-height: 1.75; }
.prose h2 { font-size: clamp(2.3rem, 3.8vw, 4.8rem); }
.prose h3 { font-size: clamp(1.55rem, 2.2vw, 2.7rem); }
.table-scroll { border-top: 1px solid var(--z-line); }
table { font-size: var(--fs-md); }
th { font-size: var(--fs-sm); }

@media (max-width: 720px) {
  .page-title { padding: 76px 0 68px; }
  .page-title h1 { max-width: none; font-size: clamp(2.55rem, 11vw, 4rem); line-height: .96; letter-spacing: -.052em; }
  .section, .section-lg { padding: 82px 0; }
  .grid-metric { grid-template-columns: 1fr; }
  .metric { min-height: 160px; }
}

/* Shared page-family alignment */
.grid { gap: var(--z-gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-metric { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section > .wrap > h2, .section > .wrap-narrow > h2, .section-lg > .wrap > h2 { max-width: 15ch; }
.section .lead { max-width: 62ch; color: var(--z-muted); font-size: var(--fs-lg); line-height: 1.65; }
.section .card { padding: var(--sp-6); }
.section .grid-3 > .card, .section .grid-4 > .card { min-height: 250px; }
.section .card > h3:first-child, .section .card > h4:first-child { margin-top: var(--sp-6) !important; font-size: var(--fs-xl) !important; line-height: 1.08; letter-spacing: -.035em; }
.section .card > .card-eyebrow + h2, .section .card > .card-eyebrow + h3 { margin-top: var(--sp-6); }
.notice { position: relative; align-items: flex-start; padding: var(--sp-6); border-left-width: 1px; }
.notice::before { width: 18px; height: 21px; flex: 0 0 auto; content: ""; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.notice-accent { border-top: 3px solid var(--z-cyan); }
.notice-amber, .notice-red { border-top: 3px solid var(--z-magenta); }
.notice-title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }

.empty { display: grid; min-height: 360px; align-content: center; justify-items: start; padding: clamp(32px, 4vw, 64px); text-align: left; border-style: solid; }
.empty-icon { width: 36px; height: 42px; margin-bottom: var(--sp-6); border: 0; border-radius: 0; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.empty-icon svg { display: none; }
.empty h3 { margin-bottom: var(--sp-3); font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 500; letter-spacing: -.045em; }
.empty p { max-width: 58ch; margin: 0; font-size: var(--fs-md); }

.role-seat { min-height: 360px; padding: clamp(32px, 4vw, 60px); border-radius: 0; border-color: var(--z-line); background: color-mix(in srgb, var(--z-surface) 72%, transparent); transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.role-seat:hover { color: var(--z-ink); border-color: var(--z-line); background: var(--z-surface); box-shadow: var(--z-shadow); text-decoration: none; transform: translateY(-6px); }
.role-seat .num { width: 26px; height: 30px; margin-bottom: var(--sp-7); overflow: hidden; color: transparent; font-size: 0; background: linear-gradient(145deg, var(--z-cyan), var(--z-magenta)); -webkit-mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; mask: url("/assets/icons/zoobc-cube-mark.svg") center / contain no-repeat; }
.role-seat .title { max-width: 16ch; margin-bottom: var(--sp-3); font-family: var(--font-sans); font-size: clamp(1.9rem, 2.8vw, 3.25rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.section .grid:has(> .role-seat) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.role-seat .title { text-wrap: balance; }
.role-seat .subtitle { color: var(--z-muted); font-size: var(--fs-md); line-height: 1.55; }
.role-seat .filled-by { padding-top: var(--sp-5); color: var(--z-muted); font-size: var(--fs-sm); }
.role-seat .filled-by .vacant { color: var(--z-muted); }
.role-seat .mini-avatar { width: 32px; height: 32px; border-radius: 0; color: var(--z-ink); background: var(--z-surface-alt); }
.role-seat .mini-avatar span { display: grid; height: 100%; place-items: center; }

.hero-actions { gap: var(--sp-4); }
pre { max-width: 100%; overflow-x: auto; border-radius: 0; font-size: var(--fs-sm); }
hr { border-color: var(--z-line); }

/* ============================================================================
   404 — a useful dead end
   ========================================================================== */
.error-404 {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--z-chrome-h));
  overflow: hidden;
  color: #f8f3e9;
  border-bottom: 1px solid var(--z-line);
  background: #070a10;
  isolation: isolate;
}

.error-404-media,
.error-404-shade {
  position: absolute;
  inset: 0;
}

.error-404-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.error-404-shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(7,10,16,.98) 0%, rgba(7,10,16,.9) 34%, rgba(7,10,16,.35) 64%, rgba(7,10,16,.08) 100%);
}

.error-404-inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - var(--z-chrome-h));
  padding-top: clamp(52px, 8vh, 96px);
  padding-bottom: clamp(52px, 8vh, 96px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}

.error-404-copy {
  grid-column: 1 / span 6;
  max-width: 760px;
}

/* The big number above the kicker, so nobody mistakes the page for content.
   Same colour as the kicker it sits on; the gap below it is wider than the
   kicker's own, so it reads as a mark over the copy, not a line of it. */
.error-404-code {
  margin: 0 0 clamp(26px, 3.4vh, 40px);
  color: var(--z-cyan);
  font-family: var(--font-sans);
  font-size: clamp(6rem, 10.8vw, 12.5rem);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.045em;
}

.error-404 .zbc-kicker {
  margin: 0 0 22px;
  color: var(--z-cyan);
}

.error-404 h1 {
  max-width: 10ch;
  margin: 0;
  color: #f8f3e9;
  font-size: clamp(4.5rem, 7.2vw, 8.4rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.075em;
}

.error-404-lede {
  max-width: 52ch;
  margin: 34px 0 0;
  color: rgba(248,243,233,.72);
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.58;
}

.error-404-actions {
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 12px;
}

.error-404-routes {
  display: flex;
  max-width: 680px;
  margin-top: 40px;
  padding-top: 20px;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-top: 1px solid rgba(248,243,233,.24);
  font: 600 .76rem/1.4 var(--font-mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.error-404-routes > span {
  color: rgba(248,243,233,.48);
}

.error-404-routes a {
  color: #f8f3e9;
}

.error-404-routes a:hover {
  color: var(--z-cyan);
  text-decoration: none;
}

@media (max-width: 900px) {
  .error-404-shade {
    background: linear-gradient(180deg, rgba(7,10,16,.08) 0%, rgba(7,10,16,.2) 28%, rgba(7,10,16,.86) 58%, #070a10 82%);
  }

  .error-404-inner {
    display: block;
    width: 100%;
    min-height: calc(100svh - var(--z-chrome-h));
    padding: min(30svh, 260px) 20px 48px;
  }

  .error-404-copy {
    max-width: 620px;
  }

  .error-404-code {
    margin-bottom: 22px;
    font-size: clamp(4.75rem, 24vw, 7.5rem);
  }

  .error-404 .zbc-kicker {
    margin-bottom: 16px;
  }

  .error-404 h1 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 11.5vw, 4.4rem);
    line-height: .9;
  }

  .error-404-lede {
    margin-top: 24px;
    font-size: 1rem;
  }

  .error-404-actions {
    margin-top: 26px;
  }

  .error-404-routes {
    margin-top: 30px;
    align-items: flex-start;
  }

  .error-404-routes > span {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .error-404-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .error-404-actions .zbc-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .grid-3, .grid-4, .grid-metric { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section .grid:has(> .role-seat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-metric { grid-template-columns: 1fr !important; }
  .section .grid:has(> .role-seat) { grid-template-columns: 1fr !important; }
  .section .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .section .card { padding: var(--sp-5); }
  .section .grid-3 > .card, .section .grid-4 > .card { min-height: 220px; }
  .role-seat { min-height: 320px; padding: var(--sp-5); }
  .empty { min-height: 320px; padding: var(--sp-5); }
  .row.row-between { align-items: flex-start; flex-direction: column; }
}

/* Brand assets reference */
.brand-assets-hero .brand-assets-actions { margin-top: var(--sp-6); }
.brand-assets-section-head { display: grid; align-items: end; margin-bottom: clamp(54px, 6vw, 84px); grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z-gutter); }
.brand-assets-section-head h2 { grid-column: 1 / span 7; max-width: 12ch; margin: 0; font-size: clamp(3.35rem, 5.1vw, 6.6rem); font-weight: 500; line-height: .9; letter-spacing: -.068em; }
.brand-assets-section-head > p { grid-column: 9 / span 4; max-width: 36ch; margin: 0; color: var(--z-muted); font-size: var(--fs-lg); line-height: 1.65; }

.brand-assets-marks { background: var(--z-surface-alt); }
.brand-mark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gutter); }
.brand-mark-card { display: flex; min-height: 520px; padding: clamp(32px, 4vw, 60px); flex-direction: column; justify-content: space-between; border: 1px solid var(--z-line); }
.brand-mark-card-dark { color: #f8f3e9; background: #070a10; }
.brand-mark-card-light { color: #070a10; background: #f8f3e9; }
.brand-mark-card-cube { color: #f8f3e9; background: #0b1420; }
.brand-mark-card-dark strong, .brand-mark-card-light strong, .brand-mark-card-cube strong { color: inherit; }
.brand-mark-card-cube > .cube-marker { width: 112px; height: 130px; }
.brand-lockup { display: flex; align-items: center; gap: var(--sp-5); }
.brand-lockup img { width: 76px; height: 88px; }
.brand-lockup > div { display: grid; gap: var(--sp-2); }
.brand-lockup strong { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 600; line-height: .9; letter-spacing: -.055em; }
.brand-lockup span { font: 500 var(--fs-sm)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.brand-card-meta { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid currentColor; }
.brand-card-meta strong { font-size: var(--fs-lg); }
.brand-card-meta span { font: 500 var(--fs-xs)/1.45 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.brand-download-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }

.brand-assets-colours { background: var(--z-surface); }
.brand-swatch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line); }
.brand-swatch { display: grid; min-height: 260px; padding: var(--sp-5); align-content: end; grid-template-columns: 1fr auto; gap: var(--sp-3); border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.brand-swatch > div { min-height: 120px; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5); grid-column: 1 / -1; border-bottom: 1px solid var(--z-line); }
.brand-swatch strong { font-size: var(--fs-lg); }
.brand-swatch code { color: var(--z-muted); font-size: var(--fs-sm); }
.brand-swatch-cyan > div { background: var(--z-cyan); }
.brand-swatch-magenta > div { background: var(--z-magenta); }
.brand-swatch-ink > div { background: #070a10; }
.brand-swatch-midnight > div { background: #0b1420; }
.brand-swatch-graphite > div { background: #34383d; }
.brand-swatch-taupe > div { background: #8b8276; }
.brand-swatch-stone > div { background: #c5bcae; }
.brand-swatch-bone > div { background: #e7dfd3; }
.brand-swatch-paper > div { background: #f8f3e9; }

.brand-assets-type { background: var(--z-surface-strong); }
.brand-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line); }
.brand-type-grid article { min-height: 560px; padding: clamp(32px, 4vw, 60px); border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.brand-type-label { margin: 0 0 var(--sp-8); color: var(--z-muted); font: 600 var(--fs-sm)/1.45 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.brand-type-display { max-width: 11ch; margin: 0 0 var(--sp-7); font-size: clamp(3rem, 5vw, 6.4rem); font-weight: 500; line-height: .9; letter-spacing: -.068em; }
.brand-type-body { max-width: 54ch; margin: 0; font-size: var(--fs-lg); line-height: 1.68; }
.brand-type-mono { font-family: var(--font-mono); }
.brand-type-code { margin: 0 0 var(--sp-7); color: var(--z-ink); font-size: clamp(1.4rem, 2.2vw, 2.6rem); line-height: 1.5; }
.brand-type-mono > p:last-child { max-width: 48ch; color: var(--z-muted); font-size: var(--fs-md); line-height: 1.7; }

.brand-assets-controls { background: var(--z-surface); }
.brand-control-stage { display: flex; min-height: 280px; align-items: center; flex-wrap: wrap; gap: var(--sp-5); padding: clamp(32px, 4vw, 60px); border: 1px solid var(--z-line); }

.brand-assets-rules { background: var(--z-surface-alt); }
.brand-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line); }
.brand-rule-grid article { min-height: 390px; padding: clamp(32px, 3.5vw, 52px); border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.brand-rule-grid h3 { max-width: 13ch; margin: var(--sp-7) 0 var(--sp-4); font-size: clamp(1.9rem, 2.8vw, 3.25rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.brand-rule-grid p { max-width: 38ch; margin: 0; color: var(--z-muted); font-size: var(--fs-md); line-height: 1.65; }

@media (max-width: 1024px) {
  .brand-mark-grid, .brand-swatch-grid, .brand-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-mark-card:last-child, .brand-rule-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .brand-assets-section-head, .brand-mark-grid, .brand-swatch-grid, .brand-type-grid, .brand-rule-grid { grid-template-columns: 1fr; }
  .brand-assets-section-head h2, .brand-assets-section-head > p, .brand-mark-card:last-child, .brand-rule-grid article:last-child { grid-column: auto; }
  .brand-assets-section-head > p { margin-top: var(--sp-5); }
  .brand-mark-card, .brand-type-grid article { min-height: 440px; }
  .brand-lockup { align-items: flex-start; flex-direction: column; }
  .brand-control-stage { align-items: stretch; flex-direction: column; }
  .brand-control-stage .zbc-button, .brand-control-stage .zbc-text-link { width: 100%; }
  .brand-control-stage .theme-toggle { align-self: flex-start; }
}

/* Privacy policy: explicit universal-grid placement */
.privacy-page-title .wrap-narrow { display: grid; align-items: end; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--z-gutter); }
.privacy-page-title .eyebrow { grid-column: 1 / span 7; }
.privacy-page-title h1 { grid-column: 1 / span 9; max-width: none; margin-bottom: 0; font-size: clamp(3.3rem, 3.7vw, 4.3rem); }
.privacy-page-title h1 span { display: block; }
.privacy-page-title .lead { grid-column: 10 / span 3; max-width: 34ch; margin: 0; align-self: end; }
.privacy-policy-section { background: var(--z-surface-alt); }
.privacy-document { display: grid; max-width: none; margin-inline: auto; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--z-gutter); }
.privacy-document > * { grid-column: 1 / span 7; width: auto; max-width: none; }
.privacy-document > h2 { max-width: 12ch; margin-top: clamp(72px, 8vw, 112px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--z-line); }
.privacy-document > h2:first-child { margin-top: 0; }
.privacy-document > h3 { max-width: 20ch; margin-top: var(--sp-7); }
.privacy-document > p, .privacy-document > ul, .privacy-document > ol { max-width: 68ch; }

@media (max-width: 1024px) {
  .privacy-page-title h1 { grid-column: 1 / span 8; }
  .privacy-page-title .lead { grid-column: 9 / span 4; }
  .privacy-document > * { grid-column: 1 / span 9; }
}

@media (max-width: 720px) {
  .privacy-page-title .wrap-narrow { grid-template-columns: 1fr; }
  .privacy-page-title .eyebrow, .privacy-page-title h1, .privacy-page-title .lead { grid-column: 1; }
  .privacy-page-title h1 { margin-bottom: var(--sp-5); }
  .privacy-document { grid-template-columns: 1fr; }
  .privacy-document > * { grid-column: 1; }
  .privacy-document > h2 { margin-top: var(--sp-8); }
}

/* Info bar responsive behaviour, restored from the original design. */
@media (max-width: 900px) {
  .global-notice-info .global-notice-inner { padding: 13px 0; grid-template-columns: auto 1fr auto; gap: 12px 18px; }
  .global-notice-info .global-notice-mark, .global-notice-info .global-notice-icon { grid-column: 1; }
  .global-notice-info .global-notice-ticker { grid-column: 2; }
  .global-notice-info .global-notice-action { grid-column: 3; }
}
@media (max-width: 719px) {
  .global-notice-info .global-notice-inner { grid-template-columns: 18px 1fr; padding: 17px 0 18px; }
  .global-notice-info .global-notice-mark, .global-notice-info .global-notice-icon { grid-column: 1; align-self: start; margin-top: 3px; }
  .global-notice-info .global-notice-ticker { grid-column: 2; width: 100%; }
  .global-notice-info .global-notice-action { grid-column: 2; justify-self: start; margin-top: 2px; padding-inline: 14px; }
}
/* The icon sits in the marker's column on the info bar. */
/* Both icon forms share one slot so the layout is identical whichever is
   chosen, and unchanged when neither is. */
.global-notice-info .global-notice-icon { grid-column: 1; justify-self: start; align-self: center; width: 16px; height: 16px; }
.global-notice-info .global-notice-mark { grid-column: 1; align-self: center; }


/* ─── admin account chip ─────────────────────────────────────────────────── */
/* Squared off like every other header control. .header-tools is a 46px rhythm
   (.btn, .theme-toggle, .site-cta all set it) and the role pill now joins it,
   so the row reads as one set of equal boxes instead of three sizes. */
.header-tools .pill { min-height: 46px; padding-inline: 12px; border-radius: 0; font: 600 .73rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.user-avatar { width: 46px; height: 46px; border-radius: 0; color: var(--z-ink); border-color: var(--z-line); background: transparent; font: 600 .8rem/1 var(--font-mono); letter-spacing: .04em; }
.user-avatar:hover, .user-avatar[aria-expanded="true"] { color: var(--z-ink); border-color: var(--z-cyan); background: var(--z-surface-alt); }
.user-avatar img { border-radius: 0; }
.user-menu-panel { border-radius: 0; border-color: var(--z-line); background: var(--z-surface); box-shadow: var(--z-shadow); }
.user-menu-id { border-bottom-color: var(--z-line); }
.user-menu-id strong { color: var(--z-ink); font-family: var(--font-sans); }
.user-menu-panel a { padding: 12px; border-radius: 0; color: var(--z-ink); font: 600 .73rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.user-menu-panel a:hover, .user-menu-panel a:focus-visible { color: var(--z-ink); background: var(--z-surface-alt); }

/* ============================================================================
   HEADER v2 — one control cluster, one breakpoint story
   ----------------------------------------------------------------------------
   Appended last on purpose: it supersedes the three older, scattered header
   media blocks above (901–1180, max-900, max-720) rather than editing each.

   Collapsed layout:       [burger] [brand] ......... [tools]
   Wide layout:            [brand] [nav] ......... [tools]
   Tools, left to right:   Apply for a Grant · theme · language · avatar

   The burger sits on the LEFT, before the brand, and turns into an X in place
   so the control never moves out from under the pointer.

   The open menu is a panel, not a full-width sheet: anchored under the burger,
   about as wide as the burger-to-brand run, bordered and one step lighter than
   the bar so it reads as a menu rather than as the page having changed. Same
   treatment as the language and account dropdowns beside it — one idea of what
   a menu looks like, used three times.

   The menu does NOT lock page scroll. It used to: a full-width drawer covering
   the viewport needs the page behind it held still. A 300px dropdown does not,
   and the lock was scoped to max-width:900 while the menu itself opens below
   1400 — so opening the menu at 1000px and then narrowing the window past 900
   froze the page with the lock applying to a menu that no longer covered it and
   nothing on screen explaining why. Removed rather than re-scoped: this panel
   behaves like the language and account dropdowns next to it, and those have
   never locked scroll either.

   Breakpoints:
     >= 1440px   full horizontal nav, no burger — when it fits. html.nav-burger
                 (set by zbcf_header()'s inline script) collapses it whenever the
                 nav overflows in the reader's language (2026-10-02).
     <  1440px   burger + drawer panel. 1400 (not 1180) because between 1180
                 and 1400 the nine nav items wrapped onto a second row — the
                 bug in screenshot 04. Nav never wraps now; it is either one
                 row or the panel.
     <  720px    the CTA drops into the panel, bar keeps theme/lang/avatar.
   ========================================================================== */

.site-header-inner { display: flex; align-items: center; gap: var(--z-gutter); }
.site-header-inner > .site-brand { flex: 0 0 auto; }
.site-header-inner > .site-nav   { flex: 1 1 auto; min-width: 0; }
.site-header-inner > .header-tools { flex: 0 0 auto; margin-left: auto; }

.site-nav { flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; }   /* CJK labels broke mid-word; a label that does not fit makes the bar collapse instead */

/* --- nav groups (2026-10-02) ------------------------------------------------
   Four groups of related pages instead of twelve flat links (layout.php
   zbcf_nav_groups()). Wide: each group is a dropdown, opened by click/tap
   (app.js, the same controller as the language and account menus) and by
   hover on a mouse. Burger: the trigger disappears and every group shows as a
   titled section with its links. */
.site-nav .nav-group { position: relative; }
.site-nav .nav-group-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 13px 10px;
  color: var(--z-muted); background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 600 .73rem/1 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap;
}
.site-nav .nav-group-btn svg { width: 9px; height: 6px; transition: transform .15s ease; }
.site-nav .nav-group-btn:hover, .site-nav .nav-group-btn[aria-expanded="true"], .site-nav .nav-group-btn.is-active { color: var(--z-ink); }
.site-nav .nav-group-btn.is-active { text-decoration: underline; text-decoration-color: var(--z-cyan); text-underline-offset: 8px; }
.site-nav .nav-group-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav .nav-group-title { display: none; }

/* wide: a dropdown under its trigger. No gap between trigger and panel, so a
   mouse moving down into the panel never leaves the hover area. */
html:not(.nav-burger) .site-nav .nav-group-panel {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 230px; padding: 8px 0;
  background: var(--z-surface); border: 1px solid var(--z-line); box-shadow: var(--z-shadow);
}
html:not(.nav-burger) .site-nav .nav-group-panel[hidden] { display: none; }
html:not(.nav-burger) .site-nav .nav-group-panel a {
  display: block; padding: 11px 16px; margin: 0; border: 0;   /* not the bar's "a + a" separators */
  color: var(--z-ink); font: 500 .88rem/1.3 var(--font-sans); letter-spacing: 0; text-transform: none;
}
html:not(.nav-burger) .site-nav .nav-group-panel a:hover { background: var(--z-surface-alt); text-decoration: none; }
html:not(.nav-burger) .site-nav .nav-group-panel a.is-active { color: var(--z-cyan); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  /* !important: foundation.css hides [hidden] with !important */
  html:not(.nav-burger) .site-nav .nav-group:hover > .nav-group-panel { display: block !important; }
}

/* burger: every group open, under its title */
html.nav-burger .site-header .site-nav .nav-group-btn { display: none; }
html.nav-burger .site-header .site-nav .nav-group-panel,
html.nav-burger .site-header .site-nav .nav-group-panel[hidden] { display: block !important; position: static; }   /* beats foundation.css [hidden] */
html.nav-burger .site-header .site-nav .nav-group + .nav-group .nav-group-title { border-top: 1px solid var(--z-line); }
html.nav-burger .site-header .site-nav .nav-group-title {
  display: block; margin: 0; padding: 16px 16px 8px;
  color: var(--z-muted); font: 600 .62rem/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
}

.nav-toggle { flex: 0 0 46px; }

.header-tools { display: flex; align-items: center; gap: 10px; }

/* Shared square control footprint for every icon-ish button in the bar. */
.hdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 12px;
  color: var(--z-ink); border: 1px solid var(--z-line); border-radius: 0;
  background: transparent; cursor: pointer;
  font: 600 .73rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.hdr-btn:hover { border-color: var(--z-cyan); text-decoration: none; }
.hdr-btn svg { width: 17px; height: 17px; }
.hdr-lang-btn { padding-inline: 10px; }
.hdr-lang-code { font-size: .72rem; }
.hdr-signin { white-space: nowrap; }

.hdr-avatar-btn { width: 46px; padding: 0; }
.hdr-avatar {
  display: grid; width: 30px; height: 30px; place-items: center;
  position: relative; overflow: hidden;
  border-radius: 50%; background: var(--z-cyan); color: #06121a;
  font: 700 .66rem/1 var(--font-mono); letter-spacing: .02em;
}
/* Sippis profile picture over the initials (lib/layout.php) */
.hdr-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Admin keeps the square mark it already had — Roberto's call in shot 05. */
.hdr-avatar-btn.is-square .hdr-avatar { border-radius: 0; }

/* --- dropdown panels ----------------------------------------------------- */
.hdr-menu { position: relative; }
.hdr-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 232px; padding: 8px 0;
  background: var(--z-surface); border: 1px solid var(--z-line);
  box-shadow: var(--z-shadow);
}
.hdr-panel[hidden] { display: none; }
.hdr-panel-head, .hdr-panel-note {
  margin: 0; padding: 8px 16px;
  color: var(--z-muted); font: 600 .62rem/1.4 var(--font-mono);
  letter-spacing: .09em; text-transform: uppercase;
}
.hdr-panel-note { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
.hdr-panel-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; color: var(--z-ink); font-size: .86rem;
}
.hdr-panel-item:hover { background: var(--z-surface-alt); text-decoration: none; }
.hdr-panel-item.is-current { color: var(--z-cyan); }
.hdr-panel-meta { color: var(--z-muted); font: 600 .62rem/1 var(--font-mono); letter-spacing: .06em; }
.hdr-panel-sep { height: 1px; margin: 6px 0; background: var(--z-line); }
.hdr-panel-danger { color: var(--z-magenta); }
.hdr-panel-id { padding: 10px 16px 12px; border-bottom: 1px solid var(--z-line); }
.hdr-panel-id strong { display: block; font-size: .9rem; }
.hdr-panel-id span { display: block; margin-top: 3px; color: var(--z-muted); font-size: .76rem; word-break: break-all; }
.hdr-role {
  display: inline-block; margin-top: 8px; padding: 3px 8px;
  border: 1px solid var(--z-cyan); color: var(--z-cyan);
  font: 600 .58rem/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
}

/* --- wide: full nav, no burger ------------------------------------------- */
/* Burger or not is a class, html.nav-burger, set by the inline script in
   zbcf_header() (html/lib/layout.php): below 1440px, or whenever the nav does
   not fit on one row. A fixed breakpoint was measured for English; French and
   Russian labels are much longer, so the bar now measures itself (2026-10-02). */
html:not(.nav-burger) .site-header .nav-toggle { display: none; }
html:not(.nav-burger) .site-header .site-nav { position: static; display: flex; max-height: none; padding: 0;
  flex-direction: row; justify-content: center; overflow: visible;
  background: none; border: 0; box-shadow: none; }
html:not(.nav-burger) .site-header .site-nav .mobile-nav-cta { display: none !important; }

/* --- burger + drawer: html.nav-burger (see the note above the wide block) -- */
html.nav-burger .site-header .site-header-inner { position: relative; }
html.nav-burger .site-header .nav-toggle { display: inline-flex; order: 0; margin-right: 4px; margin-left: 0; }
html.nav-burger .site-header .site-brand { order: 1; }
html.nav-burger .site-header .header-tools { order: 2; margin-left: auto; }

/* Anchored to the left edge of the header row, under the burger that opened
   it. Width is a column, not the viewport: wide enough for the longest label
   (TRANSPARENCY) plus the CTA, capped so it never touches the right gutter. */
html.nav-burger .site-header .site-nav {
  position: absolute; top: calc(100% + 6px); left: 0; right: auto;
  z-index: 60; display: none;
  width: min(300px, calc(100vw - (var(--z-gutter) * 2)));
  max-height: calc(100svh - var(--z-header-h) - var(--z-notice-h) - 24px);
  padding: 6px 0 10px; flex-direction: column; align-items: stretch;
  overflow-y: auto;
  background: var(--z-surface-alt);
  border: 1px solid var(--z-line);
  box-shadow: var(--z-shadow);
}
html.nav-burger .site-header .site-nav.is-open { display: flex; }
html.nav-burger .site-header .site-nav a {
  display: flex; min-height: 46px; align-items: center;
  padding: 0 16px; margin-left: 0;
  border: 0; border-bottom: 1px solid var(--z-line);
  font-size: .8rem;
}
html.nav-burger .site-header .site-nav a:last-of-type { border-bottom: 0; }
html.nav-burger .site-header .site-nav a:hover, html.nav-burger .site-header .site-nav a.is-active {
  background: var(--z-surface); text-decoration: none;
}
/* The panel sits one step lighter than the bar (--z-surface-alt); a hovered
   row drops back to --z-surface so the highlight reads as a press, not as a
   hole. Works in both palettes because both define the pair. */
html.nav-burger .site-header .site-nav a.is-active { color: var(--z-cyan); }
html.nav-burger .site-header .site-nav .mobile-nav-cta {
  display: flex !important; min-height: 46px; justify-content: center;
  margin: 10px 16px 4px; padding: 0;
  color: var(--z-button-text); border: 1px solid var(--z-button);
  background: var(--z-button);
}
html.nav-burger .site-header .site-nav .mobile-nav-cta:hover { color: #070a10; border-color: #7ce1ff; background: #7ce1ff; }
html.nav-burger .site-header .header-tools .btn { display: none; }

/* --- phone: CTA moves into the drawer ------------------------------------ */
@media (max-width: 719px) {
  .site-header .site-header-inner { min-height: 82px; gap: 10px; }
  .site-header .site-cta { display: none; }
  .site-header .brand-sub { display: none; }
  .hdr-btn { padding-inline: 9px; }
  .hdr-lang-code { display: none; }
  .hdr-panel { right: 0; min-width: 210px; }
}

/* Panels are wider than the viewport edge on very small screens otherwise. */
@media (max-width: 400px) {
  .hdr-panel { position: fixed; top: auto; right: 8px; left: 8px; min-width: 0; }
}

/* Giveaway contributor identity — address prefix or stable pseudonym, never a
   name. Mono so a truncated address reads as machine data, not as a person. */
.giveaway-contributor { font: 600 .82rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--z-muted); }
.giveaway-contributor.is-address { color: var(--z-ink); }

/* ============================================================================
   INTERIOR HERO STANDARD — desktop
   ----------------------------------------------------------------------------
   Every interior page uses the People hero as its visual source of truth:
   full viewport rhythm, 12-column copy placement, the silver-cube field on
   the right, and the same title scale and gradient transition. Home keeps its
   distinct composition while sharing the same desktop top rhythm. Narrow
   layouts keep their page-specific rules.
   ========================================================================== */
@media (min-width: 901px) {
  .home-hero,
  .home-hero-grid {
    min-height: 0;
  }

  .home-hero-grid {
    align-items: start;
    padding-top: clamp(34px, 5vh, 56px);
    padding-bottom: clamp(34px, 5vh, 56px);
  }

  .home-hero-folio {
    align-self: start;
    padding: clamp(34px, 3.25vw, 52px);
  }

  .home-hero h1 {
    min-height: 2.64em;
  }

  .home-hero h1 > span {
    display: inline;
  }

  .home-hero h1 > span + span::before {
    content: " ";
  }

  .home-hero-path {
    align-self: start;
  }

  .home-horizon {
    display: none;
  }

  .people-hero,
  .page-title,
  .about-hero,
  .giveaway-hero,
  .giveaway-record-hero {
    position: relative;
    min-height: calc(100svh - var(--z-chrome-h));
    overflow: hidden;
    border-bottom: 1px solid var(--z-line);
    background-color: var(--z-surface-alt);
    background-image: url("/assets/images/foundation/silver-cubes.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    isolation: isolate;
  }

  .page-title::before,
  .about-hero::before,
  .giveaway-record-hero::before {
    content: none;
  }

  .people-hero-art,
  .giveaway-hero-media {
    display: none;
  }

  .people-hero::after,
  .page-title::after,
  .about-hero::after,
  .giveaway-hero::after,
  .giveaway-record-hero::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, var(--z-surface-alt) 0 54%, rgba(231,223,211,.86) 68%, rgba(231,223,211,.08));
  }

  [data-theme="dark"] .people-hero::after,
  [data-theme="dark"] .page-title::after,
  [data-theme="dark"] .about-hero::after,
  [data-theme="dark"] .giveaway-hero::after,
  [data-theme="dark"] .giveaway-record-hero::after {
    background: linear-gradient(90deg, var(--z-surface-alt) 0 54%, rgba(21,26,33,.88) 68%, rgba(21,26,33,.12));
  }

  .people-hero-grid,
  .page-title > .wrap,
  .page-title > .wrap-narrow,
  .about-hero-grid,
  .giveaway-record-hero-grid {
    position: relative;
    z-index: 3;
    min-height: calc(100svh - var(--z-chrome-h));
    padding-top: clamp(34px, 5vh, 56px);
    padding-bottom: clamp(52px, 7vh, 82px);
  }

  .people-hero-grid,
  .about-hero-grid,
  .giveaway-record-hero-grid {
    align-items: start;
  }

  .people-hero-copy {
    grid-column: 1 / span 8;
  }

  .page-title {
    display: block;
    padding: 0;
  }

  .page-title > .wrap,
  .page-title > .wrap-narrow {
    display: flex;
    align-items: center;
  }

  .page-title > .wrap > *,
  .page-title > .wrap-narrow > * {
    width: min(68%, 1000px);
  }

  .page-title > .wrap,
  .page-title > .wrap-narrow {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .page-title .eyebrow,
  .page-title .breadcrumb {
    margin: 0 0 30px;
    color: var(--z-cyan);
    font: 600 clamp(.78rem, .75rem + .1vw, .9rem)/1.4 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .people-hero h1,
  .page-title h1,
  .about-hero h1,
  .giveaway-hero h1,
  .giveaway-record-hero h1 {
    max-width: 18ch;
    min-height: 2.61em;
    margin: 0;
    font-size: clamp(4.2rem, 6.7vw, 8rem);
    font-weight: 500;
    line-height: .87;
    letter-spacing: -.075em;
  }

  .page-title.hero-title-three-lines h1,
  .giveaway-hero h1 {
    max-width: 900px;
  }

  .people-hero h1 > span,
  .page-title h1 > span,
  .about-hero h1 > span,
  .giveaway-hero h1 > span,
  .giveaway-record-hero h1 > span {
    display: inline;
  }

  .people-hero h1 > span + span::before,
  .page-title h1 > span + span::before,
  .about-hero h1 > span + span::before,
  .giveaway-hero h1 > span + span::before,
  .giveaway-record-hero h1 > span + span::before {
    content: " ";
  }

  .page-title .lead {
    max-width: 62ch;
    margin: 42px 0 0;
    color: var(--z-muted);
    font-size: clamp(1.12rem, 1.35vw, 1.38rem);
    line-height: 1.62;
  }

  .page-title .row {
    position: relative;
    z-index: 2;
    width: auto;
  }

  .about-hero-grid {
    align-items: start;
  }

  .about-hero-copy {
    grid-column: 1 / span 8;
  }

  .about-hero-note {
    grid-column: 10 / span 3;
    align-self: end;
    margin-bottom: 12px;
    padding: 27px 20px;
    border-top: 2px solid var(--z-ink);
    background: color-mix(in srgb, var(--z-surface-alt) 88%, transparent);
  }

  .about-hero-note .cube-marker {
    margin-bottom: 24px;
  }

  .about-hero-note p {
    margin-bottom: 24px;
  }

  .giveaway-hero {
    display: block;
  }

  .giveaway-hero-copy {
    position: relative;
    z-index: 3;
    display: block;
    background: transparent;
  }

  .giveaway-hero-copy-inner {
    display: flex;
    width: var(--z-shell);
    min-height: calc(100svh - var(--z-chrome-h));
    margin-inline: auto;
    padding-top: clamp(34px, 5vh, 56px);
    padding-bottom: clamp(52px, 7vh, 82px);
    flex-direction: column;
    justify-content: flex-start;
  }

  .giveaway-hero-copy-inner > * {
    width: min(68%, 1000px);
  }

  .giveaway-record-hero {
    padding: 0;
  }

  .giveaway-record-hero-grid {
    align-items: start;
  }

  .giveaway-record-hero-grid > div:first-child {
    grid-column: 1 / span 8;
  }

  .giveaway-record-summary {
    grid-column: 10 / span 3;
    align-self: end;
    margin-bottom: 12px;
    padding: 27px 20px;
    border-top: 2px solid var(--z-ink);
    background: color-mix(in srgb, var(--z-surface-alt) 88%, transparent);
  }
}

/* ============================================================================
   MOBILE HERO STANDARD
   ----------------------------------------------------------------------------
   The image, label, and headline form one compact opening panel. The image
   remains visible above and behind the title, then fades into the page surface
   before supporting copy and actions begin. Headlines wrap naturally.
   ========================================================================== */
@media (max-width: 900px) {
  .page-title,
  .about-hero,
  .people-hero,
  .giveaway-record-hero {
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--z-line);
    background-color: var(--z-surface-alt);
    background-image: url("/assets/images/foundation/silver-cubes.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto min(62svh, 520px);
    isolation: isolate;
  }

  .page-title::after,
  .about-hero::after,
  .people-hero::after,
  .giveaway-record-hero::after,
  [data-theme="dark"] .people-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7,10,16,.62) 0, rgba(7,10,16,.72) 180px, var(--z-surface-alt) 300px, var(--z-surface-alt) 100%);
  }

  .people-hero-art {
    display: none;
  }

  .page-title > .wrap,
  .page-title > .wrap-narrow,
  .about-hero-grid,
  .people-hero-grid,
  .giveaway-record-hero-grid {
    position: relative;
    z-index: 2;
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-height: 0;
    padding: 28px 20px 52px;
  }

  .page-title .eyebrow,
  .page-title .breadcrumb,
  .home-hero .zbc-kicker,
  .about-hero .zbc-kicker,
  .people-hero .zbc-kicker,
  .giveaway-record-hero .zbc-kicker,
  .giveaway-hero-heading .zbc-kicker {
    margin: 0 0 16px;
  }

  .page-title h1,
  .home-hero h1,
  .about-hero h1,
  .people-hero h1,
  .giveaway-record-hero h1,
  .giveaway-hero h1 {
    width: 8.75em;
    max-width: 100%;
    min-height: 2.82em;
    margin: 0;
    color: #f8f3e9;
    font-size: clamp(2.2rem, 9.2vw, 2.65rem);
    line-height: .94;
    letter-spacing: -.055em;
    overflow-wrap: break-word;
    text-wrap: wrap;
  }

  .page-title .lead,
  .home-hero-lead,
  .people-hero-lead {
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
    overflow-wrap: anywhere;
  }

  .page-title .row,
  .page-title .zbc-actions,
  .home-hero .zbc-actions,
  .people-hero .zbc-actions {
    display: flex;
    width: 100%;
    margin-top: 26px !important;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px !important;
  }

  .page-title .row > *,
  .page-title .zbc-actions > *,
  .home-hero .zbc-actions > *,
  .people-hero .zbc-actions > * {
    max-width: 100%;
  }

  .about-hero-copy,
  .people-hero-copy,
  .giveaway-record-hero-grid > div:first-child {
    padding: 0;
  }

  .about-hero-note,
  .people-hero-status,
  .giveaway-record-summary {
    margin: 28px 0 0;
    border-top: 0;
  }

  .about-hero-note,
  .people-hero-status {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
  }

  .giveaway-hero-heading {
    width: 100vw;
    max-width: 100vw;
    padding: 28px 20px;
    background: linear-gradient(180deg, rgba(7,10,16,.62) 0, rgba(7,10,16,.7) 58%, rgba(7,10,16,.94) 100%);
  }

  .giveaway-hero-lede {
    padding-top: 0;
  }

  .home-hero {
    min-height: 0;
    padding-top: 0;
    background: var(--z-surface-alt);
  }

  .home-hero-media,
  .home-hero-wash {
    height: min(52svh, 70vw);
  }

  .home-hero-wash,
  [data-theme="dark"] .home-hero-wash {
    background: linear-gradient(180deg, rgba(7,10,16,.58) 0, rgba(7,10,16,.68) 58%, var(--z-surface-alt) 100%);
  }

  .home-hero-grid {
    position: relative;
    z-index: 2;
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-height: 0;
    padding: 28px 20px 52px;
  }

  .home-hero-folio {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  [data-theme="dark"] .home-hero-folio {
    border-color: transparent;
    background: transparent;
  }

  .home-hero h1 > span {
    display: inline;
  }

  .about-hero h1 > span {
    display: inline;
    margin-left: .12em;
  }

  .home-hero-path {
    margin: 40px 0 0;
    background: transparent;
  }

  [data-theme="dark"] .home-hero-path {
    background: transparent;
  }
}

/* ============================================================================
   ADMIN SIDEBAR — collapsible groups
   ----------------------------------------------------------------------------
   Groups are <details>, so collapsing works with JavaScript off and the browser
   handles the state. app.js only remembers the choice between page loads.
   A group containing the current page is rendered already open.
   ========================================================================== */

.admin-side .admin-nav-group details { margin: 2px 0 6px; }

.admin-side .admin-nav-group summary.admin-nav-group-label {
  display: flex; align-items: center; gap: 7px;
  padding: 7px var(--sp-3); cursor: pointer; list-style: none;
  color: var(--z-muted); font: 600 .62rem/1.4 var(--font-mono);
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: 0; user-select: none;
}
.admin-side .admin-nav-group summary::-webkit-details-marker { display: none; }
.admin-side .admin-nav-group summary:hover { color: var(--z-ink); }

/* The disclosure triangle, drawn rather than inherited, so it matches the
   header's chevrons instead of the browser's default glyph. */
.admin-side .admin-nav-group summary::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 140ms ease;
}
.admin-side .admin-nav-group details[open] > summary::before { transform: rotate(90deg); }
.admin-side .admin-nav-group details[open] > summary { color: var(--z-ink); }

.admin-side .admin-nav-group summary:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: -2px; }

/* An outbound arrow that stays pinned right, so the labels still line up. */
.admin-side .admin-nav-out { margin-left: auto; opacity: .45; font-size: .8em; }
.admin-side a { display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .admin-side .admin-nav-group summary::before { transition: none; }
}

/* ============================================================================
   ADMIN — sticky chrome and sticky sidebar
   ----------------------------------------------------------------------------
   The admin header now sits inside .site-chrome (see admin-layout.php), so it
   sticks the same way the public one always has. The admin surface carries no
   notice bar, so its chrome height is the header height alone — --z-notice-h
   is deliberately not subtracted here.
   ========================================================================== */

.site-chrome-admin { --z-notice-h: 0px; }

.admin-side {
  position: sticky;
  top: var(--z-header-h);
  /* Without align-self, a grid item stretches to the full row height and sticky
     silently does nothing — the element is already as tall as its scroll range.
     This is the line that actually makes it work. */
  align-self: start;
  max-height: calc(100svh - var(--z-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Below the breakpoint the shell is one column and the sidebar sits above the
   content, where pinning it would eat the screen. */
@media (max-width: 900px) {
  .admin-side { position: static; max-height: none; overflow-y: visible; }
}

/* ============================================================================
   ADMIN — the sticky page bar (.admin-bar)
   ----------------------------------------------------------------------------
   Rendered by zbcf_admin_sticky_bar() in lib/admin-layout.php. It pins BELOW
   the admin header, which is itself sticky at top:0 inside .site-chrome — hence
   top: var(--z-header-h) rather than top: 0, and a z-index under the header's
   200 so the header always wins the overlap.

   --admin-bar-h is the bar's rendered height and exists for ONE reason: an
   anchor jump lands the target at scroll position 0, which is underneath both
   sticky bars. .admin-anchor's scroll-margin-top is header + bar + a little
   air, so "Add photo" puts the Photo heading just below the bar instead of
   behind it.

   IT IS NOT A FUNCTION OF VIEWPORT WIDTH. The bar wraps to a second row when
   the jump links stop fitting beside the title and Save, and how wide those
   links are depends on how many sections the page offers and what they are
   called — so a hand-picked value keyed to one breakpoint is right for one
   page at one width and wrong either side of it. It was 56px between 620px and
   roughly 1100px while the bar was already two rows there, which put a
   jumped-to heading half under it.

   So: TWO ROWS ARE THE DEFAULT, and one row is claimed only where the bar
   cannot wrap. Over-reserving leaves a heading a little lower than it needs to
   be; under-reserving hides it, and only one of those is a bug. app.js then
   measures the bar and writes the real height into this property, so on any
   page with JS the value is exact rather than estimated — these numbers are
   the floor, not the answer.
   ========================================================================== */

:root { --admin-bar-h: 104px; }

/* Wide enough that the bar cannot wrap: the two-column admin shell spends
   240px on the sidebar and .admin-main another 64px on its gutters, leaving
   ~790px of row for the back link, the title, four jump links, Cancel and
   Save. Below this the bar may be one row or two, and the default assumes two.
   The 620px block further down is where it is two rows BY DESIGN. */
@media (min-width: 1100px) { :root { --admin-bar-h: 56px; } }

/* The bar is two stacked rows: controls, then the sentence about them. They
   shared one row until 2026-09-24, which meant the hint sat between two buttons
   and shoved the third onto a second line. */
/* A "?" that opens one paragraph. The prose is worth having and not worth
   four lines between the operator and the control he came for. */
.admin-why { display: inline-block; }
.admin-why > summary {
  list-style: none;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-muted);
  user-select: none;
}
.admin-why > summary::-webkit-details-marker { display: none; }
.admin-why > summary:hover { color: var(--ink); border-color: var(--ink-faint); }
.admin-why > summary:focus-visible { outline: 2px solid var(--z-cyan, #48d1cc); outline-offset: 2px; }
.admin-why[open] > summary { color: var(--ink); border-color: var(--ink-faint); }
.admin-why[open] > p { position: absolute; z-index: 5; max-width: 42rem;
                       margin-top: var(--sp-2); padding: var(--sp-3);
                       border: 1px solid var(--line); border-radius: 8px;
                       background: var(--bg-elev-2, var(--bg-elev-1)); }

.admin-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  width: 100%;
}
.admin-bar-hint {
  width: 100%;
  margin: var(--sp-1) 0 0;
  color: var(--ink-muted);
}

.admin-bar {
  position: sticky;
  top: var(--z-header-h);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  /* A ONE-ROW FLOOR, not --admin-bar-h. The variable over-reserves on purpose
     (see above) and wiring it to min-height here would make the bar actually
     eat that much on every screen below 1100px — which is the "a sticky bar
     that eats a third of a small viewport is worse than scrolling" failure.
     Content decides the real height; this only stops a one-row bar being
     shorter than the buttons in it. */
  min-height: 48px;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev-1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

/* The name. min-width:0 + ellipsis so a long one shortens instead of pushing
   Save off the row — Save is the reason the bar exists. */
.admin-bar-title {
  min-width: 0;
  flex: 1 1 8rem;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-bar-note { white-space: nowrap; }
.admin-bar-back { flex: 0 0 auto; }

.admin-bar-jumps { display: flex; gap: var(--sp-1); flex-wrap: wrap; min-width: 0; }
.admin-bar-jumps a {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-decoration: none;
}
.admin-bar-jumps a:hover { color: var(--ink); background: var(--bg-elev-2); text-decoration: none; }
.admin-bar-jumps a:focus-visible { border-color: var(--accent); }

/* Actions pinned right on a wide row, and first on the second row when it
   wraps — Save must never be the thing that scrolls out of the bar. */
/* Actions pinned right on a wide row, and first on the second row when it
   wraps. `flex: 0 1 auto` rather than `0 0 auto` because the group can now
   carry a sentence (.admin-bar-hint) as well as buttons: unshrinkable, a long
   hint would push the button past the edge of the bar, which is the failure
   this bar exists to fix. The buttons themselves stay unshrinkable below. */
.admin-bar-actions { display: flex; gap: var(--sp-2); margin-left: auto; flex: 0 1 auto; align-items: center; }
.admin-bar-actions .btn { flex: 0 0 auto; }

/* "Two ticked — compare them", beside the button it is about. It wraps and
   shrinks; it is never truncated, because the sentence IS the answer to "can
   this happen yet" and half of it answers nothing. */
.admin-bar-hint { flex: 0 1 auto; min-width: 0; color: var(--ink-muted); line-height: 1.35; text-align: right; }

/* An action whose precondition is not met. Visibly not-yet, still pressable:
   with JS off the press is how the server gets to say why — see (4) in the
   component header in lib/admin-layout.php. app.js sets the real `disabled`
   once it is counting live. */
.btn.is-not-ready { opacity: .62; }

/* The anchors the jump links point at. See the block comment above. */
.admin-anchor { scroll-margin-top: calc(var(--z-header-h) + var(--admin-bar-h) + 14px); }

/* ~400px: a bar that eats a third of the viewport is worse than scrolling. Two
   short rows — name + Save on top, jumps beneath on one scrollable line — so
   the whole thing stays around an eighth of a phone screen. .admin-main's
   2rem padding is the side gutter and is well past the 16px floor. */
@media (max-width: 620px) {
  /* --admin-bar-h is already 104px by default; two rows here are deliberate
     rather than incidental, which is the only difference. */
  .admin-bar { gap: var(--sp-2); padding: var(--sp-2); }
  .admin-bar-title { flex: 1 1 6rem; font-size: var(--fs-sm); }
  .admin-bar-note { display: none; }
  /* The actions take the whole first row here, so a hint and a button sit
     together instead of the hint squeezing the button off the edge. */
  .admin-bar-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .admin-bar-hint { flex: 1 1 100%; text-align: left; }
  /* The jumps take the whole second row and scroll sideways rather than
     stacking into a tower of links. */
  .admin-bar-jumps {
    order: 9;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
}

/* ============================================================================
   ADMIN SETTINGS — one line per task
   ----------------------------------------------------------------------------
   provider · model · Test, aligned across every row so the eye can run down a
   column. The model column is deliberately narrower than the provider column:
   a model id is short, and giving it the whole width is what made these rows
   look ragged.
   ========================================================================== */

.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: var(--sp-3);
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px solid var(--z-line);
}
.task-row:last-of-type { border-bottom: 0; }

.task-cell { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.task-cell > label {
  color: var(--z-muted); font: 600 .62rem/1.3 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.task-cell > select,
.task-cell > input { width: 100%; min-width: 0; }

/* The action column is its own width and bottom-aligned with the controls, so
   Test sits level with the two dropdowns rather than floating. */
.task-cell-action { justify-content: flex-end; }
.task-cell-action .btn { white-space: nowrap; }
.task-cell-action .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* The custom-id box appears under the select it belongs to, not beside it. */
.model-custom { margin-top: 5px; }
.model-custom[hidden] { display: none !important; }

/* Hint spans the full row and sits under all three controls. */
.task-hint {
  margin: 6px 0 0; grid-column: 1 / -1;
  color: var(--z-muted); font-size: .78rem;
}

@media (max-width: 860px) {
  .task-row { grid-template-columns: 1fr; }
  .task-cell-action { align-items: flex-start; }
}

/* ============================================================================
   ADMIN DASHBOARD — tiles that go somewhere
   ----------------------------------------------------------------------------
   The whole card is the click target, via a stretched pseudo-element rather
   than an <a> wrapped round the markup — anchors cannot nest, and the red
   counts inside the card need to be their own, more specific links.
   ========================================================================== */

.metric-link { cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.metric-link:hover { border-color: var(--z-cyan); background: var(--z-surface-alt); }

.metric-link .metric-stretch::after {
  position: absolute; inset: 0; z-index: 1; content: "";
}
.metric-link .metric-stretch { color: inherit; text-decoration: none; }
.metric-link:hover .metric-stretch { color: var(--z-cyan); }

/* The links inside the sub-label sit above the stretched one, so they win the
   click and can point somewhere more specific than the card does. */
.metric-link .metric-sub a { position: relative; z-index: 2; text-decoration: underline; text-underline-offset: 3px; }
.metric-link .metric-sub a:hover { color: var(--z-cyan); }

.metric-link .metric-stretch:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 3px; }

/* The box whose slice is currently showing. Marked with the accent border and a
   tint rather than a badge — the "· showing" in the sub-label carries the words,
   so the colour only has to draw the eye. */
.metric-link.is-active-filter {
  border-color: var(--z-cyan);
  background: var(--z-surface-alt);
}
.metric-link.is-active-filter .metric-value { color: var(--z-cyan); }

/* ============================================================================
   WORKING OVERLAY
   ----------------------------------------------------------------------------
   Some admin actions call a model and take up to two minutes. A form post that
   long looks exactly like a dead page: nothing moves, and the only signal is the
   browser's own tab spinner, which nobody watches. This says what is running and
   roughly how long it may take.
   ========================================================================== */

.zbcf-working {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: color-mix(in srgb, var(--z-paper) 82%, transparent);
  backdrop-filter: blur(3px);
  text-align: center; padding: 24px;
}
.zbcf-working[hidden] { display: none !important; }

.zbcf-working-spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--z-line); border-top-color: var(--z-cyan);
  animation: zbcf-spin 720ms linear infinite;
}
@keyframes zbcf-spin { to { transform: rotate(360deg); } }

.zbcf-working-what { color: var(--z-ink); font: 600 1rem/1.4 var(--font-sans); max-width: 30ch; }
.zbcf-working-how  { color: var(--z-muted); font: 500 .8rem/1.5 var(--font-mono); max-width: 42ch; }
.zbcf-working-tick { color: var(--z-cyan); font: 600 .9rem/1 var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .zbcf-working-spin { animation-duration: 2.4s; }
}

/* ─── confirm dialog ───────────────────────────────────────────────────────
   A browser alert() cannot be styled, cannot be read in the page's own voice,
   and on some platforms says "this page says" above whatever you wrote. This
   is the same question asked in the site's own chrome. */
.zbcf-confirm { width: min(460px, calc(100% - 32px)); margin: auto; padding: 0; color: var(--z-ink);
  border: 1px solid var(--z-line); border-radius: 2px; background: var(--z-surface);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .45); }
.zbcf-confirm::backdrop { background: rgba(7, 10, 16, .62); backdrop-filter: blur(4px); }
.zbcf-confirm-inner { padding: var(--sp-4); }
.zbcf-confirm-title { margin: 0 0 var(--sp-2); font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; }
.zbcf-confirm-body { margin: 0; color: var(--z-muted); font-size: .9rem; line-height: 1.6; }
.zbcf-confirm-actions { display: flex; margin-top: var(--sp-4); justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 420px) {
  .zbcf-confirm-actions { flex-direction: column-reverse; }
  .zbcf-confirm-actions .btn { width: 100%; }
}

/* ─── an outcome that has to be acknowledged ───────────────────────────────
   Rendered by zbcf_admin_outcome_html() as <dialog open>, which is NOT modal:
   with no JavaScript it lays out in flow at the top of the page and reads as
   the notice it replaces. app.js promotes it with showModal(), and only then
   does it get the top layer, the backdrop and the centring below — which is
   the point: the button that produced it may have been three cards down. */
.zbcf-outcome { width: min(520px, calc(100% - 32px)); margin: auto; padding: 0; color: var(--z-ink);
  border: 1px solid var(--z-line); border-top-width: 3px; border-radius: 2px;
  background: var(--z-surface); box-shadow: 0 28px 70px rgba(0, 0, 0, .45); }
.zbcf-outcome-accent { border-top-color: var(--z-cyan); }
.zbcf-outcome-amber, .zbcf-outcome-red { border-top-color: var(--z-magenta); }
.zbcf-outcome::backdrop { background: rgba(7, 10, 16, .62); backdrop-filter: blur(4px); }
.zbcf-outcome-inner { padding: var(--sp-4); }
.zbcf-outcome-title { margin: 0 0 var(--sp-2); font-family: var(--font-sans); font-size: 1.0625rem;
  font-weight: 600; }
.zbcf-outcome-body { color: var(--z-muted); font-size: .9rem; line-height: 1.6; }
.zbcf-outcome-body p { margin: 0 0 var(--sp-2); }
.zbcf-outcome-body p:last-child { margin-bottom: 0; }
.zbcf-outcome-body ul { margin: 0 0 var(--sp-2); padding-left: 1.25rem; }
.zbcf-outcome-body code { word-break: break-all; }
.zbcf-outcome-actions { display: flex; margin-top: var(--sp-4); justify-content: flex-end;
  flex-wrap: wrap; gap: var(--sp-2); }
/* The destination chooser, when the money has more than one place it could go.
   Inside the same dialog and the same form as the button that confirms it —
   the second round trip is what this whole screen exists to remove. */
.zbcf-outcome-choices { margin: 0 0 var(--sp-3); }
.zbcf-outcome-choice { display: block; margin: 0 0 var(--sp-1); font-size: .85rem; }
@media (max-width: 420px) {
  .zbcf-outcome-actions { flex-direction: column-reverse; }
  .zbcf-outcome-actions .btn { width: 100%; }
}

/* ─── folding blocks ───────────────────────────────────────────────────────
   A page of five filled-in sources is one you cannot reach the bottom of, and
   a tall textarea catches the scroll wheel on the way past. Each block folds to
   its heading, which keeps the word count in view — so a closed block still
   says whether it holds anything. */
.fold > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: space-between; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 3px; }
.fold-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
.fold-title::before { content: '▸'; display: inline-block; margin-right: .5em; color: var(--z-muted);
  font-size: .8em; transition: transform 120ms ease; }
.fold[open] > summary .fold-title::before { transform: rotate(90deg); }
.fold-note { text-align: right; }
.fold-inline { padding: var(--sp-2) 0; border-top: 1px solid var(--z-line); }
.fold-inline:first-of-type { border-top: 0; padding-top: 0; }
.fold-inline > summary .fold-title { font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .fold-title::before { transition: none; } }
.fold-unsaved { margin-left: .4em; color: var(--z-amber, #d89b32); font-family: var(--font-mono); font-size: .7rem; }

/* ─── generated illustrations ──────────────────────────────────────────────
   Square and landscape sit side by side so they can be compared before one is
   chosen. The chosen one is marked in the accent rather than by position, so
   reordering the list never changes which looks picked. */
.img-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.img-card { margin: 0; padding: var(--sp-2); border: 1px solid var(--z-line); background: var(--z-surface-alt); }
.img-card.is-chosen { border-color: var(--z-cyan); }
.img-card img { display: block; width: 100%; height: auto; background: var(--z-surface); }
.img-card figcaption { margin-top: var(--sp-2); }

/* ─── reference attachments ────────────────────────────────────────────────
   Tiles rather than a list of filenames: you are choosing a picture, so the
   picture is what you should be looking at. */
.ref-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ref-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--z-line); background: var(--z-surface-alt); cursor: pointer; }
.ref-card.is-on { border-color: var(--z-cyan); }
.ref-card img { display: block; width: 100%; height: 88px; object-fit: contain; background: var(--z-surface); }
.ref-card .btn { align-self: flex-start; }

/* ─── the illustration on a post ───────────────────────────────────────────
   Below the headline, never above it: the title is what the page is for, and a
   picture pushed above the fold delays it. A square cover is capped by height
   rather than width so it cannot fill a laptop screen on its own. */
.news-cover { display: block; width: 100%; max-height: 62vh; margin: 0 auto;
  object-fit: contain; background: var(--z-surface-alt); border: 1px solid var(--z-line); }

/* In the archive the illustration is decoration beside the headline, so it
   takes a third column and collapses out of the way before the text does. */
.news-item.has-cover { grid-template-columns: 120px 148px 1fr; }
.news-thumb { display: block; }
.news-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--z-surface-alt); border: 1px solid var(--z-line); }
@media (max-width: 900px) { .news-item.has-cover { grid-template-columns: 120px 1fr; }
  .news-item.has-cover .news-thumb { grid-column: 1 / -1; max-width: 220px; } }
@media (max-width: 640px) { .news-item.has-cover { grid-template-columns: 1fr; } }

/* ─── the latest news, as a bar ────────────────────────────────────────────
   Deliberately the same shape and height as the giveaway bar directly below
   it: same 12-column grid, same min-height, same border, button in the last
   columns. The two sit together as a pair of thin bars under the hero rather
   than as two competing blocks. */
.home-news-bar { border-bottom: 1px solid var(--z-line); background: var(--z-surface); }
.home-news-bar-grid { display: grid; min-height: 210px; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--z-gutter); align-items: center; }

.home-news-bar-img { grid-column: 1; display: block; }
.home-news-bar-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--z-surface-alt); border: 1px solid var(--z-line); }

.home-news-bar-copy { grid-column: 2 / span 4; min-width: 0; }
.home-news-bar-copy .zbc-kicker { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.home-news-bar-date { color: var(--z-muted); }
.home-news-bar-copy h2 { margin: 0; font-size: clamp(1.3rem, 1.7vw, 1.9rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -.03em; }
.home-news-bar-copy h2 a { color: inherit; text-decoration: none; }
.home-news-bar-copy h2 a:hover { color: var(--z-cyan); }

.home-news-bar-note { grid-column: 6 / span 3; max-width: 36ch; margin: 0; color: var(--z-muted);
  font-size: 1rem; line-height: 1.55; }

/* 11 / span 2 is where the giveaway bar puts its button; anything else and
   the two bars' buttons do not line up down the page. */
.home-news-bar-actions { display: grid; grid-column: 11 / span 2; gap: 10px; justify-self: stretch; }
.home-news-bar-actions .zbc-button { min-height: 46px; }

@media (max-width: 1100px) {
  .home-news-bar-grid { grid-template-columns: 96px 1fr; row-gap: 18px; padding: 26px 0; }
  .home-news-bar-img, .home-news-bar-copy, .home-news-bar-note, .home-news-bar-actions { grid-column: auto; }
  .home-news-bar-img { grid-row: span 2; align-self: start; }
  .home-news-bar-note { max-width: none; }
  .home-news-bar-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}
@media (max-width: 560px) {
  .home-news-bar-grid { grid-template-columns: 1fr; }
  .home-news-bar-img { grid-row: auto; max-width: 140px; }
  .home-news-bar-actions { grid-auto-flow: row; }
}

/* ─── a post's illustration in its title band ──────────────────────────────
   The band already layers decorative art on the right behind a scrim. The
   post's own cover goes on the left, where the headline is — so it is kept
   quiet on purpose. This is the one place on the page where a picture competes
   with the words it illustrates, and the words win.

   z-index 3 matches the text layer rather than beating it: the art is earlier
   in the markup, so at equal z-index the headline paints on top. Anything
   lower would be buried by the scrim at z-index 2. */
@media (min-width: 901px) {
  .news-title-art {
    position: absolute; inset: 0 auto 0 0; z-index: 3;
    width: min(54%, 760px);
    background-image: var(--news-cover);
    background-position: center; background-size: cover;
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, #000 0 34%, rgba(0,0,0,.35) 70%, transparent 96%);
    mask-image: linear-gradient(90deg, #000 0 34%, rgba(0,0,0,.35) 70%, transparent 96%);
    pointer-events: none;
  }
  /* On the cream theme a dark illustration dirties the panel, so it sits back
     further there than it does on the dark one. */
  :root:not([data-theme="dark"]) .news-title-art { opacity: .16; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .news-title-art { opacity: .3; } }
  [data-theme="dark"] .news-title-art { opacity: .3; }

  /* The band carries it at this width; showing it again below the headline
     would be the same picture twice on one screen. */
  .news-cover-narrow { display: none; }
}

/* ─── the newest post, given room, at the foot of the page ─────────────────
   The thin bar under the hero points at this in one line; this is where it is
   actually presented. Restored after being moved up by mistake — the two are
   not alternatives, they are a pointer and a presentation. */
.home-news-lead { display: grid; align-items: center; grid-template-columns: 260px 1fr;
  gap: var(--z-gutter); margin-bottom: 34px; padding: 26px; text-decoration: none;
  border: 1px solid var(--z-line); background: var(--z-surface-alt); color: inherit;
  transition: border-color 140ms ease, background 140ms ease; }
.home-news-lead:hover { border-color: var(--z-cyan); background: var(--z-surface); }
.home-news-lead:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 3px; }
.home-news-lead-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--z-surface); border: 1px solid var(--z-line); }
.home-news-lead-copy { display: block; min-width: 0; }
.home-news-lead-copy time { display: block; margin-bottom: 10px; color: var(--z-muted);
  font: 600 .82rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.home-news-lead-copy h3 { margin: 0 0 12px; font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.15; }
.home-news-lead-copy p { max-width: 62ch; margin: 0 0 16px; color: var(--z-muted); line-height: 1.6; }
.home-news-lead:hover .zbc-text-link { color: var(--z-cyan); }
@media (max-width: 760px) {
  .home-news-lead { grid-template-columns: 1fr; padding: 18px; }
  .home-news-lead-img img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .home-news-lead { transition: none; } }

/* ─── the bounty ledger ────────────────────────────────────────────────────
   An accounting table: the reporter's name and the amounts are what a reader
   scans for, so both are given the mono face and the rest stays out of the
   way. Amounts are right-aligned because they are compared down the column. */
.bounty-table { width: 100%; border-collapse: collapse; }
.bounty-table th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--z-line);
  color: var(--z-muted); font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; text-align: left; white-space: nowrap; }
.bounty-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--z-line);
  vertical-align: top; }
.bounty-table tr:last-child td { border-bottom: 0; }
.bounty-who { font-family: var(--font-mono); font-size: .85rem; white-space: nowrap; }
.bounty-status { font-size: .8rem; color: var(--z-muted); white-space: nowrap;
  border-bottom: 1px dotted var(--z-line); cursor: help; }
.bounty-table .text-right { text-align: right; }
@media (max-width: 720px) { .bounty-table th, .bounty-table td { padding-right: 10px; } }
.bounty-from { display: block; margin-top: 4px; color: var(--z-muted); font-size: .76rem; }

/* ─── a field the server refused ─────────────────────────────────────────────
   Reported: "Usually when something like this happens, it automatically scrolls
   to the point where the issue is and makes it red. It doesn't pretend
   everything is okay. But the message wasn't very clear — reading it, it didn't
   highlight the things that I need to select."

   NOTHING HERE IS COLOUR ALONE. The ring is one of four signals on a refused
   control, and the only one a colourblind reader cannot use: the other three
   are the message in words under it, the "!" in front of that message, and
   aria-invalid on the control itself, which is what a screen reader announces.
   Deleting this block degrades the look and costs nobody the information. */
.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 28%, transparent);
  /* The sticky admin bar sits over the top of the page, so a control scrolled
     to the top of the viewport lands underneath it. Same offset .admin-anchor
     uses, for the same reason. */
  scroll-margin-top: calc(var(--z-header-h) + var(--admin-bar-h) + 14px);
}
.form-field .field-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red);
}
/* A glyph, not a dot: a coloured bullet is the same information as the ring and
   is lost to the same readers. */
.form-field .field-error-mark {
  flex: 0 0 auto;
  width: 1.15em; height: 1.15em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 999px;
  font: 700 .78em/1 var(--font-mono);
}
.form-errors-list { margin: var(--sp-2) 0 0; padding-left: 1.25rem; }
.form-errors-list li { margin-bottom: var(--sp-2); }
.form-errors-list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-errors-list a:hover, .form-errors-list a:focus-visible { text-decoration-thickness: 2px; }
.form-errors-detail { margin-top: 4px; }
.form-errors-detail summary { cursor: pointer; color: var(--ink-muted); font-size: var(--fs-xs); }
.form-errors-detail p { margin: 4px 0 0; color: var(--ink-muted); word-break: break-word; }
.form-errors-how { margin: var(--sp-2) 0 0; color: var(--ink-muted); }
.form-errors:focus { outline: none; }

/* Ideas: the signed-out action must wrap in narrow and translated layouts. */
.ideas-page-title .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}