/* ==========================================================================
   Save Surrey Ridge — design system
   Palette: clean white ground, fresh forest green accent, slate-navy type.
   Light, airy, driven — Colorado sky and land, credible and forward.
   ========================================================================== */

:root {
  /* --- core palette --- */
  --ink:        #1a2028;
  --ink-2:      #252c38;
  --bark:       #2d3a48;
  --stone:      #5a6876;
  --sage:       #5a8c6e;
  --sage-pale:  #e8f3ed;
  --sand:       #d4622a;
  --sand-lt:    #f09040;
  --sand-pale:  #fef0e4;
  --rust:       #b84232;
  --rust-pale:  #fce9e5;
  --sky:        #1670a0;
  --sky-pale:   #e2f0f8;
  --cream:      #f2f6f4;
  --paper:      #ffffff;
  --white:      #ffffff;

  /* --- semantic --- */
  --bg:           var(--paper);
  --bg-alt:       var(--cream);
  --text:         var(--ink);
  --text-muted:   var(--stone);
  --rule:         #dde5e1;
  --rule-strong:  #c4d0cb;
  --accent:       #1e7048;
  --accent-deep:  #155537;

  /* --- type --- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- vertical rhythm --- */
  --flow: 2rem;
  --s1: .5rem;
  --s2: .75rem;
  --s3: 1.25rem;
  --s5: 3rem;

  /* --- rhythm --- */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --wrap-mid: 920px;
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* --- elevation --- */
  --sh-sm: 0 1px 2px rgba(19,28,24,.06), 0 2px 6px rgba(19,28,24,.05);
  --sh:    0 2px 6px rgba(19,28,24,.06), 0 10px 28px rgba(19,28,24,.08);
  --sh-lg: 0 4px 12px rgba(19,28,24,.08), 0 24px 56px rgba(19,28,24,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* The UA sheet's [hidden]{display:none} loses to any later author rule that
   sets `display` at equal specificity, which silently revealed the generator's
   Back / Generate buttons and the whole letter action row on first load.
   This has to win outright. */
[hidden] { display: none !important; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rust); }

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

::selection { background: var(--sand-pale); color: var(--ink); }

/* ---------- narrow-viewport safety net ----------
   Long unbreakable strings are the usual cause of horizontal overflow on
   small phones: a 48-character hostname, a filename, an email address. These
   let them wrap rather than push the page wide. Verified longest tokens on
   this site are a 48-char portal hostname and a 31-char email. */
p, li, td, th, dd, dt, figcaption, blockquote, summary, .lede, .hint {
  overflow-wrap: break-word;
}
a[href^="http"], a[href^="mailto"], code, .official__contact a {
  overflow-wrap: anywhere;
}

/* Nothing should ever force the document wider than the screen. Tables are
   the deliberate exception and are already wrapped in .table-scroll. */


/* Very small phones, 320px class. Single column everywhere. */


/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}

h1 { font-size: clamp(2.35rem, 6vw, 4rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4, .h4-size { font-size: 1.08rem; font-family: var(--f-body); font-weight: 650; letter-spacing: -0.005em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.55;
  color: var(--bark);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: .84rem;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--s1);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
  flex: none;
  border-radius: 2px;
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: var(--sand-lt); }
.eyebrow--light::before { background: var(--sand-lt); }

/* ch is the width of "0", and Inter's zero is wider than its average
   character, so 68ch was delivering 81 characters a line at 1280px. Comfortable
   reading is 60 to 75. 58ch measures out at about 69. */
.prose { max-width: 58ch; }
/* .issue sat at 78ch beside a 68ch .prose on the same page, giving every page
   two right edges 111px apart. */
.issue, .do-list { max-width: 68ch; }
.prose h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.prose h3 { margin-top: var(--s5); margin-bottom: var(--s2); }
/* A label belongs to the heading under it, not to the section above it. This
   gap was 60px inside .prose and 16px inside .section-head, so the same
   component sat three different ways on one page. */
.prose .eyebrow + h2, .prose .eyebrow + h3,
.stack .eyebrow + h2, .section-head .eyebrow + h2 { margin-top: 0; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--accent); }

.muted { color: var(--text-muted); }
.small { font-size: .9rem; }
.tiny  { font-size: .8rem; line-height: 1.5; }
.center { text-align: center; }
.balance { text-wrap: balance; }

.numeral {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--mid { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

section { position: relative; }

.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--cream { background: var(--bg-alt); }
.band--dark { background: var(--ink); color: var(--sage-pale); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--paper); }
.band--dark .lede { color: var(--sage-pale); }
.band--dark a { color: var(--sand-lt); }
.band--sand { background: linear-gradient(170deg, var(--sand-pale), #f9efdb); }

/* the background already changes; a hairline on top reads as an artefact */

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--sticky > :first-child { position: sticky; top: 6.5rem; }
}

.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 20px rgba(19,28,24,.06);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.5rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink);
  /* The menu button is flex: none at its full 44px tap target, so the brand
     is what gives way on a narrow screen rather than pushing it off the edge. */
  flex: 0 1 auto; min-width: 0;
}
.brand__text { min-width: 0; }
.brand__name, .brand__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--f-display); font-weight: 650;
  font-size: 1.14rem; letter-spacing: -0.025em;
}
.brand__sub {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; margin-top: .18rem;
}
/* "Unincorporated Douglas County" is long, and at .15em tracking the bumped
   font size pushed the masthead wider than a 375px viewport, shoving the menu
   button off screen. Tighten the tracking on narrow screens instead of giving
   back the legibility. */
@media (max-width: 460px) {
  .brand__sub { letter-spacing: .07em; }
}
/* At 375px even .07em left it 17px over and it truncated to
   "Unincorporated Douglas Co...", which reads as a broken layout rather than
   a design. Tighten once more so the whole phrase fits. */
@media (max-width: 400px) {
  .brand__sub { letter-spacing: .03em; font-size: .66rem; }
}

.nav__links { display: none; align-items: center; gap: .3rem; }
@media (min-width: 1000px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  padding: .55rem .78rem;
  font-size: .93rem; font-weight: 520;
  color: var(--bark); text-decoration: none;
  border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { background: var(--sage-pale); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .22rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* .btn is declared later in this file, so these need matching specificity
   to win — otherwise the CTA stays visible and overflows narrow viewports. */
.nav /* ---------- dropdown ---------- */
/* Seven top-level items overflowed on small laptops, so the issue pages are
   grouped. Uses a real <button> plus JS for keyboard and touch; hover alone
   is unusable on touch and invisible to keyboard users. */
.nav__group { position: relative; }

.nav__trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .78rem;
  font-family: var(--f-body); font-size: .93rem; font-weight: 520;
  color: var(--bark); background: none; border: 0; cursor: pointer;
  border-radius: var(--r-sm); white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__trigger:hover { background: var(--sage-pale); color: var(--ink); }
.nav__trigger svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.nav__trigger[aria-expanded="true"] { background: var(--sage-pale); color: var(--ink); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__group.is-current > .nav__trigger { color: var(--ink); font-weight: 650; }

.nav__menu {
  position: absolute; top: calc(100% + .35rem); left: 0; z-index: 95;
  min-width: 232px; padding: .4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--sh);
  display: none;
}
.nav__menu.is-open { display: block; }
.nav__menu a {
  display: block; padding: .6rem .7rem;
  font-size: .92rem; font-weight: 520; color: var(--bark);
  text-decoration: none; border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--sage-pale); color: var(--ink); }
.nav__menu a[aria-current="page"] { color: var(--accent-deep); font-weight: 640; }
.nav__menu a span { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 400; margin-top: .1rem; }

/* drawer sub-group */
.nav__drawer .drawer-group { margin: .4rem 0 .2rem; }
.nav__drawer .drawer-label {
  display: block; padding: .5rem .2rem .25rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 0;
}
.nav__drawer .drawer-group a { padding-left: .9rem; }

/* .btn sets display:inline-flex further down this file at equal specificity,
   so a bare .nav__cta hide rule loses on source order and the desktop CTA
   renders on phones next to the hamburger. Match .btn's specificity. */
.nav .nav__cta { display: none; }
@media (min-width: 1000px) { .nav .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
}
@media (min-width: 1000px) { .nav__toggle { display: none; } }
.nav__toggle span {
  display: block; width: 19px; height: 1.5px; background: currentColor;
  position: relative; transition: background .2s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px;
  background: currentColor; transition: transform .25s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.nav__drawer {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: .75rem var(--gut) 1.5rem;
}
.nav__drawer.is-open { display: block; }
@media (min-width: 1000px) { .nav__drawer { display: none !important; } }
.nav__drawer a {
  display: block; padding: .8rem .2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--bark); text-decoration: none; font-weight: 550;
}
.nav__drawer a[aria-current="page"] { color: var(--accent-deep); }
.nav__drawer .btn { margin-top: 1.1rem; width: 100%; justify-content: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.45rem;
  font-family: var(--f-body); font-size: .95rem; font-weight: 620;
  line-height: 1.2; letter-spacing: -0.005em;
  border-radius: 100px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--ink-2); color: var(--paper); box-shadow: var(--sh); }

.btn--accent { background: var(--accent); color: #2a1a06; box-shadow: var(--sh-sm); }
.btn--accent:hover { background: var(--sand-lt); color: #2a1a06; box-shadow: var(--sh); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--white); color: var(--ink); }

.btn--onDark { background: transparent; color: var(--paper); border-color: rgba(247,243,234,.35); }
.btn--onDark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* .btn--sm rendered 36px tall, under the 44px a thumb needs. It keeps the
   smaller type but gets the height back on touch screens, where "Add another
   person at this address" is a button people actually hit. */
.btn--sm { padding: .55rem 1rem; font-size: .85rem; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }
.btn--lg { padding: 1.02rem 1.9rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Pending donate button: visibly present so people know it is coming, but
   inert and announced as disabled. Kept legible rather than ghosted at .45,
   which was too faint to read. */
.btn.is-pending {
  opacity: 1;
  background: var(--sand-pale);
  color: var(--accent-deep);
  border-color: var(--sand-lt);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.btn.is-pending:hover { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn-row--center { justify-content: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 620; font-size: .94rem; text-decoration: none;
  color: var(--accent-deep);
}
.arrow-link svg { transition: transform .2s var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex; align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,16,13,.78) 0%, rgba(10,16,13,.38) 35%, rgba(10,16,13,.06) 62%, rgba(10,16,13,.22) 100%),
    linear-gradient(105deg, rgba(10,16,13,.38), transparent 55%);
}
.hero__inner { position: relative; width: 100%; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero__content { max-width: 40ch; }
.hero h1 { color: var(--paper); text-wrap: balance; }
.hero h1 em {
  font-style: normal;
  color: var(--sand-lt);
}
.hero .lede { color: #e8e3d6; max-width: 46ch; }
.hero .btn-row, .phero .btn-row { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.hero__stats {
  display: grid; gap: 1.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247,243,234,.22);
  max-width: 760px;
}
.hero__stat b {
  display: block;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--sand-lt);
  font-variant-numeric: tabular-nums;
}
.hero__stat span {
  display: block; margin-top: .45rem;
  font-size: .82rem; line-height: 1.35; color: #cdd4c8;
}

.hero__credit {
  position: absolute; right: .75rem; bottom: .5rem;
  font-size: .62rem; color: rgba(247,243,234,.5);
  letter-spacing: .02em; z-index: 2;
}

/* Page hero (interior pages) */
.phero {
  position: relative; color: var(--ink);
  background: linear-gradient(135deg, var(--sage-pale) 0%, var(--paper) 65%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
}
.phero__media { display: none; }
.phero__inner { position: relative; }
.phero h1 { color: var(--ink); max-width: 22ch; text-wrap: balance; }
.phero .lede { color: var(--bark); max-width: 56ch; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-size: .78rem; margin-bottom: 1.4rem; color: var(--stone);
}
.crumbs a { color: var(--bark); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .45; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }

a.card, .card--link { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  border-color: var(--rule-strong);
  color: inherit;
}

.card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--sage-pale); color: var(--bark);
}
.card__icon svg { width: 23px; height: 23px; }
.card__icon--rust { background: var(--rust-pale); color: var(--rust); }
.card__icon--sand { background: var(--sand-pale); color: var(--accent-deep); }
.card__icon--sky  { background: var(--sky-pale);  color: var(--sky); }
.card__icon--sage { background: var(--sage-pale); color: #4c6448; }

.card__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.1rem; font-size: .88rem; font-weight: 640; color: var(--accent-deep);
}
.card__more svg { transition: transform .2s var(--ease); }
a.card:hover .card__more svg { transform: translateX(3px); }

/* Stat cards */
.stat {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.5rem 1.4rem;
}
.stat b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: .6rem; font-size: .88rem; line-height: 1.45; color: var(--text-muted); }
.stat--rust b { color: var(--rust); }
.stat--sand b { color: var(--accent-deep); }
.stat--sky  b { color: var(--sky); }

/* Figure / photo */
.figure { margin: 0; }
.figure img { border-radius: var(--r-lg); width: 100%; box-shadow: var(--sh); }
.figure figcaption {
  margin-top: .7rem; font-size: .8rem; line-height: 1.5; color: var(--text-muted);
}
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.figure--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.figure--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Callout / pull */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--sand-pale);
  padding: 1.35rem 1.5rem;
  border-radius: 0 var(--r) var(--r) 0;
  margin: var(--flow) 0;
}
.callout--rust { border-left-color: var(--rust); background: var(--rust-pale); }
.callout--sky  { border-left-color: var(--sky);  background: var(--sky-pale); }
.callout--sage { border-left-color: var(--sage); background: var(--sage-pale); }
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  font-weight: 680; font-size: .84rem; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .5rem; color: var(--bark);
}

/* A pull quote used to start at 1.35rem, which put it above the 1.25rem h3 it
   sat under. The quote outshouted the section's own heading. It reads as a
   quote because of the display face and the short measure, not the size, so
   the scale now stays under the h3 on a phone and under the h2 everywhere. */
.pull {
  font-family: var(--f-display); font-size: clamp(1.18rem, 2.2vw, 1.6rem);
  line-height: 1.32; letter-spacing: -0.02em; color: var(--ink);
  border: 0; margin: var(--flow) 0; padding: 0;
}
.pull cite {
  display: block; margin-top: 1rem; font-family: var(--f-body);
  font-size: .86rem; font-style: normal; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0;
}

/* Badge / pill */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .75rem; border-radius: 100px;
  font-size: .74rem; font-weight: 680; letter-spacing: .05em; text-transform: uppercase;
  background: var(--sage-pale); color: var(--bark);
}
.badge--rust { background: var(--rust-pale); color: var(--rust); }
.badge--sand { background: var(--sand-pale); color: var(--accent-deep); }
.badge--sky  { background: var(--sky-pale);  color: var(--sky); }
.badge--live { background: var(--rust); color: #fff; }
.badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ==========================================================================
   Alert bar
   ========================================================================== */

.alertbar {
  background: #f59c2a;
  color: #1a2028;
  font-size: .87rem;
  border-bottom: 2px solid #e68c18;
}
.alertbar__inner {
  display: flex; align-items: center; gap: .85rem;
  padding-block: .7rem; flex-wrap: wrap;
}
.alertbar b { color: #1a2028; font-weight: 760; }
.alertbar a { color: #1a2028; font-weight: 680; text-underline-offset: .2em; text-decoration: underline; }
.alertbar a:hover { color: var(--rust); text-decoration: none; }

/* On a 375px screen the full three-sentence bar plus the sticky header ate
   36% of the viewport, pushing both hero CTAs and all four stats below the
   fold. Phones get the headline and the link; the detail is desktop only. */
@media (max-width: 700px) {
  .alertbar__more { display: none; }
  .alertbar { font-size: .8rem; }
  .alertbar__inner { padding-block: .5rem; gap: .35rem .6rem; }
  .alertbar .badge { display: none; }
  .hero { min-height: auto; }
  .hero__inner { padding-block: 1.5rem 1.75rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero .lede { font-size: 1.02rem; line-height: 1.5; }
  .hero .btn-row { margin-top: 1.25rem; }
  .hero__stats { margin-top: 1.5rem; padding-top: 1.1rem; gap: 1rem 1.5rem; }
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline { position: relative; padding-left: 2.1rem; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: .55rem; bottom: .55rem;
  width: 2px; background: linear-gradient(var(--sand), var(--sage-pale));
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 2.2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -2.1rem; top: .42rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--sage);
}
.tl-item--done::before { background: var(--sage); border-color: var(--sage); }
.tl-item--now::before {
  background: var(--rust); border-color: var(--rust);
  box-shadow: 0 0 0 5px var(--rust-pale);
}
.tl-item--next::before { border-color: var(--sand); background: var(--paper); }
.tl-item__date {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: .3rem;
}
.tl-item h3 { font-size: 1.16rem; margin-bottom: .4rem; }
.tl-item p { font-size: .95rem; color: var(--bark); margin-bottom: 0; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.acc { border-top: 1px solid var(--rule); }
.acc details {
  border-bottom: 1px solid var(--rule);
}
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem .25rem;
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink);
  transition: color .18s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--accent-deep); }
.acc summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: .22rem;
  background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat;
  mask: var(--chev) center / contain no-repeat;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: rotate(180deg); }
.acc details > div { padding: 0 .25rem 1.4rem; max-width: 70ch; color: var(--bark); }
.acc details > div > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 1.15rem; }
.field:last-child { margin-bottom: 0; }

.label {
  display: block; margin-bottom: .4rem;
  font-size: .87rem; font-weight: 640; color: var(--bark);
  letter-spacing: -0.003em;
}
.label .req { color: var(--rust); font-weight: 700; }
.hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  padding: .72rem .9rem;
  /* 16px minimum, or mobile Safari zooms the viewport on focus and never
     zooms back. Tighten again once there is room for it. */
  font-family: var(--f-body); font-size: 1rem; line-height: 1.5;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #8a8274; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,135,60,.16);
}
.input[aria-invalid="true"] {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(171,69,38,.12);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356655b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 17px;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field-row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
  .field-row--3 { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* Choice chips (checkbox / radio cards) */
.choices { display: grid; gap: .7rem; }
.choices--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.choice {
  position: relative;
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .95rem 1.05rem;
  background: var(--white);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.choice:hover { border-color: var(--sage); background: #fdfcf8; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.choice__box {
  flex: none; width: 21px; height: 21px; margin-top: .12rem;
  border: 2px solid var(--rule-strong); border-radius: 6px;
  background: var(--white);
  display: grid; place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.choice input[type="radio"] ~ .choice__box { border-radius: 50%; }
.choice__box::after {
  content: ""; width: 11px; height: 11px;
  background: var(--paper);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  transform: scale(0); transition: transform .18s var(--ease);
}
.choice input:checked ~ .choice__box { background: var(--accent); border-color: var(--accent); }
.choice input:checked ~ .choice__box::after { transform: scale(1); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: #fffaf2;
  box-shadow: 0 0 0 2px rgba(200,135,60,.12);
}
.choice input:focus-visible ~ .choice__box { outline: 3px solid var(--sky); outline-offset: 2px; }

.choice__body { min-width: 0; }
.choice__title { display: block; font-weight: 630; font-size: .95rem; line-height: 1.35; color: var(--ink); }
.choice__desc  { display: block; font-size: .82rem; line-height: 1.45; color: var(--text-muted); margin-top: .22rem; }
.choice__meta  { display: block; font-size: .74rem; color: var(--text-muted); margin-top: .3rem; font-family: var(--f-mono); }

/* ==========================================================================
   Letter generator
   ========================================================================== */

.gen { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.gen__form, .gen__out { min-width: 0; }
.gen__nav .btn { white-space: normal; }
@media (min-width: 1040px) {
  .gen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .gen__out { position: sticky; top: 6rem; }
}

.gen__panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.steps {
  display: flex; align-items: center; gap: .3rem;
  padding: .85rem 1.1rem;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.step {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; border-radius: 100px;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.step:hover { background: var(--sage-pale); color: var(--bark); }
.step__n {
  flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
  background: var(--rule); color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.step.is-active { background: var(--ink); color: var(--paper); }
.step.is-active .step__n { background: var(--sand-lt); color: var(--ink); }
.step.is-done .step__n { background: var(--sage); color: #fff; }
.step__sep { flex: none; width: 10px; height: 1px; background: var(--rule-strong); }

/* Links inside the dark hero and CTA bands inherited the light-mode link
   colour, which measured 2.95:1 against the ink background. The pale sand
   reads at 9.47:1 there. */
.hero a:not(.btn), .cta a:not(.btn) { color: var(--sand-lt); }
.hero a:not(.btn):hover, .cta a:not(.btn):hover { color: var(--paper); }
.phero a:not(.btn) { color: var(--accent); }
.phero a:not(.btn):hover { color: var(--accent-deep); }

/* On a phone the four labelled steps ran to 514px inside a 333px rail, so
   step 4 sat off screen behind a horizontal scroll nobody would find. Collapse
   the inactive steps to their numbers and keep the label on the one you are
   actually on. The text stays in the DOM for screen readers. */
@media (max-width: 560px) {
  .steps { gap: .15rem; justify-content: space-between; }
  .step { font-size: 0; gap: 0; padding: .35rem .45rem; }
  .step.is-active { font-size: .82rem; gap: .45rem; padding: .4rem .7rem; }
  .step__sep { width: 6px; }
}

.gen__body { padding: clamp(1.3rem, 3vw, 1.9rem); }

.pane { display: none; animation: fadeIn .28s var(--ease); }
.pane.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pane__head { margin-bottom: 1.4rem; }
.pane__head h3 { margin-bottom: .35rem; font-size: 1.35rem; }
.pane__head p { font-size: .92rem; color: var(--text-muted); margin-bottom: 0; }

.gen__nav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.1rem clamp(1.3rem, 3vw, 1.9rem);
  border-top: 1px solid var(--rule);
  background: #fdfcf8;
}
.gen__nav .spacer { flex: 1; }

/* Output preview */
.letter {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.letter__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1.1rem;
  background: var(--ink); color: var(--sage-pale);
  flex-wrap: wrap;
}
.letter__bar h3 { margin: 0; font-size: .95rem; color: var(--paper); font-family: var(--f-body); font-weight: 640; }
.letter__tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.letter__tab {
  padding: .32rem .7rem; border-radius: 100px; border: 1px solid rgba(247,243,234,.22);
  background: none; color: var(--sage-pale); font-size: .76rem; font-weight: 600;
  cursor: pointer; font-family: var(--f-body); white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.letter__tab:hover { background: rgba(247,243,234,.12); color: var(--paper); }
.letter__tab.is-active { background: var(--sand-lt); color: var(--ink); border-color: var(--sand-lt); }

.letter__meta {
  padding: .7rem 1.2rem; background: var(--cream);
  border-bottom: 1px solid var(--rule);
  font-size: .78rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
}
.letter__meta b { color: var(--bark); font-weight: 640; }

.letter__body {
  padding: clamp(1.2rem, 3vw, 2rem);
  font-family: var(--f-body);
  font-size: .93rem; line-height: 1.72;
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--ink);
  max-height: 60vh; overflow-y: auto;
  flex: 1;
  tab-size: 2;
}
.letter__body:focus { outline: none; }
.letter__body[contenteditable="true"] { background: #fffefb; }

.letter__empty {
  padding: 3rem 1.5rem; text-align: center; color: var(--text-muted);
}
.letter__empty svg { width: 42px; height: 42px; margin: 0 auto 1rem; opacity: .35; }

.letter__actions {
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: 1rem clamp(1.2rem, 3vw, 1.6rem);
  border-top: 1px solid var(--rule);
  background: #fdfcf8;
}

.wordcount {
  margin-left: auto; align-self: center;
  font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%);
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.3rem; border-radius: 100px;
  font-size: .88rem; font-weight: 600; box-shadow: var(--sh-lg);
  z-index: 300; transition: transform .35s var(--ease); pointer-events: none;
  max-width: calc(100vw - 2rem); text-align: center;
}
.toast.is-up { transform: translate(-50%, 0); }

/* Recipient summary chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 100px;
  background: var(--sage-pale); color: var(--bark);
  font-size: .83rem; font-weight: 600;
}

/* Priority ordering list */
.rank { display: grid; gap: .5rem; margin-top: 1rem; counter-reset: rank; }
.rank__item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem;
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: var(--r-sm); font-size: .9rem; font-weight: 560;
}
.rank__item::before {
  counter-increment: rank; content: counter(rank);
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
}
.rank__move { margin-left: auto; display: flex; gap: .25rem; }
.rank__btn {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); background: var(--white);
  border-radius: var(--r-sm); cursor: pointer; color: var(--bark);
}
.rank__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rank__btn[disabled] { opacity: .3; cursor: default; }
.rank__btn svg { width: 13px; height: 13px; }

/* ==========================================================================
   Officials directory
   ========================================================================== */

.official {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.05rem 0; border-bottom: 1px solid var(--rule);
}
.official:last-child { border-bottom: 0; }
.official__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sage-pale); color: var(--bark);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 650; font-size: .95rem;
}
.official__body { min-width: 0; flex: 1; }
/* Both are <span> in the generated markup, so they need blockifying or the
   name and role run together on one line and margin-top is ignored. */
.official__name { display: block; font-weight: 650; font-size: .98rem; line-height: 1.35; color: var(--ink); }
.official__role { display: block; font-size: .84rem; line-height: 1.4; color: var(--text-muted); margin-top: .15rem; }
.official__contact {
  margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .82rem;
}
.official__contact a { font-family: var(--f-mono); font-size: .78rem; word-break: break-all; }

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gallery img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--r); transition: transform .3s var(--ease), filter .3s var(--ease);
}
.gallery a:hover img { transform: scale(1.02); filter: brightness(1.05); }
.gallery--feature > :first-child { grid-column: span 2; grid-row: span 2; }
.gallery--feature > :first-child img { aspect-ratio: 1/1; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--flow) 0; }
table.data {
  width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 540px;
}
table.data th, table.data td {
  text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data th {
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted); background: var(--cream);
  border-bottom: 1px solid var(--rule-strong);
}
table.data tbody tr:hover { background: #fdfcf8; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a5c3e 0%, #0f3d28 100%);
  color: var(--paper);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.cta__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(15,30,20,.6), rgba(10,22,15,.82));
}
.cta__inner { position: relative; text-align: center; max-width: 660px; margin-inline: auto; }
.cta h2 { color: var(--paper); }
.cta p { color: #c8ead8; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink); color: #b7bfb2;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .9rem;
}
.footer-grid {
  display: grid; gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(247,243,234,.12);
}
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 820px) { .footer-grid > :first-child { grid-column: span 1; max-width: 300px; } }
/* Footer logo: keep the subtitle inside its own column. At the full .15em
   tracking it ran about 12px past the 300px column and over "The issue". */
.site-footer .brand { display: flex; max-width: 100%; }
.site-footer .brand__sub { letter-spacing: .06em; white-space: normal; line-height: 1.3; }
@media (min-width: 820px) { .footer-grid > :first-child { max-width: 320px; } }

.site-footer h3 {
  color: var(--paper); font-family: var(--f-body);
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: #b7bfb2; text-decoration: none; }
.site-footer a:hover { color: var(--sand-lt); text-decoration: underline; }
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__sub { color: #8b9487; }
.site-footer .brand:hover { color: var(--paper); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.75rem; font-size: .78rem; color: #828b7e;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: var(--flow); }
.mt-4 { margin-top: 3rem; }
.no-wrap { white-space: nowrap; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .alertbar, .gen__nav, .letter__actions,
  .letter__bar, .steps, .gen__form, .cta, .nav__drawer, .toast { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .letter { border: 0; box-shadow: none; }
  .letter__body { max-height: none; overflow: visible; padding: 0; font-size: 11.5pt; }
  .gen { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* Plain-language glossary. Term and definition sit in two columns on wide
   screens and stack on narrow ones, so it stays scannable either way. */
dl.gloss { margin: 1.75rem 0 0; }
dl.gloss dt {
  font-family: var(--f-body); font-weight: 700; color: var(--text);
  font-size: 1rem; margin-top: 1.35rem;
}
dl.gloss dt:first-child { margin-top: 0; }
dl.gloss dd { margin: .3rem 0 0; color: var(--text-muted); }
@media (min-width: 820px) {
  dl.gloss { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: 2rem; }
  dl.gloss dt { margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
  dl.gloss dd { margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
  dl.gloss dt:first-child, dl.gloss dt:first-child + dd { border-top: 0; padding-top: 0; }
}

/* Summary issue blocks on the case page. Plain rules between items rather
   than cards, so a list of nine reads as a list and not as a grid of
   competing boxes. */
.issue { padding: var(--flow) 0; border-top: 1px solid var(--rule); }
.issue:first-of-type { border-top: 0; padding-top: 0; }
.issue:last-of-type { padding-bottom: 0; }
.issue h3 { margin: 0 0 var(--s2); }
.issue p { margin: 0 0 var(--s3); }
.issue p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Home page lead treatment
   Bigger section labels and roomier body copy, carried over from the
   simplified home page after it replaced the original.
   ========================================================================== */

/* Roomier body copy on the home page, without swallowing the utility sizes.
   The unscoped version of this rule was setting .small, .tiny and .eyebrow to
   body size, which deleted the footnote layer on that page. */
.lead .prose > p:not(.small):not(.tiny):not(.eyebrow):not(.lede),
.lead .issue p:not(.small):not(.tiny),
.lead .do-list li { font-size: 1.06rem; line-height: 1.68; }
.lead .lede { font-size: clamp(1.15rem, 2.1vw, 1.42rem); line-height: 1.55; }


.do-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.do-list li { padding: var(--flow) 0; border-top: 1px solid var(--rule); }
.do-list li:first-child { border-top: 0; padding-top: 0; }
.do-list li:last-child { padding-bottom: 0; }
.do-list h3 { margin: 0 0 var(--s2); font-size: 1.2rem; }
.do-list p { margin: 0 0 var(--s2); }

/* One plain-language answer above the evidence in each section, so a reader
   who is not going to work through the documents still gets the point. */
.answer {
  font-size: clamp(1.08rem, 1.9vw, 1.24rem);
  line-height: 1.5;
  font-weight: 560;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
  margin: 0 0 var(--flow);
}

/* The drawer's own link colour was out-specifying .btn--accent, so the one
   button that matters most on a phone measured 3.80:1, and 2.13:1 on the page
   it links to because aria-current applied there too. */
.nav__drawer a.btn--accent,
.nav__drawer a.btn--accent[aria-current="page"] { color: #2a1a06; }

/* A 540px table inside a 335px window with no edge cue reads as if the
   right-hand columns do not exist. */
.table-scroll {
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255,253,248,0)) left center / 44px 100% no-repeat,
    linear-gradient(to left, var(--bg) 30%, rgba(255,253,248,0)) right center / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(19,28,24,.14), transparent) left center / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(19,28,24,.14), transparent) right center / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.band--cream .table-scroll {
  background-image:
    linear-gradient(to right, var(--bg-alt) 30%, rgba(247,243,234,0)),
    linear-gradient(to left, var(--bg-alt) 30%, rgba(247,243,234,0)),
    radial-gradient(farthest-side at 0 50%, rgba(19,28,24,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(19,28,24,.14), transparent);
}

/* An invalid field only announced itself through a toast. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(171,69,38,.13);
}

/* Signing the petition is a campaign goal and its nav link carried the same
   weight as About. Enough emphasis to read as an action, not enough to
   compete with the primary button. */
.nav__link--key { color: var(--accent-deep); font-weight: 680; }
.nav__link--key:hover { color: var(--ink); }

/* ==========================================================================
   Signature packet, for printing and handing in at the hearing
   ========================================================================== */
.packet__cover { border-bottom: 2px solid var(--ink); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.packet__cover h2 { margin: 0 0 .5rem; }
.packet__sub { color: var(--text-muted); margin: 0 0 .6rem; font-size: .95rem; line-height: 1.5; }
.packet__count { font-size: 1.15rem; margin: 0 0 .6rem; }
.packet__sig { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.packet__n {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 .35rem; display: flex; gap: 1rem;
  justify-content: space-between; font-weight: 700;
}
.packet__n span { font-family: var(--f-mono); letter-spacing: 0; text-transform: none; }
.packet__name { font-size: 1.1rem; font-weight: 650; margin: 0; }
.packet__by { margin: 0; color: var(--text-muted); }
.packet__meta { margin: .3rem 0 0; color: var(--text-muted); font-size: .92rem; line-height: 1.5; }

@media print {
  .packet__sig { break-inside: avoid; page-break-inside: avoid; }
  .packet__cover { break-after: avoid; }
  #packetWrap { padding: 0; }
}

/* ==========================================================================
   Narrow-phone overrides
   These lived near the top of the file, where the base rules they override
   were declared later at equal specificity and won on source order. Every
   declaration in them was dead. Moved here so they apply.
   ========================================================================== */
@media (max-width: 480px) {
  .wrap { padding-inline: 1.15rem; }
  h1 { overflow-wrap: break-word; }
  .letter__body { font-size: .88rem; }
  .btn { white-space: normal; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .chips { gap: .35rem; }
  .chip { font-size: .79rem; }
  .steps { padding-inline: .7rem; }
  .field-row--3 { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .choices--2 { grid-template-columns: minmax(0, 1fr); }
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .nav__toggle { width: 44px; height: 44px; }
}

/* Stay-informed form. Three fields on one line where there is room. */
.signup { margin-top: var(--flow); }
.signup__row { display: grid; gap: var(--s3); grid-template-columns: minmax(0,1fr); margin-bottom: var(--s3); }
@media (min-width: 720px) {
  .signup__row { grid-template-columns: minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,.7fr); }
}
.signup .field { margin-bottom: 0; }
.signup [data-signup-status]:empty { display: none; }
.signup [data-signup-status] { margin-top: var(--s2); }

/* Honeypot. Hidden from people, left in the DOM for bots to fill. */
.visually-hidden input { width: 1px; height: 1px; padding: 0; border: 0; }

/* ==========================================================================
   Declaration hero — homepage statement treatment
   Each sentence lands on its own line; short ones get more weight.
   ========================================================================== */

.declaration {
  margin: 1.75rem 0 2.25rem;
  max-width: 46ch;
}

.declaration p {
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 1.9vw, 1.38rem);
  font-weight: 450;
  line-height: 1.28;
  color: rgba(247,243,234,.88);
  margin: 0 0 .42em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  letter-spacing: -.01em;
}

.decl-punch {
  font-size: clamp(1.65rem, 3.6vw, 2.6rem) !important;
  font-weight: 650 !important;
  color: var(--paper) !important;
  letter-spacing: -.028em !important;
  line-height: 1.1 !important;
  margin-bottom: .55em !important;
}

.decl-break {
  margin-top: 1.3em !important;
  color: rgba(247,243,234,.78) !important;
}

.decl-close {
  color: var(--sand-lt) !important;
  font-weight: 600 !important;
  margin-top: .1em !important;
}

@media (max-width: 700px) {
  .declaration { margin: 1.25rem 0 1.75rem; }
  .declaration p { font-size: 1rem; margin-bottom: .38em; }
  .decl-punch { font-size: 1.5rem !important; }
}

/* Donate card with QR code */
.donate-card { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.donate-card__qr { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; }
.donate-card__qr img { width: 180px; height: 180px; background: #fff; padding: .5rem; border: 1px solid var(--rule); border-radius: var(--r-lg); }
@media (max-width: 640px) { .donate-card { grid-template-columns: 1fr; } .donate-card__qr { justify-self: center; } }
.nav .nav__donate { margin-left: auto; margin-right: .5rem; white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1000px) { .nav .nav__donate { margin-left: 0; } }
.donate-strip .h3 { margin-top: .25rem; }