/* Engineering atlas: theme-aware figures and a quieter documentation layout. */
:root {
  --wrap: 1200px;
  --gutter: 28px;
  --radius: 6px;
}
:root, :root[data-theme], :root:not([data-theme="light"]) {
  --s1: var(--cool);
  --s2: var(--accent-fill);
  --s3: var(--ink-3);
}
body { line-height: 1.65; }
section { padding: clamp(56px, 7vw, 96px) 0; }
section[id] { scroll-margin-top: 80px; }
h1, h2, h3 { font-weight: 620; }
h1 { letter-spacing: -.055em; }
h2 { font-size: clamp(28px, 3.3vw, 40px); letter-spacing: -.035em; }
.brand { letter-spacing: -.045em; }
.site-head .wrap { height: 72px; }
.icon-btn { border-radius: 5px; background: transparent; }
.nav a { font-size: 14px; }
.nav a[aria-current="page"] { border-radius: 0; box-shadow: inset 0 -1px 0 var(--accent); }
.btn { border-radius: 5px; font-size: 14px; }
.btn.ghost { background: transparent; }
.eyebrow { font-size: 11px; letter-spacing: .15em; line-height: 1.4; }
.eyebrow::before { width: 12px; }
.gridlines { display: none; }
.hero { padding: clamp(52px, 7vw, 88px) 0; }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.atlas-home h1 { font-size: clamp(42px, 5.7vw, 72px); }
.atlas-home .lede { font-size: 19px; line-height: 1.6; max-width: 46ch; }
.atlas-page-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.page-hero { padding: clamp(48px, 6vw, 76px) 0; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(36px, 4.7vw, 58px); letter-spacing: -.045em; max-width: 17ch; }
.page-hero .lede { font-size: 18px; line-height: 1.65; margin-bottom: 0; }
.page-intro { min-width: 0; }
.sec-head { max-width: 760px; margin-bottom: 32px; }
.sec-head p { font-size: 17px; }

/* Native SVGs inherit the palette, including explicit and system dark themes. */
.atlas-svg { width: 100%; height: auto; overflow: visible; }
.canvas-fallback { padding: 24px; }
.canvas-fallback .caption { margin-bottom: 0; }
.js .canvas-fallback { display: none; }
:root:not(.js) .head-tools { display: none; }
:root:not(.js) canvas, :root:not(.js) .lab-stats,
:root:not(.js) .lab-head .chip-btn,
:root:not(.js) .stage-foot .chip-btn { display: none; }
.atlas-svg path, .atlas-svg rect, .atlas-svg circle { stroke-linejoin: round; }
.art-grid { fill: none; stroke: var(--line); stroke-width: .6; }
.art-path { fill: none; stroke: var(--cool); stroke-width: 1.5; }
.art-port { fill: var(--bg); stroke: var(--cool); stroke-width: 1.5; }
.art-signal { fill: var(--cool); }
.art-base { fill: var(--bg-2); stroke: color-mix(in srgb, var(--ink-3) 55%, var(--line)); stroke-width: 1; }
.art-side { fill: color-mix(in srgb, var(--ink-3) 18%, var(--bg-2)); stroke: color-mix(in srgb, var(--ink-3) 55%, var(--line)); stroke-width: 1; }
.art-glass { fill: color-mix(in srgb, var(--cool) 7%, var(--bg)); stroke: var(--cool); stroke-width: 1; }
.art-fine { stroke-width: .8; opacity: .5; }
.art-gold { fill: color-mix(in srgb, var(--accent-fill) 72%, var(--bg)); stroke: var(--accent); stroke-width: 1; }
.art-gold-side { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1; }
.art-gold-grid { fill: none; stroke: var(--on-accent); opacity: .23; stroke-width: .8; }
.art-guide { fill: none; stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 3 5; opacity: .65; }
.art-amber-path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.art-gate { fill: color-mix(in srgb, var(--accent-fill) 10%, var(--bg)); stroke: var(--accent); stroke-width: 1; }
.art-reject-path { fill: none; stroke: var(--stall); stroke-width: 1.5; }
.art-mask { fill: color-mix(in srgb, var(--cool) 30%, var(--bg)); stroke: var(--cool); stroke-width: .8; }
.art-label { fill: var(--ink-2); font: 11px var(--mono); letter-spacing: .025em; }
.art-body { fill: var(--ink); font: 16px var(--sans); }
.art-accent-label { fill: var(--accent); }
.art-cool-label { fill: var(--cool); }
.art-reject-label { fill: var(--stall); }
.art-on-gold { fill: var(--on-accent); }

.atlas-figure { margin: 0; min-width: 0; }
.figure-heading { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-block: 1px solid var(--line); color: var(--ink-2); font: 11px/1.5 var(--mono); }
.figure-heading span:first-child { color: var(--accent); white-space: nowrap; }
.atlas-figure figcaption { font: 11px/1.65 var(--mono); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; max-width: 64ch; }
.hero-art .figure-heading { border-top: 0; }
.hero-art .atlas-svg { margin: 12px 0; }
.page-hero .hero-art { max-width: 480px; width: 100%; justify-self: end; }
.wide-figure { max-width: 900px; margin: 0 auto 32px; }
.wide-figure .atlas-svg { margin: 22px 0; }
.fingerprint-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.fingerprint-layout .layers { grid-column: 1 / -1; }
.fingerprint-art { align-self: center; }
.fingerprint-art .atlas-svg { margin: 16px 0; }

/* Cards become quiet figure plates or indexed notes, rather than repeated boxes. */
.card { box-shadow: none; border-radius: 5px; }
.atlas-primer { gap: 28px; }
.atlas-primer .card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 22px 0 0; border-radius: 0; }
.atlas-primer .num { color: var(--accent); }
.atlas-primer h3 { font-size: 18px; }
.work-card { padding: 0 24px 24px; overflow: hidden; }
.work-art { margin: 0 -24px 16px; padding: 20px 48px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.work-art .atlas-svg { height: 230px; }
.work-caption { display: block; font: 10px/1.6 var(--mono); color: var(--ink-3); margin: 0 0 20px; letter-spacing: .035em; }
.work-card .tag { background: transparent; border: 0; padding: 0; border-radius: 0; color: var(--accent); line-height: 1.5; }
.work-card h3 { margin-top: 12px !important; font-size: 22px; }
.work-card .route { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 22px; }
.route { font-size: 11px; line-height: 1.3; }
.route span { border-radius: 3px; }
.method-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 48px; align-items: center; }
.method-stages { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
ol.method-stages li { border-bottom: 0; border-right: 1px solid var(--line); padding: 52px 22px 22px; }
ol.method-stages li:last-child { border-right: 0; }
ol.method-stages span { font-size: 14.5px; }
.stage, .lab, .model, .case, .form { border-radius: 6px; box-shadow: none; }
.stage-bar .dots { display: none; }
.stage-bar { letter-spacing: .025em; }
.stage-foot { font-size: 11px; line-height: 1.5; }
.convergence-stage .stage-foot > span { max-width: 35ch; }
.tag { border-radius: 3px; font-size: 10px; line-height: 1.4; }
.research-questions { gap: 0 32px; }
.research-questions .card { border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; padding: 24px 0 32px; }
.research-questions .num { color: var(--accent); }
.research-questions h3 { font-size: 21px; }
.field-notes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.field-notes .card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; padding: 28px; border-left: 2px solid var(--accent); background: var(--bg); }
.field-notes .card > .num { grid-row: 1 / span 2; padding-top: 5px; }
.field-notes .card > h3, .field-notes .card > p { grid-column: 2; max-width: 76ch; }
.field-notes .illustrated-note { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; }
.note-art { margin: 0; min-width: 0; }
.note-art .atlas-svg { height: auto; max-height: 240px; }
.note-art .work-caption { border-top: 1px solid var(--line); padding-top: 12px; margin: 12px 0 0; }
.note-copy { min-width: 0; }
.note-copy .num { margin-bottom: 12px; }
.field-notes .num { color: var(--accent); }

.case-head { padding: 28px; background: var(--bg); }
.case-head > div { flex: 1 1 520px; }
.case-head > .tag { flex: 0 1 auto; }
.case-head h3 { font-size: clamp(23px, 3vw, 30px); line-height: 1.2; max-width: 34ch; }
.case-evidence { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
.case-art { padding: 22px 28px; border-right: 1px solid var(--line); }
.case-art .atlas-svg { margin: 16px 0; }
.case-art .figure-heading { border-top: 0; }
.case-evidence dl { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.case-evidence dl > div { padding: 22px 24px; }
.case-evidence dl > div:nth-child(3n) { border-right: 1px solid var(--line); }
.case-evidence dl > div:nth-child(2n) { border-right: 0; }
.case-foot { background: var(--bg); border-top: 1px solid var(--line); }
.outcome > div { padding: 28px; }
.contact-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
.contact-layout > .grid { gap: 0; }
.contact-layout > .grid > .card { padding: 22px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.contact-layout > .grid > .card:first-child { padding-top: 0; border-top: 0; }
.field input, .field select, .field textarea, pre.preview { border-radius: 4px; }
.cta { border-radius: 6px; padding: 36px; }
.cta::before { background: linear-gradient(115deg, transparent 55%, color-mix(in srgb, var(--accent-fill) 8%, transparent)); }
.foot-brand { display: inline-flex; gap: 24px; align-items: center; color: var(--ink); font-size: 20px; letter-spacing: -.035em; margin-bottom: 12px; }
.foot-mark { color: var(--accent); font-size: 28px; }
.site-foot { padding-block: 48px; background: var(--bg-2); }
.site-foot nav { font-size: 13px; }
.lab-head .t { line-height: 1.5; }

@media (max-width: 1000px) {
  .hero-grid, .atlas-page-grid { gap: 32px; }
  .atlas-home h1 { font-size: 56px; }
  .atlas-home .lede { font-size: 18px; }
  .fingerprint-layout { gap: 32px; }
  .case-evidence { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
  .case-evidence dl > div { padding: 18px; }
}
@media (max-width: 860px) {
  .hero-grid, .atlas-page-grid, .fingerprint-layout, .contact-layout, .method-layout { grid-template-columns: minmax(0, 1fr); }
  .method-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.method-stages li:nth-child(2) { border-right: 0; }
  ol.method-stages li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-art { max-width: 560px; width: 100%; margin: 0 auto; }
  .page-hero .hero-art { justify-self: center; max-width: 500px; }
  .page-hero h1 { max-width: 19ch; }
  .atlas-home h1 { font-size: clamp(42px, 8vw, 64px); }
  .atlas-home .lede { max-width: 62ch; }
  .fingerprint-layout .layers { grid-column: auto; }
  .case-evidence { grid-template-columns: minmax(0, 1fr); }
  .case-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .case-art .atlas-svg { max-height: 300px; }
  .case-art figcaption { max-width: none; }
}
@media (max-width: 760px) {
  .site-head .wrap { height: 62px; }
  .nav { top: 62px; }
  :root:not(.js) .site-head { position: static; }
  :root:not(.js) .site-head .wrap { height: auto; min-height: 62px; flex-wrap: wrap; padding-block: 16px; }
  :root:not(.js) .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; order: 3; flex-basis: 100%; margin: 0; padding: 0; border: 0; }
  .case-evidence dl { grid-template-columns: minmax(0, 1fr); }
  .case-evidence dl > div:nth-child(3n) { border-right: 0; }
  .atlas-primer { gap: 24px; }
  .stage-bar { flex-wrap: wrap; line-height: 1.4; }
  .stage-bar span { white-space: normal; }
  .cv-head, .cv-row { grid-template-columns: 104px minmax(0, 1fr) 72px; gap: 8px; }
  .cv-head { font-size: 9px; line-height: 1.3; }
  .art-label { font-size: 12px; }
  .case-head, .outcome > div, .case-art { padding: 22px; }
  .work-art { padding-inline: 28px; }
  .wide-figure .art-label { font-size: 15px; }
  .wide-figure .art-body { font-size: 20px; }
}
@media (max-width: 520px) {
  :root { --gutter: 20px; }
  .hero { padding-top: 44px; }
  .hero-grid, .atlas-page-grid { gap: 36px; }
  .hero-art .figure-heading { font-size: 10px; }
  .hero-art figcaption { font-size: 10px; }
  .page-hero .lede { font-size: 17px; }
  .page-hero h1 { font-size: 40px; }
  .figure-heading { gap: 12px; }
  .art-label { font-size: 13px; }
  .cv-head, .cv-row { grid-template-columns: 86px minmax(0, 1fr) 62px; }
  .cv-flag { font-size: 9px; }
  .cv { padding-inline: 12px; }
  .form { padding: 20px; }
  .form .row .btn { width: 100%; justify-content: center; }
  .cta { padding: 24px; }
  .work-art .atlas-svg { height: auto; }
  .lab-head { padding-inline: 12px; }
  .field-notes .card { padding: 22px; }
  .field-notes .card { grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; }
  .field-notes .illustrated-note { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .note-art .atlas-svg { max-height: 230px; }
  .method-stages { grid-template-columns: minmax(0, 1fr); }
  ol.method-stages li { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 22px 22px 56px; }
  ol.method-stages li:last-child { border-bottom: 0; }
}