/* ── Site base for the plain document pages (404, privacy, terms, thanks).
   Tokens and fonts: /assets/fiber.css (Fiber design system). ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--base);color:var(--fg-1);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.mono{font-family:var(--mono)}
.dim{color:var(--fg-2)}

.wrap{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:0 var(--gutter)}

header.top{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header.top .wrap{
  max-width:1180px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:58px
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--fg-1);white-space:nowrap;flex:none}
.brand .glyph{width:9px;height:9px;background:var(--accent);border-radius:var(--radius-xs);box-shadow:0 0 0 4px var(--accent-subtle);flex:none}
nav.top-nav{display:flex;gap:20px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
nav.top-nav a{color:var(--fg-2);text-decoration:none;font-family:var(--mono);letter-spacing:.02em;transition:color .18s var(--ease)}
nav.top-nav a:hover{color:var(--fg-1)}

main{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,88px)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:22px
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(to right,var(--border-strong),transparent);max-width:200px}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.03em}
h1 em{font-style:normal;color:var(--accent)}
.lede{margin-top:22px;font-size:clamp(15.5px,1.6vw,18px);color:var(--fg-2)}
.lede strong{color:var(--fg-1);font-weight:500}

h2{font-size:clamp(19px,2.4vw,23px);font-weight:700;letter-spacing:-.02em;margin:44px 0 12px}
h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:26px 0 8px}
main p{color:var(--fg-2);margin-bottom:14px}
main p strong{color:var(--fg-1);font-weight:500}
main ul{color:var(--fg-2);margin:0 0 16px 20px}
main li{margin-bottom:8px}
main li strong{color:var(--fg-1);font-weight:500}

.panel{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--radius-sm);padding:clamp(20px,3vw,28px);margin:28px 0}
.panel h2{margin-top:0}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  padding:12px 20px;border-radius:var(--radius-xs);
  border:1px solid var(--border-strong);color:var(--fg-2);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)
}
.btn:hover{color:var(--fg-1);border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.btn.primary:hover{background:color-mix(in oklab,var(--accent),var(--fg) 14%);color:var(--on-accent)}
.btn::after{content:"→";font-size:12px;opacity:.7}
.btn.ext::after{content:"↗"}

footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:36px 0 52px}
footer .wrap{max-width:1180px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
footer .who{font-family:var(--mono);font-size:12px;color:var(--fg-2)}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer nav a{font-family:var(--mono);font-size:12px;color:var(--fg-2);text-decoration:none;transition:color .18s var(--ease)}
footer nav a:hover{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xs)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
@media(max-width:560px){
  header.top .wrap{height:auto;padding-top:10px;padding-bottom:10px}
  nav.top-nav{gap:14px}
}