@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Permanent+Marker&display=swap');

:root {
  --paper:   #E8EAE3;
  --paper-2: #DDE0D6;
  --ink:     #131A15;
  --muted:   #515B4F;
  --rule:    #C0C4B8;
  --mark:    #1B3A8F;
  /* the stock the quoted minutes are printed on */
  --sheet:   #F6F7F3;
  /* the logo's red, its pen, and the colours the poster half of the homepage
     is printed in. Red text on paper uses --red-ink: the logo red is 4.1:1
     on --paper and fails AA at small sizes; --red-ink is 5.4:1. */
  --red:     #D0342C;
  --red-ink: #B3261E;
  --gold:    #F5C542;
  --cream:   #F2F0E8;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Newsreader', Georgia, 'Times New Roman', serif;
  --marker:  'Permanent Marker', 'Marker Felt', cursive;

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- structure ---------- */

.band {
  padding: clamp(4rem, 11vh, 9rem) var(--gutter);
  border-top: 1px solid var(--rule);
}
.band--alt { background: var(--paper-2); }
.band--tall { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.band:first-of-type { border-top: 0; }

.wrap { max-width: 78rem; margin-inline: auto; width: 100%; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- display type ---------- */

.figure {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(3.75rem, 17vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
  overflow-wrap: break-word;
}
.figure--mark { color: var(--mark); }

.lede {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 1.5rem;
  max-width: 22ch;
}

.standfirst {
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.42;
  max-width: 40rem;
  margin: 0 0 2rem;
}

/* ---------- the claim/citation unit ---------- */

.entry {
  border-left: 3px solid var(--ink);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  margin: 2.5rem 0 0;
  max-width: 46rem;
}
.entry--mark { border-left-color: var(--mark); }

.entry > .claim {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
}

.cite {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.55rem 0 0;
}
.cite b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

blockquote.record {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.band--alt blockquote.record { background: var(--paper-2); }
blockquote.record p { margin: 0 0 0.6em; }
blockquote.record p:last-child { margin-bottom: 0; }
blockquote.record .vote { font-variant-numeric: tabular-nums; }

/* The Spanish pages: each quotation stays in its original English, and its
   translation sits under it, set apart so it can't be read as the quotation. */
.translation {
  margin: 0;
  padding: 0.75rem 1.1rem 0.9rem;
  border: 1px solid var(--rule);
  border-top: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.translation p { margin: 0 0 0.6em; }
.translation p:last-child { margin-bottom: 0; }
.translation-label {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* English | Español, under the mark on the inner pages */
.lang-switch { margin: -1rem 0 1.5rem; font-family: var(--display); font-size: 0.875rem; }

/* The mark: the site's own address with NOT written in, in red pen. It is an
   insertion over a caret, never a strike - struck, "for" would read "democrats
   NOT manley". The SVG is cropped to its ink, so its left edge is the text's.
   It heads the inner pages as the link home; on the home page it signs the
   colophon instead, because the headline already carries the NOT. */
.brand { margin: 0 0 clamp(1.75rem, 5vh, 3.5rem); line-height: 0; }
.brand img { display: block; width: clamp(12.5rem, 17vw, 15rem); height: auto; }
.brand a { display: inline-block; }
/* the mark is the page's top, so the band gives back most of the room above it */
.band:has(> .wrap > .brand) { padding-top: clamp(2.25rem, 6vh, 5rem); }
.colophon .brand { margin: 2rem 0 1rem; }
.colophon .brand img { width: clamp(11rem, 14vw, 13rem); }

.hero-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  /* clears the descending comma of 4,718 from the paragraph beneath */
  margin: 0 0 clamp(1.5rem, 3vh, 2.75rem);
}
@media (max-width: 48rem) { .hero-figures { justify-content: flex-start; } }
.hero-figures .unit { display: flex; align-items: baseline; gap: 0.4em; }
.hero-figures .label {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: clamp(1rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
}

/* ---------- vote field ---------- */

.field { margin: clamp(2rem, 5vh, 3.5rem) 0 0; }
/* the field of votes runs edge to edge — the scale of it is the point */
.field img {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: auto;
  image-rendering: crisp-edges;
}
.field figcaption {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 1.1rem 0 0;
  max-width: 44rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .field img { animation: field-in 900ms ease-out both; }
  @keyframes field-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- exceptions list ---------- */

.exceptions { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46rem; }
.exceptions li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.exceptions li:last-child { border-bottom: 1px solid var(--rule); }
.exceptions .when {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.9375rem;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.exceptions .what { margin: 0; font-size: 1.0625rem; line-height: 1.45; }

/* The date column is a fixed 6.5rem. On a phone that leaves about 230px for the
   sentence, which wraps to four lines and drops "1." of "4-1" onto a line of its
   own. Stacked, the date reads as the label it is and the sentence gets the
   full measure. */
@media (max-width: 36rem) {
  .exceptions li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- links ---------- */

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--mark); }

.jump {
  display: inline-block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 1rem;
  margin-top: 2.5rem;
  color: var(--mark);
  text-decoration-thickness: 2px;
}

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

.colophon {
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  border-top: 3px solid var(--ink);
  background: var(--paper-2);
}
.colophon .prose { max-width: 46rem; }
.disclaimer {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.35;
  margin: 0 0 1.25rem;
}
.colophon .fine { font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }

/* ---------- sources table ---------- */

/* Capped rather than run to the full 78rem wrap. Stretched across a desktop the
   name and its figure ended up 900px apart with nothing in between, which is the
   one thing a comparison table must not do - and the caption ran to a measure
   nobody reads. 50rem keeps the three columns close enough to compare at a
   glance and puts the table on the same measure as the entries around it. */
.ledger { width: 100%; max-width: 50rem; border-collapse: collapse; margin: 2rem 0 0; font-size: 0.9375rem; }
.ledger caption { text-align: left; color: var(--muted); padding-bottom: 0.75rem; }
.ledger th, .ledger td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.ledger th {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.8125rem;
  border-top: 0;
  border-bottom: 2px solid var(--ink);
}
.ledger td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 1.5rem; }
.scroller { overflow-x: auto; }

/* ---------- reference-document density ----------
   sources.html is a document to be consulted, not a page to be scrolled
   through, so it runs tighter than the front page. */
.doc .band { padding-block: clamp(2.5rem, 6vh, 4rem); }
.doc .lede { font-size: clamp(1.5rem, 3vw, 2.25rem); max-width: 30ch; margin-bottom: 1rem; }
.doc .entry { margin-top: 1.75rem; }
.doc .entry > .claim { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); }

/* the hero figures are the page's h1 — reset the UA heading margins */
h1.hero-figures { margin-top: 0; }

.hook-sub {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.45;
  max-width: 46rem;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}

/* The video's first frame stands where the council portrait stood: the same
   face, now at the dais. The page's claim is that it does not editorialise, and
   the frame keeps the unretouched likeness; only the setting is added.

   Three grid items: headline, video, paragraphs, in that order in the markup so
   a phone shows the video on the first screen. On desktop the video spans both
   rows of the right-hand column. Earlier attempts at this interleave opened a
   gap under the headline, because a spanning item taller than its rows makes
   them grow. The second row is 1fr, so any extra height the video needs lands
   below the paragraphs, never between the headline and them. */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}
.intro .intro-head { grid-column: 1; grid-row: 1; }
.intro .intro-text { grid-column: 1; grid-row: 2; }
.intro .watch      { grid-column: 2; grid-row: 1 / span 2; }
.intro .hook-sub:last-of-type { margin-bottom: 0; }

.watch {
  width: clamp(9rem, 20vw, 17rem);
  max-width: 100%;
  margin: 0;
}
.watch-open {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
}
.watch-open img { display: block; width: 100%; height: auto; background: #0F1420; }

/* The cue sits on the desk, below the nameplate, clear of his face. White on
   --mark is 10.4:1. */
.watch-cue {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1.15em 0.6em 1em;
  background: var(--mark);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
.watch-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.45em 0 0.45em 0.72em;
  border-color: transparent transparent transparent currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .watch-cue { transition: transform 0.15s ease-out; }
  .watch-open:hover .watch-cue,
  .watch-open:focus-visible .watch-cue { transform: translateX(-50%) scale(1.06); }
}

.watch figcaption {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
}

/* The carousel (watch.js). One slide shows at a time; the others are [hidden],
   so with no script the first is simply the poster it always was. The chevrons
   sit on the poster's own middle, not the slide's: the caption under it varies
   in length, so their height comes from the frame's width at the poster's
   aspect (9:16 here, 4:5 on a phone). */
.carousel-frame { position: relative; container-type: inline-size; }
.carousel-slide { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .carousel.is-ready .carousel-slide:not([hidden]) { animation: carousel-in 0.45s ease-out; }
  @keyframes carousel-in { from { opacity: 0; } }
}
.carousel-step {
  --poster-middle: calc(100cqw * 16 / 9 / 2);
  position: absolute;
  top: var(--poster-middle);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(15, 20, 32, 0.6);
  color: #fff;
  cursor: pointer;
}
.carousel-prev { left: 0.4rem; }
.carousel-next { right: 0.4rem; }
.carousel-step:hover { background: rgba(15, 20, 32, 0.85); }
.carousel-step:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the chevron: two sides of a square, turned */
.carousel-step span {
  width: 0.6rem;
  height: 0.6rem;
  border: solid currentColor;
  border-width: 0 0 2.5px 2.5px;
}
.carousel-prev span { transform: translateX(0.12rem) rotate(45deg); }
.carousel-next span { transform: translateX(-0.12rem) rotate(-135deg); }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.carousel-dots { display: flex; }
/* 32px tap targets around 9px dots */
.carousel-dot, .carousel-pause {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carousel-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}
.carousel-dot[aria-current="true"]::before { background: var(--mark); border-color: var(--mark); }
.carousel-dot:focus-visible, .carousel-pause:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; border-radius: 4px; }
/* pause: two bars; once stopped, a play triangle */
.carousel-pause span {
  width: 9px;
  height: 11px;
  border: solid var(--muted);
  border-width: 0 3px;
}
.carousel.is-stopped .carousel-pause span {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--muted);
}
.carousel-pause:hover span { border-color: var(--ink); }
.carousel.is-stopped .carousel-pause:hover span { border-color: transparent transparent transparent var(--ink); }

@media (max-width: 46rem) {
  .intro { grid-template-columns: 1fr; grid-template-rows: none; }
  .carousel-step { --poster-middle: calc(100cqw * 5 / 4 / 2); }
  .intro .intro-head, .intro .intro-text, .intro .watch { grid-column: 1; grid-row: auto; }

  /* Stacked, the video is a full-width 4:5 card between the headline and the
     paragraphs, so a phone shows it on the first screen. The crop keeps what the
     opening is built on: the dateline, the face, the brass nameplate (the object
     that says "board meeting"), and the desk below it for the Watch cue. A
     side-by-side strip made the poster too small to read and stranded its
     caption; a 1:1 crop can't hold dateline, nameplate and cue together. */
  .watch {
    width: 100%;
    /* no effect on a phone; stops a 700px window getting an 860px-tall card */
    max-width: 26rem;
    margin: clamp(1.1rem, 3vh, 1.5rem) 0 clamp(1.5rem, 4vh, 2rem);
  }
  .watch-open { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
  .watch-open img { height: 100%; object-fit: cover; object-position: 50% 52%; }
  /* each poster's own crop: Podium keeps its question bubble and the name card,
     Perks the sign's lettering and his face under the question mark */
  .carousel-podium .watch-open img { object-position: 50% 44%; }
  .carousel-podium .watch-cue { bottom: 2.5%; }
  .watch-cue { font-size: 1.05rem; bottom: 7%; }
  .watch figcaption {
    margin-top: 0.7rem;
    padding-top: 0;
    border-top: 0;
    font-size: 0.9375rem;
  }


  /* 11vh of padding on a phone is mostly empty screen */
  .band { padding-block: clamp(2.75rem, 7vh, 9rem); }

  
}

/* anchored sections should land with a little breathing room above them */
[id] { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- the document ----------
   The minutes as they actually read, on a sheet lighter than the page, with
   Manley's line marked the way you would mark it with a pen. The odd page
   header running through the middle of a sentence is in the original — the
   minutes break across pages mid-motion — and is left in as proof it is real. */

.document {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.25rem);
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  max-width: 46rem;
}
.document--wide { max-width: 60rem; }

.document .slug {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.document .slug b { color: var(--ink); font-variant-numeric: tabular-nums; }

.document .body {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  hyphens: none;
}

/* the pen mark */
.document mark {
  background: none;
  color: var(--mark);
  font-weight: 600;
  box-shadow: inset 0 -0.14em 0 rgba(27, 58, 143, 0.28);
}

.document .after {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.document .after b { color: var(--ink); }

/* ---------- comparison table ----------
   Every salary carries its own source link; the column of figures is the
   argument, so it is set in the display face and right-aligned. */

.ledger td.num, .ledger th.num {
  text-align: right;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: clamp(1rem, 2vw, 2rem);
}
.ledger td.num { font-size: 1.0625rem; }
.ledger tr.subject { background: rgba(27, 58, 143, 0.07); }
.ledger tr.subject td { color: var(--ink); }
.ledger tr.subject td.num { color: var(--mark); font-size: 1.25rem; }
.ledger td:first-child { white-space: normal; }
/* The citation sits under the name it belongs to, not in a column of its own.
   As a fourth column of long link text it set the height of every row, and on a
   phone it pushed the table past the viewport into a horizontal scroll - all so
   that the quietest thing in the table could be the widest. Folded under the
   name it is the same treatment the contributions table gives a donor's
   address, and the three columns that are left are the argument. */
.ledger .src {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  margin-top: 0.25rem;
  white-space: normal;
}
.ledger .src a { color: var(--muted); }
.ledger .src a:hover { color: var(--mark); }

/* On a phone the source column's link text pushed both tables about 20px past
   the viewport and into a horizontal scroll - and the caption, which is part of
   the table, was clipped along with it. Trimming the cell padding brings them
   back inside. Nothing is dropped: every figure on this page keeps its
   citation, which is the only reason anyone should believe the figure. */
@media (max-width: 46rem) {
  .ledger th, .ledger td { padding-right: 0.5rem; }
  .ledger td:first-child { padding-right: 0.75rem; }
  .ledger td.num, .ledger th.num { padding-right: 0.6rem; }
  .ledger caption { font-size: 0.875rem; }
  .ledger .src { font-size: 0.75rem; }
  .ledger .src a { overflow-wrap: anywhere; }
}

/* On the sources page a section title follows the last document of the section
   above it, so it needs air or the two run together. */
.doc .wrap > .lede { margin-top: 3.25rem; }
.doc .wrap > .lede:first-child { margin-top: 0; }

/* ---------- flow spacing ----------
   Prose that follows a document, an entry or a table needs separating from it.
   Handled here rather than with inline margins on individual elements. */

.entry + .prose,
.document + .prose,
.scroller + .prose,
.ledger + .prose,
.exceptions + .prose,
.field + .prose { margin-top: clamp(2rem, 4.5vh, 3rem); }

.entry + .cite,
.document + .cite,
.scroller + .cite,
.prose + .cite,
.exceptions + .cite { margin-top: clamp(1.5rem, 3vh, 2rem); }

/* a citation that carries explanatory copy runs to the prose measure */
.cite--wide { max-width: 46rem; }

/* A bare URL is one unbreakable word. The archive address quoted in the method
   section is long enough to push a 390px viewport into a horizontal scroll. */
.cite a { overflow-wrap: break-word; }

/* the address under a donor's name in the contributions table: it is the thing
   that ties a state filing to a name in the town's minutes, so it stays legible
   rather than being dropped to a footnote */
.ledger .sub {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
  /* the first column is nowrap so figures never break; an address has to be
     allowed to wrap or it pushes the table into a horizontal scroll */
  white-space: normal;
}

/* the attribution inside a quoted record sits tight to it */
blockquote.record .cite { margin: 0; }

/* ---------- social links ----------
   Understated on purpose. The site's job is the record; these are a way to
   follow it, not a call to action competing with the evidence. */
.follow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.75rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.follow .label {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.9375rem;
  color: var(--muted);
}
.follow a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: 1.0625rem;
  color: var(--mark);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.follow a:hover { color: var(--ink); }

/* a short qualifier inside a table cell, for figures that need one */
.ledger .qual {
  display: block;
  font-family: var(--text);
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 0.15rem;
}

/* ---------- running page headers inside a quoted passage ----------
   The minutes break across pages mid-sentence, so their running head lands in
   the middle of a quotation. It is genuinely part of the document and is left
   in, but set apart so it reads as the page furniture it is rather than as a
   transcription error. */
.document .folio,
blockquote.record .folio {
  display: inline;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.75em;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  padding: 0.1em 0.45em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin: 0 0.15em;
}

/* On a 320px screen the running head is wider than the measure, and nowrap put
   the whole page into a horizontal scroll rather than let it break. Below that
   width it gives up the single line; box-decoration-break closes the border
   around both halves so it still reads as one piece of page furniture. */
@media (max-width: 23rem) {
  .document .folio,
  blockquote.record .folio {
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ---------- the video page ----------
   A 1080x1920 file, so the binding constraint is HEIGHT, not width: sized to
   the viewport the way an image would be, it is taller than the screen on every
   phone and most laptops and the controls sit below the fold. `max-height` with
   an aspect-ratio box is what keeps the whole frame visible without knowing the
   viewport in advance, and the explicit ratio reserves the space before the
   poster decodes so the page does not jump.

   EVERYTHING ON THIS PAGE HANGS OFF THE LEFT EDGE, including the video. It was
   centred at first, under left-aligned type, which put the heading's left edge
   and the video's left edge in two different places and left the eye with no
   line to follow down the page. The rest of the site sets prose to a 34rem
   measure inside a 78rem wrap and never centres it; a 26rem video centred in
   that wrap was the odd one out. One left edge, all the way down. */
.reel {
  display: block;
  margin: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(78svh, 46rem);
  background: var(--mark);
  border: 1px solid var(--rule);
}

/* The caption under the reel sits on the same left edge as everything else. */
.reel-note {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.25rem 0 0;
}

.reel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 650;
  font-size: 1rem;
}

/* ---------- the video player (index.html, driven by watch.js) ---------- */

/* It covers the whole screen, so its own ground is the backdrop, and a tap on
   that ground closes it. The ground is Silence's own navy-black. */
.player {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0F1420;
  color: #E6E9F0;
}
.player[open] { display: flex; flex-direction: column; }
.player::backdrop { background: transparent; }
html:has(.player[open]) { overflow: hidden; }

.player-bar {
  display: flex;
  justify-content: flex-end;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem;
}
/* 44px tall, labelled in words, always on screen. */
.player-close {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.player-close:hover { background: rgba(255, 255, 255, 0.24); }
.player :focus-visible { outline-color: #fff; }

/* The video is as large as the screen allows at 9:16, measured against the
   space left between the bar and the credits. */
.player-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  container-type: size;
}
.player video {
  display: block;
  width: min(100cqw, calc(100cqh * 9 / 16));
  height: auto;
  aspect-ratio: 9 / 16;
  background: #0F1420;
}

/* One word under the video. #AEB5C2 on the ground is 9.3:1; the button is 44px
   tall so it is an easy tap, though it reads as a small link. */
.player-foot {
  margin: 0.25rem 0 0;
  padding: 0 1rem max(0.5rem, env(safe-area-inset-bottom));
  text-align: center;
}
.player-credits-toggle {
  min-height: 44px;
  padding: 0 0.75rem;
  background: none;
  border: 0;
  color: #AEB5C2;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.player-credits-toggle:hover { color: #fff; }

/* The popover: a paper card above the Credits link, on the site's own stock so
   it reads as the site speaking, not the video. Native popover, so the browser
   handles Esc and a tap outside. */
.player-credits {
  position: fixed;
  inset: auto auto calc(3.75rem + env(safe-area-inset-bottom)) 50%;
  transform: translateX(-50%);
  width: min(26rem, calc(100vw - 2rem));
  margin: 0;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: 0.875rem;
  line-height: 1.5;
}
.player-credits h2 {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variation-settings: 'wdth' 100, 'wght' 700;
}
.player-credits p { margin: 0 0 0.7rem; }
.player-credits p:last-child { margin-bottom: 0; }
.player-credits b { font-variation-settings: 'wdth' 100, 'wght' 700; }
.player-credits cite { font-style: italic; }
.player-credits :focus-visible { outline-color: var(--mark); }

@media (prefers-reduced-motion: no-preference) {
  .player[open] { animation: player-in 0.18s ease-out; }
  @keyframes player-in { from { opacity: 0; } }
}

/* ==========================================================================
   Home: big on top, the record underneath. Rules that restyle shared classes
   are prefixed .home; the rest use classes only the home page has (.tile,
   .stamp, .kicker and so on), so /sources, /perks and the 404, which share
   this sheet, are untouched.
   ========================================================================== */

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

/* the opener bands below reach the screen edge with 100vw, which on a desktop
   with a visible scrollbar is a little wider than the page */
.home { overflow-x: clip; }

@keyframes drift { to { transform: translateX(-50%); } }

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

.home .hero {
  position: relative;
  overflow: hidden;
  background: var(--mark);
  color: var(--cream);
  padding-block: clamp(1.25rem, 3vh, 2rem) clamp(3rem, 8vh, 5rem);
  border-top: 0;
}
.home .hero > .wrap { position: relative; }           /* above the roll call */
.home .hero a { color: var(--cream); }
.home .hero a:hover { color: #fff; }
.home .hero ::selection { background: var(--cream); color: var(--mark); }
.home .hero :focus-visible { outline-color: var(--gold); }

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar-title { margin: 0; }
.topbar-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.topbar-nav a { text-decoration: none; }
.topbar-nav a:hover { text-decoration: underline; }

/* The headline is sized against its own column, not the window: at 768-1024px
   the column is narrow beside the video, and a vw size would push "Democrats"
   into it. "Democrats" plus the caret's gap is about 5.8em wide, so 16% of the
   column keeps it inside with room for the NOT's overhang. */
.intro-head { container-type: inline-size; }

.lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 900;
  font-size: clamp(3.25rem, 12vw, 8.75rem);
  font-size: clamp(3.25rem, 23cqi, 8.75rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  padding-top: 0.12em;
}
.lockup-stamp {
  display: inline-block;
  background: var(--red);
  color: var(--cream);
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 900;
  font-size: 0.41em;
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18em 0.34em 0.14em;
  border: 0.085em solid var(--cream);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  margin-bottom: -0.06em;
  margin-left: 0.02em;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.lockup-line { display: block; white-space: nowrap; }

.turn {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 900;
  font-size: clamp(1.625rem, 4vw, 3.25rem);
  font-size: clamp(1.625rem, 6.4cqi, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: clamp(1rem, 2.5vh, 1.5rem) 0 clamp(1.25rem, 3vh, 2rem);
}
.turn span { color: var(--gold); }
/* The Spanish page: the lockup is the site's name and stays in English; its
   Spanish sits under it, smaller, before the turn. */
.lockup-es {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: clamp(1.05rem, 3.4cqi, 1.5rem);
  line-height: 1.2;
  color: var(--cream);
  margin: 0.75rem 0 0;
}
.lockup-es b { color: var(--gold); text-transform: uppercase; }

.home .hero .hook-sub { color: rgba(242, 240, 232, 0.92); max-width: 34rem; }
.home .hero .hook-sub b { color: #fff; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  max-width: 46rem;
}
.cta {
  display: inline-block;
  background: var(--red);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
}
.home .hero .cta, .home .hero .cta:hover { color: #fff; }
.home .hero .cta:hover { background: var(--red-ink); }

/* A rubber stamp: attribution, never a seal. It must not read as the town's
   own mark, so it never names the town as a heading and carries no crest. */
.stamp {
  --stamp-ground: var(--mark);
  display: grid;
  place-content: center;
  width: 9.5rem;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  border: 5px solid var(--red);
  box-shadow: inset 0 0 0 4px var(--stamp-ground), inset 0 0 0 6px var(--red);
  text-align: center;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 900;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-12deg);
}
.stamp span, .stamp b { display: block; }
.stamp b { font-variation-settings: 'wdth' 115, 'wght' 900; font-size: 1.55em; margin: 0.06em 0; }
.home .hero .stamp { color: var(--cream); }  /* red text on blue is 2.1:1; cream is 9:1 */
@media (min-width: 64rem) {
  .home .hero .stamp { margin-top: -3rem; }   /* tucks up beside the last paragraph */
}

/* the carousel on blue: same parts, lighter ink */
.home .hero .watch figcaption { color: rgba(242, 240, 232, 0.8); border-top-color: rgba(242, 240, 232, 0.25); }
.home .hero .watch-open img { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.home .hero .carousel-dot::before { border-color: rgba(242, 240, 232, 0.75); }
.home .hero .carousel-dot[aria-current="true"]::before { background: var(--cream); border-color: var(--cream); }
.home .hero .carousel-pause span { border-color: rgba(242, 240, 232, 0.75); }
.home .hero .carousel.is-stopped .carousel-pause span { border-color: transparent transparent transparent rgba(242, 240, 232, 0.75); }
.home .hero .carousel-pause:hover span { border-color: #fff; }
.home .hero .carousel.is-stopped .carousel-pause:hover span { border-color: transparent transparent transparent #fff; }
.home .hero .carousel-dot:focus-visible, .home .hero .carousel-pause:focus-visible { outline-color: var(--gold); }

/* ---------- the roll call behind the hero ---------- */

.rollcall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  font: 500 0.8125rem/1.7 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, 0.055);
  white-space: nowrap;
}
/* each row is drawn from its data-t attribute, so the dates stay out of the
   page's text: find-in-page, reader mode and search engines never see them */
.rollcall-row { display: block; width: max-content; }
.rollcall-row::before { content: attr(data-t); }

/* ---------- the sourcing marquee ---------- */

.marquee {
  display: block;
  overflow: hidden;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.85rem 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 900;
  font-size: clamp(1rem, 1.6vw, 1.3125rem);
  text-transform: uppercase;
}
.marquee:hover { color: #fff; background: var(--red-ink); }
.marquee:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; }
.marquee-track { display: inline-flex; width: max-content; }
.marquee i { font-style: normal; opacity: 0.55; margin: 0 0.9em; }

@media (prefers-reduced-motion: no-preference) {
  .rollcall-row { animation: drift 90s linear infinite; }
  .rollcall-row:nth-child(even) { animation-direction: reverse; }
  /* three speeds on a cycle of three, against directions on a cycle of two:
     the same pairing only comes round every sixth row, and the rows' own
     lengths differ, so none keeps step with another */
  .rollcall-row:nth-child(3n+1) { animation-duration: 90s; }
  .rollcall-row:nth-child(3n+2) { animation-duration: 120s; }
  .rollcall-row:nth-child(3n)   { animation-duration: 105s; }
  .marquee-track { animation: drift 45s linear infinite; }
}
/* Anything that moves can be stopped (WCAG 2.2.2). The carousel's own stop
   button stops the drift too; pointing at or focusing the line holds it. */
.home:has(.carousel.is-stopped) .rollcall-row,
.home:has(.carousel.is-stopped) .marquee-track,
.marquee:hover .marquee-track,
.marquee:focus-visible .marquee-track { animation-play-state: paused; }

/* held still, the line wraps instead of being cut off at the screen edge */
@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; padding-inline: var(--gutter); }
  .marquee-track { display: block; width: auto; }
  .marquee-track > span + span { display: none; }
}

/* ---------- what he said yes to: the tiles ---------- */

.home .tiles-band { background: var(--paper); }
.tiles-title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 122, 'wght' 900;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
}
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
}
.tile--w2 { grid-column: span 2; }
.tile--w3 { grid-column: span 3; }
.tile--w4 { grid-column: span 4; }

.tile > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  text-decoration: none;
  color: inherit;
  container-type: inline-size;
}
.tile .amount {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-variant-numeric: lining-nums;
  /* the widest figure, "$44,851", is about 5.5em at this width axis; 17% of
     the tile keeps it inside at every tile size */
  font-size: clamp(2.5rem, 17cqi, 8rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.tile .count {
  display: block;
  margin-top: 0.85rem;
  max-width: 38ch;
  font-family: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.4;
}
.tile .src {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.7em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* a small document: a page with two lines on it */
.tile .src::before {
  content: '';
  width: 0.75em;
  height: 0.95em;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  background:
    linear-gradient(currentColor, currentColor) 50% 35% / 55% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 65% / 55% 1.5px no-repeat;
}
.tile > a:hover .amount { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.08em; }

.tile--blue > a  { background: var(--mark); color: var(--cream); }
.tile--blue .amount { color: #fff; }
.tile--red > a   { background: var(--red); color: #fff; }
.tile--ink > a   { background: var(--ink); color: var(--cream); }
.tile--ink .amount { color: var(--gold); }
.tile--sheet > a { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.tile--sheet .amount { color: var(--mark); }
/* the ring sits outside the tile, on paper, so it takes the page's ink */
.tile > a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.home .tiles-band .jump { color: var(--mark); }

/* ---------- every line comes from a page like this one ---------- */

.home .proof { background: var(--ink); color: var(--cream); border-top: 0; }
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.home .proof .lede {
  color: var(--cream);
  text-transform: uppercase;
  font-variation-settings: 'wdth' 122, 'wght' 900;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.98;
  max-width: none;
}
.home .proof .prose p { color: rgba(242, 240, 232, 0.88); }
.proof-link {
  display: inline-block;
  margin-top: 1.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid var(--red);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.home .proof .proof-link { color: #fff; }
.home .proof .proof-link:hover { color: var(--gold); }
.home .proof :focus-visible { outline-color: var(--gold); }

/* The sheet is lifted off the page and turned a degree, like paper put down
   on a desk. Only this one; the topic sections keep theirs flat. */
.proof-sheet { position: relative; padding-top: 8rem; }  /* the stamp's own space */
.home .proof .document {
  margin: 0;
  background: #fff;
  color: var(--ink);
  border: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 40px rgba(0, 0, 0, 0.35);
  transform: rotate(1.2deg);
}
/* In the space above the sheet: the stamp is turned, so its box reaches
   further than its circle (about 10.3rem for an 8.5rem stamp), and that box must
   stay clear of the slug line and inside the black band at every width. */
.home .proof .stamp {
  --stamp-ground: #fff;
  position: absolute;
  z-index: 1;
  right: -0.75rem;
  top: -0.5rem;
  width: 8.5rem;
  font-size: 0.5625rem;
  background: #fff;
  color: var(--red-ink);
  transform: rotate(14deg);
}
/* "town's own" on two lines, one word each, so it stays inside the ring */
.home .proof .stamp b { width: min-content; margin-inline: auto; }

/* ---------- topic sections ---------- */

.kicker {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 0.75rem;
}
.home .lede {
  text-transform: uppercase;
  font-variation-settings: 'wdth' 122, 'wght' 900;
  letter-spacing: -0.015em;
  line-height: 0.98;
  max-width: 20ch;
}

/* The four sections that open on a giant figure open on a colour band that
   reaches the screen edge from inside .wrap, then go back to paper. */
.home .band--opens { padding-top: 0; border-top: 0; }
.opener {
  margin-inline: calc(50% - 50vw);
  padding: clamp(3.5rem, 10vh, 7rem) max(var(--gutter), calc(50vw - 39rem));
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.opener--blue { background: var(--mark); color: var(--cream); }
.opener--red  { background: var(--red); color: #fff; }
.home .opener .figure { color: inherit; margin-bottom: 0.14em; }  /* room for the comma's tail */
.home .opener .lede { color: inherit; margin-bottom: 0; }
.opener--blue .kicker { color: var(--gold); }   /* 6.4:1 on blue */
.opener--red .kicker  { color: #fff; }          /* gold on red is 3.1:1 */
.home .opener ::selection { background: var(--cream); color: var(--ink); }

/* ---------- home: the hero's two columns ----------
   Wide screens: the video stands beside the headline with its top on the top
   of the capital D, and the NOT rises above that line into its own space,
   the way it is written in above the word. Both take their size from one
   variable, so they stay locked at every width. The cap of the D sits 0.12em
   below the top of its 0.95 line (Archivo's metrics); the 1em above it is
   the NOT's room. */
@media (min-width: 64.01rem) {
  .home .intro { --lockup: clamp(4rem, 7.2vw, 7.25rem); }
  .home .lockup { font-size: var(--lockup); }
  .home .hero .watch {
    width: clamp(17rem, 24vw, 22rem);
    margin-top: calc(var(--lockup) * 1.12);
  }
}

/* Tablets: beside a headline this size the video would shrink to a strip,
   so it stacks under the headline, centred, at a size a video can be watched. */
@media (min-width: 46.01rem) and (max-width: 64rem) {
  .home .intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .home .intro .intro-head, .home .intro .intro-text, .home .intro .watch { grid-column: 1; grid-row: auto; }
  .home .hero .watch { width: min(20rem, 100%); justify-self: center; margin-block: 0.5rem 2rem; }
}

/* ---------- home: smaller screens ---------- */

@media (max-width: 64rem) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--w2, .tile--w3 { grid-column: span 1; }
  .tile--w4 { grid-column: span 3; }
  /* a one-column tile here is ~180px inside; "$44,851" needs 5.5em, so the
     floor has to come down for the 17cqi size to win */
  .tile .amount { font-size: clamp(1.75rem, 17cqi, 8rem); }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-sheet { margin-top: 1rem; }
}

@media (max-width: 46rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile--w2, .tile--w3, .tile--w4 { grid-column: auto; }
  .home .proof .document { transform: none; }
  .home .proof .stamp { right: 0; }
  .home .hero .stamp { width: 8.5rem; font-size: 0.625rem; }
  /* one line of title, one of links, rather than three of both */
  .topbar { margin-bottom: 1rem; font-size: 0.6875rem; letter-spacing: 0.04em; gap: 0.35rem 1rem; }
  .topbar-nav { gap: 0.35rem 1rem; }
}