/* Anthony Olson for Pine City Council
   One stylesheet for every page (launch rebuild, Sept. 2026).
   Palette is pine, paper, and amber only. Fonts are self-hosted, so the site makes no
   requests to anyone but its host. Everything here is the finished page: it reads the same
   with JavaScript off and with reduced motion on. story.css adds the illustrations' motion. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-italic-variable.woff2") format("woff2");
}
/* Stand-ins sized to match the web fonts, so text doesn't jump when the real fonts arrive. */
@font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); font-weight: 200 599; size-adjust: 106.8%; ascent-override: 97.4%; descent-override: 31.8%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 95.1%; ascent-override: 109.4%; descent-override: 35.8%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; size-adjust: 97.7%; ascent-override: 90.1%; descent-override: 21.5%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 97.8%; ascent-override: 90%; descent-override: 21.5%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --pine: #173528;
  --pine-deep: #0f241a;
  --pine-mid: #21453a;
  --paper: #f6f1e8;
  --paper-deep: #ebe3d4;
  --white: #fffdf8;
  --ink: #14261c;
  --ink-soft: #465a4e;
  --on-pine: #f6f1e8;
  --on-pine-soft: #cfd9d2;
  --amber: #efb557;
  --amber-deep: #d99a3a;
  --rule: rgba(20, 38, 28, 0.18);
  --rule-strong: rgba(20, 38, 28, 0.55);
  --rule-light: rgba(246, 241, 232, 0.22);

  --sans: "Archivo", "Archivo Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif 4 Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* Spacing scale. Every layout margin, gap and padding (sections, blocks, cards, columns) is
     one of these steps; only small component insets (a chip, a button) use their own.
     --s-8 is the section padding, and no gap anywhere is bigger than it. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  --s-8: clamp(3rem, 2.2rem + 2.4vw, 4rem);
  --section: var(--s-8);
  --gutter: clamp(1.125rem, 0.5rem + 2.8vw, 3rem);

  /* Widths: the page, and one reading width for body text (about 65 characters) */
  --max: 72rem;
  --measure: 35rem;

  /* Type scale */
  --fs-small: 1rem;
  --fs-body: 1.125rem;
  --fs-lede: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  --fs-h1: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem);
  /* labels: the yard sign's own lettering (Archivo narrowed to 75%, like PINE CITY COUNCIL on the
     sign and the wordmark's office line). The font shorthand resets font-stretch, so every rule
     that sets font: var(--label) adds font-stretch: 75% after it (Anthony's design review, Sept. 24). */
  --label: 800 0.9375rem/1.35 var(--sans);
  --aside: italic 600 1.25rem/1.45 var(--serif);

  --ease: cubic-bezier(0.22, 0.72, 0.2, 1);
  --shadow-sm: 0 0.5rem 1.25rem rgba(15, 36, 26, 0.12);
  --shadow-md: 0 1rem 2rem rgba(15, 36, 26, 0.25);
  --shadow-lg: 0 1.25rem 2.5rem rgba(15, 36, 26, 0.28);
}
::selection { background: rgba(239, 181, 87, 0.5); color: var(--ink); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a[href^="tel:"] { white-space: nowrap; } /* keep "(320) 591-8330" on one line; it can break at the hyphen */
:focus-visible { outline: 3px solid var(--pine-deep); outline-offset: 3px; }
:is(.site-header, .hero, .election, .next-steps, .site-footer) :focus-visible { outline-color: var(--amber); }
/* the notes card is a dark card on light paper: its amber ring is drawn inside the card */
.notes-card:focus-visible { outline-color: var(--amber); outline-offset: -6px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p, li, dd { text-wrap: pretty; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.on-paper-deep { background: var(--paper-deep); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--amber); color: var(--pine-deep);
  font: 700 1rem/1 var(--sans); padding: 0.9rem 1.1rem; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ---------- Small type, section heads ---------- */
.label {
  font: var(--label);
  font-stretch: 75%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}
.lede { font-size: var(--fs-lede); line-height: 1.55; }
.note { font: 400 var(--fs-small)/1.5 var(--sans); color: var(--ink-soft); }
.section-head { max-width: var(--measure); margin-bottom: var(--s-7); }
.section-head .lede { margin: var(--s-4) 0 0; }
.section-foot { margin: var(--s-6) 0 0; }

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.7rem 1.4rem;
  font: 750 1.0625rem/1.2 var(--sans); text-decoration: none; text-align: center;
  border: 2px solid var(--pine-deep); background: var(--pine-deep); color: var(--white);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.1s var(--ease);
}
.button:active { transform: translateY(1px); }
.button.secondary { background: transparent; color: var(--pine-deep); }
.button.amber { background: var(--amber); border-color: var(--amber); color: var(--pine-deep); }
.button.secondary.on-dark { color: var(--on-pine); border-color: var(--on-pine); }
@media (hover: hover) {
  .button:hover { background: var(--pine); border-color: var(--pine); text-decoration: none; }
  .button.secondary:hover { background: var(--pine-deep); color: var(--white); }
  .button.amber:hover { background: var(--white); border-color: var(--white); }
  .button.secondary.on-dark:hover { background: var(--on-pine); color: var(--pine-deep); }
}
@media (max-width: 34rem) { .actions .button { flex: 1 1 100%; } }
/* a standalone link with an arrow: inline-block so a long one wraps with its arrow, padded to a 44px target */
.link-arrow { font: 750 1.0625rem/1.3 var(--sans); color: var(--pine); display: inline-block; padding-block: var(--s-3); }

/* ---------- The wordmark: ANTHONY OLSON, with FOR PINE CITY COUNCIL beneath ----------
   The check sits after the name (on the home page the O of OLSON becomes the check and hops
   there; see story.css). The second line spans exactly the width of the name. */
.wordmark {
  display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "name check" "office .";
  column-gap: 0.5rem; row-gap: 0.32rem; align-items: center; justify-items: start; align-content: center; min-height: 2.75rem;
  color: var(--on-pine); text-decoration: none; line-height: 1;
}
.wordmark:hover { text-decoration: none; }
.wordmark .name { grid-area: name; font: 900 1.5rem/1 var(--serif); letter-spacing: 0.012em; text-transform: uppercase; white-space: nowrap; }
.wordmark .first { color: var(--amber); font-weight: 700; letter-spacing: 0.035em; }
.wordmark .check { grid-area: check; width: 1.3rem; height: 1.3rem; }
.wordmark .office {
  grid-area: office; display: flex; justify-content: space-between; width: 0; min-width: 100%;
  font: 800 0.78rem/1 var(--sans); font-stretch: 88%; letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap;
}
.wordmark .office > span:last-child { margin-right: -0.17em; }
.check { flex: none; }
.check circle { fill: var(--amber); }
.check path { fill: none; stroke: var(--pine-deep); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* phones: the mark steps down so the Menu button fits beside it on one row */
@media (max-width: 30rem) {
  .wordmark { column-gap: 0.4rem; row-gap: 0.28rem; }
  .wordmark .name { font-size: 1.3rem; }
  .wordmark .office { font-size: 0.68rem; letter-spacing: 0.15em; }
  .wordmark .check { width: 1.15rem; height: 1.15rem; }
}
@media (max-width: 22.5rem) {
  .wordmark { column-gap: 0.3rem; }
  .wordmark .name { font-size: 1.05rem; }
  .wordmark .office { font-size: 0.56rem; letter-spacing: 0.12em; }
  .wordmark .check { width: 0.95rem; height: 0.95rem; }
  /* (qualified so they win over the header rules that come later in this file) */
  .site-header .header-bar { column-gap: var(--s-3); }
  html.js .site-header .menu-toggle { padding: 0 var(--s-3); gap: 0.4rem; }
}

/* ---------- Header and navigation ----------
   Wide screens: every link in a row. Phones and tablets: a Menu button opens the list.
   Without JavaScript the links simply wrap under the wordmark. */
.site-header { background: var(--pine-deep); color: var(--on-pine); position: relative; z-index: 10; }
/* The header's lower edge (Sept. 25): a fine amber line, like the last light on the horizon, that
   fades out toward both sides. Where the header meets more dark green (the home hero, and the
   phone page streets) a faint warmth sits just beneath it; on cream it would read as a smudge.
   It replaces the plain hairlines those dark sections used to draw on their top edges. */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(239, 181, 87, 0), rgba(239, 181, 87, 0.6) 20%, rgba(239, 181, 87, 0.6) 80%, rgba(239, 181, 87, 0)); }
body:has(.hero) .site-header::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -24px; height: 24px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0, rgba(239, 181, 87, 0.09), rgba(239, 181, 87, 0)); }
@media (max-width: 52rem) {
  body:has(.page-street) .site-header::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -24px; height: 24px; pointer-events: none;
    background: radial-gradient(50% 100% at 50% 0, rgba(239, 181, 87, 0.09), rgba(239, 181, 87, 0)); }
}
.header-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); padding-block: var(--s-3); min-height: 4.5rem; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin: 0; padding: 0; }
.site-nav a { font: 650 1rem/1.2 var(--sans); color: var(--on-pine); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.site-nav .nav-sign { border: 2px solid var(--amber); color: var(--amber); padding: 0 var(--s-4); }
.site-nav .nav-sign:hover { text-decoration: none; }
@media (hover: hover) { .site-nav .nav-sign:hover { background: var(--amber); color: var(--pine-deep); } }
/* "Get a yard sign" is longer than the old label: a slightly tighter gap keeps the row on one
   line from 64rem (where the Menu button hands over) to 75rem */
@media (min-width: 64rem) and (max-width: 75rem) { .site-nav ul { column-gap: var(--s-4); } }

.menu-toggle { display: none; }
@media (max-width: 63.99rem) {
  .site-nav { width: 100%; border-top: 1px solid var(--rule-light); }
  .site-nav ul { gap: 0 var(--s-5); padding-block: var(--s-1); }
  html.js .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 var(--s-4);
    font: 700 1rem/1 var(--sans); color: var(--on-pine); background: transparent;
    border: 2px solid var(--rule-light); cursor: pointer;
  }
  html.js .menu-toggle[aria-expanded="true"] { border-color: var(--amber); }
  html.js .site-nav { display: none; }
  html.js .site-header.menu-open .site-nav { display: block; }
  html.js .site-nav ul { flex-direction: column; align-items: stretch; padding-block: var(--s-2) var(--s-4); }
  html.js .site-nav li + li { border-top: 1px solid var(--rule-light); }
  html.js .site-nav a { display: flex; min-height: 3rem; font-size: 1.125rem; }
  html.js .site-nav .nav-cta { border-top: 0; padding-top: var(--s-3); }
  html.js .site-nav .nav-sign { justify-content: center; }
}
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.1rem; height: 2px; background: currentColor; transition: transform 0.2s var(--ease), background-color 0.2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- The street (the recurring picture) ----------
   Always shown whole: the box keeps the drawing's own 5:1 shape, so nothing is cropped. */
.skyline { display: block; line-height: 0; }
.skyline .street { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 240; }
/* finished state everywhere: the lit windows show and their dark layer is hidden (story.css
   only holds them back on pages with motion) */
.street .win-off { opacity: 0; }

/* ---------- Home: hero at dusk ---------- */
.hero { background: var(--pine-deep); color: var(--on-pine); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 var(--s-7); align-items: center; padding-top: var(--s-7); }
.hero .label { color: var(--amber); }
.byline-row { display: flex; align-items: center; gap: var(--s-3); }
.byline-row .avatar { display: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 2px solid var(--amber); object-fit: cover; }
.hero-rule { display: block; width: 5.5rem; height: 4px; background: var(--amber); margin: 0 0 var(--s-5); transform-origin: left; }
.hero h1 { color: var(--white); max-width: 15ch; }
/* The headline (Sept. 25) is two sentences: the second always starts its own line, and "a lot"
   stays together, so it reads "Pine City means / a lot to me. / So does its future." (15ch lets
   the second sentence fit on one line on wide screens.) */
.hero h1 .h1-next { display: block; }
/* on the narrowest phones (320px) a step smaller, so it keeps those three lines */
@media (max-width: 22.5rem) { .hero h1 { font-size: 2.05rem; } }
.hero .lede { margin: var(--s-5) 0 0; color: var(--on-pine); }
.hero-story { max-width: var(--measure); }
.hero-story p { margin: var(--s-4) 0 0; color: var(--on-pine); }
.hero-story .read-story { margin-top: var(--s-2); }
/* Under the photo the opening continues in both columns (Sept. 25): the work paragraph on the
   left, the ask and Read my story on the right in the photo's own width, then Election Day on
   the left, clear of the water tower. On phones the grid is one column, in the same order. */
@media (min-width: 52.01rem) {
  .hero-more { padding-top: var(--s-6); }
  .hero-more > p:first-child { margin-top: 0; }
  .hero-ask { justify-self: end; width: 100%; max-width: 24rem; }
  .hero-grid > .vote-line { grid-column: 1; margin-top: var(--s-6); }
}
.hero .link-arrow { color: var(--amber); }
.hero .actions { margin-top: var(--s-5); }
.vote-line { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule-light); font: 500 1.0625rem/1.5 var(--sans); color: var(--on-pine-soft); max-width: var(--measure); }
.vote-line strong { color: var(--white); font-weight: 750; }
.hero-photo { position: relative; justify-self: end; width: 100%; max-width: 24rem; isolation: isolate; margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* The photo (Sept. 25): an arched window, like a doorway or an old Main Street storefront. A fine
   amber line follows the arch 12px out and closes along the bottom. (999px radii make a true
   half-circle top at any width, and keep the photo's arch and the line's arch concentric.)
   The line's top sits level with the short amber rule over the headline, and its right edge in
   line with the header's yard-sign button. Replaces the offset amber frame. */
.hero-photo { padding: 12px; }
.hero-photo img { display: block; border-radius: 999px 999px 0 0; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(239, 181, 87, 0.7); border-radius: 999px 999px 0 0; }
/* The whole street, always uncropped. On phones it runs across the top, under the header, so
   it's the first thing you see. On wider screens it rises behind the bottom of the headline
   column: only its empty sky (the top quarter of the drawing) sits under the text, and the
   photo stays above the moon. */
.hero { display: flex; flex-direction: column; }
.hero .skyline { position: relative; z-index: 0; }
.hero-grid { position: relative; z-index: 1; }
@media (min-width: 52.01rem) {
  /* the photo and the header already say who this is, so the small byline is for phones */
  .hero .byline-row { display: none; }
  .hero-grid { align-items: start; padding-top: var(--s-6); }
  .hero h1 { font-size: clamp(2.5rem, 1.5rem + 2.9vw, 3.75rem); }
  /* 7vw is about a third of the drawing's height: the empty sky and the dark ridge, never a house */
  .hero .skyline { margin-top: calc(var(--s-4) - 7vw); }
}
@media (max-width: 52rem) {
  .hero .skyline { order: -1; padding-top: var(--s-2); }
  .hero-grid { grid-template-columns: 1fr; padding-top: var(--s-5); padding-bottom: var(--section); }
  .hero-photo { display: none; }
  .byline-row .avatar { display: block; }
  .hero h1 { max-width: 16ch; }
}

/* ---------- Home: the issues, in one line each ----------
   One printed sheet with the perforated top edge of the Voters' Guide clippings and the tax
   statement, and six rows split by dashed rules: the topic, his one-line position, an arrow.
   Each row is one tap target (the topic is the link; its ::after covers the row), with the focus
   ring drawn inside the row. */
.issue-cards {
  list-style: none; position: relative; max-width: 56rem; margin: 0;
  padding: var(--s-3) var(--s-5) var(--s-1);
  background: var(--white); border: 1px solid var(--rule);
}
.issue-cards::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--pine) 0 10px, transparent 10px 16px); opacity: 0.25; }
.issue-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 1.5rem; column-gap: var(--s-5); align-items: baseline;
  margin-inline: calc(-1 * var(--s-5)); padding: var(--s-4) var(--s-5);
  border-bottom: 1px dashed var(--rule-strong);
  transition: background-color 0.15s var(--ease);
}
.issue-card:last-child { border-bottom: 0; }
.issue-card h3 { margin: 0; font: 750 1.125rem/1.35 var(--sans); letter-spacing: 0; }
.issue-card h3 a { text-decoration: none; }
.issue-card h3 a::after { content: ""; position: absolute; inset: 0; }
.issue-card h3 a:focus-visible { outline: none; }
.issue-card:focus-within { outline: 3px solid var(--pine-deep); outline-offset: -3px; }
.issue-card p { font-size: 1.0625rem; line-height: 1.55; margin: 0; }
/* the arrow is centered on the topic's baseline, as in the approved preview: the empty ::before
   is the first flex item, so the row's baseline runs through the arrow's middle */
.card-more { justify-self: end; display: inline-flex; align-items: center; color: var(--pine); }
.card-more::before { content: ""; }
.card-more::after { content: "→"; display: inline-block; font: 750 1.25rem/1 var(--sans); transition: transform 0.15s var(--ease); }
@media (hover: hover) {
  .issue-card:hover { background: rgba(239, 181, 87, 0.18); }
  .issue-card:hover .card-more::after { transform: translateX(3px); }
}
@media (max-width: 40rem) {
  .issue-cards { padding-inline: var(--s-4); }
  .issue-card { grid-template-columns: minmax(0, 1fr) 1.5rem; row-gap: var(--s-1); margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
  .issue-card p { grid-column: 1 / -1; grid-row: 2; }
  .card-more { grid-column: 2; grid-row: 1; }
}

/* ---------- Home: how I'd weigh a proposal (the safe sidewalk) ---------- */
.weigh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--s-7); align-items: start; }
.weigh-grid .section-head { margin-bottom: var(--s-4); }
.weigh-body { max-width: var(--measure); }
.weigh-body .lede { margin: 0; }
.weigh-body p + p { margin: var(--s-4) 0 0; }
@media (max-width: 52rem) { .weigh-grid { grid-template-columns: 1fr; } }

/* ---------- Home: coming up ---------- */
.forum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.forum-text h2 { margin-bottom: var(--s-4); }
.forum-art .scene { display: block; width: 100%; height: auto; }
.forum-side .notes-card { margin-top: var(--s-5); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0; font: 400 1.0625rem/1.5 var(--sans); }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; }
.notes-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label go" "title go" "sub go";
  gap: var(--s-1) var(--s-5); align-items: center;
  margin-top: var(--s-6); padding: var(--s-5);
  background: var(--pine); color: var(--on-pine); text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.notes-card .label { grid-area: label; color: var(--amber); margin: 0; }
.notes-title { grid-area: title; font: 700 var(--fs-h3)/1.25 var(--serif); color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.notes-sub { grid-area: sub; font: 400 1rem/1.5 var(--sans); color: var(--on-pine-soft); }
.notes-go { grid-area: go; font: 700 1.75rem/1 var(--sans); color: var(--amber); transition: transform 0.15s var(--ease); }
@media (hover: hover) {
  .notes-card:hover { background: var(--pine-mid); }
  .notes-card:hover .notes-go { transform: translateX(4px); }
}
@media (max-width: 52rem) { .forum-grid { grid-template-columns: 1fr; } .forum-art { max-width: 36rem; } }
@media (max-width: 34rem) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: var(--s-3); }
  .notes-card { padding: var(--s-5); }
}

/* ---------- Home: Saturday at Cabina (DATED: comes down at 2 p.m. Sat. Oct. 3) ----------
   The short line above the buttons, and the section after the opening. Both carry
   data-event="cabina"; motion.js puts "ended-cabina" on <html> at the end time. */
html.ended-cabina [data-event="cabina"] { display: none !important; }
.event-line {
  display: grid; gap: 0.15rem; max-width: 30rem; margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4); border-left: 4px solid var(--amber); background: rgba(246, 241, 232, 0.07);
  color: var(--on-pine); text-decoration: none; font: 400 1.0625rem/1.4 var(--sans);
}
.event-line strong { color: var(--white); font-weight: 800; }
.event-line .go { color: var(--amber); font-weight: 750; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.event-line:focus-visible { outline-color: var(--amber); }
@media (hover: hover) { .event-line:hover { background: rgba(246, 241, 232, 0.13); } }
.sat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; }
.saturday h2 { margin-bottom: var(--s-4); }
.saturday .facts { font-size: 1.125rem; }
.saturday .facts dd a { color: inherit; }
.saturday .sat-body { max-width: var(--measure); margin: 0; }
.saturday .note { margin: var(--s-4) 0 0; max-width: var(--measure); }
/* its cream wall is close to the page color, so the drawing gets a pine frame */
.sat-art .scene { display: block; width: 100%; height: auto; box-sizing: border-box; border: 2px solid var(--pine); }
@media (max-width: 52rem) { .sat-grid { grid-template-columns: 1fr; } .sat-art { max-width: 36rem; } }
@media (max-width: 34rem) {
  .saturday .facts { grid-template-columns: 1fr; gap: 0; }
  .saturday .facts dd { margin-bottom: var(--s-3); }
}

/* ---------- Home: let's talk ----------
   On the pine night band, like the inner pages' closing band: amber label, white heading, cream
   text. Every button and link is on the white card, which keeps the ink ring; anything placed on
   the band itself gets the amber ring. */
.talk { background: var(--pine-deep); color: var(--on-pine); }
.talk .label { color: var(--amber); }
.talk :focus-visible { outline-color: var(--amber); }
.talk .talk-card :focus-visible { outline-color: var(--pine-deep); }
.talk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.talk h2 { max-width: 16ch; color: var(--white); }
.talk .lede { margin: var(--s-4) 0 var(--s-4); }
.talk-grid > div:first-child { max-width: var(--measure); }
.talk-card { background: var(--white); color: var(--ink); border: 0; border-top: 5px solid var(--amber); padding: var(--s-5); }
@media (min-width: 40rem) { .talk-card { padding: var(--s-6); } }
.talk-card h3 { font-family: var(--sans); font-weight: 800; font-size: 1.2rem; margin-bottom: var(--s-4); }
.talk-card .button { width: 100%; }
.talk-card .note { margin: var(--s-2) 0 0; }
.talk-card .or { margin: var(--s-5) 0 var(--s-1); font: 400 1rem/1.4 var(--sans); color: var(--ink-soft); }
.talk-card .promise { margin: var(--s-5) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--rule); font: 400 1rem/1.55 var(--sans); }
.talk-card .promise a { font-weight: 650; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.email { font: 700 1.125rem/1.4 var(--sans); overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 2.75rem; }
.copy-button {
  font: 650 0.95rem/1 var(--sans); color: inherit; background: transparent;
  border: 2px solid currentColor; min-height: 2.75rem; padding: 0 0.9rem; cursor: pointer;
}
@media (hover: hover) { .copy-button:hover { background: rgba(20, 38, 28, 0.07); } }
.copy-button[hidden] { display: none; }
.copy-status { font: 400 0.95rem/1.4 var(--sans); }
.copy-status:empty { position: absolute; }
.phone-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; }
.text-link { font: 650 1rem/1 var(--sans); display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Follow on Facebook (Sept. 25): a plain link with a small icon, no embed or Facebook script */
.fb-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.17em; flex: none; }
.talk-card .follow { margin: var(--s-4) 0 0; font: 400 1rem/1.55 var(--sans); color: var(--ink-soft); }
.talk-card .follow a { font-weight: 650; color: var(--pine); display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); }
/* on wide screens the text sits centered against the card */
@media (min-width: 52.01rem) { .talk-grid { align-items: center; } }
@media (max-width: 52rem) { .talk-grid { grid-template-columns: 1fr; } }

/* ---------- Home: yard signs ---------- */
.signs-block { background: var(--paper); }
.signs-street { padding-top: var(--s-4); }
.signs-street + .signs { padding-top: var(--s-7); }
.signs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head body" "art body"; column-gap: var(--s-7); align-items: start; }
.sign-head { grid-area: head; }
.sign-body { grid-area: body; }
.sign-body > p { max-width: var(--measure); }
.sign-art { grid-area: art; margin: var(--s-2) 0 0; box-shadow: var(--shadow-lg); max-width: 34rem; width: 100%; }
.rhythm { font: 900 clamp(2.6rem, 1.6rem + 4.2vw, 4.4rem)/0.95 var(--sans); font-stretch: 78%; letter-spacing: -0.015em; color: var(--pine-deep); margin: 0 0 var(--s-5); }
.rhythm span { display: block; }
.rhythm .caps { text-transform: uppercase; font-size: 0.74em; margin-top: 0.08em; }
.rhythm .coda { font: italic 600 0.44em/1.3 var(--serif); letter-spacing: 0; margin-top: 0.3em; }
.status { font-weight: 650; }
.options-intro { margin-bottom: var(--s-2); }
.options { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-2); }
.options li { position: relative; padding-left: var(--s-6); font: 500 1.075rem/1.45 var(--sans); }
.options li::before { content: ""; position: absolute; left: 0.35rem; top: 0.55rem; width: 0.55rem; height: 0.55rem; background: var(--pine); border-radius: 50%; }
.note.tight { margin-top: var(--s-2); }
.sign-email { margin-top: var(--s-5); }
/* phones: right under the headline come the form button and its note (so the button is on the
   screen a sign link lands on), then the paragraphs and delivery choices, and the sign picture
   last. The visual order only: the source order is unchanged. */
@media (max-width: 52rem) {
  .signs-grid { grid-template-columns: 1fr; grid-template-areas: "head" "body" "art"; }
  .sign-art { margin: var(--s-6) 0 0; }
  .sign-body { display: flex; flex-direction: column; }
  .sign-body > .actions { order: -2; margin-top: 0; }
  .sign-body > #sign-note { order: -1; margin: var(--s-2) 0 var(--s-6); }
}

/* ---------- Home: night falls, then Election Day ---------- */
.election { background: var(--pine-deep); color: var(--on-pine); }
.election-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; padding-block: var(--s-7) var(--section); }
.election .label { color: var(--amber); }
.election h2 { color: var(--white); font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
.election dl { margin: var(--s-5) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); font-family: var(--sans); }
.election dt { font-weight: 800; }
.election dd { margin: 0; color: var(--on-pine-soft); }
.election .ask { margin: var(--s-5) 0 0; font: var(--aside); color: var(--white); }
.calendar { width: 100%; max-width: 300px; justify-self: end; filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.35)); }
@media (max-width: 52rem) { .election-grid { grid-template-columns: 1fr; } .calendar { justify-self: start; max-width: 240px; } }
@media (max-width: 30rem) { .election dl { grid-template-columns: 1fr; gap: 0; } .election dd { margin-bottom: var(--s-3); } }

/* ---------- Inner pages: the page head ---------- */
.page-head { padding-block: var(--section) var(--s-7); border-bottom: 1px solid var(--rule); }
.page-head .wrap > :not(.jump) { max-width: var(--measure); }
.page-head .lede { margin: var(--s-4) 0 0; }
.page-head .source-link { margin: var(--s-4) 0 0; }
.page-head-solo { border-bottom: 0; padding-bottom: var(--section); min-height: 50vh; }
/* Phones and tablets: the dusk street from the home hero runs across the top of the page under the
   header, whole and uncropped, the same way home opens on a phone. Wider screens keep the plain
   head. (Print hides every .skyline.) */
.page-street { display: none; }
@media (max-width: 52rem) {
  .page-head.has-street, .article-head.has-street { padding-top: 0; }
  .page-street { display: block; background: var(--pine-deep); padding-top: var(--s-2); margin-bottom: var(--s-7); }
}

/* ---------- The issues ---------- */
.jump { margin-top: var(--s-6); }
.jump h2.label { font: var(--label); font-stretch: 75%; letter-spacing: 0.03em; margin: 0 0 var(--s-3); }
.jump ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--s-2); counter-reset: jump; }
@media (max-width: 34rem) { .jump ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .jump a { padding-inline: var(--s-3); gap: var(--s-2); font-size: 0.9375rem; } }
@media (max-width: 22.5rem) { .jump ol { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 60.01rem) { .jump ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jump a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 3rem; height: 100%; padding: var(--s-2) var(--s-4);
  background: var(--white); border: 1px solid var(--rule); color: var(--pine-deep);
  font: 700 1rem/1.3 var(--sans); text-decoration: none;
}
.jump a::before {
  counter-increment: jump; content: counter(jump);
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--paper-deep); color: var(--pine);
  font: 800 0.8125rem/1.6rem var(--sans); text-align: center;
}
@media (hover: hover) { .jump a:hover { border-color: var(--pine); } .jump a:hover::before { background: var(--amber); color: var(--pine-deep); } }

.issue { padding-block: var(--section); border-bottom: 1px solid var(--rule); }
.issue:nth-of-type(even) { background: var(--paper-deep); }
.issue-grid { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 38rem); gap: var(--s-5) var(--s-7); align-items: start; }
.issue-grid > h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); }
@media (max-width: 60rem) { .issue-grid { grid-template-columns: minmax(0, 38rem); } }
.vg { position: relative; background: var(--white); border: 1px solid var(--rule); padding: var(--s-6) var(--s-5) var(--s-5); }
.vg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--pine) 0 10px, transparent 10px 16px); opacity: 0.3; }
.vg-label { font: var(--label); font-stretch: 75%; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s-2); }
.vg-q { font: 700 1.125rem/1.45 var(--sans); color: var(--ink); margin: 0 0 var(--s-5); }
.vg-a { margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--amber); }
.vg-a p { margin: 0; line-height: 1.65; }
/* phones: the clipping becomes a white band from edge to edge, so the printed answer gets the
   same width as the text under it */
@media (max-width: 34rem) {
  .vg { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; padding: var(--s-6) var(--gutter) var(--s-5); }
  .vg-a { padding-left: var(--s-3); }
}
/* a short note right after a printed answer, outside it (what an acronym stands for, a later vote) */
.vg-after { margin: var(--s-4) 0 0; line-height: 1.65; }
.more { margin-top: var(--s-6); }
.more h3 { margin: 0 0 var(--s-3); }
.more h4 { font: 800 1.0625rem/1.35 var(--sans); letter-spacing: 0; margin: var(--s-5) 0 var(--s-2); }
.more p { line-height: 1.65; }
.more > :last-child { margin-bottom: 0; }
.needs { margin: 0 0 var(--s-5); padding-left: var(--s-5); }
.needs li { line-height: 1.55; }
.needs li + li { margin-top: var(--s-2); }
.needs li::marker { color: var(--amber-deep); }
.key-question { font: italic 500 1.1875rem/1.55 var(--serif); padding-left: var(--s-4); border-left: 3px solid var(--pine); }
.not-asked { display: inline-block; font: var(--label); font-stretch: 75%; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); border: 1px dashed var(--rule-strong); padding: var(--s-1) var(--s-3); margin: 0; }
.not-asked + .more { margin-top: var(--s-4); }
.related { margin: var(--s-5) 0 0; }
/* source links at the end of an issue's own view: the page head's link style, set close together */
.more .source-link { margin: var(--s-4) 0 0; line-height: 1.3; }
.more .source-link + .source-link { margin-top: 0; }
.to-list { margin: var(--s-5) 0 0; }
.to-list a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; font: 700 1rem/1.3 var(--sans); color: var(--pine); }
.to-list a::before { content: "↑" / ""; }

/* the tax statement: who decides each part */
.statement { margin: var(--s-6) 0 0; background: var(--white); color: var(--ink); font-family: var(--sans); padding: var(--s-5); box-shadow: var(--shadow-sm); border: 1px solid var(--rule); position: relative; }
.statement::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--pine) 0 10px, transparent 10px 16px); opacity: 0.25; }
.statement-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-4); border-bottom: 2px solid var(--ink); padding-bottom: var(--s-2); margin-bottom: var(--s-1); }
.statement-head strong { font: 800 0.95rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.statement-head span { font: 400 1rem/1.3 var(--sans); color: var(--ink-soft); }
.statement table { width: 100%; border-collapse: collapse; }
.statement caption { text-align: left; }
.statement th, .statement td { text-align: left; font-size: 1rem; line-height: 1.35; padding: 0.8rem 0.5rem; border-bottom: 1px dashed var(--rule-strong); vertical-align: top; }
.statement th { font-weight: 750; width: 46%; }
.statement td { color: var(--ink-soft); }
.statement thead th { font: 800 0.875rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule-strong); padding-block: 0.7rem 0.5rem; }
.statement tr.city th, .statement tr.city td { color: var(--ink); border-bottom-color: var(--ink); background: rgba(239, 181, 87, 0.55); }
.statement tr.city td strong { font-weight: 800; }
.statement .illustration { margin: var(--s-3) 0 0; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 30rem) {
  .statement th, .statement td { padding: 0.7rem 0.35rem; font-size: 0.98rem; }
  .statement thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Council notes: a dated list of entries ---------- */
.entry { padding-block: var(--section); border-bottom: 1px solid var(--rule); }
.entry:nth-child(even) { background: var(--paper-deep); }
.entry-head { max-width: 44rem; margin-bottom: var(--s-6); }
.entry-date { font: var(--label); font-stretch: 75%; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s-2); }
.entry-date time { display: inline-flex; align-items: center; gap: var(--s-2); }
.entry-date time::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber); }
.entry-text { max-width: var(--measure); }
.entry-text p { line-height: 1.65; }
.entry-text > :last-child { margin-bottom: 0; }
.entry .kicker { font: var(--aside); color: var(--pine); }
.entry-wide .scene-row { max-width: 60rem; }
.entry-wide .entry-text { margin-top: var(--s-6); }
.entry-body { display: grid; gap: var(--s-6); }
@media (min-width: 64rem) {
  .entry-split .entry-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
}
.entry-art { margin: 0; }
.scene { display: block; width: 100%; height: auto; }
.scene-box { line-height: 0; }
/* the caption under a drawing: every line always shows. With motion, the line the drawing
   is on is marked, and the others step back a shade (still full contrast). */
.beats { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: beat; }
.beats li { position: relative; padding-left: 2rem; font: 500 1rem/1.45 var(--sans); color: var(--ink); }
.beats li::before {
  counter-increment: beat; content: counter(beat);
  position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--pine); color: var(--paper); font: 800 0.75rem/1.35rem var(--sans); text-align: center;
}

/* ---------- Inner pages: the closing band, under the night street ---------- */
.next-steps { background: var(--pine-deep); color: var(--on-pine); }
.next-steps .skyline { padding-top: var(--s-6); }
.next-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-block: var(--s-7) var(--section); }
.next-grid > div { flex: 1 1 22rem; }
.next-steps h2 { max-width: 22ch; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); color: var(--white); }
.next-steps .actions { margin: 0; }
.cta-note { font: 400 1rem/1.5 var(--sans); color: var(--on-pine-soft); margin: var(--s-4) 0 0; max-width: var(--measure); }
.next-steps a:not(.button) { color: var(--on-pine); }

/* ---------- My story ---------- */
.article-head { padding-block: var(--section) 0; }
.article-head .wrap, .article .wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.article-head .lede { margin: var(--s-4) 0 0; color: var(--ink); }
.byline { font: 500 1.0625rem/1.4 var(--sans); color: var(--ink-soft); margin: var(--s-4) 0 0; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.article { padding-block: var(--s-6) var(--section); }
.article p { font-size: 1.1875rem; line-height: 1.7; }
.article h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem); margin: var(--s-7) 0 var(--s-4); }
.article .first { font-size: var(--fs-lede); line-height: 1.55; }
.article figure { margin: var(--s-6) 0; }
.article figure img { width: 100%; max-width: 30rem; margin-inline: auto; }
.article figcaption { font: 400 1rem/1.4 var(--sans); color: var(--ink-soft); text-align: center; margin-top: var(--s-3); }
.article .closing { font-size: 1.3rem; line-height: 1.6; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.article .pull { margin: var(--s-7) 0; padding-block: var(--s-5); border-block: 3px solid var(--amber); }
.pull blockquote { margin: 0; }
.article .pull p { margin: 0; font: italic 500 clamp(1.4rem, 1.15rem + 1vw, 1.875rem)/1.4 var(--serif); color: var(--pine-deep); text-wrap: balance; }

/* ---------- Privacy ---------- */
.plain .wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.plain h1 { margin-bottom: 0; }
.plain h2 { font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.8rem); margin: var(--s-7) 0 var(--s-3); }
.plain .article p, .plain .summary p { font-size: var(--fs-body); line-height: 1.65; }
.plain .summary { background: var(--white); border: 1px solid var(--rule); border-left: 5px solid var(--amber); padding: var(--s-5); margin: var(--s-6) 0 0; }
.plain .summary p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--pine-deep); color: var(--on-pine-soft); border-top: 1px solid var(--rule-light); padding-block: var(--s-7) var(--s-6); font: 400 1rem/1.55 var(--sans); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule-light); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer ul a { color: var(--on-pine); display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 650; }
.site-footer .legal { padding-top: var(--s-5); display: grid; gap: var(--s-2); }
.site-footer .legal p { margin: 0; }
.site-footer .paid { color: var(--on-pine); }
.site-footer a { color: var(--on-pine); }
.site-footer .legal a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); }

/* ---------- Motion: once, gentle, and off when people ask for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-rule { animation: draw 0.9s 0.15s var(--ease) both; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Print: every page prints as plain text on white ---------- */
@media print {
  .site-header, .site-nav, .menu-toggle, .actions, .copy-button, .skip-link, .skyline, .signs-street, .forum-art, .sat-art, .scene-row, .entry-art .scene-box, .calendar, .notes-card, .to-list, .jump { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  *, *::before { color: #000 !important; box-shadow: none !important; }
  .hero, .talk, .election, .next-steps, .site-footer, .issue, .entry, .on-paper-deep { background: #fff !important; }
  .site-footer .footer-top { display: none; }
  a { text-decoration: none; }
}