/* The website with no CMS. This box owns its entire appearance.
 *
 * Plum is the accent because the piece is about a system rather than a
 * judgement, and the traffic light greens and reds are spoken for elsewhere on
 * the site. They appear here only in the scoring table, where they mean exactly
 * what they mean everywhere else: this is better, this is worse.
 */

:root{
  --paper:#FAF7F1;
  --card:#FFFFFF;
  --sunk:#F2EEE6;
  --ink:#1A1720;
  --ink-2:#463F4C;
  --muted:#7A7280;
  --rule:#E4DEE6;
  --rule-2:#CFC6D2;

  --plum:#6D28D9;  --plum-w:#F1ECFC;  --plum-b:#DACEF6;
  --ok:#1B7A4B;    --ok-w:#E9F3EC;
  --mid:#A85C0B;   --mid-w:#FAF0E1;
  --bad:#B42318;   --bad-w:#FBECE9;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --read:1.19rem;
  --lh:1.78;
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
article.page{max-width:62rem;margin:0 auto;padding:0 1.3rem 5rem}
section{margin:3.4rem 0}
h2{font:400 clamp(1.85rem,4vw,2.6rem)/1.12 var(--serif);letter-spacing:-.02em;
  margin:0 0 1rem;text-wrap:balance}
h3{font:600 1.12rem/1.35 var(--sans);letter-spacing:-.01em;margin:0 0 .6rem}
p{margin:0 0 1.3rem;font-size:var(--read);line-height:var(--lh);color:var(--ink-2);
  max-width:var(--measure)}
p strong,li strong{color:var(--ink);font-weight:640}
em{font-style:italic}
code{font-family:var(--mono);font-size:.86em;background:var(--sunk);
  border:1px solid var(--rule);border-radius:4px;padding:.06em .34em}
.rule{height:1px;background:var(--rule);border:0;margin:3.6rem 0}

/* ─────────── hero ─────────── */
.hero{padding:3.2rem 0 .5rem}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.3rem;max-width:none}
.hero h1{font:400 clamp(2.5rem,7vw,4.3rem)/1.01 var(--serif);margin:0 0 1.2rem;
  letter-spacing:-.026em;text-wrap:balance;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--plum)}
.dek{font-size:clamp(1.05rem,2.4vw,1.22rem);line-height:1.62;color:var(--ink-2);
  margin:0 0 1.5rem;max-width:54ch}
.byline{display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:1.1rem 0 0;
  border-top:1px solid var(--rule);max-width:none;
  font:500 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

.stack{margin:2.4rem 0 0}
.stack svg{width:100%;height:auto;display:block;overflow:visible}
figcaption{margin-top:.9rem;font-size:.92rem;line-height:1.62;color:var(--muted);max-width:64ch}
figcaption b{color:var(--ink)}

.kicker{font:500 10.5px/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--plum);margin:0 0 .8rem;max-width:none}
.lede{font-size:1.2rem;line-height:1.66;color:var(--ink);max-width:58ch;font-weight:450}

/* ─────────── the fence: where the argument stops ─────────── */
.fence{background:var(--sunk);border:1px solid var(--rule-2);border-left:3px solid var(--plum);
  border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin:2.2rem 0}
.fence h3{margin:0 0 .5rem;color:var(--plum)}
.fence p{margin:0;font-size:1.02rem;color:var(--ink-2)}

/* ─────────── the file tree ─────────── */
.tree{margin:2rem 0}
.tree pre{margin:0;background:var(--ink);color:#EDE9F2;border-radius:12px;
  padding:1.2rem 1.3rem;overflow-x:auto;font:400 13.5px/1.85 var(--mono)}
.tree code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.tree .c{color:#9E93AC}

/* ─────────── the scoring table ─────────── */
.ledger{margin:2.4rem 0}
.ledger h3{margin:0 0 .8rem}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem;
  display:block;overflow-x:auto;white-space:nowrap}
.cmp thead th{text-align:left;padding:.5rem .8rem .5rem 0;border-bottom:2px solid var(--ink);
  font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp td{padding:.62rem .8rem .62rem 0;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink-2)}
.cmp td b{color:var(--ink);font-weight:640}
.c-ok{color:var(--ok)} .c-mid{color:var(--mid)} .c-bad{color:var(--bad);font-weight:600}
.ledger-n{margin:.9rem 0 0;font-size:.95rem;color:var(--muted)}

/* ─────────── the worked example ─────────── */
.ex{background:var(--plum-w);border:1px solid var(--plum-b);border-radius:14px;
  padding:1.3rem 1.4rem;margin:2.2rem 0}
.ex-l{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum);margin:0 0 .6rem;max-width:none}
.ex p{margin:0 0 .8rem;font-size:1.03rem;color:var(--ink-2)}
.ex p:last-child{margin-bottom:0}
.ex em{color:var(--ink);font-size:1.1rem}
.ex-r{border-top:1px solid var(--plum-b);padding-top:.8rem}

/* ─────────── the failures ─────────── */
.fails{margin:1.6rem 0;padding:0;list-style:none;counter-reset:f}
.fails li{counter-increment:f;position:relative;padding:1rem 0 1rem 3rem;
  border-top:1px solid var(--rule);font-size:1.04rem;line-height:1.72;color:var(--ink-2)}
.fails li:last-child{border-bottom:1px solid var(--rule)}
.fails li::before{content:counter(f);position:absolute;left:0;top:1.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--bad-w);color:var(--bad);
  font:600 .78rem/1.7rem var(--mono);text-align:center}
.fails b{display:block;color:var(--ink);font-weight:640;margin-bottom:.15rem}

/* ─────────── the not-yet-built flag ─────────── */
.note-flag{background:var(--mid-w);border:1px dashed var(--mid);border-radius:10px;
  padding:.85rem 1.1rem;font-size:.98rem;color:var(--ink-2);max-width:none}

.a2a{margin:2.2rem 0}
.a2a svg{width:100%;height:auto;display:block;overflow:visible}

/* ─────────── close ─────────── */
.close{background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:1.5rem 1.6rem;margin:2.4rem 0 0}
.close p{font-size:1.05rem;max-width:70ch}
.close p:last-child{margin-bottom:0}

@media(max-width:44rem){
  .hero{padding:2rem 0 .4rem}
  .hero h1{max-width:none}
  .cmp{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}

/* figure type */
.s-h{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;fill:var(--muted)}
.s-l{font:400 13px var(--sans);fill:var(--ink-2)}
.s-b{font:640 13.5px var(--sans);fill:var(--ink)}
.s-s{font:400 11.5px var(--mono);fill:var(--muted)}
.s-n{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:#6D28D9}