/* Accent × Channel — one stylesheet for the four pages and the deck.
   Print-like by default: paper, hairlines, no shadows. Colour is spent
   only where it carries a measurement. */

:root {
  --paper: #fbfaf7;
  --paper-2: #f4f2ec;
  --ink: #14181f;
  --ink-2: #454b57;
  --ink-3: #8a8f98;
  --line: #e0dcd4;
  --line-2: #cfc9bd;
  --navy: #1b3a6b;
  --navy-soft: #e8edf5;
  --rust: #c0561c;
  --rust-soft: #faf0ea;
  --green: #2e7d4f;
  --green-soft: #eaf3ee;
  --amber: #b98a1e;
  --amber-soft: #fbf6e8;
  --r: 3px;
  --measure: 68ch;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.62 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--navy); text-underline-offset: 2px; }

/* ------------------------------------------------------------------ nav */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: 52px; padding: 0 28px;
  background: rgba(251, 250, 247, .97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap; flex: none;
}
.wordmark span { color: var(--rust); }
.topbar nav {
  display: flex; gap: 22px; margin-left: auto;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-2);
  text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent;
  white-space: nowrap; flex: none;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); }

/* Hamburger: only exists below 860px, where the four sections cannot fit on
   one line. The panel is a dropdown under the bar, not a drawer — four links
   do not need a drawer. */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 32px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper);
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%; border-radius: 2px;
  background: var(--ink); transition: transform .22s, opacity .16s;
}
.topbar.open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.topbar.open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.btn-present {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 7px 14px; border-radius: var(--r); white-space: nowrap;
}
.btn-present:hover { background: var(--navy); }

/* --------------------------------------------------------------- layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--measure); }
section { padding: 64px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; margin: 0 0 20px; }
h2 { font-size: 27px; line-height: 1.2; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 0 0 8px; }

.eyebrow {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px;
}
.lede { font-size: 19.5px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); margin: 0 0 8px; }
p { margin: 0 0 14px; max-width: var(--measure); }
.small { font-size: 14px; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 84px 0 56px; border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px; align-items: center;
}
.hero h1 em { font-style: normal; color: var(--rust); }
.hero .claim { font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.meta-line {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-3);
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ four cell */
.cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cell {
  position: relative; padding: 16px 16px 14px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
  text-align: left; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.cell:hover { border-color: var(--line-2); transform: translateY(-1px); }
.cell[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-soft); }
.cell .k {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--paper); background: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 2px; flex: none;
}
.cell[data-shift="1"] .k { background: var(--rust); }
.cell[data-codec="1"] .k { background: var(--navy); }
.cell[data-shift="1"][data-codec="1"] .k { background: linear-gradient(135deg, var(--rust) 50%, var(--navy) 50%); }
.cell .t { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: var(--ink); display: block; }
.cell .v {
  font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums;
  margin-top: 2px; color: var(--ink); display: block; line-height: 1.15;
}
.cell .v small { font-size: 11px; color: var(--ink-3); margin-left: 3px; }
.cells-axis {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--sans); font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase;
}

/* -------------------------------------------------------------- figures */
figure { margin: 0 0 28px; }
figure svg { display: block; width: 100%; height: auto; overflow: visible; }
figcaption {
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--ink-3); margin-top: 10px; max-width: 78ch;
}
figcaption b { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--paper); padding: 18px 18px 16px; }
.stat .l { font-family: var(--sans); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stat .n { font-family: var(--mono); font-size: 27px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.stat .n small { font-size: 13px; color: var(--ink-3); }
.stat .s { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.stat.good .n { color: var(--green); }
.stat.bad .n { color: var(--rust); }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13.5px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* No sticky header. `.table-wrap` is the horizontal scroll container, and a
   non-scrolling overflow container still anchors a sticky `top:` offset — the
   header was being pushed 52px down over the first data row on every wide
   table. Pinning it correctly would need the page to be the scroll container,
   which horizontal scrolling forbids; a static header is the honest version. */
th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper-2); }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tag {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid;
}
.tag.go { color: var(--green); border-color: #b9d7c5; background: var(--green-soft); }
.tag.nogo { color: var(--rust); border-color: #e8c3ae; background: var(--rust-soft); }
.tag.inc { color: var(--amber); border-color: #e3d2a3; background: var(--amber-soft); }

/* -------------------------------------------------------------- controls */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.seg button {
  font-family: var(--sans); font-size: 13px; padding: 7px 14px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--paper-2); color: var(--ink); }
.controls .lbl { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-right: 4px; }

/* --------------------------------------------------------------- legend */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); margin: 12px 0 0; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }

/* ----------------------------------------------------------- two column */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }

/* The PRISMA detail panel sits under the funnel, not beside it: the diagram is
   the page's centrepiece, and half a column rendered its 12px labels at 8px. */
.stage-detail {
  margin-top: 24px; padding: 18px 22px; max-width: 82ch;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: var(--r); background: var(--paper-2);
}

/* --------------------------------------------------------------- footer */
footer {
  padding: 40px 0 64px; font-family: var(--sans); font-size: 13px;
  color: var(--ink-3); border-top: 1px solid var(--line);
}
footer a { color: var(--ink-2); }

.footer-row {
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  justify-content: space-between; align-items: center;
}
.footer-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.footer-id img { flex: none; display: block; width: 34px; height: 34px; }
.footer-id .fname {
  display: block; color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.footer-id .fmeta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------------------------------------------------------------- motion */
/* The hidden state is added by script (`html.motion`), never in the static
   sheet: with JS off, or with reduced motion, every section is simply there.
   Only opacity and transform are animated — a backgrounded renderer holding
   an animation at frame zero must never leave text unreadable. */
html.motion [data-reveal] {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .5s cubic-bezier(.2,.7,.3,1),
              transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
}
html.motion [data-reveal].in { opacity: 1; transform: none; }

/* nav underline grows from the left instead of appearing */
.topbar nav a { position: relative; border-bottom-color: transparent; }
.topbar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rust); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.topbar nav a:hover::after { transform: scaleX(1); }
.topbar nav a[aria-current="page"]::after { transform: scaleX(1); }

.cell:active { transform: translateY(0) scale(.995); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .hero { padding: 52px 0 40px; }
  .hero-grid, .two { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  section { padding: 44px 0; }
  .topbar { padding: 0 18px; gap: 12px; }
  .wrap { padding: 0 18px; }

  /* the four sections do not fit: fold them behind a hamburger */
  .nav-toggle { display: flex; flex: none; }
  .topbar .btn-present { margin-left: auto; }
  .topbar nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    margin: 0; padding: 4px 18px 12px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px -18px rgba(20, 24, 31, .5);
  }
  .topbar.open nav { display: flex; }
  .topbar nav a {
    font-size: 15px; padding: 13px 0; border-bottom: 1px solid var(--line);
  }
  .topbar nav a:last-child { border-bottom: 0; }
  .topbar nav a[aria-current="page"] { color: var(--rust); }
  /* the panel rows use their own hairlines, not the desktop underline */
  .topbar nav a::after { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .btn-present { padding: 6px 10px; }
  .wordmark { font-size: 11.5px; letter-spacing: .04em; }
}

/* The demo table's first column is a filename, so it wraps; the rest are
   short numbers and must not. */
#score-table th, #score-table td { padding: 8px 9px; }
#score-table td:first-child { white-space: normal; min-width: 12ch; }

/* On a narrow screen a ten-column data table scrolls sideways, and the
   columns that go off the edge are the interesting ones. Drop the raw cell
   values there and keep the derived contrasts: the means are readable in the
   chart above, the contrasts are what the page is for. */
@media (max-width: 720px) {
  #means-table th:nth-child(3), #means-table td:nth-child(3),
  #means-table th:nth-child(4), #means-table td:nth-child(4),
  #means-table th:nth-child(5), #means-table td:nth-child(5),
  #means-table th:nth-child(6), #means-table td:nth-child(6),
  #means-table th:nth-child(7), #means-table td:nth-child(7),
  #means-table th:nth-child(8), #means-table td:nth-child(8),
  #runs-table th:nth-child(4), #runs-table td:nth-child(4),
  #runs-table th:nth-child(5), #runs-table td:nth-child(5),
  #runs-table th:nth-child(6), #runs-table td:nth-child(6),
  #runs-table th:nth-child(7), #runs-table td:nth-child(7),
  #runs-table th:nth-child(8), #runs-table td:nth-child(8),
  #runs-table th:nth-child(9), #runs-table td:nth-child(9) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ================================================================ deck */
body.deck { overflow: hidden; background: var(--paper); }
.slide-stage { position: fixed; inset: 0; display: grid; place-items: center; padding: 4vh 4vw; }
.slide {
  display: none; width: 100%; max-width: 1180px; max-height: 92vh; overflow: hidden;
}
.slide.on { display: block; animation: rise .28s cubic-bezier(.2,.7,.3,1); }
/* Motion only — never opacity. A thumbnail, a throttled or backgrounded
   renderer, or a paused animation would otherwise leave the slide invisible,
   and a deck that can go blank is worse than a deck that does not move. */
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
/* children follow the slide by a frame or three, so a slide assembles */
.slide.on > * { animation: rise .4s cubic-bezier(.2,.7,.3,1) backwards; }
.slide.on > *:nth-child(2) { animation-delay: .05s; }
.slide.on > *:nth-child(3) { animation-delay: .1s; }
.slide.on > *:nth-child(4) { animation-delay: .15s; }
.slide h1 { font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 14px; }
.slide h2 { font-size: clamp(22px, 2.6vw, 33px); margin-bottom: 12px; }
.slide .lede { font-size: clamp(15px, 1.5vw, 19px); }
.slide .deck-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; align-items: center; }

.deck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
  background: linear-gradient(to top, rgba(251,250,247,.97), rgba(251,250,247,0));
  opacity: .25; transition: opacity .2s;
}
.deck-bar:hover, .deck-bar:focus-within { opacity: 1; }
.deck-progress { position: fixed; left: 0; top: 0; height: 2px; background: var(--rust); transition: width .25s; z-index: 60; }
.deck-bar .sp { flex: 1; }
.deck-bar button {
  font-family: var(--sans); font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r);
  color: var(--ink-2); cursor: pointer;
}
.deck-bar button:hover { color: var(--ink); border-color: var(--ink-3); }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); }

@media (max-width: 860px) {
  .slide .deck-split { grid-template-columns: 1fr; gap: 2vh; }
  .slide-stage { padding: 3vh 5vw; }
}

/* print: the deck becomes a handout */
@media print {
  .topbar, .deck-bar, .deck-progress, .btn-present { display: none !important; }
  body.deck { overflow: visible; }
  .slide-stage { position: static; }
  .slide { display: block !important; page-break-after: always; max-height: none; }
  section { page-break-inside: avoid; }
}