/* ============================================================
   THE WARD 7 VOTER GUIDE
   ------------------------------------------------------------
   Direction: BALLOT PAPER.

   The page is designed as an official document rather than as a
   campaign page, because the thing has to survive being linked
   to by people who are not voting for Gerald. Everything here
   follows from that one decision:

     - Cream stock, black ink, hairline rules. No gradients.
     - No border-radius. Rounded cards are the house style of
       every template on earth; square corners and rules are
       the house style of paper you are handed at a polling
       station.
     - Monospace for anything a form would set in monospace:
       labels, numbers, dates, section marks. Serif for prose.
       A condensed grotesque for headlines, the way a broadsheet
       sets them.
     - One accent (ochre) and it means exactly one thing: live,
       now, or you. It is deliberately not red, blue, orange or
       green, because those are all federal party colours and
       this page has to read neutral.

   Mobile-first. The dock at the bottom is primary nav on a
   phone because that is where the thumb already is.
   ============================================================ */

:root{
  /* Stock and ink */
  --stock:    #F5F2E9;
  --stock-2:  #EDE9DC;   /* tinted band, e.g. alternating sections */
  --stock-3:  #E4DFCE;   /* deepest tint, table stripes */
  --card:     #FBFAF5;   /* raised paper */
  --ink:      #14130F;
  --ink-2:    #45423A;
  --ink-3:    #6F6B5E;
  --ink-4:    #9C978A;

  /* Rules. Hairlines are ink at low alpha so they sit on any tint. */
  --rule:     rgba(20,19,15,.16);
  --rule-2:   rgba(20,19,15,.32);
  --rule-hvy: var(--ink);

  /* The one accent. Two values because the graphic weight and the
     text weight need different contrast against cream. */
  --live:     #B6791F;   /* graphics, fills, marks */
  --live-tx:  #7E5310;   /* text and small elements, AA on stock */
  --live-wash:#F3E7CC;

  /* Reversed: the ink bands */
  --on-ink:   #F5F2E9;
  --on-ink-2: rgba(245,242,233,.68);
  --on-ink-3: rgba(245,242,233,.42);
  --rule-ink: rgba(245,242,233,.20);

  --display:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --read:'Newsreader', Georgia, 'Times New Roman', serif;

  --measure: 66ch;
  --pad: 20px;
  --gut: 28px;
}
@media (min-width:700px){ :root{ --pad:36px; --gut:40px } }

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:78px;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

body{
  margin:0;
  background:var(--stock);
  color:var(--ink);
  font-family:var(--read);
  font-size:1.06rem;
  line-height:1.62;
  padding-bottom:74px;              /* clears the mobile dock */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:oldstyle-nums;
}
@media (min-width:1000px){ body{ padding-bottom:0 } }

img{ max-width:100%; display:block }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:1.06; letter-spacing:-.015em }
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }

a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--live-tx) }
:focus-visible{ outline:2px solid var(--live-tx); outline-offset:3px }

strong,b{ font-weight:700 }

.wrap{ max-width:1340px; margin:0 auto; padding:0 var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--on-ink); padding:14px 20px;
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
}
.skip:focus{ left:8px; top:8px }

/* ---------- Shared type atoms ---------- */

/* The mono label. Every piece of form-speak on the page uses this. */
.lab{
  font-family:var(--mono); font-weight:600;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.lab--live{ color:var(--live-tx) }
.lab--on-ink{ color:var(--on-ink-3) }

/* Section mark: a boxed number, like a clause reference. */
.mark-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px;
  border:1.5px solid var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.04em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Numerals in data positions must be tabular, always. */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums }

/* The oval. The page's one repeated ornament, because it is the
   only mark a voter actually makes. */
.oval{
  display:inline-block; width:19px; height:12px; flex:0 0 auto;
  border:1.5px solid var(--ink-3); border-radius:99px; background:transparent;
}
.oval--filled{ background:var(--ink); border-color:var(--ink) }
.oval--live{ background:var(--live); border-color:var(--live) }

/* ---------- Progress hairline ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:90;
  background:transparent; pointer-events:none;
}
.progress span{ display:block; height:100%; width:0; background:var(--live) }

/* ============================================================
   MASTHEAD  —  the form header strip
   ============================================================ */
.mast{
  position:sticky; top:0; z-index:80;
  background:var(--ink); color:var(--on-ink);
  border-bottom:2px solid var(--ink);
}
.mast__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px;
}
.mast__back{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  margin-left:-4px; padding-right:4px;
  color:var(--on-ink); text-decoration:none;
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.mast__back svg{ width:13px; height:13px; flex:0 0 auto }
.mast__back:hover{ color:var(--live) }
.mast__meta{
  display:none;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-ink-3);
}
@media (min-width:820px){ .mast__meta{ display:block } }
.mast__chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-weight:600; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--live);
  padding:6px 10px; white-space:nowrap;
}
.mast__chip::before{
  content:''; width:6px; height:6px; background:var(--ink); border-radius:99px;
  animation:blip 2.4s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============================================================
   LEDE  —  title block + the detachable stub
   ============================================================ */
.lede{ background:var(--stock); border-bottom:1px solid var(--rule) }
.lede__in{ padding-top:34px; padding-bottom:0 }
@media (min-width:820px){ .lede__in{ padding-top:56px } }

.lede__kick{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-family:var(--mono); font-weight:600; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.lede__kick::after{ content:''; flex:1; height:1px; background:var(--rule) }

.lede__h1{
  font-family:var(--display);
  font-weight:800; font-stretch:88%;
  /* Sized to hold "WHO DECIDES WHAT" on a single line at every width.
     Sixteen characters is a lot wider than the old two-word lines, so the
     vw term is smaller than it looks like it should be. */
  font-size:clamp(1.9rem, 8.7vw, 7rem);
  line-height:.9; letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.lede__h1-main{ display:block; text-wrap:nowrap }

/* The publication name, under the display line. The H1 carries the
   hook; this carries the thing people actually cite and link to, so it
   is set at a size that can hold its own rather than as a kicker. */
.lede__name{
  display:block; margin:18px 0 0;
  font-family:var(--mono); font-weight:600;
  font-size:clamp(.95rem, 3.3vw, 1.45rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}

.lede__sub{
  font-family:var(--read); font-size:1.16rem; line-height:1.5;
  color:var(--ink-2); max-width:44ch; margin:20px 0 0;
}
@media (min-width:820px){ .lede__sub{ font-size:1.28rem } }

.stub{ margin-top:36px }
.stub__grid{
  display:grid; grid-template-columns:1fr;
  border:1.5px solid var(--ink);
}
@media (min-width:760px){ .stub__grid{ grid-template-columns:1.25fr 1fr 1fr } }

.sf{ padding:18px 20px; border-bottom:1px solid var(--rule-2) }
.sf:last-child{ border-bottom:none }
@media (min-width:760px){
  .sf{ border-bottom:none; border-right:1px solid var(--rule); padding:22px 24px 26px }
  .sf:last-child{ border-right:none }
}
.sf--key{ background:var(--ink); color:var(--on-ink) }
.sf--key .sf__lab{ color:var(--on-ink-3) }
.sf--key .sf__note{ color:var(--on-ink-2) }

.sf__lab{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-weight:600; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.sf__val{
  display:block; font-family:var(--display); font-weight:800; font-stretch:90%;
  font-size:clamp(1.7rem, 6.4vw, 2.5rem); line-height:1; letter-spacing:-.028em;
  text-transform:uppercase; font-variant-numeric:lining-nums;
}
.sf--key .sf__val{ color:var(--live) }
.sf__note{
  display:block; margin-top:9px;
  font-family:var(--read); font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.sf__stamp{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding:12px 0 26px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.sf__stamp .sep{ width:4px; height:4px; background:var(--ink-4); border-radius:99px }

/* ============================================================
   INDEX  —  the ballot-style section list.
   This is the page's ONE navigation device. The old page had
   triage tiles AND a rail AND a dock all saying different
   things, which is most of why it felt overwhelming.
   ============================================================ */
.index{ background:var(--stock-2); border-bottom:1px solid var(--rule) }
.index__in{ padding:30px 0 34px }
.index__h{
  display:flex; align-items:baseline; gap:12px; margin:0 0 4px;
  font-family:var(--mono); font-weight:600; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.index__h b{ color:var(--ink); font-weight:600 }
.index__note{
  margin:0 0 20px; font-family:var(--read); font-size:.98rem; color:var(--ink-3);
}
.index__list{
  list-style:none; margin:0; padding:0;
  border-top:1.5px solid var(--ink);
}
@media (min-width:900px){
  .index__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gut) }
  /* Keep the top rule continuous across both columns. */
  .index__list li:nth-child(2){ border-top:none }
}
.index__list li{ border-bottom:1px solid var(--rule) }
@media (min-width:900px){
  .index__list li:nth-child(-n+2){ border-top:none }
}
.ix{
  display:flex; align-items:center; gap:14px;
  padding:15px 4px 15px 0; min-height:58px;
  text-decoration:none; color:var(--ink);
  transition:background .14s ease, padding-left .14s ease;
}
.ix:hover{ background:rgba(20,19,15,.045); padding-left:10px; color:var(--ink) }
.ix__n{
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  color:var(--ink-4); font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.ix__t{
  flex:1 1 auto; font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.06rem; letter-spacing:-.012em; line-height:1.2;
}
.ix__s{
  display:none; font-family:var(--read); font-size:.93rem; color:var(--ink-3);
  flex:0 0 auto;
}
@media (min-width:640px){ .ix__s{ display:block } }
.ix__go{ flex:0 0 auto; width:15px; height:15px; color:var(--ink-4) }
.ix:hover .ix__go{ color:var(--live-tx) }

/* ============================================================
   SHELL  —  main column + desktop rail
   ============================================================ */
.shell{ max-width:1340px; margin:0 auto; padding:0 var(--pad) }
@media (min-width:1000px){
  .shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 232px;
    column-gap:56px;
    /* Not align-items:start. The rail cell has to stretch to the full
       row height or position:sticky inside it has no range to travel. */
    align-items:stretch;
  }
}
.doc{ min-width:0; padding-bottom:20px }

/* Standard section. Prose is held to a measure even though the
   section itself can go full width for figures. */
.sec{ padding:44px 0; border-bottom:1px solid var(--rule) }
@media (min-width:820px){ .sec{ padding:64px 0 } }
.sec--last{ border-bottom:none }

.sec__head{ margin:0 0 24px }
.sec__mark{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
.sec__mark .lab{ color:var(--ink-3) }
.sec__mark::after{ content:''; flex:1; height:1px; background:var(--rule) }

.sec__h{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.85rem, 5.6vw, 3.05rem);
  line-height:1.02; letter-spacing:-.028em; text-wrap:balance;
  max-width:20ch;
}
.sec__lede{
  margin:16px 0 0; max-width:var(--measure);
  font-size:1.1rem; line-height:1.55; color:var(--ink-2);
}
@media (min-width:820px){ .sec__lede{ font-size:1.16rem } }

.prose{ max-width:var(--measure) }
.sub{
  margin:38px 0 14px; font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.24rem; letter-spacing:-.015em;
}
.note{
  max-width:var(--measure); font-size:.97rem; color:var(--ink-3); line-height:1.55;
}

/* Escape hatch. Lifted straight from the WSJ lottery-odds page:
   any stretch long enough to feel like work gets a way out. */
.hatch{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:34px; padding-top:16px; border-top:1px dashed var(--rule-2);
}
.hatch__lab{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-4);
}
.hatch a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;
}
.hatch a:hover{ color:var(--live-tx); border-color:var(--live-tx) }
.hatch--ink{ border-top-color:var(--rule-ink) }
.hatch--ink .hatch__lab{ color:var(--on-ink-3) }
.hatch--ink a{ color:var(--on-ink-2); border-bottom-color:var(--rule-ink) }
.hatch--ink a:hover{ color:var(--live); border-color:var(--live) }

/* ---------- Footnote markers + popover ---------- */
.fn{ font-size:.62em; line-height:0 }
.fn a{
  font-family:var(--mono); font-weight:600;
  text-decoration:none; color:var(--live-tx);
  padding:0 1px 0 2px; font-variant-numeric:lining-nums;
}
.fn a:hover{ text-decoration:underline }
/* The marker is tiny by nature and it is now a tap-to-open control, so
   give it a thumb-sized hit area without letting it affect layout. */
.fn a{ position:relative }
.fn a::after{
  content:''; position:absolute; left:50%; top:50%;
  width:40px; height:40px; transform:translate(-50%,-50%);
}
@media (hover:hover) and (pointer:fine){ .fn a::after{ width:22px; height:22px } }
.on-ink .fn a{ color:var(--live) }

.fnpop{
  position:absolute; z-index:95; max-width:min(340px, calc(100vw - 32px));
  background:var(--ink); color:var(--on-ink);
  border:1px solid var(--ink);
  padding:14px 16px; font-family:var(--read); font-size:.9rem; line-height:1.45;
  box-shadow:0 10px 30px rgba(20,19,15,.28);
}
.fnpop[hidden]{ display:none }
.fnpop__n{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-weight:600; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--live);
}
.fnpop cite{ font-style:normal; font-weight:600 }
.fnpop a{ color:var(--live); text-underline-offset:2px }
.fnpop__go{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-ink-3); text-decoration:none;
}
.fnpop__go:hover{ color:var(--live) }

/* ============================================================
   STATUS  —  the date-aware band. Reads as a stamped notice.
   ============================================================ */
.status{
  /* Bleeds by the same gutter as the ink bands so the two strips
     share a left edge. Inset by default it sat a gutter's width
     inside the dark band directly below it, which read as a
     misalignment rather than a choice. */
  margin:34px calc(var(--pad) * -1) 0;
  padding:22px var(--pad) 26px;
  background:var(--live-wash);
  border:1.5px solid var(--ink);
}
@media (min-width:820px){ .status{ padding:30px var(--pad) 34px } }
@media (min-width:1000px){ .status{ margin-right:0 } }
.status__kick{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-family:var(--mono); font-weight:600; font-size:.63rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--live-tx);
}
.status__kick .pulse{
  width:7px; height:7px; background:var(--live-tx); border-radius:99px;
  animation:blip 2.4s ease-in-out infinite;
}
.status__h{
  font-family:var(--display); font-weight:800; font-stretch:90%;
  font-size:clamp(1.3rem, 4.4vw, 1.85rem); line-height:1.1; letter-spacing:-.022em;
  max-width:26ch;
}
.status__body{ margin:12px 0 0; max-width:60ch; font-size:1.02rem; color:var(--ink-2) }
.status__do{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.status__do a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  background:var(--ink); color:var(--on-ink); text-decoration:none;
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.status__do a:hover{ background:var(--live-tx); color:var(--stock) }
.status__do a.alt{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink) }
.status__do a.alt:hover{ background:var(--ink); color:var(--on-ink) }

/* ============================================================
   STAKES  —  the ink band and the dot sequence.
   This is the linkable asset, so it gets the most room and the
   strongest contrast on the page.
   ============================================================ */
.stakes{
  position:relative;
  background:var(--ink); color:var(--on-ink);
  margin:0 calc(var(--pad) * -1);
  padding:52px var(--pad) 56px;
  border-top:2px solid var(--ink);
}
/* The quiz section now runs straight into this one. Two ink bands with no
   seam read as one very long dark stretch, so mark the join. */
.job + .stakes{ border-top:1px solid var(--rule-ink); padding-top:56px }
@media (min-width:820px){ .job + .stakes{ padding-top:80px } }
@media (min-width:820px){ .stakes{ padding:76px var(--pad) 80px } }
@media (min-width:1000px){
  /* Bleed left into the page gutter only. Bleeding right would put
     the band underneath the sticky rail. */
  .stakes{ margin-right:0 }
}
.stakes__h{
  font-family:var(--display); font-weight:800; font-stretch:86%;
  font-size:clamp(2.05rem, 7vw, 4.1rem); line-height:.98; letter-spacing:-.032em;
  text-transform:uppercase; max-width:16ch; margin:0;
}
.stakes__h em{ font-style:normal; color:var(--live) }
.stakes__lede{
  margin:20px 0 0; max-width:56ch;
  font-size:1.1rem; line-height:1.55; color:var(--on-ink-2);
}

/* The four-state figure */
.seq{ margin:38px 0 0 }
.seq__stage{
  position:relative;
  border:1px solid var(--rule-ink);
  background:rgba(245,242,233,.028);
}
.seq__canvas{ display:block; width:100%; height:auto }
/* Sits above the field, not on top of it. Overlaid on the dots it
   was unreadable, and it was covering the data to do it. */
.seq__read{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 24px; margin-bottom:14px;
}
.seq__count{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(1.6rem, 6vw, 2.7rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums; color:var(--live);
}
.seq__what{
  font-family:var(--read); font-size:1.02rem; line-height:1.4;
  color:var(--on-ink-2); max-width:38ch; text-align:right; flex:1 1 220px;
}
@media (max-width:640px){ .seq__what{ text-align:left } }

.seq__cap{
  margin:16px 0 0; font-family:var(--read); font-size:.93rem; line-height:1.5;
  color:var(--on-ink-3); max-width:64ch;
}

/* ---------- Turnout proportion ----------
   The 41,000 figure the dot field deliberately refuses to draw.
   A bar states a proportion instantly at any width, which is the
   one thing a field of two-pixel dots cannot do. */
.turnout{ margin:44px 0 0; border-top:1px solid var(--rule-ink); padding-top:26px }
.turnout__h{
  font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.18rem; letter-spacing:-.015em; margin:0 0 16px; color:var(--on-ink);
}
.turnout__bar{
  position:relative; height:56px; overflow:hidden;
  background:repeating-linear-gradient(
    90deg, rgba(245,242,233,.10) 0 2px, transparent 2px 7px);
  border:1px solid var(--rule-ink);
}
.turnout__in{
  position:absolute; inset:0 auto 0 0; width:var(--w);
  background:var(--live); border-right:1px solid var(--stock);
}
.turnout__keys{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:14px;
}
.turnout__key{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--read); font-size:.95rem; color:var(--on-ink-3);
}
.turnout__key::before{
  content:''; align-self:center; width:11px; height:11px; flex:0 0 auto;
  background:rgba(245,242,233,.16);
}
.turnout__key--on{ color:var(--on-ink) }
.turnout__key--on::before{ background:var(--live) }
.turnout__key b{
  font-family:var(--display); font-weight:800; font-stretch:90%;
  font-size:1.3rem; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums; color:var(--on-ink);
}
.turnout__key--on b{ color:var(--live) }

/* The threshold comparison, set as a form table */
.thresh{ margin:44px 0 0; border-top:1px solid var(--rule-ink); padding-top:26px }
.thresh__h{
  font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.18rem; letter-spacing:-.015em; margin:0 0 20px; color:var(--on-ink);
}
.tr{ display:grid; grid-template-columns:1fr; gap:6px; padding:14px 0; border-bottom:1px solid var(--rule-ink) }
@media (min-width:700px){
  .tr{ grid-template-columns:230px minmax(0,1fr) 96px; align-items:center; gap:20px }
}
.tr__lab{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--on-ink-2); text-transform:uppercase }
.tr__track{ position:relative; height:22px; background:rgba(245,242,233,.09) }
.tr__fill{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--on-ink-3) }
.tr--hot .tr__fill{ background:var(--live) }
.tr__val{
  font-family:var(--display); font-weight:800; font-stretch:90%; font-size:1.35rem;
  letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums;
  color:var(--on-ink); text-align:left;
}
@media (min-width:700px){ .tr__val{ text-align:right } }
.tr--hot .tr__val{ color:var(--live) }
.thresh__note{ margin:18px 0 0; max-width:64ch; font-size:.95rem; line-height:1.55; color:var(--on-ink-3) }

.punch{
  margin:40px 0 0; padding:0 0 0 20px; border-left:3px solid var(--live);
  font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:clamp(1.15rem, 3.6vw, 1.6rem); line-height:1.24; letter-spacing:-.018em;
  color:var(--on-ink); max-width:40ch;
}

/* ============================================================
   BALLOT FACSIMILE
   ============================================================ */
.ballot{
  background:var(--card); border:1.5px solid var(--ink);
  margin-top:8px;
}
.ballot__top{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-bottom:1.5px solid var(--ink); background:var(--stock-2);
}
.ballot__seal{
  width:34px; height:34px; flex:0 0 auto;
  border:1.5px solid var(--ink); border-radius:99px;
  display:grid; place-items:center; color:var(--ink);
}
.ballot__seal svg{ width:17px; height:17px }
.ballot__top b{ display:block; font-family:var(--display); font-weight:800; font-stretch:92%; font-size:.98rem; letter-spacing:-.01em }
.ballot__top small{
  display:block; margin-top:3px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}

.ballot__race{ padding:18px; border-bottom:1px dashed var(--rule-2) }
.ballot__race:last-of-type{ border-bottom:none }
.ballot__race--focus{ background:var(--stock) }
.ballot__q{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:0 0 4px;
  font-family:var(--display); font-weight:800; font-stretch:92%;
  font-size:1.04rem; letter-spacing:-.012em; text-transform:uppercase;
}
.ballot__q span{
  font-family:var(--mono); font-weight:600; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--live-tx);
  border:1px solid var(--live-tx); padding:3px 7px;
}
.ballot__hint{ margin:8px 0 0; font-size:.94rem; line-height:1.5; color:var(--ink-3); max-width:62ch }

.ballot__list{ list-style:none; margin:14px 0 0; padding:0; counter-reset:cand }
@media (min-width:760px){
  .ballot__list{ column-count:2; column-gap:34px }
}
.ballot__list li{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule);
  break-inside:avoid;
  font-family:var(--read); font-size:1rem;
}
.ballot__list li span{ flex:1 1 auto }
.tagx{
  font-family:var(--mono); font-weight:600; font-size:.56rem;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule-2); padding:2px 6px; white-space:nowrap;
}
.tagx--self{ color:var(--live-tx); border-color:var(--live-tx) }

.ballot__foot{
  margin:0; padding:14px 18px; border-top:1.5px solid var(--ink);
  background:var(--stock-2);
  font-family:var(--mono); font-size:.62rem; line-height:1.55;
  letter-spacing:.04em; color:var(--ink-3);
}

/* ---------- Notice blocks ---------- */
.notice{
  margin:26px 0 0; padding:18px 20px;
  border:1.5px solid var(--ink); border-left-width:6px;
  background:var(--card); max-width:var(--measure);
}
.notice strong{
  display:block; margin-bottom:7px;
  font-family:var(--display); font-weight:800; font-stretch:92%; font-size:1.02rem;
  letter-spacing:-.012em;
}
.notice span{ display:block; font-size:.98rem; line-height:1.55; color:var(--ink-2) }
.notice--warn{ border-left-color:var(--live-tx); background:var(--live-wash) }
.notice--good{ border-left-color:var(--ink) }

/* ---------- Disclosure ---------- */
.det{ margin:26px 0 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.det summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:15px 0; min-height:52px;
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.det summary::-webkit-details-marker{ display:none }
.det summary::before{
  content:'+'; flex:0 0 auto;
  width:20px; height:20px; display:grid; place-items:center;
  border:1.5px solid var(--ink-3); font-size:.85rem; line-height:1; color:var(--ink-2);
}
.det[open] summary::before{ content:'\2212' }
.det summary:hover{ color:var(--live-tx) }
.det summary:hover::before{ border-color:var(--live-tx); color:var(--live-tx) }
.det__in{ padding:4px 0 24px }

/* ---------- Table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--read); font-size:.97rem }
.tbl caption{
  text-align:left; padding-bottom:12px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.tbl th{
  text-align:left; padding:9px 10px 9px 0; border-bottom:1.5px solid var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
}
.tbl td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--rule); vertical-align:baseline }
.tbl td:nth-child(2),.tbl td:nth-child(3),
.tbl th:nth-child(2),.tbl th:nth-child(3){ text-align:right; padding-right:0; font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; font-size:.92rem }
.tbl tr.won td{ background:var(--live-wash) }

/* ---------- Numbered conditions ---------- */
.conds{ display:grid; gap:0; margin-top:8px; border-top:1.5px solid var(--ink); max-width:var(--measure) }
.cond{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule) }
.cond__n{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:1.5px solid var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.78rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.cond b{
  display:block; margin-bottom:6px;
  font-family:var(--display); font-weight:700; font-stretch:92%; font-size:1.06rem;
  letter-spacing:-.014em; line-height:1.25;
}
.cond p{ margin:0; font-size:.98rem; line-height:1.55; color:var(--ink-2) }

/* ---------- ID list, progressively disclosed ---------- */
.idlist{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0; max-width:var(--measure); border-top:1px solid var(--rule) }
@media (min-width:620px){ .idlist{ grid-template-columns:1fr 1fr; column-gap:var(--gut) } }
.idlist li{
  display:flex; align-items:center; gap:11px;
  padding:11px 0; border-bottom:1px solid var(--rule);
  font-size:.99rem;
}
.idlist li::before{
  content:''; flex:0 0 auto; width:17px; height:11px;
  border:1.5px solid var(--ink); border-radius:99px; background:var(--ink);
}
.idlist li[hidden]{ display:none }
.morebtn{
  appearance:none; -webkit-appearance:none; background:transparent;
  border:none; border-bottom:1px solid var(--rule-2);
  margin-top:16px; padding:10px 0; min-height:44px; cursor:pointer;
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
}
.morebtn:hover{ color:var(--live-tx); border-color:var(--live-tx) }

/* ---------- Days ---------- */
.days{ display:grid; gap:0; margin-top:8px; border:1.5px solid var(--ink) }
@media (min-width:760px){ .days{ grid-template-columns:1fr 1fr } }
.day{ padding:22px; border-bottom:1px solid var(--rule) }
@media (min-width:760px){ .day{ border-bottom:none; border-right:1px solid var(--rule) } .day:last-child{ border-right:none } }
.day:last-child{ border-bottom:none }
.day--main{ background:var(--ink); color:var(--on-ink) }
.day--main p{ color:var(--on-ink-2) }
.day--main .day__lab{ color:var(--on-ink-3) }
.day--main .day__date{ color:var(--live) }
.day--main .fn a{ color:var(--live) }
.day__lab{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-weight:600; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.day__date{
  display:block; margin-bottom:12px;
  font-family:var(--display); font-weight:800; font-stretch:90%;
  font-size:clamp(1.6rem, 5.2vw, 2.2rem); line-height:1; letter-spacing:-.028em;
  text-transform:uppercase; font-variant-numeric:lining-nums;
}
.day p{ margin:0; font-size:.98rem; line-height:1.55; color:var(--ink-2) }

/* ---------- Mini grid ---------- */
.minis{ display:grid; gap:0; margin-top:26px; border-top:1.5px solid var(--ink) }
@media (min-width:760px){ .minis{ grid-template-columns:1fr 1fr; column-gap:var(--gut) } .minis .mini:nth-child(2){ border-top:none } }
.mini{ padding:20px 0; border-bottom:1px solid var(--rule) }
.mini h3{
  margin:0 0 8px; font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.06rem; letter-spacing:-.014em;
}
.mini p{ margin:0; font-size:.97rem; line-height:1.55; color:var(--ink-2) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 20px; cursor:pointer;
  background:var(--ink); color:var(--on-ink); border:1.5px solid var(--ink);
  text-decoration:none; font-family:var(--mono); font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--live-tx); border-color:var(--live-tx); color:var(--stock) }
.btn--ghost{ background:transparent; color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--on-ink) }
.btn--sm{ min-height:40px; padding:0 14px; font-size:.66rem; margin-top:14px }
.btn[disabled]{ opacity:.35; cursor:not-allowed }
.btn[disabled]:hover{ background:var(--ink); border-color:var(--ink); color:var(--on-ink) }
.btn--onink{ background:var(--live); border-color:var(--live); color:var(--ink) }
.btn--onink:hover{ background:var(--on-ink); border-color:var(--on-ink); color:var(--ink) }
.btn--outink{ background:transparent; border-color:var(--rule-ink); color:var(--on-ink) }
.btn--outink:hover{ background:var(--on-ink); border-color:var(--on-ink); color:var(--ink) }

/* ---------- Timeline as a rail ---------- */
.tl{ list-style:none; margin:16px 0 0; padding:0; border-top:1.5px solid var(--ink) }
.tl li{
  display:grid; grid-template-columns:16px 92px minmax(0,1fr); align-items:baseline;
  gap:14px; padding:14px 0; border-bottom:1px solid var(--rule);
}
.tl li::before{
  content:''; width:9px; height:9px; border:1.5px solid var(--ink-3);
  border-radius:99px; align-self:center;
}
.tl__d{
  font-family:var(--mono); font-weight:600; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  font-variant-numeric:tabular-nums lining-nums;
}
.tl__t{ font-size:.99rem; line-height:1.45 }
.tl li.past{ color:var(--ink-4) }
.tl li.past::before{ background:var(--ink-4); border-color:var(--ink-4) }
.tl li.past .tl__d,.tl li.past .tl__t{ color:var(--ink-4); text-decoration:line-through; text-decoration-thickness:1px }
.tl li.next::before{ background:var(--live); border-color:var(--live) }
.tl li.next .tl__d{ color:var(--live-tx) }
.tl li.next .tl__t{ font-weight:600 }

/* ---------- Map + bounds ---------- */
.mapgrid{ display:grid; gap:var(--gut); margin-top:8px }
@media (min-width:860px){ .mapgrid{ grid-template-columns:1.3fr 1fr; align-items:start } }
.mapgrid__img{ position:relative; display:block; border:1.5px solid var(--ink); text-decoration:none }
.mapgrid__img img{ width:100%; height:auto; filter:saturate(.72) contrast(1.04) }
.mapgrid__tag{
  position:absolute; left:0; bottom:0;
  background:var(--ink); color:var(--on-ink);
  padding:9px 13px; font-family:var(--mono); font-weight:600; font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase;
}
.mapgrid__img:hover .mapgrid__tag{ background:var(--live); color:var(--ink) }
.bounds{ border-top:1.5px solid var(--ink) }
.bound{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--rule) }
.bound__dir{
  font-family:var(--mono); font-weight:600; font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--live-tx);
}
.bound span:last-child{ font-size:.97rem; line-height:1.45 }

/* ============================================================
   THE JOB  —  ink band, jurisdiction sorter
   ============================================================ */
.job{
  background:var(--ink); color:var(--on-ink);
  margin:0 calc(var(--pad) * -1);
  padding:52px var(--pad) 56px;
}
@media (min-width:820px){ .job{ padding:76px var(--pad) 80px } }
@media (min-width:1000px){ .job{ margin-right:0 } }
.on-ink .sec__h,.job .sec__h{ color:var(--on-ink) }
.on-ink .sec__lede,.job .sec__lede{ color:var(--on-ink-2) }
.on-ink .sec__mark::after,.job .sec__mark::after{ background:var(--rule-ink) }
.on-ink .sec__mark .lab,.job .sec__mark .lab{ color:var(--on-ink-3) }
.on-ink .sub,.job .sub{ color:var(--on-ink) }

/* The sorter: ten calls, tap the level of government */
.sorter{ margin:36px 0 0; border:1px solid var(--rule-ink) }
.sorter__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; padding:14px 18px; border-bottom:1px solid var(--rule-ink);
  background:rgba(245,242,233,.04);
}
.sorter__title{
  font-family:var(--mono); font-weight:600; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-2);
}
.sorter__score{
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.1em; color:var(--live); font-variant-numeric:tabular-nums lining-nums;
}
.sorter__q{ padding:26px 18px 22px }
@media (min-width:760px){ .sorter__q{ padding:34px 28px 28px } }
.sorter__prompt{
  font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:clamp(1.14rem, 3.8vw, 1.6rem); line-height:1.2; letter-spacing:-.02em;
  color:var(--on-ink); margin:0 0 20px; max-width:32ch; min-height:2.4em;
}
.sorter__opts{ display:grid; gap:8px }
@media (min-width:640px){ .sorter__opts{ grid-template-columns:repeat(3,1fr) } }
.sopt{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent; border:1.5px solid var(--rule-ink); color:var(--on-ink);
  min-height:52px; padding:10px 14px; text-align:left;
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.sopt:hover:not(:disabled){ border-color:var(--on-ink); background:rgba(245,242,233,.06) }
.sopt:disabled{ cursor:default }
.sopt .oval{ border-color:var(--on-ink-3) }
.sopt.is-right{ background:var(--live); border-color:var(--live); color:var(--ink) }
.sopt.is-right .oval{ background:var(--ink); border-color:var(--ink) }
.sopt.is-wrong{ border-color:rgba(245,242,233,.5); color:var(--on-ink-3); text-decoration:line-through }
.sopt.is-dim{ opacity:.4 }

.sorter__ans{
  margin:18px 0 0; padding:16px 18px;
  border-left:3px solid var(--live); background:rgba(245,242,233,.05);
  font-family:var(--read); font-size:.99rem; line-height:1.55; color:var(--on-ink-2);
}
.sorter__ans[hidden]{ display:none }
.sorter__ans b{ color:var(--on-ink) }
.sorter__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-top:1px solid var(--rule-ink);
}
.sorter__dots{ display:flex; gap:5px }
.sorter__dots i{ width:9px; height:9px; border:1px solid var(--on-ink-3); border-radius:99px }
.sorter__dots i.done{ background:var(--on-ink-3) }
.sorter__dots i.right{ background:var(--live); border-color:var(--live) }
.sorter__dots i.now{ border-color:var(--live); box-shadow:0 0 0 2px rgba(182,121,31,.35) }

/* Static three-column reference, kept beneath the sorter */
.who{ display:grid; gap:0; margin-top:8px; border-top:1px solid var(--rule-ink) }
@media (min-width:860px){ .who{ grid-template-columns:repeat(3,1fr); column-gap:var(--gut) } }
.who__col{ padding:22px 0; border-bottom:1px solid var(--rule-ink) }
.who__col h3{
  margin:0 0 4px; font-family:var(--display); font-weight:800; font-stretch:92%;
  font-size:1.08rem; letter-spacing:-.014em; color:var(--on-ink); text-transform:uppercase;
}
.who__sub{
  margin:0 0 14px; font-family:var(--mono); font-size:.61rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--live);
}
.who__col--prov .who__sub{ color:var(--on-ink-3) }
.who__col ul{ list-style:none; margin:0; padding:0 }
.who__col li{
  padding:7px 0 7px 18px; position:relative;
  font-size:.96rem; line-height:1.45; color:var(--on-ink-2);
}
.who__col li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--on-ink-3);
}
.who__col--prov li{ color:var(--on-ink-3) }

/* Inherited responsibilities */
.inherit{ margin:44px 0 0; border-top:1px solid var(--rule-ink); padding-top:30px }
.inherit__list{ list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--rule-ink) }
.inherit__list li{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding:14px 0; border-bottom:1px solid var(--rule-ink);
}
@media (min-width:700px){ .inherit__list li{ grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:baseline } }
.inherit__list b{
  font-family:var(--mono); font-weight:600; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--live);
}
.inherit__list span{ font-size:.98rem; line-height:1.5; color:var(--on-ink-2) }

/* ---------- Questions to ask ---------- */
.asks{ list-style:none; counter-reset:q; margin:8px 0 0; padding:0; border-top:1.5px solid var(--ink); max-width:var(--measure) }
.asks li{
  counter-increment:q; position:relative;
  padding:18px 0 18px 46px; border-bottom:1px solid var(--rule);
  font-size:1.02rem; line-height:1.5;
}
.asks li::before{
  content:counter(q,decimal-leading-zero); position:absolute; left:0; top:19px;
  font-family:var(--mono); font-weight:600; font-size:.72rem; color:var(--ink-4);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ---------- Plan form ---------- */
.plan{ margin-top:8px; border-top:1.5px solid var(--ink); max-width:var(--measure) }
.plan__q{ border:none; border-bottom:1px solid var(--rule); margin:0; padding:22px 0 }
.plan__q legend{
  display:flex; align-items:center; gap:12px; padding:0; margin-bottom:14px;
  font-family:var(--display); font-weight:700; font-stretch:92%;
  font-size:1.06rem; letter-spacing:-.014em;
}
.plan__n{
  flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center;
  border:1.5px solid var(--ink);
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.plan__opts{ display:flex; flex-wrap:wrap; gap:8px }
.plan__opts label{ position:relative; display:block }
.plan__opts input{ position:absolute; opacity:0; width:0; height:0 }
.plan__opts span{
  display:inline-flex; align-items:center; gap:10px;
  min-height:46px; padding:0 16px; cursor:pointer;
  border:1.5px solid var(--rule-2);
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.plan__opts span::before{
  content:''; width:17px; height:11px; flex:0 0 auto;
  border:1.5px solid var(--ink-3); border-radius:99px;
}
.plan__opts label:hover span{ border-color:var(--ink) }
.plan__opts input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--on-ink) }
.plan__opts input:checked + span::before{ background:var(--live); border-color:var(--live) }
.plan__opts input:focus-visible + span{ outline:2px solid var(--live-tx); outline-offset:3px }

.plan__out{
  display:block; margin:24px 0 0; padding:20px;
  border:1.5px solid var(--ink); border-left-width:6px; background:var(--card);
  font-size:1.02rem; line-height:1.55;
}
.plan__out[hidden]{ display:none }
.plan__acts{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 14px }

/* ---------- Share ---------- */
.share{
  background:var(--ink); color:var(--on-ink);
  margin:0 calc(var(--pad) * -1);
  padding:52px var(--pad) 56px;
}
@media (min-width:820px){ .share{ padding:70px var(--pad) 74px } }
@media (min-width:1000px){ .share{ margin-right:0 } }
.share__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
.share__msg{
  margin:16px 0 0; min-height:1.4em;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--live);
}
.det--ink{ border-color:var(--rule-ink); margin-top:30px }
.det--ink summary{ color:var(--on-ink-2) }
.det--ink summary::before{ border-color:var(--on-ink-3); color:var(--on-ink-2) }
.det--ink summary:hover,.det--ink summary:hover::before{ color:var(--live); border-color:var(--live) }
.code{
  margin:0 0 16px; padding:14px 16px; overflow-x:auto;
  background:rgba(245,242,233,.06); border:1px solid var(--rule-ink);
  font-family:var(--mono); font-size:.74rem; line-height:1.6; color:var(--on-ink-2);
  white-space:pre-wrap; word-break:break-word;
}

/* ---------- Sources ---------- */
.refs{ list-style:none; counter-reset:r; margin:8px 0 0; padding:0; border-top:1.5px solid var(--ink) }
@media (min-width:900px){ .refs{ column-count:2; column-gap:var(--gut) } }
.refs li{
  counter-increment:r; position:relative; break-inside:avoid;
  padding:13px 0 13px 40px; border-bottom:1px solid var(--rule);
}
.refs li::before{
  content:counter(r); position:absolute; left:0; top:14px;
  width:24px; height:24px; display:grid; place-items:center;
  border:1px solid var(--rule-2);
  font-family:var(--mono); font-weight:600; font-size:.66rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums;
}
.refs cite{ font-style:normal; font-size:.97rem; line-height:1.45; display:block }
.refs cite a{ text-decoration-color:var(--rule-2) }
.refs .rnote{
  display:block; margin-top:5px;
  font-family:var(--read); font-size:.88rem; line-height:1.5; color:var(--ink-3);
}
.refs .back{
  font-family:var(--mono); font-size:.68rem; text-decoration:none; color:var(--ink-4);
  margin-left:4px;
}
.refs .back:hover{ color:var(--live-tx) }

.endnote{ margin-top:38px; padding:22px; border:1.5px solid var(--ink); background:var(--card); max-width:var(--measure) }
.endnote + .endnote{ margin-top:16px }
.endnote h3{
  margin:0 0 8px; font-family:var(--display); font-weight:800; font-stretch:92%;
  font-size:1.06rem; letter-spacing:-.014em; text-transform:uppercase;
}
.endnote p{ margin:0; font-size:.98rem; line-height:1.55; color:var(--ink-2) }

/* ============================================================
   RAIL  —  desktop only
   ============================================================ */
.rail{ display:none }
@media (min-width:1000px){
  .rail{ display:block; padding-top:44px }
  .rail__stick{ position:sticky; top:86px }
}
.rail__count{ border:1.5px solid var(--ink); padding:16px; margin-bottom:22px }
.rail__kick{
  margin:0 0 10px; font-family:var(--mono); font-weight:600; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.rail__big{
  margin:0; font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:3.1rem; line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:lining-nums tabular-nums; color:var(--ink);
}
.rail__sub{ margin:8px 0 0; font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.rail__nav{ display:flex; flex-direction:column; border-top:1px solid var(--rule) }
.rail__nav a{
  padding:10px 0 10px 14px; border-bottom:1px solid var(--rule);
  border-left:2px solid transparent;
  text-decoration:none; color:var(--ink-3);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  transition:color .14s ease, border-color .14s ease;
}
.rail__nav a:hover{ color:var(--ink) }
.rail__nav a.on{ color:var(--ink); border-left-color:var(--live); font-weight:600 }

/* ============================================================
   FOOTER + MOBILE DOCK
   ============================================================ */
.colophon{ background:var(--ink); color:var(--on-ink-2); padding:34px 0 40px; margin-top:0 }
.colophon__row{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center }
.colophon a{
  color:var(--on-ink-2); text-decoration:none;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
}
.colophon a:hover{ color:var(--live) }
.colophon__fine{
  margin:20px 0 0; max-width:70ch;
  font-family:var(--mono); font-size:.62rem; line-height:1.8;
  letter-spacing:.05em; color:var(--on-ink-3);
}

.dock{
  position:fixed; inset:auto 0 0 0; z-index:85;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--ink); border-top:2px solid var(--live);
}
@media (min-width:1000px){ .dock{ display:none } }
.dock a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:64px; padding:8px 4px; text-decoration:none; color:var(--on-ink-2);
  font-family:var(--mono); font-weight:600; font-size:.58rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.dock a svg{ width:18px; height:18px }
.dock a:active,.dock a:hover{ color:var(--live) }

/* ============================================================
   PRINT  —  people genuinely print voting plans
   ============================================================ */
@media print{
  .mast,.dock,.rail,.progress,.index,.share,.hatch,.seq__steps,.sorter{ display:none!important }
  body{ background:#fff; color:#000; padding:0; font-size:11pt }
  .stakes,.job{ background:#fff; color:#000; margin:0; padding:12pt 0; border:none }
  .stakes__h,.punch,.sec__h,.who__col h3{ color:#000 }
  .sec{ page-break-inside:avoid; border-bottom:1px solid #ccc }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:8pt; word-break:break-all }
  .shell{ display:block }
}