:root{--paper:#F2F4F6;--surface:#FFFFFF;--ink:#18202B;--muted:#56606C;--rule:#D3D9E0;
--red:#B42318;--amber:#8A5A00;--green:#1F6B3A;--focus:#2457C5;
--head:"Archivo",system-ui,sans-serif;--body:"Literata",Georgia,serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#12161C;--surface:#1A2028;--ink:#E6E9ED;
--muted:#A0A9B4;--rule:#2C343E;--red:#F27A68;--amber:#E2AB50;--green:#72C590;--focus:#8DB0FF;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#12161C;--surface:#1A2028;--ink:#E6E9ED;--muted:#A0A9B4;--rule:#2C343E;
--red:#F27A68;--amber:#E2AB50;--green:#72C590;--focus:#8DB0FF;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--body)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.measure{max-width:680px}
header.top{border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.brand{font:800 1.15rem/1 var(--head);font-stretch:80%;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{flex:none}
nav.main{display:flex;gap:20px;font:500 .95rem/1 var(--head)}
nav.main a{text-decoration:none;color:var(--muted)}nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
h1,h2,h3{font-family:var(--head);line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-weight:800;font-stretch:75%;font-size:clamp(2.6rem,6.5vw,4.6rem)}
h2{font-weight:750;font-stretch:85%;font-size:clamp(1.6rem,3vw,2.1rem);margin-top:2.4em;margin-bottom:.5em}
h3{font-weight:700;font-size:1.2rem;margin-top:1.8em;margin-bottom:.3em}
p{margin:0 0 1.1em}
.lede{font-size:1.25rem;line-height:1.55;color:var(--muted);max-width:34em}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 0 64px}
.hero h1{margin-bottom:24px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;font:650 1rem/1 var(--head);padding:14px 20px;border-radius:6px;text-decoration:none;border:2px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--surface)}
/* the memorable thing: a review slip */
.slip{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px 24px 18px;
box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(24,32,43,.35);font-family:var(--head);transform:rotate(-1deg)}
.slip .v{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:14px}
.slip .v b{white-space:nowrap;font:800 1.9rem/1 var(--head);font-stretch:75%;color:var(--amber)}
.slip .v span{font-size:.9rem;color:var(--muted)}
.slip ol{margin:0;padding:0;list-style:none;counter-reset:f}
.slip li{counter-increment:f;display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px dashed var(--rule);font-size:.95rem;line-height:1.4}
.slip li:last-child{border-bottom:0}
.slip li::before{content:counter(f);font-weight:800;color:var(--red);font-size:1.05rem}
.slip li small{grid-column:2;color:var(--muted);font-size:.82rem}
.slip .foot{font-size:.8rem;color:var(--muted);margin-top:10px}
.verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:8px 0 0}
.verdicts div{padding:22px 22px 18px 0}
.verdicts div+div{padding-left:22px;border-left:1px solid var(--rule)}
.verdicts b{display:block;font:800 1.6rem/1 var(--head);font-stretch:75%;margin-bottom:8px}
.verdicts p{font-size:.98rem;color:var(--muted);margin:0}
.ship{color:var(--green)}.fix{color:var(--amber)}.stop{color:var(--red)}
section.band{padding:56px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.postlist{list-style:none;margin:0;padding:0}
.postlist li{padding:20px 0;border-top:1px solid var(--rule)}
.postlist a{font:700 1.3rem/1.25 var(--head);text-decoration:none}
.postlist a:hover{text-decoration:underline}
.postlist p{margin:.4em 0 0;color:var(--muted);font-size:1rem}
.postlist time{display:block;font:500 .85rem/1 var(--head);color:var(--muted);margin-bottom:8px}
.byline{border-left:4px solid var(--ink);background:var(--surface);padding:14px 18px;margin:28px 0 36px;font:400 .95rem/1.5 var(--head)}
.byline strong{font-weight:700}
article{padding:56px 0 24px}
article h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:16px}
article .measure>p:first-of-type{font-size:1.15rem}
article code,.prose code{font-size:.9em;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1px 5px;word-break:break-word}
article pre,.prose pre{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px;overflow-x:auto;font-size:.85rem;line-height:1.5}
article pre code{border:0;padding:0;background:none}
article li{margin-bottom:.4em}
form.get{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
form.get input{flex:1 1 240px;font:400 1.05rem/1 var(--head);padding:14px 14px;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink)}
form.get button{cursor:pointer}
.fine{font:400 .85rem/1.5 var(--head);color:var(--muted)}
.status{font:600 1rem/1.5 var(--head);margin-top:14px}
.status.ok{color:var(--green)}.status.err{color:var(--red)}
.hidden{display:none}
footer{border-top:1px solid var(--rule);margin-top:64px;padding:28px 0 48px;font:400 .9rem/1.6 var(--head);color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted)}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding:48px 0 40px;gap:36px}.slip{transform:none}
.verdicts{grid-template-columns:1fr}.verdicts div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
.split{grid-template-columns:1fr;gap:8px}}
@media (prefers-reduced-motion:no-preference){.slip{animation:drop .7s cubic-bezier(.2,.8,.2,1) both .15s}
@keyframes drop{from{opacity:0;transform:translateY(12px) rotate(0)}to{opacity:1;transform:rotate(-1deg)}}}
@media (prefers-reduced-motion:no-preference) and (max-width:820px){@keyframes drop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}