/* ---- Palette retuned to sullivan-hd34 brand colours, 2026-08-13 ----
   Sampled from the candidate's live site with a real browser,
   weighted by painted area. Wix site: black field, cream #FEE6C4, deep green #30574E, coral #F27F58. Quicksand.
   Checklist M2: hexes come from the source, never a screenshot.   */
/* ==========================================================================
   Craig Sullivan FOR Colorado House of Representatives - House District 34: sullyforhd34.com
   Project DarkPoe - Operational tier
   Static HTML/CSS/JS. No build step, no framework, no CDN. Fonts self-hosted.

   PALETTE: every color in section 1 is a token. Retune the six brand ramps to
   the campaign palette and the whole site follows. Never introduce a color
   literal outside :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #08172B;
  --navy-800: #0D2647;
  --navy-700: #143561;
  --navy-600: #1F487F;
  --navy-500: #2D5E9F;
  --navy-400: #487CC1;

  --red-700: #6E2B16;
  --red-600: #93371B;
  --red-500: #B8421E;
  --red-400: #E35C32;
  --gold-500: #EA734F;
  --gold-600: #CE481F;
  --gold-200: #F3C7B9;

  /* Warm neutrals: warmth is what keeps this off the cold "generated" palette */
  --paper: #F7EEDC;
  --paper-2: #FDFAF5;
  --sand: #F4E7CD;
  --ink-900: #152130;
  --ink-700: #343F4E;
  --ink-500: #5F6C7C;
  --line: #C6C8CC;
  --white: #ffffff;

  /* Ink on dark */
  --on-dark: #eaf0f8;
  --on-dark-soft: #a9bad0;
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* Chapter bands, issues.html */
  --veil-hi: rgba(255, 255, 255, 0.07);
  --veil-lo: rgba(255, 255, 255, 0.00);
  --panel-dark: rgba(255, 255, 255, 0.055);
  --panel-dark-line: rgba(255, 255, 255, 0.13);

  /* Hero scrims, mixed from the brand navy #0D2647 */
  --scrim-1: rgba(13, 38, 71, 0.93);
  --scrim-2: rgba(13, 38, 71, 0.60);
  --scrim-3: rgba(13, 38, 71, 0.16);
  --scrim-0: rgba(13, 38, 71, 0.00);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;

  /* Rhythm: every vertical value comes from this scale */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 44px;  --s8: 64px;
  --s9: 88px;  --s10: 120px;

  --shell: 1240px;
  --gutter: 24px;

  /* Elevation: layered, warm-tinted, never a flat grey blur */
  --e1: 0 1px 2px rgba(13, 38, 71, .06), 0 2px 6px rgba(13, 38, 71, .05);
  --e2: 0 2px 4px rgba(13, 38, 71, .06), 0 8px 20px rgba(13, 38, 71, .08);
  --e3: 0 4px 8px rgba(13, 38, 71, .07), 0 18px 42px rgba(13, 38, 71, .13);

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

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
a { color: var(--red-600); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

::selection { background: var(--gold-500); color: var(--navy-900); }

/* Focus: visible, on-brand, never removed */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .hero :focus-visible, header.site :focus-visible {
  outline-color: var(--gold-500);
}

/* Visually hidden but read by screen readers (for labels that duplicate a placeholder) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold-500); color: var(--navy-900);
  padding: 12px 20px; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: 860px; }
.shell-mid { max-width: 1040px; }

section { position: relative; }
.sec { padding-block: var(--s9); }
.sec-tight { padding-block: var(--s8); }
.sec-paper { background: var(--paper); }
.sec-sand { background: var(--paper-2); }

/* Dark sections carry grain + a hairline top rule */
.sec-navy {
  background: var(--navy-700);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.sec-navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}
.sec-navy > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12.5px;
  color: var(--red-500);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; background: var(--red-500); flex: 0 0 auto;
}
.sec-navy .eyebrow, .on-dark .eyebrow { color: var(--gold-500); }
.sec-navy .eyebrow::before, .on-dark .eyebrow::before { background: var(--gold-500); }
.eyebrow.center { justify-content: center; }

h1, h2, h3, h4, .h-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.04;
  text-wrap: balance;
}

.h1 { font-size: clamp(42px, 6.2vw, 78px); text-transform: uppercase; font-weight: 800; }
.h2 {
  font-size: clamp(31px, 3.9vw, 50px);
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: var(--s4);
}
.sec-navy .h2, .on-dark .h2 { color: var(--white); }
.h3 {
  font-size: clamp(20px, 1.7vw, 24px);
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--navy-700);
  margin-bottom: var(--s3);
}
.sec-navy .h3, .on-dark .h3 { color: var(--white); }

.lede {
  font-size: clamp(18px, 1.5vw, 20.5px);
  line-height: 1.58;
  color: var(--ink-700);
  max-width: 66ch;
}
.sec-navy .lede, .on-dark .lede { color: var(--on-dark-soft); }
.lede.center { margin-inline: auto; }

.prose p { color: var(--ink-700); max-width: 68ch; }
.prose p + p { margin-top: var(--s4); }
.sec-navy .prose p, .on-dark .prose p { color: var(--on-dark-soft); }

.center { text-align: center; }
.muted { color: var(--ink-500); }

/* Section head cluster */
.sec-head { max-width: 720px; margin-bottom: var(--s7); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red-500);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: 14.5px; line-height: 1;
  padding: 17px 32px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: var(--e1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--e2); background: var(--red-600); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .18s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn-gold { --btn-bg: var(--gold-500); --btn-fg: var(--navy-900); }
.btn-gold:hover { background: var(--gold-600); }
.btn-navy { --btn-bg: var(--navy-700); }
.btn-navy:hover { background: var(--navy-600); }
.btn-white { --btn-bg: var(--white); --btn-fg: var(--red-600); }
.btn-white:hover { background: var(--paper); }

.btn-ghost {
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
  clip-path: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 2px #fff; }
.btn-ghost-dark {
  background: transparent; color: var(--navy-700);
  box-shadow: inset 0 0 0 2px var(--navy-700); clip-path: none;
}
.btn-ghost-dark:hover { background: var(--navy-700); color: var(--white); }

.btn-sm { padding: 12px 22px; font-size: 13px; }
.btn-lg { padding: 20px 42px; font-size: 16px; }

.btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* Text link with arrow */
.link-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; font-size: 13px;
  color: var(--red-600); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}
.link-more:hover { border-bottom-color: var(--red-500); gap: 11px; }
.sec-navy .link-more, .on-dark .link-more { color: var(--gold-500); }
.sec-navy .link-more:hover, .on-dark .link-more:hover { border-bottom-color: var(--gold-500); }

/* --------------------------------------------------------------------------
   6. UTILITY BAR + HEADER
   -------------------------------------------------------------------------- */
.utility {
  background: var(--navy-900);
  color: var(--on-dark-soft);
  font-size: 13px;
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.utility .shell { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: var(--s4); }
.utility a { color: var(--on-dark-soft); text-decoration: none; transition: color .15s; }
.utility a:hover { color: var(--white); }
.utility .u-tag { display: flex; align-items: center; gap: 9px; }
.utility .u-tag .dot { width: 6px; height: 6px; background: var(--gold-500); border-radius: 50%; flex: 0 0 auto; }
.social { display: flex; gap: 4px; align-items: center; }
.social a { display: grid; place-items: center; width: 32px; height: 32px; }
.social svg { width: 19px; height: 19px; }

header.site {
  position: sticky; top: 0; z-index: 200;
  background: var(--navy-700);
  border-bottom: 3px solid var(--red-500);
  transition: box-shadow .25s var(--ease);
}
header.site.stuck { box-shadow: 0 8px 28px rgba(13, 38, 71,.32); }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  min-height: 84px;
  transition: min-height .25s var(--ease);
}
header.site.stuck .nav-bar { min-height: 66px; }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: 0 0 auto; }
/* Oversized brand chip: hangs below the nav bar like the nateforhd33 treatment */
header.site .brand { position: relative; height: 84px; width: 248px; }
header.site .logo-chip {
  position: absolute; left: 0; top: 0; z-index: 30;
  display: inline-flex; background: #fff;
  border-radius: 0 0 16px 16px;
  padding: 12px 18px 16px;
  box-shadow: 0 10px 26px rgba(13, 38, 71,.35);
  transition: padding .25s var(--ease);
}
header.site .logo-chip img { height: 132px; width: auto; display: block; transition: height .25s var(--ease); }
header.site.stuck .logo-chip { padding: 8px 14px 12px; }
header.site.stuck .logo-chip img { height: 104px; }
footer.site .logo-chip { display: inline-flex; background: #fff; border-radius: 10px; padding: 10px 16px; }
footer.site .logo-chip img { height: 76px; width: auto; display: block; }
.brand .mk { width: 50px; height: 50px; transition: width .25s var(--ease), height .25s var(--ease); }
header.site.stuck .brand .mk { width: 40px; height: 40px; }
.brand .txt { display: flex; flex-direction: column; line-height: 1; }
.brand .nm {
  font-family: var(--display); font-weight: 800;
  font-size: 22px; letter-spacing: -.012em;
  text-transform: uppercase; color: var(--white);
}
.brand .sub {
  font-family: var(--display); font-weight: 600;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-500); margin-top: 5px;
}

nav.main { display: flex; align-items: center; gap: 2px; }
nav.main a {
  position: relative;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: 13.5px;
  color: #c3d1e3; text-decoration: none;
  padding: 12px 15px;
  transition: color .15s var(--ease);
}
nav.main a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px;
  height: 2.5px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
nav.main a:hover { color: var(--white); }
nav.main a:hover::after, nav.main a[aria-current="page"]::after { transform: scaleX(1); }
nav.main a[aria-current="page"] { color: var(--white); }

nav.main a.nav-donate {
  background: var(--red-500); color: var(--white);
  margin-left: 12px; padding: 13px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
nav.main a.nav-donate::after { display: none; }
nav.main a.nav-donate:hover { background: var(--red-600); transform: translateY(-1px); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; position: relative;
}
.nav-toggle span {
  position: absolute; left: 11px; width: 24px; height: 2.5px; background: #fff;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-700);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero .aero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  z-index: -2; opacity: 1;
}
/* Scrim: dark enough behind the headline for contrast, opening toward the right so
   the chart work stays legible. The hero base is already brand navy, so this only
   deepens the left side rather than hiding an illustration. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, var(--scrim-1) 0%, var(--scrim-1) 16%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-0) 82%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .055; mix-blend-mode: overlay;
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: var(--s9); align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
  min-height: min(78vh, 660px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; font-size: 12px;
  color: var(--gold-500);
  border: 1px solid rgba(255,199,44,.4);
  padding: 8px 15px;
  margin-bottom: var(--s5);
}
.hero-kicker .pip { width: 6px; height: 6px; background: var(--gold-500); border-radius: 50%; }

.hero h1 {
  font-size: clamp(50px, 7.6vw, 104px);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: .92;
  margin-bottom: var(--s5);
}
.hero h1 .ln { display: block; }
.hero h1 .ln2 { color: var(--gold-500); }
.hero h1 .rule {
  display: block; width: 92px; height: 5px;
  background: var(--red-500); margin-top: var(--s5);
}
.hero-sub {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55; color: #D5E8E4;
  max-width: 46ch; margin-bottom: var(--s6);
}
.hero-sub strong { color: var(--white); font-weight: 600; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--on-dark-line);
}
.hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.hero-meta .k {
  font-family: var(--display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--gold-500);
}
.hero-meta .v { font-size: 15px; color: #D5E8E4; }

/* --------------------------------------------------------------------------
   8. PHOTO FRAMES: sized to exact ratios so real photos drop in unchanged
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  background: linear-gradient(150deg, var(--navy-600), var(--navy-800));
  overflow: hidden;
  box-shadow: var(--e3);
}
.frame::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-portrait { aspect-ratio: 4 / 5; }
.frame-land { aspect-ratio: 3 / 2; }
.frame-wide { aspect-ratio: 16 / 9; }
.frame-square { aspect-ratio: 1 / 1; }

/* Corner brackets: a designed detail, not construction tape */
.frame .corner { position: absolute; width: 30px; height: 30px; border: 3px solid var(--gold-500); z-index: 2; }
.frame .corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.frame .corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* Slot: the awaiting-photo state. Reads as an intentional graphic panel. */
.slot {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: var(--s6);
  color: #9fb4d0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px);
}
.slot .ico { width: 38px; height: 38px; opacity: .5; margin-bottom: 2px; }
.slot .ttl {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .16em; color: #D5E8E4;
}
.slot .dsc { font-size: 13px; line-height: 1.5; max-width: 30ch; color: #8ea5c4; }
.slot .id {
  font-family: var(--display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-500); border: 1px solid rgba(255,199,44,.35);
  padding: 4px 10px; margin-top: 4px;
}
.frame-photo-hero { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   9. TICKER STRIP
   -------------------------------------------------------------------------- */
.strip {
  background: var(--red-500); color: var(--white);
  padding: 14px 0;
  border-block: 1px solid rgba(0,0,0,.12);
}
.strip .shell { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; }
.strip .lbl {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .2em;
  background: rgba(0,0,0,.22); padding: 6px 12px;
}
.strip .msg { font-size: 15px; letter-spacing: .02em; }
.strip a { color: var(--white); font-weight: 600; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   10. STAT / DISTRICT BAND
   -------------------------------------------------------------------------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--on-dark-line); }
.stat {
  background: var(--navy-700); padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; gap: 6px;
}
.stat .n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 3.4vw, 44px); line-height: 1;
  color: var(--gold-500); letter-spacing: -.02em;
}
.stat .l {
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .15em; color: var(--on-dark-soft);
}
.stat .d { font-size: 14px; color: #8ea5c4; line-height: 1.45; }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
/* a grid holding fewer cards than its track count centres the partial row */
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
            justify-content: center; }

.card {
  position: relative;
  background: var(--white);
  padding: var(--s6) var(--s5) var(--s5);
  box-shadow: var(--e1);
  border-top: 4px solid var(--red-500);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--e3); }
.card p { color: var(--ink-700); font-size: 16px; }
.card > p:not(.num) { flex: 1; }
.card .num { flex: 0 0 auto; }
.card .link-more { margin-top: var(--s4); align-self: flex-start; }
.card .num {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: .16em; color: var(--red-500); margin-bottom: var(--s3);
}
.sec-navy .card { background: var(--navy-600); border-top-color: var(--gold-500); box-shadow: none; }
.sec-navy .card p { color: var(--on-dark-soft); }
.sec-navy .card:hover { background: var(--navy-500); transform: translateY(-4px); }
.card-plain { border-top: 0; box-shadow: none; background: transparent; padding: 0; }
.card-plain:hover { transform: none; box-shadow: none; }

/* Pillar card with big index numeral */
.pillar { position: relative; overflow: hidden; }
.pillar .idx {
  position: absolute; top: -14px; right: 8px;
  font-family: var(--display); font-weight: 800; font-size: 92px;
  color: var(--navy-700); opacity: .06; line-height: 1; pointer-events: none;
}
.sec-navy .pillar .idx { color: #fff; opacity: .07; }

/* --------------------------------------------------------------------------
   12. SPLIT
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.split-4060 { grid-template-columns: .82fr 1.18fr; }
.split-6040 { grid-template-columns: 1.18fr .82fr; }
.split-top { align-items: start; }

/* --------------------------------------------------------------------------
   13. ENDORSEMENTS
   -------------------------------------------------------------------------- */
.endorse {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6);
  align-items: center;
  background: var(--white);
  border-left: 6px solid var(--red-500);
  box-shadow: var(--e2);
  padding: var(--s6);
}
.endorse .seal { width: 92px; height: 92px; flex: 0 0 auto; }
.endorse .who {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--red-600); margin-bottom: 8px;
}
.endorse .quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5;
  color: var(--navy-700);
}
.endorse .attrib {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-500); margin-top: 12px;
}

/* Endorsement wall */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wall .cell {
  background: var(--white); min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: var(--s5) var(--s4); text-align: center;
}
.wall .cell img { width: 54px; height: 54px; opacity: .95; }
.wall .cell .nm {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--navy-700); line-height: 1.3;
}
.wall .cell.open { background: var(--paper); }
.wall .cell.open .nm { color: var(--ink-500); }
.wall .cell .idtag {
  font-family: var(--display); font-weight: 700; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red-500);
}

/* --------------------------------------------------------------------------
   14. PULL QUOTE
   -------------------------------------------------------------------------- */
.pq { position: relative; padding-left: var(--s7); margin-block: var(--s6); }
.pq::before {
  content: "\201C";
  position: absolute; left: -4px; top: -18px;
  font-family: var(--serif); font-size: 96px; line-height: 1;
  color: var(--gold-500); opacity: .8;
}
.pq blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.45;
  color: var(--navy-700);
}
.sec-navy .pq blockquote, .on-dark .pq blockquote { color: var(--white); }
.pq cite {
  display: block; font-style: normal; margin-top: var(--s4);
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--red-600);
}
.sec-navy .pq cite, .on-dark .pq cite { color: var(--gold-500); }

/* --------------------------------------------------------------------------
   15. ISSUE ROWS
   -------------------------------------------------------------------------- */
.issue {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s6);
  padding-block: var(--s7);
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.issue:first-of-type { border-top: 0; padding-top: 0; }
.issue .idx {
  font-family: var(--display); font-weight: 800; font-size: 54px;
  line-height: .85; color: var(--red-500); letter-spacing: -.04em;
  position: relative;
}
.issue .idx::after {
  content: ""; display: block; width: 40px; height: 3px;
  background: var(--navy-700); margin-top: 14px; opacity: .18;
}
.issue h3 { margin-bottom: var(--s3); }
.issue .prose { margin-bottom: var(--s5); }
.commit {
  background: var(--paper);
  border-left: 4px solid var(--gold-500);
  padding: var(--s5);
}
.sec-paper .commit { background: var(--white); }
.commit .ct {
  font-family: var(--display); font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--navy-700); margin-bottom: 10px;
}
.commit ul { display: grid; gap: 9px; }
.commit li { position: relative; padding-left: 24px; font-size: 16px; color: var(--ink-700); }
.commit li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; background: var(--red-500);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --------------------------------------------------------------------------
   15b. ISSUE CHAPTERS   issues.html
   -------------------------------------------------------------------------- */
.issue-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--e1);
}
.issue-nav .shell {
  display: flex; gap: var(--s5); align-items: center;
  overflow-x: auto; scrollbar-width: none;
  padding-block: 13px;
}
.issue-nav .shell::-webkit-scrollbar { display: none; }
.issue-nav .lbl {
  font-family: var(--display); font-weight: 800; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-500);
  flex: 0 0 auto; padding-right: var(--s3);
  border-right: 1px solid var(--line);
}
.issue-nav a {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--navy-700); padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.issue-nav a:hover { color: var(--gold-600); border-bottom-color: var(--gold-500); }
.issue-nav a .n { color: var(--red-500); margin-right: 7px; }

.chapter {
  position: relative; overflow: hidden;
  padding-block: var(--s9);
  scroll-margin-top: 60px;
}
.chapter-paper { background: var(--paper); }
.chapter-alt   { background: var(--paper-2); }
.chapter-navy  { background: var(--navy-800); color: var(--on-dark); }

/* cartographic wash: a township grid with survey corners, the same family as the
   traced district boundary in the hero. */
.chapter-navy::before {
  content: ""; position: absolute; inset: 0;
  background: url("images/map-tile.svg") repeat;
  background-size: 480px 480px;
  opacity: .17; pointer-events: none;
}
/* a soft top light so the band has depth rather than reading as a flat fill */
.chapter-navy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 18% 0%, var(--veil-hi), var(--veil-lo) 70%);
}
.chapter > .shell { position: relative; z-index: 1; }

.ch-grid {
  display: grid; grid-template-columns: minmax(230px, 330px) minmax(0, 1fr);
  gap: var(--s8); align-items: start;
}
.ch-head { position: sticky; top: 84px; }
.ch-num {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(76px, 8vw, 124px); line-height: .8; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold-500);
  opacity: .85; margin-bottom: var(--s4);
}
.chapter-navy .ch-num { -webkit-text-stroke-color: var(--gold-500); opacity: .95; }
.ch-kicker {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--red-500); margin-bottom: 10px;
}
.chapter-navy .ch-kicker { color: var(--gold-500); }
.ch-head h2 { margin: 0; }
.chapter-navy .ch-head h2 { color: var(--white); }
.ch-rule {
  width: 56px; height: 3px; background: var(--gold-500);
  margin-top: var(--s5); border-radius: 2px;
}

.ch-body > .lede-serif {
  font-family: var(--serif); font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5; color: var(--navy-700); margin-bottom: var(--s5);
}
.chapter-navy .ch-body > .lede-serif { color: var(--on-dark); }
.ch-body .prose p { margin-bottom: var(--s4); }
.chapter-navy .ch-body .prose p { color: var(--on-dark-soft); }

.commit-panel {
  margin-top: var(--s6);
  background: var(--white);
  border-top: 3px solid var(--gold-500);
  box-shadow: var(--e2);
  padding: var(--s6) var(--s6) var(--s5);
}
.chapter-navy .commit-panel {
  background: var(--panel-dark); box-shadow: none;
  border: 1px solid var(--panel-dark-line); border-top: 3px solid var(--gold-500);
  backdrop-filter: blur(2px);
}
.commit-panel .ct {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .19em;
  color: var(--navy-700); margin-bottom: var(--s4);
}
.chapter-navy .commit-panel .ct { color: var(--gold-500); }
.commit-panel ul { display: grid; gap: 13px; }
.commit-panel li {
  position: relative; padding-left: 32px;
  font-size: 16.5px; line-height: 1.5; color: var(--ink-700);
}
.chapter-navy .commit-panel li { color: var(--on-dark); }
.commit-panel li + li { border-top: 1px solid var(--line); padding-top: 13px; }
.chapter-navy .commit-panel li + li { border-top-color: var(--panel-dark-line); }
.commit-panel li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 13px; height: 8px; border-left: 2.5px solid var(--gold-600);
  border-bottom: 2.5px solid var(--gold-600);
  transform: rotate(-45deg);
}
.chapter-navy .commit-panel li::before {
  border-left-color: var(--gold-500); border-bottom-color: var(--gold-500);
}
.commit-panel li + li::before { top: 19px; }

@media (max-width: 900px) {
  .ch-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .ch-head { position: static; }
  .ch-num { font-size: 68px; margin-bottom: var(--s3); }
  .ch-rule { display: none; }
  .chapter { padding-block: var(--s8); }
}

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.form-panel {
  background: var(--white);
  box-shadow: var(--e3);
  border-top: 5px solid var(--red-500);
  padding: var(--s7) var(--s6) var(--s6);
}
.sec-navy .form-panel { border-top-color: var(--gold-500); }
.form-panel h3 { margin-bottom: 6px; }
.form-panel .fp-note { font-size: 15px; color: var(--ink-500); margin-bottom: var(--s5); }

.field { display: grid; gap: 6px; margin-bottom: var(--s4); }
.field label {
  font-family: var(--display); font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--ink-700);
}
.field .req { color: var(--red-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 15px;
  border: 1.5px solid var(--line); background: var(--paper);
  font-size: 16.5px; color: var(--ink-900);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.field input::placeholder { color: #9aa6b3; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.checks { display: grid; gap: 2px; margin-bottom: var(--s5); }
.check {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s;
}
.check:hover { background: var(--paper); }
.check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--red-500); flex: 0 0 auto; }
.check span { font-size: 16px; color: var(--ink-700); }
.check strong { display: block; color: var(--ink-900); font-weight: 600; }
.check em { font-style: normal; font-size: 14px; color: var(--ink-500); }

.form-fine { font-size: 13.5px; color: var(--ink-500); margin-top: var(--s4); line-height: 1.5; }
.legend-lbl {
  font-family: var(--display); font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--ink-700);
  margin-bottom: 10px; padding: 0;
}

/* Inline capture: one row on desktop, stacked on small screens */
.capture { display: flex; gap: 10px; flex-wrap: wrap; max-width: 660px; align-items: stretch; }
.capture.center { margin-inline: auto; justify-content: center; }
.capture input {
  flex: 1 1 240px; min-width: 0; padding: 17px; border: 0; font-size: 16.5px;
  background: var(--white); color: var(--ink-900);
}
.capture input:focus { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.capture .zip { flex: 0 1 110px; }
.capture .btn { flex: 0 0 auto; padding-block: 17px; }
.capture .form-msg { flex: 1 1 100%; }

/* Form status message (JS) */
.form-msg {
  display: none; margin-top: var(--s4); padding: 14px 16px;
  background: var(--gold-200); border-left: 4px solid var(--gold-600);
  font-size: 15px; color: var(--navy-700);
}
.form-msg.on { display: block; }

/* --------------------------------------------------------------------------
   17. DONATE TILES
   -------------------------------------------------------------------------- */
.amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-block: var(--s5); }
.amt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: var(--s5) var(--s3);
  background: var(--white); border: 2px solid var(--navy-700);
  text-decoration: none; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.amt .v {
  font-family: var(--display); font-weight: 800; font-size: 27px;
  color: var(--navy-700); letter-spacing: -.02em;
}
.amt .w { font-size: 13px; color: var(--ink-500); text-align: center; line-height: 1.35; }
.amt:hover, .amt.on {
  background: var(--red-500); border-color: var(--red-500); transform: translateY(-3px);
}
.amt:hover .v, .amt.on .v, .amt:hover .w, .amt.on .w { color: var(--white); }

.limit-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper-2); border-left: 4px solid var(--navy-700);
  padding: var(--s5); font-size: 15px; color: var(--ink-700); line-height: 1.55;
}
.limit-note svg { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--navy-700); margin-top: 1px; }

/* --------------------------------------------------------------------------
   18. EVENTS
   -------------------------------------------------------------------------- */
.event {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s5);
  align-items: center; padding: var(--s5);
  background: var(--white); box-shadow: var(--e1);
  border-left: 4px solid var(--red-500);
}
.event + .event { margin-top: var(--s3); }
.event .date {
  text-align: center; border-right: 1px solid var(--line); padding-right: var(--s4);
}
.event .date .m {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--red-500);
}
.event .date .d {
  font-family: var(--display); font-weight: 800; font-size: 32px;
  color: var(--navy-700); line-height: 1.1;
}
.event .nm { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--navy-700); text-transform: uppercase; }
.event .mt { font-size: 15px; color: var(--ink-500); margin-top: 3px; }

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(102deg, var(--red-600) 0%, var(--red-500) 48%, var(--red-700) 100%);
  color: var(--white); text-align: center;
  padding-block: var(--s9);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 2px, transparent 2px 26px);
}
.cta h2 {
  font-size: clamp(30px, 4.2vw, 52px); text-transform: uppercase;
  font-weight: 800; margin-bottom: var(--s4); color: var(--white);
}
.cta p { font-size: clamp(17px, 1.5vw, 19.5px); max-width: 58ch; margin: 0 auto var(--s6); color: #ffdde3; }

.stars {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: var(--s5);
}
.stars svg { width: 17px; height: 17px; fill: currentColor; opacity: .9; }
.sec-navy .stars { color: var(--gold-500); }
.sec-paper .stars, .sec-sand .stars { color: var(--red-500); }

/* --------------------------------------------------------------------------
   20. PAGE HERO (interior)
   -------------------------------------------------------------------------- */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-700); color: var(--white);
  padding-block: clamp(52px, 6vw, 84px);
  border-bottom: 3px solid var(--gold-500);
}
.phero .aero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; z-index: -2; opacity: 1;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(98deg, var(--scrim-1) 0%, var(--scrim-2) 46%, var(--scrim-3) 100%);
}
.crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold-500); margin-bottom: var(--s4);
}
.crumb a { color: var(--gold-500); text-decoration: none; opacity: .82; }
.crumb a:hover { opacity: 1; text-decoration: underline; }
.crumb .sep { opacity: .45; }
.phero h1 { font-size: clamp(36px, 5.2vw, 66px); text-transform: uppercase; }
.phero .psub { font-size: clamp(17px, 1.5vw, 20px); color: #D5E8E4; max-width: 60ch; margin-top: var(--s4); }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
footer.site {
  background: var(--navy-900); color: var(--on-dark-soft);
  padding-top: var(--s9); font-size: 15.5px;
  position: relative; overflow: hidden;
}
footer.site::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red-500) 0 34%, var(--white) 34% 67%, var(--navy-400) 67% 100%);
  opacity: .9;
}
.f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s7); padding-bottom: var(--s8); }
footer.site h4, footer.site .f-h {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--white);
  margin-bottom: var(--s4);
}
footer.site a { color: var(--on-dark-soft); text-decoration: none; transition: color .15s; }
footer.site a:hover { color: var(--white); text-decoration: underline; }
footer.site li { margin-bottom: 10px; }
footer.site .f-about { max-width: 34ch; margin-top: var(--s4); line-height: 1.6; font-size: 15px; }
.f-social { display: flex; gap: 8px; margin-top: var(--s5); }
.f-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--on-dark-line); transition: background .16s, border-color .16s;
}
.f-social a:hover { background: var(--red-500); border-color: var(--red-500); }
.f-social svg { width: 22px; height: 22px; }

.f-bottom { border-top: 1px solid var(--on-dark-line); padding-block: var(--s6); }

/* ⚠ COMPLIANCE: DO NOT SHRINK THIS TEXT.
   Colorado CPF Rule 22.1.1 requires the "paid for by" disclaimer to be clearly readable
   and "no less than 15 percent of the size of the largest font used in the communication,
   or at least eight-point font." The largest type on this site is the homepage hero at
   104px, so 15% = 15.6px. 16px satisfies that on every page and clears the 8pt (10.67px)
   floor either way. The registered-agent line is required disclaimer content under Rule
   22.1.1(c), so it carries the same minimum.
   If the hero type ever gets larger, raise this to match. */
.disclaimer {
  border: 1.5px solid rgba(255,255,255,.22);
  font-family: var(--display); font-weight: 700;
  font-size: 16px;              /* Rule 22.1.1 minimum: see note above */
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--white); text-align: center;
  padding: 18px 24px; max-width: 700px; margin: 0 auto var(--s5);
  line-height: 1.55;
}
.disclaimer .ra {
  display: block; font-weight: 600; letter-spacing: .08em;
  color: #d7e0ec;
  font-size: 16px;              /* Rule 22.1.1(c): required content, same minimum */
  margin-top: 7px;
}
.fineprint { text-align: center; font-size: 13px; color: #7789a0; line-height: 1.7; }
.fineprint a { color: #7789a0; text-decoration: underline; }

/* --------------------------------------------------------------------------
   22. STICKY MOBILE DONATE BAR
   -------------------------------------------------------------------------- */
.sticky-give {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13, 38, 71,.97);
  border-top: 2px solid var(--red-500);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.sticky-give.up { transform: translateY(0); }
.sticky-give .btn { flex: 1; padding: 15px 10px; font-size: 13px; }

/* --------------------------------------------------------------------------
   23. MOTION: scroll reveal
   -------------------------------------------------------------------------- */
[data-rise] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-rise].in { opacity: 1; transform: none; }
.no-js [data-rise] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  header.site .brand { height: auto; width: auto; }
  header.site .logo-chip, header.site.stuck .logo-chip { position: static; border-radius: 8px; padding: 5px 10px; box-shadow: 0 2px 8px rgba(13, 38, 71,.25); }
  header.site .logo-chip img, header.site.stuck .logo-chip img { height: 48px; }
  :root { --s9: 64px; --s8: 44px; }
  nav.main {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--navy-700); border-bottom: 3px solid var(--red-500);
    padding: var(--s3) 0 var(--s5);
    box-shadow: 0 20px 40px rgba(13, 38, 71,.4);
    display: none;
  }
  nav.main.open { display: flex; }
  nav.main a { padding: 15px var(--gutter); font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.06); }
  nav.main a::after { display: none; }
  nav.main a[aria-current="page"] { border-left: 4px solid var(--gold-500); background: rgba(255,255,255,.04); }
  nav.main a.nav-donate { margin: var(--s4) var(--gutter) 0; text-align: center; justify-content: center; }
  .nav-toggle { display: block; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); min-height: 0; }
  .hero-photo-col { max-width: 400px; }
  .split, .split-4060, .split-6040 { grid-template-columns: 1fr; gap: var(--s6); }
  .split .order-first { order: -1; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr 1fr; }
  .amts { grid-template-columns: 1fr 1fr; }
  /* Sticky give bar is fixed: reserve room so it never covers the footer. */
  .sticky-give { display: flex; }
  body { padding-bottom: 78px; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  body { font-size: 16.5px; }
  .utility .u-tag { display: none; }
  .utility .shell { justify-content: center; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .wall { grid-template-columns: 1fr; }
  .issue { grid-template-columns: 1fr; gap: var(--s4); }
  .issue .idx { font-size: 40px; }
  .issue .idx::after { display: none; }
  .endorse { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s4); }
  .row-2 { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; gap: var(--s3); text-align: left; }
  .event .date { display: flex; gap: 10px; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; text-align: left; }
  .brand .nm { font-size: 18px; }
  .brand .sub { font-size: 8.5px; letter-spacing: .2em; }
  .brand .mk { width: 42px; height: 42px; }
  .hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 100%; }
  .capture input { flex: 1 1 100%; }
  .capture .zip { flex: 1 1 100%; }
  .pq { padding-left: var(--s5); }
}

/* --------------------------------------------------------------------------
   25. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .utility, header.site, .sticky-give, .cta, nav.main, .btn { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero, .phero, .sec-navy { background: #fff !important; color: #000 !important; }
  .hero .aero, .phero .aero { opacity: .3; }
  .h1, .h2, .h3, .hero h1, .phero h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Events page: Google Calendar embed */
.cal-frame { position: relative; background: var(--navy-700); border: 1px solid var(--line, #d5dee9); }
.cal-frame iframe { width: 100%; height: 620px; border: 0; display: block; background: #fff; }
.cal-placeholder { min-height: 380px; display: grid; place-items: center; background: linear-gradient(150deg, var(--navy-600, #12294a), var(--navy-800, #071527)); }
@media (max-width: 720px) { .cal-frame iframe { height: 480px; } .cal-placeholder { min-height: 300px; } }

/* Events page: trail gallery and lightbox */
.trail-event { border: 1px solid var(--line, #d5dee9); background: var(--white, #fff); padding: 28px; }
.te-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.te-meta { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--red-500, #c8102e); margin-top: 4px; }
.te-note { max-width: 44ch; color: var(--ink-500, #47576b); font-size: 15px; }
.gal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gal-grid button { padding: 0; border: 0; cursor: pointer; background: var(--navy-800, #071527); aspect-ratio: 1 / 1; overflow: hidden; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s var(--ease), opacity .25s; }
.gal-grid button:hover img, .gal-grid button:focus-visible img { transform: scale(1.05); opacity: .88; }
.gal-grid button:focus-visible { outline: 3px solid var(--gold-500, #ffc72c); outline-offset: 2px; }

.lightbox { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; gap: 12px; background: rgba(6, 16, 31, .93); padding: 24px; }
.lightbox.open { display: flex; }
.lb-stage { max-width: min(1100px, 86vw); margin: 0; }
.lb-stage img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.lb-stage figcaption { text-align: center; color: #c9d5e4; font-size: 14px; margin-top: 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; }
.lb-close, .lb-nav { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.lb-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; }
.lb-nav { width: 48px; height: 64px; font-size: 34px; flex: 0 0 auto; }
.lb-close:hover, .lb-nav:hover { background: var(--gold-500, #ffc72c); color: var(--navy-800, #071527); }
@media (max-width: 940px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .lb-nav { width: 40px; height: 52px; } }


/* ---- DarkPoe template fix, 2026-08-13 -------------------------------------
   The .issue grid is `92px 1fr` and relies on source order to place children.
   The stylesheet styles `.issue .idx` and `.issue h3`, but the template markup
   emits `.issue-idx` and `h2.h2`. So nothing was placed explicitly and `.prose`
   landed back in the 92px index column, squeezing every issue body to a
   one-word-per-line ribbon. Pin the columns by name instead of by order.      */
.issue > .issue-idx { grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--display); font-weight: 800; font-size: 54px;
  line-height: .85; color: var(--red-500); letter-spacing: -.04em; }
.issue > .issue-idx::after { content: ""; display: block; width: 40px; height: 3px;
  background: var(--navy-700); margin-top: 14px; opacity: .18; }
.issue > h2, .issue > .prose, .issue > .commit { grid-column: 2; }
.issue > h2 { margin-bottom: var(--s3); }
@media (max-width: 720px) {
  .issue > .issue-idx { grid-row: auto; font-size: 40px; }
  .issue > .issue-idx::after { display: none; }
  .issue > h2, .issue > .prose, .issue > .commit { grid-column: 1; }
}


/* --------------------------------------------------------------------------
   23. HOMEPAGE SCENE HERO
   One photograph, uncut: he stands on the left of the frame, so the copy sits
   on the right and the scrim flips to match.
   -------------------------------------------------------------------------- */
.hero-scene .aero { opacity: 1; object-position: center 26%; }
.hero-scene::before {
  background: linear-gradient(266deg,
    var(--scrim-1) 0%, var(--scrim-1) 20%, var(--scrim-2) 42%,
    var(--scrim-3) 64%, var(--scrim-0) 86%);
}
.hero-scene .hero-grid {
  grid-template-columns: 1fr;
  justify-items: end;
}
.hero-scene .hero-copy { max-width: 560px; }
.hero-scene .hero-meta { justify-content: flex-start; }

@media (max-width: 900px) {
  /* stacked: he holds the top of the frame, the copy sits under him on solid navy,
     rather than the headline landing across his face.
     The 2026 hero puts him in the left 720px of a 1920px canvas, so the horizontal
     anchor has to sit far left here. At 40% the phone crop landed entirely in the
     blurred field and he disappeared off the edge. */
  .hero-scene .aero { object-position: 13% top; }
  .hero-scene::before {
    /* at keep 0.92 the sky is bright enough that the coral kicker was landing on
       it unreadably, so the navy comes up earlier and harder on small screens */
    background: linear-gradient(180deg,
      var(--scrim-0) 0%, var(--scrim-0) 22%, var(--scrim-3) 31%,
      var(--scrim-2) 38%, var(--scrim-1) 47%, var(--scrim-1) 100%);
  }
  .hero-scene .hero-grid {
    justify-items: stretch; align-items: end;
    min-height: 96vh; padding-top: 54vh; padding-bottom: var(--s7);
  }
  .hero-scene .hero-copy { max-width: none; }
}

/* --------------------------------------------------------------------------
   26. PHOTO CREDIT
   Gina Lantz granted full use, so this is courtesy rather than obligation. It
   sits outside the framed image so the frame corners are not disturbed.
   -------------------------------------------------------------------------- */
.photo-credit {
  margin: 10px 2px 0; font-size: 12px; letter-spacing: .04em;
  color: var(--ink-500); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   27. SIGNATURE
   His own hand, scanned and knocked out by make_signature.py. Sized in ch so it
   scales with the type around it rather than fighting it, and capped in px so it
   never gets grand. A signature that is wider than the sentence it signs reads as
   a brand mark, which is not the point.
   -------------------------------------------------------------------------- */
.sig { display: block; width: min(300px, 62%); height: auto; }

/* the about page pull-quote: hand above, typed name below, both left-aligned to
   the quote's own indent */
.cite-signed { margin-top: var(--s3); }
.cite-signed .sig { margin: 0 0 6px -6px; }   /* the C's flourish overhangs slightly */

/* the homepage closing band, centred on navy */
.sig-block {
  margin: var(--s5) auto var(--s6);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sig-block .sig { width: min(320px, 74%); margin-bottom: 4px; }
.sig-name {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--white);
}
.sig-role {
  font-size: 12.5px; letter-spacing: .04em; color: #ffdde3;
}

@media (max-width: 620px) {
  .sig { width: min(240px, 80%); }
  .sig-block .sig { width: min(250px, 84%); }
}

/* --------------------------------------------------------------------------
   28. CHECKBOX FIELDSET
   The volunteer form's markup is fieldset > legend > label.chk, but the
   stylesheet only ever defined .checks / .check / .legend-lbl, so none of it
   applied. What shipped was a default browser fieldset: the legend cutting
   through its own border, the labels picked up by `.field label` and set as
   uppercase field titles, and the checkboxes stretched by `.field input`'s
   width:100% so they floated off to the right of their text.
   Selectors are qualified past `.field label` and `.field input` on purpose;
   the markup's name attributes have to stay stable for the C5 platform mapping,
   so this is fixed in CSS rather than by renaming classes.
   -------------------------------------------------------------------------- */
fieldset.field { border: 0; padding: 0; margin-bottom: var(--s4); display: block; }
fieldset.field > legend {
  font-family: var(--display); font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--ink-700);
  padding: 0; margin-bottom: 8px;
}
.field label.chk {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; cursor: pointer;
  font-family: var(--body); font-weight: 400; font-size: 16px;
  text-transform: none; letter-spacing: 0; color: var(--ink-700);
  border: 1px solid transparent; transition: background .14s, border-color .14s;
}
.field label.chk:hover { background: var(--paper); border-color: var(--line); }
.field label.chk input[type="checkbox"] {
  width: 19px; height: 19px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--red-500);
}
.field label.chk:focus-within { border-color: var(--red-500); background: var(--white); }

/* Events index: teaser rows link through to the event page rather than opening
   the lightbox, so they are anchors and need the tile treatment .gal-grid gives
   its buttons. */
.gal-grid a { display: block; padding: 0; border: 0; background: var(--navy-800, #071527); aspect-ratio: 1 / 1; overflow: hidden; }
.gal-grid a:hover img, .gal-grid a:focus-visible img { transform: scale(1.05); opacity: .88; }
.gal-grid a:focus-visible { outline: 3px solid var(--gold-500, #ffc72c); outline-offset: 2px; }
.te-more { margin-top: 18px; }
.te-count { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ink-500, #47576b); }