*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#0B1A2E; --ink:#14202E; --muted:#475467; --dim:#667085; --rule:#D8DEE6; --mist:#F4F6F9;
  --white:#FFFFFF; --accent:#1B5E8A; --accent-lt:#8DB9DA;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem); --nav-h: 4rem;
}
html { -webkit-text-size-adjust:100%; }
body { background:var(--white); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.wrap { max-width:1200px; margin:0 auto; padding-inline:var(--gutter); }

.site-nav { position:sticky; top:0; z-index:100; height:var(--nav-h); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { font-weight:600; font-size:1.05rem; letter-spacing:.14em; color:var(--navy); text-decoration:none; }
.back { font-size:.875rem; font-weight:500; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--navy); }

.page-head { background:linear-gradient(180deg,var(--navy),#0E2236); color:var(--white); padding:clamp(2.5rem,6vw,4.5rem) 0; }
.page-head h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.08; letter-spacing:-.01em; }
.page-head p { margin-top:.9rem; color:rgba(255,255,255,.65); font-size:.9rem; }

.doc { padding-block:clamp(2.5rem,6vw,4.5rem); display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); }
.toc { position:sticky; top:calc(var(--nav-h) + 1.5rem); align-self:start; font-size:.875rem; border-top:2px solid var(--accent); padding-top:.75rem; }
.toc strong { display:block; color:var(--accent); font-weight:600; margin-bottom:.6rem; }
.toc ol { list-style:none; display:grid; gap:.4rem; }
.toc a { color:var(--muted); text-decoration:none; }
.toc a:hover { color:var(--navy); text-decoration:underline; text-underline-offset:3px; }

.prose { max-width:68ch; }
.prose h2 { font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.25; color:var(--navy); margin:2.5rem 0 .75rem; scroll-margin-top:calc(var(--nav-h) + 1rem); }
.prose h2:first-child { margin-top:0; }
.prose p, .prose li { color:var(--muted); }
.prose p + p { margin-top:1rem; }
.prose ul { margin:.75rem 0 0 1.2rem; display:grid; gap:.4rem; }
.prose strong { color:var(--ink); font-weight:600; }
.prose table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.prose th { color:var(--navy); font-weight:600; background:var(--mist); }
.prose td { color:var(--muted); }
.todo { background:#FFF7E0; padding:0 .25rem; border-radius:2px; color:var(--ink); }

footer { background:#08121F; color:rgba(255,255,255,.7); padding:2.5rem 0 1.75rem; font-size:.875rem; }
footer a { color:rgba(255,255,255,.8); text-decoration:none; }
footer a:hover { color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.foot-links { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.foot-base { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; color:rgba(255,255,255,.5); }

@media (max-width:860px) { .doc { grid-template-columns:1fr; } .toc { position:static; } }
@media print { .site-nav, footer, .toc { display:none; } .doc { display:block; } }
