:root{--ink:#15161a;--dim:#565a63;--faint:#888d98;--line:#dcdee4;--rule:#15161a;
  --bg:#fbfbf9;--panel:#f2f1ed;--accent:#8f2a20;--ok:#2f6b4f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-serif,Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px 120px}
.sans{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}

nav.site{position:sticky;top:0;z-index:20;background:rgba(251,251,249,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .inner{max-width:1120px;margin:0 auto;padding:14px 26px;display:flex;
  gap:26px;align-items:baseline;flex-wrap:wrap}
nav.site a{font:600 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);text-decoration:none;padding:4px 0}
nav.site a:hover{color:var(--ink)}
nav.site a.here{color:var(--accent);border-bottom:2px solid var(--accent)}
nav.site .brand{font:600 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-right:auto}

header.top{padding:64px 0 26px;border-bottom:3px double var(--rule);margin-bottom:8px}
h1{font-size:clamp(32px,5.6vw,58px);line-height:1.03;letter-spacing:-.02em;
  margin:0 0 14px;font-weight:600}
h2{font-size:clamp(23px,3.2vw,34px);letter-spacing:-.015em;margin:0 0 6px;font-weight:600}
h3{font:600 12px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.kicker{font:600 11px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.sub{font:600 11px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.lede{font-size:19px;color:var(--dim);max-width:64ch;margin:18px 0 0}
section{padding:52px 0;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
p{max-width:70ch}
a{color:var(--accent)}

figure{margin:24px 0 0}
img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:2px;
  background:#fff}
.pair{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
@media(min-width:920px){.pair.has-phone{grid-template-columns:1fr 330px;align-items:start}}
.caption{font:12px/1.5 ui-sans-serif,system-ui,sans-serif;color:var(--faint);margin-top:8px}

table{border-collapse:collapse;width:100%;margin-top:18px;
  font:14px/1.55 ui-sans-serif,system-ui,sans-serif}
th,td{text-align:left;padding:9px 16px 9px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600}
td.k{color:var(--dim)}
td.n{white-space:nowrap;font-variant-numeric:tabular-nums}
code{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel);
  padding:1px 5px;border-radius:2px}

.tag{display:inline-block;font:600 10px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);
  border-radius:2px;color:var(--dim);background:#fff;white-space:nowrap}
.tag.answer{border-color:var(--ok);color:var(--ok)}
.tag.evidence{border-color:var(--line);color:var(--dim)}
.tag.clutter{border-color:var(--accent);color:var(--accent)}
/* Severity carries the literal word as well as the colour — colour alone would be a poor
   joke on a page whose own accessibility critique flags exactly that. */
.tag.high{border-color:var(--accent);color:var(--accent);background:#fdf4f2}
.tag.med{border-color:#b0873c;color:#8a6722;background:#fdf9f0}
.tag.low{border-color:var(--line);color:var(--faint)}
.callout{background:var(--panel);border-left:3px solid var(--rule);padding:20px 24px;
  margin-top:24px;max-width:72ch}
.callout.warn{border-left-color:var(--accent)}
.callout h4{margin:0 0 8px;font:600 13px/1.4 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase}
.cost{margin-top:20px;padding:13px 18px;border-left:3px solid var(--rule);
  background:var(--panel);font:14px/1.6 ui-sans-serif,system-ui,sans-serif;color:var(--dim);
  max-width:70ch}
.cost b{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
  margin-top:26px}
.card{border:1px solid var(--line);background:#fff;padding:20px 22px}
.card .big{font-size:38px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .lbl{font:600 10px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:9px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
  margin-top:28px}
.thumbs a{text-decoration:none;color:inherit;display:block}
.thumbs .t{font:600 11px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;margin-top:9px;color:var(--dim)}
ul{max-width:70ch}li{margin-bottom:7px}
.foot{padding-top:40px;color:var(--faint);
  font:13px/1.6 ui-sans-serif,system-ui,sans-serif}