/*
MARANATHA / THE LIVING EXCHANGE CONTRACT
Palette: Humus #17130F is the living ground; Root #E9E0CB is readable matter; Chlorophyll #43563B is established growth; Water #AAC7C1 is passive transfer; Sap #D2A044 marks active exchange and nothing else.
Type roles: Newsreader carries belief, prayer, and large display text with a fixed optical character; Archivo Narrow carries field labels, locations, and the farm's own language. No axis is animated state.
Grid: a fixed field rail records the journey while one open specimen column moves between left and right over the film.
Motion verbs: DESCEND moves the camera and pulse; THREAD branches the system line; TRANSFER passes emphasis between chapters; SURFACE resolves the film and invitation.
Pacing: each chapter holds fully still for more than one viewport before TRANSFER begins; the film receives a clean beat between chapters.
Ban list: no wellness beige, fantasy bioluminescence, floating leaves, drone montage, generic eco gradients, stat cards, glass treatment, or opaque full-screen copy panels.
Signature element: the supplied macro film is one uninterrupted water journey and the page's only cinematic surface.
Risk: luminous fungus can turn the farm into science fiction. The safer flat editorial treatment was rejected; biologically restrained light and field-note typography keep the film credible.
*/

@font-face {
  font-family: "Newsreader";
  src: url("/prototype/maranatha/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/prototype/maranatha/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("/prototype/maranatha/assets/fonts/archivo-narrow-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --humus: #17130F;
  --root: #E9E0CB;
  --chlorophyll: #43563B;
  --water: #AAC7C1;
  --sap: #D2A044;
  --root-dim: color-mix(in srgb, var(--root) 67%, var(--humus));
  --humus-wash: rgba(23, 19, 15, 0.76);
  --humus-soft: rgba(23, 19, 15, 0.44);
  --rail: clamp(5.8rem, 7.5vw, 8.2rem);
  --gutter: clamp(1.1rem, 3vw, 3rem);
  --px: 0px;
  --py: 0px;
  --scroll-progress: 0;
  --ease-transfer: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 16px at 390px and 20px at 1440px, clamped outside that interval. */
html {
  background: var(--humus);
  color: var(--root);
  font-size: clamp(16px, calc(0.381vw + 14.51px), 20px);
  scroll-behavior: auto;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--humus);
  color: var(--root);
  font-family: "Newsreader", Georgia, serif;
  line-height: 1.45;
}

a,
button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sap);
  outline-offset: 4px;
}

::selection {
  background: var(--sap);
  color: var(--humus);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--sap);
  background: var(--humus);
  color: var(--root);
  font: 700 0.76rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  translate: 0 -200%;
}

.skip-link:focus {
  translate: 0;
}

.film-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--humus);
}

.film-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--px), var(--py), 0) scale(1.055);
  transform-origin: 50% 50%;
}

.film-stage video::-webkit-media-controls {
  display: none !important;
}

.film-shade,
.film-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.film-shade {
  background: var(--humus);
  opacity: 0.44;
}

.film-grain {
  border: 1px solid rgba(233, 224, 203, 0.08);
}

html[data-media-error="true"] .film-stage video {
  visibility: hidden;
}

html[data-media-error="true"] .film-stage::after {
  position: absolute;
  inset: 8%;
  border: 1px solid var(--water);
  content: "";
}

.load-state {
  position: fixed;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(18rem, calc(100vw - 2rem));
  padding: 1rem;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
  border: 1px solid var(--water);
  background: var(--humus);
  color: var(--root);
  font: 700 0.76rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  translate: -50% -50%;
}

.load-state__track {
  height: 2px;
  grid-column: 1 / -1;
  background: var(--chlorophyll);
}

.load-state__track i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--sap);
}

.load-state[data-error="true"] {
  top: auto;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: min(24rem, calc(100vw - 2rem));
  translate: 0;
}

.no-js .load-state {
  display: none;
}

.site-header {
  position: fixed;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: 4.5rem;
  padding: 0 var(--gutter) 0 1rem;
  grid-template-columns: 12.5rem 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(233, 224, 203, 0.28);
  background: rgba(23, 19, 15, 0.8);
  font: 700 0.76rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: calc(var(--scroll-progress) * 100%);
  height: 2px;
  background: var(--sap);
  content: "";
}

.brand {
  display: inline-flex;
  width: max-content;
  gap: 0.7rem;
  align-items: center;
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--root);
  border-radius: 50%;
  color: var(--sap);
  font: italic 500 1.15rem/1 "Newsreader", serif;
  text-transform: none;
}

.site-header__place {
  margin: 0;
  padding-left: var(--gutter);
  color: var(--water);
}

.site-header__shop {
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--sap);
  text-decoration: none;
}

.field-rail {
  position: fixed;
  z-index: 7;
  top: 4.5rem;
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--rail);
  padding: 1.25rem 0.85rem 1rem;
  flex-direction: column;
  border-right: 1px solid rgba(233, 224, 203, 0.28);
  background: rgba(23, 19, 15, 0.8);
  font-family: "Archivo Narrow", sans-serif;
}

.field-rail__title {
  margin: 0;
  color: var(--water);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Sized to fill the rail so the root branches carry real stroke weight. */
.exchange-map {
  width: 100%;
  height: min(56vh, 30rem);
  margin: 1rem auto;
  overflow: visible;
}

.exchange-map path,
.exchange-map circle {
  fill: none;
  stroke-linecap: square;
}

.exchange-map__bed,
.exchange-map__branch {
  stroke: var(--water);
  stroke-width: 1.15;
}

.exchange-map__pulse {
  stroke: var(--sap);
  stroke-width: 2.1;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.exchange-map__branch {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.exchange-map__nodes circle {
  fill: var(--humus);
  stroke: var(--root);
  stroke-width: 1.4;
}

.field-rail ol {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.field-rail li {
  border-top: 1px solid rgba(233, 224, 203, 0.22);
  color: var(--root-dim);
}

.field-rail li[data-active="true"] {
  color: var(--sap);
}

.field-rail li a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.7rem;
  line-height: 1.1;
  text-decoration: none;
}

main {
  position: relative;
  z-index: 2;
}

.chapter {
  --reveal: 1;
  --clip-top: 0%;
  --clip-bottom: 0%;
  --shift: 0rem;
  position: relative;
  display: flex;
  min-height: 180svh;
  padding: clamp(7rem, 12vh, 10rem) var(--gutter) clamp(5rem, 10vh, 8rem) calc(var(--rail) + var(--gutter));
  align-items: center;
}

.chapter--table {
  min-height: 100svh;
}

.chapter__content {
  position: relative;
  width: min(42rem, 72vw);
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Centered in the band below the fixed header, not the raw viewport. */
.has-js .chapter__content {
  position: fixed;
  z-index: 4;
  top: calc(50% + 2.25rem);
  right: auto;
  left: calc(var(--rail) + var(--gutter));
  margin: 0;
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  transform: translate3d(0, calc(-50% + var(--shift)), 0);
}

.has-js .chapter__content--right {
  right: var(--gutter);
  left: auto;
}

/* Hidden chapters stay in the accessibility tree; the clip-path fully conceals them. */
.has-js .chapter[data-visible="false"] .chapter__content {
  pointer-events: none;
}

.has-js .chapter[data-visible="true"] .chapter__content {
  pointer-events: auto;
}

.chapter__content::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-left: 2px solid var(--water);
  background: var(--humus-wash);
  content: "";
}

.chapter__content--right {
  margin-left: auto;
}

.chapter__content--wide {
  width: min(31.6rem, 62vw);
}

/* Interdependence reads as one closed exchange, so its panel lets more film
   through than the text chapters do. */
.chapter--canopy .chapter__content::before {
  background: rgba(23, 19, 15, 0.5);
}

.chapter--canopy h2 {
  max-width: 14ch;
  font-size: clamp(3rem, 7.2vw, 5.2rem);
}

.hero-copy {
  width: min(64rem, 78vw);
  padding-left: 0;
}

.hero-copy::before {
  display: none;
}

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--water);
  font: 700 0.76rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  font-weight: 430;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(4rem, 9.1vw, 9rem);
  letter-spacing: -0.055em;
  line-height: 0.82;
}

h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.5rem, 7.4vw, 7rem);
  letter-spacing: -0.05em;
  line-height: 0.88;
}

.chapter--root h2 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 4.4vw, 3.16rem);
  line-height: 0.94;
}

/* The land chapter carries the wound, so its panel sits closer to the film.
   It widened when the body copy grew, to keep the long paragraph off the
   bottom of the band rather than shrinking the type back down. */
.chapter--root .chapter__content {
  width: min(36rem, 72vw);
}

.chapter--root .chapter__content::before {
  background: rgba(23, 19, 15, 0.62);
}

/* The break is a vertical figure. Stacked under the paragraph it only ever gets
   the height left over, so where there is width it stands beside the text at
   full height instead. */
@media (min-width: 1200px) {
  .chapter--root .chapter__content {
    display: grid;
    width: min(56rem, 62vw);
    grid-template-rows: auto auto 1fr;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: 2rem;
    align-items: start;
  }

  .chapter--root .chapter__content > :not(.fallow-figure) {
    grid-column: 1;
  }

  /* The rows are explicit because 1 / -1 cannot span implicit ones, and the
     figure would otherwise stretch the eyebrow's row to its own height. */
  .chapter--root .fallow-figure {
    position: relative;
    grid-row: 1 / -1;
    grid-column: 2;
    align-self: stretch;
    min-height: 20rem;
  }

  /* Taken out of flow so the paragraph alone sets the panel height and the
     break runs the full depth of the column beside it. */
  .chapter--root .fallow-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

.transfer-line {
  display: block;
  width: 100%;
  height: 190px;
  margin-top: 1.25rem;
}

.no-js .transfer-figure {
  display: none;
}

.fallow-line {
  display: block;
  width: 100%;
  height: 196px;
  margin-top: 1rem;
}

.no-js .fallow-figure {
  display: none;
}

.chapter__content > p:not(.eyebrow),
.chapter-intro {
  max-width: 40ch;
  margin: 1.5rem 0 0;
  color: var(--root);
  font-size: clamp(1.22rem, 2.05vw, 1.8rem);
  line-height: 1.32;
}

.hero-copy__lede {
  max-width: 42ch !important;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem) !important;
}

.text-link {
  display: inline-flex;
  margin-top: 1.75rem;
  padding-bottom: 0.3rem;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid var(--sap);
  font: 700 0.8rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

/* The pull quote stays above the body size, so the two do not invert. */
.story-quote {
  max-width: 34ch;
  margin: 1.2rem 0 0;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 1px solid var(--sap);
  color: var(--root);
  font-size: clamp(1.3rem, 2.2vw, 1.95rem);
  font-style: italic;
}

.story-quote cite {
  display: block;
  margin-top: 0.55rem;
  color: var(--water);
  font: 700 0.68rem/1 "Archivo Narrow", sans-serif;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.system-lens {
  margin-top: 1.6rem;
}

.exchange-loop {
  display: block;
  width: 100%;
  height: 192px;
}

/* Without scripting there is no canvas, so the written claims carry the
   chapter; with it they stay in the accessibility tree behind the drawing. */
.has-js .lens-claims,
.exchange-reading {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.no-js .exchange-loop,
.no-js .lens-caption,
.no-js .exchange-names,
.no-js .exchange-reading {
  display: none;
}

/* On a narrow panel the ring has no room for labels beside its nodes, so the
   farm's parts are named in a row that lights as the exchange reaches them. */
.exchange-names {
  display: none;
  margin: 0.7rem 0 0;
  color: var(--root-dim);
  font: 700 0.7rem/1.85 "Archivo Narrow", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.system-lens[data-names="on"] .exchange-names {
  display: block;
}

.exchange-names span {
  white-space: nowrap;
  transition: color 0.4s linear;
}

/* The separator carries the row's only break opportunities, so it may not
   inherit the name's nowrap or the seven names run off a phone screen. */
.exchange-names span::after {
  color: var(--water);
  content: " \00B7 ";
  white-space: normal;
}

.exchange-names span:last-child::after {
  content: "";
}

.exchange-names span[data-lit="true"] {
  color: var(--sap);
}

.no-js .system-lens {
  border-top: 1px solid var(--water);
}

.lens-caption {
  max-width: 44ch;
  margin: 0.9rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.32;
}

.lens-panel {
  display: grid;
  padding-top: 1.1rem;
  grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr);
  gap: 1rem;
}

.lens-panel + .lens-panel {
  margin-top: 1.1rem;
  border-top: 1px solid rgba(170, 199, 193, 0.48);
}

.lens-panel h3 {
  margin: 0;
  color: var(--sap);
  font-size: 1.4rem;
  line-height: 1;
}

.lens-panel p {
  max-width: 38ch;
  margin: 0;
}

.chapter--table {
  align-items: flex-end;
}

/* The finale shares its viewport with the footer: center between header and footer. */
.has-js .chapter--table .chapter__content {
  top: calc(50% - 0.25rem);
}

.final-copy {
  width: min(56rem, 78vw);
}

/* Hang the opening quote so the display stack keeps a flush left edge. */
.final-copy h2 {
  max-width: 11ch;
  text-indent: -0.5ch;
}

@supports (hanging-punctuation: first) {
  .final-copy h2 {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

.final-copy__actions {
  display: flex;
  margin-top: 1.8rem;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.final-copy__actions .text-link {
  margin-top: 0;
}

.primary-action {
  display: inline-grid;
  min-height: 3.3rem;
  padding: 0 1.25rem;
  place-items: center;
  border: 1px solid var(--sap);
  background: var(--sap);
  color: var(--humus);
  font: 700 0.8rem/1 "Archivo Narrow", sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 5rem;
  padding: 1.25rem var(--gutter) 1.25rem calc(var(--rail) + var(--gutter));
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: center;
  border-top: 1px solid var(--water);
  background: var(--humus);
  color: var(--root-dim);
  font: 700 0.72rem/1.2 "Archivo Narrow", sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
  text-align: center;
}

.site-footer a {
  width: max-content;
  text-underline-offset: 0.3em;
}

.site-footer a:last-child {
  justify-self: end;
}

.noscript-note {
  position: relative;
  z-index: 10;
  margin: 0;
  padding: 0.8rem var(--gutter);
  border-top: 1px solid var(--sap);
  background: var(--humus);
  color: var(--root);
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 12.5rem 1fr auto;
  }

  .site-header__place {
    display: none;
  }

  .site-header__shop {
    grid-column: 3;
  }

  .chapter__content,
  .chapter__content--wide,
  .hero-copy,
  .final-copy {
    width: min(44rem, calc(100vw - var(--rail) - 2 * var(--gutter)));
  }

  .chapter__content--right {
    margin-left: 0;
  }

}

@media (min-width: 721px) {
  .chapter--table {
    padding-bottom: 2.5rem;
  }
}

/* Between 721 and 900px the lens ball's glare sits behind the bare hero copy. */
@media (min-width: 721px) and (max-width: 900px) {
  .hero-copy h1,
  .hero-copy__lede {
    text-shadow: 0 0.05em 1.4rem rgba(23, 19, 15, 0.9), 0 0 0.4rem rgba(23, 19, 15, 0.65);
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 1rem;
  }

  .site-header {
    min-height: 3.9rem;
    padding: 0 1rem;
    grid-template-columns: 1fr auto;
    background: rgba(23, 19, 15, 0.84);
  }

  .brand__mark {
    width: 1.75rem;
    height: 1.75rem;
  }

  .site-header__shop {
    grid-column: 2;
  }

  .field-rail {
    display: none;
  }

  .film-stage video {
    transform: scale(1.04);
  }

  .film-shade {
    opacity: 0.52;
  }

  .chapter {
    min-height: 175svh;
    padding: 6rem 1rem 4rem;
    align-items: center;
  }

  .chapter--table {
    min-height: 100svh;
    align-items: flex-end;
  }

  .chapter__content,
  .chapter__content--wide,
  .hero-copy,
  .final-copy {
    width: 100%;
    padding: 1.2rem;
  }

  .has-js .chapter__content,
  .has-js .chapter__content--right {
    top: 50%;
    right: 1rem;
    left: 1rem;
    width: auto;
  }

  .exchange-loop {
    height: 168px;
  }

  .fallow-line {
    height: 176px;
    margin-top: 0.9rem;
  }

  .transfer-line {
    height: 168px;
    margin-top: 0.9rem;
  }

  .hero-copy::before {
    display: block;
  }

  h1 {
    font-size: clamp(3.9rem, 18vw, 6rem);
    line-height: 0.86;
  }

  h2 {
    font-size: clamp(3.25rem, 15vw, 5.2rem);
  }

  .chapter--root h2 {
    font-size: clamp(2.75rem, 12vw, 4.5rem);
    line-height: 0.96;
  }

  .chapter__content > p:not(.eyebrow),
  .chapter-intro {
    font-size: 1.24rem !important;
  }

  .hero-copy__lede {
    font-size: 1.34rem !important;
  }

  .has-js .chapter--table .chapter__content {
    top: calc(50% - 1.85rem);
  }

  .lens-panel {
    display: block;
  }

  .lens-panel p {
    margin-top: 0.7rem;
  }

  .final-copy__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-action,
  .final-copy__actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .site-footer {
    padding: 1.5rem 1rem;
    grid-template-columns: 1fr;
  }

  .site-footer p {
    text-align: left;
  }

  .site-footer a:last-child {
    justify-self: start;
  }
}

@media (max-height: 800px) and (min-width: 721px) {
  .chapter__content {
    padding: 1.25rem 1.75rem;
  }

  .eyebrow {
    margin-bottom: 0.8rem;
  }

  h1 {
    font-size: clamp(4rem, 8vw, 7rem);
  }

  h2 {
    font-size: clamp(3.2rem, 5.4vw, 5rem);
  }

  .chapter--canopy h2 {
    font-size: clamp(2.9rem, 4.6vw, 4.2rem);
  }

  .final-copy h2 {
    font-size: clamp(3rem, 5vw, 4.6rem);
  }

  .story-quote {
    font-size: clamp(1.2rem, 1.75vw, 1.55rem);
  }

  .chapter__content > p:not(.eyebrow),
  .chapter-intro {
    margin-top: 1rem;
    font-size: clamp(1.14rem, 1.65vw, 1.5rem);
  }

  .lens-panel {
    padding-top: 0.75rem;
  }

  .lens-panel + .lens-panel {
    margin-top: 0.75rem;
  }

  .lens-panel h3 {
    font-size: 1.15rem;
  }

  .lens-panel p {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .hero-copy__lede {
    font-size: 1.42rem !important;
  }

  .text-link,
  .story-quote,
  .system-lens,
  .final-copy__actions {
    margin-top: 1.25rem;
  }

  .fallow-line {
    height: 112px;
    margin-top: 0.7rem;
  }

  .transfer-line {
    height: 148px;
    margin-top: 0.8rem;
  }

  .exchange-loop {
    height: 172px;
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  .chapter__content,
  .chapter__content--wide,
  .hero-copy,
  .final-copy {
    padding: 0.9rem 1.1rem;
  }

  .eyebrow {
    margin-bottom: 0.65rem;
    font-size: 0.68rem;
  }

  h1 {
    font-size: clamp(3.45rem, 16vw, 4.2rem);
  }

  h2 {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
  }

  .chapter--root h2 {
    font-size: clamp(2.35rem, 10.6vw, 3rem);
  }

  .chapter__content > p:not(.eyebrow),
  .chapter-intro,
  .hero-copy__lede {
    margin-top: 0.8rem;
    font-size: 1.08rem !important;
    line-height: 1.28;
  }

  .text-link,
  .story-quote,
  .system-lens,
  .final-copy__actions {
    margin-top: 0.7rem;
  }

  .chapter--canopy h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .lens-panel {
    padding-top: 0.5rem;
  }

  .lens-panel + .lens-panel {
    margin-top: 0.5rem;
  }

  .lens-panel h3 {
    font-size: 1.05rem;
  }

  .lens-panel p {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  .exchange-loop {
    height: 132px;
  }

  .fallow-line {
    height: 94px;
    margin-top: 0.7rem;
  }

  .transfer-line {
    height: 118px;
    margin-top: 0.7rem;
  }

  .exchange-names {
    margin-top: 0.55rem;
    font-size: 0.64rem;
    line-height: 1.7;
  }

  .lens-caption {
    margin-top: 0.6rem;
    font-size: 0.96rem;
  }

  .final-copy__actions {
    flex-direction: row;
    gap: 0.55rem;
  }

  .primary-action,
  .final-copy__actions .text-link {
    width: auto;
    min-width: 0;
    flex: 1;
    font-size: 0.68rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .film-stage video {
    transform: none;
  }

  .chapter__content {
    clip-path: none;
    transform: translate3d(0, -50%, 0);
  }

  .exchange-map__pulse,
  .exchange-map__branch {
    stroke-dashoffset: 0 !important;
  }
}

@media (forced-colors: active) {
  .film-stage {
    display: none;
  }

  .site-header,
  .field-rail,
  .chapter__content::before,
  .site-footer {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .chapter__content {
    clip-path: none;
    transform: none;
  }
}

@media print {
  .film-stage,
  .load-state,
  .site-header,
  .field-rail {
    display: none !important;
  }

  .chapter,
  .chapter--surface,
  .chapter--table {
    min-height: auto;
    padding: 2rem 0;
    break-inside: avoid;
  }

  .chapter__content,
  .chapter__content--wide,
  .hero-copy,
  .final-copy {
    width: 100%;
    clip-path: none;
    transform: none;
  }

  .site-footer {
    padding-left: 0;
  }
}