/* The docs pages (public/docs/*.html): the landing page's Swiss look (DESIGN.md) at reading density. */
@font-face{font-family:Archivo;src:url("/fonts/archivo-latin-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{--paper:#f5f5f2;--ink:#0e0e0e;--sheet:#fff;--muted:#ecece7;--hair:#cfcfc8;--mt:#595954;--signal:#e30613;--signal-t:#c20010;--soft:#fbe5e3;--onink:#f2f2ee;--onink-m:#c9c9c3;--onink-r:#3a3a37;--violet:#5b4cf0;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;border-radius:0}
html{background:var(--paper)}
body{font:400 15px/1.6 Archivo,ui-sans-serif,system-ui,sans-serif;font-feature-settings:"tnum" 1;color:var(--ink);min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
::selection{background:var(--signal);color:#fff}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--onink);padding:10px 14px;z-index:9}
.skip:focus{left:8px}
.wrap{padding-inline:clamp(16px,4vw,56px)}
/* header */
.nav{display:flex;align-items:center;gap:8px 20px;padding-block:14px;border-bottom:2px solid var(--ink)}
.logo{display:inline-flex;align-items:center;gap:.4em;font:800 22px/1 Archivo;font-stretch:84%;letter-spacing:-.015em;text-decoration:none}
.logo svg{width:1.15em;height:1.15em}
.nav .links{display:flex;gap:4px;margin-left:auto}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:650;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nav .links a[aria-current]{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:8px}
@media (hover:hover){.nav .links a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:6px}}
@media (max-width:420px){.nav .logo{font-size:18px}.nav .links a{padding:0 8px}}
/* layout */
.docs{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:0 48px;padding-block:32px 64px}
@media (min-width:900px){.docs{grid-template-columns:220px minmax(0,1fr)}}
.side ol{list-style:none;padding:0;border-top:2px solid var(--ink);display:grid}
.side a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-bottom:1px solid var(--hair);text-decoration:none;font-weight:650;font-size:13px}
.side a[aria-current]{background:var(--ink);color:var(--onink);border-color:var(--ink)}
@media (hover:hover){.side a:not([aria-current]):hover{background:var(--muted)}}
@media (max-width:899px){.side{margin-bottom:32px}.side ol{grid-template-columns:repeat(2,minmax(0,1fr))}.side li:nth-child(odd) a{border-right:1px solid var(--hair)}}
article{max-width:72ch;min-width:0}
/* prose */
.kick{display:flex;gap:10px;align-items:center;font-weight:650;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.kick::before{content:"";width:12px;height:12px;background:var(--signal)}
h1{font:800 clamp(2.25rem,5vw,3.25rem)/.95 Archivo;font-stretch:76%;letter-spacing:-.015em}
.lead{font-size:18px;line-height:1.5;color:var(--mt);margin-top:16px}
h2{font:800 1.5rem/1.1 Archivo;font-stretch:84%;letter-spacing:-.015em;margin-top:40px;padding-top:16px;border-top:2px solid var(--ink)}
h3{font:800 1.125rem/1.2 Archivo;font-stretch:84%;margin-top:24px}
article p,article ul,article ol,article pre,article table,.note{margin-top:12px}
article ul,article ol{padding-left:22px}
article li+li{margin-top:6px}
code{font:400 13px var(--mono);background:var(--muted);padding:1px 5px}
pre{background:var(--ink);color:var(--onink);border-top:3px solid var(--signal);padding:12px 14px;overflow-x:auto}
pre code{background:none;padding:0;color:inherit;font-size:13px;line-height:1.6}
pre .c{color:var(--onink-m)}
.link,article a{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);background:var(--sheet);font-size:14px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--hair)}
th{font-weight:650;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mt)}
.note{background:var(--sheet);border:2px solid var(--ink);border-top:6px solid var(--ink);padding:12px 14px}
.note.warn{border-top-color:var(--signal)}
.note b{font-weight:650}
.next{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:16px;border-top:2px solid var(--ink)}
.next a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--ink);font-weight:700;font-size:13px;letter-spacing:.045em;text-transform:uppercase;text-decoration:none}
@media (hover:hover){.next a:hover{background:var(--ink);color:var(--paper)}}
.cards{list-style:none;padding:0;display:grid;gap:0;border-top:2px solid var(--ink);margin-top:24px}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}.cards li:nth-child(odd){border-right:1px solid var(--hair)}}
.cards li{margin:0;border-bottom:1px solid var(--hair)}
.cards a{display:grid;gap:4px;padding:16px;text-decoration:none;height:100%}
.cards b{font:800 1.25rem/1.1 Archivo;font-stretch:84%}
.cards span{color:var(--mt);font-size:14px}
@media (hover:hover){.cards a:hover{background:var(--sheet)}}
footer{background:var(--ink);color:var(--onink);padding:20px clamp(16px,4vw,56px);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:13px}
footer a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
footer .sp{margin-left:auto;color:var(--onink-m)}