/* thepricecampaign.com. The look as locked October 6, 2026 (brand book, October 7): Royal, Pale blue and White,
   Sand on the website for Give and Join, Black for text on white. Literata Black for the name and headlines, Lexend
   for everything else. On white, headlines are royal and the rest of the type is black. No stars, no red.
   Phone first. Every color is named once, in :root, and nowhere else (scripts/check-rulings.mjs). */

@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-48pt-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --royal: #1F3C99;
  --pale: #A8C8E6;
  --white: #FFFFFF;
  --sand: #D9C4A0;
  --ink: #000000;
  --rule-on-royal: rgb(168 200 230 / 0.45);
  --display: "Literata", Georgia, "Times New Roman", serif;
  --text: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --max: 1200px;
  --half: 600px;   /* half of --max: the page's middle line is the middle of the screen */
  --lane: 0px;     /* the room each side keeps from the middle line, on a laptop */
  --bar: 64px;
  --band: 56px;    /* the one room a part keeps above and below (H3, October 9, 2026); no part sets its own */
  --head: 30px;    /* the one size a part's headline is set at, a tool's own included */
}
@media (min-width: 900px) {
  :root { --gutter: 32px; --lane: 56px; --bar: 76px; --band: 96px; --head: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--white); }
/* Every page fills the window, so the foot sits on the window's bottom edge when the page is shorter than the window (H6's rules for Give, moved here at the merge, October 9). */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main#main { flex: 1 0 auto; display: flex; flex-direction: column; }
h1, h2, h3, p, dl, dd, ul, fieldset, figure { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--bar) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h1, h2, h3, .display { font-family: var(--display); font-weight: 900; color: var(--royal); line-height: 1.08; letter-spacing: 0; text-wrap: balance; font-feature-settings: "liga" 0, "dlig" 0; }
.on-royal { background: var(--royal); color: var(--white); }
.on-royal h1, .on-royal h2, .on-royal h3, .on-royal .display { color: var(--white); }
.caps { font-family: var(--text); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
.on-royal .caps { color: var(--pale); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 2px; }
.on-royal :focus-visible { outline-color: var(--sand); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 20; background: var(--white); color: var(--royal); font-weight: 700; padding: 12px 16px; }
.skip:focus { top: 12px; }

/* ---------- The header: the name at left, the pages, Give always at right ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--pale); }
.bar { display: flex; align-items: center; height: var(--bar); gap: 8px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.nav { display: none; }
.nav a, .menu a, .menu summary { color: var(--royal); text-decoration: none; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a { margin-left: 16px; padding: 0 6px; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--royal); }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--pale); padding: 4px var(--gutter) 12px; display: grid; }
.menu nav a { min-height: 52px; font-size: 17px; border-top: 1px solid var(--pale); }
.give { background: var(--sand); color: var(--royal); font-weight: 700; font-size: 15px; text-decoration: none; min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 2px; transition: background-color 150ms, color 150ms; }
@media (hover: hover) { .give:hover { background: var(--royal); color: var(--white); } }
@media (min-width: 900px) {
  .brand img { height: 38px; }
  .nav { display: flex; align-items: center; margin-right: 22px; }
  .menu { display: none; }
}

/* The Give page carries no Give in its header, so the last thing in the bar ends on the page's right edge. */
.no-give .nav { margin-right: -6px; }
.no-give .menu summary { padding-right: 0; }

/* ---------- Beside You: a royal card beside Samuel, each on its own field ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--royal); }
.hero-pic { order: -1; background: var(--pale); }
/* On a phone the crop starts at the frame's top edge, so Samuel's hair clears the bar (Taylor's go, October 9, 2026). */
.hero-pic img { width: 100%; height: 56vw; max-height: 440px; object-fit: cover; object-position: 52% 0%; }
.hero-card { padding: 30px 0 36px; }
.hero-in { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.hero .caps { font-size: 13px; }
.hero .towns { margin-bottom: 24px; }
.hero h1 { font-size: 42px; margin-bottom: 16px; }
.hero .who { font-size: 17px; line-height: 1.45; margin-bottom: 10px; max-width: 34em; text-wrap: balance; }
.hero-about .hero-pic img { object-position: 46% 14%; }
.hero-about h1 { font-size: 32px; margin-bottom: 16px; }
.hero-about .who { font-size: 17px; margin-bottom: 0; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(680px, calc(100vh - var(--bar))); }
  .hero-pic { order: 0; position: relative; min-height: 560px; }
  .hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-position: 50% 18%; }
  .hero-card { display: flex; align-items: center; padding: 64px 0; }
  .hero-in { width: min(100% - var(--gutter), var(--half)); margin-inline: auto 0; padding-right: var(--lane); }
  .hero .towns { margin-bottom: 36px; }
  .hero h1 { font-size: clamp(48px, 4.9vw, 68px); margin-bottom: 26px; }
  .hero .who { font-size: 19px; margin-bottom: 12px; }
  .hero-about .hero-card { order: 2; }
  .hero-about .hero-pic { order: 1; }
  .hero-about .hero-in { margin-inline: 0 auto; padding-right: 0; padding-left: var(--lane); }
  .hero-about h1 { font-size: clamp(36px, 3.5vw, 48px); margin-bottom: 22px; }
  .hero-about .who { font-size: 19px; }
  .hero-about .hero-pic img { object-position: 44% 16%; }
}

/* ---------- The join door: an email, a ZIP and one button; the sand marks Join ---------- */
.join-fields { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: end; }
.field { display: block; }
.field .caps { display: block; margin-bottom: 6px; }
.field input { display: block; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--royal); border-radius: 2px; background: var(--white); color: var(--ink); font: 400 16px/1 var(--text); }
.on-royal .field input { border-color: var(--white); }
.field input[aria-invalid="true"] { border-width: 3px; }
.on-royal .field input[aria-invalid="true"] { border-color: var(--sand); }
.btn { height: 48px; padding: 0 28px; border: 0; border-radius: 2px; background: var(--sand); color: var(--royal); font: 700 16px/1 var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 150ms, color 150ms; }
@media (hover: hover) {
  .btn:hover { background: var(--royal); color: var(--white); }
  .on-royal .btn:hover { background: var(--white); color: var(--royal); }
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: progress; }
.join .btn { grid-column: 1 / -1; }
.form-say { font-size: 15px; font-weight: 600; margin-top: 10px; min-height: 1.55em; }
.form-say:empty { margin-top: 0; min-height: 0; }
.is-done .join-fields, .is-done .plan-fields { display: none; }
.is-done .form-say { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.15; margin-top: 0; }
.is-done .form-say span { display: block; font: 400 16px/1.5 var(--text); margin-top: 8px; }
@media (min-width: 900px) {
  .join-fields { grid-template-columns: minmax(0, 1fr) 112px auto; }
  .join .btn { grid-column: auto; }
}

/* ---------- The rest of the message, then each issue: what is happening beside what Samuel would do ---------- */
.say { font-size: clamp(26px, 2.95vw, 42px); line-height: 1.16; padding-bottom: var(--band); }
.say span { display: block; }
.say span + span { margin-top: 0.22em; }
.pairs { display: grid; grid-template-columns: minmax(0, 1fr); }
.pair { display: contents; }
.pair-fact, .pair-say { padding: 32px 0 36px; }
.pair-fact > div, .pair-say > div { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.pair-fact { border-top: 1px solid var(--pale); }
.pair-say { border-top: 1px solid var(--rule-on-royal); }
.pair h3, .pair-line { font-size: 25px; line-height: 1.16; margin-bottom: 12px; }
.pair-line { font-family: var(--display); font-weight: 900; text-wrap: balance; font-feature-settings: "liga" 0, "dlig" 0; }
@media (min-width: 900px) {
  .pairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pair-fact, .pair-say { padding: 44px 0 52px; }
  .pair-fact > div { width: min(100% - var(--gutter), var(--half)); margin-inline: auto 0; padding-right: var(--lane); }
  .pair-say > div { width: min(100% - var(--gutter), var(--half)); margin-inline: 0 auto; padding-left: var(--lane); }
  .pair h3, .pair-line { font-size: 29px; margin-bottom: 14px; }
}

/* ---------- Beside (Home, H2): a photograph beside a field of words, down the page, on the first screen's own grid.
   The middle line is the middle of the page. Each photograph is used once on the site and is cut by eye. ---------- */
.beside { display: grid; grid-template-columns: minmax(0, 1fr); }
.beside-pic { order: -1; background: var(--pale); }
.beside-pic img { width: 100%; height: 62vw; max-height: 440px; object-fit: cover; }
.beside-card { padding: 40px 0 var(--band); }
.beside-in { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.beside h2 { font-size: var(--head); margin-bottom: 14px; }
/* The rest of the message: three sentences, each its own line of thought, with the display face's own line between
   them (Taylor, October 9, 2026: "Why are these words smashed together?"). */
.beside .say { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; padding-bottom: 0; margin-bottom: 0; }
.beside .say span + span { margin-top: 0.62em; }
.beside .lead { margin-bottom: 14px; }
.on-royal .door { color: var(--white); }
.on-royal .door:hover { border-bottom-color: var(--white); }
.pic-creek img { object-position: 46% 50%; }
.pic-pines img { object-position: 54% 0%; }
.pic-boardwalk img { object-position: 38% 60%; }
@media (min-width: 900px) {
  .beside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .beside-pic { order: 0; position: relative; min-height: 560px; }
  .beside-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
  .beside-card { display: flex; align-items: center; padding: var(--band) 0; }
  .beside-in { width: min(100% - var(--gutter), var(--half)); margin-inline: 0 auto; padding-left: var(--lane); }
  .beside.is-flip .beside-card { order: -1; }
  .beside.is-flip .beside-in { margin-inline: auto 0; padding-left: 0; padding-right: var(--lane); }
  .beside h2 { margin-bottom: 18px; }
  .beside .lead { font-size: 19px; margin-bottom: 18px; }
}

/* ---------- Two columns that keep the page's middle line ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) {
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(2 * var(--lane)); align-items: start; }
}
.band { padding: var(--band) 0; }
.band h2 { font-size: 30px; margin-bottom: 18px; }
@media (min-width: 900px) { .band h2 { font-size: 40px; margin-bottom: 24px; } }
.door { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--royal); text-decoration: none; border-bottom: 2px solid var(--sand); transition: border-color 150ms; }
.door:hover { border-bottom-color: var(--royal); }

/* The ruled list, as the book draws it: a short name, then the fact, between thin rules. */
.ruled > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--pale); }
.ruled dd { overflow-wrap: break-word; text-wrap: pretty; }
@media (min-width: 900px) { .ruled > div { grid-template-columns: 136px minmax(0, 1fr); } }
.ruled > div:last-child { border-bottom: 1px solid var(--pale); }
.ruled dt { color: var(--royal); }
.ruled dd a { color: var(--royal); font-weight: 600; text-decoration: none; padding-block: 12px; background: linear-gradient(var(--sand), var(--sand)) 0 calc(100% - 10px) / 100% 2px no-repeat; }
.ruled dd a:hover { background-image: linear-gradient(var(--royal), var(--royal)); }
.on-pale { background: var(--pale); }
.on-pale .ruled > div { border-color: var(--royal); }

/* ---------- The vote plan ---------- */
.vote-facts > p { margin-bottom: 24px; max-width: 34em; }
.vote-facts .door { margin-top: 2px; }
.plan { background: var(--white); padding: 24px 20px 28px; border-radius: 2px; }
.plan h3 { font-size: 26px; margin-bottom: 8px; }
.plan > p { margin-bottom: 18px; }
.picks { display: grid; gap: 10px; margin-bottom: 18px; }
.pick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 14px; border: 1px solid var(--royal); border-radius: 2px; cursor: pointer; transition: background-color 150ms, color 150ms; }
.pick input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--royal); }
.pick b { display: block; font-weight: 600; }
.pick small { display: block; font-size: 15px; }
.pick:has(input:checked) { background: var(--royal); color: var(--white); }
.pick:has(input:checked) input { accent-color: var(--white); }
.pick:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 3px; }
.plan-fields { display: grid; gap: 14px; }
.plan .btn { width: 100%; }
/* Under the plan's ZIP: which county it is in and where that county votes early. Under a saved plan: the polling place lookup. */
.plan-county { font-size: 15px; }
.plan-county a, .is-done .form-say span a { color: var(--royal); font-weight: 600; text-decoration: none; padding-block: 12px; background: linear-gradient(var(--sand), var(--sand)) 0 calc(100% - 10px) / 100% 2px no-repeat; }
.plan-county a:hover, .is-done .form-say span a:hover { background-image: linear-gradient(var(--royal), var(--royal)); }
/* The bot check's box takes room only when Cloudflare draws in it. */
.cf-turnstile:not(:empty) { margin-top: 12px; }
@media (min-width: 900px) { .plan { padding: 36px 40px 40px; } .plan h3 { font-size: 29px; } }

/* ---------- About: the chapters, a name beside its telling ---------- */
.chapter { border-top: 1px solid var(--pale); padding: 28px 0 32px; }
.chapter h2 { font-size: 25px; margin-bottom: 10px; }
.chapter p { font-size: 18px; line-height: 1.6; max-width: 34em; }
@media (min-width: 900px) {
  .chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(2 * var(--lane)); align-items: baseline; padding: 44px 0 52px; }
  .chapter h2 { font-size: 29px; margin-bottom: 0; text-align: right; }
  .chapter p { font-size: 19px; }
}
.press h2 { font-size: 30px; }
@media (max-width: 899px) { .press .ruled > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.press p { max-width: 34em; }
@media (min-width: 900px) { .press h2 { font-size: 40px; } }

/* ---------- A page that opens on the card beside its own words, where Home and About set a photograph ---------- */
.hero-side { background: var(--white); color: var(--ink); padding: 28px 0 40px; }
.hero-side > div { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.hero-page h1 { font-size: 36px; }
.hero-page .who { margin-bottom: 0; }
@media (min-width: 900px) {
  .hero-page { min-height: 0; }
  .hero-page .hero-card { align-items: flex-start; padding: 72px 0; }
  .hero-side { padding: 72px 0; }
  .hero-side > div { width: min(100% - var(--gutter), var(--half)); margin-inline: 0 auto; padding-left: var(--lane); }
  .hero-page h1 { font-size: clamp(40px, 4vw, 56px); }
}
.lead { font-size: 18px; line-height: 1.6; max-width: 34em; }
.lead + .door { margin-top: 10px; }
.src { font-size: 13px; line-height: 1.45; }
.on-royal .src { color: var(--pale); }
.doors { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
a.btn { text-decoration: none; }

/* ---------- The issues: the four as four doors, then each under its name on a pale field ---------- */
.index { list-style: none; margin: 0; padding: 0; }
.index li { border-top: 1px solid var(--pale); }
.index li:last-child { border-bottom: 1px solid var(--pale); }
.index a { display: flex; align-items: center; min-height: 64px; color: var(--royal); text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 25px; line-height: 1.1; font-feature-settings: "liga" 0, "dlig" 0; }
.index a::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-right: 3px solid var(--sand); border-bottom: 3px solid var(--sand); transform: rotate(45deg) translate(-3px, -3px); transition: border-color 150ms; }
.index a:hover::after { border-color: var(--royal); }
.part-name { padding: 16px 0; }
.part-name h2 { font-size: 25px; }
.pair p + p { margin-top: 12px; }
.pair .src + .door { margin-top: 10px; }
.pair-fact h3 a { display: inline-block; padding-block: 8px; margin-block: -8px; color: inherit; text-decoration: none; background: linear-gradient(var(--sand), var(--sand)) 0 calc(100% - 8px) / 100% 3px no-repeat; }
.pair-fact h3 a:hover { background-image: linear-gradient(var(--royal), var(--royal)); }
.help h2 { margin-bottom: 0; }
/* The power bill, the traffic map and the road (src/modules) on Home. Their side margins are the page's own, so one
   left edge runs from the header to the foot, and each keeps the page's one room above and below (--band): no part
   sets its own, and no part carries a label bar; a tool's headline names its issue (H3, October 9, 2026). */
.part .tm-wrap, .part .pb .pb-wrap { max-width: calc(var(--max) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.part .rd { --rd-side: var(--gutter); }
.part .rd .rd-wrap { max-width: calc(var(--max) + 2 * var(--gutter)); }
.part > .pb, .part > .rd { padding-top: var(--band); padding-bottom: var(--band); }
.part .tm-wrap { padding-top: var(--band); padding-bottom: var(--band); }
@media (max-width: 599px) {
  .part .tm-stage { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .part .tm-key { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (min-width: 900px) {
  .index a { min-height: 72px; font-size: 29px; }
  .part-name { padding: 20px 0; }
  .part-name h2 { font-size: 29px; }
  .help .two { align-items: center; }
}

/* ---------- Give: the ladder. One row an amount, and the sand marks the one the campaign asks for first ---------- */

/* ---------- Get involved: the volunteer form, the next stops ---------- */
.sheet .picks legend { color: var(--royal); margin-bottom: 10px; }
.sheet .pick { padding: 10px 14px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.field textarea { display: block; width: 100%; min-height: 132px; padding: 12px; border: 1px solid var(--royal); border-radius: 2px; background: var(--white); color: var(--ink); font: 400 16px/1.5 var(--text); resize: vertical; }
.field textarea[aria-invalid="true"] { border-width: 3px; }
.stops { list-style: none; margin: 0 0 4px; padding: 0; }
.stop { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--pale); }
.stop:last-child { border-bottom: 1px solid var(--pale); }
#host { border-top: 1px solid var(--pale); }
[hidden] { display: none !important; }
.stop .when { color: var(--royal); }
.stop .when span { display: block; }
.stop h3 { font-size: 20px; line-height: 1.2; margin-bottom: 4px; }
.stop p { font-size: 15px; }
@media (min-width: 900px) { .stop { grid-template-columns: 136px minmax(0, 1fr); } }

/* ---------- A letter, and a plain page ---------- */
.prose p { font-size: 18px; line-height: 1.6; max-width: 34em; }
.prose p + p { margin-top: 16px; }
.plan .join-fields { margin-top: 14px; }
.page-head { padding: var(--band) 0 28px; }
.page-head h1 { font-size: 40px; margin-bottom: 10px; }
.page-head p { font-size: 15px; }
.story.last { padding-bottom: var(--band); }
.story.last .chapter:last-child { border-bottom: 1px solid var(--pale); }
@media (min-width: 900px) { .page-head h1 { font-size: 56px; } }

/* Between a phone and a laptop (a tablet held upright) the page is still one column, and a column of words is held
   to a width a line can be read at. It starts on the page's left edge, as the header and every band do. */
@media (min-width: 641px) and (max-width: 899px) {
  .hero-in, .hero-side > div, .pair-fact > div, .pair-say > div, .beside-in { margin-left: var(--gutter); margin-right: auto; }
}

/* ---------- The close and the foot ----------
   One royal field ends every page (October 10, 2026; Taylor, of the foot as it stood: "The samuel price website has a
   weak footer section."; of three ideas: "I think the map is best. Lock it and implement."). The close is the short
   line and its one door beside District 99, the district as its own pale shape with the rivers cut through it; on
   a laptop the two stand either side of the page's middle line. The line's size comes from its own measure, in
   Literata Black with its ligatures off: three lines on a laptop ("Send somebody to" 9.64 em, "Columbia who knows"
   11.47, "how things work." 9.42), two on a tablet held upright (14.99 and 15.75), four on a phone (the widest,
   "who knows how", 8.65). A new line of words needs new numbers here.
   The foot under it is one row of links, then the paid-for line in its box with the Vega on its row. The name is
   not set a second time (the header holds, and one wordmark stands on a screen). A page with no close (Vote,
   Give, Republicans for Price, Privacy, Press) ends on the foot alone, which is shorter than the foot it replaces,
   so Give stays one screen. */
.close { padding: 56px 0 40px; }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.close-say { container-type: inline-size; }
.close h2 { font-size: min(46px, calc(100cqi / 8.8)); line-height: 1.04; margin-bottom: 24px; text-wrap: wrap; }   /* a wide phone on its side keeps a phone's size */
.district { display: block; width: 100%; max-width: 440px; height: auto; overflow: hidden; }
.district path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.district .d-land { fill: var(--pale); }
.district .d-water { fill: var(--royal); stroke: var(--royal); stroke-width: 2px; }   /* a point wider each side, so no sliver of the pale shows where the district's outline and the water's edge run together */
.district .d-roads { stroke: var(--royal); stroke-width: 2px; }
/* A name stands on the royal ground beside its land, with a royal edge that cuts any line it crosses. */
.district text { font-family: var(--display); font-weight: 900; font-size: 58px; fill: var(--white); dominant-baseline: central; font-feature-settings: "liga" 0; paint-order: stroke; stroke: var(--royal); stroke-width: 10px; stroke-linejoin: round; }
.district text.d-name { font-family: var(--text); font-weight: 600; font-size: 36px; letter-spacing: 0.14em; text-transform: uppercase; text-anchor: end; fill: var(--pale); stroke-width: 0; }   /* what the shape is, as the sign sets the office */
/* From a tablet held upright the line and the district stand side by side; on a laptop, either side of the page's
   middle line with the page's lane between them. */
@media (min-width: 600px) {
  .close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .close h2 { font-size: calc(100cqi / 11.6); line-height: 1.05; }
  .district { max-width: none; }
}
@media (min-width: 900px) {
  .close { padding: 72px 0 64px; }
  .close-grid { column-gap: calc(2 * var(--lane)); }
  .close h2 { margin-bottom: 30px; }
}
.site-footer { border-top: 1px solid var(--rule-on-royal); padding: 12px 0 22px; font-size: 14px; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
.foot-links { display: flex; flex-direction: column; margin: 0; }
.foot-links a { color: var(--white); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-mail { grid-column: 1 / -1; }
.foot-base { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule-on-royal); margin-top: 10px; padding-top: 20px; }
@media (min-width: 600px) { .foot-links { flex-direction: row; flex-wrap: wrap; column-gap: 22px; } .foot { column-gap: 32px; } }
.legal { margin: 0; color: var(--pale); border: 1px solid var(--pale); padding: 5px 10px; font-size: 12px; letter-spacing: 0.02em; text-wrap: balance; }
.vn-credit { flex: none; display: block; line-height: 0; padding: 10px; margin: -10px; }
.vn-credit img { display: block; width: auto; height: 24px; }
.vn-credit:hover { opacity: 0.8; }
@media (min-width: 900px) {
  .site-footer { padding: 14px 0 22px; }
  .foot { column-gap: calc(2 * var(--lane)); }
  .foot-pages, .foot-else { grid-row: 1; }
  .foot-else { grid-column: 2; }
  .foot-mail { grid-column: 2; grid-row: 1; justify-self: end; }
  .foot-base { margin-top: 6px; padding-top: 18px; }
  .legal { white-space: nowrap; }   /* the paid-for line whole, on one line, in its box */
}

/* ---------- A page that is not here ---------- */
.missing { padding: 96px 0 120px; }
.missing h1 { font-size: 40px; margin-bottom: 14px; }
.missing p { margin-bottom: 22px; }
/* A plain page's line that asks for something (the email address, another try) is a sentence, set smaller than a thank-you. */
.missing h1.say { font-family: var(--text); font-weight: 600; font-size: 20px; line-height: 1.45; max-width: 26em; overflow-wrap: anywhere; }

/* ---------- The copy people type on (COPY_EDIT=1 only) ---------- */
.unseen { padding: 56px 0; border-top: 1px solid var(--pale); }
.unseen h2 { font-size: 24px; margin-bottom: 16px; }
.unseen .ruled > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.unseen dt { font-size: 14px; }

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

/* ---------- H3 (October 9, 2026, evening): Home, the spacing and the words ---------- */
/* Samuel, edge to edge (Taylor of his second portrait: "This should be made into a hero image. It's too repetitive
   with the one on top."). One photograph the width of the screen; his two lines and the About door on a solid royal
   panel over the trees at its left, clear of him, with no wash. On a phone the panel sits under the photograph. */
.wide { display: grid; background: var(--royal); }
.wide-pic { background: var(--pale); }
.wide-pic img { width: 100%; height: 62vw; max-height: 440px; object-fit: cover; object-position: 72% 0%; }
.wide-plate { display: grid; grid-template-columns: min(100% - 2 * var(--gutter), var(--half)); justify-content: center; justify-items: start; padding: 40px 0 var(--band); }
.wide-plate h2 { font-size: var(--head); margin-bottom: 12px; }
@media (min-width: 641px) and (max-width: 899px) { .wide-plate { justify-content: start; padding-left: var(--gutter); } }
@media (min-width: 900px) {
  .wide { display: block; position: relative; --edge: max(var(--gutter), calc(50% - var(--half))); }
  .wide-pic img { height: clamp(500px, 43vw, 680px); max-height: none; object-position: 0% 0%; }
  .wide-plate { position: absolute; left: var(--edge); right: 60%; bottom: var(--band); grid-template-columns: minmax(0, 1fr); container-type: inline-size; padding: clamp(24px, 2.5vw, 36px) clamp(24px, 2.7vw, 40px) clamp(20px, 2.1vw, 30px); }
  /* The line is sized from the panel's own width, so "where things break." keeps one line and the whole holds three
     at every laptop width (the first size is for a browser without container units). */
  .wide-plate h2 { font-size: clamp(23px, 2.3vw, 30px); font-size: min(34px, 100cqi / 11.1); margin-bottom: 14px; }
}

/* On a very wide screen the page's left edge moves in while Samuel keeps his place in the photograph, so the panel
   runs a little further toward him, where his shoulder still stands clear of it. */
@media (min-width: 1600px) { .wide-plate { right: 57%; } }

/* Home's vote plan (src/_includes/plan-home.njk): one card on the pale field, no taller than it has to be. Each
   choice carries its place and hours; the email, the ZIP and the button share a row on a laptop. */
.plan-home .plan-lead { max-width: 34em; margin-bottom: 20px; }
.plan-home .picks { gap: 8px; margin-bottom: 16px; }
.plan-home .picks legend { padding: 0; margin-bottom: 10px; color: var(--royal); }
.plan-home .pick { background: var(--white); padding: 11px 14px; }
.plan-home .pick small { font-size: 14px; line-height: 1.4; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: end; }
.plan-row .btn { grid-column: 1 / -1; }
.plan-home.is-done .form-say { color: var(--royal); }
@media (min-width: 900px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) 112px auto; }
  .plan-row .btn { grid-column: auto; }
}

/* ---------- H5 (October 9, 2026). Vote: one job, make your plan. Three dates and one card on the royal field, then
   the two District 99 libraries and three links on pale. The middle line holds: the dates end one lane before the
   middle of the screen and the card starts one lane after it. Each fact stands once on the page. ---------- */
.vt { --vt-date: 64px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; background: var(--royal); padding: 36px 0 44px; }
.vt-in { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.vt-dates { list-style: none; margin: 0; padding: 0; }
.vt-dates li { padding: 18px 0 20px; border-top: 1px solid var(--rule-on-royal); }
.vt-dates li:first-child { border-top: 0; padding-top: 0; }
.vt-dates time { display: block; font-family: var(--display); font-weight: 900; font-size: var(--vt-date); line-height: 1; font-feature-settings: "liga" 0, "dlig" 0; }
.vt-dates time + span { display: block; margin-top: 8px; text-wrap: pretty; }
.vt-dates .vt-shut { padding: 11px 0 12px; }
.vt-dates .vt-shut .caps { display: block; font-size: 13px; }
.vt-say { border-top: 1px solid var(--rule-on-royal); padding-top: 20px; max-width: 30em; text-wrap: pretty; }
/* The card. Its three choices are a line each, at every width; the email and the ZIP share a row. */
.vt-card { padding: 22px 16px 24px; }
.vt-card h2 { font-size: 26px; margin-bottom: 6px; }
.vt-card .form-say { margin-bottom: 0; }
.vt-card .pick { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 13px 12px; min-height: 52px; }
.vt-card .pick input { margin: 0; }
.vt-card .pick b { font-size: clamp(14px, 4vw, 17px); white-space: nowrap; }
/* On a phone the email has the card's whole width, so an address is not cut off, and the ZIP stands beside the button. */
.vt-fields { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "email email" "zip save" "county county"; column-gap: 12px; align-items: end; }
.vt-fields .field:nth-of-type(1) { grid-area: email; }
.vt-fields .field:nth-of-type(2) { grid-area: zip; }
.vt-fields .plan-county { grid-area: county; }
.vt-fields .btn { grid-area: save; padding-inline: 12px; }
/* Save is royal on the white card: sand on white read as a button that is switched off (the cold reader, October 9). */
.vt-card .btn { background: var(--royal); color: var(--white); }
@media (hover: hover) { .vt-card .btn:hover { background: var(--sand); color: var(--royal); } }
/* A library's street is on its card below; inside the plan it shows once the plan is saved. */
.vt-card .pick small { display: none; font-size: 15px; white-space: normal; }
.vt-card.is-done .pick small { display: block; }
/* A saved plan stays on its card: the place that was picked, then the thanks. */
.vt-card.is-done h2, .vt-card.is-done .vt-line, .vt-card.is-done .pick:not(:has(input:checked)) { display: none; }
.vt-card.is-done .pick { pointer-events: none; }
.vt-card.is-done .picks { margin-bottom: 20px; }
.vt-card.is-done .form-say { color: var(--royal); }
.vt-card.is-done .form-say span { color: var(--ink); }
/* The line that says what happened takes the cursor so a screen reader reads it; it is not a control and draws no ring.
   A choice draws one ring, its own. */
.vt-card .form-say:focus { outline: none; }
.vt-card .pick input:focus-visible { outline: none; }
/* Where: the two libraries in the district, each a card with its address as a map link, and three links, a line each. */
.vt-where { padding: var(--band) 0; }
.vt-where-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.vt-places { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vt-place { background: var(--white); padding: 20px 16px 14px; border-radius: 2px; }
.vt-place h3 { font-size: 22px; }
.vt-place a { display: inline-block; color: var(--royal); font-weight: 600; text-decoration: none; padding-block: 11px; background: linear-gradient(var(--sand), var(--sand)) 0 calc(100% - 9px) / 100% 2px no-repeat; }
.vt-place a:hover { background-image: linear-gradient(var(--royal), var(--royal)); }
.vt-links { list-style: none; border-bottom: 1px solid var(--royal); }
.vt-links li { border-top: 1px solid var(--royal); }
.vt-links a { display: flex; align-items: center; min-height: 52px; color: var(--royal); font-weight: 600; text-decoration: none; }
.vt-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 641px) and (max-width: 899px) {
  .vt-in { margin-left: var(--gutter); margin-right: auto; }
}
@media (min-width: 900px) {
  /* The card's top edge is the top of the dates' capitals, and its bottom edge is the sentence's last baseline; the
     three choices share whatever room that leaves. */
  .vt { --vt-date: clamp(64px, 5.6vw, 84px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding: 64px 0 72px; }
  .vt-when .vt-in { width: min(100% - var(--gutter), var(--half)); margin-inline: auto 0; padding-right: var(--lane); }
  .vt-plan { display: flex; }
  .vt-plan .vt-in { display: flex; flex-direction: column; width: min(100% - var(--gutter), var(--half)); margin-inline: 0 auto; padding-left: var(--lane); }
  .vt-dates li { padding: 20px 0 24px; }
  .vt-say { font-size: 18px; padding-top: 24px; }
  .vt-card { flex: 1; display: flex; flex-direction: column; margin-top: calc(var(--vt-date) * 0.217); margin-bottom: 7.5px; padding: 40px; }
  .vt-card h2 { font-size: 29px; }
  .vt-card .picks { flex: 1; grid-auto-rows: 1fr; }
  .vt-card .pick { padding-inline: 16px; gap: 14px; }
  .vt-fields { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "email zip" "county county" "save save"; }
  .vt-card.is-done { flex: 0 0 auto; }
  .vt-card.is-done .picks { flex: 0 0 auto; }
  .vt-where-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--lane)); align-items: stretch; }
  .vt-places { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .vt-place { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 24px 24px 14px; }
  .vt-place h3 { font-size: 24px; }
}

/* ---------- H4 (October 9, 2026). The issues, designed. The first screen is the locked headline on royal beside
   the four names as four plain doors down the page. Then each issue on its own field: the name, one sentence with
   its source, Samuel's answer in the display face, the door to its tool on Home. Traffic and Corruption each stand
   beside a photograph of the district, on opposite sides; Power bills and AI are bands of type, pale and royal,
   their two columns meeting on the page's middle line. Everything here is this page's own and leans on no other
   page's rules but the first screen's card (.hero, .hero-page, .who), .door, .src and .wrap. ---------- */
.iss-top h1 { margin-bottom: 14px; }
.iss-doors { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; row-gap: 6px; }
.iss-doors a { display: inline-block; padding: 6px 0 12px; font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1.1; color: var(--royal); text-decoration: none; font-feature-settings: "liga" 0, "dlig" 0; background: linear-gradient(var(--sand), var(--sand)) 0 calc(100% - 8px) / 100% 3px no-repeat; }
.iss-doors a:hover { background-image: linear-gradient(var(--royal), var(--royal)); }

.iss { display: grid; grid-template-columns: minmax(0, 1fr); }
.iss-pic { order: -1; background: var(--pale); }
.iss-pic img { width: 100%; height: 62vw; max-height: 440px; object-fit: cover; }
.iss-pic-road img { object-position: 56% 62%; }
.iss-pic-homes img { object-position: 40% 60%; }
.iss-words { padding: 30px 0 44px; }
.iss-in { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.iss h2, .iss-band h2 { font-size: 40px; line-height: 1.02; margin-bottom: 14px; }
.iss-fact { font-size: 18px; line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.iss .src, .iss-band .src { font-size: 14px; }
.iss-fact + .src, .iss-more + .src { margin-top: 8px; }
.iss-more { margin-top: 12px; font-size: 16px; max-width: 34em; text-wrap: pretty; }
.iss-say { font-family: var(--display); font-weight: 900; font-size: 25px; line-height: 1.16; color: var(--royal); margin-top: 26px; max-width: 19em; text-wrap: balance; font-feature-settings: "liga" 0, "dlig" 0; }
.iss-say + .door { margin-top: 10px; }

/* Traffic's two figures, side by side at one size, each over its one line and its source. */
.iss-figures { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--pale); }
.iss-figures dt { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1; color: var(--royal); margin-bottom: 8px; font-feature-settings: "liga" 0, "dlig" 0; }
.iss-figures dd { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.iss-figures .src { display: block; margin-top: 6px; }

/* Power bills and AI: a band of type. The name, then two columns that meet on the page's middle line. */
.iss-band { padding: 40px 0 46px; }
.iss-band-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.iss-band .iss-col + .iss-col { margin-top: 28px; }
.iss-band .iss-col > .iss-say:first-child { margin-top: 0; }
.iss-band.on-pale .door { border-bottom-color: var(--royal); }
.iss-band.on-pale .door:hover { border-bottom-color: var(--white); }
.iss-band.on-royal .iss-say, .iss-band.on-royal .door, .iss-band.on-royal .src { color: var(--white); }
.iss-band.on-royal .door:hover { border-bottom-color: var(--white); }

@media (min-width: 641px) and (max-width: 899px) {
  .iss-in { margin-left: var(--gutter); margin-right: auto; }
}
@media (min-width: 900px) {
  .iss-top .hero-card { align-items: center; }
  .iss-top h1 { font-size: clamp(44px, 4.6vw, 64px); margin-bottom: 20px; }
  .iss-doors { row-gap: 10px; }
  .iss-doors a { font-size: 40px; }
  .iss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .iss-pic { order: 0; position: relative; min-height: 600px; }
  .iss.is-flip .iss-pic { order: -1; }
  .iss-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
  .iss-words { display: flex; align-items: center; padding: 84px 0; }
  .iss-in { width: min(100% - var(--gutter), var(--half)); margin-inline: auto 0; padding-right: var(--lane); }
  .iss.is-flip .iss-in { margin-inline: 0 auto; padding-right: 0; padding-left: var(--lane); }
  .iss h2, .iss-band h2 { font-size: clamp(48px, 4.6vw, 64px); margin-bottom: 20px; }
  .iss-fact { font-size: 20px; }
  .iss-say { font-size: 30px; margin-top: 32px; }
  .iss-say + .door { margin-top: 14px; }
  .iss-figures { column-gap: 40px; margin-top: 28px; padding-top: 26px; }
  .iss-figures dt { font-size: 60px; margin-bottom: 10px; }
  .iss-figures dd { font-size: 16px; }
  .iss-band { padding: 88px 0 92px; }
  .iss-band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--lane)); }
  .iss-band h2 { grid-column: 1 / -1; margin-bottom: 24px; }
  .iss-band .iss-col + .iss-col { margin-top: 0; }
  /* AI and the cameras read across: what is happening, its source, the answer, each pair on one line. */
  .iss-band-rows .iss-col { display: contents; }
  .iss-band-rows .iss-col:nth-of-type(1) > * { grid-column: 1; }
  .iss-band-rows .iss-col:nth-of-type(2) > * { grid-column: 2; }
  .iss-band-rows .iss-fact { grid-row: 2; }
  .iss-band-rows .src { grid-row: 3; }
  .iss-band-rows .iss-say { grid-row: 4; }
  .iss-band-rows .door { grid-row: 5; justify-self: start; }
}

/* ---------- H6. Give, the regular form (the fallback, October 9, 2026) ----------
   One screen, in the grammar of Home's first: the royal card and Samuel at the pond's rail meet at the middle line.
   The card is the form: the headline, the six amounts as buttons (two across on a phone, three on a
   laptop) and the hand-off to ActBlue. A button is white with its figure in royal; sand marks the one the campaign
   asks for first, and on a laptop the one under the pointer instead. */
/* The page is one screen, so it fills the window: the first screen takes whatever the header and the foot leave, and
   the foot sits on the window's bottom edge with nothing blank under it. In one column the card takes the room. */
/* The three rules H6 set here for Give now stand on the body and main for every page (the merge, October 9). */
.gv-top { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--royal); }
.gv-pic { order: -1; background: var(--pale); }
.gv-pic img { width: 100%; height: 56vw; max-height: 400px; object-fit: cover; object-position: 30% 6%; }
.gv-card { padding: 28px 0 36px; }
.gv-in { width: min(100% - 2 * var(--gutter), var(--half)); margin-inline: auto; }
.gv-top h1 { font-size: 36px; margin-bottom: 24px; }
.gv-amounts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gv-amount { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 10px; border-radius: 2px; background: var(--white); color: var(--royal); text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; font-feature-settings: "liga" 0, "dlig" 0; transition: background-color 150ms; }
.gv-amount.is-ask, .gv-amount:active { background: var(--sand); }
/* The one button that is words keeps the figures' face, smaller, and takes two lines on a narrow phone. */
.gv-amount.gv-word { font-size: 16px; line-height: 1.1; text-align: center; text-wrap: balance; }
.gv-say { font-size: 15px; line-height: 1.4; margin-top: 16px; }
@media (hover: hover) {
  .gv-amount:hover { background: var(--sand); }
  .gv-amounts:has(.gv-amount:hover) .gv-amount.is-ask:not(:hover) { background: var(--white); }
}
/* A tablet held upright: the card's words start on the page's left edge, as every band's do. */
@media (min-width: 641px) and (max-width: 899px) { .gv-in { margin-left: var(--gutter); margin-right: auto; } }
@media (min-width: 600px) {
  .gv-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .gv-amount { height: 60px; font-size: 30px; }
}
@media (min-width: 900px) {
  .gv-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; min-height: 560px; }
  .gv-pic { order: 0; position: relative; min-height: 520px; }
  .gv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-position: 47% 14%; }
  .gv-card { display: flex; align-items: center; padding: 64px 0; }
  .gv-in { width: min(100% - var(--gutter), var(--half)); margin-inline: auto 0; padding-right: var(--lane); }
  .gv-top h1 { font-size: clamp(40px, 4vw, 56px); margin-bottom: 36px; }
  .gv-say { font-size: 16px; margin-top: 20px; }
}

/* ---------- H7. Get involved: pick a job (October 9, 2026). The headline asks for doors knocked, so the five jobs
   are five doors in a row at one size: the job, one line of what it is, and a tick box. A door picked turns royal.
   The box is square because more than one job can be picked (a cold reader took a round one for pick-one).
   Who they are stands on the doors' own five columns, the button under the fifth door. ---------- */
.hero-jobs .hero-pic img { object-position: 40% 66%; }
.hero-jobs .who { margin-bottom: 0; }
.jobs { padding: var(--band) 0; }
.jobs h2 { font-size: 30px; margin-bottom: 20px; }
.jobs-set { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.job { position: relative; display: block; min-height: 76px; padding: 15px 64px 16px 16px; background: var(--pale); border-radius: 2px; cursor: pointer; transition: background-color 150ms, color 150ms; }
.job b { display: block; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.15; color: var(--royal); font-feature-settings: "liga" 0, "dlig" 0; text-wrap: pretty; transition: color 150ms; }
.job small { display: block; font-size: 15px; line-height: 1.4; margin-top: 4px; text-wrap: pretty; }
.job input { position: absolute; right: 16px; top: 50%; width: 28px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.tick { position: absolute; right: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border: 1px solid var(--royal); border-radius: 2px; background: var(--white); pointer-events: none; transition: background-color 150ms, border-color 150ms; }
.tick::after { content: ""; position: absolute; left: 9px; top: 4px; width: 7px; height: 13px; border: solid var(--royal); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
.job:has(input:checked) { background: var(--royal); color: var(--white); }
.job:has(input:checked) b { color: var(--white); }
.job input:checked ~ .tick { background: var(--sand); border-color: var(--sand); }
.job input:checked ~ .tick::after { opacity: 1; }
.job:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 3px; }
.jobs-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; align-items: end; margin-top: 28px; }
.jobs-who .who-name, .jobs-who .who-email, .jobs-who .btn { grid-column: 1 / -1; }
.jobs-who .btn { width: 100%; margin-top: 4px; }
.jobs .is-done .jobs-body { display: none; }
/* The thanks stands where the form stood, as the band's headline: royal on white, the line under it black. */
.jobs .is-done .form-say { color: var(--royal); font-size: 30px; line-height: 1.08; }
.jobs .is-done .form-say span { color: var(--ink); font-size: 17px; margin-top: 12px; }
@media (hover: hover) { .job:hover .tick { border-width: 3px; } .job:hover .tick::after { left: 7px; top: 2px; } }
@media (min-width: 640px) {
  .jobs-who { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .jobs-who .who-name, .jobs-who .who-email, .jobs-who .who-phone { grid-column: span 2; }
  .jobs-who .who-zip, .jobs-who .btn { grid-column: span 1; }
  .jobs-who .btn { margin-top: 0; padding: 0 12px; }
}
@media (min-width: 900px) and (max-width: 1199px) { .jobs .job b { font-size: 21px; } }
@media (min-width: 900px) {
  .hero-jobs { min-height: clamp(420px, 58vh, 560px); }
  .hero-jobs .hero-pic { min-height: 0; }
  .hero-jobs .hero-pic img { object-position: 36% 60%; }
  .jobs h2 { font-size: 40px; margin-bottom: 28px; }
  .jobs .is-done .form-say { font-size: 40px; }
  .jobs .is-done .form-say span { font-size: 19px; margin-top: 16px; }
  .jobs-set { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .job { display: flex; flex-direction: column; justify-content: space-between; gap: 72px; min-height: 300px; padding: 22px 20px 22px; }
  .job b { font-size: 24px; }
  .job small { margin-top: 0; }
  .job input, .tick { right: 20px; }
  .jobs-who { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .jobs-who .who-name { grid-column: 1 / span 2; }
  .jobs-who .who-email { grid-column: 3 / span 3; }
  .jobs-who .who-zip { grid-column: 1 / span 2; }
  .jobs-who .who-phone { grid-column: 3 / span 2; }
  .jobs-who .btn { grid-column: 5; }
}

/* ---------- L1 (October 9, 2026, night). About Samuel, in his words, with the family photographs he sent.
   Six chapters in their order, each on its own field. Why I'm running and The job are bands of type: the name,
   then the telling and the chapter's one line in the display face, two columns that meet on the page's middle
   line, as The issues sets a band. Lexington and Family each stand beside a family photograph on Home's Beside
   grid, on opposite sides; the photograph is a print, set at a size the phone's picture of it can carry, on sand,
   in the middle of its field. School and Work stand side by side. Everything here is this page's own and leans on
   no other page's rules but .beside, .beside-card, .beside-in, .wrap and the field classes. ---------- */
.ab-text { font-size: 18px; line-height: 1.55; max-width: 30em; text-wrap: pretty; }
.ab-say { font-family: var(--display); font-weight: 900; font-size: 25px; line-height: 1.16; color: var(--royal); max-width: 19em; text-wrap: balance; font-feature-settings: "liga" 0, "dlig" 0; }
.ab-text + .ab-say { margin-top: 22px; }
.on-royal .ab-say { color: var(--white); }

.ab-band { padding: 40px 0 46px; }
.ab-band h2, .ab-beside h2 { font-size: var(--head); margin-bottom: 14px; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.ab-pair article + article { margin-top: 32px; }
.ab-col .door { margin-top: 8px; }
.ab-col + .ab-say { margin-top: 22px; }

.ab-beside .beside-card { padding: 34px 0 44px; }
.ab-plate { order: -1; background: var(--sand); display: flex; align-items: center; justify-content: center; padding: 32px var(--gutter); }
.ab-plate img { width: auto; height: auto; border: 8px solid var(--white); }
.ab-plate.is-tall img { max-width: min(68vw, 256px); }
.ab-plate.is-wide img { max-width: min(100%, 520px); }

@media (min-width: 900px) {
  .ab-text { font-size: 19px; }
  .ab-say { font-size: 30px; }
  .ab-text + .ab-say { margin-top: 0; }
  .ab-col + .ab-say { margin-top: 0; }
  .ab-band { padding: var(--band) 0; }
  .ab-band h2, .ab-beside h2 { margin-bottom: 18px; }
  .ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--lane)); align-items: start; }
  .ab-grid > h2 { grid-column: 1 / -1; }
  .ab-pair article + article { margin-top: 0; }
  .ab-beside .beside-card { padding: var(--band) 0; }
  .ab-beside .ab-text + .ab-say { margin-top: 26px; }
  .ab-plate { order: 0; padding: 56px var(--gutter); }
  .ab-plate.is-tall img { max-width: 352px; }
  .ab-plate.is-wide img { max-width: min(100%, 496px); }
}

/* ---------- L2 (October 9, 2026, night). The launch fixes from Samuel's review of the site. Samuel: "Can we include
   some more color splash on the page? Underline at the menu navigation at the top with that sand color, same for
   dividers -> traffic / power bills / AI"; Taylor: "Yep!" ---------- */
/* The menu: the page a visitor is on is underlined in sand, a point heavier than the line was so the sand reads on
   white; the item under the pointer keeps the royal line. In the phone's menu the same page's name is underlined. */
.nav a { border-top-width: 3px; border-bottom-width: 3px; }
.nav a[aria-current="page"] { border-bottom-color: var(--sand); }
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 3px; text-underline-offset: 7px; }

/* The name band: an issue's name alone on sand, one line, on the page's left edge. Between the parts on Home and
   over each issue on The issues. Royal on sand measures 5.7 to 1, so the name is royal (Samuel: "Might have to go
   darker on the text for that one"). */
.name-band { background: var(--sand); padding: 16px 0; }
.name-band h2 { font-size: 25px; line-height: 1.1; white-space: nowrap; }
@media (min-width: 900px) {
  .name-band { padding: 20px 0; }
  .name-band h2 { font-size: 29px; }
}
/* A part opened by its address (/bill, /roads, /issues/#ai) lands with its band right under the header. */
section:has(> .name-band) { scroll-margin-top: calc(var(--bar) + 1px); }

/* The issues: the link to the camera map is the longest door on the page. Where a phone is too narrow for it, its
   two lines are even and its sand line is no longer than they are, as every other door's is. */
.iss-band .door { text-wrap: balance; }
@media (max-width: 401px) { .iss-band .door[target] { max-width: 10.9em; } }

/* Home, beside Samuel among the pines: his own three sentences, each set apart as its own thought, as the statement
   under the first screen is (Taylor, October 9: "Why are these words smashed together?"). At the panel's size a
   sentence takes two lines, so the type is held to where "I engineer software" keeps one line. */
.wide-say span { display: block; }
.wide-say span + span { margin-top: 0.5em; }
.wide-plate .wide-say { font-size: min(var(--head), (100vw - 2 * var(--gutter)) / 11.1); }
@media (min-width: 900px) {
  .wide-plate .wide-say { font-size: clamp(23px, 2.3vw, 30px); font-size: min(34px, 100cqi / 11.1); }
}

/* ---------- L5 (October 10, 2026). About: the alignment pass (Taylor: "there are many issues with text not being
   aligned or justified properly. Otherwise, this is a great about page."). Nothing here changes a word, a
   photograph, a color or a size of type; only where things sit. Measured before and after at 390, 768, 1,024 and
   1,440 (AI/Build Sources/Samuel Price Website/L5). ---------- */
/* One room. Every part of About keeps the page's one room above and below at every width (--band), as the close
   under it does, so every headline on the page stands the same distance under the top of its field; the words
   under a print had kept 34 and a band 40 (the cold reader, of the first pass, which had 40 and 56: "School and The
   job have more space above their headings than Lexington and Family"). */
.ab-band { padding: var(--band) 0; }
.ab-beside .beside-card { padding: var(--band) 0; }
/* The one door on the page belongs to its paragraph: it starts right under it, and the chapter's line keeps the same
   room under the door's rule as it keeps under a paragraph elsewhere (the cold reader: "it floats with equal gaps
   above and below, so it belongs to neither"). */
.ab-col .door { margin-top: 0; }
.ab-col + .ab-say { margin-top: 30px; }
/* The first screen's photograph, in one column: the crop starts at the photograph's own top edge, which is all the
   room the file has over Samuel's hair (the cold reader: "his hair touches the line under the nav"), as Home's does. */
@media (max-width: 899px) { .hero-about .hero-pic img { object-position: 46% 0%; } }

/* The prints. A frame takes its width from the rule here and never from the file's own size (on a tablet the
   family portrait's frame was cut narrower than the box that held it, so it stood 63 points left of the middle).
   In one column a print starts on the words' left edge, as every line under it does: on a phone the family
   portrait runs from that edge to the words' right edge, and on a tablet held upright, where the words keep to the
   left of the page, it ends where their lines end. On a laptop each print is in the middle of its field, as L1
   set it. */
.ab-plate picture { flex: 0 1 auto; width: 100%; }
.ab-plate img, .ab-plate.is-tall img, .ab-plate.is-wide img { width: 100%; max-width: none; }
.ab-plate.is-tall picture { max-width: min(68vw, 256px); }
.ab-plate.is-wide picture { max-width: none; }
@media (max-width: 899px) { .ab-plate { justify-content: flex-start; } }
@media (min-width: 641px) and (max-width: 899px) { .ab-plate.is-wide picture { max-width: 540px; } }

@media (min-width: 900px) {
  .ab-beside .beside-card { padding: var(--band) 0; }
  .ab-plate.is-tall picture { max-width: 352px; }
  .ab-plate.is-wide picture { max-width: 496px; }
  /* Why I'm running and The job: the two columns hang from one line. The chapter's line in the display face starts
     on the top of the headline's capitals, where it had started a row lower, level with the paragraph. School and
     Work already start on one line. The 2 points are the difference between the two sizes' own room over their
     capitals. */
  .ab-grid { grid-template-rows: auto 1fr; }
  .ab-grid > h2 { grid-column: 1; }
  .ab-grid > .ab-col, .ab-grid > .ab-text { grid-column: 1; grid-row: 2; }
  .ab-grid > .ab-say, .ab-col + .ab-say { grid-column: 2; grid-row: 1 / span 2; margin-top: 2px; }
  .ab-pair .ab-grid { grid-template-rows: auto; }
  /* Beside a print the words are centered on the print by what is read, the top of the headline's capitals to the
     last baseline, and not by their box, which carries more room over the headline than under the last line. */
  .ab-beside .beside-in { margin-top: -5.6px; }
}

/* ---------- L4 (October 10, 2026). The press page (src/press.njk). Taylor: "This goes on a press page"; "logo,
   headshot, and full bio. It's pretty standard." Three rows on the page's middle line, each a name over its words
   or its list at the left and its picture at the right: For the press, the facts beside the headshot; Bio, on
   pale, two paragraphs of one length side by side; Logo, its files beside the name. Everything here is this page's
   own and leans on no other page's rules but .band, .two, .ruled, .prose, .caps, .wrap and the field classes. ---------- */
.pr-kit { --pr-head: 40px; }
.pr-kit h1 { font-size: var(--pr-head); margin-bottom: 24px; }
.pr-pic img, img.pr-pic { width: 100%; height: auto; }
img.pr-mark { width: min(100%, 320px); }
.pr-bio p { text-wrap: pretty; }
/* A file's two formats stand on one line, so every row of the list keeps one height. */
.pr-files a + a { margin-left: 24px; }
@media (max-width: 899px) {
  /* One column, held to the width a line is read at. A row's name, its picture, then its list. A fact's name stands
     over the fact, since the press address is as wide as a phone. */
  .pr-row .two, .pr-bio .two { gap: 0; }
  .pr-lead { display: contents; }
  .pr-kit h1, .pr-logo h2 { margin-bottom: 28px; }
  .pr-pic { order: 1; max-width: 612px; }
  img.pr-mark { width: min(100%, 260px); }
  .pr-row .ruled { order: 2; margin-top: 24px; max-width: 612px; }
  .pr-row .ruled > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 900px) {
  /* A picture's top edge stands on the top of its row's capitals (--pr-cap: how far the capitals sit under the
     line's own top at that size, measured on the built page). Beside the headshot the facts are three even rows
     that fill the column, so the last rule under them lands on the headshot's bottom edge at every width. */
  .pr-kit { --pr-head: 56px; --pr-cap: 13.85px; }
  .pr-logo { --pr-cap: 9.89px; }
  .pr-pic { margin-top: var(--pr-cap); }
  .pr-kit .two { align-items: stretch; }
  .pr-kit .pr-lead { display: flex; flex-direction: column; }
  .pr-kit .ruled { flex: 1 0 auto; display: grid; grid-auto-rows: 1fr; }
  .pr-kit .ruled > div { align-content: center; }
  .pr-bio .two { row-gap: 0; }
  .pr-bio .two > h2 { grid-column: 1 / -1; }
  .pr-bio p + p { margin-top: 0; }
}
/* A narrow laptop window: the column is too slim for the headline at full size and for the press address beside
   its name, so the headline steps down a size and the names' column and the facts tighten, each to one line. */
@media (min-width: 900px) and (max-width: 979px) {
  .pr-kit { --pr-head: 50px; --pr-cap: 13.15px; }
  .pr-row .ruled > div { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .pr-row .ruled dd { font-size: 16px; }
}
/* ---------- L6 (October 10, 2026): the first screen fills the window, and a scroll lands on the next block whole.
   Taylor, with Home on a laptop and a wide screen, each showing the first screen's two fields over the next block's
   two: "the website is giving "four squares"... We want the top block, the blue and Samuel beside it, to take up the
   full height of the viewport. Then, when the user scrolls the page will jump down to the next block." About too,
   on his word at the check ("I guess do about too"). Where the top is two columns only (900 and wider); a phone and
   a tablet held upright stack it and are as they were. Get involved, The issues and Republicans for Price keep
   their own tops. ---------- */
:root { --header: calc(var(--bar) + 1px); }   /* the header as it stands: the bar and the line under it */
@media (min-width: 900px) {
  .hero:not(.hero-page, .hero-jobs) { min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); }
  /* The photograph takes the first screen's height, whatever it is; the 560 it kept as a floor made the first
     screen taller than a short window. */
  .hero:not(.hero-page, .hero-jobs) .hero-pic { min-height: 0; }
  /* Home's photograph has little room over Samuel's hair, so in a window wide and short enough to cut it top and
     bottom, the cut comes off the bottom. */
  .hero:not(.hero-page, .hero-jobs, .hero-about) .hero-pic img { object-position: 50% 4%; }
}
/* A short window (a small laptop with the browser's bars on it, about 625 tall): the card's room and the headline
   step down so the words and the form still fit the first screen. The type steps, never the words. */
@media (min-width: 900px) and (max-height: 659px) {
  .hero:not(.hero-page, .hero-jobs) .hero-card { padding: 40px 0; }
  .hero:not(.hero-page, .hero-jobs, .hero-about) h1 { font-size: clamp(42px, 4.1vw, 56px); margin-bottom: 20px; }
  .hero:not(.hero-page, .hero-jobs) .towns { margin-bottom: 28px; }
}
/* The jump. The page rests on the first screen or on the block under it and never between the two, so the four
   fields are never on the screen together. It is the browser's own snapping: two places to land, the first screen
   and the next block, and everything from that block down is one area the page scrolls through freely (its room
   below reaches past the foot), because the tools are taller than a window and a slider inside a snapping page
   fights the thumb. Only where the browser knows the small-window unit, which every browser that scrolls freely
   through a tall area does; not in a window too short to hold the first screen (a phone on its side); and not
   for someone who has asked for less motion. Their pages scroll as any page does.
   price.js carries a wheel or a trackpad the rest of the way (a short wheel scroll would otherwise slide back). */
@media (min-width: 900px) and (min-height: 500px) and (prefers-reduced-motion: no-preference) {
  @supports (height: 100svh) {
    html { scroll-snap-type: y mandatory; }
    .hero:not(.hero-page, .hero-jobs), .hero:not(.hero-page, .hero-jobs) + section { scroll-snap-align: start; scroll-margin-top: var(--header); }
    .hero:not(.hero-page, .hero-jobs) + section { scroll-margin-bottom: 100000px; scroll-snap-stop: always; }   /* a flick off the first screen stops here and does not fly past */
    /* L7b (Taylor, October 10, 2026: "Still a little jumpy on desktop scroll."): on Home the snapping is for the jump
       alone. price.js marks the page once it is a pixel into the block under the first screen, and from there down
       it scrolls as any page does. */
    html.past-first { scroll-snap-type: none; }
  }
}

/* ---------- L7 (October 10, 2026): Home's statement, a sentence at a time. Taylor, of the block as it stood (Goose
   Creek beside the three sentences): "The picture is amazing and in his district (the Goose Creek Dam at sunset).
   The words are great. The side by side display here is uninspiring." Of two drawings: "What I love about line by
   line is that it breaks up Samuel's dense but important opening statement." "The picture needs adjusted.. I think
   upwards, so that the sun is in it more?" "The line by line scroll is too chunky, but the read of the line is the
   best so far."
   The photograph runs edge to edge across the top of the window and holds under the header, cut high, the sun near
   its middle and the dam's line under it. Under it is a royal field the height of one sentence. The three
   sentences are the page itself: each alone, each as large as the page's width lets it be, moving up through the
   field at the speed of the visitor's own scroll and away behind the photograph. When the third is in its place the
   photograph lets go and the two leave together. No script and no timing: nothing pops. Each sentence holds its
   place for a beat of the scroll before it goes on, so there is a place to read it. For a visitor who has asked
   for less motion nothing holds: the photograph, then the three sentences down the page.
   Every size comes from the page's width (--m, from the name's edge to the Give button's): a line's size is --m
   over the line's own width in ems, measured in Literata Black with its ligatures off. "The party that runs
   Columbia" 15.76; "making it worse." 9.04, the widest of that sentence's three lines on a phone; "There is no
   plan." 8.90 and "There is" 4.37; "Samuel Price is an engineer," 14.96 and "and he has one." 8.11. --b is the room
   one sentence takes: the tallest sentence and a room over and under it. The first screen's jump (L6) sets this
   block down with the first sentence in the field. ---------- */
.stmt { --edge: max(var(--gutter), calc(50% - var(--half))); container-type: inline-size; background: var(--royal); }
/* --b is the field's height, one sentence's; --d is the beat a sentence holds its place for (and, for the first,
   what takes up the tail of the scroll that brought the visitor here); --p is the photograph's height, the window
   under the header less the field. A sentence's room is the field and a beat tall; its words stand in a box the
   field's size that holds at the field's place for the beat and then goes on up, as the next one's room comes in
   at the window's lower edge. The photograph's own room ends a beat after the third sentence has come to its
   place, and that sentence's room starts a beat inside it, so the two let go on the same pixel. */
.stmt-held, .stmt-line { --m: min(100cqi - 2 * var(--gutter), var(--max)); --b: calc(var(--m) * 0.446 + 72px); --d: 64px; --p: max(calc(100vh - var(--bar) - 1px - var(--b)), 280px); }
@supports (height: 100svh) { .stmt-held, .stmt-line { --p: max(calc(100svh - var(--bar) - 1px - var(--b)), 280px); } }
.stmt-held { position: relative; }
.stmt-held::after { content: ""; display: block; height: var(--d); }   /* the photograph's room runs a beat past the second sentence's (a box, since a held thing lets go at the end of what its room holds, and padding is not that) */
.stmt-pic { position: sticky; top: calc(var(--bar) + 1px); z-index: 1; max-width: none; height: var(--p); background: var(--royal); }
.stmt-pic img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.stmt-line { position: relative; z-index: 0; height: calc(var(--b) + var(--d)); }
.stmt-3 { margin-top: calc(-1 * var(--d)); }
.stmt-words { position: sticky; top: calc(var(--bar) + 1px + var(--p)); height: var(--b); display: grid; align-content: center; padding: 0 var(--edge); color: var(--white); font-family: var(--display); font-weight: 900; letter-spacing: 0; text-wrap: wrap; font-feature-settings: "liga" 0, "dlig" 0; }
.stmt-words i { font-style: normal; }
.stmt-1 .stmt-words { font-size: calc(var(--m) / 9.1); line-height: 1.06; }
.stmt-2 .stmt-words { font-size: calc(var(--m) / 4.39); line-height: 0.98; }
.stmt-3 .stmt-words { font-size: calc(var(--m) / 8.2); line-height: 1.04; }
.stmt-3 i { display: block; }
.stmt-3 i:first-child { text-wrap: balance; }
@media (min-width: 641px) {
  .stmt-held, .stmt-line { --b: calc(var(--m) * 0.14 + 96px); --d: 100px; }
  .stmt-pic img { object-position: 50% 29%; }
  .stmt-1 .stmt-words { font-size: calc(var(--m) / 15.8); line-height: 1.05; }
  .stmt-2 .stmt-words { font-size: calc(var(--m) / 8.92); line-height: 1; white-space: nowrap; }
  .stmt-3 .stmt-words { font-size: calc(var(--m) / 15); line-height: 1.05; }
  .stmt-3 i:first-child { display: inline; text-wrap: wrap; }
}
/* L7b (Taylor, October 10, 2026: "It is a lot smoother now. Still a little jumpy on desktop scroll. Phone was okay."):
   under a trackpad or a mouse the sentences never stand still. Held for a beat, each went from still to the
   scroll's full speed in one frame, three times in one scroll, and the whole screen stood still under moving
   fingers (a tenth of a second at a quick scroll, a quarter at a reading pace, most of a second at a creep). Here
   each is simply the page, at the page's own speed. Their rooms keep the beat's height, so each still comes alone,
   with royal between it and the next, and stands in the field at the same place in the scroll as before; the
   photograph lets go as the third arrives. A phone and a tablet, scrolled by a finger, keep the beat. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stmt-words { position: static; }
  .stmt-held::after { content: none; }
  .stmt-3 { margin-top: 0; height: var(--b); }
}
@media (prefers-reduced-motion: reduce) { .stmt-held, .stmt-line { --d: 0px; } .stmt-pic, .stmt-words { position: static; } }

/* ---------- F3 (October 10, 2026). The issues: the Flock cameras as a part of their own, and each part's sources
   behind one small line. Taylor, shown the Flock lines under AI and as a part of their own: "C is most in line with
   home I think."; "Flock gets it own block because I love the message in the AI block." The part is Power bills'
   band on royal and needs no rule of its own. Of the citations on the search: "I'd love to see you do that with all
   citations honestly. They clutter up the screen."; of this page: "Yes Do that". So a part ends on its door and,
   under it, "Sources" in the search's own small line (src/modules/flock/flock.css, .fk-cite): it opens
   a white card over the page, so nothing above or below it moves. The browser opens it by a tap, a click or a key;
   src/assets/js/issues.js opens it under a pointer. ---------- */
.iss-cite { position: relative; margin-top: 6px; }
.iss-cite summary { display: inline-flex; align-items: center; column-gap: 9px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--royal); }
.iss-cite summary::-webkit-details-marker { display: none; }
.iss-cite summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--royal); border-bottom: 2px solid var(--royal); transform: rotate(45deg); }
.iss-cite[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.iss-cite summary:focus-visible { outline-offset: 2px; }
.iss-band.on-royal .iss-cite summary { color: var(--pale); }
.iss-band.on-royal .iss-cite summary::after { border-color: var(--sand); }
.iss-card { position: absolute; left: 0; top: 100%; z-index: 3; display: grid; row-gap: 6px; width: max-content; max-width: min(100vw - 2 * var(--gutter), 27em); padding: 12px 14px; list-style: none; border-radius: 2px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.45; outline: 1px solid var(--pale); outline-offset: -1px; }