/* votecope.com  |  independent archive
   Design system deliberately echoes votecope.ca: red / black / white,
   Exo 2 display caps, Merriweather body. */

:root{
  --red:#D50032;
  --red-dark:#A80028;
  --black:#000000;
  --ink:#111111;
  --white:#ffffff;
  --grey:#f5f5f5;
  --grey-mid:#d8d8d8;
  --grey-text:#5a5a5a;
  --display:"Exo 2",Impact,"Arial Narrow",sans-serif;
  --body:"Merriweather",Georgia,serif;
  --maxw:1180px;
  --bar:38px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4,.display{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;line-height:.95;margin:0;
}

/* ---------- 1. disclaimer bar (always visible) ---------- */
.disclaimer{
  position:sticky;top:0;z-index:60;background:var(--black);color:var(--white);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.08em;line-height:var(--bar);height:var(--bar);
  text-align:center;overflow:hidden;white-space:nowrap;
}
.disclaimer b{color:var(--red)}
.disclaimer a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ---------- 3. hero ---------- */
.hero{background:var(--red);color:var(--white);padding:88px 0 76px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-90px;bottom:-90px;width:340px;height:340px;
  border:34px solid rgba(0,0,0,.13);border-radius:50%}
.hero .wrap{position:relative;z-index:2;max-width:960px}
.kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:13px;
  letter-spacing:.18em;margin-bottom:20px;opacity:.92}
.hero h1{font-size:clamp(48px,8.5vw,104px);margin-bottom:26px}
.hero h1 em{font-style:normal;display:block;color:var(--black)}
.hero p.lede{font-size:20px;max-width:640px;margin:0 0 26px}
.hero-list{
  list-style:none;margin:0;padding:0;max-width:640px;
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,26px);
  line-height:1.3;
}
.hero-list li{position:relative;padding-left:32px;margin-bottom:13px}
.hero-list li:last-child{margin-bottom:0}
.hero-list li:before{
  content:"";position:absolute;left:0;top:.36em;
  width:13px;height:13px;background:var(--black);
}

/* ---------- 4. section furniture ---------- */
section{padding:78px 0}
section.alt{background:var(--grey)}
.sec-head{margin-bottom:38px;border-bottom:3px solid var(--black);padding-bottom:18px;
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,5vw,58px)}
.sec-head p{margin:0 0 4px;font-size:15px;color:var(--grey-text);max-width:520px}
.sec-num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--red);
  letter-spacing:.14em;margin-left:auto}

/* ---------- 5. filter rail ----------
   The chips pin directly under the disclaimer bar while the posts scroll
   past, on every screen size. */
.filterbar{
  position:sticky;top:var(--bar);z-index:40;
  background:var(--white);border-bottom:3px solid var(--black);
  padding:16px 0 4px;margin-bottom:24px;
}
section.alt .filterbar{background:var(--grey)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.filterbar .filters{margin-bottom:12px}

/* Every filter stays visible on small screens. The chips shrink and wrap
   rather than scrolling sideways, so nothing is ever hidden off the edge. */
@media(max-width:900px){
  .filterbar .filters{gap:6px;margin-bottom:6px}
  .filterbar .chip{
    font-size:10px;letter-spacing:.05em;padding:7px 9px;border-width:2px;
  }
}

.searchrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.result-line{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.1em;color:var(--grey-text);margin:0}
.chip{
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.07em;padding:9px 15px;border:2px solid var(--black);background:var(--white);
  color:var(--black);cursor:pointer;transition:.1s;
}
.chip:hover{background:var(--grey-mid)}
.chip.on{background:var(--black);color:var(--white)}
.chip.on.hot{background:var(--red);border-color:var(--red)}
.search{
  border:2px solid var(--black);padding:9px 14px;font-family:var(--body);
  font-size:14px;min-width:260px;background:var(--white);
}
.search:focus{outline:3px solid var(--red);outline-offset:1px}

/* ---------- 7. receipt cards ----------
   Three layouts. Switch by changing data-style on #receipts-grid in the HTML:
     "cards"  screenshot plus the transcribed text   (default)
     "shots"  screenshots only, densest and most scannable
     "text"   no images, big quote type, fastest to load
   The transcribed text stays in the DOM in every mode, so search and
   screen readers keep working even when it is not shown. */
.receipts{columns:3;column-gap:22px}
/* Filtering down to one or two posts must not collapse the page. Without a
   floor here the document gets shorter than the viewport, the sticky filter
   bar can never reach the top, and the browser dumps the reader on the
   footer. This keeps enough page under the chips for them to pin. */
#receipts-grid{min-height:42vh}
.receipt{
  break-inside:avoid;margin:0 0 22px;background:var(--white);border:3px solid var(--black);
  display:inline-block;width:100%;
}
.receipt-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--black)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grey-mid);object-fit:cover;flex:none}
.who{line-height:1.25;min-width:0}
.who .name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:14px}
.who .role{font-size:11px;color:var(--grey-text);font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em}
.receipt-date{margin-left:auto;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.06em;color:var(--grey-text);text-align:right;flex:none}
.receipt-shot{border-bottom:2px solid var(--black);background:var(--grey);width:100%}
.receipt-shot.empty{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#9a9a9a;border-bottom:2px dashed var(--grey-mid);
}
.receipt-text{padding:16px 16px 6px;font-size:15.5px;line-height:1.6}
.receipt-text.q{font-style:italic}
.receipt-tags{padding:0 16px 12px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:10px;
  letter-spacing:.08em;padding:4px 8px;background:var(--grey);color:var(--ink);border:1px solid var(--grey-mid)}
.tag.deleted{background:var(--red);color:var(--white);border-color:var(--red)}
.receipt-foot{
  border-top:2px solid var(--black);padding:10px 14px;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.07em;
}
.receipt-foot a{color:var(--black);border-bottom:2px solid var(--red)}
.receipt-foot a:hover{color:var(--red);text-decoration:none}
.receipt-foot .gone{color:var(--red)}

/* ---- layout B: screenshots only (the site default) ----
   Everything but the screenshot is visually hidden. The transcribed text is
   still in the DOM, so the search box and screen readers keep working. */
.receipts[data-style="shots"]{column-gap:18px}
/* Not clip-hidden. A visually hidden copy of every post would be a
   duplicate of the alt text and reads as cloaking to a search engine, so
   these are simply not displayed. The post content lives in the image alt,
   which is where it belongs for both screen readers and crawlers. */
.receipts[data-style="shots"] .receipt-top,
.receipts[data-style="shots"] .receipt-text,
.receipts[data-style="shots"] .receipt-tags,
.receipts[data-style="shots"] .receipt-foot{display:none}
.receipts[data-style="shots"] .receipt{
  position:relative;border-width:2px;margin-bottom:18px;transition:.12s;
}
.receipts[data-style="shots"] .receipt:hover{
  border-color:var(--red);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--red);
}
.receipts[data-style="shots"] .receipt-shot{border-bottom:0}

/* deleted posts still need to announce themselves with no footer to sit in */
.receipts[data-style="shots"] .receipt.is-deleted:after{
  content:"Deleted";position:absolute;top:0;right:0;z-index:2;
  background:var(--red);color:var(--white);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:10px;letter-spacing:.1em;padding:6px 10px;
}
.shot-link{display:block}
.shot-link:hover{text-decoration:none}

/* ---- layout C: text only ---- */
.receipts[data-style="text"] .receipt-shot{display:none}
.receipts[data-style="text"] .receipt{border-width:0 0 0 5px;border-left-color:var(--red);
  border-style:solid;background:var(--grey);padding-bottom:4px}
.receipts[data-style="text"] .receipt-top{border-bottom:0;padding:14px 18px 0}
.receipts[data-style="text"] .receipt-top .avatar{display:none}
.receipts[data-style="text"] .receipt-text{font-size:20px;line-height:1.4;padding:10px 18px 8px;
  font-style:normal;font-family:var(--display);font-weight:600;text-transform:none}
.receipts[data-style="text"] .receipt-tags{padding:0 18px 14px}
.receipts[data-style="text"] .receipt-foot{border-top:1px solid var(--grey-mid);padding:10px 18px}

.load-more{display:block;margin:26px auto 0}
.empty-state{padding:60px 0;text-align:center;color:var(--grey-text);font-size:15px}

/* ---------- 7. roster ---------- */
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* a single candidate should not sit in a quarter-width column looking lost */
.roster:has(> :only-child){grid-template-columns:minmax(0,340px)}
.cand{border:3px solid var(--black);background:var(--white);display:flex;flex-direction:column;
  transition:.12s}
.cand:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--red);text-decoration:none}
.cand-photo{aspect-ratio:1/1;background:var(--grey-mid);object-fit:cover;width:100%;
  border-bottom:3px solid var(--black);filter:grayscale(1) contrast(1.08)}
.cand-photo.empty{display:flex;align-items:center;justify-content:center;color:#8f8f8f;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.cand-body{padding:16px;flex:1;display:flex;flex-direction:column}
.cand-race{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:10px;
  letter-spacing:.12em;color:var(--red);margin-bottom:7px}
.cand h3{font-size:22px;color:var(--black);margin-bottom:9px}
.cand p{font-size:13.5px;color:var(--grey-text);margin:0 0 14px;line-height:1.55}
.cand-status{
  background:var(--red);color:var(--white);font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;line-height:1.35;
  padding:6px 9px;margin:0 0 11px;
}
.cand-count{margin-top:auto;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:11px;letter-spacing:.08em;color:var(--black);border-top:2px solid var(--black);padding-top:11px}
.cand-count span{color:var(--red)}

/* ---------- 8. their platform ----------
   Headline only. Click a headline and their exact wording drops down. */
.pgroup{margin-bottom:40px}
.pgroup-title{
  font-size:15px;letter-spacing:.14em;color:var(--red);
  border-bottom:3px solid var(--black);padding-bottom:12px;margin-bottom:0;
}
.plank{border-bottom:1px solid var(--grey-mid)}
.plank summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 48px 20px 0;
  font-family:var(--display);font-weight:800;font-size:21px;line-height:1.25;
  color:var(--black);transition:.12s;
}
.plank summary::-webkit-details-marker{display:none}
.plank summary::marker{content:""}
.plank summary:hover{color:var(--red)}
.plank summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.plank summary:after{
  content:"";position:absolute;right:8px;top:50%;width:16px;height:3px;
  background:var(--red);transform:translateY(-50%);
}
.plank summary:before{
  content:"";position:absolute;right:14px;top:50%;width:3px;height:16px;
  background:var(--red);transform:translateY(-50%);transition:.15s;
}
.plank[open] summary:before{transform:translateY(-50%) rotate(90deg);opacity:0}
.plank-drop{padding:0 0 26px;display:grid;gap:20px}
@media(min-width:820px){
  /* platform wording on the left, his own post on the right, so the gap
     between the two is the first thing a reader sees */
  .plank-drop:has(.say-platform):has(.say-him){grid-template-columns:1fr 1fr;gap:30px}
}
.say h5{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.12em;margin:0 0 10px;color:var(--grey-text);
}
.say-him h5{color:var(--red)}
.say-him blockquote{border-left-color:var(--black);background:var(--grey)}
.plank blockquote{
  margin:0;padding:12px 16px 12px 18px;border-left:5px solid var(--red);
  font-size:16px;line-height:1.6;font-style:italic;color:var(--ink);
}
.plank cite{
  display:block;margin-top:11px;padding-left:18px;font-style:normal;
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey-text);
}
.plank cite a{color:var(--grey-text);border-bottom:2px solid var(--red)}
.plank cite a:hover{color:var(--red);text-decoration:none}
/* no quote on file yet, so nothing to open */
.plank.unquoted{
  padding:20px 48px 20px 0;
  font-family:var(--display);font-weight:800;font-size:21px;line-height:1.25;
  color:var(--black);
}

/* ---------- 10. method / editorial ---------- */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.method .m{border-top:5px solid var(--red);padding-top:18px}
.method h4{font-size:17px;margin-bottom:10px}
.method p{font-size:14.5px;color:var(--grey-text);margin:0}
.callout{border:3px solid var(--black);background:var(--white);padding:26px 28px;margin-top:34px}
.callout h4{font-size:18px;margin-bottom:10px}
.callout p{margin:0;font-size:15px}

/* ---------- 10. the closing vote band ---------- */
.votebar{background:var(--black);color:var(--white);padding:66px 0}
.votebar h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:14px}
.votebar-lede{margin:0 0 34px;max-width:560px;color:#cfcfcf;font-size:16px}
.votegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2b2b2b;
  border:1px solid #2b2b2b;margin-bottom:32px}
.votegrid > div{background:var(--black);padding:22px 24px}
.vote-k{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:10.5px;
  letter-spacing:.13em;color:var(--red);margin-bottom:10px}
.vote-v{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.15;margin-bottom:7px}
.vote-s{font-size:13.5px;color:#a9a9a9;line-height:1.5}
.votebar .btn{border-color:var(--white)}
.votebar .btn:hover{background:var(--white);color:var(--black)}

/* ---------- 11. footer ---------- */
footer{background:var(--black);color:#bdbdbd;padding:60px 0 30px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr;gap:48px;margin-bottom:40px}
footer h5{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:12px;
  letter-spacing:.12em;color:var(--white);margin:0 0 14px}
footer a{color:#bdbdbd}
footer a:hover{color:var(--white)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px;font-size:14px}
.legal{border-top:1px solid #2b2b2b;padding-top:24px;font-size:12.5px;line-height:1.7;color:#8d8d8d}
.legal strong{color:var(--white)}

/* ---------- candidate page extras ---------- */
.cand-hero{background:var(--black);color:var(--white);padding:60px 0}
.cand-hero .wrap{display:flex;gap:34px;align-items:flex-end;flex-wrap:wrap}
.cand-hero img{width:190px;height:190px;object-fit:cover;border:4px solid var(--red);
  filter:grayscale(1) contrast(1.08);flex:none}
.cand-hero h1{font-size:clamp(40px,7vw,74px);margin-bottom:12px}
.cand-hero .race{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:12px;letter-spacing:.15em;color:var(--red);margin-bottom:14px}
.cand-hero p{margin:0;max-width:560px;font-size:16px;color:#cfcfcf}

@media(max-width:1100px){
  .receipts{columns:2}
  .roster{grid-template-columns:repeat(2,1fr)}
}
/* screenshots need width to stay legible, so phones get one column.
   Text only mode has no image to squint at, so it keeps two. */
@media(max-width:700px){
  .receipts{columns:1}
  .receipts[data-style="text"]{columns:2;column-gap:14px}
}
@media(max-width:430px){
  .receipts[data-style="text"]{columns:1}
}

@media(max-width:760px){
  body{font-size:16px}
  .disclaimer{font-size:9.5px;letter-spacing:.05em}

  .filterbar{padding:12px 0 2px;
    margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .searchrow .search{width:100%;min-width:0}
  .receipts{columns:1}
  .roster{grid-template-columns:1fr}
  .plank summary,.plank.unquoted{font-size:18px;padding:17px 42px 17px 0}
  .plank blockquote{font-size:15px;padding-left:14px;border-left-width:4px}
  .plank cite{padding-left:18px}
  .votegrid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .search{margin-left:0;width:100%}
  .cand-hero img{width:130px;height:130px}
}