html, body { margin: 0; padding: 0; background: var(--page); }
  body { font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text-1); -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { color: var(--text-1); }
  input:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  h1, h2 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-weight: 600; }
  h1 { font-weight: 700; }

  :root {
    color-scheme: light dark;
    --page: #F7F8F8; --surface: #FFFFFF; --band: #EDEFEF; --subtle: #F2F4F3; --hover: #E4E7E6;
    --rule: #DADDDC; --rule-strong: #BFC3C2;
    --text-1: #191C1E; --text-2: #454A4C; --text-3: #52585B;
    --accent: #1F2225; --accent-hover: #0F1113; --link: #6E4708;
    --gold: #E9A945; --gold-ink: #7A4E0C;
    --on-accent: #FFFFFF; --brand-bg: #E9A945; --brand-fg: #1F2225;
    --nav-bg: #1F2225; --nav-strip: #16181A; --nav-fg: #FFFFFF; --nav-fg-dim: #B7BCBE; --nav-rule: rgba(255,255,255,0.16); --nav-hover: rgba(255,255,255,0.10);
  }

  /* Automatic system theme. Pure CSS: the same token names, redefined for a dark OS
     preference, so every var() the pages already use resolves to a dark value with no
     toggle, script, cookie, or stored preference. The light palette above stays the
     default; this block wins only under prefers-color-scheme: dark, and the browser
     re-evaluates it live when the OS preference changes, with no reload. Keep this token
     set identical to :root — every token above appears here exactly once. */
  @media (prefers-color-scheme: dark) {
    :root {
      --page: #131516; --surface: #1B1E1F; --band: #202425; --subtle: #191C1D; --hover: #262A2B;
      --rule: #2C3132; --rule-strong: #464C4D;
      --text-1: #DEE1E1; --text-2: #AEB3B4; --text-3: #9EA3A5;
      --accent: #E7E9E9; --accent-hover: #FFFFFF; --link: #EFC079;
      --gold: #E9A945; --gold-ink: #EDBE73;
      --on-accent: #131516; --brand-bg: #E9A945; --brand-fg: #1F2225;
      --nav-bg: #0E1011; --nav-strip: #080909; --nav-fg: #FFFFFF; --nav-fg-dim: #A7ADAD; --nav-rule: rgba(255,255,255,0.14); --nav-hover: rgba(255,255,255,0.09);
    }
  }
  html, body { background: var(--page); color: var(--text-1); }

  @media (max-width: 760px) {
    .page-pad { padding-left: 18px !important; padding-right: 18px !important; padding-top: 32px !important; }
    .hdr-pad { padding-left: 18px !important; padding-right: 18px !important; }
    .h-xl { font-size: 29px !important; line-height: 1.2 !important; }
    .h-lg { font-size: 26px !important; }
    .card-pad { padding: 20px !important; }
    .sig-head { display: none !important; }
    .sig-row { display: block !important; padding: 16px 18px !important; }
    .sig-row .sig-prec { text-align: left !important; display: inline-block; margin-top: 8px; }
    .sig-row .sig-prec:before { content: "Precinct "; color: var(--text-3); }
    .sig-row .sig-name { display: block; margin-bottom: 8px; font-size: 15px !important; }
    .sig-foot { flex-direction: column !important; align-items: stretch !important; }
    .sig-foot > div { display: grid !important; grid-template-columns: 1fr 1fr; }
    .quote-lg { font-size: 17px !important; }
  }
  @media (max-width: 480px) {
    /* The record of official action: 130px date column + text is too tight below ~480px,
       so stack the date above its description at full width. */
    .chron-row { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
    .chron-row > :first-child { color: var(--text-3); }
  }
  @media (max-width: 420px) {
    .h-xl { font-size: 25px !important; }
    .h-lg { font-size: 23px !important; }
  }