/* ===========================================================
   Steve Loosley for Mayor: Roseburg, Oregon
   -----------------------------------------------------------
   Design system modeled on kellietorresforportland.com:
     · cream-dominant field, navy header + navy full-bleed bands
     · heavy Archivo display matched to the sign + Poppins UI
     · 10px button radius, uppercase 700 labels, .32px tracking
     · fade + slide-up scroll reveals
   Brand colors sampled from the Loosley yard sign artwork.
   =========================================================== */

:root {
  /* --- brand (from the yard sign) --- */
  --navy:        #0E1F39;
  --navy-deep:   #08131F;
  --navy-soft:   #24406B;
  --red:         #B42521;
  --red-bright:  #D2352B;
  --gold:        #C6A053;

  /* --- field ---
     The yard sign is navy and red ink on a white ground: sampling the artwork
     finds no third colour at all. The cream field came from the reference site
     we modelled the layout on, not from Steve's brand, so the ground is white
     and secondary surfaces use a cool neutral that sits under navy.
     Previous warm set, kept in case we want it back:
       --cream #F4E9D5   --cream-deep #EADCC0   --cream-warm #FBF5E9          */
  --cream:       #FFFFFF;
  --cream-deep:  #EDF0F5;
  --cream-warm:  #FFFFFF;
  --white:       #FFFFFF;

  /* --- ink --- */
  --ink:         #1B2434;
  --ink-soft:    #55617A;
  --on-navy:     rgba(255, 255, 255, 0.82);

  --line:        rgba(14, 31, 57, 0.16);
  --line-light:  rgba(255, 255, 255, 0.20);

  /* display face matched to the yard sign: heavy grotesque */
  --display:     'Archivo', 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap:        1200px;
  --radius:      10px;
  --radius-lg:   18px;

  --shadow-sm:   0 4px 14px rgba(14, 31, 57, 0.07);
  --shadow:      0 18px 44px rgba(14, 31, 57, 0.10);
  --shadow-lg:   0 34px 80px rgba(14, 31, 57, 0.20);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is REQUIRED once width/height attributes are on the <img>.
   Without it the height attribute renders literally and the image stretches. */
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--red); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 880px; }

.center { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--cream);
  padding: 14px 24px; font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

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


/* ===========================================================
   TYPOGRAPHY
   =========================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 20px;
  text-wrap: balance;
}

h2 { font-size: clamp(26px, 2.8vw, 38px); }   /* stays clear of the hero h1 */
.plan-head h3 { font-size: clamp(23px, 2.2vw, 31px) !important; }   /* was identical to h2 */
h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }
h4 { font-size: 19px; }

p { margin: 0 0 20px; }

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
  max-width: 90px;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before {
  content: '';
  flex: 0 0 auto;
  width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red));
}
.eyebrow.center::after {
  flex: 0 0 auto;
  width: 90px;
}
.eyebrow.light { color: #E8B4AF; }
.eyebrow.light::before { background: linear-gradient(90deg, transparent, #E8B4AF); }
.eyebrow.light::after  { background: linear-gradient(90deg, #E8B4AF, transparent); }

.lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--navy-soft);
}

.section-intro {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0 auto 56px;
  text-wrap: pretty;
}
.section-navy .section-intro { color: var(--on-navy); }

.fineprint { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.section-navy .fineprint { color: rgba(255, 255, 255, 0.55); }

.todo {
  background: #FFE9A8;
  color: var(--navy);
  border-bottom: 2px dotted var(--red);
  padding: 0 5px;
  font-weight: 700;
  border-radius: 3px;
}


/* ===========================================================
   BUTTONS  (10px radius / uppercase 700 / .32px tracking)
   =========================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              color .3s var(--ease), border-color .3s var(--ease);
}

/* sweep fill on hover */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: translateX(0); }
.btn:hover  { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(-1px); }

.btn-lg { padding: 19px 38px; font-size: 16px; }

.btn-red        { background: var(--red); color: var(--cream-warm); border-color: var(--red); }
.btn-red::before { background: var(--navy); }
.btn-red:hover  { border-color: var(--navy); }

.btn-navy        { background: var(--navy); color: var(--cream-warm); border-color: var(--navy); }
.btn-navy::before { background: var(--red); }
.btn-navy:hover  { border-color: var(--red); }

.btn-outline        { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline::before { background: var(--navy); }
.btn-outline:hover  { color: var(--cream-warm); }

.btn-outline-light        { background: transparent; color: var(--cream); border-color: rgba(255, 255, 255, .5); }
.btn-outline-light::before { background: var(--cream); }
.btn-outline-light:hover  { color: var(--navy); border-color: var(--cream); }


/* ===========================================================
   HEADER
   =========================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 3px solid var(--red-bright);   /* --red is 2.53:1 on navy: reads as a seam */
  transition: box-shadow .4s var(--ease);
}
/* only depth changes on scroll. Recoloring on scroll is what was failing. */
.site-header.scrolled { box-shadow: 0 8px 28px rgba(8, 19, 31, .38); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 106px;
  transition: min-height .4s var(--ease);
}
.site-header.scrolled .header-inner { min-height: 84px; }


/* ---- horizontal wordmark, built in live text ---- */

.brand {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
  flex: 0 0 auto;
  transform-origin: left center;
  transition: transform .4s var(--ease);
}
.brand-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--cream-warm);
  white-space: nowrap;
}
/* Both names carry equal weight and size. */
.brand-first, .brand-last {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;   /* cream on navy halates; negative closes the OO. -0.02em rounds to -1px on Windows and closes the OO */
}
/* Line 2 stretches to line 1's measure, which is what locks the two into a
   single mark rather than two stacked strings. Stars flank the office exactly
   as they flank the word FOR on the yard sign. */
.brand-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  margin-top: 6px;
  width: 100%;
}
/* Real geometry, not a tiled background. The old version tiled a 7px star
   across a 29px box: 4.14 tiles, so it always rendered a clipped fifth star. */
.brand-stars {
  flex: 1 1 auto;
  min-width: 34px;
  max-width: 62px;
  height: 11px;
  fill: var(--red-bright);
}
.brand-office {
  font-family: var(--display);
  /* The sign sets MAYOR at 0.91 of LOOSLEY in red. 11px cream was a 0.39
     demotion. Red fails contrast on navy (#D2352B is 3.07:1), so the red
     moves to the flanking stars and the office keeps cream but gains size. */
  font-size: 17px; font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-warm);
  white-space: nowrap;
}
.brand:hover .brand-name { color: #fff; }

/* transform-scale beats animating font-size: no reflow of the nav each
   frame, and baselines never land on half pixels */
.brand { transform-origin: left center; transition: transform .4s var(--ease); }
.site-header.scrolled .brand { transform: scale(.80); }

.primary-nav { display: flex; align-items: center; gap: 32px; }

.primary-nav ul {
  display: flex; align-items: center; gap: 34px;
  list-style: none; margin: 0; padding: 0;
}

.primary-nav ul a {
  position: relative;
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  white-space: nowrap;         /* two-word links stacked once Endorsements was added */
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: 0.01em;      /* counters halation of light type on dark */
  padding: 8px 0;
  display: inline-block;
  transition: color .3s var(--ease);
}
.primary-nav ul a::after {
  content: '';
  position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 3px;
  background: var(--red-bright);   /* #B42521 is only 2.5:1 on navy */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.primary-nav ul a:hover,
.primary-nav ul a.active { color: var(--cream-warm); }
.primary-nav ul a:hover::after,
.primary-nav ul a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-extras { display: flex; align-items: center; gap: 14px; }

/* Narrow laptops just above the menu collapse point: tighten so five links,
   Facebook and Donate still fit on one line. */
@media (min-width: 1101px) and (max-width: 1260px) {
  .header-inner     { gap: 20px; }
  .primary-nav      { gap: 18px; }
  .primary-nav ul   { gap: 22px; }
  .primary-nav ul a { font-size: 15.5px; }
  .nav-extras       { gap: 10px; }
  .nav-donate       { padding: 13px 24px; font-size: 14px; }
}

.social {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);   /* navy on navy was invisible */
  transition: background .3s var(--ease), transform .35s var(--ease-out);
}
.social svg { width: 19px; height: 19px; fill: var(--cream); }
.social:hover { background: var(--red); transform: translateY(-3px) rotate(-6deg); }

.nav-donate { padding: 15px 32px; font-size: 15px; letter-spacing: 0.12em; }
/* the default red button sweeps navy, which would erase it on a navy bar */
.nav-donate.btn-red::before { background: var(--cream-warm); }
.nav-donate.btn-red:hover { color: var(--navy); border-color: var(--cream-warm); }

.nav-toggle {
  display: none;
  width: 48px; height: 44px;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: var(--radius);
  cursor: pointer; position: relative;
  transition: background .3s var(--ease);
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  position: absolute; left: 14px; width: 20px; height: 2.5px;
  background: var(--cream); content: ''; border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .2s ease, background .3s ease;
}
.nav-toggle .bars { top: 21px; }
.nav-toggle .bars::before { left: 0; top: -7px; }
.nav-toggle .bars::after  { left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] { background: var(--red); }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-7px) rotate(-45deg); }


/* ===========================================================
   SECTION DIVIDERS (full-bleed color transitions)
   =========================================================== */

.divider {
  display: block;
  width: 100%;
  height: clamp(40px, 5vw, 76px);
  line-height: 0;
}
.divider svg { display: block; width: 100%; height: 100%; }
.divider path { fill: currentColor; }

/* .to-X names the INCOMING section color; background is the outgoing one */
.to-navy                { color: var(--navy);       background: var(--cream); }
.to-navydeep            { color: var(--navy-deep);  background: var(--cream-deep); }
.to-cream-from-navy     { color: var(--cream);      background: var(--navy); }
.to-cream-from-navydeep { color: var(--cream);      background: var(--navy-deep); }
.to-cream-from-deep     { color: var(--cream);      background: var(--cream-deep); }
.to-creamdeep-from-navy { color: var(--cream-deep); background: var(--navy); }
.to-creamdeep-from-cream{ color: var(--cream-deep); background: var(--cream); }


/* ===========================================================
   SECTIONS
   =========================================================== */

.section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
/* A curved divider is already a section break. Full padding on both sides of
   it stacked to nearly 300px of empty space, so trim the edges that touch one. */
.section:has(+ .divider) { padding-bottom: clamp(40px, 4.5vw, 60px); }
.divider + .section      { padding-top:    clamp(40px, 4.5vw, 60px); }
.section-tint { background: var(--cream-deep); }
.section-navy { background: var(--navy); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--cream-warm); }

.grid-2 {
  display: grid;
  grid-template-columns: 420px 1fr;   /* .88/1.12 gave 44% of the row to one image */
  gap: 88px;
  align-items: start;                 /* not stretch: .portrait would crop to a sliver */
}
/* the photo tracks the read instead of stranding whitespace */
@media (min-width: 1001px) {
  .grid-2 > .portrait { position: sticky; top: 108px; }
}

.signature {
  margin-top: 34px; padding-top: 24px;
  border-top: 3px solid var(--red);
  display: inline-block;
}
.signature span {
  display: block;
  font-family: var(--display);
  font-weight: 800; font-size: 25px; color: var(--navy);
  letter-spacing: -.015em; line-height: 1.2;
}
.signature small { color: var(--ink-soft); font-size: 14px; letter-spacing: .02em; }


/* ===========================================================
   BIO SUBHEADS
   =========================================================== */

.bio-head {
  margin: 32px 0 10px;
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--red);
  letter-spacing: -.01em;
}



/* ===========================================================
   THE PLAN  (problem / plan / promise)
   =========================================================== */

.plan {
  position: relative;
  background: var(--cream-warm);
  border: 1.5px solid rgba(14, 31, 57, .10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(34px, 4vw, 52px);
  margin-bottom: 34px;
  scroll-margin-top: 110px;
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease-out);
}
.plan:hover { border-color: rgba(180, 37, 33, .30); box-shadow: var(--shadow); }
.plan:last-child { margin-bottom: 0; }

.plan-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--line);
}
/* flex items default to min-width:auto, which stops long titles wrapping */
.plan-head > div { min-width: 0; flex: 1 1 auto; }
.plan-head h3 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3vw, 38px);
  overflow-wrap: break-word;
}

/* Plank seal: a stamped navy block with the sign's star notched into the
   corner. Sits slightly off-square so it reads as pressed on, not printed. */
.plan-num {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--cream-warm);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  transform: rotate(-5deg);
  box-shadow: 0 8px 20px rgba(14, 31, 57, .22);
  transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.plan-num::after {
  content: '';
  position: absolute;
  top: -9px; right: -9px;
  width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B42521' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E")
    no-repeat center/contain;
  transition: transform .55s var(--ease-out);
}
.plan:hover .plan-num { transform: rotate(0deg); background: var(--red); }
.plan:hover .plan-num::after {
  transform: rotate(72deg) scale(1.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E1F39' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E");   /* red star would vanish on the red seal */
}

.plan-part { margin-bottom: 28px; }

.plan-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
}

.plan-part p:last-child,
.plan-promise p:last-child { margin-bottom: 0; }

.plan-steps { list-style: none; margin: 0; padding: 0; }
.plan-steps li {
  position: relative;
  padding: 0 0 0 34px;
  margin-bottom: 16px;
  color: var(--ink-soft);
}
.plan-steps li:last-child { margin-bottom: 0; }
.plan-steps li strong { color: var(--navy); font-weight: 600; }
.plan-steps li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B42521' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.plan-photo {
  margin: 0 0 28px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* must match the 4:3 files in assets/, or the browser re-crops them and
   starts cutting people's heads off again */
.plan-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* matches the re-cropped files; 21:9 re-cropped them again and cut faces */
  object-fit: cover;
  object-position: center center;
  transition: transform .7s var(--ease-out);
}
.plan-photo:hover img { transform: scale(1.035); }
/* The cleanup photo is a 3:4 original. Cropped to 16:9 it loses either his
   face or the bag, so this figure keeps a 3:2 slot instead. */
.plan-photo-3x2 img { aspect-ratio: 3 / 2; }
.plan-photo figcaption {
  background: var(--cream-deep);
  color: #4C5772;   /* 4.59 -> 5.02 on cream-deep */
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 18px;
}

.plan-promise {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin-top: 30px;
}
.plan-promise .plan-label { color: #E8B4AF; }
.plan-promise p {
  color: var(--cream-warm);
  font-family: var(--display);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.45;
}


/* ===========================================================
   ENDORSEMENTS
   =========================================================== */

.endorse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 26px;
  margin-bottom: 52px;
}
.endorse {
  position: relative;
  margin: 0;
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 36px 30px 30px;
  transition: transform .45s var(--ease-out), background .4s var(--ease), border-color .4s var(--ease);
}
.endorse::before {
  content: '"';
  position: absolute; right: 20px; top: 4px;
  font-family: var(--display);
  font-size: 88px; line-height: 1;
  color: var(--red-bright); opacity: .35;
}
.endorse:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .34);
}
.endorse blockquote {
  position: relative;
  margin: 0 0 22px;
  color: var(--cream-warm);
  font-size: 17px; line-height: 1.65;
}
.endorse figcaption strong {
  display: block; color: var(--cream-warm);
  font-size: 16px; font-weight: 600;
}
.endorse figcaption span { color: #E8B4AF; font-size: 13.5px; font-weight: 500; }



/* ===========================================================
   FORMS
   =========================================================== */

.form {
  max-width: 790px;
  margin: 0 auto;
  background: var(--cream-warm);
  padding: 48px;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(14, 31, 57, .10);
  box-shadow: var(--shadow);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: block; margin-bottom: 20px; }
.field > span {
  display: block; font-weight: 600; font-size: 13.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 8px;
}
.field b { color: var(--red); }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--ink);
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  transition: border-color .25s var(--ease), background .25s var(--ease),
              box-shadow .25s var(--ease);
}
input:focus, textarea:focus {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(14, 31, 57, .09);
  outline: none;
}
input:user-invalid, textarea:user-invalid { border-color: var(--red); }
textarea { resize: vertical; min-height: 110px; }

.checks { border: 0; padding: 0; margin: 6px 0 26px; }
.checks legend {
  font-weight: 600; font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy);
  padding: 0; margin-bottom: 12px;
}
.checks label {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px; color: var(--ink-soft);
  padding: 8px 0; cursor: pointer;
  transition: color .25s var(--ease);
}
.checks label:hover { color: var(--navy); }
.checks input { width: 19px; height: 19px; accent-color: var(--red); cursor: pointer; }

@media (min-width: 640px) {
  .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .checks legend { grid-column: 1 / -1; }
}

.form-status {
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  min-height: 1.4em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}
.form-status.show { opacity: 1; transform: none; }
.form-status.error { color: var(--red); }


/* ===========================================================
   MEDIA KIT
   =========================================================== */

.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 32px; }
.kit-item {
  display: block;
  text-decoration: none;
  background: var(--cream-warm);
  border: 1.5px solid rgba(14, 31, 57, .10);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), transform .4s var(--ease-out),
              box-shadow .4s var(--ease-out);
}
.kit-item:hover { border-color: rgba(180, 37, 33, .30); transform: translateY(-6px); box-shadow: var(--shadow); }
.kit-item strong {
  display: block;
  font-family: var(--display);
  font-weight: 800; color: var(--navy); font-size: 18px; margin-bottom: 6px;
}
.kit-item span { color: var(--ink-soft); font-size: 14.5px; }


/* ===========================================================
   EMAIL SIGNUP
   =========================================================== */

.signup {
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(64px, 8vw, 100px) 0;
}
.signup h2 { color: var(--cream-warm); }
.signup > .wrap > p { color: var(--on-navy); max-width: 560px; margin-inline: auto; }
.signup .section-intro { color: var(--on-navy); }
.signup .fineprint { color: rgba(255, 255, 255, .55); }

.signup-form {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 30px;
}
.signup-form input {
  flex: 1 1 230px; max-width: 290px;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: var(--cream-warm);
}
.signup-form input::placeholder { color: rgba(255, 255, 255, .58); }   /* 4.32 -> 4.90 */
.signup-form input:focus {
  background: rgba(255, 255, 255, .15);
  border-color: var(--cream);
  color: var(--cream-warm);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .10);
}
.signup .form-status { color: var(--cream-warm); }
.signup .form-status.error { color: #F0A9A4; }


/* ===========================================================
   FOOTER
   =========================================================== */

.site-footer { background: var(--navy); color: var(--on-navy); padding: 70px 0 30px; }

.footer-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 46px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-light);
}

.footer-brand img {
  height: 68px; width: auto; margin-bottom: 18px;
  filter: brightness(0) saturate(100%) invert(96%) sepia(14%) saturate(430%) hue-rotate(343deg) brightness(103%) contrast(93%);
}
.footer-brand p {
  font-family: var(--display);
  font-weight: 800; font-size: 18px; color: var(--cream-warm); margin: 0; text-transform: uppercase; letter-spacing: -.01em;
}

.footer-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.footer-nav a {
  color: var(--on-navy); text-decoration: none;
  font-size: 15px; line-height: 2.2;
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.footer-nav a:hover { color: var(--cream-warm); padding-left: 5px; }

.footer-contact p { margin: 0 0 8px; font-size: 15px; }
.footer-contact a { color: var(--cream); }
.footer-social { display: flex; gap: 18px; margin-top: 14px; }
.footer-social a {
  color: #E8B4AF; font-weight: 600; font-size: 14px;
  text-decoration: none; letter-spacing: .03em;
}
.footer-social a:hover { text-decoration: underline; text-underline-offset: 4px; }

.disclaimer {
  padding-top: 26px;
  font-size: 13px; line-height: 1.7;
  color: rgba(255, 255, 255, .62);   /* 4.38:1 was under WCAG AA */
}
.disclaimer p { margin: 0 0 4px; }


/* ===========================================================
   SCROLL REVEAL
   =========================================================== */

/* Content is visible by default. It is only hidden once JS has confirmed it
   can animate it back in (html.js-reveal), so a script failure, a blocked
   file, or a no-JS browser still renders the full page. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal .reveal.in { opacity: 1; transform: none; will-change: auto; }

/* the big Squarespace-style slide comes in a touch further on media */
.js-reveal .reveal-far { transform: translateY(84px); }
.js-reveal .reveal-far.in { transform: none; }


/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 1000px) {
  .hero-inner, .grid-2 { grid-template-columns: 1fr; gap: 44px; }
  .hero-photo { min-height: 340px; }
  .portrait   { min-height: 420px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* Menu collapses at 1100px, not 1000px. Five links plus Donate need about
   1065px; any narrower and Donate is pushed off screen. Re-measure if a nav
   link is ever added or removed. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }

  .primary-nav {
    position: fixed;
    inset: 106px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 14px 28px 32px;
    transform: translateY(-135%);
    transition: transform .5s var(--ease-out);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 106px);
    overflow-y: auto;
  }
  .primary-nav.open { transform: translateY(0); }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--line-light); }
  .primary-nav ul a {
    color: var(--cream-warm); display: block;
    padding: 17px 0; font-size: 17px; font-weight: 500;
  }
  .primary-nav ul a::after { background: var(--red-bright); bottom: 0; }

  .nav-extras { justify-content: flex-start; padding-top: 22px; }
  
  .nav-donate { margin-left: auto; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  /* surname carries the wordmark at phone widths */
  .header-inner { min-height: 60px; }
  .site-header.scrolled .header-inner { min-height: 56px; }
  .brand-first, .brand-last { font-size: 19px; }
  /* 8.5px was unreadable. There is ~40px of clear space between the wordmark
     and the menu button even at 320px, so the shrink bought nothing. */
  .brand-office { font-size: 12px; letter-spacing: .2em; }
  .brand-rule   { height: 9px; }
  .brand-sub    { margin-top: 2px; }
  .site-header.scrolled .brand { transform: scale(.92); }
  .primary-nav { inset: 60px 0 auto 0; max-height: calc(100dvh - 60px); }
  /* long plank titles and hashtags need room on small phones */
  .plan { padding: 26px 20px; }
  .plan-head { gap: 14px; }
  .plan-num { width: 60px; height: 60px; font-size: 23px; border-radius: 12px; }
  .plan-num::after { width: 23px; height: 23px; top: -7px; right: -7px; }
  /* #GovernmentThatWorks has no break opportunity and overflows at 320px */
  .hashtag {
    font-size: 12px; padding: 7px 14px;
    overflow-wrap: anywhere; word-break: break-word; max-width: 100%;
  }
  .plan-steps li { padding-left: 28px; }
  .hero { padding-top: 48px; }
  .hero-inner { padding-bottom: 60px; }
  .hero-logo { max-width: 340px; }
  .field-row { grid-template-columns: 1fr; }
  .form { padding: 30px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .quote-band::before { font-size: 200px; top: -20px; }
  .eyebrow.center::before, .eyebrow.center::after { width: 40px; }
}


/* ===========================================================
   MOTION PREFERENCES
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal, .hero-copy > *, .hero-photo, .portrait {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===========================================================
   FOOTER WORDMARK  (same mark as the header, larger)
   =========================================================== */

.brand-footer { margin-bottom: 18px; }
.brand-footer .brand-first,
.brand-footer .brand-last   { font-size: 30px; }
.brand-footer .brand-office { font-size: 15px; }
.brand-footer .brand-stars  { height: 12px; }
.site-header.scrolled .brand-footer { transform: none; }

@media (max-width: 620px) {
  /* shrink to the mark's own measure; as a block-parented column flex box it
     otherwise fills the footer and space-between pulls the names apart */
  .brand-footer { width: fit-content; max-width: 100%; }
  .brand-footer .brand-first,
  .brand-footer .brand-last   { font-size: 23px; }
  .brand-footer .brand-office { font-size: 12px; }
  /* six links in two columns inside a one-column footer is a jumble */
  .footer-nav ul { columns: 1; }
}

/* pale pink made "Facebook" the loudest thing in the footer */
.footer-social a { color: var(--cream); }
.footer-social a:hover { color: var(--cream-warm); }


/* ===========================================================
   MOBILE  (audited at 375px)
   =========================================================== */

@media (max-width: 1000px) {
  /* Name and face are the whole product in a local race. The photo was
     landing 1735px down the page; it now leads. */
  .hero-inner { display: flex; flex-direction: column; }
  .hero-photo { order: -1; min-height: 0; aspect-ratio: 5 / 4; }
  .hero-photo img { object-position: center 22%; }
  .hero-copy   { order: 1; }
}

@media (max-width: 620px) {
  /* --- vertical rhythm: the page was 16,354px tall on a phone --- */
  .section        { padding: 48px 0; }
  .hero           { padding-top: 26px; }
  .hero-inner     { gap: 28px; padding-bottom: 40px; }
  .hero-logo      { max-width: 270px; margin-bottom: 20px; }
  .creds          { margin-bottom: 26px; }
  .creds li       { margin-bottom: 7px; font-size: 16px; }
  .section-intro  { margin-bottom: 34px; }
  .divider        { height: 30px; }
  .plan           { margin-bottom: 22px; }
  .plan-part      { margin-bottom: 20px; }
  .plan-head      { padding-bottom: 18px; margin-bottom: 22px; }
  .plan-promise   { padding: 20px 22px; margin-top: 22px; }
  .planks         { gap: 14px; }
  .plank          { padding: 20px 20px 18px; }
  .quote-band.has-photo { padding: 64px 0; }


  /* stacked buttons read better than two cramped side by side */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }

  /* the signup row was three cramped controls */
  .signup-form { flex-direction: column; align-items: stretch; }
  .signup-form input { flex: 0 0 auto; max-width: none; }   /* in a column the 230px basis became height */
  .signup-form .btn { width: 100%; }

  /* form breathing room */
  .form { padding: 26px 20px; }
  .field { margin-bottom: 16px; }
}

/* iOS zooms the page when a focused text field is under 16px */
@media (max-width: 620px) {
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-size: 16px;
  }
}


/* --- tap targets: everything interactive clears 44px wherever the
       hamburger is showing, i.e. any touch-sized viewport --- */
@media (max-width: 1000px) {
  .brand {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 44px;
  }
  .primary-nav ul a { padding: 13px 0; min-height: 44px; }
  .social { width: 44px; height: 44px; }
  .social svg { width: 20px; height: 20px; }
  .nav-donate { padding: 14px 26px; }
  .hero-actions .btn { padding: 17px 26px; }
  .footer-nav a     { display: inline-block; padding: 10px 0; line-height: 1.6; }
  .footer-social a  { display: inline-block; padding: 13px 0; }
  .footer-contact a { display: inline-block; padding: 11px 0; }
  .checks label { min-height: 48px; align-items: center; padding: 6px 0; }
  .checks input { width: 24px; height: 24px; flex: 0 0 auto; }
  .amount { padding: 20px 10px; }
  .kit-item { padding: 24px 22px; }
}


/* ===========================================================
   BIO CLOSER + CREDENTIAL STRIP
   =========================================================== */

.bio-closer {
  margin: 26px 0 0;
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--navy);
}

/* Boards, awards and degrees as a scannable strip rather than buried
   mid-paragraph where a 15-second reader will never reach them. */
.creditstrip {
  list-style: none;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1.5px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.creditstrip li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--navy-soft);
  background: rgba(14, 31, 57, .05);
  border-radius: 999px;
  padding: 7px 14px;
}

@media (max-width: 1000px) {
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
}


/* ===========================================================
   HERO
   -----------------------------------------------------------
   The cream/navy edge and every stripe share one diagonal:
   from 78% at the top to 47% at the bottom of the hero box.
   All the pieces are full-size layers clipped to that geometry,
   so they stay parallel at any viewport.
   =========================================================== */

.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
  /* The diagonal itself is the bottom edge. A padded gutter here just
     exposed cream under the navy and read as a plinth. */
  min-height: max(680px, min(calc(100vh - 106px), 900px));
  display: flex;
  align-items: center;
}

/* ghost stars on the cream side */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E1F39' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E1F39' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: 300px 300px, 200px 200px;
  background-position: -70px 16%, 40px 74%;
  opacity: .05;
}

.hero-visual {
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--navy);
  clip-path: polygon(74% 0, 100% 0, 100% 100%, 43% 100%);
}
.hero-visual > span { position: absolute; inset: 0; display: block; }

/* the red band rides the leading edge */
.hv-red {
  background: var(--red);
  clip-path: polygon(80% 0, 86.5% 0, 55.5% 100%, 49% 100%);
}
/* soft parallel bands further into the navy */
/* uniform pitch 4.5 points, width 1.6, gap 2.9 -- all parallel to the field */
.hv-band   { background: rgba(150, 185, 235, .18); }
.hv-band-1 { background: rgba(150, 185, 235, .13);
             clip-path: polygon(88.5% 0, 90.1% 0, 59.1% 100%, 57.5% 100%); }
.hv-band-2 { clip-path: polygon(93% 0, 94.6% 0, 63.6% 100%, 62% 100%); }
.hv-band-3 { clip-path: polygon(97.5% 0, 99.1% 0, 68.1% 100%, 66.5% 100%); }
.hv-band-4 { clip-path: polygon(102% 0, 103.6% 0, 72.6% 100%, 71% 100%); }

/* thin gold hairline, lower half only */
.hv-gold {
  background: var(--gold);
  opacity: 1;
  /* was slope 0.257 against the field's 0.31, and sat outside the clip */
  clip-path: polygon(65.2% 40%, 65.62% 40%, 47.02% 100%, 46.6% 100%);
}

.hv-star {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 2l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L12 17.3 6 20.5l1.2-6.7L2.3 9.1l6.8-.9z'/%3E%3C/svg%3E");
  opacity: .13;
}
.hv-star-1 { background-size: 400px 400px; background-position: 94% 8%; }

/* Sized by HEIGHT so the head can never be clipped by the header, whatever
   the copy column does to the hero's height. */
.hero-cutout {
  position: absolute;
  /* sits inside the navy field rather than straddling the red band,
     matching the reference framing */
  right: 8%; bottom: 0;
  height: min(93%, 46vw);
  width: auto;
  /* No max-width: with an explicit height it would clamp the width and
     squash the aspect. Narrow desktops get a shorter height instead. */
  z-index: 2;
  filter: drop-shadow(0 24px 46px rgba(8, 19, 31, .42));
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: min(560px, 44vw);
  padding: clamp(40px, 4.5vw, 72px) 0;
  width: 100%;
}
.hero .wrap { max-width: 1400px; }


/* Needs the flex context its children assume: .ornament i is flex:1 1 auto,
   which does nothing in a block box and collapsed both rules to zero width. */
.ornament { display: flex; align-items: center; gap: 14px; }
.ornament i { flex: 1 1 auto; height: 1.5px; background: var(--red); opacity: .6; }
.ornament svg { width: 14px; height: 14px; fill: var(--red); flex: 0 0 auto; }
.ornament-gold i   { background: var(--gold); opacity: .75; }
.ornament-gold svg { fill: var(--gold); }

.tagline {
  font-family: var(--display);
  /* Two deliberate lines. Holding one line capped this at 50px, which left
     the page's own headline smaller than the serif in the bands below it.
     "HE MEANS" is ~8 caps and "BUSINESS." ~9, so both clear a 560px column
     with room at 76px. */
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0 -2px;   /* Archivo caps sit right of the optical edge */
  max-width: 9ch;
}

.hero-lede {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-soft);
  margin: 20px 0 28px;
}

.creds { list-style: none; margin: 0 0 32px; padding: 0; }
.creds li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500; color: var(--ink);
}
.cred-check { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--red); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 0 0 26px; }
.btn-ico { width: 18px; height: 18px; margin-right: 9px; flex: 0 0 auto; }

.hero-meta {
  font-size: 12px;
  font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy); margin: 0;
  white-space: nowrap;
}

.hero-photo { display: none; }

/* ---------------- stacked ---------------- */

@media (max-width: 1150px) {
  .hero { display: block; min-height: 0; }
  .hero-visual {
    inset: 0 0 auto 0; height: 290px;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  }
  .hv-red   { clip-path: polygon(0 0, 34% 0, 18% 100%, 0 100%); }
  .hv-band-1{ clip-path: polygon(52% 0, 66% 0, 40% 100%, 26% 100%); }
  .hero-visual > .hv-band-2,
  .hero-visual > .hv-band-3,
  .hero-visual > .hv-band-4,
  .hero-visual > .hv-gold { display: none; }
  .hv-star-1 { background-size: 190px 190px; background-position: 86% 30%; }
  .hv-star-2 { display: none; }
  .hero-cutout {
    position: relative; right: auto; bottom: auto;
    height: auto; width: min(72%, 330px); max-width: none;
    margin: 10px auto -8px; display: block;
  }
  /* .hero-inner zeroes side padding so the desktop grid can bleed. Once the
     hero stacks it is a plain column and needs .wrap's gutter back, or the
     copy sits flush against the screen edge. */
  .hero-inner { grid-template-columns: 1fr; padding: 16px 28px 0; }
  /* the -2px optical inset assumes a gutter; without one it clips off-screen */
  .tagline { margin-left: 0; }
  .ornament { max-width: none; }
  .tagline { white-space: normal; }
  .hero-meta { white-space: normal; line-height: 1.6; }
}

@media (max-width: 620px) {
  .hero-visual { height: 220px; }
  .hero-cutout { width: min(80%, 280px); }
  .hero::before { opacity: .03; }
  /* let the 4/5 ratio size the portrait from the column instead */
  .portrait    { min-height: 0; }
  .hero-inner  { padding-left: 20px; padding-right: 20px; }

  /* The credentials list runs 225px on a phone, which pushed both buttons
     below the fold. On a stacked hero the ask should come before the
     evidence, so the order is flipped here only. */
  .hero-copy    { display: flex; flex-direction: column; }
  .tagline      { order: 1; }
  .hero-lede    { order: 2; margin: 18px 0 26px; }
  .hero-actions { order: 3; margin: 0 0 30px; flex-wrap: nowrap; }
  .creds        { order: 4; margin: 0 0 22px; }
  .ornament     { order: 5; margin: 4px 0 14px; }
  .hero-meta    { order: 6; }

  /* flex-basis 100% in a column flex-wrap container is measured against the
     container's HEIGHT, so the two buttons wrapped into a second column and
     the outline button ran off-screen. Pin the basis instead. */
  .hero-actions .btn { flex: 0 0 auto; width: 100%; }

  /* spacing at the foot of the stacked hero: the desktop ornament margin
     (26px, higher specificity) plus the list's own margins left a ~75px hole
     under the credentials, and the date line sat right on the star band */
  .creds li:last-child   { margin-bottom: 0; }
  .creds                 { margin-bottom: 26px; }
  .hero .hero-copy .ornament-gold { margin: 0 0 14px; }   /* beats the later .hero .ornament-gold */
  .hero-inner            { padding-bottom: 30px; }
  /* one fact per line instead of breaking "City of / Roseburg" */
  .hero-meta span        { display: block; }
  .hero-meta .hero-meta-dot { display: none; }
}


/* ===========================================================
   HEADER CREST  (gold star ornament above the wordmark)
   =========================================================== */

.brand-crest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.crest-rule {
  flex: 1 1 auto;
  height: 2px;
  background: var(--red-bright);
  opacity: .85;
}
.crest-star { width: 16px; height: 16px; fill: var(--gold); flex: 0 0 auto; }

.brand-sub .brand-stars { max-width: 52px; min-width: 32px; height: 13px; }
.brand-footer .brand-crest { display: none; }


/* ===========================================================
   BIO PORTRAIT
   -----------------------------------------------------------
   These rules were lost when the hero block was rewritten, which
   left .photo-placeholder with no base display and so it rendered
   on top of a perfectly good photo.
   =========================================================== */

.portrait {
  position: relative;
  /* aspect-ratio plus a min-height derives a WIDTH. Without this cap the
     420px min-height below computed to a 336px box that overran the gutter
     and gave the whole page a horizontal scrollbar on phones. */
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream-deep);
  aspect-ratio: 4 / 5;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.portrait::before {
  content: '';
  position: absolute; inset: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
}

/* only visible when the <img> actually failed and JS added .is-empty */
.photo-placeholder { display: none; }
.portrait.is-empty .photo-placeholder {
  display: flex;
  position: absolute; inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 28px;
  background:
    repeating-linear-gradient(45deg, rgba(14,31,57,.045) 0 14px, transparent 14px 28px),
    var(--cream-deep);
  border: 2px dashed rgba(14,31,57,.28);
  border-radius: var(--radius-lg);
  color: var(--navy-soft);
}
.portrait.is-empty::before { display: none; }
.photo-placeholder span {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
}
.photo-placeholder small {
  font-size: 12.5px; opacity: .7;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}



.hero .ornament-gold { margin: 26px 0 16px; }


/* ===========================================================
   COMMITMENT BAND
   -----------------------------------------------------------
   A navy ribbon over the Roseburg aerial, lens-shaped: the top
   edge bows up and the bottom edge bows down, each traced by a
   red hairline. The curves are SVG so the fill and the stroke
   follow exactly the same path.
   =========================================================== */

.quote-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(96px, 11vw, 168px) 0;
  text-align: center;
}

.quote-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: 0;
}
.quote-band::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,31,57,.92) 0%, rgba(14,31,57,.80) 45%, rgba(14,31,57,.92) 100%),
    rgba(14,31,57,.30);
}
.quote-band .wrap { position: relative; z-index: 3; }

/* --- curved edges with their red hairline --- */
.qb-edge {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: clamp(34px, 4vw, 60px);
  z-index: 4;
  display: block;
}
.qb-edge-top    { top: 0; }
.qb-edge-bottom { bottom: 0; }
.qb-fill { fill: var(--cream); }
/* Endorsements now sits directly above Donate, so the curve at the top of
   the donate section has a navy section above it, not a light one. Filling
   it cream would paint a white band across two dark sections. */
#endorsements + .section-donate .qb-fill { fill: var(--navy); }
.qb-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}

/* --- eyebrow with flanking rules --- */
.qb-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 26px;
}
.qb-eyebrow i {
  width: clamp(50px, 7vw, 110px);
  height: 2px;
  background: var(--red);
  flex: 0 0 auto;
}
.qb-eyebrow span {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-warm);
  white-space: nowrap;
}

/* --- the line itself --- */
.quote-band blockquote { margin: 0 auto; }
.quote-band blockquote p {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 3.9vw, 58px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  /* em-relative so the two-line break holds as the clamp scales.
     ch is far too narrow in a high-contrast serif. */
  max-width: 13em;
  margin: 0 auto 26px;
  text-wrap: balance;
}
.quote-band cite {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-warm);
}
.quote-band cite b { color: #E05956; font-weight: 700; }   /* 3.36 -> 4.50 on navy */

@media (max-width: 620px) {
  .quote-band { padding: 72px 0; }
  .quote-band blockquote p { max-width: 11em; }
  .qb-eyebrow { gap: 12px; }
  .qb-eyebrow i { width: 34px; }
  .qb-eyebrow span { font-size: 12px; letter-spacing: 0.2em; }
  .qb-line { stroke-width: 4; }
}


/* ===========================================================
   STAR MARQUEE
   Sits between the hero and the next section as its own element,
   never inside the hero (that left a cream gutter under the navy).
   =========================================================== */

.star-rule {
  height: 34px;
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='34' viewBox='0 0 42 34'%3E%3Cpath fill='%23B42521' d='M21 8l2.9 6.2 6.8.9-4.9 4.7 1.2 6.7L21 23.3 15 26.5l1.2-6.7-4.9-4.7 6.8-.9z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  animation: starScroll 46s linear infinite;
}
@keyframes starScroll {
  from { background-position-x: 0; }
  to   { background-position-x: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .star-rule { animation: none; }
}
@media (max-width: 620px) { .star-rule { height: 26px; background-size: 32px 26px; } }


/* ===========================================================
   PRIORITY PLANKS
   =========================================================== */

/* eyebrow with rules and bracket ticks either side */
.rule-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
}
.rule-eyebrow i { width: clamp(40px, 6vw, 96px); height: 2px; background: var(--red); flex: 0 0 auto; }
.rule-eyebrow b { width: 3px; height: 14px; background: var(--red); flex: 0 0 auto; border-radius: 1px; }
.rule-eyebrow span {
  font-family: var(--body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}

/* two-tone headline */
.split-head { margin-bottom: 16px; }
.split-head em { font-style: normal; color: var(--red); }

.section-closer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 52px 0 0;
}
.section-closer i { flex: 1 1 auto; max-width: 200px; height: 1px; background: rgba(14,31,57,.28); }
.section-closer span {
  font-family: var(--body);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--navy-soft); white-space: nowrap;
}

.planks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;   /* must exceed the card's own 30px padding */
}

.plank {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon num"
    "icon title"
    "desc desc"
    "rule rule"
    "tag  tag";
  column-gap: 20px;
  align-content: start;
  text-decoration: none;
  background: var(--cream-warm);
  border: 1.5px solid rgba(14, 31, 57, .08);
  border-radius: 16px;
  padding: 32px 30px 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .4s var(--ease);
}
.plank:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(180, 37, 33, .28);
}

/* The card is a link, and a button cannot live inside a link, so each card
   sits in a wrapper and the video button is laid over the card's lower edge. */
.plank-wrap { position: relative; display: flex; }
.plank-wrap > .plank { flex: 1 1 auto; }
.plank-wrap.has-actions > .plank { padding-bottom: 88px; }
.plank-wrap.has-video.has-actions > .plank { padding-bottom: 142px; }
.plank-wrap:hover > .plank {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(180, 37, 33, .28);
}

/* Buttons sit over the card's lower edge, stacked: video on top, idea below. */
.plank-actions {
  position: absolute;
  left: 30px; right: 30px; bottom: 26px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  pointer-events: none;   /* only the buttons themselves take clicks */
  transition: transform .45s var(--ease-out);
}
.plank-actions > button { pointer-events: auto; }
.plank-wrap:hover .plank-actions { transform: translateY(-6px); }

.plank-video {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 10px 18px 10px 12px;
  border: 0; border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .45s var(--ease-out), background .3s var(--ease);
}
.plank-video svg {
  width: 22px; height: 22px; padding: 5px;
  border-radius: 50%;
  background: var(--red-bright);
  fill: #fff;
  box-sizing: border-box;
}
.plank-video:hover { background: var(--red); }
.plank-video:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }

.plank-idea {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 9px 16px 9px 11px;
  border: 1.5px solid rgba(14, 31, 57, .22); border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.plank-idea svg, .idea-link svg {
  width: 22px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.plank-idea:hover { border-color: var(--red); background: rgba(180, 37, 33, .05); }
.plank-idea:focus-visible, .idea-link:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }

/* invite at the foot of each plan */
.plan-idea { margin: 26px 0 0; }
.idea-link {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px;
  border: 1.5px dashed rgba(14, 31, 57, .25); border-radius: 12px;
  background: transparent;
  font-family: var(--body); font-size: 15px; color: var(--ink-soft); text-align: left;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.idea-link b { color: var(--red); font-weight: 700; white-space: nowrap; }
.idea-link:hover { border-color: var(--red); background: rgba(180, 37, 33, .04); }

/* ---- idea form pop-up ---- */
.idea-modal {
  width: min(620px, 94vw);
  max-height: 92dvh;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: visible;
}
.idea-modal::backdrop { background: rgba(8, 19, 31, .80); }
.idea-body { max-height: 92dvh; overflow-y: auto; padding: 38px 40px 34px; border-radius: inherit; }
.idea-body .eyebrow { margin: 0 0 6px; }
.idea-body h2 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 34px); }
.idea-intro { margin: 0 0 24px; color: var(--ink-soft); }
.idea-close { top: -14px; right: -14px; }
.idea-form .field { margin-bottom: 18px; }
.idea-form select {
  width: 100%;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  padding: 13px 16px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.idea-form select:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 4px rgba(14, 31, 57, .09); }
.idea-kinds { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.idea-kinds legend {
  font-weight: 600; font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy);
  padding: 0; margin-bottom: 10px;
}
.idea-kinds label { position: relative; cursor: pointer; }
.idea-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.idea-kinds span {
  display: inline-block;
  padding: 9px 15px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 14.5px; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.idea-kinds label:hover span { border-color: var(--navy); color: var(--navy); }
.idea-kinds input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.idea-kinds input:focus-visible + span { outline: 3px solid var(--red-bright); outline-offset: 2px; }
.idea-checks { margin: 2px 0 22px; display: grid; gap: 6px; }
.idea-checks label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; }
.idea-checks input { width: 18px; height: 18px; accent-color: var(--red); flex: 0 0 auto; }
.idea-thanks { text-align: center; padding: 20px 0 6px; }
.idea-thanks p { color: var(--ink-soft); margin: 0 auto 24px; max-width: 420px; }
@media (max-width: 620px) {
  .idea-body { padding: 30px 22px 26px; }
  .idea-close { top: 8px; right: 8px; }
  .idea-body .field-row { grid-template-columns: 1fr; gap: 0; }
}


/* the summary video button sits in the bio, not over a card, so it needs its
   own positioning instead of the absolute placement the plank buttons use */
.bio-video { margin: 4px 0 26px; }
.bio-video-btn {
  position: static;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px;
  padding: 11px 20px 11px 13px;
  border: 0; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .02em; cursor: pointer;
  transition: background .3s var(--ease), transform .35s var(--ease-out);
}
.bio-video-btn:hover { background: var(--red); transform: translateY(-2px); }
.bio-video-btn:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }

/* ---- video player ---- */
.video-modal {
  padding: 0; border: 0;
  background: transparent;
  max-width: 94vw; max-height: 94dvh;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(8, 19, 31, .88); }
.video-player {
  display: block;
  height: min(86dvh, 900px);
  aspect-ratio: 9 / 16;
  max-width: 94vw;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* landscape videos (filmed 16:9) need the opposite constraint: fit the width
   and let the height follow, or they come out letterboxed inside a tall box */
.video-player.is-landscape {
  height: auto;
  width: min(94vw, 1180px);
  max-height: 86dvh;
  aspect-ratio: 16 / 9;
}

.video-close {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.video-close svg { width: 18px; height: 18px; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.video-close:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }
@media (max-width: 620px) {
  .video-close { top: 8px; right: 8px; }
  .plank-actions { left: 22px; right: 22px; bottom: 22px; }
}

.plank-icon {
  grid-area: icon;
  align-self: start;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--red);
  transition: transform .5s var(--ease-out);
}
.plank-icon svg { width: 30px; height: 30px; fill: var(--cream-warm); color: var(--cream-warm); }
.plank:hover .plank-icon { transform: scale(1.06) rotate(-4deg); }

.plank-num {
  grid-area: num;
  align-self: end;
  font-family: var(--display);
  font-size: 19px; font-weight: 700; line-height: 1;
  letter-spacing: .04em;
  color: rgba(14, 31, 57, .55);   /* .30 was 1.91:1, under the 3.0 large-text minimum */
  margin-bottom: 4px;
}
.plank-title {
  grid-area: title;
  font-family: var(--display);
  font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.12;
  color: var(--navy);
}
.plank-line {
  grid-area: desc;
  margin-top: 18px;
  font-size: 16px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 26ch;
}
.plank-rule {
  grid-area: rule;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--red);
  margin: 20px 0 14px;
  transition: width .5s var(--ease-out);
}
.plank:hover .plank-rule { width: 76px; }
.plank-tag {
  grid-area: tag;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .2px;
  color: var(--red);
}

@media (max-width: 620px) {
  .planks { gap: 16px; }
  .plank { padding: 26px 22px 24px; column-gap: 16px; }
  .plank-icon { width: 52px; height: 52px; }
  .plank-icon svg { width: 25px; height: 25px; }
  .plank-title { font-size: 21px; }
  .section-closer { gap: 12px; margin-top: 36px; }
  .section-closer span { font-size: 12px; letter-spacing: .15em; white-space: normal; text-align: center; }
  .rule-eyebrow { gap: 9px; }
  .rule-eyebrow i { width: 28px; }
}
/* longer labels ("Moving Roseburg Forward") need the room on small phones */
@media (max-width: 400px) {
  .rule-eyebrow i { display: none; }
  .rule-eyebrow span { letter-spacing: 0.16em; }
}


/* ===========================================================
   DONATE BAND
   =========================================================== */

.section-donate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-deep);
  padding: clamp(96px, 10vw, 150px) 0 clamp(84px, 9vw, 130px);
  text-align: center;
}
/* a faint ridge line so the band is not a flat slab */
.dn-ridge {
  position: absolute;
  left: -5%; right: -5%; bottom: 0;
  height: 46%;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 18% 100%, rgba(36,64,107,.55), transparent 62%),
    radial-gradient(110% 100% at 74% 100%, rgba(36,64,107,.42), transparent 60%),
    radial-gradient(90% 100% at 46% 100%,  rgba(36,64,107,.30), transparent 58%);
}
.section-donate > .wrap { position: relative; z-index: 2; }

/* #D2352B on navy-deep is 3.81:1 and fails AA for text; #DD4743 is 4.50 */
.rule-eyebrow.light span { color: #DD4743; }
.rule-eyebrow.light i    { background: #DD4743; }

/* serif headline, two-tone like the reference */
.serif-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 3.9vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream-warm);
  margin: 0 0 22px;
  text-transform: none;
}
.serif-head em { font-style: normal; color: var(--red-bright); }

.section-donate .section-intro {
  color: rgba(255, 255, 255, .84);
  max-width: 640px;
  margin-bottom: 44px;
}

/* --- amount tiers --- */
.amounts {
  display: grid;
  /* MUST equal the number of .amount tiles, or the row sits off centre. */
  grid-template-columns: repeat(4, 1fr);
  /* keeps both rows the same height when a label wraps and its neighbours
     do not, which otherwise leaves a visible step between the rows */
  grid-auto-rows: 1fr;
  gap: 22px;
  margin: 0 0 24px;
}
.amount {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  padding: 26px 14px 20px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .42);   /* 1.84 -> 3.05, UI component min */
  background: rgba(255, 255, 255, .035);
  transition: transform .35s var(--ease-out), border-color .3s var(--ease),
              background .3s var(--ease), box-shadow .35s var(--ease-out);
}
.amount:hover {
  transform: translateY(-5px);
  border-color: var(--red-bright);
  background: rgba(180, 37, 33, .14);
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}
.amt-val {
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--cream-warm);
}
.amt-rule {
  width: 30px; height: 2px; border-radius: 1px;
  background: var(--red-bright);
  margin: 12px 0 11px;
  transition: width .4s var(--ease-out);
}
.amount:hover .amt-rule { width: 52px; }
.amt-label {
  font-family: var(--body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  line-height: 1.3;
}

.amount-popular {
  border-color: var(--red-bright);
  background: rgba(180, 37, 33, .16);
}
.amt-flag {
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--red-bright);
  color: var(--cream-warm);
  font-family: var(--body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- other amount --- */
.amount-other {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 19px 28px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .42);
  color: var(--cream-warm);
  text-decoration: none;
  font-family: var(--body);
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform .35s var(--ease-out), border-color .3s var(--ease),
              background .3s var(--ease);
}
.amount-other svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.amount-other:hover { border-color: var(--red-bright); background: rgba(180,37,33,.14); transform: translateY(-3px); }
.amount-other:hover svg { transform: translateX(5px); }

/* --- fineprint with the Oregon mark --- */
.donate-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 46px auto 0;
  max-width: 640px;
  text-align: left;
}
.or-mark {
  width: 46px; height: auto;
  flex: 0 0 auto;
  color: var(--red-bright);
  overflow: visible;   /* belt and braces against edge clipping */
}
.donate-note p {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .24);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

@media (max-width: 1000px) {
  /* 4 across holds to 620px: labels wrap to two lines but never overflow.
     Any narrower breakpoint must be declared AFTER this rule or it loses
     the cascade, which is exactly what happened the first time. */
  .amounts { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (max-width: 620px) {
  .section-donate { padding: 72px 0 64px; }
  .amounts { grid-template-columns: repeat(2, 1fr); gap: 12px; }   /* 2x2, still balanced */
  .amount { padding: 22px 10px 18px; }
  .amt-label { font-size: 11px; letter-spacing: .12em; }
  .amount-other { width: 100%; justify-content: center; }
  .donate-note { flex-direction: column; gap: 14px; text-align: center; }
  .donate-note p { padding-left: 0; border-left: 0; }
}


/* ===========================================================
   PLAN HASHTAGS
   These had NO base rule: only a max-width:620px override existed,
   so above 620px they rendered as plain body ink.
   =========================================================== */

.hashtag {
  display: inline-block;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--red);
  text-decoration: none;
}
.hashtag-static { cursor: default; }
a.hashtag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bringhurst 2.1.2: 45-75 characters. The plan cards sit in .wrap, giving a
   1040px measure at 17px = ~122 characters, roughly double the ceiling. */
.plan-part p, .plan-steps li, .plan-promise p { max-width: 62ch; }
.disclaimer p { max-width: 60ch; }
/* cap the caption's TEXT, not its bar: max-width here shrank the background */
.plan-photo figcaption { max-width: none; }
.plan-photo figcaption span { display: block; max-width: 60ch; }
.donate-note p { max-width: 52ch; }


/* ===========================================================
   GLOSSARY TERM
   -----------------------------------------------------------
   Steve's ask: let people hover "ACE Parking" and find out what
   it is. Built as a real <button> rather than a title attribute,
   because title tooltips never appear on a phone and most of
   this traffic is phones. Hover works on desktop, tap works
   everywhere, Escape and outside-click dismiss.
   =========================================================== */

.term-wrap { position: relative; display: inline-block; }

.term {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.term::after {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  margin-left: 4px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
}
.term:hover, .term:focus-visible { color: var(--red); }
.term:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.term-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  /* --shift is set by script.js when the bubble would run off a narrow screen */
  transform: translateX(calc(-50% + var(--shift, 0px)));
  z-index: 40;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 11px 14px;
  background: var(--navy);
  color: #fff;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(14, 31, 57, .28);
}
.term-pop[hidden] { display: none; }

/* `hidden` has to beat the display rules that flex and grid items carry,
   otherwise a hidden nav button still takes up its slot. */
[hidden] { display: none !important; }
.term-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--navy);
}
/* flipped below the term when there is no room above */
.term-pop.below { bottom: auto; top: calc(100% + 10px); }
.term-pop.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--navy);
}

/* Spam trap: hidden from people, filled in by bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }