/* ==========================================================================
   Allodial — Valuation Comparables (internal)
   Built to the Allodial design system.
   Ivory for reading, charcoal for the reveal, ember for one seam at a time.
   ========================================================================== */

/* --- 1 · Fonts ----------------------------------------------------------- */

@font-face { font-family: 'Poppins';    src: url('assets/fonts/poppins-400.woff2')    format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins';    src: url('assets/fonts/poppins-500.woff2')    format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins';    src: url('assets/fonts/poppins-600.woff2')    format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* --- 2 · Tokens ---------------------------------------------------------- */

:root,
[data-theme='light'] {
  --bg: #F3EFE7;
  --bg2: #EDE7DB;
  --card: #FBF8F2;

  --ink: #0B0B0B;
  --ink2: #242424;
  --mute: #4A463F;

  --rule: #DCD5C8;
  --rule2: #C9C1B2;

  --accent: #8F5330;
  --accent-hover: #0B0B0B;
  --accent-t: #F0E4D8;
  --copper: #A6643B;

  --seam: #FF6A1A;

  --btn: #0B0B0B;
  --btn-hover: #242424;
  --btn-ink: #F3EFE7;

  --band: #0B0B0B;
  --band2: #171614;
  --band-rule: #2A2724;
  --band-ink: #F3EFE7;
  --band-ink2: #D9D3C8;
  --band-mute: #B4ACA1;
  --band-accent: #FF6A1A;
  --band-btn: #F3EFE7;
  --band-btn-hover: #FFFFFF;
  --band-btn-ink: #0B0B0B;
  --band-grid: rgba(243, 239, 231, 0.055);

  --g: #1F5C33;  --g-t: #E3EDE4;
  --a: #6E4E12;  --a-t: #F0E7D5;
  --r: #A32015;  --r-t: #F5E2DE;
  --t1: #8A3A0C; --t1-t: #F2E3D8;
  --t2: #6E4E12; --t2-t: #F0E7D5;
  --t3: #235A78; --t3-t: #E2EAEE;

  --wire: #6F6A62;
  --heat: #A6643B;
  --heat-t: #F0E4D8;
  --cold: #1F5C7D;
  --cold-t: #E2EAEE;

  --radius: 0;
  --shadow: none;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sans: 'Poppins', system-ui, sans-serif;
  --display: 'Montserrat', var(--sans);

  --measure: 66ch;
  --page: 1248px;
}

[data-theme='dark'] {
  --bg: #121110; --bg2: #1B1917; --card: #1F1D1A;
  --ink: #F3EFE7; --ink2: #D9D3C8; --mute: #B4ACA1;
  --rule: #2D2A26; --rule2: #3D3833;
  --accent: #FF8A4C; --accent-hover: #FFB27A; --accent-t: #33211A; --copper: #A6643B;
  --seam: #FF6A1A;
  --btn: #F3EFE7; --btn-hover: #FFFFFF; --btn-ink: #0B0B0B;
  --band: #080807; --band2: #121110; --band-rule: #262320;
  --band-ink: #F3EFE7; --band-ink2: #D9D3C8; --band-mute: #B4ACA1; --band-accent: #FF6A1A;
  --band-btn: #F3EFE7; --band-btn-hover: #FFFFFF; --band-btn-ink: #0B0B0B;
  --band-grid: rgba(243, 239, 231, 0.055);
  --g: #63C285; --g-t: #16291C;
  --a: #E0B44A; --a-t: #2C2412;
  --r: #FF8F85; --r-t: #2F1715;
  --t1: #FF9A6E; --t1-t: #31201A;
  --t2: #E0B44A; --t2-t: #2C2412;
  --t3: #8FC4E0; --t3-t: #17262F;
  --wire: #9A938A; --heat: #FF8A4C; --heat-t: #2B1E16; --cold: #7CC4DD; --cold-t: #17262F;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121110; --bg2: #1B1917; --card: #1F1D1A;
    --ink: #F3EFE7; --ink2: #D9D3C8; --mute: #B4ACA1;
    --rule: #2D2A26; --rule2: #3D3833;
    --accent: #FF8A4C; --accent-hover: #FFB27A; --accent-t: #33211A; --copper: #A6643B;
    --seam: #FF6A1A;
    --btn: #F3EFE7; --btn-hover: #FFFFFF; --btn-ink: #0B0B0B;
    --band: #080807; --band2: #121110; --band-rule: #262320;
    --band-ink: #F3EFE7; --band-ink2: #D9D3C8; --band-mute: #B4ACA1; --band-accent: #FF6A1A;
    --band-btn: #F3EFE7; --band-btn-hover: #FFFFFF; --band-btn-ink: #0B0B0B;
    --band-grid: rgba(243, 239, 231, 0.055);
    --g: #63C285; --g-t: #16291C;
    --a: #E0B44A; --a-t: #2C2412;
    --r: #FF8F85; --r-t: #2F1715;
    --t1: #FF9A6E; --t1-t: #31201A;
    --t2: #E0B44A; --t2-t: #2C2412;
    --t3: #8FC4E0; --t3-t: #17262F;
    --wire: #9A938A; --heat: #FF8A4C; --heat-t: #2B1E16; --cold: #7CC4DD; --cold-t: #17262F;
  }
}

:root { --mark-on-light: url(assets/allodial-a-on-light.svg); --mark-on-dark: url(assets/allodial-a-on-dark.svg); --mark: var(--mark-on-light); }
[data-theme='dark'] { --mark: var(--mark-on-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --mark: var(--mark-on-dark); } }

/* --- 3 · Space and page -------------------------------------------------- */

:root {
  --gutter: clamp(20px, 6.667vw, 96px);
  --pad-x: max(var(--gutter), calc((100% - var(--page)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; color: var(--ink); margin: 0; text-wrap: pretty; }
p { margin: 0 0 20px; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule2); transition: color 140ms var(--ease), border-color 140ms var(--ease); }
a:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--seam); outline-offset: 2px; }

strong, b { font-family: var(--display); font-weight: 500; color: var(--ink); }
h1 strong, h2 strong, h3 strong { font-weight: 600; }

em { font-style: italic; }

/* Figures inside running prose */
.num { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* --- 4 · Header ---------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.head-bar {
  height: 55px;
  padding-left: var(--pad-x); padding-right: var(--pad-x);
  display: flex; align-items: center; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; border: 0; flex: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 30px; height: 28px; background: var(--mark) center / contain no-repeat; flex: none; }
.brand-text { display: flex; align-items: center; gap: 12px; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.brand-product {
  font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1;
  letter-spacing: 0.01em; color: var(--mute);
  padding-left: 12px; border-left: 1px solid var(--rule2);
}

.head-nav { flex: 1 1 auto; min-width: 0; }
.head-nav ul {
  display: flex; align-items: center; gap: 22px;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
}
.head-nav ul::-webkit-scrollbar { display: none; }
.head-nav a {
  display: block; white-space: nowrap; border: 0;
  font-size: 14px; line-height: 55px; color: var(--mute);
  border-bottom: 2px solid transparent;
}
.head-nav a:hover { color: var(--ink); }
.head-nav a.is-active { color: var(--ink); font-weight: 500; border-bottom-color: var(--seam); }

.head-right { display: flex; align-items: center; gap: 16px; flex: none; }

.stamp {
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--rule2); background: var(--bg2);
}
.stamp-band { color: var(--band-ink); border-color: rgba(243,239,231,.5); background: transparent; }

.progress { height: 2px; background: var(--rule); }
.progress-fill { display: block; height: 2px; width: 0; background: var(--seam); }

/* --- 5 · Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1;
  background: transparent; color: var(--ink); cursor: pointer;
  border: 1px solid var(--rule2);
  transition: background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn-primary {
  background: var(--btn); color: var(--btn-ink); border-color: var(--btn);
  box-shadow: inset 0 -2px 0 var(--seam);
}
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); box-shadow: inset 0 -3px 0 var(--seam); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
.btn-band { background: var(--band-btn); color: var(--band-btn-ink); border-color: var(--band-btn); box-shadow: inset 0 -2px 0 var(--seam); }
.btn-band:hover { background: var(--band-btn-hover); border-color: var(--band-btn-hover); color: var(--band-btn-ink); box-shadow: inset 0 -3px 0 var(--seam); }

/* --- 6 · Hero ------------------------------------------------------------ */

.hero {
  position: relative; isolation: isolate;
  background: var(--band); color: var(--band-ink2);
  padding: 0 var(--pad-x);
  min-height: clamp(560px, calc(100svh - 56px), 760px);
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 280px; z-index: -1;
  background:
    radial-gradient(120% 90% at 88% 30%, rgba(255,106,26,.16), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid) 0 1px, transparent 1px 11px);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,106,26,0), #FF6A1A 38%, #FFB27A 62%, rgba(255,106,26,0));
}
.hero-inner { padding: 104px 0 110px; width: 100%; }

.hero-eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--band-accent);
  margin: 0 0 24px;
}
.hero-h {
  font-size: clamp(34px, 4.6vw, 72px); line-height: 1.03; letter-spacing: -0.02em;
  color: var(--band-ink); max-width: 17ch; margin: 0 0 28px;
}
.hero-sub { font-size: 18px; line-height: 1.68; color: var(--band-ink2); max-width: 62ch; margin: 0 0 32px; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 32px; padding: 0; list-style: none;
  font-size: 15px; color: var(--band-mute);
}
.hero-meta strong { color: var(--band-ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-actions .btn { color: var(--band-ink); border-color: rgba(243,239,231,.5); }
.hero-actions .btn:hover { border-color: var(--band-ink); }
.hero-actions .btn-band,
.hero-actions .btn-band:hover { color: var(--band-btn-ink); border-color: transparent; }

.hero-note {
  margin-top: 40px; padding: 20px 24px;
  border: 1px solid var(--band-rule); border-left: 2px solid var(--copper);
  background: var(--band2); color: var(--band-ink2);
  font-size: 15px; line-height: 1.6; max-width: 70ch;
}
.hero-note strong { color: var(--band-ink); }

/* Photographic hero. The photo sits in the right-hand panel; the SCRIM, not the
   picture, guarantees the headline's contrast — so never bake a gradient into
   the image. Layer order over the photo: fins, ember graze, scrim. */
.hero-media { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(11,11,11,1) 0%, rgba(11,11,11,.88) 22%, rgba(11,11,11,.35) 62%, rgba(11,11,11,.55) 100%);
}
.hero.has-photo .hero-inner { max-width: 62ch; }

/* --- 7 · Screens (the ivory reading ground) ------------------------------ */

.screen {
  padding: 104px var(--pad-x) 110px;
  background: var(--bg);
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}
.screen + .screen { padding-top: 0; }
.screen + .screen .screen-rail,
.screen + .screen .screen-main { padding-top: 104px; }
.screen + .screen .screen-main { border-top: 1px solid var(--rule); }
.screen + .screen .screen-rail { border-top: 1px solid var(--rule); }

.screen-rail { position: sticky; top: 80px; align-self: start; }
.screen-num {
  display: block; font-family: var(--display); font-weight: 500; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 12px;
}
.screen-q { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.34; color: var(--ink); margin: 0 0 20px; max-width: 24ch; }
.rail-mark { display: block; width: 40px; height: 2px; background: var(--seam); }

.screen-main { min-width: 0; }
.screen-h {
  font-size: clamp(30px, 3.06vw, 44px); line-height: 1.12; letter-spacing: -0.015em;
  max-width: 30ch; margin: 0 0 28px;
}
.screen-main > p { color: var(--ink2); }

.block-h { font-size: 26px; line-height: 1.28; margin: 56px 0 20px; }
.block-h:first-child { margin-top: 0; }
h4.sub-h { font-size: 21px; line-height: 1.32; margin: 40px 0 16px; }

.caption { font-size: 15px; line-height: 1.6; color: var(--mute); max-width: 72ch; }
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px;
}

/* Statement screen */
.statement { padding-top: 120px; padding-bottom: 104px; }
.statement-h {
  font-size: clamp(30px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 26ch; margin: 0 0 32px;
}

/* --- 8 · The band (the one reveal) --------------------------------------- */

.band {
  position: relative; isolation: isolate;
  background: var(--band); color: var(--band-ink2);
  padding: 104px var(--pad-x) 110px;
}
.band::before,
.band::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,106,26,0), #FF6A1A 38%, #FFB27A 62%, rgba(255,106,26,0));
}
.band::before { top: 0; }
.band::after { bottom: 0; }
.band-photo { position: absolute; inset: 0 0 auto 0; height: 620px; z-index: -2; overflow: hidden; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 57.5%; display: block; }
.band-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8,8,7,.90) 0%, rgba(8,8,7,.87) 34%, rgba(8,8,7,.58) 57%, rgba(8,8,7,.88) 74%, #080807 100%);
}

.band-fins {
  position: absolute; inset: 0 0 auto 0; height: 280px; z-index: -1;
  background: repeating-linear-gradient(90deg, var(--band-grid) 0 1px, transparent 1px 11px);
}
.band h2, .band h3, .band h4, .band strong { color: var(--band-ink); }
.band p { color: var(--band-ink2); }
.band .eyebrow { color: var(--band-accent); }
.band .caption { color: var(--band-mute); }
.band a { color: var(--band-accent); border-bottom-color: var(--band-rule); }
.band a:hover { color: var(--band-btn-hover); }
.band-h {
  font-size: clamp(34px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -0.02em;
  max-width: 24ch; margin: 0 0 28px;
}
.band-lede { font-size: 18px; max-width: 66ch; }

.band-panel {
  position: relative;
  background: var(--band2); border: 1px solid var(--band-rule);
  padding: 32px; margin-top: 40px;
}
.band-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 80% 10%, rgba(255,106,26,.13), transparent 60%);
}
.band-panel::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,106,26,0), rgba(255,106,26,.7) 45%, rgba(255,106,26,0));
}
.band-panel > * { position: relative; }

/* --- 9 · Tables ---------------------------------------------------------- */

.table-wrap { margin: 32px 0 0; }
table { width: 100%; border-collapse: collapse; border: 0; }
caption {
  caption-side: top; text-align: left;
  font-size: 15px; line-height: 1.6; color: var(--mute); padding-bottom: 20px;
}
thead th {
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1.4;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
  text-align: left; vertical-align: bottom;
  padding: 0 24px 12px 0; border-bottom: 1px solid var(--ink);
}
thead th:last-child { padding-right: 0; }
tbody th {
  font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.35;
  color: var(--ink); text-align: left; vertical-align: top;
  padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule);
}
tbody td {
  font-size: 16px; line-height: 1.55; color: var(--ink2); vertical-align: top;
  padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule);
}
tbody td:last-child, tbody th:last-child { padding-right: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--rule2); }

.band thead th { color: var(--band-mute); border-bottom-color: var(--band-ink); }
.band tbody th { color: var(--band-ink); border-bottom-color: var(--band-rule); }
.band tbody td { color: var(--band-ink2); border-bottom-color: var(--band-rule); }
.band tbody tr:last-child th, .band tbody tr:last-child td { border-bottom-color: var(--band-rule); }

/* A sub-line under a row header, where a column would otherwise crowd the table */
.row-sub {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--mute);
}
.row-sub strong { font-family: var(--sans); font-weight: 500; color: var(--ink2); }
.band .row-sub { color: var(--band-mute); }

.t-num { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
.band .t-num { color: var(--band-ink); }

/* Band tables: keep a short range label on one line */
@media (min-width: 901px) { .band-panel tbody th { min-width: 11ch; } }

/* The row that is ours */
tr.is-ours th, tr.is-ours td { background: var(--card); }
tr.is-ours th { border-left: 2px solid var(--seam); padding-left: 20px; }
.band tr.is-ours th, .band tr.is-ours td { background: var(--band2); }

/* Region and status labels — meaning in words, never in colour alone */
.tag {
  display: inline-block; vertical-align: 2px;
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
  border: 1px solid var(--rule2); padding: 4px 6px; margin-left: 8px; white-space: nowrap;
}
.band .tag { color: var(--band-mute); border-color: var(--band-rule); }
.tag-flag { color: var(--accent); border-color: var(--accent); }
.tag-warn { color: var(--r); border-color: var(--r); }
.band .tag-flag { color: var(--band-accent); border-color: var(--band-accent); }

/* --- 10 · Figure cards --------------------------------------------------- */

.figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); margin: 48px 0 0;
}
.figure-card {
  background: var(--card); border-top: 2px solid var(--seam);
  padding: 28px 24px 24px; display: flex; flex-direction: column; min-height: 220px;
}
.figure-card .fig {
  font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.12;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px;
}
.figure-card .fig.is-quote { font-size: 26px; line-height: 1.28; }
.figure-card .detail { font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 0; max-width: none; }
.figure-card .datestamp {
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--wire); margin: auto 0 0; padding-top: 20px;
}
.band .figures { background: var(--band-rule); }
.band .figure-card { background: var(--band2); }
.band .figure-card .fig { color: var(--band-ink); }
.band .figure-card .detail { color: var(--band-ink2); }
.band .figure-card .datestamp { color: var(--band-mute); }

/* Headline figure, for the range */
.headline-fig {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, calc(8.9vw - 70px), 58px); line-height: 1.02;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--band-ink); margin: 0 0 16px;
}
.headline-seam { display: block; width: 120px; height: 2px; background: var(--seam); margin: 0 0 20px; }

/* --- 11 · Numbered lists and gates --------------------------------------- */

.numbered { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: n; }
.numbered > li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  padding: 20px 0; border-bottom: 1px solid var(--rule); counter-increment: n;
}
.numbered > li:first-child { border-top: 1px solid var(--rule); }
.numbered > li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--display); font-weight: 500; font-size: 16px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--accent);
}
.numbered > li > * { margin: 0; max-width: var(--measure); }
.numbered > li > * + * { margin-top: 8px; }
.band .numbered > li { border-color: var(--band-rule); }
.band .numbered > li:first-child { border-top-color: var(--band-rule); }
.band .numbered > li::before { color: var(--band-accent); }

.gate-state {
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
  display: block; margin-top: 10px !important;
}
.gate-have { color: var(--g); }
.gate-building { color: var(--a); }
.gate-missing { color: var(--r); }

/* --- 12 · Notes and quotes ----------------------------------------------- */

.note {
  border: 1px solid var(--rule); border-left: 2px solid var(--copper);
  background: var(--bg2); padding: 20px 24px; margin: 32px 0 0;
  font-size: 16px; line-height: 1.6; color: var(--ink2);
}
.note p { max-width: 68ch; }
.note .eyebrow { color: var(--accent); }
.band .note { background: var(--band2); border-color: var(--band-rule); border-left-color: var(--copper); color: var(--band-ink2); }

.say {
  background: var(--bg2); border-top: 2px solid var(--seam);
  padding: 28px 28px 24px; margin: 32px 0 0;
}
.say-h { font-size: 21px; line-height: 1.32; margin: 0 0 16px; }
.say blockquote {
  margin: 0 0 16px; padding: 0 0 0 20px; border-left: 1px solid var(--rule2);
  font-size: 18px; line-height: 1.6; color: var(--ink);
}
.say blockquote p { max-width: 62ch; }
.say .why { font-size: 15px; line-height: 1.6; color: var(--mute); margin: 0; max-width: 68ch; }

/* A quote and a figure sharing one hairline grid */
.say-with-figure {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1px;
  background: var(--rule); margin: 32px 0 0;
}
.say-with-figure .say { margin: 0; }
.side-fig {
  margin: 0; display: flex; flex-direction: column;
  background: var(--band); border-top: 2px solid var(--seam);
}
.side-fig img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; }
.side-fig figcaption {
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--band-mute);
  padding: 16px 20px 18px;
}

/* --- 13 · Sources -------------------------------------------------------- */

.sources { font-size: 15px; line-height: 1.75; color: var(--mute); max-width: none; }
.sources p { max-width: none; }
.sources a { color: var(--accent); }

.site-foot {
  padding: 48px var(--pad-x) 64px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  font-size: 15px; color: var(--mute);
}
.site-foot p { max-width: 80ch; }

/* --- 14 · Motion --------------------------------------------------------- */

.js-anim .reveal { opacity: 0; transform: translateY(12px); }
.js-anim .reveal.is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.js-anim .reveal.is-in.d1 { transition-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; }
  .js-anim .reveal.is-in { transition: none; }
  * { animation: none !important; }
}

/* --- 15 · Breakpoints ---------------------------------------------------- */

@media (max-width: 1180px) {
  .screen { grid-template-columns: 248px minmax(0, 1fr); column-gap: 40px; }
}

@media (max-width: 900px) {
  .screen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .screen-rail {
    position: static; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--seam);
    border-bottom-width: 1px;
  }
  .screen + .screen .screen-main { border-top: 0; padding-top: 0; }
  .screen-num { margin-bottom: 0; }
  .screen-q { margin: 0; font-size: 17px; max-width: none; }
  .screen-q::before { content: '· '; color: var(--mute); }
  .rail-mark { display: none; }

  .figures { grid-template-columns: minmax(0, 1fr); }

  /* The hero photo becomes a band above the copy, with a vertical scrim, so the
     headline never sits on the picture. */
  .hero.has-photo { display: block; }
  .hero-media { position: relative; inset: auto; width: auto; height: 260px; margin: 0 calc(-1 * var(--pad-x)); }
  .hero-media img { object-position: 50% 30%; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.35) 45%, rgba(11,11,11,.97) 100%);
  }
  .hero.has-photo .hero-inner { max-width: none; padding-top: 40px; }

  .say-with-figure { grid-template-columns: minmax(0, 1fr); }
  .side-fig img { height: 240px; flex: none; }

  /* Tables stack */
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody tr { border-top: 1px solid var(--ink); padding: 8px 0 20px; }
  .table-wrap tbody tr + tr { margin-top: 24px; }
  .table-wrap tbody th { border: 0; padding: 12px 0 8px; font-size: 19px; }
  .table-wrap tbody td { border: 0; border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .table-wrap tbody td:last-child { border-bottom: 0; }
  .table-wrap tbody td::before {
    content: attr(data-label); display: block;
    font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px;
  }
  .band .table-wrap tbody td::before { color: var(--band-mute); }
  .table-wrap tr.is-ours { background: var(--card); border-left: 2px solid var(--seam); padding-left: 16px; padding-right: 16px; }
  .table-wrap tr.is-ours th, .table-wrap tr.is-ours td { background: transparent; border-left: 0; padding-left: 0; }
  .band .table-wrap tr.is-ours { background: var(--band2); }
}

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.62; }
  .head-nav, .brand-product, #print-btn { display: none; }
  .head-right { gap: 8px; }
  .stamp { letter-spacing: 0.14em; padding: 7px 8px; }
  .brand-mark { width: 26px; height: 24px; }
  .screen, .band { padding-top: 48px; padding-bottom: 56px; }
  .screen + .screen .screen-rail, .screen + .screen .screen-main { padding-top: 48px; }
  .hero-inner { padding: 48px 0 56px; }
  .statement { padding-top: 56px; padding-bottom: 48px; }
  .band-panel, .say { padding: 20px; }
  .figure-card { min-height: 0; }
  .numbered > li { grid-template-columns: 40px minmax(0, 1fr); }
}

/* --- 16 · Print ---------------------------------------------------------- */

@media print {
  :root, [data-theme='dark'] {
    --bg: #FFFFFF; --bg2: #FFFFFF; --card: #FFFFFF;
    --ink: #000000; --ink2: #111111; --mute: #333333;
    --rule: #BBBBBB; --rule2: #888888; --accent: #000000;
    --band: #FFFFFF; --band2: #FFFFFF; --band-ink: #000000; --band-ink2: #111111;
    --band-mute: #333333; --band-accent: #000000; --band-rule: #BBBBBB;
  }
  body { background: #fff; color: #111; font-size: 11.5pt; line-height: 1.5; }
  .site-head, .head-nav, .progress, .btn, .hero-actions, .rail-mark, .band-fins,
  .hero-media, .band-photo, .side-fig { display: none !important; }
  .say-with-figure { display: block; background: none; }
  .hero, .band { color: #111; background: #fff; border-top: 1pt solid #000; border-bottom: 1pt solid #000; }
  .hero::before, .hero::after, .band::before, .band::after, .band-panel::before, .band-panel::after { display: none !important; }
  .hero, .band, .screen { padding-left: 0; padding-right: 0; min-height: 0; }
  .screen { display: block; }
  .screen-rail { position: static; margin-bottom: 16pt; }
  .hero-h { font-size: 32pt; } h2 { font-size: 20pt; }
  .eyebrow, .hero-eyebrow, .datestamp, thead th, .tag, .gate-state { font-size: 8pt; }
  .sources, .caption { font-size: 9pt; }
  .figure-card, tbody tr, .numbered > li, .say, .note, .band-panel { break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; border: 0; }
  tr.is-ours th { border-left: 1pt solid #000; }
  tr.is-ours td:last-child { border-right: 1pt solid #000; }
}