/* ============================================================
   ALCHEMI · SITE COMPONENTS
   Requires tokens.css. Breakpoints: 960px (tablet), 720px (mobile).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 48px); }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-base) var(--ease-standard); }
a:hover { color: var(--ink-600); }
:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container-max) + var(--page-gutter) * 2); margin: 0 auto; padding: 0 var(--page-gutter); }

/* ---------- Type utilities ---------- */
.label {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-medium);
  line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-primary);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.tagline { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.brand__glyph { width: 32px; height: 28px; flex: none; }
.brand__wordmark { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 20px; letter-spacing: -0.01em; line-height: 1; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.site-header__inner { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  position: relative; padding: 4px 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.02em;
  color: var(--text-secondary); text-decoration: none;
}
.nav__link:hover { color: var(--text-primary); }
.nav__link[aria-current="page"] { color: var(--text-primary); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--border-strong); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: var(--stroke-base) solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--duration-base) var(--ease-standard); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--primary:active { background: var(--accent-press); border-color: var(--accent-press); }
.btn--primary:focus-visible { outline-color: var(--accent); }
.btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn--secondary:hover { background: var(--color-obsidian); color: var(--text-inverse); }
.btn--lg { height: 56px; padding: 0 var(--space-5); font-size: var(--text-body); }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }

.cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.cta__note { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 400px; }

/* ---------- Tag / badge ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px var(--space-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
.tag--solid { background: var(--color-obsidian); border-color: var(--color-obsidian); color: var(--text-inverse); }
.tag--strong { border-color: var(--border-strong); color: var(--text-primary); }

/* ---------- Sections ---------- */
.section { padding: var(--section-space) 0; border-top: 1px solid var(--border-subtle); }
.section--subtle { background: var(--bg-subtle); border-top-color: var(--border-default); }
.section--inverse { background: var(--bg-inverse); color: var(--text-inverse); border-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--grid-gutter); }
.section__head { margin-bottom: var(--section-head-gap); align-items: baseline; }
.section__index { padding-top: 12px; }
.section__tagline { color: var(--text-primary); margin-bottom: var(--space-3); }
.section__title { font-size: var(--text-section); letter-spacing: -0.02em; max-width: 720px; }
.section--inverse .label { color: var(--text-inverse-secondary); }
.section--inverse .section__title { color: var(--text-inverse); }

/* Blueprint grid texture — the only permitted gradient */
.blueprint {
  background-color: var(--bg-subtle);
  background-image: linear-gradient(var(--ink-150) 1px, transparent 1px), linear-gradient(90deg, var(--ink-150) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-8) 0 var(--space-9); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-7); align-items: end; }
.hero__title { font-size: var(--text-hero); line-height: 1.04; letter-spacing: var(--tracking-display); margin: var(--space-4) 0; }
.hero__lead { font-size: var(--text-lead); line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--space-6); }

.timeline { border: 1px solid var(--border-default); padding: var(--space-4); }
.timeline__head { display: flex; justify-content: space-between; padding-bottom: var(--space-3); }
.timeline__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); background: transparent; }
.timeline__when { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
.timeline__what { font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.timeline__row:last-child .timeline__when, .timeline__row:last-child .timeline__what { color: var(--text-primary); }
.timeline__row:last-child { border-top: 2px solid var(--border-strong); }

/* ---------- Outcome grid (3 cells, 1px rules) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); }
.cell { background: var(--bg-base); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 280px; transition: background var(--duration-base) var(--ease-standard); }
.cell:hover { background: var(--ink-050); }
.cell__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-6); }
.cell__title { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); }
.cell__body { color: var(--text-secondary); }

/* ---------- Steps ---------- */
.steps { border-top: 2px solid var(--border-strong); counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 7fr); gap: var(--grid-gutter); align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); }
.step__num { font-family: var(--font-mono); font-size: 32px; font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.02em; }
.step__text { font-size: var(--text-lead); line-height: 1.45; max-width: 600px; }

/* ---------- The deal (inverse) ---------- */
.clauses { border-top: 1px solid var(--border-inverse); }
.clause { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-inverse); align-items: baseline; }
.clause__text { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: var(--tracking-tight); max-width: 760px; }
.clause:last-child .clause__text { color: var(--text-inverse); }
.terms { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.terms li { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-inverse); }
.terms li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--text-inverse); flex: none; }
.terms a { color: var(--text-inverse); }
.terms a:hover { color: var(--ink-300); }

/* ---------- Who is behind this ---------- */
.bio { display: flex; flex-direction: column; gap: var(--space-5); max-width: 760px; }
.bio__record { font-size: var(--text-h4); line-height: 1.45; color: var(--text-secondary); }
.bio__statement { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: var(--tracking-tight); }
.bio__note { padding-top: var(--space-4); border-top: 1px solid var(--border-default); }

/* ---------- Closing CTA ---------- */
.closing { position: relative; overflow: hidden; padding: var(--section-space) 0; border-top: 1px solid var(--border-default); }
.closing > .container { position: relative; z-index: 1; }
.closing__mark { position: absolute; right: -48px; bottom: -72px; width: 520px; height: auto; opacity: 0.07; pointer-events: none; }
.closing__title { font-size: var(--text-section); letter-spacing: -0.02em; max-width: 760px; margin: var(--space-4) 0 var(--space-6); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-strong); padding: var(--space-6) 0 var(--space-7); }
.footer__grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-5); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.footer__links a { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.footer__links a:hover { color: var(--text-primary); text-decoration: underline; }

/* ---------- Inner page head ---------- */
.page-head { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.page-head__title { font-size: var(--text-h1); letter-spacing: -0.02em; margin: var(--space-4) 0 var(--space-4); max-width: 820px; }
.page-head__lead { font-size: var(--text-lead); line-height: 1.5; color: var(--text-secondary); max-width: 640px; }
.page-head__meta { margin-top: var(--space-5); }

/* ---------- Data handling: document layout ---------- */
.doc { padding: var(--space-7) 0 var(--section-space); }
.toc { position: sticky; top: calc(var(--header-height) + 48px); display: flex; flex-direction: column; gap: 2px; align-self: start; }
.toc a { display: grid; grid-template-columns: 32px 1fr; padding: 8px 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.toc a:hover { color: var(--text-primary); }
.doc__body { max-width: 720px; }
.doc__section { padding: var(--space-6) 0; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-3); }
.doc__section:first-child { padding-top: 0; border-top: 0; }
.doc__section h2 { font-size: var(--text-h4); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.doc__section p { color: var(--text-secondary); }
.rule-box { border: 2px solid var(--border-strong); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.rule-box h2 { font-size: var(--text-h4); line-height: var(--leading-snug); }
.rule-box p { color: var(--text-secondary); }

/* ---------- Demo ---------- */
.demo-strip { position: sticky; top: var(--header-height); z-index: 15; background: var(--bg-inverse); color: var(--text-inverse); }
.demo-strip__inner { min-height: 40px; display: flex; align-items: center; gap: var(--space-3); padding-top: 8px; padding-bottom: 8px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.demo-strip__inner::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; flex: none; }

.panel-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); margin-top: var(--space-6); }
.panel-index a { background: var(--bg-base); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: baseline; text-decoration: none; font-weight: var(--weight-semibold); transition: background var(--duration-base) var(--ease-standard); }
.panel-index a:hover { background: var(--bg-subtle); color: var(--text-primary); }

.demo { padding-top: var(--space-7); padding-bottom: var(--section-space); display: flex; flex-direction: column; gap: var(--space-8); }
.panel-block { display: flex; flex-direction: column; gap: var(--space-4); }
.panel-block__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.panel-block__title { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); margin-top: var(--space-2); }
.panel-block__desc { color: var(--text-secondary); max-width: 640px; margin-top: var(--space-2); }

.panel { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.panel__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border-default); border-bottom: 1px solid var(--border-default); }
.stat { background: var(--bg-base); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value { font-family: var(--font-mono); font-size: 32px; font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.02em; }
.stat__value small { font-size: 16px; color: var(--text-secondary); letter-spacing: 0; }

/* Table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; }
.table th {
  text-align: left; vertical-align: bottom; white-space: nowrap; padding: 12px var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
}
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: var(--space-4); }
.table th:last-child, .table td:last-child { padding-right: var(--space-4); }
.table tbody tr:not(.msg-row):hover td { background: var(--ink-050); }
.table .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: var(--weight-semibold); }
.table .sub { display: block; color: var(--text-secondary); font-size: var(--text-xs); margin-top: 2px; }
.table tfoot td { border-bottom: 0; border-top: 1px solid var(--border-strong); font-weight: var(--weight-semibold); }
.table .right { text-align: right; }

.msg-row td { background: var(--bg-subtle); padding: var(--space-4); border-bottom: 1px solid var(--border-default); }
.msg { background: var(--bg-base); border: 1px solid var(--border-default); max-width: 720px; }
.msg__meta { display: grid; grid-template-columns: 80px 1fr; gap: 4px var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.msg__meta b { font-weight: var(--weight-medium); color: var(--text-primary); }
.msg__body { padding: var(--space-3); font-size: var(--text-sm); color: var(--text-primary); display: flex; flex-direction: column; gap: 12px; }

.wait { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.wait__bar { width: 64px; height: 4px; background: var(--ink-150); position: relative; flex: none; }
.wait__bar span { position: absolute; inset: 0 auto 0 0; background: var(--dataviz-1); }

/* Forecast */
.forecast { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.forecast__block { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.forecast__block + .forecast__block { border-left: 1px solid var(--border-default); }
.forecast__risks { grid-column: 1 / -1; border-top: 1px solid var(--border-default); padding: 0; }
.forecast__risks > .label { padding: var(--space-4) var(--space-4) 0; }
.kv { display: flex; flex-direction: column; }
.kv__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.kv__row:last-child { border-bottom: 0; }
.kv__row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.chart { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); align-items: end; height: 160px; border-bottom: 1px solid var(--border-strong); }
.chart__bar { background: var(--dataviz-1); }
.chart__bar--forecast { background: var(--dataviz-6); border: 1px dashed var(--dataviz-3); border-bottom: 0; }
.chart__axis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; background: var(--dataviz-1); }
.legend i.f { background: var(--dataviz-6); border: 1px dashed var(--dataviz-3); }

/* ---------- Mobile sticky CTA (shown by site.js, ≤720px only) ---------- */
.sticky-cta { display: none; }

/* ---------- Motion (only when JS runs and motion is allowed) ---------- */
.timeline__rail { height: 2px; background: var(--ink-200); margin-bottom: var(--space-2); overflow: hidden; }
.timeline__rail span { display: block; height: 100%; background: var(--border-strong); transform-origin: left; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__grid > div > * { animation: rise var(--duration-slow) var(--ease-standard) both; }
  .js .hero__grid > div > :nth-child(2) { animation-delay: 80ms; }
  .js .hero__grid > div > :nth-child(3) { animation-delay: 160ms; }
  .js .hero__grid > div > :nth-child(4) { animation-delay: 240ms; }
  .js .timeline__rail span { animation: grow 1200ms var(--ease-standard) 400ms both; }
  .js .timeline__row { animation: rise var(--duration-slow) var(--ease-standard) both; }
  .js .timeline__row:nth-of-type(3) { animation-delay: 500ms; }
  .js .timeline__row:nth-of-type(4) { animation-delay: 900ms; }
  .js .timeline__row:nth-of-type(5) { animation-delay: 1300ms; }
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .timeline { max-width: 480px; }
  .split { grid-template-columns: 1fr; gap: var(--space-3); }
  .section__index { padding-top: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .cell { min-height: 0; }
  .cell__top { padding-bottom: var(--space-4); }
  .step { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--space-2); }
  .step__when { grid-column: 2; grid-row: 1; }
  .step__text { grid-column: 2; }
  .step__num { grid-row: 1 / span 2; font-size: 24px; }
  .toc { display: none; }
  .closing__mark { display: none; }
  .forecast { grid-template-columns: 1fr; }
  .forecast__block + .forecast__block { border-left: 0; border-top: 1px solid var(--border-default); }
}

@media (max-width: 720px) {
  .nav { gap: var(--space-3); }
  .nav__link { font-size: var(--text-xs); }
  .brand__glyph { width: 28px; height: 24px; }
  .brand__wordmark { font-size: 18px; }
  .hero { padding: var(--space-6) 0 var(--space-8); }
  .btn--lg { width: 100%; padding: 0 var(--space-3); font-size: var(--text-sm); }
  .cta { align-items: stretch; }
  .cell { padding: var(--space-4); }
  .clause { gap: var(--space-2); }
  .terms { flex-direction: column; }
  .panel-index { grid-template-columns: 1fr; }
  .page-head { padding: var(--space-6) 0 var(--space-6); }
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px var(--page-gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-base); border-top: 1px solid var(--border-default);
    transform: translateY(100%); transition: transform var(--duration-slow) var(--ease-standard);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn { width: 100%; height: 48px; }

  /* Tables collapse to stacked cards: each <td> needs data-label */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tfoot { display: block; }
  .table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
  .table--stack td { padding: 0 !important; border: 0; text-align: left; }
  .table--stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
  .table--stack td.full { grid-column: 1 / -1; }
  .table--stack td.full::before { display: none; }
  .table--stack .num { text-align: left; }
  .table--stack .wait { justify-content: flex-start; }
  .table--stack tbody tr:not(.msg-row):hover td { background: transparent; }
  .table--stack tr.msg-row { display: block; background: var(--bg-subtle); }
  .table--stack tr.msg-row[hidden] { display: none; }
  .table--stack tfoot tr { border-top: 1px solid var(--border-strong); border-bottom: 0; }
  .table--stack tfoot td { border-top: 0; }
  .msg__meta { grid-template-columns: 64px 1fr; }
  .chart { height: 120px; gap: 4px; }
  .chart__axis { gap: 4px; }
}

/* ============================================================
   ROUND 2 (8 October): See-the-leak tabs, week strip, pointer, About page
   ============================================================ */

/* ---------- Pointer (home → About) ---------- */
.pointer { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.pointer__text { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: var(--tracking-tight); }
.pointer__link { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-sm); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid var(--border-strong); }
.pointer__link svg { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.pointer__link:hover svg { transform: translateX(4px); }

/* ---------- Tabs (See the leak). Links to the demo without JS; JS turns them into tabs ---------- */
.tabs { display: flex; flex-direction: column; gap: var(--space-4); }
.tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); }
.tabs__tab {
  display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--bg-base); color: var(--text-secondary); font-weight: var(--weight-semibold); text-decoration: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-body); text-align: left;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.tabs__tab:hover { background: var(--bg-subtle); color: var(--text-primary); }
.tabs__tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.tabs__tab .label { color: inherit; }
.tabs__pane { display: none; flex-direction: column; gap: var(--space-3); }
.tabs__pane.is-active { display: flex; }
.tabs__caption { font-size: var(--text-sm); color: var(--text-secondary); max-width: 720px; }
.tabs__caption a { white-space: nowrap; }
.tabs .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Week strip ---------- */
.week { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.cell--week { min-height: 0; }
.cell--week .cell__top { padding-bottom: var(--space-3); }

/* ---------- About page ---------- */
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-7); align-items: center; }
.about-hero__grid .ph--45 { max-width: 360px; justify-self: end; }
.page-head__link { font-family: var(--font-mono); text-transform: none; letter-spacing: var(--tracking-label); }
.ph { margin: 0; width: 100%; background: var(--bg-subtle); border: 1px solid var(--border-default); display: flex; align-items: flex-end; padding: var(--space-3); }
.ph--45 { aspect-ratio: 4 / 5; }
.ph--169 { aspect-ratio: 16 / 9; }
.ph__img { display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid var(--border-default); }
.ph__img--45 { aspect-ratio: 4 / 5; }
.ph__img--169 { aspect-ratio: 16 / 9; }
/* Photo treatment: black and white, an offset obsidian frame, a mono caption with an aero mark */
.photo { margin: 0; position: relative; width: 100%; }
.photo .ph__img { filter: grayscale(1) contrast(1.05); transition: filter var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); border: 1px solid var(--ink-900); box-shadow: 8px 8px 0 var(--ink-900); }
.photo__cap { display: block; margin-top: var(--space-3); padding-left: var(--space-2); border-left: 2px solid var(--aero-blue); color: var(--text-secondary); }
.photo--wide .ph__img { box-shadow: 12px 12px 0 var(--ink-900); }
.about-how__photo.photo { max-width: 360px; justify-self: end; }
@media (max-width: 960px) { .about-how__photo.photo { justify-self: start; } .photo .ph__img { box-shadow: 6px 6px 0 var(--ink-900); } }
.about-photo { padding: var(--space-7) 0; }
.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.prose p { color: var(--text-secondary); }
.prose__lead { font-size: var(--text-h4); line-height: 1.45; color: var(--text-primary) !important; }
.prose__note { font-family: var(--font-mono); font-size: var(--text-sm); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.roles { border-top: 2px solid var(--border-strong); }
.role { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2) var(--grid-gutter); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.role__when { grid-row: 1 / span 2; padding-top: 4px; }
.role__title { grid-column: 2; font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.role__text { grid-column: 2; color: var(--text-secondary); max-width: 640px; }
.method__grid { margin-top: var(--space-6); }
.method__grid .cell { min-height: 0; }
.about-how { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-7); align-items: start; margin-top: var(--space-7); }
.about-bio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--grid-gutter); align-items: start; }
.about-bio__side { display: flex; flex-direction: column; gap: var(--space-3); max-width: 280px; }
.about-bio__name { font-weight: var(--weight-semibold); font-size: var(--text-h4); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin-top: var(--space-2); }
.about-bio .roles { margin-top: var(--space-3); }
.about-bio .role { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding: var(--space-3) 0; }
.about-bio .role__when { grid-row: auto; }
.about-bio .role__title { font-size: var(--text-body); }
.about-how__photo { max-width: 360px; justify-self: end; }
.about-how .step { grid-template-columns: 64px minmax(0, 2fr) minmax(0, 7fr); }
.quote { margin: 0; max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); }
.quote__text { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); font-size: var(--text-h4); line-height: 1.45; }

@media (max-width: 960px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-hero__grid .ph--45 { max-width: 320px; justify-self: start; }
  .about-how__photo { justify-self: start; }
  .about-how { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-bio { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-bio .role { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr; }
  .role__when { grid-row: auto; }
  .role__title, .role__text { grid-column: 1; }
}
@media (max-width: 720px) {
  .tabs__list { grid-template-columns: 1fr; }
  .tabs__tab { padding: 12px var(--space-3); }
  .tabs .stats { grid-template-columns: 1fr; }
  .pointer__text { font-size: var(--text-h4); }
  .quote__text { font-size: var(--text-lead); }
}

/* ============================================================
   ROUND 3 (9 October): wider page, full-bleed chrome, sticky
   section legend, the alchemising glyph, bio photo
   ============================================================ */

/* ---------- Full-bleed header and footer: wordmark at the far left, nav at the far right ---------- */
.site-header > .container, .site-footer > .container { max-width: none; }

/* ---------- Wider grid: headlines keep a readable measure ---------- */
.section__title { max-width: 880px; }
.hero__title { max-width: 12.5em; }      /* two lines at 64px; never more than ~8 words a line */
.hero__lead { max-width: 36em; }

/* ---------- Sticky section legend (desktop) ----------
   Markup: <div class="indexed" data-indexed> wraps the indexed sections; its first child is
   <div class="secnav-track"><div class="container"><nav class="secnav" data-secnav>…links…</nav></div></div>.
   The track overlays the wrapper, so the nav sticks in the left column for exactly that stretch.
   Without JS the links still jump to their sections; site.js only marks the current one.
   Below 960px the legend is hidden and the in-page strip (.panel-index--strip) takes over. */
.indexed { position: relative; --legend-offset: var(--section-space); }
.indexed--head { --legend-offset: var(--space-8); }
.secnav-track { display: none; }
.secnav__link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  padding: 10px 0; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.02em;
  /* The legend blends with "difference" so it reads on white, alabaster and the obsidian deal band.
     Colours are therefore written as the inverse of what shows on white: #A19C94 shows as ink-500, #EEEEEE as ink-900. */
  color: #A19C94; border-bottom: 1px solid #1D1B17;
  transition: color var(--duration-base) var(--ease-standard);
}
.secnav__link .label { color: inherit; font-size: var(--text-xs); }
.secnav__link:hover, .secnav__link.is-current { color: #EEEEEE; }
.secnav__name { position: relative; justify-self: start; padding-bottom: 2px; }
.secnav__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #EEEEEE; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-standard); }
.secnav__link.is-current .secnav__name::after { transform: scaleX(1); }

@media (min-width: 961px) {
  .secnav-track { display: block; position: absolute; inset: 0; pointer-events: none; }
  .secnav-track > .container { height: 100%; padding-top: var(--legend-offset); padding-bottom: var(--section-space); }
  .secnav {
    position: sticky; top: calc(var(--header-height) + 48px);
    width: calc((100% - var(--grid-gutter)) * 0.25); max-width: 260px;
    display: flex; flex-direction: column; pointer-events: auto; mix-blend-mode: difference;
  }
  /* The legend carries the numbers, so the per-section index labels step aside */
  .indexed .section__index { visibility: hidden; }
  /* Everything inside an indexed section sits in the right nine columns, clear of the legend */
  .indexed section > .container:not(.split) > :not(.split) { width: auto; margin-left: calc((100% - var(--grid-gutter)) * 0.25 + var(--grid-gutter)); }
  .indexed .clause { grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); }
  .indexed .step { grid-template-columns: 64px minmax(0, 2fr) minmax(0, 7fr); }
  .panel-index--strip { display: none; }
}
.panel-index--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .panel-index--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .panel-index--strip { grid-template-columns: 1fr; } }

/* ---------- About: method steps beside the alchemising glyph ---------- */
@media (min-width: 961px) { .about-how { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.about-how .step { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--space-2); }
.about-how .step__num { grid-row: 1 / span 2; }
.about-how .step__when, .about-how .step__text { grid-column: 2; }

/* ---------- The alchemising glyph ----------
   A reusable figure: the Alchemi mark traced as a wireframe (8 strokes, 400×400 viewBox) that draws
   itself in four stages, holds, fades and repeats every 12 s. Put data-build on a wrapper that holds
   both the figure and an <ol class="steps">; stage n lights the mark under step n's number.
   States: no JS or reduced motion → finished mark, every step marked (ink).
           JS + motion → hidden until in view (.is-live), paused off screen (.is-paused).
   Aero is used only for the stroke being drawn and the live step mark. */
.glyph-build { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 440px; justify-self: end; }
.glyph-build__plate { background: var(--bg-base); border: 1px solid var(--border-default); padding: var(--space-6) var(--space-5); }
.glyph-build__svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.glyph-build__svg path { fill: none; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.glyph-build__ghost path { stroke: var(--ink-150); stroke-width: 1; }
.glyph-build__lines path { stroke: var(--ink-900); stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.glyph-build__cap { color: var(--text-secondary); }
[data-build] .step__num { position: relative; justify-self: start; }
[data-build] .step__num::after { content: ""; position: absolute; left: 0; top: calc(100% + 12px); width: 24px; height: 2px; background: var(--ink-900); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-build]:not(.is-done) .glyph-build__lines path { stroke-dashoffset: 1; }
  .js [data-build]:not(.is-done) .step__num::after { transform: scaleX(0); }
  .js [data-build].is-live .glyph-build__lines { animation: build-fade 12s linear infinite; }
  .js [data-build].is-live .glyph-build__lines [data-stage="1"] { animation: build-1 12s linear infinite; }
  .js [data-build].is-live .glyph-build__lines [data-stage="2"] { animation: build-2 12s linear infinite; }
  .js [data-build].is-live .glyph-build__lines [data-stage="3"] { animation: build-3 12s linear infinite; }
  .js [data-build].is-live .glyph-build__lines [data-stage="4"] { animation: build-4 12s linear infinite; }
  .js [data-build].is-live .step:nth-child(1) .step__num::after { animation: mark-1 12s linear infinite; }
  .js [data-build].is-live .step:nth-child(2) .step__num::after { animation: mark-2 12s linear infinite; }
  .js [data-build].is-live .step:nth-child(3) .step__num::after { animation: mark-3 12s linear infinite; }
  .js [data-build].is-live .step:nth-child(4) .step__num::after { animation: mark-4 12s linear infinite; }
  .js [data-build].is-paused .glyph-build__lines, .js [data-build].is-paused .glyph-build__lines path,
  .js [data-build].is-paused .step__num::after { animation-play-state: paused; }
}
/* 12 s cycle. Stage windows: 1 = 0.5–2.3 s, 2 = 2.6–4.2 s, 3 = 4.5–6.1 s, 4 = 6.4–8.0 s;
   hold to 10.6 s, fade to 11.4 s, blank to 12 s. 1 s = 8.333%. A stroke turns ink 0.6 s after it lands. */
@keyframes build-fade { 0%, 88.33% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes build-1 {
  0% { stroke-dashoffset: 1; stroke: var(--aero-blue); }
  4.17% { stroke-dashoffset: 1; stroke: var(--aero-blue); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  19.17% { stroke-dashoffset: 0; stroke: var(--aero-blue); }
  24.17%, 100% { stroke-dashoffset: 0; stroke: var(--ink-900); }
}
@keyframes build-2 {
  0%, 21.67% { stroke-dashoffset: 1; stroke: var(--aero-blue); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  35% { stroke-dashoffset: 0; stroke: var(--aero-blue); }
  40%, 100% { stroke-dashoffset: 0; stroke: var(--ink-900); }
}
@keyframes build-3 {
  0%, 37.5% { stroke-dashoffset: 1; stroke: var(--aero-blue); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  50.83% { stroke-dashoffset: 0; stroke: var(--aero-blue); }
  55.83%, 100% { stroke-dashoffset: 0; stroke: var(--ink-900); }
}
@keyframes build-4 {
  0%, 53.33% { stroke-dashoffset: 1; stroke: var(--aero-blue); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  66.67% { stroke-dashoffset: 0; stroke: var(--aero-blue); }
  71.67%, 100% { stroke-dashoffset: 0; stroke: var(--ink-900); }
}
/* Step marks: grow in aero as their stage lands, turn ink when the next stage lands, fade with the mark */
@keyframes mark-1 {
  0%, 19.17% { transform: scaleX(0); background: var(--aero-blue); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  23.33%, 35% { transform: scaleX(1); background: var(--aero-blue); }
  40%, 88.33% { transform: scaleX(1); background: var(--ink-900); opacity: 1; }
  95%, 100% { transform: scaleX(1); background: var(--ink-900); opacity: 0; }
}
@keyframes mark-2 {
  0%, 35% { transform: scaleX(0); background: var(--aero-blue); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  39.17%, 50.83% { transform: scaleX(1); background: var(--aero-blue); }
  55.83%, 88.33% { transform: scaleX(1); background: var(--ink-900); opacity: 1; }
  95%, 100% { transform: scaleX(1); background: var(--ink-900); opacity: 0; }
}
@keyframes mark-3 {
  0%, 50.83% { transform: scaleX(0); background: var(--aero-blue); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55%, 66.67% { transform: scaleX(1); background: var(--aero-blue); }
  71.67%, 88.33% { transform: scaleX(1); background: var(--ink-900); opacity: 1; }
  95%, 100% { transform: scaleX(1); background: var(--ink-900); opacity: 0; }
}
@keyframes mark-4 {
  0%, 66.67% { transform: scaleX(0); background: var(--aero-blue); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  70.83%, 88.33% { transform: scaleX(1); background: var(--aero-blue); opacity: 1; }
  95%, 100% { transform: scaleX(1); background: var(--aero-blue); opacity: 0; }
}

/* ---------- About Arfan: portrait column + text inside the right nine columns ---------- */
.about-bio { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); }
.about-bio .photo .ph__img { box-shadow: 6px 6px 0 var(--ink-900); }
/* The working photo sits between the first and second bio paragraphs */
.bio-photo { max-width: 320px; }
.about-bio .prose__note { border-top: 0; padding-top: 0; }   /* the roles list's last rule already closes the block */
@media (min-width: 961px) {
  .about-bio .prose { display: block; }
  .about-bio .prose > * + * { margin-top: var(--space-4); }
  .bio-photo { float: right; width: 240px; margin: 6px 6px var(--space-4) var(--space-6); }
  .about-bio .roles, .about-bio .prose__note { clear: right; }
}
@media (max-width: 960px) {
  .glyph-build { justify-self: start; max-width: 360px; }
  .about-bio { grid-template-columns: 1fr; }
}

/* ---------- Demo: data colour (round 3 addendum) ----------
   Same convention as the report pages (tools/report/report.css): status colours appear only inside
   data (cells, tags, meters, bars) and never as body text except error, which meets AA on white.
   Thresholds: waiting over 14 days or one of the largest fees = error; 7 to 14 days = warning;
   under 7 days = no colour. Everything else on the page stays ink on white. */
:root {
  --status-success: #2E7D54; --status-warning: #B8791B; --status-error: #D23A3A;
  --tint-success: #EAF3EE; --tint-warning: #F8F0E3; --tint-error: #FBEAEA; --aero-tint: #E8F7FF;
}
.table td.t-warn { background: var(--tint-warning); box-shadow: inset 2px 0 0 var(--status-warning); }
.table td.t-err  { background: var(--tint-error);   box-shadow: inset 2px 0 0 var(--status-error); }
.table tbody tr:not(.msg-row):hover td.t-warn { background: var(--tint-warning); }
.table tbody tr:not(.msg-row):hover td.t-err  { background: var(--tint-error); }
.wait__bar { height: 3px; }
.wait-cell .wait__bar span { background: var(--ink-400); }
.wait-cell.t-warn .wait__bar span { background: var(--status-warning); }
.wait-cell.t-err .wait__bar span { background: var(--status-error); }
.tag--level { color: var(--text-primary); }
.tag--level::before { content: ""; width: 6px; height: 6px; flex: none; }
.tag--high   { background: var(--tint-error);   border-color: var(--status-error); }
.tag--high::before   { background: var(--status-error); }
.tag--medium { background: var(--tint-warning); border-color: var(--status-warning); }
.tag--medium::before { background: var(--status-warning); }
.tag--low    { background: var(--tint-success); border-color: var(--status-success); }
.tag--low::before    { background: var(--status-success); }
/* Chart: actual ink, forecast aero outline, target band aero tint, at-risk bar warning */
.chart { position: relative; }
.chart__goal { position: absolute; left: 0; right: 0; bottom: 60%; height: 15%; background: var(--aero-tint); border-top: 1px solid var(--aero-blue); border-bottom: 1px solid var(--aero-blue); }
.chart__bar { position: relative; }
.chart__bar--forecast { background: var(--bg-base); border: 1.5px solid var(--aero-blue); border-bottom: 0; }
.chart__bar--risk { background: var(--tint-warning); border-color: var(--status-warning); }
.legend i.f { background: var(--bg-base); border: 1.5px solid var(--aero-blue); }
.legend i.sw-goal { background: var(--aero-tint); border: 1px solid var(--aero-blue); }
.legend i.sw-risk { background: var(--tint-warning); border: 1.5px solid var(--status-warning); }
.legend i.sw-warn { background: var(--tint-warning); border: 0; box-shadow: inset 2px 0 0 var(--status-warning); }
.legend i.sw-err  { background: var(--tint-error); border: 0; box-shadow: inset 2px 0 0 var(--status-error); }
.legend i.sw-high, .legend i.sw-med, .legend i.sw-low { width: 8px; height: 8px; }
.legend i.sw-high { background: var(--status-error); }
.legend i.sw-med { background: var(--status-warning); }
.legend i.sw-low { background: var(--status-success); }
.legend i.sw-goal { width: 16px; height: 8px; }
.legend i.sw-meter { width: 24px; height: 3px; background: var(--ink-400); }
.panel__legend { padding: 12px var(--space-4); border-top: 1px solid var(--border-subtle); gap: var(--space-2) var(--space-4); }
/* Disclaimer strip: a sentence, so sentence case */
.demo-strip__inner { text-transform: none; letter-spacing: 0.02em; line-height: 1.45; }
@media (max-width: 720px) {
  .table--stack td.t-warn, .table--stack td.t-err { justify-self: start; padding: 4px 8px !important; }
  .panel__legend { padding: 12px var(--space-3); }
}

/* ---------- Demo: what the full build adds, previews of the full build (second addendum) ----------
   Previews are honest: filter chips are plain text (not controls), and preview buttons are real
   <button disabled> with "In the full build" on hover and for screen readers. Nothing pretends to work. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.demo-strip__inner { justify-content: space-between; }
.demo-strip__inner::before { display: none; }
.demo-strip__text { display: flex; gap: var(--space-3); align-items: baseline; max-width: 880px; }
.demo-strip__text::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; flex: none; transform: translateY(1px); }
.demo-strip__cta { flex: none; }
.adds { margin-top: var(--space-5); border: 1px solid var(--border-default); padding: var(--space-4); }
.adds__title { color: var(--text-primary); margin-bottom: var(--space-3); }
.adds__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.adds__list li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: 1.45; }
.adds__list li::before { content: ""; width: 6px; height: 6px; background: var(--ink-900); flex: none; transform: translateY(-2px); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.forecast__risks .filters { padding-top: var(--space-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); border: 1px dashed var(--ink-300); border-radius: var(--radius-sm); }
.chip::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.filters__note { margin-left: auto; color: var(--text-tertiary); }
.row-actions { display: inline-flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.msg__actions { padding: 0 var(--space-3) var(--space-3); }
.btn.is-preview { position: relative; opacity: 0.45; cursor: not-allowed; }
.btn.is-preview:hover { background: transparent; color: var(--text-primary); }
.btn.is-preview::after {
  content: attr(data-hint); position: absolute; right: 0; bottom: calc(100% + 6px); white-space: nowrap; pointer-events: none;
  padding: 4px 8px; background: var(--color-obsidian); color: var(--text-inverse); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.btn.is-preview:hover::after { opacity: 1; }
.walk { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-6) 0 0; border-top: 2px solid var(--border-strong); }
.walk__text { font-size: var(--text-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.3; margin-top: var(--space-2); max-width: 640px; }
@media (max-width: 720px) {
  .demo-strip__cta { display: none; }   /* the bottom CTA and the mobile sticky CTA carry it on phones */
  .adds__list { grid-template-columns: 1fr; }
  .filters__note { margin-left: 0; width: 100%; }
  .row-actions { justify-content: flex-start; }
  .walk__text { font-size: var(--text-h4); }
}

/* ============================================================
   ROUND 4 (9 October): home hero on obsidian, live 3D mark, timeline strip
   Scope: .hero--dark only (the home hero). Everything below the hero is unchanged.
   ============================================================ */
.hero--dark {
  background-color: var(--bg-inverse); color: var(--text-inverse);
  /* the blueprint grid in its dark form, as on the share card (og-image.png) */
  background-image: linear-gradient(var(--ink-800) 1px, transparent 1px), linear-gradient(90deg, var(--ink-800) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  padding-bottom: 0;
}
.hero--dark .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.hero--dark .eyebrow { color: var(--text-inverse-secondary); }
.hero--dark .eyebrow::before { background: var(--aero-blue); }   /* on obsidian the eyebrow mark is aero (design system rule 4) */
.hero--dark .hero__title { color: var(--text-inverse); }
.hero--dark .hero__lead { color: var(--ink-300); }
.hero--dark .cta__note { color: var(--ink-400); }
.hero--dark :focus-visible { outline-color: var(--text-inverse); }

/* The mark. The box is reserved by aspect-ratio, so the canvas arriving never shifts layout.
   The still <img> and the canvas share one framing: the glyph's height is 60% of the box
   (img width 77.1% x the SVG's 100/128.54 path-to-viewBox ratio = 0.6), centred. hero-mark.js
   fits its camera to the same 60% (FILL). */
.hero-mark { position: relative; margin: 0; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; justify-self: end; }
.hero-mark__still { position: absolute; left: 50%; top: 50%; width: 77.1%; height: auto; transform: translate(-50%, -50%); transition: opacity 900ms var(--ease-standard); }
.hero-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease-standard); }
.hero-mark.is-live canvas { opacity: 1; }
.hero-mark.is-live .hero-mark__still { opacity: 0; }
/* While the live mark may still arrive (JS on, motion allowed) the still waits dimmed, close to the obsidian
   solid it will crossfade into; no JS, reduced motion, or no WebGL (.is-fallback) shows it in full white. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-mark__still { filter: brightness(0.16); transition: opacity 900ms var(--ease-standard), filter 600ms var(--ease-standard); }
  .js .hero-mark.is-fallback .hero-mark__still { filter: none; }
}

/* The timeline as a thin mono strip under the hero (every word of the old card kept) */
.hero-strip {
  display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 3fr)); gap: var(--grid-gutter);
  margin-top: var(--space-7); padding: var(--space-4) 0; border-top: 1px solid var(--ink-700);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.3;
}
.hero-strip__head { display: flex; gap: var(--space-3); color: var(--ink-400); }
.hero-strip__item { display: flex; gap: var(--space-3); align-items: baseline; }
.hero-strip__when { color: var(--ink-400); flex: none; }
.hero-strip__what { color: var(--text-inverse); }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-strip > li { animation: rise var(--duration-slow) var(--ease-standard) both; }
  .js .hero-strip > li:nth-child(2) { animation-delay: 320ms; }
  .js .hero-strip > li:nth-child(3) { animation-delay: 400ms; }
  .js .hero-strip > li:nth-child(4) { animation-delay: 480ms; }
}

@media (max-width: 960px) {
  .hero--dark .hero__grid { grid-template-columns: 1fr; }
  .hero-mark { max-width: 440px; justify-self: center; }
  .hero-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-3); }
  .hero-strip__head { grid-column: 1 / -1; }
  .hero-strip__item { flex-direction: column; gap: 4px; }
}
@media (max-width: 720px) {
  .hero-mark { max-width: 280px; }
  .hero-strip { margin-top: var(--space-5); }
}

/* ============================================================
   ROUND 5 (9 October): home narrative (numbers strip, owner's week,
   founder card, tabbed product panel, promises, next steps),
   /get-report and /contact (sentence form), nav with Contact
   ============================================================ */

/* ---------- Nav: Contact joins; "Data handling" steps out of the bar on phones (it stays in the footer) ---------- */
@media (max-width: 600px) { .nav__link--opt { display: none; } }

/* ---------- Numbers strip (under the hero). Same four columns as the hero's timeline strip above it ---------- */
.numbers-band { border-bottom: 1px solid var(--border-subtle); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); }
.numbers__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) 0; }
.numbers__value { font-family: var(--font-mono); font-size: 32px; font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); }
@media (max-width: 960px) { .numbers__value { font-size: 24px; } }
@media (max-width: 720px) {
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--grid-gutter); }
  .numbers__item { padding: var(--space-4) 0; }
  .numbers__item:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .numbers__value { font-size: 20px; }
}

/* ---------- The owner's week: problem cards that open their fix ----------
   No JS: the fix shows under each quote. With JS: the quote and its fix share one grid cell; opening the card
   (click, or hover with a fine pointer) fades the quote out and the fix in, so the card never changes size
   and the page never moves. */
.problem { min-height: 0; }
.problem .cell__top { padding-bottom: var(--space-4); }
.problem__quote { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.problem__fix { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--border-strong); }
.problem__fixhead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.problem__title { font-size: var(--text-h4); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.problem__fix .cell__body { font-size: var(--text-sm); line-height: var(--leading-normal); }
.problem__toggle { display: none; align-self: flex-start; align-items: center; gap: var(--space-2); margin-top: auto; padding: 4px 0; background: none; border: 0; border-bottom: 1px solid var(--border-strong); cursor: pointer; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.problem__icon { width: 14px; height: 14px; }
.problem__icon-v { transition: opacity var(--duration-base) var(--ease-standard); }
.problem.is-open .problem__icon-v { opacity: 0; }
.js .problem { cursor: pointer; display: grid; grid-template-rows: auto 1fr auto; }
.js .problem .cell__top { grid-row: 1; }
.js .problem__quote, .js .problem__fix { grid-row: 2; grid-column: 1; align-self: start; margin-top: 0; transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base); }
.js .problem__fix { visibility: hidden; opacity: 0; transform: translateY(8px); }
.js .problem.is-open .problem__fix { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.js .problem.is-open .problem__quote { visibility: hidden; opacity: 0; transform: translateY(-8px); }
.js .problem__toggle { display: inline-flex; grid-row: 3; justify-self: start; margin-top: var(--space-5); }
@media (max-width: 960px) {
  /* One card per row: the fix opens under the quote instead of replacing it (no reserved space on phones) */
  .problem__quote { font-size: var(--text-h4); }
  .js .problem { display: flex; }
  .js .problem__fix { display: none; visibility: visible; opacity: 1; transform: none; margin-top: var(--space-4); }
  .js .problem.is-open .problem__fix { display: flex; }
  .js .problem.is-open .problem__quote { visibility: visible; opacity: 1; transform: none; }
  .js .problem__toggle { margin-top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .js .problem__quote, .js .problem__fix { transition: none !important; transform: none !important; } }

/* ---------- Who is behind this: the "Previously" card ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: var(--grid-gutter); align-items: start; }
.founder__photo { max-width: 280px; }
.founder__photo .ph__img { box-shadow: 6px 6px 0 var(--ink-900); }
.founder__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 680px; }
.founder__name { font-weight: var(--weight-semibold); font-size: var(--text-body); color: var(--text-secondary); }
.founder__statement { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: var(--tracking-tight); }
.founder__prev { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); font-weight: var(--weight-semibold); }
.founder__prev .label { color: var(--text-secondary); }
.founder__quote .quote__text { font-size: var(--text-lead); color: var(--text-secondary); }
.founder__quote { gap: var(--space-2); }
.founder__note { color: var(--text-secondary); border-top: 0; padding-top: 0; font-size: var(--text-xs); }
@media (max-width: 960px) {
  .founder { grid-template-columns: 1fr; gap: var(--space-5); }
  .founder__photo { max-width: 240px; }
  .founder__statement { font-size: var(--text-h4); }
}

/* ---------- The system: one tabbed product panel (Stripe pattern) ----------
   Markup: .ptabs[data-tabs][data-autoplay] > .ptabs__list (role=tablist) + .ptabs__panes > .ptabs__pane (role=tabpanel).
   The data inside the panes uses the demo's own classes (table, wait-cell, t-warn/t-err, tag--level, chart__goal,
   panel__legend), so home and /demo cannot drift. No JS: tabs are in-page links and every pane shows, one under
   another. With JS (site.js §4): only the active pane is in flow; the box eases to its height (a ResizeObserver keeps
   it right when a message row opens); the active tab's bar fills over 6 s and its animationend advances the tab. */
.ptabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ptabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--border-strong); align-self: start; }
.ptabs__tab { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border-default); text-decoration: none; color: var(--text-secondary); transition: color var(--duration-base) var(--ease-standard); }
.ptabs__tab + .ptabs__tab { padding-left: var(--space-3); }
.ptabs__tab .label { color: inherit; font-size: var(--text-xs); }
.ptabs__name { font-weight: var(--weight-semibold); font-size: var(--text-body); line-height: var(--leading-snug); }
.ptabs__tab:hover, .ptabs__tab[aria-selected="true"] { color: var(--text-primary); }
.ptabs__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.ptabs__bar > span { display: block; height: 100%; background: var(--border-strong); transform: scaleX(0); transform-origin: left; }
.ptabs__tab[aria-selected="true"] .ptabs__bar > span { transform: scaleX(1); }
.ptabs.is-playing .ptabs__tab[aria-selected="true"] .ptabs__bar > span { animation: ptab-fill var(--ptab-ms, 6000ms) linear both; }
.ptabs.is-playing.is-paused .ptabs__tab[aria-selected="true"] .ptabs__bar > span { animation-play-state: paused; }
@keyframes ptab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ptabs__panes { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.ptabs__pane { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.js .ptabs__panes { display: block; position: relative; overflow: hidden; transition: height 350ms var(--ease-standard); }
.js .ptabs__pane { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; transition: opacity 300ms var(--ease-standard), visibility 0s linear 300ms; }
.js .ptabs__pane.is-active { position: relative; visibility: visible; opacity: 1; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .ptabs__panes, .js .ptabs__pane { transition: none; } }
.ptabs .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptabs .forecast__block { border-bottom: 1px solid var(--border-default); }
@media (min-width: 1200px) {
  .ptabs { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); }
  .ptabs__list { grid-template-columns: 1fr; }
  .ptabs__tab, .ptabs__tab + .ptabs__tab { padding: var(--space-3) 0 18px; }
}
@media (max-width: 720px) {
  .ptabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptabs__tab, .ptabs__tab + .ptabs__tab { padding: 12px var(--space-2) 12px 0; }
  .ptabs__tab:nth-child(even) { padding-left: var(--space-3); }
  .ptabs__name { font-size: var(--text-sm); }
  .ptabs .stats { grid-template-columns: 1fr; }
}

/* "Your 60 days": the timeline grammar of the design system (2px ink-150 rail, 14px ink-900 dots) */
.days { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5) var(--space-4); }
.days::before { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); top: calc(var(--space-5) + 6px); height: 2px; background: var(--ink-150); }
.days__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.days__dot { width: 14px; height: 14px; background: var(--ink-900); margin-bottom: var(--space-2); }
.days__item--goal .days__dot { background: var(--bg-base); border: 2px solid var(--ink-900); }
.days__when { color: var(--text-primary); }
.days__what { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.days__item--goal .days__what { color: var(--text-primary); font-weight: var(--weight-semibold); }
@media (max-width: 720px) {
  .days { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-3); }
  .days::before { display: none; }
  .days__item:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: calc(-1 * var(--space-4)); width: 2px; background: var(--ink-150); }
  .days__item { padding-left: 30px; }
  .days__dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Promises in writing ---------- */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); }
.promise { background: var(--bg-base); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-height: 200px; }
.promise__text { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.35; letter-spacing: var(--tracking-tight); max-width: 26em; }
.promise__link { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-sm); }
@media (max-width: 720px) { .promises { grid-template-columns: 1fr; } .promise { min-height: 0; padding: var(--space-4); } }

/* ---------- Closing CTA: what happens next ---------- */
.next__head { margin-top: var(--space-7); }
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); margin-top: var(--space-3); border-top: 2px solid var(--border-strong); max-width: 880px; }
.next li { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
.next__text { font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
@media (max-width: 720px) { .next { grid-template-columns: 1fr; gap: 0; } .next li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); } }

/* ---------- /get-report and /contact ---------- */
.getflow { padding: var(--space-6) 0 var(--section-space); }
.gsteps { border-top: 2px solid var(--border-strong); max-width: 820px; }
.gstep { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--grid-gutter); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-default); }
.gstep__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.gstep__title { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); line-height: 1.3; }
.gstep__text { color: var(--text-secondary); }
.sform { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 720px; }
.sform__sentence { font-size: var(--text-h4); line-height: 2.2; color: var(--text-primary); }
.sform__field {
  font: inherit; color: var(--text-primary); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink-900); border-radius: 0;
  padding: 0 2px 2px; margin: 0 2px; width: var(--w, 14ch); max-width: 100%; min-width: 0; line-height: 1.4;
}
.sform__nowrap { white-space: nowrap; }
.sform__field::placeholder { color: var(--ink-400); }
.sform__field:focus { outline: none; background: var(--ink-050); border-bottom-width: 2px; }
.sform__field:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.sform__email { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-h4); }
.sform__email .sform__field { width: 22ch; margin: 0; }
.sform__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.sform__status { font-size: var(--text-sm); color: var(--text-secondary); max-width: 520px; }
.sform__status:empty { display: none; }
.contact { display: flex; flex-direction: column; gap: var(--space-7); max-width: 820px; }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); }
.contact__cell { background: var(--bg-base); padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact__mail { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); word-break: break-word; }
.contact__form { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 2px solid var(--border-strong); }
@media (max-width: 720px) {
  .gstep { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5) 0; }
  .gstep .step__num { font-size: 24px; }
  .gstep__title { font-size: var(--text-h4); }
  .sform__sentence, .sform__email { font-size: var(--text-lead); }
  .sform__email .sform__field { width: 100%; }
  .gstep__body .btn--secondary { white-space: normal; height: auto; min-height: 40px; padding: 8px var(--space-3); text-align: left; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__cell { padding: var(--space-4); }
}

/* ============================================================
   ROUND 6 (9 October): home hero "Transmutation" (js/hero-mark.js)
   Shards in a vortex assemble into the mark. The canvas overflows the figure (the glyph keeps the still's
   framing: hero-mark.js fits its camera to the figure, not the canvas) and fades out at its edges; the hero
   clips it, so nothing scrolls sideways. Text and the timeline strip sit above the canvas.
   ============================================================ */
/* Transmutation hero: the canvas overflows the figure so the vortex is not boxed in; the hero clips it */
.hero--dark { position: relative; overflow: clip; isolation: isolate; }
.hero--dark .hero__grid > div:first-child, .hero--dark .hero-strip { position: relative; z-index: 2; }
.hero-mark canvas {
  left: -32%; top: -26%; right: auto; bottom: auto; width: 164%; height: 152%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
/* Film grain at 2.5%, static (an SVG noise tile, rasterised once) */
.hero--dark::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 960px) {
  .hero-mark canvas { left: -24%; top: -14%; width: 148%; height: 128%; }
}

/* Hall photo inside the bio: full prose width, below the floated working photo. */
.bio-photo--wide { clear: both; width: 100%; max-width: none; margin: var(--space-6) 0 var(--space-5); }
.bio-photo--wide .ph__img { width: 100%; height: auto; }