:root {
  --ink: #11131d;
  --ink-soft: #202638;
  --ink-muted: #667084;
  --paper: #f4f1e8;
  --paper-bright: #fffdf7;
  --paper-blue: #d8eaf6;
  --line: #d7d4ca;
  --line-dark: rgba(255, 255, 255, 0.2);
  --water: #9fc5df;
  --red: #ef645e;
  --amber: #f3bb58;
  --green: #84c98c;
  --blue: #69a9e8;
  --violet: #9b7fd8;
  --body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --shell: min(1240px, calc(100vw - 64px));
  --radius-large: 36px;
  --radius-medium: 22px;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.page-shell { overflow-x: clip; }

.site-header,
.site-footer {
  width: var(--shell);
  margin: 0 auto;
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wordmark,
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 10px 0 0 var(--amber), 20px 0 0 var(--blue);
  margin-right: 20px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a,
.language-switcher a {
  color: inherit;
  text-decoration: none;
  opacity: 0.76;
  transition: opacity 160ms ease, color 160ms ease;
}

.site-nav a:hover,
.language-switcher a:hover,
.site-nav a:focus-visible,
.language-switcher a:focus-visible { opacity: 1; color: var(--amber); }

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.language-switcher a[aria-current="page"] {
  color: var(--amber);
  opacity: 1;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 6vw, 92px);
  width: var(--shell);
  min-height: min(800px, calc(100vh - 82px));
  margin: 0 auto;
  padding: 52px 0 96px;
}

.hero__copy { position: relative; z-index: 2; max-width: 560px; }

.eyebrow,
.micro-label,
.source-type,
.source-publisher,
.evidence-item__label,
.diagram-stage__tag,
.height-status,
.scene-note,
.epistemic-note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.eyebrow { margin: 0 0 24px; color: var(--amber); }
.eyebrow--dark { color: #9c5d2b; }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2 {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.04em;
}

h1 {
  max-width: 7ch;
  margin-bottom: 28px;
  font-size: clamp(66px, 9.5vw, 142px);
  line-height: 0.94;
}

.hero__deck {
  max-width: 500px;
  margin-bottom: 34px;
  color: #d7d8dc;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.36;
}

.hero__action {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 18px 12px 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero__action::after {
  content: '';
  width: 34px;
  height: 1px;
  margin-left: 14px;
  background: var(--amber);
  transition: width 180ms ease;
}

.hero__action:hover::after,
.hero__action:focus-visible::after { width: 52px; }

.hero__visual { min-width: 0; }

.hero-sky {
  position: relative;
  min-height: 560px;
  aspect-ratio: 1.08 / 1;
  overflow: hidden;
  background-color: #1b2233;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 0 80px 0;
  box-shadow: inset 0 -120px 130px rgba(8, 10, 17, 0.45);
}

.hero-sky::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 75% 17%, rgba(255, 227, 161, 0.2), transparent 18%), linear-gradient(128deg, transparent 0 56%, rgba(255, 255, 255, 0.04) 56% 57%, transparent 57%);
}

.hero-sky__grain {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(255,255,255,0.22) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
}

.hero-sky__sun {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(243, 187, 88, 0.65);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(243, 187, 88, 0.06), 0 0 0 28px rgba(243, 187, 88, 0.035);
}

.hero-sky__sun::before,
.hero-sky__sun::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 112px;
  height: 1px;
  background: rgba(243, 187, 88, 0.44);
  transform: translate(-50%, -50%);
}

.hero-sky__sun::after { transform: translate(-50%, -50%) rotate(90deg); }

.hero-rainbow {
  position: absolute;
  right: -7%;
  bottom: 3%;
  width: 94%;
  aspect-ratio: 2 / 1;
  border-radius: 100% 100% 0 0;
  transform: rotate(-7deg);
}

.hero-rainbow__band {
  position: absolute;
  border-style: solid;
  border-bottom: 0;
  border-radius: 100% 100% 0 0;
  transform-origin: bottom center;
}

.hero-rainbow__band--red { inset: 0; border-width: 14px; border-color: var(--red) transparent transparent; opacity: 0.9; }
.hero-rainbow__band--amber { inset: 8% 4% 0; border-width: 11px; border-color: var(--amber) transparent transparent; opacity: 0.86; }
.hero-rainbow__band--green { inset: 16% 8% 0; border-width: 10px; border-color: var(--green) transparent transparent; opacity: 0.84; }
.hero-rainbow__band--blue { inset: 24% 12% 0; border-width: 9px; border-color: var(--blue) transparent transparent; opacity: 0.82; }
.hero-rainbow__band--violet { inset: 32% 16% 0; border-width: 8px; border-color: var(--violet) transparent transparent; opacity: 0.8; }

.hero-sky__drops { position: absolute; inset: 0; }

.hero-drop {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: calc(var(--s) * 1.6);
  border: 1px solid rgba(169, 214, 240, 0.76);
  border-radius: 60% 60% 64% 64%;
  transform: rotate(22deg);
  opacity: 0.82;
}

.hero-observer {
  position: absolute;
  bottom: 8%;
  left: 24%;
  width: 18px;
  height: 56px;
  border-left: 2px solid var(--paper);
  transform: rotate(4deg);
}

.hero-observer::before {
  position: absolute;
  top: -13px;
  left: -7px;
  width: 12px;
  height: 12px;
  content: '';
  border: 1px solid var(--paper);
  border-radius: 50%;
}

.hero-observer span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 38px;
  height: 1px;
  background: var(--paper);
  transform: rotate(-16deg);
  transform-origin: left center;
}

.hero-sky__label {
  position: absolute;
  z-index: 2;
  color: rgba(244, 241, 232, 0.74);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-sky__label--angle { top: 35%; left: 8%; }
.hero-sky__label--note { bottom: 4%; left: 9%; max-width: 190px; line-height: 1.5; }

.hero-angle {
  position: absolute;
  top: 25%;
  left: 12%;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: rotate(-8deg);
}

.hero-angle strong {
  color: var(--amber);
  font-family: var(--display);
  font-size: 48px;
  font-weight: 650;
  line-height: 1;
}

.hero-angle span { color: rgba(244, 241, 232, 0.72); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }

.evidence-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  padding: 24px max(32px, calc((100vw - 1240px) / 2));
  color: var(--ink);
  background: var(--paper);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid var(--line);
}

.evidence-item {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  min-height: 52px;
  padding: 10px 22px;
  border-left: 1px solid var(--line);
}

.evidence-item:first-child { border-left: 0; }
.evidence-item__label { color: #8d4e2a; }
.evidence-item__value { max-width: 230px; font-size: 14px; line-height: 1.35; }

.scene,
.sources-scene { padding: clamp(92px, 12vw, 168px) max(32px, calc((100vw - 1240px) / 2)); }

.scene--light { color: var(--ink); background: var(--paper); }
.scene--air { color: var(--ink); background: var(--paper-blue); }
.scene--dark { color: var(--paper); background: var(--ink-soft); }

.mechanism {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(48px, 8vw, 124px);
}

.scene__intro { max-width: 550px; }
.scene__intro--narrow { max-width: 680px; }

h2 {
  max-width: 12ch;
  margin-bottom: 30px;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.98;
}

.scene__intro p:not(.eyebrow) {
  max-width: 500px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.55;
}

.diagram-card,
.height-card {
  margin: 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-medium) 0 var(--radius-medium) 0;
  box-shadow: 12px 14px 0 rgba(17,19,29,0.09);
}

.diagram-card__header,
.height-card__controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.micro-label { margin: 0 0 7px; color: #8d4e2a; }
.diagram-card__intro { max-width: 480px; margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.45; }
.diagram-card__badge { color: var(--violet); font-family: var(--display); font-size: 42px; line-height: 1; }

.diagram-stage {
  position: relative;
  min-height: 420px;
  margin: 26px 0 24px;
  overflow: hidden;
  background: #1a2131;
  border-radius: 14px 0 14px 0;
}

.diagram-stage::before {
  position: absolute;
  inset: 0;
  content: '';
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.diagram-canvas,
.height-canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.js-ready .diagram-canvas,
.js-ready .height-canvas { opacity: 1; }

.diagram-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.js-ready .diagram-fallback,
.js-ready .height-fallback { display: none; }

.fallback-sun {
  position: absolute;
  top: 26px;
  left: 30px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--amber);
  border-radius: 50%;
}

.fallback-sun::before,
.fallback-sun::after { position: absolute; top: 50%; left: -12px; width: 64px; height: 1px; content: ''; background: var(--amber); opacity: 0.6; }
.fallback-sun::after { transform: rotate(90deg); }

.fallback-rain { position: absolute; inset: 50px 24px 60px; }
.static-drop { position: absolute; top: var(--y); left: var(--x); width: 5px; height: 10px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.9; transform: rotate(22deg); }
.static-drop--red { color: var(--red); }.static-drop--amber { color: var(--amber); }.static-drop--green { color: var(--green); }.static-drop--blue { color: var(--blue); }.static-drop--violet { color: var(--violet); }

.fallback-arc {
  position: absolute;
  right: -5%;
  bottom: 8%;
  width: 70%;
  aspect-ratio: 2 / 1;
  border: 2px solid var(--violet);
  border-bottom: 0;
  border-radius: 100% 100% 0 0;
  opacity: 0.8;
}

.fallback-observer { position: absolute; bottom: 15%; left: 48%; width: 14px; height: 44px; border-left: 2px solid var(--paper); }
.fallback-observer::before { position: absolute; top: -12px; left: -7px; width: 11px; height: 11px; content: ''; border: 1px solid var(--paper); border-radius: 50%; }
.fallback-observer span { position: absolute; bottom: 0; left: 0; width: 34px; height: 1px; background: var(--paper); transform: rotate(-16deg); transform-origin: left center; }

.diagram-stage__tag { position: absolute; z-index: 2; padding: 5px 7px; color: var(--paper); background: rgba(17,19,29,0.7); }
.diagram-stage__tag--sun { top: 22px; left: 22px; color: var(--amber); }
.diagram-stage__tag--drops { top: 24px; right: 22px; color: var(--water); }
.diagram-stage__tag--eye { right: 22px; bottom: 22px; color: var(--paper); }

.diagram-card__controls label,
.height-card__controls label { display: block; margin-bottom: 12px; color: var(--ink); font-size: 14px; font-weight: 600; }
.diagram-card__controls input,
.height-card__controls input { display: block; width: 100%; margin: 0; accent-color: var(--violet); }
.diagram-card__controls,
.height-card__controls { display: block; }

input[type="range"] { height: 28px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--red), var(--amber), var(--green), var(--blue), var(--violet)); border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; border: 3px solid var(--paper-bright); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); -webkit-appearance: none; }
input[type="range"]::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--red), var(--amber), var(--green), var(--blue), var(--violet)); border-radius: 4px; }
input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; border: 3px solid var(--paper-bright); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.range-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; color: var(--ink-muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.control-help { margin: 9px 0 0; color: var(--ink-muted); font-size: 13px; }
.diagram-status { min-height: 26px; margin: 18px 0 0; color: #8d4e2a; font-family: var(--mono); font-size: 12px; }
figcaption { margin-top: 18px; color: var(--ink-muted); font-size: 13px; line-height: 1.45; }
figcaption span { display: block; margin-top: 6px; color: #8d4e2a; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; }

.angle-scene { position: relative; }
.angle-scene::before { position: absolute; top: 0; right: 9%; width: 120px; height: 100%; content: ''; background-image: linear-gradient(90deg, transparent 49%, rgba(17,19,29,0.12) 50%, transparent 51%); opacity: 0.5; }
.angle-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr); align-items: center; gap: clamp(40px, 9vw, 128px); margin-top: 74px; }

.angle-graphic { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: auto; }
.angle-graphic::before,
.angle-graphic::after { position: absolute; content: ''; border: 1px solid rgba(17,19,29,0.32); border-radius: 50%; }
.angle-graphic::before { inset: 8%; }.angle-graphic::after { inset: 22%; border-color: rgba(17,19,29,0.18); }
.angle-graphic__arc { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--red); border-right-color: var(--amber); transform: rotate(28deg); }
.angle-graphic__arc--inner { inset: 14%; border-top-color: var(--blue); border-right-color: var(--violet); transform: rotate(36deg); }
.angle-graphic__sun { position: absolute; top: 4%; right: 9%; color: #9c5d2b; font-size: 42px; line-height: 1; }
.angle-graphic__observer { position: absolute; bottom: 12%; left: 48%; width: 2px; height: 78px; background: var(--ink); transform: rotate(-18deg); transform-origin: bottom center; }
.angle-graphic__observer::before { position: absolute; top: -14px; left: -6px; width: 13px; height: 13px; content: ''; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-blue); }
.angle-graphic__mark { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.angle-graphic__mark--42 { top: 47%; left: 40%; color: #9c5d2b; font-size: 26px; letter-spacing: -0.04em; }
.angle-graphic__mark--sun { top: 17%; left: 2%; color: #9c5d2b; }.angle-graphic__mark--rain { bottom: 3%; right: 4%; color: #2f6f98; }

.conditions { max-width: 360px; }
.conditions ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17,19,29,0.25); }
.condition { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid rgba(17,19,29,0.25); }
.condition__number { color: #9c5d2b; font-family: var(--mono); font-size: 12px; }
.condition__body { display: grid; gap: 3px; }.condition__body strong { font-size: 16px; }.condition__value { font-family: var(--display); font-size: 26px; letter-spacing: -0.03em; }.condition__body small { color: #4b6170; font-size: 13px; line-height: 1.4; }
.scene-note { margin: 22px 0 0; color: #4b6170; font-size: 10px; line-height: 1.6; }

.height-scene { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(48px, 8vw, 124px); align-items: start; }
.height-scene .scene__intro p:not(.eyebrow) { color: #d5dae3; }.height-card { color: var(--paper); background: #263149; border-color: rgba(255,255,255,0.18); box-shadow: 12px 14px 0 rgba(0,0,0,0.2); }
.height-visual { position: relative; min-height: 390px; overflow: hidden; margin-bottom: 24px; background: #192235; border-radius: 14px 0 14px 0; }
.height-visual::after { position: absolute; right: 0; bottom: 34px; left: 0; height: 1px; content: ''; background: rgba(255,255,255,0.42); }
.height-canvas { position: relative; z-index: 1; }.height-fallback { position: absolute; inset: 0; }.height-fallback span { position: absolute; top: 18%; left: 16%; width: 68%; aspect-ratio: 1; border: 10px solid transparent; border-top-color: var(--red); border-right-color: var(--amber); border-radius: 50%; transform: rotate(-28deg); }
.height-card__controls label { color: var(--paper); }.height-card input { accent-color: var(--amber); }.range-scale--light { color: #aeb7c7; }.height-card .control-help { color: #aeb7c7; }.height-status { margin: 18px 0 0; color: var(--amber); }.height-card figcaption { color: #aeb7c7; }

.memory-scene { position: relative; display: grid; place-items: center; min-height: 650px; overflow: hidden; padding: 120px max(32px, calc((100vw - 1240px) / 2)); background: #0c0e16; }
.memory-scene__copy { position: relative; z-index: 2; max-width: 670px; text-align: center; }.memory-scene h2 { max-width: none; margin: 0 auto 28px; font-size: clamp(62px, 10vw, 144px); }.memory-scene p:not(.eyebrow) { max-width: 610px; margin: 0 auto 26px; color: #d9dce3; font-size: 20px; line-height: 1.45; }.memory-scene__closing { color: var(--amber) !important; font-family: var(--display); font-size: clamp(28px, 4vw, 50px) !important; letter-spacing: -0.03em; }
.memory-scene__ring { position: absolute; top: 50%; left: 50%; width: min(80vw, 920px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; transform: translate(-50%, -50%) rotate(-22deg); }
.memory-scene__ring span { position: absolute; inset: 3%; border: 8px solid transparent; border-top-color: var(--red); border-right-color: var(--amber); border-radius: 50%; transform: rotate(10deg); }.memory-scene__ring span:nth-child(2) { inset: 14%; border-width: 7px; border-top-color: var(--amber); border-right-color: var(--green); }.memory-scene__ring span:nth-child(3) { inset: 25%; border-width: 6px; border-top-color: var(--green); border-right-color: var(--blue); }.memory-scene__ring span:nth-child(4) { inset: 36%; border-width: 5px; border-top-color: var(--blue); border-right-color: var(--violet); }.memory-scene__ring span:nth-child(5) { inset: 47%; border-width: 4px; border-top-color: var(--violet); }

.sources-scene { color: var(--ink); background: var(--paper); }.sources-scene__intro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 64px; align-items: end; margin-bottom: 64px; }.sources-scene__intro .eyebrow { grid-column: 1 / -1; }.sources-scene h2 { margin-bottom: 0; }.sources-scene__intro > p:not(.eyebrow):not(.epistemic-note) { max-width: 520px; margin-bottom: 0; font-size: 17px; line-height: 1.5; }.epistemic-note { grid-column: 1 / -1; display: flex; gap: 10px; max-width: 760px; margin: 36px 0 0; color: #8d4e2a; font-size: 10px; line-height: 1.6; text-transform: none; letter-spacing: 0.02em; }.epistemic-note__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--violet); }
.source-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }.source-card { display: flex; flex-direction: column; min-width: 0; min-height: 330px; padding: 20px 18px; background: var(--paper-bright); border: 1px solid var(--line); }.source-card__meta { display: grid; gap: 5px; min-height: 50px; }.source-type { color: #8d4e2a; font-size: 9px; }.source-publisher { color: var(--ink-muted); font-size: 9px; line-height: 1.4; text-transform: none; letter-spacing: 0; }.source-card h3 { margin: 24px 0 12px; font-family: var(--display); font-size: 25px; font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; }.source-card p { flex: 1; margin-bottom: 18px; color: #4c5666; font-size: 14px; line-height: 1.45; }.text-link { color: #8d4e2a; font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; text-decoration: none; text-transform: uppercase; }.text-link:hover { color: var(--violet); text-decoration: underline; }

.site-footer { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1fr 0.8fr; gap: 18px; align-items: center; min-height: 100px; color: #aeb3bf; background: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; }.site-footer p { margin: 0; }.site-footer a { color: inherit; text-decoration: none; }.site-footer a:hover { color: var(--amber); }.backtop-static { justify-self: end; color: var(--amber) !important; }
.backtop-float { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 20; display: grid; place-items: center; width: 48px; height: 48px; color: var(--ink); background: var(--amber); font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; }.backtop-float.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.backtop-float::before { content: 'TOP'; }

@media (max-width: 1120px) {
  :root { --shell: min(100% - 48px, 1000px); }
  .site-nav { gap: 14px; }
  .hero { gap: 44px; }
  .hero-sky { min-height: 470px; }
  .source-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .source-card { min-height: 290px; }
  .source-card:nth-child(4), .source-card:nth-child(5) { margin-top: 0; }
}

@media (max-width: 800px) {
  :root { --shell: calc(100% - 40px); }
  .site-header { min-height: 68px; }.site-nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 58px 0 72px; }.hero__copy { max-width: 620px; }.hero__visual { width: min(100%, 680px); margin: 0 auto; }.hero-sky { min-height: 420px; }
  h1 { max-width: 8ch; font-size: clamp(68px, 18vw, 112px); }.hero__deck { font-size: 19px; }
  .evidence-strip { grid-template-columns: 1fr; padding: 0 20px; }.evidence-item { grid-template-columns: 110px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--line); border-left: 0; }.evidence-item:first-child { border-top: 0; }
  .scene, .sources-scene { padding-right: 20px; padding-left: 20px; }.mechanism, .height-scene { grid-template-columns: 1fr; gap: 54px; }.angle-layout { grid-template-columns: 1fr; gap: 54px; margin-top: 52px; }.angle-graphic { width: min(100%, 500px); }
  .scene__intro p:not(.eyebrow) { font-size: 17px; }
  .sources-scene__intro { grid-template-columns: 1fr; gap: 22px; }.sources-scene__intro .eyebrow { grid-column: auto; }.sources-scene h2 { margin-bottom: 0; }.sources-scene__intro > p:not(.eyebrow):not(.epistemic-note) { margin-bottom: 0; }.epistemic-note { grid-column: auto; margin-top: 8px; }.source-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 14px; padding: 28px 0; }.site-footer__brand { grid-column: 1 / -1; }.backtop-static { justify-self: start; }
}

@media (max-width: 500px) {
  :root { --shell: calc(100% - 28px); }
  .site-header { min-height: 60px; font-size: 9px; }.wordmark__dot { width: 8px; height: 8px; margin-right: 18px; box-shadow: 8px 0 0 var(--amber), 16px 0 0 var(--blue); }.language-switcher { gap: 5px; }
  .hero { padding-top: 42px; padding-bottom: 56px; }.eyebrow { margin-bottom: 18px; font-size: 10px; }h1 { margin-bottom: 22px; font-size: clamp(62px, 20vw, 90px); line-height: 0.97; }.hero__deck { font-size: 17px; }.hero-sky { width: 100%; min-height: 0; aspect-ratio: 1 / 0.97; border-radius: 0 0 46px 0; }.hero-rainbow { right: -22%; bottom: -12%; width: 118%; }.hero-sky__label--angle { top: 42%; font-size: 9px; }.hero-sky__label--note { max-width: 155px; font-size: 9px; }.hero-angle { top: 24%; left: 8%; }.hero-angle strong { font-size: 38px; }.hero-angle span { max-width: 110px; line-height: 1.3; }.hero-sky__sun { width: 54px; height: 54px; }.hero-sky__sun::before, .hero-sky__sun::after { width: 82px; }.hero-observer { bottom: 9%; left: 20%; }
  .evidence-strip { padding: 0 14px; }.evidence-item { grid-template-columns: 96px minmax(0,1fr); gap: 12px; }.evidence-item__label { font-size: 9px; }.evidence-item__value { font-size: 13px; }
  .scene, .sources-scene { padding-top: 84px; padding-bottom: 92px; }.scene__intro h2, h2 { max-width: 10ch; font-size: clamp(44px, 14vw, 72px); }.scene__intro p:not(.eyebrow) { font-size: 16px; }.diagram-card, .height-card { padding: 14px; }.diagram-card__header { gap: 10px; }.diagram-card__intro { font-size: 13px; }.diagram-card__badge { font-size: 34px; }.diagram-stage { min-height: 310px; margin-top: 20px; }.diagram-stage__tag { padding: 4px 5px; font-size: 8px; }.diagram-stage__tag--drops { right: 12px; }.diagram-stage__tag--eye { right: 12px; bottom: 12px; }.diagram-stage__tag--sun { left: 12px; }.range-scale { font-size: 9px; }.diagram-card figcaption { font-size: 12px; }.diagram-card figcaption span { font-size: 9px; }
  .angle-layout { margin-top: 38px; }.angle-graphic { width: min(100%, 340px); }.angle-graphic__sun { font-size: 32px; }.angle-graphic__mark--42 { font-size: 22px; }.condition__value { font-size: 23px; }
  .height-visual { min-height: 300px; }.memory-scene { min-height: 570px; padding: 100px 20px; }.memory-scene h2 { font-size: clamp(60px, 19vw, 90px); }.memory-scene p:not(.eyebrow) { font-size: 17px; }.memory-scene__closing { font-size: 30px !important; }.memory-scene__ring { width: 130vw; }
  .source-grid { grid-template-columns: 1fr; gap: 10px; }.source-card { min-height: 0; padding: 18px; }.source-card h3 { margin-top: 16px; }.sources-scene__intro > p:not(.eyebrow):not(.epistemic-note) { font-size: 16px; }.site-footer { width: var(--shell); grid-template-columns: 1fr; font-size: 9px; }.site-footer__brand { grid-column: auto; }.backtop-static { justify-self: start; }
}

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

@media print {
  .site-header, .hero__action, .backtop-float, .backtop-static { display: none; }
  body, .scene--dark, .memory-scene { color: #000; background: #fff; }
  .hero { min-height: 0; }.hero-sky { break-inside: avoid; }
}