* { box-sizing: border-box; }

html { background: var(--page); scroll-behavior: smooth; }

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: 1.5;
}

body[data-mode="technical"] {
  --page: #edf3f2;
  --surface: #fbfdfc;
  --surface-raised: #dce8e7;
  --line: #bfcecd;
  --line-strong: #849fa1;
  --accent: #456f78;
  --accent-bright: #315f69;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 24rem);
  transition: background var(--motion-transport) var(--ease-standard);
}

body[data-mode="technical"]::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--signal) 7%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--signal) 7%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 75% 18%, color-mix(in srgb, var(--signal) 13%, transparent), transparent 25rem);
  background-size: 3rem 3rem, 3rem 3rem, auto;
}

button, a { color: inherit; font: inherit; }
button { border: 0; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-bright); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 30;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--page);
  background: var(--accent-bright);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter: blur(14px); }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--content-max));
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.wordmark, .site-nav, .mode-control, .hero__eyebrow, .hero__mode, .hero__trace, .section-kicker, .record-index, .record-meta, .record-label, .record-prompt, .detail-label, .credential-label, .contact-label, .site-footer, .hero__link {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; text-decoration: none; }
.wordmark__mark { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 0.7rem; color: var(--accent-bright); font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.05em; }
.site-nav { display: flex; gap: clamp(1rem, 2vw, 2.4rem); margin-right: 9.5rem; color: var(--ink-soft); }
.site-nav a { text-decoration: none; }

.mode-control {
  position: fixed;
  z-index: 20;
  top: 1.9rem;
  right: max(var(--page-pad), calc((100vw - var(--content-max)) / 2 + var(--page-pad)));
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--surface);
  background: var(--ink);
  box-shadow: 0 0.8rem 2.2rem rgba(23, 39, 43, 0.14);
  cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.mode-control:hover { border-color: var(--accent); color: var(--surface); background: var(--accent); transform: translateY(-2px); }
.mode-control__status { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
body[data-mode="technical"] .mode-control__status { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 12%, transparent); }

.page-shell { width: min(100%, var(--content-max)); margin: 0 auto; padding: 0 var(--page-pad); }
.hero { position: relative; display: grid; min-height: min(49rem, calc(100svh - var(--header-height))); grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(4rem, 8vw, 7rem) 0 var(--space-7); border-bottom: 1px solid var(--line); }
.hero__copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; }
.hero__eyebrow { margin: 0 0 var(--space-2); color: var(--accent-bright); }
.hero__title { max-width: 7ch; margin: 0; font-size: var(--type-hero); font-weight: 800; letter-spacing: -0.12em; line-height: 0.73; text-transform: uppercase; }
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--accent); }
body[data-mode="technical"] .hero__title span:last-child { color: var(--signal); }
.hero__body { max-width: 25ch; margin: var(--space-4) 0 0; font-size: clamp(1.45rem, 2.2vw, 2.6rem); letter-spacing: -0.055em; line-height: 1.06; }
.hero__link { display: inline-flex; gap: var(--space-2); margin-top: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--accent); color: var(--ink); text-decoration: none; }
.hero__link span { color: var(--accent-bright); }
.hero__portrait { position: relative; z-index: 1; display: flex; grid-column: 2; grid-row: 1; align-self: end; justify-content: center; width: 100%; min-height: var(--portrait-max-height); margin: 0; overflow: visible; }
.about-photo { display: block; width: 100%; height: auto; max-height: var(--portrait-max-height); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 1.5rem 2.2rem rgba(23, 39, 43, 0.16)); transition: opacity var(--motion-standard) var(--ease-standard), transform var(--motion-transport) var(--ease-standard); }
body[data-mode="technical"] .hero__portrait { align-self: center; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-raised); }
body[data-mode="technical"] .about-photo { max-height: none; filter: grayscale(0.18) contrast(1.03); }
.hero__side { position: absolute; z-index: 3; right: var(--space-3); bottom: calc(var(--space-7) + var(--space-4)); display: grid; gap: var(--space-2); min-width: 12rem; padding: var(--space-3); border-radius: var(--control-radius); color: var(--surface); background: color-mix(in srgb, var(--ink) 88%, transparent); text-align: right; backdrop-filter: blur(10px); }
.hero__mode { color: #d6e6e2; }
.hero__trace { color: #f3f6f2; line-height: 1.7; white-space: pre-line; }
.hero__rule { position: absolute; right: 0; bottom: var(--space-2); left: 0; height: 3px; background: linear-gradient(to right, var(--accent) 0 24%, var(--line) 24% 100%); }
body[data-mode="technical"] .hero__rule { background: linear-gradient(to right, var(--signal) 0 24%, var(--line) 24% 100%); }

.section { padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
body[data-mode="technical"] .mode-enable { display: none; }
.section-header { display: grid; grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr); grid-template-areas: "kicker title" ". intro"; align-items: end; gap: var(--space-3) clamp(2rem, 4vw, 4rem); margin-bottom: var(--space-6); }
.section-kicker { grid-area: kicker; margin: 0; color: var(--accent-bright); }
.section-title { grid-area: title; max-width: 16ch; margin: 0; font-size: var(--type-section); font-weight: 800; letter-spacing: -0.085em; line-height: 0.88; text-transform: uppercase; white-space: pre-line; }
.section-intro { grid-area: intro; max-width: 37rem; margin: 0; color: var(--ink-soft); font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.34; }
body[data-mode="technical"] .section-kicker, body[data-mode="technical"] .detail-label, body[data-mode="technical"] .record-index { color: var(--signal); }

.work-index { border-bottom: 1px solid var(--line); }
.work-record { display: grid; grid-template-columns: var(--index-gutter) minmax(0, 1fr); border-top: 1px solid var(--line); transition: opacity var(--motion-standard), transform var(--motion-standard), border-color var(--motion-fast); }
.work-record:hover { border-color: var(--accent); }
.record-index { padding: var(--space-3) var(--space-2) var(--space-3) 0; color: var(--accent); }
.work-record.is-crossover .record-index::after { display: block; width: 0.45rem; height: 0.45rem; margin-top: var(--space-2); border-radius: 50%; background: var(--accent); content: ""; }
body[data-mode="technical"] .work-record.is-crossover .record-index::after { background: var(--signal); }
.record-main { min-width: 0; padding: var(--space-3) 0; }
.record-label { display: inline-block; max-width: 58rem; margin: 0 0 var(--space-2); padding-left: var(--space-2); border-left: 2px solid var(--accent); color: var(--accent-bright); line-height: 1.55; }
.work-toggle { width: 100%; padding: 0; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.record-headline { max-width: 31ch; margin: 0; font-size: var(--type-record); font-weight: 800; letter-spacing: -0.065em; line-height: 0.98; }
.work-toggle:hover .record-headline { color: var(--accent-bright); }
.record-meta { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-2); margin-top: var(--space-3); color: var(--ink-soft); line-height: 1.5; }
.record-meta span + span::before { margin-right: var(--space-2); color: var(--accent); content: "/"; }
.record-prompt { display: inline-flex; gap: var(--space-2); margin-top: var(--space-3); color: var(--accent-bright); }
.record-prompt::after { content: "+"; color: var(--accent); font-size: 1rem; }
.work-record.is-expanded .record-prompt::after { content: "−"; }
.work-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-standard) var(--ease-standard); }
.work-record.is-expanded .work-details { grid-template-rows: 1fr; }
.work-details__inner { min-height: 0; overflow: clip; }
.work-details__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); padding: var(--space-5) 0 var(--space-3); }
.detail-block { min-width: 0; }
.detail-block--wide { grid-column: 1 / -1; }
.detail-label { display: block; margin-bottom: var(--space-2); color: var(--accent); }
.detail-copy, .domain-line { max-width: 64rem; margin: 0; color: var(--ink-soft); }
.domain-line { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.06em; }
.metric-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.metric-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-2); min-width: 0; color: var(--ink); }
.metric-list li::before { color: var(--accent); content: "↗"; }
.evidence-link { display: inline-block; margin-top: var(--space-4); color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.1em; text-transform: uppercase; }

.section--atlas, .section--adoption { padding-block: var(--space-6); }
.section--atlas .section-header, .section--adoption .section-header { grid-template-columns: 13rem minmax(0, 1fr); margin-bottom: var(--space-4); }
.section--atlas .section-title, .section--adoption .section-title { max-width: 22ch; font-size: var(--type-flagship); line-height: 0.92; }
.section--atlas { background: linear-gradient(140deg, color-mix(in srgb, var(--surface-raised) 36%, transparent), transparent 68%); }
.atlas-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5); }
.atlas-controls { display: flex; flex-direction: column; align-self: start; border-top: 1px solid var(--line-strong); }
.atlas-controls button { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-1) var(--space-2); min-height: var(--flagship-control-height); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink-soft); background: transparent; cursor: pointer; text-align: left; }
.atlas-controls button > span { grid-row: 1 / 3; color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); }
.atlas-controls button strong { color: var(--ink); font-size: 1rem; }
.atlas-controls button small { font-family: var(--font-mono); font-size: var(--type-tiny); }
.atlas-controls button[aria-selected="true"] { background: var(--surface); box-shadow: inset 3px 0 var(--accent); }
.atlas-stage { position: relative; min-height: var(--atlas-stage-height); overflow: hidden; border: 1px solid var(--line); border-radius: var(--control-radius); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.atlas-stage svg { display: block; width: 100%; height: var(--atlas-stage-height); }
.atlas-lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 7; }
.atlas-hub circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.atlas-hub text, .atlas-cluster text { fill: var(--ink); font-family: var(--font-mono); font-size: var(--type-tiny); text-anchor: middle; }
.atlas-cluster circle { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 2; }
.atlas-satellite circle { fill: var(--accent); }
.expansion, .expansion-lines, .ecosystem, .ecosystem-lines { opacity: 0.08; transition: opacity var(--motion-standard) var(--ease-standard); }
.atlas-stage[data-atlas-map="expanded"] .expansion, .atlas-stage[data-atlas-map="expanded"] .expansion-lines { opacity: 1; }
.atlas-stage[data-atlas-map="ecosystem"] .expansion, .atlas-stage[data-atlas-map="ecosystem"] .expansion-lines, .atlas-stage[data-atlas-map="ecosystem"] .ecosystem, .atlas-stage[data-atlas-map="ecosystem"] .ecosystem-lines { opacity: 1; }
.atlas-readout { position: absolute; right: var(--space-3); bottom: var(--space-3); width: min(22rem, calc(100% - 2 * var(--space-3))); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--control-radius); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
.atlas-readout__label, .adoption-readout__index, .adoption-outcome span, .adoption-readout dt { margin: 0; color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.08em; text-transform: uppercase; }
.atlas-readout strong { display: block; margin-top: var(--space-1); font-size: 1.55rem; letter-spacing: -0.04em; }
.atlas-readout p:last-child { margin: var(--space-1) 0 0; color: var(--ink-soft); font-size: var(--type-small); }
.flagship-link, .case-study-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.flagship-link span, .case-study-link span { font-weight: 800; letter-spacing: -0.025em; }
.flagship-link strong, .case-study-link strong { color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.flagship-link:hover, .case-study-link:hover { border-color: var(--accent); color: var(--accent-bright); }

.adoption-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--control-radius); overflow: hidden; background: var(--surface); }
.adoption-controls { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.adoption-controls button { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2); align-items: center; min-height: var(--flagship-control-height); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink-soft); background: transparent; cursor: pointer; text-align: left; }
.adoption-controls button:last-child { border-bottom: 0; }
.adoption-controls button span { color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); }
.adoption-controls button strong { font-size: 0.95rem; }
.adoption-controls button[aria-selected="true"] { color: var(--surface); background: var(--accent); }
.adoption-controls button[aria-selected="true"] span { color: var(--surface); }
.adoption-readout { display: grid; align-content: center; min-height: var(--flagship-readout-height); padding: var(--space-5); }
.adoption-readout h3 { max-width: 18ch; margin: var(--space-2) 0 0; font-size: clamp(2rem, 3.2vw, 3.5rem); letter-spacing: -0.07em; line-height: 0.95; }
.adoption-readout > p:not(.adoption-readout__index) { max-width: 48rem; margin: var(--space-3) 0 0; color: var(--ink-soft); }
.adoption-readout dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.adoption-readout dl > div { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.adoption-readout dd { margin: var(--space-1) 0 0; color: var(--ink); }
.adoption-outcome { display: grid; gap: var(--space-1); margin-top: var(--space-4); padding: var(--space-3); color: var(--surface); background: var(--ink); }
.adoption-outcome span { color: var(--surface-raised); }
.adoption-outcome strong { max-width: 56rem; font-size: 1rem; }

.section--about { display: grid; grid-template-columns: minmax(0, 1fr); }
.section-header--about { margin-bottom: var(--space-5); }
.about-copy { display: grid; gap: var(--space-4); max-width: 60rem; margin-left: auto; }
.about-copy p { max-width: 53rem; margin: 0; color: var(--ink-soft); font-size: clamp(1.1rem, 1.4vw, 1.4rem); line-height: 1.43; }
.about-copy p:first-child { color: var(--ink); font-size: clamp(1.5rem, 2.15vw, 2.35rem); letter-spacing: -0.045em; line-height: 1.1; }

.credentials-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.35fr); gap: var(--space-6); }
.credential-ledger { margin: 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.credential-entry { display: grid; grid-template-columns: var(--credential-thumb-width) minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; min-height: 8rem; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.credential-thumbnail { display: grid; width: var(--credential-thumb-width); aspect-ratio: var(--credential-thumb-ratio); place-items: center; padding: var(--space-1); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: var(--surface); text-decoration: none; }
.credential-thumbnail[href]:hover { border-color: var(--accent); }
.credential-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.credential-thumbnail__fallback { color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--type-tiny); text-align: center; }
.credential-entry__body { min-width: 0; }
.credential-label, .contact-label { margin: 0 0 var(--space-2); color: var(--accent-bright); }
.credential-name { max-width: 35rem; margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.8rem); letter-spacing: -0.04em; line-height: 1.05; }
.credential-copy, .credential-note, .education-copy { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: var(--type-small); }
.credential-actions { display: flex; flex-direction: column; align-items: end; gap: var(--space-2); }
.verify-link { color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }
.education { align-self: start; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.education h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.04em; line-height: 1.05; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-5); }
.contact h2 { margin: 0; font-size: var(--type-section); font-weight: 800; letter-spacing: -0.11em; line-height: 0.78; text-transform: uppercase; }
.contact-link { justify-self: end; color: var(--accent-bright); font-family: var(--font-mono); font-size: clamp(1rem, 1.7vw, 1.5rem); text-decoration: none; }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) 0; color: var(--ink-soft); }

.mode-curtain { position: fixed; z-index: 25; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 0 34%, color-mix(in srgb, var(--accent-bright) 80%, transparent) 47%, var(--accent) 50%, transparent 63%); transform: translateX(-110%); }
body.is-switching .mode-curtain { opacity: 1; animation: signal-aperture var(--motion-transport) var(--ease-snap) both; }
@keyframes signal-aperture { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
body.is-switching .work-record:not(.is-crossover) { opacity: 0; transform: translateY(0.65rem); }
body.is-arriving .work-record { animation: record-arrive var(--motion-standard) var(--ease-standard) both; }
@keyframes record-arrive { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: translateY(0); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.proof-surface { margin-top: var(--space-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  color: var(--proof-ink);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.proof-toggle span:last-child { color: var(--accent-bright); }
.proof-toggle:hover { color: var(--accent-bright); }
.proof-panel { padding: 0 0 var(--space-4); }
.proof-panel__header { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3) var(--space-6); padding: var(--space-2) 0 var(--space-4); }
.proof-status, .proof-disclosure, .system-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  line-height: 1.65;
  letter-spacing: 0.06em;
}
.proof-status { color: var(--accent-bright); text-transform: uppercase; }
.proof-panel h3 { max-width: 25ch; margin: var(--space-2) 0 0; color: var(--proof-ink); font-size: clamp(1.45rem, 2vw, 2.35rem); letter-spacing: -0.06em; line-height: 0.98; }
.proof-disclosure { max-width: 53rem; align-self: end; color: var(--proof-muted); }
.proof-diagram { border: 1px solid var(--proof-grid); background: var(--proof-surface); }
.proof-diagram__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--proof-node-min), 1fr));
  gap: var(--space-2);
  min-height: var(--proof-min-height);
  padding: var(--space-4);
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--proof-grid) 45%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--proof-grid) 45%, transparent) 1px, transparent 1px);
  background-size: var(--proof-grid-unit) var(--proof-grid-unit);
}
.proof-diagram__map::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: var(--space-4);
  left: var(--space-4);
  height: var(--proof-line);
  background: linear-gradient(90deg, transparent, var(--proof-signal), transparent);
  content: "";
}
.proof-node {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  min-width: 0;
  min-height: 8rem;
  padding: var(--space-3);
  border: 1px solid var(--proof-grid);
  border-left: var(--proof-line) solid var(--proof-muted);
  color: var(--proof-muted);
  background: color-mix(in srgb, var(--proof-surface) 82%, transparent);
  cursor: pointer;
  text-align: left;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.proof-node:hover { border-color: var(--proof-signal); color: var(--proof-ink); transform: translateY(-0.15rem); }
.proof-node.is-active { border-color: var(--proof-signal); border-left-color: var(--proof-signal); color: var(--proof-ink); background: color-mix(in srgb, var(--proof-wash) 44%, var(--proof-surface)); }
.proof-node__index { display: block; margin-bottom: auto; color: var(--proof-signal); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.1em; }
.proof-node__label { display: block; font-size: var(--type-small); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.proof-readout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--proof-grid); background: var(--proof-raised); }
.proof-readout__index { color: var(--proof-signal); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.1em; }
.proof-readout h4 { margin: 0; color: var(--proof-ink); font-size: 1.15rem; letter-spacing: -0.03em; }
.proof-readout p { max-width: 58rem; margin: var(--space-1) 0 0; color: var(--proof-muted); font-size: var(--type-small); }
.proof-action { display: inline-block; margin-top: var(--space-3); color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.09em; text-transform: uppercase; }

.proof-diagram--coverage-atlas .proof-diagram__map {
  grid-template-columns: repeat(2, minmax(var(--proof-node-min), 1fr));
  min-height: calc(var(--proof-min-height) + var(--space-5));
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--proof-signal) 20%, transparent) 0 0.4rem, transparent 0.45rem),
    radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--proof-signal) 14%, transparent) 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 45% 72%, color-mix(in srgb, var(--proof-signal) 18%, transparent) 0 0.45rem, transparent 0.5rem),
    linear-gradient(90deg, color-mix(in srgb, var(--proof-grid) 45%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--proof-grid) 45%, transparent) 1px, transparent 1px);
  background-size: auto, auto, auto, var(--proof-grid-unit) var(--proof-grid-unit), var(--proof-grid-unit) var(--proof-grid-unit);
}
.proof-diagram--coverage-atlas .proof-diagram__map::before { top: 48%; height: 12rem; border: 1px solid color-mix(in srgb, var(--proof-signal) 55%, transparent); background: transparent; transform: rotate(-14deg); }
.proof-diagram--coverage-atlas .proof-node:nth-child(2), .proof-diagram--coverage-atlas .proof-node:nth-child(3) { transform: translateY(var(--space-4)); }
.proof-diagram--coverage-atlas .proof-node.is-active { transform: translateY(-0.15rem); }

.proof-diagram--launch-loop .proof-diagram__map, .proof-diagram--operating-cadence .proof-diagram__map, .proof-diagram--handoff-model .proof-diagram__map {
  grid-template-columns: repeat(2, minmax(var(--proof-node-min), 1fr));
}
.proof-diagram--launch-loop .proof-diagram__map::before, .proof-diagram--operating-cadence .proof-diagram__map::before, .proof-diagram--handoff-model .proof-diagram__map::before {
  top: 50%;
  right: 28%;
  left: 28%;
  height: 8rem;
  border: 1px solid color-mix(in srgb, var(--proof-signal) 60%, transparent);
  border-radius: 50%;
  background: transparent;
}

.proof-diagram--adoption-walkthrough .proof-diagram__map, .proof-diagram--control-map .proof-diagram__map, .proof-diagram--detection-pipeline .proof-diagram__map, .proof-diagram--http-triage .proof-diagram__map, .proof-diagram--incident-timeline .proof-diagram__map, .proof-diagram--triage-ladder .proof-diagram__map {
  grid-template-columns: repeat(4, minmax(var(--proof-node-min), 1fr));
}
.proof-diagram--adoption-walkthrough .proof-diagram__map { grid-template-columns: repeat(6, minmax(var(--proof-node-min), 1fr)); }
.proof-diagram--adoption-walkthrough .proof-node:nth-child(even), .proof-diagram--incident-timeline .proof-node:nth-child(even) { transform: translateY(var(--space-4)); }
.proof-diagram--adoption-walkthrough .proof-node.is-active, .proof-diagram--incident-timeline .proof-node.is-active { transform: translateY(-0.15rem); }
.proof-diagram--triage-ladder .proof-diagram__map { align-items: end; }
.proof-diagram--triage-ladder .proof-node:nth-child(2) { min-height: 10rem; }
.proof-diagram--triage-ladder .proof-node:nth-child(3) { min-height: 12rem; }
.proof-diagram--triage-ladder .proof-node:nth-child(4) { min-height: 14rem; }

.proof-diagram--scorecard-preview .proof-diagram__map, .proof-diagram--service-triad .proof-diagram__map {
  grid-template-columns: repeat(3, minmax(var(--proof-node-min), 1fr));
}
.proof-diagram--scorecard-preview .proof-diagram__map::before, .proof-diagram--service-triad .proof-diagram__map::before {
  top: 28%;
  right: 22%;
  left: 22%;
  height: 10rem;
  border: 1px solid color-mix(in srgb, var(--proof-signal) 55%, transparent);
  border-radius: 50%;
  background: transparent;
}
.proof-diagram--scorecard-preview .proof-node:nth-child(2), .proof-diagram--service-triad .proof-node:nth-child(2) { transform: translateY(var(--space-5)); }
.proof-diagram--scorecard-preview .proof-node.is-active, .proof-diagram--service-triad .proof-node.is-active { transform: translateY(-0.15rem); }

.proof-diagram--decision-model .proof-diagram__map, .proof-diagram--safeguard-map .proof-diagram__map, .proof-diagram--workflow .proof-diagram__map {
  grid-template-columns: repeat(4, minmax(var(--proof-node-min), 1fr));
}
.proof-diagram--detection-pipeline .proof-node, .proof-diagram--http-triage .proof-node, .proof-diagram--incident-timeline .proof-node, .proof-diagram--triage-ladder .proof-node, .proof-diagram--handoff-model .proof-node {
  border-left-color: var(--proof-technical);
}
.proof-diagram--detection-pipeline .proof-node.is-active, .proof-diagram--http-triage .proof-node.is-active, .proof-diagram--incident-timeline .proof-node.is-active, .proof-diagram--triage-ladder .proof-node.is-active, .proof-diagram--handoff-model .proof-node.is-active {
  border-color: var(--proof-technical);
  background: color-mix(in srgb, var(--proof-technical) 16%, var(--proof-surface));
}
body[data-mode="technical"] .proof-status, body[data-mode="technical"] .proof-node__index, body[data-mode="technical"] .proof-readout__index { color: var(--proof-technical); }

.proof-gallery { margin-top: var(--space-4); border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.proof-gallery summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}
.proof-gallery summary::-webkit-details-marker { display: none; }
.proof-gallery summary span:last-child { color: var(--accent-bright); }
.proof-gallery summary::after { color: var(--accent); content: "+"; font-size: 1rem; }
.proof-gallery[open] summary { border-bottom: 1px solid var(--line); }
.proof-gallery[open] summary::after { content: "Close"; font-size: var(--type-tiny); }
.proof-gallery__body { padding: var(--space-4); }
.proof-gallery__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.proof-gallery__header > p { max-width: 48rem; margin: 0; color: var(--ink-soft); font-size: var(--type-small); }
.proof-gallery__controls { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--space-2); flex: none; }
.proof-gallery__controls button {
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.proof-gallery__controls button:hover { border-color: var(--accent); color: var(--surface); background: var(--accent); }
.proof-gallery__position { min-width: 4rem; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--type-tiny); text-align: center; }
.proof-gallery__track {
  display: grid;
  grid-auto-columns: min(90%, 68rem);
  grid-auto-flow: column;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 0 var(--space-3);
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--accent) var(--surface-raised);
  scrollbar-width: thin;
}
.proof-gallery__slide { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--page); scroll-snap-align: start; }
.proof-gallery__slide[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.proof-gallery__image-link { display: grid; height: clamp(22rem, 52vw, 42rem); place-items: center; padding: var(--space-2); background: linear-gradient(135deg, var(--surface-raised), var(--page)); }
.proof-gallery__image-link img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.proof-gallery__slide figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 5rem; padding: var(--space-3); border-top: 1px solid var(--line); background: var(--surface); }
.proof-gallery__slide figcaption > span, .proof-gallery__slide figcaption > a { color: var(--accent-bright); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.07em; text-transform: uppercase; }
.proof-gallery__slide figcaption p { margin: 0; color: var(--ink-soft); font-size: var(--type-small); }
.proof-gallery__slide figcaption a { white-space: nowrap; }

.studio-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio-select {
  display: grid;
  gap: var(--space-2);
  min-height: 6.5rem;
  padding: var(--space-3);
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}
.studio-select:last-child { border-right: 0; }
.studio-select > span { color: var(--proof-technical); }
.studio-select:hover, .studio-select.is-active { color: var(--proof-ink); background: color-mix(in srgb, var(--proof-technical) 11%, transparent); }
.studio-readout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-6); padding-top: var(--space-5); }
.studio-readout__header h3 { max-width: 25ch; margin: var(--space-3) 0 0; color: var(--proof-ink); font-size: clamp(1.65rem, 2.4vw, 2.7rem); letter-spacing: -0.065em; line-height: 0.98; }
.studio-readout__header > p:last-child { max-width: 39rem; margin: var(--space-3) 0 0; color: var(--ink-soft); }
.studio-status { margin: var(--space-4) 0 0; color: var(--proof-technical); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.08em; text-transform: uppercase; }
.studio-evidence-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.studio-evidence-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--proof-grid); background: color-mix(in srgb, var(--proof-surface) 88%, transparent); }
.studio-evidence-list li:last-child { border-bottom: 1px solid var(--proof-grid); }
.studio-evidence-list span { color: var(--proof-technical); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.1em; }
.studio-evidence-list h4 { margin: 0; color: var(--proof-ink); font-size: 1.05rem; letter-spacing: -0.03em; }
.studio-evidence-list p { margin: var(--space-1) 0 0; color: var(--proof-muted); font-size: var(--type-small); line-height: 1.45; }

.systems-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  min-height: 5rem;
  padding: var(--space-3);
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.system-select:last-child { border-right: 0; }
.system-select span { color: var(--signal); }
.system-select:hover, .system-select.is-active { color: var(--ink); background: color-mix(in srgb, var(--signal) 11%, transparent); }
.system-readout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-6); padding: var(--space-5) 0 0; }
.system-readout__header h3 { max-width: 25ch; margin: var(--space-3) 0 0; font-size: clamp(1.65rem, 2.4vw, 2.7rem); letter-spacing: -0.065em; line-height: 0.98; }
.system-readout__header > p:not(.record-label):not(.system-status) { max-width: 40rem; margin: var(--space-3) 0 0; color: var(--ink-soft); }
.system-status { margin-top: var(--space-4); color: var(--signal); }
.system-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--proof-grid); border-left: 1px solid var(--proof-grid); background: var(--proof-surface); }
.system-node { min-height: 11rem; padding: var(--space-4); border-right: 1px solid var(--proof-grid); border-bottom: 1px solid var(--proof-grid); }
.system-node > span { color: var(--signal); font-family: var(--font-mono); font-size: var(--type-tiny); letter-spacing: 0.1em; }
.system-node h4 { margin: var(--space-4) 0 0; color: var(--proof-ink); font-size: 1.15rem; letter-spacing: -0.035em; }
.system-node p { margin: var(--space-2) 0 0; color: var(--proof-muted); font-size: var(--type-small); line-height: 1.45; }

@media (max-width: 54rem) {
  .masthead { min-height: 4.75rem; }
  .wordmark span:last-child { display: none; }
  .site-nav { gap: 1rem; margin-right: 0; font-size: 0.6rem; }
  .site-nav a:nth-child(n+3) { display: none; }
  .mode-control { top: auto; right: 1rem !important; bottom: 1rem; left: auto !important; width: auto; max-width: calc(100vw - 2rem); padding: 0.85rem 0.95rem; }
  .mode-control__label { white-space: nowrap; }
  .hero { min-height: auto; grid-template-columns: 1fr; align-items: start; padding-top: var(--space-5); }
  .hero__copy { padding-top: 0; }
  .hero__title { font-size: clamp(4.3rem, 20vw, 6.5rem); }
  .hero__body { max-width: 18ch; font-size: 1.65rem; }
  .hero__portrait { right: auto; bottom: auto; grid-column: 1; grid-row: 2; width: 100%; min-height: 0; height: auto; opacity: 1; }
  .about-photo { width: 100%; height: auto; object-fit: contain; object-position: center bottom; }
  body[data-mode="technical"] .hero__portrait { aspect-ratio: 4 / 5; }
  body[data-mode="technical"] .about-photo { height: 100%; object-fit: cover; object-position: center; }
  .hero__side { right: auto; bottom: calc(var(--space-7) + var(--space-3)); left: var(--space-3); align-self: auto; justify-self: auto; padding: var(--space-3); text-align: left; }
  .section-header { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "intro"; gap: var(--space-3); }
  .section--atlas .section-header, .section--adoption .section-header { grid-template-columns: 1fr; }
  .section-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .work-details__content, .credentials-layout { grid-template-columns: 1fr; }
  .about-copy { margin-left: 0; }
  .atlas-layout, .adoption-layout { grid-template-columns: 1fr; }
  .atlas-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-controls button { grid-template-columns: 1fr; }
  .atlas-controls button > span { grid-row: auto; }
  .atlas-stage, .atlas-stage svg { height: auto; min-height: 25rem; }
  .adoption-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--line); }
  .adoption-controls button { grid-template-columns: auto minmax(0, 1fr); border-right: 1px solid var(--line); }
  .adoption-readout { min-height: auto; }
  .credential-entry { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .credential-thumbnail { width: 7.5rem; }
  .credential-actions { grid-column: 2; align-items: start; }
  .credential-actions { align-items: start; }
  .contact { grid-template-columns: 1fr; }
  .contact-link { justify-self: start; }
  .site-footer { flex-direction: column; }
  .proof-panel__header, .system-readout { grid-template-columns: 1fr; gap: var(--space-3); }
  .proof-gallery__header { align-items: flex-start; flex-direction: column; }
  .proof-gallery__track { grid-auto-columns: 94%; }
  .proof-gallery__image-link { height: clamp(18rem, 78vw, 28rem); }
  .proof-gallery__slide figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .proof-gallery__slide figcaption > a { grid-column: 2; }
  .proof-diagram__map,
  .proof-diagram--coverage-atlas .proof-diagram__map,
  .proof-diagram--launch-loop .proof-diagram__map,
  .proof-diagram--operating-cadence .proof-diagram__map,
  .proof-diagram--handoff-model .proof-diagram__map,
  .proof-diagram--adoption-walkthrough .proof-diagram__map,
  .proof-diagram--control-map .proof-diagram__map,
  .proof-diagram--detection-pipeline .proof-diagram__map,
  .proof-diagram--http-triage .proof-diagram__map,
  .proof-diagram--incident-timeline .proof-diagram__map,
  .proof-diagram--triage-ladder .proof-diagram__map,
  .proof-diagram--scorecard-preview .proof-diagram__map,
  .proof-diagram--service-triad .proof-diagram__map,
  .proof-diagram--decision-model .proof-diagram__map,
  .proof-diagram--safeguard-map .proof-diagram__map,
  .proof-diagram--workflow .proof-diagram__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-diagram--adoption-walkthrough .proof-diagram__map { grid-template-columns: repeat(6, minmax(8.5rem, 1fr)); overflow-x: auto; }
  .proof-node { min-height: 7rem; }
  .proof-diagram--coverage-atlas .proof-node:nth-child(2),
  .proof-diagram--coverage-atlas .proof-node:nth-child(3),
  .proof-diagram--adoption-walkthrough .proof-node:nth-child(even),
  .proof-diagram--incident-timeline .proof-node:nth-child(even),
  .proof-diagram--scorecard-preview .proof-node:nth-child(2),
  .proof-diagram--service-triad .proof-node:nth-child(2) { transform: none; }
  .proof-diagram--triage-ladder .proof-node:nth-child(2),
  .proof-diagram--triage-ladder .proof-node:nth-child(3),
  .proof-diagram--triage-ladder .proof-node:nth-child(4) { min-height: 7rem; }
  .studio-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-select { min-height: 5rem; border-bottom: 1px solid var(--line); }
  .studio-select:nth-child(even) { border-right: 0; }
  .studio-readout { grid-template-columns: 1fr; gap: var(--space-3); }
  .systems-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-select:nth-child(2) { border-right: 0; }
  .system-select:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .system-map { grid-template-columns: 1fr; }
  .system-node { min-height: auto; }
}

@media (max-width: 38rem) {
  .atlas-controls, .adoption-controls { grid-template-columns: 1fr; }
  .atlas-controls button, .adoption-controls button { min-height: 0; }
  .atlas-stage, .atlas-stage svg { min-height: 22rem; }
  .adoption-readout { padding: var(--space-4); }
  .adoption-readout dl { grid-template-columns: 1fr; }
  .credential-entry { grid-template-columns: 1fr; }
  .credential-thumbnail { width: min(100%, 13rem); }
  .credential-actions { grid-column: 1; flex-direction: row; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .proof-gallery__track { scroll-behavior: auto; }
}