:root {
  --ink: #14201c;
  --paper: #f4f0e7;
  --surface: #fffdf7;
  --surface-2: #ebe5d8;
  --muted: #66716b;
  --rule: #b8b6aa;
  --green: #17715a;
  --green-soft: #d9eee5;
  --blue: #2f5f91;
  --blue-soft: #dce8f4;
  --amber: #9b5b18;
  --amber-soft: #f3e4c6;
  --red: #9b3f36;
  --red-soft: #f1d9d4;
  --purple: #664d89;
  --max: 92rem;
  --font-ui: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-num: ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="dark"] {
  --ink: #edf3ed;
  --paper: #111714;
  --surface: #18201c;
  --surface-2: #232d28;
  --muted: #aab6af;
  --rule: #49564f;
  --green: #6cc7a8;
  --green-soft: #173b2f;
  --blue: #8ab7e2;
  --blue-soft: #1b3044;
  --amber: #e1ad6d;
  --amber-soft: #3c2b17;
  --red: #e59a91;
  --red-soft: #452522;
  --purple: #c0a7e2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); }
a { color: inherit; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: .7rem 1rem; background: var(--ink); color: var(--paper); font-family: var(--font-ui); }
.skip-link:focus { top: 1rem; }

.site-nav { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 3.45rem; padding: 0 max(1rem, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); font-family: var(--font-ui); }
.brand { font-weight: 850; font-size: .7rem; letter-spacing: .06em; text-decoration: none; }
.nav-links { display: flex; justify-content: center; gap: 1.15rem; }
.nav-links a { color: var(--muted); font-size: .68rem; font-weight: 750; text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font: 750 .7rem var(--font-ui); }
.theme-button { width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }

.hero { min-height: 88vh; display: flex; align-items: center; padding: 7rem max(1.25rem, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--rule); background: var(--surface); }
.hero__inner { width: 100%; }
.eyebrow, .kicker { margin: 0; color: var(--green); font: 850 .67rem/1.3 var(--font-ui); letter-spacing: .065em; text-transform: uppercase; }
.hero h1 { max-width: 76rem; margin: 1.2rem 0 1.6rem; font-size: clamp(3.8rem, 8.4vw, 8.6rem); line-height: .89; letter-spacing: -.065em; font-weight: 500; }
.hero h1 em { color: var(--green); font-weight: 400; }
.hero__dek { max-width: 52rem; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.9vw, 1.55rem); line-height: 1.45; }
.hero__answer { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; max-width: 70rem; margin-top: 4rem; padding-top: 1rem; border-top: 4px solid var(--ink); }
.hero__answer span { color: var(--green); font: 850 .66rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .055em; }
.hero__answer p { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.3; }
.hero__caveat { max-width: 60rem; margin: 1.5rem 0 0 12rem; color: var(--muted); font: 650 .78rem/1.5 var(--font-ui); }

.section { padding: 7rem max(1.25rem, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--rule); }
.section-heading { max-width: 74rem; margin-bottom: 3.5rem; }
.section-heading--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5rem; max-width: none; align-items: end; }
.section-heading h2 { margin: .8rem 0 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .97; letter-spacing: -.05em; font-weight: 500; }
.section-heading--split > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }

.section--ideal { background: var(--paper); }
.ideal-spine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ideal-spine article { min-height: 16rem; padding: 1.25rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); }
.ideal-spine article > span { color: var(--green); font: 850 .66rem var(--font-num); }
.ideal-spine h3 { margin: 3.7rem 0 .8rem; font-size: 1.35rem; line-height: 1.2; }
.ideal-spine p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.ideal-spine__outcome { background: var(--green-soft) !important; }
.framework-note { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 4px solid var(--ink); }
.framework-note h3 { margin: 0; font-size: 1.65rem; }
.framework-note p { margin: 0; color: var(--muted); line-height: 1.6; }
.framework-note div { grid-column: 2; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.framework-note a { color: var(--green); font: 750 .73rem var(--font-ui); }

.section--scale { background: var(--surface); }
.maturity-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); list-style: none; }
.maturity-scale li { min-height: 16rem; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.maturity-scale li > span { display: block; font: 500 3rem/1 var(--font-num); }
.maturity-scale h3 { margin: 3.5rem 0 .7rem; font: 850 .9rem/1.25 var(--font-ui); }
.maturity-scale p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.level-0 { --level-bg: var(--surface-2); --level-fg: var(--muted); }
.level-1 { --level-bg: var(--red-soft); --level-fg: var(--red); }
.level-2 { --level-bg: var(--amber-soft); --level-fg: var(--amber); }
.level-3 { --level-bg: var(--blue-soft); --level-fg: var(--blue); }
.level-4 { --level-bg: var(--green-soft); --level-fg: var(--green); }
.level-5 { --level-bg: var(--ink); --level-fg: var(--paper); }
.maturity-scale li { background: var(--level-bg); color: var(--level-fg); }
.maturity-scale li p { color: currentColor; opacity: .82; }
.reading-rule { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.reading-rule strong { color: var(--green); font: 850 .7rem var(--font-ui); text-transform: uppercase; }
.reading-rule p { margin: 0; color: var(--muted); }

.section--current { background: var(--paper); }
.score-key { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1rem; color: var(--muted); font: 750 .67rem var(--font-ui); }
.score-key span { display: inline-flex; gap: .45rem; align-items: center; }
.score-key i { width: 1rem; height: .6rem; border: 1px solid var(--rule); }
.key-current { background: var(--green); }
.key-gap { background: var(--surface-2); }
.score-key b { color: var(--ink); font-family: var(--font-num); }
.scorecard { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--surface); }
.scorecard__head, .score-row { display: grid; grid-template-columns: 1.05fr 1fr minmax(6rem, .22fr) 1.3fr; }
.scorecard__head > *, .score-row > * { min-width: 0; margin: 0; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.scorecard__head span { color: var(--muted); font: 850 .62rem var(--font-ui); text-transform: uppercase; letter-spacing: .055em; }
.score-row h3 { font-size: 1rem; line-height: 1.3; }
.score-row > strong { color: var(--green); font: 850 .8rem var(--font-num); text-align: center; }
.score-row > p { color: var(--muted); font-size: .78rem; line-height: 1.52; }
.evidence-links { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .55rem; color: var(--ink); font: 750 .59rem/1.4 var(--font-ui); }
.evidence-links a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .16rem; }
.score-row--outcome { background: var(--green-soft); }
.score-meter { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; align-items: center; }
.score-meter span { height: 1.35rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: var(--surface-2); color: var(--muted); font: 750 .58rem var(--font-num); }
.score-meter b { position: absolute; right: 1rem; bottom: .05rem; padding: .15rem .3rem; background: var(--surface); color: var(--ink); font: 850 .62rem var(--font-num); }
.score-1 span:nth-child(-n+1), .score-2 span:nth-child(-n+2), .score-3 span:nth-child(-n+3), .score-4 span:nth-child(-n+4), .score-5 span:nth-child(-n+5) { background: var(--green); border-color: var(--green); color: var(--paper); }
.target-4 span:nth-child(4), .target-5 span:nth-child(5) { outline: 2px solid var(--ink); outline-offset: -3px; }

.section--contexts { background: var(--surface); }
.context-table { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.context-table__head, .context-table article { display: grid; grid-template-columns: .75fr 1.75fr .8fr .9fr; }
.context-table__head > *, .context-table article > * { min-width: 0; margin: 0; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.context-table__head span { color: var(--muted); font: 850 .62rem var(--font-ui); text-transform: uppercase; letter-spacing: .055em; }
.context-table h3 { font-size: .95rem; line-height: 1.3; }
.context-table p { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.context-table article p:last-child { color: var(--red); font-family: var(--font-ui); font-weight: 700; }

.section--history { background: var(--paper); }
.history-key { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: 1.2rem; }
.history-key span { width: 2rem; height: 1.65rem; display: grid; place-items: center; background: var(--level-bg); color: var(--level-fg); font: 850 .65rem var(--font-num); }
.history-key p { margin: 0 0 0 1rem; color: var(--muted); font: 650 .7rem var(--font-ui); }
.history-lanes { border-top: 1px solid var(--rule); }
.history-lane { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: stretch; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.history-lane h3 { margin: 0; padding: .65rem .8rem 0 0; font-size: .88rem; line-height: 1.3; }
.history-lane > div { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .25rem; }
.history-lane > div span { min-width: 0; min-height: 3.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; background: var(--level-bg); color: var(--level-fg); font: 850 1rem var(--font-num); }
.history-lane > div b { font: 750 .55rem var(--font-num); opacity: .8; }
.history-lane .target { margin-left: .7rem; outline: 2px solid var(--ink); outline-offset: -2px; }
.history-lane--outcome { background: color-mix(in srgb, var(--green-soft) 58%, transparent); }
.milestone-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.milestone-notes article { min-height: 15rem; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); }
.milestone-notes span { color: var(--green); font: 850 .62rem var(--font-num); }
.milestone-notes h3 { margin: 3rem 0 .7rem; font-size: 1.12rem; line-height: 1.25; }
.milestone-notes p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.milestone-sources { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: 1rem; }
.milestone-sources a { color: var(--green); font: 750 .6rem/1.4 var(--font-ui); text-underline-offset: .16rem; }

.section--forecast { background: var(--surface); }
.forecast-list { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.forecast-list__head, .forecast-list article { display: grid; grid-template-columns: .55fr 1.7fr .9fr .6fr; }
.forecast-list__head > *, .forecast-list article > * { min-width: 0; margin: 0; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.forecast-list__head span { color: var(--muted); font: 850 .62rem var(--font-ui); text-transform: uppercase; letter-spacing: .055em; }
.forecast-list time { color: var(--green); font: 850 .72rem var(--font-num); }
.forecast-list article > p { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.forecast-sources { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .65rem; color: var(--ink); font: 750 .59rem/1.4 var(--font-ui); }
.forecast-sources a { color: var(--green); text-underline-offset: .16rem; }
.forecast-move { display: flex; flex-direction: column; gap: .5rem; background: var(--blue-soft); color: var(--blue); }
.forecast-move span { font: 750 .62rem var(--font-ui); }
.forecast-move b { font: 850 1.2rem var(--font-num); }
.forecast-move small { font: 650 .62rem var(--font-ui); }
.forecast-move--confidence { background: var(--amber-soft); color: var(--amber); }
.forecast-move--outcome { background: var(--green-soft); color: var(--green); }
.forecast-prob { display: flex; flex-direction: column; gap: .35rem; }
.forecast-prob strong { color: var(--ink); font: 500 1.8rem var(--font-num); }
.forecast-prob span { color: var(--muted); font: 650 .6rem var(--font-ui); }
.forecast-conclusion { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 4px solid var(--ink); }
.forecast-conclusion strong { color: var(--green); font: 850 .7rem var(--font-ui); text-transform: uppercase; }
.forecast-conclusion p { margin: 0; font-size: 1.25rem; line-height: 1.4; }

.section--sources { background: var(--paper); }
.source-map { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.source-map__head, .source-map article { display: grid; grid-template-columns: .75fr 1.35fr 1.25fr 1.15fr; }
.source-map__head > *, .source-map article > * { min-width: 0; margin: 0; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.source-map__head span { color: var(--muted); font: 850 .62rem var(--font-ui); text-transform: uppercase; letter-spacing: .055em; }
.source-map h3 { font-size: .95rem; line-height: 1.3; }
.source-map p { color: var(--muted); font-size: .76rem; line-height: 1.52; }
.source-map article > p:last-child { color: var(--red); }
.source-map .source-links a { display: inline-block; margin: 0 .65rem .45rem 0; color: var(--green); font: 750 .63rem/1.4 var(--font-ui); text-underline-offset: .16rem; }
.source-companions { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 4px solid var(--ink); }
.source-companions strong { color: var(--green); font: 850 .7rem var(--font-ui); text-transform: uppercase; }
.source-companions p { margin: 0; color: var(--muted); line-height: 1.6; }
.source-companions a { color: var(--green); }

.section--method { background: var(--paper); }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.method-grid article { min-height: 12rem; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); }
.method-grid h3 { margin: 0 0 2rem; font-size: 1.15rem; }
.method-grid p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.source-note { display: grid; grid-template-columns: 12rem 1fr 1fr; gap: 2rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.source-note h3 { margin: 0; }
.source-note p { margin: 0; color: var(--muted); line-height: 1.6; }
.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem max(1.25rem, calc((100vw - var(--max)) / 2)); background: var(--ink); color: var(--paper); }
.footer p { margin: 0; font: 750 .62rem var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 1080px) {
  .maturity-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scorecard__head, .score-row { grid-template-columns: .9fr .9fr minmax(6rem, .2fr) 1.1fr; }
  .history-lane { grid-template-columns: 12rem 1fr; }
  .history-lane > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .history-lane .target { margin-left: 0; }
  .milestone-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-nav { grid-template-columns: 1fr auto auto; }
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; padding: .7rem 1.2rem 1rem; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .55rem 0; }
  .section-heading--split { grid-template-columns: 1fr; gap: 1.3rem; }
  .ideal-spine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-table__head { display: none; }
  .context-table article { grid-template-columns: .75fr 1.5fr 1fr; border-bottom: 4px solid var(--rule); }
  .context-table article > * { border-bottom: 1px solid var(--rule); }
  .context-table article p:first-of-type { grid-column: 2 / -1; }
  .forecast-list__head, .forecast-list article { grid-template-columns: .5fr 1.5fr .8fr; }
  .forecast-list__head span:last-child { display: none; }
  .forecast-prob { grid-column: 3; }
  .source-map__head { display: none; }
  .source-map article { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 4px solid var(--rule); }
  .source-map h3 { grid-column: 1 / -1; }
  .source-map article > p::before { content: attr(data-label); display: block; margin-bottom: .45rem; color: var(--muted); font: 850 .58rem var(--font-ui); text-transform: uppercase; }
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding-top: 6rem; }
  .hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); overflow-wrap: anywhere; }
  .hero__answer, .framework-note, .reading-rule, .forecast-conclusion, .source-note, .source-companions { grid-template-columns: 1fr; gap: 1rem; }
  .hero__caveat { margin-left: 0; }
  .section { padding-left: 1rem; padding-right: 1rem; }
  .section-heading h2 { font-size: clamp(2.4rem, 12vw, 3.6rem); overflow-wrap: anywhere; }
  .ideal-spine { grid-template-columns: 1fr; }
  .ideal-spine article { min-height: 12rem; }
  .ideal-spine h3 { margin-top: 2rem; }
  .framework-note div { grid-column: 1; }
  .maturity-scale { grid-template-columns: 1fr; }
  .maturity-scale li { min-height: 10rem; }
  .maturity-scale h3 { margin-top: 1.8rem; }
  .scorecard__head { display: none; }
  .score-row { display: grid; grid-template-columns: 1fr 3rem; border-bottom: 4px solid var(--rule); }
  .score-row > * { border-right: 0; }
  .score-row h3 { grid-column: 1; }
  .score-row > strong { grid-column: 2; grid-row: 1; border-left: 1px solid var(--rule); }
  .score-meter { grid-column: 1 / -1; }
  .score-row > p { grid-column: 1 / -1; }
  .context-table article { display: block; }
  .context-table article > * { display: grid; grid-template-columns: 6.5rem 1fr; gap: .7rem; border-right: 1px solid var(--rule); }
  .context-table article > *::before { content: attr(data-label); color: var(--muted); font: 850 .58rem var(--font-ui); text-transform: uppercase; }
  .context-table h3 { display: block; }
  .context-table h3::before { content: none; }
  .history-lane { display: block; }
  .history-lane h3 { padding: .65rem 0; }
  .history-lane > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-lane > div span { min-height: 3.5rem; }
  .milestone-notes, .method-grid { grid-template-columns: 1fr; }
  .milestone-notes article { min-height: 11rem; }
  .milestone-notes h3 { margin-top: 2rem; }
  .forecast-list__head { display: none; }
  .forecast-list article { display: grid; grid-template-columns: 1fr; border-bottom: 4px solid var(--rule); }
  .forecast-list article > * { border-right: 1px solid var(--rule); }
  .forecast-prob { grid-column: 1; flex-direction: row; align-items: baseline; }
  .source-map article { display: block; }
  .source-map article > * { border-right: 1px solid var(--rule); }
  .footer { flex-direction: column; }
}

@media (max-width: 390px) {
  .brand { font-size: .62rem; }
  .hero h1 { font-size: 3.15rem; }
  .hero__answer p { font-size: 1.1rem; }
  .score-key { display: grid; }
  .score-meter { padding-top: 1.5rem; }
  .history-lane > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-key p { width: 100%; margin: .6rem 0 0; }
}

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