/* ===========================================================
   hamer4mayor.com — shared stylesheet
   Brand: navy #162741 / yellow #F5BC31 / green #147741
   =========================================================== */

:root {
  --navy:       #192942;   /* sampled from the 2022 campaign poster */
  --navy-deep:  #0E1B2E;
  --yellow:     #F4BB36;   /* sampled from the poster */
  --green:      #1D7640;   /* the poster checkmark green */
  --green-ink:  #1D7640;   /* marks and rules only — never body text on gold */
  --paper:      #EFF1F4;
  --white:      #FFFFFF;
  --rule:       #C4CCD6;
  --muted:      #56657A;

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Literata", Georgia, "Times New Roman", serif;

  --measure: 34rem;   /* ~70 characters at body size */
  --gutter:  1.5rem;
  --max:     68rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--yellow); color: var(--navy);
  padding: .75rem 1rem; font-family: var(--display); font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

/* ---------- Masthead ---------- */

.masthead {
  background: var(--navy);
  color: var(--white);
  border-bottom: 5px solid var(--yellow);
}
.masthead .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 2rem; padding-block: 1rem;
}
.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--white); text-decoration: none; line-height: 1.15;
}
.wordmark span { display: block; color: var(--yellow); font-size: .8125rem; letter-spacing: .1em; }

.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  letter-spacing: .045em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  padding-block: .35rem; border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ---------- Hero ---------- */

.hero { background: var(--navy); color: var(--white); padding-block: 4rem 4.5rem; }
.hero .wrap { display: grid; gap: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .hero .wrap { grid-template-columns: 1.15fr .85fr; align-items: start; gap: 4.5rem; }

}

.hero h1 {
  font-size: clamp(2.75rem, 7.5vw, 4.75rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--white);
}
.hero h1 em { font-style: normal; display: block; color: var(--yellow); }

.hero .standfirst {
  font-size: 1.25rem; color: #D7DFE9; margin-top: 1.5rem; max-width: 28rem;
}
.ballot-date {
  font-family: var(--display); font-weight: 700; font-size: .9375rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--yellow);
  margin-top: 1.75rem; display: block;
}

/* ---------- Seat count (the nine votes) ---------- */

.count { border-left: 4px solid var(--yellow); padding-left: 1.5rem; }
.seats { display: grid; grid-template-columns: repeat(3, 2.75rem); gap: .75rem; margin-bottom: 1.5rem; }
.seat { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid #5A6C85; }
.seat.is-mayor { background: var(--yellow); border-color: var(--yellow); }
.count p { color: #D7DFE9; font-size: 1.0625rem; max-width: 22rem; }
.count strong { color: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .seat { animation: seat-in .45s ease-out backwards; }
  .seat:nth-child(1) { animation-delay: .05s; }
  .seat:nth-child(2) { animation-delay: .12s; }
  .seat:nth-child(3) { animation-delay: .19s; }
  .seat:nth-child(4) { animation-delay: .26s; }
  .seat:nth-child(5) { animation-delay: .33s; }
  .seat:nth-child(6) { animation-delay: .40s; }
  .seat:nth-child(7) { animation-delay: .47s; }
  .seat:nth-child(8) { animation-delay: .54s; }
  .seat:nth-child(9) { animation-delay: .61s; }
  @keyframes seat-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } 
}

}

/* ---------- Page header (interior pages) ---------- */

.pagehead { background: var(--navy); color: var(--white); padding-block: 3.25rem 3.5rem; }
.pagehead h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem); text-transform: uppercase; color: var(--white);
}
.pagehead p { color: #D7DFE9; font-size: 1.1875rem; margin-top: 1.25rem; max-width: 36rem; }

/* ---------- Generic sections ---------- */

.band { padding-block: 4rem; }
.band--white { background: var(--white); }
.band--paper { background: var(--paper); }

.band h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.band h3 { font-size: 1.375rem; margin: 2rem 0 .75rem; }

.lede { font-size: 1.25rem; max-width: 36rem; }

/* ---------- Pillars (the reordered platform) ---------- */

.pillar { border-top: 3px solid var(--navy); padding-top: 1.5rem; margin-top: 3rem; }
.pillar:first-of-type { margin-top: 0; }
.pillar__rank {
  font-family: var(--display); font-weight: 800; font-size: 3.5rem;
  line-height: 1; color: var(--yellow); display: block;
  -webkit-text-stroke: 1.5px var(--navy);
}
.pillar h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); margin: .5rem 0 1rem; }
.pillar__was {
  font-family: var(--display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 1.25rem;
}
.pillar ul { max-width: var(--measure); padding-left: 1.25rem; }
.pillar li { margin-bottom: .9rem; }

/* ---------- The order-change callout ---------- */

.reorder {
  background: var(--navy); color: var(--white);
  padding: 2.25rem 2rem; margin: 2.5rem 0 3rem;
  border-left: 6px solid var(--yellow);
}
.reorder h2 { color: var(--white); font-size: 1.625rem; margin-bottom: 1rem; }
.reorder p { color: #D7DFE9; max-width: 40rem; }
.reorder p:last-child { margin-bottom: 0; }
.reorder .swap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-family: var(--display); font-weight: 600; font-size: .9375rem;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.reorder .swap span { color: var(--muted); text-decoration: line-through; }
.reorder .swap b { color: var(--yellow); font-weight: 700; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .95rem 1.6rem; text-decoration: none; border: 2px solid var(--yellow);
  background: var(--yellow); color: var(--navy);
}
.btn:hover { background: #E0A81F; border-color: #E0A81F; color: var(--navy); }
.btn--ghost { background: transparent; color: var(--white); border-color: #5A6C85; }
.btn--ghost:hover { background: transparent; border-color: var(--white); color: var(--white); }
.btnrow { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }

/* ---------- Three-up summary on home ---------- */

.tri { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .tri { grid-template-columns: repeat(3, 1fr); gap: 3rem; } 
}
.tri > div { border-top: 3px solid var(--yellow); padding-top: 1.25rem; }
.tri h3 { font-size: 1.25rem; margin: 0 0 .75rem; text-transform: uppercase; }
.tri p { font-size: 1rem; margin-bottom: .85rem; }

/* ---------- Story page ---------- */

.story { max-width: var(--measure); }
.story h2 { font-size: 1.75rem; margin: 2.75rem 0 1rem; text-transform: none; }
.story h2:first-child { margin-top: 0; }
.story blockquote {
  margin: 2rem 0; padding-left: 1.5rem; border-left: 4px solid var(--yellow);
  font-size: 1.3125rem; line-height: 1.45; font-weight: 600;
}
.story blockquote p { margin-bottom: 0; }

.portrait { width: 100%; max-width: 24rem; height: auto; display: block; margin-bottom: 2rem; border: 1px solid var(--rule); }

/* ---------- Letters / media list ---------- */

.letter { border-top: 3px solid var(--navy); padding-top: 1.5rem; margin-top: 2.75rem; max-width: var(--measure); }
.letter:first-of-type { margin-top: 0; }
.letter__meta {
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: .6rem;
}
.letter h2 { font-size: 1.4375rem; margin-bottom: 1rem; text-transform: none; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } 
}

.field { margin-bottom: 1.25rem; max-width: 30rem; }
.field label {
  display: block; font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .4rem;
}
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem;
  padding: .75rem; border: 2px solid var(--navy); background: var(--white); color: var(--navy);
}
.field textarea { min-height: 9rem; resize: vertical; }
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */

.foot { background: var(--navy-deep); color: #A8B6C8; padding-block: 3rem 2.5rem; font-size: .9375rem; }
.foot a { color: var(--white); }
.foot a:hover { color: var(--yellow); }





/* ---------- Editor notes (visible only in source) ---------- */
.todo { background: #FFF6DC; border-left: 5px solid var(--yellow); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .9375rem; max-width: var(--measure); }
.todo strong { font-family: var(--display); }

/* ---------- Election countdown ---------- */
/* Band colour lives here. Swap --cd-bg for a different treatment:
   green  #147741  (current — the third brand colour, unused elsewhere)
   yellow #F5BC31  (previous — competes with the accent buttons)
   navy   #0E1B2E  (subtlest — merges with the masthead)            */

.countdown {
  --cd-bg:  #147741;
  --cd-box: rgba(0,0,0,.22);
  background: var(--cd-bg);
  color: #fff;
  font-family: var(--display);
  padding: .6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem .9rem;
  line-height: 1;
}

.countdown__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--yellow);
}

.countdown__clock { display: flex; gap: .4rem; align-items: stretch; }

.cd-unit {
  background: var(--cd-box);
  border-radius: 3px;
  padding: .35rem .5rem .3rem;
  min-width: 3.05rem;
  text-align: center;
}
.cd-unit b {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.cd-unit span {
  display: block;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .18rem;
}
.cd-unit--days b { color: var(--yellow); font-size: 1.45rem; }
.cd-unit--days { min-width: 3.5rem; }

.countdown__tail {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .82;
}

/* Fallback text shown before the script runs / with JS off */
.countdown__static { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* Final day: the band switches to the campaign yellow and the label pulses */
.countdown.is-today { --cd-bg: var(--yellow); --cd-box: rgba(22,39,65,.16); color: var(--navy); }
.countdown.is-today .countdown__label,
.countdown.is-today .cd-unit--days b { color: var(--navy); }

@media (prefers-reduced-motion: no-preference) {
  .cd-unit b.is-ticking { animation: cd-tick .42s ease-out; }
  @keyframes cd-tick {
    0%   { transform: translateY(-42%); opacity: 0; }
    55%  { transform: translateY(6%);   opacity: 1; }
    100% { transform: none; }
  
}
  .countdown.is-today .countdown__label { animation: cd-pulse 1.8s ease-in-out infinite; }
  @keyframes cd-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } 
}

}

@media (max-width: 30rem) {
  .countdown { gap: .4rem .6rem; padding: .55rem .5rem; }
  .countdown__label { font-size: .6875rem; letter-spacing: .08em; width: 100%; text-align: center; }
  .countdown__tail { display: none; }
  .cd-unit { min-width: 2.7rem; padding: .3rem .35rem .28rem; }
  .cd-unit b { font-size: 1.05rem; }
  .cd-unit--days { min-width: 3rem; }
  .cd-unit--days b { font-size: 1.25rem; }

}

/* ---------- Vote arithmetic block ---------- */

.arith { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .arith { grid-template-columns: auto 1fr; gap: 3.5rem; } 
}

.arith .seats { grid-template-columns: repeat(3, 3.25rem); gap: .85rem; margin: 0; }
.arith .seat { width: 3.25rem; height: 3.25rem; border-color: var(--rule); animation: none; }
.arith .seat.is-carry { background: var(--navy); border-color: var(--navy); }
.arith__key { margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); max-width: 14rem; }

.asks { border-top: 3px solid var(--navy); margin-top: 2.5rem; padding-top: 1.5rem; }
.asks ol { max-width: var(--measure); padding-left: 1.4rem; }
.asks li { margin-bottom: 1rem; font-weight: 600; }

/* ---------- Sense of place: Arthur's photographs ---------- */
/* Hero and page headers carry real photographs of the valley, laid under a
   navy scrim that is heaviest where the type sits so the headline stays
   readable at any size. The illustrated ridgeline (kamloops-hills.svg) is
   kept in /assets as a fallback but is no longer used. */

.hero, .pagehead { position: relative; overflow: hidden; }
.hero .wrap, .pagehead .wrap { position: relative; z-index: 2; }

.hero {
  background-image: url("/assets/images/hero-kamloops.jpg");
  background-size: cover;
  background-position: 58% 70%;   /* beach and river; clean sky stays upper-left */
  padding-bottom: 6rem;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(22,39,65,.93) 0%,
      rgba(22,39,65,.84) 30%,
      rgba(22,39,65,.42) 58%,
      rgba(22,39,65,.14) 100%),
    linear-gradient(to bottom,
      rgba(14,27,46,.30) 0%,
      rgba(14,27,46,.00) 38%,
      rgba(14,27,46,.42) 100%);
}

.pagehead {
  background-image: url("/assets/images/strip-hills.jpg");
  background-size: cover;
  background-position: center 55%;
  padding-bottom: 3.5rem;
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(22,39,65,.93) 0%, rgba(22,39,65,.84) 40%, rgba(22,39,65,.46) 100%),
    linear-gradient(to bottom, rgba(14,27,46,.25), rgba(14,27,46,.42));
}

/* Narrow screens: less horizontal room, so the scrim goes flat and even */
@media (max-width: 48rem) {
  .hero { background-position: 62% 72%; padding-bottom: 4.5rem; }
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgba(22,39,65,.90) 0%,
        rgba(22,39,65,.82) 42%,
        rgba(22,39,65,.46) 78%,
        rgba(22,39,65,.34) 100%);
  }
  .pagehead::before { background: rgba(22,39,65,.84); }

}

/* Smaller file on phones */
@media (max-width: 48rem) {
  .hero { background-image: url("/assets/images/hero-kamloops-sm.jpg"); }

}

/* ---------- The record: compact motion grid ---------- */

.tally { display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:var(--rule); border:1px solid var(--rule); margin-bottom:2.5rem; }
@media (min-width:48rem){ .tally{ grid-template-columns:repeat(5,1fr); } 
}
.tally div{ background:var(--white); padding:1.25rem 1rem; }
.tally b{ display:block; font-family:var(--display); font-weight:800; font-size:2.25rem; line-height:1; color:var(--navy); }
.tally span{ display:block; font-family:var(--display); font-weight:600; font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:.45rem; }
.tally div.hi b{ color:var(--yellow); -webkit-text-stroke:1.2px var(--navy); }

/* One row per motion — <details> so it works on hover, tap and keyboard */
.mrow{ border-bottom:1px solid var(--rule); }
.mrow:first-of-type{ border-top:3px solid var(--navy); }
.mrow > summary{
  display:grid; gap:.45rem 1.25rem; grid-template-columns:1fr; align-items:center;
  padding:1.1rem 0; cursor:pointer; list-style:none; position:relative;
}
.mrow > summary::-webkit-details-marker{ display:none; }
.mrow > summary::marker{ content:""; }
@media (min-width:56rem){
  .mrow > summary{ grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem; padding:1rem 0; }

}

/* Column headings so the badge and the circles are labelled */
.mhead{ display:none; }
@media (min-width:56rem){
  .mhead{
    display:grid; grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem;
    padding:0 0 .6rem; font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  }

}
.mrow > summary:hover,
.mrow[open] > summary{ background:#F7F9FB; }
.mrow > summary:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.mrow__chev{ font-family:var(--display); font-weight:800; font-size:.75rem; color:var(--muted);
             transition:transform .18s ease; justify-self:end; }
.mrow[open] .mrow__chev{ transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .mrow__chev{ transition:none; } 
}

.mrow__date{ font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.07em;
             text-transform:uppercase; color:var(--muted); }
.mrow__topic{ font-family:var(--body); font-size:1.0625rem; font-weight:600; line-height:1.35; color:var(--navy); }
.mrow__flag{ display:inline-block; font-family:var(--display); font-weight:700; font-size:.625rem;
             letter-spacing:.08em; text-transform:uppercase; color:#8A5A00; background:#FDF4E0;
             border:1px solid #E3C57E; padding:.1rem .35rem; margin-left:.4rem; vertical-align:.1em; }

.mrow__detail{ padding:0 0 1.25rem; max-width:46rem; }
.mrow__detail p{ font-size:.9375rem; color:#38485F; margin:0; max-width:none; }
@media (min-width:56rem){ .mrow__detail{ padding-left:9rem; } 
}

.badge{ font-family:var(--display); font-weight:800; font-size:.6875rem; letter-spacing:.08em;
        text-transform:uppercase; display:inline-block; padding:.4rem .6rem; border:2px solid; white-space:nowrap; }
.badge--carried{ color:#0F5C34; border-color:var(--green); background:#E9F5EE; }
.badge--defeat { color:#8E1F18; border-color:#C2453C; background:#FBEDEC; }
.badge--none   { color:#8A5A00; border-color:#C98F1E; background:#FDF4E0; }
.badge--shelved{ color:#46546B; border-color:#93A1B4; background:#F1F4F7; }
.badge--pending{ color:#1C3E63; border-color:#5E83A8; background:#EDF3F9; }

.votes{ display:flex; gap:.28rem; }
.votes i{ width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid var(--rule); display:block; flex-shrink:0; }
.votes i.v-for    { background:var(--yellow); border-color:#D9A521; }
.votes i.v-against{ background:var(--navy);   border-color:var(--navy); }
.votes i.v-recused{ border-style:dashed; border-color:var(--muted); }
.votes i.v-absent { border-color:#E4E9EF; }
.votes i.v-silent { border-color:var(--rule); background:repeating-linear-gradient(45deg,transparent,transparent 2px,#E2E7ED 2px,#E2E7ED 4px); }
.votes i.v-none   { border-color:#E4E9EF; background:#F6F8FA; }

.mhint{ font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.06em;
        text-transform:uppercase; color:var(--muted); margin:0 0 .75rem; }

.legend{ display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.legend span{ display:flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--muted); }
.legend i{ width:1rem; height:1rem; border-radius:50%; border:2px solid var(--rule); flex-shrink:0; }


/* Right-hand hero block sits over busy city detail — give it its own panel
   so the copy stays legible without dulling the whole photograph. */
.hero .count {
  background: rgba(14,27,46,.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 1.5rem 1.5rem 1.6rem;
  border-left-width: 5px;
}
.hero .count p { color: #E4EAF2; }
.hero .seat { border-color: #7D91AC; }

/* ---------- Readability: ledes, goal cards, section jumps ---------- */

/* First paragraph of a prose section carries more weight */
.story > p:first-of-type,
.story h2 + p.lede { font-size: 1.1875rem; line-height: 1.6; }

/* Jump links for long pages */
.jump { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 3rem; padding:0; list-style:none; }
.jump a {
  display:inline-block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); border:2px solid var(--rule); padding:.6rem .9rem;
}
.jump a:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.jump a b { color:var(--yellow); -webkit-text-stroke:.8px var(--navy); margin-right:.4rem; }
.jump a:hover b { -webkit-text-stroke:0; }

/* Goal items: bold ask first, detail underneath */
.goals { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
         border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .goals{ grid-template-columns:1fr 1fr; } 
}
.goal { background:var(--white); padding:1.4rem 1.35rem; }
.goal h3 {
  font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
  margin:0 0 .55rem; color:var(--navy); text-transform:none; letter-spacing:-.005em;
  padding-left:.85rem; border-left:4px solid var(--yellow);
}
.goal p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }

/* Pillars breathe more */
.pillar { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.pillar:first-of-type { margin-top:0; }

/* Longer prose: more air between paragraphs, clearer section starts */
.story p { margin-bottom: 1.35em; }
.story h2 {
  margin:3.25rem 0 1.1rem; padding-top:1.5rem; border-top:2px solid var(--rule);
  font-size:1.625rem;
}
.story h2:first-child { margin-top:0; padding-top:0; border-top:0; }

/* Marked explicitly rather than by :nth-child parity — a full-width lead card
   flips the parity and the automatic rule then fires on the wrong item. */
@media (min-width:52rem){ .goal--wide{ grid-column:1 / -1; } 
}

.story h2 { scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem); }

/* ---------- What four years changed: the reorder, as a graphic ---------- */

.shift { background: var(--navy); color: #fff; padding: 3rem 0 3.25rem; position: relative; }
.shift h2 { color:#fff; font-size:clamp(1.75rem,4vw,2.5rem); text-transform:uppercase; margin-bottom:.75rem; }
.shift .lede { color:#CFDAE8; max-width:40rem; }

.swap { display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:2.5rem; align-items:stretch; }
@media (min-width:54rem){ .swap{ grid-template-columns:1fr 4.5rem 1.35fr; gap:0; } 
}

.swap__col { border:2px solid #33496A; padding:1.5rem 1.4rem 1.6rem; }
.swap__col--now { border-color:var(--yellow); background:rgba(245,188,49,.07); }

.swap__year {
  font-family:var(--display); font-weight:800; font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA6C2; margin-bottom:1.1rem; display:block;
}
.swap__col--now .swap__year { color:var(--yellow); }

.swap__item { display:flex; align-items:baseline; gap:.9rem; padding:.7rem 0; border-top:1px solid #2C4265; }
.swap__item:first-of-type { border-top:0; padding-top:0; }
.swap__col--now .swap__item { border-top-color:rgba(245,188,49,.22); }

.swap__rank { font-family:var(--display); font-weight:800; font-size:1.625rem; line-height:1; color:#5E779B; min-width:1.2em; }
.swap__col--now .swap__rank { color:var(--yellow); font-size:2rem; }

.swap__name { font-family:var(--display); font-weight:700; font-size:1.0625rem; letter-spacing:.01em; color:#A9BCD4; }
.swap__col--now .swap__name { color:#fff; font-size:1.1875rem; text-transform:uppercase; letter-spacing:.03em; }
.swap__item.moved .swap__name { text-decoration:line-through; text-decoration-color:#C2453C; text-decoration-thickness:2px; }

.swap__move {
  font-family:var(--display); font-weight:700; font-size:.6875rem; letter-spacing:.07em;
  text-transform:uppercase; margin-left:auto; white-space:nowrap;
}
.swap__move--up   { color:#7BD3A0; }
.swap__move--down { color:#E79A94; }
.swap__move--same { color:#7E93AF; }

.swap__arrow {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.75rem; color:var(--yellow);
}
@media (max-width:53.99rem){ .swap__arrow{ padding:.25rem 0; transform:rotate(90deg); } 
}

.shift__why { margin-top:2.25rem; border-left:5px solid var(--yellow); padding-left:1.4rem; max-width:42rem; }
.shift__why p { color:#DCE6F2; margin-bottom:.9rem; }
.shift__why p:last-child { margin-bottom:0; }
.shift__why strong { color:#fff; }

@media (max-width:34rem){
  .swap__item { flex-wrap:wrap; }
  .swap__col--now .swap__name { font-size:1.0625rem; }
  .swap__move { margin-left:2.3rem; width:100%; margin-top:.3rem; }
  .swap__col { padding:1.25rem 1.1rem 1.35rem; }

}

/* Lead goal: the headline ask within a pillar, given the full width */
@media (min-width:52rem){ .goal--lead{ grid-column:1 / -1; } 
}
.goal--lead { background:#FCFAF3; border-left:6px solid var(--yellow); }
.goal--lead h3 { font-size:1.375rem; border-left:0; padding-left:0; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.01em; }
.goal--lead p { font-size:1.0625rem; max-width:44rem; }
.goal--lead .kicker {
  display:block; margin-top:.9rem; font-family:var(--display); font-weight:800;
  font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
}

/* ---------- Single-issue feature blocks ---------- */

.issue { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.issue__kicker {
  font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5rem;
}
.issue h2 { font-size:clamp(1.5rem,3.5vw,2.125rem); text-transform:uppercase; margin-bottom:1rem; }
.issue__lede { font-size:1.1875rem; line-height:1.55; max-width:38rem; }

.points { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
          border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .points{ grid-template-columns:1fr 1fr; } 
}
.points > div { background:var(--white); padding:1.4rem 1.35rem; }
.points h3 { font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
             margin:0 0 .55rem; color:var(--navy); text-transform:none;
             padding-left:.85rem; border-left:4px solid var(--yellow); }
.points p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }
.points > div.wide { grid-column:1 / -1; }

.issue__close {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:1.0625rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
}

/* Dark variant, used for the RCMP band on the home page */
.issue--dark { background:var(--navy); color:#fff; border-top:0; padding:3rem 0 3.25rem; margin:0; }
.issue--dark h2 { color:#fff; }
.issue--dark .issue__kicker { color:var(--yellow); }
.issue--dark .issue__lede { color:#CFDAE8; }
.issue--dark .points { background:#2B4265; border-color:#2B4265; }
.issue--dark .points > div { background:#1B2F4B; }
.issue--dark .points h3 { color:#fff; }
.issue--dark .points p { color:#C3D2E4; }
.issue--dark .issue__close { color:var(--yellow); }

/* Two navy bands in a row need a seam so they don't read as one block */
.shift + .issue--dark { border-top:4px solid rgba(245,188,49,.4); }

/* ---------- Interludes: full-bleed photo bands between sections ---------- */
/* Parallax comes from a fixed-position layer rather than
   background-attachment:fixed, which janks or fails outright on iOS. */

.interlude { position:relative; overflow:hidden; min-height:20rem;
             display:flex; align-items:center; }
@media (min-width:60rem){ .interlude{ min-height:26rem; } 
}

.interlude__bg {
  position:absolute; inset:-12% 0; z-index:0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.interlude::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(14,27,46,.86) 0%, rgba(14,27,46,.62) 52%, rgba(14,27,46,.30) 100%);
}
.interlude .wrap { position:relative; z-index:2; padding-block:3.5rem; }

.interlude p {
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.375rem); line-height:1.18; letter-spacing:-.01em;
  max-width:26ch; margin:0;
}
.interlude p em { font-style:normal; color:var(--yellow); }
.interlude cite {
  display:block; margin-top:1.1rem; font-family:var(--display); font-style:normal;
  font-weight:700; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:#A9C0DC;
}

/* ---------- Motion: reveal on scroll, count-up ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity:0; transform:translateY(10px); }
  .js [data-reveal].is-in { opacity:1; transform:none;
    transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); }
  .js [data-reveal].is-in[data-delay="1"]{ transition-delay:.08s }
  .js [data-reveal].is-in[data-delay="2"]{ transition-delay:.16s }
  .js [data-reveal].is-in[data-delay="3"]{ transition-delay:.24s }

}

/* ---------- Figure: a photograph used as evidence, with a caption ---------- */
.figure { margin:1.75rem 0 0; }
.figure img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.figure figcaption {
  font-family:var(--display); font-weight:600; font-size:.8125rem; line-height:1.45;
  letter-spacing:.02em; color:var(--muted); margin-top:.7rem; max-width:44rem;
}
.figure figcaption b { color:var(--navy); font-weight:800; }
.issue--dark .figure img { border-color:#2B4265; }
.issue--dark .figure figcaption { color:#A9BCD4; }
.issue--dark .figure figcaption b { color:#fff; }

/* ================= Tightening pass =================
   The pages read as sprawling: too much vertical air between blocks, and a
   long narrow text column leaving half the width empty. Both fixed below. */

.band { padding-block: 2.75rem; }
@media (min-width:60rem){ .band { padding-block: 3.25rem; } 
}
.band h2 { margin-bottom: 1.1rem; }
.band h3 { margin: 1.5rem 0 .6rem; }

.hero { padding-block: 3.25rem 3.5rem; }
@media (min-width:60rem){ .hero { padding-block: 4rem 4.5rem; } 
}
.pagehead { padding-block: 2.5rem 2.75rem; }

.pillar { margin-top: 2.75rem; padding-top: 1.25rem; }
.issue  { margin-top: 3rem;   padding-top: 1.25rem; }
.shift  { padding: 2.5rem 0 2.75rem; }
.issue--dark { padding: 2.5rem 0 2.75rem; }
.swap { margin-top: 1.75rem; }
.shift__why { margin-top: 1.75rem; }
.goals, .points { margin-top: 1.25rem; }
.jump { margin-bottom: 2rem; }
.interlude { min-height: 15rem; }
@media (min-width:60rem){ .interlude { min-height: 19rem; } 
}
.interlude .wrap { padding-block: 2.5rem; }
.btnrow { margin-top: 1.5rem; }
.tri { gap: 1.75rem; }
@media (min-width:48rem){ .tri { gap: 2.25rem; } 
}

/* Prose pages: let the pull quotes occupy the empty right-hand half.
   Shortens the page and stops the column looking marooned. */
.story { max-width: 52rem; }
.story p, .story ul { max-width: 37rem; }
.story h2 { margin: 2.25rem 0 .9rem; padding-top: 1.1rem; font-size: 1.5rem; }
.story p { margin-bottom: 1.1em; }

@media (min-width: 60rem){
  .story blockquote {
    float: right; width: 19rem; margin: .3rem 0 1.5rem 2.5rem;
    font-size: 1.1875rem; line-height: 1.35; border-left-width: 5px;
  }
  .story h2 { clear: both; }
  .story .portrait { float: right; width: 17rem; margin: 0 0 1.5rem 2.5rem; }

}

/* ---------- Open the doors: the citizens-input highlight ---------- */
.doors {
  margin-top: 2rem; border: 2px solid var(--yellow);
  background: rgba(245,188,49,.07); padding: 1.6rem 1.6rem 1.5rem;
}
.doors__kicker {
  display:block; font-family:var(--display); font-weight:700; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:.6rem;
}
.doors h3 {
  font-family:var(--display); font-weight:800; color:#fff; margin:0 0 .8rem;
  font-size:clamp(1.375rem,3vw,1.875rem); line-height:1.15; text-transform:uppercase; letter-spacing:.01em;
}
.doors p { color:#D5E0EE; max-width:42rem; margin-bottom:1rem; }
.doors__punch {
  font-family:var(--display); font-weight:800; color:var(--yellow);
  font-size:clamp(1.125rem,2.4vw,1.4375rem); letter-spacing:.02em;
  text-transform:uppercase; margin:0; line-height:1.2;
}

/* The tightening pass reintroduced a margin on .issue that the dark full-bleed
   variant must not have — it opened a paper-coloured gap between two navy bands. */
.issue--dark { margin: 0; border-top: 4px solid rgba(245,188,49,.4); }

/* Highlighted phrases in long prose — a marker pass, not bold text, so the
   page can be skimmed by picking out the highlights alone. */
.story .hl {
  font-weight: 600;
  background: linear-gradient(to top, rgba(245,188,49,.42) 0 .45em, transparent .45em);
  padding: 0 .08em;
}

/* ---------- Sticky top bar: countdown + masthead travel with the page ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.topbar-spacer { height: 0; }
.masthead { border-bottom-width: 4px; }

/* Anchored headings must clear the sticky bar */
.pillar, .issue, .story h2, .mrow {
  scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem);
}

/* "Kamloops votes" reads as the headline of the bar, not a caption */
.countdown__label {
  font-size: 1.0625rem;
  letter-spacing: .09em;
  line-height: 1.1;
}
@media (max-width: 48rem){ .countdown__label { font-size: .875rem; } 
}
@media (max-width: 30rem){
  .countdown__label { font-size: .8125rem; letter-spacing: .07em; }

}

/* Once the page is scrolled, the bar condenses: it should hold its place
   without holding a third of a phone screen. */
.topbar, .topbar .countdown, .topbar .masthead .wrap { transition: none; }

.topbar.is-stuck .countdown { padding-block: .35rem; }
.topbar.is-stuck .masthead .wrap { padding-block: .6rem; }
.topbar.is-stuck .cd-unit { padding:.2rem .45rem .18rem; }
.topbar.is-stuck .cd-unit b { font-size:1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size:1.2rem; }


@media (max-width: 48rem){
  /* On a phone the clock is the first thing you see and then it gets out of
     the way — the navigation is what needs to stay reachable. */

  .masthead .wrap { padding-block:.7rem; gap:.35rem 1rem; }
  .nav ul { gap:.5rem 1rem; }
  .nav a { font-size:.8125rem; letter-spacing:.03em; }
  .wordmark { font-size:.9375rem; }
  .wordmark span { font-size:.6875rem; }

}
@media (prefers-reduced-motion: reduce){
  .topbar .countdown, .topbar .masthead .wrap { transition:none; }

}

/* ---------- Acknowledging the last four years ---------- */
.owning { background:#F6F3EA; border-top:4px solid var(--navy); }
.owning h2 { margin-bottom:1rem; }
.owning p { max-width:38rem; font-size:1.0625rem; }
.owning .owning__lede { font-size:1.1875rem; }
.owning .owning__turn {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:clamp(1.125rem,2.4vw,1.375rem);
  letter-spacing:.01em; text-transform:uppercase; color:var(--navy); max-width:34rem;
}

/* A soft glow behind the clock so it reads as one object in the sticky bar */
.countdown__clock {
  padding: .25rem .35rem;
  border-radius: 6px;
  background: rgba(0,0,0,.13);
  box-shadow: 0 0 0 1px rgba(245,188,49,.28), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clock {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.topbar.is-stuck .cd-unit span { display:block; }

/* Goals page: the three pillars stay reachable the whole way down */
.jumpbar {
  position: sticky;
  top: var(--topbar-h, 8rem);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 10px 14px -12px rgba(22,39,65,.4);
}
.jumpbar .jump { margin: 0; padding: .65rem 0; }
.jump a { background: var(--white); }
@media (max-width: 48rem){
  .jump { gap:.35rem; padding:.55rem 0; }
  .jump a { font-size:.6875rem; padding:.45rem .55rem; letter-spacing:.03em; }

}

/* One row, scrolls sideways if it must — wrapping to two rows costs too much
   height once the bar is stuck to the top of a phone screen. */
.jump {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jump::-webkit-scrollbar { display: none; }
.jump li { flex: 0 0 auto; }
.jump a.is-here {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.jump a.is-here b { color: var(--yellow); -webkit-text-stroke: 0; }

/* ============ Reorder graphic, bolder ============
   The 2022 column is deliberately reduced to a faded receipt of the past; all
   the weight goes to 2026, and the top row — the change itself — is the one
   solid yellow block in the section. */

.swap { gap: 1rem; align-items: center; }
@media (min-width:54rem){ .swap { grid-template-columns: .9fr 5rem 1.5fr; gap: 0; } 
}

/* --- then --- */
.swap__col {
  border: 2px dashed #3A5075;
  background: rgba(0,0,0,.14);
  padding: 1.3rem 1.25rem 1.4rem;
  opacity: .72;
}
.swap__year { font-size: .6875rem; letter-spacing: .16em; margin-bottom: .9rem; }
.swap__rank { font-size: 2rem; color: #6E86A8; min-width: 1.15em; }
.swap__name { font-size: 1rem; letter-spacing: .02em; }
.swap__item { padding: .6rem 0; }
.swap__item.moved .swap__name {
  text-decoration-thickness: 3px; text-decoration-color: #D4564C; opacity: .8;
}

/* --- arrow --- */
.swap__arrow { font-size: 2.75rem; line-height: 1; opacity: .9; }

/* --- now --- */
.swap__col--now {
  border: 3px solid var(--yellow);
  background: #16283F;
  opacity: 1;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 0 0 0 6px rgba(245,188,49,.10), 0 22px 46px -24px rgba(0,0,0,.75);
}
.swap__col--now .swap__year { font-size: .75rem; letter-spacing: .16em; margin-bottom: .85rem; }
.swap__col--now .swap__rank { font-size: 2.75rem; color: var(--yellow); min-width: 1.05em; }
.swap__col--now .swap__name { font-size: 1.375rem; letter-spacing: .025em; }
.swap__col--now .swap__item { padding: .85rem 0; align-items: center; }

/* The promoted goal is the whole point — give it the one solid block */
.swap__col--now .swap__item:first-of-type {
  background: var(--yellow);
  margin: -.4rem -1.5rem .35rem;
  padding: 1rem 1.5rem;
  border-top: 0;
}
.swap__col--now .swap__item:first-of-type .swap__rank,
.swap__col--now .swap__item:first-of-type .swap__name { color: var(--navy); }
.swap__col--now .swap__item:first-of-type .swap__rank { font-size: 3.25rem; }
.swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.5rem; font-weight: 800; }

/* Movement markers as pills rather than loose text */
.swap__move {
  font-size: .625rem; letter-spacing: .09em;
  padding: .3rem .55rem; border-radius: 999px; border: 1.5px solid currentColor;
}
.swap__col--now .swap__item:first-of-type .swap__move {
  color: #0F5C34; background: rgba(255,255,255,.55); border-color: rgba(15,92,52,.45);
}
.swap__move--down { color: #F0A49D; }
.swap__move--same { color: #8CA3C0; }

@media (max-width:53.99rem){
  .swap__col--now .swap__item:first-of-type { margin-inline: -1.5rem; }
  .swap__col--now .swap__rank { font-size: 2.25rem; }
  .swap__col--now .swap__item:first-of-type .swap__rank { font-size: 2.6rem; }
  .swap__col--now .swap__name { font-size: 1.125rem; }
  .swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.25rem; }

}

@media (max-width:34rem){
  /* The movement markers are pills now — they must not stretch full width */
  .swap__move { width: auto; display: inline-block; align-self: flex-start; }

}

/* ============ Record tally + legend, reworked ============
   The counts now carry the same colour as the outcome badges further down the
   page, so the summary and the rows read as one system. */

.tally {
  display: grid; gap: 1px; grid-template-columns: 1fr 1fr;
  background: var(--rule); border: 0; margin-bottom: 1.5rem;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(22,39,65,.55);
}
@media (min-width:52rem){ .tally { grid-template-columns: repeat(5, 1fr); } 
}

.tally > div { background: var(--white); padding: 1.3rem 1.15rem 1.2rem; position: relative; }
.tally > div::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: currentColor;
}
.tally b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: currentColor;
}
.tally span {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: .55rem;
}

/* The headline number takes its own band across the top; the five outcomes
   sit beneath it and must add up to it. */
.tally .t-total {
  color: var(--navy); background: var(--navy); grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem 1.15rem;
}
.tally .t-total::before { background: var(--yellow); }
.tally .t-total b { color: var(--yellow); font-size: 2.75rem; }
.tally .t-total span { color: #A6BAD2; margin-top: 0; font-size: .8125rem; letter-spacing: .1em; }

.tally .t-carried { color: #0F5C34; }
.tally .t-defeat  { color: #A32A21; }
.tally .t-none    { color: #97620A; }
.tally .t-pending { color: #24547F; }

/* Legend as a labelled key */
.legendbox {
  background: #F2F5F8; border: 1px solid var(--rule); border-radius: 8px;
  padding: .9rem 1.1rem 1rem; margin-bottom: 2.25rem;
}
.legendbox__title {
  display: block; font-family: var(--display); font-weight: 800; font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: .6rem;
}
.legendbox .legend {
  margin: 0; padding: 0; border: 0; gap: .5rem 1.25rem;
}
.legendbox .legend span { font-size: .75rem; color: #44556E; }
.legendbox .legend i { width: .9rem; height: .9rem; border-width: 2px; }

/* ---------- Countdown: election date sits to the right of the clock ---------- */
.countdown__tail {
  display: flex; flex-direction: column; gap: .1rem;
  font-size: inherit; letter-spacing: 0; text-transform: none; opacity: 1;
  text-align: left;
}
.countdown__tail b {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--yellow); line-height: 1.1;
}
.countdown.is-today .countdown__tail b { color: var(--navy); }
.countdown__tail em {
  font-style: normal; font-family: var(--display); font-weight: 600; font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .72; line-height: 1.1;
}
@media (max-width: 48rem){
  .countdown__tail { display: block; }
  .countdown__tail b { font-size: .8125rem; }
  .countdown__tail em { display: none; }

}

/* Nothing is dropped when the bar condenses — only the padding tightens */
.topbar.is-stuck .cd-unit { padding: .28rem .45rem .26rem; }
.topbar.is-stuck .cd-unit b { font-size: 1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size: 1.2rem; }
.topbar.is-stuck .cd-unit span { display: block; font-size: .5rem; }
.topbar.is-stuck .countdown { display: flex; padding-block: .3rem; }
.topbar.is-stuck .countdown__label { font-size: .875rem; }
.topbar.is-stuck .countdown__tail b { font-size: .875rem; }
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { display: flex; padding-block: .28rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }

}

/* ---------- Ballot line in the hero ---------- */
.ballot {
  display: flex; align-items: center; gap: 1rem;
  background: #FBF8F0; border: 3px solid var(--navy);
  padding: .95rem 1.2rem; margin-top: 1.6rem; max-width: 38rem;
  box-shadow: 6px 6px 0 rgba(245,188,49,.9);
}
.ballot__box {
  flex: 0 0 auto; width: 3rem; height: 3rem;
  border: 3px solid var(--navy); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ballot__box svg { width: 2.1rem; height: 2.1rem; }
.ballot__text { line-height: 1.15; }
.ballot__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(.9375rem, 2vw, 1.1875rem); letter-spacing: .005em;
  text-transform: uppercase; color: var(--navy);
}
.ballot__role {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .13em; text-transform: uppercase; color: #5A6B85; margin-top: .3rem;
}
@media (max-width: 30rem){
  .ballot { gap: .8rem; padding: .8rem .9rem; box-shadow: 4px 4px 0 rgba(245,188,49,.9); }
  .ballot__box { width: 2.4rem; height: 2.4rem; }
  .ballot__box svg { width: 1.7rem; height: 1.7rem; }

}

/* Phones: keep every element, but fit the clock and the date on one row so the
   bar is two rows rather than three. */
@media (max-width: 48rem){
  .countdown { gap: .25rem .55rem; padding-block: .45rem; }
  .countdown__label { width: 100%; text-align: center; font-size: .75rem; letter-spacing: .1em; }
  .countdown__clock { padding: .2rem .28rem; gap: .28rem; }
  .cd-unit { min-width: 2.45rem; padding: .26rem .3rem .24rem; }
  .cd-unit b { font-size: .9375rem; }
  .cd-unit span { font-size: .4375rem; letter-spacing: .06em; }
  .cd-unit--days { min-width: 2.6rem; }
  .cd-unit--days b { font-size: 1.05rem; }
  .countdown__tail b { font-size: .75rem; letter-spacing: .03em; }

}
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { padding-block: .3rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }
  .topbar.is-stuck .cd-unit b { font-size: .875rem; }
  .topbar.is-stuck .cd-unit--days b { font-size: 1rem; }

}

.tally .t-other { color: #4B5B73; }   /* matches the shelved/amended badge */

/* "Until polls close" sits beneath the clock rather than beside the date */
.countdown__clockwrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.countdown__cap {
  font-family: var(--display); font-weight: 700; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .72; line-height: 1;
}
.countdown.is-today .countdown__cap { color: var(--navy); opacity: .8; }
.countdown__tail { display: block; }
.countdown__tail em { display: none; }
@media (max-width: 48rem){
  .countdown__cap { font-size: .5rem; letter-spacing: .1em; }
  .countdown__clockwrap { gap: .22rem; }

}

/* The glow should frame the clock and its caption as one object */
.countdown__clock {
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.countdown__clockwrap {
  padding: .3rem .45rem .35rem;
  border-radius: 7px;
  background: rgba(0,0,0,.14);
  box-shadow: 0 0 0 1px rgba(245,188,49,.30), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clockwrap {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.countdown.is-today .countdown__clockwrap { background: rgba(22,39,65,.10); }

/* ---------- Small inline photographs in long prose ---------- */
.snap { margin: 1.25rem 0 1.5rem; }
.snap img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.snap figcaption {
  font-family: var(--display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-top: .5rem;
}
@media (min-width: 60rem){
  .snap {
    float: right; width: 17.5rem; margin: .35rem 0 1.4rem 2.5rem; clear: right;
  }
  /* photographs and pull quotes share the right column — keep them apart */
  .story blockquote { clear: right; }

}

/* ================= Mobile pass =================
   The pages were far too long on a phone and the chrome took too much of the
   screen. Tightened throughout; nothing removed. */

@media (max-width: 48rem){
  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Navigation: one scrolling row instead of two stacked rows */
  .nav { width: 100%; margin-left: 0; }
  .nav ul {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 1.1rem; padding-bottom: .1rem;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }
  .nav a { padding-block: .55rem; font-size: .8125rem; }
  .masthead .wrap { padding-block: .55rem .35rem; gap: .3rem; }

  /* Vertical rhythm */
  .band { padding-block: 2rem; }
  .hero { padding-block: 2.25rem 2.5rem; }
  .pagehead { padding-block: 1.9rem 2rem; }
  .shift, .issue--dark { padding: 2rem 0 2.25rem; }
  .pillar { margin-top: 2rem; padding-top: 1rem; }
  .issue  { margin-top: 2.25rem; padding-top: 1rem; }
  .interlude { min-height: 11.5rem; }
  .interlude .wrap { padding-block: 1.9rem; }
  .interlude p { font-size: 1.3125rem; }
  .band h2, .issue h2, .shift h2 { font-size: 1.5rem; margin-bottom: .8rem; }
  .lede, .issue__lede, .owning__lede { font-size: 1.0625rem; }
  .goal { padding: 1.05rem 1rem; }
  .goal p, .points p { font-size: .9375rem; }
  .goals, .points { margin-top: 1rem; }
  .story h2 { margin: 1.75rem 0 .75rem; padding-top: .9rem; font-size: 1.3125rem; }
  .story p { margin-bottom: 1em; }
  .story blockquote { margin: 1.25rem 0; font-size: 1.125rem; }
  .snap { margin: 1rem 0 1.25rem; }
  .btnrow { margin-top: 1.25rem; gap: .6rem; }
  .btn { padding: .8rem 1.15rem; font-size: .875rem; }
  .doors, .owning { padding-block: 1.25rem; }
  .mrow > summary { padding: .9rem 0; }
  .tally > div { padding: 1rem .9rem; }
  .tally b { font-size: 2rem; }
  .tally .t-total b { font-size: 2.25rem; }

}

/* Tap targets: nothing interactive smaller than a fingertip */
@media (max-width: 48rem){
  .jump a { padding: .6rem .75rem; }
  .legendbox .legend span { padding-block: .2rem; }
  .foot ul a { padding-block: .35rem; display: inline-block; }

}

/* A scrolling row needs to look like one — fade the right edge so it's clear
   there is more nav past the cut. */
@media (max-width: 48rem){
  .nav { position: relative; }
  .nav ul {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
  }
  .jump {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }

}

/* Standalone links that act as buttons need a fingertip-sized target.
   Inline links inside prose are left alone — they aren't tap destinations. */
@media (max-width: 48rem){
  .tri p:last-child a,
  .foot p a {
    display: inline-block; padding-block: .55rem; font-weight: 600;
  }

}

/* Hard caps so the ballot tick can never inflate (Safari flex/SVG sizing) */
.ballot__box { overflow: hidden; flex: 0 0 auto; }
.ballot__box svg {
  display: block;
  width: 2.1rem !important; height: 2.1rem !important;
  max-width: 100%; max-height: 100%;
}
@media (max-width: 30rem){
  .ballot__box svg { width: 1.7rem !important; height: 1.7rem !important; }

}

/* Caption centred explicitly rather than relying on inherited alignment */
.countdown__clockwrap { text-align: center; }
.countdown__cap { width: 100%; text-align: center; text-transform: uppercase; }

/* ================= Mobile menu =================
   Below 48rem the links collapse behind a labelled Menu button and open as a
   panel. Above it, nothing changes — the button is hidden and the row shows. */

.navtoggle { display: none; }

@media (max-width: 48rem){
  .masthead .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-block: .6rem;
  }

  .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; border: 2px solid rgba(255,255,255,.4);
    color: #fff; font-family: var(--display); font-weight: 800;
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem .8rem; cursor: pointer; border-radius: 3px;
    min-height: 44px;
  }
  .navtoggle[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
  .navtoggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

  .navtoggle__bars { width: 1.05rem; height: .8rem; position: relative; display: block; }
  .navtoggle__bars span {
    position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .navtoggle__bars span:nth-child(1){ top: 0; }
  .navtoggle__bars span:nth-child(2){ top: 50%; margin-top: -1px; }
  .navtoggle__bars span:nth-child(3){ bottom: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1){ transform: translateY(.39rem) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2){ opacity: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3){ transform: translateY(-.39rem) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){ .navtoggle__bars span { transition: none; } 
}

  /* The panel */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-deep); border-top: 3px solid var(--yellow);
    box-shadow: 0 18px 30px -18px rgba(0,0,0,.7);
    display: none; width: auto; margin: 0;
  }
  .masthead { position: relative; }
  .nav.is-open { display: block; }

  .nav ul {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
    padding: .35rem 0 .6rem;
  }
  .nav li { border-top: 1px solid rgba(255,255,255,.09); }
  .nav li:first-child { border-top: 0; }
  .nav a {
    display: block; padding: .95rem 1.5rem; font-size: .9375rem;
    letter-spacing: .07em; border-bottom: 0; min-height: 44px;
  }
  .nav a[aria-current="page"] {
    border-bottom: 0; border-left: 4px solid var(--yellow);
    padding-left: calc(1.5rem - 4px); background: rgba(245,188,49,.1);
  }
  .nav a:hover { background: rgba(255,255,255,.06); border-bottom: 0; }

}

/* Belt and braces: if the spacer and the bar ever disagree by a pixel or two,
   the seam should be invisible rather than a band of page background. */
.topbar-spacer { background: var(--navy); }

/* ---------- Sense of place: Arthur's photographs ---------- */
/* Hero and page headers carry real photographs of the valley, laid under a
   navy scrim that is heaviest where the type sits so the headline stays
   readable at any size. The illustrated ridgeline (kamloops-hills.svg) is
   kept in /assets as a fallback but is no longer used. */

.hero, .pagehead { position: relative; overflow: hidden; }
.hero .wrap, .pagehead .wrap { position: relative; z-index: 2; }

.hero {
  background-image: url("/assets/images/hero-kamloops.jpg");
  background-size: cover;
  background-position: 58% 70%;   /* beach and river; clean sky stays upper-left */
  padding-bottom: 6rem;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(22,39,65,.93) 0%,
      rgba(22,39,65,.84) 30%,
      rgba(22,39,65,.42) 58%,
      rgba(22,39,65,.14) 100%),
    linear-gradient(to bottom,
      rgba(14,27,46,.30) 0%,
      rgba(14,27,46,.00) 38%,
      rgba(14,27,46,.42) 100%);
}

.pagehead {
  background-image: url("/assets/images/strip-hills.jpg");
  background-size: cover;
  background-position: center 55%;
  padding-bottom: 3.5rem;
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(22,39,65,.93) 0%, rgba(22,39,65,.84) 40%, rgba(22,39,65,.46) 100%),
    linear-gradient(to bottom, rgba(14,27,46,.25), rgba(14,27,46,.42));
}

/* Narrow screens: less horizontal room, so the scrim goes flat and even */
@media (max-width: 48rem) {
  .hero { background-position: 62% 72%; padding-bottom: 4.5rem; }
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgba(22,39,65,.90) 0%,
        rgba(22,39,65,.82) 42%,
        rgba(22,39,65,.46) 78%,
        rgba(22,39,65,.34) 100%);
  }
  .pagehead::before { background: rgba(22,39,65,.84); }

}

/* Smaller file on phones */
@media (max-width: 48rem) {
  .hero { background-image: url("/assets/images/hero-kamloops-sm.jpg"); }

}

/* ---------- The record: compact motion grid ---------- */

.tally { display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:var(--rule); border:1px solid var(--rule); margin-bottom:2.5rem; }
@media (min-width:48rem){ .tally{ grid-template-columns:repeat(5,1fr); } 
}
.tally div{ background:var(--white); padding:1.25rem 1rem; }
.tally b{ display:block; font-family:var(--display); font-weight:800; font-size:2.25rem; line-height:1; color:var(--navy); }
.tally span{ display:block; font-family:var(--display); font-weight:600; font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:.45rem; }
.tally div.hi b{ color:var(--yellow); -webkit-text-stroke:1.2px var(--navy); }

/* One row per motion — <details> so it works on hover, tap and keyboard */
.mrow{ border-bottom:1px solid var(--rule); }
.mrow:first-of-type{ border-top:3px solid var(--navy); }
.mrow > summary{
  display:grid; gap:.45rem 1.25rem; grid-template-columns:1fr; align-items:center;
  padding:1.1rem 0; cursor:pointer; list-style:none; position:relative;
}
.mrow > summary::-webkit-details-marker{ display:none; }
.mrow > summary::marker{ content:""; }
@media (min-width:56rem){
  .mrow > summary{ grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem; padding:1rem 0; }

}

/* Column headings so the badge and the circles are labelled */
.mhead{ display:none; }
@media (min-width:56rem){
  .mhead{
    display:grid; grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem;
    padding:0 0 .6rem; font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  }

}
.mrow > summary:hover,
.mrow[open] > summary{ background:#F7F9FB; }
.mrow > summary:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.mrow__chev{ font-family:var(--display); font-weight:800; font-size:.75rem; color:var(--muted);
             transition:transform .18s ease; justify-self:end; }
.mrow[open] .mrow__chev{ transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .mrow__chev{ transition:none; } 
}

.mrow__date{ font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.07em;
             text-transform:uppercase; color:var(--muted); }
.mrow__topic{ font-family:var(--body); font-size:1.0625rem; font-weight:600; line-height:1.35; color:var(--navy); }
.mrow__flag{ display:inline-block; font-family:var(--display); font-weight:700; font-size:.625rem;
             letter-spacing:.08em; text-transform:uppercase; color:#8A5A00; background:#FDF4E0;
             border:1px solid #E3C57E; padding:.1rem .35rem; margin-left:.4rem; vertical-align:.1em; }

.mrow__detail{ padding:0 0 1.25rem; max-width:46rem; }
.mrow__detail p{ font-size:.9375rem; color:#38485F; margin:0; max-width:none; }
@media (min-width:56rem){ .mrow__detail{ padding-left:9rem; } 
}

.badge{ font-family:var(--display); font-weight:800; font-size:.6875rem; letter-spacing:.08em;
        text-transform:uppercase; display:inline-block; padding:.4rem .6rem; border:2px solid; white-space:nowrap; }
.badge--carried{ color:#0F5C34; border-color:var(--green); background:#E9F5EE; }
.badge--defeat { color:#8E1F18; border-color:#C2453C; background:#FBEDEC; }
.badge--none   { color:#8A5A00; border-color:#C98F1E; background:#FDF4E0; }
.badge--shelved{ color:#46546B; border-color:#93A1B4; background:#F1F4F7; }
.badge--pending{ color:#1C3E63; border-color:#5E83A8; background:#EDF3F9; }

.votes{ display:flex; gap:.28rem; }
.votes i{ width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid var(--rule); display:block; flex-shrink:0; }
.votes i.v-for    { background:var(--yellow); border-color:#D9A521; }
.votes i.v-against{ background:var(--navy);   border-color:var(--navy); }
.votes i.v-recused{ border-style:dashed; border-color:var(--muted); }
.votes i.v-absent { border-color:#E4E9EF; }
.votes i.v-silent { border-color:var(--rule); background:repeating-linear-gradient(45deg,transparent,transparent 2px,#E2E7ED 2px,#E2E7ED 4px); }
.votes i.v-none   { border-color:#E4E9EF; background:#F6F8FA; }

.mhint{ font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.06em;
        text-transform:uppercase; color:var(--muted); margin:0 0 .75rem; }

.legend{ display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.legend span{ display:flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--muted); }
.legend i{ width:1rem; height:1rem; border-radius:50%; border:2px solid var(--rule); flex-shrink:0; }


/* Right-hand hero block sits over busy city detail — give it its own panel
   so the copy stays legible without dulling the whole photograph. */
.hero .count {
  background: rgba(14,27,46,.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 1.5rem 1.5rem 1.6rem;
  border-left-width: 5px;
}
.hero .count p { color: #E4EAF2; }
.hero .seat { border-color: #7D91AC; }

/* ---------- Readability: ledes, goal cards, section jumps ---------- */

/* First paragraph of a prose section carries more weight */
.story > p:first-of-type,
.story h2 + p.lede { font-size: 1.1875rem; line-height: 1.6; }

/* Jump links for long pages */
.jump { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 3rem; padding:0; list-style:none; }
.jump a {
  display:inline-block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); border:2px solid var(--rule); padding:.6rem .9rem;
}
.jump a:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.jump a b { color:var(--yellow); -webkit-text-stroke:.8px var(--navy); margin-right:.4rem; }
.jump a:hover b { -webkit-text-stroke:0; }

/* Goal items: bold ask first, detail underneath */
.goals { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
         border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .goals{ grid-template-columns:1fr 1fr; } 
}
.goal { background:var(--white); padding:1.4rem 1.35rem; }
.goal h3 {
  font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
  margin:0 0 .55rem; color:var(--navy); text-transform:none; letter-spacing:-.005em;
  padding-left:.85rem; border-left:4px solid var(--yellow);
}
.goal p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }

/* Pillars breathe more */
.pillar { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.pillar:first-of-type { margin-top:0; }

/* Longer prose: more air between paragraphs, clearer section starts */
.story p { margin-bottom: 1.35em; }
.story h2 {
  margin:3.25rem 0 1.1rem; padding-top:1.5rem; border-top:2px solid var(--rule);
  font-size:1.625rem;
}
.story h2:first-child { margin-top:0; padding-top:0; border-top:0; }

/* Marked explicitly rather than by :nth-child parity — a full-width lead card
   flips the parity and the automatic rule then fires on the wrong item. */
@media (min-width:52rem){ .goal--wide{ grid-column:1 / -1; } 
}

.story h2 { scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem); }

/* ---------- What four years changed: the reorder, as a graphic ---------- */

.shift { background: var(--navy); color: #fff; padding: 3rem 0 3.25rem; position: relative; }
.shift h2 { color:#fff; font-size:clamp(1.75rem,4vw,2.5rem); text-transform:uppercase; margin-bottom:.75rem; }
.shift .lede { color:#CFDAE8; max-width:40rem; }

.swap { display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:2.5rem; align-items:stretch; }
@media (min-width:54rem){ .swap{ grid-template-columns:1fr 4.5rem 1.35fr; gap:0; } 
}

.swap__col { border:2px solid #33496A; padding:1.5rem 1.4rem 1.6rem; }
.swap__col--now { border-color:var(--yellow); background:rgba(245,188,49,.07); }

.swap__year {
  font-family:var(--display); font-weight:800; font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA6C2; margin-bottom:1.1rem; display:block;
}
.swap__col--now .swap__year { color:var(--yellow); }

.swap__item { display:flex; align-items:baseline; gap:.9rem; padding:.7rem 0; border-top:1px solid #2C4265; }
.swap__item:first-of-type { border-top:0; padding-top:0; }
.swap__col--now .swap__item { border-top-color:rgba(245,188,49,.22); }

.swap__rank { font-family:var(--display); font-weight:800; font-size:1.625rem; line-height:1; color:#5E779B; min-width:1.2em; }
.swap__col--now .swap__rank { color:var(--yellow); font-size:2rem; }

.swap__name { font-family:var(--display); font-weight:700; font-size:1.0625rem; letter-spacing:.01em; color:#A9BCD4; }
.swap__col--now .swap__name { color:#fff; font-size:1.1875rem; text-transform:uppercase; letter-spacing:.03em; }
.swap__item.moved .swap__name { text-decoration:line-through; text-decoration-color:#C2453C; text-decoration-thickness:2px; }

.swap__move {
  font-family:var(--display); font-weight:700; font-size:.6875rem; letter-spacing:.07em;
  text-transform:uppercase; margin-left:auto; white-space:nowrap;
}
.swap__move--up   { color:#7BD3A0; }
.swap__move--down { color:#E79A94; }
.swap__move--same { color:#7E93AF; }

.swap__arrow {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.75rem; color:var(--yellow);
}
@media (max-width:53.99rem){ .swap__arrow{ padding:.25rem 0; transform:rotate(90deg); } 
}

.shift__why { margin-top:2.25rem; border-left:5px solid var(--yellow); padding-left:1.4rem; max-width:42rem; }
.shift__why p { color:#DCE6F2; margin-bottom:.9rem; }
.shift__why p:last-child { margin-bottom:0; }
.shift__why strong { color:#fff; }

@media (max-width:34rem){
  .swap__item { flex-wrap:wrap; }
  .swap__col--now .swap__name { font-size:1.0625rem; }
  .swap__move { margin-left:2.3rem; width:100%; margin-top:.3rem; }
  .swap__col { padding:1.25rem 1.1rem 1.35rem; }

}

/* Lead goal: the headline ask within a pillar, given the full width */
@media (min-width:52rem){ .goal--lead{ grid-column:1 / -1; } 
}
.goal--lead { background:#FCFAF3; border-left:6px solid var(--yellow); }
.goal--lead h3 { font-size:1.375rem; border-left:0; padding-left:0; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.01em; }
.goal--lead p { font-size:1.0625rem; max-width:44rem; }
.goal--lead .kicker {
  display:block; margin-top:.9rem; font-family:var(--display); font-weight:800;
  font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
}

/* ---------- Single-issue feature blocks ---------- */

.issue { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.issue__kicker {
  font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5rem;
}
.issue h2 { font-size:clamp(1.5rem,3.5vw,2.125rem); text-transform:uppercase; margin-bottom:1rem; }
.issue__lede { font-size:1.1875rem; line-height:1.55; max-width:38rem; }

.points { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
          border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .points{ grid-template-columns:1fr 1fr; } 
}
.points > div { background:var(--white); padding:1.4rem 1.35rem; }
.points h3 { font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
             margin:0 0 .55rem; color:var(--navy); text-transform:none;
             padding-left:.85rem; border-left:4px solid var(--yellow); }
.points p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }
.points > div.wide { grid-column:1 / -1; }

.issue__close {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:1.0625rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
}

/* Dark variant, used for the RCMP band on the home page */
.issue--dark { background:var(--navy); color:#fff; border-top:0; padding:3rem 0 3.25rem; margin:0; }
.issue--dark h2 { color:#fff; }
.issue--dark .issue__kicker { color:var(--yellow); }
.issue--dark .issue__lede { color:#CFDAE8; }
.issue--dark .points { background:#2B4265; border-color:#2B4265; }
.issue--dark .points > div { background:#1B2F4B; }
.issue--dark .points h3 { color:#fff; }
.issue--dark .points p { color:#C3D2E4; }
.issue--dark .issue__close { color:var(--yellow); }

/* Two navy bands in a row need a seam so they don't read as one block */
.shift + .issue--dark { border-top:4px solid rgba(245,188,49,.4); }

/* ---------- Interludes: full-bleed photo bands between sections ---------- */
/* Parallax comes from a fixed-position layer rather than
   background-attachment:fixed, which janks or fails outright on iOS. */

.interlude { position:relative; overflow:hidden; min-height:20rem;
             display:flex; align-items:center; }
@media (min-width:60rem){ .interlude{ min-height:26rem; } 
}

.interlude__bg {
  position:absolute; inset:-12% 0; z-index:0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.interlude::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(14,27,46,.86) 0%, rgba(14,27,46,.62) 52%, rgba(14,27,46,.30) 100%);
}
.interlude .wrap { position:relative; z-index:2; padding-block:3.5rem; }

.interlude p {
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.375rem); line-height:1.18; letter-spacing:-.01em;
  max-width:26ch; margin:0;
}
.interlude p em { font-style:normal; color:var(--yellow); }
.interlude cite {
  display:block; margin-top:1.1rem; font-family:var(--display); font-style:normal;
  font-weight:700; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:#A9C0DC;
}

/* ---------- Motion: reveal on scroll, count-up ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity:0; transform:translateY(10px); }
  .js [data-reveal].is-in { opacity:1; transform:none;
    transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); }
  .js [data-reveal].is-in[data-delay="1"]{ transition-delay:.08s }
  .js [data-reveal].is-in[data-delay="2"]{ transition-delay:.16s }
  .js [data-reveal].is-in[data-delay="3"]{ transition-delay:.24s }

}

/* ---------- Figure: a photograph used as evidence, with a caption ---------- */
.figure { margin:1.75rem 0 0; }
.figure img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.figure figcaption {
  font-family:var(--display); font-weight:600; font-size:.8125rem; line-height:1.45;
  letter-spacing:.02em; color:var(--muted); margin-top:.7rem; max-width:44rem;
}
.figure figcaption b { color:var(--navy); font-weight:800; }
.issue--dark .figure img { border-color:#2B4265; }
.issue--dark .figure figcaption { color:#A9BCD4; }
.issue--dark .figure figcaption b { color:#fff; }

/* ================= Tightening pass =================
   The pages read as sprawling: too much vertical air between blocks, and a
   long narrow text column leaving half the width empty. Both fixed below. */

.band { padding-block: 2.75rem; }
@media (min-width:60rem){ .band { padding-block: 3.25rem; } 
}
.band h2 { margin-bottom: 1.1rem; }
.band h3 { margin: 1.5rem 0 .6rem; }

.hero { padding-block: 3.25rem 3.5rem; }
@media (min-width:60rem){ .hero { padding-block: 4rem 4.5rem; } 
}
.pagehead { padding-block: 2.5rem 2.75rem; }

.pillar { margin-top: 2.75rem; padding-top: 1.25rem; }
.issue  { margin-top: 3rem;   padding-top: 1.25rem; }
.shift  { padding: 2.5rem 0 2.75rem; }
.issue--dark { padding: 2.5rem 0 2.75rem; }
.swap { margin-top: 1.75rem; }
.shift__why { margin-top: 1.75rem; }
.goals, .points { margin-top: 1.25rem; }
.jump { margin-bottom: 2rem; }
.interlude { min-height: 15rem; }
@media (min-width:60rem){ .interlude { min-height: 19rem; } 
}
.interlude .wrap { padding-block: 2.5rem; }
.btnrow { margin-top: 1.5rem; }
.tri { gap: 1.75rem; }
@media (min-width:48rem){ .tri { gap: 2.25rem; } 
}

/* Prose pages: let the pull quotes occupy the empty right-hand half.
   Shortens the page and stops the column looking marooned. */
.story { max-width: 52rem; }
.story p, .story ul { max-width: 37rem; }
.story h2 { margin: 2.25rem 0 .9rem; padding-top: 1.1rem; font-size: 1.5rem; }
.story p { margin-bottom: 1.1em; }

@media (min-width: 60rem){
  .story blockquote {
    float: right; width: 19rem; margin: .3rem 0 1.5rem 2.5rem;
    font-size: 1.1875rem; line-height: 1.35; border-left-width: 5px;
  }
  .story h2 { clear: both; }
  .story .portrait { float: right; width: 17rem; margin: 0 0 1.5rem 2.5rem; }

}

/* ---------- Open the doors: the citizens-input highlight ---------- */
.doors {
  margin-top: 2rem; border: 2px solid var(--yellow);
  background: rgba(245,188,49,.07); padding: 1.6rem 1.6rem 1.5rem;
}
.doors__kicker {
  display:block; font-family:var(--display); font-weight:700; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:.6rem;
}
.doors h3 {
  font-family:var(--display); font-weight:800; color:#fff; margin:0 0 .8rem;
  font-size:clamp(1.375rem,3vw,1.875rem); line-height:1.15; text-transform:uppercase; letter-spacing:.01em;
}
.doors p { color:#D5E0EE; max-width:42rem; margin-bottom:1rem; }
.doors__punch {
  font-family:var(--display); font-weight:800; color:var(--yellow);
  font-size:clamp(1.125rem,2.4vw,1.4375rem); letter-spacing:.02em;
  text-transform:uppercase; margin:0; line-height:1.2;
}

/* The tightening pass reintroduced a margin on .issue that the dark full-bleed
   variant must not have — it opened a paper-coloured gap between two navy bands. */
.issue--dark { margin: 0; border-top: 4px solid rgba(245,188,49,.4); }

/* Highlighted phrases in long prose — a marker pass, not bold text, so the
   page can be skimmed by picking out the highlights alone. */
.story .hl {
  font-weight: 600;
  background: linear-gradient(to top, rgba(245,188,49,.42) 0 .45em, transparent .45em);
  padding: 0 .08em;
}

/* ---------- Sticky top bar: countdown + masthead travel with the page ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.topbar-spacer { height: 0; }
.masthead { border-bottom-width: 4px; }

/* Anchored headings must clear the sticky bar */
.pillar, .issue, .story h2, .mrow {
  scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem);
}

/* "Kamloops votes" reads as the headline of the bar, not a caption */
.countdown__label {
  font-size: 1.0625rem;
  letter-spacing: .09em;
  line-height: 1.1;
}
@media (max-width: 48rem){ .countdown__label { font-size: .875rem; } 
}
@media (max-width: 30rem){
  .countdown__label { font-size: .8125rem; letter-spacing: .07em; }

}

/* Once the page is scrolled, the bar condenses: it should hold its place
   without holding a third of a phone screen. */
.topbar, .topbar .countdown, .topbar .masthead .wrap { transition: none; }

.topbar.is-stuck .countdown { padding-block: .35rem; }
.topbar.is-stuck .masthead .wrap { padding-block: .6rem; }
.topbar.is-stuck .cd-unit { padding:.2rem .45rem .18rem; }
.topbar.is-stuck .cd-unit b { font-size:1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size:1.2rem; }


@media (max-width: 48rem){
  /* On a phone the clock is the first thing you see and then it gets out of
     the way — the navigation is what needs to stay reachable. */

  .masthead .wrap { padding-block:.7rem; gap:.35rem 1rem; }
  .nav ul { gap:.5rem 1rem; }
  .nav a { font-size:.8125rem; letter-spacing:.03em; }
  .wordmark { font-size:.9375rem; }
  .wordmark span { font-size:.6875rem; }

}
@media (prefers-reduced-motion: reduce){
  .topbar .countdown, .topbar .masthead .wrap { transition:none; }

}

/* ---------- Acknowledging the last four years ---------- */
.owning { background:#F6F3EA; border-top:4px solid var(--navy); }
.owning h2 { margin-bottom:1rem; }
.owning p { max-width:38rem; font-size:1.0625rem; }
.owning .owning__lede { font-size:1.1875rem; }
.owning .owning__turn {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:clamp(1.125rem,2.4vw,1.375rem);
  letter-spacing:.01em; text-transform:uppercase; color:var(--navy); max-width:34rem;
}

/* A soft glow behind the clock so it reads as one object in the sticky bar */
.countdown__clock {
  padding: .25rem .35rem;
  border-radius: 6px;
  background: rgba(0,0,0,.13);
  box-shadow: 0 0 0 1px rgba(245,188,49,.28), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clock {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.topbar.is-stuck .cd-unit span { display:block; }

/* Goals page: the three pillars stay reachable the whole way down */
.jumpbar {
  position: sticky;
  top: var(--topbar-h, 8rem);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 10px 14px -12px rgba(22,39,65,.4);
}
.jumpbar .jump { margin: 0; padding: .65rem 0; }
.jump a { background: var(--white); }
@media (max-width: 48rem){
  .jump { gap:.35rem; padding:.55rem 0; }
  .jump a { font-size:.6875rem; padding:.45rem .55rem; letter-spacing:.03em; }

}

/* One row, scrolls sideways if it must — wrapping to two rows costs too much
   height once the bar is stuck to the top of a phone screen. */
.jump {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jump::-webkit-scrollbar { display: none; }
.jump li { flex: 0 0 auto; }
.jump a.is-here {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.jump a.is-here b { color: var(--yellow); -webkit-text-stroke: 0; }

/* ============ Reorder graphic, bolder ============
   The 2022 column is deliberately reduced to a faded receipt of the past; all
   the weight goes to 2026, and the top row — the change itself — is the one
   solid yellow block in the section. */

.swap { gap: 1rem; align-items: center; }
@media (min-width:54rem){ .swap { grid-template-columns: .9fr 5rem 1.5fr; gap: 0; } 
}

/* --- then --- */
.swap__col {
  border: 2px dashed #3A5075;
  background: rgba(0,0,0,.14);
  padding: 1.3rem 1.25rem 1.4rem;
  opacity: .72;
}
.swap__year { font-size: .6875rem; letter-spacing: .16em; margin-bottom: .9rem; }
.swap__rank { font-size: 2rem; color: #6E86A8; min-width: 1.15em; }
.swap__name { font-size: 1rem; letter-spacing: .02em; }
.swap__item { padding: .6rem 0; }
.swap__item.moved .swap__name {
  text-decoration-thickness: 3px; text-decoration-color: #D4564C; opacity: .8;
}

/* --- arrow --- */
.swap__arrow { font-size: 2.75rem; line-height: 1; opacity: .9; }

/* --- now --- */
.swap__col--now {
  border: 3px solid var(--yellow);
  background: #16283F;
  opacity: 1;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 0 0 0 6px rgba(245,188,49,.10), 0 22px 46px -24px rgba(0,0,0,.75);
}
.swap__col--now .swap__year { font-size: .75rem; letter-spacing: .16em; margin-bottom: .85rem; }
.swap__col--now .swap__rank { font-size: 2.75rem; color: var(--yellow); min-width: 1.05em; }
.swap__col--now .swap__name { font-size: 1.375rem; letter-spacing: .025em; }
.swap__col--now .swap__item { padding: .85rem 0; align-items: center; }

/* The promoted goal is the whole point — give it the one solid block */
.swap__col--now .swap__item:first-of-type {
  background: var(--yellow);
  margin: -.4rem -1.5rem .35rem;
  padding: 1rem 1.5rem;
  border-top: 0;
}
.swap__col--now .swap__item:first-of-type .swap__rank,
.swap__col--now .swap__item:first-of-type .swap__name { color: var(--navy); }
.swap__col--now .swap__item:first-of-type .swap__rank { font-size: 3.25rem; }
.swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.5rem; font-weight: 800; }

/* Movement markers as pills rather than loose text */
.swap__move {
  font-size: .625rem; letter-spacing: .09em;
  padding: .3rem .55rem; border-radius: 999px; border: 1.5px solid currentColor;
}
.swap__col--now .swap__item:first-of-type .swap__move {
  color: #0F5C34; background: rgba(255,255,255,.55); border-color: rgba(15,92,52,.45);
}
.swap__move--down { color: #F0A49D; }
.swap__move--same { color: #8CA3C0; }

@media (max-width:53.99rem){
  .swap__col--now .swap__item:first-of-type { margin-inline: -1.5rem; }
  .swap__col--now .swap__rank { font-size: 2.25rem; }
  .swap__col--now .swap__item:first-of-type .swap__rank { font-size: 2.6rem; }
  .swap__col--now .swap__name { font-size: 1.125rem; }
  .swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.25rem; }

}

@media (max-width:34rem){
  /* The movement markers are pills now — they must not stretch full width */
  .swap__move { width: auto; display: inline-block; align-self: flex-start; }

}

/* ============ Record tally + legend, reworked ============
   The counts now carry the same colour as the outcome badges further down the
   page, so the summary and the rows read as one system. */

.tally {
  display: grid; gap: 1px; grid-template-columns: 1fr 1fr;
  background: var(--rule); border: 0; margin-bottom: 1.5rem;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(22,39,65,.55);
}
@media (min-width:52rem){ .tally { grid-template-columns: repeat(5, 1fr); } 
}

.tally > div { background: var(--white); padding: 1.3rem 1.15rem 1.2rem; position: relative; }
.tally > div::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: currentColor;
}
.tally b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: currentColor;
}
.tally span {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: .55rem;
}

/* The headline number takes its own band across the top; the five outcomes
   sit beneath it and must add up to it. */
.tally .t-total {
  color: var(--navy); background: var(--navy); grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem 1.15rem;
}
.tally .t-total::before { background: var(--yellow); }
.tally .t-total b { color: var(--yellow); font-size: 2.75rem; }
.tally .t-total span { color: #A6BAD2; margin-top: 0; font-size: .8125rem; letter-spacing: .1em; }

.tally .t-carried { color: #0F5C34; }
.tally .t-defeat  { color: #A32A21; }
.tally .t-none    { color: #97620A; }
.tally .t-pending { color: #24547F; }

/* Legend as a labelled key */
.legendbox {
  background: #F2F5F8; border: 1px solid var(--rule); border-radius: 8px;
  padding: .9rem 1.1rem 1rem; margin-bottom: 2.25rem;
}
.legendbox__title {
  display: block; font-family: var(--display); font-weight: 800; font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: .6rem;
}
.legendbox .legend {
  margin: 0; padding: 0; border: 0; gap: .5rem 1.25rem;
}
.legendbox .legend span { font-size: .75rem; color: #44556E; }
.legendbox .legend i { width: .9rem; height: .9rem; border-width: 2px; }

/* ---------- Countdown: election date sits to the right of the clock ---------- */
.countdown__tail {
  display: flex; flex-direction: column; gap: .1rem;
  font-size: inherit; letter-spacing: 0; text-transform: none; opacity: 1;
  text-align: left;
}
.countdown__tail b {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--yellow); line-height: 1.1;
}
.countdown.is-today .countdown__tail b { color: var(--navy); }
.countdown__tail em {
  font-style: normal; font-family: var(--display); font-weight: 600; font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .72; line-height: 1.1;
}
@media (max-width: 48rem){
  .countdown__tail { display: block; }
  .countdown__tail b { font-size: .8125rem; }
  .countdown__tail em { display: none; }

}

/* Nothing is dropped when the bar condenses — only the padding tightens */
.topbar.is-stuck .cd-unit { padding: .28rem .45rem .26rem; }
.topbar.is-stuck .cd-unit b { font-size: 1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size: 1.2rem; }
.topbar.is-stuck .cd-unit span { display: block; font-size: .5rem; }
.topbar.is-stuck .countdown { display: flex; padding-block: .3rem; }
.topbar.is-stuck .countdown__label { font-size: .875rem; }
.topbar.is-stuck .countdown__tail b { font-size: .875rem; }
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { display: flex; padding-block: .28rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }

}

/* ---------- Ballot line in the hero ---------- */
.ballot {
  display: flex; align-items: center; gap: 1rem;
  background: #FBF8F0; border: 3px solid var(--navy);
  padding: .95rem 1.2rem; margin-top: 1.6rem; max-width: 38rem;
  box-shadow: 6px 6px 0 rgba(245,188,49,.9);
}
.ballot__box {
  flex: 0 0 auto; width: 3rem; height: 3rem;
  border: 3px solid var(--navy); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ballot__box svg { width: 2.1rem; height: 2.1rem; }
.ballot__text { line-height: 1.15; }
.ballot__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(.9375rem, 2vw, 1.1875rem); letter-spacing: .005em;
  text-transform: uppercase; color: var(--navy);
}
.ballot__role {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .13em; text-transform: uppercase; color: #5A6B85; margin-top: .3rem;
}
@media (max-width: 30rem){
  .ballot { gap: .8rem; padding: .8rem .9rem; box-shadow: 4px 4px 0 rgba(245,188,49,.9); }
  .ballot__box { width: 2.4rem; height: 2.4rem; }
  .ballot__box svg { width: 1.7rem; height: 1.7rem; }

}

/* Phones: keep every element, but fit the clock and the date on one row so the
   bar is two rows rather than three. */
@media (max-width: 48rem){
  .countdown { gap: .25rem .55rem; padding-block: .45rem; }
  .countdown__label { width: 100%; text-align: center; font-size: .75rem; letter-spacing: .1em; }
  .countdown__clock { padding: .2rem .28rem; gap: .28rem; }
  .cd-unit { min-width: 2.45rem; padding: .26rem .3rem .24rem; }
  .cd-unit b { font-size: .9375rem; }
  .cd-unit span { font-size: .4375rem; letter-spacing: .06em; }
  .cd-unit--days { min-width: 2.6rem; }
  .cd-unit--days b { font-size: 1.05rem; }
  .countdown__tail b { font-size: .75rem; letter-spacing: .03em; }

}
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { padding-block: .3rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }
  .topbar.is-stuck .cd-unit b { font-size: .875rem; }
  .topbar.is-stuck .cd-unit--days b { font-size: 1rem; }

}

.tally .t-other { color: #4B5B73; }   /* matches the shelved/amended badge */

/* "Until polls close" sits beneath the clock rather than beside the date */
.countdown__clockwrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.countdown__cap {
  font-family: var(--display); font-weight: 700; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .72; line-height: 1;
}
.countdown.is-today .countdown__cap { color: var(--navy); opacity: .8; }
.countdown__tail { display: block; }
.countdown__tail em { display: none; }
@media (max-width: 48rem){
  .countdown__cap { font-size: .5rem; letter-spacing: .1em; }
  .countdown__clockwrap { gap: .22rem; }

}

/* The glow should frame the clock and its caption as one object */
.countdown__clock {
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.countdown__clockwrap {
  padding: .3rem .45rem .35rem;
  border-radius: 7px;
  background: rgba(0,0,0,.14);
  box-shadow: 0 0 0 1px rgba(245,188,49,.30), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clockwrap {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.countdown.is-today .countdown__clockwrap { background: rgba(22,39,65,.10); }

/* ---------- Small inline photographs in long prose ---------- */
.snap { margin: 1.25rem 0 1.5rem; }
.snap img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.snap figcaption {
  font-family: var(--display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-top: .5rem;
}
@media (min-width: 60rem){
  .snap {
    float: right; width: 17.5rem; margin: .35rem 0 1.4rem 2.5rem; clear: right;
  }
  /* photographs and pull quotes share the right column — keep them apart */
  .story blockquote { clear: right; }

}

/* ================= Mobile pass =================
   The pages were far too long on a phone and the chrome took too much of the
   screen. Tightened throughout; nothing removed. */

@media (max-width: 48rem){
  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Navigation: one scrolling row instead of two stacked rows */
  .nav { width: 100%; margin-left: 0; }
  .nav ul {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 1.1rem; padding-bottom: .1rem;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }
  .nav a { padding-block: .55rem; font-size: .8125rem; }
  .masthead .wrap { padding-block: .55rem .35rem; gap: .3rem; }

  /* Vertical rhythm */
  .band { padding-block: 2rem; }
  .hero { padding-block: 2.25rem 2.5rem; }
  .pagehead { padding-block: 1.9rem 2rem; }
  .shift, .issue--dark { padding: 2rem 0 2.25rem; }
  .pillar { margin-top: 2rem; padding-top: 1rem; }
  .issue  { margin-top: 2.25rem; padding-top: 1rem; }
  .interlude { min-height: 11.5rem; }
  .interlude .wrap { padding-block: 1.9rem; }
  .interlude p { font-size: 1.3125rem; }
  .band h2, .issue h2, .shift h2 { font-size: 1.5rem; margin-bottom: .8rem; }
  .lede, .issue__lede, .owning__lede { font-size: 1.0625rem; }
  .goal { padding: 1.05rem 1rem; }
  .goal p, .points p { font-size: .9375rem; }
  .goals, .points { margin-top: 1rem; }
  .story h2 { margin: 1.75rem 0 .75rem; padding-top: .9rem; font-size: 1.3125rem; }
  .story p { margin-bottom: 1em; }
  .story blockquote { margin: 1.25rem 0; font-size: 1.125rem; }
  .snap { margin: 1rem 0 1.25rem; }
  .btnrow { margin-top: 1.25rem; gap: .6rem; }
  .btn { padding: .8rem 1.15rem; font-size: .875rem; }
  .doors, .owning { padding-block: 1.25rem; }
  .mrow > summary { padding: .9rem 0; }
  .tally > div { padding: 1rem .9rem; }
  .tally b { font-size: 2rem; }
  .tally .t-total b { font-size: 2.25rem; }

}

/* Tap targets: nothing interactive smaller than a fingertip */
@media (max-width: 48rem){
  .jump a { padding: .6rem .75rem; }
  .legendbox .legend span { padding-block: .2rem; }
  .foot ul a { padding-block: .35rem; display: inline-block; }

}

/* A scrolling row needs to look like one — fade the right edge so it's clear
   there is more nav past the cut. */
@media (max-width: 48rem){
  .nav { position: relative; }
  .nav ul {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
  }
  .jump {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }

}

/* Standalone links that act as buttons need a fingertip-sized target.
   Inline links inside prose are left alone — they aren't tap destinations. */
@media (max-width: 48rem){
  .tri p:last-child a,
  .foot p a {
    display: inline-block; padding-block: .55rem; font-weight: 600;
  }

}

/* Hard caps so the ballot tick can never inflate (Safari flex/SVG sizing) */
.ballot__box { overflow: hidden; flex: 0 0 auto; }
.ballot__box svg {
  display: block;
  width: 2.1rem !important; height: 2.1rem !important;
  max-width: 100%; max-height: 100%;
}
@media (max-width: 30rem){
  .ballot__box svg { width: 1.7rem !important; height: 1.7rem !important; }

}

/* Caption centred explicitly rather than relying on inherited alignment */
.countdown__clockwrap { text-align: center; }
.countdown__cap { width: 100%; text-align: center; text-transform: uppercase; }

/* ================= Mobile menu =================
   Below 48rem the links collapse behind a labelled Menu button and open as a
   panel. Above it, nothing changes — the button is hidden and the row shows. */

.navtoggle { display: none; }

@media (max-width: 48rem){
  .masthead .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-block: .6rem;
  }

  .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; border: 2px solid rgba(255,255,255,.4);
    color: #fff; font-family: var(--display); font-weight: 800;
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem .8rem; cursor: pointer; border-radius: 3px;
    min-height: 44px;
  }
  .navtoggle[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
  .navtoggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

  .navtoggle__bars { width: 1.05rem; height: .8rem; position: relative; display: block; }
  .navtoggle__bars span {
    position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .navtoggle__bars span:nth-child(1){ top: 0; }
  .navtoggle__bars span:nth-child(2){ top: 50%; margin-top: -1px; }
  .navtoggle__bars span:nth-child(3){ bottom: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1){ transform: translateY(.39rem) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2){ opacity: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3){ transform: translateY(-.39rem) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){ .navtoggle__bars span { transition: none; } 
}

  /* The panel */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-deep); border-top: 3px solid var(--yellow);
    box-shadow: 0 18px 30px -18px rgba(0,0,0,.7);
    display: none; width: auto; margin: 0;
  }
  .masthead { position: relative; }
  .nav.is-open { display: block; }

  .nav ul {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
    padding: .35rem 0 .6rem;
  }
  .nav li { border-top: 1px solid rgba(255,255,255,.09); }
  .nav li:first-child { border-top: 0; }
  .nav a {
    display: block; padding: .95rem 1.5rem; font-size: .9375rem;
    letter-spacing: .07em; border-bottom: 0; min-height: 44px;
  }
  .nav a[aria-current="page"] {
    border-bottom: 0; border-left: 4px solid var(--yellow);
    padding-left: calc(1.5rem - 4px); background: rgba(245,188,49,.1);
  }
  .nav a:hover { background: rgba(255,255,255,.06); border-bottom: 0; }

}

/* Belt and braces: if the spacer and the bar ever disagree by a pixel or two,
   the seam should be invisible rather than a band of page background. */
.topbar-spacer { background: var(--navy); }

/* ---------- Tagline band ---------- */









/* The rule between the claim and the clauses */








/* Motion: slower, staged, and weighted toward the answer */


/* ---------- Sense of place: Arthur's photographs ---------- */
/* Hero and page headers carry real photographs of the valley, laid under a
   navy scrim that is heaviest where the type sits so the headline stays
   readable at any size. The illustrated ridgeline (kamloops-hills.svg) is
   kept in /assets as a fallback but is no longer used. */

.hero, .pagehead { position: relative; overflow: hidden; }
.hero .wrap, .pagehead .wrap { position: relative; z-index: 2; }

.hero {
  background-image: url("/assets/images/hero-kamloops.jpg");
  background-size: cover;
  background-position: 58% 70%;   /* beach and river; clean sky stays upper-left */
  padding-bottom: 6rem;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(22,39,65,.93) 0%,
      rgba(22,39,65,.84) 30%,
      rgba(22,39,65,.42) 58%,
      rgba(22,39,65,.14) 100%),
    linear-gradient(to bottom,
      rgba(14,27,46,.30) 0%,
      rgba(14,27,46,.00) 38%,
      rgba(14,27,46,.42) 100%);
}

.pagehead {
  background-image: url("/assets/images/strip-hills.jpg");
  background-size: cover;
  background-position: center 55%;
  padding-bottom: 3.5rem;
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(22,39,65,.93) 0%, rgba(22,39,65,.84) 40%, rgba(22,39,65,.46) 100%),
    linear-gradient(to bottom, rgba(14,27,46,.25), rgba(14,27,46,.42));
}

/* Narrow screens: less horizontal room, so the scrim goes flat and even */
@media (max-width: 48rem) {
  .hero { background-position: 62% 72%; padding-bottom: 4.5rem; }
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgba(22,39,65,.90) 0%,
        rgba(22,39,65,.82) 42%,
        rgba(22,39,65,.46) 78%,
        rgba(22,39,65,.34) 100%);
  }
  .pagehead::before { background: rgba(22,39,65,.84); }

}

/* Smaller file on phones */
@media (max-width: 48rem) {
  .hero { background-image: url("/assets/images/hero-kamloops-sm.jpg"); }

}

/* ---------- The record: compact motion grid ---------- */

.tally { display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:var(--rule); border:1px solid var(--rule); margin-bottom:2.5rem; }
@media (min-width:48rem){ .tally{ grid-template-columns:repeat(5,1fr); } 
}
.tally div{ background:var(--white); padding:1.25rem 1rem; }
.tally b{ display:block; font-family:var(--display); font-weight:800; font-size:2.25rem; line-height:1; color:var(--navy); }
.tally span{ display:block; font-family:var(--display); font-weight:600; font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:.45rem; }
.tally div.hi b{ color:var(--yellow); -webkit-text-stroke:1.2px var(--navy); }

/* One row per motion — <details> so it works on hover, tap and keyboard */
.mrow{ border-bottom:1px solid var(--rule); }
.mrow:first-of-type{ border-top:3px solid var(--navy); }
.mrow > summary{
  display:grid; gap:.45rem 1.25rem; grid-template-columns:1fr; align-items:center;
  padding:1.1rem 0; cursor:pointer; list-style:none; position:relative;
}
.mrow > summary::-webkit-details-marker{ display:none; }
.mrow > summary::marker{ content:""; }
@media (min-width:56rem){
  .mrow > summary{ grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem; padding:1rem 0; }

}

/* Column headings so the badge and the circles are labelled */
.mhead{ display:none; }
@media (min-width:56rem){
  .mhead{
    display:grid; grid-template-columns:7.5rem 1fr 11rem 10rem 1.25rem; gap:1.5rem;
    padding:0 0 .6rem; font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  }

}
.mrow > summary:hover,
.mrow[open] > summary{ background:#F7F9FB; }
.mrow > summary:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.mrow__chev{ font-family:var(--display); font-weight:800; font-size:.75rem; color:var(--muted);
             transition:transform .18s ease; justify-self:end; }
.mrow[open] .mrow__chev{ transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .mrow__chev{ transition:none; } 
}

.mrow__date{ font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.07em;
             text-transform:uppercase; color:var(--muted); }
.mrow__topic{ font-family:var(--body); font-size:1.0625rem; font-weight:600; line-height:1.35; color:var(--navy); }
.mrow__flag{ display:inline-block; font-family:var(--display); font-weight:700; font-size:.625rem;
             letter-spacing:.08em; text-transform:uppercase; color:#8A5A00; background:#FDF4E0;
             border:1px solid #E3C57E; padding:.1rem .35rem; margin-left:.4rem; vertical-align:.1em; }

.mrow__detail{ padding:0 0 1.25rem; max-width:46rem; }
.mrow__detail p{ font-size:.9375rem; color:#38485F; margin:0; max-width:none; }
@media (min-width:56rem){ .mrow__detail{ padding-left:9rem; } 
}

.badge{ font-family:var(--display); font-weight:800; font-size:.6875rem; letter-spacing:.08em;
        text-transform:uppercase; display:inline-block; padding:.4rem .6rem; border:2px solid; white-space:nowrap; }
.badge--carried{ color:#0F5C34; border-color:var(--green); background:#E9F5EE; }
.badge--defeat { color:#8E1F18; border-color:#C2453C; background:#FBEDEC; }
.badge--none   { color:#8A5A00; border-color:#C98F1E; background:#FDF4E0; }
.badge--shelved{ color:#46546B; border-color:#93A1B4; background:#F1F4F7; }
.badge--pending{ color:#1C3E63; border-color:#5E83A8; background:#EDF3F9; }

.votes{ display:flex; gap:.28rem; }
.votes i{ width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid var(--rule); display:block; flex-shrink:0; }
.votes i.v-for    { background:var(--yellow); border-color:#D9A521; }
.votes i.v-against{ background:var(--navy);   border-color:var(--navy); }
.votes i.v-recused{ border-style:dashed; border-color:var(--muted); }
.votes i.v-absent { border-color:#E4E9EF; }
.votes i.v-silent { border-color:var(--rule); background:repeating-linear-gradient(45deg,transparent,transparent 2px,#E2E7ED 2px,#E2E7ED 4px); }
.votes i.v-none   { border-color:#E4E9EF; background:#F6F8FA; }

.mhint{ font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.06em;
        text-transform:uppercase; color:var(--muted); margin:0 0 .75rem; }

.legend{ display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.legend span{ display:flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--muted); }
.legend i{ width:1rem; height:1rem; border-radius:50%; border:2px solid var(--rule); flex-shrink:0; }


/* Right-hand hero block sits over busy city detail — give it its own panel
   so the copy stays legible without dulling the whole photograph. */
.hero .count {
  background: rgba(14,27,46,.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 1.5rem 1.5rem 1.6rem;
  border-left-width: 5px;
}
.hero .count p { color: #E4EAF2; }
.hero .seat { border-color: #7D91AC; }

/* ---------- Readability: ledes, goal cards, section jumps ---------- */

/* First paragraph of a prose section carries more weight */
.story > p:first-of-type,
.story h2 + p.lede { font-size: 1.1875rem; line-height: 1.6; }

/* Jump links for long pages */
.jump { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 3rem; padding:0; list-style:none; }
.jump a {
  display:inline-block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); border:2px solid var(--rule); padding:.6rem .9rem;
}
.jump a:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.jump a b { color:var(--yellow); -webkit-text-stroke:.8px var(--navy); margin-right:.4rem; }
.jump a:hover b { -webkit-text-stroke:0; }

/* Goal items: bold ask first, detail underneath */
.goals { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
         border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .goals{ grid-template-columns:1fr 1fr; } 
}
.goal { background:var(--white); padding:1.4rem 1.35rem; }
.goal h3 {
  font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
  margin:0 0 .55rem; color:var(--navy); text-transform:none; letter-spacing:-.005em;
  padding-left:.85rem; border-left:4px solid var(--yellow);
}
.goal p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }

/* Pillars breathe more */
.pillar { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.pillar:first-of-type { margin-top:0; }

/* Longer prose: more air between paragraphs, clearer section starts */
.story p { margin-bottom: 1.35em; }
.story h2 {
  margin:3.25rem 0 1.1rem; padding-top:1.5rem; border-top:2px solid var(--rule);
  font-size:1.625rem;
}
.story h2:first-child { margin-top:0; padding-top:0; border-top:0; }

/* Marked explicitly rather than by :nth-child parity — a full-width lead card
   flips the parity and the automatic rule then fires on the wrong item. */
@media (min-width:52rem){ .goal--wide{ grid-column:1 / -1; } 
}

.story h2 { scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem); }

/* ---------- What four years changed: the reorder, as a graphic ---------- */

.shift { background: var(--navy); color: #fff; padding: 3rem 0 3.25rem; position: relative; }
.shift h2 { color:#fff; font-size:clamp(1.75rem,4vw,2.5rem); text-transform:uppercase; margin-bottom:.75rem; }
.shift .lede { color:#CFDAE8; max-width:40rem; }

.swap { display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:2.5rem; align-items:stretch; }
@media (min-width:54rem){ .swap{ grid-template-columns:1fr 4.5rem 1.35fr; gap:0; } 
}

.swap__col { border:2px solid #33496A; padding:1.5rem 1.4rem 1.6rem; }
.swap__col--now { border-color:var(--yellow); background:rgba(245,188,49,.07); }

.swap__year {
  font-family:var(--display); font-weight:800; font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA6C2; margin-bottom:1.1rem; display:block;
}
.swap__col--now .swap__year { color:var(--yellow); }

.swap__item { display:flex; align-items:baseline; gap:.9rem; padding:.7rem 0; border-top:1px solid #2C4265; }
.swap__item:first-of-type { border-top:0; padding-top:0; }
.swap__col--now .swap__item { border-top-color:rgba(245,188,49,.22); }

.swap__rank { font-family:var(--display); font-weight:800; font-size:1.625rem; line-height:1; color:#5E779B; min-width:1.2em; }
.swap__col--now .swap__rank { color:var(--yellow); font-size:2rem; }

.swap__name { font-family:var(--display); font-weight:700; font-size:1.0625rem; letter-spacing:.01em; color:#A9BCD4; }
.swap__col--now .swap__name { color:#fff; font-size:1.1875rem; text-transform:uppercase; letter-spacing:.03em; }
.swap__item.moved .swap__name { text-decoration:line-through; text-decoration-color:#C2453C; text-decoration-thickness:2px; }

.swap__move {
  font-family:var(--display); font-weight:700; font-size:.6875rem; letter-spacing:.07em;
  text-transform:uppercase; margin-left:auto; white-space:nowrap;
}
.swap__move--up   { color:#7BD3A0; }
.swap__move--down { color:#E79A94; }
.swap__move--same { color:#7E93AF; }

.swap__arrow {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.75rem; color:var(--yellow);
}
@media (max-width:53.99rem){ .swap__arrow{ padding:.25rem 0; transform:rotate(90deg); } 
}

.shift__why { margin-top:2.25rem; border-left:5px solid var(--yellow); padding-left:1.4rem; max-width:42rem; }
.shift__why p { color:#DCE6F2; margin-bottom:.9rem; }
.shift__why p:last-child { margin-bottom:0; }
.shift__why strong { color:#fff; }

@media (max-width:34rem){
  .swap__item { flex-wrap:wrap; }
  .swap__col--now .swap__name { font-size:1.0625rem; }
  .swap__move { margin-left:2.3rem; width:100%; margin-top:.3rem; }
  .swap__col { padding:1.25rem 1.1rem 1.35rem; }

}

/* Lead goal: the headline ask within a pillar, given the full width */
@media (min-width:52rem){ .goal--lead{ grid-column:1 / -1; } 
}
.goal--lead { background:#FCFAF3; border-left:6px solid var(--yellow); }
.goal--lead h3 { font-size:1.375rem; border-left:0; padding-left:0; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.01em; }
.goal--lead p { font-size:1.0625rem; max-width:44rem; }
.goal--lead .kicker {
  display:block; margin-top:.9rem; font-family:var(--display); font-weight:800;
  font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
}

/* ---------- Single-issue feature blocks ---------- */

.issue { border-top:3px solid var(--navy); padding-top:1.5rem; margin-top:4rem; scroll-margin-top:6rem; }
.issue__kicker {
  font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5rem;
}
.issue h2 { font-size:clamp(1.5rem,3.5vw,2.125rem); text-transform:uppercase; margin-bottom:1rem; }
.issue__lede { font-size:1.1875rem; line-height:1.55; max-width:38rem; }

.points { display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule);
          border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:52rem){ .points{ grid-template-columns:1fr 1fr; } 
}
.points > div { background:var(--white); padding:1.4rem 1.35rem; }
.points h3 { font-family:var(--display); font-weight:800; font-size:1.0625rem; line-height:1.25;
             margin:0 0 .55rem; color:var(--navy); text-transform:none;
             padding-left:.85rem; border-left:4px solid var(--yellow); }
.points p { font-size:.9375rem; line-height:1.6; color:#3A4A61; margin:0; max-width:none; }
.points > div.wide { grid-column:1 / -1; }

.issue__close {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:1.0625rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
}

/* Dark variant, used for the RCMP band on the home page */
.issue--dark { background:var(--navy); color:#fff; border-top:0; padding:3rem 0 3.25rem; margin:0; }
.issue--dark h2 { color:#fff; }
.issue--dark .issue__kicker { color:var(--yellow); }
.issue--dark .issue__lede { color:#CFDAE8; }
.issue--dark .points { background:#2B4265; border-color:#2B4265; }
.issue--dark .points > div { background:#1B2F4B; }
.issue--dark .points h3 { color:#fff; }
.issue--dark .points p { color:#C3D2E4; }
.issue--dark .issue__close { color:var(--yellow); }

/* Two navy bands in a row need a seam so they don't read as one block */
.shift + .issue--dark { border-top:4px solid rgba(245,188,49,.4); }

/* ---------- Interludes: full-bleed photo bands between sections ---------- */
/* Parallax comes from a fixed-position layer rather than
   background-attachment:fixed, which janks or fails outright on iOS. */

.interlude { position:relative; overflow:hidden; min-height:20rem;
             display:flex; align-items:center; }
@media (min-width:60rem){ .interlude{ min-height:26rem; } 
}

.interlude__bg {
  position:absolute; inset:-12% 0; z-index:0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.interlude::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(14,27,46,.86) 0%, rgba(14,27,46,.62) 52%, rgba(14,27,46,.30) 100%);
}
.interlude .wrap { position:relative; z-index:2; padding-block:3.5rem; }

.interlude p {
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.375rem); line-height:1.18; letter-spacing:-.01em;
  max-width:26ch; margin:0;
}
.interlude p em { font-style:normal; color:var(--yellow); }
.interlude cite {
  display:block; margin-top:1.1rem; font-family:var(--display); font-style:normal;
  font-weight:700; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:#A9C0DC;
}

/* ---------- Motion: reveal on scroll, count-up ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity:0; transform:translateY(10px); }
  .js [data-reveal].is-in { opacity:1; transform:none;
    transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); }
  .js [data-reveal].is-in[data-delay="1"]{ transition-delay:.08s }
  .js [data-reveal].is-in[data-delay="2"]{ transition-delay:.16s }
  .js [data-reveal].is-in[data-delay="3"]{ transition-delay:.24s }

}

/* ---------- Figure: a photograph used as evidence, with a caption ---------- */
.figure { margin:1.75rem 0 0; }
.figure img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.figure figcaption {
  font-family:var(--display); font-weight:600; font-size:.8125rem; line-height:1.45;
  letter-spacing:.02em; color:var(--muted); margin-top:.7rem; max-width:44rem;
}
.figure figcaption b { color:var(--navy); font-weight:800; }
.issue--dark .figure img { border-color:#2B4265; }
.issue--dark .figure figcaption { color:#A9BCD4; }
.issue--dark .figure figcaption b { color:#fff; }

/* ================= Tightening pass =================
   The pages read as sprawling: too much vertical air between blocks, and a
   long narrow text column leaving half the width empty. Both fixed below. */

.band { padding-block: 2.75rem; }
@media (min-width:60rem){ .band { padding-block: 3.25rem; } 
}
.band h2 { margin-bottom: 1.1rem; }
.band h3 { margin: 1.5rem 0 .6rem; }

.hero { padding-block: 3.25rem 3.5rem; }
@media (min-width:60rem){ .hero { padding-block: 4rem 4.5rem; } 
}
.pagehead { padding-block: 2.5rem 2.75rem; }

.pillar { margin-top: 2.75rem; padding-top: 1.25rem; }
.issue  { margin-top: 3rem;   padding-top: 1.25rem; }
.shift  { padding: 2.5rem 0 2.75rem; }
.issue--dark { padding: 2.5rem 0 2.75rem; }
.swap { margin-top: 1.75rem; }
.shift__why { margin-top: 1.75rem; }
.goals, .points { margin-top: 1.25rem; }
.jump { margin-bottom: 2rem; }
.interlude { min-height: 15rem; }
@media (min-width:60rem){ .interlude { min-height: 19rem; } 
}
.interlude .wrap { padding-block: 2.5rem; }
.btnrow { margin-top: 1.5rem; }
.tri { gap: 1.75rem; }
@media (min-width:48rem){ .tri { gap: 2.25rem; } 
}

/* Prose pages: let the pull quotes occupy the empty right-hand half.
   Shortens the page and stops the column looking marooned. */
.story { max-width: 52rem; }
.story p, .story ul { max-width: 37rem; }
.story h2 { margin: 2.25rem 0 .9rem; padding-top: 1.1rem; font-size: 1.5rem; }
.story p { margin-bottom: 1.1em; }

@media (min-width: 60rem){
  .story blockquote {
    float: right; width: 19rem; margin: .3rem 0 1.5rem 2.5rem;
    font-size: 1.1875rem; line-height: 1.35; border-left-width: 5px;
  }
  .story h2 { clear: both; }
  .story .portrait { float: right; width: 17rem; margin: 0 0 1.5rem 2.5rem; }

}

/* ---------- Open the doors: the citizens-input highlight ---------- */
.doors {
  margin-top: 2rem; border: 2px solid var(--yellow);
  background: rgba(245,188,49,.07); padding: 1.6rem 1.6rem 1.5rem;
}
.doors__kicker {
  display:block; font-family:var(--display); font-weight:700; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:.6rem;
}
.doors h3 {
  font-family:var(--display); font-weight:800; color:#fff; margin:0 0 .8rem;
  font-size:clamp(1.375rem,3vw,1.875rem); line-height:1.15; text-transform:uppercase; letter-spacing:.01em;
}
.doors p { color:#D5E0EE; max-width:42rem; margin-bottom:1rem; }
.doors__punch {
  font-family:var(--display); font-weight:800; color:var(--yellow);
  font-size:clamp(1.125rem,2.4vw,1.4375rem); letter-spacing:.02em;
  text-transform:uppercase; margin:0; line-height:1.2;
}

/* The tightening pass reintroduced a margin on .issue that the dark full-bleed
   variant must not have — it opened a paper-coloured gap between two navy bands. */
.issue--dark { margin: 0; border-top: 4px solid rgba(245,188,49,.4); }

/* Highlighted phrases in long prose — a marker pass, not bold text, so the
   page can be skimmed by picking out the highlights alone. */
.story .hl {
  font-weight: 600;
  background: linear-gradient(to top, rgba(245,188,49,.42) 0 .45em, transparent .45em);
  padding: 0 .08em;
}

/* ---------- Sticky top bar: countdown + masthead travel with the page ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.topbar-spacer { height: 0; }
.masthead { border-bottom-width: 4px; }

/* Anchored headings must clear the sticky bar */
.pillar, .issue, .story h2, .mrow {
  scroll-margin-top: calc(var(--topbar-h, 8rem) + var(--jumpbar-h, 0px) + 1.25rem);
}

/* "Kamloops votes" reads as the headline of the bar, not a caption */
.countdown__label {
  font-size: 1.0625rem;
  letter-spacing: .09em;
  line-height: 1.1;
}
@media (max-width: 48rem){ .countdown__label { font-size: .875rem; } 
}
@media (max-width: 30rem){
  .countdown__label { font-size: .8125rem; letter-spacing: .07em; }

}

/* Once the page is scrolled, the bar condenses: it should hold its place
   without holding a third of a phone screen. */
.topbar, .topbar .countdown, .topbar .masthead .wrap { transition: none; }

.topbar.is-stuck .countdown { padding-block: .35rem; }
.topbar.is-stuck .masthead .wrap { padding-block: .6rem; }
.topbar.is-stuck .cd-unit { padding:.2rem .45rem .18rem; }
.topbar.is-stuck .cd-unit b { font-size:1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size:1.2rem; }


@media (max-width: 48rem){
  /* On a phone the clock is the first thing you see and then it gets out of
     the way — the navigation is what needs to stay reachable. */

  .masthead .wrap { padding-block:.7rem; gap:.35rem 1rem; }
  .nav ul { gap:.5rem 1rem; }
  .nav a { font-size:.8125rem; letter-spacing:.03em; }
  .wordmark { font-size:.9375rem; }
  .wordmark span { font-size:.6875rem; }

}
@media (prefers-reduced-motion: reduce){
  .topbar .countdown, .topbar .masthead .wrap { transition:none; }

}

/* ---------- Acknowledging the last four years ---------- */
.owning { background:#F6F3EA; border-top:4px solid var(--navy); }
.owning h2 { margin-bottom:1rem; }
.owning p { max-width:38rem; font-size:1.0625rem; }
.owning .owning__lede { font-size:1.1875rem; }
.owning .owning__turn {
  margin-top:1.5rem; border-left:5px solid var(--yellow); padding-left:1.3rem;
  font-family:var(--display); font-weight:800; font-size:clamp(1.125rem,2.4vw,1.375rem);
  letter-spacing:.01em; text-transform:uppercase; color:var(--navy); max-width:34rem;
}

/* A soft glow behind the clock so it reads as one object in the sticky bar */
.countdown__clock {
  padding: .25rem .35rem;
  border-radius: 6px;
  background: rgba(0,0,0,.13);
  box-shadow: 0 0 0 1px rgba(245,188,49,.28), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clock {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.topbar.is-stuck .cd-unit span { display:block; }

/* Goals page: the three pillars stay reachable the whole way down */
.jumpbar {
  position: sticky;
  top: var(--topbar-h, 8rem);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 10px 14px -12px rgba(22,39,65,.4);
}
.jumpbar .jump { margin: 0; padding: .65rem 0; }
.jump a { background: var(--white); }
@media (max-width: 48rem){
  .jump { gap:.35rem; padding:.55rem 0; }
  .jump a { font-size:.6875rem; padding:.45rem .55rem; letter-spacing:.03em; }

}

/* One row, scrolls sideways if it must — wrapping to two rows costs too much
   height once the bar is stuck to the top of a phone screen. */
.jump {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jump::-webkit-scrollbar { display: none; }
.jump li { flex: 0 0 auto; }
.jump a.is-here {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.jump a.is-here b { color: var(--yellow); -webkit-text-stroke: 0; }

/* ============ Reorder graphic, bolder ============
   The 2022 column is deliberately reduced to a faded receipt of the past; all
   the weight goes to 2026, and the top row — the change itself — is the one
   solid yellow block in the section. */

.swap { gap: 1rem; align-items: center; }
@media (min-width:54rem){ .swap { grid-template-columns: .9fr 5rem 1.5fr; gap: 0; } 
}

/* --- then --- */
.swap__col {
  border: 2px dashed #3A5075;
  background: rgba(0,0,0,.14);
  padding: 1.3rem 1.25rem 1.4rem;
  opacity: .72;
}
.swap__year { font-size: .6875rem; letter-spacing: .16em; margin-bottom: .9rem; }
.swap__rank { font-size: 2rem; color: #6E86A8; min-width: 1.15em; }
.swap__name { font-size: 1rem; letter-spacing: .02em; }
.swap__item { padding: .6rem 0; }
.swap__item.moved .swap__name {
  text-decoration-thickness: 3px; text-decoration-color: #D4564C; opacity: .8;
}

/* --- arrow --- */
.swap__arrow { font-size: 2.75rem; line-height: 1; opacity: .9; }

/* --- now --- */
.swap__col--now {
  border: 3px solid var(--yellow);
  background: #16283F;
  opacity: 1;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 0 0 0 6px rgba(245,188,49,.10), 0 22px 46px -24px rgba(0,0,0,.75);
}
.swap__col--now .swap__year { font-size: .75rem; letter-spacing: .16em; margin-bottom: .85rem; }
.swap__col--now .swap__rank { font-size: 2.75rem; color: var(--yellow); min-width: 1.05em; }
.swap__col--now .swap__name { font-size: 1.375rem; letter-spacing: .025em; }
.swap__col--now .swap__item { padding: .85rem 0; align-items: center; }

/* The promoted goal is the whole point — give it the one solid block */
.swap__col--now .swap__item:first-of-type {
  background: var(--yellow);
  margin: -.4rem -1.5rem .35rem;
  padding: 1rem 1.5rem;
  border-top: 0;
}
.swap__col--now .swap__item:first-of-type .swap__rank,
.swap__col--now .swap__item:first-of-type .swap__name { color: var(--navy); }
.swap__col--now .swap__item:first-of-type .swap__rank { font-size: 3.25rem; }
.swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.5rem; font-weight: 800; }

/* Movement markers as pills rather than loose text */
.swap__move {
  font-size: .625rem; letter-spacing: .09em;
  padding: .3rem .55rem; border-radius: 999px; border: 1.5px solid currentColor;
}
.swap__col--now .swap__item:first-of-type .swap__move {
  color: #0F5C34; background: rgba(255,255,255,.55); border-color: rgba(15,92,52,.45);
}
.swap__move--down { color: #F0A49D; }
.swap__move--same { color: #8CA3C0; }

@media (max-width:53.99rem){
  .swap__col--now .swap__item:first-of-type { margin-inline: -1.5rem; }
  .swap__col--now .swap__rank { font-size: 2.25rem; }
  .swap__col--now .swap__item:first-of-type .swap__rank { font-size: 2.6rem; }
  .swap__col--now .swap__name { font-size: 1.125rem; }
  .swap__col--now .swap__item:first-of-type .swap__name { font-size: 1.25rem; }

}

@media (max-width:34rem){
  /* The movement markers are pills now — they must not stretch full width */
  .swap__move { width: auto; display: inline-block; align-self: flex-start; }

}

/* ============ Record tally + legend, reworked ============
   The counts now carry the same colour as the outcome badges further down the
   page, so the summary and the rows read as one system. */

.tally {
  display: grid; gap: 1px; grid-template-columns: 1fr 1fr;
  background: var(--rule); border: 0; margin-bottom: 1.5rem;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(22,39,65,.55);
}
@media (min-width:52rem){ .tally { grid-template-columns: repeat(5, 1fr); } 
}

.tally > div { background: var(--white); padding: 1.3rem 1.15rem 1.2rem; position: relative; }
.tally > div::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: currentColor;
}
.tally b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: currentColor;
}
.tally span {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: .55rem;
}

/* The headline number takes its own band across the top; the five outcomes
   sit beneath it and must add up to it. */
.tally .t-total {
  color: var(--navy); background: var(--navy); grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem 1.15rem;
}
.tally .t-total::before { background: var(--yellow); }
.tally .t-total b { color: var(--yellow); font-size: 2.75rem; }
.tally .t-total span { color: #A6BAD2; margin-top: 0; font-size: .8125rem; letter-spacing: .1em; }

.tally .t-carried { color: #0F5C34; }
.tally .t-defeat  { color: #A32A21; }
.tally .t-none    { color: #97620A; }
.tally .t-pending { color: #24547F; }

/* Legend as a labelled key */
.legendbox {
  background: #F2F5F8; border: 1px solid var(--rule); border-radius: 8px;
  padding: .9rem 1.1rem 1rem; margin-bottom: 2.25rem;
}
.legendbox__title {
  display: block; font-family: var(--display); font-weight: 800; font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: .6rem;
}
.legendbox .legend {
  margin: 0; padding: 0; border: 0; gap: .5rem 1.25rem;
}
.legendbox .legend span { font-size: .75rem; color: #44556E; }
.legendbox .legend i { width: .9rem; height: .9rem; border-width: 2px; }

/* ---------- Countdown: election date sits to the right of the clock ---------- */
.countdown__tail {
  display: flex; flex-direction: column; gap: .1rem;
  font-size: inherit; letter-spacing: 0; text-transform: none; opacity: 1;
  text-align: left;
}
.countdown__tail b {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--yellow); line-height: 1.1;
}
.countdown.is-today .countdown__tail b { color: var(--navy); }
.countdown__tail em {
  font-style: normal; font-family: var(--display); font-weight: 600; font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .72; line-height: 1.1;
}
@media (max-width: 48rem){
  .countdown__tail { display: block; }
  .countdown__tail b { font-size: .8125rem; }
  .countdown__tail em { display: none; }

}

/* Nothing is dropped when the bar condenses — only the padding tightens */
.topbar.is-stuck .cd-unit { padding: .28rem .45rem .26rem; }
.topbar.is-stuck .cd-unit b { font-size: 1.05rem; }
.topbar.is-stuck .cd-unit--days b { font-size: 1.2rem; }
.topbar.is-stuck .cd-unit span { display: block; font-size: .5rem; }
.topbar.is-stuck .countdown { display: flex; padding-block: .3rem; }
.topbar.is-stuck .countdown__label { font-size: .875rem; }
.topbar.is-stuck .countdown__tail b { font-size: .875rem; }
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { display: flex; padding-block: .28rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }

}

/* ---------- Ballot line in the hero ---------- */
.ballot {
  display: flex; align-items: center; gap: 1rem;
  background: #FBF8F0; border: 3px solid var(--navy);
  padding: .95rem 1.2rem; margin-top: 1.6rem; max-width: 38rem;
  box-shadow: 6px 6px 0 rgba(245,188,49,.9);
}
.ballot__box {
  flex: 0 0 auto; width: 3rem; height: 3rem;
  border: 3px solid var(--navy); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ballot__box svg { width: 2.1rem; height: 2.1rem; }
.ballot__text { line-height: 1.15; }
.ballot__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(.9375rem, 2vw, 1.1875rem); letter-spacing: .005em;
  text-transform: uppercase; color: var(--navy);
}
.ballot__role {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .13em; text-transform: uppercase; color: #5A6B85; margin-top: .3rem;
}
@media (max-width: 30rem){
  .ballot { gap: .8rem; padding: .8rem .9rem; box-shadow: 4px 4px 0 rgba(245,188,49,.9); }
  .ballot__box { width: 2.4rem; height: 2.4rem; }
  .ballot__box svg { width: 1.7rem; height: 1.7rem; }

}

/* Phones: keep every element, but fit the clock and the date on one row so the
   bar is two rows rather than three. */
@media (max-width: 48rem){
  .countdown { gap: .25rem .55rem; padding-block: .45rem; }
  .countdown__label { width: 100%; text-align: center; font-size: .75rem; letter-spacing: .1em; }
  .countdown__clock { padding: .2rem .28rem; gap: .28rem; }
  .cd-unit { min-width: 2.45rem; padding: .26rem .3rem .24rem; }
  .cd-unit b { font-size: .9375rem; }
  .cd-unit span { font-size: .4375rem; letter-spacing: .06em; }
  .cd-unit--days { min-width: 2.6rem; }
  .cd-unit--days b { font-size: 1.05rem; }
  .countdown__tail b { font-size: .75rem; letter-spacing: .03em; }

}
@media (max-width: 48rem){
  .topbar.is-stuck .countdown { padding-block: .3rem; }
  .topbar.is-stuck .countdown__label { font-size: .6875rem; }
  .topbar.is-stuck .cd-unit b { font-size: .875rem; }
  .topbar.is-stuck .cd-unit--days b { font-size: 1rem; }

}

.tally .t-other { color: #4B5B73; }   /* matches the shelved/amended badge */

/* "Until polls close" sits beneath the clock rather than beside the date */
.countdown__clockwrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.countdown__cap {
  font-family: var(--display); font-weight: 700; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .72; line-height: 1;
}
.countdown.is-today .countdown__cap { color: var(--navy); opacity: .8; }
.countdown__tail { display: block; }
.countdown__tail em { display: none; }
@media (max-width: 48rem){
  .countdown__cap { font-size: .5rem; letter-spacing: .1em; }
  .countdown__clockwrap { gap: .22rem; }

}

/* The glow should frame the clock and its caption as one object */
.countdown__clock {
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.countdown__clockwrap {
  padding: .3rem .45rem .35rem;
  border-radius: 7px;
  background: rgba(0,0,0,.14);
  box-shadow: 0 0 0 1px rgba(245,188,49,.30), 0 0 18px rgba(245,188,49,.22);
}
.topbar.is-stuck .countdown__clockwrap {
  box-shadow: 0 0 0 1px rgba(245,188,49,.5), 0 0 22px rgba(245,188,49,.38);
}
.countdown.is-today .countdown__clockwrap { background: rgba(22,39,65,.10); }

/* ---------- Small inline photographs in long prose ---------- */
.snap { margin: 1.25rem 0 1.5rem; }
.snap img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.snap figcaption {
  font-family: var(--display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-top: .5rem;
}
@media (min-width: 60rem){
  .snap {
    float: right; width: 17.5rem; margin: .35rem 0 1.4rem 2.5rem; clear: right;
  }
  /* photographs and pull quotes share the right column — keep them apart */
  .story blockquote { clear: right; }

}

/* ================= Mobile pass =================
   The pages were far too long on a phone and the chrome took too much of the
   screen. Tightened throughout; nothing removed. */

@media (max-width: 48rem){
  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Navigation: one scrolling row instead of two stacked rows */
  .nav { width: 100%; margin-left: 0; }
  .nav ul {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 1.1rem; padding-bottom: .1rem;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }
  .nav a { padding-block: .55rem; font-size: .8125rem; }
  .masthead .wrap { padding-block: .55rem .35rem; gap: .3rem; }

  /* Vertical rhythm */
  .band { padding-block: 2rem; }
  .hero { padding-block: 2.25rem 2.5rem; }
  .pagehead { padding-block: 1.9rem 2rem; }
  .shift, .issue--dark { padding: 2rem 0 2.25rem; }
  .pillar { margin-top: 2rem; padding-top: 1rem; }
  .issue  { margin-top: 2.25rem; padding-top: 1rem; }
  .interlude { min-height: 11.5rem; }
  .interlude .wrap { padding-block: 1.9rem; }
  .interlude p { font-size: 1.3125rem; }
  .band h2, .issue h2, .shift h2 { font-size: 1.5rem; margin-bottom: .8rem; }
  .lede, .issue__lede, .owning__lede { font-size: 1.0625rem; }
  .goal { padding: 1.05rem 1rem; }
  .goal p, .points p { font-size: .9375rem; }
  .goals, .points { margin-top: 1rem; }
  .story h2 { margin: 1.75rem 0 .75rem; padding-top: .9rem; font-size: 1.3125rem; }
  .story p { margin-bottom: 1em; }
  .story blockquote { margin: 1.25rem 0; font-size: 1.125rem; }
  .snap { margin: 1rem 0 1.25rem; }
  .btnrow { margin-top: 1.25rem; gap: .6rem; }
  .btn { padding: .8rem 1.15rem; font-size: .875rem; }
  .doors, .owning { padding-block: 1.25rem; }
  .mrow > summary { padding: .9rem 0; }
  .tally > div { padding: 1rem .9rem; }
  .tally b { font-size: 2rem; }
  .tally .t-total b { font-size: 2.25rem; }

}

/* Tap targets: nothing interactive smaller than a fingertip */
@media (max-width: 48rem){
  .jump a { padding: .6rem .75rem; }
  .legendbox .legend span { padding-block: .2rem; }
  .foot ul a { padding-block: .35rem; display: inline-block; }

}

/* A scrolling row needs to look like one — fade the right edge so it's clear
   there is more nav past the cut. */
@media (max-width: 48rem){
  .nav { position: relative; }
  .nav ul {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
  }
  .jump {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }

}

/* Standalone links that act as buttons need a fingertip-sized target.
   Inline links inside prose are left alone — they aren't tap destinations. */
@media (max-width: 48rem){
  .tri p:last-child a,
  .foot p a {
    display: inline-block; padding-block: .55rem; font-weight: 600;
  }

}

/* Hard caps so the ballot tick can never inflate (Safari flex/SVG sizing) */
.ballot__box { overflow: hidden; flex: 0 0 auto; }
.ballot__box svg {
  display: block;
  width: 2.1rem !important; height: 2.1rem !important;
  max-width: 100%; max-height: 100%;
}
@media (max-width: 30rem){
  .ballot__box svg { width: 1.7rem !important; height: 1.7rem !important; }

}

/* Caption centred explicitly rather than relying on inherited alignment */
.countdown__clockwrap { text-align: center; }
.countdown__cap { width: 100%; text-align: center; text-transform: uppercase; }

/* ================= Mobile menu =================
   Below 48rem the links collapse behind a labelled Menu button and open as a
   panel. Above it, nothing changes — the button is hidden and the row shows. */

.navtoggle { display: none; }

@media (max-width: 48rem){
  .masthead .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-block: .6rem;
  }

  .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; border: 2px solid rgba(255,255,255,.4);
    color: #fff; font-family: var(--display); font-weight: 800;
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem .8rem; cursor: pointer; border-radius: 3px;
    min-height: 44px;
  }
  .navtoggle[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
  .navtoggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

  .navtoggle__bars { width: 1.05rem; height: .8rem; position: relative; display: block; }
  .navtoggle__bars span {
    position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .navtoggle__bars span:nth-child(1){ top: 0; }
  .navtoggle__bars span:nth-child(2){ top: 50%; margin-top: -1px; }
  .navtoggle__bars span:nth-child(3){ bottom: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1){ transform: translateY(.39rem) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2){ opacity: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3){ transform: translateY(-.39rem) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){ .navtoggle__bars span { transition: none; } 
}

  /* The panel */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-deep); border-top: 3px solid var(--yellow);
    box-shadow: 0 18px 30px -18px rgba(0,0,0,.7);
    display: none; width: auto; margin: 0;
  }
  .masthead { position: relative; }
  .nav.is-open { display: block; }

  .nav ul {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
    padding: .35rem 0 .6rem;
  }
  .nav li { border-top: 1px solid rgba(255,255,255,.09); }
  .nav li:first-child { border-top: 0; }
  .nav a {
    display: block; padding: .95rem 1.5rem; font-size: .9375rem;
    letter-spacing: .07em; border-bottom: 0; min-height: 44px;
  }
  .nav a[aria-current="page"] {
    border-bottom: 0; border-left: 4px solid var(--yellow);
    padding-left: calc(1.5rem - 4px); background: rgba(245,188,49,.1);
  }
  .nav a:hover { background: rgba(255,255,255,.06); border-bottom: 0; }

}

/* Belt and braces: if the spacer and the bar ever disagree by a pixel or two,
   the seam should be invisible rather than a band of page background. */
.topbar-spacer { background: var(--navy); }

/* ---------- Small photo grid (the RCMP building) ---------- */
.gallery { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--rule); margin-top: 1px; }
@media (min-width: 40rem){ .gallery { grid-template-columns: repeat(3, 1fr); } 
}
.gallery figure { margin: 0; background: var(--white); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.gallery figcaption {
  font-family: var(--display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: .6rem .75rem .7rem;
}
.issue--dark .gallery { background: #2B4265; }
.issue--dark .gallery figure { background: #1B2F4B; }
.issue--dark .gallery figcaption { color: #A9BCD4; }

/* Subtitle on the story page heading */
.pagehead h1 .h1-sub {
  display: block; margin-top: .35rem;
  font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 700;
  letter-spacing: .02em; color: var(--yellow); text-transform: none;
}

/* ---------- An invitation, in Reid's own voice ---------- */
.invite {
  margin-top: 1.5rem; border: 2px solid var(--yellow);
  background: rgba(245,188,49,.07); padding: 1.5rem 1.5rem 1.4rem;
}
.invite__kicker {
  display: block; font-family: var(--display); font-weight: 800; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: .7rem;
}
.invite p { color: #DCE6F2; max-width: 42rem; font-size: 1.0625rem; margin-bottom: .95rem; }
.invite p:last-of-type { margin-bottom: 0; }
.invite strong { color: #fff; }
.invite__punch {
  font-family: var(--display); font-weight: 800; color: var(--yellow);
  font-size: clamp(1.0625rem, 2.3vw, 1.3125rem); letter-spacing: .015em;
  text-transform: uppercase; line-height: 1.2; margin-top: 1.2rem;
}
/* Light-background variant, for the Goals page */
.issue:not(.issue--dark) .invite { background: #FCFAF3; border-color: var(--navy); border-left: 6px solid var(--yellow); }
.issue:not(.issue--dark) .invite__kicker { color: #8A6A12; }
.issue:not(.issue--dark) .invite p { color: #3A4A61; }
.issue:not(.issue--dark) .invite strong { color: var(--navy); }
.issue:not(.issue--dark) .invite__punch { color: var(--navy); }

/* ---------- Ambient video ---------- */
.vid { margin: 1.5rem 0 0; position: relative; }
.vid video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); background: #0E1B2E;
}
.issue--dark .vid video { border-color: #2B4265; }
.vid figcaption {
  font-family: var(--display); font-weight: 600; font-size: .8125rem; line-height: 1.45;
  color: var(--muted); margin-top: .7rem; max-width: 44rem;
}
.vid figcaption b { color: var(--navy); font-weight: 800; }
.issue--dark .vid figcaption { color: #A9BCD4; }
.issue--dark .vid figcaption b { color: #fff; }
/* Only shown when autoplay is suppressed for reduced motion */
.vid video[controls] { cursor: pointer; }

/* Reid's headshot is a small original — cap the display size so it stays sharp */
.story .portrait { max-width: 16.5rem; }
@media (min-width: 60rem){ .story .portrait { width: 16.5rem; } 
}

/* ---------- Byline: Reid's face where Reid is speaking ---------- */

.byline { display: flex; align-items: center; gap: 1.15rem; margin-top: 1.75rem; }
.byline img {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover;
  object-position: center 22%;
  border: 4px solid var(--yellow); flex: 0 0 auto; display: block;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.55);
}
.byline__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.375rem; letter-spacing: .01em; line-height: 1.12; color: var(--navy);
}
.byline__role {
  display: block; font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}

/* Phones: still clearly a portrait, just not overwhelming a narrow column */
@media (max-width: 48rem){
  .byline { gap: .9rem; margin-top: 1.4rem; }
  .byline img { width: 4.25rem; height: 4.25rem; border-width: 3px; }
  .byline__name { font-size: 1.125rem; }
  .byline__role { font-size: .6875rem; letter-spacing: .11em; }

}
@media (max-width: 22rem){
  .byline img { width: 3.5rem; height: 3.5rem; }
  .byline__name { font-size: 1rem; }

}
/* On dark grounds */
.issue--dark .byline__name, .interlude .byline__name, .shift .byline__name { color: #fff; }
.issue--dark .byline__role, .interlude .byline__role, .shift .byline__role { color: #A9BCD4; }

/* The interlude quote is attributed with the face rather than a text cite */
.interlude cite { display: none; }
.interlude .byline { margin-top: 1.6rem; }
.interlude .byline img { width: 6.5rem; height: 6.5rem; }
.interlude .byline__name { font-size: 1.5rem; }
@media (max-width: 48rem){
  .interlude .byline img { width: 4.75rem; height: 4.75rem; }
  .interlude .byline__name { font-size: 1.1875rem; }

}

/* Candidate photo inside the ballot line */
.ballot__face {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--navy); flex: 0 0 auto; display: block;
}
@media (max-width: 30rem){ .ballot__face { width: 2.75rem; height: 2.75rem; border-width: 2px; } 
}

/* Byline on the pale acknowledgment band and at the foot of the story */
.owning .byline { margin-top: 1.6rem; }
.story .byline { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--rule); clear: both; }

/* ---------- Hero portrait ---------- */
.heroface { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.heroface__img {
  /* width and height both set explicitly: relying on aspect-ratio alone left
     the image stretched into an oval in this layout */
  width: 22rem; height: 22rem; max-width: 100%;
  object-fit: cover; object-position: center 22%;
  border-radius: 50%; display: block;
  border: 7px solid var(--yellow);
  box-shadow: 0 26px 52px -24px rgba(0,0,0,.85);
  transition: opacity .3s ease, transform .3s ease;
}
.heroface__name {
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem); line-height: 1.08;
  letter-spacing: -.01em; text-transform: uppercase; margin: 0;
}
.heroface__role {
  font-family: var(--display); font-weight: 700; font-size: .875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--yellow);
  margin: .45rem 0 0;
}

@media (max-width: 60rem){
  .heroface { align-items: flex-start; text-align: left; }

}
@media (max-width: 48rem){
  .heroface { align-items: center; text-align: center; }
  .heroface__img { width: 16rem; height: 16rem; border-width: 6px; }

}
@media (max-width: 22rem){
  .heroface__img { width: 13rem; height: 13rem; border-width: 5px; }

}

/* ---------- Byline: Reid's face where Reid is speaking ---------- */

.byline { display: flex; align-items: center; gap: 1.15rem; margin-top: 1.75rem; }
.byline img {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover;
  object-position: center 22%;
  border: 4px solid var(--yellow); flex: 0 0 auto; display: block;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.55);
}
.byline__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.375rem; letter-spacing: .01em; line-height: 1.12; color: var(--navy);
}
.byline__role {
  display: block; font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}

/* Phones: still clearly a portrait, just not overwhelming a narrow column */
@media (max-width: 48rem){
  .byline { gap: .9rem; margin-top: 1.4rem; }
  .byline img { width: 4.25rem; height: 4.25rem; border-width: 3px; }
  .byline__name { font-size: 1.125rem; }
  .byline__role { font-size: .6875rem; letter-spacing: .11em; }

}
@media (max-width: 22rem){
  .byline img { width: 3.5rem; height: 3.5rem; }
  .byline__name { font-size: 1rem; }

}
/* On dark grounds */
.issue--dark .byline__name, .interlude .byline__name, .shift .byline__name { color: #fff; }
.issue--dark .byline__role, .interlude .byline__role, .shift .byline__role { color: #A9BCD4; }

/* The interlude quote is attributed with the face rather than a text cite */
.interlude cite { display: none; }
.interlude .byline { margin-top: 1.6rem; }
.interlude .byline img { width: 6.5rem; height: 6.5rem; }
.interlude .byline__name { font-size: 1.5rem; }
@media (max-width: 48rem){
  .interlude .byline img { width: 4.75rem; height: 4.75rem; }
  .interlude .byline__name { font-size: 1.1875rem; }

}

/* Candidate photo inside the ballot line */
.ballot__face {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--navy); flex: 0 0 auto; display: block;
}
@media (max-width: 30rem){ .ballot__face { width: 2.75rem; height: 2.75rem; border-width: 2px; } 
}

/* Byline on the pale acknowledgment band and at the foot of the story */
.owning .byline { margin-top: 1.6rem; }
.story .byline { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--rule); clear: both; }

/* ---------- Priority label: this is the loudest kicker on the site ---------- */
.issue__kicker--priority {
  display: inline-block;
  background: var(--yellow); color: var(--navy);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  font-weight: 800; letter-spacing: .1em;
  padding: .45rem .9rem .4rem;
  margin-bottom: .9rem;
  box-shadow: 5px 5px 0 rgba(0,0,0,.28);
}
.issue:not(.issue--dark) .issue__kicker--priority { box-shadow: 5px 5px 0 rgba(22,39,65,.18); }

/* ---------- Portrait migrates into the sticky bar on scroll ---------- */
.masthead__face {
  width: 0; opacity: 0; height: 2.75rem;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  border: 0 solid var(--yellow); flex: 0 0 auto; display: block;
  transform: scale(.55); transform-origin: left center;
  transition: width .3s cubic-bezier(.2,.7,.2,1),
              opacity .25s ease,
              transform .3s cubic-bezier(.2,.7,.2,1),
              margin .3s cubic-bezier(.2,.7,.2,1),
              border-width .3s ease;
  margin-right: 0;
}
.topbar.has-face .masthead__face {
  width: 2.75rem; opacity: 1; transform: none;
  margin-right: .85rem; border-width: 2px;
}
@media (max-width: 48rem){
  .masthead__face { height: 2.4rem; }
  .topbar.has-face .masthead__face { width: 2.4rem; margin-right: .7rem; }

}
@media (prefers-reduced-motion: reduce){
  .masthead__face { transition: none; }

}

/* The hero portrait eases away as the header one arrives */
.heroface__img { transition: opacity .3s ease, transform .3s ease; }
/* Driven only by the body class the script sets — an earlier sibling-selector
   version outranked the reduced-motion override below. */
body.face-moved .heroface__img { opacity: .35; transform: scale(.94); }
@media (prefers-reduced-motion: reduce){
  .heroface__img { transition: none; }
  body.face-moved .heroface__img { opacity: 1 !important; transform: none !important; }

}

/* The dark-variant kicker rule was outranking the priority badge and painting
   its text yellow on a yellow ground. */
.issue--dark .issue__kicker--priority { color: var(--navy); }

/* With the avatar in the masthead, keep wordmark and Menu on one row */
@media (max-width: 48rem){
  .masthead .wrap { flex-wrap: nowrap; }
  .wordmark { flex: 1 1 auto; min-width: 0; }
  .navtoggle { flex: 0 0 auto; }

}

/* Byline sitting above a list or beneath a lede needs its own breathing room */
.band .byline { margin-bottom: 1.75rem; }
.the-record .byline { margin-top: 1.25rem; }

/* The Record header sits on the sunrise over the confluence — frame the light,
   and lighten the scrim a touch so the colour survives. */
/* The Record header: moonrise over the river. Already dark and quiet, so the
   scrim is lighter than elsewhere and weighted left behind the type. */
.pagehead--record { background-position: center 46%; }
.pagehead--record::before {
  background:
    linear-gradient(100deg, rgba(25,41,66,.88) 0%, rgba(25,41,66,.70) 45%, rgba(25,41,66,.26) 100%),
    linear-gradient(to bottom, rgba(14,27,46,.10), rgba(14,27,46,.30));
}
@media (max-width: 48rem){
  .pagehead--record::before { background: rgba(25,41,66,.76); }
}

/* ---------- Portrait in a page header ---------- */
.pagehead--face .wrap {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.pagehead__face {
  width: 11rem; height: 11rem; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  border: 5px solid var(--yellow);
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.85);
  display: block;
}
.pagehead--face .pagehead__text { flex: 1 1 20rem; min-width: 0; }
@media (max-width: 48rem){
  .pagehead--face .wrap { gap: 1.25rem; }
  .pagehead__face { width: 7.5rem; height: 7.5rem; border-width: 4px; }

}
@media (max-width: 22rem){
  .pagehead__face { width: 6rem; height: 6rem; }

}

/* ---------- The campaign line, always present in the bar ---------- */
.masthead__tag {
  display: inline-block; flex: 0 0 auto;
  border: 2px solid var(--yellow); background: rgba(245,188,49,.12);
  color: var(--yellow);
  font-family: var(--display); font-weight: 800;
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .75rem .35rem; margin-left: 1.25rem;
  white-space: nowrap; line-height: 1;
}
@media (max-width: 60rem){ .masthead__tag { margin-left: .9rem; font-size: .75rem; letter-spacing: .12em; } 
}

/* On phones it sits under the wordmark rather than competing for the row */
@media (max-width: 48rem){
  .masthead .wrap { flex-wrap: wrap; }
  .wordmark { flex: 1 1 auto; }
  .navtoggle { order: 3; }
  .masthead__tag {
    order: 4; margin: .45rem 0 0 0; width: 100%; text-align: center;
    font-size: .6875rem; letter-spacing: .14em; padding: .35rem .5rem .3rem;
  }

}

/* The tag needs room on the masthead row — tighten the nav so nothing wraps */
@media (min-width: 48.0625rem){
  .masthead .wrap { flex-wrap: nowrap; }
  .nav ul { gap: 1rem; }
  .nav a { font-size: .8125rem; letter-spacing: .035em; }
  .masthead__tag { font-size: .75rem; letter-spacing: .12em; margin-left: 1rem; padding: .35rem .6rem .3rem; }
  .wordmark { flex: 0 0 auto; }
  .nav { margin-left: auto; flex: 0 1 auto; }

}
@media (min-width: 64rem){
  .nav ul { gap: 1.25rem; }
  .nav a { font-size: .875rem; letter-spacing: .045em; }
  .masthead__tag { font-size: .8125rem; letter-spacing: .15em; margin-left: 1.5rem; padding: .4rem .75rem .35rem; }

}

/* The tag lives under the wordmark: six nav items plus a chip will not share
   one row at any realistic width. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; flex: 0 0 auto; }
.masthead__tag { margin-left: 0 !important; }

@media (min-width: 48.0625rem){
  .masthead .wrap { flex-wrap: nowrap; align-items: center; }
  .masthead__tag { font-size: .75rem; letter-spacing: .14em; padding: .32rem .6rem .28rem; }

}
@media (max-width: 48rem){
  .brand { flex: 1 1 auto; min-width: 0; gap: .35rem; }
  .masthead .wrap { flex-wrap: nowrap; }
  .masthead__tag {
    order: 0; width: auto; margin: 0 !important; text-align: left;
    font-size: .625rem; letter-spacing: .12em; padding: .3rem .5rem .25rem;
  }
  .navtoggle { order: 0; }

}

/* 780px was the one width where six nav items still wrapped */
@media (min-width: 48.0625rem) and (max-width: 52rem){
  .nav ul { gap: .7rem; }
  .nav a { font-size: .75rem; letter-spacing: .02em; }
  .masthead__tag { font-size: .6875rem; letter-spacing: .1em; }

}

/* Keep the claim and the clauses on one row above 60rem */


/* Reduced motion: everything in the tagline band is simply drawn, not animated */


/* ---------- Card grids: borders on the cards, not gaps over a coloured
   background. The old approach painted the container and let 1px gaps show
   through, so any odd number of cards left a grey hole in the last row.
   Borders on the cards themselves mean the count never matters. ---------- */
.goals, .points {
  background: transparent;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.goals > *, .points > * {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.issue--dark .points { border-top-color: #2B4265; border-left-color: #2B4265; }
.issue--dark .points > * { border-right-color: #2B4265; border-bottom-color: #2B4265; }

/* ---------- Goals section nav ----------
   Desktop keeps the row of chips. On phones a horizontal scroll strip is easy
   to miss entirely, so it becomes a labelled dropdown that also reports which
   section you are currently reading. */

.jumpbtn { display: none; }

@media (max-width: 48rem){
  .jumpbar { padding: .5rem 0; }
  .jumpbtn {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; min-height: 46px;
    background: var(--white); color: var(--navy);
    border: 2px solid var(--navy); border-radius: 3px;
    font-family: var(--display); font-weight: 800; font-size: .8125rem;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .6rem .85rem; cursor: pointer; text-align: left;
  }
  .jumpbtn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
  .jumpbtn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jumpbtn__chev { transition: transform .18s ease; flex: 0 0 auto; color: var(--muted); }
  .jumpbtn[aria-expanded="true"] { background: var(--navy); color: #fff; }
  .jumpbtn[aria-expanded="true"] .jumpbtn__chev { transform: rotate(180deg); color: var(--yellow); }
  @media (prefers-reduced-motion: reduce){ .jumpbtn__chev { transition: none; } 
}

  .jumpbar .jump {
    display: none; flex-direction: column; gap: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
    margin: .5rem 0 0; padding: 0;
    border: 2px solid var(--navy);
  }
  .jumpbar .jump.is-open { display: flex; }
  .jumpbar .jump li { border-top: 1px solid var(--rule); }
  .jumpbar .jump li:first-child { border-top: 0; }
  .jumpbar .jump a {
    display: block; width: 100%; min-height: 46px;
    padding: .8rem 1rem; border: 0; font-size: .8125rem; letter-spacing: .06em;
    background: var(--white);
  }
  .jumpbar .jump a.is-here {
    background: var(--navy); color: #fff; border: 0;
    box-shadow: inset 4px 0 0 var(--yellow);
  }

}

/* "You" is the subject of the whole band — set it apart in every clause */


/* ==========================================================================
   TAGLINE BAND — defined once, at the end of the file.
   ========================================================================== */

.tagline { background: var(--yellow); color: var(--navy); padding: 3rem 0 3.25rem; overflow: hidden; }
.tagline__row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }

.tagline__line {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 6.6vw, 4.75rem);
  line-height: .93; letter-spacing: -.025em; text-transform: uppercase;
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .26em;
  flex: 0 0 auto;
}
.tagline__w { display: inline-block; position: relative; }
.tagline__w--key::after {
  content: ""; position: absolute; left: 0; bottom: -.1em; height: .085em;
  width: 100%; background: var(--navy);
  transform: scaleX(0); transform-origin: left center;
}

.tagline__bar {
  width: 4px; align-self: stretch; min-height: 9rem;
  background: var(--navy); margin: 0 2rem; flex: 0 0 auto;
  transform: scaleY(0); transform-origin: top center;
}

/* Statements: display face, full-strength colour, one line each */
.tagline__sub { margin: 0; flex: 1 1 26rem; min-width: 0; }
.tagline__sub p {
  margin: 0 0 .85rem; max-width: none;
  font-family: var(--display); font-weight: 600; text-transform: none;
  font-size: clamp(1.0625rem, 1.95vw, 1.5rem); line-height: 1.25;
  color: var(--navy); letter-spacing: .005em;
}
.tagline__sub p:last-of-type { margin-bottom: 0; }

/* The two words that carry each line */
.tagline__sub b {
  position: relative; display: inline-block;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; font-size: .94em; color: var(--green-ink);
  padding-bottom: .16em;
}
.tagline__sub b i {
  position: absolute; left: 0; right: 0; bottom: 0; height: .11em;
  background: var(--green-ink); display: block;
  transform: scaleX(0); transform-origin: left center;
}

.tagline__sig {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(22,39,65,.35);
}
.tagline__signame {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; font-size: clamp(.875rem, 2vw, 1.0625rem); color: var(--navy);
}
.tagline__sigrole {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .17em; font-size: .6875rem; color: rgba(22,39,65,.6);
}

@media (max-width: 62rem){
  .tagline__row { flex-direction: column; align-items: flex-start; }
  .tagline__bar {
    width: 100%; height: 4px; min-height: 0; align-self: auto;
    margin: 1.4rem 0; transform: scaleX(0); transform-origin: left center;
  }
  .tagline__sub { flex: 1 1 auto; }
  .tagline__line { font-size: clamp(2.5rem, 10vw, 4rem); }
}
@media (min-width: 62rem){
  .tagline__row { flex-wrap: nowrap; }
  .tagline__sub p { white-space: nowrap; }
}
@media (min-width: 62rem) and (max-width: 80rem){
  .tagline__line { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
  .tagline__bar { margin: 0 1.5rem; }
  .tagline__sub p { font-size: clamp(1rem, 1.7vw, 1.25rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .tagline .tagline__w { opacity: 0; transform: translateY(.35em); }
  .js .tagline.is-in .tagline__w {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .7s cubic-bezier(.22,.7,.25,1);
  }
  .js .tagline.is-in .tagline__w:nth-child(2){ transition-delay: .16s; }
  .js .tagline.is-in .tagline__w:nth-child(3){ transition-delay: .32s; }
  .js .tagline.is-in .tagline__w--key::after {
    transform: scaleX(1); transition: transform .8s cubic-bezier(.22,.7,.25,1) .85s;
  }
  .js .tagline.is-in .tagline__bar {
    transform: none; transition: transform .7s cubic-bezier(.22,.7,.25,1) 1.35s;
  }
  .js .tagline .tagline__sub p,
  .js .tagline .tagline__sig { opacity: 0; transform: translateY(.3em); }
  .js .tagline.is-in .tagline__sub p,
  .js .tagline.is-in .tagline__sig {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .6s cubic-bezier(.22,.7,.25,1);
  }
  .js .tagline.is-in .tagline__sub p:nth-of-type(1){ transition-delay: 1.8s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(2){ transition-delay: 2.25s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(3){ transition-delay: 2.7s; }
  .js .tagline.is-in .tagline__sig { transition-delay: 3.35s; }

  /* both marked words underline, the second a beat after the first */
  .js .tagline.is-in .tagline__sub b i { transform: scaleX(1); }
  .js .tagline.is-in .tagline__sub p:nth-of-type(1) b:nth-of-type(1) i { transition: transform .45s cubic-bezier(.22,.7,.25,1) 2.05s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(1) b:nth-of-type(2) i { transition: transform .45s cubic-bezier(.22,.7,.25,1) 2.3s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(2) b:nth-of-type(1) i { transition: transform .45s cubic-bezier(.22,.7,.25,1) 2.5s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(2) b:nth-of-type(2) i { transition: transform .45s cubic-bezier(.22,.7,.25,1) 2.75s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(3) b:nth-of-type(1) i { transition: transform .45s cubic-bezier(.22,.7,.25,1) 2.95s; }
  .js .tagline.is-in .tagline__sub p:nth-of-type(3) b:nth-of-type(2) i { transition: transform .5s cubic-bezier(.22,.7,.25,1) 3.2s; }
}
@media (prefers-reduced-motion: reduce){
  .tagline__bar { transform: none !important; }
  .tagline__w--key::after, .tagline__sub b i { transform: scaleX(1) !important; }
  .tagline__w, .tagline__sub p, .tagline__sig { opacity: 1 !important; transform: none !important; }
}

/* ---------- Prose pages: give the photographs the width that is there ----------
   The story column was capped at 52rem inside a 68rem container, so a quarter
   of the page was empty and every floated image was squeezed into 17.5rem. */
@media (min-width: 60rem){
  .story { max-width: none; }
  .story p, .story ul { max-width: 37rem; }

  .story .snap { width: 23rem; margin: .35rem 0 1.6rem 2.75rem; }
  .story blockquote { width: 23rem; margin: .3rem 0 1.6rem 2.75rem; }
  .story .portrait { width: 20rem; margin: 0 0 1.6rem 2.75rem; }

  /* The evidence photograph runs the full width of the page */
  .story .figure { margin-left: 0; margin-right: 0; }
  .story .figure img { width: 100%; }
  .story .figure figcaption { max-width: 52rem; }
}
@media (min-width: 75rem){
  .story .snap, .story blockquote { width: 25rem; }
}

/* Goals and record pages: the same widening for their photo grids */
@media (min-width: 60rem){
  .gallery img { aspect-ratio: 3/2; }
}

/* ---------- Tagline band: tighter, and the signature is written ---------- */

.tagline { padding: 2.25rem 0 2.5rem; }
.tagline__line { width: min-content; }          /* hug the wrapped words — no trailing gap */
.tagline__bar { margin: 0 1.75rem; min-height: 7.5rem; }
.tagline__sub p { margin-bottom: .55rem; }
.tagline__sig { margin-top: 1.1rem; padding-top: .8rem; align-items: center; }

/* His name, in his hand */
.tagline__signame {
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--navy);
  clip-path: inset(0 100% 0 0);
}
.tagline__sigrole { transform: translateY(-.1em); }

@media (min-width: 62rem){
  .tagline__bar { margin: 0 1.5rem; }
}
@media (max-width: 62rem){
  .tagline { padding: 2rem 0 2.25rem; }
  .tagline__bar { margin: 1.1rem 0; }
}

@media (prefers-reduced-motion: no-preference){
  /* the name draws left to right, as if being written */
  .js .tagline.is-in .tagline__signame {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.15s cubic-bezier(.35,.15,.25,1) 3.15s;
  }
}
@media (prefers-reduced-motion: reduce){
  .tagline__signame { clip-path: none !important; }
}

/* The stacked divider must stay a hairline — the desktop min-height was
   leaking into the mobile rule and rendering it as a solid navy block. */
@media (max-width: 62rem){
  .tagline__bar {
    min-height: 0; height: 4px; width: 100%;
    align-self: auto; margin: 1.1rem 0;
  }
}
@media (max-width: 22rem){
  .tagline__sub p { font-size: .9375rem; }
  .tagline__signame { font-size: 1.5rem; }
}

/* ---------- Poster palette alignment ----------
   On the 2022 poster green appears only as the checkmark — never as type.
   Green on gold measures 3.23:1, which fails for body text, so the marked
   words return to navy and green is kept for the rules and the tick. */
.tagline__sub b { color: var(--navy); }
.tagline__sub b i { background: var(--green); height: .13em; }

/* The ballot tick is the poster's device — green, in a white box */
.ballot__box { background: #FFFFFF; border-color: var(--navy); }
.ballot__box svg { stroke: var(--green) !important; }

/* ---------- Contact: call card, choice field, form note ---------- */
.callcard {
  background: var(--navy); color: #fff; padding: 1.5rem 1.6rem 1.6rem;
  border-left: 6px solid var(--yellow);
}
.callcard__kicker {
  display: block; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: .5rem;
}
.callcard__lead {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.125rem, 3vw, 1.5rem); margin: 0 0 .5rem; color: #fff; letter-spacing: .01em;
}
.callcard__num {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.75rem, 5.5vw, 2.5rem); letter-spacing: .01em;
  color: var(--yellow); text-decoration: none; line-height: 1.05;
}
.callcard__num:hover { color: #fff; }
.callcard__note {
  margin: .6rem 0 0; color: #A9BCD4; font-size: .9375rem;
}

.field.choice { border: 0; padding: 0; margin: 0 0 1.25rem; }
.field.choice legend {
  padding: 0; font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .5rem; color: var(--navy);
}
.field.choice label {
  display: flex; align-items: center; gap: .6rem; font-family: var(--body);
  font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400;
  margin-bottom: .45rem; min-height: 30px; cursor: pointer;
}
.field.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--green); flex: 0 0 auto; }

.formnote {
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
  border-left: 3px solid var(--rule); padding-left: .9rem; margin: 0 0 1.25rem; max-width: 30rem;
}

/* ---------- Home page: talk to Reid banner ---------- */
.talk { background: var(--navy); color: #fff; padding: 2rem 0 2.25rem; border-top: 4px solid var(--yellow); }
.talk .wrap { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.talk__text { flex: 1 1 22rem; min-width: 0; }
.talk__kicker {
  display: block; font-family: var(--display); font-weight: 800; font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: .55rem;
}
.talk__head {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.2vw, 2.375rem); line-height: 1.05; margin: 0 0 .6rem; color: #fff;
}
.talk__text p { color: #CFDAE8; margin: 0; max-width: 34rem; }
.talk__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.talk__num {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4.5vw, 2.125rem);
  color: var(--yellow); text-decoration: none; letter-spacing: .01em; line-height: 1;
}
.talk__num:hover { color: #fff; }
@media (max-width: 48rem){ .talk__actions { width: 100%; } }

/* The sender is shown their own address — the same value that is recorded */
.formnote p { margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); max-width: none; }
.formnote p:last-child { margin-bottom: 0; }
.formnote b { color: var(--navy); }
.formnote__ip {
  font-family: var(--display); font-weight: 700; font-size: .75rem !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy) !important;
  padding-top: .4rem; border-top: 1px solid var(--rule);
}
.formnote__ip span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0; text-transform: none; color: var(--green);
}

.mnote {
  font-size: .9375rem; line-height: 1.55; color: var(--muted);
  border-left: 3px solid var(--yellow); padding-left: 1rem;
  margin: 0 0 1.5rem; max-width: 46rem;
}

/* Heading over the record tally — says whose motions these are */
.tallyhead {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem); letter-spacing: .02em;
  color: var(--navy); margin: 0 0 1rem;
}

/* The tally used the same gap-over-coloured-background trick as the goal grids,
   so five outcome cells in a two-column layout left a grey hole. Borders on the
   cells instead — the count no longer matters. */
.tally {
  background: transparent;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.tally > div {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tally .t-total { border-color: var(--navy); }

/* In favour reads green — same colour as "carried" in the tally, and the
   poster's checkmark. Yellow was ambiguous next to the yellow page furniture. */


/* ---------- Goals section nav, rebuilt ----------
   Seven boxed chips overflowed the page and read as a row of buttons. It is
   now a single compact bar: a label, then plain links divided by hairlines. */
@media (min-width: 48.0625rem){
  .jumpbar .wrap {
    display: flex; align-items: baseline; gap: .9rem;
  }
  .jumplabel {
    flex: 0 0 auto;
    font-family: var(--display); font-weight: 800; font-size: .625rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .jumpbar { padding: .55rem 0; }
  .jumpbar .jump {
    flex: 1 1 auto; display: flex; flex-wrap: wrap;
    gap: .1rem .95rem; margin: 0; padding: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  .jumpbar .jump li { position: relative; padding-right: .95rem; }
  .jumpbar .jump li::after {
    content: ""; position: absolute; right: 0; top: .22em; bottom: .22em;
    width: 1px; background: var(--rule);
  }
  .jumpbar .jump li:last-child { padding-right: 0; }
  .jumpbar .jump li:last-child::after { display: none; }
  .jumpbar .jump a {
    display: inline-block; border: 0; background: none; border-radius: 0;
    padding: .25rem 0; font-size: .8125rem; letter-spacing: .03em;
    font-weight: 700; color: var(--muted); white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .jumpbar .jump a:hover { color: var(--navy); border-bottom-color: var(--rule); }
  .jumpbar .jump a.is-here {
    background: none; color: var(--navy); border-bottom-color: var(--yellow);
    box-shadow: none;
  }
  .jumpbar .jump a b { color: var(--muted); }
  .jumpbar .jump a.is-here b { color: var(--navy); }
}
@media (max-width: 48rem){ .jumplabel { display: none; } }

/* Tighter still so all seven hold one row down to ~820px */
@media (min-width: 48.0625rem){
  .jumpbar .jump { gap: .1rem .75rem; }
  .jumpbar .jump li { padding-right: .75rem; }
  .jumpbar .jump a { font-size: .78rem; letter-spacing: .02em; }
  .jumpbar .wrap { gap: .75rem; }
}
@media (min-width: 48.0625rem) and (max-width: 62rem){
  .jumpbar .jump { gap: .1rem .55rem; }
  .jumpbar .jump li { padding-right: .55rem; }
  .jumpbar .jump a { font-size: .72rem; }
  .jumplabel { display: none; }
}

/* ---------- Goals section nav: an actual menu ----------
   Dark bar under the masthead so it reads as a second level of navigation,
   with the three ranked pillars grouped apart from the four issue sections. */
.jumpbar {
  background: var(--navy-deep);
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 10px 16px -14px rgba(0,0,0,.55);
}

@media (min-width: 48.0625rem){
  .jumpbar { padding: 0; }
  .jumpbar .wrap { align-items: stretch; gap: 0; }

  .jumplabel {
    display: flex; align-items: center; flex: 0 0 auto;
    padding-right: 1.1rem; margin-right: 1.1rem;
    border-right: 1px solid rgba(255,255,255,.18);
    font-size: .625rem; letter-spacing: .18em; color: #8FA3BD;
  }

  .jumpbar .jump { gap: 0; align-items: stretch; }
  .jumpbar .jump li { padding: 0; display: flex; }
  .jumpbar .jump li::after { display: none; }

  .jumpbar .jump a {
    display: flex; align-items: center; gap: .4rem;
    padding: .95rem .9rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    color: #C6D3E4; border: 0; border-bottom: 3px solid transparent;
    background: none; white-space: nowrap;
  }
  .jumpbar .jump a b { color: var(--yellow); font-weight: 800; }
  .jumpbar .jump a:hover { color: #fff; background: rgba(255,255,255,.06); border-bottom-color: rgba(245,188,49,.45); }
  .jumpbar .jump a.is-here {
    color: var(--navy); background: var(--yellow); border-bottom-color: var(--yellow);
  }
  .jumpbar .jump a.is-here b { color: var(--navy); }

  /* the three ranked pillars are a group; the four issues are not ranked */
  .jumpbar .jump li.jump-endgroup {
    margin-right: .9rem; padding-right: .9rem;
    border-right: 1px solid rgba(255,255,255,.18);
  }
}
@media (min-width: 48.0625rem) and (max-width: 62rem){
  .jumpbar .jump a { padding: .85rem .6rem; font-size: .7rem; letter-spacing: .03em; }
  .jumplabel { display: none; }
  .jumpbar .jump li.jump-endgroup { margin-right: .6rem; padding-right: .6rem; }
}

/* Mobile: the dropdown button matches the dark bar */
@media (max-width: 48rem){
  .jumpbar { padding: .5rem 0; }
  .jumpbtn {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
  }
  .jumpbtn__chev { color: var(--yellow); }
  .jumpbtn[aria-expanded="true"] { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
  .jumpbtn[aria-expanded="true"] .jumpbtn__chev { color: var(--navy); }
  .jumpbar .jump { border-color: rgba(255,255,255,.35); }
}

/* Fit all seven on one row across desktop widths */
@media (min-width: 48.0625rem){
  .jumpbar .jump a { padding: .9rem .62rem; font-size: .72rem; letter-spacing: .035em; gap: .3rem; }
  .jumplabel { padding-right: .8rem; margin-right: .8rem; }
  .jumpbar .jump li.jump-endgroup { margin-right: .6rem; padding-right: .6rem; }
}


/* One scale for the whole desktop range — the container is capped at 68rem, so
   a wider viewport gives the menu no extra room and a larger size only wraps it. */
@media (min-width: 48.0625rem){
  .jumpbar .jump a { padding: .85rem .58rem; font-size: .72rem; letter-spacing: .03em; }
  .jumplabel { padding-right: .75rem; margin-right: .75rem; font-size: .5625rem; letter-spacing: .14em; }
  .jumpbar .jump li.jump-endgroup { margin-right: .55rem; padding-right: .55rem; }
}
@media (min-width: 48.0625rem) and (max-width: 60rem){
  .jumplabel { display: none; }
  .jumpbar .jump a { padding: .8rem .45rem; font-size: .66rem; letter-spacing: .02em; }
  .jumpbar .jump li.jump-endgroup { margin-right: .4rem; padding-right: .4rem; }
}

/* 790px is the last sliver before the dropdown takes over — let it scroll
   sideways there rather than stack, with a fade to show there is more. */
@media (min-width: 48.0625rem) and (max-width: 51rem){
  .jumpbar .jump {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  .jumpbar .jump::-webkit-scrollbar { display: none; }
  .jumpbar .jump li { flex: 0 0 auto; }
}

/* In favour: a brighter green so the dots carry across the row at a glance */
.votes i.v-for { background: #16C34A; border-color: #0E9B3A; }

/* Rows open on click only — the chevron is the affordance */
.mrow > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce){ .mrow__chev { transition: none; } }

/* The click affordance, spelled out */
.mhint {
  display: flex; align-items: center; gap: .5rem;
  background: #F2F5F8; border-left: 3px solid var(--yellow);
  padding: .6rem .85rem; margin: 0 0 1.1rem; max-width: 44rem;
  font-size: .8125rem; letter-spacing: .02em; text-transform: none;
  font-weight: 600; color: #44556E;
}
.mhint__chev { color: var(--navy); font-size: .875rem; line-height: 1; }
.mhead__open { font-size: .625rem; color: var(--muted); }

@media (max-width: 48rem){
  .mhint__desktop { display: none; }
}
@media (min-width: 48.0625rem){
  .mhint__mobile { display: none; }
}

/* ---------- Motion rows: obvious, and obviously clickable ---------- */
.mrow > summary {
  cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.mrow > summary:hover,
.mrow > summary:focus-visible { background: #E4E9F0; }
.mrow > summary:hover .mrow__topic,
.mrow > summary:focus-visible .mrow__topic { color: var(--navy); }
.mrow[open] > summary { background: #EDF1F6; }

/* Down arrow: points down to open, flips up when the row is open */
.mrow__chev {
  color: var(--muted);
  transition: transform .18s ease, color .14s ease;
  display: inline-block;
}
.mrow > summary:hover .mrow__chev { color: var(--navy); transform: translateY(2px); }
.mrow[open] > summary .mrow__chev { transform: rotate(180deg); color: var(--navy); }
@media (prefers-reduced-motion: reduce){
  .mrow > summary, .mrow__chev { transition: none; }
  .mrow > summary:hover .mrow__chev { transform: none; }
}

/* On phones the arrow sits alone on its own line at the row's right edge —
   pull it up beside the outcome badge where it reads as part of the row. */


/* ---------- Motion rows: the arrow leads the line ----------
   The chevron is the first thing in the row, at a size you can actually see,
   and the accent bar sits in its own column so it never crosses the text. */
@media (min-width: 56rem){
  .mrow > summary {
    grid-template-columns: 1.9rem 7rem 1fr 11rem 10rem;
    gap: 0 1.25rem;
    padding-left: .35rem;
  }
  .mhead {
    grid-template-columns: 1.9rem 7rem 1fr 11rem 10rem;
    gap: 0 1.25rem;
    padding-left: .35rem;
  }
  .mhead__open { order: -1; }
}

.mrow__chev {
  font-size: 1.375rem; line-height: 1; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: start; padding-top: .1em;
  transition: transform .18s ease, color .14s ease;
}
.mrow > summary:hover .mrow__chev,
.mrow > summary:focus-visible .mrow__chev { color: var(--navy); transform: translateY(3px); }
.mrow[open] > summary .mrow__chev { transform: rotate(180deg); color: var(--navy); }

/* accent bar drawn as a border, so it takes its own space */
.mrow > summary { border-left: 4px solid transparent; }
.mrow > summary:hover, .mrow > summary:focus-visible { border-left-color: var(--yellow); }
.mrow[open] > summary { border-left-color: var(--navy); }

@media (max-width: 56rem){
  .mrow > summary { padding-left: .6rem; }
  .mrow__chev { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .mrow__chev { transition: none; }
  .mrow > summary:hover .mrow__chev { transform: none; }
}

/* Phones: the arrow gets its own leading column beside the stacked row */
@media (max-width: 56rem){
  .mrow > summary {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    column-gap: .5rem;
    align-items: start;
    padding-left: .5rem;
  }
  .mrow > summary > * { grid-column: 2; }
  .mrow__chev {
    grid-column: 1; grid-row: 1 / span 5;
    align-self: start; padding-top: .15em;
  }
}

/* The base rule sets justify-self:end on the chevron, and the `> *` selector
   above outranks a single class — both have to be beaten explicitly. */
@media (max-width: 56rem){
  .mrow > summary > .mrow__chev {
    grid-column: 1;
    grid-row: 1 / span 6;
    justify-self: start;
    align-self: start;
    padding-top: .15em;
  }
}
@media (min-width: 56.0625rem){
  .mrow > summary > .mrow__chev { justify-self: center; }
}

/* ---------- Hero: the photograph drifts, so scrolling back up reveals more ----------
   The image moves at a fraction of the scroll speed. Going down you see further
   into the lower half of the frame; coming back up the top of the picture
   returns. It sits on its own layer so the shift is a transform, not a repaint. */
.hero { position: relative; overflow: hidden; background-image: none; }
.hero__media {
  position: absolute; left: 0; right: 0; top: -12%; bottom: -12%;
  background-image: url("/assets/images/hero-kamloops.jpg");
  background-size: cover;
  background-position: 58% 70%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  z-index: 0;
}
.hero::before { z-index: 1; }
.hero .wrap { position: relative; z-index: 2; }

@media (max-width: 60rem){
  .hero__media { background-position: 62% 72%; top: -8%; bottom: -8%; }
}
@media (prefers-reduced-motion: reduce){
  .hero__media { transform: none !important; top: 0; bottom: 0; }
}

/* Standalone note under a stat row */
.teamnote {
  margin: 1.5rem 0 0; max-width: 46rem;
  font-size: 1.0625rem; line-height: 1.55;
  border-left: 4px solid var(--yellow); padding-left: 1.1rem; color: #3A4A61;
}

/* Three-outcome variant of the tally, used on The Team */
@media (min-width: 52rem){
  .tally--three { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Link list ---------- */
.links { list-style: none; margin: 1.75rem 0 0; padding: 0;
  border-top: 1px solid var(--rule); }
.links li {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
}
.links a {
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); letter-spacing: .01em;
  color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: .1rem;
}
.links a::after { content: " \2197"; font-size: .78em; color: var(--muted); }
.links a:hover { color: var(--green); border-bottom-color: var(--green); }
.links a:hover::after { color: var(--green); }
.links span { display: block; margin-top: .45rem; color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 44rem; }
.linksnote {
  margin-top: 1.5rem; font-size: .875rem; color: var(--muted);
  border-left: 3px solid var(--rule); padding-left: .9rem; max-width: 44rem;
}

/* Eight nav items — tighten the masthead row so they stay on one line */
@media (min-width: 48.0625rem){
  .nav ul { gap: .85rem; }
  .nav a { font-size: .78rem; letter-spacing: .02em; }
  .masthead__tag { font-size: .6875rem; letter-spacing: .1em; padding: .28rem .5rem .24rem; }
  .wordmark { font-size: 1.0625rem; }
  .wordmark span { font-size: .6875rem; }
}
@media (min-width: 68rem){
  .nav ul { gap: 1.05rem; }
  .nav a { font-size: .8125rem; letter-spacing: .03em; }
}

/* Between the mobile menu and comfortable desktop, eight items need more room:
   drop the tagline chip from the masthead and tighten the row. */
@media (min-width: 48.0625rem) and (max-width: 66rem){
  .masthead__tag { display: none; }
  .nav ul { gap: .6rem; }
  .nav a { font-size: .70rem; letter-spacing: .01em; }
  .wordmark { font-size: .9375rem; }
  .wordmark span { font-size: .625rem; }
  .masthead__face { height: 2.2rem; }
  .topbar.has-face .masthead__face { width: 2.2rem; margin-right: .6rem; }
}

/* Eight nav items will not fit between 769 and 992px at a readable size, so the
   Menu button takes over there too rather than shrinking the type further. */
@media (min-width: 48.0625rem) and (max-width: 62rem){
  .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; border: 2px solid rgba(255,255,255,.4);
    color: #fff; font-family: var(--display); font-weight: 800;
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem .8rem; cursor: pointer; border-radius: 3px; min-height: 44px;
    flex: 0 0 auto; order: 3;
  }
  .navtoggle[aria-expanded="true"]{ background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

  .masthead { position: relative; }
  .masthead .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .masthead__tag { display: inline-block; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%; width: auto; margin: 0;
    background: var(--navy-deep); border-top: 3px solid var(--yellow);
    box-shadow: 0 18px 30px -18px rgba(0,0,0,.7); display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: .35rem 0 .6rem; }
  .nav li { border-top: 1px solid rgba(255,255,255,.09); }
  .nav li:first-child { border-top: 0; }
  .nav a {
    display: block; padding: .95rem 1.5rem; font-size: .9375rem;
    letter-spacing: .07em; border-bottom: 0; min-height: 44px;
  }
  .nav a[aria-current="page"]{
    border-bottom: 0; border-left: 4px solid var(--yellow);
    padding-left: calc(1.5rem - 4px); background: rgba(245,188,49,.1);
  }
}

/* ---------- Ballot figure (The Team) ---------- */
.ballotfig {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
  margin: 2rem 0 2.25rem; align-items: start;
}
@media (min-width: 52rem){
  .ballotfig { grid-template-columns: minmax(0,20rem) 1fr; gap: 3rem; }
}
.ballotfig__card { margin: 0; }
.ballotsvg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(25,41,66,.18)); }
.ballotsvg .bl-h { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .08em; fill: #fff; }
.ballotsvg .bl-s { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .16em; fill: var(--yellow); }
.ballotsvg .bx { fill: #fff; stroke: #192942; stroke-width: 2.5; }
.ballotsvg .nm { fill: #D3D9E2; rx: 2; }
.ballotsvg .tick {
  fill: none; stroke: #16C34A; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34;
}
.ballotfig.is-in .ballotsvg .tick { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference){
  .ballotsvg .tick { transition: stroke-dashoffset .45s cubic-bezier(.3,.8,.4,1); }
  .ballotfig.is-in .ballotsvg .t1 { transition-delay: .25s; }
  .ballotfig.is-in .ballotsvg .t2 { transition-delay: .55s; }
  .ballotfig.is-in .ballotsvg .t3 { transition-delay: .85s; }
}
@media (prefers-reduced-motion: reduce){ .ballotsvg .tick { stroke-dashoffset: 0; } }
.ballotfig__card figcaption {
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .04em; color: var(--muted); margin-top: .9rem; text-align: center;
}
.ballotfig__notes p {
  margin: 0 0 1.15rem; max-width: 34rem; line-height: 1.55;
}
.ballotfig__notes p:last-child { margin-bottom: 0; }
.ballotfig__notes b { color: var(--navy); font-family: var(--display); font-weight: 800; }

/* Form: required marker and the fallback line */
.field.choice legend .req {
  font-family: var(--display); font-weight: 700; font-size: .625rem;
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
}
.formfallback {
  margin: 1rem 0 0; font-size: .875rem; color: var(--muted); max-width: 30rem;
}

/* ---------- Prose pages: give the reader landmarks ----------
   Both long pages were unbroken columns of body text. These give the eye
   somewhere to land and mark the moments that carry the argument. */

/* A single sentence set large, breaking the column */
.story .pull {
  margin: 2rem 0; padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 5px solid var(--yellow);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.3;
  letter-spacing: -.005em; color: var(--navy); max-width: 34rem;
}

/* Section headings get more air above and a hairline, so sections read as
   sections rather than as paragraphs that happen to be bold */
.story h2 {
  margin-top: 3.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.story h2:first-of-type { margin-top: 1.5rem; }

/* First line of a section set slightly larger — an entry point */
.story h2 + p {
  font-size: 1.1875rem; line-height: 1.62; color: #22344E;
}

/* Tighter, more even rhythm between paragraphs */
.story p { margin: 0 0 1.15rem; }

@media (max-width: 48rem){
  .story .pull { padding: 1.1rem 0 1.1rem 1.1rem; margin: 1.6rem 0; }
  .story h2 { margin-top: 2.5rem; padding-top: 1.35rem; }
}

/* A list of convictions, set as a list rather than an 87-word paragraph */
.story .creed { list-style: none; margin: 1.35rem 0 1.5rem; padding: 0; max-width: 37rem; }
.story .creed li {
  position: relative; padding: .7rem 0 .7rem 2rem;
  border-bottom: 1px solid var(--rule); line-height: 1.55;
}
.story .creed li:first-child { border-top: 1px solid var(--rule); }
.story .creed li::before {
  content: ""; position: absolute; left: .4rem; top: 1.25rem;
  width: .55rem; height: .55rem; background: var(--yellow);
  transform: rotate(45deg);
}

/* ---------- Message sent: a note from Reid ---------- */
.thanks { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem){
  .thanks { grid-template-columns: 13rem 1fr; gap: 3rem; }
}
.thanks__face {
  width: 11rem; height: 11rem; border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  border: 5px solid var(--yellow);
  box-shadow: 0 18px 34px -20px rgba(25,41,66,.55);
  display: block;
}
@media (min-width: 46rem){ .thanks__face { width: 13rem; height: 13rem; } }

.thanks__lead {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.375rem, 3.4vw, 2rem); line-height: 1.15;
  color: var(--navy); margin: 0 0 1rem;
}
.thanks__note p { max-width: 36rem; }

.thanks__phone {
  display: inline-block; margin-top: .5rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.125rem); letter-spacing: .01em;
  color: var(--navy); text-decoration: none;
  border-bottom: 3px solid var(--yellow); padding-bottom: .1rem;
}
.thanks__phone:hover { color: var(--green); border-bottom-color: var(--green); }

.thanks__sig {
  margin-top: 2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule); max-width: 36rem;
}
.thanks__signame {
  display: block;
  font-family: "Kalam", cursive; font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.25rem); line-height: 1;
  color: var(--navy);
  clip-path: inset(0 100% 0 0);
}
.thanks__sigrole {
  display: block; margin-top: .35rem;
  font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
@media (prefers-reduced-motion: no-preference){
  .js .thanks__signame { transition: clip-path 1.25s cubic-bezier(.35,.15,.25,1) .55s; }
  .js .thanks.is-written .thanks__signame { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
  .thanks__signame { clip-path: none !important; }
}

/* Message sent: the civic/campaign separation note, and a larger role line */
.thanks__civic {
  margin-top: 1.25rem; padding: .85rem 1rem;
  background: #F2F5F8; border-left: 3px solid var(--rule);
  font-size: .9375rem; line-height: 1.5; color: var(--muted); max-width: 36rem;
}
.thanks__sigrole {
  font-size: .9375rem !important; letter-spacing: .14em !important;
  color: var(--navy) !important; margin-top: .55rem !important;
}
.thanks__signame { font-size: clamp(2.5rem, 6.5vw, 3.5rem) !important; }

/* The signature writes when it is actually on screen, not on page load */
.thanks__signame { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: no-preference){
  .js .thanks__signame { transition: clip-path 1.3s cubic-bezier(.35,.15,.25,1); }
}

/* ---------- Line breaking ----------
   Browsers break lines greedily, which leaves headings with a stranded last
   word and paragraphs with one-word final lines. These two properties let the
   browser look at the whole block and even the lines out. Unsupported browsers
   simply ignore them and wrap as before. */

h1, h2, h3, .pagehead p, .lede, .issue__lede, .thanks__lead, .pull,
.callcard__lead, .talk__head, .doors h3, figcaption, .mrow__topic {
  text-wrap: balance;
}

p, li, .mrow__detail p, .goal p, .points p, .links span {
  text-wrap: pretty;
}

/* The thank-you note: a measure that breaks evenly rather than raggedly */
.thanks__note p { max-width: 32rem; }
.thanks__lead { max-width: 26rem; }
.thanks__civic { max-width: 32rem; }

@media (min-width: 46rem){
  .thanks__note p { max-width: 34rem; }
  .thanks__lead { max-width: 28rem; }
}

/* Measure tuned so the note breaks into even lines rather than stranding
   short fragments. Wider lead = two balanced lines instead of three. */
.thanks__lead { max-width: 34rem; }
.thanks__note p { max-width: 30rem; }
.thanks__civic { max-width: 30rem; }
@media (min-width: 46rem){
  .thanks__lead { max-width: 36rem; }
  .thanks__note p { max-width: 31rem; }
}

/* "not" carries the whole sentence — let it look like it does */
.ballotfig__notes b em {
  font-style: normal; text-transform: uppercase;
  letter-spacing: .04em; color: var(--green);
  border-bottom: 3px solid var(--green); padding-bottom: .04em;
}

/* Headings on The Team break into even lines rather than a long line and a stub */
.band h2 { text-wrap: balance; max-width: 22ch; }
@media (min-width: 60rem){ .band h2 { max-width: 30ch; } }

/* ---------- Where Reid stands: the platform on one screen ---------- */
.stands { list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); }
@media (min-width: 52rem){ .stands { grid-template-columns: 1fr 1fr; } }
.stands li { background: #fff; }
.stands a {
  display: block; padding: 1.1rem 1.25rem; text-decoration: none;
  border-left: 4px solid transparent; height: 100%;
  transition: background-color .14s ease, border-color .14s ease;
}
.stands a:hover, .stands a:focus-visible {
  background: #F2F5F8; border-left-color: var(--yellow);
}
.stands b {
  display: block; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .875rem; color: var(--navy); margin-bottom: .35rem;
}
.stands b::after { content: " \2192"; color: var(--muted); font-weight: 700; }
.stands a:hover b::after { color: var(--green); }
.stands span {
  display: block; color: #44556E; font-size: .9375rem; line-height: 1.5;
}

/* Footer: when the page was last touched, and who is publishing it */
.lastupd {
  font-size: .8125rem; line-height: 1.5; color: #8FA3BD;
  margin: 0 0 .6rem; max-width: 46rem;
}

/* ---------- Footer ----------
   Was a single wrapping row of nine links plus three stacked paragraphs. Now a
   four-column grid: who this is, then links grouped by what a visitor wants,
   then the legal line on its own rule. */

.foot { padding-block: 3rem 2rem; }

.foot__grid {
  display: grid; gap: 2.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem){ .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem){
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 3rem; }
}

.foot__face {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  border: 2px solid var(--yellow); display: block; margin-bottom: .85rem;
}
.foot__name {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: .01em; color: #fff; margin: 0; max-width: none;
}
.foot__role {
  font-family: var(--display); font-weight: 700; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--yellow);
  margin: .2rem 0 0; max-width: none;
}
.foot__vote {
  margin: .9rem 0 0; font-size: .875rem; color: #8FA0B5; max-width: 16rem;
}

.foot__col h2 {
  font-family: var(--display); font-weight: 800; font-size: .6875rem;
  letter-spacing: .17em; text-transform: uppercase; color: #8FA0B5;
  margin: 0 0 .85rem; padding: 0; border: 0;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: block; }
.foot__col li { margin-bottom: .55rem; }
.foot__col a {
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  letter-spacing: .02em; text-transform: none; text-decoration: none;
  color: #D6DFEA;
}
.foot__col a:hover { color: var(--yellow); }

.foot__legal {
  border-top: 1px solid #2A3C56; margin-top: 2.5rem; padding-top: 1.25rem;
}
.foot__legal .auth {
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .02em; color: #A8B6C8; margin: 0 0 .45rem; max-width: 52rem;
}
.foot__legal .lastupd {
  font-size: .75rem; color: #74869E; margin: 0; max-width: 52rem;
}

/* Phones: two columns of links rather than one long stack. A single column put
   the footer at 1114px — longer than the screen it sits on. */
@media (max-width: 40rem){
  .foot { padding-block: 2.25rem 1.5rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__face { width: 3rem; height: 3rem; margin-bottom: .6rem; }
  .foot__vote { margin-top: .6rem; max-width: none; }
  .foot__col h2 { margin-bottom: .6rem; }
  .foot__col li { margin-bottom: .45rem; }
  .foot__col a { font-size: .8125rem; }
  .foot__legal { margin-top: 1.6rem; padding-top: 1rem; }
  .foot__legal .auth { font-size: .75rem; }
  .foot__legal .lastupd { font-size: .6875rem; }
}

/* Phones: the contact list runs two-up across the full width rather than
   taking a whole column to itself. */
@media (max-width: 40rem){
  .foot__col--contact { grid-column: 1 / -1; }
  .foot__col--contact ul {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem;
  }
  .foot__col--contact li { margin-bottom: .5rem; }
  .foot__col--contact a { overflow-wrap: anywhere; }
}

/* Link to a source document inside a motion row */
.mrow__doc { margin: .85rem 0 0 !important; }
.mrow__doc a {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
  text-decoration: none;
  border: 2px solid var(--navy); padding: .5rem .8rem; border-radius: 3px;
}
.mrow__doc a::after { content: " \2193"; font-size: .95em; color: var(--muted); }
.mrow__doc a:hover { background: var(--navy); color: #fff; }
.mrow__doc a:hover::after { color: var(--yellow); }

/* Figures inside a motion row */
.mrow__facts {
  list-style: none; margin: .9rem 0 1rem; padding: 0;
  border-left: 3px solid var(--yellow);
}
.mrow__facts li {
  padding: .45rem 0 .45rem .9rem; line-height: 1.5;
  font-size: .9375rem; color: #3A4A61;
}
.mrow__facts b { color: var(--navy); }

/* Figures inside a goal card */
.figs { list-style: none; margin: .8rem 0 .9rem; padding: 0; border-left: 3px solid var(--yellow); }
.figs li { padding: .35rem 0 .35rem .85rem; font-size: .9375rem; line-height: 1.45; color: #3A4A61; }
.figs b { color: var(--navy); }

/* A second line on a motion row, visible without opening it */
.mrow__flagline {
  display: block; margin-top: .3rem;
  font-family: var(--display); font-weight: 700; font-size: .75rem;
  letter-spacing: .04em; color: #8A6A12; text-transform: none;
}

/* The recusal callout inside a motion row */
.recusal {
  background: #FFF6DC; border-left: 5px solid var(--yellow);
  padding: 1rem 1.15rem; margin: 1rem 0 1.1rem;
}
.recusal p { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.55; color: #3A4A61; }
.recusal p:last-child { margin-bottom: 0; }
.recusal__head {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: .875rem !important; color: var(--navy) !important;
}
.recusal__note { font-size: .8125rem !important; color: #6B7A90 !important; font-style: italic; }

/* Source line under a minuted vote */
.mrow__src {
  font-size: .8125rem !important; color: var(--muted) !important;
  margin: .65rem 0 0 !important; line-height: 1.5;
}
.recusal__note a, .mrow__src a { color: var(--navy); }

/* ---------- HAVE YOUR SAY — live polls ---------- */

.poll { max-width: 44rem; }
.poll__kicker {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6rem;
}
.poll__q {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.4vw, 2.375rem); line-height: 1.06;
  letter-spacing: -.01em; color: var(--navy); margin: 0 0 .6rem; text-wrap: balance;
}
.poll__sub { color: var(--muted); margin: 0 0 1.4rem; }

.poll__options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.poll__opt { opacity: 0; transform: translateY(.5em); }
.poll.is-in .poll__opt {
  opacity: 1; transform: none;
  transition: opacity .45s ease calc(var(--i) * .07s),
              transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .07s);
}

.poll__choice {
  position: relative; display: grid; align-items: center; width: 100%;
  grid-template-columns: 1.6rem 1fr auto; gap: .9rem;
  background: #fff; border: 2px solid var(--rule); border-radius: 4px;
  padding: .95rem 1.1rem; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--navy); overflow: hidden;
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.poll__choice:hover { border-color: var(--navy); transform: translateX(2px); }
.poll__choice:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.poll__mark {
  width: 1.3rem; height: 1.3rem; border: 2px solid var(--rule);
  border-radius: 50%; display: block; position: relative; transition: all .16s ease;
}
.poll__choice.is-picked { border-color: var(--green); background: #F2FBF5; }
.poll__choice.is-picked .poll__mark { border-color: var(--green); background: var(--green); }
.poll__choice.is-picked .poll__mark::after {
  content: ""; position: absolute; left: .34rem; top: .13rem;
  width: .3rem; height: .62rem; border: solid #fff;
  border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.poll__label { line-height: 1.3; }

/* results */
.poll__bar {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: none;
}
.poll__fill {
  display: block; height: 100%; width: 0; background: rgba(245,188,49,.32);
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.poll__pct {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  color: var(--navy); opacity: 0; transition: opacity .4s ease .35s;
}
.poll.is-done .poll__bar { display: block; }
.poll.is-done .poll__pct { opacity: 1; }
.poll.is-done .poll__choice { cursor: default; transform: none; }
.poll.is-done .poll__choice:hover { border-color: var(--rule); }
.poll.is-done .poll__mark { display: none; }
.poll.is-done .poll__choice { grid-template-columns: 1fr auto; }
.poll.is-done .poll__label, .poll.is-done .poll__pct { position: relative; z-index: 1; }
.poll.is-done .poll__choice.is-yours { border-color: var(--green); }
.poll.is-done .poll__choice.is-yours .poll__fill { background: rgba(29,118,64,.28); }

.poll__note {
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 1rem 0 0;
}
.poll.is-done .poll__note { text-transform: none; letter-spacing: .01em; font-size: .9375rem; }
.poll__submit { margin-top: 1rem; }
.poll__submit:disabled { opacity: .45; cursor: not-allowed; }

.poll__disclaimer {
  background: #F2F5F8; border-left: 4px solid var(--rule);
  padding: 1rem 1.15rem; font-size: .9375rem; line-height: 1.55;
  color: var(--muted); max-width: 46rem; margin: 0 0 1.5rem;
}
.poll__disclaimer b { color: var(--navy); }

@media (prefers-reduced-motion: reduce){
  .poll__opt { opacity: 1; transform: none; }
  .poll__fill, .poll__pct, .poll__choice { transition: none; }
}

/* .btn sets display, which overrides the hidden attribute */
[hidden] { display: none !important; }

/* ---------- Two polls side by side on the home page ---------- */
.polls2 { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
@media (min-width: 56rem){ .polls2 { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }

.poll--compact { max-width: none; }
.poll--compact .poll__q {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem); margin: 0 0 .35rem; line-height: 1.15;
}
.poll--compact .poll__sub { margin: 0 0 1rem; font-size: .9375rem; }
.poll--compact .poll__options { gap: .45rem; }
.poll--compact .poll__choice {
  padding: .7rem .85rem; font-size: .875rem; gap: .7rem;
  grid-template-columns: 1.15rem 1fr auto;
}
.poll--compact .poll__mark { width: 1.05rem; height: 1.05rem; }
.poll--compact .poll__choice.is-picked .poll__mark::after {
  left: .26rem; top: .08rem; width: .24rem; height: .5rem; border-width: 0 2.5px 2.5px 0;
}
.poll--compact .poll__pct { font-size: .9375rem; }
.poll--compact.is-done .poll__choice { grid-template-columns: 1fr auto; }
.poll--compact .poll__note { font-size: .75rem; margin-top: .8rem; }
.poll--compact.is-done .poll__note { font-size: .875rem; }
.poll--compact .poll__submit { margin-top: .8rem; padding: .7rem 1.1rem; font-size: .8125rem; }

.polls2__foot {
  margin: 1.75rem 0 0; font-size: .875rem; color: var(--muted); max-width: 44rem;
}
.polls2__foot a { color: var(--navy); }

/* ---------- Megaphone strip: jump to the poll ---------- */
.shout { background: var(--yellow); padding: 0; }
.shout__link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1.1rem; padding: 1.15rem 0; text-decoration: none; color: var(--navy);
}
.shout__icon { width: 3rem; height: 2.5rem; display: block; flex: 0 0 auto; }
.shout__icon svg { width: 100%; height: 100%; overflow: visible; }
.mega__horn, .mega__handle { fill: var(--navy); }
.waves { stroke: var(--navy); stroke-width: 3; }

.shout__text b {
  display: block; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1rem, 2.6vw, 1.25rem); line-height: 1.1;
}
.shout__text span {
  display: block; margin-top: .15rem; font-size: .9375rem; color: #5A4A1C;
}
.shout__go {
  font-size: 1.5rem; line-height: 1; color: var(--navy);
  transition: transform .18s ease;
}
.shout__link:hover .shout__go { transform: translateY(3px); }
.shout__link:hover .shout__text b { text-decoration: underline; text-underline-offset: 3px; }
.shout__link:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }

#say { scroll-margin-top: 11rem; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: no-preference){
  .mega { animation: megaRock 2.6s ease-in-out infinite; transform-origin: 14px 24px; }
  @keyframes megaRock {
    0%, 62%, 100% { transform: rotate(0deg); }
    70% { transform: rotate(-9deg); }
    78% { transform: rotate(4deg); }
    86% { transform: rotate(-3deg); }
  }
  .waves path { opacity: 0; }
  .w1 { animation: wave 2.6s ease-out infinite .05s; }
  .w2 { animation: wave 2.6s ease-out infinite .17s; }
  .w3 { animation: wave 2.6s ease-out infinite .29s; }
  @keyframes wave {
    0%, 60% { opacity: 0; transform: translateX(-4px); }
    72%     { opacity: 1; transform: translateX(0); }
    96%,100%{ opacity: 0; transform: translateX(3px); }
  }
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .waves path { opacity: 1; }
}
@media (max-width: 40rem){
  .shout__link { gap: .8rem; padding: 1rem 0; }
  .shout__icon { width: 2.4rem; height: 2rem; }
  .shout__text span { font-size: .875rem; }
}

/* Smaller sticky bar on phones, so a smaller offset */
@media (max-width: 48rem){ #say { scroll-margin-top: 9rem; } }

/* Slim variant: one line, small icon, sits high on the page */
.shout--slim .shout__link {
  grid-template-columns: auto auto auto;
  justify-content: center; gap: .7rem; padding: .7rem 0;
}
.shout--slim .shout__icon { width: 1.75rem; height: 1.5rem; }
.shout--slim .shout__text {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.875rem, 2.2vw, 1.0625rem); letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.2;
}
.shout--slim .shout__text b { display: inline; font-weight: 800; letter-spacing: .05em; }
.shout--slim .shout__go { font-size: 1.05rem; }
@media (max-width: 30rem){
  .shout--slim .shout__link { gap: .55rem; padding: .6rem 0; }
  .shout--slim .shout__icon { width: 1.5rem; height: 1.3rem; }
  .shout--slim .shout__text { font-size: .8125rem; letter-spacing: .03em; }
}

/* The slim strip sits directly under the yellow tagline band, so it needs the
   opposite colour or the two read as one block. */
.shout--slim { background: var(--navy); border-bottom: 3px solid var(--yellow); }
.shout--slim .shout__link { color: var(--yellow); }
.shout--slim .mega__horn,
.shout--slim .mega__handle { fill: var(--yellow); }
.shout--slim .waves { stroke: var(--yellow); }
.shout--slim .shout__text { color: #fff; }
.shout--slim .shout__text b { color: var(--yellow); }
.shout--slim .shout__go { color: var(--yellow); }
.shout--slim .shout__link:hover { background: rgba(255,255,255,.06); }
.shout--slim .shout__link:hover .shout__text b { text-decoration-color: var(--yellow); }
.shout--slim .shout__link:focus-visible { outline-color: var(--yellow); }

/* ---------- Floating "Have your say" button ----------
   An in-page strip gets scrolled past. This follows the reader, appears once
   they have started reading, and gets out of the way when the polls are on
   screen or once they have answered. */

.pollfab {
  position: fixed; z-index: 60; right: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.15rem .8rem .95rem;
  background: var(--yellow); color: var(--navy);
  border: 3px solid var(--navy); border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(25,41,66,.55);
  text-decoration: none; max-width: calc(100vw - 2.5rem);
  opacity: 0; transform: translateY(1.2rem) scale(.96);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1),
              background-color .16s ease;
}
.pollfab.is-up { opacity: 1; transform: none; }
.pollfab:hover { background: #fff; }
.pollfab:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.pollfab__icon { width: 2rem; height: 1.7rem; flex: 0 0 auto; position: relative; z-index: 1; }
.pollfab__icon svg { width: 100%; height: 100%; overflow: visible; }
.pollfab .mega__horn, .pollfab .mega__handle { fill: var(--navy); }
.pollfab .waves { stroke: var(--navy); stroke-width: 3; }

.pollfab__text { position: relative; z-index: 1; line-height: 1.15; }
.pollfab__text b {
  display: block; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem;
}
.pollfab__text span {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: #5A4A1C; margin-top: .1rem;
}

/* the pulse that draws the eye */
.pollfab__ring {
  position: absolute; inset: -3px; border-radius: 999px;
  border: 3px solid var(--yellow); opacity: 0; pointer-events: none;
}

.pollfab__x {
  position: fixed; z-index: 61; right: .55rem; bottom: 4.6rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 2px solid var(--navy); background: #fff; color: var(--navy);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .3s ease;
}
.pollfab__x.is-up { opacity: 1; }
.pollfab__x:hover { background: var(--navy); color: #fff; }

@media (max-width: 30rem){
  .pollfab { right: .75rem; bottom: .75rem; padding: .7rem .95rem .7rem .8rem; gap: .55rem; }
  .pollfab__icon { width: 1.7rem; height: 1.45rem; }
  .pollfab__text b { font-size: .8125rem; }
  .pollfab__text span { font-size: .6875rem; }
  .pollfab__x { right: .35rem; bottom: 4rem; }
}

@media (prefers-reduced-motion: no-preference){
  .pollfab.is-up .pollfab__ring { animation: fabPulse 3.4s ease-out infinite 1.2s; }
  @keyframes fabPulse {
    0%   { opacity: .9; transform: scale(1); }
    55%  { opacity: 0;  transform: scale(1.22); }
    100% { opacity: 0;  transform: scale(1.22); }
  }
  .pollfab.is-up .mega { animation: megaRock 3.4s ease-in-out infinite; transform-origin: 14px 24px; }
  .pollfab.is-up .w1 { animation: wave 3.4s ease-out infinite .05s; }
  .pollfab.is-up .w2 { animation: wave 3.4s ease-out infinite .17s; }
  .pollfab.is-up .w3 { animation: wave 3.4s ease-out infinite .29s; }
  .pollfab .waves path { opacity: 0; }
}

/* ---------- Poll link in the masthead ---------- */
.navpoll {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--yellow); color: var(--navy);
  border-radius: 999px; padding: .42rem .8rem .42rem .62rem;
  text-decoration: none; flex: 0 0 auto; order: 2;
  border: 2px solid transparent;
  transition: background-color .16s ease, transform .14s ease;
}
.navpoll:hover { background: #fff; transform: translateY(-1px); }
.navpoll:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.navpoll[aria-current="page"] { background: #fff; border-color: var(--navy); }

.navpoll__icon { width: 1.25rem; height: 1.05rem; display: block; }
.navpoll__icon svg { width: 100%; height: 100%; overflow: visible; }
.navpoll .mega__horn, .navpoll .mega__handle { fill: var(--navy); }
.navpoll .waves { stroke: var(--navy); stroke-width: 3.5; }

.navpoll__word {
  font-family: var(--display); font-weight: 800; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference){
  .navpoll .mega { animation: megaRock 5s ease-in-out infinite; transform-origin: 14px 24px; }
  .navpoll .waves path { opacity: 0; }
  .navpoll .w1 { animation: wave 5s ease-out infinite .05s; }
  .navpoll .w2 { animation: wave 5s ease-out infinite .17s; }
  .navpoll .w3 { animation: wave 5s ease-out infinite .29s; }
  .navpoll:hover .mega { animation-duration: 1.6s; }
  .navpoll:hover .w1, .navpoll:hover .w2, .navpoll:hover .w3 { animation-duration: 1.6s; }
}

/* room is tight between the mobile menu and comfortable desktop */
@media (max-width: 62rem){
  .navpoll { margin-left: auto; margin-right: .6rem; padding: .38rem .7rem .38rem .55rem; }
  .navpoll__word { font-size: .625rem; letter-spacing: .1em; }
}
@media (max-width: 26rem){
  .navpoll__word { display: none; }
  .navpoll { padding: .42rem .5rem; margin-right: .45rem; }
}

/* Icon only: the word "Poll" cost about 45px and pushed the nav onto two rows
   between 1100 and 1600px. The label stays in the markup for screen readers. */
.navpoll__word {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.navpoll { padding: .45rem; border-radius: 50%; gap: 0; }
.navpoll__icon { width: 1.35rem; height: 1.15rem; }
@media (max-width: 62rem){ .navpoll { padding: .45rem; margin-right: .55rem; } }

/* The masthead container is capped at 68rem, so above that the nav gets no
   extra room — it only got bigger type, which now wraps with the poll icon
   present. Hold it at the size that fits. */
@media (min-width: 68rem){
  .nav ul { gap: .85rem; }
  .nav a { font-size: .78rem; letter-spacing: .02em; }
}

/* ---------- Floating button: round, and it opens on hover ---------- */
.pollfab {
  width: 4.5rem; height: 4.5rem; padding: 0; gap: 0;
  border-radius: 999px; justify-content: center; overflow: hidden;
  transition: width .32s cubic-bezier(.2,.9,.3,1),
              opacity .3s ease,
              transform .35s cubic-bezier(.2,.9,.3,1),
              background-color .16s ease;
}
.pollfab__icon { width: 2.3rem; height: 2rem; flex: 0 0 auto; }
.pollfab__text {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .32s cubic-bezier(.2,.9,.3,1), opacity .22s ease, margin .32s ease;
  margin: 0;
}
.pollfab__text b { font-size: 1rem; }
.pollfab__text span { font-size: .8125rem; }

@media (hover: hover) {
  .pollfab:hover, .pollfab:focus-visible {
    width: 16.5rem; justify-content: flex-start; padding-left: 1.1rem;
  }
  .pollfab:hover .pollfab__text,
  .pollfab:focus-visible .pollfab__text {
    max-width: 12rem; opacity: 1; margin-left: .75rem;
  }
}

/* No hover on a phone: keep it a plain round button. */
@media (hover: none) {
  .pollfab { width: 4.1rem; height: 4.1rem; }
  .pollfab__icon { width: 2.1rem; height: 1.8rem; }
}

.pollfab__x { bottom: 5.9rem; right: 1rem; }
@media (max-width: 30rem){
  .pollfab { right: .9rem; bottom: .9rem; }
  .pollfab__x { right: .7rem; bottom: 5.2rem; }
}

/* The site-wide link hover was turning the button white and the label green.
   Keep it yellow, lift it slightly, and pin the text colours. */
.pollfab:hover, .pollfab:focus-visible { background: #FFD15C; }
.pollfab, .pollfab:hover, .pollfab:focus-visible { color: var(--navy); }
.pollfab__text b { color: var(--navy) !important; }
.pollfab__text span { color: #5A4A1C !important; }
.pollfab:hover .mega__horn, .pollfab:hover .mega__handle { fill: var(--navy); }
.pollfab:hover .waves { stroke: var(--navy); }

/* The expansion was behind @media (hover: hover), which reports false on
   touchscreen laptops — so a mouse user on one of those never saw it. Hover
   simply does not fire on a phone, so the guard was unnecessary. */
.pollfab:hover, .pollfab:focus-visible {
  width: 16.5rem; justify-content: flex-start; padding-left: 1.1rem;
}
.pollfab:hover .pollfab__text,
.pollfab:focus-visible .pollfab__text {
  max-width: 12rem; opacity: 1; margin-left: .75rem;
}

/* ---------- Floating button: always open ----------
   The hover expansion did not fire reliably on every desktop, and the label is
   the part that does the work. It now sits open all the time. */
.pollfab {
  width: auto; height: auto; border-radius: 999px;
  padding: .85rem 1.3rem .85rem 1rem; gap: .8rem;
  justify-content: flex-start; overflow: visible;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1),
              background-color .16s ease, box-shadow .16s ease;
}
.pollfab:hover, .pollfab:focus-visible {
  width: auto; padding: .85rem 1.3rem .85rem 1rem;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(25,41,66,.6);
}
.pollfab__text {
  max-width: none; opacity: 1; margin: 0; overflow: visible; white-space: nowrap;
}
.pollfab:hover .pollfab__text,
.pollfab:focus-visible .pollfab__text { max-width: none; margin: 0; }
.pollfab__icon { width: 2.1rem; height: 1.8rem; }
.pollfab__text b { font-size: 1rem; line-height: 1.1; }
.pollfab__text span { font-size: .75rem; }

.pollfab__x { bottom: 4.9rem; right: 1rem; }

@media (max-width: 30rem){
  .pollfab { padding: .7rem 1rem .7rem .8rem; gap: .6rem; right: .8rem; bottom: .8rem; }
  .pollfab__icon { width: 1.8rem; height: 1.55rem; }
  .pollfab__text b { font-size: .875rem; }
  .pollfab__text span { font-size: .6875rem; }
  .pollfab__x { right: .6rem; bottom: 4.3rem; }
}
@media (max-width: 22rem){
  .pollfab__text span { display: none; }
}