/* ==========================================================================
   Midtown Democrats Club — site.css
   Palette: red #CC0000 · navy #032E65 · white · cream base
   Type: Roca One→Fraunces (display) · Norwester (caps labels) ·
         Gabriel Sans Condensed→Barlow Semi Condensed (text)
   ========================================================================== */

:root{
  --red:#CC0000;
  --red-deep:#A30000;
  --navy:#032E65;
  --navy-2:#002E66;
  --ink:#0A1C36;            /* near-black navy for body text */
  --midnight:#061A33;       /* dark section surface */
  --cream:#FAF6EF;
  --cream-2:#F3EDE1;
  --paper:#FFFFFF;
  --line:rgba(3,46,101,.16);
  --line-soft:rgba(3,46,101,.10);

  --font-display:"Roca One","Fraunces",Georgia,serif;
  --font-caps:"Norwester","Barlow Semi Condensed",Impact,sans-serif;
  --font-text:"Gabriel Sans Condensed","Barlow Semi Condensed",Arial,sans-serif;

  --wrap:76rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --radius:18px;
  --shadow:0 18px 44px -18px rgba(3,46,101,.28);
  --ease:cubic-bezier(.22,.61,.25,1);
}

@font-face{
  font-family:"Norwester";
  src:url("../fonts/norwester.woff2") format("woff2"),
      url("../fonts/norwester.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy)}
/* ---------- no widows ----------
   HOUSE RULE: never let a line end with one stranded word. Headings get
   `balance` (even line lengths, no orphan); running text gets `pretty`, which
   specifically prevents a single-word last line. `balance` is capped at a few
   lines by browsers, which is exactly the heading case; `pretty` is the right
   tool for paragraphs. Both degrade to normal wrapping where unsupported, so
   the stubborn cases are additionally fixed with   in the copy. */
h1,h2,h3,h4{
  margin:0 0 .5em;font-family:var(--font-display);font-weight:640;line-height:1.06;
  color:var(--navy);letter-spacing:-.01em;
  text-wrap:balance;
}
p{margin:0 0 1em;text-wrap:pretty}
.lede,.prose p,.muted,figcaption,.what span,.fact span,li span{text-wrap:pretty}
/* Short display strings should never break at all mid-phrase. */
.eyebrow,.pill,.btn,.door-tag,.role{text-wrap:nowrap}
@media (max-width:520px){.eyebrow,.btn{text-wrap:balance}}

/* Grid/flex children default to min-width:auto, so one unbreakable token (an
   nbsp-bound phrase, an email address) can force a track wider than the
   viewport. Let the tracks shrink below their content's min-content width. */
.hero-grid>*,.duo>*,.pillars>*,.doors>*,.photo-row>*,.footer-grid>*{min-width:0}
/* Soft bind: keeps a short phrase on one line so its last word can't strand.
   The narrow-phone type scale at the end of this file is sized so the bound
   phrase still fits 320px, so this never needs releasing. */
.nbp{white-space:nowrap}
.vote-band{overflow:hidden}  /* .hero/.signup-band/.page-hero already clip */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
/* a red ring on the red bands is invisible — confirmed on the signup button */
.section--red :focus-visible{outline-color:#fff}
::selection{background:var(--navy);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:200;font-family:var(--font-caps);letter-spacing:.08em}
.skip-link:focus{left:.5rem;top:.5rem}

/* grain overlay */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-caps);
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:.65rem;margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:2.2rem;height:2px;background:var(--red);flex:none}
.eyebrow--bare::before{display:none}
.eyebrow--light{color:#F1B9B9}
.eyebrow--light::before{background:#F1B9B9}

.display-xl{font-size:clamp(2.6rem,6.4vw,4.9rem)}
.display-lg{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.display-md{font-size:clamp(1.55rem,2.8vw,2.1rem)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:rgba(10,28,54,.82);max-width:38em}
.em-i{font-style:italic;font-weight:560;color:var(--red)}
.muted{color:rgba(10,28,54,.66)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-caps);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1.5rem;border-radius:999px;text-decoration:none;border:2px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  will-change:transform;
}
.btn .icon{width:1rem;height:1rem;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .icon{transform:translate(2px,-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 26px -12px rgba(204,0,0,.55)}
.btn-red:hover{background:var(--red-deep)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 12px 26px -12px rgba(3,46,101,.5)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--navy)}
.btn-white{background:#fff;color:var(--red);box-shadow:0 12px 26px -12px rgba(0,0,0,.35)}

.text-link{
  font-family:var(--font-caps);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  background-image:linear-gradient(var(--red),var(--red));background-size:0% 2px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .3s var(--ease);padding-bottom:3px;
}
.text-link:hover{background-size:100% 2px}
.text-link .icon{width:.85rem;height:.85rem}

/* ---------- icons ---------- */
.icon{width:1.35rem;height:1.35rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- header / nav ---------- */
.topbar{
  position:sticky;top:0;z-index:120;
  background:rgba(250,246,239,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease);
}
.topbar.is-stuck{background:rgba(250,246,239,.96);box-shadow:0 10px 30px -18px rgba(3,46,101,.35)}
.topbar-inner{display:flex;align-items:center;gap:1.2rem;min-height:4.6rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--navy);margin-right:auto}
.brand img{width:2.9rem;height:2.9rem}
.brand-name{font-family:var(--font-caps);font-size:1.02rem;letter-spacing:.12em;line-height:1.15;text-transform:uppercase}
.brand-name small{display:block;font-size:.6rem;letter-spacing:.3em;color:var(--red)}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a:not(.btn){
  font-family:var(--font-caps);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(var(--red),var(--red));background-size:0% 2px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .3s var(--ease);padding-bottom:4px;
}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]:not(.btn){background-size:100% 2px;color:var(--red)}
.nav-links .btn{padding:.7rem 1.2rem;font-size:.78rem}
.nav-fb{display:inline-flex;align-items:center;gap:.4rem}
.nav-links .nav-fb .icon{width:1rem;height:1rem}
/* Between the hamburger breakpoint and ~1150px the row is full: labels are
   nowrap (two-line "GET / INVOLVED" was the alternative, and it predates the
   Facebook link), and Facebook shows as its icon alone. aria-label keeps its
   name. Measured 2026-09-05: the row fits at 921px with 19px to spare. */
@media (min-width:921px) and (max-width:1149px){.nav-fb-text{display:none}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--navy)}
.nav-toggle .icon{width:1.7rem;height:1.7rem}

@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);display:none;padding:.6rem 0 1rem;
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:.55rem var(--pad)}
  .nav-links .btn{justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3.4rem,8vw,6.5rem) 0 clamp(2.8rem,6vw,4.5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
/* 6.5vw, not 7: at 861–1100px the nbsp-bound "Midtown Memphis." line ran
   up to 29px past its column at 7vw. */
.hero h1{font-size:clamp(2.9rem,6.5vw,5.6rem);margin-bottom:.45em}
.hero .lede{margin-bottom:2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-follow{margin:1.1rem 0 0;font-size:.95rem;color:rgba(10,28,54,.68)}
.hero-follow a{color:var(--navy)}
.hero-seal{position:relative;display:grid;place-items:center}
.hero-seal .seal-img{width:min(21rem,72%);filter:drop-shadow(0 26px 40px rgba(3,46,101,.30))}
.seal-orbit{position:absolute;width:min(30rem,104%);opacity:.9}
.hero-facts{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.fact{min-width:8rem}
.fact b{display:block;font-family:var(--font-caps);font-size:1.05rem;letter-spacing:.1em;color:var(--navy)}
.fact span{font-size:.86rem;color:rgba(10,28,54,.68)}
.hero-bg-star{position:absolute;right:-6rem;top:-7rem;width:26rem;color:rgba(3,46,101,.05);pointer-events:none}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  /* Sized so the nbsp-bound "Midtown Memphis." (8.5em) fits the column at
     every width: with the 2.9rem floor it was 396px wide at 345–414px, the
     grid column grew to fit it and .hero{overflow:hidden} cut the whole
     column off at the right edge on an iPhone. */
  .hero h1{font-size:clamp(1.9rem,10vw,3.8rem)}
  .hero-seal{order:-1}
  .hero-seal .seal-img{width:min(13rem,52%)}
  .seal-orbit{width:min(19rem,78%)}
}

/* rotating orbit text */
@keyframes orbit{to{transform:rotate(360deg)}}
.seal-orbit svg{animation:orbit 36s linear infinite}
.seal-orbit text{font-family:var(--font-caps);font-size:10.5px;letter-spacing:.42em;fill:var(--navy);opacity:.7}

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;white-space:nowrap;padding:.85rem 0;position:relative;
}
.marquee-track{display:inline-flex;gap:2.6rem;padding-right:2.6rem;animation:marquee 36s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee span{
  font-family:var(--font-caps);font-size:.86rem;letter-spacing:.26em;text-transform:uppercase;color:var(--navy);
  display:inline-flex;align-items:center;gap:2.6rem;
}
.marquee .star{width:.7rem;height:.7rem;fill:var(--red);stroke:none}
.marquee--navy{background:var(--navy);border-color:transparent}
.marquee--navy span{color:rgba(255,255,255,.85)}
.marquee--navy .star{fill:#fff;opacity:.8}

/* ---------- sections ---------- */
.section{padding:clamp(3.2rem,7vw,5.8rem) 0}
.section-head{max-width:44em;margin-bottom:clamp(1.8rem,4vw,3rem)}
.section--paper{background:var(--paper);border-block:1px solid var(--line-soft)}
.section--navy{background:linear-gradient(160deg,var(--navy) 0%,var(--midnight) 86%);color:#E8EDF6}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lede{color:rgba(232,237,246,.82)}
.section--red{background:linear-gradient(150deg,var(--red) 0%,var(--red-deep) 90%);color:#fff}

/* ---------- meeting / signal cards ---------- */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:stretch}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow);
}
.card--navy{background:linear-gradient(160deg,var(--navy),var(--midnight));color:#E8EDF6;border:0}
.card--navy h3{color:#fff}
.card--cream{background:var(--cream-2);box-shadow:none}

.meeting-card{display:flex;flex-direction:column;gap:1.1rem}
.meeting-when{display:flex;gap:1.1rem;align-items:flex-start}
.meeting-when .icon{width:2rem;height:2rem;color:var(--red);margin-top:.2rem}
.meeting-when b{font-family:var(--font-caps);letter-spacing:.1em;font-size:1.05rem;text-transform:uppercase}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-caps);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(204,0,0,.09);color:var(--red);border:1px solid rgba(204,0,0,.25);
  padding:.4rem .8rem;border-radius:999px;
}
.card--navy .pill{background:rgba(255,255,255,.1);color:#FFD8D8;border-color:rgba(255,255,255,.22)}

/* countdown */
.countdown{display:flex;gap:1rem;margin:.6rem 0 .4rem}
.count-cell{text-align:center;min-width:4.4rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.7rem .5rem}
.count-cell b{display:block;font-family:var(--font-caps);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:#fff}
.count-cell span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,237,246,.65);font-family:var(--font-caps)}

/* ---------- pillars (numbered) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}
.pillar{position:relative;padding:1.9rem 1.6rem 1.6rem;border-top:2px solid var(--line);transition:border-color .3s var(--ease)}
.pillar:hover{border-top-color:var(--red)}
.pillar-num{
  font-family:var(--font-caps);font-size:3rem;color:transparent;
  -webkit-text-stroke:1.5px rgba(3,46,101,.28);letter-spacing:.02em;line-height:1;margin-bottom:1rem;
}
.pillar .icon{width:1.7rem;height:1.7rem;color:var(--red);margin-bottom:.9rem}
.pillar h3{font-size:1.45rem}
.pillar p{color:rgba(10,28,54,.74);font-size:1rem;margin:0}

/* ---------- doors (3 ways) ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media (max-width:860px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;display:flex;flex-direction:column;gap:.9rem;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:2rem 1.7rem;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.door:hover{transform:translateY(-6px);box-shadow:0 26px 54px -20px rgba(3,46,101,.4)}
.door-tag{font-family:var(--font-caps);font-size:.72rem;letter-spacing:.2em;color:var(--red);text-transform:uppercase}
.door h3{font-size:1.6rem;margin:0}
.door p{color:rgba(10,28,54,.74);margin:0;flex:1}
.door .icon-lg{width:2.3rem;height:2.3rem;color:var(--navy)}
.door .text-link{margin-top:.4rem}

/* ---------- vote band ---------- */
.vote-band .duo{align-items:center}
.datebox{display:flex;flex-direction:column;gap:1rem}
/* display:flex would otherwise beat the UA [hidden] rule, so an elapsed
   election row (hidden by site.js) would stay visible. */
.daterow[hidden]{display:none}
.daterow{
  display:flex;align-items:center;gap:1.2rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:1.05rem 1.3rem;color:#E8EDF6;text-decoration:none;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.daterow:hover{background:rgba(255,255,255,.13);transform:translateX(4px)}
.daterow .date{
  font-family:var(--font-caps);text-align:center;min-width:4.2rem;line-height:1.05;
  color:#fff;letter-spacing:.06em;
}
.daterow .date b{display:block;font-size:1.6rem}
.daterow .date span{font-size:.72rem;letter-spacing:.2em;color:#FFB3B3}
.daterow .what b{display:block;font-family:var(--font-caps);letter-spacing:.1em;font-size:.95rem;text-transform:uppercase;color:#fff}
.daterow .what span{font-size:.9rem;color:rgba(232,237,246,.7)}
.daterow .icon{margin-left:auto;color:rgba(255,255,255,.6)}

/* ---------- resource rows / link lists ---------- */
.resource-list{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.resource-list a{
  display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:1.05rem 1.25rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.resource-list a:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:rgba(204,0,0,.35)}
.resource-list .icon{color:var(--red)}
.resource-list b{font-family:var(--font-caps);letter-spacing:.08em;font-size:.95rem;text-transform:uppercase;color:var(--navy);display:block}
.resource-list span{font-size:.9rem;color:rgba(10,28,54,.62)}
/* Email addresses and URLs are single unbreakable tokens that push the
   whole grid past the viewport under ~380px — let them wrap mid-token. */
.resource-list span,.resource-list b{overflow-wrap:anywhere}
.resource-list .icon-ext{margin-left:auto;width:1rem;height:1rem;color:rgba(3,46,101,.4)}

/* ---------- affiliates strip ---------- */
.affiliates{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:920px){.affiliates{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.affiliates{grid-template-columns:1fr}}
.affiliate{
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.3rem;min-height:6.2rem;
  color:var(--navy);background:transparent;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.affiliate:hover{background:var(--paper);transform:translateY(-4px);box-shadow:var(--shadow)}
.affiliate b{font-family:var(--font-caps);letter-spacing:.1em;font-size:.92rem;text-transform:uppercase}
.affiliate span{font-size:.85rem;color:rgba(10,28,54,.68)}

.donate-strip{
  display:grid;grid-template-columns:1fr auto;gap:1.8rem;align-items:center;
  margin-top:1.6rem;padding:1.5rem 1.7rem;
  border:1px solid var(--line);border-radius:14px;background:var(--cream-2);
}
.donate-strip p:last-of-type{margin:0;max-width:46rem}
@media (max-width:760px){.donate-strip{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- email band ---------- */
.signup-band{position:relative;overflow:hidden}
.signup-band .tri-star-bg{position:absolute;right:-4rem;bottom:-6rem;width:22rem;color:rgba(255,255,255,.08);pointer-events:none}
.signup-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;position:relative}
@media (max-width:860px){.signup-inner{grid-template-columns:1fr}}
.signup-band h2{color:#fff}
.signup-band p{color:rgba(255,255,255,.9)}
.signup-actions{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.signup-note{font-size:.85rem;color:rgba(255,255,255,.92)}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:clamp(3rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:16em}
.page-hero .lede{margin-top:.4rem}

/* ---------- prose / faq ---------- */
.prose{max-width:44em}
.prose h3{font-size:1.5rem;margin-top:2rem}
.checklist{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.85rem}
.checklist li{display:flex;gap:.8rem;align-items:flex-start}
.checklist .icon{color:var(--red);margin-top:.2rem}

.faq{display:grid;gap:.9rem}
.faq details{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:1.1rem 1.3rem}
.faq summary{cursor:pointer;font-family:var(--font-caps);letter-spacing:.08em;font-size:.98rem;text-transform:uppercase;color:var(--navy);list-style:none;display:flex;align-items:center;gap:.8rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{margin-left:auto;transition:transform .3s var(--ease);color:var(--red)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{margin:.9rem 0 0;color:rgba(10,28,54,.78)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media (max-width:860px){.people{grid-template-columns:1fr}}
.person{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.8rem 1.6rem;box-shadow:var(--shadow)}
.person-star{width:2.4rem;height:2.4rem;color:var(--red);margin-bottom:1rem}
.person h3{font-size:1.4rem;margin-bottom:.2rem}
.person .role{font-family:var(--font-caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.person p{margin:.8rem 0 0;font-size:.98rem;color:rgba(10,28,54,.74)}
.person--open{border-style:dashed;border-color:rgba(3,46,101,.3);background:transparent;box-shadow:none}

/* ---------- stats (oversized numerals) ---------- */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.bigstats--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.bigstats--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.bigstats,.bigstats--4{grid-template-columns:1fr}}
.bigstat{border-top:2px solid rgba(255,255,255,.2);padding-top:1.2rem}
.bigstat b{font-family:var(--font-caps);font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:#fff;display:block;letter-spacing:.02em;text-wrap:nowrap}
.bigstats--4 b{font-size:clamp(2.1rem,3.4vw,3rem)}
.bigstat span{color:rgba(232,237,246,.75);font-size:.95rem}

/* ---------- footer ---------- */
.footer{background:var(--midnight);color:#C7D2E4;position:relative;overflow:hidden}
.footer a{color:#fff;text-decoration:none}
.footer-wordmark{
  font-family:var(--font-caps);color:rgba(255,255,255,.07);
  font-size:clamp(3.2rem,10.5vw,8.6rem);letter-spacing:.06em;line-height:.95;
  padding:clamp(2rem,5vw,3.4rem) 0 0;user-select:none;white-space:nowrap;text-align:center;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr .7fr .7fr 1fr;gap:2.2rem;
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid rgba(255,255,255,.09);margin-top:1.4rem;
}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{display:flex;align-items:flex-start;gap:1rem}
.footer-brand img{width:3.4rem}
.footer-brand b{font-family:var(--font-caps);letter-spacing:.12em;font-size:1rem;color:#fff;display:block;text-transform:uppercase}
.footer-brand span{font-size:.9rem;color:rgba(199,210,228,.75)}
.footer h4{font-family:var(--font-caps);font-size:.78rem;letter-spacing:.22em;color:#8FA6C9;margin:0 0 1rem;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem}
.footer ul a{background-image:linear-gradient(#fff,#fff);background-size:0% 1px;background-repeat:no-repeat;background-position:left 100%;transition:background-size .3s var(--ease);padding-bottom:2px}
.footer ul a:hover{background-size:100% 1px}
.footer .social{display:flex;gap:.8rem;margin-top:.4rem}
.footer .social a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;transition:background .3s var(--ease),transform .3s var(--ease)}
.footer .social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.09);padding:1.4rem 0 1.8rem;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between;
  font-size:.83rem;color:rgba(199,210,228,.66);
}
.footer-legal p{margin:0}
.ptech-credit{display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-size:.86rem}
.ptech-credit .icon{width:.9rem;height:.9rem;color:var(--red)}
.ptech-credit a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.ptech-credit a:hover{color:#FFB3B3;border-color:#FFB3B3}

/* ---------- photography ----------
   Club photos from real events. HOUSE RULE: photographs render unaltered —
   no filters, tints, duotones, or blend modes. Framing comes from the frame
   (border, radius, caption), never from touching the image itself. */
.photo{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--cream-2);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
}
/* height:auto here — a 100% height would eat the figure and the clipped
   figcaption would vanish under overflow:hidden. Only the fixed-height
   layouts below (mosaic cells, duo column) ask the image to fill. */
.photo img{width:100%;height:auto;object-fit:cover;display:block}
.photo figcaption{
  font-family:var(--font-caps);letter-spacing:.07em;text-transform:uppercase;
  font-size:.74rem;color:var(--navy);opacity:.72;
  padding:.7rem .9rem;background:var(--paper);
}
/* Fills the free column of a .duo next to a text block. */
.photo--duo{height:100%;min-height:22rem}
.photo--duo img{min-height:22rem}

/* Asymmetric mosaic: one tall lead frame + four supporting frames.
   Grid areas keep the ragged rhythm without absolute positioning. */
.photo-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,1rem);
  height:clamp(26rem,44vw,34rem);
}
.photo-mosaic .photo{box-shadow:none;height:100%}
.photo-mosaic .photo img{height:100%}
.photo-mosaic .photo:nth-child(1){grid-column:1/3;grid-row:1/3}
.photo-mosaic .photo:nth-child(2){grid-column:3/4;grid-row:1/2}
.photo-mosaic .photo:nth-child(3){grid-column:4/5;grid-row:1/2}
.photo-mosaic .photo:nth-child(4){grid-column:3/4;grid-row:2/3}
.photo-mosaic .photo:nth-child(5){grid-column:4/5;grid-row:2/3}
@media (max-width:860px){
  .photo-mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr));height:clamp(24rem,86vw,32rem)}
  .photo-mosaic .photo:nth-child(1){grid-column:1/3;grid-row:1/2}
  .photo-mosaic .photo:nth-child(2){grid-column:1/2;grid-row:2/3}
  .photo-mosaic .photo:nth-child(3){grid-column:2/3;grid-row:2/3}
  .photo-mosaic .photo:nth-child(4){grid-column:1/2;grid-row:3/4}
  .photo-mosaic .photo:nth-child(5){grid-column:2/3;grid-row:3/4}
}
/* Even three-across row (get-involved, vote).
   Squarer than 4:3 and biased to the upper third: most of these are portrait
   phone photos, and a centred 4:3 crop guillotines people's heads. */
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.6vw,1.1rem)}
.photo-row .photo img{aspect-ratio:1/1;object-position:center 22%}
@media (max-width:720px){
  .photo-row{grid-template-columns:1fr}
  .photo-row .photo img{aspect-ratio:4/3}
}
@media (max-width:860px){.photo--duo,.photo--duo img{min-height:16rem}}

.vote-band-ctas{display:flex;flex-wrap:wrap;gap:.7rem;align-self:flex-start}

/* ---------- ballot (candidate cards + district coverage) ----------
   Used only by ballot.html. The red top rule is what separates a candidate
   card from the generic .card; keep it — it is the one visual cue that says
   "this is a person you can vote for." */
.ballot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.2vw,1.5rem);margin:0;padding:0;list-style:none}
.ballot-grid--3{grid-template-columns:repeat(3,1fr)}
.ballot-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.ballot-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.ballot-grid,.ballot-grid--3{grid-template-columns:1fr}}
@media (max-width:560px){.ballot-grid--4{grid-template-columns:1fr}}
.ballot-card{
  display:flex;flex-direction:column;gap:.55rem;
  background:var(--paper);border:1px solid var(--line-soft);border-top:3px solid var(--red);
  border-radius:14px;padding:1.5rem 1.4rem;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ballot-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -20px rgba(3,46,101,.4)}
.ballot-seat{font-family:var(--font-caps);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0}
.ballot-card h3{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;margin:0}
.ballot-note{margin:0;font-size:.95rem;color:rgba(10,28,54,.74)}
.ballot-where{margin:0;font-size:.88rem;color:rgba(10,28,54,.68)}
/* margin-top:auto pins the link to the bottom so cards of unequal copy
   length still line their calls-to-action up across the row. */
.ballot-card .text-link{margin-top:auto;padding-top:.6rem}
.ballot-flag{display:block;font-family:var(--font-caps);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.ballot-caveat{
  margin:2.4rem 0 0;padding:1.1rem 1.3rem;font-size:.92rem;color:rgba(10,28,54,.68);
  background:var(--cream-2);border-radius:12px;border-left:3px solid rgba(3,46,101,.25);
}
.coverage{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.2rem}
.coverage li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid rgba(255,255,255,.16);padding:.75rem 0}
.coverage b{font-family:var(--font-caps);letter-spacing:.1em;text-transform:uppercase;font-size:.92rem;color:#fff}
.coverage span{font-family:var(--font-caps);font-size:1.3rem;letter-spacing:.06em;color:#FFB3B3;white-space:nowrap}
/* .resource-list on a navy surface: same rows, inverted palette. */
.resource-list--light a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#E8EDF6}
.resource-list--light a:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32)}
.resource-list--light b{color:#fff}
.resource-list--light span span{color:rgba(232,237,246,.7)}
.resource-list--light .icon{color:#FFB3B3}
.resource-list--light .icon-ext{color:rgba(255,255,255,.5)}

/* ---------- reveals ----------
   Hidden state only applies once JS has stamped html.js — content stays
   visible if scripts never load. */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}

/* ---------- district locator (find.html) ----------
   The map tiles come from OpenStreetMap and render photographic-ish imagery,
   but they are a map, not a photograph — the no-filters house rule applies to
   the club's photography, and none of it appears on this page. */
.locator-card{max-width:44em}
.locator-label{
  display:block;font-family:var(--font-caps);font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin-bottom:.6rem;
}
.locator-row{display:flex;gap:.7rem;flex-wrap:wrap;position:relative}
.locator-combo{flex:1 1 16rem;min-width:0;display:flex}
.locator-row input{
  flex:1 1 auto;min-width:0;width:100%;
  font:inherit;color:var(--ink);background:#fff;
  border:2px solid var(--line-soft);border-radius:999px;padding:.85rem 1.3rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.locator-row input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(3,46,101,.12)}
/* Autocomplete list, fed by the state geocoder's Suggest endpoint. Anchored to
   the whole row, not the input: on narrow screens the button wraps beneath the
   input and a list hung off the input would land right on top of it. */
.locator-suggest{
  position:absolute;left:.6rem;right:.6rem;top:calc(100% + .35rem);z-index:30;
  list-style:none;margin:0;padding:.35rem;
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:0 22px 48px -18px rgba(3,46,101,.35);
}
.locator-option{
  padding:.6rem .9rem;border-radius:9px;cursor:pointer;font-size:.95rem;color:var(--ink);
  font-family:var(--font-caps);letter-spacing:.03em;
}
.locator-option:hover,.locator-option.is-active{background:rgba(3,46,101,.08);color:var(--navy)}
.locator-aux{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem 1.2rem;margin-top:.9rem}
.locator-locate{
  appearance:none;font:inherit;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-caps);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);background:transparent;border:1px solid rgba(3,46,101,.3);border-radius:999px;padding:.5rem .95rem;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.locator-locate .icon{width:1rem;height:1rem;color:var(--red)}
.locator-locate:hover{background:rgba(3,46,101,.06);border-color:var(--navy)}
.locator-locate:disabled{opacity:.5;cursor:default}
.locator-privacy{margin:0;flex:1 1 18rem;font-size:.85rem;color:rgba(10,28,54,.68)}
.locator-status{margin:.6rem 0 0;font-size:.95rem;color:var(--navy);min-height:1.2em}
.locator-status.is-error{color:var(--red)}
/* the sticky header would otherwise cover the first line after scrollIntoView */
.locator-results{scroll-margin-top:5.5rem}
.matched-address{
  margin:2rem 0 .9rem;font-family:var(--font-caps);font-size:.85rem;font-weight:400;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(10,28,54,.68);text-wrap:balance;
}
/* eyebrows that are real headings for screen readers keep the eyebrow look */
h2.eyebrow{font-weight:400;line-height:1.3}
.locator-notice{
  margin:0 0 1.2rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.95rem;
  background:rgba(178,122,1,.08);border:1px solid rgba(178,122,1,.35);color:var(--ink);
}
.locator-notice b{color:var(--navy)}
.locator-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.locator-actions .btn.is-done{border-color:var(--navy);background:var(--navy);color:#fff}
.ballot-card--question h3{font-size:1.35rem}
.ballot-note--wide{max-width:60em;margin-top:1rem;font-size:.92rem;color:rgba(10,28,54,.72)}
.district-hint{margin:0 0 .7rem;font-size:.9rem;color:rgba(10,28,54,.68)}
.district-chips{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin:0 0 1.2rem}
.district-chip{
  display:inline-flex;flex-direction:column;gap:.1rem;
  background:var(--paper);border:1px solid var(--line-soft);
  border-left:4px solid var(--chip-accent,var(--navy));
  border-radius:12px;padding:.6rem 1rem;box-shadow:var(--shadow);
}
.district-chip b{font-family:var(--font-caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,28,54,.68)}
.district-chip span{font-family:var(--font-caps);font-size:1.05rem;letter-spacing:.05em;color:var(--navy)}
.district-chip--muted{border-left-color:rgba(10,28,54,.25)}
.district-chip--muted span{font-size:.85rem;color:rgba(10,28,54,.68);padding-top:.15rem}
/* Chips that are buttons spotlight their district on the map. */
button.district-chip{
  appearance:none;font:inherit;text-align:left;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
button.district-chip:hover{transform:translateY(-2px)}
button.district-chip[aria-pressed="true"]{
  transform:translateY(-2px);border-color:var(--chip-accent,var(--navy));
  box-shadow:0 0 0 3px rgba(3,46,101,.12),0 16px 32px -18px rgba(3,46,101,.55);
}
button.district-chip[aria-pressed="true"] b{color:var(--chip-accent,var(--navy))}
.district-showall{
  appearance:none;font:inherit;cursor:pointer;align-self:stretch;
  font-family:var(--font-caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(10,28,54,.62);background:transparent;
  border:1px dashed rgba(3,46,101,.32);border-radius:12px;padding:.6rem 1.05rem;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.district-showall:hover{color:var(--navy);border-color:var(--navy)}
.district-showall[aria-pressed="true"]{background:var(--navy);border-style:solid;border-color:var(--navy);color:#fff}
.locator-map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow);background:var(--paper)}
.locator-map{height:clamp(20rem,50vh,28rem)}
.map-legend{
  display:flex;flex-wrap:wrap;gap:1.1rem;padding:.75rem 1.1rem;
  font-size:.82rem;color:rgba(10,28,54,.7);background:var(--paper);
}
.map-legend span{display:inline-flex;align-items:center;gap:.45rem}
.map-legend-hint{color:rgba(10,28,54,.68);font-style:italic}
/* One hint for mice, another for fingers: on coarse pointers locator.js turns
   one-finger drag off so the page still scrolls, and the map moves with two. */
.map-legend .map-legend-hint--coarse{display:none}
@media (pointer:coarse){
  .map-legend .map-legend-hint--fine{display:none}
  .map-legend .map-legend-hint--coarse{display:inline-flex}
}
/* Legend samples mirror the map exactly: same colour, same dash pattern. */
.legend-line{width:1.7rem;height:0;border-top:3px solid;flex:none}
.legend-line--house{border-color:var(--red)}
.legend-line--senate{border-top-style:dotted;border-color:var(--navy)}
.legend-line--congress{border-top-style:dashed;border-color:#B27A01}
.legend-dot{width:.85rem;height:.85rem;border-radius:50%;flex:none;display:inline-block}
.legend-dot--you{background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.legend-dot--ev{background:#fff;border:3px solid var(--red)}
.legend-dot--ed{background:var(--navy);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.legend-dot--reg{background:#B27A01;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.poll-legend + .btn{margin-top:1.6rem}
.you-pin{background:var(--red);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.poll-pin{border-radius:50%}
.poll-pin--ev{background:#fff;border:4px solid var(--red);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.poll-pin--ed{background:var(--navy);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.locator-races{margin-top:2.4rem}
/* the pending-polling band's two-type legend */
.poll-legend{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:1.1rem}
.poll-legend li{display:flex;gap:.9rem;align-items:flex-start}
.poll-legend .legend-dot{margin-top:.3rem;width:1.05rem;height:1.05rem}
.poll-legend b{display:block;font-family:var(--font-caps);letter-spacing:.1em;font-size:.95rem;text-transform:uppercase;color:#fff}
.poll-legend span{font-size:.92rem;color:rgba(232,237,246,.72)}
/* Leaflet chrome, nudged toward the site's palette */
.leaflet-container{font-family:var(--font-text)}
/* Quiet the basemap so the district lines are the loudest thing on the map.
   OpenStreetMap's standard style paints motorways red and arterials orange —
   the same hues as our TN House and U.S. House lines. This desaturates the
   TILE PANE only; the district layers live in their own panes and stay full
   colour. It is cartography, not photography: the "photographs render
   unaltered" house rule (and qa.mjs, which checks .photo img) is about the
   club's pictures, and no photograph appears on this page. */
.leaflet-tile-pane{filter:saturate(.32) contrast(.94) brightness(1.04)}
.leaflet-bar a{color:var(--navy)}
/* The global `img,svg{max-width:100%}` reset near the top of this file lands on
   Leaflet's renderer SVGs too. A .leaflet-pane is absolutely positioned with no
   width, so 100% resolves to 0 and the whole layer silently disappears — right
   geometry, right colours, zero-width viewport. Leaflet ships this exact
   defence but scopes it to .leaflet-overlay-pane, which is why the stock setup
   works and the custom panes in locator.js did not. Keep this rule if you ever
   add another pane. */
.leaflet-container .leaflet-pane > svg{max-width:none!important;max-height:none!important}
/* Clicking an SVG path focuses it, and the browser draws `outline:auto` around
   the path's BOUNDING BOX — on a district that is a huge rectangle enclosing
   mostly other people's neighbourhoods, which is worse than no feedback at all.
   Selection is shown by dimming everything outside the district instead
   (locator.js). The chips above the map carry the keyboard focus ring. */
.leaflet-interactive:focus{outline:none}
.mdc-scrim-shape{transition:fill-opacity .45s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .mdc-scrim-shape{transition:none}
}
/* Leaflet's touch zoom buttons are 30px; 44px is the tap-target guideline. */
.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:24px}
.leaflet-touch .leaflet-control-zoom-in{border-radius:6px 6px 0 0}
.leaflet-touch .leaflet-control-zoom-out{border-radius:0 0 6px 6px}

/* ---------- print: "print my ballot" ----------
   Chrome, maps and calls to action go; the address, districts, candidates and
   the paid-for line stay. Card links print their URL so the paper is useful. */
@media print{
  .topbar,.grain,.hero-bg-star,.tri-star-bg,.signup-band,.section--navy,.section--red,
  .footer-wordmark,.footer-grid,.locator-map-wrap,.district-hint,.district-showall,
  .locator-actions,.locator-privacy,.locator-aux,.locator-status,.locator-suggest,
  form[data-locator-form],.locator-card,.photo-mosaic,.photo-row,.photo,.hero-ctas,.hero-follow,.btn{display:none!important}
  html.js .reveal{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000}
  .page-hero{padding:0 0 1rem}
  .page-hero .lede{display:none}
  .section{padding:1rem 0}
  .ballot-card,.district-chip,.card{box-shadow:none!important;border:1px solid #888;break-inside:avoid}
  .ballot-grid{display:block}
  .ballot-grid>li{margin-bottom:.8rem}
  .text-link[href^="http"]::after{content:" — " attr(href);font-size:.8em;color:#444;font-family:var(--font-text);letter-spacing:0;text-transform:none}
  .text-link .icon{display:none}
  .ballot-caveat,.footer-legal{font-size:.8rem;color:#333}
  /* the midnight footer printed the paid-for line as #333 on navy */
  .footer{background:#fff;color:#333}
}

/* ---------- very narrow phones (≤344px, e.g. iPhone SE 1st gen) ----------
   MUST stay at the END of this file. These override .display-xl/.display-lg/
   .display-md, which are declared above at equal specificity — an earlier
   media block silently loses the cascade. It did: the 2.1rem clamp floor kept
   winning and stranded a word at 320px.
   The clamp *floors* are wider than a 320px viewport once a phrase is bound
   against widowing, so shrink the floor rather than release the bind. */
/* 345–360px (Galaxy S-class phones): the bound "worth remembering." and
   "meeting, demystified." were 10–25px wider than the column at 2.1rem. */
@media (max-width:360px){
  .display-lg{font-size:1.6rem}
}
@media (max-width:344px){
  .display-xl{font-size:2rem}
  .display-lg{font-size:1.6rem}
  .display-md{font-size:1.35rem}
  .hero h1,.page-hero h1{font-size:1.9rem}
}