:root {
  --paper: #f6f2e9;
  --paper-deep: #eae3d6;
  --ink: #182321;
  --muted: #5f6b66;
  --line: rgba(24, 35, 33, .16);
  --lime: #c9f05a;
  --lime-soft: #e9f8b9;
  --coral: #f38c72;
  --blue: #6e8fec;
  --white: #fffdf8;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
sup { font-size: .6em; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 70px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 242, 233, .88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--lime); font-family: "Newsreader", serif; font-size: 22px; }
nav { display: flex; gap: 28px; font-size: 13px; font-weight: 700; }
nav a, .header-links a { transition: opacity .2s; }
nav a:hover, .header-links a:hover { opacity: .52; }
.header-links { justify-self: end; display: flex; gap: 18px; font-size: 13px; font-weight: 800; }
.header-links a::after { content: " ↗"; }

.hero {
  min-height: calc(100vh - 70px);
  padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
  overflow: hidden;
}
.acceptance { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.4); font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.acceptance span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(201,240,90,.25); }
.kicker, .section-label { font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 500; }
.hero .kicker { margin: 38px 0 13px; color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -.035em; }
h1 { margin-bottom: 26px; max-width: 850px; font-size: clamp(56px, 6.9vw, 108px); line-height: .89; }
h1 em { color: var(--coral); font-weight: 500; }
.dek { max-width: 760px; color: #34433e; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.5; }
.authors { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 30px; font-size: 14px; font-weight: 700; }
.affiliations { max-width: 780px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 164px; padding: 13px 17px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(24,35,33,.12); }
.button-dark { background: var(--ink); color: var(--white); }
.button-light { background: transparent; }

.question-world { position: relative; min-height: 610px; }
.center-question { position: absolute; z-index: 4; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); font: 600 84px/1 "Newsreader", serif; box-shadow: 0 24px 60px rgba(24,35,33,.24); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(24,35,33,.3); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }
.orbit-one { width: 350px; height: 350px; animation: spin 28s linear infinite; }
.orbit-two { width: 540px; height: 540px; animation: spin 46s linear infinite reverse; }
.orbit-one::before { top: 30px; left: 54px; }
.orbit-one::after { right: 21px; bottom: 89px; background: var(--blue); }
.orbit-two::before { top: 92px; right: 34px; background: var(--lime); }
.orbit-two::after { left: 73px; bottom: 57px; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.question-card { position: absolute; z-index: 3; width: 225px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.91); box-shadow: 0 18px 45px rgba(24,35,33,.11); }
.question-card span { display: block; margin-bottom: 7px; color: var(--muted); font: 500 10px/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }
.question-card p { margin: 0; font-family: "Newsreader", serif; font-size: 19px; line-height: 1.15; }
.q-one { left: 0; top: 8%; transform: rotate(-4deg); }
.q-two { right: -3%; top: 17%; transform: rotate(3deg); }
.q-three { left: 3%; bottom: 7%; transform: rotate(2deg); }
.q-four { right: 2%; bottom: 4%; transform: rotate(-3deg); }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers div { padding: 27px clamp(20px, 4vw, 64px); border-right: 1px solid var(--line); }
.numbers div:last-child { border-right: 0; }
.numbers strong { display: block; font: 500 clamp(34px, 4vw, 55px)/1 "Newsreader", serif; }
.numbers span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.section { padding: clamp(84px, 10vw, 150px) clamp(20px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.section-label { margin-bottom: 70px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 130px); }
h2 { margin-bottom: 20px; font-size: clamp(45px, 5.4vw, 80px); line-height: .98; }
.lead { color: var(--coral); font: 500 clamp(27px, 3vw, 42px)/1.14 "Newsreader", serif; }
.why-body > p, .framework-head > p, .impact-copy > p { max-width: 650px; color: #3f4d48; font-size: 18px; line-height: 1.75; }
.contrast { display: grid; grid-template-columns: 1fr 1fr; margin-top: 42px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contrast div { min-height: 180px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.contrast div + div { border-left: 1px solid var(--line); }
.contrast-accent { background: var(--lime); }
.contrast-icon { font: 600 42px/1 "Newsreader", serif; }
.contrast small { color: var(--muted); }
.contrast strong { font-size: 17px; }

.framework { background: var(--ink); color: var(--white); }
.framework .section-label { border-color: rgba(255,255,255,.18); color: #a9b3ae; }
.framework-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.framework-head .kicker { color: var(--lime); }
.framework-head > p { color: #c1c9c5; }
.framework-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 58px; }
.framework-card { min-height: 470px; padding: 24px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); background: #21302d; }
.card-number { align-self: flex-end; color: #9caaa5; font: 500 11px "DM Mono", monospace; }
.framework-card h3 { margin: 25px 0 12px; font: 500 30px/1.08 "Newsreader", serif; }
.framework-card p { color: #b8c2be; }
.card-tag { align-self: flex-start; margin-top: auto; padding: 7px 10px; border-radius: 999px; background: rgba(201,240,90,.11); color: var(--lime); font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }
.mini-viz { position: relative; height: 150px; margin-top: 25px; }
.mini-viz.words i { position: absolute; left: 0; height: 14px; border-radius: 999px; background: var(--lime); }
.mini-viz.words i:nth-child(1) { top: 10px; width: 64%; }
.mini-viz.words i:nth-child(2) { top: 46px; width: 91%; background: var(--coral); }
.mini-viz.words i:nth-child(3) { top: 82px; width: 45%; background: var(--blue); }
.mini-viz.words i:nth-child(4) { top: 118px; width: 77%; }
.mini-viz.ranks { display: flex; align-items: end; gap: 12px; }
.mini-viz.ranks i { width: 21%; border: 1px solid rgba(255,255,255,.25); border-radius: 8px 8px 0 0; background: var(--blue); }
.mini-viz.ranks i:nth-child(1) { height: 45%; }
.mini-viz.ranks i:nth-child(2) { height: 94%; background: var(--lime); }
.mini-viz.ranks i:nth-child(3) { height: 68%; background: var(--coral); }
.mini-viz.ranks i:nth-child(4) { height: 31%; }
.mini-viz.compass { display: grid; place-items: center; }
.mini-viz.compass::before, .mini-viz.compass::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.mini-viz.compass::before { width: 138px; height: 138px; }
.mini-viz.compass::after { width: 84px; height: 84px; }
.mini-viz.compass i { z-index: 2; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 72px solid var(--coral); transform: rotate(35deg); transform-origin: 50% 90%; }

.findings-intro { max-width: 960px; margin-bottom: 60px; }
.findings-intro .kicker { color: var(--coral); }
.findings-intro > p:last-child { max-width: 730px; color: var(--muted); font-size: 20px; }
.plot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plot-card { min-height: 500px; margin: 0; padding: clamp(24px, 3vw, 42px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.plot-card figcaption { display: flex; flex-direction: column; }
.plot-card figcaption > span { color: var(--muted); font: 500 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.plot-card figcaption strong { margin: 9px 0; font: 500 clamp(28px, 3vw, 42px) "Newsreader", serif; }
.plot-card figcaption small { max-width: 490px; color: var(--muted); }
.bar-plot { margin: auto 0 25px; }
.axis-labels { margin: 0 70px 8px 90px; display: flex; justify-content: space-between; color: var(--muted); font: 400 10px "DM Mono", monospace; }
.bar-row { display: grid; grid-template-columns: 78px 1fr 58px; gap: 12px; align-items: center; margin: 18px 0; font-size: 13px; }
.bar-row b { text-align: right; font: 500 11px "DM Mono", monospace; }
.bar-track { height: 35px; border-left: 1px solid var(--line); background-image: linear-gradient(to right, transparent calc(25% - 1px), var(--line) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--line) 75%, transparent calc(75% + 1px)); }
.bar { display: block; width: var(--value); height: 100%; border-radius: 0 7px 7px 0; background: var(--coral); transform-origin: left; animation: grow-x 1s both .2s; }
.bar.model { background: var(--blue); }
@keyframes grow-x { from { transform: scaleX(0); } }
.plot-note { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.plot-dark { background: var(--ink); color: var(--white); }
.plot-dark figcaption > span, .plot-dark figcaption small, .plot-dark .plot-note { color: #aeb9b5; }
.plot-dark .plot-note { border-color: rgba(255,255,255,.15); }
.gap-plot { min-height: 235px; margin: auto 0 25px; display: grid; grid-template-columns: 1fr 100px 1fr; align-items: end; border-bottom: 1px solid rgba(255,255,255,.25); }
.gap-column { height: 210px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.gap-column b { margin-bottom: 7px; font: 500 12px "DM Mono", monospace; }
.gap-column i { display: block; width: 68%; height: var(--height); max-height: 160px; border-radius: 9px 9px 0 0; background: var(--coral); animation: grow-y 1s both .2s; transform-origin: bottom; }
.gap-column.accent i { background: var(--lime); }
.gap-column span { position: absolute; transform: translateY(26px); color: #b8c2be; font-size: 11px; }
.gap-arrow { align-self: center; display: flex; flex-direction: column; align-items: center; color: var(--lime); }
.gap-arrow::before { content: "↓"; font-size: 34px; }
.gap-arrow strong { font: 600 18px "DM Mono", monospace; }
.gap-arrow span { font-size: 11px; text-transform: uppercase; }
@keyframes grow-y { from { transform: scaleY(0); } }
.takeaways { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.takeaways article { min-height: 240px; padding: 25px; }
.takeaways article + article { border-left: 1px solid var(--line); }
.takeaways span { color: var(--coral); font: 500 11px "DM Mono", monospace; }
.takeaways h3 { margin: 50px 0 9px; font: 500 25px "Newsreader", serif; }
.takeaways p { color: var(--muted); font-size: 14px; }

.impact { background: var(--lime-soft); }
.impact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 8vw, 130px); align-items: center; }
.impact-copy blockquote { margin: 45px 0 0; padding: 25px 0 0 26px; border-top: 1px solid var(--line); border-left: 5px solid var(--coral); font: 500 25px/1.35 "Newsreader", serif; }
.impact-chart { min-height: 590px; margin: 0; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 25px 60px rgba(66,76,48,.12); }
.impact-chart figcaption { display: flex; flex-direction: column; }
.impact-chart figcaption strong { font: 500 25px "Newsreader", serif; }
.impact-chart figcaption span { color: var(--muted); font-size: 12px; }
.legend { display: flex; gap: 18px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--paper-deep); }
.legend .ask-key { background: var(--ink); }
.grouped-bars { height: 385px; margin-top: 30px; padding: 25px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 88px); }
.benchmark { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars { width: 100%; height: 305px; display: flex; gap: 6px; align-items: end; justify-content: center; }
.bars i { position: relative; display: block; width: 35%; height: var(--height); max-width: 56px; border-radius: 7px 7px 0 0; background: var(--paper-deep); animation: grow-y 1s both .2s; transform-origin: bottom; }
.bars i.ask { background: var(--ink); }
.bars b { position: absolute; top: -23px; width: 100%; text-align: center; font: 500 10px "DM Mono", monospace; }
.benchmark > span { min-height: 44px; padding-top: 10px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.3; }
.chart-source { margin: 24px 0 0; color: var(--muted); font-size: 10px; }

.closing { min-height: 620px; padding: 100px clamp(20px, 8vw, 120px); display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 60px; background: var(--coral); }
.closing-mark { font: 600 clamp(230px, 30vw, 460px)/.7 "Newsreader", serif; color: rgba(24,35,33,.15); }
.closing h2 { max-width: 860px; }
.closing .button-light { background: rgba(255,255,255,.18); }
footer { padding: 36px clamp(20px, 5vw, 80px); display: flex; justify-content: space-between; gap: 30px; color: var(--muted); font-size: 11px; }
footer p { margin: 0; }

.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.reveal-enabled .reveal:not(.visible) { opacity: 0; transform: translateY(18px); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 1020px) {
  nav { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; }
  .question-world { min-height: 560px; max-width: 680px; width: 100%; margin: 0 auto; }
  .why-grid, .framework-head, .impact-grid { grid-template-columns: 1fr; }
  .framework-cards { grid-template-columns: 1fr; }
  .framework-card { min-height: 370px; }
  .plot-grid { grid-template-columns: 1fr; }
  .closing { grid-template-columns: 1fr; }
  .closing-mark { display: none; }
}
@media (max-width: 700px) {
  .site-header { height: 62px; padding: 0 18px; }
  .header-links { gap: 12px; }
  .hero { min-height: auto; padding: 55px 20px 48px; }
  h1 { font-size: clamp(49px, 16vw, 72px); }
  .question-world { min-height: 540px; transform: scale(.92); margin-top: -20px; }
  .orbit-two { width: 470px; height: 470px; }
  .q-one { left: -2%; }
  .q-two { right: -2%; }
  .q-three { left: -1%; }
  .q-four { right: -1%; }
  .question-card { width: 180px; }
  .question-card p { font-size: 16px; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers div:nth-child(2) { border-right: 0; }
  .numbers div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding: 78px 20px; }
  .section-label { margin-bottom: 45px; }
  .contrast, .takeaways { grid-template-columns: 1fr; }
  .contrast div + div, .takeaways article + article { border-left: 0; border-top: 1px solid var(--line); }
  .gap-plot { grid-template-columns: 1fr 75px 1fr; }
  .impact-chart { min-height: 520px; padding: 20px 15px; }
  .grouped-bars { gap: 9px; }
  footer { flex-direction: column; }
}
@media (max-width: 470px) {
  .brand span:last-child { display: none; }
  .question-world { min-height: 490px; transform: scale(.82); transform-origin: top center; margin-bottom: -80px; }
  .q-two, .q-four { right: -10%; }
  .q-one, .q-three { left: -10%; }
  .cta-row .button { width: 100%; }
  .axis-labels { margin-left: 78px; margin-right: 55px; }
  .bar-row { grid-template-columns: 66px 1fr 46px; gap: 7px; }
}