/* ============================================================================
   Shomari Figures for Congress, "Cinematic Editorial" design system
   Midnight navy / ivory / gold · Fraunces (editorial serif) + Inter.
   Oxblood red reserved for Donate only. Full-bleed photography, magazine space.
   ========================================================================== */
:root{
  --ink:#0b1322; --navy:#0e1c38; --navy-2:#15263f; --navy-3:#1d3052;
  /* --ivory stays warm on purpose: it is the TEXT colour on the ink/navy sections, not a
     surface. --paper is the page surface and is white. */
  --ivory:#f5efe2; --paper:#ffffff; --ivory-2:#ece3d1;
  /* Campaign blue, 2026-09-10, replacing the gold at the team's request.
     Their swatch is #657de1 and --gold holds it EXACTLY: it is a fill colour here
     (button backgrounds, rules, borders) and the dark ink text on it clears 4.93:1.
     The other two carry text, so they are the same hue moved only as far as WCAG AA
     forces. --gold-bright sits on the dark navy and barely moves. --gold-deep sits on
     white and ivory, where #657de1 would be 3.77:1 and fail, so it is darkened to
     5.35:1. Token names left as gold to avoid renaming 52 usages and the .btn-gold
     class across ten pages. */
  --gold:#657de1; --gold-bright:#6981e2; --gold-deep:#4360da;
  --red:#9e2b25; --red-bright:#b8362c;
  /* Borders were warm beige to sit on a beige page; on white they read as dingy, so the
     rule lines are now a neutral grey. */
  --ink-soft:#414a5c; --ink-dim:#72757c; /* was #7c7f86, 4.00:1 on white, under the AA
     floor. Pre-existing, not from the colour change. #72757c is 4.61:1. */ --line:#e2e4e8; --line-dk:rgba(245,239,226,0.14);
  --fd:'Fraunces', Georgia, 'Times New Roman', serif;
  --fb:'Inter', system-ui, -apple-system, sans-serif;
  --max:1240px; --wide:1380px; --pad:clamp(22px,5vw,72px);
}
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
/* The closed mobile drawer is parked off-screen at translateX(100%), which can widen the
   scroll area on narrow viewports. Clip the inline axis so the page never scrolls sideways. */
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1, h2, h3, h4{font-family:var(--fd);font-weight:400;line-height:1.04;letter-spacing:-0.015em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:3px}

/* ---- type helpers ---- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.eyebrow.center{justify-content:center}
/* .band-navy added 2026-09-10. The eyebrow takes --gold-deep, and on the navy band
   that was fine as gold but is 3.15:1 as the darker blue. Same gap as the em rule. */
.on-dark .eyebrow, .band-ink .eyebrow, .band-navy .eyebrow, .hero .eyebrow{color:var(--gold-bright)}
.serif{font-family:var(--fd)}
.italic{font-style:italic}
em, .accent{font-style:italic;color:var(--gold-deep)}
/* Dark bands flip em and .accent to the lighter blue. This previously listed only
   .band-ink and .hero, which was survivable while the accent was gold (#a8853a was
   4.90:1 on navy) but not once it became a darker blue for readability on white
   (#4360da is 3.16:1 there). .band-navy and .on-dark added. */
.band-ink em, .band-navy em, .on-dark em, .hero em,
.band-ink .accent, .band-navy .accent, .on-dark .accent{color:var(--gold-bright)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;font-family:var(--fb);font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s, background .25s, color .25s, border-color .25s;border-radius:2px}
.btn-gold{background:var(--gold);color:var(--ink)}.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn-red{background:var(--red);color:var(--ivory)}.btn-red:hover{background:var(--red-bright);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--ivory)}.btn-ink:hover{background:var(--navy);transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(245,239,226,0.55);color:var(--ivory)}.btn-outline:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn-outline-ink{border:1px solid var(--ink);color:var(--ink)}.btn-outline-ink:hover{background:var(--ink);color:var(--ivory)}
.btn-sm{padding:12px 22px;font-size:16px}
.btn-lg{padding:18px 38px;font-size:16px}

/* ---- nav (transparent over hero -> solid on scroll) ---- */
nav.top{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .35s, box-shadow .35s, padding .35s;padding:22px 0}
nav.top .wrap-wide{display:flex;justify-content:space-between;align-items:center;gap:20px}
nav.top.scrolled{background:rgba(11,19,34,0.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(245,239,226,0.1);padding:14px 0}
.brand-link{display:flex;flex-direction:column;line-height:1;color:var(--ivory)}
.brand-link .name{font-family:var(--fd);font-size:25px;font-weight:600;color:var(--ivory);letter-spacing:-0.01em}
.brand-link .sub{font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.14em;color:var(--gold-bright);text-transform:uppercase;margin-top:5px}
.top-links{display:flex;gap:26px;align-items:center;font-family:var(--fb);font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--ivory)}
.top-links a{position:relative;padding:3px 0;opacity:.92;transition:opacity .2s, color .2s}
.top-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--gold-bright);transition:width .25s}
.top-links a:hover, .top-links a[aria-current="page"]{opacity:1;color:var(--gold-bright)}
.top-links a:hover::after, .top-links a[aria-current="page"]::after{width:100%}
.top-cta{font-family:var(--fb);font-weight:600;background:var(--red);color:var(--ivory);padding:11px 24px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;transition:background .25s}
.top-cta:hover{background:var(--red-bright)}
.nav-burger{display:none;flex-direction:column;gap:6px;padding:8px}
.nav-burger span{display:block;width:26px;height:2px;background:var(--ivory);transition:transform .3s, opacity .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-drawer{position:fixed;inset:0;background:var(--ink);z-index:75;transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.5,0, .2,1), visibility 0s linear .4s;display:flex;flex-direction:column;justify-content:flex-start;padding:94px var(--pad) 40px;overflow-y:auto}
.mobile-drawer.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.5,0, .2,1), visibility 0s linear 0s}
.mobile-drawer a{font-family:var(--fd);font-size:27px;font-weight:400;color:var(--ivory);padding:9px 0;display:block;letter-spacing:-0.01em;border-bottom:1px solid var(--line-dk)}
.mobile-drawer a:hover{color:var(--gold-bright)}
body.drawer-open{overflow:hidden}

/* ---- HERO (full-bleed cinematic) ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivory);overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 22%}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(11,19,34,0.55) 0%, rgba(11,19,34,0.12) 26%, rgba(11,19,34,0.66) 72%, rgba(11,19,34,0.96) 100%),
  linear-gradient(90deg, rgba(11,19,34,0.72) 0%, rgba(11,19,34,0.18) 52%, transparent 100%)}
.hero .wrap-wide{position:relative;z-index:1;width:100%;padding-top:140px;padding-bottom:clamp(56px,9vh,108px)}
.hero-content{max-width:860px}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-family:var(--fd);font-weight:300;font-size:clamp(58px,10vw,150px);line-height:0.92;letter-spacing:-0.025em;color:var(--ivory);margin-bottom:26px}
.hero h1 em{font-weight:400}
.hero .sub{font-size:clamp(18px,2vw,22px);font-weight:400;color:rgba(245,239,226,0.9);max-width:54ch;margin-bottom:36px;line-height:1.6}
.hero .sub strong{color:var(--gold-bright);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;font-family:var(--fb);font-size:16px;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,239,226,0.6);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:1px;height:42px;background:linear-gradient(var(--gold-bright), transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}

/* ---- sections / bands ---- */
.section{padding:clamp(76px,11vw,150px) 0}
.band-ink{background:var(--ink);color:var(--ivory)}
.band-navy{background:var(--navy);color:var(--ivory)}
/* The second light band. Kept a hair off pure white so alternating light sections still
   read as separate blocks against .band-paper, without returning to beige. */
.band-ivory{background:#f6f7f9}
.band-paper{background:var(--paper)}
.section-head{max-width:760px;margin:0 auto clamp(48px,6vw,76px)}
.section-head.center{text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(38px,5.6vw,76px);font-weight:300;line-height:1.02;color:var(--ink);margin-top:20px;letter-spacing:-0.02em}
.band-ink .section-head h2, .band-navy .section-head h2{color:var(--ivory)}
.section-head h2 em{font-weight:400;color:var(--gold-deep)}
.band-ink .section-head h2 em, .band-navy .section-head h2 em{color:var(--gold-bright)}
.section-head p{margin-top:22px;font-size:18px;color:var(--ink-soft);line-height:1.75}
.band-ink .section-head p, .band-navy .section-head p{color:rgba(245,239,226,0.78)}

/* ---- page hero (subpages) ---- */
.page-hero{position:relative;background:var(--ink);color:var(--ivory);padding:clamp(150px,18vh,220px) 0 clamp(56px,8vw,96px);overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 88% 0%, rgba(194,161,78,0.16), transparent 58%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{color:var(--gold-bright);margin-bottom:22px}
.page-hero h1{font-size:clamp(46px,7vw,104px);font-weight:300;color:var(--ivory);line-height:0.96;letter-spacing:-0.025em;max-width:15ch}
.page-hero h1 em{font-weight:400;color:var(--gold-bright)}
.page-hero p{margin-top:26px;font-size:19px;color:rgba(245,239,226,0.82);max-width:62ch;line-height:1.7}

/* ---- editorial two-col story ---- */
.story-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.story-grid.flip .story-media{order:2}
.story-media{position:relative}
.story-media img{width:100%;height:clamp(420px,52vw,640px);object-fit:cover;border-radius:14px}
.story-media.nocrop img{height:auto;object-fit:contain}
.story-media .frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);border-radius:14px;z-index:-1}
.band-ink .story-media .frame, .band-navy .story-media .frame{border-color:var(--gold-deep)}
.story-body h2{font-size:clamp(34px,4.6vw,62px);font-weight:300;color:var(--ink);line-height:1.02;margin-bottom:26px;letter-spacing:-0.02em}
.band-ink .story-body h2{color:var(--ivory)}
.story-body h2 em{font-weight:400;color:var(--gold-deep)}
.band-ink .story-body h2 em{color:var(--gold-bright)}
.story-body p{font-size:17.5px;color:var(--ink-soft);line-height:1.85;margin-bottom:20px}
.band-ink .story-body p, .band-navy .story-body p{color:rgba(245,239,226,0.8)}
.story-body p strong{color:var(--ink);font-weight:600}
.band-ink .story-body p strong{color:var(--ivory)}
.story-body .btn{margin-top:14px}

/* ---- record / numbered editorial cards ---- */
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rec{padding:44px 38px;border-left:1px solid var(--line-dk)}
.rec:first-child{border-left:0}
.band-ivory .rec, .band-paper .rec{border-left-color:var(--line)}
.rec .num{font-family:var(--fd);font-size:16px;font-style:italic;color:var(--gold-bright);margin-bottom:26px;display:block}
.band-ivory .rec .num, .band-paper .rec .num{color:var(--gold-deep)}
.rec h3{font-family:var(--fd);font-weight:400;font-size:26px;line-height:1.12;color:var(--ivory);margin-bottom:14px;letter-spacing:-0.01em}
.band-ivory .rec h3, .band-paper .rec h3{color:var(--ink)}
.rec p{font-size:16px;color:rgba(245,239,226,0.74);line-height:1.7}
.band-ivory .rec p, .band-paper .rec p{color:var(--ink-soft)}
/* Second accomplishment on a record card. Separated by a rule so it reads as an
   additional line rather than a run-on of the paragraph above it. */
.rec .rec-also{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dk);font-size:15px}
.band-ivory .rec .rec-also, .band-paper .rec .rec-also{border-top-color:var(--line)}
.rec .rec-also span{font-family:var(--fd);font-style:italic;color:var(--gold-bright);margin-right:8px}
.band-ivory .rec .rec-also span, .band-paper .rec .rec-also span{color:var(--gold-deep)}

/* ---- issues (editorial) ---- */
.iss-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px)}
.iss-card{padding:44px 40px;background:var(--paper);border-top:2px solid var(--gold)}
.band-ivory .iss-card{background:#fff}
.iss-card .k{font-family:var(--fd);font-style:italic;font-size:16px;color:var(--gold-deep);margin-bottom:14px;display:block}
.iss-card h3{font-family:var(--fd);font-weight:400;font-size:30px;color:var(--ink);line-height:1.08;margin-bottom:14px;letter-spacing:-0.015em}
.iss-card .ctx{font-size:16px;color:var(--ink-soft);margin-bottom:22px;line-height:1.65;padding-bottom:20px;border-bottom:1px solid var(--line)}
.iss-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.iss-card li{font-size:16px;color:var(--ink);padding-left:26px;position:relative;line-height:1.55}
.iss-card li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--gold)}

/* ---- endorsements ---- */
.endorse-block{margin-bottom:52px}
.endorse-block .h{font-family:var(--fb);font-size:16px;font-weight:600;color:var(--gold-bright);letter-spacing:.24em;text-transform:uppercase;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line-dk)}
.band-ivory .endorse-block .h{color:var(--gold-deep);border-bottom-color:var(--line)}
.endorse-list{display:flex;flex-wrap:wrap;gap:10px}
.endorse-list .e{padding:11px 18px;font-size:16px;color:var(--ivory);border:1px solid var(--line-dk);border-radius:2px;transition:border-color .25s, background .25s}
.endorse-list .e:hover{border-color:var(--gold);background:rgba(194,161,78,0.08)}
.endorse-list .e strong{color:var(--gold-bright);font-weight:600}
.band-ivory .endorse-list .e{color:var(--ink);border-color:var(--line)}
.band-ivory .endorse-list .e strong{color:var(--gold-deep)}

/* ---- news (editorial rows) ---- */
.news-list{display:flex;flex-direction:column}
.news-row{padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:baseline;transition:padding-left .25s}
.band-ivory .news-row{border-top-color:var(--ivory-2)}
.news-row:last-child{border-bottom:1px solid var(--line)}
.news-row:hover{padding-left:10px}
.news-row .date{font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.news-row h4{font-family:var(--fd);font-weight:400;font-size:23px;color:var(--ink);line-height:1.22;letter-spacing:-0.01em}
.news-row .src{font-family:var(--fb);font-size:16px;color:var(--ink-dim);white-space:nowrap}
/* Rows with a cover get a small thumbnail on the right. Deliberately restrained: this is
   a press list, so the headline leads and the picture supports it. */
.news-row.with-thumb{grid-template-columns:112px 1fr auto 132px;align-items:center}
.news-row .nr-thumb{display:block;width:132px;height:84px;border-radius:6px;overflow:hidden;background:var(--ivory-2)}
.news-row .nr-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.news-row:hover .nr-thumb img{transform:scale(1.04)}

/* ---- pull quote ---- */
.pullquote{max-width:980px;margin:0 auto;text-align:center}
.pullquote .mark{font-family:var(--fd);font-size:80px;line-height:.4;color:var(--gold);display:block;margin-bottom:10px}
.pullquote blockquote{font-family:var(--fd);font-weight:300;font-size:clamp(26px,3.6vw,46px);font-style:italic;line-height:1.28;color:var(--ink);letter-spacing:-0.01em}
.band-ink .pullquote blockquote, .band-navy .pullquote blockquote{color:var(--ivory)}
.pullquote .att{margin-top:28px;font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.band-ink .pullquote .att{color:var(--gold-bright)}

/* ---- CTA band ---- */
.cta-band{text-align:center;padding:clamp(76px,10vw,140px) 0}
.cta-band h2{font-size:clamp(40px,6vw,88px);font-weight:300;color:var(--ivory);line-height:1;margin-bottom:22px;letter-spacing:-0.025em}
.cta-band h2 em{font-weight:400;color:var(--gold-bright)}
.cta-band p{font-size:19px;color:rgba(245,239,226,0.84);max-width:56ch;margin:0 auto 36px;line-height:1.7}
.cta-row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---- vote band ---- */
.vote-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.vote-grid .date{font-family:var(--fd);font-style:italic;color:var(--gold-bright);font-size:21px;margin-bottom:16px}
.vote-grid h2{font-size:clamp(34px,4.8vw,64px);font-weight:300;color:var(--ivory);line-height:1;margin-bottom:16px;letter-spacing:-0.02em}
.vote-grid p{color:rgba(245,239,226,0.8);max-width:46ch;font-size:17px}
.vote-actions{display:flex;flex-direction:column;gap:12px}

/* ---- forms ---- */
.form-card{background:var(--navy);color:var(--ivory);padding:clamp(32px,4vw,52px);border-top:2px solid var(--gold)}
.form-card.light{background:#fff;color:var(--ink);border-top-color:var(--gold);box-shadow:0 24px 60px -40px rgba(11,19,34,0.5)}
.form-card h3{font-family:var(--fd);font-weight:400;font-size:30px;color:var(--ivory);margin-bottom:8px;letter-spacing:-0.01em}
.form-card.light h3{color:var(--ink)}
.form-card .form-sub{font-size:16px;color:rgba(245,239,226,0.7);margin-bottom:30px}
.form-card.light .form-sub{color:var(--ink-soft)}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,239,226,0.64);margin-bottom:9px}
.form-card.light .field label{color:var(--ink-soft)}
.field input, .field textarea, .field select{width:100%;padding:14px 16px;border:1px solid rgba(245,239,226,0.2);background:rgba(245,239,226,0.04);color:var(--ivory);font-family:var(--fb);font-size:16px;border-radius:2px}
/* Fields need to sit a shade below the white card, otherwise the input is invisible
   except for its hairline border. */
.form-card.light .field input, .form-card.light .field textarea, .form-card.light .field select{background:#f6f7f9;border-color:var(--line);color:var(--ink)}
.field input:focus, .field textarea:focus, .field select:focus{outline:0;border-color:var(--gold)}
.field textarea{min-height:140px;resize:vertical}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-submit{background:var(--gold);color:var(--ink);padding:15px 36px;font-family:var(--fb);font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;transition:background .25s;margin-top:6px}
.contact-submit:hover{background:var(--gold-bright)}
.contact-submit[data-state="sending"]{opacity:.6;pointer-events:none}
.contact-status{margin-top:16px;font-size:16px;min-height:20px}
.contact-status[data-state="ok"]{color:#86d6a0}
.contact-status[data-state="err"]{color:#f0a59f}
.form-card.light .contact-status[data-state="ok"]{color:#1c7a45}
.form-card.light .contact-status[data-state="err"]{color:var(--red)}

/* ---- contact info ---- */
.contact-info{display:flex;flex-direction:column}
.contact-info .row{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.contact-info .row:first-child{border-top:1px solid var(--line)}
.contact-info .row svg{width:20px;height:20px;color:var(--gold-deep);flex-shrink:0;margin-top:3px}
.contact-info .label{font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px}
.contact-info .val{font-family:var(--fd);font-size:21px;color:var(--ink);letter-spacing:-0.01em;line-height:1.3}

/* ---- footer ---- */
footer{background:var(--ink);color:rgba(245,239,226,0.62);padding:clamp(56px,7vw,84px) 0 30px;border-top:1px solid var(--line-dk)}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.foot-brand .name{font-family:var(--fd);font-size:27px;font-weight:600;color:var(--ivory);display:block;letter-spacing:-0.01em}
.foot-brand .sub{font-family:var(--fb);font-size:16px;font-weight:600;letter-spacing:.22em;color:var(--gold-bright);text-transform:uppercase;display:block;margin:7px 0 20px}
.foot-brand p{font-size:16px;color:rgba(245,239,226,0.55);line-height:1.75;max-width:40ch;margin-bottom:20px}
.foot-social{display:flex;gap:12px}
.foot-social a{width:38px;height:38px;border:1px solid var(--line-dk);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s, border-color .25s}
.foot-social a:hover{background:var(--gold);border-color:var(--gold)}
.foot-social a:hover svg{color:var(--ink)}
.foot-social svg{width:16px;height:16px;color:var(--ivory);transition:color .25s}
.foot-col h4{font-family:var(--fb);font-size:16px;font-weight:600;color:var(--gold-bright);text-transform:uppercase;margin-bottom:18px;letter-spacing:.14em}
/* Footer links were 21px tall, under the 24px minimum target size and well under
   a comfortable thumb. Padding makes the target, not font size, so the type is
   unchanged; the gap comes down to keep the visual rhythm close to what it was. */
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.foot-col li a, .foot-col li{font-size:16px;color:rgba(245,239,226,0.66);line-height:1.5}
.foot-col li a{display:inline-block;padding:7px 0}
/* The four Get Involved CTAs (donate, volunteer, yard sign, host) sat at 28px.
   They clear the WCAG 2.2 minimum of 24px, but this is the page where people
   actually convert, so they get a comfortable target. The inline links in running
   prose are deliberately left alone: SC 2.5.8 exempts them, and padding text inside
   a sentence breaks the line rhythm. */
.way a{display:inline-block;padding:8px 0}
/* The contact email sits alone in its own row, so it is a standalone target
   rather than a link inside a sentence. 24px met the minimum and no more;
   this is the primary way anyone contacts the campaign. */
.contact-info .val a{display:inline-block;padding:6px 0}
.foot-col li a:hover{color:var(--gold-bright)}
/* The Paid Political Advertisement disclaimer. At 0.45 alpha it rendered 4.07:1,
   under AA, and this is a legal notice on a campaign site rather than decoration.
   0.51 gives 4.89:1, enough headroom that browser rounding cannot drop it back under. */
.foot-bottom{padding-top:26px;border-top:1px solid var(--line-dk);font-size:16px;color:rgba(245,239,226,0.51);text-align:center;line-height:1.9}
.foot-bottom strong{display:block;color:var(--gold-bright);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-weight:600;font-size:16px}
.foot-bottom a{color:var(--gold-bright);display:inline-block;padding:6px 0}

/* ---- responsive ---- */
@media (max-width:980px){
  .top-links, nav.top .top-cta{display:none}
  .nav-burger{display:flex}
  nav.top{padding:18px 0}
  .hero .wrap-wide{padding-top:120px}
  .hero-media img{object-position:70% 14%}
  .hero h1{font-size:clamp(44px,12vw,72px)}
  .hero .sub{font-size:16px;margin-bottom:28px}
  .story-grid{grid-template-columns:1fr;gap:40px}
  .story-grid.flip .story-media{order:0}
  .story-media .frame{inset:12px -12px -12px 12px}
  .story-media img{height:clamp(340px,60vw,460px)}
  .rec-grid{grid-template-columns:1fr}
  .rec{border-left:0;border-top:1px solid var(--line-dk);padding:34px 0}
  .band-ivory .rec{border-top-color:var(--line)}
  .rec:first-child{border-top:0}
  .iss-grid{grid-template-columns:1fr}
  .vote-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .news-row, .news-row.with-thumb{grid-template-columns:88px 1fr;gap:14px;align-items:start}
  .news-row .date{grid-column:1;grid-row:1}
  .news-row h4{grid-column:2;grid-row:1;font-size:19px}
  .news-row .src{grid-column:2;grid-row:2;white-space:normal}
  .news-row .nr-thumb{grid-column:1;grid-row:2;width:88px;height:60px}
  .foot-grid{grid-template-columns:1fr}
  .scroll-cue{display:none}
}

/* Aryele's 2026-08-18 edits. The platform went from four cards to three, so a
   trailing odd card centres instead of hanging in the left column. */
.iss-grid > .iss-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(14px,1.5vw,22px))}
/* .rec-grid is three columns; the In Congress block now has four, so this
   variant runs 2x2 and moves the dividers to match. */
.rec-grid.rec-4{grid-template-columns:repeat(2,1fr)}
.rec-grid.rec-4 .rec:nth-child(odd){border-left:0}
.rec-grid.rec-4 .rec:nth-child(n+3){border-top:1px solid var(--line)}
@media (max-width:980px){
  .iss-grid > .iss-card:last-child:nth-child(odd){width:auto}
  .rec-grid.rec-4{grid-template-columns:1fr}
  .rec-grid.rec-4 .rec{border-left:0}
  .rec-grid.rec-4 .rec:nth-child(n+2){border-top:1px solid var(--line)}
}

/* A page-hero holding only its label does not need padding sized for a 104px
   headline. Keeps enough top clearance for the fixed nav, drops the rest. */
.page-hero.compact{padding:clamp(118px,14vh,150px) 0 clamp(26px,3.5vw,40px)}
.page-hero.compact .eyebrow{margin-bottom:0}