:root {
  --page: #f3efe7;
  --surface: #e5e0d6;
  --ink: #20252a;
  --muted: #6f756f;
  --line: #c9c1b5;
  --accent: #d9773f;
  --dark: #18212b;
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font: 15px/1.6 var(--body); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 5; padding: 10px 14px; color: var(--page); background: var(--dark); transform: translateY(-150%); }
.skip:focus { transform: none; }
.site-header { max-width: 1180px; min-height: 82px; margin: auto; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; font: 700 13px/1 var(--display); letter-spacing: -.04em; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; color: var(--page); background: var(--dark); font-size: 18px; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a, .header-link { font-size: 13px; font-weight: 600; }
.site-header nav a:hover, .header-link:hover, .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-link { justify-self: end; }
.header-link span { color: var(--accent); margin-left: 8px; }
.hero { max-width: 1180px; margin: auto; padding: 92px 24px 110px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 65px; align-items: center; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: .08em; }
h1, h2, h3, strong, .path-number { font-family: var(--display); letter-spacing: -.06em; line-height: 1.02; }
h1 { margin: 0 0 26px; font-size: clamp(48px, 6vw, 76px); }
h1 em { color: var(--accent); font-style: normal; }
.intro { max-width: 490px; color: #505752; font-size: 18px; }
.hero-actions { display: flex; gap: 24px; align-items: center; margin-top: 34px; }
.button { display: inline-flex; min-height: 47px; align-items: center; gap: 22px; padding: 0 18px; color: var(--page); background: var(--dark); font-weight: 600; }
.button span { color: var(--accent); font-size: 20px; }
.text-link { font-weight: 600; }
.hero-meta { display: flex; gap: 20px; margin-top: 55px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.hero-meta b { color: var(--accent); margin-right: 5px; font-family: var(--display); }
.packet-art { position: relative; min-height: 500px; background: var(--surface); overflow: hidden; }
.packet-art svg { width: 100%; height: 100%; min-height: 500px; }
.sun { fill: var(--dark); }
.core { fill: var(--accent); }
.river { fill: none; stroke: var(--accent); stroke-width: 17; }
.river-two { stroke: #f0a170; stroke-width: 4; }
.tile rect { fill: var(--page); stroke: var(--dark); stroke-width: 2; transform: skewY(-8deg); }
.tile text, .card text { font: 600 10px var(--display); fill: var(--ink); }
.card rect { fill: var(--page); stroke: var(--dark); stroke-width: 2; }
.card text:last-child { fill: var(--muted); font-size: 8px; }
.art-note { position: absolute; left: 20px; bottom: 16px; color: var(--muted); font: 600 10px var(--display); letter-spacing: .08em; }
.snapshot, .paths, .ecosystem, .resources { padding: 105px max(24px, calc((100vw - 1132px) / 2)); border-top: 1px solid var(--line); }
.snapshot { display: grid; grid-template-columns: .65fr 1.35fr; gap: 75px; }
h2 { margin: 0; font-size: clamp(40px, 5vw, 60px); }
.section-label > p:last-child, .section-head > p { max-width: 410px; margin-top: 28px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.metrics article { min-height: 160px; padding: 22px 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.metrics article:nth-child(2n) { border-right: 0; }
.metrics span, .directory span, .resource-list span { display: block; color: var(--muted); font: 600 10px var(--display); letter-spacing: .06em; }
.metrics strong { display: block; margin: 38px 0 8px; color: var(--accent); font-size: 34px; }
.metrics small { color: var(--muted); }
.refresh { grid-column: 2; justify-self: end; margin-top: 16px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; }
.section-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.paths { background: #eee9df; }
.path-tabs, .filters { display: flex; gap: 26px; margin-top: 48px; border-bottom: 1px solid var(--ink); }
.path-tabs button, .filters button { padding: 13px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 11px var(--display); }
.path-tabs button.active, .filters button.active { color: var(--accent); border-color: var(--accent); }
.path-panel { display: grid; grid-template-columns: 1fr 1fr auto; gap: 45px; padding: 34px 0; }
.path-number { color: var(--accent); font-size: 38px; }
.path-panel h3 { margin: 27px 0 12px; font-size: 28px; }
.path-panel p { max-width: 420px; color: var(--muted); }
.path-panel ol { margin: 22px 0; padding-left: 20px; color: var(--muted); }
.path-panel li { padding: 6px 0; }
.path-panel .text-link { align-self: end; white-space: nowrap; }
.filters { margin-top: 48px; }
.filters button span { margin-left: 7px; color: var(--muted); }
.directory { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 0; }
.directory article { min-height: 205px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.directory article:nth-child(3n) { border-right: 0; }
.directory h3 { margin: 42px 0 10px; font-size: 21px; }
.directory p { margin: 0; color: var(--muted); font-size: 13px; }
.resources { background: var(--dark); color: var(--page); }
.resources .eyebrow, .resources .section-head > p { color: #aeb4b1; }
.resource-list { margin-top: 55px; border-top: 1px solid #5b646b; }
.resource-list a { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid #5b646b; }
.resource-list b { font: 600 17px var(--display); }
.resource-list small { color: #aeb4b1; }
.resource-list i { color: var(--accent); font-style: normal; }
.copy-status { min-height: 20px; margin: 18px 0 0; color: var(--accent); font-size: 12px; }
footer { max-width: 1180px; margin: auto; padding: 25px 24px; display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--display); letter-spacing: .04em; }
@media (max-width: 850px) { .site-header { grid-template-columns: 1fr auto; } .site-header nav { display: none; } .hero, .snapshot { grid-template-columns: 1fr; } .packet-art { min-height: 400px; } .packet-art svg { min-height: 400px; } .refresh { grid-column: auto; } .path-panel { grid-template-columns: 1fr 1fr; } .path-panel .text-link { grid-column: 1 / -1; } .directory { grid-template-columns: 1fr 1fr; } .directory article:nth-child(3n) { border-right: 1px solid var(--line); } .directory article:nth-child(2n) { border-right: 0; } .resource-list a { grid-template-columns: 1fr 1fr; } .resource-list small { grid-column: 2; } }
@media (max-width: 560px) { .site-header, .hero, .snapshot, .paths, .ecosystem, .resources { padding-left: 18px; padding-right: 18px; } .hero { padding-top: 60px; } .hero-meta { flex-wrap: wrap; } .hero-actions { align-items: flex-start; flex-direction: column; } .section-head { display: block; } .path-panel, .directory { grid-template-columns: 1fr; } .directory article, .directory article:nth-child(3n) { border-right: 0; } .resource-list a { display: block; } .resource-list b { display: block; margin: 8px 0; } footer { display: block; padding: 22px 18px; } footer span { display: block; margin: 7px 0; } }