:root{
  --ink:#161310; --paper:#FCFBF7; --sun:#FFD02F; --sun-deep:#E8AC00;
  --smoke:#6B665D; --hair:#E4E0D6; --stop:#B3341F; --stop-bg:#FBEAE5; --ok:#1E6E45;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1.65; -webkit-text-size-adjust:100%;
}
.mono{font-family:'Space Mono','SFMono-Regular',Consolas,monospace}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--sun-deep); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{background:var(--sun)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun-deep); outline-offset:3px}

.wrap{max-width:820px; margin:0 auto; padding:0 24px}

header{border-bottom:2.5px solid var(--ink); background:var(--paper)}
header .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; max-width:1160px}

.wordmark{font-weight:900; font-size:19px; line-height:1.6;
  text-transform:lowercase; letter-spacing:-.02em; text-decoration:none}
.wordmark:hover{background:none}
.wordmark i{font-style:normal; background:var(--sun); padding:0 .2857em;
  display:inline-block; transform:rotate(-1.9deg)}
.navlinks{display:flex; gap:18px; flex-wrap:wrap}
.navlinks a{font-family:'Space Mono',monospace; font-size:12.5px; text-transform:lowercase; text-decoration:none}

main{padding:52px 0 80px}
h1{
  font-size:clamp(34px,6vw,58px); font-weight:900; line-height:1.02;
  letter-spacing:-.03em; text-transform:lowercase; margin-bottom:10px;
}
.updated{font-family:'Space Mono',monospace; font-size:12.5px; color:var(--smoke); margin-bottom:34px; display:block}
h2{font-size:23px; font-weight:900; letter-spacing:-.02em; margin:44px 0 12px; line-height:1.2}
h3{font-size:18px; font-weight:600; margin:26px 0 8px}
p{margin-bottom:15px}
ul,ol{margin:0 0 18px 22px}
li{margin-bottom:8px}
.lead{font-size:19px}

.note{
  border:2.5px solid var(--ink); background:#fff;
  padding:18px 20px; margin:26px 0;
}
.note p:last-child{margin-bottom:0}
.note .tag{
  font-family:'Space Mono',monospace; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; display:block; margin-bottom:7px;
}
.note.warn{background:var(--stop-bg); border-color:var(--stop)}
.note.sun{background:var(--sun)}

dl{margin:0 0 18px}
dt{font-weight:600; margin-top:16px}
dd{margin:0 0 0 0; color:var(--ink)}

.tocbox{border-left:5px solid var(--sun); padding:4px 0 4px 18px; margin:0 0 38px}
.tocbox ul{margin:0 0 0 18px}
.tocbox li{margin-bottom:5px}

table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15.5px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--hair); vertical-align:top}
th{font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; border-bottom:2.5px solid var(--ink)}

footer{border-top:2.5px solid var(--ink); padding:34px 0 60px; margin-top:60px}
footer .wrap{max-width:1160px}
footer .wordmark{display:inline-block; margin-bottom:14px}
footer p{font-size:14.5px; color:var(--smoke); max-width:760px}
.footlinks{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 18px}

.footlinks a{font-family:'Space Mono',monospace; font-size:12.5px; line-height:1.75;
  text-transform:lowercase; text-decoration:none; display:inline-block;
  background:var(--sun); color:var(--ink); padding:1px .5em 2px;
  transform:rotate(-1.9deg); transition:background .12s ease, color .12s ease}
.footlinks a:hover,.footlinks a:focus-visible{background:var(--ink); color:var(--paper)}
.abn{font-family:'Space Mono',monospace; font-size:12px; color:var(--smoke)}

.slab{
  display:inline-block; font-family:'Archivo',sans-serif; font-weight:900;
  font-size:16px; text-transform:lowercase; letter-spacing:-.01em;
  background:var(--sun); color:var(--ink); border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); padding:14px 24px; text-decoration:none;
  transition:transform .08s, box-shadow .08s;
}
.slab:hover{background:var(--sun); transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink)}

@media(max-width:640px){
  body{font-size:16px}
  header .wrap{flex-direction:column; align-items:flex-start; gap:10px}
  main{padding:36px 0 60px}
}

.twocol{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:30px 0 12px}
.col{border:2.5px solid var(--ink); background:#fff; padding:22px 24px}
.col.isnt{background:var(--sun)}
.col h2{margin-top:0; font-size:20px}
.col ul{margin:0; padding-left:0; list-style:none}
.col li{margin:0 0 16px; padding-left:26px; position:relative; line-height:1.5}
.col li:last-child{margin-bottom:0}
.col li strong{display:block; margin-bottom:3px}
.col.is li::before{content:"+"; position:absolute; left:0; top:-1px;
  font-family:'Archivo',sans-serif; font-weight:900; font-size:18px; color:var(--ok)}
.col.isnt li::before{content:"\2013"; position:absolute; left:0; top:-1px;
  font-family:'Archivo',sans-serif; font-weight:900; font-size:18px; color:var(--ink)}
@media(max-width:760px){ .twocol{grid-template-columns:1fr; gap:20px} }