:root {
  color-scheme: dark;
  --ink: #f4f0e8;
  --muted: #b9b8c3;
  --faint: #868797;
  --line: #424356;
  --accent: #d6b58b;
  --night: #101522;
  --panel: #171c2b;
  background: var(--night);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--night); }
.wrap { width: min(100% - 3rem, 1080px); margin-inline: auto; }

.hero {
  min-height: min(850px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 6rem;
  background-image: radial-gradient(ellipse at 74% 30%, rgba(130, 113, 153, .17), transparent 42%);
}
.eyebrow, .layer-index { color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .19em; }
h1, h2, blockquote { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
h1 { margin: 1.8rem 0 .8rem; font-size: clamp(5rem, 15vw, 11rem); line-height: .78; letter-spacing: -.045em; }
.lead { max-width: 45rem; margin: 1.8rem 0 .7rem; color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.75rem); line-height: 1.2; }
.hero-copy { max-width: 39rem; color: var(--muted); line-height: 1.85; }
.scroll-link { margin-top: 3.3rem; color: var(--accent); font-size: .82rem; letter-spacing: .04em; text-decoration: none; }
.scroll-link span { margin-left: .6rem; }

.section { padding-block: clamp(5.5rem, 12vw, 9rem); }
.section-heading { margin-bottom: 3.5rem; }
.section-heading h2, .closing h2 { margin: 1rem 0 0; font-size: clamp(2.9rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.025em; }
.layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.layer { border-top: 1px solid var(--line); padding: 1.2rem 1.5rem 0 0; }
.layer-index { color: var(--faint); }
.layer h3, .context-grid h3, .steps h3 { margin: 2.4rem 0 .7rem; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.layer p:not(.layer-index) { max-width: 30rem; color: var(--muted); line-height: 1.8; }
.layer-lived { border-color: var(--accent); }

.band { background: var(--panel); border-block: 1px solid rgba(214, 181, 139, .16); }
.band-inner { padding-block: clamp(4rem, 9vw, 7rem); text-align: center; }
.band blockquote { margin: 1.7rem auto; font-size: clamp(2.3rem, 6vw, 4.3rem); line-height: 1.12; }
.band-copy { max-width: 39rem; margin: 0 auto; color: var(--muted); line-height: 1.8; }

.model-section { border-bottom: 1px solid var(--line); }
.section-intro { max-width: 39rem; margin: 1.4rem 0 0; color: var(--muted); line-height: 1.8; }
.model-map { max-width: 900px; margin-inline: auto; }
.model-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.model-card, .model-reading { border: 1px solid var(--line); background: var(--panel); padding: clamp(1.4rem, 4vw, 2rem); }
.promethean-card { border-top: 2px solid #a9a0c2; }
.epimethean-card { border-top: 2px solid var(--accent); }
.model-kicker { margin: 0; color: var(--faint); font-size: .66rem; font-weight: 600; letter-spacing: .16em; }
.model-card h3, .model-reading h3 { margin: 1rem 0 .6rem; font-family: 'Instrument Serif', Georgia, serif; font-size: 2rem; font-weight: 400; }
.model-card > p:not(.model-kicker), .model-reading > p:not(.model-kicker) { margin: 0; color: var(--muted); line-height: 1.75; }
.model-card ul { min-height: 6.8rem; margin: 1.1rem 0 1.5rem; padding-left: 1.15rem; color: var(--muted); line-height: 1.9; font-size: .9rem; }
.maturity-tag { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .65rem; color: var(--accent); font-size: .68rem; letter-spacing: .03em; }
.model-convergence { display: flex; justify-content: center; align-items: center; gap: .9rem; padding: 1.25rem; color: var(--faint); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.convergence-line { width: min(16vw, 8rem); height: 1px; background: var(--line); }
.model-reading { max-width: 620px; margin-inline: auto; border-color: rgba(214, 181, 139, .55); text-align: center; }
.model-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.35fr; align-items: stretch; gap: .8rem; max-width: 900px; margin: 3rem auto 0; }
.model-flow > div { display: flex; flex-direction: column; gap: .4rem; min-height: 8.5rem; border-top: 1px solid var(--line); padding: 1rem .4rem; }
.model-flow > div > span { color: var(--accent); font-size: .68rem; font-weight: 600; letter-spacing: .13em; }
.model-flow strong { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.model-flow small { max-width: 15rem; color: var(--muted); line-height: 1.55; }
.model-flow .future-stage { border-top-style: dashed; }
.model-flow .future-stage > span, .model-flow .future-stage small { color: var(--faint); }
.flow-arrow { align-self: center; color: var(--faint); }
.model-boundary { max-width: 900px; margin: 1.5rem auto 0; border-left: 2px solid var(--accent); padding: .15rem 0 .15rem 1rem; color: var(--muted); font-size: .88rem; line-height: 1.7; }
.model-boundary strong { color: var(--ink); font-weight: 500; }

.context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; row-gap: 3rem; }
.context-grid article { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.symbol { color: var(--accent); font-size: 1.6rem; }
.context-grid h3 { margin: 1.2rem 0 .5rem; }
.context-grid p, .principles-list p { max-width: 31rem; margin: 0; color: var(--muted); line-height: 1.8; }

.process-section { background: #131927; }
.process-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }
.process-layout .section-heading { align-self: start; position: sticky; top: 3rem; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; border-top: 1px solid var(--line); padding: 1.35rem 0 1.7rem; }
.steps li > span { padding-top: .4rem; color: var(--accent); font-size: .72rem; letter-spacing: .12em; }
.steps h3 { margin: 0 0 .5rem; font-size: 1.6rem; }
.steps p { margin: 0; color: var(--muted); line-height: 1.75; }

.principles { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }
.principles .section-heading { margin: 0; }
.principles-list p { max-width: none; border-top: 1px solid var(--line); padding: 1rem 0; }
.principles-list strong { color: var(--ink); font-weight: 500; }

.closing { padding-block: clamp(5rem, 11vw, 8rem); background: radial-gradient(ellipse at 50% 100%, #303047 0, var(--night) 70%); border-top: 1px solid var(--line); }
.closing h2 { max-width: 720px; }
.closing > .wrap > p:not(.eyebrow):not(.disclaimer) { max-width: 38rem; margin-top: 1.5rem; color: var(--muted); line-height: 1.8; }
.closing .reference-link a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.disclaimer { margin-top: 3rem; color: var(--faint); font-size: .82rem; line-height: 1.7; }
.footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1.4rem; color: var(--faint); font-size: .62rem; letter-spacing: .16em; }
.footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 720px) {
  .wrap { width: min(100% - 2.2rem, 560px); }
  .hero { min-height: 88svh; padding-block: 5rem; }
  .layers, .context-grid, .model-sources { grid-template-columns: 1fr; gap: 2rem; }
  .model-flow { grid-template-columns: 1fr; gap: .2rem; }
  .model-flow > div { min-height: auto; }
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .model-card ul { min-height: 0; }
  .process-layout, .principles { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-layout .section-heading { position: static; }
  .section-heading { margin-bottom: 2.4rem; }
  .footer { flex-wrap: wrap; }
}

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