/* The retired front-half loader must never become the first production frame. */
.loader {
  display: none !important;
}

.front-half {
  color-scheme: light;
  --ivory: #f6f4ec;
  --home-ivory: #f1f0e8;
  --ink: #144037;
  --ink-strong: #0e372d;
  --muted: #5c7870;
  --mist: #b8ccc4;
  --deep: #051a18;
  --ocean: #072827;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

.front-half {
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-rendering: geometricPrecision;
}

.front-half a {
  color: inherit;
}

.front-half p,
.front-half h1,
.front-half h2,
.front-half h3,
.front-half figure,
.front-half ol {
  margin: 0;
}

.front-half {
  --p: 0;
  position: relative;
  min-height: var(--story-travel, 1600vh);
}

.front-half__travel {
  height: var(--story-travel, 1600vh);
}

.front-half__stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  min-height: 520px;
  background: var(--ivory);
  isolation: isolate;
}

.front-half.is-released .front-half__stage {
  visibility: hidden;
  pointer-events: none;
}

body[data-wheel-owner="front-half"] > .site-header,
body[data-wheel-owner="bridge"] > .site-header {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.shared-world,
.story-state {
  position: absolute;
  inset: 0;
}

.shared-world {
  z-index: 0;
  overflow: hidden;
  background: var(--home-ivory);
  opacity: var(--shared-opacity, 1);
  pointer-events: none;
}

.shared-world__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--shared-x, 0), var(--shared-y, 0), 0) scale(var(--shared-scale, 1));
  transform-origin: 61% 48%;
  will-change: transform;
}

.shared-world__grade {
  position: absolute;
  inset: 0;
  background: rgba(5, 26, 24, var(--shared-veil, 0));
}

.story-state {
  z-index: 2;
  opacity: var(--state-opacity, 0);
  visibility: var(--state-visibility, hidden);
  pointer-events: none;
  will-change: opacity;
}

.story-state[data-interactive="true"] {
  pointer-events: auto;
}

.story-state--light {
  background: rgba(246, 244, 236, var(--state-bg, 1));
  color: var(--ink);
}

.story-state--dark {
  background: rgba(5, 26, 24, var(--state-bg, 1));
  color: var(--ivory);
}

.state-copy,
[data-motion-media],
[data-motion-side] {
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 0), 0) scale(var(--motion-scale, 1));
  opacity: var(--motion-opacity, 1);
  will-change: transform, opacity;
}

.taxonomy,
.microcopy,
.state-count,
.source-link,
figcaption {
  font-size: clamp(8px, 0.6vw, 10px);
  font-weight: 540;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.taxonomy {
  color: inherit;
}

.body-copy {
  font-size: clamp(11px, 0.84vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.body-copy--wide {
  max-width: 44em;
}

.copy-rule {
  display: block;
  width: clamp(104px, 10vw, 160px);
  height: 1px;
  background: rgba(158, 178, 173, 0.72);
}

.copy-rule--wide {
  width: clamp(220px, 23vw, 360px);
}

.state-count {
  position: absolute;
  top: 6.2%;
  right: 4.9%;
  color: var(--muted);
  text-align: right;
}

.state-count--light {
  color: #e8f0e8;
}

.source-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.story-state--dark .source-link,
.story-state--dark figcaption,
.story-state--dark .microcopy {
  color: var(--mist);
}

.source-link:hover,
.source-link:focus-visible {
  color: inherit;
  transform: translateX(4px);
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Home */

.story-state--home {
  color: var(--ink-strong);
}

.home-nav {
  position: absolute;
  top: 4.1%;
  left: 3.05%;
  display: flex;
  gap: 34px;
}

.home-nav a {
  padding: 8px 0;
  font-size: clamp(8px, 0.65vw, 11px);
  font-weight: 540;
  letter-spacing: 0.33em;
  text-decoration: none;
}

.home-nav a:hover,
.home-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.home-scroll-cue {
  position: absolute;
  top: 4.25%;
  left: 45.58%;
  display: grid;
  justify-items: center;
  gap: 23px;
  font-size: clamp(8px, 0.65vw, 11px);
  font-weight: 540;
  letter-spacing: 0.28em;
}

.home-scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: min(14vh, 130px);
  background: #a8b7ba;
}

.home-scroll-cue b {
  position: absolute;
  bottom: -7px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-strong);
}

.home-title {
  position: absolute;
  top: 23.3%;
  left: 3.55%;
}

.home-title h1 {
  display: grid;
  color: var(--ink-strong);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(72px, 6.7vw, 112px);
  font-weight: 200;
  line-height: 1.21;
  letter-spacing: 0.2em;
}

.home-title h1 span:first-child {
  letter-spacing: 0.29em;
}

.home-title p {
  margin-top: 20px;
  padding-left: 4px;
  font-size: clamp(11px, 1.02vw, 17px);
  line-height: 1.78;
  letter-spacing: 0.32em;
}

.chapter-index {
  position: absolute;
  top: 34%;
  right: 1.6%;
  display: grid;
  width: max(14.5%, 210px);
  padding: 0 0 0 28px;
  border-left: 1px solid rgba(135, 166, 158, 0.68);
  color: rgba(145, 171, 163, 0.9);
}

.chapter-index > p,
.evidence-index > p {
  margin-bottom: 15px;
  opacity: 0.62;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.chapter-index button,
.evidence-index button {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  align-items: center;
  width: 100%;
  min-height: 55px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  opacity: 0.58;
  transition: color 180ms ease, opacity 180ms ease, transform 300ms var(--ease);
}

.chapter-index button::before,
.evidence-index button::before {
  position: absolute;
  top: 50%;
  left: -52px;
  width: 52px;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms var(--ease);
}

.chapter-index span {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(12px, 1.08vw, 18px);
  font-weight: 300;
  letter-spacing: 0.05em;
}

.chapter-index b {
  font-size: clamp(7px, 0.6vw, 10px);
  font-weight: 540;
  letter-spacing: 0.17em;
}

.chapter-index i,
.evidence-index i {
  opacity: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 17px;
  font-style: normal;
  transform: translateX(-5px);
  transition: opacity 180ms ease, transform 240ms var(--ease);
}

.chapter-index button:hover,
.chapter-index button:focus-visible,
.evidence-index button:hover,
.evidence-index button:focus-visible,
.evidence-index button.is-active {
  opacity: 1;
  transform: translateX(3px);
}

.chapter-index button:hover::before,
.chapter-index button:focus-visible::before,
.evidence-index button:hover::before,
.evidence-index button:focus-visible::before,
.evidence-index button.is-active::before {
  transform: scaleX(1);
}

.chapter-index button:hover i,
.chapter-index button:focus-visible i,
.evidence-index button:hover i,
.evidence-index button:focus-visible i,
.evidence-index button.is-active i {
  opacity: 1;
  transform: translateX(0);
}

.chapter-index button:focus-visible,
.evidence-index button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

.home-warning {
  position: absolute;
  bottom: 7.6%;
  left: 3.45%;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(28, 69, 59, 0.65);
  font-size: clamp(8px, 0.6vw, 10px);
  font-weight: 540;
  line-height: 1.9;
  letter-spacing: 0.2em;
}

/* Intro */

.story-state--intro {
  color: var(--ink);
}

.intro-mist {
  position: absolute;
  inset: 0 auto 0 0;
  width: 47.25%;
  background: rgba(246, 244, 236, 0.9);
}

.intro-copy {
  position: absolute;
  top: 13.8%;
  left: 4.55%;
  width: 44%;
}

.intro-copy h2 {
  margin-top: 6.1vh;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(54px, 4.9vw, 82px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.intro-copy .body-copy {
  margin: 6.8vh 0 0 6px;
  line-height: 1.78;
}

.intro-copy .copy-rule {
  margin: 7.3vh 0 0 6px;
  width: 210px;
}

.intro-copy .microcopy {
  margin: 2.4vh 0 0 6px;
  color: var(--muted);
}

.intro-watermark {
  position: absolute;
  top: 15.5%;
  right: 3.2%;
  color: rgba(20, 64, 55, 0.07);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(150px, 14.7vw, 245px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
}

.evidence-index {
  position: absolute;
  top: 46.2%;
  right: 4%;
  width: 16%;
  display: grid;
  padding: 0;
  color: #abc7bd;
  font-size: clamp(7px, 0.55vw, 9px);
  font-weight: 540;
  letter-spacing: 0.12em;
}

.evidence-index button {
  grid-template-columns: 34px 1fr 16px;
  min-height: clamp(32px, 4.2vh, 40px);
  color: #abc7bd;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.evidence-index button span {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
}

.evidence-index button b {
  font-size: inherit;
  font-weight: inherit;
}

/* Shared evidence layout */

.story-state--evidence h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(52px, 4.45vw, 74px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.evidence-copy--left {
  position: absolute;
  top: 8.3%;
  left: 5%;
  width: 52%;
}

.evidence-copy--left h2 {
  margin-top: 6.5vh;
}

.evidence-copy--left .copy-rule {
  margin-top: 5.8vh;
}

.evidence-copy--left .body-copy {
  margin-top: 3.1vh;
}

.evidence-copy--left .source-link {
  margin-top: 3.4vh;
}

.evidence-side {
  position: absolute;
}

.evidence-media {
  position: relative;
}

.evidence-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evidence-media figcaption {
  margin-top: 1.6vh;
  color: var(--muted);
  font-size: clamp(7px, 0.54vw, 9px);
  letter-spacing: 0.14em;
}

.continuity-wash {
  position: absolute;
  inset: 0 0 0 auto;
  width: 44.4%;
  background:
    linear-gradient(rgba(246, 244, 236, 0.38), rgba(246, 244, 236, 0.38)),
    url("assets/environment/home-ocean-net.png") center / cover no-repeat;
  opacity: 0.42;
}

.evidence-media--definition {
  position: absolute;
  top: 18.6%;
  right: 8.2%;
  width: 31.1%;
  height: 29.3%;
}

.evidence-media--definition img {
  border: 1px solid rgba(158, 178, 173, 0.65);
}

.evidence-media--definition p {
  margin-top: 8vh;
  font-size: clamp(9px, 0.66vw, 11px);
  font-weight: 540;
  line-height: 2.1;
  letter-spacing: 0.15em;
}

/* Global stocks */

.stocks-state::after {
  content: "";
  position: absolute;
  inset: 0 0 0 52%;
  background: rgba(6, 37, 33, 0.3);
  pointer-events: none;
}

.stocks-state > * {
  z-index: 1;
}

.story-state--evidence .metric {
  margin-top: 8.2vh;
  font-size: clamp(132px, 12.3vw, 205px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric-label {
  margin: 2.8vh 0 0 1.2vw;
  color: var(--mist);
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 540;
  line-height: 2;
  letter-spacing: 0.13em;
}

.stocks-state .copy-rule {
  margin: 4.2vh 0 0 1.2vw;
  background: rgba(158, 178, 173, 0.55);
}

.microcopy--stack {
  line-height: 2.2;
}

.stocks-state .microcopy--stack {
  margin: 3.5vh 0 0 1.2vw;
}

.evidence-side--stocks {
  top: 16.5%;
  left: 55.3%;
  width: 34%;
  z-index: 2;
}

.evidence-media--stocks {
  width: 95%;
  height: 34vh;
  max-height: 324px;
  margin-top: 8.1vh;
}

.evidence-media--stocks img {
  border: 1px solid rgba(158, 178, 173, 0.55);
}

.evidence-side--stocks .source-link {
  margin-top: 1.6vh;
}

/* Bycatch */

.evidence-media--bycatch {
  position: absolute;
  top: 15.4%;
  left: 0;
  width: 62.8%;
  height: 68%;
  overflow: hidden;
}

.evidence-media--bycatch img {
  transform: translate3d(var(--photo-x, 0), var(--photo-y, 0), 0) scale(var(--photo-scale, 1.04));
  transform-origin: 46% 48%;
  will-change: transform;
}

.evidence-media--bycatch span {
  position: absolute;
  inset: 0;
  background: rgba(5, 26, 24, 0.18);
  transition: background 240ms ease;
}

.evidence-media--bycatch figcaption {
  position: absolute;
  top: 100%;
  left: 6.8%;
  width: 80%;
  margin-top: 2vh;
  color: var(--mist);
}

.bycatch-state[data-interactive="true"] .evidence-media--bycatch:hover span {
  background: rgba(5, 26, 24, 0.05);
}

.evidence-side--bycatch {
  top: 11.5%;
  right: 6.8%;
  width: 23.5%;
}

.evidence-side--bycatch h2 {
  margin-top: 5.2vh;
  font-size: clamp(42px, 3.6vw, 60px);
}

.evidence-side--bycatch .copy-rule {
  margin-top: 5.3vh;
}

.evidence-side--bycatch .body-copy {
  margin-top: 3.7vh;
}

.evidence-side--bycatch .source-link {
  margin-top: 3.7vh;
}

/* Bottom trawling */

.story-state--evidence .trawling-title {
  margin-top: 5.2vh;
  font-size: clamp(68px, 5.87vw, 98px);
  line-height: 0.96;
}

.trawling-state .copy-rule {
  margin-top: 5.2vh;
}

.trawling-metric {
  display: flex;
  align-items: center;
  gap: 7vw;
  margin-top: 3.5vh;
}

.trawling-metric strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(58px, 5vw, 84px);
  font-weight: 400;
}

.trawling-metric span {
  color: var(--mist);
  font-size: clamp(8px, 0.66vw, 11px);
  font-weight: 540;
  line-height: 2.15;
  letter-spacing: 0.13em;
}

.trawling-effect {
  margin-top: 8.2vh;
}

.evidence-side--trawling {
  top: 13.8%;
  right: 7.8%;
  width: 30%;
}

.evidence-media--trawling {
  width: 100%;
  height: 28.6vh;
  max-height: 269px;
}

.evidence-media--trawling img {
  object-position: center 74%;
  border: 1px solid rgba(158, 178, 173, 0.5);
}

.evidence-side--trawling .body-copy {
  margin-top: 6.8vh;
}

.evidence-side--trawling .source-link {
  margin-top: 4.5vh;
}

/* Ecosystem reach */

.ecosystem-state .evidence-copy--left {
  left: 5.7%;
  width: 51%;
}

.ecosystem-state .copy-rule {
  margin-top: 4.9vh;
}

.secondary-metric {
  margin-top: 3.2vh;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(70px, 6.5vw, 108px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.ecosystem-state .metric-label {
  margin: 1.6vh 0 0 1vw;
  color: var(--muted);
}

.ecosystem-summary {
  margin: 4.4vh 0 0 1vw !important;
}

.evidence-side--ecosystem {
  top: 14.3%;
  right: 7.3%;
  width: 30%;
}

.evidence-media--ecosystem {
  width: 100%;
  height: 32.6vh;
  max-height: 307px;
}

.evidence-media--ecosystem img {
  border: 1px solid rgba(158, 178, 173, 0.65);
}

.evidence-side--ecosystem .body-copy {
  margin-top: 7vh;
}

.evidence-side--ecosystem .source-link {
  margin-top: 4.7vh;
}

/* Human dependence */

.dependence-taxonomy {
  position: absolute;
  top: 8.7%;
  left: 5%;
}

.evidence-media--dependence {
  position: absolute;
  top: 17%;
  left: 6.55%;
  width: 23.3%;
  height: 37.7%;
}

.evidence-media--dependence img {
  object-position: top center;
  border: 1px solid rgba(158, 178, 173, 0.5);
}

.evidence-side--dependence {
  top: 16.5%;
  left: 37.1%;
  width: 48%;
}

.evidence-side--dependence h2 {
  font-size: clamp(62px, 5.27vw, 88px);
  line-height: 0.98;
}

.evidence-side--dependence .copy-rule {
  width: 270px;
  margin-top: 5.5vh;
}

.evidence-side--dependence .body-copy {
  margin-top: 3.8vh;
}

.dependence-risks {
  margin-top: 4.5vh;
}

.evidence-side--dependence .source-link {
  margin-top: 2.3vh;
}

.dependence-equation {
  margin-top: 4.7vh;
}

/* Management */

.management-state .evidence-copy--left h2 {
  margin-top: 6.2vh;
  font-size: clamp(68px, 5.75vw, 96px);
  line-height: 0.98;
}

.management-list {
  margin-top: 4.5vh;
  color: var(--muted);
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 540;
  line-height: 2.3;
  letter-spacing: 0.15em;
}

.management-warning {
  margin-top: 11vh;
  color: var(--ink);
}

.evidence-side--management {
  top: 14.3%;
  right: 8.2%;
  width: 31%;
}

.evidence-media--management {
  height: 35.3vh;
  max-height: 332px;
}

.evidence-media--management img {
  border: 1px solid rgba(158, 178, 173, 0.65);
}

.evidence-side--management .body-copy {
  margin: 6.4vh 0 0 -1.2vw;
}

.evidence-side--management .source-link {
  margin: 4.5vh 0 0 -1.2vw;
}

.management-continue {
  position: absolute;
  right: 4.5%;
  bottom: 7.4%;
  color: var(--muted);
}

/* Evidence to pressure */

.story-state--handoff {
  background: var(--ocean);
  color: var(--ivory);
}

.handoff-photo {
  position: absolute;
  inset: 0;
  background: url("assets/game/approved-ocean-continuity.png") center / cover no-repeat;
  opacity: 0.84;
  filter: saturate(0.72) brightness(1.11) contrast(0.91);
  transform: translate3d(var(--handoff-x, 0), var(--handoff-y, 0), 0) scale(var(--handoff-scale, 1));
  will-change: transform;
}

.handoff-copy {
  position: absolute;
  top: 9.8%;
  left: 4.65%;
}

.handoff-copy .copy-rule {
  margin-top: 2.4vh;
}

.handoff-copy h2,
.handoff-pressure-copy h2 {
  margin-top: 5.9vh;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(61px, 5.15vw, 86px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.handoff-note {
  position: absolute;
  bottom: 13.5%;
  left: 4.9%;
  color: var(--mist);
}

.handoff-label {
  position: absolute;
  top: 9.8%;
  right: 6.7%;
  color: #8caba1;
}

.handoff-lower {
  position: absolute;
  inset: 54% 0 0;
  background: rgba(23, 58, 53, 0.18);
}

.handoff-ghost {
  position: absolute;
  top: 17%;
  left: 4.65%;
  color: rgba(246, 244, 236, var(--handoff-ghost-opacity, 0));
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(61px, 5.15vw, 86px);
  line-height: 0.94;
}

.handoff-pressure-copy {
  position: absolute;
  top: 32.3%;
  left: 37.1%;
}

.handoff-pressure-copy h2 {
  font-size: clamp(66px, 5.5vw, 92px);
}

.pressure-subject {
  position: absolute;
  z-index: 5;
  top: 52%;
  left: 77%;
  width: clamp(224px, 21.2vw, 338px);
  height: clamp(145px, 14vw, 220px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 520ms var(--ease), filter 260ms ease;
}

.pressure-subject img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: auto;
  filter: saturate(0.66) brightness(1.08) contrast(0.96);
  transform: translate(-50%, -50%);
  transition: filter 260ms ease, transform 420ms var(--ease);
}

.pressure-subject__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 70%;
  border: 1px solid rgba(184, 204, 196, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 300ms var(--ease),
    border-color 260ms ease,
    opacity 260ms ease;
}

.pressure-subject__ring--outer {
  width: 92%;
  height: 94%;
  opacity: 0.58;
}

.pressure-subject:hover img,
.pressure-subject:focus-visible img {
  filter: saturate(0.69) brightness(1.15) contrast(0.98);
  transform: translate(-50%, -50%) scale(1.045);
}

.pressure-subject:hover .pressure-subject__ring,
.pressure-subject:focus-visible .pressure-subject__ring {
  border-color: rgba(206, 220, 213, 0.5);
  opacity: 1;
}

.pressure-subject:focus-visible {
  outline: 1px solid rgba(206, 220, 213, 0.75);
  outline-offset: 8px;
}

.pressure-subject__copy {
  position: absolute;
  z-index: 4;
  top: 67.5%;
  left: 70.5%;
  display: grid;
  width: min(25vw, 360px);
  gap: 12px;
  color: var(--mist);
  font-size: clamp(8px, 0.64vw, 10px);
  letter-spacing: 0.14em;
}

.pressure-mouse {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  opacity: 0.58;
  transition: opacity 220ms ease;
}

.pressure-mouse i {
  position: relative;
  width: 18px;
  height: 27px;
  border: 1px solid currentColor;
  border-radius: 10px;
}

.pressure-mouse i::after {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 1px;
  height: 6px;
  content: "";
  background: currentColor;
}

.pressure-mouse b {
  font-size: inherit;
  font-weight: 560;
}

.handoff-pressure.is-subject-hovered .pressure-mouse {
  opacity: 1;
}

.handoff-pressure.is-gate-blocked .pressure-subject__copy {
  opacity: 1;
}

.handoff-pressure.is-subject-locking .pressure-subject__ring--inner {
  transform: translate(-50%, -50%) scale(0.8056);
}

.handoff-pressure.is-subject-locking .pressure-subject__ring--outer {
  transform: translate(-50%, -50%) scale(0.8043);
}

.handoff-pressure.is-subject-locking .handoff-pressure-copy,
.handoff-pressure.is-subject-locking .handoff-ghost {
  opacity: 0.05 !important;
  transition: opacity 440ms ease;
}

.scene06-boundary {
  position: absolute;
  right: 4.8%;
  bottom: 5.2%;
  opacity: var(--boundary-opacity, 0);
  color: #8caba1;
  font-size: 8px;
  font-weight: 540;
  letter-spacing: 0.18em;
}

.qa-readout {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: grid;
  min-width: 190px;
  padding: 12px 14px;
  gap: 3px;
  border: 1px solid rgba(184, 204, 196, 0.35);
  background: rgba(5, 26, 24, 0.9);
  color: var(--mist);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.qa-readout[hidden] {
  display: none;
}

.qa-readout strong {
  color: var(--ivory);
}

/* Desktop ratio protection */

@media (max-aspect-ratio: 8 / 5) {
  .home-title {
    top: 20%;
  }

  .home-title h1 {
    font-size: clamp(65px, 6.2vw, 94px);
  }

  .chapter-index {
    top: 35%;
  }

  .story-state--evidence h2 {
    font-size: clamp(46px, 4.1vw, 64px);
  }

  .body-copy {
    line-height: 1.62;
  }

  .evidence-copy--left h2 {
    margin-top: 4.5vh;
  }

  .evidence-media--bycatch {
    top: 13.5%;
    height: 70%;
  }
}

@media (max-width: 1100px) {
  .home-menu,
  .home-scroll-cue,
  .chapter-index {
    opacity: 0.86;
  }

  .home-title h1 {
    font-size: 7vw;
  }

  .body-copy {
    font-size: 11px;
  }

  .evidence-index {
    right: 2.5%;
  }
}

@media (max-width: 760px) {
  .front-half {
    min-height: var(--story-travel, 1700vh);
  }

  .front-half__travel {
    height: var(--story-travel, 1700vh);
  }

  .home-menu,
  .home-scroll-cue,
  .chapter-index,
  .intro-watermark,
  .evidence-index {
    display: none;
  }

  .shared-world__photo {
    object-position: 58% center;
  }

  .home-title {
    top: 18%;
    left: 7%;
  }

  .home-title h1 {
    font-size: clamp(50px, 16vw, 88px);
  }

  .home-title p {
    font-size: 10px;
  }

  .home-warning {
    left: 7%;
  }

  .intro-mist {
    width: 78%;
  }

  .intro-copy {
    left: 7%;
    width: 68%;
  }

  .story-state--evidence,
  .story-state--light,
  .story-state--dark {
    overflow: hidden;
  }

  .evidence-copy--left,
  .evidence-side,
  .evidence-side--dependence {
    left: 7%;
    right: auto;
    width: 86%;
  }

  .evidence-copy--left {
    top: 7%;
  }

  .evidence-side {
    top: 56%;
  }

  .evidence-media--definition,
  .evidence-media--bycatch,
  .evidence-media--dependence {
    top: 52%;
    left: 7%;
    right: auto;
    width: 86%;
    height: 34%;
  }

  .evidence-side--bycatch {
    top: 8%;
  }

  .evidence-media--bycatch {
    top: 48%;
  }

  .dependence-taxonomy {
    left: 7%;
  }

  .evidence-media--dependence {
    display: none;
  }

  .evidence-side--dependence {
    top: 18%;
  }

  .state-count {
    right: 5%;
  }

  .handoff-pressure-copy {
    top: 38%;
    left: 10%;
  }
}

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

  .shared-world__photo,
  .state-copy,
  [data-motion-media],
  [data-motion-side],
  .evidence-media--bycatch img,
  .handoff-photo {
    transform: none !important;
  }
}

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}

html[data-motion="reduce"] .shared-world__photo,
html[data-motion="reduce"] .state-copy,
html[data-motion="reduce"] [data-motion-media],
html[data-motion="reduce"] [data-motion-side],
html[data-motion="reduce"] .evidence-media--bycatch img,
html[data-motion="reduce"] .handoff-photo {
  transform: none !important;
}