/* The protest report and its county pages. Loaded after site-base.css.
   Generated pages: report/build_pages.py. Dot piles: media/report.js.

   One type scale: 12, 14, 16, 18, 22, 30, 40 and 56 (the h1), each with one
   line height (16, 20, 24, 28, 28, 36, 44, 60) and one tracking (none up to
   18, -.012em at 22, -.022em at 30 and 40, -.028em at 56), in three weights
   (300, 400, 600). Spacing sits on a 4px scale. Paper content shares one right
   edge (--col) and one grid gap (56); prose keeps a 720px measure. Two radii: 12 for inner objects and inputs, 20 for a panel (none is
   left); pills and buttons are capsules, as on every page of the site.

   Colour, one meaning per hue:
   - the three cut bands are one blue at three OKLCH lightnesses. On paper (the
     four-county chart, the year rails) the deepest quarter is darkest. On navy
     (each page's hero, whose title names the middle half) the middle half is
     the lightest, the deepest quarter next and the shallowest darkest, so the
     half the title names is what the eye lands on; where two shades meet, and
     against navy, each pair is 3:1 or more;
   - "no lower value" is a neutral grey lighter (paper) or dimmer (navy) than
     every band, so the four still separate in grayscale;
   - rust marks the May 17 deadline and nothing else;
   - "Yours" is the only heavy white line: 3px paper with a deep halo, with its
     own chip, drawn only once there is a value; the median is the heaviest
     data line, 2px chart blue; the quartile lines are 1px and dimmer. */

/* The site's two faces, preloaded and held to font-display: optional. Engines
   differ on a late "optional" face (WebKit swaps it in when it lands), so the
   inline head script (build_pages.HEAD_SCRIPT) holds the page unpainted (html.fw)
   until the faces are ready or 100ms pass, and if they miss that, adds html.nofont,
   which pins the metric-matched fallbacks (site-base.css) for the whole visit.
   Either way the first paint has the faces the page keeps. The light fallback
   below covers the 300 weight the headings use. */
@font-face{font-family:"PX Source Sans 3";src:url("fonts/source-sans-3.woff2") format("woff2");font-style:normal;font-weight:200 900;font-display:optional;}
@font-face{font-family:"PX Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:optional;}
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("HelveticaNeue-Light"),local("Helvetica Neue Light"),local("SegoeUI-Light"),local("Segoe UI Light");font-weight:300;size-adjust:103.3642%;ascent-override:100.4216%;descent-override:21.4775%;line-gap-override:0%;}

:root{
  color-scheme:light;
  --ink:#142234;--inkHover:#223a58;--txt:#25384f;--soft:#404b59;--annot:#627388;
  --rust:#a8481b;--link:#355377;--olive:#8da2ba;--chart:#a9cbf3;
  --paper:#f7f9fc;--tint:#e6ecf3;--rule:#d2dce7;--topbar:#2b4a6e;--onInk:#d4e1f0;
  --rustInk:#e38057;--deep:#081524;
  /* the cut bands on paper: oklch(.60 .09 252), (.47 .11 252), (.33 .09 252); no lower is a
     neutral grey at 3.1:1 on paper, still lighter than every band */
  --b-low:#5783b5;--b-mid:#255d96;--b-top:#083662;--b-none:#8a8f96;
  /* the cut bands on navy: the shallowest quarter oklch(.566 .085 252), the middle half
     (.92 .04 252), the deepest quarter (.602 .08 252); no lower a neutral grey (.532 0).
     Against navy 3.55, 12.70, 4.12 and 3.06:1; the middle half against the shallowest
     3.58:1 and against the deepest 3.08:1 */
  --n-low:#5179a7;--n-mid:#d2e7ff;--n-top:#5d84b0;--n-none:#6b6c6f;
  --display:"PX Plus Jakarta Sans","Plus Jakarta Sans Fallback",system-ui,sans-serif;
  --body:"PX Source Sans 3","Source Sans 3 Fallback",system-ui,-apple-system,sans-serif;
  --gut:16px;
  --barh:66px;
  --col:1120px;
  --out:cubic-bezier(.23,1,.32,1);
}
@media(min-width:640px){:root{--gut:24px;}}
@media(min-width:1000px){:root{--gut:40px;}}
@media(min-width:561px){:root{--barh:78px;}}
/* from 1280px the paper column gives up its right gutter to the section index */
@media(min-width:1280px){:root{--col:min(1120px,calc(100% - 240px));}}
html.fw body{visibility:hidden;}
html.nofont{--display:"Plus Jakarta Sans Fallback",system-ui,sans-serif;--body:"Source Sans 3 Fallback",system-ui,-apple-system,sans-serif;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barh) + 16px);}
body{
  margin:0;background:var(--paper);color:var(--txt);font-family:var(--body);font-size:18px;line-height:28px;font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;}
p,ul,ol,blockquote{margin:0;}
a{color:inherit;}
button,input{font:inherit;}
b,strong{font-weight:600;}
.wrap{max-width:1536px;margin:0 auto;padding:0 var(--gut);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px;}
.topbar :focus-visible,.foot :focus-visible{outline-color:var(--chart);}
.ic,.chev{display:block;flex:none;}
.skip{
  position:absolute;left:16px;top:-80px;z-index:80;padding:10px 20px;border-radius:999px;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:16px;line-height:24px;text-decoration:none;box-shadow:0 0 0 2px var(--ink);
}
.skip:focus{top:16px;}
.skip:focus-visible{outline-color:var(--chart);}

/* topbar, as on every page (whole-pixel box: no percentage width, no centring transform) */
.topbar{
  position:fixed;top:14px;left:0;right:0;margin:0 auto;z-index:60;width:min(calc(100% - 56px),1408px);
  border-radius:999px;padding:10px 10px 10px 24px;background:var(--topbar);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 28px rgba(9,18,29,.26);
}
.topbar .wrap{display:flex;align-items:center;gap:32px;max-width:none;padding:0;min-height:44px;}
.brandmark{display:block;flex:none;}
.brandlogo{height:30px;width:auto;display:block;}
.topnav{margin-left:auto;display:flex;align-items:center;gap:32px;padding-right:16px;}
.topnav a{font-family:var(--display);font-size:16px;line-height:24px;font-weight:400;color:#dbe5f2;text-decoration:none;white-space:nowrap;padding:10px 0;}
@media(hover:hover) and (pointer:fine){.topnav a:hover{color:var(--paper);}}
@media(max-width:920px){.topnav{display:none;}}
@media(max-width:560px){
  .topbar{top:10px;width:calc(100% - 20px);padding:8px 8px 8px 16px;}
  .topbar .wrap{min-height:40px;}
  .brandlogo{height:24px;}
}

/* the navy ground: the first screen, chart and tool together */
.ink{background:var(--ink);color:var(--onInk);--link:var(--chart);}
.ink h1,.ink h2,.ink h3{color:#fff;}
.ink .cite{color:var(--olive);}
.ink :focus-visible{outline-color:var(--chart);}
/* the bar is 66px (78 from 561px); the hero clears it by 24px (26) */
.hero{padding:88px 0 48px;}
@media(min-width:561px){.hero{padding-top:104px;}}
@media(min-width:640px){.hero{padding-bottom:64px;}}
.hero h1{font-weight:300;font-size:40px;line-height:44px;letter-spacing:-.022em;max-width:14em;}
@media(min-width:640px){.hero h1{font-size:56px;line-height:60px;letter-spacing:-.028em;}}
.edition{margin-top:16px;font-size:16px;line-height:24px;color:var(--olive);max-width:720px;}
.edition b{color:var(--onInk);}
.edition a,.uselinks a{color:var(--chart);text-underline-offset:3px;}
.uselinks{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:8px;font-size:16px;line-height:24px;}
.uselinks a{font-weight:600;}
/* the findings: one line each, beside the h1 from 1100px, under the edition line below it */
.keys{list-style:none;margin:24px 0 0;padding:0;max-width:720px;font-size:16px;line-height:24px;color:var(--onInk);}
.keys li{padding:8px 0;border-top:1px solid rgba(212,225,240,.14);}
.keys li:last-child{border-bottom:1px solid rgba(212,225,240,.14);}
.keys b{color:#fff;}
@media(min-width:1100px){
  .head{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 64px;align-items:start;}
  .keys{margin-top:8px;}
}
.jump{display:inline-flex;align-items:center;margin-top:8px;min-height:44px;color:#fff;font-family:var(--display);font-weight:600;font-size:16px;line-height:24px;text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:2px;text-underline-offset:5px;text-wrap:balance;}
@media(hover:hover) and (pointer:fine){.jump:hover{text-decoration-color:#fff;}}
html:not(.js) .jump{display:none;}

/* chart, tool, then the chart's downloads: the page order is the reading order, and
   from 1100px the tool takes the right column beside both */
.crow{display:grid;gap:40px;margin-top:24px;}
.side{display:grid;gap:40px;align-content:start;}
@media(min-width:1100px){
  .crow{grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto 1fr;gap:0 64px;align-items:start;}
  .crow > .chartcol{grid-column:1;grid-row:1;}
  .crow > .place,.crow > .side{grid-column:2;grid-row:1 / span 2;}
  .crow > .figacts{grid-column:1;grid-row:2;}
}
@media(min-width:1100px){.figacts{margin-top:8px;}}

.pills{border:0;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.pills label{position:relative;display:block;width:136px;}
@media(max-width:639px){.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.pills label{width:auto;}}
.pills input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.pills span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;height:44px;border-radius:999px;
  border:1px solid rgba(212,225,240,.45);font-size:16px;line-height:24px;cursor:pointer;color:var(--onInk);
  transition:transform .12s var(--out);
}
/* the bold copy, hidden, holds the width the selected (bold) label needs */
.pills span::after{content:attr(data-label);font-weight:600;visibility:hidden;height:0;overflow:hidden;}
@media(hover:hover) and (pointer:fine){.pills label:hover span{background:rgba(212,225,240,.08);border-color:rgba(212,225,240,.7);}}
.pills label:active span{transform:scale(.97);}
.pills input:checked + span{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:600;}
.pills input:focus-visible + span,.pills.kb input:focus + span{outline:2px solid var(--chart);outline-offset:3px;}

/* words that follow the county pills: every county's version in one grid cell, so the
   tallest holds the height at every width; only the current one shows */
.vxs{display:grid;}
.vxs > .vx{grid-area:1 / 1;}
.vxs > .vx:not(.on){visibility:hidden;}
.jump.vxs{display:inline-grid;align-items:center;}
/* from 1100px the tool sits beside the chart, so the jump to it goes; this comes after
   .vxs and .jump.vxs, which would otherwise show it again */
@media(min-width:1100px){.jump,.jump.vxs{display:none;}}
.ftitle,.sec .ftitle{font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.012em;max-width:30em;}
@media(max-width:639px){.ftitle,.sec .ftitle{font-size:18px;line-height:28px;letter-spacing:0;}}

/* the dot pile: one dot per protest, drawn by media/report.js. Its shape is
   fixed by the generator: the dots' width-to-height ratio (--ars under 640px,
   --arw, and --arl from 1100px for one county) plus the words around them
   (--fix), so the box reserves its exact height, in whole pixels, before the
   script runs. The report's hero reserves its tallest county at each size, so
   a pill never moves the page. */
.spread,.four{container-type:inline-size;}
.pile{
  position:relative;margin-top:8px;--n:var(--nw);--ar:var(--arw);
  height:calc(round(down,100cqw / var(--ar),1px) + var(--fix));
  --pile-low:var(--b-low);--pile-mid:var(--b-mid);--pile-top:var(--b-top);--pile-none:var(--b-none);
  --pile-line:rgba(37,56,79,.16);--pile-tick:rgba(37,56,79,.5);--pile-q:#142234;--pile-med:#142234;
  --pile-bg:#f7f9fc;--pile-title:#142234;--pile-text:#142234;--pile-dim:#627388;
}
@media(max-width:639px){.pile{--n:var(--ns);--ar:var(--ars);}}
@media(min-width:1100px){.pile.one{--n:var(--nl);--ar:var(--arl);}}
figure.four .pile{margin-top:24px;}
@supports not (height:round(down,1px,1px)){.pile{height:calc(100cqw / var(--ar) + var(--fix));}}
/* on navy: the middle half lightest (the --n- shades above); the median 2px chart blue,
   the quartile lines 1px olive, so the median is the heaviest data line */
.ink .pile{
  --pile-low:var(--n-low);--pile-mid:var(--n-mid);--pile-top:var(--n-top);--pile-none:var(--n-none);
  --pile-line:rgba(212,225,240,.14);--pile-tick:rgba(212,225,240,.4);--pile-q:var(--olive);--pile-med:var(--chart);
  --pile-bg:#142234;--pile-title:#ffffff;--pile-text:#ffffff;--pile-dim:#8da2ba;
}
.pile canvas{position:absolute;left:0;top:0;display:block;}
html:not(.js) [data-png],html:not(.js) [data-copy],html:not(.js) .pills,html:not(.js) .dots,html:not(.js) .place .ask{display:none;}
html.js .shape{display:none;}
/* the silhouette: the pile's outline from the generator, one path per county-year,
   placed where the script will draw (shares of the box width); the script removes it
   after its first drawing, and with JavaScript off it is the chart */
.sil{position:absolute;inset:0;pointer-events:none;}
.sil .sv{position:absolute;left:0;width:100%;overflow:visible;--t:var(--tw);--h:var(--hw);--k:var(--kw);
  top:calc(var(--a) + var(--t) * 100cqw);height:calc(var(--h) * 100cqw);}
.pile.one .sil{--d:var(--dw);}
@media(max-width:639px){.sil .sv{--t:var(--ts);--h:var(--hs);--k:var(--ks);}.pile.one .sil{--d:var(--ds);}}
@media(min-width:1100px){.pile.one .sil .sv{--t:var(--tl);--h:var(--hl);--k:var(--kl);}.pile.one .sil{--d:var(--dl);}}
/* a one-county pile is centred in its box (--d is its dots' height), as the script centres it */
.pile.one .sil .sv{top:calc(var(--a) + (100cqw / var(--ar) - var(--d) * 100cqw) / 2 + var(--t) * 100cqw);}
@supports (top:round(nearest,1px,1px)){
  .sil .sv{top:calc(var(--a) + round(nearest,var(--t) * 100cqw,1px));}
  .pile.one .sil .sv{top:calc(var(--a) + round(nearest,(round(down,100cqw / var(--ar),1px) - var(--d) * 100cqw) / 2,1px) + round(nearest,var(--t) * 100cqw,1px));}
}
.sil path{fill:var(--b-low);opacity:.4;}
.ink .sil path{fill:var(--chart);opacity:.34;}
/* a one-county outline is shaded as its drawing will be (build_pages._shades) */
.ink .sil .shaded path{opacity:.6;}
.sil .g0{stop-color:var(--n-none);}.sil .g1{stop-color:var(--n-low);}.sil .g2{stop-color:var(--n-mid);}.sil .g3{stop-color:var(--n-top);}
/* the words: each centred word is a zero-width anchor on its mark's pixel, which the word
   overflows evenly (layout, not a transform, so both engines land on the exact half-pixel
   report.js placeWords computes); the tail's words centre on the tail's columns (--k)
   unless that takes them past the right edge, where they stop, as the script stops them.
   A quartile word that a word before it on its row would run into is pushed along, to
   the middle --c gives it (build_pages.word_pushes: the script's own pushes, as CSS), and
   an upper line that would cross a lower word starts 40px lower, under it (--u). */
.silax span{font-size:12px;line-height:16px;color:var(--pile-dim);white-space:nowrap;}
.silax i,.silq .qw{position:absolute;top:0;display:flex;font-style:normal;}
.silax .tk,.silq .qw{width:0;justify-content:center;left:calc(var(--x) * 1%);}
.silax i > span,.silq .qw > span{flex:none;}
.silax .tail{right:0;justify-content:flex-end;}
.silax .tail span{text-align:center;}
.silax .cap{position:absolute;left:0;top:24px;}
.silq .ql{position:absolute;top:calc(38px + var(--r) * 40px);bottom:-84px;width:1px;background:var(--pile-q);box-shadow:0 0 0 1px var(--pile-bg);
  left:round(nearest,calc(var(--x) * 1%),1px);}
.silq .ql.qm{width:2px;margin-left:-1px;background:var(--pile-med);}
.silq .qw{text-align:center;white-space:nowrap;font-size:12px;line-height:16px;color:var(--pile-dim);}
.silq .qw span,.silq .qw b{display:block;}
.silq .qw b{font-size:14px;line-height:20px;font-weight:600;color:var(--pile-text);}
.silq .qw.nl{left:0;top:40px;width:auto;justify-content:flex-start;text-align:left;}
@supports (left:round(nearest,1px,1px)){
  .silax .tk{left:round(nearest,calc(var(--x) * 1%),1px);}
  .silq .qw{left:var(--c,round(nearest,calc(var(--x) * 1%),1px));}
  .silq .ql{top:calc(38px + var(--r) * 40px + var(--u,0px));}
  .silax .tail{left:calc(2 * round(nearest,calc((1 - var(--k) / 2) * 100cqw),1px) - 100cqw);}
  .silax .tail span{margin:0 auto;}
}
@supports not (left:round(nearest,1px,1px)){.silq .ql{left:calc(var(--x) * 1%);}}
/* on a phone the 40% word gives way to the tail's, as it does in the drawing */
@media(max-width:639px){.silax .t40{visibility:hidden;}}
.silrow .v{position:absolute;top:0;left:0;font-size:14px;line-height:20px;font-weight:600;color:var(--pile-text);white-space:nowrap;}
.silrow .v i{font-style:normal;font-weight:400;color:var(--pile-dim);margin-left:8px;}
.labs{position:absolute;inset:0;pointer-events:none;}
.lab{position:absolute;white-space:nowrap;font-size:12px;line-height:16px;color:var(--pile-dim);}
.lab span{display:block;}
.lab.a-c{text-align:center;}
.lab.a-r{text-align:right;}
.lab .v{font-size:14px;line-height:20px;font-weight:600;color:var(--pile-text);}
.lab i{font-style:normal;font-weight:400;color:var(--pile-dim);margin-left:8px;}
/* on a phone a county row's words drop to the pile's 12px word size, so the longest row
   (Tarrant's, 265px) stays inside a 320px screen's 288px box */
@media(max-width:639px){.lab .v i,.silrow .v i{font-size:12px;}}
.lab.hid,.lab.off{visibility:hidden;}
/* "Yours": an ink mark with its own chip, sharing no hue with the data */
.you{position:absolute;left:0;top:0;width:0;z-index:2;pointer-events:none;}
.you::before{content:"";position:absolute;top:28px;bottom:0;left:-1px;width:3px;background:var(--paper);box-shadow:0 0 0 2px var(--deep);}
.you b{position:absolute;top:0;left:0;height:24px;padding:2px 10px;border-radius:12px;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;color:var(--deep);background:var(--paper);box-shadow:0 0 0 2px var(--deep);}
.hl{position:absolute;z-index:1;pointer-events:none;border:2px solid var(--paper);box-shadow:0 0 0 2px var(--deep);}
.you.stale,.hl.stale{opacity:.72;}
.credit{margin-top:8px;font-size:14px;line-height:20px;color:var(--annot);}
.ink .credit{color:var(--olive);}
figure{margin:0;}
figcaption{margin-top:16px;font-size:16px;line-height:24px;max-width:720px;}
.figacts .acts{margin-top:0;}
figcaption > p + p{margin-top:8px;}
.acts{display:grid;grid-template-columns:repeat(auto-fill,296px);column-gap:16px;margin-top:8px;}
.linkbtn{
  appearance:none;background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:8px;justify-self:start;
  font-size:16px;line-height:24px;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  transition:transform .12s var(--out);
}
.linkbtn:active{transform:scale(.97);}
.counts summary{
  list-style:none;min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--link);
  font-size:16px;line-height:24px;
}
.counts summary::-webkit-details-marker{display:none;}
.counts .chev{transition:transform .1s var(--out);}
.counts[open] .chev{transform:rotate(90deg);transition-duration:.15s;}
@media(hover:hover) and (pointer:fine){.counts summary:hover span{text-decoration:underline;text-underline-offset:3px;}}
.counts .mini{margin-top:8px;}
/* tables keep separate borders (a collapsed 1px border splits into half pixels) and fixed
   columns whose free width divides evenly, so every cell starts on a whole pixel */
.mini{border-collapse:separate;border-spacing:0;table-layout:fixed;width:256px;font-size:14px;line-height:20px;}
.mini.wide{width:560px;}
.mini thead th:first-child{width:160px;}
.mini th,.mini td{padding:4px 16px 4px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400;}
.mini thead th{font-weight:600;}
.ink .mini th,.ink .mini td{border-bottom-color:rgba(212,225,240,.14);}
.ink .mini thead th{color:var(--olive);}
.scrollx{overflow-x:auto;max-width:100%;
  background:linear-gradient(to right,var(--paper) 30%,rgba(247,249,252,0)) left/40px 100% no-repeat local,
    linear-gradient(to left,var(--paper) 30%,rgba(247,249,252,0)) right/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(20,34,52,.18),transparent) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(20,34,52,.18),transparent) right/12px 100% no-repeat scroll;}
@media(max-width:599px){
  .mini.wide{width:100%;}
  .mini.wide thead th:first-child{width:112px;width:calc(100cqw - round(down,100cqw - 112px,4px));}
  .mini.wide th,.mini.wide td{padding-right:0;}
  .mini.wide .n{padding-left:8px;}
  .mini.wide thead th.n{font-size:12px;line-height:20px;}
  .mini.wide .hy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media(max-width:359px){.mini.wide thead th:first-child{width:104px;width:calc(100cqw - round(down,100cqw - 104px,4px));}}
.mini .n{text-align:right;}

/* the tool */
.place{border:1px solid rgba(212,225,240,.45);background:rgba(8,21,36,.42);border-radius:20px;padding:24px;}
@media(min-width:640px){.place{padding:32px;}}
.place h2{font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.012em;}
.place .ask{margin-top:8px;font-size:16px;line-height:24px;}
.fields{display:grid;gap:16px;margin-top:24px;}
.field label{display:block;font-size:14px;line-height:20px;color:var(--olive);margin-bottom:4px;}
.field input{
  display:block;width:100%;height:52px;padding:0 16px;border-radius:12px;border:1px solid rgba(212,225,240,.5);background:var(--deep);
  color:#fff;font-size:18px;line-height:28px;font-variant-numeric:tabular-nums;
}
/* a hint, never a value: the muted olive (7:1 on the field) */
.field input::placeholder{color:var(--olive);opacity:1;}
.field input:focus{outline:2px solid var(--chart);outline-offset:2px;border-color:transparent;}
/* invalid: a white border and inset ring on the field, the hint in white with an alert
   mark under it; rust stays the deadline's */
.field input[aria-invalid=true]{border-color:#fff;box-shadow:inset 0 0 0 1px #fff;}
.field input[aria-invalid=true]:focus{border-color:#fff;}
.hint{display:flex;align-items:center;gap:8px;min-height:20px;margin-top:4px;font-size:14px;line-height:20px;color:var(--onInk);}
.hint .alert{display:none;}
.hint.bad{color:#fff;font-weight:600;}
.hint.bad .alert{display:block;}
/* the tallest readout state, measured in both engines, reserved per width range */
.readout{display:flex;flex-direction:column;margin-top:16px;min-height:172px;}
@media(min-width:1100px){.readout{min-height:260px;}}
@media(max-width:700px){.readout{min-height:264px;}}
@media(max-width:569px){.readout{min-height:288px;}}
@media(max-width:449px){.readout{min-height:332px;}}
@media(max-width:389px){.readout{min-height:356px;}}
@media(max-width:379px){.readout{min-height:376px;}}
@media(max-width:359px){.readout{min-height:396px;}}
@media(max-width:349px){.readout{min-height:420px;}}
.readout.stale{opacity:.72;}
.readout .ex{font-size:14px;line-height:20px;font-weight:600;color:var(--olive);margin-bottom:4px;}
.readout .big{font-family:var(--display);font-weight:300;font-size:40px;line-height:44px;letter-spacing:-.022em;color:#fff;overflow-wrap:normal;}
.readout .big b{font-weight:inherit;}
.readout .big.idle{color:var(--olive);}
.readout .lead{margin-top:8px;font-size:16px;line-height:24px;}
.fine{margin-top:8px;font-size:14px;line-height:20px;color:var(--olive);}
.readout .fine{margin-top:auto;padding-top:8px;}
html:not(.js) .place .fields,html:not(.js) .place .readout{display:none;}
/* the county's spread on one row inside the readout, up to 700px, where the chart is
   off screen: the middle half, the median, the run to nine in ten, and the cut */
.strip{display:none;position:relative;height:60px;margin-top:12px;}
@media(max-width:700px){.strip{display:block;}}
.strip::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:rgba(212,225,240,.3);}
.strip .rng{top:20px;height:16px;background:var(--n-mid);}
.strip .whisk{top:27px;height:2px;background:var(--n-top);}
.strip .med{top:16px;height:24px;background:var(--chart);box-shadow:0 0 0 1px var(--deep);}
.strip .yv{position:absolute;top:16px;height:28px;width:3px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 2px var(--deep);left:round(nearest,calc(var(--y) * 1%),1px);}
/* the mark's name sits over it, kept inside the row */
.strip .yl{position:absolute;top:0;width:64px;text-align:center;font-size:12px;line-height:16px;font-weight:600;color:#fff;
  left:clamp(0px,calc(round(nearest,calc(var(--y) * 1%),1px) - 32px),calc(100% - 64px));}
.strip span{position:absolute;top:44px;font-size:12px;line-height:16px;color:var(--olive);}
.strip .s0{left:0;}
.strip .s1{right:0;}
@supports not (left:round(nearest,1px,1px)){.strip .yv{left:calc(var(--y) * 1%);}.strip .yl{left:clamp(0px,calc(var(--y) * 1% - 32px),calc(100% - 64px));}}

/* paper sections: rules stop at the content column */
.sec{padding:0 0 56px;}
.sec > .wrap::before{content:"";display:block;height:56px;max-width:var(--col);}
@media(min-width:640px){.sec{padding-bottom:80px;}.sec > .wrap::before{height:80px;}}
.sec + .sec > .wrap::before,.sec.ruled > .wrap::before{border-top:1px solid var(--rule);}
:where(.sec .wrap > *){max-width:var(--col);}
.sec h2{font-weight:300;font-size:30px;line-height:36px;letter-spacing:-.022em;color:var(--ink);max-width:18em;}
@media(min-width:640px){.sec h2{font-size:40px;line-height:44px;}}
.sec h3{font-weight:600;font-size:18px;line-height:28px;color:var(--ink);}
.lede{margin-top:16px;max-width:720px;}
.cite{margin-top:8px;font-size:14px;line-height:20px;color:var(--annot);}
.cite a{color:inherit;text-underline-offset:2px;}
.sec figure{margin-top:40px;}

/* the section index: sticky in the paper's right gutter from 1280px, marking the
   section being read */
.paper{position:relative;}
.toc{display:none;}
@media(min-width:1280px){
  .toc{display:block;position:absolute;top:80px;bottom:80px;width:184px;right:max(var(--gut),calc((100% - 1536px) / 2 + var(--gut)));z-index:2;}
  .tocin{position:sticky;top:calc(var(--barh) + 32px);}
}
.toc h2{font-size:14px;line-height:20px;font-weight:600;color:var(--annot);}
.toc ol{list-style:none;margin:8px 0 0;padding:0;}
.toc a{display:block;padding:4px 0 4px 16px;border-left:2px solid var(--rule);font-size:14px;line-height:20px;color:var(--annot);text-decoration:none;}
@media(hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}}
.toc a[aria-current]{border-left-color:var(--link);color:var(--ink);font-weight:600;}

/* years on the shared ruler; marks land on whole pixels through round() */
.yt{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.yt th,.yt td{padding:8px;vertical-align:middle;border-bottom:1px solid var(--rule);text-align:left;}
.yt thead th{font-size:14px;line-height:20px;font-weight:600;color:var(--annot);vertical-align:bottom;border-bottom-color:var(--soft);}
.yt col.c1{width:112px;}.yt col.c3{width:128px;}.yt col.c4{width:128px;}
.yt .mlab{display:none;}
.yt th[scope=row]{font-family:var(--display);font-weight:600;font-size:18px;line-height:28px;color:var(--ink);}
.yt small,.gt small,.ledger small{display:block;font-family:var(--body);font-size:14px;line-height:20px;font-weight:400;color:var(--annot);}
.yt .n{text-align:right;}
.yt td.n{font-size:16px;line-height:24px;color:var(--ink);}
.yt td.track,.yt th.track{padding-left:16px;padding-right:16px;}
.ticks{position:relative;height:20px;}
.ticks span{position:absolute;top:0;width:48px;margin-left:-24px;text-align:center;font-weight:400;white-space:nowrap;left:round(nearest,calc(var(--x) * 1%),1px);}
.ticks span:first-child{margin-left:0;text-align:left;}
.ticks .end{left:auto;right:0;width:48px;margin:0;text-align:right;}
.rail-x{position:relative;height:60px;}
.rail-x::before{content:"";position:absolute;left:0;right:0;top:31px;height:1px;background:var(--tint);}
.rng{position:absolute;top:24px;height:16px;background:var(--b-mid);
  left:round(nearest,calc(var(--a) * 1%),1px);width:calc(round(nearest,calc(var(--b) * 1%),1px) - round(nearest,calc(var(--a) * 1%),1px));}
.whisk{position:absolute;top:31px;height:2px;background:var(--b-top);
  left:round(nearest,calc(var(--b) * 1%),1px);width:calc(round(nearest,calc(var(--t) * 1%),1px) - round(nearest,calc(var(--b) * 1%),1px));}
.med{position:absolute;top:20px;height:24px;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1px var(--paper);left:round(nearest,calc(var(--m) * 1%),1px);}
.lv{position:absolute;top:44px;width:48px;margin-left:-24px;text-align:center;font-size:12px;line-height:16px;color:var(--annot);white-space:nowrap;left:round(nearest,calc(var(--x) * 1%),1px);}
.lv.up{top:0;color:var(--ink);font-weight:600;}
@supports not (left:round(nearest,1px,1px)){
  .ticks span,.lv{left:calc(var(--x) * 1%);}
  .rng{left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);}
  .whisk{left:calc(var(--b) * 1%);width:calc((var(--t) - var(--b)) * 1%);}
  .med{left:calc(var(--m) * 1%);}
}
@media(max-width:639px){
  .hide-s{display:none !important;}
  .yt,.yt thead,.yt tbody{display:block;}
  .yt colgroup{display:none;}
  .yt tr{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:start;border-bottom:1px solid var(--rule);}
  .yt th,.yt td{border:0;padding:8px 0 0;}
  .yt thead tr{border-bottom-color:var(--soft);}
  .yt thead th:not(.track){display:none;}
  .yt thead th.track{grid-column:1 / -1;padding:0 16px 8px 0;}
  .yt td.track{grid-column:1 / -1;grid-row:2;padding:4px 16px 4px 0;}
  .yt tbody td.n{grid-row:1;grid-column:2;padding-top:12px;}
  .yt .mlab{display:inline;}
  .yt th[scope=row] small{display:inline;margin-left:8px;}
}

/* tables */
/* Tables run the full width of their figure, so their rules end on the column's edge.
   The number columns stay whole pixels: the first column takes its base width plus
   whatever the even split leaves over (the figure is a size container, so 100cqw is
   the table's width). Without round(), the base width alone applies. */
/* the table's own box is the container: a container on the figure would contain its layout,
   and a contained grid can't be a subgrid (the twin tables share rows, below) */
.gtw,.ledgerfig{container-type:inline-size;}
.gt,.ledger{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:16px;line-height:24px;}
.gt thead th:first-child{width:144px;width:calc(100cqw - round(down,100cqw - 144px,3px));}
.gt:has(thead th:nth-child(5)) thead th:first-child{width:136px;width:calc(100cqw - round(down,100cqw - 136px,4px));}
.ledger thead th:first-child{width:144px;width:calc(100cqw - round(down,100cqw - 144px,6px));}
.gt th,.gt td,.ledger th,.ledger td{padding:12px 8px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;font-weight:400;}
.gt thead th,.ledger thead th{font-size:14px;line-height:20px;font-weight:600;color:var(--annot);border-bottom-color:var(--soft);vertical-align:bottom;}
.gt .n,.ledger .n{text-align:right;}
.gt th[scope=row],.ledger th[scope=row]{color:var(--ink);}
.ledger th[scope=row]{font-weight:600;}
.gt td.n,.ledger td.n{color:var(--ink);}
.gt td.na{color:var(--annot);}
.gt td.na span{font-size:14px;}
.gt tr.hot th,.gt tr.hot td{font-weight:600;}
.ledger caption{text-align:left;font-family:var(--display);font-weight:600;font-size:18px;line-height:28px;color:var(--ink);padding-bottom:8px;}
.four{margin-top:40px;}
.ledgerfig{margin-top:56px;}
.twin{display:grid;gap:56px;margin-top:40px;}
@media(min-width:1000px){.twin{grid-template-columns:repeat(2,minmax(0,1fr));width:round(down,100%,2px);}}
.twin figure{margin-top:0;}
@media(min-width:1000px){
  .twin{grid-template-rows:repeat(4,auto);row-gap:0;}
  .twin > figure{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;align-content:start;}
}
.gfig h3{margin-bottom:12px;max-width:24em;}
@media(max-width:560px){
  .gt{font-size:14px;line-height:20px;}.gt th,.gt td{padding:12px 4px;}
  .gt thead th:first-child{width:120px;width:calc(100cqw - round(down,100cqw - 120px,3px));}
  .gt:has(thead th:nth-child(5)) thead th:first-child{width:104px;width:calc(100cqw - round(down,100cqw - 104px,4px));}
}
@media(max-width:820px){
  .ledger,.ledger tbody,.ledger caption{display:block;width:auto;}
  .ledger thead{display:none;}
  .ledger tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:16px 0;border-bottom:1px solid var(--rule);}
  .ledger th,.ledger td{border:0;padding:0;text-align:left !important;}
  .ledger th[scope=row]{grid-column:1/-1;font-family:var(--display);font-size:18px;}
  .ledger td::before{content:attr(data-l);display:block;font-size:12px;line-height:16px;color:var(--annot);}
}

/* the season, in order */
.season{list-style:none;margin:32px 0 0;padding:0;}
.season li{display:grid;gap:8px 32px;padding:24px 0;border-top:1px solid var(--rule);}
@media(min-width:760px){.season li{grid-template-columns:208px minmax(0,1fr);}}
.season .when{font-family:var(--display);font-size:18px;line-height:28px;font-weight:600;color:var(--ink);}
.season li.key .when{color:var(--rust);}
.season .what{max-width:720px;}
.next{margin-top:24px;max-width:720px;}
.next a{color:var(--link);text-underline-offset:3px;}

/* the closing ask: plain text under a hairline that runs the column, no card */
.cta{margin-top:56px;padding-top:40px;border-top:1px solid var(--rule);}
.cta h2{font-weight:300;font-size:30px;line-height:36px;letter-spacing:-.022em;color:var(--ink);max-width:16em;}
.cta p{margin-top:12px;max-width:720px;}
.btns{display:grid;grid-template-columns:repeat(auto-fill,232px);gap:12px;margin-top:24px;}
.btn{
  display:flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:600;font-size:16px;line-height:24px;text-decoration:none;white-space:nowrap;
  transition:transform .12s var(--out);
}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
@media(hover:hover) and (pointer:fine){.btn:hover{background:var(--inkHover);}.btn.ghost:hover{background:var(--tint);}}
.btn:active{transform:scale(.97);}

/* citing: plain text under a hairline */
.citegrid{display:grid;gap:56px;margin-top:32px;}
@media(min-width:1000px){.citegrid{grid-template-columns:repeat(2,minmax(0,1fr));width:round(down,100%,2px);}}
.citebox{border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;align-items:flex-start;}
.citebox h3{font-size:16px;line-height:24px;color:var(--annot);}
.citebox blockquote,.citebox .ref{margin:12px 0 0;font-family:var(--display);font-weight:300;font-size:22px;line-height:28px;letter-spacing:-.012em;color:var(--ink);}
.citebox .ref{font-family:var(--body);font-weight:400;font-size:18px;line-height:28px;letter-spacing:0;}
.copybtn{margin-top:8px;}
.citebox .copybtn{margin-top:auto;}
.citebox blockquote,.citebox .ref{margin-bottom:8px;}
.copybtn .ico{display:block;width:14px;height:14px;}
.copybtn .ico .ic + .ic,.copybtn.done .ico .ic:first-child{display:none;}
.copybtn.done .ico .ic + .ic{display:block;}
.uses{margin-top:32px;max-width:720px;display:grid;gap:12px;}
.uses h3:not(:first-child){margin-top:12px;}
.uses a{color:var(--link);text-underline-offset:3px;}

/* method */
.mgrid{display:grid;gap:56px;margin-top:32px;}
@media(min-width:1000px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));width:round(down,100%,2px);}}
.mgrid h3{margin-top:32px;}
.mgrid h3:first-child{margin-top:0;}
.mgrid h3 + p,.mgrid h3 + ul{margin-top:8px;}
.mgrid p + p{margin-top:12px;}
.mgrid p{max-width:620px;}
.mgrid a{color:var(--link);text-underline-offset:3px;}
.regs{list-style:none;padding:0;font-size:16px;line-height:24px;}
.regs li{display:grid;grid-template-columns:88px 1fr;gap:0 16px;padding:12px 0;border-bottom:1px solid var(--rule);}
.regs b{color:var(--ink);grid-row:span 2;}
.regs small{font-size:14px;line-height:20px;color:var(--annot);}
.regs + p{margin-top:16px;}

/* a county page: the protest year as a rail */
.yearnav h2{font-size:16px;line-height:24px;font-weight:600;color:var(--olive);}
.yearnav ol{list-style:none;margin:12px 0 0;padding:0;}
.yearnav a{display:grid;grid-template-columns:128px 1fr;align-items:start;gap:16px;padding:12px 0;border-top:1px solid rgba(212,225,240,.14);text-decoration:none;color:var(--onInk);font-size:16px;line-height:24px;min-height:44px;}
@media(hover:hover) and (pointer:fine){.yearnav a:hover .what{color:#fff;text-decoration:underline;text-underline-offset:3px;}}
.yearnav .when{padding-top:1px;font-family:var(--display);font-size:14px;line-height:20px;font-weight:600;color:var(--olive);}
.yearnav .key .when{color:var(--rustInk);}
@media(max-width:420px){.yearnav a{grid-template-columns:112px 1fr;}}
.answer{font-family:var(--display);font-weight:300;font-size:18px;line-height:28px;color:#fff;max-width:34em;}
@media(min-width:640px){.answer{font-size:22px;line-height:28px;letter-spacing:-.012em;}}
.chartcol > .cite{margin-bottom:32px;}
.yr{position:relative;padding-left:40px;max-width:var(--col);}
@media(min-width:640px){.yr{padding-left:56px;}}
.stagesec{position:relative;padding:48px 0;}
@media(min-width:640px){.stagesec{padding:56px 0;}}
.stagesec + .stagesec{border-top:1px solid var(--rule);}
/* one node style (the deadline's ring is rust), and the rail from each node's centre to
   the next one's, so it ends at the last node */
.stagesec::before{content:"";position:absolute;z-index:1;top:58px;left:-36px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--link);}
.stagesec:not(:last-child)::after{content:"";position:absolute;top:66px;bottom:-66px;left:-29px;width:2px;background:var(--rule);}
@media(min-width:640px){
  .stagesec::before{top:66px;left:-52px;}
  .stagesec:not(:last-child)::after{top:74px;bottom:-74px;left:-45px;}
}
.stagesec.key::before{border-color:var(--rust);}
.stagesec > h2{font-weight:300;font-size:30px;line-height:36px;letter-spacing:-.022em;color:var(--ink);max-width:16em;}
.stagesec .body{margin-top:16px;max-width:660px;display:grid;gap:16px;}
.body > .cite{margin-top:-8px;}
.body a{color:var(--link);text-underline-offset:3px;}
.aside{color:var(--annot);font-size:16px;line-height:24px;}
.stat .cite{margin-top:4px;}
@media(min-width:1080px){
  .stagesec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;align-items:start;width:round(down,100%,2px);}
  .stagesec > h2{grid-column:1;}
  .stagesec > .body{grid-column:2;margin-top:0;}
}
.stat{padding-top:16px;border-top:1px solid var(--rule);}
.stat .num{font-family:var(--display);font-weight:300;font-size:40px;line-height:44px;letter-spacing:-.022em;color:var(--ink);}
.routes{width:round(down,100%,2px);border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:16px;line-height:24px;}
.routes thead th:first-child{width:200px;}
.routes th,.routes td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;font-weight:400;}
.routes thead th{font-size:14px;line-height:20px;color:var(--annot);font-weight:600;}
.routes th[scope=row]{color:var(--ink);font-weight:600;}
@media(max-width:700px){
  .routes thead{display:none;}
  .routes tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule);}
  .routes th,.routes td{display:block;border:0;padding:4px 0;}
  .routes td::before{content:attr(data-l);display:block;font-size:12px;line-height:16px;color:var(--annot);}
}

/* footer, as on every page */
.foot{background:var(--ink);color:var(--olive);padding:56px 0 72px;}
.footgrid{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start;justify-content:space-between;}
.footbrand img{height:34px;width:auto;display:block;}
.footbrand p{margin-top:16px;font-size:16px;line-height:24px;max-width:272px;}
.footnav{display:grid;grid-template-columns:repeat(2,auto);gap:4px 40px;}
.footnav a[aria-current]{color:var(--onInk);}
.footnav a{text-decoration:none;font-size:16px;line-height:24px;min-height:40px;display:inline-flex;align-items:center;}
@media(hover:hover) and (pointer:fine){.footnav a:hover{color:var(--onInk);}}
.footnote{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:20px;max-width:840px;}
@media(max-width:560px){.footnav{grid-template-columns:1fr;}}

@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}
@media print{.topbar,.skip,.toc,.place,.acts,.pills,.jump,.you,.hl{display:none;}.ink{background:#fff;color:#000;}}