.story-body {
  background:
    radial-gradient(circle at 8% 18%, rgba(49, 91, 135, .08), transparent 27rem),
    radial-gradient(circle at 96% 72%, rgba(22, 115, 74, .08), transparent 30rem),
    var(--paper);
}

.story-topbar { min-height: 122px; }
.story-topbar > div { min-width: 280px; }
.story-topbar .site-nav { max-width: 850px; justify-content: flex-end; flex-wrap: wrap; }

.story-page { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 34px 0 90px; }

.story-hero {
  padding: clamp(25px, 5vw, 52px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .85fr);
  gap: 40px;
  color: #f5fbf8;
  background:
    radial-gradient(circle at 95% 5%, rgba(169, 221, 194, .22), transparent 34%),
    linear-gradient(130deg, #173529, #264f40 72%, #315b4a);
  box-shadow: var(--shadow);
}
.story-hero h2 { max-width: 720px; margin: 8px 0 14px; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 60px); font-weight: 500; line-height: 1.04; }
.story-hero-copy > p:not(.eyebrow) { max-width: 690px; margin: 0; color: #d3e2db; font-size: 16px; }
.story-hero .story-instruction { margin-top: 20px !important; color: #9fd5bb !important; font-size: 12px !important; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.story-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.story-metrics div { min-height: 112px; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.07); }
.story-metrics strong { font-family: Georgia, serif; font-size: 31px; font-weight: 500; line-height: 1; }
.story-metrics span { margin-top: 8px; color: #bcd1c7; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .07em; }

.measurement-note { margin: 16px 0 18px; padding: 16px 19px; border: 1px solid #d8cce1; border-radius: 13px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 18px; align-items: start; color: #5a5360; background: #f7f1fa; font-size: 13px; }
.measurement-note strong { color: #603f78; }
.measurement-note b { color: #453b4c; }

.overlap-thesis {
  margin: 18px 0 22px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #d7dde7;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr);
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #f6f9fd, #fbfdf8);
  box-shadow: 0 12px 34px rgba(36, 58, 83, .07);
}
.overlap-thesis figure { margin: 0; }
.overlap-thesis img { width: 100%; height: auto; border-radius: 13px; display: block; background: #fff; }
.overlap-thesis figcaption { margin-top: 8px; color: #6c7680; font-size: 10px; text-align: center; }
.overlap-thesis h2 { margin: 6px 0 12px; color: #233f35; font-family: Georgia, serif; font-size: clamp(25px, 3vw, 37px); font-weight: 500; line-height: 1.08; }
.overlap-thesis > div > p:not(.eyebrow) { margin: 0; color: #53605a; font-size: 14px; line-height: 1.65; }
.overlap-legend { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.overlap-legend span { padding: 7px 9px; border: 1px solid; border-radius: 999px; font-size: 10px; }
.overlap-legend .ai-region { color: #274a7a; border-color: #b9cce7; background: #eef5ff; }
.overlap-legend .shared-region { color: #315a46; border-color: #a9d1b9; background: #eef9f1; }
.overlap-legend .human-region { color: #6b5635; border-color: #e3cda9; background: #fff9ec; }
.manual-audit-note { padding: 13px 15px; border-left: 3px solid #315b87; border-radius: 0 9px 9px 0; color: #52606d; background: rgba(235, 243, 252, .8); font-size: 12px; line-height: 1.55; }
.manual-audit-note strong { color: #294e78; }
.case-study-note { margin: 15px 0; padding: 14px 16px; border: 1px solid #bcd8c9; border-radius: 10px; color: #496057; background: #eff8f3; font-size: 12px; line-height: 1.55; }
.case-study-note strong { color: #265b43; }

.story-toolbar { position: sticky; top: 0; z-index: 10; margin: 20px 0; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgba(246,244,237,.94); backdrop-filter: blur(10px); box-shadow: 0 5px 22px rgba(38,48,43,.06); }
.story-toolbar p { margin: 0; color: #59645e; font-size: 12px; }
.story-toolbar > div { display: flex; gap: 6px; }
.story-toolbar button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: #4d5853; background: white; cursor: pointer; font-size: 11px; font-weight: 750; }
.story-toolbar button:hover { color: white; background: #2b5645; border-color: #2b5645; }

.research-timeline { position: relative; margin: 28px auto 0; padding: 8px 0 8px 70px; }
.research-timeline::before { content: ""; position: absolute; left: 27px; top: 48px; bottom: 48px; width: 3px; border-radius: 99px; background: linear-gradient(#87b69f, #315b87 46%, #ad6c45 78%, #704b8d); }

.timeline-boundary { position: relative; min-height: 78px; padding: 18px 22px; border-radius: 14px; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 16px; align-items: center; color: #f4fbf7; background: #1d4335; box-shadow: var(--shadow); }
.timeline-boundary::before, .timeline-step::before { content: ""; position: absolute; left: -53px; top: 28px; width: 17px; height: 17px; border: 5px solid var(--paper); border-radius: 50%; background: #418468; box-shadow: 0 0 0 2px #a8c9b8; }
.timeline-boundary > span { color: #9fd5bb; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.timeline-boundary h3 { margin: 3px 0 3px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.timeline-boundary p { margin: 0; color: #c6d9d0; }
.timeline-boundary .eyebrow { color: #9fd5bb; }
.timeline-end { margin-top: 18px; background: linear-gradient(125deg, #4c365c, #704b8d); }
.timeline-end::before { background: #704b8d; box-shadow: 0 0 0 2px #c7afd8; }
.timeline-end > span, .timeline-end .eyebrow { color: #dcc8e9; }
.timeline-end p { color: #e5dced; }

.timeline-step { position: relative; margin: 16px 0; }
.timeline-step::before { top: 25px; width: 13px; height: 13px; left: -51px; background: #315b87; box-shadow: 0 0 0 2px #9eb7d0; }
.timeline-step:nth-of-type(n+8)::before { background: #9b6722; box-shadow: 0 0 0 2px #d9bd95; }
.timeline-step > summary { min-height: 78px; padding: 14px 54px 14px 15px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center; list-style: none; background: var(--card); box-shadow: 0 7px 25px rgba(38,48,43,.05); cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.timeline-step > summary::-webkit-details-marker { display: none; }
.timeline-step > summary:hover { transform: translateY(-1px); border-color: #b7c9c0; box-shadow: 0 10px 30px rgba(38,48,43,.09); }
.timeline-step > summary::after { content: "+"; position: absolute; right: 18px; top: 24px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: white; background: #315b87; font-size: 18px; line-height: 1; }
.timeline-step[open] > summary { border-color: #b6c9bf; border-radius: 14px 14px 0 0; background: #fbfffC; }
.timeline-step[open] > summary::after { content: "−"; background: var(--green); }
.step-number { width: 39px; height: 39px; border-radius: 11px; display: grid; place-items: center; color: white; background: #315b87; font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.step-summary { min-width: 0; display: grid; }
.experiment-range { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.step-summary strong { margin-top: 2px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.step-summary small { margin-top: 3px; color: var(--muted); font-size: 12px; }

.step-details { padding: 22px; border: 1px solid #b6c9bf; border-top: 0; border-radius: 0 0 14px 14px; background: rgba(255,254,249,.94); }
.evidence-grid { display: grid; gap: 8px; }
.evidence-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.evidence-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence-grid > div { min-height: 82px; padding: 13px; border: 1px solid #e0e2dc; border-radius: 10px; background: #f8f7f2; }
.evidence-grid b { display: block; color: #254a3b; font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1; }
.evidence-grid span { display: block; margin-top: 7px; color: #69736e; font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; }
.fact-list { margin: 17px 0 0; padding-left: 20px; color: #505b55; font-size: 13px; }
.fact-list li + li { margin-top: 6px; }
.fact-list code { padding: 1px 4px; border-radius: 4px; background: #eceee9; }

.paper-paragraph { margin-top: 18px; padding: 16px 18px; border-left: 4px solid #704b8d; border-radius: 8px; background: #f7f1fa; }
.paper-paragraph h4 { margin: 0 0 6px; color: #704b8d; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.paper-paragraph p { margin: 0; color: #4e4853; font-family: Georgia, serif; font-size: 14px; line-height: 1.65; }

.method-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.method-flow span { padding: 8px 10px; border: 1px solid #d9ded8; border-radius: 8px; color: #44514b; background: #f7f8f4; font-size: 12px; font-weight: 700; }
.method-flow i { color: #779085; font-style: normal; }

.compact-table { border: 1px solid #dde0da; border-radius: 10px; overflow: hidden; }
.table-row { min-height: 43px; padding: 9px 12px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; align-items: center; font-size: 12px; }
.table-row + .table-row { border-top: 1px solid #e3e5df; }
.table-row:nth-child(odd):not(.table-head) { background: #faf9f5; }
.table-row span:not(:first-child) { font-variant-numeric: tabular-nums; }
.table-head { color: #66706b; background: #eef0ec; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.three-columns .table-row, .compact-table.three-columns .table-row { grid-template-columns: 1.25fr .7fr 1fr; }

.result-callout { margin: 14px 0 0; padding: 11px 13px; border-radius: 8px; color: #26533f; background: var(--green-soft); font-size: 12px; font-weight: 650; }
.result-callout.warning { color: #714a19; background: #f7ecd9; }

.comparison-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comparison-cards article { padding: 16px; border: 1px solid #e1e2dd; border-radius: 11px; background: #f8f7f2; }
.comparison-cards article.winner { border-color: #b9d9c9; background: #eef8f2; }
.comparison-cards span, .comparison-cards small { display: block; color: #67716c; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.comparison-cards strong { display: block; margin: 5px 0 4px; color: #2e5142; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.comparison-cards p { margin: 10px 0 0; color: #5c6661; font-size: 12px; }

.model-mix { height: 68px; border-radius: 11px; display: flex; gap: 3px; overflow: hidden; }
.model-mix span { width: var(--share); min-width: 80px; padding: 10px; display: flex; flex-direction: column; justify-content: center; color: white; background: #315b87; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.model-mix span:nth-child(2) { background: #704b8d; }
.model-mix span:nth-child(3) { background: #9b6722; }
.model-mix span:nth-child(4) { background: #16734a; }
.model-mix b { display: block; margin-top: 3px; font-size: 18px; }

.method-chips { margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.method-chips li { padding: 6px 8px; border-radius: 7px; color: #4f5d57; background: #edf0eb; font-size: 10px; font-weight: 700; }

.metric-definition { margin: 14px 0 0; color: #5a6560; font-size: 12px; }
.example-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.example-grid article { padding: 14px; border: 1px solid #d5dce3; border-radius: 10px; background: #f3f7fb; }
.example-grid span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.example-grid p { margin: 7px 0; color: #414e58; font-family: Georgia, serif; font-size: 13px; }
.example-grid small { color: #68737c; font-size: 10px; }

.final-takeaway { margin: 24px 0 0 70px; padding: 24px; border: 1px solid #d1d8d3; border-radius: 16px; background: #fffef9; box-shadow: var(--shadow); }
.final-takeaway ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 9px; color: #4f5a54; }
.final-takeaway strong { color: #274c3e; }

@media (max-width: 900px) {
  .story-topbar { align-items: flex-start; flex-direction: column; }
  .story-topbar .site-nav { justify-content: flex-start; }
  .story-hero { grid-template-columns: 1fr; }
  .overlap-thesis { grid-template-columns: 1fr; }
  .evidence-grid.four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
  .story-page { width: min(100% - 20px, 1120px); padding-top: 14px; }
  .story-hero { padding: 24px 20px; border-radius: 15px; }
  .story-metrics { grid-template-columns: 1fr 1fr; }
  .story-metrics div { min-height: 90px; padding: 12px; }
  .story-metrics strong { font-size: 25px; }
  .measurement-note { grid-template-columns: 1fr; gap: 4px; }
  .overlap-thesis { padding: 16px; gap: 18px; }
  .story-toolbar { position: static; align-items: flex-start; }
  .story-toolbar p { display: none; }
  .research-timeline { padding-left: 37px; }
  .research-timeline::before { left: 13px; }
  .timeline-boundary { grid-template-columns: 1fr; gap: 4px; }
  .timeline-boundary::before, .timeline-step::before { left: -32px; }
  .timeline-step > summary { padding: 13px 48px 13px 12px; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .step-number { width: 34px; height: 34px; }
  .step-summary strong { font-size: 17px; }
  .step-summary small { font-size: 11px; }
  .step-details { padding: 15px; }
  .evidence-grid.four, .evidence-grid.three, .comparison-cards, .example-grid { grid-template-columns: 1fr; }
  .table-row { grid-template-columns: .7fr 1fr .7fr .7fr; gap: 6px; padding: 8px; }
  .three-columns .table-row, .compact-table.three-columns .table-row { grid-template-columns: 1fr .65fr 1fr; }
  .model-mix { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .model-mix span { width: auto; min-width: 0; }
  .final-takeaway { margin-left: 37px; }
}