/* Aether Report 2026: an interactive study.
   A printed-report page: a bone-coloured reading column beside a fixed dark plate that carries the chart. */

:root {
  --stage: #161c1a;
  --stage-2: #1f2725;
  --paper: #e3e2da;
  --paper-2: #d6d5cb;
  --ink: #161c1a;
  --soft: #424a46;
  --link: #24503f;
  --on-dark: #e3e2da;
  --on-dark-soft: #b5bab2;
  --river: #62b79b;
  --fixed: #6f817a;
  --batch: #e3e2da;
  --gap: #e48e66;

  --step-small: 0.9375rem;
  --step-ui: 1.0625rem;
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  --step-title: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);

  --margin: clamp(20px, 5vw, 72px);
  --measure: 46ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "STIX Two Text", "Times New Roman", Times, serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
a:hover { text-decoration-thickness: 0.12em; }

:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 20;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
}
.skip:focus { top: 12px; }

/* ---------- Two halves ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.stage {
  position: sticky; top: 0; height: 100svh;
  background: var(--stage); color: var(--on-dark);
  overflow: hidden;
}

.stage-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 50%;
  transition: opacity 1.6s var(--ease), visibility 0s linear 1.6s;
}

.stage-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px var(--margin);
  background: var(--stage); color: var(--on-dark);
  font-size: var(--step-small); line-height: 1.4;
  transition: opacity 1.2s var(--ease), visibility 0s linear 1.2s;
}

.stage-chart {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 44px) var(--margin);
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s var(--ease), visibility 0s linear 1.2s;
}

.stage[data-mode="chart"] .stage-chart { opacity: 1; visibility: visible; transition-delay: 0.2s, 0s; }
.stage[data-mode="chart"] .stage-photo,
.stage[data-mode="chart"] .stage-caption { opacity: 0; visibility: hidden; }

.stage-note { font-size: var(--step-small); color: var(--on-dark-soft); }

.readout { margin-top: 18px; min-height: 7rem; display: flex; flex-direction: column; gap: 2px; }
.readout-value { font-size: var(--step-title); line-height: 1; letter-spacing: -0.026em; color: var(--on-dark); }
.readout-label { font-size: var(--step-small); color: var(--on-dark-soft); max-width: 40ch; line-height: 1.35; }
.readout.swap { animation: swap 0.5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.chart { flex: 1 1 auto; min-height: 0; width: 100%; margin-top: 12px; display: block; }
.chart text { font-family: inherit; font-size: 15px; fill: var(--on-dark-soft); }
.chart .tick { stroke: var(--on-dark); stroke-opacity: 0.12; }
.chart .rating { stroke: var(--river); stroke-opacity: 0.5; }
.chart .rating-label { fill: var(--river); }
.chart .river { fill: var(--river); }
.chart .fixed { fill: var(--fixed); }
.chart .batch { fill: var(--batch); }
.chart .gap { fill: var(--gap); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: var(--step-small); color: var(--on-dark); }
.legend li { display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.6s var(--ease); }
.legend li.on { opacity: 1; }
.sw { display: inline-block; width: 14px; height: 14px; flex: none; }
.sw-river { background: var(--river); }
.sw-fixed { background: var(--fixed); }
.sw-batch { background: var(--batch); }
.sw-gap { background: var(--gap); }

/* ---------- Reading column ---------- */

.column { background: var(--paper); }

.step {
  min-height: 82svh;
  padding: 14svh var(--margin) 14svh;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1em;
}
.step > * { max-width: var(--measure); }
.step-cover { min-height: 100svh; justify-content: flex-start; padding-top: 28px; gap: 1.3em; }
.step-last { min-height: 100svh; }

.masthead {
  max-width: none; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  margin-bottom: clamp(36px, 12svh, 120px);
}
.wordmark { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.masthead nav { display: flex; gap: 20px; font-size: var(--step-ui); }
.masthead nav a { color: var(--ink); padding: 8px 0; }

h1, h2 { font-weight: 400; letter-spacing: -0.026em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--step-title); }
h2 { font-size: var(--step-head); }

.lead { font-size: var(--step-lead); line-height: 1.4; }
.plain { color: var(--soft); }

.button {
  display: inline-block; padding: 14px 26px;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: var(--step-ui); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.button:hover { background: #2b3733; transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #fff; }
.button-light:focus-visible { outline-color: var(--paper); }

/* Quiet figure lines */
.figures { margin-top: 0.6em; display: grid; gap: 22px; }
.figures > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
.figures dt { text-align: right; font-size: var(--step-lead); font-weight: 600; white-space: nowrap; }
.figures dd { color: var(--soft); font-size: var(--step-ui); line-height: 1.4; }

/* Entrance: heading, then text, then figures, once, as a step arrives */
.js .step > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .step.in > * { opacity: 1; transform: none; }
.js .step.in > :nth-child(2) { transition-delay: 0.08s; }
.js .step.in > :nth-child(3) { transition-delay: 0.16s; }
.js .step.in > :nth-child(4) { transition-delay: 0.24s; }
.js .step-cover > * { opacity: 1; transform: none; }
.js .step-cover.in > :nth-child(n+2) { animation: rise 0.8s var(--ease) both; }
.js .step-cover.in > :nth-child(3) { animation-delay: 0.1s; }
.js .step-cover.in > :nth-child(4) { animation-delay: 0.2s; }
.js .step-cover.in > :nth-child(5) { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Full-width: the figures ---------- */

.figures-section { background: var(--stage); color: var(--on-dark); padding: clamp(88px, 14vw, 200px) var(--margin); }
.figures-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; max-width: 1500px; margin: 0 auto; }
.figures-head { display: grid; gap: 1.1em; max-width: 40ch; }
.figures-head p { color: var(--on-dark-soft); }

.table-wrap { min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-ui); }
caption { text-align: left; color: var(--on-dark-soft); font-size: var(--step-small); padding-bottom: 14px; }
th, td { padding: 9px 12px; text-align: right; font-weight: 400; vertical-align: bottom; }
thead th { font-size: var(--step-small); color: var(--on-dark-soft); line-height: 1.25; font-weight: 400; }
th[scope="row"], thead th:first-child { text-align: left; padding-left: 0; white-space: nowrap; }
tbody tr:nth-child(odd) { background: var(--stage-2); }
tbody th[scope="row"] { padding-left: 12px; }
tr.total { background: var(--on-dark) !important; color: var(--ink); font-weight: 600; }
tr.total th, tr.total td { color: var(--ink); }

/* ---------- Full-width: method ---------- */

.method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.method-photo { position: relative; min-height: 100%; background: var(--stage); }
.method-photo img { width: 100%; height: 100%; min-height: 70svh; object-fit: cover; object-position: 50% 62%; }
.method-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px var(--margin); background: var(--stage); color: var(--on-dark); font-size: var(--step-small); line-height: 1.4; }
.method-text { padding: clamp(72px, 10vw, 160px) var(--margin); display: flex; flex-direction: column; gap: 1.1em; justify-content: center; }
.method-text > * { max-width: var(--measure); }
.assumptions { display: grid; gap: 14px; font-size: var(--step-ui); line-height: 1.45; }
.assumptions strong { font-weight: 600; }
code { font-family: inherit; font-style: italic; }

/* ---------- Footer: the last photograph carries the name ---------- */

.colophon { position: relative; min-height: 86svh; display: flex; flex-direction: column; justify-content: space-between; background: var(--stage); color: var(--on-dark); overflow: hidden; padding: 32px var(--margin) 28px; }
.colophon-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: brightness(0.5); }
.colophon-top, .colophon-bottom { position: relative; }
.colophon-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.colophon nav { display: flex; flex-direction: column; gap: 4px; }
.colophon a { color: var(--on-dark); }
.colophon nav a { padding: 6px 0; font-size: var(--step-ui); }
.colophon-contact { max-width: 34ch; font-size: var(--step-ui); line-height: 1.45; }
.colophon-name { font-size: 11.4vw; line-height: 0.95; letter-spacing: -0.03em; white-space: nowrap; margin: 0 0 28px -0.04em; }
.credits { font-size: var(--step-small); line-height: 1.5; max-width: 110ch; color: var(--on-dark); }

.noscript { padding: 16px var(--margin); background: var(--ink); color: var(--paper); }

/* ---------- Phone: the stage sits on top, the sheet slides under it ---------- */

@media (max-width: 860px) {
  .split { display: block; }
  .stage { height: 50svh; min-height: 330px; z-index: 5; }
  .stage-chart { padding: 14px 16px 12px; }
  .readout { margin-top: 6px; min-height: 0; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
  .readout-value { font-size: var(--step-head); }
  .readout-label { font-size: var(--step-small); max-width: none; flex: 1 1 10rem; }
  .chart { margin-top: 4px; }
  .legend { margin-top: 6px; gap: 4px 14px; font-size: var(--step-small); }
  .stage-caption { padding: 14px 16px; }
  .step { min-height: 66svh; padding: 40px var(--margin) 64px; justify-content: flex-start; scroll-margin-top: max(330px, 50svh); }
  .step-cover { min-height: 0; padding-top: 24px; }
  .step-last { min-height: 90svh; }
  .masthead { margin-bottom: 32px; }
  .figures > div { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 14px; }
  .figures-inner { grid-template-columns: minmax(0, 1fr); }
  th, td { padding: 8px 6px; }
  .method { grid-template-columns: minmax(0, 1fr); }
  .method-photo img { min-height: 0; height: 56svh; }
  .colophon { min-height: 90svh; }
  .colophon-name { font-size: 11vw; }
}

@media (max-width: 420px) {
  .masthead nav { gap: 14px; }
  th, td { padding: 7px 4px; }
  tbody th[scope="row"] { padding-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .step > * { opacity: 1; transform: none; }
}

.plate { margin-top: 1.6em; }
.plate img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.plate figcaption { margin-top: 12px; font-size: var(--step-small); line-height: 1.4; color: var(--on-dark-soft); }