/* =====================================================================
   GUILLERMO GONZALEZ FOR SENATE — campaign site

   The look is the campaign's own: navy and green, photos of Guillermo with
   navy cards laid over them, square-bracket frames [ ] around titles, wide
   uppercase display type, square buttons. Edit the tokens to retune it.
   ===================================================================== */
:root {
  --navy: #0c2340;
  --navy-deep: #07172b;
  --navy-lift: #15345c;
  --green: #049951;
  --green-deep: #037a41;
  --green-bright: #37c77f;   /* green that stays readable on navy */
  --green-tint: #e8f6ee;
  --paper: #f3f5f4;
  --white: #ffffff;
  --ink: #0c2340;
  --ink-soft: #4d5a72;
  --ink-faint: #8791a5;
  --red: #e2574c;
  --hairline: rgba(12, 35, 64, 0.14);

  --font-display: "Cal Sans", "Josefin Sans", "Montserrat", system-ui, sans-serif;
  --font-brand: "Josefin Sans", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --content: 1180px;
  --bar-h: 72px;
  --radius: 4px;
  --bracket: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-weight: 500; background: var(--white); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 2000; background: var(--navy); color: var(--white); padding: 10px 16px; }
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */
.kicker { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(12px, 1.4vw, 14px); color: var(--green); margin-bottom: 16px; padding-top: 2px; }
.kicker.on-dark, .is-dark .kicker, .is-deep .kicker { color: var(--green-bright); }

/* The campaign's bracket frame: [ TITLE ]  — green bracket on the left,
   navy (or white on dark) on the right, two-tone words. */
.banner {
  position: relative; display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 3.8vw, 48px); line-height: 1.12; letter-spacing: 0.08em;
  padding: 0.3em 0.85em; color: var(--navy); text-wrap: balance;
}
.banner .g { color: var(--green); }
.banner::before, .banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.55em; pointer-events: none; }
.banner::before { left: 0; border: var(--bracket) solid var(--green); border-right: 0; }
.banner::after { right: 0; border: var(--bracket) solid var(--navy); border-left: 0; }
.banner.on-dark, .is-dark .banner, .is-deep .banner { color: var(--white); }
.banner.on-dark .g, .is-dark .banner .g, .is-deep .banner .g { color: var(--green-bright); }
.banner.on-dark::before, .is-dark .banner::before, .is-deep .banner::before { border-color: var(--green-bright); }
.banner.on-dark::after, .is-dark .banner::after, .is-deep .banner::after { border-color: var(--white); }
.banner.is-hero { font-size: clamp(30px, 5.6vw, 74px); padding: 0.32em 0.8em; --bracket: 4px; }
.banner.is-small { font-size: clamp(18px, 2.2vw, 26px); }
/* The brackets draw themselves in when a banner scrolls into view */
.js .banner[data-reveal]::before, .js .banner[data-reveal]::after { transform: scaleY(0); transition: transform 0.7s var(--ease) 0.25s; }
.js .banner[data-reveal].is-in::before, .js .banner[data-reveal].is-in::after { transform: none; }
.js .banner[data-rise]::before, .js .banner[data-rise]::after { animation: bracketin 0.8s var(--ease) 0.45s both; }
@keyframes bracketin { from { transform: scaleY(0); } }

.section-lead { margin-top: 18px; font-size: clamp(17px, 1.9vw, 20px); color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; line-height: 1.6; }
.is-dark .section-lead, .is-deep .section-lead, .section-lead.on-dark { color: rgba(255, 255, 255, 0.82); }
.prose { max-width: 70ch; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.7; }
.prose p + p { margin-top: 1.15em; }
.fineprint { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.fineprint a { color: var(--green-deep); font-weight: 700; }
.is-dark .fineprint, .is-deep .fineprint, .fineprint.on-dark { color: rgba(255, 255, 255, 0.62); }
.textlink { color: var(--green-deep); font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding-top: 3px; }
.textlink:hover { text-decoration: underline; text-underline-offset: 5px; }
.textlink.on-dark, .is-dark .textlink, .is-deep .textlink { color: var(--green-bright); }

/* ---------------------------------------------------------------------
   Buttons: square, uppercase, like the campaign's own
   --------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--radius);
  background: var(--green); color: var(--white);
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13.5px; line-height: 1;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(4, 153, 81, 0.25);
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, color 0.2s;
}
.pill:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(4, 153, 81, 0.35); }
.pill:active { transform: translateY(0); }
.pill[disabled] { opacity: 0.6; pointer-events: none; }
.pill-small { min-height: 40px; padding: 0 18px; font-size: 12px; }
.pill-large { min-height: 60px; padding: 0 36px; font-size: 14.5px; }
.pill-navy { background: var(--navy); box-shadow: 0 6px 18px rgba(12, 35, 64, 0.3); }
.pill-navy:hover { background: var(--navy-deep); box-shadow: 0 12px 26px rgba(12, 35, 64, 0.4); }
.pill-white { background: var(--white); color: var(--green-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.pill-white:hover { background: var(--green-tint); color: var(--navy); }
.pill-outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.pill-outline:hover { background: var(--navy); color: var(--white); box-shadow: none; }
.pill-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.pill-ghost:hover { background: var(--white); color: var(--navy); box-shadow: none; }
@media (max-width: 560px) { .pagehero-cta .pill, .restore-cta .pill, .promise-cta .pill, .dcheck-cta .pill { flex: 1 1 100%; max-width: 380px; } }

/* ---------------------------------------------------------------------
   The Give button: a gradient that sweeps from the top-left, a ring of
   colour that circles the box, and two corner brackets that keep drawing
   themselves. build.mjs adds the class and the corner elements to every
   button that links to /give.
   --------------------------------------------------------------------- */
@property --give-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pill-give {
  position: relative; isolation: isolate; overflow: visible; color: var(--white);
  --gc-a: var(--green-bright); --gc-b: var(--white);
  background: var(--green);
  box-shadow: 0 8px 22px rgba(4, 153, 81, 0.35);
}
.pill-give:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(4, 153, 81, 0.45); }
/* The ring: a 3px band of colour circling the box. The mask keeps only the band, so the face shows through.
   Its outer corners are rounded 3px more than the button's so the two curves stay parallel, and the band
   runs 1px under the button's edge. (With the button's own radius and a 3px band, the ring's inside
   corners came out square and left a notch of background at each corner of the button.) */
.pill-give::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: calc(var(--radius) + 3px); padding: 4px;
  background: conic-gradient(from calc(var(--give-angle) + 315deg) at 50% 50%, var(--green) 0deg, var(--green-bright) 70deg, var(--white) 130deg, var(--green-bright) 190deg, var(--green) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: give-spin 2.6s linear infinite;
}
.topbar .pill-give { background: var(--navy); box-shadow: none; --gc-a: var(--white); --gc-b: var(--white); }
.is-white .pill-give, .is-paper .pill-give, .joinform .pill-give { --gc-a: var(--green); --gc-b: var(--navy); }
@keyframes give-spin { to { --give-angle: 360deg; } }
.gc { position: absolute; width: 38%; height: 64%; pointer-events: none; }
.gc-tl { left: -9px; top: -9px; }
.gc-br { right: -9px; bottom: -9px; }
.gc::before, .gc::after { content: ""; position: absolute; left: 0; top: 0; background: var(--gc-a); }
.gc-br::before, .gc-br::after { left: auto; top: auto; right: 0; bottom: 0; background: var(--gc-b); }
.gc::before { height: 2px; width: 100%; transform-origin: left center; animation: gc-draw-x 2.6s var(--ease) infinite; }
.gc::after { width: 2px; height: 100%; transform-origin: center top; animation: gc-draw-y 2.6s var(--ease) infinite; }
.gc-br::before { transform-origin: right center; }
.gc-br::after { transform-origin: center bottom; }
@keyframes gc-draw-x { 0% { transform: scaleX(0); opacity: 1; } 38% { transform: scaleX(1); opacity: 1; } 82% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes gc-draw-y { 0%, 34% { transform: scaleY(0); opacity: 1; } 72% { transform: scaleY(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 900; background: var(--green); color: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s; }
.topbar.is-stuck { box-shadow: 0 8px 28px rgba(7, 23, 43, 0.28); }
.topbar-inner { max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: var(--bar-h); display: flex; align-items: center; gap: 18px; }
.brand { display: block; flex-shrink: 0; }
.brand img { height: 50px; width: auto; }
.topnav { margin-left: auto; }
.topnav-links { list-style: none; display: flex; gap: 2px; }
.topnav-links a { display: block; padding: 10px 11px 8px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; color: rgba(255, 255, 255, 0.92); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.topnav-links a:hover { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.6); }
.topnav-links a[aria-current="page"] { border-bottom-color: var(--white); }
.menu-only { display: none; }
.topbar-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.topbar-cta .pill { box-shadow: none; }
.topnav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--white); }
.burger { width: 22px; height: 16px; position: relative; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s, top 0.3s var(--ease); }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
[aria-expanded="true"] .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
/* Seven links: tighten them a little on smaller laptops before folding into the menu. */
@media (max-width: 1480px) { .topnav-links a { padding: 10px 8px 8px; font-size: 12px; letter-spacing: 0.08em; } }
@media (max-width: 1340px) {
  .topnav-toggle { display: grid; }
  .menu-only { display: block; }
  .topnav-links { position: absolute; left: 0; right: 0; top: var(--bar-h); flex-direction: column; gap: 0; background: var(--navy); padding: 6px var(--gutter) 16px; box-shadow: 0 20px 40px rgba(7, 23, 43, 0.35); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s 0.25s; }
  .topnav-links.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .topnav-links a { padding: 16px 4px 14px; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .topnav-links a[aria-current="page"] { color: var(--green-bright); border-bottom-color: rgba(255, 255, 255, 0.12); }
}
@media (max-width: 560px) { .brand img { height: 40px; } .topbar-inner { gap: 10px; } .topbar-cta .pill-white { display: none; } }

/* ---------------------------------------------------------------------
   Photo-backed sections
   --------------------------------------------------------------------- */
.pagehero.has-photo, .photo-band, .sign-strip { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--white); }
.pagehero-bg, .photo-band-bg, .sign-strip-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-band-bg, .sign-strip-bg { top: -8%; height: 116%; transform: translate3d(0, var(--drift, 0%), 0); will-change: transform; }
.pagehero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(12, 35, 64, 0.94) 0%, rgba(12, 35, 64, 0.72) 42%, rgba(12, 35, 64, 0.25) 100%), linear-gradient(to top, rgba(7, 23, 43, 0.7), transparent 40%); }

.js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; }
.js [data-rise]:nth-child(2) { animation-delay: 0.1s; }
.js [data-rise]:nth-child(3) { animation-delay: 0.22s; }
.js [data-rise]:nth-child(4) { animation-delay: 0.34s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Page heroes: the page name in brackets, nothing invented */
.pagehero { padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(36px, 6vh, 72px); background: var(--white); }
.pagehero.has-photo { min-height: min(46vh, 480px); display: flex; align-items: center; padding: clamp(48px, 8vh, 96px) var(--gutter); }
.pagehero.is-dark { background: var(--navy); color: var(--white); padding-bottom: 0; }
.pagehero.is-tall { min-height: min(64vh, 660px); }
.pagehero-bg { object-position: 60% 35%; }
.pagehero-inner { max-width: var(--content); width: 100%; margin: 0 auto; }
.pagehero-lead { margin-top: clamp(18px, 3vh, 28px); font-size: clamp(17px, 2vw, 21px); font-weight: 600; line-height: 1.45; color: var(--ink-soft); max-width: 34em; text-wrap: pretty; }
.has-photo .pagehero-lead, .is-dark .pagehero-lead { color: rgba(255, 255, 255, 0.88); }
.pagehero-cta { margin-top: clamp(22px, 3.6vh, 34px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------------
   Meet Guillermo: the photo-and-navy-card block from the original site.
   On the home page it is the first thing you see.
   --------------------------------------------------------------------- */
.meet-quote { display: grid; grid-template-columns: 0.92fr 1.08fr; background: var(--navy); color: var(--white); }
.meet-quote.is-hero { min-height: 0; }
.meet-quote-photo { position: relative; overflow: hidden; }
.meet-quote-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(var(--zoom, 1.01)); transition: transform 0.2s linear; }
.meet-quote-card { padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.quote-text { margin-top: clamp(20px, 3vh, 28px); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.quote-text + .quote-text { margin-top: 1em; }
.quote-text em { font-style: italic; color: var(--green-bright); font-weight: 700; }
.js [data-fill] .w { opacity: calc(0.28 + 0.72 * var(--lit, 0)); transition: opacity 0.25s linear; }
.quote-sign { margin-top: clamp(24px, 4vh, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.quote-sign img { width: clamp(190px, 22vw, 280px); height: auto; }
@media (max-width: 1280px) { .meet-quote { grid-template-columns: 1fr 1fr; } .meet-quote-photo { min-height: 560px; } .meet-quote-card { padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); } .quote-text { font-size: 18px; margin-top: 18px; } .meet-quote .banner { font-size: clamp(22px, 3vw, 34px); } .quote-sign { margin-top: 24px; } }
@media (max-width: 960px) { .meet-quote { grid-template-columns: 1fr; } .meet-quote-photo { min-height: 0; aspect-ratio: 4 / 3.1; } .meet-quote-photo img { object-position: 50% 50%; } .quote-text { font-size: clamp(18px, 2vw, 22px); } }

/* ---------------------------------------------------------------------
   Election dates strip
   --------------------------------------------------------------------- */
.dates { background: var(--green); color: var(--white); padding: 18px var(--gutter); }
.dates-line { max-width: var(--content); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 18px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; text-align: center; }
.dates-line b { font-family: var(--font-display); font-size: 30px; letter-spacing: 0; line-height: 1; margin-right: 4px; }
.dates-line .dot { opacity: 0.5; }

/* ---------------------------------------------------------------------
   Bands and splits
   --------------------------------------------------------------------- */
.band { padding: clamp(64px, 11vh, 130px) var(--gutter); position: relative; }
.band.is-paper { background: var(--paper); }
.band.is-white { background: var(--white); }
.band.is-dark { background: var(--navy); color: var(--white); }
.band.is-deep { background: var(--navy-deep); color: var(--white); }
.band.is-tight { padding-top: clamp(40px, 7vh, 80px); }
.band > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   The Valley Promise in three numbers (home)
   --------------------------------------------------------------------- */
.stats { list-style: none; margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.stats li { position: relative; padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 36px) clamp(36px, 3.6vw, 46px); background: var(--navy); color: var(--white); }
.stats li::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 14px; border: var(--bracket) solid var(--green-bright); border-right: 0; }
.stats li:nth-child(2) { background: var(--green); } .stats li:nth-child(2)::before { border-color: var(--white); }
.stats b { display: block; font-family: var(--font-display); font-size: clamp(52px, 6.4vw, 84px); line-height: 0.95; color: var(--green-bright); }
.stats li:nth-child(2) b { color: var(--white); }
/* One promise public: a single wide card, number beside its words */
.stats li:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 clamp(18px, 3vw, 40px); }
.stats li:only-child span { margin-top: 0; max-width: 40ch; font-size: clamp(16px, 1.9vw, 21px); }
.stats span { display: block; margin-top: 12px; font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.45; opacity: 0.9; max-width: 26ch; }
.promise-cta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: clamp(24px, 4vh, 40px); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stats li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 18px; } .stats span { margin-top: 0; } }

/* ---------------------------------------------------------------------
   Priorities: navy card over a photo (the original's signature block)
   --------------------------------------------------------------------- */
.photo-band { padding: clamp(64px, 10vh, 120px) var(--gutter); }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(7, 23, 43, 0.35), rgba(7, 23, 43, 0.05) 60%); }
.photo-band-bg { object-position: 70% 40%; }
.photo-band-inner { max-width: var(--content); margin: 0 auto; }
.navy-card { max-width: 660px; background: var(--navy); border: var(--bracket) solid var(--green); padding: clamp(28px, 4vw, 52px); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.45); }
.priority-list { list-style: none; margin-top: clamp(22px, 3vh, 32px); display: grid; gap: 18px; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; }
.priority-list b { color: var(--green-bright); font-weight: 700; }
.navy-card .pill { margin-top: clamp(24px, 3vh, 32px); }

/* ---------------------------------------------------------------------
   The Valley Promise page: pillars, promise tiles, stats, detail sheet
   --------------------------------------------------------------------- */
.pillar-art { margin-top: clamp(28px, 5vh, 48px); overflow: hidden; aspect-ratio: 16 / 8; border: 6px solid var(--white); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.22); }
.pillar-art img { width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, var(--shift, -8%), 0); will-change: transform; }
.is-dark .pillar-art { border-color: var(--navy-lift); }
@media (max-width: 700px) { .pillar-art { aspect-ratio: 4 / 3; } }
.ptiles { margin-top: clamp(28px, 5vh, 48px); display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ptile { position: relative; text-align: left; padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px) clamp(64px, 6vw, 76px) clamp(40px, 4vw, 52px); min-height: clamp(220px, 26vw, 300px); display: flex; flex-direction: column; align-items: flex-start; background: var(--navy); color: var(--white); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.ptile::before { content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 16px; border: var(--bracket) solid var(--green-bright); border-right: 0; }
.ptile:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(7, 23, 43, 0.3); }
.is-dark .ptile { background: var(--navy-lift); }
.ptile.is-green { background: var(--green); } .ptile.is-green::before { border-color: var(--white); }
.ptile.is-light, .is-dark .ptile.is-light { background: var(--green-tint); color: var(--navy); } .ptile.is-light::before { border-color: var(--green); }
.ptile.is-wide, .ptiles > .ptile:only-child { grid-column: 1 / -1; min-height: 0; }
.ptile-figure { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 72px); line-height: 0.95; color: var(--green-bright); }
.ptile.is-green .ptile-figure { color: var(--white); } .ptile.is-light .ptile-figure { color: var(--green); }
.ptile-figure-label { margin-top: 6px; font-size: 14px; font-weight: 600; opacity: 0.8; }
.ptile-icon { width: 48px; height: 48px; color: var(--green-bright); }
.ptile.is-green .ptile-icon { color: var(--white); } .ptile.is-light .ptile-icon { color: var(--green); }
.ptile-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ptile-title { margin-top: auto; padding-top: 24px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.1; }
.ptile-text { margin-top: 10px; font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.5; opacity: 0.88; max-width: 44ch; }
.ptile.is-wide .ptile-text { max-width: 66ch; }
.ptile-more { position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border: 2px solid currentColor; display: grid; place-items: center; opacity: 0.75; transition: opacity 0.2s, transform 0.4s var(--ease); }
.ptile:hover .ptile-more { opacity: 1; transform: rotate(90deg); }
.ptile-more svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .ptiles { grid-template-columns: 1fr; } .ptile { min-height: 0; } .ptile-title { margin-top: 24px; padding-top: 0; } }
.statband { margin-top: clamp(28px, 5vh, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.statband:empty { display: none; }
.stat { border-top: 3px solid var(--navy); padding-top: 18px; }
.is-dark .stat { border-top-color: var(--green-bright); }
.stat-figure { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--green); }
.is-dark .stat-figure { color: var(--green-bright); }
.stat-text { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); max-width: 30ch; line-height: 1.5; }
.is-dark .stat-text { color: rgba(255, 255, 255, 0.78); }
.stat sup, .sheet sup { font-size: 0.6em; line-height: 0; }
.plan-lockup { width: min(520px, 80%); height: auto; margin: 0 auto; background: var(--white); padding: 4%; border: 6px solid var(--white); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.3); }

.sheet { border: 0; padding: 0; margin: auto; width: min(820px, calc(100vw - 24px)); max-height: min(88vh, 900px); max-width: none; background: var(--white); color: var(--ink); box-shadow: 0 40px 120px rgba(7, 23, 43, 0.5); overflow: hidden; border-top: 6px solid var(--green); }
.sheet[open] { display: flex; animation: sheetin 0.5s var(--ease); }
.sheet::backdrop { background: rgba(7, 23, 43, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sheet.is-closing { animation: sheetout 0.25s ease-in forwards; }
@keyframes sheetin { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@keyframes sheetout { to { opacity: 0; transform: translateY(24px) scale(0.98); } }
.sheet-inner { display: flex; flex-direction: column; width: 100%; min-height: 0; position: relative; }
.sheet-close { position: absolute; right: 16px; top: 16px; z-index: 2; width: 40px; height: 40px; border: 2px solid var(--navy); display: grid; place-items: center; color: var(--navy); transition: background 0.2s, color 0.2s; }
.sheet-close:hover { background: var(--navy); color: var(--white); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(30px, 5vw, 56px) clamp(22px, 5vw, 56px) 28px; flex: 1 1 auto; min-height: 0; }
.sheet-body.is-swapping { animation: swap 0.35s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateX(var(--from, 16px)); } }
.sheet-eyebrow { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12.5px; color: var(--green); padding-right: 48px; }
.sheet-title { margin-top: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(26px, 4vw, 40px); line-height: 1.08; text-wrap: balance; padding-right: 32px; }
.sheet-promise { margin-top: 18px; padding: 18px 22px; background: var(--green-tint); border-left: var(--bracket) solid var(--green); font-weight: 700; font-style: italic; font-size: clamp(16px, 2vw, 19px); line-height: 1.4; color: var(--navy); }
.sheet-promise small { display: block; font-style: normal; font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--green-deep); margin-bottom: 6px; }
.sheet-block { margin-top: 26px; }
.sheet-block h3 { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--green-deep); }
.sheet-block p { margin-top: 8px; font-size: clamp(16px, 1.8vw, 17.5px); color: #33415c; line-height: 1.6; }
.sheet-block p + p { margin-top: 12px; }
.sheet-you { background: var(--navy); color: var(--white); padding: 22px 24px; }
.sheet-you h3 { color: var(--green-bright); }
.sheet-you p { color: rgba(255, 255, 255, 0.88); }
.sheet-you strong { color: var(--green-bright); }
.sheet-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.sheet-actions:empty { display: none; }
.sheet-notes { margin-top: 26px; padding: 16px 0 0 1.3em; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-soft); display: grid; gap: 6px; }
.sheet-notes a { color: inherit; }
.sheet-pager { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px clamp(14px, 3vw, 28px) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--white); }
.sheet-step { min-height: 42px; padding: 0 16px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; color: var(--navy); border: 2px solid var(--hairline); transition: border-color 0.2s; }
.sheet-step:hover { border-color: var(--navy); }
.sheet-pager[hidden] { display: none; }
.sheet-position { font-size: 13px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sheet { width: 100vw; max-height: 92dvh; margin: auto 0 0; } @keyframes sheetin { from { transform: translateY(100%); } } @keyframes sheetout { to { transform: translateY(100%); } } }

/* ---------------------------------------------------------------------
   District 16
   --------------------------------------------------------------------- */
.district-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.district-map { position: relative; }
.district-map svg { width: 100%; height: auto; max-height: 560px; overflow: visible; }
.district-map path { fill: rgba(55, 199, 127, 0.14); stroke: var(--green-bright); stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.js .district-map path { stroke-dasharray: var(--len, 6000); stroke-dashoffset: var(--len, 6000); transition: stroke-dashoffset 2.4s var(--ease), fill 1s 1.6s; fill: transparent; }
.js .district-map.is-in path { stroke-dashoffset: 0; fill: rgba(55, 199, 127, 0.14); }
.counties { list-style: none; margin-top: clamp(28px, 5vh, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.counties li { padding: clamp(20px, 2.6vw, 30px); border-left: var(--bracket) solid var(--green); background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.5; color: var(--ink-soft); }
.counties b { display: block; font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--green-deep); margin-bottom: 6px; }
.dcheck { margin-top: clamp(22px, 3vh, 30px); }
.dcheck-row { display: flex; gap: 10px; }
.dcheck-row input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: var(--radius); border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: var(--white); font: inherit; font-size: 16px; transition: border-color 0.2s, background 0.2s; }
.dcheck-row input::placeholder { color: rgba(255, 255, 255, 0.5); }
.dcheck-row input:focus { outline: none; border-color: var(--green-bright); background: rgba(255, 255, 255, 0.12); }
.dcheck .textlink { margin-top: 14px; }
.dcheck-status { margin-top: 10px; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--green-bright); }
.dcheck.is-busy .pill { opacity: 0.6; pointer-events: none; }
.dcheck-result { margin-top: clamp(20px, 3vh, 28px); padding: 22px 24px; border-left: var(--bracket) solid var(--green-bright); background: rgba(255, 255, 255, 0.06); animation: rise 0.6s var(--ease); }
.dcheck-result.is-out { border-left-color: var(--red); }
.dcheck-verdict { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.dcheck-detail { margin-top: 8px; font-size: 14px; opacity: 0.75; }
.dcheck-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.dcheck-result.is-out .dcheck-cta { display: none; }
.pin { fill: var(--green-bright); stroke: var(--white); stroke-width: 5; opacity: 0; transition: opacity 0.4s, cx 0.7s var(--ease), cy 0.7s var(--ease); }
.pin.is-on { opacity: 1; animation: pindrop 0.8s var(--ease); }
.pin.is-out { fill: var(--red); }
@keyframes pindrop { 0% { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } 100% { transform: none; } }
@media (max-width: 860px) { .district-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .counties { grid-template-columns: 1fr; } .dcheck-row { flex-direction: column; } }

/* ---------------------------------------------------------------------
   Endorsements
   --------------------------------------------------------------------- */
.ecards { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 24px); }
.ecard { background: var(--navy); color: var(--white); border: var(--bracket) solid var(--green); padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: 260px 1fr; gap: clamp(18px, 2.6vw, 30px); align-items: start; box-shadow: 0 18px 44px rgba(12, 35, 64, 0.18); }
.ecard-who { display: grid; gap: 14px; justify-items: center; }
.ecard-who img { width: 260px; height: 260px; object-fit: cover; object-position: 50% 18%; border: 6px solid var(--white); }
.tag { position: relative; text-align: center; padding: 10px 16px 8px; display: inline-block; }
.tag::before, .tag::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; }
.tag::before { left: 0; border: 2px solid var(--green-bright); border-right: 0; }
.tag::after { right: 0; border: 2px solid var(--white); border-left: 0; }
.tag span { display: block; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--green-bright); }
.tag b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; line-height: 1.15; margin-top: 3px; }
.ecard-quote { position: relative; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; padding-left: 38px; align-self: center; }
.ecard-quote .qmark { position: absolute; left: 0; top: -0.1em; font-family: var(--font-display); font-size: 50px; line-height: 1; color: var(--green-bright); }
.ecard-quote strong { color: var(--green-bright); font-weight: 700; }
@media (max-width: 760px) { .ecard { grid-template-columns: 1fr; } .ecard-who { grid-template-columns: auto 1fr; justify-items: start; align-items: center; } .ecard-who img { width: 120px; height: 120px; } }

.wall, .trust-row { list-style: none; margin-top: clamp(28px, 5vh, 44px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.4vw, 30px) clamp(12px, 2vw, 22px); }
.wall { margin-top: 0; }
.trust-row { gap: clamp(14px, 2vw, 22px) 16px; }
.wall-item, .trust-row li { width: 190px; }
.trust-row li { width: 150px; }
.trust-row img { width: 150px; }
/* Home page: the people on one line, the organizations on the next (.is-orgs).
      Wide: 4 and 5 across at 150px. Tablets: 118px so both lines still fit (four people even at 600px).
      Narrow tablets: the five organizations break 3 + 2 rather than 4 + 1. Phones: two per row. */
.trust-row.is-orgs { margin-top: clamp(14px, 2vw, 22px); }
@media (min-width: 561px) and (max-width: 899px) {
  .trust-row li { width: 118px; } .trust-row img { width: 118px; } .trust-row .tag { padding: 8px 6px 6px; } .trust-row .tag b { font-size: 12px; }
}
@media (min-width: 561px) and (max-width: 759px) { .trust-row.is-orgs { max-width: 420px; margin-left: auto; margin-right: auto; } }

.wall-item, .trust-row li { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.wall-item img, .trust-row img { width: 190px; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 18%; border: 5px solid var(--white); box-shadow: 0 12px 28px rgba(12, 35, 64, 0.16); transition: transform 0.4s var(--ease); background: var(--white); }
.trust-row .is-logo img { object-fit: contain; padding: 14px; }
.wall-item:hover img, .trust-row li:hover img { transform: translateY(-4px); }
.wall-item .tag, .trust-row .tag { min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.is-white .wall-item .tag::after, .is-paper .wall-item .tag::after, .is-paper .trust-row .tag::after { border-color: var(--navy); }
.is-white .wall-item .tag span, .is-paper .wall-item .tag span, .is-paper .trust-row .tag span { color: var(--green-deep); }
.is-white .wall-item .tag b, .is-paper .wall-item .tag b, .is-paper .trust-row .tag b { color: var(--navy); }
.trust-row .tag { padding: 8px 12px 6px; } .trust-row .tag b { font-size: 13px; } .trust-row .tag span { font-size: 9.5px; }
@media (max-width: 560px) { .wall-item, .trust-row li { width: 150px; } .wall-item img, .trust-row img { width: 150px; } }
.logos { margin-top: clamp(40px, 7vh, 72px); display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.logo-card { width: 210px; background: var(--white); padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: inset 0 0 0 1px var(--hairline); text-align: center; border-top: var(--bracket) solid var(--green); }
.logo-card img { width: 100%; height: 120px; object-fit: contain; }
/* six organizations per row on wide screens (6 × 182 + 5 × 16 = 1172 inside the 1180px column) */
@media (min-width: 1200px) { .logo-card { width: 182px; padding-left: 14px; padding-right: 14px; } }
.logo-card b { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; line-height: 1.4; color: var(--navy); }
/* For an organization whose logo file isn't in hand yet (none right now): its name set as a wordmark with the campaign's square brackets, same footprint as a logo. */
.logo-word { position: relative; width: 100%; height: 120px; display: grid; place-content: center; gap: 3px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; font-size: 20px; color: var(--navy); }
.logo-word span:last-child { color: var(--green); }
.logo-word::before, .logo-word::after { content: ""; position: absolute; top: 24px; bottom: 24px; width: 12px; border: var(--bracket) solid var(--green); }
.logo-word::before { left: 2px; border-right: 0; }
.logo-word::after { right: 2px; border-left: 0; border-color: var(--navy); }
/* Phones: two logo cards per row. This must come after the rules above to win the cascade. */
@media (max-width: 560px) { .logos { gap: 12px; } .logo-card { width: calc(50% - 10px); padding: 16px 10px; } .logo-card img { height: 88px; } .logo-card b { font-size: 10.5px; } .logo-word { height: 88px; font-size: 15px; } .logo-word::before, .logo-word::after { top: 16px; bottom: 16px; width: 9px; } }

/* ---------------------------------------------------------------------
   Yard-sign strip: two big green buttons over the tractor photo
   --------------------------------------------------------------------- */
.sign-strip { min-height: clamp(320px, 46vh, 480px); display: grid; place-items: center; padding: clamp(40px, 6vh, 64px) var(--gutter); }
.sign-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(7, 23, 43, 0.28); }
.sign-strip-bg { object-position: 50% 42%; }
.sign-strip-btns { display: grid; gap: 14px; width: min(100%, 420px); }
.sign-strip-btns .pill { min-height: 64px; font-size: 15px; box-shadow: 0 16px 40px rgba(7, 23, 43, 0.4); }

/* ---------------------------------------------------------------------
   Forms (Join Team Guillermo, Contact)
   --------------------------------------------------------------------- */
.formwrap { max-width: 760px; margin: clamp(24px, 4vh, 40px) auto 0; }
.joinform { background: var(--white); color: var(--ink); padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 30px 80px rgba(7, 23, 43, 0.35); border-top: 6px solid var(--green); }
.jf-legend { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--green-deep); margin-bottom: 12px; }
fieldset { border: 0; min-width: 0; }
fieldset + fieldset, .jf-block + .jf-block, fieldset + .jf-block, .jf-block + fieldset { margin-top: 22px; }
.jf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jf-grid label, .jf-wide { display: block; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--ink-soft); }
.jf-wide { grid-column: 1 / -1; }
.jf-req { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
.joinform input:not([type="checkbox"]), .joinform textarea, .joinform select { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); border: 2px solid var(--hairline); background: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); transition: border-color 0.2s; }
.joinform select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230c2340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.joinform textarea { min-height: 110px; resize: vertical; }
.joinform input:focus, .joinform textarea:focus, .joinform select:focus { outline: none; border-color: var(--green); }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kind { position: relative; }
.kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 16px 0; border: 2px solid var(--green); color: var(--green-deep); font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; cursor: pointer; transition: background 0.2s, color 0.2s; user-select: none; }
.kind span::before { content: ""; width: 0; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: width 0.25s var(--ease); }
.kind:hover span { background: var(--green-tint); }
.kind input:checked + span { background: var(--green); color: var(--white); }
.kind input:checked + span::before { width: 16px; }
.kind input:focus-visible + span { outline: 3px solid var(--green-bright); outline-offset: 2px; }
.jf-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jf-section[hidden] { display: none; }
.jf-hp { position: absolute; left: -9999px; top: -9999px; }
.consent { margin-top: 22px; padding: 18px 20px; background: var(--paper); border-left: var(--bracket) solid var(--green); }
.consent-check { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.consent-check input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--green); }
.consent-text { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.consent-text a { color: var(--green-deep); font-weight: 700; }
.consent .pill { margin-top: 14px; }
.jf-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.jf-status { font-size: 14px; font-weight: 600; color: var(--red); }
.jf-done { text-align: center; padding: clamp(16px, 3vw, 32px) 0; }
.jf-done .check { width: 72px; height: 72px; margin: 0 auto 18px; background: var(--green); color: var(--white); display: grid; place-items: center; animation: pop 0.6s var(--ease); }
.jf-done .check svg { width: 34px; height: 34px; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } }
.jf-done h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(22px, 3vw, 30px); }
.jf-done p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; }
.jf-done .pill { margin-top: 18px; }
@media (max-width: 560px) { .jf-grid, .jf-section { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Bio page, photo trio, privacy page
   --------------------------------------------------------------------- */
.bio-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.bio-row + .bio-row { margin-top: clamp(48px, 8vh, 96px); }
.bio-row.is-flip figure { order: -1; }
.bio-row figure { overflow: hidden; aspect-ratio: 4 / 4.6; border: 6px solid var(--white); box-shadow: 0 24px 60px rgba(12, 35, 64, 0.18); }
.bio-row.is-flip figure { aspect-ratio: 4 / 5; }
.bio-row figure img { width: 100%; height: 100%; object-fit: cover; }
.bio-row .prose { max-width: none; }
@media (max-width: 860px) { .bio-row { grid-template-columns: 1fr; } .bio-row.is-flip figure { order: 0; } .bio-row figure { aspect-ratio: 4 / 3.2; } }
.trio { margin-top: clamp(40px, 7vh, 80px); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.trio figure { overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 18px 44px rgba(12, 35, 64, 0.16); border: 6px solid var(--white); }
.trio img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.trio figure:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .trio { grid-template-columns: 1fr 1fr; } .trio figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }
.policy { max-width: 76ch; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.policy h2 { margin-top: clamp(32px, 5vh, 48px); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(20px, 2.4vw, 26px); color: var(--navy); line-height: 1.15; }
.policy h2:first-child { margin-top: 0; }
.policy h3 { margin-top: 26px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--green-deep); }
.policy p { margin-top: 12px; }
.policy ul { margin: 12px 0 0 1.2em; display: grid; gap: 6px; }
.policy a { color: var(--green-deep); font-weight: 700; word-break: break-word; }

/* ---------------------------------------------------------------------
   Media
   --------------------------------------------------------------------- */
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.3); border: 6px solid var(--white); }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); }
.video-play span { width: 84px; height: 84px; background: var(--green); display: grid; place-items: center; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); transition: transform 0.3s var(--ease), background 0.2s; }
.video-play:hover span { transform: scale(1.06); background: var(--green-deep); }
.video-play svg { width: 32px; height: 32px; margin-left: 4px; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
/* a full video with its original for download, below the B-roll tiles */
.feature-video { max-width: 980px; margin: clamp(36px, 6vh, 64px) auto 0; }
.feature-video-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 14px; }
.feature-video-bar .video-caption { margin-top: 0; }
.feature-video-get { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.feature-video-get .fineprint { margin: 0; }
@media (max-width: 560px) { .feature-video-get, .feature-video-get .pill { width: 100%; } }
.video-caption { margin-top: 12px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--navy); }
@media (max-width: 760px) { .videos { grid-template-columns: 1fr; } }
.photogrid { margin-top: clamp(36px, 6vh, 64px); columns: 3; column-gap: clamp(12px, 1.6vw, 20px); }
.photogrid button { display: block; width: 100%; margin: 0 0 clamp(12px, 1.6vw, 20px); overflow: hidden; break-inside: avoid; border: 5px solid var(--white); box-shadow: 0 12px 30px rgba(12, 35, 64, 0.14); transition: transform 0.4s var(--ease); }
.photogrid button:hover { transform: translateY(-3px); }
.photogrid img { width: 100%; height: auto; }
@media (max-width: 860px) { .photogrid { columns: 2; } }
.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; display: none; place-items: center; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(7, 23, 43, 0.94); }
.lightbox img { max-width: min(96vw, 1400px); max-height: 90vh; width: auto; height: auto; border: 6px solid var(--white); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }
.lightbox-close { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; background: rgba(255, 255, 255, 0.14); color: var(--white); display: grid; place-items: center; }
.lightbox-step { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255, 255, 255, 0.14); color: var(--white); font-size: 22px; display: grid; place-items: center; }
.lightbox-prev { left: 14px; } .lightbox-next { right: 14px; }
.lightbox-close:hover, .lightbox-step:hover { background: var(--green); }
.downloads { margin-top: clamp(28px, 5vh, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.downloads a { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: var(--white); border-top: var(--bracket) solid var(--green); box-shadow: inset 0 0 0 1px var(--hairline); text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.downloads a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--hairline), 0 16px 36px rgba(12, 35, 64, 0.12); }
.downloads b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 17px; }
.downloads span { font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   Give
   --------------------------------------------------------------------- */
.anedot { max-width: 760px; margin: 0 auto; overflow: hidden; background: var(--white); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.2); border-top: 6px solid var(--green); }
.anedot iframe { width: 100%; height: 1100px; border: 0; }
/* Event pages: the flyer beside the ticket form, stacked on phones */
.event { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 44px); align-items: start; max-width: 1180px; margin: 0 auto; }
.event-flyer img { width: 100%; height: auto; box-shadow: 0 30px 70px rgba(7, 23, 43, 0.2); }
.event .anedot { max-width: none; }
.event .anedot iframe { height: 1400px; }
@media (max-width: 860px) { .event { grid-template-columns: 1fr; } .event-flyer { max-width: 560px; margin: 0 auto; } }
.give-fallback { max-width: 760px; margin: 14px auto 0; text-align: center; }


/* The Guiller-NO pledge (Valley Promise page). The four crossed-out lines are
   the "document"; Guillermo's rubber stamp slams down across them. The ink
   colour is one variable: --stamp-ink (red; var(--green-bright) for campaign green). */
.pledge { --stamp-ink: #e8493d; background: var(--navy-deep); color: var(--white); text-align: center; padding: clamp(80px, 14vh, 170px) var(--gutter); overflow: hidden; }
.pledge .kicker { margin-bottom: 0; }
.pledge-lines { list-style: none; margin: clamp(18px, 3.5vh, 36px) 0 0; padding: 0; }
.pledge-lines li {
  position: relative; display: table; margin: 0 auto;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(32px, 7.4vw, 100px); line-height: 1.16; letter-spacing: 0.01em;
  transition: color 0.6s 0.2s;
}
.pledge-lines li::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 50%; height: 0.09em; border-radius: 1em;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.pledge-lines li.is-struck { color: rgba(255, 255, 255, 0.3); }
.pledge-lines li.is-struck::after { transform: scaleX(1); transition: transform 0.6s var(--ease), opacity 0.5s; }
/* once the stamp is down, the crossed-out lines recede so the stamp reads clean */
.pledge.is-stamped .pledge-lines li.is-struck { color: rgba(255, 255, 255, 0.14); }
.pledge.is-stamped .pledge-lines li.is-struck::after { opacity: 0.3; }
.pledge-doc { position: relative; display: inline-block; max-width: 100%; }
.stamp-anchor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }
.stamp { position: relative; display: inline-block; transform: rotate(-8deg); transform-origin: 50% 50%; }
.stamp-face {
  position: relative; display: block; padding: 0.16em 0.22em 0.1em;
  border: 0.078em solid currentColor; border-radius: 0.1em;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(40px, 9vw, 128px); line-height: 1; letter-spacing: 0.01em; color: var(--stamp-ink);
  /* worn ink: promise.js builds the texture and sets --ink-mask only after
     checking this browser draws it; until then the stamp is simply solid */
  -webkit-mask-image: var(--ink-mask, none); mask-image: var(--ink-mask, none);
  -webkit-mask-size: max(190px, 2.2em) max(190px, 2.2em); mask-size: max(190px, 2.2em) max(190px, 2.2em);
}
/* the ring of ink that jumps outward when it lands */
.stamp::before { content: ""; position: absolute; inset: -0.02em; pointer-events: none; border: 0.035em solid var(--stamp-ink); border-radius: 0.13em; opacity: 0; font-size: clamp(40px, 9vw, 128px); }
.js .stamp { opacity: 0; }
.js .stamp.is-down { opacity: 1; animation: stamp-slam 0.56s both; }
.js .stamp.is-down::before { animation: stamp-ring 0.65s 0.25s ease-out both; }
/* falls fast from above the page, hits hard, squashes, settles */
@keyframes stamp-slam {
  0%   { opacity: 0; transform: rotate(-22deg) scale(3.2); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.5); }
  12%  { opacity: 0.85; }
  45%  { opacity: 1; transform: rotate(-8deg) scale(0.9); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  64%  { transform: rotate(-8deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes stamp-ring { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.4); } }
/* the thud: everything else in the section jolts when the stamp lands */
.pledge.is-hit > * { animation: pledge-thud 0.42s 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes pledge-thud {
  0% { transform: translateY(0); } 14% { transform: translateY(8px); } 34% { transform: translateY(-5px); }
  56% { transform: translateY(3px); } 78% { transform: translateY(-1px); } 100% { transform: translateY(0); }
}
.pledge-text { margin: clamp(32px, 5.5vh, 56px) auto 0; max-width: 40em; font-size: clamp(16px, 2vw, 20px); font-weight: 500; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.pledge .pill { margin-top: clamp(22px, 3.5vh, 36px); }
@media (prefers-reduced-motion: reduce) { .js .stamp { opacity: 1; } }


/* Give: tap an amount and go. On phones the hero is a slim title and the
   embedded form is left out (its inner scrolling fought the page's). */
.quickgive { max-width: 760px; margin: 0 auto clamp(28px, 5vh, 48px); }
.quickgive-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(18px, 2vw, 22px); color: var(--navy); margin: 0 0 14px; }
.quickgive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qg-btn { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 0 12px; border-radius: var(--radius); background: var(--green); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 5.5vw, 28px); letter-spacing: 0.02em; text-decoration: none; transition: background 0.18s ease, transform 0.18s ease; }
.qg-btn:hover, .qg-btn:focus-visible { background: var(--navy); transform: translateY(-1px); }
.qg-btn.is-other { margin-top: 10px; min-height: 60px; background: var(--white); color: var(--navy); border: 2px solid var(--navy); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.qg-btn.is-other:hover, .qg-btn.is-other:focus-visible { background: var(--navy); color: var(--white); }
.quickgive-note { margin: 12px 0 0; text-align: center; }
@media (max-width: 860px) {
  .pagehero.has-photo.is-short { min-height: 0; padding: clamp(28px, 6vh, 48px) var(--gutter); }
  .anedot.is-desktop, .give-fallback.is-desktop { display: none; }
}

/* ---------------------------------------------------------------------
   Give band: a photo break mid-page with the Give button
   --------------------------------------------------------------------- */
.giveband { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--white); min-height: clamp(360px, 52vh, 520px); display: grid; place-items: center; text-align: center; padding: clamp(48px, 8vh, 80px) var(--gutter); }
.giveband-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 116%; top: -8%; object-fit: cover; object-position: 50% 35%; transform: translate3d(0, var(--drift, 0%), 0); will-change: transform; }
.giveband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(7, 23, 43, 0.62), rgba(7, 23, 43, 0.72)); }
.giveband-inner { display: grid; justify-items: center; }
.giveband-inner .banner { align-self: center; }
.giveband-cta { margin-top: clamp(22px, 3.6vh, 34px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.giveband-cta .pill { box-shadow: 0 16px 40px rgba(7, 23, 43, 0.4); }
@media (max-width: 560px) { .giveband-cta .pill { flex: 1 1 100%; max-width: 380px; } }
.brolltile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); border: 6px solid var(--white); box-shadow: 0 30px 70px rgba(7, 23, 43, 0.3); text-decoration: none; }
.brolltile img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: transform 0.8s var(--ease); }
.brolltile:hover img { transform: scale(1.04); }
.brolltile-label { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---------------------------------------------------------------------
   "Restore the promise of the Valley": the big banner, on every page
   --------------------------------------------------------------------- */
.restore { background: var(--navy); color: var(--white); text-align: center; padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(56px, 9vh, 100px); }
.restore-frame { position: relative; display: inline-block; padding: clamp(24px, 4vw, 48px) clamp(28px, 6vw, 80px); }
.rail { position: absolute; display: block; background: var(--white); pointer-events: none; }
.rail-top { left: 0; right: 0; top: 0; height: 4px; transform-origin: left center; }
.rail-right { right: 0; top: 0; width: 4px; height: 48%; transform-origin: center top; }
.rail-bottom { left: 0; right: 0; bottom: 0; height: 4px; background: var(--green); transform-origin: right center; }
.rail-left { left: 0; bottom: 0; width: 4px; height: 48%; background: var(--green); transform-origin: center bottom; }
.js .restore-frame .rail-top, .js .restore-frame .rail-bottom { transform: scaleX(0); transition: transform 0.9s var(--ease); }
.js .restore-frame .rail-right, .js .restore-frame .rail-left { transform: scaleY(0); transition: transform 0.6s var(--ease) 0.85s; }
.js .restore-frame.is-in .rail { transform: none; }
.restore-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(28px, 5.4vw, 74px); line-height: 1.15; text-wrap: balance; }
.restore-title .g { color: var(--green-bright); }
.restore-cta { margin-top: clamp(28px, 4vh, 40px); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 14px; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); padding: clamp(48px, 8vh, 88px) var(--gutter) calc(clamp(28px, 5vh, 48px) + env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.6; text-align: center; }
.footer-inner { max-width: var(--content); margin: 0 auto; }
.social-tiles { margin-top: clamp(24px, 4vh, 36px); display: flex; justify-content: center; gap: 18px; }
.tile-social { position: relative; width: 92px; height: 92px; display: grid; place-items: center; color: var(--green-bright); transition: transform 0.3s var(--ease); }
.tile-social::before, .tile-social::after { content: ""; position: absolute; top: 12px; bottom: 12px; width: 16px; }
.tile-social::before { left: 8px; border: 2px solid var(--white); border-right: 0; }
.tile-social::after { right: 8px; border: 2px solid var(--white); border-left: 0; }
.tile-social:hover { transform: translateY(-3px); }
.tile-social svg { width: 40px; height: 40px; fill: currentColor; }
.footer-cols { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: left; }
.footer-cols h3 { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--green-bright); margin-bottom: 10px; }
.footer-cols a { display: block; color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 5px 0; font-weight: 600; }
.footer-cols a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: clamp(28px, 4vh, 40px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; justify-items: center; gap: 18px; }
.footer-logo { width: 220px; height: auto; }
.disclosure { display: inline-block; padding: 9px 16px 7px; border: 1px solid rgba(255, 255, 255, 0.45); color: var(--white); font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; }
.footer-fine { font-size: 12.5px; }
.footer-fine a { color: inherit; }
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 3000; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; background: var(--navy); color: var(--white); font-size: 14px; font-weight: 700; padding: 12px 20px; box-shadow: 0 12px 32px rgba(7, 23, 43, 0.35); transition: opacity 0.3s, transform 0.3s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Scroll reveals. Only hide things when JS is there to show them again.
   --------------------------------------------------------------------- */
.js [data-reveal], .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].is-in, .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 0.1s; }
.js [data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 0.2s; }
.js [data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 0.3s; }
.js [data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 0.4s; }
.js [data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal-stagger] > *, .js [data-rise] { opacity: 1; transform: none; }
  .js [data-fill] .w { opacity: 1; }
  .js .banner[data-reveal]::before, .js .banner[data-reveal]::after { transform: none; }
  .js .district-map path { stroke-dashoffset: 0; }
  .js .restore-frame .rail { transform: none; }
}
@media print {
  .topbar, .topbar-cta, .toast, .lightbox, .video-play { display: none !important; }
  .js [data-reveal], .js [data-reveal-stagger] > *, .js [data-fill] .w { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   In the News: the list (filled by news.js) and a press release's own page
   --------------------------------------------------------------------- */
.newsfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.newsfilter button { min-height: 44px; padding: 2px 16px 0; border: 2px solid var(--green); background: transparent; color: var(--green-deep); font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.newsfilter button:hover { background: var(--green-tint); }
.newsfilter button[aria-pressed="true"] { background: var(--green); color: var(--white); }
.newslist { list-style: none; margin-top: clamp(22px, 3vh, 30px); display: grid; gap: 14px; }
.newsitem { background: var(--white); padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px); border-left: var(--bracket) solid var(--green); box-shadow: inset 0 0 0 1px var(--hairline); animation: rise 0.7s var(--ease) both; }
.newsitem[data-kind="coverage"] { border-left-color: var(--navy); }
.newsitem-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; color: var(--green-deep); }
.newsitem[data-kind="coverage"] .newsitem-meta { color: var(--navy); }
.newsitem-meta time { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); }
.newsitem-title { margin-top: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.12; text-wrap: balance; }
.newsitem-title a { color: var(--navy); text-decoration: none; }
.newsitem-title a:hover { color: var(--green-deep); }
.newsitem-summary { margin-top: 10px; font-size: clamp(15.5px, 1.6vw, 17px); line-height: 1.55; color: var(--ink-soft); max-width: 70ch; }
.newsitem-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.news-empty { padding: 30px 24px; background: var(--white); text-align: center; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
.news-empty a { color: var(--green-deep); font-weight: 700; }

.release-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; color: var(--green-bright); }
.release-eyebrow time { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: none; color: rgba(255, 255, 255, 0.78); }
.release-hero .banner.is-hero { font-size: clamp(26px, 3.4vw, 42px); max-width: 32ch; text-wrap: pretty; }
.release { max-width: 760px; margin: 0 auto; }
.release-body { max-width: none; }
.release-body a { color: var(--green-deep); font-weight: 700; word-break: break-word; }
.release-end { text-align: center; color: var(--ink-faint); letter-spacing: 0.4em; }
.release-pdfcard { padding: 26px 28px; background: var(--paper); border-left: var(--bracket) solid var(--green); font-size: 17px; }
.release-actions { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 12px; }
.release-back { margin-top: clamp(26px, 4vh, 40px); }