:root{--paper:#EDE6D3;--card:#FBF8EF;--ink:#2B2B2B;--iodine:#8A3B12;--rule:#C9D3D8;--margin:#B5543A;--serif:'Spectral',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper) repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);color:var(--ink);font:18px/32px var(--serif)}
a{color:var(--iodine)}a:hover{color:var(--ink)}
.page{max-width:1160px;margin:0 auto 0 0;margin-left:max(16px,calc((100vw - 1160px)/2));border-left:2px solid var(--margin);padding:0 48px 0 40px}
.tag,.mono{font:12px/16px var(--mono);letter-spacing:.04em;color:var(--iodine);text-transform:uppercase}
header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--ink)}
.wm{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}.wm small{font:700 11px/14px var(--mono);letter-spacing:.16em;color:var(--iodine)}.wm span{font:600 22px/28px var(--serif)}
nav.top a{font:12px var(--mono);text-decoration:none;color:var(--ink);margin-left:18px}nav.top a:hover{color:var(--iodine)}
.hero{padding:56px 0 40px;position:relative}
h1{font:italic 400 clamp(48px,8vw,96px)/1 var(--serif);margin:12px 0 24px;max-width:860px}h1 span{font-style:normal}
.lead{font-size:21px;line-height:32px;max-width:720px;margin:0 0 16px}
.btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.btn{font:700 13px/16px var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:12px 18px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn.alt{background:transparent;color:var(--ink)}.btn:hover{background:var(--iodine);border-color:var(--iodine);color:var(--card)}
.fig{position:absolute;right:0;top:64px;width:260px}
section{padding:40px 0;border-top:1px dashed var(--ink)}
h2{font:600 clamp(30px,4vw,42px)/1.15 var(--serif);margin:8px 0 16px}h3{font:600 24px/32px var(--serif);margin:32px 0 8px}
.timeline{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.timeline:before{content:"";position:absolute;left:0;right:0;top:11px;border-top:2px solid var(--ink)}
.timeline li{position:relative;padding:32px 16px 0 0}.timeline li:before{content:"";position:absolute;top:4px;left:0;width:14px;height:14px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}
.timeline b{display:block;font:700 13px/16px var(--mono);color:var(--iodine);text-transform:uppercase;margin-bottom:6px}.timeline p{margin:0;font-size:16px;line-height:24px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:16px 0}
.card{background:var(--card);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:12px 16px 14px}
.card h3{font:italic 400 24px/30px var(--serif);margin:4px 0 6px}.card p{margin:0;font-size:16px;line-height:24px}
.cat{counter-reset:spec}.tool{counter-increment:spec}
.tool:before{content:"No. " counter(spec,decimal-leading-zero) "  ·  " attr(data-cat);display:block;font:11px/16px var(--mono);text-transform:uppercase;border-bottom:1px dashed var(--ink);padding-bottom:6px;margin-bottom:6px;color:var(--ink)}
.tool a{font:italic 400 24px/32px var(--serif);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--iodine)}
.uc{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.uc dl{margin:8px 0 0;font-size:16px;line-height:24px}.uc dt{font:700 11px/16px var(--mono);text-transform:uppercase;color:var(--iodine);margin-top:8px}.uc dd{margin:0}
.note{font-size:16px;line-height:24px}
table{border-collapse:collapse;width:100%;background:var(--card);font-size:16px;line-height:24px}td,th{border:1px solid var(--ink);padding:6px 10px;text-align:left;vertical-align:top}th{font:700 12px var(--mono);text-transform:uppercase}code{font:14px var(--mono)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);background:var(--card);margin:16px 0}.vs>div{padding:16px 20px}.vs>div+div{border-left:1px solid var(--ink)}.vs ul{margin:0;padding-left:20px;font-size:16px;line-height:26px}
.maker{margin:48px 0;border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:28px 32px}
.maker .tag{color:#E8B48F}.maker h2{color:var(--card)}.maker a{color:#E8B48F}.maker ul{font-size:16px;line-height:26px}
.maker .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
dl.gl{columns:2;column-gap:40px}dl.gl dt{font:700 13px/16px var(--mono);text-transform:uppercase;margin-top:16px;break-after:avoid}dl.gl dd{margin:4px 0 0;font-size:16px;line-height:24px;break-inside:avoid}
details{background:var(--card);border:1px solid var(--ink);padding:8px 16px;margin:12px 0}summary{cursor:pointer;font-weight:600}details p{margin:8px 0 4px;font-size:16px;line-height:24px}
.list{font-size:17px;line-height:28px}
footer{border-top:1px solid var(--ink);padding:24px 0 40px;font:12px/20px var(--mono)}footer a{margin-right:16px}
@media(max-width:760px){body{font-size:17px;line-height:28px}.page{margin-left:10px;padding:0 16px 0 18px}.fig{display:none}nav.top a{margin:0 12px 0 0}
.timeline{grid-template-columns:1fr}.timeline:before{top:0;bottom:0;left:6px;right:auto;border-top:0;border-left:2px solid var(--ink)}.timeline li{padding:0 0 20px 32px}.timeline li:before{top:6px}
.vs{grid-template-columns:1fr}.vs>div+div{border-left:0;border-top:1px solid var(--ink)}dl.gl{columns:1}.maker{padding:20px}.lead{font-size:19px;line-height:28px}}
.srcs{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:16px 0}
.srcs a.card{text-decoration:none;color:var(--ink);display:block}.srcs a.card:hover{box-shadow:5px 5px 0 var(--iodine)}
.ent{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--ink);padding:16px 0}.ent>.mono{padding-top:6px}.ent p,.ent ul{margin:0 0 8px}
.crumb{font:12px var(--mono);margin-top:24px}.crumb a{color:var(--ink)}
@media(max-width:760px){.ent{grid-template-columns:1fr}}
nav.top{display:flex;flex-wrap:wrap;gap:6px 0}main{overflow-wrap:anywhere}
@media(max-width:760px){.srcs,.grid,.uc{grid-template-columns:1fr}}
@media(max-width:760px){nav.top a{margin:0 14px 0 0!important}.page{margin-right:0;max-width:100%}}
html,body{overflow-x:hidden}
footer{overflow-wrap:anywhere}footer a{display:inline-block}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}.filters button{font:12px var(--mono);text-transform:uppercase;background:var(--card);border:1px solid var(--ink);padding:6px 10px;cursor:pointer;color:var(--ink)}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tool .meta{font:11px/16px var(--mono);color:var(--iodine);margin-top:8px;text-transform:uppercase}
.tool[hidden]{display:none}
.q{border-top:1px solid var(--ink);padding:16px 0}.q h3{margin:0 0 8px}
.todo{background:#FFF3D6;border:1px dashed var(--iodine);padding:1px 6px;font:13px var(--mono)}