:root {
  color-scheme: light dark;
  --color-canvas: light-dark(#f4f1e9, #0b1014);
  --color-surface: light-dark(#fffdf7, #11181e);
  --color-text: light-dark(#142027, #edf2ef);
  --color-text-muted: light-dark(#647077, #a4afb0);
  --color-border: light-dark(#c5cbc6, #303a40);
  --color-signal: light-dark(#d95f36, #ed7148);
  --color-signal-text: light-dark(#b64929, #ed7148);
  --color-signal-strong: light-dark(#8f351e, #ff906a);
  --color-on-signal: light-dark(#ffffff, #0b1014);
  --color-focus: light-dark(#8f351e, #ff906a);
  --max-width: 82rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--color-text); color: var(--color-canvas); }
.skip-link:focus { top: 1rem; }

.site-header { width: min(100%, var(--max-width)); margin: 0 auto; min-height: 4.5rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--color-border); }
.wordmark { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 650; text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.wordmark span { color: var(--color-signal-text); }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.5rem; }
nav a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-text-muted); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; text-decoration-thickness: 1px; text-underline-offset: .35rem; }
nav a:hover { color: var(--color-text); }

main, .site-footer { width: min(100%, var(--max-width)); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .75fr); position: relative; min-height: 40rem; border-bottom: 1px solid var(--color-border); }
.hero-copy { padding: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5.5rem) 3.5rem 2rem; display: flex; flex-direction: column; justify-content: flex-start; }
.eyebrow, .section-index, .map-index, .case-context, .case-status, .expertise-index { margin: 0; color: var(--color-signal-strong); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 1.25rem 0 1.5rem; max-width: 13ch; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.hero-lede { margin: 0 0 1rem; max-width: 35rem; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.hero-support { margin: 0; max-width: 70ch; color: var(--color-text-muted); font-size: 1.0625rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1rem; border: 1px solid var(--color-text); font-weight: 650; text-decoration: none; }
.button-primary { background: var(--color-text); color: var(--color-canvas); }
.button-secondary { border-color: var(--color-border); }
.button:hover { border-color: var(--color-signal-strong); }

.hero-map { position: relative; min-height: 36rem; overflow: hidden; border-left: 1px solid var(--color-border); color: var(--color-border); }
.hero-map svg { width: 100%; height: 100%; display: block; }
.map-index { position: absolute; top: 2rem; left: 2rem; z-index: 1; padding: .25rem .4rem; background: var(--color-canvas); color: var(--color-text-muted); }
.grid-field { opacity: .65; }
.orbit { fill: none; stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 5 7; opacity: .75; }
.origin { fill: var(--color-canvas); stroke: var(--color-text); stroke-width: 3; }
.journey { fill: none; stroke: var(--color-signal); stroke-width: 4; }
.checkpoint { fill: var(--color-canvas); stroke: var(--color-text); stroke-width: 2; }
.destination { fill: var(--color-signal); }
.map-label { position: absolute; padding: .2rem .35rem; background: var(--color-canvas); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.map-start { left: 12%; bottom: 25%; color: var(--color-text-muted); }
.map-end { right: 8%; top: 38%; color: var(--color-text); }
.method { grid-column: 1 / -1; margin: 0; padding: 1.25rem 2rem; display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; border-top: 1px solid var(--color-border); list-style: none; color: var(--color-text-muted); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.method li:not(:last-child)::after { content: "→"; margin-left: 1.5rem; color: var(--color-signal); }

.section { padding: clamp(4rem, 8vw, 7rem) 2rem; border-bottom: 1px solid var(--color-border); }
.approach, .about { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); }
.section-heading h2 { margin: 1rem 0 0; max-width: 15ch; letter-spacing: -.025em; }
.large-copy { margin-top: 0; max-width: 30ch; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.35; letter-spacing: -.025em; }
.approach-copy > p:not(.large-copy), .about-copy > p:not(.large-copy) { max-width: 70ch; color: var(--color-text-muted); }
.principles { margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.principles li { padding: 1rem 0; display: grid; grid-template-columns: 3rem 1fr; border-bottom: 1px solid var(--color-border); }
.principles span { color: var(--color-signal-strong); font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: .8125rem; }

.work-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); align-items: end; gap: 3rem; margin-bottom: 3rem; }
.work-heading > p { color: var(--color-text-muted); }
.case-list { border-top: 1px solid var(--color-border); }
.case-card { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 12rem; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--color-border); }
.case-featured { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.case-number { color: var(--color-signal-strong); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.case-body h3 { margin: .65rem 0 .8rem; max-width: 30ch; letter-spacing: -.02em; }
.case-body > p:not(.case-context) { max-width: 70ch; color: var(--color-text-muted); }
.case-lesson { padding-left: 1rem; border-left: 3px solid var(--color-signal); }
.case-link { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--color-text); font-weight: 650; text-underline-offset: .3rem; }
.case-link span { color: var(--color-signal-strong); }
.case-status { align-self: start; color: var(--color-text-muted); text-align: right; letter-spacing: .04em; }
.case-status-ready { color: var(--color-signal-strong); }

.case-page { width: min(100%, 68rem); margin: 0 auto; }
.case-page h1, .case-page h2, .case-page h3, .case-page p, .case-page li, .case-page a { overflow-wrap: anywhere; }
.case-hero { padding: clamp(4rem, 9vw, 8rem) 2rem clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--color-border); }
.case-hero h1 { max-width: 15ch; }
.case-summary { max-width: 70ch; margin: 0; color: var(--color-text-muted); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.case-meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-border); list-style: none; color: var(--color-text-muted); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.case-section { display: grid; grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr); gap: clamp(2rem, 7vw, 6rem); padding: clamp(3rem, 7vw, 6rem) 2rem; border-bottom: 1px solid var(--color-border); }
.case-section > * { min-width: 0; }
.case-section h2 { margin: .65rem 0 0; letter-spacing: -.025em; }
.case-narrative { max-width: 70ch; }
.case-narrative > :first-child { margin-top: 0; }
.case-narrative p, .case-narrative li { color: var(--color-text-muted); }
.case-narrative strong { color: var(--color-text); }
.case-narrative blockquote { margin: 2rem 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 3px solid var(--color-signal); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.35; }
.case-narrative blockquote p { margin: 0; color: var(--color-text); }
.evidence-note { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.evidence-note h3 { margin: 0 0 .5rem; font-size: 1rem; }
.evidence-note p { margin: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2rem 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.metric-card { min-height: 11rem; padding: 1.5rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.metric-value { margin: 0 0 .5rem; color: var(--color-signal-strong); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; font-weight: 650; }
.metric-card p:last-child { margin-bottom: 0; color: var(--color-text-muted); }
.architecture-flow { margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.architecture-flow li { padding: 1rem 0; display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; border-bottom: 1px solid var(--color-border); }
.architecture-flow strong { color: var(--color-signal-strong); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.caveat { margin-top: 2rem; padding: 1.5rem; border: 1px dashed var(--color-border); }
.caveat h3 { margin: 0 0 .5rem; font-size: 1rem; }
.caveat p { margin: 0; color: var(--color-text-muted); }
.system-map { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.system-map svg { width: 100%; height: auto; display: block; }
.system-map .map-line { stroke: var(--color-text-muted); stroke-width: 2; fill: none; }
.system-map .map-node { fill: var(--color-canvas); stroke: var(--color-text); stroke-width: 2; }
.system-map .map-output { fill: var(--color-signal); stroke: var(--color-signal); }
.system-map text { fill: var(--color-text); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.system-map figcaption { margin-top: 1rem; color: var(--color-text-muted); font-size: .875rem; }
.back-link { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--color-text-muted); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; text-underline-offset: .3rem; }

.expertise-grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.expertise-grid article { min-height: 16rem; padding: 2rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.expertise-grid h3 { margin: 3rem 0 .75rem; font-size: 1.5rem; letter-spacing: -.025em; }
.expertise-grid article > p:last-child { color: var(--color-text-muted); }

.contact-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.5rem; }
.contact-links a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 650; text-underline-offset: .3rem; }
.contact-links span { color: var(--color-signal-strong); }
.site-footer { padding: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--color-text-muted); font: .8125rem/1.5 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.site-footer p { margin: 0; }

@media (max-width: 65rem) {
  .case-section { grid-template-columns: 1fr; }
}

@media (max-width: 55rem) {
  .site-header { align-items: flex-start; padding-block: 1.25rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-right: 2rem; }
  .hero-map { min-height: 30rem; border-left: 0; border-top: 1px solid var(--color-border); }
  .approach, .about { grid-template-columns: 1fr; }
  .work-heading { grid-template-columns: 1fr; }
  .case-card { grid-template-columns: 3rem minmax(0, 1fr); }
  .case-status { grid-column: 2; text-align: left; }
  .case-section { grid-template-columns: 1fr; }
}

@media (max-width: 38rem) {
  .site-header { display: block; }
  nav { margin-top: 1rem; justify-content: flex-start; gap: .75rem 1.25rem; }
  .hero { min-height: 0; }
  .hero-copy, .section { padding-inline: 1.25rem; }
  .method { padding-inline: 1.25rem; }
  .method li:not(:last-child)::after { margin-left: .8rem; }
  .case-card { grid-template-columns: 1fr; gap: .75rem; }
  .case-status { grid-column: 1; }
  .expertise-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .architecture-flow li { grid-template-columns: 1fr; gap: .25rem; }
  .site-footer { display: block; }
  .site-footer p + p { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}