.site-header { position:relative; z-index:2; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(10px); }
.header-inner,.container { width:min(var(--max), calc(100% - 2.4rem)); margin:auto; }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.wordmark { font-family:ui-serif,Georgia,serif; font-size:1.15rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em; }
.wordmark span { display:block; color:var(--muted); font: .68rem ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.14em; }
.nav { display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; justify-content:flex-end; }
.nav a { color:var(--ink); text-decoration:none; font-size:.9rem; }
.nav a:hover,.nav a[aria-current="page"] { color:var(--teal); }
.nav-tools { display:flex; gap:.45rem; }
.icon-btn,.control { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; min-height:42px; padding:.45rem .75rem; }
main { position:relative; z-index:1; }
.hero { padding:clamp(4.5rem,9vw,8rem) 0 5rem; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:4rem; }
.hero-copy > p { font-size:clamp(1.1rem,1.7vw,1.35rem); color:var(--muted); max-width:36rem; }
.hero-note { border-left:3px solid var(--teal); padding:1rem 0 1rem 1.35rem; color:var(--muted); }
.eyebrow { color:var(--teal); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; }
.hero-actions,.button-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.6rem 1rem; border-radius:999px; border:1px solid var(--teal); background:var(--teal); color:#fff; text-decoration:none; font-weight:700; }
.btn:hover { background:var(--teal-dark); color:#fff; }
.btn.secondary { color:var(--teal); background:transparent; }
.section { padding:4.5rem 0; }
.section-header { display:flex; justify-content:space-between; gap:1.5rem; align-items:end; margin-bottom:1.5rem; }
.section-header h2 { margin:.25rem 0 0; }
.section-header p { color:var(--muted); margin-bottom:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid.two { grid-template-columns:repeat(2,1fr); }
.grid.four { grid-template-columns:repeat(4,1fr); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.reading-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:3rem; align-items:start; }
.toc { position:sticky; top:1.5rem; border-left:1px solid var(--line); padding-left:1rem; font-size:.9rem; }
.toc a { display:block; margin:.35rem 0; }
.breadcrumbs { padding:1.25rem 0 0; color:var(--muted); font-size:.84rem; }
.footer { border-top:1px solid var(--line); padding:2.5rem 0; color:var(--muted); font-size:.88rem; }
@media (max-width:850px) { .hero,.reading-layout,.atlas-shell { grid-template-columns:1fr; gap:1.5rem; } .grid,.grid.four,.grid.two,.split { grid-template-columns:1fr 1fr; } .toc,.atlas-panel { position:static; } .header-inner { align-items:flex-start; padding:1rem 0; flex-direction:column; } .nav { justify-content:flex-start; } }
@media (max-width:560px) { .container,.header-inner { width:min(var(--max),calc(100% - 1.4rem)); } .grid,.grid.four,.grid.two,.split,.atlas-shell { grid-template-columns:1fr; } .section { padding:3rem 0; } h1 { font-size:3.2rem; } .atlas-stage { padding:.7rem; } .map-frame svg { min-height:360px; } .atlas-toolbar { align-items:flex-start; flex-direction:column; } }