/* DUST — pure black, enormous quiet type. */

:root{
  --black:#000;
  --head:#ededed;
  --body:#9a9a9a;
  --label:#828282;      /* 5.47:1 on black — the quiet tone, still legible */
  --dim:#9a9a9a;
  --hair:#1a1a1a;
  --bright:#ececec;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --edge:clamp(1.5rem,6vw,5.5rem);
  --wide:78rem;
  --screen:clamp(7rem,17vh,12rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--body);
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:#ededed;color:#000}
a{color:inherit}
img,svg{max-width:100%}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--edge)}

/* ---------- micro-labels ---------- */
.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.35em;
  color:var(--label);
  margin:0;
}

/* ---------- header ---------- */
.top{
  padding:2.1rem var(--edge) 0;
  max-width:var(--wide);
  margin:0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
}
.top .mark{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--head);
  text-decoration:none;
}
.top nav{display:flex;gap:clamp(1.1rem,3.2vw,2.6rem)}
.top nav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--label);
  text-decoration:none;
  transition:color .3s ease;
}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--head)}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 5.5rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 0 3.5rem;
  position:relative;
}
.wordmark{
  font-size:clamp(3.5rem,12vw,9rem);
  font-weight:300;
  letter-spacing:-.045em;
  line-height:.92;
  color:var(--head);
  margin:0;
}
.subtitle{
  margin:2.4rem 0 0;
  font-size:15px;
  line-height:1.75;
  color:var(--body);
  word-spacing:.16em;
  max-width:46ch;
}
.scroll{
  position:absolute;
  left:50%;
  bottom:2.2rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
}
.scroll .arrow{animation:drift 2.5s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- page head (inner pages) ---------- */
.pagehead{
  padding:clamp(5rem,14vh,9rem) 0 0;
}
.pagehead h1{
  font-size:clamp(2.6rem,7.5vw,5.25rem);
  font-weight:300;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--head);
  margin:1.9rem 0 0;
}
.pagehead .lede{
  margin:2.1rem 0 0;
  max-width:58ch;
  font-size:17px;
}

/* ---------- sections ---------- */
section{padding:var(--screen) 0}
section.tight{padding:calc(var(--screen) * .55) 0}
h2{
  font-size:clamp(1.7rem,4.1vw,3.15rem);
  font-weight:300;
  letter-spacing:-.028em;
  line-height:1.14;
  color:var(--head);
  margin:1.8rem 0 0;
  max-width:20ch;
}
h2.wide{max-width:26ch}
h3{
  font-size:clamp(1.15rem,2vw,1.45rem);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.3;
  color:var(--head);
  margin:0;
}
p{margin:1.5rem 0 0;max-width:62ch}
p.lead{font-size:17px;color:var(--body)}
p:first-child{margin-top:0}
strong{color:var(--head);font-weight:400;text-decoration:none}
em{font-style:normal;color:var(--head)}

.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- links ---------- */
.plain{
  color:var(--body);
  text-decoration:none;
  border-bottom:1px solid var(--label);
  padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;
}
.plain:hover{color:var(--head);border-color:var(--head)}

/* ---------- the one button ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  background:var(--bright);
  color:#000;
  font-family:var(--sans);
  font-size:14px;
  font-weight:400;
  letter-spacing:.01em;
  text-decoration:none;
  border:0;
  border-radius:6px;
  padding:.95rem 1.9rem;
  cursor:pointer;
  transition:opacity .3s ease,transform .3s ease;
}
.pill:hover{opacity:.86}
.pill:active{transform:translateY(1px)}
.pill[aria-disabled="true"]{background:#8a8a8a;color:#000;cursor:default}
.pill[aria-disabled="true"]:hover{opacity:1}
.pill[aria-disabled="true"]:active{transform:none}
.pill svg{display:block}

/* ---------- integers / figures ---------- */
.integers{margin-top:3.2rem;display:flex;flex-direction:column;gap:2.4rem}
.integer .q{
  font-size:clamp(1.05rem,2.3vw,1.5rem);
  font-weight:300;
  color:var(--head);
  letter-spacing:-.012em;
  margin:.7rem 0 0;
  max-width:40ch;
}

.figures{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(2.8rem,6vw,4.5rem) clamp(2rem,5vw,4rem);
}
.fig .n{
  font-size:clamp(2.4rem,5.4vw,3.9rem);
  font-weight:300;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--head);
  font-variant-numeric:tabular-nums;
}
.fig .c{margin:1rem 0 0;font-size:14.5px;max-width:26ch}

/* ---------- code lines ---------- */
.code{
  font-family:var(--mono);
  font-size:clamp(12.5px,1.45vw,14px);
  line-height:1.9;
  color:var(--label);
  letter-spacing:0;
  margin:2.8rem 0 0;
  overflow-x:auto;
  padding-bottom:.4rem;
}
.code .ln{
  display:grid;
  grid-template-columns:minmax(24rem,32rem) auto;
  gap:2.5rem;
  align-items:baseline;
  white-space:nowrap;
}
.code .on{color:var(--head)}
.code .off{color:var(--label);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#5c5c5c}
.code .note{color:var(--label)}

/* ---------- quiet lists ---------- */
.rows{margin:3rem 0 0;width:100%}
.row{
  display:flex;
  gap:2rem;
  justify-content:space-between;
  align-items:baseline;
  padding:1.15rem 0;
  border-top:1px solid var(--hair);
}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .k{color:var(--body);font-size:15.5px}
.row .v{
  color:var(--head);
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.row .v.dim{color:var(--label)}

/* ---------- tables ---------- */
.scroller{overflow-x:auto;margin-top:3rem;padding-bottom:.5rem}
table{border-collapse:collapse;width:100%;min-width:34rem}
th{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--label);
  text-align:left;
  padding:0 1.6rem 1.1rem 0;
  vertical-align:bottom;
}
td{
  padding:1.15rem 1.6rem 1.15rem 0;
  border-top:1px solid var(--hair);
  font-size:15px;
  color:var(--body);
  vertical-align:top;
}
th:last-child,td:last-child{padding-right:0}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
td.n{color:var(--head)}
td.head{color:var(--head)}
tbody tr:last-child td{border-bottom:1px solid var(--hair)}

/* ---------- the press ---------- */
.press{margin-top:3.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.2rem}
.press .state{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);max-width:34ch;line-height:1.7}
.meter{margin-top:3.4rem;max-width:52rem}
.meter .n{
  font-size:clamp(2rem,4.4vw,3.1rem);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  transition:opacity .18s ease;
}
.meter .n.flick{opacity:.35}
.meter .c{margin:.95rem 0 0;font-size:14px;color:var(--dim);max-width:22ch}

/* The headcount sits above; the two wallets sit BESIDE each other at every
   width, because the whole point of the widget is reading them in one glance. */
.headcount{padding-bottom:2.8rem}
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;   /* never wraps — see above */
  gap:1.4rem clamp(1rem,4vw,2.6rem);
  border-top:1px solid var(--hair);
  padding-top:2.2rem;
}
.side .who{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
  margin:0 0 1rem;
  max-width:30ch;
}
/* Resting state: the equation itself, not a placeholder. */
.side .v{
  font-size:clamp(1.5rem,4.2vw,2.7rem);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:1.05;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  transition:opacity .18s ease;
  min-height:1.05em;
}
.side .v.flick{opacity:.35}
.side .v.rest{
  font-family:var(--mono);
  font-size:clamp(13px,3vw,17px);
  letter-spacing:0;
  color:var(--dim);
  line-height:1.5;
}
.verdict{
  margin:2.2rem 0 0;
  font-size:15.5px;
  color:var(--dim);
  max-width:44ch;
}
.verdict strong{color:var(--head);font-weight:400}
.pressctl{margin:2.4rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline}
.equation{
  margin-top:3.4rem;
  font-family:var(--mono);
  font-size:clamp(13px,1.6vw,15px);
  color:var(--dim);
  letter-spacing:.02em;
  line-height:2.2;
}
.equation em{color:var(--head);font-style:normal}
.equation .ln{white-space:nowrap;overflow-x:auto}

/* ---------- footer ---------- */
footer{padding:var(--screen) 0 4rem}
.foot{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem 4rem;
  justify-content:space-between;
  align-items:flex-start;
  border-top:1px solid var(--hair);
  padding-top:2.6rem;
}
.foot nav{display:flex;flex-direction:column;gap:.85rem}
.foot nav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--label);
  text-decoration:none;
  transition:color .3s ease;
}
.foot nav a:hover{color:var(--head)}
.foot .note{max-width:34ch;font-size:14px;color:var(--label);margin:0}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}

@media (max-width:640px){
  body{font-size:16px}
  .top{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .row{flex-direction:column;gap:.35rem;align-items:flex-start}
  .row .v{text-align:left;white-space:normal}
  .equation .ln{white-space:normal;overflow-x:visible;margin-bottom:.6rem}
  .code{white-space:normal}
  .code .ln{grid-template-columns:1fr;gap:.1rem;white-space:normal;margin-bottom:1.4rem}
  .code .off{text-decoration-line:line-through}
  table{min-width:20rem}
  th{padding-right:1.1rem;letter-spacing:.2em}
  td{padding-right:1.1rem;font-size:14.5px}

  /* A table whose last column is prose cannot hold three columns at 390: the
     third one lands at ~150px and breaks words mid-token. Those tables opt into
     .stack and become labelled blocks — the shape .row already takes here. The
     numeric tables keep their grid, because a matrix of dollars is worth
     reading across. */
  .scroller.stack{overflow-x:visible;padding-bottom:0}
  .scroller.stack table{display:block;min-width:0;width:100%}
  .scroller.stack thead{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .scroller.stack tbody{display:block}
  /* Row one: the name, and the one short value beside it. Everything after
     spans the full width under its own micro-label. */
  .scroller.stack tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:1.3rem;
    border-top:1px solid var(--hair);
    padding:1.5rem 0 1.7rem;
  }
  .scroller.stack tbody tr:last-child td{border-bottom:0}
  .scroller.stack tbody tr:last-child{border-bottom:1px solid var(--hair)}
  .scroller.stack td{
    display:block;border:0;padding:0;text-align:left;
    font-size:15px;line-height:1.62;
  }
  .scroller.stack td:nth-child(2){justify-self:end;text-align:right}
  .scroller.stack td:nth-child(n+3){grid-column:1 / -1;margin-top:1.05rem}
  .scroller.stack td.n{font-size:14px}
  .scroller.stack td.key{font-size:13.5px}
  .scroller.stack td[data-l]::before{
    content:attr(data-l);
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    font-weight:400;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--label);
    margin-bottom:.42rem;
  }
  /* the value that shares row one keeps its label on the same line */
  .scroller.stack td:nth-child(2)[data-l]::before{
    display:inline;
    margin:0 .6rem 0 0;
    vertical-align:baseline;
  }
  .figures{gap:2.6rem}
  .compare{gap:1.2rem 1.1rem}
  .side .who{font-size:10.5px;letter-spacing:.13em;max-width:15ch}
  .press{gap:1.2rem 1.4rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .scroll .arrow{animation:none!important}
}

/* inline code fragments in prose */
.mono{font-family:var(--mono);font-size:.82em;letter-spacing:0;color:var(--head);overflow-wrap:anywhere}
/* a short token that must not be hyphenated across a line at 390 */
.mono.nb{white-space:nowrap}
td.key{font-family:var(--mono);font-size:13px;color:var(--head);font-variant-numeric:tabular-nums}
.row .k{max-width:70ch}


/* ---------- focus, everywhere ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--head);
  outline-offset:3px;
  border-radius:3px;
}
.pill:focus-visible{outline:2px solid var(--head);outline-offset:4px}
a:focus-visible{color:var(--head)}

/* ---------- the status band on inner pages ---------- */
.statusband{
  margin:clamp(3.2rem,7vh,4.6rem) 0 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:1.9rem 0 2rem;
}
.statusband p{
  margin:.85rem 0 0;
  font-size:16px;
  color:var(--dim);
  max-width:60ch;
}
.statusband .headline{color:var(--head)}

/* ---------- a table that is arithmetic, not a measurement ---------- */
.caveat{
  margin:2.4rem 0 0;
  padding-left:1.1rem;
  border-left:1px solid #3d3d3d;
  font-size:15.5px;
  color:var(--dim);
  max-width:58ch;
}
.caveat strong{color:var(--head);font-weight:400}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* a link that behaves as a control */
.linkbtn{
  background:none;border:0;padding:0;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--dim);
  text-decoration:none;
  border-bottom:1px solid var(--label);
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease;
}
.linkbtn:hover{color:var(--head);border-color:var(--head)}


/* ==================================================================
   GENERATED IMAGERY
   Shared ink for every drawn figure on the site. Nothing here fills a
   shape it does not have to: hairlines, one ink, one page.
   ================================================================== */
:root{
  --ink:#ededed;      /* the drawn foreground, same as --head */
  --ink-2:#9a9a9a;
  --ink-3:#5e5e5e;    /* structural lines that are not data */
  --grid:#181818;     /* grid, quieter than a hairline row rule */
}

/* ---------- 01 · the hero field ---------- */
.hero > .field{
  /* An abs-positioned canvas inside a centred flex container does NOT get its
     height from top/bottom — Chrome falls back to the canvas's intrinsic 2:1
     ratio, which left the lattice a third of the way down the hero at 390.
     The height is stated. */
  position:absolute;
  top:0;
  bottom:0;
  height:100%;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  display:block;
  pointer-events:none;
  z-index:0;
}
.hero > .wordmark,
.hero > .subtitle{position:relative;z-index:1}
.hero > .scroll{z-index:1}

/* ---------- shared chrome for the drawn figures ---------- */
figure{margin:0}
figure figcaption{
  margin:2.1rem 0 0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--label);
  max-width:64ch;
}
figure figcaption .mono{color:var(--dim)}

/* ---------- 04 · balance blindness ---------- */
.fig-blind{margin:4.4rem 0 0}
.fb-band{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:1.6rem 0 1.9rem;
}
.fb-band > .label{margin-bottom:2rem}
.fb-wal{
  display:grid;
  grid-template-columns:minmax(6.5rem,9rem) minmax(0,1fr) minmax(9rem,11rem);
  align-items:center;
  gap:0 clamp(1rem,2.4vw,2rem);
  padding:.85rem 0;
}
.fb-who{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
  margin:0;
}
.fb-track{
  height:14px;
  border-left:1px solid var(--ink-3);
  border-right:1px solid #2e2e2e;
  display:flex;
  align-items:stretch;
}
.fb-bar{
  display:block;
  min-width:1px;
  border:1px solid var(--ink);
  border-left:0;
  background:transparent;
}
.fb-amt{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--head);
  text-align:right;
  white-space:nowrap;
}
.fb-u{color:var(--label);margin-left:.55em;font-size:11px;letter-spacing:.12em}
.fb-note{
  margin:1.5rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:60ch;
}
.fb-join{display:block;width:100%;height:74px}
.fb-core .fb-ints{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem clamp(1.6rem,5vw,4rem);
}
.fb-int{
  font-family:var(--mono);
  font-size:clamp(13px,1.6vw,15px);
  color:var(--head);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fb-int em{color:var(--dim);font-style:normal}
.fb-outs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem clamp(1rem,4vw,3rem);
  text-align:center;
}
.fb-out .fb-val{
  margin:.9rem 0 0;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:300;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--head);
  font-variant-numeric:tabular-nums;
}
.fb-out .fb-sub{margin:.75rem 0 0;font-size:13.5px;color:var(--label)}

@media (max-width:640px){
  .fb-wal{grid-template-columns:1fr auto;gap:.5rem .9rem}
  .fb-wal .fb-track{grid-column:1 / -1;order:3;margin-top:.55rem}
  .fb-who{align-self:center}
  .fb-join{height:52px}
  .fb-outs{gap:1.6rem 1rem}
}

/* ---------- 05 · weighted rule vs headcount ---------- */
.fig-weight{margin:4.4rem 0 0}
.wc-legend{
  margin:0 0 3rem;
  font-size:14px;
  line-height:1.75;
  color:var(--label);
  max-width:70ch;
  border-top:1px solid var(--hair);
  padding-top:1.5rem;
}
.wc-legend .mono{color:var(--dim)}
.wc-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,5vw,4.5rem);
}
.wc-sub{
  margin:.95rem 0 0;
  font-size:14px;
  color:var(--dim);
}
.wc-rows{
  list-style:none;
  margin:1.9rem 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.wc-rows li{
  display:grid;
  grid-template-columns:1.4rem minmax(0,1fr) 4.2rem;
  align-items:center;
  gap:0 .85rem;
  padding:.62rem 0;
  border-bottom:1px solid var(--hair);
}
.wc-h{
  font-family:var(--mono);
  font-size:11px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
}
.wc-lane{display:block;height:9px;border-left:1px solid #2e2e2e}
.wc-b{
  display:block;
  height:9px;
  min-width:1px;
  background:var(--ink);
}
.wc-p{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.wc-verdict{
  margin:1.7rem 0 0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--dim);
  max-width:38ch;
}
.wc-verdict strong{color:var(--head);font-weight:400}

@media (max-width:860px){
  .wc-pair{grid-template-columns:1fr;gap:3.6rem}
  .wc-verdict{max-width:60ch}
}

/* ---------- 02 · the ledger panel ---------- */
/* Hairlines only. A ledger that fills its rows is a chart pretending to be
   a table; this one is a table. */
.fig-ledger{margin:4.6rem 0 0}
.lg-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.lg-warn{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.lg-warn .mono{color:var(--dim)}
.lg-scroll{overflow-x:auto;margin-top:1.9rem;padding-bottom:.3rem}
.lg-table{min-width:44rem}
.lg-r{
  display:grid;
  grid-template-columns:minmax(6.5rem,1fr) 6.4rem 8.6rem 10.4rem 11rem;
  align-items:baseline;
  gap:0 clamp(.8rem,2vw,1.8rem);
  width:100%;
  text-align:left;
  padding:.86rem 0;
  border-top:1px solid var(--hair);
  background:none;
  border-left:0;border-right:0;border-bottom:0;
  font:inherit;
  color:inherit;
}
.lg-table > .lg-r:last-child{border-bottom:1px solid var(--hair)}
button.lg-r{cursor:pointer;transition:border-color .25s ease}
button.lg-r:hover .lg-c{color:var(--head)}
button.lg-r[aria-current="true"]{border-top-color:#3a3a3a}
button.lg-r[aria-current="true"] + button.lg-r{border-top-color:#3a3a3a}
button.lg-r[aria-current="true"] .lg-p::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin-right:.7rem;
  vertical-align:.12em;
  background:var(--ink);
}
button.lg-r:not([aria-current="true"]) .lg-p{padding-left:calc(5px + .7rem)}
button.lg-r[aria-current="true"] .lg-c{color:var(--head)}
.lg-c{
  font-family:var(--mono);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  color:var(--dim);
  white-space:nowrap;
  transition:color .25s ease;
}
.lg-n{text-align:right}
.lg-p{color:var(--label)}
.lg-w{color:var(--head)}
.lg-held{color:var(--dim)}
.lg-ref{color:var(--label)}
.lg-nil{color:var(--label)}
.lg-hd{border-top:0;padding-bottom:1.1rem}
.lg-hd .lg-c{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}
.lg-hd .lg-p{padding-left:calc(5px + .7rem)}
.lg-crew .lg-r{grid-template-columns:minmax(9.5rem,1fr) 10rem 9.6rem 9.6rem}
.lg-crew{min-width:40rem}
.lg-detail{margin-top:3.6rem;border-top:1px solid var(--hair);padding-top:1.6rem}
.lg-detail > .label{max-width:none}
.lg-head > .label{max-width:none}
.lg-empty{
  margin:1.4rem 0 0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--dim);
  max-width:58ch;
  border-top:1px solid var(--hair);
  padding-top:1.4rem;
}
.lg-foot{
  margin-top:2.2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.5rem clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--hair);
  padding-top:1.7rem;
}
.lg-f{display:flex;flex-direction:column}
.lg-fk{
  display:block;
  min-height:3.3em;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--label);
}
.lg-fv{
  display:block;
  margin-top:.55rem;
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--head);
}
button.lg-r:focus-visible{outline:2px solid var(--head);outline-offset:-2px;border-radius:2px}

/* Below 640 the panel stops scrolling sideways and drops the two columns
   that the footer strip already carries for the selected period — pot and
   fee burned above, the referral rate below. The wage column, which is the
   argument, stays on screen at every width. */
@media (max-width:640px){
  .lg-scroll{overflow-x:visible}
  .lg-table{min-width:0}
  .lg-crew{min-width:0}
  .lg-r{grid-template-columns:minmax(4.4rem,1fr) 4.2rem 6.6rem;gap:0 .8rem}
  .lg-r > .lg-c:nth-child(3),
  .lg-r > .lg-c:nth-child(5){display:none}
  .lg-crew .lg-r{grid-template-columns:minmax(6rem,1fr) 6.8rem 6.8rem}
  .lg-crew .lg-r > .lg-c:nth-child(4){display:none}
  .lg-crew .lg-r > .lg-c:nth-child(3){display:block}
  .lg-c{font-size:11px}
  .lg-hd .lg-c{font-size:9.5px;letter-spacing:.14em}
  .lg-fk{min-height:auto}
  .lg-foot{gap:1.3rem 1.4rem}
}

/* ---------- 03 · the equilibrium curve ---------- */
.fig-eq{margin:4.4rem 0 0}
.eq-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.eq-head > .label{max-width:none}
.eq-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.eq-sub .mono{color:var(--dim)}
.eq-plot{
  margin-top:3rem;
  display:grid;
  grid-template-columns:3.9rem minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:.9rem;
}
.eq-y{
  position:relative;
  grid-column:1;
  grid-row:1;
  height:clamp(220px,26vw,380px);
}
.eq-y span{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.eq-area{
  position:relative;
  grid-column:2;
  grid-row:1;
  height:clamp(220px,26vw,380px);
}
.eq-svg{display:block;width:100%;height:100%;overflow:visible}
.eq-grid line{stroke:#181818;stroke-width:1;vector-effect:non-scaling-stroke}
.eq-fee{
  fill:none;stroke:#9a9a9a;stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1) .15s;
}
.eq-curve{
  fill:none;stroke:#ededed;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
.eq-cross{stroke:#5e5e5e;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.eq-dot{fill:#000;stroke:#ededed;stroke-width:1.5;vector-effect:non-scaling-stroke}
.eq-mark{opacity:0;transition:opacity .55s ease 1.25s}
.eq-t{
  position:absolute;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--label);
  opacity:0;
  transition:opacity .55s ease 1.45s;
  pointer-events:none;
}
.eq-t em{color:var(--head);font-style:normal}
.is-drawn .eq-curve,
.is-drawn .eq-fee{stroke-dashoffset:0}
.is-drawn .eq-mark,
.is-drawn .eq-t{opacity:1}
.eq-t-curve{left:2%;top:6%}
.eq-t-fee{left:62%;top:72%}
.eq-t-cross{left:38.5%;top:16%}

.eq-xcap{
  grid-column:2;grid-row:3;
  margin:1.5rem 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}
.eq-x{
  position:relative;
  grid-column:2;grid-row:2;
  height:1.9rem;
  border-top:1px solid var(--hair);
  margin-top:.55rem;
}
.eq-x span{
  position:absolute;
  top:.7rem;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
}
.eq-x span:first-child{transform:none}
.eq-x span:last-child{transform:translateX(-100%)}

@media (max-width:640px){
  .eq-plot{grid-template-columns:3.2rem minmax(0,1fr);column-gap:.6rem}
  .eq-t{font-size:10px}
  .eq-t-curve{left:2%;top:2%}
  .eq-t-fee{left:40%;top:66%}
  .eq-t-cross{left:40%;top:8%}

}

@media (prefers-reduced-motion:reduce){
  .eq-curve,.eq-fee{stroke-dashoffset:0}
  .eq-mark,.eq-t{opacity:1}
}

/* Under 860 the in-plot annotations start standing on each other and on the
   curve. They become a key beneath the chart instead; nothing is dropped. */
.eq-key{display:none}
.eq-plot .eq-key{
  grid-column:1 / -1;
  grid-row:4;
  list-style:none;
  margin:1.9rem 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.eq-key li{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:baseline;
  gap:0 .8rem;
  padding:.85rem 0;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  color:var(--label);
  border-bottom:1px solid var(--hair);
}
.eq-kt{display:block;min-width:0}
.eq-key em{color:var(--head);font-style:normal}
.eq-sw{display:block;height:0;align-self:center}
.eq-sw-curve{border-top:1.5px solid #ededed}
.eq-sw-fee{border-top:1px solid #9a9a9a}
.eq-sw-cross{border-top:1px dashed #9a9a9a}

@media (max-width:860px){
  .eq-t{display:none}
  .eq-key{display:block}
  .eq-y,.eq-area{height:clamp(240px,42vw,300px)}
}

/* ==================================================================
   06 · THE EQUILIBRIUM, ONE CURVE PER POT   (/economics)

   Same instrument as the home page's, plotted three times: a period
   with half a BNB in it, one with a whole one, one with two. Every
   curve is 0.6 * pot / N, the flat line is one press, and the three
   crossings are 0.6 * pot / value(fee) at N = 6, 12 and 24.
   ================================================================== */
.fig-eq.multi{margin:3.6rem 0 0}
.eq-sch{
  display:block;
  margin-top:.7rem;
  color:var(--dim);
  font-weight:400;
}
.eq-curve.alt{
  stroke:#9a9a9a;
  stroke-width:1;
  transition-duration:1.9s;
}
.multi .eq-mark{transition-delay:1.55s}
.multi .eq-t{transition-delay:1.75s}
.multi .eq-cross{stroke:#6a6a6a}
/* The three curves are never within a label of each other on the left,
   and the whole quadrant above the fee line on the right is empty. */
.eq-t-p2{left:2%;top:1.5%}
.eq-t-p1{left:2%;top:43%}
.eq-t-p0{left:2%;top:87%}
.eq-t-note{left:35%;top:20%}
.eq-t-flat{left:73%;top:71%}
.eq-sw-alt{border-top:1px solid #9a9a9a}
/* This figure keeps its key at every width: four series is more than a
   plot this size can label in place. */
.multi .eq-key{display:block}
@media (min-width:861px){
  .multi .eq-t-p2,.multi .eq-t-p1,.multi .eq-t-p0,
  .multi .eq-t-note,.multi .eq-t-flat{display:block}
}
@media (max-width:860px){
  .multi .eq-t{display:none}
}

/* ==================================================================
   07 · BALANCE BLINDNESS, AS A FAN   (/mechanism)

   Twelve pressers of one period on a three-decade log axis, every line
   running to the same point. The asymmetry is the left-hand axis; the
   symmetry is that there is only one point on the right.
   ================================================================== */
.fig-fan{margin:4.4rem 0 0}
.fn-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.fn-head > .label{max-width:none}
.fn-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.fn-sub .mono{color:var(--dim)}
.fn-sch{display:block;margin-top:.7rem;color:var(--dim);font-weight:400}
.fn-plot{
  margin-top:3rem;
  display:grid;
  grid-template-columns:6.4rem minmax(0,1fr) 9.5rem;
  grid-template-rows:auto auto auto;
  column-gap:1rem;
}
.fn-y{position:relative;grid-column:1;grid-row:1;height:clamp(240px,27vw,380px)}
.fn-y span{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fn-area{position:relative;grid-column:2;grid-row:1;height:clamp(240px,27vw,380px)}
.fn-svg{display:block;width:100%;height:100%;overflow:visible}
.fn-grid line{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.fn-axis line{stroke:#2c2c2c;stroke-width:1;vector-effect:non-scaling-stroke}
.fn-l{stroke:#6f6f6f;stroke-width:1;vector-effect:non-scaling-stroke}
.fn-l-hi{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fn-out-line{stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.fn-node{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fn-t{
  position:absolute;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--label);
  pointer-events:none;
  white-space:nowrap;
}
.fn-t em{color:var(--head);font-style:normal}
.fn-t-hi{left:2.5%;top:0}
.fn-t-lo{left:2.5%;top:93%}
.fn-out{grid-column:3;grid-row:1;align-self:center}
.fn-out .fn-v{
  margin:.8rem 0 0;
  font-family:var(--mono);
  font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.01em;
  color:var(--head);
}
.fn-out .fn-u{margin:.6rem 0 0;font-size:12.5px;line-height:1.6;color:var(--label)}
.fn-xcap{
  grid-column:2;grid-row:2;
  margin:1.5rem 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}

@media (max-width:860px){
  .fn-t{display:none}
}
@media (max-width:640px){
  .fn-plot{grid-template-columns:4.6rem minmax(0,1fr);column-gap:.6rem}
  .fn-out{
    grid-column:1 / -1;grid-row:3;
    margin-top:1.6rem;padding-top:1.3rem;
    border-top:1px solid var(--hair);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  }
  .fn-out .fn-v{margin:0}
  .fn-out .fn-u{margin:0}
  .fn-out .fn-u br{display:none}
}

/* ==================================================================
   08 · THE LEDGER, ONE ROW PER ADDRESS   (/mechanism)

   Four periods and every address inside them. The wage column is the
   figure: it changes once per period and never inside one.
   ================================================================== */
.fig-roll{margin:4.6rem 0 0}
.rl-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.rl-head > .label{max-width:none}
.rl-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.rl-sub .mono{color:var(--dim)}
.rl-sch{display:block;margin-top:.7rem;color:var(--dim);font-weight:400}
.rl-table{margin-top:2.6rem;max-width:62rem}
.rl-r{
  display:grid;
  grid-template-columns:minmax(7rem,1fr) 9.5rem 10.5rem;
  gap:0 clamp(.7rem,2vw,1.6rem);
  padding:.44rem 0;
  font-family:var(--mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid #111;
}
.rl-hd{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:.9rem 0;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}
.rl-a{color:var(--label)}
.rl-n{text-align:right;color:var(--dim)}
.rl-w{color:var(--head)}
.rl-band{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.35rem clamp(1rem,3vw,2.4rem);
  margin-top:2.6rem;
  padding:1.4rem 0 1rem;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--label);
}
.rl-pn{color:var(--head)}
.rl-pk em{color:var(--dim);font-style:normal}
.rl-p:first-child .rl-band{margin-top:1.6rem;border-top:0;padding-top:0}
.rl-none{
  margin:.4rem 0 0;
  padding:.6rem 0 1.2rem;
  font-size:13.5px;
  line-height:1.75;
  color:var(--label);
  max-width:62ch;
}
@media (max-width:640px){
  .rl-r{grid-template-columns:minmax(5.4rem,1fr) 6.6rem 6.4rem;font-size:11px}
  .rl-hd{font-size:9px;letter-spacing:.12em}
}

/* ==================================================================
   09 · THE BURN, OVER PERIODS   (/economics)

   A running total of what pressing charged, against what would land at
   the burn address if the token taxed every one of those transfers.
   The band between the two is where totalBurned falls, and the lower
   panel is that band at twenty times the vertical scale.
   ================================================================== */
.fig-burn{margin:3.8rem 0 0}
.bn-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.bn-head > .label{max-width:none}
.bn-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:70ch;
}
.bn-sub .mono{color:var(--dim)}
.bn-sch{display:block;margin-top:.7rem;color:var(--dim);font-weight:400}
.bn-plot{
  margin-top:3rem;
  display:grid;
  grid-template-columns:5.4rem minmax(0,1fr);
  column-gap:.9rem;
}
.bn-y{position:relative;grid-column:1}
.bn-y span{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bn-area{position:relative;grid-column:2}
.bn-y1,.bn-a1{grid-row:1;height:clamp(180px,20vw,270px)}
.bn-mid{
  grid-column:2;grid-row:2;
  margin:1.7rem 0 1.1rem;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}
.bn-mid em{color:var(--dim);font-style:normal}
.bn-y2,.bn-a2{grid-row:3;height:clamp(84px,9vw,110px)}
.bn-svg{display:block;width:100%;height:100%;overflow:visible}
.bn-grid line{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}
.bn-charged{
  fill:none;stroke:#8a8a8a;stroke-width:1;
  stroke-dasharray:4 3;
  vector-effect:non-scaling-stroke;
}
.bn-landed{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.bn-gap{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.bn-t{
  position:absolute;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--label);
  pointer-events:none;
}
.bn-t em{color:var(--head);font-style:normal}
.bn-mid,.bn-xcap,.fn-xcap{max-width:none}
.bn-key{
  grid-column:1 / -1;grid-row:6;
  list-style:none;
  margin:2.1rem 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.bn-key li{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:baseline;
  gap:0 .8rem;
  padding:.85rem 0;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  color:var(--label);
  border-bottom:1px solid var(--hair);
}
.bn-kt{display:block;min-width:0}
.bn-key em{color:var(--head);font-style:normal}
.bn-sw{display:block;height:0;align-self:center}
.bn-sw-c{border-top:1px dashed #8a8a8a}
.bn-sw-l,.bn-sw-g{border-top:1.5px solid #ededed}
.bn-x{
  position:relative;
  grid-column:2;grid-row:4;
  height:1.7rem;
  border-top:1px solid var(--hair);
  margin-top:.55rem;
}
.bn-x span{
  position:absolute;
  top:.6rem;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
}
.bn-xcap{
  grid-column:2;grid-row:5;
  margin:1.3rem 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--label);
}
@media (max-width:640px){
  .bn-plot{grid-template-columns:4.2rem minmax(0,1fr);column-gap:.6rem}
  .bn-t{font-size:10px}
  .bn-t-g{max-width:70%}
  .bn-x span:nth-child(even){display:none}
}

/* ==================================================================
   10 · THE GAS DIFFERENTIAL   (/audit)

   Three lanes on one scale, and the scale is Flap's ceiling. The third
   lane starts where the second one's shared cost ends, because it is
   the subtraction the test performs.
   ================================================================== */
.fig-gas{margin:3.8rem 0 0}
.gs-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.gs-head > .label{max-width:none}
.gs-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.gs-sub .mono{color:var(--dim)}
.gs-sch{display:block;margin-top:.7rem;color:var(--dim);font-weight:400}
.fig-sybil{margin:3.8rem 0 0}
.gs-rows{list-style:none;margin:2.8rem 0 0;padding:0}
.gs-rows li{
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr) 6.4rem;
  align-items:center;
  gap:0 clamp(1rem,2.4vw,2.2rem);
  padding:1.15rem 0;
  border-top:1px solid var(--hair);
}
.gs-rows li:last-child{border-bottom:1px solid var(--hair)}
.gs-k{
  margin:0;
  max-width:none;
  font-size:13.5px;
  line-height:1.6;
  color:var(--body);
}
.gs-lane{
  height:12px;
  border-left:1px solid var(--ink-3);
  border-right:1px solid #2e2e2e;
  display:flex;
  align-items:stretch;
}
.gs-b{
  display:block;
  min-width:1px;
  border:1px solid var(--ink);
  border-left:0;
  background:transparent;
}
.gs-b-off{border-left:1px solid var(--ink);background:rgba(237,237,237,.14)}
.gs-v{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--head);
  text-align:right;
  white-space:nowrap;
}
.gs-diff .gs-k{color:var(--head)}
.gs-scale{
  margin-top:1.1rem;
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr) 6.4rem;
  gap:0 clamp(1rem,2.4vw,2.2rem);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--label);
}
.gs-scale span:first-child{grid-column:2;grid-row:1;justify-self:start}
.gs-scale span:last-child{grid-column:2;grid-row:1;justify-self:end}
@media (max-width:860px){
  .gs-rows li{
    grid-template-columns:minmax(0,1fr) 6rem;
    row-gap:.9rem;
  }
  .gs-k{grid-column:1 / -1}
  .gs-scale{grid-template-columns:minmax(0,1fr) 6rem}
  .gs-scale span:first-child{display:none}
  .gs-scale span:last-child{grid-column:1;grid-row:1;justify-self:start;line-height:1.7}
}

/* ==================================================================
   11 · THE ONE-PERIOD OFFSET   (/mechanism)

   Tax arriving during a period is committed to the next period's
   bucket. Drawn as two bands of the same four periods with the
   connectors landing one column to the right.
   ================================================================== */
.fig-time{margin:4.4rem 0 0}
.tm-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.tm-head > .label{max-width:none}
.tm-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.tm-sch{display:block;margin-top:.7rem;color:var(--dim);font-weight:400}
.tm-lab{margin-top:3rem}
.tm-lab-b{margin-top:1.9rem}
.tm-cells{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:1.4rem;
}
.tm-bot{margin-top:1.4rem}
.tm-c{padding:0 0 0 clamp(.7rem,1.6vw,1.4rem);border-left:1px solid var(--grid)}
.tm-c:first-child{border-left:0;padding-left:0}
.tm-p{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--label);
}
.tm-v{
  margin:.7rem 0 0;
  font-family:var(--mono);
  font-size:clamp(15px,1.7vw,20px);
  font-variant-numeric:tabular-nums;
  color:var(--head);
}
.tm-v.tm-none{font-size:clamp(11px,1.2vw,13px);color:var(--label);letter-spacing:.02em}
.tm-u{margin:.35rem 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.tm-join{display:block;width:100%;height:78px;margin-top:1.5rem;overflow:hidden}
.tm-join path{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.tm-foot{
  margin:1.6rem 0 0;
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--label);
  max-width:none;
}
@media (max-width:640px){
  .tm-c{padding-left:.5rem}
  .tm-v{font-size:13px}
  .tm-u{font-size:9px;letter-spacing:.1em}
  .tm-p{font-size:9.5px;letter-spacing:.1em}
  .tm-join{height:60px}
}

/* ==================================================================
   12 · THE RUN, AND THE GATES   (/audit)

   83 tests as one bar divided where the suites divide, and 27 marks
   for the 27 guards that were broken on purpose.
   ================================================================== */
.fig-run,.fig-red{margin:3.6rem 0 0}
.rg-head{border-top:1px solid var(--hair);padding-top:1.5rem}
.rg-head > .label{max-width:none}
.rg-sub{
  margin:.95rem 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--label);
  max-width:66ch;
}
.rg-sub .mono{color:var(--dim)}
.rn-bar{display:flex;margin-top:2.6rem;border-top:1px solid var(--hair)}
.rn-seg{
  border-left:1px solid var(--ink-3);
  padding:1.1rem 0 1.3rem clamp(.4rem,1.2vw,1rem);
  min-width:0;
}
.rn-seg:first-child{border-left:0;padding-left:0}
.rn-n{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(17px,2vw,24px);
  color:var(--head);
  font-variant-numeric:tabular-nums;
}
.rn-key{
  list-style:none;
  margin:1.9rem 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.rn-key li{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr);
  align-items:baseline;
  gap:0 .9rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  color:var(--label);
}
.rn-kn{color:var(--head);font-variant-numeric:tabular-nums;text-align:right}
.rn-kt{min-width:0}
.rn-alt{
  margin-top:2.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--hair);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 1.5rem;
}
.rn-alt-k,.rn-alt-v{
  margin:0;max-width:none;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--label);
}
.rn-alt-v em{color:var(--head);font-style:normal}
.rg-svg{display:block;width:100%;height:56px;margin-top:2.8rem;overflow:visible}
.rg-t line{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rg-one{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.rg-note{
  margin:1.4rem 0 0;
  padding-left:calc(50% - 1px);
  font-size:13px;
  line-height:1.7;
  color:var(--label);
  max-width:none;
}
.rg-note .mono{color:var(--dim)}
.rg-caret{display:inline-block;width:1px;height:9px;background:#7a7a7a;vertical-align:1px;margin-right:.6rem}
@media (max-width:860px){
  .rn-n{font-size:15px}
  .rg-note{padding-left:0}
}

/* ==================================================================
   13 · THE SPLIT, THREE WAYS   (/economics)

   One period's pot per bar, the project's slice drawn first so the
   30 / 38 / 98 cases line up against each other and against rule
   001's recommendation.
   ================================================================== */
.fig-split{margin:3.6rem 0 0}
.sp-lanes{list-style:none;margin:2.6rem 0 0;padding:0}
.sp-lanes li{padding:1.15rem 0;border-top:1px solid var(--hair)}
.sp-lanes li:last-child{border-bottom:1px solid var(--hair)}
.sp-k{
  margin:0 0 .9rem;
  max-width:none;
  font-size:13.5px;
  line-height:1.6;
  color:var(--body);
}
.sp-k-q{color:var(--label)}
.sp-lane{display:flex;height:26px;align-items:stretch}
.sp-s{
  display:block;
  min-width:0;
  border:1px solid var(--ink);
  border-left:0;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:24px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--label);
  padding-left:.5rem;
  overflow:hidden;
  white-space:nowrap;
}
.sp-s:first-child{border-left:1px solid var(--ink)}
.sp-s em{color:var(--head);font-style:normal;font-size:12px;letter-spacing:0}
.sp-proj{background:rgba(237,237,237,.14)}
.sp-lane-q{height:26px}
.sp-q{display:block;border:1px dashed #9a9a9a;flex:0 0 auto}
.sp-qt{
  display:block;
  padding-left:.6rem;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:24px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--label);
  white-space:nowrap;
}
.sp-qt em{color:var(--dim);font-style:normal;font-size:12px;letter-spacing:0}
@media (max-width:640px){
  .sp-s{font-size:9px;padding-left:.3rem;letter-spacing:.04em}
  .sp-s em{font-size:10.5px}
}

/* The equilibrium curve, mechanism §05. The section stated N* = 0.6 × pot / value(fee) as an
   equation and left the reader to picture it; the crossing is the whole claim, so it is drawn. */
.fig-eq{margin:3.8rem 0 0}
.eqfig{display:block;width:100%;height:auto;margin:2.6rem 0 0}
/* The desktop drawing shrinks its 12.5px type to about 4px at 390. Same wide/compact
   pair the rest of the system uses, swapped rather than scaled. */
.eqfig--m{display:none}
@media (max-width:640px){.eqfig--d{display:none}.eqfig--m{display:block}}
.eqx{stroke:#2a2a2a;stroke-width:1}
.eqt{stroke:#2a2a2a;stroke-width:1}
.eqg{stroke:#141414;stroke-width:1}
.eql{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;fill:#828282}
.eqlb{fill:#ededed}
.eqlm{fill:#6f6f6f}
.eqfee{stroke:#ededed;stroke-width:1;stroke-dasharray:4 4;opacity:.75}
.eqc{fill:none;stroke:#ededed;stroke-width:1.7}
.eqc2{stroke:#6f6f6f;stroke-width:1.2;stroke-dasharray:5 4}
.eqv{stroke:#ededed;stroke-width:1;opacity:.32}
.eqv2{stroke:#6f6f6f;stroke-width:1;opacity:.28}
.eqd{fill:#ededed}
.eqd2{fill:#6f6f6f}


/* ---------- the opening ----------
   FRONTEND.md rule 2. The drawing is the first thing in <main>, full bleed, and it plays as the
   page loads. It is not an overlay and delays nothing: the text below it is in the DOM from the
   first byte. */
.opening{border-bottom:1px solid var(--hair);background:#000}
.opening__art{line-height:0}
/* The opening keeps only the landscape variant of a drawing, so the drawing's own
   `@media (max-width:640px){.x-wide{display:none}}` would leave the opening empty — measured at
   0.03 screens tall before this line existed. Overriding that switch is the whole point here. */
.opening__art svg[role="img"]{display:block !important;width:100%;height:auto}
.opening__bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  max-width:var(--wide);margin:0 auto;padding:10px var(--edge);
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);
}
.opening__bar b{color:var(--body);font-weight:400;letter-spacing:.08em;text-transform:none;
  font-size:12px;text-align:right}
@media (max-width:640px){
  .opening__bar{flex-direction:column;gap:3px;padding:9px 20px}
  .opening__bar b{text-align:left}
}


/* The bar was static, so on a ten-route site it scrolled away with the first drawing and the only
   list of routes you ever saw while reading was the one in the footer. It sticks now, and below
   the breakpoint it becomes one scrollable row rather than four wrapped lines. */
.top{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--hair)}
@media (max-width:640px){
  .top{flex-wrap:nowrap;align-items:center;gap:8px;padding-top:12px;padding-bottom:10px}
  .top nav{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;
    margin-left:auto;padding-bottom:2px;
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  }
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap}
}