/* ============================================================
   THE DIMAS BOARD — Washington State Republican Party
   Design: investigator's corkboard. Pinned documents, tape, red string.
   Her case is a pile of receipts that connect — so the site is the board.
   ============================================================ */

:root{
  --cork:#8a5f33;
  --cork-2:#6f4a25;
  --paper:#f6f2e6;
  --paper-2:#eae3d1;
  --card:#fdfaf1;
  --ink:#1a1712;
  --string:#c8102e;
  --string-2:#9d0c24;
  --hi:#ffe14a;
  --muted:#6f6656;
  --tape:rgba(238,232,205,.72);

  --hand:'Permanent Marker',cursive;
  --script:'Caveat',cursive;
  --type:'Special Elite',Courier,monospace;
  --display:'Archivo Black',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --ease:cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{overscroll-behavior-x:none}
body{
  margin:0;color:var(--ink);overflow-x:clip;
  background:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,canvas,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

.skip{position:absolute;top:.5rem;left:.5rem;z-index:999;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}
:focus-visible{outline:3px solid var(--string);outline-offset:3px}

/* ---------- cork ---------- */
.cork{
  position:relative;
  background-color:var(--cork);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 12%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 78%, rgba(0,0,0,.13) 0 1.5px, transparent 3px),
    radial-gradient(circle at 88% 55%, rgba(0,0,0,.11) 0 2px, transparent 3px),
    radial-gradient(circle at 8% 88%, rgba(255,255,255,.05) 0 1.5px, transparent 3px),
    linear-gradient(160deg,#96683a,#7b512a 55%,#8a5f33);
  background-size:23px 23px,31px 31px,17px 17px,41px 41px,29px 29px,100% 100%;
  box-shadow:inset 0 0 120px rgba(0,0,0,.42);
}
.cork::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.35) 100%);
}
.cork-frame{border-top:10px solid #4a2f16;border-bottom:10px solid #4a2f16}

/* ---------- pinned things ---------- */
.pin{
  position:relative;background:var(--card);
  box-shadow:0 14px 28px rgba(0,0,0,.42),0 2px 0 rgba(0,0,0,.18);
}
.pin::before{                       /* the pushpin */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff6b5e,#c8102e 62%,#7d0a1c);
  box-shadow:0 3px 6px rgba(0,0,0,.5);z-index:4;
}
.pin.tape::before{display:none}
.pin.tape::after{                   /* masking tape instead of a pin */
  content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:104px;height:30px;background:var(--tape);
  box-shadow:0 2px 5px rgba(0,0,0,.28);z-index:4;
}
.tilt-l{transform:rotate(-1.8deg)}
.tilt-r{transform:rotate(1.5deg)}
.tilt-l2{transform:rotate(-.9deg)}
.tilt-r2{transform:rotate(2.4deg)}

/* handwriting on the board */
.scrawl{
  font-family:var(--hand);color:var(--string);
  text-transform:uppercase;line-height:1.05;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.scrawl-note{
  font-family:var(--script);color:#2b2419;font-size:1.35rem;line-height:1.15;
  transform:rotate(-2deg);
}

/* ============================================================
   THE BOARD (hero)
   ============================================================ */
.board{padding:0;overflow:hidden}
.board-inner{position:relative;padding:2.6rem 0 3.4rem}
.board-title{position:relative;z-index:7;margin:0}
.board-title .kick{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:#ffd9a8;margin-bottom:.7rem;
}
.board-title h1{
  margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem);line-height:.98;letter-spacing:-.025em;
  color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.42);
}
.board-title h1 em{font-style:normal;color:var(--hi)}
.board-title p{
  margin:.9rem 0 0;max-width:44ch;color:#f4e6d2;font-size:1.04rem;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* the string layer sits over the cork, under the labels */
/* Behind the cards (grid is z-index 5): the string shows across the cork gaps
   and passes behind each document, so it never sits on top of body text.
   The pin heads live inside the cards' own stacking context, so they stay visible. */
.strings{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.strings path{
  fill:none;stroke:var(--string);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
/* pin heads ride on top of the string where they meet */
.strings circle{fill:#c8102e;stroke:#7d0a1c;stroke-width:1.5;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}

.board-grid{
  position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem;
  margin-top:.6rem;
}

/* Hub-and-spoke: she sits at the top centre and every document hangs off her.
   Explicit placement so the fan reads the same at every desktop width. */
/* title fills the top-left, she pins top-right, evidence cascades below-left */
.board-grid > *:nth-child(1){grid-row:1;grid-column:1 / span 7;align-self:center}  /* title  */
.board-grid > *:nth-child(2){grid-row:1;grid-column:9 / span 4;justify-self:end;max-width:228px}
.board-grid > *:nth-child(4){grid-row:2;grid-column:1 / span 4}   /* Aug 2021   */
.board-grid > *:nth-child(3){grid-row:2;grid-column:5 / span 8}   /* the post   */
.board-grid > *:nth-child(5){grid-row:3;grid-column:1 / span 4}   /* Oct 2024   */
.board-grid > *:nth-child(6){grid-row:3;grid-column:5 / span 4}   /* Jan 2025   */
.board-grid > *:nth-child(7){grid-row:3;grid-column:9 / span 4}   /* Apr 2025   */
.board-grid{row-gap:2.6rem}

/* the mugshot */
.ev-photo{align-self:start}
.ev-photo .pin{padding:.55rem .55rem 0}
.ev-photo img{width:100%;height:auto;display:block}
.ev-photo figcaption{
  font-family:var(--type);font-size:.74rem;text-align:center;
  padding:.5rem .3rem .6rem;color:#3a3226;
}
/* the real enforcement case numbers, printed like a file label */
.ev-cases{
  display:block;margin-top:.45rem;padding-top:.4rem;
  border-top:1px solid rgba(26,23,18,.28);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:#8a2230;
}

/* the quote, torn from a printout */
.ev-quote{}
.ev-quote .pin{padding:1.5rem 1.6rem 1.3rem}
.ev-quote blockquote{
  margin:0;font-family:var(--type);font-size:clamp(1.02rem,2vw,1.32rem);
  line-height:1.5;color:#211d16;
}
.ev-quote .hl{background:var(--hi);padding:0 .12em;box-decoration-break:clone}
.ev-quote cite{
  display:block;margin-top:1rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-style:normal;
}
.ev-quote .stampword{
  position:absolute;right:-.4rem;bottom:-1.1rem;transform:rotate(-7deg);
  border:4px solid var(--string);color:var(--string);
  font-family:var(--display);font-size:.92rem;text-transform:uppercase;
  padding:.3rem .7rem;background:rgba(253,250,241,.82);
  letter-spacing:.02em;
}

/* the four case cards */
.ev-case{}
.ev-case .pin{padding:1rem 1.1rem 1.1rem;min-height:100%}
.ev-case .no{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;color:var(--string);
  font-weight:700;display:block;margin-bottom:.4rem;
}
.ev-case h3{
  margin:0 0 .4rem;font-family:var(--display);text-transform:uppercase;
  font-size:1rem;line-height:1.1;letter-spacing:-.01em;
}
.ev-case p{margin:0;font-family:var(--type);font-size:.82rem;line-height:1.45;color:#393226}
.ev-case.now .pin{background:#fff6f2;outline:3px solid var(--string);outline-offset:-3px}
.ev-case.now .no{color:#8a0f22}

/* scrawled annotations */
.ann{position:absolute;z-index:7;pointer-events:none}
/* bottom-right cork — the only patch clear of her card, the strings and the CTAs */
.ann-1{bottom:2rem;right:2.5rem;top:auto;font-size:clamp(.95rem,2.1vw,1.45rem);transform:rotate(-5deg)}
/* Each current-cycle case carries its own stamp, on its own card — a stamp
   floating in the gap between two cards reads as a label, not a stamp. */
.ev-case.now .pin::after{
  content:"This election";
  position:absolute;right:-.55rem;bottom:-.75rem;transform:rotate(-6deg);
  border:3px solid var(--string);color:var(--string);
  background:rgba(253,250,241,.92);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:.64rem;line-height:1;padding:.3rem .55rem .26rem;
  box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.circle-note{
  border:4px solid var(--string);border-radius:50%;padding:.5rem 1rem;
  background:transparent;
}

.board-cta{position:relative;z-index:7;display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.6rem;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .16s var(--ease),box-shadow .16s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--string)}
.btn-primary{background:var(--string);border-color:#7d0a1c;color:#fff}
.btn-primary:hover{box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.btn-ghost{background:rgba(253,250,241,.92);color:var(--ink);border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink)}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.section-head{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 1rem;
}
.section-head .red{color:var(--string)}
.section-sub{font-size:clamp(1rem,1.8vw,1.18rem);max-width:60ch;margin:0 0 2.4rem;color:#42392c}
.src{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:.9rem 0 0;line-height:1.5}
.red{color:var(--string)}
mark{background:var(--hi);color:var(--ink);padding:0 .12em}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:.7rem 0;touch-action:pan-y}
.ticker-track{display:flex;gap:1.5rem;align-items:center;white-space:nowrap;
  width:max-content;animation:roll 52s linear infinite}
.ticker-track span{font-family:var(--mono);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase}
.ticker-track i{font-style:normal;color:var(--string)}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   AT A GLANCE — index cards
   ============================================================ */
.glance{padding:4.4rem 0;background:var(--paper-2)}
.stat-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:2.4rem}
.stat{background:var(--card);padding:1.7rem 1.3rem 1.5rem;position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.14);border:1px solid rgba(26,23,18,.14)}
.stat:nth-child(odd){transform:rotate(-.8deg)}
.stat:nth-child(even){transform:rotate(.7deg)}
.stat::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff6b5e,#c8102e 62%,#7d0a1c);
  box-shadow:0 2px 5px rgba(0,0,0,.4)}
.stat-num{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.9rem);line-height:.9;
  color:var(--string);letter-spacing:-.03em}
.stat-label{font-family:var(--type);font-size:.86rem;color:#3a3226;margin-top:.7rem;line-height:1.4}

/* ============================================================
   HER WORDS
   ============================================================ */
.feature{padding:4.6rem 0}
.exhibit-grid{display:grid;grid-template-columns:1fr .9fr;gap:3rem;align-items:start}
.exhibit-copy h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.6rem,3.8vw,2.6rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 1.1rem}
.exhibit-copy p{font-size:1.04rem;margin:0 0 1.1rem}
.quote-block{border-left:6px solid var(--string);padding:1rem 0 1rem 1.3rem;margin:1.5rem 0;
  font-family:var(--type);font-size:clamp(1.02rem,2.1vw,1.28rem);line-height:1.45}
.law{background:var(--paper-2);border:2px solid var(--ink);padding:1.2rem 1.4rem;margin-top:1.5rem}
.law h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;margin:0 0 .5rem;
  text-transform:uppercase;color:var(--string)}
.law p{margin:0;font-size:.96rem}
.shot{position:relative;background:#fff;padding:.5rem;
  box-shadow:0 16px 30px rgba(0,0,0,.24);transform:rotate(-1.2deg)}
/* tape sits right of centre so it never lands on the label */
.shot::before{content:"";position:absolute;top:-12px;left:auto;right:2.4rem;transform:rotate(-4deg);
  width:110px;height:30px;background:var(--tape);box-shadow:0 2px 5px rgba(0,0,0,.24);z-index:3}
/* the exhibit label — its own red tab, clear of the tape */
.shot-tag{
  position:absolute;top:-.85rem;left:1rem;z-index:4;
  background:var(--string);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.38rem .8rem;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.32);
}
.shot img{width:100%;height:auto;display:block}
.shot-cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:1rem;text-align:center}

/* ============================================================
   LEDGER
   ============================================================ */
.ledger{padding:4.6rem 0;background:var(--paper-2)}
.ledger-frame{background:var(--card);border:1px solid rgba(26,23,18,.2);
  box-shadow:0 14px 30px rgba(0,0,0,.16);position:relative}
.ledger-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.8rem 1.1rem;border-bottom:2px solid var(--ink);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.ledger-head b{color:var(--string)}
#ledgerCanvas{width:100%;height:auto;display:block}
.ledger-foot{padding:.8rem 1.1rem;border-top:1px solid rgba(26,23,18,.2);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.ledger-foot em{font-style:normal;margin-left:auto}
.lg-pen,.lg-warn{width:11px;height:11px;display:inline-block;flex:0 0 auto}
.lg-pen{background:var(--string)}
.lg-warn{background:var(--ink)}
.lg-item{display:inline-flex;align-items:center;gap:.5rem}

.unpaid-punch{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-top:1.6rem}
.up-side{background:var(--card);border:2px solid var(--ink);padding:1.3rem 1.4rem}
.up-side.bad{border-color:var(--string)}
.up-tag{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.up-side b{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1rem,2.5vw,1.55rem);line-height:1.06;letter-spacing:-.02em}
.up-side.bad b{color:var(--string)}
.up-note{display:block;margin-top:.5rem;font-size:.89rem;color:#42392c}
.up-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:0 .4rem}
.up-dist{font-family:var(--hand);font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1;color:var(--string)}
.up-line{width:3px;flex:1;min-height:26px;background:var(--string)}
.up-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   CASE CARDS
   ============================================================ */
.cases{padding:4.6rem 0}
.cards{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.2rem}
.card{background:var(--card);padding:1.6rem 1.4rem;position:relative;
  border:1px solid rgba(26,23,18,.16);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.8deg)}
.card::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff6b5e,#c8102e 62%,#7d0a1c);
  box-shadow:0 2px 5px rgba(0,0,0,.4)}
.card-no{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--string);
  font-weight:700;display:block;margin-bottom:.6rem}
.card h3{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;
  line-height:1.1;letter-spacing:-.015em;margin:0 0 .6rem}
.card p{margin:0;font-family:var(--type);font-size:.88rem;line-height:1.5}
.card.is-now{background:#fff6f2;outline:3px solid var(--string);outline-offset:-3px}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-sec{padding:4.6rem 0;background:var(--paper-2)}
.timeline{list-style:none;margin:2rem 0 0;padding:0;max-width:820px;border-top:1px solid rgba(26,23,18,.22)}
.timeline li{display:grid;grid-template-columns:140px 1fr;gap:1.4rem;padding:1.2rem 0;
  border-bottom:1px solid rgba(26,23,18,.22)}
.tl-date{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--string);font-weight:700;padding-top:.2rem}
.timeline p{margin:0;font-size:1rem}
.timeline .tl-key{background:rgba(255,225,74,.3)}

/* ============================================================
   DOCUMENTS
   ============================================================ */
.docs{padding:4.6rem 0;background:var(--ink);color:var(--paper)}
.docs .section-head{color:var(--paper)}
.docs .section-sub{color:#b9b1a1}
.doc-list{display:grid;border-top:1px solid rgba(246,242,230,.22)}
.doc-item{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem 1.2rem;align-items:center;
  text-decoration:none;padding:1.2rem .2rem;border-bottom:1px solid rgba(246,242,230,.22);
  transition:background .15s,padding-left .15s}
.doc-item:hover{background:rgba(246,242,230,.06);padding-left:.9rem}
.doc-tag{grid-column:1;grid-row:1/3;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);background:var(--hi);padding:.35rem .55rem;
  font-weight:700;align-self:center;white-space:nowrap}
.doc-title{grid-column:2;grid-row:1;font-weight:700;font-size:1rem}
.doc-meta{grid-column:2;grid-row:2;font-family:var(--mono);font-size:.64rem;color:#a59d8d}
.doc-arrow{grid-column:3;grid-row:1/3;font-size:1.4rem;color:var(--hi);align-self:center}

/* ============================================================
   VOTE NO
   ============================================================ */
.voteno{background:var(--string);color:#fff;padding:4.2rem 0;text-align:center}
.vn-line{margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(3rem,12vw,8rem);line-height:.92;letter-spacing:-.03em}
.vn-name{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.3rem,4.4vw,2.8rem);line-height:1.04;margin:.5rem 0 .3rem;letter-spacing:-.02em}
.vn-dist{font-family:var(--mono);font-size:clamp(.7rem,1.8vw,.92rem);letter-spacing:.16em;
  text-transform:uppercase;margin:0;color:rgba(255,255,255,.85)}
.vn-date{font-family:var(--body);font-weight:700;font-size:clamp(.92rem,2vw,1.1rem);margin:1.3rem 0 0}
.vn-date b{border-bottom:3px solid #fff;padding-bottom:2px}

/* ============================================================
   BALLOT
   ============================================================ */
.ballot{padding:4.6rem 0}
.ballot-card{border:3px solid var(--ink);background:#fff;max-width:840px;
  box-shadow:0 14px 30px rgba(0,0,0,.16)}
.bc-head{background:var(--ink);color:var(--hi);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.7rem 1.1rem;font-weight:700}
.bc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:1rem;align-items:center;
  padding:1.4rem 1.2rem;border-bottom:2px solid rgba(26,23,18,.16)}
.bc-row:last-child{border-bottom:0}
.bc-box{width:36px;height:30px;border:3px solid var(--ink);display:grid;place-items:center;flex:0 0 auto}
/* she gets the case-file treatment; Gloria does not */
.bc-photo{width:70px;height:70px;object-fit:cover;border:3px solid var(--ink);flex:0 0 auto}
.bc-photo-no{filter:grayscale(1) contrast(1.2) brightness(.9);opacity:.8}
.bc-photo-yes{border-color:var(--string);object-position:50% 22%}
.bc-checked svg{width:24px;height:20px;overflow:visible}
.bc-name{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2.8vw,1.55rem);line-height:1.06;letter-spacing:-.02em}
.bc-cand{display:block}
.bc-name em{display:block;font-family:var(--body);font-style:normal;font-weight:600;
  font-size:.75rem;text-transform:none;color:var(--muted);margin-top:.2rem;letter-spacing:0}
.bc-verdict{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;text-align:right;line-height:1.5}
.bc-no{background:rgba(200,16,46,.05)}
.bc-no .bc-cand{text-decoration:line-through;text-decoration-color:var(--string);
  text-decoration-thickness:4px;color:#8b8272}
.bc-no .bc-name em{text-decoration:none}
.bc-no .bc-verdict{color:var(--string)}
.bc-yes .bc-verdict{color:var(--ink)}
.bc-yes .bc-verdict b{font-family:var(--display);font-size:1.18rem;color:var(--string);
  display:inline-block;vertical-align:-2px;margin:0 .1em}
.ballot-cta{margin:2.2rem 0 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.ballot-cta span{font-size:.9rem;color:#42392c;max-width:34ch}

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer{padding:3.6rem 0;background:var(--paper-2)}
.closer-grid{display:grid;gap:2rem;grid-template-columns:1.1fr 1fr;align-items:center}
/* the ballot-check motif, sized — without this the raw SVG renders enormous */
.closer-copy{display:flex;gap:1.3rem;align-items:center}
.check{flex:0 0 auto;width:58px;color:var(--ink)}
.check svg{width:100%;height:auto;overflow:visible}
.closer-copy h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.2rem);line-height:1.06;margin:0;letter-spacing:-.02em}
.closer-note{border:2px solid var(--ink);background:#fff;padding:1.3rem 1.4rem}
.closer-note p{margin:0;font-size:.95rem}
.site-footer{background:var(--ink);color:#a59d8d;padding:2.4rem 0 3rem;font-family:var(--mono)}
.paidfor{margin:0 0 .8rem;font-size:.74rem;letter-spacing:.03em;color:#d9d3c5;line-height:1.7}
.foot-meta{margin:0;font-size:.66rem;letter-spacing:.03em;line-height:1.7}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .46s var(--ease),transform .46s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.05s}
.reveal[data-d="2"]{transition-delay:.10s}
.reveal[data-d="3"]{transition-delay:.16s}
.reveal[data-d="4"]{transition-delay:.22s}
.reveal[data-d="5"]{transition-delay:.28s}

/* board nodes are revealed by the string sequencer, one at a time */
.node{opacity:0}
.node.lit{animation:drop .4s cubic-bezier(.2,1.3,.4,1) both}
.node.tilt-l.lit{animation-name:dropL}
.node.tilt-r.lit{animation-name:dropR}
.node.tilt-l2.lit{animation-name:dropL2}
.node.tilt-r2.lit{animation-name:dropR2}

/* pinned things drop onto the board */
.drop{opacity:0}
.drop.in{animation:drop .42s cubic-bezier(.2,1.3,.4,1) both}
@keyframes drop{
  0%{opacity:0;transform:translateY(-26px) scale(1.05) rotate(0deg)}
  100%{opacity:1}
}
.drop.tilt-l.in{animation-name:dropL}
.drop.tilt-r.in{animation-name:dropR}
.drop.tilt-l2.in{animation-name:dropL2}
.drop.tilt-r2.in{animation-name:dropR2}
@keyframes dropL{0%{opacity:0;transform:translateY(-26px) rotate(3deg)}100%{opacity:1;transform:rotate(-1.8deg)}}
@keyframes dropR{0%{opacity:0;transform:translateY(-26px) rotate(-3deg)}100%{opacity:1;transform:rotate(1.5deg)}}
@keyframes dropL2{0%{opacity:0;transform:translateY(-26px) rotate(3deg)}100%{opacity:1;transform:rotate(-.9deg)}}
@keyframes dropR2{0%{opacity:0;transform:translateY(-26px) rotate(-4deg)}100%{opacity:1;transform:rotate(2.4deg)}}
.drop[data-d="1"]{animation-delay:.06s}
.drop[data-d="2"]{animation-delay:.16s}
.drop[data-d="3"]{animation-delay:.26s}
.drop[data-d="4"]{animation-delay:.36s}
.drop[data-d="5"]{animation-delay:.46s}
.drop[data-d="6"]{animation-delay:.56s}

.slam{opacity:0;transform:scale(1.5) rotate(-7deg)}
.slam.in{animation:slam .32s cubic-bezier(.2,1.4,.4,1) both}
@keyframes slam{
  0%{opacity:0;transform:scale(1.5) rotate(-7deg)}
  60%{opacity:1;transform:scale(.97) rotate(1deg)}
  100%{opacity:1;transform:none}
}
.slam[data-d="1"]{animation-delay:.05s}
.slam[data-d="2"]{animation-delay:.16s}
.slam[data-d="3"]{animation-delay:.3s}
.slam[data-d="4"]{animation-delay:.42s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .board-grid > *:nth-child(1){grid-row:1;grid-column:1 / span 12}
  .board-grid > *:nth-child(2){grid-row:2;grid-column:1 / span 12;max-width:200px;justify-self:center}
  .board-grid > *:nth-child(3){grid-row:3;grid-column:1 / span 12}
  .board-grid > *:nth-child(4){grid-row:4;grid-column:1 / span 6}
  .board-grid > *:nth-child(5){grid-row:4;grid-column:7 / span 6}
  .board-grid > *:nth-child(6){grid-row:5;grid-column:1 / span 6}
  .board-grid > *:nth-child(7){grid-row:5;grid-column:7 / span 6}
}
@media (max-width:900px){
  .exhibit-grid,.closer-grid{grid-template-columns:1fr}
  .unpaid-punch{grid-template-columns:1fr;gap:.6rem}
  .up-mid{flex-direction:row;gap:.7rem;padding:.2rem 0}
  .up-line{width:auto;height:3px;flex:1;min-height:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .board-inner{padding:2rem 0 2.6rem}
  .board-grid{grid-template-columns:1fr;gap:1.9rem;margin-top:1.6rem}
  .ev-photo,.ev-quote,.ev-case{grid-column:1 / -1}
  .ev-photo{max-width:210px}
  .strings{display:none}          /* string needs room to read */
  .ann{display:none}
  .board-cta .btn{width:100%;text-align:center}
  .timeline li{grid-template-columns:1fr;gap:.4rem}
  .doc-item{grid-template-columns:1fr auto}
  .doc-tag{grid-column:1;grid-row:1;justify-self:start}
  .doc-title{grid-column:1;grid-row:2}
  .doc-meta{grid-column:1;grid-row:3}
  .doc-arrow{grid-column:2;grid-row:1/4}
  .bc-row{grid-template-columns:auto auto 1fr;gap:.7rem .9rem}
  .bc-photo{width:52px;height:52px}
  .bc-verdict{grid-column:1/-1;text-align:left}
  .ledger-foot em{margin-left:0;flex-basis:100%}
  .stat:nth-child(odd),.stat:nth-child(even),
  .card:nth-child(odd),.card:nth-child(even){transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.drop,.slam,.node{opacity:1;transform:none;animation:none;transition:none}
  .ticker-track{animation:none}
  .btn:hover,.doc-item:hover{transform:none}
  .strings path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}