:root{
  --paper:#dfe5eb; --sheet:#f9fbfc; --chrome:#edf1f5; --chrome-2:#e0e7ed;
  --ink:#101a24; --ink-2:#3f4f5e; --ink-3:#5a6872;
  --rule:#c4d0da; --rule-strong:#718ea6; --rule-soft:#dbe2e9;
  --accent:#0e5c63; --accent-deep:#0a474d; --accent-wash:#d7ebec; --on-accent:#fff;
  --signal:#a8441e; --signal-wash:#fbe5dc;
  --brand-coral:#ff7a59; --brand-teal-ink:#15757b;
  --grid-major:rgba(13,43,46,.085); --grid-minor:rgba(13,43,46,.038);
  --lift:0 1px 2px rgba(16,26,36,.05), 0 10px 28px -18px rgba(16,26,36,.35);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0b1016; --sheet:#141c25; --chrome:#101922; --chrome-2:#1b2732;
  --ink:#e8eff5; --ink-2:#a9bac7; --ink-3:#758691;
  --rule:#28343f; --rule-strong:#51697f; --rule-soft:#1e2830;
  --accent:#4fb3ba; --accent-deep:#6fcbd1; --accent-wash:#103037; --on-accent:#0b1016;
  --signal:#ff9e85; --signal-wash:#33201a;
  --brand-coral:#ff9e85; --brand-teal-ink:#4fb3ba;
  --grid-major:rgba(120,195,200,.07); --grid-minor:rgba(120,195,200,.032);
  --lift:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.85);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.62 Archivo,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}
a{color:var(--accent-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--rule-strong);outline-offset:2px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 22px;background:var(--chrome);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:10}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font:700 21px/1 Sora,Archivo,sans-serif;letter-spacing:-.02em}
.lockup b{color:var(--brand-teal-ink);font-weight:700}
.mark{flex:none}
.bar-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bar-nav a{text-decoration:none;color:var(--ink-2);font-size:14.5px;font-weight:500;
  padding:9px 13px;border-radius:7px;min-height:44px;display:flex;align-items:center}
.bar-nav a:hover{color:var(--ink);background:var(--chrome-2)}
.bar-nav .cta{background:var(--accent);color:var(--on-accent);font-weight:600}
.bar-nav .cta:hover{background:var(--accent-deep);color:var(--on-accent)}

.crumbs{max-width:820px;margin:0 auto;padding:20px 22px 0;font-size:13.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.crumbs a{color:var(--ink-3)}
.crumbs .sep{color:var(--rule-strong)}
.crumbs [aria-current]{color:var(--ink-2)}

main{max-width:820px;margin:0 auto;padding:0 22px 72px}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;
  padding:38px 40px;margin:18px 0 0;box-shadow:var(--lift)}
.eyebrow{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-teal-ink);margin:0 0 14px}
h1{font:700 clamp(30px,5vw,42px)/1.12 Sora,Archivo,sans-serif;letter-spacing:-.032em;
  margin:0 0 10px;text-wrap:balance}
.standfirst{color:var(--ink-2);font-size:18px;margin:0 0 4px}

.prose h1{font-size:clamp(25px,4vw,31px);margin:34px 0 10px}
.prose h2{font:700 clamp(21px,3vw,25px)/1.24 Sora,Archivo,sans-serif;letter-spacing:-.02em;
  margin:32px 0 10px;text-wrap:balance}
.prose h3{font:600 19px/1.3 Sora,Archivo,sans-serif;margin:26px 0 8px}
.prose p{margin:0 0 15px}
.prose strong{font-weight:700;color:var(--ink)}
.prose em{color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 15px;padding-left:24px}
.prose li{margin:0 0 7px}
.prose code{font:500 15.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;
  background:var(--accent-wash);color:var(--accent-deep);
  padding:2px 7px;border-radius:5px;white-space:nowrap}
.prose pre{overflow-x:auto;background:var(--chrome-2);border:1px solid var(--rule);
  border-radius:9px;padding:14px 16px}
.prose pre code{background:none;padding:0;white-space:pre}
.prose blockquote{margin:0 0 15px;padding:2px 0 2px 18px;border-left:3px solid var(--brand-coral);color:var(--ink-2)}
.prose table{border-collapse:collapse;width:100%}
.prose > .tw{overflow-x:auto}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 11px;text-align:left;font-size:15.5px}
.prose th{background:var(--chrome-2)}

.gate{margin:30px 0 0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--sheet)}
.gate-h{background:var(--accent-wash);padding:15px 20px;border-bottom:1px solid var(--rule);
  font:600 15px/1.4 Sora,Archivo,sans-serif;color:var(--accent-deep);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gate-n{font:500 12px/1 "IBM Plex Mono",monospace;background:var(--accent);color:var(--on-accent);
  padding:5px 9px;border-radius:20px;letter-spacing:.04em}
.gate-b{padding:18px 20px 20px}
.gate-b p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:9px;
  background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:15.5px}
.btn:hover{background:var(--accent-deep)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 0}
.pager a{display:flex;flex-direction:column;gap:3px;padding:15px 17px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:11px;text-decoration:none;color:var(--ink);min-height:44px}
.pager a:hover{border-color:var(--rule-strong)}
.pager .k{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pager .t{font-weight:600;font-size:15.5px;line-height:1.3}
.pager .next{text-align:right;align-items:flex-end}
@media(max-width:560px){.pager{grid-template-columns:1fr}.pager .next{text-align:left;align-items:flex-start}}

.siblings{margin:34px 0 0}
.siblings h2{font:600 15px/1.3 Sora,Archivo,sans-serif;margin:0 0 12px;color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list a{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:var(--ink);
  font-size:15.5px;min-height:44px}
.list a:hover{border-color:var(--rule-strong);background:var(--chrome)}
.list a[aria-current]{border-color:var(--accent);background:var(--accent-wash);font-weight:600}
.list .n{font:500 12px/1 "IBM Plex Mono",monospace;color:var(--ink-3);flex:none;min-width:22px}
.list .c{margin-left:auto;font:500 12px/1 "IBM Plex Mono",monospace;color:var(--ink-3);flex:none}

.modgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:0 0 10px}
.modcard{display:flex;flex-direction:column;gap:6px;padding:17px 19px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:12px;text-decoration:none;color:var(--ink);min-height:44px}
.modcard:hover{border-color:var(--rule-strong);box-shadow:var(--lift)}
.modcard .t{font:600 16.5px/1.3 Sora,Archivo,sans-serif}
.modcard .m{font:500 12px/1 "IBM Plex Mono",monospace;color:var(--ink-3);letter-spacing:.04em}
.yr{font:600 13px/1 Sora,Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-teal-ink);margin:34px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule)}

.foot{border-top:1px solid var(--rule);background:var(--chrome);margin-top:20px}
.foot-in{max-width:820px;margin:0 auto;padding:26px 22px 34px}
.foot-b{margin:0 0 14px;font-size:13.5px;color:var(--ink-3);max-width:62ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px}
.foot-nav a{color:var(--ink-2);text-decoration:none;font-size:14px;padding:9px 12px;
  border-radius:7px;min-height:44px;display:flex;align-items:center}
.foot-nav a:hover{background:var(--chrome-2);color:var(--ink)}
@media(max-width:600px){.sheet{padding:26px 20px;border-radius:12px}body{font-size:16.5px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
