/* Shared shell for the secondary pages (about, contact, privacy).
   index.html keeps its CSS inline so the landing page never blocks on a request. */

:root {
  --deep:#0A0A0D; --surface:#101014; --surface-2:#12121B;
  --line:rgba(244,244,246,.09); --line-firm:rgba(244,244,246,.16);
  --ink:#F4F4F6; --ink-mid:#8A8A94; --ink-dim:#6E6E78; --ink-faint:#55555F;
  --accent:#5B54E8; --accent-lit:#7B75F0;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --gut:32px; --max:1280px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--deep); color:var(--ink);
  font:400 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-wrap:break-word;
}
img, svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent-lit); outline-offset:3px; }

.rail { max-width:var(--max); margin:0 auto; border-inline:1px solid var(--line); }
.pad { padding-inline:var(--gut); }
.label { font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }

header {
  position:sticky; top:0; z-index:40; background:rgba(10,10,13,.88);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.bar { display:flex; align-items:center; gap:24px; height:62px; }
.lockup { display:flex; align-items:center; gap:11px; }
.lockup .word { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.tools { margin-inline-start:auto; display:flex; align-items:center; gap:16px; }
.tools a { font-size:14px; color:var(--ink-mid); transition:color .2s ease; }
.tools a:hover { color:var(--ink); }

main { display:block; }
.doc { padding-block:72px 88px; max-width:74ch; }
h1 { font-size:clamp(32px,4.6vw,52px); line-height:1.08; letter-spacing:-.032em; font-weight:600; margin:14px 0 24px; }
h2 { font-size:clamp(20px,2.2vw,26px); line-height:1.25; letter-spacing:-.024em; font-weight:600; margin:44px 0 14px; }
p, li { color:var(--ink-mid); font-size:16.5px; text-wrap:pretty; }
p { margin:0 0 18px; }
.lead { color:var(--ink); font-size:clamp(17px,1.8vw,19px); margin-bottom:28px; }
ul { padding-inline-start:20px; margin:0 0 20px; }
li { margin-bottom:9px; }
a.link, .doc p a, .doc li a { color:var(--accent-lit); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.doc p a:hover, .doc li a:hover { color:var(--ink); }
code { font:400 .92em var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
time { color:var(--ink-faint); }

.meta { border:1px solid var(--line); border-radius:10px; padding:22px 24px; background:var(--surface); margin:0 0 32px; }
.meta dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; }
.meta dt { font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); padding-top:3px; }
.meta dd { margin:0; color:var(--ink); font-size:15px; }

footer { border-top:1px solid var(--line); }
.fbottom { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:24px var(--gut); font-size:13px; color:var(--ink-faint); }
.fbottom a { color:var(--ink-dim); transition:color .2s ease; }
.fbottom a:hover { color:var(--accent-lit); }
.fbottom .spacer { margin-inline-start:auto; }

@media (max-width:760px) { :root { --gut:22px; } .doc { padding-block:52px 64px; } }
@media (max-width:560px) {
  :root { --gut:18px; }
  .rail { border-inline:0; }
  .meta dl { grid-template-columns:1fr; gap:4px 0; }
  .meta dt { padding-top:12px; }
  .fbottom .spacer { margin-inline-start:0; }
}
.byline { color:var(--ink-dim); }