:root {
  --paper: #f6f3eb;
  --surface: #fffdf8;
  --ink: #18211d;
  --muted: #59645f;
  --faint: #7e8883;
  --line: #cfcfc5;
  --line-dark: #9ea59f;
  --green: #315f4b;
  --green-soft: #dfe9df;
  --yellow: #eadc9a;
  --gold: #a66b00;
  --moly: #2775a8;
  --warn: #a24d32;
  --sans: "IBM Plex Sans", sans-serif;
  --serif: "Source Serif 4", serif;
  --mono: "IBM Plex Mono", monospace;
  --shell: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: var(--yellow); }
a { color: inherit; }
button, select { font: inherit; }
sub { line-height: 0; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.page-shell { width: min(var(--shell), calc(100% - 2 * var(--pad))); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 var(--pad);
  background: rgba(246, 243, 235, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .01em; }
.brand-mark { height: 22px; display: flex; align-items: end; gap: 3px; }
.brand-mark i { display: block; width: 4px; background: var(--green); }
.brand-mark i:nth-child(1) { height: 11px; }
.brand-mark i:nth-child(2) { height: 21px; }
.brand-mark i:nth-child(3) { height: 15px; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { font-size: 12px; font-weight: 500; text-decoration: none; color: var(--muted); }
.site-header nav a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.campaign-date { justify-self: end; font: 11px var(--mono); color: var(--faint); }

.hero { padding-top: 92px; padding-bottom: 64px; }
.kicker { margin: 0 0 15px; color: var(--green); font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
h1, h2, h3, p { text-wrap: pretty; }
h1 {
  max-width: 760px;
  margin: 0;
  font: 600 clamp(48px, 6vw, 78px)/1.04 var(--serif);
  letter-spacing: -.045em;
}
.hero-intro { max-width: 700px; margin: 30px 0 0; color: var(--muted); font: 400 clamp(20px, 2vw, 25px)/1.5 var(--serif); }
.plain-summary { padding: 24px 0 0 28px; border-top: 4px solid var(--green); border-left: 1px solid var(--line); }
.aside-label, .box-label { display: block; margin-bottom: 18px; color: var(--faint); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.plain-summary p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.plain-summary strong { color: var(--ink); }
.plain-summary .caution { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #704635; }

.campaign-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 72px 0 0; padding: 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line); }
.campaign-facts > div { padding: 22px 20px 24px 0; }
.campaign-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.campaign-facts dt { color: var(--faint); font: 10px var(--mono); text-transform: uppercase; }
.campaign-facts dd { margin: 8px 0 5px; font: 600 30px var(--serif); letter-spacing: -.03em; }
.campaign-facts p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.section { padding: 105px 0; }
.section-heading { display: grid; grid-template-columns: 70px minmax(0, 760px); gap: 26px; align-items: start; margin-bottom: 64px; }
.section-number { margin: 6px 0 0; color: var(--faint); font: 11px var(--mono); }
.section-heading h2 { margin: 0; font: 600 clamp(34px, 4vw, 52px)/1.12 var(--serif); letter-spacing: -.035em; }

.explanation-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(45px, 7vw, 90px); align-items: center; }
.prose { max-width: 610px; }
.prose h3, .reading-guide h3, .interpretation h3, .timeline-explainer h3, .exclusion-notes h3 { margin: 0 0 20px; font: 600 26px/1.25 var(--serif); letter-spacing: -.02em; }
.prose p { margin: 0 0 18px; color: var(--muted); }
.prose .key-sentence { margin-top: 28px; padding: 18px 0 18px 22px; border-left: 3px solid var(--green); color: var(--ink); font: 600 20px/1.45 var(--serif); }
.oect-diagram { margin: 0; }
.oect-diagram svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--surface); }
.oect-diagram figcaption { margin-top: 12px; color: var(--faint); font-size: 12px; line-height: 1.5; }
.electrolyte { fill: #dfe9e3; stroke: var(--green); stroke-width: 1.5; }
.gate { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.gate-line { stroke: var(--ink); stroke-width: 4; }
.channel { fill: none; stroke: var(--green); stroke-width: 16; stroke-linecap: round; }
.contact { fill: #e1e0da; stroke: var(--ink); stroke-width: 1.5; }
.ion { fill: var(--moly); opacity: .75; }
.diagram-title { fill: var(--ink); font: 600 15px var(--sans); }
.diagram-label { fill: var(--muted); font: 12px var(--sans); }
.current-arrow { fill: none; stroke: var(--ink); stroke-width: 2; }

.concept-list { margin-top: 76px; border-top: 1px solid var(--line-dark); }
.concept-list article { display: grid; grid-template-columns: 70px 250px minmax(0, 1fr); gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.concept-list article > span { color: var(--green); font: 500 13px var(--mono); }
.concept-list h3, .reasoning-list h3, .evidence-columns h3 { margin: 0; font: 600 20px/1.35 var(--serif); }
.concept-list p, .reasoning-list p { margin: 0; color: var(--muted); font-size: 15px; }

.measurement-section { background: #ebe8df; border-block: 1px solid var(--line); }
.reasoning-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.reasoning-list article { display: grid; grid-template-columns: 180px 1fr; gap: 25px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.reasoning-list article:nth-child(odd) { padding-right: 35px; }
.reasoning-list article:nth-child(even) { padding-left: 35px; border-left: 1px solid var(--line); }
.protocol-table-wrap { margin-top: 68px; overflow-x: auto; }
.protocol-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.protocol-table caption { padding: 0 0 12px; text-align: left; color: var(--faint); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.protocol-table th, .protocol-table td { padding: 16px 20px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.protocol-table th { width: 220px; font-size: 13px; }
.protocol-table td { color: var(--muted); font-size: 14px; }

.reading-guide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; margin-bottom: 56px; }
.reading-guide > div > p { color: var(--muted); }
.reading-guide dl { margin: 0; border-top: 1px solid var(--line-dark); }
.reading-guide dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.reading-guide dt { font: 600 18px var(--serif); }
.reading-guide dd { margin: 0; color: var(--muted); font-size: 14px; }

.chart-controls { display: grid; grid-template-columns: 1fr 280px auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.chart-controls > label { font-size: 14px; font-weight: 600; }
.chart-controls select { height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--line-dark); border-radius: 0; background: var(--surface); color: var(--ink); font-size: 13px; }
.chart-controls select:focus, .segmented button:focus-visible { outline: 3px solid rgba(49,95,75,.25); outline-offset: 2px; }
.segmented { display: flex; min-height: 44px; border: 1px solid var(--line-dark); }
.segmented button { border: 0; padding: 0 13px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--green); color: white; }

.chart-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); margin-top: 14px; padding: 26px; border: 1px solid var(--line-dark); background: var(--surface); }
.chart-summary { padding: 18px 24px 18px 0; border-right: 1px solid var(--line); }
.chart-summary > span { color: var(--green); font: 500 10px var(--mono); text-transform: uppercase; }
.chart-summary b { display: block; margin: 48px 0 0; font: 600 48px/1 var(--serif); letter-spacing: -.04em; }
.chart-summary small { display: block; margin-top: 7px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.chart-summary p { margin-top: 55px; color: var(--muted); font: 10px/1.6 var(--mono); }
.chart-wrap { position: relative; min-width: 0; padding-left: 18px; }
#calibration-chart { display: block; width: 100%; height: auto; overflow: visible; }
.grid-line { stroke: #dddcd4; stroke-width: 1; }
.axis-label { fill: #5f6964; font: 10px var(--mono); }
.axis-title { fill: #52605a; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.series-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.series-area { opacity: .06; }
.error-line { stroke-width: 1; opacity: .55; }
.data-dot { stroke: var(--surface); stroke-width: 3; cursor: crosshair; transition: r .15s ease; }
.data-dot:hover { r: 8; }
.fit-zone { fill: rgba(49,95,75,.04); stroke: rgba(49,95,75,.4); stroke-width: 1; stroke-dasharray: 5 5; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 160px; padding: 9px 11px; background: var(--ink); color: white; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); font: 10px/1.6 var(--mono); transition: opacity .15s; }
.chart-tooltip.visible { opacity: 1; }
.chart-legend { grid-column: 2; display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 0 0 22px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.chart-legend i.gold { background: var(--gold); }
.chart-legend i.moly { background: var(--moly); }
.chart-legend i.threshold { border-radius: 0; border: 1px dashed var(--green); }

.interpretation { display: grid; grid-template-columns: 280px 1fr; gap: 60px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.interpretation > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.interpretation p { margin: 0; color: var(--muted); font-size: 15px; }
.interpretation strong { color: var(--ink); }
.distinction-box { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; margin-top: 78px; padding: 32px; background: var(--green-soft); border-left: 5px solid var(--green); }
.distinction-box h3 { margin: 0; font: 600 28px/1.25 var(--serif); }
.distinction-box p { margin: 0 0 14px; color: #445149; font-size: 15px; }

.quality-section { background: var(--ink); color: #f5f4ef; }
.quality-section .section-number, .quality-section .kicker { color: #a8c7b8; }
.quality-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; max-width: 920px; margin: 0 0 60px 96px; }
.quality-intro p { margin: 0; color: #b8c0bc; }
.quality-layout { display: grid; grid-template-columns: 1fr 340px; gap: 55px; align-items: start; }
.map-header { display: flex; justify-content: space-between; margin-bottom: 18px; color: #9eaaa4; font: 9px var(--mono); text-transform: uppercase; }
.map-header span:last-child { display: flex; align-items: center; gap: 7px; }
.map-header i { display: inline-block; width: 8px; height: 8px; }
.map-header i.ok { background: #8cb69f; }
.map-header i.bad { background: #c66f53; }
.device-map { display: grid; grid-template-columns: repeat(10, minmax(42px, 1fr)); gap: 7px; }
.device { aspect-ratio: .78; display: flex; flex-direction: column; justify-content: space-between; padding: 7px; background: #2c3833; border: 1px solid #52605a; transition: background .15s; }
.device:hover { background: #3b4c44; }
.device.bad { position: relative; background: #7f3f30; }
.device.bad::before, .device.bad::after { content: ""; position: absolute; top: 50%; left: 18%; width: 64%; height: 1px; background: #f2c4b5; transform: rotate(38deg); }
.device.bad::after { transform: rotate(-38deg); }
.device b { font: 500 10px var(--mono); }
.device span { color: #aeb8b3; font: 8px var(--mono); text-transform: uppercase; }
.device small { color: #9eaaa4; font: 7px var(--mono); }
.exclusion-notes { padding-left: 30px; border-left: 1px solid #52605a; }
.exclusion-notes p { color: #b8c0bc; font-size: 14px; }
.exclusion-notes strong { color: white; }
.exclusion-notes .used-rate { margin-top: 30px; padding-top: 18px; border-top: 1px solid #52605a; }
.exclusion-notes .used-rate strong { color: #b9d9c8; }
.timeline-explainer { display: grid; grid-template-columns: 280px 1fr; gap: 60px; margin-top: 80px; padding-top: 32px; border-top: 1px solid #52605a; }
.timeline-explainer p { margin: 0; color: #b8c0bc; }
.timeline-explainer code { color: white; font: 13px var(--mono); }
.timeline-shell { margin-top: 64px; padding-top: 58px; }
.timeline-axis { min-width: 720px; min-height: 190px; display: grid; grid-template-columns: repeat(13, 1fr); align-items: end; border-bottom: 1px solid #85918b; }
.timeline-block { position: relative; height: var(--h); min-height: 35px; padding: 6px 3px; background: #688476; border-right: 1px solid var(--ink); transition: height .2s, background .2s; }
.timeline-block:nth-child(even) { background: #536b60; }
.timeline-block:hover { height: calc(var(--h) + 10px); background: #7e9c8e; }
.timeline-block.warn { background: #b26047; }
.timeline-block b { display: block; color: white; font: 8px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-block span { position: absolute; bottom: calc(100% + 7px); left: 2px; color: #839089; font: 8px var(--mono); transform: rotate(-55deg); transform-origin: bottom left; }
.timeline-meta { display: flex; justify-content: space-between; margin-top: 9px; color: #89958f; font: 8px var(--mono); }

.evidence-columns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.evidence-columns > div { padding: 30px 45px 0 0; }
.evidence-columns > div + div { padding-left: 45px; border-left: 1px solid var(--line); }
.evidence-columns ul { margin: 22px 0 0; padding: 0; list-style: none; }
.evidence-columns li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.evidence-columns li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 10px; height: 2px; background: var(--green); }
.next-step { display: grid; grid-template-columns: 260px 1fr; gap: 60px; margin-top: 70px; padding: 28px 0; border-block: 1px solid var(--line-dark); }
.next-step span { color: var(--green); font: 500 11px var(--mono); text-transform: uppercase; }
.next-step p { max-width: 730px; margin: 0; font: 400 23px/1.45 var(--serif); }

.data-section { background: #ebe8df; border-top: 1px solid var(--line); }
.data-intro { max-width: 730px; margin: -25px 0 55px 96px; color: var(--muted); }
.download-list { margin-left: 96px; border-top: 1px solid var(--line-dark); }
.download-item { display: grid; grid-template-columns: 45px 1fr auto auto; gap: 20px; align-items: center; padding: 17px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s, padding .15s; }
.download-item:hover { padding-left: 12px; padding-right: 12px; background: var(--surface); }
.download-item .num { color: var(--faint); font: 9px var(--mono); }
.download-item b { font-size: 15px; }
.download-item small { color: var(--faint); font: 9px var(--mono); text-transform: uppercase; }
.download-item .arrow { font-size: 18px; }

footer { min-height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 25px var(--pad); border-top: 1px solid var(--line); background: var(--paper); }
footer p { margin: 0; color: var(--faint); font: 9px var(--mono); text-transform: uppercase; }
footer > a { justify-self: end; color: var(--muted); font: 10px var(--mono); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero-grid, .explanation-grid { grid-template-columns: 1fr; }
  .plain-summary { max-width: 660px; margin-left: auto; }
  .campaign-facts { grid-template-columns: 1fr 1fr; }
  .campaign-facts > div:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .campaign-facts > div:nth-child(4) { border-top: 1px solid var(--line); }
  .reasoning-list { grid-template-columns: 1fr; }
  .reasoning-list article:nth-child(odd), .reasoning-list article:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .reading-guide { grid-template-columns: 1fr; gap: 30px; }
  .chart-controls { grid-template-columns: 1fr 1fr; }
  .chart-controls > label { grid-column: 1 / -1; }
  .quality-intro, .data-intro, .download-list { margin-left: 0; }
  .quality-layout { grid-template-columns: 1fr; }
  .exclusion-notes { max-width: 680px; padding: 25px 0 0; border-left: 0; border-top: 1px solid #52605a; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }
  body { font-size: 16px; }
  .site-header { min-height: 60px; }
  .campaign-date { font-size: 9px; }
  .hero { padding-top: 65px; }
  h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero-intro { font-size: 20px; }
  .plain-summary { margin-left: 0; padding-left: 20px; }
  .campaign-facts { margin-top: 48px; }
  .campaign-facts > div { min-width: 0; padding: 18px 12px 18px 0; }
  .campaign-facts > div + div { padding-left: 15px; }
  .campaign-facts dd { font-size: 25px; }
  .section { padding: 78px 0; }
  .section-heading { grid-template-columns: 36px 1fr; gap: 10px; margin-bottom: 45px; }
  .section-heading h2 { font-size: 36px; }
  .concept-list article { grid-template-columns: 35px 1fr; gap: 10px; }
  .concept-list article > div { grid-column: 2; }
  .concept-list h3 { margin-bottom: 8px; }
  .reasoning-list article { grid-template-columns: 1fr; gap: 8px; }
  .protocol-table { min-width: 640px; }
  .chart-controls { grid-template-columns: 1fr; }
  .chart-controls > label { grid-column: auto; }
  .chart-shell { grid-template-columns: 1fr; padding: 15px 8px; }
  .chart-summary { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .chart-summary b { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 39px; }
  .chart-summary p { margin: 7px 0 0; }
  .chart-wrap { padding: 5px 0 0; overflow-x: auto; }
  #calibration-chart { min-width: 580px; }
  .chart-legend { grid-column: 1; padding-left: 10px; }
  .interpretation, .timeline-explainer { grid-template-columns: 1fr; gap: 8px; }
  .interpretation > div { grid-template-columns: 1fr; gap: 18px; }
  .distinction-box { grid-template-columns: 1fr; gap: 25px; margin-top: 55px; padding: 24px 20px; }
  .quality-intro { grid-template-columns: 1fr; gap: 15px; }
  .device-map { min-width: 620px; }
  .quality-layout > div:first-child, .timeline-shell { overflow-x: auto; }
  .timeline-meta { min-width: 720px; }
  .evidence-columns { grid-template-columns: 1fr; }
  .evidence-columns > div, .evidence-columns > div + div { padding: 28px 0 0; border-left: 0; }
  .evidence-columns > div + div { margin-top: 30px; }
  .next-step { grid-template-columns: 1fr; gap: 15px; }
  .next-step p { font-size: 21px; }
  .download-item { grid-template-columns: 32px 1fr auto; gap: 9px; }
  .download-item small { display: none; }
  footer { grid-template-columns: 1fr auto; }
  footer p { display: none; }
}