/* India Budget Explorer. A light design; dark is opt-in via the toggle.
   Data-journalism interactive (The Pudding, NYT Graphics), set in the Swiss
   International Style, with Bloomberg Graphics colour confidence.
   Tokens and the reasoning behind them are locked in DESIGN.md.

   One semantic colour system runs the whole page:
     coral  - the Union government
     blue   - the state governments
     amber  - the 6% promise
     grey   - everything else
*/

:root {
  color-scheme: light;

  --ground: #f6f3ed;
  --ground-2: #efebe3;
  --raised: #fbf9f5;
  --ink: #111418;
  --ink-2: #464c54;
  --ink-muted: #7c838c;
  --rule: #e1dbd0;
  --rule-strong: #c8c0b2;

  --union: #d8501f;
  --states: #2a6fe0;
  --target: #b77d06;
  --def-functional: #0f8c71;
  --def-narrow: #6a55d8;

  --dim: #d9d2c6;
  --dim-2: #e6e0d6;
  --wash: rgba(17, 20, 24, 0.07);
  --glow: none;

  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, -apple-system,
             BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
          Menlo, Consolas, monospace;

  --max: 1280px;
  --gutter: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0c0f14;
  --ground-2: #11151c;
  --raised: #151a22;
  --ink: #f1eee8;
  --ink-2: #b3b9c2;
  --ink-muted: #7b838e;
  --rule: #1f252e;
  --rule-strong: #2f3741;
  --union: #e65d31;
  --states: #3d8bff;
  --target: #f2b02e;
  --def-functional: #17a588;
  --def-narrow: #8a78f0;
  --dim: #262c35;
  --dim-2: #1b2028;
  --wash: rgba(241, 238, 232, 0.07);
  --glow: 0 0 90px rgba(242, 176, 46, 0.28);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

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

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

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--states); }

::selection { background: var(--target); color: #111418; }

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

[hidden] { display: none !important; }

/* Line breaks are designed, not left to chance: headings balance their lines
   so a two-line heading is two even lines, and prose avoids a lone last word. */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, .lede, .standfirst, .step-card, .note { text-wrap: pretty; }

/* --------------------------------------------------------------- top bar */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  pointer-events: none;
  /* a fade, not a solid bar: content passing beneath stays legible without
     a hard edge cutting across the graphics */
  background: linear-gradient(var(--ground) 30%, transparent);
  padding-bottom: 28px;
}

.topbar > * { pointer-events: auto; }

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  background: var(--target);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.theme-toggle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ------------------------------------------------------------------ hero */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}

.hero .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--target);
  margin: 0 0 18px;
}

/* The hero numeral: same family as the UI (Swiss, and the dataviz rule that
   a hero figure never takes its own display face), proportional figures,
   enormous. */
.hero-numeral {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(8rem, 30vw, 22rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--target);
  margin: 0 0 0 -0.04em;
  text-shadow: var(--glow);
  font-variant-numeric: proportional-nums;
}

.hero-numeral .unit { font-size: 0.48em; letter-spacing: -0.04em; margin-left: 0.02em; }

/* The numeral on the left; headline and standfirst stacked on the right,
   sharing one left edge. Together they span the page, and the standfirst is a
   single readable column rather than a two-column split that breaks a
   two-sentence deck mid-sentence. */
.hero-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0 clamp(28px, 4vw, 72px);
  margin: 0 0 48px;
}

.hero-text { padding-bottom: 0.6em; }

.hero h1 {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
}

.hero .standfirst {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin: 0;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: var(--gutter);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--ink-muted), transparent);
  animation: cue 2.2s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* The opening: the numeral rises, then the headline and standfirst follow.
   Once, on load. Reduced motion collapses it to the final state. */
.hero .eyebrow, .hero-numeral, .hero h1, .hero .standfirst, .hero .byline {
  animation: rise 1s var(--ease) both;
}
.hero-numeral { animation-duration: 1.4s; }
.hero h1 { animation-delay: 0.25s; }
.hero .standfirst { animation-delay: 0.4s; }
.hero .byline { animation-delay: 0.55s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- chapters */

.chapter { padding: 120px 0 80px; position: relative; }
.chapter + .chapter { border-top: 1px solid var(--rule); }

/* Headline in columns 1-6, deck in 7-12 - the same line the figure captions
   start on - with the deck's last line on the headline's baseline. A chapter
   with no deck gives its headline the full width. */
.chapter-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-bottom: 64px;
}
.chapter-head > * { grid-column: 1 / -1; }
.chapter-head > h2 { margin: 0; }
.chapter-head > h2:has(+ .lede) { grid-column: 1 / span 6; }
.chapter-head > .lede { grid-column: 7 / -1; }

.chapter-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.chapter-no::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

h2 {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.2rem, 4.3vw, 3.9rem);
  line-height: 0.97;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 72px 0 18px;
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin: 0;
}

.lede strong, .step strong { color: var(--ink); font-weight: 600; }

/* colour words: the semantic system, carried into running text */
.c-union { color: var(--union); font-weight: 600; }
.c-states { color: var(--states); font-weight: 600; }
.c-target { color: var(--target); font-weight: 600; }

/* ------------------------------------------------------- scrollytelling */

/* A sticky graphic with steps scrolling past it. On wide screens the steps
   take the left four columns and the graphic the right eight - asymmetric,
   in the Swiss way. On a phone the graphic pins to the top and the steps
   scroll over it as cards. */
.scrolly {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
  position: relative;
}

.scrolly-graphic {
  grid-column: 5 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scrolly-steps {
  grid-column: 1 / span 4;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding: 30vh 0 40vh;
}

.step {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.step-card {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-2);
  padding: 22px 0;
  border-top: 2px solid var(--rule-strong);
  opacity: 0.3;
  transition: opacity 0.45s var(--ease), border-color 0.45s var(--ease);
}

.step.is-active .step-card { opacity: 1; border-top-color: var(--ink); }

.step-figure {
  display: block;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 12px;
  font-variant-numeric: proportional-nums;
}

.step-figure.c-union { color: var(--union); }
.step-figure.c-states { color: var(--states); }
.step-figure.c-target { color: var(--target); }

@media (max-width: 860px) {
  .scrolly { display: block; }
  .scrolly-graphic {
    height: 64svh;
    top: 0;
    padding-top: 52px;
    z-index: 1;
  }
  .scrolly-steps { padding: 4vh 0 30vh; margin-top: -12svh; }
  .step { min-height: 80vh; align-items: flex-end; }
  .step-card {
    opacity: 1;
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    padding: 18px 20px;
  }
  .step.is-active .step-card { border-color: var(--ink-muted); }
}

/* ----------------------------------------------------------- stat tiles */

.statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--rule-strong);
  margin: 0 0 56px;
}

.stat {
  padding: 22px 24px 22px 0;
  border-right: 1px solid var(--rule);
  margin-right: 24px;
}

.stat:last-child { border-right: 0; margin-right: 0; }

.stat dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sans, proportional figures - never a display serif, never tabular-nums.
   See DESIGN.md. */
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat .sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-top: 10px;
}

.key { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* the one hero figure per chapter-one view */
.hero-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 0 0 36px;
}

.hero-figure .value {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--ink);
}

.hero-figure .unit {
  flex: 1 1 280px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink-2);
  line-height: 1.4;
}

/* ------------------------------------------------------------- controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-end;
  margin: 0 0 32px;
}

.ctl { display: flex; flex-direction: column; gap: 8px; }

.ctl > span {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}

.segmented button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.segmented button:hover { color: var(--ink); }

.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ground);
}

input[type="search"] {
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  min-width: 260px;
}

input[type="search"]::placeholder { color: var(--ink-muted); }

.linkbtn {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.linkbtn:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ------------------------------------------------------------- timeline */

.timeline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 18px;
}

.play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.play:hover { border-color: var(--ink); }
.play[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.play svg { width: 14px; height: 14px; }

.year-readout {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
  min-width: 4.6ch;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--rule-strong);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--states);
  border: 3px solid var(--ground);
  box-shadow: 0 0 0 1px var(--states);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--states);
  border: 3px solid var(--ground);
  box-shadow: 0 0 0 1px var(--states);
  cursor: pointer;
}

/* -------------------------------------------------------------- figures */

figure, .figfoot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin: 0 0 20px;
}

figure > *, .figfoot > * { grid-column: 1 / -1; min-width: 0; }
figure > .plot { grid-row: 1; }
figure > .figbar, .figfoot > .figbar {
  grid-row: 2;
  grid-column: 1 / span 6;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
figure > figcaption, .figfoot > figcaption, .figfoot > .figcaption-text {
  grid-row: 2;
  grid-column: 7 / -1;
}
figure:not(:has(> .figbar)) > figcaption {
  grid-column: 1 / -1;
  columns: 2 22rem;
  column-gap: 56px;
}
figure > .tablewrap { grid-row: 3; margin-top: 24px; }
.plot { width: 100%; position: relative; }
svg { display: block; width: 100%; height: auto; overflow: visible; }

.axis text {
  fill: var(--ink-muted);
  font-size: 11.5px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.axis path, .axis line { stroke: var(--rule-strong); }
.gridline { stroke: var(--rule); stroke-width: 1; }

.series-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.band { fill: var(--wash); }

.annot { font-family: var(--sans); font-size: 12.5px; }
.annot:not([fill]) { fill: var(--ink-2); }
.annot-strong { font-weight: 650; }
.annot-strong:not([fill]) { fill: var(--ink); }
.annot-leader { stroke: var(--ink-muted); stroke-width: 1; fill: none; }

.mark-label {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mark-label:not([fill]) { fill: var(--ink-2); }

.series-label { font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }

.big-label {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.big-label:not([fill]) { fill: var(--ink); }

.crosshair { stroke: var(--rule-strong); stroke-width: 1; pointer-events: none; }
.hit { fill: transparent; cursor: crosshair; }
.map-state { transition: fill 0.55s var(--ease); cursor: pointer; }

figcaption, .figcaption-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-top: 18px;
}

.figbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}

.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.84rem; min-width: 0; }
.legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.legend .line-key { width: 18px; height: 2.5px; border-radius: 2px; flex: none; }
.legend .rect-key { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* -------------------------------------------------------------- tooltips */

.tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 0.8rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  min-width: 170px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}

.tip[data-show="true"] { opacity: 1; transform: translateY(0); }

.tip h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.tip-row { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; }
.tip-row .line-key { width: 13px; height: 2.5px; border-radius: 2px; flex: none; align-self: center; }
.tip-row .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  margin-left: auto;
}
.tip-row .n { color: var(--ink-2); font-size: 0.78rem; }

/* ---------------------------------------------------------------- tables */

.tablewrap {
  overflow: auto;
  max-height: 560px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }

th, td {
  padding: 9px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ground);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-strong);
  user-select: none;
}

th:hover, th[aria-sort] { color: var(--ink); }
th[aria-sort="descending"]::after { content: " \2193"; }
th[aria-sort="ascending"]::after { content: " \2191"; }

th:first-child, td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 240px;
  position: sticky;
  left: 0;
  background: var(--ground);
}

th:first-child { z-index: 3; }
tbody tr:hover td { background: var(--ground-2); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

tr.is-edu td { background: color-mix(in srgb, var(--union) 9%, var(--ground)); }
tr.is-edu td:first-child { font-weight: 600; }

tr.total td {
  font-weight: 650;
  border-top: 2px solid var(--rule-strong);
  background: var(--ground-2);
}

.tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--union);
  color: var(--union);
  margin-left: 9px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- callouts */

.note {
  border-top: 2px solid var(--rule-strong);
  padding: 20px 0 0;
  margin: 48px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  columns: 2 26rem;
  column-gap: 56px;
}

.note.flag { border-top-color: var(--union); }
.note strong { color: var(--ink); font-weight: 650; }
.note p { margin: 0 0 10px; break-inside: avoid; }

/* ---------------------------------------------------------------- footer */

footer {
  padding-top: 96px;
  padding-bottom: 120px;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }

footer h3 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

footer ul { margin: 0; padding-left: 18px; }
footer li { margin-bottom: 9px; }

#claims { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
#claims > p { font-size: 1rem; margin: 0 0 24px; }
#claims ul { columns: 2 26rem; column-gap: 56px; padding-left: 18px; }
#claims li { break-inside: avoid; }

.loading {
  min-height: 60svh;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  :root { --gutter: 18px; }
  .chapter { padding: 88px 0 56px; }
  .hero-lockup { grid-template-columns: 1fr; }
  .hero h1 { margin-top: 20px; }
  .chapter-head > h2:has(+ .lede), .chapter-head > .lede { grid-column: 1 / -1; }
  .chapter-head > .lede { margin-top: 20px; }
  figure > .figbar, .figfoot > .figbar,
  figure > figcaption, .figfoot > figcaption { grid-column: 1 / -1; }
  figure > figcaption, .figfoot > figcaption, .figfoot > .figcaption-text { grid-row: 3; grid-column: 1 / -1; }
  figure > .tablewrap { grid-row: 4; }
  .stat { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .stat:last-child { border-bottom: 0; }
  th:first-child, td:first-child { min-width: 170px; }
  .tablewrap { max-height: 440px; }
  input[type="search"] { min-width: 0; width: 100%; }
  .ctl { flex: 1 1 100%; }
}