/* ==========================================================================
   Stockwell Enterprises — Design System
   shared/site.css

   The single source of truth for tokens, reset, typography, and reusable
   primitives. Every page on the site loads this file FIRST, then chrome.css,
   then its own page stylesheet. Page stylesheets may use tokens freely but
   should not redefine them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Palette is a Colorado sunrise: cold spruce dark, warm bone paper, ember and
   gold for the fire. Discipline lives in the scale; joy lives in the accents.
   -------------------------------------------------------------------------- */

:root {
  /* --- raw palette --- */
  --c-ink-900: #070b11;
  --c-ink-800: #0b131a;
  --c-ink-700: #121c23;
  --c-ink-600: #1b2830;
  --c-spruce:  #16241d;
  --c-forest:  #1e3a2f;
  --c-sage:    #8fa79a;
  --c-stone:   #6f7b80;

  --c-bone:      #f6f2e9;
  --c-bone-warm: #efe9dc;
  --c-bone-dim:  #ded6c5;

  --c-ember:      #dd6236;
  --c-ember-soft: #f0925c;
  --c-gold:       #edbb6b;
  --c-alpine:     #7fa8c4;

  /* --- SECTION IDENTITY -------------------------------------------------
     These four are the entire contract between the design system and a
     section of the site. A section stylesheet overrides them on its own
     [data-section="…"] scope and touches nothing else; every accent on the
     page — fills, rules, labels, focus rings, the header underline — is
     derived from them and re-derives itself for light and dark bands.

     Defaults below are the site's own ember (used by the home page).
       --brand             full-strength fill, on light backgrounds
       --brand-soft        lighter fill, on dark backgrounds
       --brand-text-light  accent TEXT on a light background (must hit 4.5:1)
       --brand-text-dark   accent TEXT on a dark background  (must hit 4.5:1)
     -------------------------------------------------------------------- */
  --brand:            var(--c-ember);
  --brand-soft:       var(--c-ember-soft);
  --brand-text-light: #b8461f;
  --brand-text-dark:  #f2a579;

  /* --- semantic defaults (light band) --- */
  --bg:          var(--c-bone);
  --bg-raised:   #fffdf8;
  --text:        var(--c-ink-800);
  --text-muted:  #5d6660;
  --text-faint:  #8a9089;
  --accent:      var(--brand);
  /* Small type never uses the raw brand colour: at label sizes it falls under
     4.5:1 on bone. --accent-text is the darkened variant reserved for that. */
  --accent-text: var(--brand-text-light);
  --accent-ink:  var(--c-ink-900);
  --line:        rgba(11, 19, 26, 0.14);
  --line-strong: rgba(11, 19, 26, 0.28);
  --focus:       var(--brand);

  /* --- typography --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.38rem, 1.26rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --step-5:  clamp(2.6rem, 1.7rem + 4.4vw, 5.25rem);

  --leading-tight: 1.06;
  --leading-snug: 1.22;
  --leading-body: 1.62;
  --tracking-micro: 0.16em;

  /* --- space (a 4px-rooted scale; nothing off-scale ships) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --band-y: clamp(4rem, 3rem + 7vw, 9rem);

  /* --- layout --- */
  --measure: 62ch;
  --width-page: 76rem;
  --width-narrow: 44rem;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --header-h: 4.5rem;

  /* --- surface --- */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(7, 11, 17, 0.06), 0 4px 12px -6px rgba(7, 11, 17, 0.12);
  --shadow-lg: 0 30px 70px -40px rgba(7, 11, 17, 0.55), 0 2px 8px -4px rgba(7, 11, 17, 0.15);

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Theme scopes. Put one on any <section> (or the <body>) to flip the whole
   subtree — including the header when it sits over a dark band. */
.theme-dark {
  --bg: var(--c-ink-900);
  --bg-raised: var(--c-ink-700);
  --text: var(--c-bone);
  --text-muted: #a8b2ad;
  --text-faint: #6d7a76;
  --accent: var(--brand-soft);
  --accent-text: var(--brand-text-dark);
  --accent-ink: var(--c-ink-900);
  --line: rgba(246, 242, 233, 0.16);
  --line-strong: rgba(246, 242, 233, 0.34);
  --focus: var(--c-gold);
}

.theme-light {
  --bg: var(--c-bone);
  --bg-raised: #fffdf8;
  --text: var(--c-ink-800);
  --text-muted: #5d6660;
  --text-faint: #8a9089;
  --accent: var(--brand);
  --accent-text: var(--brand-text-light);
  --accent-ink: var(--c-ink-900);
  --line: rgba(11, 19, 26, 0.14);
  --line-strong: rgba(11, 19, 26, 0.28);
  --focus: var(--brand);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

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

::selection {
  background: var(--brand);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: var(--leading-tight); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

/* Small uppercase mono label. Used above headings and on any piece of
   metadata — it is the site's "field notes" voice. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.eyebrow--plain::before { display: none; }
.eyebrow--accent { color: var(--accent-text); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }

/* Emphasis inside display headings — the one place ember appears in type. */
.accent-word {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--width-narrow); }

.band {
  background: var(--bg);
  color: var(--text);
  padding-block: var(--band-y);
  position: relative;
}

/* A second light tone, so two light bands in a row stay distinct. */
.band--warm { --bg: var(--c-bone-warm); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid {
  display: grid;
  gap: var(--sp-6);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
}

/* Faint film grain. Apply to any element with position other than static. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 999;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bone);
  color: var(--c-ink-900);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. PAGE HEAD
   The banner every section landing page opens with. Shared so that /blog/,
   /commonplace/ and /climate/ are structurally identical; each one supplies
   its own artwork, its own copy, and — through --brand — its own colour.
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: min(30rem, 68vh);
  padding-block: calc(var(--header-h) + var(--sp-7)) clamp(2.5rem, 6vw, 4rem);
  background: var(--c-ink-900);
  color: var(--c-bone);
}

.pagehead__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}

/* Weighted left rather than bottom: the type sits in the lower-left corner, so
   that is the only part that needs protecting. The right half stays open sky. */
.pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(7, 11, 17, 0.93) 0%,
      rgba(7, 11, 17, 0.74) 32%,
      rgba(7, 11, 17, 0.22) 68%,
      rgba(7, 11, 17, 0.05) 100%),
    linear-gradient(to top, rgba(7, 11, 17, 0.5) 0%, rgba(7, 11, 17, 0) 58%);
  pointer-events: none;
}

/* Sub-pages inside a section get a shorter head: the full-height banner is
   the section's front door, not something to re-enter on every page. */
.pagehead--compact {
  min-height: 0;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
}

.pagehead--compact h1 { font-size: var(--step-3); }

.pagehead .eyebrow { color: rgba(246, 242, 233, 0.72); }

.pagehead h1 {
  margin-top: var(--sp-5);
  max-width: 16ch;
  font-size: var(--step-4);
  color: var(--c-bone);
}

.pagehead .lede {
  margin-top: var(--sp-5);
  color: rgba(246, 242, 233, 0.8);
}

/* Index of the section within the site, sat opposite the eyebrow. */
.pagehead__index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   6. EMPTY STATE
   Sections that exist but have nothing published yet. Says so plainly rather
   than faking content.
   -------------------------------------------------------------------------- */

.empty {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.empty h2 {
  font-size: var(--step-2);
  max-width: 24ch;
}

.empty p {
  color: var(--text-muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   7. BUTTONS & LINKS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .arrow {
  transition: transform var(--dur) var(--ease-out-soft);
}

.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Understated inline link with an underline that grows on hover. */
.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out-soft), color var(--dur-fast) var(--ease);
}

.link:hover {
  background-size: 100% 1px;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   8. SCROLL REVEAL
   Opt in with .reveal; shared/site.js adds .is-visible via IntersectionObserver.
   Content is fully visible without JS.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out-soft),
                transform var(--dur-slow) var(--ease-out-soft);
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. SUBNAV
   Navigation *within* a section, sitting between the page head and the first
   band. The primary nav stays short as the site grows; depth goes here.
   -------------------------------------------------------------------------- */

.subnav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav a {
  display: block;
  position: relative;
  padding: var(--sp-4) 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.subnav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-soft);
}

.subnav a:hover { color: var(--text); }
.subnav a:hover::after { transform: scaleX(1); }

.subnav a[aria-current="page"] { color: var(--accent-text); }
.subnav a[aria-current="page"]::after { transform: scaleX(1); }

.subnav__count {
  margin-left: 0.5em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* A band opening straight after a subnav does not need a full --band-y above
   it: the subnav has already given the eye a break. */
.subnav + .band { padding-top: clamp(2.25rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------------------
   9b. SECTION HEAD
   The heading that opens a band: eyebrow, title, and an optional counter
   sat opposite. Used on the home page and on every section index.
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.section-head h2 { max-width: 18ch; }

.section-head .eyebrow { margin-bottom: var(--sp-4); }

.section-head__note {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.4rem;
}

/* On phones the counter wraps under the heading and reads as a stray line. */
@media (max-width: 40rem) {
  .section-head__note { display: none; }
}

/* --------------------------------------------------------------------------
   10. RECORDS
   The site's list pattern. Blog posts, commonplace entries and climate bills
   are all the same shape underneath: a dated thing with a title, a one-line
   summary, and a status. One component, so a list of three and a list of three
   thousand behave identically.

   <ol class="records">
     <li><a class="record" href="…">
       <span class="record__meta">2026-01-14</span>
       <span class="record__title">…</span>
       <span class="record__note">…</span>
       <span class="record__tail">…</span>
     </a></li>
   </ol>
   -------------------------------------------------------------------------- */

.records {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.records > li { border-bottom: 1px solid var(--line); }

.record {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  grid-template-areas: "meta title tail" "meta note tail";
  align-items: baseline;
  gap: 0.3rem var(--sp-5);
  padding: var(--sp-5) var(--sp-3) var(--sp-5) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease),
              padding-left var(--dur) var(--ease-out-soft);
}

.record:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding-left: var(--sp-4);
}

.record__meta {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 0.2em;
}

.record__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease);
}

.record:hover .record__title { color: var(--accent-text); }

.record__note {
  grid-area: note;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.record__tail {
  grid-area: tail;
  align-self: start;
  padding-top: 0.3em;
  white-space: nowrap;
}

@media (max-width: 46rem) {
  .record {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta tail" "title title" "note note";
    gap: 0.4rem var(--sp-4);
    padding-right: 0;
  }
  .record__meta { padding-top: 0; }
  .record__tail { padding-top: 0; }
  .record:hover { padding-left: var(--sp-2); }
}

/* Status pill. Neutral by default; --chip-on marks the live one. */
.chip {
  display: inline-block;
  padding: 0.25em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chip--on {
  border-color: var(--accent);
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* --------------------------------------------------------------------------
   11. ARTICLE
   The reading layout: one column at a comfortable measure, for anything that
   is mostly prose. Blog posts, commonplace entries, and the plain-language
   summary on a bill page all use it.
   -------------------------------------------------------------------------- */

.article {
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: 1.75;
}

.article > * + * { margin-top: var(--sp-5); }

.article > h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-8);
  margin-bottom: calc(var(--sp-5) * -0.5);
}

.article > h3 {
  font-size: var(--step-1);
  margin-top: var(--sp-7);
  margin-bottom: calc(var(--sp-5) * -0.5);
}

/* The opening paragraph carries the reader in. */
.article > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

.article a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease);
}

.article a:hover { color: var(--text); }

.article ul,
.article ol {
  padding-left: 1.4em;
  display: grid;
  gap: var(--sp-3);
}

.article li { padding-left: 0.2em; }
.article li::marker { color: var(--accent); }

.article blockquote {
  margin-left: 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.5;
  color: var(--text);
}

.article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.article pre {
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-ink-900);
  color: var(--c-bone);
  overflow-x: auto;
}

.article pre code { background: none; padding: 0; }

.article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--sp-7);
}

.article figure { margin: var(--sp-6) 0; }

.article figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* --- article header --- */

.article-head {
  max-width: var(--measure);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line);
}

.article-head h1 {
  margin-top: var(--sp-4);
  font-size: var(--step-4);
}

.article-head__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--sp-4);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- footnotes and sources --- */

.sources {
  max-width: var(--measure);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.sources h2 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}

.sources ol {
  display: grid;
  gap: var(--sp-3);
  padding-left: 1.3em;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted);
}

.sources li::marker {
  font-family: var(--font-mono);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   12. FACTS
   Label-and-value pairs for the structured half of a record — a bill's
   sponsors and dates, an entry's source and tags.
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: 0;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}

.facts dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text);
}

/* Prose running straight into the data strip reads as one block. Separate it. */
.article + .facts,
.note + .facts,
.facts + .log,
.facts + .block-title {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Mono micro-heading for a block of structured content — an action log, a
   table, a legend. Same voice as .eyebrow, without the leading rule. */
.block-title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}

/* A page that is a layout demonstration rather than real content says so. */
.preview-banner {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  border-bottom: 1px solid var(--accent);
}

.preview-banner p {
  max-width: var(--width-page);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}