:root { color-scheme: light; --ink: #111217; --paper: #f5f1eb; --line: #d8d9d7; --blue: #263a78; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 "Instrument Sans", system-ui, sans-serif; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; background: white; padding: .5rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 96px; padding: 1.5rem clamp(1.2rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font: 800 1.15rem/1 "Syne", sans-serif; letter-spacing: -.06em; }
.brand img { width: 37px; height: 37px; }
.back-link { text-decoration: none; border-bottom: 1px solid currentColor; font-size: .88rem; font-weight: 700; }
.back-link span { margin-left: .4rem; }
.intro { max-width: 1500px; margin: auto; padding: clamp(3rem, 9vw, 8rem) clamp(1.2rem, 5vw, 5rem) clamp(3.5rem, 8vw, 7rem); }
.eyebrow { margin: 0 0 1.3rem; color: var(--blue); text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 700; }
h1, h2 { font-family: "Syne", sans-serif; letter-spacing: -.055em; line-height: 1.06; }
h1 { max-width: 14ch; margin: 0; font-size: clamp(3rem, 7.5vw, 8.5rem); }
h1 em { font-weight: 600; color: var(--blue); }
.intro > p:last-child { max-width: 760px; margin: 2.2rem 0 0; font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
.layout { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 830px); gap: clamp(2rem, 8vw, 9rem); max-width: 1500px; margin: auto; padding: 0 clamp(1.2rem, 5vw, 5rem) 7rem; }
.page-nav { align-self: start; position: sticky; top: 2rem; display: grid; }
.page-nav a { display: flex; gap: 1.1rem; padding: .75rem 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--blue); font-size: .86rem; font-weight: 700; }
.page-nav span { color: var(--ink); }
article section { border-top: 1px solid var(--line); padding: 2.3rem 0 3.3rem; scroll-margin-top: 1.5rem; }
h2 { margin: 0 0 1.5rem; font-size: clamp(2rem, 3.3vw, 3.4rem); }
article p { max-width: 73ch; margin: 0 0 1.2rem; }
article a { color: var(--blue); }
.notice { max-width: 73ch; margin-top: 2rem; padding: 1.3rem 1.5rem; background: white; border-left: 4px solid var(--blue); }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2.2rem clamp(1.2rem, 5vw, 5rem); background: var(--ink); color: white; font-size: .86rem; }
@media (max-width: 760px) { .site-header { min-height: 75px; } .layout { display: block; padding-bottom: 3rem; } .page-nav { position: static; margin-bottom: 3rem; } .intro { padding-top: 3rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }