/* ═══════════════════════════════════════════════
   Koffel for Ohio — shared stylesheet
   Used by index.html and issues.html

   Palette
     #f6f1eb  cream      page background
     #bbd7e9  sky        light blue, hero and accent bands
     #60758c  slate      borders and decorative rules
     #7b2d26  terracotta CTAs and accents
     plus a darker navy mixed in for weight
   ═══════════════════════════════════════════════ */

:root{
  --cream:#F6F1EB;
  --sky:#BBD7E9;
  --sky-deep:#9CC2DA;
  --slate:#60758C;

  --navy:#24384E;
  --navy-deep:#17273A;
  --navy-line:#3B5170;

  --terracotta:#7B2D26;
  --terracotta-bright:#9A3A31;
  /* terracotta is too dark to read on navy — use this for accents on dark bands */
  --terracotta-pale:#E3A99A;

  --stock:#FFFCF8;
  /* darkened from --slate so body copy clears AA on cream */
  --muted:#4A5F73;
  --muted-light:#BBD7E9;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,64px);
  --maxw:1180px;
  --bar-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:var(--body);
  font-size:clamp(17px,1.05vw,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
section[id],main[id],article[id]{scroll-margin-top:calc(var(--bar-h) + 12px)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--terracotta);color:#fff;padding:.7rem 1.1rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:.5rem;top:.5rem}

/* ── type ──────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terracotta);margin:0 0 .9rem;
}
.eyebrow--pale{color:var(--sky)}

h1,h2,h3{
  font-family:var(--display);font-variation-settings:"wdth" 112;
  font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;
}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-variation-settings:"wdth" 104;font-weight:700;letter-spacing:-.01em}

.tracked{
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-weight:800;text-transform:uppercase;letter-spacing:.14em;line-height:1.1;
}

/* ── top bar — light, so the original navy logo reads ── */
.bar{
  position:sticky;top:0;z-index:60;
  background:var(--cream);
  border-bottom:1px solid rgba(96,117,140,.32);
}
.bar__inner{
  max-width:var(--maxw);margin:0 auto;padding:.55rem var(--gut);
  min-height:var(--bar-h);display:flex;align-items:center;gap:1.4rem;
}
.mark{display:flex;align-items:center;gap:.85rem;margin-right:auto;text-decoration:none;line-height:1.1}
.mark img{height:50px;width:auto}
.mark span{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  color:var(--slate);text-transform:uppercase;
  border-left:1px solid rgba(96,117,140,.4);padding-left:.85rem;white-space:nowrap;
}
.bar nav{display:flex;gap:1.05rem;align-items:center}
.bar nav a{
  /* Archivo, not the mono: at nav size the mono's fixed advance and wide
     tracking cost real legibility. This is already loaded for headings. */
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-size:1rem;font-weight:700;letter-spacing:0;
  /* sentence case, not caps: word shapes are what make nav scannable */
  color:var(--navy);text-decoration:none;
  padding:.4rem 0;border-bottom:2px solid transparent;
  /* without this, flex shrinks the nav items — the Donate pill collapses
     to a sliver and its label spills outside the shape */
  flex:none;white-space:nowrap;
}
.bar nav a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.bar nav a[aria-current="page"]{border-bottom-color:var(--terracotta)}

.socials{display:flex;gap:.7rem;align-items:center;flex:none}
.socials a{
  color:var(--cream);background:var(--navy);
  width:30px;height:30px;border-radius:99px;
  display:grid;place-content:center;
}
.socials a:hover{background:var(--terracotta)}
/* `.bar nav a` (0,1,2) outranks `.socials a` (0,1,1) and would paint the glyph
   navy on a navy disc — restate it at matching specificity */
.bar nav .socials a{color:var(--cream);padding:0;border-bottom:none}
.bar nav .socials a:hover{color:#fff;border-bottom:none}

.btn-give{
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  background:var(--terracotta);color:#fff;padding:.62rem 1.3rem;
  border:none;border-radius:99px;white-space:nowrap;flex:none;
}
.btn-give:hover{background:var(--terracotta-bright)}

.btn-join{
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  background:transparent;color:var(--terracotta);padding:.62rem 1.2rem;
  border:2px solid var(--terracotta);border-radius:99px;white-space:nowrap;flex:none;
}
.btn-join:hover{background:var(--terracotta);color:#fff}
.bar nav a.btn-join{padding:.62rem 1.2rem;border:2px solid var(--terracotta);color:var(--terracotta)}
.bar nav a.btn-join:hover{color:#fff;border-color:var(--terracotta)}
/* `.bar nav a` outranks `.btn-give`, so the pill's own padding and border
   have to be restated at matching specificity or it collapses to text width */
.bar nav a.btn-give{padding:.62rem 1.3rem;border-bottom:none;color:#fff}
.bar nav a.btn-give:hover{border-bottom:none;color:#fff}

.menu-btn{
  display:none;background:none;border:1px solid var(--slate);
  color:var(--navy);cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem .85rem;
}
.menu-btn:hover{border-color:var(--terracotta);color:var(--terracotta)}

@media(max-width:1200px){.mark span{display:none}}
@media(max-width:1080px){.socials{display:none}}
@media(max-width:880px){
  .mark img{height:42px}
  .menu-btn{display:block}
  .bar nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid rgba(96,117,140,.32);
    padding:.4rem var(--gut) 1.1rem;
  }
  .bar nav[data-open="true"]{display:flex}
  .bar nav a{padding:.85rem 0;border-bottom:1px solid rgba(96,117,140,.25)}
  .bar nav a.btn-give{margin-top:.9rem;text-align:center;padding:.85rem 1.1rem;border-bottom:none}
  /* the outlined pill needs all four sides — border-bottom:none would cut it open */
  .bar nav a.btn-join{
    margin-top:.9rem;text-align:center;padding:.85rem 1.1rem;
    border:2px solid var(--terracotta);
  }
}

/* ── urgency strip ─────────────────────────── */
.strip{background:var(--terracotta);color:#fff;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.strip__inner{max-width:var(--maxw);margin:0 auto;padding:.85rem var(--gut);display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center}
.strip a{color:#fff}

/* ── generic blocks ────────────────────────── */
.block{padding:clamp(3.5rem,7vw,6.5rem) 0}
.block--sky{background:var(--sky)}
.block--dark{background:var(--navy);color:var(--cream)}
.block--deep{background:var(--navy-deep);color:var(--cream)}
.block--dark h2,.block--deep h2{color:var(--cream)}
.block__head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.block__head p{color:var(--muted);margin:1rem 0 0}
.block--dark .block__head p,.block--deep .block__head p{color:var(--sky)}

/* ── hero: light blue, portrait bleeding right ── */
.hero{position:relative;background:var(--sky);color:var(--navy);overflow:hidden}
.hero__photo{position:absolute;top:0;right:0;bottom:0;width:44%}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sky) 0%,rgba(187,215,233,.72) 24%,rgba(187,215,233,0) 62%);
}
.hero__inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) var(--gut) clamp(3.5rem,7vw,6rem);
}
.hero__copy{max-width:min(60%,36rem)}
.hero .eyebrow{color:var(--terracotta)}
.hero h1 em{font-style:normal;color:var(--terracotta);display:block}
.hero__lede{font-size:clamp(1.05rem,1.4vw,1.24rem);color:var(--muted);margin:1.5rem 0 2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}

@media(max-width:900px){
  /* aspect-ratio rather than vh: viewport height varies wildly on mobile
     and a vh-sized box crops a portrait source unpredictably.
     4:5, not 4:3 — hero.jpg is a 2:3 portrait, and a landscape box threw away
     half its height, cutting the top of his head off against the strip. */
  .hero__photo{position:relative;width:100%;height:auto;aspect-ratio:4/5}
  .hero__photo img{object-position:50% 12%}
  .hero__photo::after{background:linear-gradient(0deg,var(--sky) 0%,rgba(187,215,233,0) 55%)}
  .hero__copy{max-width:none}
  .hero__inner{padding-top:2.2rem}
}

.cta{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:.95rem 1.5rem;
  display:inline-block;border:1px solid transparent;
}
.cta--solid{background:var(--terracotta);color:#fff}
.cta--solid:hover{background:var(--terracotta-bright)}
.cta--ghost{border-color:var(--navy);color:var(--navy)}
.cta--ghost:hover{background:rgba(36,56,78,.08)}
.block--dark .cta--ghost,.block--deep .cta--ghost{border-color:var(--navy-line);color:var(--cream)}
.block--dark .cta--ghost:hover,.block--deep .cta--ghost:hover{background:rgba(255,255,255,.07);border-color:var(--cream)}

/* ── two-column split: content left, signup right ── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── district lookup ───────────────────────── */
.block--tight{padding:clamp(2.4rem,4vw,3.4rem) 0}

.d7-card{
  background:var(--stock);border:1px solid rgba(96,117,140,.3);
  box-shadow:0 10px 34px rgba(36,56,78,.10);
  max-width:640px;margin:0 auto;text-align:center;
  padding:clamp(1.5rem,3.5vw,2.4rem) clamp(1.2rem,3vw,2.2rem);
}
.d7-card .eyebrow{margin-bottom:.55rem}
.d7-h{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5rem}
.d7-lede{font-size:.95rem;color:var(--muted);margin:0 auto;max-width:44ch}

.d7-form{display:flex;gap:.5rem;margin:1.3rem 0 0;text-align:left;flex-wrap:wrap}
.d7-form input{
  flex:1 1 18rem;min-width:0;font-family:var(--body);font-size:1rem;padding:.8rem .9rem;
  border:1px solid var(--slate);background:var(--stock);color:var(--navy);border-radius:0;
}
.d7-form input:focus{border-color:var(--terracotta);outline:none}
.d7-form button{
  flex:none;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--terracotta);color:#fff;border:none;
  padding:.8rem 1.3rem;cursor:pointer;
}
.d7-form button:hover{background:var(--terracotta-bright)}
.d7-form button:disabled{opacity:.6;cursor:default}

.d7-result{margin:1.1rem 0 0;padding:.85rem 1rem;border-left:3px solid var(--slate);background:rgba(96,117,140,.12);text-align:left}
.d7-result[hidden]{display:none}
.d7-result h3{font-size:1.05rem;margin-bottom:.2rem}
.d7-result p{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.d7-result--yes{border-left-color:#2F6B4F;background:rgba(47,107,79,.12)}
.d7-result--no{border-left-color:var(--terracotta);background:rgba(123,45,38,.09)}
.d7-note{font-family:var(--mono);font-size:.6rem;line-height:1.6;color:var(--slate);margin:1rem 0 0}

/* ── video stage with tap-to-play cover ────── */
.stage{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.stage video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.stage__cover{
  position:absolute;inset:0;z-index:2;border:0;padding:0;cursor:pointer;
  background:transparent;display:grid;place-content:center;gap:1rem;justify-items:center;
}
.stage__cover[hidden]{display:none}
.stage__cover::before{content:"";position:absolute;inset:0;background:rgba(23,39,58,.34)}
.play-ring{
  position:relative;width:clamp(64px,12vw,96px);aspect-ratio:1;border-radius:99px;
  background:var(--terracotta);display:grid;place-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.stage__cover:hover .play-ring{background:var(--terracotta-bright)}
.play-label{
  position:relative;font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ── video library ─────────────────────────── */
.reel{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.reel__item{display:grid;gap:1.2rem}
.reel__meta h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.reel__run{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terracotta);margin:0 0 .5rem;
}
.reel__desc{margin:.6rem 0 0;color:var(--muted);max-width:56ch}
@media(min-width:860px){
  .reel__item{grid-template-columns:1.5fr 1fr;gap:2.5rem;align-items:center}
}

/* ── film ──────────────────────────────────── */
.film{margin:0}
.film video{
  width:100%;height:auto;aspect-ratio:16/9;
  background:var(--navy-deep);display:block;
  box-shadow:0 24px 60px rgba(36,56,78,.22);
}
.film figcaption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:.9rem;
}

/* ── vote non-party ────────────────────────── */
.points{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:1.8rem}
.points li{counter-increment:p;position:relative;padding-left:3.1rem}
.points li::before{
  content:"0" counter(p);position:absolute;left:0;top:.1rem;
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  color:var(--terracotta-pale);
}
.points h3{color:var(--cream);margin-bottom:.4rem}
.points p{margin:0;color:var(--sky);font-size:.98rem;line-height:1.55}
.points li::after{
  content:"";position:absolute;left:0;top:2.05rem;bottom:-1.1rem;width:1px;
  background:var(--navy-line);
}
.points li:last-child::after{display:none}

/* ── forms ─────────────────────────────────── */
.signup{border:1px solid var(--navy-line);padding:clamp(1.4rem,3vw,2rem)}
.signup h3{color:var(--cream);margin-bottom:.4rem}
.signup__sub{color:var(--sky);font-size:.95rem;margin:0 0 1.4rem}

.form{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.block--dark .field label,.block--deep .field label,.signup .field label{color:var(--sky)}
.field input{
  font-family:var(--body);font-size:1rem;padding:.75rem .85rem;
  border:1px solid var(--slate);background:var(--stock);color:var(--navy);border-radius:0;
}
.field input:focus{border-color:var(--terracotta)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.form__row{grid-template-columns:1fr}}
.checks{display:grid;gap:.55rem;margin-top:.3rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;cursor:pointer}
.check input{margin-top:.35rem;accent-color:var(--terracotta);width:17px;height:17px}
.form__submit{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--terracotta);color:#fff;border:none;
  padding:1rem 1.4rem;cursor:pointer;justify-self:start;
}
.form__submit:hover{background:var(--terracotta-bright)}
.form__submit:disabled{opacity:.65;cursor:default}
.form__msg{
  font-family:var(--mono);font-size:.8rem;line-height:1.6;padding:.85rem 1rem;
  border-left:3px solid var(--terracotta);background:rgba(255,255,255,.08);color:var(--cream);
}
.form__msg[hidden]{display:none}
.fineprint{font-family:var(--mono);font-size:.68rem;line-height:1.7;color:var(--muted)}
.signup .fineprint,.block--dark .fineprint,.block--deep .fineprint{color:var(--slate)}

/* ── meet / bio ────────────────────────────── */
.meet{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.meet{grid-template-columns:1fr}}
.meet__photo{aspect-ratio:4/5;overflow:hidden;background:var(--sky)}
.meet__photo img{width:100%;height:100%;object-fit:cover}
.meet__kicker{
  display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;border:2px solid currentColor;
  padding:.4rem .8rem;transform:rotate(-3deg);margin-bottom:1rem;color:var(--terracotta);
}
.textlinks{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem}
.textlink{
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--terracotta);padding-bottom:.25rem;
}
.textlink:hover{color:var(--terracotta)}

/* ── issue cards ───────────────────────────── */
/* align-items:start so aspect-ratio governs card height — otherwise a card
   alone in the last row stretches taller than the rest */
.issue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;align-items:start}
.issue-card{
  position:relative;display:block;text-decoration:none;color:var(--cream);
  aspect-ratio:4/3;overflow:hidden;background:var(--navy);
}
.issue-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.issue-card:hover img{transform:scale(1.04)}
.issue-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(23,39,58,.9) 0%,rgba(23,39,58,.38) 45%,rgba(23,39,58,.08) 100%);
}
.issue-card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem;
  /* photos vary in brightness; without this the label washes out on pale images */
  text-shadow:0 1px 10px rgba(23,39,58,.75);
}
.issue-card__no{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky);margin:0 0 .35rem;
}
.issue-card__title{
  font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.08;
  font-size:clamp(1.05rem,1.7vw,1.3rem);margin:0;color:var(--cream);
}
.issue-card__arrow{margin-top:.9rem;width:34px;height:34px;background:var(--terracotta);display:grid;place-content:center}
.issue-card:hover .issue-card__arrow{background:var(--terracotta-bright)}
@media(prefers-reduced-motion:reduce){
  .issue-card img,.issue-card:hover img{transition:none;transform:none}
}

/* ── issue detail sections ─────────────────── */
.issue{border-top:1px solid rgba(96,117,140,.32);padding:clamp(3rem,6vw,5rem) 0}
.issue:first-of-type{border-top:2px solid var(--navy)}
.issue__no{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracotta);margin:0 0 .6rem;
}
.issue__title{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.issue__hook{
  font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:700;
  font-size:clamp(1.08rem,1.8vw,1.4rem);line-height:1.28;letter-spacing:-.01em;
  color:var(--terracotta);margin:.7rem 0 2.2rem;max-width:38ch;
}
.issue__cols{max-width:74ch}

.issue__label{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:2.2rem 0 .8rem;
}
.issue__main > .issue__label:first-child{margin-top:0}
.issue__main p{margin:0 0 1rem}
.issue__main p:last-child{margin-bottom:0}

.plan{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.plan li{position:relative;padding-left:1.7rem}
.plan li::before{
  content:"";position:absolute;left:0;top:.65em;
  width:.8rem;height:2px;background:var(--terracotta);
}

.wont{border-left:3px solid var(--slate);padding:.2rem 0 .2rem 1rem;margin:0 0 1rem}
.wont p{margin:0 0 .6rem}
.wont p:last-child{margin-bottom:0}

/* ── draft banner — planks not cleared for publication ── */
.draft{
  display:flex;flex-direction:column;gap:.5rem;
  border:2px dashed var(--terracotta);background:rgba(123,45,38,.08);
  padding:1.1rem 1.3rem;margin:0 0 2rem;
}
.draft__tag{
  align-self:flex-start;font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;background:var(--terracotta);
  color:#fff;padding:.3rem .6rem;
}
.draft p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
.draft ul{margin:.2rem 0 0;padding-left:1.2rem;font-size:.92rem;color:var(--muted)}
.draft li{margin-bottom:.3rem}

/* ── missing-media slot ────────────────────── */
.slot{
  border:2px dashed var(--terracotta);
  background:repeating-linear-gradient(
    45deg,rgba(123,45,38,.06),rgba(123,45,38,.06) 10px,transparent 10px,transparent 20px);
  padding:1.2rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;
}
.slot--fill{position:absolute;inset:0;z-index:3;justify-content:flex-start;overflow:hidden}
/* leave the bottom of an issue card clear for the title block that sits over it,
   and clamp the direction text so a long note can't run under the title */
.issue-card .slot--fill{padding-bottom:8.6rem;gap:.4rem}
.issue-card .slot__dir{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.82rem;
}
.slot__tag{
  align-self:flex-start;font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;background:var(--terracotta);color:#fff;padding:.3rem .6rem;
}
.slot__what{
  font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.2;
  letter-spacing:-.01em;color:var(--navy);margin:0;
}
.slot__spec{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta);margin:0}
.slot__dir{font-size:.88rem;line-height:1.5;color:var(--muted);margin:0}
.block--dark .slot,.block--deep .slot,.issue-card .slot{background:rgba(123,45,38,.2)}
.block--dark .slot__what,.block--deep .slot__what,.issue-card .slot__what{color:var(--cream)}
.block--dark .slot__dir,.block--deep .slot__dir,.issue-card .slot__dir{color:var(--sky)}
.block--dark .slot__spec,.block--deep .slot__spec,.issue-card .slot__spec{color:var(--terracotta-pale)}

/* ── join + event ──────────────────────────── */
.join{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.join{grid-template-columns:1fr}}
.join__photo{margin:0}
.join__photo img{width:100%;height:auto;display:block}
.join__photo figcaption{
  font-family:var(--mono);font-size:.68rem;line-height:1.6;
  color:var(--sky);margin-top:.8rem;
}

.event{border:2px solid var(--navy-line);padding:1.6rem}
.event dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;margin:1.2rem 0 0;font-size:.95rem}
.event dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);padding-top:.28rem}
.event dd{margin:0}

/* ── contribute page ───────────────────────── */
.give-lead{font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.55;max-width:46ch}
.give-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.give-cols{grid-template-columns:1fr}}

.rules{
  background:var(--sky);padding:1.6rem 1.7rem;
  position:sticky;top:calc(var(--bar-h) + 20px);
}
.rules h3{font-size:1.02rem;margin-bottom:.3rem}
.rules__sub{font-size:.9rem;color:var(--muted);margin:0 0 1.1rem}
.rules ol{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:.8rem}
.rules li{
  counter-increment:r;position:relative;padding-left:1.9rem;
  font-size:.9rem;line-height:1.5;
}
.rules li::before{
  content:counter(r);position:absolute;left:0;top:.05em;
  width:1.25rem;height:1.25rem;border-radius:99px;
  background:var(--navy);color:var(--sky);
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  display:grid;place-content:center;
}
.rules__foot{margin:1.3rem 0 0;font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--muted)}

.give-big{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:.92rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--terracotta);color:#fff;padding:1.15rem 2.4rem;
  border-radius:99px;margin-top:.4rem;
}
.give-big:hover{background:var(--terracotta-bright)}
.give-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);margin:.9rem 0 0}
.give-kicker{
  font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.35;
  color:var(--terracotta);max-width:40ch;margin:2.6rem 0 0;
}

/* ── give ──────────────────────────────────── */
.amounts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.8rem 0 1.6rem}
.amt{
  font-family:var(--mono);font-size:1rem;font-weight:500;text-decoration:none;
  padding:.85rem 1.3rem;border:1px solid var(--navy-line);color:var(--cream);
  min-width:96px;text-align:center;
}
.amt:hover{background:var(--terracotta);border-color:var(--terracotta)}
.amt--other{border-style:dashed}

/* ── footer — light, so the original logo reads ── */
.foot{
  background:var(--sky);color:var(--navy);
  padding:3rem 0 2.5rem;font-family:var(--mono);font-size:.75rem;line-height:1.8;
}
.foot a{color:var(--navy)}
.foot a:hover{color:var(--terracotta)}
.foot__grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot__btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
/* `.foot a` (0,1,1) outranks `.btn-give` (0,1,0), so the filled button's white
   text and the outlined button's border have to be restated here */
.foot .btn-join{color:var(--terracotta);border:2px solid var(--terracotta);font-size:.82rem;padding:.5rem 1rem}
.foot .btn-join:hover{color:#fff;background:var(--terracotta)}
.foot .btn-give{color:#fff;font-size:.82rem;padding:.54rem 1.05rem}
.foot .btn-give:hover{color:#fff;background:var(--terracotta-bright)}
.foot .mark img{height:52px}
.disclaimer{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(36,56,78,.28);
  font-size:.72rem;color:#3F566E;max-width:70ch;
}