/* ============================================================
   The evidence deck, drawn.

   A restatement of src/_includes/evidence-slides.njk in the visual
   language of the instructor walkthroughs (css/walkthrough.css and
   css/walkthrough-rig.css). Not one word of the deck's copy changes;
   everything below is how it is drawn.

   The four things carried over from the walkthroughs:

     1. Paper, not a black band. The deck stops being an always-dark
        insert and follows the site's light/dark toggle, on the same
        --wt-paper the wireframe windows sit on.
     2. Every figure is a plate: a 2px-ruled panel with a hard offset
        shadow and a hatched header carrying the slide's own stat
        strip, exactly as the wireframe window's title bar carries
        its address.
     3. Every line is drawn by hand (js/hand-ink.js) and lays itself
        down when its slide arrives — the plates, the cards, the axes,
        and the bars.
     4. Fill is the semantics. A solid accent bar is the direction the
        slide claims; a hatched bar is the other one; an outline with
        nothing in it is neither. That is the wireframe's own grammar
        — accent for what a step is about, hatching for what it is
        not, dashes for what is not filled in — applied to data, so
        the charts need no second and third hue to be read.

   Scoped to .dwdeck / .dw-close so nothing reaches the site chrome.
   Prefixed .dw- throughout, and self-contained: it borrows the
   walkthroughs' token *values* rather than their stylesheets, so a
   page can load this without loading the walkthrough sheets.
   ============================================================ */

.dwdeck, .dw-close {
  /* Ink. Values from walkthrough.css — the same hand, the same paper. */
  --dw-ink: #55555f;
  --dw-ink-strong: #111118;
  --dw-faint: #bab7b0;
  --dw-hatch: rgba(60, 50, 40, 0.09);
  --dw-accent: #5a5ad1;
  --dw-accent-soft: rgba(90, 90, 209, 0.13);
  --dw-paper: #fffefb;
  --dw-cast: rgba(60, 50, 40, 0.16);
  /* Text sitting on a filled accent bar. */
  --dw-on-accent: #fffefb;
  /* Hatching that has to read as a bar's fill rather than as a backdrop,
     so heavier than --dw-hatch. */
  --dw-bar-hatch: rgba(85, 85, 95, 0.34);
  --dw-tip-bg: #23004d;
  --dw-tip-text: #f4f2ff;

  --dw-mono: "Roboto Mono", Menlo, monospace;
  --dw-sans: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* The deck is a well cut into the page — the site's own sunken rung — so
     the plates read as raised out of it. It is what the black band was doing
     before: giving the findings an edge the surrounding page does not have,
     without leaving the theme. */
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--dw-sans);
}
html.dark-mode .dwdeck, html.dark-mode .dw-close {
  --dw-ink: #a8a8b4;
  --dw-ink-strong: #f1f1f5;
  --dw-faint: #4b4b5a;
  --dw-hatch: rgba(226, 226, 255, 0.06);
  --dw-accent: #8a8aff;
  --dw-accent-soft: rgba(138, 138, 255, 0.15);
  --dw-paper: #15151e;
  --dw-cast: rgba(226, 226, 255, 0.09);
  --dw-on-accent: #10101a;
  --dw-bar-hatch: rgba(168, 168, 184, 0.36);
  --dw-tip-bg: #33334f;
  --dw-tip-text: #f1f1f5;
}

/* The deck's annotations are absolutely positioned; any horizontal overflow
   becomes side-to-side panning on a touch device. Clip the root's x axis. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

/* The homepage title takes the deck's face, as it did the old deck's serif:
   the hero is the deck's first slide in everything but name. Sized for a
   monospace advance, so it holds one line to the same window widths the
   Schibsted-set title did. */
.dw-landing .hero h1 {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.34;
  margin-bottom: 0.5em;
}
/* The drawn rule under the heading. inline-block so the stroke measures the
   words rather than the column; a little bottom padding so it clears the
   descenders in "Learning through disagreement". */
.dw-landing .hero h1 .dw-rule {
  display: inline-block;
  padding-bottom: 0.16em;
  /* The ink layer is placed at -7px, so the span has to be what that resolves
     against. Without this it resolved against .hero and only looked right
     because the two happen to share a left edge at this width. */
  position: relative;
}
.dw-landing .schools h2 {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
}
/* Hero vertical rhythm, tuned in the spacing lab. Viewport-relative, so the
   proportions hold across window sizes. */
.dw-landing .hero-intro {
  /* paragraph -> quote. Capped down on narrow screens so the quote is not
     pushed off a phone's first screen. */
  margin-bottom: clamp(2.4rem, 8vw, 4.9rem);
}
.dw-landing .hero .container-narrow {
  transform: translateY(3svh);   /* nudge the whole block below centre */
}
/* ============================================================
   The schools, as a board

   Thirty-two names set as a list read as a list. Ruled into a board with a
   mono head they read as a count, which is what the section is claiming.
   ============================================================ */
.dw-landing .dw-board {
  position: relative;
  background: var(--dw-paper);
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  box-shadow: 5px 5px 0 var(--dw-cast);
  margin: 2.5rem 0 2rem;
}
.dw-landing .dw-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--dw-ink);
  background: var(--dw-hatch);
  border-radius: 4px 4px 0 0;
}
/* The heading is still the heading; it is set as the board's label rather
   than as a display line, which is what putting it in a head bar means. */
.dw-landing .dw-board-head h2 {
  margin: 0;
  font-family: "Roboto Mono", Menlo, monospace;
  font-weight: 700;
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--dw-ink-strong);
  text-wrap: balance;
}
.dw-landing .dw-board-n {
  font-family: "Roboto Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-ink);
  white-space: nowrap;
}
.dw-landing .dw-board-n b { color: var(--dw-accent); font-weight: 700; }
.dw-landing .dw-board .schools-grid {
  margin: 0;
  padding: 1.3rem 1.4rem 1.5rem;
}
.dw-landing .dw-board .schools-grid li {
  font-family: "Roboto Mono", Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ============================================================
   Slide-deck scroll snap

   One slide per screen, as before. Kept identical in behaviour to
   the deck this replaces (css/new-home.css in the history, for why each clause
   is here) — the styling changed, the scrolling did not.
   ============================================================ */
@media (min-width: 861px) and (min-height: 641px) {
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--banner-h);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  .dw-hero,
  .dw-slide,
  .dw-close,
  .dw-schools .dw-board { scroll-snap-align: start; }
  .dw-schools .dw-board { scroll-margin-top: 24px; }
  .dw-schools-map { scroll-snap-align: center; }
  .dw-hero, .dw-slide, .dw-close { scroll-snap-stop: always; }
  .site-footer { scroll-snap-align: end; }
}
@media (max-width: 860px) and (min-height: 600px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--banner-h);
  }
  html.snap-strict { scroll-snap-type: y mandatory; }
  .site-footer { scroll-snap-align: end; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  .dw-hero, .dw-slide, .dw-close, .dw-schools {
    scroll-snap-align: start;
  }
  .dw-slide, .dw-close { justify-content: safe center; }
}
html.no-snap { scroll-snap-type: none !important; }
.snap-end-sentinel { display: block; height: 0; scroll-snap-align: end; }

/* ============================================================
   The slide
   ============================================================ */
.dw-slide {
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5svh clamp(22px, 5vw, 76px);
}
.dw-inner { width: 100%; max-width: 1230px; margin: 0 auto; }

/* ---- claim ----
   Roboto Mono 700, which is what this site sets every heading in and what
   the walkthroughs title their screens with. The step number in front of
   it, in accent, is the walkthroughs' own: `<b>01</b> Assignment details`. */
.dwdeck h2.dw-claim {
  font-family: var(--dw-mono);
  font-weight: 700;
  /* Capped where the longest claim — "Students understand opposing
     perspectives", 40 characters — still holds one line inside the 1230px
     column at a monospace advance. */
  font-size: clamp(21px, 2.5vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 1.6svh;
  text-wrap: balance;
}
.dwdeck h2.dw-claim b {
  color: var(--dw-accent);
  font-weight: 700;
  margin-right: 0.5em;
}

.dwdeck .dw-lede {
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.66;
  color: var(--text-soft);
  max-width: 62em;
  margin: 0 0 2.8svh;
}
.dwdeck .dw-lede b { color: var(--text-strong); font-weight: 600; }

/* ---- the caption under a plate ----
   The deck's footnotes are notes in the margin of a figure, so they take
   the walkthroughs' marginal-note rule: a dashed edge and small type,
   like .wt-aside and .wt2-note. */
.dwdeck .dw-note {
  margin: 2.2svh 0 0;
  padding-left: 0.95rem;
  border-left: 2px dashed var(--dw-faint);
  font-size: clamp(13px, 1.02vw, 14.5px);
  line-height: 1.68;
  color: var(--text-soft);
  max-width: 78em;
}
.dwdeck .dw-note b { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   The plate — the wireframe window, holding a figure
   ============================================================ */
.dw-plate {
  position: relative;
  border: 2px solid var(--dw-ink);
  border-radius: 8px;
  background: var(--dw-paper);
  box-shadow: 6px 6px 0 var(--dw-cast);
  overflow: hidden;
}
/* The header strip: hatched ground, a ruled bottom edge, and the slide's own
   stat line set in it — the wireframe window's title bar, carrying the
   figure's numbers instead of an address. */
.dw-platehead {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 2.3em;
  padding: 0.85em 1.3em;
  border-bottom: 2px solid var(--dw-ink);
  background: var(--dw-hatch);
  font-family: var(--dw-mono);
  font-size: clamp(10.5px, 0.86vw, 12.5px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.dw-platehead .k {
  color: var(--dw-ink-strong);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.dw-platebody { padding: clamp(18px, 3svh, 34px) clamp(18px, 2.1vw, 34px); }

/* ============================================================
   Reveal

   .rev / .d1..d5 are the deck's own entrance; the drawn lines and the
   bar fills have their own timing below, keyed off .dw-slide.active.
   ============================================================ */
.dwdeck .rev, .dw-close .rev {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.dw-slide.active .rev, .dw-close.active .rev { opacity: 1; transform: none; }
/* The plate's drift rides on `translate` rather than on `transform`, which is
   what the entrance above animates. Sharing one property meant the plate could
   not do both: --sway is rewritten every frame the page is moving, each
   rewrite restarted the 0.6s transform transition from its transition-delay,
   and the plate therefore sat at its full 16px entrance offset for as long as
   the scroll took to settle — then slid up once the sway reached zero, a
   second after everything else on the slide had finished. The two properties
   compose (translate is applied before transform), so the entrance runs on
   arrival and the drift is instant on top of it, which is what it was always
   meant to be: the JS smooths --sway itself, so it needs no transition. */
.dw-slide.active .dw-plate.rev {
  transform: none;
  translate: 0 calc(var(--sway, 0) * 2px);
}
.dwdeck .d1, .dw-close .d1 { transition-delay: 0.06s; }
.dwdeck .d2, .dw-close .d2 { transition-delay: 0.14s; }
.dwdeck .d3, .dw-close .d3 { transition-delay: 0.22s; }
.dwdeck .d4, .dw-close .d4 { transition-delay: 0.3s; }
.dwdeck .d5 { transition-delay: 0.42s; }

/* ============================================================
   Bars

   A bar is an outline plus a fill. The outline is a fixed box, drawn by
   hand when the slide arrives; the fill sweeps in behind it a beat later,
   so the reader watches the box be drawn and then inked in. Nothing about
   the outline animates in size, which is what keeps the generated strokes
   from being stretched by a transform.
   ============================================================ */
.dwdeck .dw-bar { position: relative; }
.dwdeck .dw-bar > i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: var(--o, left) center;
  transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.3, 1);
  transition-delay: calc(var(--d, 0s) + 0.34s);
}
.dw-slide.active .dw-bar > i { transform: scaleX(1); }
.dwdeck .dw-vbar > i {
  transform: scaleY(0);
  transform-origin: center bottom;
}
.dw-slide.active .dwdeck .dw-vbar > i,
.dw-slide.active .dw-vbar > i { transform: scaleY(1); }

/* ---- the fills ----
   solid  the direction the slide claims
   soft   the same direction, second rank
   hatch  the other direction
   open   neither (an outline with nothing in it) */
.dwdeck .f-solid > i { background: var(--dw-accent); }
.dwdeck .f-soft > i { background: var(--dw-accent-soft); }
.dwdeck .f-hatch > i {
  background: repeating-linear-gradient(
    45deg,
    transparent 0 var(--hg, 4px),
    var(--dw-bar-hatch) var(--hg, 4px) calc(var(--hg, 4px) * 2)
  );
}
.dwdeck .f-open > i { background: none; }
/* A ramp drawn rather than coloured: the hatching closes up as the value
   rises, and the top of the ramp is solid. */
.dwdeck .f-h1 { --hg: 6px; }
.dwdeck .f-h2 { --hg: 4px; }
.dwdeck .f-h3 { --hg: 2.5px; }

/* An outline the hand has not been over: the marks that are placeholders
   rather than measurements. */
.dwdeck .dw-bar { border: 1.5px solid var(--dw-ink); }
.dwdeck .f-open, .dwdeck .f-hatch { border-color: var(--dw-ink); }

/* ============================================================
   1 · Headline — three drawn stat boxes
   ============================================================ */
.dwdeck .dw-stats3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.9vw, 30px);
}
.dw-statbox {
  position: relative;
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  background: var(--dw-paper);
  box-shadow: 3px 3px 0 var(--dw-cast);
  padding: clamp(16px, 2.1svh, 26px) clamp(16px, 1.6vw, 24px) clamp(18px, 2.3svh, 28px);
}
.dwdeck .dw-lab {
  font-family: var(--dw-mono);
  font-size: clamp(10px, 0.82vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 1.3svh;
}
/* The figure itself, in the walkthroughs' fact face: mono, bold, accent,
   tabular. */
.dwdeck .dw-kpi {
  font-family: var(--dw-mono);
  font-weight: 700;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--dw-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0 0 1.8svh;
}
.dwdeck .dw-kpi .pre { font-size: 58%; font-weight: 500; vertical-align: 6%; }
.dwdeck .dw-kpi .suf { font-size: 52%; margin-left: 0.04em; }
.dwdeck .dw-body {
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.58;
  color: var(--text-soft);
  margin: 0;
  max-width: 24em;
}
.dwdeck .dw-body b { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   2 · Movement — the diverging chart
   ============================================================ */
.dwdeck .dw-dvg {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
  align-items: stretch;
  position: relative;
}
.dwdeck .dw-dvg-lab {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  font-family: var(--dw-mono);
  font-size: clamp(11px, 0.95vw, 13.5px);
  color: var(--text-soft);
  white-space: nowrap;
  height: clamp(34px, 5.2svh, 48px);
}
.dwdeck .dw-dvg-lab i {
  font-style: normal;
  font-weight: 700;
  color: var(--dw-accent);
  margin-right: 10px;
}
.dwdeck .dw-dvg-l, .dwdeck .dw-dvg-r {
  position: relative;
  height: clamp(34px, 5.2svh, 48px);
}
/* The centre of the scale, ruled. */
.dwdeck .dw-dvg-r { border-left: 2px solid var(--dw-ink); }
.dwdeck .dw-dvg .dw-bar {
  position: absolute;
  top: 50%;
  height: clamp(19px, 3.1svh, 27px);
  transform: translateY(-50%);
  border-radius: 3px;
}
.dwdeck .dw-dvg-l .dw-bar { right: 0; --o: right; border-radius: 3px 0 0 3px; }
.dwdeck .dw-dvg-r .dw-bar { left: 0; --o: left; border-radius: 0 3px 3px 0; }
.dwdeck .dw-pct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--dw-mono);
  font-size: clamp(11.5px, 1vw, 14px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--d, 0s) + 0.75s);
  white-space: nowrap;
  z-index: 4;
}
.dw-slide.active .dwdeck .dw-pct, .dw-slide.active .dw-pct { opacity: 1; }
/* Reversed out of a filled bar; knocked out of a hatched one. */
.dwdeck .dw-pct.on-fill { color: var(--dw-on-accent); }
.dwdeck .dw-pct.on-paper {
  color: var(--dw-ink-strong);
  background: var(--dw-paper);
  padding: 0.08em 0.34em;
  border-radius: 2px;
}

.dwdeck .dw-dvg-legend {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 1.4svh;
  font-family: var(--dw-mono);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dwdeck .dw-dvg-legend .l,
.dwdeck .dw-dvg-legend .r { white-space: nowrap; text-align: center; }
.dwdeck .dw-dvg-legend .l { color: var(--dw-accent); font-weight: 700; }
.dwdeck .dw-dvg-legend .r { color: var(--text-soft); }
/* Hidden replica of the widest chart label: gives the legend a first column
   the same width as the chart's, so the divider lands on the chart's centre. */
.dwdeck .dw-dvg-lab-ghost {
  height: auto;
  visibility: hidden;
  letter-spacing: normal;
  padding-right: 16px;
}

/* Chart annotations: mono, the voice the wireframe's own hints are in. */
.dwdeck .dw-anno {
  position: absolute;
  font-family: var(--dw-mono);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 0.6s ease 1.05s;
  white-space: nowrap;
  pointer-events: none;
}
.dw-slide.active .dw-anno { opacity: 1; }
.dwdeck .dw-anno.acc { color: var(--dw-accent); }
.dwdeck .dw-anno-fit {
  white-space: normal;
  text-align: left;
  font-size: clamp(10px, 0.85vw, 12.5px);
  line-height: 1.5;
}
@media (max-width: 1199px) { .dwdeck .dw-anno-fit { display: none; } }

/* ============================================================
   Vertical bar plots — convergence, updating, understanding
   ============================================================ */
.dwdeck .dw-vplot {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: end;
  position: relative;
  /* The baseline. Ruled by hand once the slide arrives (see the ink spec in
     js/deck-wireframe.js); this is what it falls back to. */
  border-bottom: 2px solid var(--dw-ink);
}
.dwdeck .dw-vplot:not(.dw-axis) { height: clamp(190px, 31svh, 330px); }
.dwdeck .dw-vcol {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.dwdeck .dw-vbar {
  position: relative;
  width: 100%;
  /* --hs shortens every bar by the same factor, which leaves headroom above
     the tallest without touching the numbers each height comes from. 1 on a
     wide screen; see the narrow-screen block. */
  height: calc(var(--h) * var(--hs, 1) * 1%);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}
/* The count inside a bar tall enough to hold it. */
.dwdeck .dw-vbar .n {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--dw-mono);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dw-on-accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--d, 0s) + 0.75s);
}
.dw-slide.active .dw-vbar .n { opacity: 1; }
.dwdeck .dw-vbar .n.n-ink { color: var(--dw-ink-strong); }
.dwdeck .dw-vcol .dw-vpct {
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) * var(--hs, 1) * 1% + 10px);
  transform: translateX(-50%);
  font-family: var(--dw-mono);
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--d, 0s) + 0.8s);
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
.dw-slide.active .dw-vcol .dw-vpct { opacity: 1; }
.dwdeck .dw-vcol.hi .dw-vpct { color: var(--dw-accent); }
.dwdeck .dw-vcol .dw-vpct small {
  display: block;
  font-family: var(--dw-mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-soft);
}
/* The axis row is a second grid under the first, on the same columns. */
.dwdeck .dw-axis {
  height: auto;
  border-bottom: 0;
  align-items: start;
}
.dwdeck .dw-vcol .xl {
  margin-top: 12px;
  text-align: center;
  font-family: var(--dw-mono);
  font-size: clamp(10.5px, 0.92vw, 13px);
  line-height: 1.45;
  color: var(--text-soft);
  min-height: 2.7em;
}
.dwdeck .dw-vcol.hi .xl { color: var(--dw-ink-strong); font-weight: 700; }

/* ============================================================
   3 · Convergence
   ============================================================ */
#converge { --hgap: clamp(3px, 0.55vw, 10px); }
.dwdeck .dw-cvg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 54px);
  align-items: center;
}
.dwdeck .dw-hist { gap: var(--hgap); }
.dwdeck .dw-hist:not(.dw-axis) { height: clamp(175px, 28svh, 300px); }
.dwdeck .dw-hist .dw-vpct { font-size: clamp(10.5px, 0.92vw, 13.5px); }
.dwdeck .dw-hist-axis .xl { margin-top: 9px; min-height: 0; }

.dwdeck .dw-hist-x {
  margin: 1.4svh 0 0;
  text-align: center;
  font-family: var(--dw-mono);
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* The two flags over the histogram: a label and a rule that spans exactly the
   bins it describes. The shaft is a flexing hairline, so it always ends on a
   bin edge. */
.dwdeck .dw-flags {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--hgap);
  margin-bottom: 1.4svh;
}
.dwdeck .dw-flag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--dw-mono);
  font-size: clamp(10px, 0.88vw, 13px);
  font-weight: 500;
}
/* One line, running on into the empty space beside it: wrapped, the label
   drops its own arrow below its partner's. */
.dwdeck .dw-flag-t { white-space: nowrap; }
.dwdeck .dw-flag.neg { grid-column: 1 / 4; align-items: flex-start; color: var(--text-soft); }
.dwdeck .dw-flag.pos { grid-column: 5 / 11; align-items: flex-end; color: var(--dw-accent); font-weight: 700; }
.dwdeck .dw-flag-a {
  display: flex;
  align-items: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease 0.95s;
}
.dw-slide.active .dw-flag-a { opacity: 1; }
.dwdeck .dw-flag-a i { flex: 1; height: 0; border-top: 1.5px dashed currentColor; }
.dwdeck .dw-flag.pos .dw-flag-a i { border-top-style: solid; }
.dwdeck .dw-flag-a svg { display: block; flex: none; }

/* The before/after pair, as an inked inset — the shape the wireframe's own
   popovers take (.wt2-cal). */
.dw-inset {
  position: relative;
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  background: var(--dw-paper);
  box-shadow: 4px 4px 0 var(--dw-cast);
  padding: clamp(16px, 2.2svh, 26px) clamp(16px, 1.7vw, 26px) clamp(14px, 1.8svh, 22px);
}
.dwdeck .dw-inset .dw-lab { margin-bottom: clamp(22px, 3.4svh, 40px); }
.dwdeck .dw-gap-plot {
  max-width: 320px;
  margin: 0 auto;
  gap: clamp(40px, 4.6vw, 66px);
}
.dwdeck .dw-gap-plot:not(.dw-axis) { height: clamp(110px, 16svh, 168px); }
.dwdeck .dw-gap-plot .dw-vcol { align-items: center; }
.dwdeck .dw-gap-plot .dw-vbar { width: min(100%, 84px); }
.dwdeck .dw-gap-plot .dw-vpct { font-size: clamp(16px, 1.5vw, 22px); }
.dwdeck .dw-gap-axis .xl { min-height: 0; margin-top: 10px; }

/* The drop: a dashed guide at the "before" height and an arrow falling to the
   "after" height, hung in the channel between the two bars. */
.dwdeck .dw-drop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--to) * 1%);
  height: calc((var(--from) - var(--to)) * 1%);
  color: var(--dw-accent);
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
  pointer-events: none;
  z-index: 3;
}
.dw-slide.active .dw-drop { opacity: 1; }
.dwdeck .dw-drop-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  border-top: 1.5px dashed var(--dw-faint);
}
.dwdeck .dw-drop-arrow {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 0;
  transform: translateX(-50%);
  border-left: 1.5px solid currentColor;
}
.dwdeck .dw-drop-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
}
.dwdeck .dw-drop-lab {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 7px);
  font-family: var(--dw-mono);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.dwdeck .dw-test {
  margin: clamp(12px, 1.8svh, 18px) 0 0;
  padding-top: clamp(9px, 1.3svh, 13px);
  border-top: 1.5px dashed var(--dw-faint);
  text-align: center;
  font-family: var(--dw-mono);
  font-size: clamp(10.5px, 0.88vw, 12px);
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

/* ============================================================
   A label with a drawn arrow onto the bar it is about — slides 4 and 5,
   the two places where one column is the whole point of the chart. The
   right/top here are slide 5's; slide 4 sets its own inline, since where
   the label can sit depends on the shape of the bars beside it.
   ============================================================ */
.dwdeck .dw-curve-anno {
  /* Where it sits is the instance's business — every one of these is placed
     against the bar it points at. Setting right/top here as well would
     over-constrain a label that anchors itself by left/bottom, and the
     instance's own edge would be the one dropped. */
  position: absolute;
  text-align: right;
  font-family: var(--dw-mono);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--dw-accent);
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
  pointer-events: none;
  z-index: 3;
}
.dw-slide.active .dw-curve-anno { opacity: 1; }
/* The arrow runs from under the text, out to the right, by default. A label
   that sits to the right of what it points at flips to the left; one that
   points upwards puts the arrow before the text, and gets the gap on the
   other side. */
.dwdeck .dw-curve-anno svg { display: block; margin: 5px 0 0 auto; overflow: visible; }
.dwdeck .dw-curve-anno.to-left { text-align: left; }
.dwdeck .dw-curve-anno.to-left svg { margin: 5px auto 0 0; }
.dwdeck .dw-curve-anno.to-up svg { margin: 0 0 5px auto; }
.dwdeck .dw-curve-anno.to-up.to-left svg { margin: 0 auto 5px 0; }
/* A label level with what it points at, rather than above or below it: the
   arrow runs beside the words instead of under them. */
.dwdeck .dw-curve-anno.beside {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-align: left;
}
.dwdeck .dw-curve-anno.beside svg { margin: 0; flex: none; }
/* Where each of slide 2's three sits. Kept here rather than inline so a
   narrow screen can move them; an inline style cannot be overridden. */
.dwdeck .a-moderate { left: 51.5%; bottom: calc(100% - 38px); }
.dwdeck .a-undecided { right: 1%; top: calc(100% - 14px); }
.dwdeck .a-strong { left: 0; top: 50%; transform: translateY(-50%); }

@media (max-width: 860px) {
  /* Two of the three fit on a narrow screen. The one about the 72% bar does
     not: that bar runs the full width of its half, so the label has to hang
     underneath it, and underneath it is the next row. */
  .dwdeck .dw-curve-anno { display: none; }
  /* Fluid rather than fixed: at 360px the fixed size put the label's left
     edge four pixels into the 19% bar above the one it points at. */
  .dwdeck .a-moderate, .dwdeck .a-strong { display: block; font-size: clamp(9px, 2.56vw, 10px); line-height: 1.35; }
  .dwdeck .a-strong { display: flex; gap: 5px; }
  /* Right-aligned and lifted clear of its own row's bar, into the empty
     right-hand side of the two rows above. The arrow comes down to where the
     37% bar ends, and both sit to the right of where the 19% bar stops, so
     nothing lands on a bar. */
  .dwdeck .a-moderate { left: auto; right: 0; bottom: 11px; text-align: right; }
  /* .dw-curve-anno.to-left in the block above is one class more specific, so
     this has to match it to win: without the extra class the arrow stayed
     left-aligned and its head landed inside the bar. */
  .dwdeck .dw-curve-anno.a-moderate svg { width: 66px; height: 30px; margin: 3px 0 0 auto; }
  /* Wraps rather than running out of the plate: from the axis to the plate's
     edge there is room for the arrow and about two words a line. */
  /* Matching .dw-curve-anno.beside's specificity, or its nowrap wins and the
     words run out past the chart's edge while the box still measures right. */
  .dwdeck .dw-curve-anno.a-strong {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    align-items: center;
  }
  .dwdeck .a-strong svg { width: 34px; height: 14px; }
}

/* ============================================================
   6 · Respect — a stat box beside the protections list
   ============================================================ */
.dwdeck .dw-split {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(22px, 3.2vw, 52px);
  align-items: stretch;
}
.dwdeck .dw-split > .dw-statbox { display: flex; flex-direction: column; justify-content: center; }
.dwdeck .dw-bigfoot {
  margin-top: 2.2svh;
  padding-top: 1.9svh;
  border-top: 1.5px dashed var(--dw-faint);
}
.dwdeck .dw-bigfoot .row1 {
  font-family: var(--dw-mono);
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 700;
  color: var(--dw-ink-strong);
  font-variant-numeric: tabular-nums;
}
.dwdeck .dw-bigfoot .row1 sup { color: var(--dw-accent); font-size: 62%; }
.dwdeck .dw-bigfoot .row1 span {
  font-family: var(--dw-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--text-soft);
  margin-left: 12px;
}
.dwdeck .dw-bigfoot .row2 {
  margin: 6px 0 0;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.5;
  color: var(--text-soft);
}

.dwdeck .dw-prot-h {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--dw-mono);
  font-weight: 500;
  font-size: clamp(10px, 0.82vw, 11.5px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 2px 0 8px;
}
.dwdeck .dw-prot-h::before {
  content: "";
  width: 24px;
  height: 0;
  border-top: 1.5px solid var(--dw-faint);
}
.dwdeck .dw-prot {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: clamp(11px, 1.8svh, 19px) 2px;
  border-top: 1.5px dashed var(--dw-faint);
}
.dwdeck .dw-prot:first-of-type { border-top: 0; }
.dwdeck .dw-prot .no {
  font-family: var(--dw-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--dw-accent);
  padding-top: 3px;
}
.dwdeck .dw-prot h3 {
  margin: 0 0 4px;
  font-family: var(--dw-mono);
  font-size: clamp(14px, 1.15vw, 16.5px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}
.dwdeck .dw-prot p {
  margin: 0;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 40em;
}

/* ============================================================
   7 · Evenhandedness
   ============================================================ */
/* The rated statement, pulled onto its own line behind an accent rule — the
   walkthroughs' aside. */
.dwdeck .dw-quote {
  margin: 0 0 1.8svh;
  padding-left: 1.2em;
  border-left: 2px solid var(--dw-accent);
  font-family: var(--dw-mono);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--text-strong);
}
.dwdeck .dw-lede.dw-lede-tight { margin-bottom: 1.2svh; }
.dwdeck .dw-lede.dw-lede-after { margin-top: 0; }

/* One ruled box divided into three: the segments are drawn, not coloured
   apart. Agree is filled, neutral is hatched, disagree is left open. */
.dwdeck .dw-fair {
  position: relative;
  display: flex;
  height: clamp(50px, 7.6svh, 70px);
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  background: var(--dw-paper);
}
.dwdeck .dw-fair-seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  min-width: 0;
  border-left: 1.5px solid var(--dw-ink);
}
.dwdeck .dw-fair-seg:first-child { border-left: 0; }
.dwdeck .dw-fair-seg > span.fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.25, 0.8, 0.3, 1) 0.42s;
}
.dw-slide.active .dw-fair-seg > span.fill { transform: scaleX(1); }
.dwdeck .dw-fair-seg.agree { flex: 85.5; color: var(--dw-on-accent); }
.dwdeck .dw-fair-seg.agree > span.fill { background: var(--dw-accent); }
.dwdeck .dw-fair-seg.neutral {
  flex: 11.7;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0 6px;
  color: var(--dw-ink-strong);
}
.dwdeck .dw-fair-seg.neutral > span.fill {
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--dw-bar-hatch) 4px 8px);
}
.dwdeck .dw-fair-seg.disagree { flex: 2.8; padding: 0; }
.dwdeck .dw-fair-seg.neutral > b,
.dwdeck .dw-fair-seg.neutral > span:not(.fill) {
  background: var(--dw-paper);
  padding: 0 0.3em;
  border-radius: 2px;
}
.dwdeck .dw-fair-seg b {
  position: relative;
  font-family: var(--dw-mono);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dwdeck .dw-fair-seg > span:not(.fill) {
  position: relative;
  font-family: var(--dw-mono);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
}
.dwdeck .dw-fair-seg.neutral > span:not(.fill) { letter-spacing: 0.12em; font-size: 10.5px; }

.dwdeck .dw-pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 3svh;
}
.dw-ptcard {
  position: relative;
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  background: var(--dw-paper);
  box-shadow: 3px 3px 0 var(--dw-cast);
  padding: 20px 24px 22px 58px;
}
.dwdeck .dw-ptcard .no {
  position: absolute;
  left: 24px;
  top: 22px;
  font-family: var(--dw-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--dw-accent);
}
.dwdeck .dw-ptcard h3 {
  margin: 0 0 6px;
  font-family: var(--dw-mono);
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}
.dwdeck .dw-ptcard p {
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 36em;
}
.dwdeck .dw-ptcard p b { color: var(--text-strong); font-weight: 600; }
.dwdeck .dw-ptcard p .tint { color: var(--dw-accent); font-weight: 600; }

/* ============================================================
   The fork out of the deck (homepage only)
   ============================================================ */
.dwdeck .dw-fork {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: 3svh;
}
.dwdeck .dw-forkcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--dw-ink);
  border-radius: 5px;
  background: var(--dw-paper);
  box-shadow: 3px 3px 0 var(--dw-cast);
  padding: clamp(18px, 2.1svh, 28px) clamp(18px, 1.7vw, 28px) clamp(20px, 2.3svh, 30px);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dwdeck .dw-forkcard:hover,
.dwdeck .dw-forkcard:focus-visible {
  box-shadow: 5px 5px 0 var(--dw-cast);
  transform: translate(-1px, -1px);
}
.dwdeck .dw-forkcard h3 {
  font-family: var(--dw-mono);
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 8px;
}
.dwdeck .dw-forkcard .dw-body { margin-bottom: 20px; }
.dwdeck .dw-forkcard .fk-brief { display: none; }
.dwdeck .dw-forkcard .go {
  margin-top: auto;
  font-family: var(--dw-mono);
  font-size: clamp(10.5px, 0.9vw, 12px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-accent);
}

/* ============================================================
   The dot rail

   The walkthroughs' step rail, on the right of the viewport for as
   long as the deck is on screen.
   ============================================================ */
.dwdeck ol.dw-dots {
  position: fixed;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.dwdeck.dw-inview ol.dw-dots { opacity: 1; visibility: visible; }
.dwdeck ol.dw-dots li { margin: 0; }
.dwdeck .dw-dots a {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--dw-faint);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.dwdeck .dw-dots a.is-done { border-color: var(--dw-accent); }
.dwdeck .dw-dots a.is-on {
  background: var(--dw-accent);
  border-color: var(--dw-accent);
  transform: scale(1.45);
}
@media (max-width: 900px) { .dwdeck ol.dw-dots { display: none; } }

/* ---- back-to-top cue ---- */
#fairness, .dw-close { position: relative; }
.dw-top {
  position: absolute;
  left: 0; right: 0;
  bottom: 12px;
  margin: 0;
  text-align: center;
}
.dw-top a {
  font-family: var(--dw-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-soft);
}
.dw-top a:hover, .dw-top a:focus-visible { color: var(--text-strong); }

/* ============================================================
   The closer
   ============================================================ */
.dw-close {
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 6svh clamp(24px, 5vw, 76px);
}
/* The mark, transcribed to a character grid (src/_data/ascii.js) — the same
   figure the walkthroughs use for their empty states. */
.dw-close .logo-lg {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 2svh;
  border-radius: 15px;
}
.dw-close .site {
  font-family: var(--dw-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--text-soft);
  margin: 0 0 3svh;
}
.dw-close h2 {
  font-family: var(--dw-mono);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-strong);
}
.dw-close .sup-eyebrow {
  font-family: var(--dw-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 7svh 0 3.2svh;
}
.dw-close .sup-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 50px;
  max-width: 1050px;
  margin: 0 auto;
}
.dw-close .sup-row img {
  height: 36px;
  width: auto;
  max-width: 172px;
  object-fit: contain;
  /* Their own colours on the light closer, as before the deck was redrawn —
     a base grayscale here took the colour off light mode as well as dark.
     Three of the files (Arthur Vining Davis, Heterodox Academy, Snider) are
     opaque PNGs with a baked-in white field, which would show as a white
     rectangle on an off-white page; multiply drops that field into the
     background, scaling the artwork by about (0.98, 0.98, 0.97), which is not
     a visible darkening. */
  mix-blend-mode: multiply;
  opacity: 0.95;
}
html.dark-mode .dw-close .sup-row img {
  filter: grayscale(1) invert(1) brightness(1.5);
  mix-blend-mode: screen;
  opacity: 0.82;
}
@media (max-width: 860px) {
  .dw-close .sup-row { gap: 18px 30px; }
  .dw-close .sup-row img { height: 28px; max-width: 138px; }
}

/* ============================================================
   Narrow screens
   ============================================================ */
@media (max-width: 1060px) {
  .dwdeck .dw-stats3 { grid-template-columns: 1fr 1fr; }
  .dwdeck .dw-stats3 .dw-statbox:last-child { grid-column: 1 / -1; }
  .dwdeck .dw-split { grid-template-columns: 1fr; }
  .dwdeck .dw-cvg-grid { grid-template-columns: 1fr; gap: 3svh; }
  .dwdeck .dw-inset { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .dw-slide { min-height: 0; padding: 44px 22px; }
  .dwdeck .dw-stats3 { grid-template-columns: 1fr; }
  .dwdeck .dw-stats3 .dw-statbox:last-child { grid-column: auto; }
  .dwdeck .dw-fork { grid-template-columns: 1fr; }
  .dwdeck .dw-forkcard .fk-full { display: none; }
  .dwdeck .dw-forkcard .fk-brief { display: inline; }
  .dwdeck .dw-kpi { font-size: 52px; }
  .dwdeck .dw-platehead { gap: 4px 18px; letter-spacing: 0.12em; }

  /* The diverging chart drops its label column and carries each row's label
     inside the bar's own lane instead. */
  .dwdeck .dw-dvg { grid-template-columns: 1fr 1fr; }
  .dwdeck .dw-dvg-lab { display: none; }
  .dwdeck .dw-dvg-l, .dwdeck .dw-dvg-r { height: 54px; }
  .dwdeck .dw-dvg .dw-bar, .dwdeck .dw-dvg .dw-pct { top: 64%; }
  .dwdeck .dw-dvg-l::after {
    content: attr(data-lab);
    position: absolute;
    left: 6px;
    top: 3px;
    font-family: var(--dw-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-soft);
    white-space: nowrap;
  }
  .dwdeck .dw-anno { display: none; }
  .dwdeck .dw-pct-note { display: none; }
  .dwdeck .dw-pct-8 { color: var(--dw-ink-strong); }
  .dwdeck .dw-dvg-legend {
    grid-template-columns: 1fr 1fr;
    font-size: clamp(8.5px, 2.7vw, 11px);
    letter-spacing: 0.04em;
    gap: 0 8px;
  }
  .dwdeck .dw-strip-opt { display: none; }

  .dwdeck .dw-vcol .xl { font-size: 10px; }
  /* Narrow columns cannot hold "n = 3,346" inside a bar: it either overflowed
     the plate or, on the two tallest bars, sat in the fill while every other
     column carried its count above. All five go above the bar here, wrapped
     after the "=" and centred, and the bars give up a sixth of their height
     to make room. The plot grows to take some of that back. */
  .dwdeck .dw-vplot:not(.dw-axis) { --hs: 0.84; height: 258px; }
  .dwdeck .dw-vbar .n {
    font-size: clamp(8px, 2.6vw, 10px);
    left: 0;
    right: 0;
    bottom: calc(100% + 3px);
    transform: none;
    width: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    color: var(--text-soft);
    /* Narrow enough that "n = 8,114" always breaks after the "=", which is
       what makes the count two lines whatever the column's width — and a
       count of known height is what lets the percentage above it sit at a
       fixed distance instead of floating wherever one line would leave it. */
    max-width: 4.2em;
    margin-inline: auto;
  }
  .dwdeck .dw-vbar .n.n-ink { color: var(--text-soft); }
  /* Only the columns that carry one need the clearance; adding it to all of
     them would leave the other three floating above their bars. */
  /* Clears the two-line count and no more, so the percentage sits directly on
     top of it the way it does on the columns that carry theirs as one block. */
  .dwdeck .dw-vcol:has(.dw-vbar .n) .dw-vpct { bottom: calc(var(--h) * var(--hs, 1) * 1% + 32px); }
  .dwdeck .dw-vcol .dw-vpct { font-size: 12px; }
  .dwdeck .dw-vplot { gap: 8px; }
  .dwdeck .dw-hist .dw-vpct { display: none; }
  .dwdeck .dw-hist { gap: 2.5px; }
  .dwdeck .dw-hist:not(.dw-axis) { height: 165px; }
  .dwdeck .dw-hist-axis .xl { font-size: 9px; margin-top: 6px; }
  .dwdeck .dw-flag { font-size: 11px; }
  .dwdeck .dw-flag-of { display: none; }
  .dwdeck .dw-inset { max-width: none; }
  .dwdeck .dw-gap-plot { gap: 56px; }
  .dwdeck .dw-gap-plot:not(.dw-axis) { height: 132px; }
  .dwdeck .dw-gap-plot .dw-vbar { width: min(100%, 74px); }
  .dwdeck .dw-pt-grid { grid-template-columns: 1fr; }
  .dwdeck .dw-fair-seg.neutral b,
  .dwdeck .dw-fair-seg.neutral > span:not(.fill) { display: none; }
  .dwdeck .dw-platebody { padding: 16px 14px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dwdeck .rev, .dw-close .rev,
  .dwdeck .dw-bar > i, .dwdeck .dw-pct, .dwdeck .dw-vpct,
  .dwdeck .dw-vbar .n, .dwdeck .dw-anno, .dwdeck .dw-curve-anno,
  .dwdeck .dw-flag-a, .dwdeck .dw-drop, .dwdeck .dw-fair-seg > span.fill {
    transition: none !important;
    opacity: 1 !important;
  }
  .dwdeck .rev, .dw-close .rev { transform: none !important; translate: none !important; }
  .dwdeck .dw-bar > i { transform: scaleX(1) !important; }
  .dwdeck .dw-vbar > i { transform: scaleY(1) !important; }
  .dwdeck .dw-fair-seg > span.fill { transform: scaleX(1) !important; }
  .dwdeck .dw-forkcard { transition: none; }
}

/* ============================================================
   The drawn line

   Copied in from walkthrough-rig.css so this sheet stands alone.
   js/hand-ink.js generates the geometry; the rules below say what a
   stroke looks like and how a box's lines lay themselves down when
   its slide arrives.
   ============================================================ */
/* Every element this sheet offers up for inking already establishes a
   containing block of its own, so this does not set `position` — writing
   `relative` here is what a straight copy of the walkthrough's rule would do,
   and it silently un-positions the diverging chart's absolutely placed bars. */
html.dw-ink .dwdeck .hi-box,
html.dw-ink .dw-close .hi-box,
html.dw-ink .dw-hero .hi-box,
html.dw-ink .rs-grid .hi-box,
html.dw-ink .dw-schools .hi-box {
  border-color: transparent;
  border-radius: 0;
}
/* …except the head bar, which is ruled off from the body of its box by a
   real border. The drawn outline goes round the outside; this line is
   inside it. */
html.dw-ink .dw-board-head { border-bottom-color: var(--dw-ink); }
/* The two the rules above are not specific enough to reach. */
html.dw-ink .dwdeck .dw-bar.hi-box,
html.dw-ink .dwdeck .dw-fair-seg.hi-box { border-color: transparent; }

/* Regions outside the deck that draw in the same hand. They take the ink
   colour and nothing else from the palette above: that block also sets a
   sunken background, a text colour and the sans stack, none of which belong
   on a hero or a card grid. Anything added here has to be added to the three
   .hi-ink rules below as well — they are what positions and strokes it. */
.dw-hero, .rs-grid, .dw-schools {
  --dw-ink: #55555f;
  --dw-ink-strong: #111118;
  --dw-paper: #fffefb;
  --dw-cast: rgba(60, 50, 40, 0.16);
  --dw-accent: #5a5ad1;
  --dw-hatch: rgba(60, 50, 40, 0.055);
}
html.dark-mode .dw-hero, html.dark-mode .rs-grid,
html.dark-mode .dw-schools {
  --dw-ink: #a8a8b4;
  --dw-ink-strong: #f1f1f5;
  --dw-paper: #15151e;
  --dw-cast: rgba(226, 226, 255, 0.09);
  --dw-accent: #8a8aff;
  --dw-hatch: rgba(226, 226, 255, 0.05);
}

/* The hero's heading is in this list too: without a positioned ink layer the
   SVG lays out in flow, which grows the box it was measured from, which inks
   it larger again — the heading ran to five thousand pixels wide before the
   scope was widened to reach it. */
.dwdeck .hi-ink, .dw-close .hi-ink, .dw-hero .hi-ink, .rs-grid .hi-ink,
.dw-schools .hi-ink {
  position: absolute;
  left: -7px;
  top: -7px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  z-index: 3;
}
.dwdeck .hi-ink.hi-inset, .dw-schools .hi-ink.hi-inset { left: 0; top: 0; }
.dwdeck .hi-ink path, .dw-close .hi-ink path, .dw-hero .hi-ink path,
.rs-grid .hi-ink path, .dw-schools .hi-ink path {
  stroke: var(--dw-ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dwdeck .hi-ink path.hi-p2,
.dw-schools .hi-ink path.hi-p2 { stroke-width: 0.85; stroke-opacity: 0.5; }
.dwdeck .hi-faint path { stroke: var(--dw-faint); stroke-width: 1; }
.dwdeck .hi-heavy path { stroke: var(--dw-ink-strong); stroke-width: 1.4; }
.dwdeck .hi-accent path { stroke: var(--dw-accent); stroke-width: 1.2; }
.dwdeck .hi-dash path { stroke-dasharray: 4 3.5; }

/* The hero's underline: two passes in the accent, the heavier one on top.
   Written here rather than left to .dwdeck's hi-accent, which the hero is
   outside of, and a shade heavier than the deck's marks because it carries
   the page's first line rather than pointing at part of a chart. */
.dw-hero .hi-ink.hi-accent path {
  stroke: var(--dw-accent);
  stroke-width: 1.4;
}
.dw-hero .hi-ink.hi-accent path.hi-p2 {
  stroke-width: 1;
  stroke-opacity: 0.45;
}

@keyframes dw-draw { to { stroke-dashoffset: 0; } }
@keyframes dw-inkin { to { opacity: 1; } }

html.dw-ink .dwdeck .hi-ink:not(.hi-dash) path,
html.dw-ink .dw-hero .hi-ink path,
html.dw-ink .rs-grid .hi-ink path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.dw-ink .dwdeck .hi-on > .hi-ink:not(.hi-dash) path,
html.dw-ink .dw-hero .hi-on > .hi-ink path,
html.dw-ink .rs-grid .hi-on > .hi-ink path {
  animation: dw-draw 0.34s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
  /* the box's place in its slide, then the edge's place in the box */
  animation-delay: calc(var(--b, 0) * 0.05s + var(--i, 0) * 0.035s);
}
html.dw-ink .dwdeck .hi-dash path { opacity: 0; }
html.dw-ink .dwdeck .hi-on > .hi-dash path {
  animation: dw-inkin 0.28s ease forwards;
  animation-delay: calc(var(--b, 0) * 0.05s + var(--i, 0) * 0.035s);
}
@media (prefers-reduced-motion: reduce) {
  html.dw-ink .dwdeck .hi-ink:not(.hi-dash) path,
  html.dw-ink .dw-hero .hi-ink path,
  html.dw-ink .rs-grid .hi-ink path { stroke-dashoffset: 0; animation: none; }
  html.dw-ink .dwdeck .hi-dash path { opacity: 1; animation: none; }
}

/* ============================================================
   No JS: the slides read as ordinary blocks
   ============================================================ */
html:not(.dw-js) .dwdeck .rev,
html:not(.dw-js) .dw-close .rev { opacity: 1; transform: none; }
html:not(.dw-js) .dwdeck .dw-bar > i { transform: scaleX(1); }
html:not(.dw-js) .dwdeck .dw-vbar > i { transform: scaleY(1); }
html:not(.dw-js) .dwdeck .dw-fair-seg > span.fill { transform: scaleX(1); }
html:not(.dw-js) .dwdeck .dw-pct,
html:not(.dw-js) .dwdeck .dw-vpct,
html:not(.dw-js) .dwdeck .dw-vbar .n,
html:not(.dw-js) .dwdeck .dw-anno,
html:not(.dw-js) .dwdeck .dw-curve-anno,
html:not(.dw-js) .dwdeck .dw-flag-a,
html:not(.dw-js) .dwdeck .dw-drop { opacity: 1; }
html:not(.dw-js) .dwdeck ol.dw-dots { display: none; }