@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #fafafa;
  --surface: #f1f1f1;
  --ink: #141414;
  --muted: #5a5a5a;
  --quiet: #747474;
  --line: #d3d3d3;
  --strong-line: #979797;
  --mono: "Berkeley Mono", "Berkeley Mono Variable", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --serif: var(--mono);
  --sans: var(--mono);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.75; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; text-underline-offset: .3em; }
a:hover { text-decoration: underline; }
a, button, summary { -webkit-tap-highlight-color: #dedede; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { margin-bottom: 1.3em; }
.wrap { width: min(1240px, calc(100% - 112px)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 10; padding: 12px 18px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 1rem; }

.draft-bar { display: flex; justify-content: space-between; gap: 20px; padding: 10px max(24px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
.draft-bar span { text-align: right; letter-spacing: 0; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 25px; border-bottom: 1px solid var(--ink); }
.wordmark { display: inline-flex; align-items: baseline; min-height: 44px; padding-block: 5px; font-size: 21px; font-weight: 600; letter-spacing: -.065em; white-space: nowrap; }
.wordmark span { color: var(--muted); font-weight: 400; }
.wordmark i { padding-left: 18px; font-style: normal; font-weight: 400; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; font-size: 12px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-issue { gap: 20px; padding: 9px 14px; border: 1px solid var(--strong-line); }
.nav-issue:hover { background: var(--surface); text-decoration: none; }

.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 76px; padding-block: 104px 96px; }
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 24px; font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .12em; }
.dot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: currentColor; }
h1 { margin-bottom: 30px; font-size: clamp(36px, 4.2vw, 59px); line-height: 1.13; letter-spacing: -.07em; }
h1 em { color: var(--muted); font-style: normal; font-weight: 400; }
.lede { max-width: 560px; margin-bottom: 32px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.button, .seed-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 48px; padding: 13px 19px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.6; text-align: left; }
.button:hover, .seed-button:hover { background: #353535; text-decoration: none; }
.button:active, .seed-button:active { background: #555; }
.fine { margin-top: 20px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.notebook { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 410px; padding: 25px 28px 20px; overflow: hidden; border: 1px solid var(--strong-line); background: var(--surface); isolation: isolate; }
.notebook::before { position: absolute; z-index: -1; right: -170px; bottom: -280px; width: 420px; height: 520px; border: 1px solid var(--line); border-radius: 48% 52% 43% 57%; content: ""; }
.notebook-top, .notebook-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 9px; line-height: 1.6; letter-spacing: .05em; }
.notebook-top { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.big-question { margin: 34px 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.5; letter-spacing: -.045em; }
.notebook-bottom { padding-top: 16px; border-top: 1px solid var(--line); }
.notebook-bottom span:last-child { font-size: 21px; }
.biosystem { max-width: 100%; margin: 28px 0; overflow-x: auto; color: var(--muted); font-family: var(--mono); font-size: clamp(10px, 1vw, 13px); line-height: 1.5; letter-spacing: 0; white-space: pre; tab-size: 2; }
.biosystem::selection { background: var(--ink); color: var(--paper); }
.principles-piece { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 50px; align-items: center; border-bottom: 1px solid var(--line); }
.principles-piece h2 { font-size: clamp(27px,3vw,39px); line-height: 1.3; letter-spacing: -.06em; margin-bottom: 20px; }
.principles-copy > p:not(.eyebrow) { font-size: 12px; }
.principles-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.secondary { background: transparent; color: var(--ink); }
.secondary:hover { background: var(--surface); }
#principles-canvas { display: block; width: 100%; height: 290px; max-width: 100%; border: 1px solid var(--line); }
#principles-canvas[hidden] { display: none; }
.mission-note { max-width: 64ch; margin: 28px 0 0; padding-left: 18px; border-left: 1px solid var(--ink); color: var(--muted); font-size: 12px; line-height: 1.9; }
.themes { border-block: 1px solid var(--line); }
.theme-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 20px; font-size: 10px; line-height: 1.6; letter-spacing: .1em; }
.theme-row span:nth-child(even) { color: var(--quiet); }

.section { padding-block: 88px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 44px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.section-heading h2, .about h2, .letters h2 { margin: 0; font-size: clamp(27px, 3vw, 39px); line-height: 1.25; letter-spacing: -.065em; }
.section-heading > p { max-width: 290px; margin-bottom: 3px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.feature-entry { display: grid; grid-template-columns: 100px minmax(0, 1fr) 36px; gap: 36px; padding: 34px 0 40px; border-block: 1px solid var(--ink); }
.feature-entry:hover { text-decoration: none; }
.feature-entry:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.entry-index { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 9px; line-height: 1.6; letter-spacing: .04em; }
.entry-index > span:first-child { color: var(--quiet); font-size: 39px; line-height: 1; letter-spacing: -.08em; }
.feature-entry .eyebrow { margin-bottom: 12px; color: var(--muted); }
.feature-entry h3 { max-width: 27ch; margin-bottom: 17px; font-size: clamp(23px, 2.5vw, 32px); line-height: 1.4; letter-spacing: -.05em; }
.feature-entry p:last-child { max-width: 68ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.entry-arrow { align-self: center; text-align: right; font-size: 27px; }
.idea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding-top: 42px; }
.idea-grid article + article { padding-left: 56px; border-left: 1px solid var(--line); }
.idea-grid .eyebrow { margin-bottom: 20px; }
.idea-grid h3 { max-width: 27ch; margin-bottom: 17px; font-size: 23px; line-height: 1.5; letter-spacing: -.055em; }
.idea-grid p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.85; }
.status { display: inline-block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; }
.status::before { content: "[ "; }
.status::after { content: " ]"; }

.practice { border-block: 1px solid var(--line); background: var(--surface); }
.practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.number { display: block; padding-top: 15px; border-top: 1px solid var(--strong-line); color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.practice-grid h3 { margin: 28px 0 16px; font-size: 22px; line-height: 1.5; letter-spacing: -.06em; }
.practice-grid p { max-width: 35ch; color: var(--muted); font-size: 13px; line-height: 1.85; }
.work-note { display: flex; align-items: center; justify-content: space-between; gap: 42px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--strong-line); }
.work-note h3 { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.work-note p { max-width: 70ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; flex-shrink: 0; min-height: 44px; padding-block: 8px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 90px; }
.about-lede { font-size: 23px; line-height: 1.65; letter-spacing: -.05em; }
.about p:not(.about-lede):not(.eyebrow):not(.fine) { color: var(--muted); font-size: 14px; line-height: 1.9; }
.letters { border-block: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.letters-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 100px; }
.letters h2 { margin-bottom: 22px; }
.letters p:not(.eyebrow) { color: #c4c4c4; font-size: 13px; line-height: 1.85; }
.light { margin-top: 14px; border-color: var(--paper); background: var(--paper); color: var(--ink); }
.light:hover { background: #ddd; }
.letters a:focus-visible { outline-color: var(--paper); }
.letters .newsletter-status { max-width: 44ch; margin: 22px 0 0; font-size: 11px; }
.channel-list { align-self: center; min-width: 0; }
.channel-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid #555; font-size: 13px; }
.channel-list strong { color: #c4c4c4; font-size: 10px; font-weight: 400; text-align: right; }
.channel-list p { margin-top: 24px; font-size: 11px !important; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 32px; font-size: 11px; }
.footer > span { font-size: 14px; letter-spacing: -.04em; }
.footer p { margin: 0; color: var(--muted); }
.footer > a { display: inline-flex; align-items: center; min-height: 44px; }

.terminal { margin-block: 32px 0; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; }
.terminal summary, .terminal details summary { min-height: 48px; padding: 13px 17px; cursor: pointer; list-style-position: inside; user-select: none; }
.terminal summary:hover { background: var(--surface); }
.terminal[open] > summary, .terminal details[open] > summary { border-bottom: 1px solid var(--line); }
.terminal > :not(summary):not(details) { margin-inline: 17px; }
.terminal pre, .terminal details pre { max-width: 100%; margin-block: 20px; overflow-x: auto; font-family: var(--mono); font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal p { color: var(--muted); font-size: 12px; }
.terminal label { display: inline-block; font-size: 11px; }
.terminal input { width: min(260px, calc(100% - 34px)); min-height: 48px; margin-block: 10px 18px; padding: 10px 12px; border: 1px solid var(--strong-line); border-radius: 0; background: var(--paper); color: var(--ink); font-size: 16px; }
.terminal input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.terminal .seed-button { margin-block: 0 18px; }
.seed-button { gap: 16px; font-size: 11px; }
.seed-output { min-height: 1.8em; margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.seed-output:empty { display: none; }
.letters .terminal { border-color: #555; color: var(--paper); }
.letters .terminal summary:hover { background: #292929; }
.letters .terminal[open] > summary { border-color: #555; }
.letters .seed-button { border-color: #a5a5a5; }
.letters .seed-output { color: #c4c4c4; }

.essay { max-width: 760px; margin: 80px auto 104px; }
.essay h1 { margin-bottom: 30px; font-size: clamp(35px, 4vw, 53px); line-height: 1.2; }
.essay .lede { max-width: 100%; font-size: 17px; }
.essay h2 { margin-top: 48px; margin-bottom: 20px; font-size: 27px; line-height: 1.4; letter-spacing: -.05em; }
.essay p { font-size: 15px; line-height: 1.95; }
.essay .essay-meta { margin-bottom: 42px; color: var(--muted); font-size: 11px; }
.essay .return { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12px; }
.essay .return a { display: inline-flex; align-items: center; min-height: 44px; }
.essay blockquote { margin: 38px 0; padding: 5px 0 5px 25px; border-left: 1px solid var(--ink); font-size: 22px; line-height: 1.7; letter-spacing: -.04em; }

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .masthead { gap: 20px; }
  .wordmark { font-size: 19px; }
  nav { gap: 10px 17px; font-size: 11px; }
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 38px; padding-block: 76px; }
  h1 { font-size: clamp(35px, 4.5vw, 47px); }
  .notebook { min-height: 390px; padding-inline: 22px; }
  .notebook-top, .notebook-bottom { font-size: 8px; }
  .big-question { font-size: 22px; }
  .section { padding-block: 72px; }
  .section-heading { gap: 30px; }
  .section-heading > p { max-width: 245px; }
  .feature-entry { grid-template-columns: 76px minmax(0, 1fr) 28px; gap: 26px; }
  .idea-grid { gap: 32px; }
  .idea-grid article + article { padding-left: 32px; }
  .practice-grid { gap: 28px; }
  .practice-grid h3 { font-size: 20px; }
  .work-note { align-items: start; flex-direction: column; gap: 20px; }
  .about, .letters-inner { gap: 48px; }
  .about-lede { font-size: 21px; }
  .footer { flex-wrap: wrap; gap: 12px 30px; }
}

@media (max-width: 760px) {
  .principles-piece { grid-template-columns: 1fr; gap: 28px; }
  #principles-canvas { height: 235px; }
  .wrap { width: calc(100% - 44px); }
  .draft-bar { padding-inline: 22px; font-size: 9px; }
  .masthead { align-items: start; flex-direction: column; gap: 12px; padding-block: 18px; }
  .wordmark { font-size: 21px; }
  nav { justify-content: space-between; width: 100%; gap: 10px; font-size: 11px; }
  .nav-issue { gap: 14px; padding-inline: 12px; }
  .hero { grid-template-columns: 1fr; gap: 46px; padding-block: 58px 60px; }
  h1 { max-width: 19ch; font-size: clamp(35px, 7vw, 49px); }
  .hero .lede { max-width: 60ch; }
  .notebook { min-height: 340px; padding: 23px 26px 20px; }
  .notebook-top, .notebook-bottom { font-size: 10px; }
  .big-question { max-width: 28ch; font-size: 26px; }
  .biosystem { font-size: 12px; }
  .theme-row { flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 9px; }
  .section { padding-block: 58px; }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading > p { max-width: 45ch; margin: 20px 0 0; font-size: 13px; }
  .section-heading h2, .about h2, .letters h2 { max-width: 23ch; font-size: 31px; }
  .practice-grid { grid-template-columns: 1fr; gap: 22px; }
  .practice-grid h3 { margin-top: 17px; font-size: 23px; }
  .practice-grid p { max-width: 58ch; }
  .about { grid-template-columns: 1fr; gap: 30px; }
  .about-lede { max-width: 40ch; font-size: 22px; }
  .letters-inner { grid-template-columns: 1fr; gap: 38px; }
  .letters-inner > div:first-child > p:not(.eyebrow) { max-width: 56ch; }
  .channel-list { max-width: 100%; }
  .channel-list > div { font-size: 14px; }
  .channel-list strong { font-size: 11px; }
  .essay { margin-block: 54px 70px; }
  .essay h1 { font-size: clamp(33px, 6vw, 46px); }
}

@media (max-width: 480px) {
  .draft-bar span { display: none; }
  .hero { padding-top: 45px; }
  .eyebrow { font-size: 9px; letter-spacing: .08em; }
  h1 { font-size: 35px; letter-spacing: -.075em; }
  .lede { font-size: 14px; }
  .button { width: 100%; font-size: 12px; }
  .fine { font-size: 10px; }
  .notebook { min-height: 315px; padding-inline: 20px; }
  .notebook-top, .notebook-bottom { font-size: 8px; }
  .big-question { font-size: 23px; }
  .biosystem { font-size: 10px; }
  .theme-row { gap: 10px; font-size: 8px; letter-spacing: .02em; }
  .feature-entry { grid-template-columns: minmax(0, 1fr) 24px; gap: 20px; padding-block: 27px 30px; }
  .entry-index { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
  .entry-index > span:first-child { font-size: 28px; }
  .feature-entry h3 { font-size: 24px; }
  .entry-arrow { font-size: 23px; }
  .idea-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 32px; }
  .idea-grid article + article { padding: 30px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .idea-grid h3 { font-size: 23px; }
  .work-note { margin-top: 28px; }
  .text-link { width: 100%; font-size: 11px; }
  .about-lede { font-size: 21px; }
  .footer { align-items: start; flex-direction: column; gap: 13px; padding-block: 26px; }
  .essay h1 { font-size: 34px; }
  .essay .lede { font-size: 16px; }
  .essay p { font-size: 14px; }
  .essay h2 { font-size: 24px; }
  .essay blockquote { padding-left: 18px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .button, .seed-button, .notebook, .nav-issue, .terminal { border-color: ButtonText; }
  .dot { background: CanvasText; }
}

@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --muted: #444; }
  .wrap { width: 100%; }
  .draft-bar, nav, .button, .seed-button, .terminal, .skip { display: none; }
  .masthead, .section, .hero { padding-block: 24px; }
  .letters { background: #fff; color: #000; }
  .letters p:not(.eyebrow), .channel-list strong { color: #444; }
  .notebook, .feature-entry, .idea-grid article, .practice-grid article { break-inside: avoid; }
}

/* The atlas: quiet, explorable structures on a paper surface. */
[hidden] { display: none !important; }
.section-intro { max-width: 72ch; color: var(--muted); font-size: 14px; line-height: 1.95; }
.essay p a, .section-intro a, .map-caption p a { text-decoration: underline; }
.needs-section { border-bottom: 1px solid var(--line); }
.needs-garden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 35px; border-top: 1px solid var(--ink); }
.needs-garden details { min-width: 0; border-bottom: 1px solid var(--line); }
.needs-garden details:nth-child(odd) { border-right: 1px solid var(--line); }
.needs-garden summary { display: flex; align-items: center; gap: 18px; min-height: 86px; padding: 20px 24px; cursor: pointer; font-size: 14px; list-style: none; }
.needs-garden summary::-webkit-details-marker { display: none; }
.needs-garden summary:hover { background: var(--surface); }
.needs-garden summary > span:last-child { margin-left: auto; }
.needs-garden details[open] summary > span:last-child { transform: rotate(45deg); }
.map-number { color: var(--muted); font-size: 10px; }
.needs-garden details > div { padding: 0 24px 18px 58px; }
.needs-garden details p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.needs-garden strong { color: var(--ink); font-weight: 500; }
.map-caption { display: flex; align-items: start; justify-content: space-between; gap: 36px; margin-top: 26px; }
.map-caption p { max-width: 62ch; color: var(--muted); font-size: 11px; }
.atlas-intro { border-top: 1px solid var(--line); }
.atlas-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; font-size: 14px; color: var(--muted); }
.scenario { max-width: 80ch; padding: 24px; border: 1px solid var(--strong-line); }
.scenario .eyebrow { margin-bottom: 14px; }
.scenario p:last-child { margin: 0; font-size: 14px; }
.lens-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 32px; }
.lens-controls button { min-height: 48px; min-width: 110px; padding: 12px 20px; border: 1px solid var(--strong-line); border-radius: 0; background: transparent; color: var(--ink); font-size: 12px; }
.lens-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lens-controls button:hover { outline: 1px solid var(--ink); }
.lens-heading { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 36px 0 30px; }
.lens-heading .eyebrow { margin-bottom: 12px; }
.lens-heading h3 { margin: 0; font-size: 25px; line-height: 1.4; letter-spacing: -.05em; }
.lens-heading .status { flex-shrink: 0; }
.kernel-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.kernel-map li { min-width: 0; }
.kernel-map h4 { margin: 24px 0 14px; font-size: 14px; font-weight: 500; }
.kernel-map p { font-size: 12px; color: var(--muted); }
.lens-question { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--strong-line); font-size: 12px; }
.life-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; padding: 0; margin: 35px 0; list-style: none; }
.life-chain li { border-top: 1px solid var(--ink); padding-top: 18px; }
.life-chain strong { display: block; font-size: 12px; font-weight: 500; }
.life-chain span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.atlas-plate { position: relative; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--line); }
.atlas-plate canvas { display: block; width: 100%; height: 470px; }
.atlas-plate figcaption { display: flex; justify-content: space-between; gap: 24px; padding: 17px 20px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); }
.atlas-plate .plate-caption { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 9px; color: var(--muted); }
.hero.atlas-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 84px; }
.atlas-hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.04; }
.atlas-hero .lede { margin-top: 34px; }
.plate-fallback { margin: 100px 28px; font-size: 26px; letter-spacing: -.05em; }
@media (max-width: 1050px) {
  .hero.atlas-hero { gap: 32px; }
  .kernel-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-caption { flex-direction: column; gap: 4px; }
  .needs-garden summary { padding-inline: 18px; gap: 12px; font-size: 13px; }
}
@media (max-width: 760px) {
  .hero.atlas-hero { grid-template-columns: 1fr; padding-top: 55px; gap: 38px; }
  .atlas-hero h1 { max-width: 15ch; font-size: clamp(45px, 9vw, 66px); }
  .atlas-plate canvas { height: 390px; }
  .atlas-columns { grid-template-columns: 1fr; gap: 12px; }
  .lens-heading { display: block; }
  .lens-heading .status { margin-top: 16px; }
  .kernel-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .needs-garden { grid-template-columns: 1fr; }
  .needs-garden details:nth-child(odd) { border-right: 0; }
  .needs-garden summary { min-height: 74px; }
  .needs-garden details > div { padding-left: 42px; }
  .kernel-map { grid-template-columns: 1fr; }
  .kernel-map h4 { margin-top: 14px; }
  .kernel-map p { max-width: 44ch; }
  .lens-controls { display: grid; grid-template-columns: 1fr 1fr; }
}
@media print {
  .lens-controls { display: none; }
  .needs-garden details { break-inside: avoid; }
}