/* Type: Newsreader for headings, Libre Franklin for everything else.

   Both are picked for provenance, not novelty. Libre Franklin is a revival of
   Franklin Gothic - the face American campaign print and newspaper headlines
   have used for over a century, which is exactly the room this site is in. It
   also carries real tabular figures, which the receipt module needs. Newsreader
   was drawn for on-screen news and has optical sizing, so the masthead-scale
   headings and the 20px subheads are genuinely different cuts rather than one
   outline scaled up and down.

   Deliberately NOT the DM Serif Display + Inter pairing this started on. That
   combination has become the house style of generated templates, and on a
   candidate site looking machine-made costs trust that nothing else buys back.

   SELF-HOSTED, not pulled from Google. Google ships display=swap, and because
   the stylesheet is render-blocking while the font files are not, the page
   painted in the fallback and then reflowed - CLS 0.24 on the text-heavy pages,
   from a shift that never appears on a warm cache and so is easy to miss.
   Serving them same-origin and preloaded took every page to CLS 0, and it drops
   two third-party origins from a political site, which is the same argument the
   privacy policy already makes.

   Latin subsets, variable weight axes. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --brand-primary: #1C1951;
  --brand-secondary: #2B2770;
  --brand-accent: #C62B32;
  --brand-neutral: #16181F;
  --brand-bg: #FFFFFF;
  --brand-on-primary: #FFFFFF;

  --color-primary: var(--brand-primary);
  --color-accent: var(--brand-accent);

  --color-accent-text: #C62B32; /* 5.54:1 on white, 5.08:1 on cream, white on it 5.54:1 */
  --color-accent-on-dark: #E06A70; /* 4.95:1 on #1C1951 - raw accent is 2.90:1 there and fails */
  --focus-ring: #C62B32;

  --c-bg: #FFFFFF;
  --c-cream: #F4F2EC;
  --c-text: #16181F; /* 11.29:1 on cream */
  --c-muted-text: #4A4D57;
  --c-border: #DCD7CC;
  --c-rule: #C9C2B4;
  --c-inverse: #FFFFFF;

  --font-head: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --radius: 2px;
  --radius-photo: 6px;
  --shadow-card: 0 1px 2px rgba(22, 24, 31, .05), 0 8px 24px rgba(22, 24, 31, .06);
  --shadow-lift: 0 2px 6px rgba(22, 24, 31, .08), 0 18px 40px rgba(22, 24, 31, .10);

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --container: 1180px;

  --dur-base: 250ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 var(--sp-4);
  color: var(--brand-primary);
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-text); }

strong { font-weight: 600; }

.skip-link {
  background: var(--brand-primary);
  color: var(--c-inverse);
  border-radius: var(--radius);
}

.gw-container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.gw-section { padding-block: var(--section-y); }
.gw-section--cream { background: var(--c-cream); }
.gw-section--navy { background: var(--brand-primary); color: rgba(255, 255, 255, .88); }
.gw-section--navy h2,
.gw-section--navy h3 { color: var(--c-inverse); }

.gw-eyebrow {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-4);
}
.gw-section--navy .gw-eyebrow { color: var(--color-accent-on-dark); }

.gw-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
@media (max-width: 620px) { .gw-h2 br { display: none; } }
.gw-h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }

.gw-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--c-muted-text);
  max-width: 62ch;
}
.gw-section--navy .gw-lede { color: rgba(255, 255, 255, .82); }

.gw-starrule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-8);
  color: var(--c-rule);
}
.gw-starrule::before,
.gw-starrule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.gw-starrule svg { width: 14px; height: 14px; flex: none; color: var(--color-accent-text); }
.gw-section--navy .gw-starrule { color: rgba(255, 255, 255, .35); }
.gw-section--navy .gw-starrule svg { color: var(--color-accent-on-dark); }

.gw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.gw-btn:hover { transform: translateY(-1px); }

.gw-btn-primary {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: var(--c-inverse);
}
.gw-btn-primary:hover { background: #A81F26; border-color: #A81F26; color: var(--c-inverse); }

.gw-btn-outline {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.gw-btn-outline:hover { background: var(--brand-primary); color: var(--c-inverse); }

.gw-section--navy .gw-btn-outline,
.gw-hero .gw-btn-outline,
.gw-pagehead .gw-btn-outline {
  border-color: rgba(255, 255, 255, .55);
  color: var(--c-inverse);
}
.gw-section--navy .gw-btn-outline:hover,
.gw-hero .gw-btn-outline:hover,
.gw-pagehead .gw-btn-outline:hover { background: var(--c-inverse); color: var(--brand-primary); }

.gw-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
/* Shares the centred reading block's left edge instead of snapping back to the
   container edge, which left the section with three different left margins. */
.gw-btn-row--measure { max-width: 1000px; margin-inline: auto; }

/* ============================================================================
   SITE CHROME - sits outside .gw-page, so it uses --brand-* and literals only
   ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand-primary);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-header__inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #FFFFFF;
}
.brand:hover { color: #FFFFFF; }
.brand__mark { display: inline-flex; }
.brand__mark svg { width: 36px; height: 36px; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .01em;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--font-body);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-top: .25rem;
}

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop a {
  display: inline-block;
  padding: .6rem .8rem;
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
}
.nav-desktop a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .10); }
.nav-desktop a[aria-current="page"] {
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 var(--color-accent-on-dark);
}
.nav-desktop a.cta {
  margin-left: var(--sp-3);
  background: var(--brand-accent);
  color: #FFFFFF;
  padding: .65rem 1.2rem;
  font-weight: 600;
}
.nav-desktop a.cta:hover { background: #E0343C; color: #FFFFFF; }

.nav-desktop .has-dropdown { position: relative; }
.nav-desktop .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: .4rem;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #DCD7CC;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-desktop .has-dropdown:hover .dropdown,
.nav-desktop .has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-desktop .dropdown a { display: block; color: var(--brand-primary); }
.nav-desktop .dropdown a:hover { background: #F4F2EC; color: var(--brand-primary); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  color: #FFFFFF;
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }

.nav-mobile {
  background: var(--brand-primary);
  color: #FFFFFF;
  padding: var(--sp-16) var(--sp-6) var(--sp-8);
  overflow-y: auto;
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.nav-mobile a,
.nav-mobile summary {
  display: block;
  padding: .95rem .25rem;
  color: rgba(255, 255, 255, .92);
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
}
.nav-mobile a:hover,
.nav-mobile summary:hover { color: #FFFFFF; }
.nav-mobile a[aria-current="page"] { color: var(--color-accent-on-dark); font-weight: 600; }
.nav-mobile details ul { padding-left: var(--sp-4); padding-bottom: var(--sp-2); }
.nav-mobile details ul a { padding: .6rem .25rem; font-size: 1rem; color: rgba(255, 255, 255, .8); }
.nav-mobile__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}

.site-footer {
  position: relative;
  background: var(--brand-primary);
  color: rgba(255, 255, 255, .74);
  padding: 0 0 var(--sp-8);
  font-size: .9375rem;
}
/* The diagonal band is an IN-FLOW block, not an absolutely positioned overlay.
   As an overlay it made every piece of footer text undeterminable to axe -
   0 real contrast failures, 20 "incomplete" results that pa11y escalates into
   errors. Taking it out of the overlap resolves all of them, and the band looks
   identical. */
.site-footer::before {
  content: "";
  display: block;
  height: 46px;
  background: var(--brand-accent);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 0 100%);
}
.site-footer__grid {
  position: relative;
  margin-top: var(--sp-16);
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: var(--sp-8);
}
.site-footer .brand { margin-bottom: var(--sp-4); }
.site-footer__tagline { color: rgba(255, 255, 255, .82); max-width: 34ch; }
.site-footer__address {
  font-style: normal;
  line-height: 1.9;
  color: rgba(255, 255, 255, .74);
}
.site-footer__address a { color: #FFFFFF; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer li a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer li a:hover { color: #FFFFFF; text-decoration: underline; }

.site-footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.site-footer__social li { margin: 0; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  color: #FFFFFF;
}
.site-footer__social svg { width: 18px; height: 18px; }

.site-footer__bottom {
  width: min(100% - 2.5rem, var(--container));
  margin: var(--sp-12) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  align-items: baseline;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .7);
}
.site-footer__bottom a { color: rgba(255, 255, 255, .88); }

.site-footer__disclaimer {
  width: min(100% - 2.5rem, var(--container));
  margin: var(--sp-12) auto 0;
  padding: var(--sp-4) 0 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .86);
  letter-spacing: .01em;
}
.site-footer__disclaimer + .site-footer__bottom { margin-top: var(--sp-6); }

.spark-mark {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  margin-left: .15em;
  vertical-align: -.5em;
}

.breadcrumbs {
  width: min(100% - 2.5rem, var(--container));
  margin: var(--sp-6) auto 0;
  font-size: .8125rem;
  color: var(--c-muted-text);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--c-rule); }
.breadcrumbs a { color: var(--c-muted-text); }

/* [hidden] MUST win. A bare `display: flex` on this class beats the UA
   stylesheet's `[hidden] { display: none }`, which meant the "Got it" button
   stored the acknowledgement and set the attribute while the bar stayed on
   screen forever - and returning visitors, who are never re-prompted by the
   JS, still saw it on every page. */
.consent-banner[hidden] { display: none; }

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--brand-primary);
  color: rgba(255, 255, 255, .92);
  border-top: 3px solid var(--brand-accent);
  font-size: .9375rem;
}
.consent-banner.is-visible { transform: none; opacity: 1; }
.consent-banner__text { margin: 0; max-width: 70ch; }
.consent-banner__text a { color: #FFFFFF; }
.consent-banner .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6rem 1.4rem;
  border: 2px solid #C62B32;
  border-radius: var(--radius);
  background: #C62B32;
  color: #FFFFFF;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.consent-banner .btn:hover { background: #A81F26; border-color: #A81F26; }

/* ============================================================================
   PAGE
   ============================================================================ */
.gw-page { display: block; }

/* ---- Hero: The Ballot Line ---- */
.gw-hero {
  position: relative;
  background: var(--brand-primary);
  color: rgba(255, 255, 255, .86);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
/* One 6-degree band, not a half-field. At any real width the red must stay a
   BAND - washed back over navy it turns muddy maroon and reads as a mistake.
   The cream hairline is load-bearing: raw #C62B32 on #1C1951 is 2.90:1 and
   fails even the 3:1 non-text threshold, so the band needs its own edge.

   It hangs off the RIGHT COLUMN, not off .gw-hero. Scoped to the whole hero it
   sat in the same stacking area as the headline and made the h1, eyebrow, lead
   and both buttons unresolvable to automated contrast checkers - five
   review flags on text that actually measures 16:1. */
.gw-hero__object { position: relative; }
.gw-hero__object::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -14%;
  width: 150px;
  height: 220%;
  background: var(--brand-accent);
  border-left: 3px solid var(--c-cream);
  transform: rotate(6deg);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.gw-hero__object .gw-ballot { position: relative; z-index: 1; }
.gw-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.gw-hero h1 {
  font-size: clamp(2.5rem, 5.8vw, 4.2rem);
  color: #FFFFFF;
  margin-bottom: var(--sp-6);
}
.gw-hero__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--sp-4);
}
.gw-hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: rgba(255, 255, 255, .85);
  max-width: 54ch;
}

.gw-ballot {
  position: relative;
  background: var(--c-cream);
  color: var(--brand-primary);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.gw-ballot::before {
  content: "";
  position: absolute;
  top: -36px;
  right: -70px;
  width: 230px;
  height: 74px;
  background: var(--brand-accent);
  transform: rotate(6deg);
}
.gw-ballot__label {
  position: relative;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-text);
  margin-bottom: var(--sp-2);
}
.gw-ballot__date {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  margin-bottom: var(--sp-6);
}
.gw-ballot__office {
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--sp-3);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted-text);
  margin-bottom: var(--sp-6);
}
.gw-ballot__pick { display: flex; align-items: center; gap: var(--sp-4); }
.gw-ballot__box {
  flex: none;
  width: 44px;
  height: 44px;
  border: 3px solid var(--brand-primary);
  display: grid;
  place-items: center;
}
.gw-ballot__box svg { width: 28px; height: 28px; color: var(--color-accent-text); }
.gw-ballot__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
}

/* ---- Hero ballot card WITH the candidate portrait ----
   The photo and the ballot are one cream card, not a photo sitting on top of a
   card. Two blocks of the same cream with a gap between them read as one card
   that has split in half, which is why there is no margin here and the body
   text is inset instead. The diagonal red flag is suppressed: over a photograph
   it lands as a stray red wedge across Greg's shoulder rather than a flag, so
   the accent is spent on the rule under the photo instead - one place, not two. */
.gw-ballot--photo { padding: 0 0 var(--sp-6); }
.gw-ballot--photo::before { display: none; }
.gw-ballot__photo { position: relative; margin: 0 0 var(--sp-6); }
.gw-ballot__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* The source is a 9:10 portrait. 5:4 with the frame pulled up to 30% keeps the
     face large and crops most of the crowd behind him out of shot. */
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 30%;
}
.gw-ballot__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--brand-accent);
}
.gw-ballot__body { padding-inline: var(--sp-6); }

/* ---- The Two Receipts (signature moment) ---- */
.gw-receipts {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: var(--sp-12);
}
.gw-receipts__rule { background: var(--c-rule); align-self: stretch; }

.gw-tape {
  position: relative;
  background: #FFFFFF;
  padding: var(--sp-8) var(--sp-6);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  box-shadow: var(--shadow-card);
  -webkit-mask-image:
    radial-gradient(9px at 9px 100%, transparent 98%, #000 100%),
    radial-gradient(9px at 9px 0, transparent 98%, #000 100%);
  mask-image:
    radial-gradient(9px at 9px 100%, transparent 98%, #000 100%),
    radial-gradient(9px at 9px 0, transparent 98%, #000 100%);
  -webkit-mask-size: 18px 51%, 18px 51%;
  mask-size: 18px 51%, 18px 51%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom, top;
  mask-position: bottom, top;
}
.gw-tape--theirs { color: #52555E; }
.gw-tape--ours { color: var(--brand-primary); }

.gw-tape__kicker {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.gw-tape--theirs .gw-tape__kicker { color: #5C5F68; }
.gw-tape--ours .gw-tape__kicker { color: var(--color-accent-text); }

.gw-tape__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
  color: inherit;
  margin-bottom: var(--sp-6);
}
.gw-tape__lines { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.gw-tape__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: .5rem;
  border-bottom: 1px dotted var(--c-rule);
}
.gw-tape__lines li span:last-child { font-weight: 600; white-space: nowrap; }

.gw-tape__totalbar {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 3px solid currentColor;
}
.gw-tape__totallabel {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.gw-tape__total { font-family: var(--font-head); font-weight: 600; line-height: .95; display: block; }
.gw-tape--ours .gw-tape__total {
  font-size: clamp(2.8rem, 7vw, 4.75rem);
  color: var(--color-accent-text);
}
.gw-tape--theirs .gw-tape__total { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
.gw-tape__per {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gw-center { text-align: center; }
.gw-faq__title { margin-bottom: var(--sp-8); }
/* Two reading columns on wide screens. Fits the newsprint metaphor, and stops
   a 68ch column stranding half the section in whitespace. */
/* Two newspaper columns, centred and balanced. `break-inside: avoid` was
   forcing whole paragraphs into a column, so four paragraphs of unequal length
   split 2/2 and left the first column half empty against a full second one.
   Letting text break lets the browser balance the two properly. */
/* Two classes on purpose: .gw-prose caps at 68ch and would otherwise win,
   leaving the commentary at a different width from the note and the button
   below it - three left edges in one section. */
.gw-receipts__body.gw-prose {
  margin: var(--sp-12) auto 0;
  max-width: 1000px;
}
@media (min-width: 861px) {
  .gw-receipts__body {
    column-count: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
    column-rule: 1px solid var(--c-rule);
    column-fill: balance;
  }
}

.gw-receipts__note {
  max-width: 1000px;
  margin-top: var(--sp-8);
  margin-inline: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--c-muted-text);
}

/* ---- Four pillars, asymmetric bento ---- */
.gw-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}
.gw-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.gw-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: inherit; }
.gw-tile__icon { width: 40px; height: 40px; color: var(--color-accent-text); }
.gw-tile h3 { font-size: 1.35rem; margin: 0; }
.gw-tile p { font-size: .9375rem; color: var(--c-muted-text); margin: 0; }
.gw-tile__more {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-accent-text);
}

.gw-tile--lead {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: rgba(255, 255, 255, .86);
}
.gw-tile--lead h3 { color: #FFFFFF; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.gw-tile--lead p { color: rgba(255, 255, 255, .84); font-size: 1.0625rem; }
.gw-tile--lead .gw-tile__icon,
.gw-tile--lead .gw-tile__more { color: var(--color-accent-on-dark); }
.gw-tile--wide { grid-column: span 2; }

/* Fills the tall lead tile with the campaign's load-bearing number instead of
   letting margin-top:auto open a hole under the paragraph. */
.gw-tile__figure {
  margin-top: auto;
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.gw-tile__stat {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.75rem);
  line-height: .95;
  color: var(--color-accent-on-dark);
  font-variant-numeric: tabular-nums;
}
.gw-tile__statlabel {
  display: block;
  margin-top: var(--sp-3);
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  max-width: 34ch;
}
.gw-tile--lead .gw-tile__more { margin-top: var(--sp-8); padding-top: 0; }

/* ---- Record: horizontal scroll-snap timeline ---- */
/* Wraps rather than scrolls. A horizontal scroll strip clipped the fifth stop
   at the container edge on desktop, which reads as broken rather than as
   "there is more over here". */
.gw-timeline {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-8) var(--sp-6);
  padding-bottom: var(--sp-6);
  /* Each stop's axis rule deliberately overhangs into the gap so the line reads
     as continuous. On the last column that overhang becomes page-wide
     horizontal scroll, so the grid clips it. The star nodes sit at the top-left
     of each stop and are never clipped by this. */
  overflow: hidden;
}
.gw-stop { padding-top: var(--sp-8); position: relative; }
.gw-stop::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: calc(var(--sp-6) * -1);
  height: 1px;
  background: rgba(255, 255, 255, .3);
}
.gw-stop:last-child::before { right: 0; }
.gw-stop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--color-accent-on-dark);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.gw-stop__year {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--sp-2);
}
.gw-stop h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.gw-stop p { font-size: .9375rem; color: rgba(255, 255, 255, .8); margin: 0; }

/* ---- Magazine overlap (bio) ---- */
.gw-overlap {
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: center;
  margin-top: var(--sp-8);
}
/* No figure to overlap: the portrait moved to the hero and is not repeated here.
   One column, and the card drops the -32px pull that only made sense when it had
   a photograph to sit over. */
.gw-overlap--solo { grid-template-columns: 1fr; }
.gw-overlap--solo .gw-overlap__card { margin-left: 0; }
/* The card used to be sized by the 55fr column it shared with the figure. Alone
   at full container width its lines run past 100 characters, so the site's own
   .gw-prose measure is applied to the TEXT, not to the card - a ch cap on a
   wrapper resolves against the wrapper's font size, not the child's. */
.gw-overlap--solo .gw-overlap__card > p,
.gw-overlap--solo .gw-overlap__card .gw-quote { max-width: 68ch; }
.gw-overlap__figure { margin: 0; }
.gw-overlap__figure img {
  width: 100%;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-lift);
}
.gw-overlap__caption {
  margin-top: var(--sp-2);
  font-size: .8125rem;
  color: var(--c-muted-text);
}
.gw-overlap__card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  margin-left: -32px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--brand-accent);
}
.gw-quote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--brand-primary);
  border-top: 1px solid var(--c-rule);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-6);
}

/* ---- Three steps + date rail ---- */
.gw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.gw-step { position: relative; }
/* Numeral sits ABOVE the rule, with the rule closing it off underneath. It was
   previously knocked out of a rule running across it, which left the figure
   hanging below the line instead of leading the step.

   Solid, not outlined: a -webkit-text-stroke knockout on a serif leaves spindly
   hollow numerals that read as a font failing to load rather than a decision. */
.gw-step__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-accent-text);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: var(--sp-6);
}
.gw-step h3 { font-size: 1.2rem; margin: var(--sp-4) 0 var(--sp-2); }
.gw-step p { font-size: .9375rem; color: var(--c-muted-text); margin: 0; }

.gw-daterail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--c-cream);
  border-left: 4px solid var(--brand-accent);
}
.gw-daterail__item { flex: 1 1 210px; }
.gw-daterail__label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-text);
  margin-bottom: var(--sp-1);
}
.gw-daterail__value { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--brand-primary); }
.gw-daterail__item--key .gw-daterail__value { color: var(--color-accent-text); }

/* ---- Get involved: split panel + inline form ---- */
.gw-involve {
  display: grid;
  grid-template-columns: 40fr 60fr;
  align-items: stretch;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gw-involve__panel {
  position: relative;
  background: var(--brand-primary);
  color: rgba(255, 255, 255, .85);
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
}
.gw-involve__panel::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -55%;
  width: 150%;
  height: 75%;
  background: var(--brand-accent);
  transform: rotate(-6deg);
  opacity: .22;
}
.gw-involve__panel > * { position: relative; z-index: 1; }
.gw-involve__panel h2 { color: #FFFFFF; }
.gw-involve__panel p { color: rgba(255, 255, 255, .84); }
.gw-involve__phone {
  display: inline-block;
  margin-top: var(--sp-6);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.45rem;
  color: #FFFFFF;
  text-decoration: none;
}
.gw-involve__phone:hover { color: var(--color-accent-on-dark); }
.gw-involve__form { background: #FFFFFF; padding: clamp(2rem, 4vw, 3.5rem); }

/* ---- Forms ---- */
.gw-field { margin-bottom: var(--sp-4); }
.gw-field label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: var(--sp-1);
}
/* Scoped to text-like inputs on purpose. A bare `.gw-field input` also matches
   checkboxes and radios and stretches them across the form. */
.gw-field input[type="text"],
.gw-field input[type="email"],
.gw-field input[type="tel"],
.gw-field select,
.gw-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--c-text);
  font-size: 1rem;
}
.gw-field textarea { min-height: 130px; resize: vertical; }
.gw-field input:focus,
.gw-field select:focus,
.gw-field textarea:focus { border-color: var(--brand-primary); }
.gw-hp { position: absolute; left: -9999px; }
.gw-help {
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--c-muted-text);
  margin-top: var(--sp-1);
}
label .gw-help { display: inline; margin: 0; }
.gw-form__rc { margin-top: var(--sp-4); }
.gw-form button[type="submit"] { margin-top: var(--sp-2); }

.gw-checks {
  border: 0;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.gw-checks legend {
  font-size: .875rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: var(--sp-2);
  padding: 0;
}
.gw-checks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-2);
}
.gw-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--c-text);
  cursor: pointer;
  margin: 0;
}
.gw-check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #C62B32;
}
.gw-check:hover { border-color: var(--brand-primary); }

.field-error { color: #A81F26; font-weight: 500; margin-top: var(--sp-1); }
.gw-formstatus {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--brand-primary);
  background: var(--c-cream);
  font-size: .9375rem;
}
.gw-formstatus:empty { display: none; padding: 0; border: 0; }

/* ---- FAQ ---- */
.gw-faq { max-width: 720px; margin-inline: auto; }
.gw-faq details { border-bottom: 1px solid var(--c-rule); }
.gw-faq details:first-of-type { border-top: 1px solid var(--c-rule); }
.gw-faq summary {
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.3;
  color: var(--brand-primary);
  cursor: pointer;
  list-style: none;
}
.gw-faq summary::-webkit-details-marker { display: none; }
.gw-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-accent-text);
}
.gw-faq details[open] summary::after { content: "\2013"; }
.gw-faq__answer { padding-bottom: var(--sp-6); color: var(--c-muted-text); }

/* ---- Closing band ---- */
.gw-closing { text-align: center; }
.gw-closing .gw-quote {
  border: 0;
  margin: 0 auto var(--sp-4);
  padding: 0;
  max-width: 22ch;
  color: #FFFFFF;
  font-size: clamp(1.35rem, 3vw, 2rem);
}
.gw-closing__attrib {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--sp-12);
}
.gw-closing h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.gw-closing .gw-btn-row { justify-content: center; }

/* ---- Interior page furniture ---- */
.gw-pagehead {
  position: relative;
  background: var(--brand-primary);
  color: rgba(255, 255, 255, .85);
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.gw-pagehead h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  color: #FFFFFF;
  margin-bottom: var(--sp-4);
}
.gw-pagehead p { color: rgba(255, 255, 255, .84); max-width: 62ch; font-size: 1.0625rem; }

.gw-prose { max-width: 68ch; }
.gw-prose--center { margin-inline: auto; }
.gw-prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.gw-prose h3 { font-size: 1.25rem; margin-top: var(--sp-8); }
.gw-prose ul { padding-left: 1.15rem; margin-bottom: var(--sp-4); }
.gw-prose li { margin-bottom: .5rem; }

/* Long-form planks run as a narrow rail plus a reading column. Left-aligning a
   68ch column inside an 1180px container stranded half the screen on every
   plank, which reads as an unfinished page rather than a measure decision. */
.gw-plank {
  scroll-margin-top: 90px;
  display: grid;
  grid-template-columns: 220px minmax(0, 68ch);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.gw-plank__rail { position: sticky; top: 100px; }
.gw-plank__rail .gw-eyebrow { margin-bottom: var(--sp-4); }

.gw-callout {
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  background: var(--c-cream);
  border-left: 4px solid var(--brand-accent);
}
.gw-callout h3 { margin-top: 0; font-size: 1.15rem; }

.gw-linkcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  list-style: none;
  padding: 0;
}
.gw-linkcards a {
  display: block;
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
}
.gw-linkcards a:hover { box-shadow: var(--shadow-lift); color: inherit; }
.gw-linkcards strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: var(--sp-2);
}
.gw-linkcards span { font-size: .9375rem; color: var(--c-muted-text); }

.gw-plank__icon {
  width: 52px;
  height: 52px;
  color: var(--color-accent-text);
}
.gw-way__icon { width: 36px; height: 36px; color: var(--color-accent-text); margin-bottom: var(--sp-3); }
.gw-linkcards__icon { width: 30px; height: 30px; color: var(--color-accent-text); margin-bottom: var(--sp-3); }

.gw-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.gw-way { position: relative; padding-top: var(--sp-8); border-top: 3px solid var(--brand-primary); }
/* Alternates for any card count, not just the original three. */
.gw-way:nth-child(even) { border-top-color: var(--brand-accent); }
.gw-way__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-3);
}
.gw-way p { font-size: .9375rem; color: var(--c-muted-text); }
/* A button inside a card does not want the full section-scale 2rem lead-in. */
.gw-way .gw-btn-row { margin-top: var(--sp-6); }

.gw-formwrap { max-width: 720px; }
.gw-formwrap--center { margin-inline: auto; }
.gw-formwrap--card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.gw-contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.gw-contactlist {
  margin: var(--sp-8) 0;
  padding: 0;
  border-top: 1px solid var(--c-rule);
}
.gw-contactlist dt {
  padding-top: var(--sp-4);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted-text);
}
.gw-contactlist dd {
  margin: var(--sp-1) 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--brand-primary);
}
.gw-contactlist dd a { text-decoration: none; }

.gw-source {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  font-size: .8125rem;
  color: var(--c-muted-text);
}

.gw-bio {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.gw-bio__figure { margin: 0; position: sticky; top: 100px; }
.gw-bio__figure img {
  width: 100%;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-lift);
}
.gw-bio .gw-prose h2:first-child { margin-top: 0; }
.gw-bio .gw-prose h2 { margin-top: var(--sp-12); }

.gw-recordlist {
  list-style: none;
  margin: var(--sp-8) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.gw-recordlist li {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 2.4rem;
  border-left: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
}
.gw-recordlist li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.5rem;
  width: 13px;
  height: 13px;
  background: var(--color-accent-on-dark);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.gw-map__after { margin-top: var(--sp-8); }

/* The real City of Benton ward map, not a diagram. It is a tall portrait
   document, so it is capped and centred rather than stretched, and the whole
   thing links through to the source PDF so a voter can zoom to their street. */
.gw-wardmap { margin: var(--sp-8) auto 0; max-width: 760px; }
.gw-wardmap a { display: block; }
.gw-wardmap img,
.gw-wardmap picture {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #FFFFFF;
}
.gw-wardmap__caption {
  margin-top: var(--sp-3);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-muted-text);
}

/* Marker for facts the candidate still owes us, highlighted so he catches them
   during review. THE SITE IS LIVE — every instance was removed at go-live on
   2026-08-05 and none should ever ship again. The rule is kept on purpose: if a
   marker is reintroduced by mistake it must be loudly visible in review rather
   than rendering as ordinary body copy nobody notices. */
.gw-todo {
  padding: .1em .4em;
  background: #FFF3CD;
  box-shadow: inset 0 -2px 0 #C62B32;
  color: #5A4200;
  font-weight: 600;
}

/* ---- Reveal on scroll ----
   Gated on html.js, which an inline script in the head sets. Without JS the
   rule never applies and every section renders normally, so a failed or blocked
   script can never leave the page blank. The hero never carries .gw-reveal, so
   the first viewport is never gated either. */
html.js .gw-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
html.js .gw-reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1000px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .gw-bento { grid-template-columns: repeat(2, 1fr); }
  .gw-tile--lead { grid-column: span 2; grid-row: auto; }
  .gw-tile--wide { grid-column: span 2; }
  .gw-tile__figure { margin-top: var(--sp-6); }
}

@media (max-width: 860px) {
  .gw-hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  /* Stacked, the band lands across the buttons instead of beside the card. It is
     decorative, so it goes rather than gets fudged. */
  .gw-hero__object::after { display: none; }
  .gw-receipts { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gw-receipts__rule { display: none; }
  .gw-overlap { grid-template-columns: 1fr; }
  /* No overlap once stacked. The negative pull sat the card 11px over the photo
     caption and clipped it to "Gre". The magazine overlap is a wide-screen
     conceit; on a phone the two blocks just stack. */
  .gw-overlap__card { margin-left: 0; margin-top: var(--sp-6); margin-inline: 0; }
  /* --solo has no figure above it, so the gap that clears one is dead space. */
  .gw-overlap--solo .gw-overlap__card { margin-top: 0; }
  .gw-steps { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gw-involve { grid-template-columns: 1fr; }
  .gw-bio { grid-template-columns: 1fr; }
  .gw-bio__figure { position: static; max-width: 420px; }
  .gw-plank { grid-template-columns: 1fr; gap: var(--sp-6); }
  .gw-plank__rail { position: static; display: flex; align-items: center; gap: var(--sp-4); }
  .gw-plank__rail .gw-eyebrow { margin-bottom: 0; }
  .gw-plank__icon { width: 40px; height: 40px; }
  .gw-recordlist { grid-template-columns: 1fr 1fr; }
  /* Two up rather than one. Six cards in a single column is a long scroll on a
     tablet, and the cards are short enough to pair. */
  .gw-ways { grid-template-columns: 1fr 1fr; }
  .gw-contact { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .gw-ways { grid-template-columns: 1fr; }
  .gw-bento { grid-template-columns: 1fr; }
  .gw-tile--lead, .gw-tile--wide { grid-column: span 1; }
  .gw-recordlist { grid-template-columns: 1fr; }
  .gw-btn-row .gw-btn { width: 100%; }
  .site-footer__bottom { flex-direction: column; }
}

/* ============================================================================
   MOTION - the reveal must never leave content hidden
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .gw-reveal { opacity: 1; transform: none; }
  .gw-btn:hover, .gw-tile:hover { transform: none; }
}

@media print {
  .site-header, .nav-mobile, .consent-banner, .gw-btn-row { display: none; }
  body { color: #000; background: #fff; }
}