/* ==========================================================================
   1000 Venetian Way — owner publication
   One stylesheet for the whole site. Edit here, every page changes.

   CONTENTS
     1.  Tokens (colour, type, measure)
     2.  Base
     3.  Nav rail
     4.  Front page
     5.  Article header (kicker / headline / dek / byline)
     6.  Body text
     7.  Reporting components (findings, evidence, figures, timeline, docs)
     8.  Reference components (contents rail, categories, tables, template)
     9.  Footers (tags, read next, colophon)
     10. Utility + responsive + print
   ========================================================================== */


/* --- 1. TOKENS ---------------------------------------------------------- */

:root {
  /* Committed to a white page in every viewer's theme — this is a document,
     and documents are printed on paper. */
  color-scheme: light;

  --paper:      #FFFFFF;
  --surface:    #F5F5F4;   /* boxes, quiet fills */
  --surface-2:  #EDEDEB;   /* second-level fill */
  --ink:        #111111;
  --ink-soft:   #2E2E2E;
  --muted:      #6E6E6E;
  --faint:      #969696;
  --rule:       #DCDCDC;
  --rule-soft:  #ECECEC;

  /* ONE variable gives the publication a signature colour. Set it to
     something like #B3261E and every kicker, tag and rule picks it up.
     Left as ink for now — monochrome. */
  --accent:     #111111;

  --f-head: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 34rem;      /* body column — about 68 characters */
  --shell: 1200px;
}


/* --- 2. BASE ------------------------------------------------------------ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

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

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }


/* --- 3. NAV RAIL -------------------------------------------------------- */

.nav { border-bottom: 1px solid var(--ink); background: var(--paper); }

.nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.nav__brand {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  padding: 15px 0;
  white-space: nowrap;
}
.nav__brand span {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--f-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 15px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }


/* --- 4. FRONT PAGE ------------------------------------------------------ */

.flag {
  border-bottom: 3px solid var(--ink);
  padding: 52px 0 30px;
}
.flag h1 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.flag p {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0;
  text-wrap: pretty;
}

/* lead story */
.lead {
  display: block;
  text-decoration: none;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--ink);
}
.lead h2 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  margin: 14px 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
.lead:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lead p {
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 20px;
}

/* section band */
.band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 56px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.band h2 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.band span {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
}

/* story list */
.stories { list-style: none; margin: 0; padding: 0; }
.stories > li { border-bottom: 1px solid var(--rule); }

.story {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 30px;
  padding: 26px 0;
  text-decoration: none;
  align-items: start;
}
.story__rail {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  padding-top: 6px;
}
.story h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.019em;
  margin: 0 0 8px;
  max-width: 26ch;
  text-wrap: balance;
}
.story:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42rem;
}

/* two-up grid for shorter items */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid > li { border-bottom: 1px solid var(--rule); }
.grid .story { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grid .story__rail { padding-top: 0; }


/* --- 5. ARTICLE HEADER -------------------------------------------------- */

.head { border-bottom: 1px solid var(--rule); padding: 44px 0 34px; }
.head__inner { max-width: 46rem; }

.kicker {
  font-family: var(--f-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  min-width: 24px;
}

.head h1 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.15rem, 5.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.dek {
  font-family: var(--f-body);
  font-size: clamp(1.12rem, 2.4vw, 1.42rem);
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 40rem;
  text-wrap: pretty;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-head);
  font-size: 12.5px;
}
.byline__who { font-weight: 700; }
.byline--nameless { font-family: var(--f-mono); }
.byline__role,
.byline__date {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* hero image */
.hero { margin: 0; padding: 32px 0 0; }
.hero img { width: 100%; border: 1px solid var(--rule); }
.hero figcaption {
  font-family: var(--f-head);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
  max-width: 42rem;
}


/* --- 6. BODY TEXT ------------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px 96px; }

/* Reporting pages run as one centred column, Lever-style. The page class
   narrows the whole measure — header, body and colophon together — so the
   column sits in the middle of the screen instead of hugging the left. */
body.page-single .wrap,
body.page-single .shell { max-width: 42rem; }
.shell--single .article { max-width: none; padding-top: 40px; }

/* Reference pages: contents rail + column. The article is capped so that
   full-width elements (rules, tables, category rows) sit a little wider than
   the text measure rather than nearly double it. */
.shell--rail .article { max-width: 42rem; }
.shell--rail {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.article { min-width: 0; }
.article > * { max-width: var(--measure); }

p { margin: 0 0 22px; text-wrap: pretty; }

.article > p:first-of-type { font-size: 1.1rem; line-height: 1.55; }

.article h2 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.32rem, 2.8vw, 1.62rem);
  line-height: 1.16;
  letter-spacing: -0.019em;
  text-wrap: balance;
  margin: 52px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 20px;
}
.article h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 34px 0 10px;
  text-wrap: balance;
}
.article h4 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 10px;
}

.article a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color .15s;
}
.article a:hover { text-decoration-color: var(--ink); }

strong { font-weight: 600; }

ul.plain, ol.plain { margin: 0 0 24px; padding-left: 1.15em; }
ul.plain li, ol.plain li { margin-bottom: 9px; padding-left: 6px; }
ul.plain li::marker, ol.plain li::marker { color: var(--muted); }
ol.plain li::marker { font-family: var(--f-mono); font-size: 0.82em; }

.cols {
  max-width: none;
  columns: 2;
  column-gap: 46px;
  margin: 0 0 24px;
  padding-left: 1.15em;
  font-size: 0.94rem;
}
.cols li { margin-bottom: 6px; break-inside: avoid; padding-left: 6px; }
.cols li::marker { color: var(--muted); }

/* numbered steps with hanging numerals */
ol.steps { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  margin-bottom: 22px;
}
ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.28em;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
}
ol.steps li > strong:first-child {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
ol.steps li > p { margin-bottom: 10px; }

/* pull quote */
blockquote.pull {
  max-width: none;
  margin: 34px 0;
  padding: 26px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.24;
  letter-spacing: -0.017em;
  text-wrap: balance;
}
blockquote.pull p { margin: 0; }
blockquote.pull cite {
  display: block;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* quiet callout */
.note {
  background: var(--surface);
  padding: 22px 26px;
  margin: 30px 0;
  font-size: 0.98rem;
  line-height: 1.55;
}
.note > :last-child { margin-bottom: 0; }
.note__label {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.note--ruled { background: none; border-left: 3px solid var(--ink); padding: 4px 0 4px 22px; }


/* --- 7. REPORTING COMPONENTS -------------------------------------------- */

/* Key findings — the top-of-article summary. This is the piece most
   readers will actually read, so it sits above everything else. */
.findings {
  max-width: none;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 26px 0 28px;
  margin: 0 0 40px;
}
.findings__label {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.findings ol { list-style: none; margin: 0; padding: 0; counter-reset: find; }
.findings li {
  counter-increment: find;
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
  font-family: var(--f-head);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.42;
  max-width: 42rem;
}
.findings li:last-child { margin-bottom: 0; }
.findings li::before {
  content: counter(find);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--rule);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

/* Figure callout — a number and, always, where it came from.
   The source line is not optional: the component looks broken without it. */
.figure {
  max-width: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 30px;
  align-items: baseline;
  margin: 34px 0;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.figure__num {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.figure__body { align-self: center; }
.figure__what {
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
}
.figure__src {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 620px) {
  .figure { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Evidence — a passage quoted from a document, with its citation.
   Visually distinct from a pull quote: this is the record, not the argument. */
.evidence {
  max-width: none;
  background: var(--surface);
  border-left: 3px solid var(--ink);
  padding: 22px 26px;
  margin: 30px 0;
}
.evidence__label {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.evidence blockquote {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.55;
}
.evidence blockquote p { margin: 0 0 12px; }
.evidence blockquote p:last-child { margin: 0; }
.evidence__src {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* Timeline — for meeting chronologies and decide-then-ratify sequences. */
.timeline { max-width: none; list-style: none; margin: 30px 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 0 26px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline__when {
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  padding-top: 3px;
}
.timeline__what { max-width: 40rem; }
.timeline__what strong {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}
.timeline__what p { margin: 0; font-size: 0.97rem; line-height: 1.55; }
.timeline__what p + p { margin-top: 8px; }
@media (max-width: 620px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .timeline__when { padding-top: 0; }
}

/* Documents — the end-of-article source list. */
.docs { max-width: none; }
.docs ol { list-style: none; margin: 0; padding: 0; counter-reset: doc; }
.docs li {
  counter-increment: doc;
  position: relative;
  padding: 15px 0 15px 44px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.96rem;
  line-height: 1.5;
  max-width: 44rem;
}
.docs li:first-child { border-top: 2px solid var(--ink); }
.docs li::before {
  content: counter(doc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
}
.docs__note {
  font-family: var(--f-head);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 18px 0 0;
  max-width: 42rem;
}

/* Sources — the unnumbered variant, used at the foot of the guides. */
.sources { max-width: none; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.96rem;
  line-height: 1.5;
  max-width: 44rem;
}
.sources li:first-child { border-top: 2px solid var(--ink); }



/* --- 7b. THE RECORD VS. THE MINUTES ------------------------------------- */
/*
   Four ways of quoting, and they must never look alike:

     .evidence  grey fill      a written document
     .said      speaker rule   words spoken aloud, from video or transcript
     .versus    split panel    what the minutes say beside what was said
     .comment   set in sans    your own reading of it
     blockquote.pull  black rules   the line you want remembered

   The reader should be able to tell which is which without reading the
   labels. That separation is what makes the reporting hold up.
*/

/* Spoken aloud — from a meeting video or transcript. */
.said {
  max-width: none;
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ink);
}
.said__who {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.said__who em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
}
.said blockquote {
  margin: 0 0 12px;
  font-size: 1.16rem;
  line-height: 1.48;
}
.said blockquote p { margin: 0 0 12px; }
.said blockquote p:last-child { margin: 0; }
.said__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* The minutes beside the record. The whole point of the meeting notes. */
.versus {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  margin: 34px 0;
}
.versus > div { padding: 24px 30px 26px 0; }
.versus > div + div {
  border-left: 1px solid var(--rule);
  padding-left: 30px;
  padding-right: 0;
}
.versus__label {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.versus p { font-size: 0.99rem; line-height: 1.55; margin: 0 0 12px; }
.versus p:last-child { margin: 0; }
.versus .said__meta { margin-top: 12px; }
/* only the empty side greys out — the right column is still real evidence */
.versus--absent > div:first-child p { color: var(--muted); font-style: italic; }
@media (max-width: 700px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus > div { padding: 22px 0 24px; }
  .versus > div + div {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
  }
}

/* Your own reading. Set in the sans face so it is audibly a different
   voice from the reported text around it. */
.comment {
  max-width: none;
  margin: 32px 0;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--f-head);
  font-size: 0.98rem;
  line-height: 1.58;
}
.comment__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.comment p { margin: 0 0 12px; }
.comment > :last-child { margin-bottom: 0; }

/* --- 7c. SEE THE PROOF --------------------------------------------------- */

.proof {
  max-width: none;
  margin: 40px 0;
  padding-top: 22px;
  border-top: 3px solid var(--ink);
}
.proof__label {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.proof__intro {
  font-family: var(--f-head);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 44rem;
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.exhibit { margin: 0; }
.exhibit__frame {
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
}
.exhibit__frame img { width: 100%; display: block; }
.exhibit__empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px dashed var(--muted);
  background: repeating-linear-gradient(
    135deg, var(--surface-2), var(--surface-2) 9px, var(--surface) 9px, var(--surface) 18px
  );
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.exhibit figcaption {
  margin-top: 12px;
  font-family: var(--f-head);
  font-size: 0.88rem;
  line-height: 1.5;
}
.exhibit__num {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.exhibit__src {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 7px;
}

/* --- 8. REFERENCE COMPONENTS -------------------------------------------- */

/* contents rail (reference pages only) */
.toc {
  position: sticky;
  top: 24px;
  padding-top: 44px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-family: var(--f-head);
  font-size: 12.5px;
  line-height: 1.4;
}
.toc__title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
}
.toc__part {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 7px;
}
.toc__part:first-of-type { margin-top: 5px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block;
  padding: 5px 0 5px 13px;
  border-left: 2px solid var(--rule-soft);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.toc a:hover { color: var(--ink); border-left-color: var(--rule); }
.toc a.is-current { color: var(--ink); border-left-color: var(--ink); font-weight: 700; }

.toc-mobile { display: none; }

/* heading copy-link */
.anchor {
  background: none;
  border: none;
  padding: 0 0 0 11px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.52em;
  font-weight: 400;
  color: var(--rule);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  vertical-align: 0.24em;
}
.article h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--ink); }
.anchor.copied { opacity: 1; color: var(--ink); }
@media (hover: none) { .anchor { opacity: 1; } }

/* part divider */
.part-rule {
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 80px 0 0;
  padding-top: 20px;
  border-top: 3px solid var(--ink);
}
.part-rule:first-child { margin-top: 0; }
.part-rule__num {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.part-rule__name {
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.part-rule + .article h2, .article .part-rule + h2 { border-top: none; padding-top: 0; margin-top: 26px; }

/* numbered statutory categories */
.cat {
  max-width: none;
  border-top: 1px solid var(--rule);
  padding: 26px 0 4px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 0 22px;
}
.cat__num {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cat__body { min-width: 0; max-width: var(--measure); }
.cat__body > :first-child { margin-top: 0; }
.cat__body > :last-child { margin-bottom: 0; }
.cat h3 { margin-top: 0; font-size: 1.1rem; }

/* tables */
.table-wrap {
  max-width: none;
  overflow-x: auto;
  margin: 30px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td { text-align: left; padding: 14px 22px 14px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
thead th {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* Mono for the last column only where it really is a figure. Opt in with
   class="table-wrap table-wrap--figures". A table of prose keeps the body face. */
.table-wrap--figures td:last-child {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* copyable template block */
.template { max-width: none; border: 1px solid var(--rule); margin: 30px 0; }
.template__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.template__bar span {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.copy-btn {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 15px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.template__body { padding: 28px 30px; font-size: 0.96rem; }
.template__body > :first-child { margin-top: 0; }
.template__body > :last-child { margin-bottom: 0; }
.template__body .field { font-family: var(--f-mono); font-size: 0.85em; color: var(--muted); }
.template__body ol { padding-left: 1.35em; margin: 0 0 20px; }
.template__body ol li { margin-bottom: 9px; }
.template__body strong { font-family: var(--f-head); font-size: 0.92em; }


/* --- 9. FOOTERS --------------------------------------------------------- */

.tags {
  max-width: none;
  margin: 46px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 6px 11px;
}

.readnext { max-width: none; margin-top: 46px; }
.readnext__label {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.readnext ul { list-style: none; margin: 0; padding: 0; }
.readnext li { border-bottom: 1px solid var(--rule); }
.readnext a {
  display: block;
  padding: 18px 0;
  text-decoration: none;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
  max-width: 40rem;
}
.readnext a:hover { text-decoration: underline; text-underline-offset: 4px; }
.readnext a span {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0;
}

.colophon {
  border-top: 3px solid var(--ink);
  margin-top: 70px;
  padding: 26px 0 60px;
  font-family: var(--f-head);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--muted);
}
.colophon p { max-width: 44rem; margin: 0 0 12px; }
.colophon p:last-child { margin-bottom: 0; }
.colophon strong { color: var(--ink-soft); font-weight: 700; }


/* --- 10. UTILITY + RESPONSIVE + PRINT ----------------------------------- */

/* marks scaffolding that still needs Rachel's content — delete the class
   and the styling disappears with it */
.todo {
  background: repeating-linear-gradient(
    135deg, var(--surface-2), var(--surface-2) 9px, var(--surface) 9px, var(--surface) 18px
  );
  border: 1px dashed var(--muted);
  padding: 18px 22px;
  margin: 26px 0;
  max-width: none;
  font-family: var(--f-head);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.todo::before {
  content: "Placeholder";
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.todo > :last-child { margin-bottom: 0; }

.totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  padding: 11px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s, color .15s;
  z-index: 20;
}
.totop.is-visible { opacity: 1; pointer-events: auto; }
.totop:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 940px) {
  .shell--rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-mobile {
    display: block;
    margin: 28px 0 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .toc-mobile summary {
    padding: 15px 0;
    cursor: pointer;
    font-family: var(--f-head);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    justify-content: space-between;
  }
  .toc-mobile summary::-webkit-details-marker { display: none; }
  .toc-mobile summary::after { content: "+"; }
  .toc-mobile[open] summary::after { content: "\2013"; }
  .toc-mobile__inner { padding: 0 0 18px; font-family: var(--f-head); font-size: 13px; }
  .toc-mobile .toc__part {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted); margin: 16px 0 6px;
  }
  .toc-mobile ul { list-style: none; margin: 0; padding: 0; }
  .toc-mobile a {
    display: block; padding: 7px 0 7px 13px;
    border-left: 2px solid var(--rule-soft);
    color: var(--ink-soft); text-decoration: none;
  }
  .shell--rail .article { padding-top: 10px; }
  .wrap, .nav__inner, .shell { padding-left: 22px; padding-right: 22px; }
  .story { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .story__rail { padding-top: 0; }
}

@media (max-width: 720px) { .cols { columns: 1; } }

@media (max-width: 520px) {
  body { font-size: 18px; }
  .template__body { padding: 22px 18px; }
  .note, .evidence { padding: 18px 20px; }
  .nav__brand span { display: none; }
  /* one scrolling row rather than three wrapped ones */
  .nav__links {
    gap: 20px;
    font-size: 11px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .nav, .toc, .toc-mobile, .totop, .anchor, .copy-btn, .readnext { display: none !important; }
  .shell--rail { display: block; }
  body { font-size: 11pt; }
  .article a { text-decoration: none; }
  .findings, .figure, .evidence { break-inside: avoid; }
}


/* --- 11. SUBSCRIBE ------------------------------------------------------ */

.sub {
  max-width: none;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 28px 0 30px;
  margin: 34px 0;
}
.sub__label {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sub__form { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.sub__form input[type="email"] {
  flex: 1 1 18rem;
  min-width: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.sub__form input[type="email"]::placeholder { color: var(--faint); }
.sub__form button {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sub__form button:hover { background: var(--paper); color: var(--ink); }
.sub__fine {
  font-family: var(--f-head);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 40rem;
}