/* ==========================================================================
   Syndication Breakdown — design system
   --------------------------------------------------------------------------
   One stylesheet. Sections in order:
     0 faces · 1 tokens · 2 reset · 3 utilities · 4 typography · 5 chrome
     6 prose grid & article layouts · 7 figures & panels · 8 index & home
     9 glossary & model · 10 ads & consent · 11 motion · 12 responsive
     13 print

   The look is a private placement document, not a magazine and not a
   technical register. Bond-neutral stock, a Scotch roman for headlines, the
   United States government's own text face for everything else, hairline
   rules doing all the structural work, and figures set tabular so columns of
   money line up. Two accents: petrol for the protected, senior, limited
   partner end of everything, bronze for the junior, sponsor end. The ramp
   between them is semantic — in the stack and waterfall figures the colour
   IS the argument, so it is never used decoratively.

   No box shadows anywhere. No cards. No large radii. If something needs to
   be set apart it gets a rule or a change of stock, the way a printed
   document does it.
   ========================================================================== */

/* ==========================================================================
   0. Faces
   --------------------------------------------------------------------------
   Self-hosted and variable. No stylesheet from another origin, so no
   reader's address reaches a third party before they have read a word.

   Each family is followed by a RESERVE face: a local system font redeclared
   with metrics measured against the web font, so the line count of a
   headline does not change when the real face arrives.

   Literata italic is deliberately not loaded. Emphasis inside a display
   line is expressed with colour instead (see .lede__h em), and
   font-synthesis is off so nothing is faked.
   ========================================================================== */
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata.woff2") format("woff2-variations"),
       url("/assets/fonts/literata.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/publicsans.woff2") format("woff2-variations"),
       url("/assets/fonts/publicsans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/publicsans-italic.woff2") format("woff2-variations"),
       url("/assets/fonts/publicsans-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* Reserve faces. size-adjust is the ratio of advance widths over a sample
   string; ascent and descent are the web font's own hhea values over its
   units per em. Measured in the browser, not guessed. */
@font-face {
  font-family: "Literata Reserve";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  /* Measured in the browser against the loaded web font, not estimated:
     Literata's advance width over Georgia's on a sample string is 101.4%,
     and its hhea ascent and descent are 117.7% and 30.8% of the em. The
     overrides are those figures divided by size-adjust. */
  size-adjust: 101.4%;
  ascent-override: 116.1%;
  descent-override: 30.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans Reserve";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  /* Measured the same way: Public Sans over Segoe UI is 107.1% on advance
     width, with an ascent of 95.0% and a descent of 22.5% of the em. Arial,
     the third fallback, measures 106.3%, so one value serves both. */
  size-adjust: 107.1%;
  ascent-override: 88.7%;
  descent-override: 21.0%;
  line-gap-override: 0%;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* ---- raw ramp. Never referenced by a component. ---- */
  --bond:      #faf9f6;   /* stock. Neutral bond, never cream, never pure white */
  --bond-2:    #f1efe9;
  --bond-3:    #e7e4db;
  --white:     #ffffff;

  --graphite:  #15171b;
  --graphite-2:#33383f;
  --graphite-3:#5b636d;
  --graphite-4:#7d858e;

  --petrol:      #1f4d5c;
  --petrol-deep: #143743;
  --petrol-pale: #7aa8b5;

  --bronze:      #8a5a2b;
  --bronze-deep: #6b4520;
  --bronze-pale: #c9a06a;

  --signal:      #a02c2c;
  --signal-pale: #f4e4e1;

  /* ---- semantic roles. The only things components may use. ---- */
  --bg:          var(--bond);
  --bg-sunken:   var(--bond-2);
  --bg-raised:   var(--white);
  --bg-tint:     #f4f1e9;

  --text:        var(--graphite);
  --text-soft:   var(--graphite-2);
  --text-muted:  var(--graphite-3);   /* a measured colour, never an opacity */
  --text-faint:  var(--graphite-4);
  --text-invert: var(--bond);

  --accent:      var(--bronze);
  --accent-deep: var(--bronze-deep);
  --accent-light:var(--bronze-pale);
  --accent-ink:  #ffffff;             /* text that sits ON the accent */

  --link:        var(--petrol);
  --link-deep:   var(--petrol-deep);
  --link-light:  var(--petrol-pale);

  --flag:        var(--signal);
  --flag-bg:     var(--signal-pale);

  --rule:        #d6d2c6;
  --rule-soft:   #e6e3da;
  --rule-strong: var(--graphite);
  --rule-onpanel:rgba(250, 249, 246, 0.22);

  /* Surfaces that are dark on purpose in either theme: the masthead, the
     plate, the footer, the consent banner. These must NOT invert — a
     masthead that turns pale in dark mode is not a dark mode, it is a bug. */
  --panel:    #1b2b33;
  --panel-2:  #16242b;
  --onpanel:  #f2f0ea;
  --onpanel-muted: #a8b6bc;

  /* The waterfall ramp. Cool is senior and limited-partner; warm is junior
     and sponsor. Used by the stack, the tiers and every generated figure. */
  --tier-1: #1f4d5c;
  --tier-2: #4a7080;
  --tier-3: #a8804a;
  --tier-4: #8a5a2b;

  /* Each band carries its own ink, for the same reason --accent does: the
     ramp lightens in dark mode, and white text that reads at 9:1 on the
     petrol band reads at 2.4:1 on the bronze one. Measured, not assumed —
     light theme: 9.23, 5.36, 5.00, 5.87. */
  --tier-1-ink: #ffffff;
  --tier-2-ink: #ffffff;
  --tier-3-ink: #15171b;
  --tier-4-ink: #ffffff;

  /* Figure palette, so an illustration follows the theme instead of
     carrying a baked-in background. */
  --fig-bg:    var(--bg);
  --fig-ink:   var(--text);
  --fig-muted: var(--text-muted);
  --fig-rule:  var(--rule);

  /* ---- type ---- */
  --font-display: "Literata", "Literata Reserve", Georgia, "Times New Roman", serif;
  --font-text: "Public Sans", "Public Sans Reserve", "Segoe UI", system-ui, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.09vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.17vw, 1.11rem);
  --step-1:  clamp(1.19rem, 1.13rem + 0.30vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.31rem + 0.53vw, 1.78rem);
  --step-3:  clamp(1.69rem, 1.50rem + 0.92vw, 2.30rem);
  --step-4:  clamp(2.01rem, 1.70rem + 1.53vw, 2.97rem);
  --step-5:  clamp(2.39rem, 1.90rem + 2.45vw, 3.83rem);
  --step-6:  clamp(2.75rem, 2.02rem + 3.65vw, 4.95rem);

  --lh-tight: 1.07;
  --lh-snug:  1.22;
  --lh-body:  1.66;
  --measure:  66ch;

  /* ---- space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --gutter:    clamp(1.15rem, 4.5vw, 3rem);
  --section:   clamp(3rem, 7vw, 6rem);

  --radius: 2px;
  --border: 1px solid var(--rule);
  --content: 74rem;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 130ms;
  --dur-mid:  240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #101418;
    --bg-sunken: #0b0e12;
    --bg-raised: #171d23;
    --bg-tint:   #1a2026;

    --text:       #e8e6df;   /* not #fff: pure white glares on a dark ground */
    --text-soft:  #c9c8c2;
    --text-muted: #a0a49f;
    --text-faint: #7d827f;

    --accent:      #d0a670;  /* the accent moves along the ramp, not in hue */
    --accent-deep: #b98d54;
    --accent-light:#e2c69c;
    --accent-ink:  #17140f;  /* and so the ink on top of it darkens */

    --link:      #8fc0cd;
    --link-deep: #b3d6df;
    --link-light:#5b8b99;

    --flag:    #e5837b;
    --flag-bg: #2b1b1a;

    --rule:        rgba(232, 230, 223, 0.17);
    --rule-soft:   rgba(232, 230, 223, 0.10);
    --rule-strong: rgba(232, 230, 223, 0.55);

    /* tier-1 is lightened from the light-theme value so that the dark ink
       clears 4.5:1 on it (4.90). Dark theme measured: 4.90, 6.08, 7.87, 4.96. */
    --tier-1: #4a8a9f;
    --tier-2: #6a99a8;
    --tier-3: #c9a06a;
    --tier-4: #a9793f;
    --tier-1-ink: #0d1114;
    --tier-2-ink: #0d1114;
    --tier-3-ink: #0d1114;
    --tier-4-ink: #0d1114;
  }
}

:root[data-theme="dark"] {
  --bg:        #101418;
  --bg-sunken: #0b0e12;
  --bg-raised: #171d23;
  --bg-tint:   #1a2026;

  --text:       #e8e6df;
  --text-soft:  #c9c8c2;
  --text-muted: #a0a49f;
  --text-faint: #7d827f;

  --accent:      #d0a670;
  --accent-deep: #b98d54;
  --accent-light:#e2c69c;
  --accent-ink:  #17140f;

  --link:      #8fc0cd;
  --link-deep: #b3d6df;
  --link-light:#5b8b99;

  --flag:    #e5837b;
  --flag-bg: #2b1b1a;

  --rule:        rgba(232, 230, 223, 0.17);
  --rule-soft:   rgba(232, 230, 223, 0.10);
  --rule-strong: rgba(232, 230, 223, 0.55);

  --tier-1: #4a8a9f;
  --tier-2: #6a99a8;
  --tier-3: #c9a06a;
  --tier-4: #a9793f;
  --tier-1-ink: #0d1114;
  --tier-2-ink: #0d1114;
  --tier-3-ink: #0d1114;
  --tier-4-ink: #0d1114;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);            /* explicit: a transparent body inherits */
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis: none;             /* no faked italics, no faked weights */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video { max-width: 100%; height: auto; }
svg { display: block; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--link-deep); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--content));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--panel);
  color: var(--onpanel);
  padding: var(--space-xs) var(--space-s);
}
.skip:focus { left: var(--space-s); top: var(--space-s); }

.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.mid { text-align: center; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
  font-size: inherit;
}
.linkish--pale { color: var(--onpanel); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.72em 1.35em;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-deep); color: var(--accent-ink); }

.btn--ghost {
  background: transparent;
  color: var(--onpanel);
  box-shadow: inset 0 0 0 1px var(--rule-onpanel);
}
.btn--ghost:hover { background: rgba(250, 249, 246, 0.1); color: var(--onpanel); }

.section-h {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: var(--space-l);
  margin-top: var(--section);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--space-l) 0; }
.rule--open { border-top-width: 2px; border-color: var(--rule-strong); }

/* ==========================================================================
   4. Typography
   ========================================================================== */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--text);
}

/* Emphasis in a display line is colour, not a faked oblique: Literata's
   italic is not loaded on purpose. */
h1 em, h2 em, .lede__h em, .plate__h em {
  font-style: normal;
  color: var(--accent);
}

p { text-wrap: pretty; }

/* A legal citation. Rule 506(c), IRC 469, Form D. Letterspaced with a rule
   under it, because this publication has no monospace and a code voice set
   in the running face is hard to pick out. */
.ref {
  font-family: var(--font-text);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.06em;
  white-space: nowrap;
}

code {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92em;
  background: var(--bg-tint);
  padding: 0.1em 0.32em;
  border-radius: var(--radius);
}

.anchor {
  margin-left: 0.4em;
  color: var(--text-faint);
  text-decoration: none;
  font-size: 0.62em;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  vertical-align: 0.15em;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* ==========================================================================
   5. Chrome — masthead, nav, footer
   ========================================================================== */
.masthead {
  background: var(--panel);
  color: var(--onpanel);
  border-bottom: 3px solid var(--accent);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-block: var(--space-s);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--onpanel);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { flex: none; width: 26px; height: 26px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.brand__tag {
  font-size: var(--step--2);
  color: var(--onpanel-muted);
  letter-spacing: 0.02em;
}

.nav__list { display: flex; gap: var(--space-m); flex-wrap: wrap; }
.nav__list a {
  color: var(--onpanel);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.3em;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--onpanel); border-bottom-color: var(--accent-light); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--accent); }

.theme {
  background: none;
  border: 1px solid var(--rule-onpanel);
  border-radius: var(--radius);
  color: var(--onpanel-muted);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.7em;
  cursor: pointer;
}
.theme:hover { color: var(--onpanel); border-color: var(--onpanel-muted); }

.foot {
  background: var(--panel);
  color: var(--onpanel);
  margin-top: var(--section);
  padding-block: var(--space-xl) var(--space-l);
  border-top: 3px solid var(--accent);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-l);
}
.foot__col--brand .brand__mark { width: 30px; height: 30px; margin-bottom: 0.6rem; }
.foot__name {
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
.foot__tag { color: var(--onpanel-muted); font-size: var(--step--1); margin-top: 0.2rem; }
.foot__note {
  color: var(--onpanel-muted);
  font-size: var(--step--1);
  margin-top: var(--space-s);
  max-width: 34ch;
}
.foot__h {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--space-2xs);
}
.foot__col ul { display: grid; gap: 0.42rem; }
.foot__col a, .foot__col .linkish {
  color: var(--onpanel);
  font-size: var(--step--1);
  text-decoration: none;
}
.foot__col a:hover, .foot__col .linkish:hover {
  color: var(--accent-light);
  text-decoration: underline;
}
.foot__legal, .foot__colophon {
  border-top: 1px solid var(--rule-onpanel);
  padding-top: var(--space-s);
  margin-top: var(--space-l);
  color: var(--onpanel-muted);
  font-size: var(--step--2);
  max-width: 90ch;
}
.foot__colophon { border-top: 0; margin-top: var(--space-2xs); padding-top: 0; }
.foot__colophon a { color: var(--onpanel); }

/* ==========================================================================
   6. Prose grid and article layouts
   --------------------------------------------------------------------------
   One grid, three widths, and the text's left edge is the same on every page
   by construction. Nothing uses margin:auto to narrow a block, because that
   centres it and moves the left edge.
   ========================================================================== */
.prose {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 7rem)
    [content-start] min(var(--measure), 100% - var(--gutter) * 2) [content-end]
    minmax(0, 7rem) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
  row-gap: var(--space-m);
  padding-block: var(--space-l) var(--space-xl);
}
.prose > * { grid-column: content; }
.prose > .is-wide { grid-column: wide; }
.prose > .is-bleed { grid-column: full; }

.prose > h2 {
  font-size: var(--step-3);
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
}
.prose > h3 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.008em;
  margin-top: var(--space-l);
}
.prose > h2 + p, .prose > h3 + p { margin-top: calc(var(--space-m) * -0.55); }

.prose > ul, .prose > ol { display: grid; gap: 0.55rem; }
.prose > ul > li { padding-left: 1.15rem; position: relative; }
.prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}
.prose > ol.numbered { counter-reset: n; }
.prose > ol.numbered > li {
  padding-left: 2rem;
  position: relative;
  counter-increment: n;
}
.prose > ol.numbered > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent);
}

.prose > blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-s);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--text-soft);
}

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.crumbs li { font-size: var(--step--2); color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-faint); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.wrap > .crumbs { padding-top: var(--space-m); }

.lede { padding-top: var(--space-s); }
.folio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-s);
}
.folio__topic { color: var(--accent); text-decoration: none; font-weight: 700; }
.folio__topic:hover { text-decoration: underline; }
.folio__sep { color: var(--text-faint); }

.lede__h {
  font-size: var(--step-5);
  max-width: 22ch;
}
.article--brief .lede__h, .article--reference .lede__h { font-size: var(--step-4); max-width: 26ch; }
.lede__dek {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-soft);
  margin-top: var(--space-s);
  max-width: 54ch;
}
.lede__dek--big { font-size: var(--step-2); color: var(--text); max-width: 42ch; }

.pull {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-m);
  margin-block: var(--space-l);
}
.pull p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.014em;
  max-width: 40ch;
}

.contents {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-s);
}
.contents__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2xs);
}
.contents__list {
  counter-reset: toc;
  columns: 2;
  column-gap: var(--space-l);
}
.contents__list li {
  counter-increment: toc;
  break-inside: avoid;
  padding-left: 1.7rem;
  position: relative;
  margin-bottom: 0.3rem;
}
.contents__list li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
}
.contents__list a { color: var(--text); text-decoration: none; font-size: var(--step--1); }
.contents__list a:hover { color: var(--link); text-decoration: underline; }

.hero { margin-block: var(--space-s); }
.hero .scene { width: 100%; height: auto; background: var(--bg-sunken); }
.hero--band .scene { max-height: 150px; object-fit: cover; }
.hero--bleed { margin-block: 0 var(--space-l); }
.hero--bleed .scene { background: var(--bg-sunken); }

/* ==========================================================================
   7. Figures and panels
   ========================================================================== */
.fig { margin-block: var(--space-l); }
.fig__title {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: var(--space-s);
}
.fig__legend, .fig__cap {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 62ch;
}
.fig__legend { margin-bottom: var(--space-s); }
.fig__cap { margin-top: var(--space-s); padding-top: var(--space-2xs); border-top: 1px solid var(--rule-soft); }

/* -- the band stack: the site's signature figure ---------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 15rem;
}
.band {
  flex-grow: var(--w);
  flex-basis: 0;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.5rem var(--space-s);
}
.band__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em; }
.band__figures { display: flex; align-items: baseline; gap: var(--space-s); flex: none; }
.band__amount,
.band__pct {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--step--1);
}
.band__pct { font-weight: 700; min-width: 4ch; text-align: right; }
.band--tier-1 { background: var(--tier-1); color: var(--tier-1-ink); }
.band--tier-2 { background: var(--tier-2); color: var(--tier-2-ink); }
.band--tier-3 { background: var(--tier-3); color: var(--tier-3-ink); }
.band--tier-4 { background: var(--tier-4); color: var(--tier-4-ink); }

/* -- the waterfall tiers ---------------------------------------------- */
.tiers { border-top: 1px solid var(--rule-strong); }
.tier {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.tier::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.tier:first-child::before { top: 1.4rem; }
.tier:last-child::before { bottom: calc(100% - 1.4rem); }
.tier__n {
  position: relative;
  z-index: 1;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
}
.tier__body { display: flex; flex-direction: column; gap: 0.2rem; }
.tier__name { font-weight: 700; font-size: var(--step-0); }
.tier__cond { font-size: var(--step--1); color: var(--text-muted); }
.tier__split {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--link);
  white-space: nowrap;
}

/* -- ledger tables ----------------------------------------------------- */
.ledger { margin-block: var(--space-l); }
.ledger__scroll { overflow-x: auto; }
.ledger table { font-size: var(--step--1); font-variant-numeric: tabular-nums lining-nums; }
.ledger th, .ledger td {
  padding: 0.62rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.ledger thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ledger tbody th { font-weight: 600; }
.ledger tbody tr:nth-child(even) { background: var(--bg-sunken); }
.ledger tr.is-total th, .ledger tr.is-total td {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 0;
  font-weight: 700;
  background: transparent;
}
.ledger__cap {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--space-2xs);
  max-width: 66ch;
}

/* -- panels ------------------------------------------------------------ */
.panel {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sunken);
  padding: var(--space-m);
  margin-block: var(--space-l);
  display: grid;
  gap: var(--space-2xs);
}
.panel > p, .panel > ul, .panel > ol { max-width: 66ch; }
.panel__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}
.panel__foot {
  font-size: var(--step--2);
  color: var(--text-muted);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.panel--example { border-top-color: var(--link); background: var(--bg-tint); }
.panel--example .panel__label { color: var(--link); }
.panel--flag { border-top-color: var(--flag); background: var(--flag-bg); }
.panel--flag .panel__label { color: var(--flag); }
.panel--note { border-top-color: var(--accent); }
.panel--checklist { border-top-color: var(--accent); }

.checklist { display: grid; gap: 0.55rem; }
.checklist li { padding-left: 1.9rem; position: relative; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

/* -- the definition rail ---------------------------------------------- */
.rail {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-m);
  margin-block: var(--space-l);
}
.rail__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}
.rail__list { display: grid; gap: var(--space-s); }
.rail__item { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: var(--space-s); }
.rail__term { font-weight: 700; font-size: var(--step--1); }
.rail__term a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); }
.rail__term a:hover { color: var(--link); }
.rail__def { font-size: var(--step--1); color: var(--text-muted); }

/* -- comparison -------------------------------------------------------- */
.compare { margin-block: var(--space-l); border-top: 1px solid var(--rule-strong); }
.compare__head, .compare__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 1fr;
  gap: var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule-soft);
}
.compare__title {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.compare__aspect {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-muted);
}
.compare__cell { font-size: var(--step--1); }

/* -- sources, FAQ, related, pager, byline, disclosure ------------------ */
.src { margin-top: var(--space-xl); border-top: 2px solid var(--rule-strong); padding-top: var(--space-s); }
.src__h, .faq__h, .rel__h {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.src__note { font-size: var(--step--1); color: var(--text-muted); margin-block: var(--space-2xs) var(--space-s); max-width: 62ch; }
.src__list { counter-reset: s; display: grid; gap: 0.6rem; }
.src__list li {
  counter-increment: s;
  padding-left: 2rem;
  position: relative;
  font-size: var(--step--1);
}
.src__list li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.src__host { display: block; color: var(--text-muted); font-size: var(--step--2); letter-spacing: 0.04em; }

.faq { margin-top: var(--space-xl); border-top: 1px solid var(--rule-strong); padding-top: var(--space-s); }
.faq__item { padding-block: var(--space-s); border-bottom: 1px solid var(--rule-soft); }
.faq__q { font-size: var(--step-0); font-weight: 700; font-family: var(--font-text); letter-spacing: 0; }
.faq__a { font-size: var(--step--1); color: var(--text-soft); margin-top: var(--space-3xs); max-width: 68ch; }

.rel { margin-top: var(--space-xl); border-top: 1px solid var(--rule-strong); padding-top: var(--space-s); }
.rel__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); margin-top: var(--space-s); }
.rel__item a { display: grid; gap: 0.3rem; text-decoration: none; color: var(--text); padding-top: var(--space-2xs); border-top: 2px solid var(--accent); }
.rel__item a:hover .rel__title { color: var(--link); text-decoration: underline; }
.rel__topic { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.rel__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); line-height: 1.25; }
.rel__dek { font-size: var(--step--2); color: var(--text-muted); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-top: var(--space-l); }
.pager__link { display: grid; gap: 0.2rem; text-decoration: none; color: var(--text); border-top: 1px solid var(--rule-strong); padding-top: var(--space-2xs); }
.pager__link--next { text-align: right; }
.pager__link:only-child { grid-column: 1 / -1; }
.pager__dir { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pager__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
.pager__link:hover .pager__title { color: var(--link); text-decoration: underline; }

.disclose {
  margin-top: var(--space-xl);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--flag);
  padding: var(--space-s) var(--space-m);
  background: var(--bg-sunken);
}
.disclose p { font-size: var(--step--1); color: var(--text-soft); max-width: 74ch; }

.byline {
  margin-top: var(--space-l);
  border-top: 2px solid var(--rule-strong);
  padding-top: var(--space-m);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
}
.byline__photo { border-radius: 50%; }
.byline__label { font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.byline__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
.byline__role { font-size: var(--step--1); color: var(--accent); font-weight: 600; margin-bottom: var(--space-2xs); }
.byline__bio, .byline__not { font-size: var(--step--1); color: var(--text-soft); max-width: 70ch; margin-bottom: var(--space-2xs); }
.byline__not { color: var(--text-muted); }
.byline__more { font-size: var(--step--1); }

/* ==========================================================================
   8. Index rows and home
   ========================================================================== */
.phead { padding-block: var(--space-xl) var(--space-l); border-bottom: 2px solid var(--rule-strong); }
.phead__eyebrow { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.phead__h { font-size: var(--step-5); margin-top: var(--space-2xs); max-width: 20ch; }
.phead__dek { font-size: var(--step-1); color: var(--text-soft); margin-top: var(--space-s); max-width: 62ch; }
.phead__stamp { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-s); }
.phead__cta { margin-top: var(--space-m); display: flex; gap: var(--space-m); align-items: center; flex-wrap: wrap; }
.phead--topic .phead__h { max-width: 24ch; }

.jump { margin-top: var(--space-m); }
.jump ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.jump a {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15em;
}
.jump a:hover { color: var(--link); border-bottom-color: var(--link); }
.jump--alpha ol { gap: 0.3rem 0.7rem; }

/* -- the five index row shapes --------------------------------------- */
.rows { border-top: 1px solid var(--rule-strong); }
.row { border-bottom: 1px solid var(--rule); }
.row__link {
  display: grid;
  gap: 0.15rem var(--space-m);
  align-items: baseline;
  padding-block: var(--space-s);
  text-decoration: none;
  color: var(--text);
  grid-template-columns: 3rem 1fr;
}
.row__link:hover { background: var(--bg-sunken); }
.row__link:hover .row__title { color: var(--link); text-decoration: underline; }
.row__n {
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.row__body { display: grid; gap: 0.2rem; }
.row__topic { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.row__pillar {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.05em 0.45em;
}
.row__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.24; }
.row__dek { font-size: var(--step--1); color: var(--text-muted); max-width: 76ch; }

.row--wide .row__title { font-size: var(--step-2); max-width: 30ch; }
.row--split .row__link { grid-template-columns: 3rem minmax(0, 24rem) 1fr; }
.row--split .row__body { display: contents; }
.row--split .row__topic { grid-row: 1; grid-column: 2; }
.row--split .row__title { grid-row: 2; grid-column: 2; }
.row--split .row__dek { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.row--plain .row__dek { display: none; }
.row--plain .row__link { padding-block: var(--space-xs); }
.row--numeral .row__n { font-size: var(--step-2); color: var(--text-muted); }
.row--dense .row__title { font-size: var(--step-0); }
.row--dense .row__dek { font-size: var(--step--2); }

.idx { margin-top: var(--section); }
.idx__head { border-bottom: 2px solid var(--rule-strong); padding-bottom: var(--space-s); margin-bottom: var(--space-s); display: grid; gap: 0.2rem; }
.idx__num { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); font-weight: 700; }
.idx__h { font-size: var(--step-3); }
.idx__blurb { font-size: var(--step-0); color: var(--text-muted); max-width: 62ch; }
.idx__more { font-size: var(--step--1); }

/* -- home ------------------------------------------------------------- */
.plate { background: var(--panel); color: var(--onpanel); border-bottom: 1px solid var(--panel-2); }
.plate__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }
.plate__eyebrow { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-light); }
.plate__h { font-size: var(--step-6); color: var(--onpanel); margin-top: var(--space-s); max-width: 16ch; }
.plate__dek { font-size: var(--step-0); color: var(--onpanel-muted); margin-top: var(--space-m); max-width: 58ch; }
.plate__cta { margin-top: var(--space-l); display: flex; gap: var(--space-m); align-items: center; flex-wrap: wrap; }
.plate__fig .scene { width: 100%; }

.pillars-wrap { margin-top: var(--section); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
.pillar a { display: grid; gap: 0.35rem; text-decoration: none; color: var(--text); border-top: 3px solid var(--accent); padding-top: var(--space-s); height: 100%; }
.pillar__num { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--accent); line-height: 1; }
.pillar__topic { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.pillar__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }
.pillar__dek { font-size: var(--step--1); color: var(--text-muted); }
.pillar__cue { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); margin-top: var(--space-2xs); }
.pillar a:hover .pillar__title { color: var(--link); text-decoration: underline; }

.sect { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--space-l); padding-block: var(--space-l); border-bottom: 1px solid var(--rule); }
.sect__head { display: grid; gap: 0.25rem; align-content: start; }
.sect__num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: var(--accent); line-height: 1; }
.sect__h { font-size: var(--step-2); }
.sect__h a { color: var(--text); text-decoration: none; }
.sect__h a:hover { color: var(--link); text-decoration: underline; }
.sect__blurb { font-size: var(--step--1); color: var(--text-muted); }
.sect__count { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.mini { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--rule); }
.mini li { border-bottom: 1px solid var(--rule-soft); }
.mini a { display: grid; gap: 0.1rem; padding-block: 0.6rem; text-decoration: none; color: var(--text); }
.mini a:hover .mini__title { color: var(--link); text-decoration: underline; }
.mini__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
.mini__dek { font-size: var(--step--2); color: var(--text-muted); }
.sect__more { grid-column: 2; font-size: var(--step--1); }

.tools__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); }
.tool { display: grid; gap: 0.4rem; text-decoration: none; color: var(--text); background: var(--bg-sunken); border-top: 3px solid var(--link); padding: var(--space-m); }
.tool__label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--link); }
.tool__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.tool__dek { font-size: var(--step--1); color: var(--text-muted); }
.tool:hover .tool__title { color: var(--link); text-decoration: underline; }

.topicfig { margin-block: var(--space-l); }
.topicfig .scene { width: 100%; background: var(--bg-sunken); }
.topicbody { display: grid; grid-template-columns: 1fr minmax(0, 22rem); gap: var(--space-xl); align-items: start; }
.topicbody__text p { font-size: var(--step-0); color: var(--text-soft); max-width: 68ch; }
.topiclead { display: grid; gap: 0.3rem; text-decoration: none; color: var(--text); border-top: 3px solid var(--accent); padding-top: var(--space-s); }
.topiclead__label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.topiclead__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.24; }
.topiclead__dek { font-size: var(--step--1); color: var(--text-muted); }
.topiclead:hover .topiclead__title { color: var(--link); text-decoration: underline; }

/* ==========================================================================
   9. Glossary and the worked model
   ========================================================================== */
.gsec { margin-top: var(--space-xl); display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-m); border-top: 2px solid var(--rule-strong); padding-top: var(--space-s); }
.gsec__letter { font-family: var(--font-display); font-size: var(--step-4); color: var(--accent); line-height: 1; }
.gsec__items { display: grid; gap: var(--space-m); }
.term { border-bottom: 1px solid var(--rule-soft); padding-bottom: var(--space-s); scroll-margin-top: 2rem; }
.term:target { background: var(--bg-tint); box-shadow: -0.7rem 0 0 var(--bg-tint), 0.7rem 0 0 var(--bg-tint); }
.term__name { font-size: var(--step-1); font-weight: 700; }
.term__topic { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3xs); }
.term__def { font-size: var(--step--1); color: var(--text-soft); max-width: 76ch; }
.term__see, .term__used { font-size: var(--step--2); color: var(--text-muted); margin-top: var(--space-3xs); }

.scen { margin-top: var(--space-l); }
.scen__h { font-size: var(--step-2); }
.scen__meta { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: var(--space-3xs); }
.wrap > .ledger, .wrap > .fig, .wrap > .panel { max-width: none; }

/* ==========================================================================
   10. Ads and consent
   --------------------------------------------------------------------------
   The mount point is empty until main.js has a publisher id to work with.
   An empty slot collapses completely: no border, no label, no reserved
   space, and no development placeholder reaching production.
   ========================================================================== */
.adslot:empty { display: none; }
.adslot {
  margin-block: var(--space-l);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--rule-soft);
}
.adslot__label {
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3xs);
}

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--panel);
  color: var(--onpanel);
  border-top: 3px solid var(--accent);
}
.consent[hidden] { display: none; }
.consent__inner {
  width: min(100% - var(--gutter) * 2, var(--content));
  margin-inline: auto;
  padding-block: var(--space-m);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-m);
  align-items: center;
}
.consent__title { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--2); color: var(--accent-light); }
.consent__body { font-size: var(--step--1); color: var(--onpanel-muted); max-width: 78ch; margin-top: var(--space-3xs); }
.consent__body a { color: var(--onpanel); }
.consent__actions { display: flex; gap: var(--space-s); flex-wrap: wrap; }

/* ==========================================================================
   11. Motion
   --------------------------------------------------------------------------
   There is almost none, on purpose. Nothing fades in, nothing waits for a
   script to become visible, and the default state in CSS is the readable
   state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 62rem) {
  .plate__inner { grid-template-columns: 1fr; gap: var(--space-l); padding-block: var(--space-xl); }
  .pillars { grid-template-columns: 1fr; gap: var(--space-m); }
  .sect { grid-template-columns: 1fr; gap: var(--space-m); }
  .sect__more { grid-column: 1; }
  .tools__grid { grid-template-columns: 1fr; }
  .topicbody { grid-template-columns: 1fr; gap: var(--space-l); }
  .rel__list { grid-template-columns: 1fr; gap: var(--space-s); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .compare__head, .compare__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .compare__head { display: none; }
  .compare__cell::before {
    content: attr(data-label);
  }
  .row--split .row__link { grid-template-columns: 3rem 1fr; }
  .row--split .row__body { display: grid; }
  .row--split .row__dek { grid-row: auto; grid-column: auto; }
}

@media (max-width: 46rem) {
  .masthead__inner { gap: var(--space-s); }
  .nav__list { gap: var(--space-s); width: 100%; }
  .nav__list a { font-size: var(--step--2); }
  .contents__list { columns: 1; }
  .lede__h { font-size: var(--step-4); max-width: none; }
  .phead__h { font-size: var(--step-4); max-width: none; }
  .plate__h { font-size: var(--step-5); max-width: none; }
  .foot__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .gsec { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .rail__item { grid-template-columns: 1fr; gap: 0.15rem; }
  .byline { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager__link--next { text-align: left; }
  .consent__inner { grid-template-columns: 1fr; }
  .band { flex-wrap: wrap; gap: 0.2rem; }
  .tier { grid-template-columns: 2.2rem 1fr; }
  .tier__split { grid-column: 2; }
  .row--plain .row__dek { display: block; }
}

/* ==========================================================================
   13. Print
   ========================================================================== */
@media print {
  .masthead, .foot, .consent, .adslot, .pager, .rel, .jump, .theme { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { display: block; padding: 0; }
  .prose > * { max-width: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="https://"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  .hero, .fig--stack { break-inside: avoid; }
}