:root { color-scheme: light; --ink:#152b36; --muted:#526470; --accent:#06695b; --line:#cad5d9; --paper:#f7f9fa; }
* { box-sizing:border-box; }
html { font-size:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--accent); text-underline-offset:.23em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
header,main,footer { width:min(100% - 96px,1200px); margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:104px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:1.5rem; font-weight:700; letter-spacing:-.05em; }
.mark { display:inline-grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--accent); border-radius:2px 12px 2px 2px; font-size:1.2rem; font-weight:800; }
nav { display:flex; gap:28px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; font-size:.9375rem; padding-block:10px; }
nav a[aria-current] { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.5em; }
main { padding-block:68px 80px; min-height:calc(100vh - 200px); }
h1,h2 { line-height:1.14; letter-spacing:-.04em; overflow-wrap:anywhere; }
h1 { margin:0 0 28px; font-size:clamp(2.5rem,5vw,4rem); font-weight:500; }
h2 { font-size:1.5rem; font-weight:600; margin:36px 0 16px; }
p { font-size:1.0625rem; margin:0 0 24px; overflow-wrap:anywhere; }
p:last-child { margin-bottom:0; }
.eyebrow,.number,.map-label { font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent); }
.hero { display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center; }
.hero > * { min-width:0; }
.home h1 { font-size:clamp(3rem,5vw,4.5rem); letter-spacing:-.055em; }
.lead { font-size:1.5rem; line-height:1.4; max-width:560px; }
.intro { color:var(--muted); max-width:560px; }
.connection-map { padding:32px; background:#e8f0ef; border:1px solid #c3d9d4; border-radius:4px; text-align:center; }
.map-label { margin-bottom:28px; }
.map-core { display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 12px; border:1px solid #90b6ac; background:var(--paper); box-shadow:0 5px 0 #cadfd8; }
.map-core strong { font-size:1.375rem; letter-spacing:-.025em; overflow-wrap:anywhere; max-width:100%; }
.map-core>span:last-child,.map-consumer span,.map-note { font-size:.875rem; color:var(--muted); }
.map-connector { height:32px; border-left:1px dashed var(--accent); width:1px; margin:auto; }
.map-consumer { border:1px dashed #90b6ac; padding:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.map-consumer strong { font-family:Georgia,serif; font-size:1.75rem; font-weight:400; }
.map-note { margin:20px 0 0; }
.components { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:72px; padding-block:32px 40px; border-block:1px solid var(--line); }
.components h2 { margin:18px 0 12px; font-size:1.25rem; }
.components p { color:var(--muted); font-size:1rem; }
.status { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; padding-top:48px; }
.status h2 { margin-top:0; font-size:2rem; max-width:340px; }
.status p:not(.eyebrow) { color:var(--muted); }
.document article { max-width:760px; margin:auto; }
.document h2 { margin-top:40px; }
footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; padding-block:24px; font-size:.875rem; color:var(--muted); }
.skip { position:absolute; top:12px; left:16px; background:white; padding:8px 16px; transform:translateY(-180%); }
.skip:focus { transform:none; }
@media(max-width:800px) { header,main,footer { width:calc(100% - 40px); } .hero { grid-template-columns:1fr; gap:32px; } .components { gap:24px; margin-top:40px; } .status { grid-template-columns:1fr; gap:16px; } .status h2 { max-width:none; } main { padding-block:40px 56px; } }
@media(max-width:540px) { header { flex-wrap:wrap; gap:8px; padding-block:20px; } nav { width:100%; gap:24px; } .components { grid-template-columns:1fr; gap:32px; } .connection-map { padding:24px 16px; } .map-consumer { flex-wrap:wrap; justify-content:center; } footer { flex-wrap:wrap; gap:8px; } }