/* ==========================================================================
   The Clearance Model — design system
   --------------------------------------------------------------------------
   One stylesheet. Sections in order:
     1 tokens · 2 reset · 3 utilities · 4 typography · 5 chrome
     6 cards & grids · 7 home furniture · 8 article layouts · 9 body components
     10 figures · 11 forms & library · 12 institutional · 13 ads & consent
     14 motion · 15 responsive · 16 print

   The look is a technical register rather than a magazine: cool paper, a deep
   ink masthead, a grotesque for everything structural, a screen serif for
   running text, and a monospace used for exactly one job — field codes,
   standard numbers and identifiers. Panels are ruled boxes, not cards with
   shadows: this is a document, and it should read like one.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Stock — cool, slightly blue paper. Never warm, never pure white. */
  --paper:      #f5f6f7;
  --paper-2:    #eceef0;
  --paper-3:    #dfe4e7;
  --white:      #ffffff;

  /* Ink — deep blue-black */
  --ink:        #131b23;
  --ink-soft:   #2f3c46;
  --ink-mute:   #54636f;
  --faint:      #8896a1;

  /* Clearance green — the primary accent. Validation, acceptance, section
     numerals. 5.6:1 on paper. */
  --accent:        #0f6b57;
  --accent-deep:   #0a4f40;
  --accent-light:  #63c2a6;

  /* Register blue — links and the second voice. 7.2:1 on paper. */
  --link:       #1d4e89;
  --link-deep:  #143a67;
  --link-light: #7b9dc4;

  /* Flag — reserved for one thing: a deadline, a penalty, a rejection.
     Never decorative. */
  --flag:       #a8410e;
  --flag-soft:  #f2e3da;

  /* Surfaces that are dark on purpose, in either theme: the masthead, the
     hero, the plate, the panel band, the footer and the consent banner. They
     must NOT invert with the colour scheme — a masthead that turns pale in
     dark mode is not a dark mode, it is a bug. --ink and --paper still swap;
     these two do not. */
  --panel:      #131b23;
  --onpanel:    #f5f6f7;

  /* Rules */
  --rule:        #d3d9dd;
  --rule-soft:   #e4e8ea;
  --rule-strong: #131b23;
  --rule-onink:  rgba(245, 246, 247, 0.2);

  /* Type. A grotesque for structure, a screen serif for reading, and a
     monospace for codes. The monospace is semantic here, not decorative:
     BT-112 set in the running face is harder to read and harder to copy. */
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", Consolas, Menlo, monospace;

  /* Fluid scale */
  --step-6: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --step-5: clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem);
  --step-4: clamp(1.75rem, 1.3rem + 1.9vw, 2.65rem);
  --step-3: clamp(1.42rem, 1.2rem + 1vw, 1.95rem);
  --step-2: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-1: clamp(1.06rem, 1.01rem + 0.24vw, 1.2rem);
  --step-0: clamp(1rem, 0.975rem + 0.12vw, 1.06rem);
  --step--1: clamp(0.875rem, 0.855rem + 0.08vw, 0.925rem);
  --step--2: 0.8rem;
  --step--3: 0.715rem;

  /* Layout */
  --measure:   67ch;
  --container: 1200px;
  --wide:      1380px;
  --gutter:    clamp(1.1rem, 4vw, 2.6rem);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius: 2px;

  /* Tell the UA which schemes exist, so form controls, scrollbars and the
     caret follow the page instead of staying stubbornly light. */
  color-scheme: light dark;
}

/* ==========================================================================
   1 bis. Dark palette
   --------------------------------------------------------------------------
   Measured, not inverted. The site is composed on cold paper; this is a
   reading accommodation for the same document, so the roles move down the
   ramp and keep their jobs. Three things are deliberate:

   The ground goes colder and darker than the masthead, so the deep-ink bar
   that defines the brand stays a raised band rather than dissolving into the
   page. --panel and --onpanel do not appear here at all: those surfaces are
   dark by design in both themes, which is why they were split out.

   The accents rise. Clearance green at #0f6b57 manages about 2:1 on a near
   black ground — unreadable — so it climbs to a lighter tint that holds
   around 8:1. Register blue does the same. The flag stays the flag.

   There is no theme switch in the interface, so there are no [data-theme]
   selectors: a selector nothing can activate is dead CSS.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0b1015;
    --paper-2:    #131a21;
    --paper-3:    #1d262f;
    --white:      #121920;

    --ink:        #e3e9ee;
    --ink-soft:   #c3ced7;
    --ink-mute:   #94a3ae;
    --faint:      #7d8b96;

    --accent:        #4cc0a1;
    --accent-deep:   #74d4bb;
    --accent-light:  #4cc0a1;

    --link:       #7fb0ea;
    --link-deep:  #a5c9f4;
    --link-light: #4a6c96;

    --flag:       #ff8a52;
    --flag-soft:  #2e1d14;

    --rule:        #29323b;
    --rule-soft:   #1e262d;
    --rule-strong: #8494a0;
  }

  /* Light type on a dark ground reads heavier than the same weight on paper.
     One step down keeps the headline the weight it was drawn to be. */
  h1, h2, h3, .brandmark__word b { font-weight: 600; }

  /* The plate's scrim needs more veil in dark mode: the surrounding page is
     no longer bright, so the eye adapts and the same gradient reads thinner. */
  .plate::after {
    background: linear-gradient(180deg, rgba(7, 11, 15, .72) 0%, rgba(7, 11, 15, .95) 78%);
  }

  /* A field code sitting in running prose needs its chip to stay legible
     without glowing. */
  code, .code { background: var(--paper-2); border-color: var(--rule); }
}

@view-transition { navigation: auto; }

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

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 600;
  text-wrap: balance;
  line-height: 1.17;
  letter-spacing: -0.014em;
}
hr { border: 0; border-top: 1px solid var(--rule); }
table { border-collapse: collapse; }

::selection { background: var(--paper-3); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.masthead :focus-visible, .site-footer :focus-visible { outline-color: var(--accent-light); }

/* Every figure on this site is set in the monospace with tabular figures, so
   a column of amounts lines up the way it does on a statement. */
.num, td.num, th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Field codes, standard numbers and identifiers in running prose. */
code, .code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0.08em 0.34em;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.skip-link {
  position: fixed;
  top: -140px; left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.2rem;
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide    { max-width: var(--wide); }
.container--narrow  { max-width: 800px; }
.container--reading { max-width: 720px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.muted { color: var(--ink-mute); }
.center { text-align: center; }
.mt-1 { margin-top: .8rem } .mt-2 { margin-top: 1.6rem } .mt-3 { margin-top: 2.6rem }
.mb-0 { margin-bottom: 0 }

.rule       { border: 0; border-top: 1px solid var(--rule-strong); margin-block: 2.4rem; }
.rule--hair { border-top-color: var(--rule); }

/* ==========================================================================
   4. Typography
   ========================================================================== */
/* Eyebrows are set in the monospace, not in small caps. On a site whose
   subject is codes, the monospace label is the house voice. */
.eyebrow, .kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--3);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--onpanel, .kicker--onpanel { color: var(--accent-light); }
.eyebrow--flag { color: var(--flag); }

.lede {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
}
.lede--large { font-size: var(--step-2); line-height: 1.55; }

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--3);
  font-weight: 500;
  letter-spacing: .06em;
  padding: .18em .5em .2em;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip--green { border-color: rgba(15,107,87,.35); background: rgba(15,107,87,.07); color: var(--accent-deep); }
.chip--flag  { border-color: rgba(168,65,14,.32); background: var(--flag-soft); color: var(--flag); }
.chip--onpanel { border-color: var(--rule-onink); background: transparent; color: var(--onpanel); }

/* The folio line above an article headline: a ruled strip of small monospace
   fields, which is what the head of a controlled document looks like. */
.meta-rail {
  display: flex; flex-wrap: wrap; align-items: stretch;
  font-family: var(--mono);
  font-size: var(--step--3);
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.meta-rail > * {
  padding: .62rem 1.1rem .62rem 0;
  margin-right: 1.1rem;
  border-right: 1px solid var(--rule);
  /* gap, because a flex container drops the whitespace between a text node
     and an inline child — "By" and the author's name would run together. */
  display: flex; align-items: center; gap: .36em;
}
.meta-rail > *:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.meta-rail a { color: var(--accent-deep); }
.meta-rail a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.meta-rail--onpanel { color: rgba(245,246,247,.7); border-top-color: var(--accent-light); border-bottom-color: var(--rule-onink); }
.meta-rail--onpanel > * { border-right-color: var(--rule-onink); }
.meta-rail--onpanel a { color: var(--onpanel); }

/* ==========================================================================
   5. Chrome — masthead, nav, breadcrumbs, footer
   ========================================================================== */
.progress {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent);
  z-index: 200;
}

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--panel);
  color: var(--onpanel);
  border-top: 3px solid var(--accent);
}

.masthead__bar { background: var(--panel); }
.masthead__row {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; padding-block: .55rem;
}

.brandmark {
  display: inline-flex; align-items: center; gap: .62rem;
  color: var(--onpanel);
  line-height: 1;
  flex: none;
}
.brandmark img, .brandmark svg { width: 34px; height: 34px; flex: none; }
.brandmark__word {
  font-family: var(--sans);
  font-size: 1.34rem; font-weight: 700; letter-spacing: -0.02em;
}
.brandmark__word b { font-weight: 700; }
.brandmark__word span { font-weight: 700; color: var(--accent-light); }

/* The strapline sits on the bar itself, set in the monospace, separated by a
   rule. A masthead in a technical publication carries its scope statement. */
.masthead__strap {
  display: none;
  font-family: var(--mono);
  font-size: var(--step--3);
  letter-spacing: .04em;
  color: rgba(245,246,247,.5);
  padding-left: 1.1rem;
  margin-left: .3rem;
  border-left: 1px solid var(--rule-onink);
  max-width: 26rem;
}

.masthead__nav { display: none; gap: 1.5rem; margin-left: auto; }
.nav-link {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(245,246,247,.76);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover { color: var(--onpanel); }
.nav-link[aria-current="page"] { color: var(--onpanel); border-bottom-color: var(--accent-light); }

/* Numbered section bar. The same numerals appear in the contents page and in
   the folio of every article, which is how a fifty-item library stays
   navigable without a mega menu. */
.topic-bar {
  display: none;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgba(19,27,35,.06);
}
.topic-bar__inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.topic-bar__inner::-webkit-scrollbar { display: none; }
.topic-link {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--ink-mute);
  padding: .6rem 1.05rem;
  white-space: nowrap;
  border-right: 1px solid var(--rule-soft);
  transition: color .2s, background .2s;
}
.topic-link:first-child { padding-left: 0; }
.topic-link__no {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  color: var(--accent);
}
.topic-link:hover, .topic-link[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.topic-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

.nav-toggle {
  width: 44px; height: 44px; margin-left: auto;
  display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--rule-onink);
}
.nav-toggle span { display: block; width: 19px; height: 1.5px; background: var(--onpanel); transition: transform .3s var(--ease-out), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile { display: none; background: var(--ink-soft); }
.nav-mobile[data-open="true"] { display: block; }
.nav-mobile ul { list-style: none; padding: .3rem var(--gutter) 1.1rem; margin: 0; }
.nav-mobile li + li { border-top: 1px solid var(--rule-onink); }
.nav-mobile a {
  display: block; padding: .8rem 0;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  color: rgba(245,246,247,.85);
}
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { color: var(--accent-light); }

.crumbs {
  font-family: var(--mono);
  font-size: var(--step--3);
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding-block: 1rem;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; padding: 0; margin: 0; }
.crumbs li::after { content: "/"; margin-left: .5rem; color: var(--faint); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--accent-deep); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs--onpanel { color: rgba(245,246,247,.62); }
.crumbs--onpanel a { color: var(--accent-light); }
.crumbs--onpanel li::after { color: rgba(245,246,247,.32); }

.site-footer {
  background: var(--panel);
  color: rgba(245,246,247,.74);
  font-family: var(--sans);
  font-size: var(--step--1);
  margin-top: 5rem;
  border-top: 3px solid var(--accent);
}
.site-footer .container { padding-block: 3rem 1.8rem; }
.site-footer .brandmark { color: var(--onpanel); }

/* A standing note above the link columns. It says what the publication is
   for, which is the first thing a reader arriving from a search result on
   page forty of the site wants to know. */
.footer-standing {
  padding-bottom: 2.2rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--rule-onink);
  max-width: 62ch;
}
.footer-standing p {
  font-family: var(--serif);
  margin-top: 1rem;
  line-height: 1.65;
  color: rgba(245,246,247,.7);
}
.footer-standing__note {
  font-size: var(--step--2);
  color: rgba(245,246,247,.5) !important;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}

.footer-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--rule-onink);
}
.site-footer h3 {
  font-family: var(--mono);
  font-size: var(--step--3);
  font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: .9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a, .linklike { color: rgba(245,246,247,.74); transition: color .2s; }
.site-footer a:hover, .linklike:hover { color: var(--onpanel); }
.footer-sections a { display: flex; gap: .55rem; align-items: baseline; }
.footer-sections .no { font-family: var(--mono); font-size: var(--step--3); color: var(--accent-light); }
.linklike { text-align: left; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .7rem 2rem; justify-content: space-between;
  padding-top: 1.5rem;
  font-size: var(--step--2);
  color: rgba(245,246,247,.5);
}
.footer-bottom a { color: rgba(245,246,247,.7); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   6. Cards & grids
   ========================================================================== */
/* Panels, not cards. A ruled box with a code in the corner is what a page of
   a register looks like; a floating card with a shadow is what a template
   looks like. */
.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  transition: border-color .25s, transform .25s var(--ease-out);
}
.card:hover { border-color: var(--ink); }
.card__media { position: relative; background: var(--paper-2); aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--rule); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--ease-out); }
.card:hover .card__media img { opacity: .9; }
.card__body { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: .95rem 1.1rem 1.15rem; }
.card__topic {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.card__title { font-family: var(--sans); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }
.card__title a { transition: color .2s; }
.card:hover .card__title a { color: var(--accent-deep); }
.card__excerpt { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); line-height: 1.6; }
/* Not pushed to the bottom of the cell. Cards in a run have different lengths,
   and forcing their folios to align leaves voids that read as a broken layout
   rather than as a column of type. */
.card__meta {
  margin-top: .7rem;
  font-family: var(--mono); font-size: var(--step--3);
  letter-spacing: .04em; color: var(--faint);
  display: flex; gap: .8rem; flex-wrap: wrap;
}

/* Five panel shapes. Uniform grids of identical cards are the most
   recognisable signature of generated output, so runs are laid out in a
   rhythm instead. */
.card--wide { grid-column: span 2; }
.card--wide .card__media { aspect-ratio: 21 / 9; }
.card--wide .card__title { font-size: var(--step-3); }

.card--text { border-top: 3px solid var(--accent); background: var(--paper-2); }
.card--text .card__media { display: none; }

.card--compact { flex-direction: row; align-items: stretch; }
.card--compact .card__media { aspect-ratio: 1; width: 104px; flex: none; border-bottom: 0; border-right: 1px solid var(--rule); }
.card--compact .card__body { padding: .8rem .95rem; }
.card--compact .card__title { font-size: var(--step-1); }
.card--compact .card__excerpt { display: none; }

.card--quiet { background: transparent; }
.card--quiet .card__media { aspect-ratio: 3 / 1; }
.card--quiet .card__title { font-size: var(--step-1); }

.card--feature { grid-column: span 2; border-top: 3px solid var(--accent); }
.card--feature .card__media { aspect-ratio: 16 / 8; }
.card--feature .card__title { font-size: var(--step-4); }
.card--feature .card__excerpt { font-size: var(--step-0); }
.card--feature .card__body { padding: 1.2rem 1.4rem 1.5rem; }

.grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* ==========================================================================
   7. Home & section furniture
   ========================================================================== */
.hero {
  position: relative;
  background: var(--panel);
  color: var(--onpanel);
  overflow: hidden;
  border-bottom: 3px solid var(--accent);
}
.hero__inner { position: relative; padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(2rem, 4.5vw, 3rem); }
.hero__grid { display: grid; gap: 1.8rem 3.4rem; align-items: end; }
.hero h1 {
  font-family: var(--sans);
  font-size: var(--step-6);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin-top: .8rem;
  color: var(--onpanel);
}
.hero h1 em { font-style: normal; color: var(--accent-light); }
.hero__side { padding-bottom: .4rem; border-left: 1px solid var(--rule-onink); padding-left: 2rem; }
.hero .lede { color: rgba(245,246,247,.78); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* The exchange schematic under the nameplate — the one recurring motif of the
   site, drawn as a route rather than as decoration. */
.hero__schematic { position: relative; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-onink); }
.hero__schematic svg { width: 100%; height: auto; }

.section { padding-block: clamp(2.6rem, 5.5vw, 4.2rem); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--rule); }
.section--panel { background: var(--panel); color: var(--onpanel); }
.section--panel h2 { color: var(--onpanel); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .7rem 1.6rem;
  padding-bottom: .75rem;
  margin-bottom: 1.9rem;
  border-bottom: 2px solid var(--ink);
}
.section-head h2 { font-size: var(--step-3); font-weight: 700; }
.section-head p { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); max-width: 52ch; margin-top: .3rem; }
.section-head .more {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.section-head .more:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }

/* Section opener on a topic page. */
.topic-intro {
  max-width: 940px;
  margin-bottom: 2.6rem;
  padding: 1.5rem 1.7rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}
.topic-intro p {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
}
@media (min-width: 860px) {
  .topic-intro p { column-count: 2; column-gap: 2.6rem; }
}

/* Contents listing of the six sections */
.topic-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.topic-row {
  display: grid; gap: .35rem 1.8rem;
  grid-template-columns: 1fr;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background .25s, padding-left .25s var(--ease-out);
}
.topic-row:hover { background: var(--white); padding-left: .7rem; }
.topic-row__no {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 400;
  color: var(--accent); letter-spacing: .04em;
}
.topic-row h3 { font-size: var(--step-2); font-weight: 600; }
.topic-row p { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); max-width: 64ch; }
.topic-row__count {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}

/* ==========================================================================
   8. Article layouts
   ========================================================================== */
.article-head { padding-block: 1.4rem 1.3rem; }
.article-head h1 { font-size: var(--step-5); font-weight: 700; line-height: 1.07; margin-block: .7rem .8rem; }
.article-head .lede { margin-bottom: 1.4rem; }

/* -- feature: a full-width plate, title over it --------------------------- */
.plate {
  position: relative;
  background: var(--panel);
  color: var(--onpanel);
  overflow: hidden;
  border-bottom: 3px solid var(--accent);
}
.plate__bg { position: absolute; inset: 0; opacity: .2; }
.plate__bg img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,27,35,.6) 0%, rgba(19,27,35,.95) 78%);
}
.plate__inner { position: relative; z-index: 2; padding-block: clamp(2rem, 6vw, 4rem) clamp(1.6rem, 4vw, 2.6rem); }
.plate h1 { font-size: var(--step-5); font-weight: 700; line-height: 1.06; max-width: 21ch; margin-block: .8rem .9rem; color: var(--onpanel); }
.plate .lede { color: rgba(245,246,247,.8); margin-bottom: 1.8rem; }
.plate .meta-rail { max-width: 64rem; }
.plate .crumbs { padding-top: 0; padding-bottom: .9rem; }

/* Layouts with no side column get a centred measure. */
.layout-feature .article-shell,
.layout-worked .article-shell,
.layout-feature .article-head,
.layout-worked .article-head,
.layout-feature .crumbs,
.layout-worked .crumbs { max-width: 880px; margin-inline: auto; }
.layout-essay .article-shell,
.layout-essay .article-head,
.layout-essay .crumbs { max-width: 760px; margin-inline: auto; }
.layout-feature .article-body,
.layout-worked .article-body,
.layout-essay .article-body { max-width: none; }

/* One column until the side-column breakpoints below take over. The explicit
   minmax(0, 1fr) is load-bearing, not decoration: a grid with no declared
   columns gets an implicit `auto` track, and an `auto` track cannot be sized
   below the min-content of what is in it. A single wide table was enough to
   push that track to 578px inside a 340px container on a phone, and because
   the body clips horizontal overflow there was no scrollbar to reveal it —
   every line of the article was simply cut off at the right edge. */
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; align-items: start; }
.article-shell > * { min-width: 0; }

.article-body { max-width: var(--measure); font-size: var(--step-1); line-height: 1.76; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 {
  font-size: var(--step-3);
  font-weight: 700;
  margin-top: 2.4em; margin-bottom: .5em;
  padding-top: .8rem;
  border-top: 2px solid var(--ink);
  position: relative;
}
.article-body h3 { font-size: var(--step-2); font-weight: 600; margin-top: 1.9em; margin-bottom: .35em; }
.article-body h4 {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  margin-top: 1.8em; margin-bottom: .3em; color: var(--accent-deep);
}

/* Section numerals in the margin, set in the monospace with a section mark —
   the apparatus of a specification, not of a blog. */
.article-body { counter-reset: h2counter; }
.article-body h2 { counter-increment: h2counter; }
@media (min-width: 1140px) {
  .layout-standard .article-body h2::before,
  .layout-worked   .article-body h2::before,
  .layout-reference .article-body h2::before {
    content: "§ " counter(h2counter, decimal-leading-zero);
    position: absolute; left: -4.6rem; top: 1.15rem;
    font-family: var(--mono); font-size: var(--step--2); font-weight: 400;
    color: var(--accent); white-space: nowrap;
  }
}

.article-body a:not(.chip):not(.btn) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29,78,137,.35);
  transition: text-decoration-color .2s, color .2s;
}
.article-body a:not(.chip):not(.btn):hover { color: var(--link-deep); text-decoration-color: currentColor; }
.article-body a[rel~="external"]::after,
.article-body a[target="_blank"]::after {
  content: "\2009\2197";
  font-size: .68em;
  vertical-align: .34em;
  color: var(--faint);
}

.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body li + li { margin-top: .45em; }
.article-body li::marker { color: var(--accent); font-family: var(--mono); font-size: .9em; }
.article-body blockquote {
  margin-left: 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accent);
  font-style: italic; color: var(--ink-soft);
}
.article-body strong { font-weight: 600; }

/* Standfirst initial — a rule and a raised first line rather than a drop cap.
   A drop cap on a compliance article reads as costume. */
.layout-essay .article-body > p:first-of-type,
.layout-feature .article-body > p:first-of-type {
  font-size: 1.14em;
  line-height: 1.55;
  color: var(--ink);
}
.layout-essay .article-body > p:first-of-type::first-line,
.layout-feature .article-body > p:first-of-type::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
}
.layout-essay .article-body { font-size: var(--step-2); line-height: 1.7; max-width: 62ch; }
.layout-feature .article-body { max-width: 68ch; }

/* Aside column */
.article-aside { font-family: var(--sans); font-size: var(--step--1); display: grid; gap: 1.7rem; }
.aside-block { border: 1px solid var(--rule); background: var(--white); padding: .9rem 1rem 1.1rem; }
.aside-block h2, .aside-block h3 {
  font-family: var(--mono); font-size: var(--step--3);
  font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem;
}
.aside-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.aside-block li { line-height: 1.42; }
.aside-block a { color: var(--ink); }
.aside-block a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Contents */
.toc { position: sticky; top: 6.2rem; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: grid; gap: .5rem; }
.toc li { counter-increment: toc; display: flex; gap: .6rem; line-height: 1.4; }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--step--3);
  color: var(--faint); padding-top: .18em;
}
.toc a { color: var(--ink-soft); }
.toc a:hover, .toc a.is-current { color: var(--accent-deep); }
.toc a.is-current { font-weight: 600; }

.toc--inline {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem 1.2rem;
  margin-block: 2rem;
}
.toc--inline h2 {
  font-family: var(--mono) !important; font-size: var(--step--3) !important;
  font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  border: 0 !important; padding: 0 !important; margin: 0 0 .8rem !important;
}
.toc--inline a { color: var(--ink); }
.toc--inline ol { grid-template-columns: 1fr; }
@media (min-width: 700px) { .toc--inline ol { grid-template-columns: 1fr 1fr; gap: .5rem 1.6rem; } }

/* ==========================================================================
   9. Body components — the value elements
   ========================================================================== */

/* In short — the summary block that opens a brief */
.inshort {
  background: var(--white);
  border: 1px solid var(--ink);
  border-top: 4px solid var(--accent);
  padding: 1.2rem 1.4rem 1.4rem;
  margin-bottom: 2rem;
}
.inshort h2 {
  font-family: var(--mono) !important; font-size: var(--step--3) !important;
  font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--accent);
  border: 0 !important; padding: 0 !important; margin: 0 0 .85rem !important;
}
.inshort ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-family: var(--serif); font-size: var(--step--1); line-height: 1.58; }
.inshort li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.inshort li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .85rem; height: 2px; background: var(--accent);
}

/* Statement table */
.table-wrap { overflow-x: auto; margin-block: 2rem; border: 1px solid var(--rule); background: var(--white); }
.stable {
  width: 100%; font-family: var(--sans); font-size: var(--step--1); min-width: 36rem;
}
.stable caption {
  caption-side: top; text-align: left;
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  padding: .75rem 1rem .55rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.stable th, .stable td { padding: .58rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.stable thead th {
  font-size: var(--step--3); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
  background: var(--paper-2);
}
.stable tbody tr:nth-child(even) { background: rgba(19,27,35,.022); }
.stable tbody tr:last-child td { border-bottom: 0; }
.stable td:not(:first-child), .stable th:not(:first-child) {
  font-variant-numeric: tabular-nums lining-nums;
}
.stable .row-total td { border-top: 2px solid var(--ink); font-weight: 600; background: var(--paper-2); }
.stable-note { font-size: var(--step--2); color: var(--ink-mute); padding: .7rem 1rem; font-family: var(--serif); }

/* Worked calculation */
.calc {
  margin-block: 2.1rem;
  border: 1px solid var(--ink);
  background: var(--white);
}
.calc__head { padding: .95rem 1.3rem .7rem; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.calc__head h3, .calc__head .h {
  font-family: var(--mono) !important; font-size: var(--step--3) !important;
  font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.calc__head p { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); margin-top: .35rem; }
.calc__rows { list-style: none; padding: 0 1.3rem; margin: .3rem 0 0; }
.calc__rows li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem;
  padding: .48rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  line-height: 1.4;
}
.calc__rows li span { min-width: 0; }
/* The value column was `white-space: nowrap`, which is correct for the figure
   it was designed for and wrong for a value expressed in words. At 360px a
   prose value ran to 591px and was clipped by the container, with no
   scrollbar to reveal it. Numbers are short enough that they do not wrap in
   practice; long values now wrap or drop to their own line instead of
   disappearing. */
.calc__rows li span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  text-align: right;
  overflow-wrap: break-word;
}
.calc__rows li.op { color: var(--ink-mute); }
.calc__rows li.op span:last-child { color: var(--ink-mute); }
.calc__result {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  margin: 0;
  padding: .85rem 1.3rem .9rem;
  border-top: 2px solid var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: var(--step-0);
  background: var(--paper-2);
}
.calc__result b {
  font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--step-2); color: var(--accent-deep); font-weight: 500;
}
.calc__foot {
  font-family: var(--serif); font-size: var(--step--2); color: var(--ink-mute);
  border-top: 1px solid var(--rule);
  padding: .7rem 1.3rem .85rem; line-height: 1.55;
}

/* Checklist */
.checklist { margin-block: 2rem; border: 1px solid var(--ink); background: var(--white); }
.checklist__head { border-bottom: 1px solid var(--rule); padding: .8rem 1.2rem; background: var(--paper-2); }
.checklist__head .h {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.checklist ol { list-style: none; padding: 0 1.2rem; margin: 0; counter-reset: ck; }
.checklist li {
  counter-increment: ck;
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--serif); font-size: var(--step--1); line-height: 1.58;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: counter(ck, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--accent); padding-top: .12em;
}

/* Timeline — the block this niche needs and the electricity site did not.
   Every entry carries a status, because a date with no status is the single
   most common error in writing about mandates. */
.timeline { margin-block: 2.2rem; border: 1px solid var(--ink); background: var(--white); }
.timeline__head { padding: .8rem 1.2rem; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.timeline__head .h {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.timeline ol { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: grid; grid-template-columns: 1fr; gap: .3rem 1.2rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.timeline li:last-child { border-bottom: 0; }
.timeline__when {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  color: var(--ink); white-space: nowrap;
}
.timeline__what { font-family: var(--serif); font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.timeline__status {
  font-family: var(--mono); font-size: var(--step--3);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .16em .5em .18em;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  justify-self: start;
  white-space: nowrap;
}
.timeline__status[data-status="in force"] { border-color: rgba(15,107,87,.4); background: rgba(15,107,87,.08); color: var(--accent-deep); }
.timeline__status[data-status="adopted"]  { border-color: rgba(29,78,137,.35); background: rgba(29,78,137,.07); color: var(--link-deep); }
.timeline__status[data-status="proposed"] { border-color: rgba(168,65,14,.35); background: var(--flag-soft); color: var(--flag); }
.timeline__foot { font-family: var(--serif); font-size: var(--step--2); color: var(--ink-mute); padding: .75rem 1.2rem .85rem; border-top: 1px solid var(--rule); line-height: 1.55; }

/* Callouts */
.note {
  margin-block: 1.9rem;
  padding: .85rem 1.1rem .95rem;
  border-left: 3px solid var(--link);
  background: var(--paper-2);
  font-family: var(--serif); font-size: var(--step--1); line-height: 1.62;
  color: var(--ink-soft);
}
.note .h {
  display: block;
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--link-deep); margin-bottom: .4rem;
}
.note--warn { border-left-color: var(--flag); background: var(--flag-soft); }
.note--warn .h { color: var(--flag); }
.note--green { border-left-color: var(--accent); background: rgba(15,107,87,.06); }
.note--green .h { color: var(--accent-deep); }

/* Pull quote */
.pullquote {
  margin-block: 2.6rem;
  padding: 1.2rem 0 1.3rem;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 30ch;
}

/* FAQ */
.faq { margin-top: 3rem; }
.faq > h2 { font-size: var(--step-3); font-weight: 700; border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: .8rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start;
  padding: .85rem 0;
  font-family: var(--sans); font-weight: 600; font-size: var(--step-1);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1.1rem; font-weight: 400; line-height: 1.2;
  color: var(--accent); transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 0 1rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.66; font-family: var(--serif); max-width: 68ch; }
.faq .faq__a a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Sources */
.sources { margin-top: 3rem; padding-top: .9rem; border-top: 2px solid var(--ink); }
.sources h2 {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.sources ol { list-style: none; padding: 0; margin: 0; counter-reset: src; display: grid; gap: .7rem; }
.sources li {
  counter-increment: src;
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem;
  font-family: var(--serif); font-size: var(--step--1); line-height: 1.5;
}
.sources li::before {
  content: "[" counter(src) "]";
  font-family: var(--mono); font-size: var(--step--3); color: var(--faint); padding-top: .2em;
}
.sources a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sources a:hover { color: var(--link-deep); }
.sources .host { display: block; font-family: var(--mono); font-size: var(--step--3); color: var(--faint); margin-top: .12rem; }

/* Author box */
.authorbox {
  margin-top: 3rem;
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
}
.authorbox img {
  width: 88px; height: 88px;
  object-fit: cover; border: 1px solid var(--rule);
}
/* Until a photograph exists the block still runs — the name, the role and the
   competence are the signal. It simply has one column instead of two. */
.authorbox--nophoto { grid-template-columns: 1fr !important; }
.authorbox .h {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: .45rem;
}
.authorbox strong { font-family: var(--sans); font-size: var(--step-2); font-weight: 700; display: block; }
.authorbox .role { font-family: var(--mono); font-size: var(--step--2); font-style: normal; color: var(--ink-mute); display: block; margin-top: .2rem; }
.authorbox p { font-family: var(--serif); font-size: var(--step--1); line-height: 1.64; color: var(--ink-soft); margin-top: .75rem; max-width: 70ch; }
.authorbox__more a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Related */
.related { margin-top: 3.2rem; }
.related > h2 {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: 1.3rem;
}

/* ==========================================================================
   10. Figures & diagrams
   ========================================================================== */
figure { margin: 2.1rem 0; }
figure img, figure svg { width: 100%; }
figcaption {
  margin-top: .55rem;
  font-family: var(--sans); font-size: var(--step--2);
  color: var(--ink-mute); line-height: 1.5;
  padding-top: .5rem; border-top: 1px solid var(--rule);
  max-width: 64ch;
}
.figure--hero { margin: 0 0 2rem; }
.figure--hero img { border: 1px solid var(--rule); }
.figure--inset { float: none; margin: 1.8rem 0; }
.figure--strip img { aspect-ratio: 5 / 1; object-fit: cover; border: 1px solid var(--rule); }
.figure--diagram img, .figure--diagram svg { border: 1px solid var(--rule); background: var(--white); }

/* ==========================================================================
   11. Forms, buttons, library
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--step--2);
  letter-spacing: .04em;
  padding: .76rem 1.35rem;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--quiet { border-color: var(--rule); color: var(--ink); background: var(--white); }
.btn--quiet:hover { border-color: var(--ink); }
.hero .btn--quiet, .plate .btn--quiet, .section--panel .btn--quiet,
.cookie-banner .btn--quiet {
  background: transparent; border-color: rgba(245,246,247,.45); color: var(--onpanel);
}
.hero .btn--quiet:hover, .plate .btn--quiet:hover, .section--panel .btn--quiet:hover,
.cookie-banner .btn--quiet:hover { background: var(--onpanel); color: var(--panel); }
.btn--sm { padding: .52rem 1rem; }

.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.field input, .field textarea, .field select {
  font-family: var(--serif); font-size: var(--step-0);
  padding: .68rem .8rem;
  border: 1px solid var(--rule);
  background: var(--white); color: var(--ink);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15,107,87,.15);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field .hint { font-family: var(--serif); font-size: var(--step--2); color: var(--faint); }

.form-status { font-family: var(--sans); font-size: var(--step--1); margin-top: .9rem; padding: .7rem .9rem; display: none; }
.form-status[data-state="ok"]   { display: block; background: rgba(15,107,87,.08); color: var(--accent-deep); }
.form-status[data-state="err"]  { display: block; background: var(--flag-soft); color: var(--flag); }
.form-status[data-state="busy"] { display: block; background: var(--paper-2); color: var(--ink-mute); }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; }
.filter {
  font-family: var(--sans); font-size: var(--step--2); font-weight: 500;
  padding: .42rem .9rem;
  border: 1px solid var(--rule);
  background: var(--white); color: var(--ink-soft);
  transition: background .2s, color .2s, border-color .2s;
}
.filter:hover { border-color: var(--ink-mute); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.searchbar { position: relative; margin-bottom: 1.1rem; }
.searchbar input {
  width: 100%; font-family: var(--serif); font-size: var(--step-0);
  padding: .8rem 1rem .8rem 2.6rem;
  border: 1px solid var(--rule); background: var(--white);
}
.searchbar input:focus { outline: none; border-color: var(--accent); }
.searchbar svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: .5; }

/* Library index */
.index-group { margin-bottom: 2.8rem; }
.index-group > h2 {
  font-family: var(--sans); font-size: var(--step-3); font-weight: 700;
  padding-bottom: .5rem; margin-bottom: .3rem;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; gap: .7rem;
}
.index-group > h2 .no { font-family: var(--mono); font-size: var(--step--1); font-weight: 400; color: var(--accent); }
.index-group > p { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); margin-bottom: 1.1rem; max-width: 66ch; }
.index-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-soft); }
.index-list li { border-bottom: 1px solid var(--rule-soft); }
.index-list a {
  display: grid; gap: .12rem .9rem;
  grid-template-columns: 1fr;
  padding: .82rem .6rem;
  transition: background .2s, padding-left .25s var(--ease-out);
}
.index-list a:hover { padding-left: 1.1rem; background: var(--white); }
.index-list .t { font-family: var(--sans); font-size: var(--step-1); font-weight: 600; line-height: 1.26; }
.index-list a:hover .t { color: var(--accent-deep); }
.index-list .d { font-family: var(--serif); font-size: var(--step--1); color: var(--ink-mute); line-height: 1.52; }
.index-list .m {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--faint); white-space: nowrap;
}

/* ==========================================================================
   12. Institutional pages
   ========================================================================== */
.page-head {
  background: var(--paper-2);
  color: var(--ink);
  padding-block: clamp(1.6rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--ink);
}
.page-head h1 { font-size: var(--step-4); font-weight: 700; margin-top: .5rem; max-width: 24ch; }
.page-head .lede { color: var(--ink-soft); margin-top: .9rem; }

.prose { max-width: 74ch; font-size: var(--step-0); line-height: 1.75; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-size: var(--step-2); font-weight: 700; margin-top: 2.2em; margin-bottom: .45em;
  padding-top: .7rem; border-top: 1px solid var(--ink);
}
.prose h3 { font-size: var(--step-1); font-weight: 600; margin-top: 1.8em; margin-bottom: .3em; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--link-deep); }
.prose dl { display: grid; gap: .5rem 1.4rem; }
.prose dt { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.prose dd { margin: 0 0 .7rem; }

.legal-updated {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 400;
  color: var(--ink-mute);
  padding: .5rem 0 .55rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: block; margin-bottom: 1.8rem;
}

.error-page { text-align: center; padding-block: clamp(3rem, 12vw, 7rem); }
.error-page .code {
  font-family: var(--mono); font-size: clamp(3.4rem, 12vw, 6.5rem);
  font-weight: 500; line-height: 1; color: var(--accent);
}
.error-page h1 { font-size: var(--step-4); font-weight: 700; margin-block: .8rem .8rem; }
.error-page p { max-width: 54ch; margin-inline: auto; color: var(--ink-mute); }
.error-page .btn { margin-top: 1.6rem; }

/* ==========================================================================
   13. Ads & consent
   --------------------------------------------------------------------------
   An ad position renders NOTHING until a real publisher ID and slot ID exist:
   no box, no border, no label, no reserved height.
   ========================================================================== */
.adzone { display: none; }
.adzone.is-live { display: block; margin-block: 2.2rem; }
.adzone.is-live .adlabel {
  font-family: var(--mono); font-size: var(--step--3); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  text-align: center; margin-bottom: .4rem;
}
.adzone.is-live ins { display: block; }
.adzone--h.is-live { min-height: 100px; }
.adzone--r.is-live { min-height: 260px; }

.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  background: var(--panel); color: rgba(245,246,247,.9);
  border-top: 3px solid var(--accent);
  transform: translateY(110%);
  transition: transform .45s var(--ease-out);
}
.cookie-banner[data-open="true"] { transform: none; }
.cookie-banner__inner {
  max-width: var(--container); margin-inline: auto;
  padding: 1.05rem var(--gutter) 1.15rem;
  display: grid; gap: 1rem;
  font-family: var(--serif); font-size: var(--step--2); line-height: 1.6;
}
.cookie-banner a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   14. Motion
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(10px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cookie-banner__inner { grid-template-columns: 1fr auto; align-items: center; }
  .authorbox { grid-template-columns: auto 1fr; align-items: start; }
  .topic-row { grid-template-columns: 3rem 1fr auto; align-items: baseline; }
  .index-list a { grid-template-columns: 1fr auto; align-items: baseline; }
  .index-list .d { grid-column: 1 / -1; }
  .timeline li { grid-template-columns: 9.5rem 1fr 8.5rem; align-items: start; }
  .timeline__status { justify-self: end; }
}

@media (min-width: 940px) {
  .masthead__nav { display: flex; }
  .masthead__strap { display: block; }
  .topic-bar { display: block; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1.55fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .figure--inset { float: right; width: 45%; margin: .4rem 0 1.4rem 2rem; }

  .layout-standard .article-shell,
  .layout-brief .article-shell { grid-template-columns: minmax(0, 1fr) 280px; }
  .layout-reference .article-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .layout-reference .article-aside { order: -1; position: sticky; top: 6.2rem; }
}

@media (min-width: 1140px) {
  .layout-standard .article-shell,
  .layout-brief .article-shell { grid-template-columns: minmax(0, 1fr) 310px; gap: 3.6rem; }
  .layout-reference .article-shell { grid-template-columns: 270px minmax(0, 1fr); gap: 3.6rem; }
}

@media (max-width: 939px) {
  .hero__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-onink); padding-top: 1.2rem; }
}

@media (max-width: 619px) {
  .card--wide, .card--feature { grid-column: span 1; }
  .card--wide .card__title, .card--feature .card__title { font-size: var(--step-2); }
  .meta-rail { font-size: var(--step--3); }
  .meta-rail > * { padding-right: .75rem; margin-right: .75rem; }
  .timeline__status { margin-top: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   16. Print
   ========================================================================== */
@media print {
  .masthead, .site-footer, .article-aside, .adzone, .cookie-banner,
  .progress, .skip-link, .related, .filters, .searchbar { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .article-body { max-width: none; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
  .calc, .stable, .checklist, .timeline, figure { break-inside: avoid; }
}