:root { color-scheme: light dark; --paper:#fff; --ink:#15243b; --muted:#506078; --line:#dce3ed; --blue:#1263c4; --wash:#f2f6fb; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--blue); text-underline-offset:.2em; } a:hover { text-decoration-thickness:2px; } a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:2px; }
.skip { position:absolute; top:-5rem; left:1rem; padding:.5rem; background:var(--paper); } .skip:focus { top:1rem; }
.shell { max-width:1120px; margin:auto; padding:0 2rem; } header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); font-size:1.25rem; font-weight:750; text-decoration:none; letter-spacing:-.04em; } .brand img { width:40px; height:40px; border-radius:10px; }
nav { display:flex; flex-wrap:wrap; gap:1.5rem; } nav a { color:var(--muted); text-decoration:none; font-weight:600; } nav a[aria-current="page"] { color:var(--blue); text-decoration:underline; }
main { display:grid; grid-template-columns:190px minmax(0,720px); gap:4rem; padding:4rem 0 5rem; } .eyebrow { margin:.5rem 0; color:var(--blue); font-size:.875rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
h1 { font-size:clamp(2rem,5vw,3.6rem); line-height:1.1; letter-spacing:-.045em; margin:0 0 1.5rem; } h2 { font-size:1.3rem; line-height:1.3; margin:2.4rem 0 .75rem; letter-spacing:-.02em; } p { margin:.75rem 0; } .lead { font-size:1.2rem; color:var(--muted); } .meta { color:var(--muted); font-size:.875rem; }
.index { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding-top:1rem; } .index a { color:var(--muted); font-size:.95rem; } .note { margin:1.5rem 0; padding:1.25rem 1.5rem; background:var(--wash); border-left:3px solid var(--blue); } .link-row { display:block; padding:1.4rem 0; border-bottom:1px solid var(--line); text-decoration:none; } .link-row strong { display:block; font-size:1.15rem; } .link-row span { color:var(--muted); }
ul,ol { padding-left:1.4rem; } li { margin:.5rem 0; } footer { border-top:1px solid var(--line); padding:1.5rem 0; color:var(--muted); display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; font-size:.875rem; }
@media(max-width:760px) { .shell { padding:0 1.25rem; } main { grid-template-columns:1fr; gap:1.5rem; padding:2rem 0 3rem; } .index { flex-direction:row; flex-wrap:wrap; padding:0; } nav { gap:1rem; } }
@media(prefers-color-scheme:dark) { :root { --paper:#101a29; --ink:#edf3fb; --muted:#b2c1d5; --line:#304258; --blue:#7db8ff; --wash:#192a40; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }