:root {
  --ink: #f2f0e8;
  --muted: #b7b8af;
  --night: #0e1413;
  --panel: #17201e;
  --panel-deep: #101716;
  --line: rgba(242, 240, 232, 0.18);
  --forest: #6e9a82;
  --ember: #e46738;
  --gold: #eab767;
  --sky: #c2e5ec;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
}

button {
  color: inherit;
  font: inherit;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  color: #111;
  background: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 5.4rem;
  padding: 0.65rem 1.2rem;
  display: grid;
  grid-template-columns: minmax(13rem, auto) minmax(28rem, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(14, 20, 19, 0.99), rgba(14, 20, 19, 0.94));
  backdrop-filter: blur(16px);
}

.brand {
  display: grid;
  gap: 0.15rem;
}

.brand span,
.build-status span,
.cue-label,
.stage-kicker span,
.locked-eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.brand strong {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 520;
}

.build-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.build-status span {
  margin-right: 0.35rem;
}

.act-rail {
  min-width: 0;
}

.act-rail ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  list-style: none;
}

.act-rail button {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: left;
}

.act-rail button::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.35rem;
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.act-rail button[aria-current="step"] {
  border-color: rgba(234, 183, 103, 0.55);
  color: var(--ink);
  background: rgba(234, 183, 103, 0.1);
}

.act-rail button[aria-current="step"]::before {
  background: var(--gold);
}

.act-rail button[data-locked="true"] {
  border-style: dashed;
  opacity: 0.7;
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 34%) minmax(0, 66%);
  grid-template-areas: "pupitre stage";
  align-items: start;
}

.pupitre {
  grid-area: pupitre;
  padding: 1.2rem clamp(1.2rem, 3vw, 3.4rem) 5rem;
  border-right: 0;
}

.scene {
  min-height: 76svh;
  padding: clamp(3.2rem, 12vh, 7.5rem) 0 4rem;
  display: grid;
  align-content: center;
  gap: 1rem;
  opacity: 0.43;
  transition: opacity 180ms ease;
}

.scene.active {
  opacity: 1;
}

.scene h1,
.scene h2 {
  max-width: 12ch;
  margin: 0;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.25rem, 4vw, 4.8rem);
  font-weight: 520;
  line-height: 1.08;
  text-wrap: balance;
}

.scene p,
.scene blockquote {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.55;
}

.cue-label {
  font-size: 0.8rem;
  line-height: 1.35;
}

.scene-question {
  color: var(--gold);
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem) !important;
  font-weight: 520;
}

.scene blockquote {
  margin-block: 1.45rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  color: #e6eee8;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.65vw, 1.7rem);
}

.scene.territory-scrollytelling {
  min-height: 0;
  padding-block: 0 8rem;
  display: block;
}

.territory-scene-opening {
  min-height: 78svh;
  padding-block: clamp(3.2rem, 12vh, 7.5rem) 4rem;
  display: grid;
  align-content: center;
  gap: 1rem;
}

.territory-scroll-cue {
  width: fit-content;
  margin-top: 1rem !important;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(234, 183, 103, 0.34);
  border-radius: 999px;
  color: #f0d39b;
  background: rgba(234, 183, 103, 0.07);
  font-size: 0.72rem !important;
  font-weight: 720;
  letter-spacing: 0.025em;
}

.territory-reading-flow {
  position: relative;
  display: grid;
}

.territory-reading-flow::before {
  content: "";
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 0.3rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(234, 183, 103, 0.52) 8%,
    rgba(234, 183, 103, 0.2) 92%,
    transparent
  );
}

.territory-reading-step {
  min-height: 76svh;
  padding: 3rem 0 3rem 1.4rem;
  display: grid;
  align-items: center;
  opacity: 0.34;
  transition: opacity 360ms ease;
}

.territory-reading-step.active {
  opacity: 1;
}

.territory-reading-step-card {
  position: relative;
  max-width: 34rem;
  padding: 1.25rem 1.3rem;
  display: grid;
  gap: 0.78rem;
  border: 1px solid rgba(224, 229, 219, 0.15);
  border-left: 2px solid rgba(234, 183, 103, 0.34);
  border-radius: 0.6rem;
  background:
    linear-gradient(145deg, rgba(234, 183, 103, 0.045), transparent 55%),
    rgba(15, 22, 20, 0.72);
  transform: translateY(0.45rem);
  transition:
    border-color 360ms ease,
    background 360ms ease,
    transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.territory-reading-step.active .territory-reading-step-card {
  border-color: rgba(234, 183, 103, 0.52);
  border-left-color: var(--gold);
  background:
    linear-gradient(145deg, rgba(234, 183, 103, 0.1), transparent 55%),
    rgba(15, 22, 20, 0.92);
  transform: none;
}

.territory-reading-step-card h3 {
  margin: 0;
  font-size: clamp(1.7rem, 2.7vw, 2.8rem);
  font-weight: 560;
  line-height: 1;
}

.territory-reading-position,
.territory-reading-proof-label {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.11em;
}

.territory-reading-question {
  color: #edbd6e;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem) !important;
  font-weight: 620;
  line-height: 1.4 !important;
}

.territory-reading-narration {
  color: #dbe4df;
  font-size: 0.96rem !important;
  line-height: 1.56 !important;
}

.territory-reading-proof-label {
  margin-top: 0.25rem;
  color: var(--sky);
}

.territory-reading-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.territory-reading-facts > div {
  min-height: 3.8rem;
  padding: 0.58rem 0.65rem;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  border-left: 2px solid rgba(142, 199, 215, 0.68);
  background: rgba(142, 199, 215, 0.065);
}

.territory-reading-facts dt {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.25;
}

.territory-reading-facts dd {
  margin: 0;
  color: #f5e2b5;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.2;
}

.territory-reading-step-card blockquote {
  margin: 0.5rem 0 0;
  padding-left: 0.8rem;
  color: #f1e7cf;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

.territory-reading-limit {
  color: #aebbb5;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

.territory-scrollytelling > .proof-card {
  margin: 2rem 0 8rem 1.4rem;
}

.proof-card,
.absence-inline {
  max-width: 34rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.025);
}

.proof-card summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.proof-card p {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.proof-card dl {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.28rem;
}

.proof-card dl div {
  padding-top: 0.28rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  border-top: 1px solid var(--line);
}

.proof-card dt,
.proof-card dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.proof-card dd {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.proof-status {
  color: var(--forest) !important;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.proof-sources {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.proof-sources h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
}

.proof-sources ul {
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  list-style: none;
}

.proof-sources li {
  display: grid;
  gap: 0.12rem;
}

.proof-sources a {
  color: #b8dce5;
  font-size: 0.78rem;
  font-weight: 690;
  text-underline-offset: 0.18rem;
}

.proof-sources span,
.proof-sources small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.proof-sources .proof-source-doi {
  width: fit-content;
  color: var(--gold);
  font-size: 0.67rem;
}

.scene-limit {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem !important;
}

.gesture-note {
  width: fit-content;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(110, 154, 130, 0.48);
  border-radius: 999px;
  color: #dce8df;
  font-size: 0.72rem !important;
}

.scene[data-availability="locked_fail_closed"] {
  opacity: 0.6;
}

.scene[data-availability="locked_fail_closed"].active {
  opacity: 1;
}

.absence-inline {
  border-color: rgba(234, 183, 103, 0.34);
  border-style: dashed;
}

.absence-inline strong {
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.absence-inline p {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.story-navigation {
  position: sticky;
  z-index: 12;
  bottom: 1rem;
  min-height: 4rem;
  padding: 0.55rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(23, 32, 30, 0.96);
  backdrop-filter: blur(12px);
}

.story-navigation button {
  min-width: 6.7rem;
  min-height: 2.7rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgba(234, 183, 103, 0.52);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.story-navigation button:disabled {
  opacity: 0.3;
}

#nextScene {
  white-space: nowrap;
  border-color: var(--gold);
  color: #18130b;
  background: var(--gold);
  font-weight: 780;
}

#nextScene:disabled {
  color: var(--muted);
  background: rgba(234, 183, 103, 0.18);
}

.story-navigation > span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

#nextScene [data-next-label] {
  display: inline-block;
  color: inherit;
  font: inherit;
}

button:focus-visible,
summary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.shell-contract {
  margin-top: 3rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--muted);
}

.shell-contract summary {
  color: var(--ink);
  cursor: pointer;
}

.shell-contract p {
  font-size: 0.84rem;
  line-height: 1.5;
}

.shell-contract dl {
  display: grid;
  gap: 0.35rem;
}

.shell-contract dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}

.shell-contract dt,
.shell-contract dd {
  margin: 0;
  font-size: 0.75rem;
}

.stage-shell {
  grid-area: stage;
  position: sticky;
  top: 5.4rem;
  height: calc(100svh - 5.4rem);
  padding: 1rem;
}

.stage {
  position: relative;
  height: calc(100svh - 7.4rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #141b19;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.36);
}

.stage-panel {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.stage[data-panel="map"] .map-panel,
.stage[data-panel="timeline"] .timeline-panel,
.stage[data-panel="spatial"] .spatial-panel,
.stage[data-panel="climate"] .climate-panel,
.stage[data-panel="epilogue"] .epilogue-panel,
.stage[data-panel="locked"] .locked-panel {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

#map,
.smoke-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.smoke-veil {
  z-index: 3;
  background:
    radial-gradient(circle at 46% 52%, rgba(218, 222, 214, 0.15), transparent 7%),
    radial-gradient(circle at 53% 48%, rgba(218, 222, 214, 0.11), transparent 11%),
    radial-gradient(circle at 59% 55%, rgba(218, 222, 214, 0.08), transparent 9%);
  filter: blur(8px);
  pointer-events: none;
}

.prologue-back {
  position: absolute;
  z-index: 12;
  top: 1rem;
  left: 1rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(234, 183, 103, 0.42);
  border-radius: 999px;
  color: #e5e5df;
  background: rgba(8, 12, 11, 0.78);
  box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.26);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition:
    opacity 220ms ease,
    color 160ms ease,
    border-color 160ms ease,
    visibility 0s linear 220ms;
}

.prologue-back:hover,
.prologue-back:focus-visible {
  border-color: var(--gold);
  color: #fff;
}

body[data-experience="prologue"] .prologue-back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.scene-slate {
  position: absolute;
  z-index: 7;
  top: 1rem;
  left: 1rem;
  min-width: min(24rem, 54%);
  padding: 0.9rem 1rem 0.85rem 1.15rem;
  display: grid;
  gap: 0.24rem;
  border-left: 3px solid var(--gold);
  color: #fff;
  background: rgba(5, 8, 7, 0.94);
  box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.36);
}

.scene-slate span,
.scene-slate time {
  color: #c9cbc5;
  font-size: 0.64rem;
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.scene-slate strong {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.75vw, 1.65rem);
  font-weight: 560;
}

.illustration-label,
.event-map-legend,
.map-attribution {
  position: absolute;
  z-index: 7;
  margin: 0;
  color: #fff;
  background: rgba(9, 13, 12, 0.74);
  backdrop-filter: blur(8px);
}

.illustration-label {
  top: 1rem;
  right: 1rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.35rem;
  font-size: 0.68rem;
}

.event-map-legend {
  position: absolute;
  z-index: 7;
  top: 1rem;
  right: 1rem;
  max-width: 24rem;
  margin: 0;
  padding: 0.5rem 0.7rem 0.5rem 1.5rem;
  border: 1px solid rgba(234, 183, 103, 0.44);
  border-radius: 0.35rem;
  color: #fff;
  background: rgba(9, 13, 12, 0.78);
  font-size: 0.65rem;
  line-height: 1.35;
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity 360ms ease;
}

.event-map-legend::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--gold);
  background: var(--ember);
  transform: translateY(-50%);
}

.territory-map-legend {
  position: absolute;
  z-index: 10;
  top: 1rem;
  left: 1rem;
  width: min(20rem, 38%);
  padding: 0.85rem 0.9rem 0.78rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.48rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 3px solid var(--gold);
  border-radius: 0.42rem;
  color: #fff;
  background: rgba(6, 10, 9, 0.92);
  box-shadow: 0 0.9rem 2.8rem rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
  backdrop-filter: blur(11px);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 420ms;
}

.territory-map-legend > span,
.territory-map-legend > strong,
.territory-map-legend > small {
  grid-column: 1 / -1;
}

.maplibregl-ctrl-bottom-right {
  right: 0.75rem;
  bottom: 2.65rem;
}

.maplibregl-ctrl-scale {
  border-color: rgba(255, 255, 255, 0.82);
  color: #fff;
  background: rgba(6, 10, 9, 0.78);
  font: 650 0.68rem/1.2 Inter, Arial, sans-serif;
  text-shadow: 0 1px 2px #000;
}

.territory-map-explore {
  position: absolute;
  z-index: 11;
  left: 1rem;
  bottom: 3.15rem;
  max-width: min(29rem, 54%);
  min-height: 2.45rem;
  padding: 0.42rem 0.48rem 0.42rem 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(234, 183, 103, 0.46);
  border-radius: 999px;
  color: #e8e9e3;
  background: rgba(6, 10, 9, 0.88);
  box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.territory-map-explore[hidden] {
  display: none;
}

.territory-map-explore span {
  font-size: 0.68rem;
  line-height: 1.25;
}

.territory-map-explore button {
  min-height: 1.75rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(234, 183, 103, 0.62);
  border-radius: 999px;
  color: #fff;
  background: rgba(27, 34, 31, 0.94);
  font: inherit;
  font-size: 0.67rem;
  cursor: pointer;
}

.territory-map-explore button:hover,
.territory-map-explore button:focus-visible {
  border-color: var(--gold);
  background: rgba(70, 58, 34, 0.96);
}

.territory-map-legend > span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.11em;
}

.territory-map-legend > strong {
  font-size: 1.15rem;
  font-weight: 620;
  line-height: 1.15;
}

.territory-map-legend ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.38rem;
  list-style: none;
}

.territory-map-legend li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
  color: #e8ece7;
  font-size: 0.73rem;
  line-height: 1.3;
}

.territory-map-legend li i {
  width: 0.9rem;
  height: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 0.12rem;
  background: #8c9a91;
}

.territory-map-legend li[data-legend-kind="fire"] i {
  border-color: #ffd089;
  background: rgba(255, 79, 42, 0.94);
}

.territory-map-legend li[data-legend-kind="fire-outline"] i {
  border: 2px solid #ffc36b;
  background: transparent;
}

.territory-map-legend li[data-legend-kind="fire-previous"] i {
  border-color: #fff0d5;
  background: #f4bc86;
}

.territory-map-legend li[data-legend-kind="terrain"] i {
  background: linear-gradient(135deg, #333f38, #c3b184);
}

.territory-map-legend li[data-legend-kind="slope-0"] i {
  background: #f2f2ee;
}

.territory-map-legend li[data-legend-kind="slope-1"] i {
  background: #c7c4ba;
}

.territory-map-legend li[data-legend-kind="slope-2"] i {
  background: #8a8479;
}

.territory-map-legend li[data-legend-kind="slope-3"] i {
  background: #45413c;
}

.territory-map-legend li[data-legend-kind="woodland"] i,
.territory-map-legend li[data-legend-kind="woodland-main"] i {
  background: #4d9a72;
}

.territory-map-legend li[data-legend-kind="woodland-outline"] i,
.territory-map-legend li[data-legend-kind="woodland-fragment"] i {
  border: 2px solid #9dd9b4;
  background: rgba(77, 154, 114, 0.18);
}

.territory-map-legend li[data-legend-kind="overlap"] i {
  background: linear-gradient(135deg, #4d9a72 0 48%, #ff4f2a 52%);
}

.territory-map-legend li[data-legend-kind="building"] i {
  border-radius: 50%;
  background: #ff8fc4;
}

.territory-map-legend li[data-legend-kind="road"] i {
  height: 0.2rem;
  border: 0;
  background: #9de6ff;
}

.territory-map-legend li[data-legend-kind="parcel"] i {
  border-color: #ffe08a;
  background: rgba(217, 169, 47, 0.5);
}

.territory-north {
  align-self: end;
  width: 2rem;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

.territory-north i {
  position: relative;
  width: 1px;
  height: 1.65rem;
  background: rgba(255, 255, 255, 0.82);
}

.territory-north i::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: 50%;
  border-right: 0.28rem solid transparent;
  border-bottom: 0.52rem solid #fff;
  border-left: 0.28rem solid transparent;
  transform: translate(-50%, -35%);
}

.territory-north b {
  font-size: 0.65rem;
  font-weight: 780;
}

.territory-map-legend > small {
  padding-top: 0.48rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #bfc8c2;
  font-size: 0.64rem;
  line-height: 1.35;
}

.ignition-reprise {
  position: absolute;
  z-index: 9;
  top: 1rem;
  right: 1rem;
  width: min(27rem, 54%);
  margin: 0;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(234, 183, 103, 0.58);
  border-radius: 0.45rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(228, 103, 56, 0.12), transparent 55%),
    rgba(9, 13, 12, 0.92);
  box-shadow: 0 1rem 3.5rem rgba(0, 0, 0, 0.48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.8rem);
  backdrop-filter: blur(10px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 520ms;
}

.ignition-reprise > span {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.ignition-reprise > strong {
  font-size: clamp(1.35rem, 2.35vw, 2.35rem);
  font-weight: 560;
  line-height: 1.02;
}

.ignition-reprise > p,
.ignition-reprise > small {
  margin: 0;
}

.ignition-reprise > p {
  color: #f1d5bd;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.ignition-reprise > small {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
}

.spatial-landing-card {
  position: absolute;
  z-index: 9;
  right: 1rem;
  bottom: 3.4rem;
  width: min(30rem, 52%);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(142, 199, 215, 0.48);
  border-radius: 0.45rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(142, 199, 215, 0.1), transparent 58%),
    rgba(7, 12, 11, 0.92);
  box-shadow: 0 1rem 3.5rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.8rem);
  backdrop-filter: blur(11px);
  transition:
    opacity 520ms ease,
    transform 650ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 650ms;
}

.spatial-landing-card > span {
  color: var(--sky);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.11em;
}

.spatial-landing-card > strong {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 560;
  line-height: 1.1;
}

.spatial-landing-card > p,
.spatial-landing-card > small {
  margin: 0;
  line-height: 1.42;
}

.spatial-landing-card > p {
  color: #d7e7e5;
  font-size: 0.84rem;
}

.spatial-landing-card > small {
  color: var(--muted);
  font-size: 0.68rem;
}

.territory-fire-context {
  position: absolute;
  z-index: 9;
  left: 1rem;
  bottom: 3.4rem;
  width: min(15rem, 36%);
  padding: 0.72rem 0.82rem 0.76rem 0.92rem;
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(255, 128, 54, 0.58);
  border-left: 3px solid #ff8a3d;
  border-radius: 0.42rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 111, 39, 0.14), transparent 58%),
    rgba(18, 9, 6, 0.91);
  box-shadow: 0 0.9rem 3rem rgba(0, 0, 0, 0.44);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.55rem);
  backdrop-filter: blur(10px);
  transition:
    opacity 520ms ease,
    transform 650ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 650ms;
}

.territory-fire-context > span,
.territory-fire-context > strong,
.territory-fire-context > p,
.territory-fire-context > small {
  margin: 0;
}

.territory-fire-context > span {
  color: #ffae72;
  font-size: 0.55rem;
  font-weight: 840;
  letter-spacing: 0.12em;
}

.territory-fire-context > strong {
  font-size: 0.92rem;
  font-weight: 720;
  letter-spacing: 0.035em;
}

.territory-fire-context > p {
  color: #f3ded1;
  font-size: 0.72rem;
}

.territory-fire-context > p b {
  color: #ffbd79;
  font-size: 1.02rem;
}

.territory-fire-context > small {
  color: #c9b7ad;
  font-size: 0.55rem;
  line-height: 1.35;
}

.territory-analysis-card {
  position: absolute;
  z-index: 10;
  top: 1rem;
  right: 1rem;
  width: min(25rem, 42%);
  max-height: calc(100% - 4.8rem);
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.4rem;
  overflow: hidden;
  border: 1px solid rgba(229, 188, 103, 0.42);
  border-radius: 0.55rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(229, 188, 103, 0.09), transparent 48%),
    rgba(7, 12, 11, 0.94);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0.8rem);
  backdrop-filter: blur(12px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 520ms;
}

.territory-analysis-card > header {
  display: none;
  gap: 0.3rem;
}

.territory-analysis-card > header span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.11em;
}

.territory-analysis-card > header strong {
  font-size: clamp(1.45rem, 2.15vw, 2.25rem);
  font-weight: 570;
  line-height: 1.05;
}

.territory-analysis-card > header p,
.territory-analysis-card > blockquote,
.territory-analysis-card > p,
.territory-analysis-card > small {
  margin: 0;
}

@media (min-width: 821px) {
  .territory-analysis-card {
    width: fit-content;
    max-width: min(34rem, 52%);
  }

  .territory-analysis-card .territory-metrics {
    display: none;
  }
}

.territory-analysis-card > header p {
  color: #d8e4df;
  font-size: 0.9rem;
  line-height: 1.42;
}

.territory-plan-explanation {
  color: #cbd7d1;
  font-size: 0.68rem;
  line-height: 1.46;
}

.territory-plan-explanation,
.territory-analysis-card > blockquote,
.territory-analysis-limit,
.territory-analysis-card > small {
  display: none;
}

.territory-modes {
  display: grid;
  grid-template-columns: repeat(var(--territory-mode-count, 4), minmax(0, 1fr));
  gap: 0.34rem;
}

.stage[data-story-scene="territory_relief"] .territory-modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.territory-modes button {
  min-height: 2.2rem;
  padding: 0.35rem 0.28rem;
  border: 1px solid rgba(224, 229, 219, 0.2);
  border-radius: 0.3rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 0.67rem;
  font-weight: 720;
  cursor: pointer;
}

.territory-modes button:hover,
.territory-modes button:focus-visible {
  border-color: rgba(229, 188, 103, 0.75);
  color: var(--ink);
}

.territory-modes button[aria-pressed="true"] {
  border-color: var(--gold);
  color: #18140c;
  background: var(--gold);
}

.territory-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.territory-metrics > div {
  min-height: 3rem;
  padding: 0.45rem 0.5rem;
  display: grid;
  align-content: center;
  gap: 0.18rem;
  border-left: 2px solid rgba(142, 199, 215, 0.7);
  background: rgba(142, 199, 215, 0.065);
}

.territory-metrics dt {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.25;
}

.territory-metrics dd {
  margin: 0;
  color: #f5e2b5;
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.18;
}

.territory-analysis-card > blockquote {
  padding-left: 0.7rem;
  border-left: 2px solid var(--gold);
  color: #f4dfb0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.4;
}

.territory-analysis-limit {
  color: #c2cbc6;
  font-size: 0.64rem;
  line-height: 1.42;
}

.territory-analysis-card > small {
  padding-top: 0.48rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

.climate-analysis-card {
  position: absolute;
  z-index: 10;
  top: 1rem;
  right: 1rem;
  width: min(37rem, 61%);
  max-height: calc(100% - 4.7rem);
  padding: 0.82rem 0.9rem;
  display: grid;
  gap: 0.46rem;
  overflow: hidden;
  border: 1px solid rgba(142, 199, 215, 0.5);
  border-radius: 0.55rem;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(142, 199, 215, 0.11), transparent 42%),
    linear-gradient(325deg, rgba(229, 188, 103, 0.07), transparent 48%),
    rgba(6, 11, 10, 0.95);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.54);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0.8rem);
  backdrop-filter: blur(13px);
  transition:
    opacity 420ms ease,
    transform 540ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 540ms;
}

.climate-analysis-card > header {
  display: grid;
  gap: 0.22rem;
}

.climate-analysis-card > header span {
  color: var(--sky);
  font-size: 0.56rem;
  font-weight: 830;
  letter-spacing: 0.11em;
}

.climate-analysis-card > header strong {
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  font-weight: 580;
  line-height: 1.04;
}

.climate-analysis-card > header p,
.climate-analysis-card > blockquote,
.climate-analysis-card > p,
.climate-analysis-card > small {
  margin: 0;
}

.climate-analysis-card > header p {
  color: #d6e5e1;
  font-size: 0.72rem;
  line-height: 1.38;
}

.climate-visual {
  min-height: 0;
  padding: 0.55rem;
  display: grid;
  align-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(142, 199, 215, 0.19);
  border-radius: 0.4rem;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 4.9%,
      rgba(255, 255, 255, 0.018) 5%
    ),
    rgba(5, 9, 8, 0.72);
}

.climate-threshold {
  padding: 0.35rem 0.45rem;
  border-left: 2px solid var(--gold);
  color: #ead9b2;
  background: rgba(229, 188, 103, 0.065);
  font-size: 0.53rem;
  font-weight: 790;
  letter-spacing: 0.055em;
  line-height: 1.35;
}

.climate-analysis-card > blockquote {
  padding-left: 0.65rem;
  border-left: 2px solid var(--sky);
  color: #d9eef1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.38;
}

.climate-analysis-limit {
  color: #bdc9c4;
  font-size: 0.57rem;
  line-height: 1.38;
}

.climate-analysis-card > small {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.32;
}

.climate-season-collection {
  width: 100%;
  height: auto;
  max-height: 15rem;
}

.climate-season-collection text {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
}

.climate-svg-kicker,
.climate-svg-column,
.climate-svg-note {
  fill: #b8cbc6;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.75px;
}

.climate-svg-column {
  fill: #d9e8e4;
}

.climate-svg-year,
.climate-svg-axis,
.climate-svg-cutoff {
  fill: #919f9a;
  font-size: 9px;
  font-weight: 650;
}

.climate-svg-current-year {
  fill: #f2cc8d;
  font-size: 11px;
  font-weight: 820;
}

.climate-svg-cutoff {
  fill: #e9c684;
  font-weight: 760;
}

.climate-svg-note {
  fill: #d2b67e;
  font-size: 8px;
}

.climate-season-baseline {
  fill: rgba(214, 229, 224, 0.09);
}

.climate-season-window {
  fill: rgba(234, 183, 103, 0.68);
}

.climate-current-future-line {
  stroke: rgba(218, 229, 225, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.climate-current-observed {
  fill: rgba(142, 199, 215, 0.16);
  stroke: rgba(142, 199, 215, 0.44);
  stroke-width: 1;
}

.climate-current-window {
  fill: #ed8b4b;
}

.climate-period-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.48rem;
}

.climate-period,
.climate-fixed-territory {
  min-width: 0;
  padding: 0.6rem;
  display: grid;
  align-content: center;
  gap: 0.16rem;
  border-radius: 0.35rem;
}

.climate-period {
  border: 1px solid rgba(142, 199, 215, 0.28);
  background: rgba(142, 199, 215, 0.06);
}

.climate-period-future {
  border-color: rgba(234, 183, 103, 0.34);
  background: rgba(234, 183, 103, 0.065);
}

.climate-period span,
.climate-fixed-territory span {
  color: var(--muted);
  font-size: 0.46rem;
  font-weight: 820;
  letter-spacing: 0.09em;
}

.climate-period strong,
.climate-fixed-territory strong {
  color: #eef2ed;
  font-size: 0.86rem;
  font-weight: 650;
}

.climate-period p,
.climate-period small,
.climate-fixed-territory small {
  margin: 0;
  color: #b8c5c0;
  font-size: 0.52rem;
  line-height: 1.3;
}

.climate-fixed-territory {
  position: relative;
  width: 8.2rem;
  border: 1px solid rgba(125, 159, 128, 0.45);
  color: #dbe9d8;
  background:
    linear-gradient(180deg, rgba(111, 146, 112, 0.17), rgba(111, 146, 112, 0.05));
  text-align: center;
}

.climate-fixed-territory::before,
.climate-fixed-territory::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  border-top: 1px solid rgba(208, 224, 215, 0.4);
}

.climate-fixed-territory::before {
  right: 100%;
}

.climate-fixed-territory::after {
  left: 100%;
}

.climate-model-grid-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  list-style: none;
}

.climate-model-grid-list li {
  min-width: 0;
  padding: 0.42rem;
  display: grid;
  gap: 0.1rem;
  border-top: 2px solid rgba(142, 199, 215, 0.45);
  background: rgba(255, 255, 255, 0.035);
}

.climate-model-grid-list strong {
  overflow: hidden;
  color: #dcebe7;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.climate-model-grid-list span,
.climate-model-grid-list small {
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.25;
}

.climate-delta-rows {
  display: grid;
  gap: 0.42rem;
}

.climate-delta-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr);
  gap: 0.48rem;
}

.climate-delta-row > header {
  display: grid;
  align-content: center;
  gap: 0.12rem;
}

.climate-delta-row > header strong {
  color: #e6eeea;
  font-size: 0.62rem;
}

.climate-delta-row > header span {
  color: #a8cdbf;
  font-size: 0.47rem;
  font-weight: 740;
}

.climate-delta-models {
  display: grid;
  gap: 0.18rem;
}

.climate-delta-model {
  min-width: 0;
  display: grid;
  grid-template-columns: 6.7rem minmax(0, 1fr) 5.2rem;
  align-items: center;
  gap: 0.3rem;
}

.climate-delta-model small,
.climate-delta-model b {
  overflow: hidden;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.climate-delta-model small {
  color: var(--muted);
}

.climate-delta-model b {
  color: #f2d8a3;
  font-weight: 760;
  text-align: right;
}

.climate-delta-model i {
  height: 0.42rem;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--sky) 0 calc(var(--climate-delta-ratio) * 100%),
      rgba(142, 199, 215, 0.1) calc(var(--climate-delta-ratio) * 100%)
    );
}

.climate-calendar-unavailable,
.climate-sensitivity {
  padding: 0.42rem 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.08rem 0.45rem;
  border-left: 2px dashed rgba(196, 203, 198, 0.5);
  background: rgba(255, 255, 255, 0.028);
}

.climate-calendar-unavailable strong,
.climate-sensitivity strong {
  color: #dce4df;
  font-size: 0.58rem;
}

.climate-calendar-unavailable span,
.climate-sensitivity span {
  color: var(--gold);
  font-size: 0.47rem;
  font-weight: 780;
  text-align: right;
}

.climate-calendar-unavailable p,
.climate-sensitivity p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.48rem;
  line-height: 1.3;
}

.climate-sensitivity {
  border-left-style: solid;
  border-left-color: var(--ember);
  background: rgba(228, 103, 56, 0.055);
}

.climate-summary-relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
}

.climate-summary-relations > div {
  min-width: 0;
  padding: 0.48rem;
  display: grid;
  gap: 0.14rem;
  border-top: 2px solid var(--sky);
  background: rgba(142, 199, 215, 0.055);
}

.climate-summary-relations strong {
  color: #f0d49f;
  font-size: 0.72rem;
}

.climate-summary-relations span {
  color: var(--muted);
  font-size: 0.47rem;
}

.climate-causal-chain {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  list-style: none;
}

.climate-causal-chain li {
  position: relative;
  min-width: 0;
  min-height: 5.1rem;
  padding: 0.42rem;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  border: 1px solid rgba(224, 229, 219, 0.16);
  background: rgba(255, 255, 255, 0.025);
}

.climate-causal-chain li:not(:last-child)::after {
  content: "›";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -0.31rem;
  color: #80908a;
  transform: translate(50%, -50%);
}

.climate-causal-chain li[data-status="calculated"] {
  border-color: rgba(142, 199, 215, 0.48);
  background: rgba(142, 199, 215, 0.065);
}

.climate-causal-chain li[data-status="missing"] {
  border-style: dashed;
  opacity: 0.67;
}

.climate-causal-chain i {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #101615;
  background: var(--sky);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 820;
}

.climate-causal-chain li[data-status="missing"] i {
  color: #b9c2bd;
  background: rgba(185, 194, 189, 0.14);
}

.climate-causal-chain strong {
  color: #e2e9e5;
  font-size: 0.52rem;
  line-height: 1.2;
}

.climate-causal-chain span {
  color: var(--muted);
  font-size: 0.43rem;
  line-height: 1.25;
}

.climate-final-statement {
  margin: 0;
  padding: 0.48rem 0.55rem;
  border-left: 3px solid var(--gold);
  color: #f1dfb6;
  background: rgba(229, 188, 103, 0.06);
  font-size: 0.62rem;
  font-weight: 690;
  line-height: 1.35;
}

.climate-territory-constant {
  position: absolute;
  z-index: 9;
  left: 1rem;
  bottom: 3.4rem;
  width: min(17rem, 34%);
  padding: 0.7rem 0.8rem 0.74rem 0.9rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(125, 159, 128, 0.55);
  border-left: 3px solid #88ad86;
  border-radius: 0.42rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(111, 146, 112, 0.14), transparent 58%),
    rgba(7, 12, 10, 0.92);
  box-shadow: 0 0.9rem 3rem rgba(0, 0, 0, 0.44);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.55rem);
  backdrop-filter: blur(10px);
  transition:
    opacity 520ms ease,
    transform 650ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 650ms;
}

.climate-territory-constant span,
.climate-territory-constant strong,
.climate-territory-constant p,
.climate-territory-constant small {
  margin: 0;
}

.climate-territory-constant span {
  color: #a9d0a7;
  font-size: 0.5rem;
  font-weight: 830;
  letter-spacing: 0.1em;
}

.climate-territory-constant strong {
  color: #e1ece0;
  font-size: 0.82rem;
}

.climate-territory-constant p {
  color: #cbd9c8;
  font-size: 0.58rem;
}

.climate-territory-constant small {
  color: #aeb9ae;
  font-size: 0.49rem;
  line-height: 1.32;
}

.map-attribution {
  right: 0.5rem;
  bottom: 2.6rem;
  max-width: 82%;
  padding: 0.25rem 0.4rem;
  font-size: 0.64rem;
}

.map-fallback {
  position: absolute;
  z-index: 8;
  inset: auto 1rem 4rem;
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--gold);
  background: rgba(9, 13, 12, 0.94);
  font-size: 0.86rem;
}

.map-landmark {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #fff;
  filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px #000);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  visibility: hidden;
  white-space: nowrap;
}

.map-landmark.is-visible {
  opacity: 1;
  visibility: visible;
}

.map-landmark--city i {
  width: 0.3rem;
  height: 0.3rem;
  flex: 0 0 auto;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(8, 12, 11, 0.82);
}

.map-landmark--city span {
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-landmark--secondary {
  opacity: 0.8;
}

.map-landmark--secondary span {
  font-size: 0.58rem;
}

.map-landmark--river span {
  color: var(--sky);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.18em;
  transform: rotate(-18deg);
}

.event-callout {
  z-index: 4;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0.55rem 1rem rgba(0, 0, 0, 0.52));
  pointer-events: none;
}

.territory-callout {
  z-index: 4;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0.55rem 1rem rgba(0, 0, 0, 0.52));
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.diois-callout {
  z-index: 5;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0.7rem 1.2rem rgba(0, 0, 0, 0.58));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}

.diois-ring {
  width: clamp(4.5rem, 7vw, 7rem);
  height: clamp(4.5rem, 7vw, 7rem);
  margin-left: calc(clamp(4.5rem, 7vw, 7rem) / -2);
  flex: 0 0 auto;
  border: 2px solid rgba(194, 229, 236, 0.88);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 199, 215, 0.08), transparent 68%);
  box-shadow: 0 0 0 0.55rem rgba(142, 199, 215, 0.07);
}

.diois-leader {
  width: clamp(2rem, 4vw, 4rem);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--sky), rgba(194, 229, 236, 0.28));
  transform: rotate(-7deg);
  transform-origin: left center;
}

.diois-marker {
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.18rem;
  border-left: 3px solid var(--sky);
  background: rgba(10, 16, 14, 0.93);
}

.diois-marker small {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.diois-marker strong {
  font-size: 1.15rem;
  font-weight: 640;
}

.diois-place {
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  color: #fff;
  filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px #000);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}

.diois-place i {
  width: 0.34rem;
  height: 0.34rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(8, 12, 11, 0.82);
}

.diois-place span {
  font-size: 0.62rem;
  font-weight: 740;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.territory-landmark {
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  color: #fff;
  filter:
    drop-shadow(0 1px 2px #000)
    drop-shadow(0 0 5px #000)
    drop-shadow(0 0 9px rgba(0, 0, 0, 0.9));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.territory-landmark i {
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(8, 12, 11, 0.88);
}

.territory-landmark span {
  font-size: 0.7rem;
  font-weight: 680;
  letter-spacing: 0.025em;
}

.territory-landmark.agglomeration.importance-1 span {
  font-size: 0.78rem;
  font-weight: 780;
}

.territory-landmark.agglomeration.importance-2 span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.66rem;
}

.territory-landmark.anchor-right {
  flex-direction: row-reverse;
}

.territory-landmark.relief i {
  border-radius: 0;
  background: #e4c57c;
  transform: rotate(45deg);
}

.territory-landmark.relief span {
  color: #f0e4c7;
  font-style: italic;
}

.territory-landmark.cours_eau i {
  width: 0.85rem;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: #76cef0;
}

.territory-landmark.cours_eau span {
  color: #a9e0f5;
  font-style: italic;
}

.territory-ring {
  width: clamp(4.6rem, 7vw, 7rem);
  height: clamp(4.6rem, 7vw, 7rem);
  margin-left: calc(clamp(4.6rem, 7vw, 7rem) / -2);
  flex: 0 0 auto;
  border: 2px solid rgba(234, 183, 103, 0.9);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 183, 103, 0.08), transparent 68%);
  box-shadow: 0 0 0 0.6rem rgba(234, 183, 103, 0.08);
}

.territory-leader {
  width: clamp(2rem, 4vw, 4rem);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--gold), rgba(234, 183, 103, 0.3));
  transform: rotate(-7deg);
  transform-origin: left center;
}

.territory-marker {
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.2rem;
  border-left: 3px solid var(--gold);
  background: rgba(13, 18, 17, 0.92);
}

.territory-marker small {
  margin-block: 0.2rem;
  color: var(--muted);
  font-size: 0.87rem;
  letter-spacing: 0.09em;
}

.territory-marker strong {
  font-size: 1.15rem;
  font-weight: 620;
}

.fire-glow {
  z-index: 3;
  width: clamp(5rem, 9vw, 9rem);
  height: clamp(5rem, 9vw, 9rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 194, 93, 0.98) 0 4%, rgba(228, 103, 56, 0.9) 9%, rgba(228, 103, 56, 0.24) 38%, transparent 68%);
  filter: blur(1px) drop-shadow(0 0 1.4rem rgba(228, 103, 56, 0.76));
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.fire-glow i {
  position: absolute;
  left: 50%;
  bottom: 45%;
  width: 22%;
  height: 38%;
  border-radius: 52% 48% 60% 40%;
  background: linear-gradient(180deg, rgba(255, 224, 157, 0.96), var(--ember));
  filter: blur(2px);
  transform: translateX(-50%) rotate(9deg);
  transform-origin: center bottom;
  animation: fire-breathe 2.4s ease-in-out infinite alternate;
}

.fire-glow i:nth-child(2) {
  left: 41%;
  width: 14%;
  height: 27%;
  opacity: 0.72;
  animation-delay: -0.9s;
}

.fire-glow i:nth-child(3) {
  left: 60%;
  width: 12%;
  height: 22%;
  opacity: 0.58;
  animation-delay: -1.5s;
}

@keyframes fire-breathe {
  from { transform: translateX(-50%) scaleY(0.78) rotate(5deg); }
  to { transform: translateX(-50%) scaleY(1.1) rotate(-7deg); }
}

.event-anchor {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  flex: 0 0 auto;
  border: 2px solid #fff4df;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0.3rem rgba(228, 103, 56, 0.22);
}

.event-leader {
  width: clamp(2.5rem, 5vw, 5rem);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #fff4df, var(--ember));
  transform: rotate(-8deg);
  transform-origin: left center;
}

.event-marker {
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.2rem;
  border-left: 3px solid var(--ember);
  background: rgba(13, 18, 17, 0.9);
}

.event-marker span,
.event-marker small {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.event-marker strong {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 560;
}

.timeline-panel {
  padding: clamp(1.15rem, 2.8vw, 2.7rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  background:
    radial-gradient(circle at 72% 10%, rgba(110, 154, 130, 0.16), transparent 32%),
    linear-gradient(145deg, #15201d, #0c1211 72%);
}

.stage-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.stage-kicker em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
}

.timeline-shell {
  position: relative;
  min-height: 0;
  padding: clamp(0.8rem, 1.7vw, 1.45rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 13, 12, 0.7), rgba(7, 11, 10, 0.48)),
    repeating-linear-gradient(90deg, transparent 0 4.9%, rgba(255, 255, 255, 0.015) 5%);
}

.timeline-cue {
  position: relative;
  z-index: 5;
  max-width: 46rem;
  display: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 0.8rem;
}

.timeline-cue span {
  grid-column: 1 / -1;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.timeline-cue strong {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.55rem, 2.45vw, 2.85rem);
  font-weight: 520;
  line-height: 1.02;
}

.timeline-cue p {
  display: none;
}

.timeline-shell[data-state="timeline_unavailable"] .timeline-cue {
  display: grid;
}

.temporal-plot {
  position: relative;
  min-height: 19rem;
  overflow: hidden;
  border-block: 1px solid rgba(242, 240, 232, 0.1);
}

.season-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.season-baseline,
.month-gridline,
.event-gridline,
.temperature-guide {
  vector-effect: non-scaling-stroke;
}

.season-baseline {
  stroke: rgba(242, 240, 232, 0.32);
  stroke-width: 1;
}

.month-gridline {
  stroke: rgba(242, 240, 232, 0.11);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.event-gridline {
  stroke: rgba(228, 103, 56, 0.75);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
}

.month-label,
.event-date-label,
.lane-label,
.last-rain-label,
.dry-bracket-label,
.first-heat-label,
.temperature-guide-label,
.temperature-peak-label,
.event-marker-label {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
}

.month-label,
.event-date-label {
  color: var(--muted);
  fill: #aeb3ad;
  font-size: 13px;
  font-weight: 730;
  letter-spacing: 1.6px;
}

.event-date-label {
  fill: #f3c079;
}

.lane-label {
  fill: #8f9690;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.temperature-lane-label {
  font-size: 12px;
  opacity: 0;
  transition: opacity 500ms ease;
}

.rain-bar {
  fill: #8ec7d7;
  opacity: 0.08;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: opacity 650ms ease, transform 650ms ease, fill 450ms ease;
}

.chart-callout,
.last-rain-line,
.last-rain-label,
.dry-bracket,
.dry-bracket-label,
.dry-cursor,
.temperature-series,
.first-heat-band,
.first-heat-label,
.event-dot,
.event-marker-label {
  opacity: 0;
  transition: opacity 500ms ease;
}

.chart-callout rect {
  fill: rgba(10, 16, 14, 0.9);
  stroke: rgba(142, 199, 215, 0.42);
}

.chart-callout-kicker {
  fill: #adb8b3;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 1.1px;
}

.chart-callout-value {
  fill: var(--ink);
  font-size: 22px;
  font-weight: 620;
}

.dry-window-highlight {
  fill: rgba(234, 183, 103, 0.11);
  stroke: rgba(234, 183, 103, 0.36);
  stroke-width: 1;
}

.last-rain-line {
  stroke: #8ec7d7;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.last-rain-label {
  fill: #bcdce3;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.7px;
}

.dry-bracket {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

.dry-bracket-label {
  fill: var(--gold);
  font-size: 12px;
  font-weight: 790;
  letter-spacing: 1px;
}

.dry-cursor {
  stroke: #fff3d8;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(234, 183, 103, 0.75));
}

.first-heat-band {
  fill: rgba(228, 103, 56, 0.12);
  stroke: rgba(228, 103, 56, 0.32);
  stroke-width: 1;
}

.first-heat-label {
  fill: #e8a083;
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: 0.8px;
}

.temperature-line {
  fill: none;
  stroke: #ff9d6c;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(255, 157, 108, 0.44));
}

.temperature-guide {
  stroke: rgba(233, 133, 87, 0.22);
  stroke-dasharray: 3 5;
}

.temperature-guide-label {
  fill: #bd8e79;
  font-size: 10px;
}

.temperature-peak {
  fill: #101716;
  stroke: #f4aa79;
  stroke-width: 2.2;
}

.temperature-peak-leader {
  stroke: rgba(255, 208, 184, 0.72);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.temperature-peak-label {
  fill: #ffd0b8;
  font-size: 11px;
  font-weight: 780;
  stroke: rgba(8, 13, 12, 0.94);
  stroke-width: 3px;
  paint-order: stroke fill;
}

.event-dot {
  fill: var(--ember);
  stroke: #ffe6ca;
  stroke-width: 2;
}

.event-marker-label {
  fill: #ffc59c;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.7px;
}

.danger-inset,
.time-to-space-card {
  position: absolute;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 650ms ease,
    transform 650ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 650ms;
}

.danger-sensations > p,
.danger-chart p,
.time-to-space-copy > span {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.time-to-space-card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  font-weight: 530;
  line-height: 1.05;
}

.danger-inset {
  inset: 3% 1%;
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  overflow: auto;
  border: 1px solid rgba(234, 183, 103, 0.32);
  border-radius: 0.6rem;
  background: rgba(9, 14, 13, 0.94);
  transform: translateY(0.8rem);
}

.danger-sensations {
  display: grid;
  align-content: center;
  gap: 0.55rem;
  opacity: 0.16;
  transform: translateX(-0.75rem);
  transition: opacity 700ms ease, transform 800ms ease;
}

.danger-sensations h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 1.7vw, 1.65rem);
  font-weight: 550;
  line-height: 1.05;
}

.danger-sensations ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
}

.danger-sensations li {
  min-height: 3.65rem;
  padding: 0.55rem 0.65rem;
  display: grid;
  align-content: center;
  gap: 0.18rem;
  border: 1px solid rgba(142, 199, 215, 0.34);
  border-radius: 0.4rem;
  background: rgba(142, 199, 215, 0.045);
  color: #dce8e3;
}

.danger-sensations li strong {
  color: #d8eef2;
  font-size: 0.78rem;
}

.danger-sensations li span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.danger-chart {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(14rem, 0.7fr) minmax(22rem, 1.3fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow summary"
    "plot plot"
    "note note";
  align-items: end;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(234, 183, 103, 0.26);
  opacity: 0.08;
  transform: scale(0.96);
  transition: opacity 900ms ease, transform 900ms ease;
}

.danger-chart > strong {
  grid-area: summary;
  color: #e5e7e1;
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  line-height: 1.35;
  text-align: right;
}

.danger-chart > small {
  grid-area: note;
  justify-self: end;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: right;
}

.danger-chart svg {
  grid-area: plot;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  max-height: 18rem;
}

.danger-chart > p {
  grid-area: eyebrow;
}

.danger-axis {
  stroke: rgba(242, 240, 232, 0.22);
  stroke-width: 1;
}

.danger-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(234, 183, 103, 0.42));
}

.danger-point {
  fill: #111716;
  stroke: var(--gold);
  stroke-width: 2.6;
}

.danger-point-event-day {
  fill: var(--gold);
}

.danger-date,
.danger-value,
.danger-event-label {
  fill: #c4c8c2;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 730;
  letter-spacing: 0.6px;
}

.danger-value {
  fill: var(--gold);
  font-size: 12px;
}

.danger-event-line {
  stroke: var(--ember);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.danger-event-dot {
  fill: var(--ember);
  stroke: #ffe1c2;
  stroke-width: 2;
}

.danger-event-label {
  fill: #ffb185;
  font-weight: 820;
}

.time-to-space-card {
  inset: 4%;
  padding: clamp(1rem, 3vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(20rem, 1.2fr);
  align-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.4rem);
  border: 1px solid rgba(234, 183, 103, 0.38);
  background:
    radial-gradient(circle at 75% 40%, rgba(110, 154, 130, 0.2), transparent 31%),
    rgba(8, 13, 12, 0.94);
  transform: scale(0.97);
}

.time-to-space-copy {
  display: grid;
  gap: 1rem;
}

.time-to-space-card h3 {
  max-width: 25ch;
  font-size: clamp(1.55rem, 3.3vw, 3.5rem);
}

.time-to-space-card small {
  color: #bfc8c2;
  font-size: clamp(0.68rem, 1.1vw, 0.92rem);
  letter-spacing: 0.08em;
}

.time-to-space-map-frame {
  position: relative;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, 0.18);
  border-radius: 0.55rem;
  background: #081416;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
}

.time-to-space-map-frame svg {
  width: 100%;
  height: 100%;
  min-height: 18rem;
}

.time-to-space-map-frame figcaption {
  position: absolute;
  right: 0.65rem;
  bottom: 0.5rem;
  padding: 0.25rem 0.4rem;
  color: rgba(242, 240, 232, 0.72);
  background: rgba(8, 13, 12, 0.76);
  font-size: 0.68rem;
}

.timeline-data-details {
  position: relative;
  z-index: 2;
  align-self: end;
  color: var(--muted);
  font-size: 0.66rem;
}

.timeline-data-details > summary,
.daily-data > summary {
  width: fit-content;
  color: #d7dad5;
  cursor: pointer;
}

.timeline-data-details[open] {
  position: absolute;
  z-index: 12;
  right: clamp(1.15rem, 2.8vw, 2.7rem);
  bottom: 2.8rem;
  left: clamp(1.15rem, 2.8vw, 2.7rem);
  max-height: 62%;
  padding: 0.8rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(8, 12, 11, 0.98);
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.5);
}

.timeline-data-details table {
  width: 100%;
  margin-top: 0.6rem;
  border-collapse: collapse;
}

.timeline-data-details caption {
  padding-bottom: 0.4rem;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.timeline-data-details th,
.timeline-data-details td {
  padding: 0.35rem 0.45rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.daily-data {
  margin-top: 0.8rem;
}

.timeline-shell[data-state="timeline_april"] .rain-month-04 {
  opacity: 0.9;
  transform: scaleY(1);
}

.timeline-shell[data-state="timeline_april"] .rain-month-05,
.timeline-shell[data-state="timeline_april"] .rain-month-06,
.timeline-shell[data-state="timeline_april"] .rain-month-07,
.timeline-shell[data-state="timeline_rain"] .rain-month-06,
.timeline-shell[data-state="timeline_rain"] .rain-month-07 {
  opacity: 0.025;
  transform: scaleY(0.06);
}

.timeline-shell[data-state="timeline_april"] .april-callout {
  opacity: 1;
}

.timeline-shell[data-state="timeline_rain"] .rain-month-04 {
  opacity: 0.56;
}

.timeline-shell[data-state="timeline_rain"] .rain-month-05 {
  opacity: 0.92;
  transform: scaleY(1);
}

.timeline-shell[data-state="timeline_rain"] .april-callout {
  opacity: 0.66;
}

.timeline-shell[data-state="timeline_rain"] .may-callout {
  opacity: 1;
}

.timeline-shell[data-state="timeline_rain"] .rain-return-cluster {
  fill: #d2edf3;
  opacity: 1;
}

.timeline-shell[data-state="timeline_break"] .rain-bar {
  opacity: 0.56;
}

.timeline-shell[data-state="timeline_break"] .april-callout,
.timeline-shell[data-state="timeline_break"] .may-callout,
.timeline-shell[data-state="timeline_break"] .last-rain-line,
.timeline-shell[data-state="timeline_break"] .last-rain-label {
  opacity: 0.72;
}

.timeline-shell[data-state="timeline_break"] .dry-cursor {
  opacity: 1;
}

.timeline-shell[data-state="timeline_break"] .dry-bracket,
.timeline-shell[data-state="timeline_break"] .dry-bracket-label {
  opacity: 1;
}

.timeline-shell[data-state="timeline_drying"] .rain-bar {
  opacity: 0.32;
}

.timeline-shell[data-state="timeline_drying"] .dry-window-highlight,
.timeline-shell[data-state="timeline_drying"] .dry-bracket,
.timeline-shell[data-state="timeline_drying"] .dry-bracket-label,
.timeline-shell[data-state="timeline_drying"] .first-heat-band,
.timeline-shell[data-state="timeline_drying"] .first-heat-label {
  opacity: 0.58;
}

.timeline-shell[data-state="timeline_drying"] .temperature-series {
  opacity: 1;
}

.temperature-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.timeline-shell[data-state="timeline_drying"] .temperature-line {
  stroke-dashoffset: 0;
}

.timeline-shell[data-state="timeline_drying"] .temperature-lane-label,
.timeline-shell[data-state="timeline_danger"] .temperature-lane-label {
  opacity: 1;
}

.timeline-shell[data-state="timeline_danger"] .season-chart {
  opacity: 0.2;
}

.timeline-shell[data-state="timeline_danger"] .danger-inset {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.timeline-shell[data-state="timeline_danger"] .danger-sensations {
  opacity: 1;
  transform: none;
}

.timeline-shell[data-state="timeline_danger"] .danger-chart {
  opacity: 1;
  transform: none;
}

.timeline-shell[data-state="timeline_to_space"] .season-chart {
  opacity: 0.14;
  transform: translateY(17%) scale(0.84);
}

.timeline-shell[data-state="timeline_to_space"] .time-to-space-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.spatial-panel {
  padding: clamp(1rem, 2.35vw, 2.25rem);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  background:
    radial-gradient(circle at 19% 11%, rgba(142, 199, 215, 0.12), transparent 31%),
    radial-gradient(circle at 82% 75%, rgba(228, 103, 56, 0.09), transparent 34%),
    linear-gradient(145deg, #14201e, #0b1110 76%);
}

.prototype-warning {
  min-height: 2.3rem;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px dashed rgba(234, 183, 103, 0.52);
  border-radius: 0.35rem;
  color: #c8cac3;
  background: rgba(234, 183, 103, 0.045);
  font-size: 0.63rem;
  line-height: 1.3;
}

.prototype-warning strong {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
}

.spatial-shell {
  position: relative;
  min-height: 0;
  padding: clamp(0.75rem, 1.35vw, 1.25rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background:
    linear-gradient(180deg, rgba(8, 13, 12, 0.68), rgba(7, 11, 10, 0.46)),
    repeating-linear-gradient(90deg, transparent 0 6.9%, rgba(255, 255, 255, 0.014) 7%);
}

.spatial-cue {
  position: relative;
  z-index: 6;
  min-height: 3.2rem;
  display: none;
  align-content: start;
  gap: 0.18rem;
}

.spatial-cue > span {
  color: var(--forest);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.spatial-cue > strong {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.3rem, 2vw, 2.2rem);
  font-weight: 540;
  line-height: 1;
}

.spatial-cue > p {
  display: none;
}

.spatial-shell[data-state="spatial_unavailable"] .spatial-cue {
  display: grid;
}

.spatial-viewport {
  position: relative;
  min-height: 0;
}

.comparison-stage,
.spatial-bridge,
.national-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem) scale(0.985);
  pointer-events: none;
  transition:
    opacity 520ms ease,
    transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 700ms;
}

.spatial-shell[data-state="spatial_compare"] .comparison-stage,
.spatial-shell[data-state="spatial_expand"] .spatial-bridge,
.spatial-shell[data-state^="spatial_map_"] .national-stage {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.comparison-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
}

.comparison-contract {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--muted);
}

.comparison-contract > span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.comparison-contract > strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 720;
}

.comparison-contract > small {
  margin-left: auto;
  font-size: 0.68rem;
}

.comparison-charts {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.comparison-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 20%) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, 0.14);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.018);
}

.comparison-row > header {
  padding: 0.65rem 0.75rem;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  border-right: 1px solid rgba(242, 240, 232, 0.12);
  background: rgba(9, 15, 13, 0.68);
}

.comparison-row > header span,
.comparison-row > header small {
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.comparison-row > header strong {
  font-size: clamp(0.82rem, 1.25vw, 1.12rem);
  font-weight: 650;
}

.comparison-row > svg {
  width: 100%;
  height: 100%;
  min-height: 10.5rem;
}

.comparison-gridline,
.comparison-baseline,
.comparison-axis-guide {
  vector-effect: non-scaling-stroke;
}

.comparison-gridline {
  stroke: #d8d8d8;
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: 0.48;
}

.comparison-baseline {
  stroke: rgba(242, 240, 232, 0.2);
  stroke-width: 1;
}

.comparison-axis-guide {
  stroke-width: 1;
}

.comparison-rain-guide {
  stroke: rgba(142, 199, 215, 0.13);
}

.comparison-temperature-guide {
  stroke: rgba(255, 157, 108, 0.12);
}

.comparison-rain-bar {
  fill: #8ec7d7;
  opacity: 0.82;
}

.comparison-temperature-line {
  fill: none;
  stroke: #ff9d6c;
  stroke-width: 3.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(255, 157, 108, 0.28));
}

.comparison-month,
.comparison-lane-label,
.comparison-watermark,
.comparison-axis-value,
.comparison-summary {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
}

.comparison-month {
  fill: #aeb3ad;
  font-size: 13.5px;
  font-weight: 760;
  letter-spacing: 1px;
}

.comparison-lane-label {
  fill: #8f9690;
  font-size: 13px;
  font-weight: 820;
}

.comparison-axis-value {
  fill: #858d88;
  font-size: 13px;
  font-weight: 650;
}

.comparison-summary {
  font-size: 14px;
  font-weight: 780;
}

.comparison-summary-rain {
  fill: #a8d9e4;
}

.comparison-summary-temperature {
  fill: #ffad83;
}

.comparison-watermark {
  fill: #eab767;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 1px;
  opacity: 0.76;
}

.comparison-mobile-summary {
  display: none;
}

.comparison-mobile-chart,
.tracc-mobile-switch,
.stage-expand {
  display: none;
}

.stage-expand[hidden] {
  display: none !important;
}

.comparison-key {
  display: grid;
  grid-template-columns: auto auto minmax(12rem, 1fr);
  align-items: center;
  gap: 0.8rem;
  color: #91978f;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.comparison-key span:first-child,
.comparison-key span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  text-align: left;
}

.comparison-key span:last-child {
  color: rgba(242, 240, 232, 0.56);
  text-align: right;
}

.comparison-key i {
  width: 1.2rem;
  height: 0.35rem;
  display: inline-block;
}

.key-rain {
  background: #8ec7d7;
}

.key-temperature {
  border-top: 2px solid #ff9d6c;
}

.spatial-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 35%);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.55rem 0.8rem;
}

.fire-overview-map-frame {
  position: relative;
  min-height: 13rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, 0.12);
  border-radius: 0.45rem;
  background: #081416;
}

.fire-overview-map-frame svg {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  overflow: hidden;
}

.fire-overview-map-frame figcaption {
  position: absolute;
  right: 0.6rem;
  bottom: 0.45rem;
  color: rgba(242, 240, 232, 0.64);
  font-size: 0.75rem;
}

.western-europe-sea {
  fill: #081416;
}

.western-europe-country {
  fill: #17211f;
  stroke: rgba(214, 221, 216, 0.33);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.western-europe-country--fra {
  fill: rgba(103, 139, 119, 0.25);
}

.western-europe-boundary {
  fill: none;
  stroke: rgba(225, 231, 226, 0.5);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bridge-france-highlight {
  fill: rgba(103, 160, 128, 0.18);
  stroke: rgba(255, 244, 223, 0.9);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.western-europe-label {
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.11em;
  pointer-events: none;
}

.western-europe-label--country {
  fill: rgba(226, 229, 224, 0.48);
}

.western-europe-label--water {
  fill: rgba(142, 199, 215, 0.42);
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
}

.france-city-labels {
  pointer-events: none;
}

.france-city-dot {
  fill: rgba(255, 244, 223, 0.82);
  stroke: rgba(7, 12, 11, 0.82);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.france-city-name {
  fill: rgba(247, 244, 233, 0.74);
  stroke: rgba(6, 11, 10, 0.9);
  stroke-width: 2.4px;
  paint-order: stroke fill;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.015em;
}

.fire-overview-rail {
  min-height: 0;
  padding: 0.7rem 0.8rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.28rem;
  border: 1px solid rgba(242, 240, 232, 0.12);
  border-radius: 0.45rem;
  background: rgba(5, 10, 9, 0.58);
}

.fire-overview-rail > span {
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.fire-overview-rail h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 620;
}

.fire-overview-rail ol {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.14rem;
  list-style: none;
}

.fire-overview-rail li {
  min-height: 0;
  padding: 0.28rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(242, 240, 232, 0.1);
}

.fire-overview-rail li div {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.fire-overview-rail li strong {
  font-size: 0.9rem;
  font-weight: 660;
  line-height: 1.05;
}

.fire-overview-rail li small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.1;
}

.fire-overview-rail li em {
  max-width: 8.6rem;
  color: #fff4df;
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.05;
  text-align: right;
}

.spatial-bridge > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  text-align: center;
}

.spatial-bridge > p strong {
  color: var(--gold);
  font-weight: 650;
}

.spatial-data-handoff {
  grid-column: 1 / -1;
  padding: 0.65rem 0.8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.7rem;
  border-left: 3px solid var(--forest);
  color: #dce8e2;
  background: rgba(62, 116, 88, 0.14);
}

.spatial-data-handoff span {
  grid-row: 1 / 3;
  align-self: center;
  color: #a8d9bf;
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.spatial-data-handoff strong {
  font-size: 0.78rem;
}

.spatial-data-handoff p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.national-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.42rem;
}

.map-indicator {
  min-height: 3.5rem;
  padding-right: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.12rem 0.7rem;
}

.map-indicator > span {
  grid-row: 1 / 3;
  align-self: center;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(234, 183, 103, 0.44);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.map-indicator h3,
.map-indicator p {
  margin: 0;
}

.map-indicator h3 {
  font-size: clamp(1.08rem, 1.55vw, 1.45rem);
  font-weight: 620;
}

.map-indicator p {
  color: var(--muted);
  font-size: 0.78rem;
}

.national-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 35%);
  gap: 0.7rem;
}

.france-map-frame {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, 0.12);
  border-radius: 0.45rem;
  background: #081416;
}

.france-map-frame svg {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  overflow: visible;
}

.france-map-frame figcaption {
  position: absolute;
  right: 0.45rem;
  bottom: 0.35rem;
  left: 0.45rem;
  color: rgba(242, 240, 232, 0.7);
  font-size: 0.75rem;
  text-align: center;
}

.france-map-base {
  fill: rgba(242, 240, 232, 0.045);
}

.france-map-outline {
  fill: none;
  stroke: rgba(255, 244, 223, 0.86);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.climate-grid-image {
  opacity: 0.94;
  image-rendering: auto;
}

.prototype-anchor-halo {
  fill: rgba(7, 11, 10, 0.38);
  stroke: rgba(255, 244, 223, 0.75);
  stroke-width: 1;
}

.prototype-anchor-dot {
  fill: var(--ember);
  stroke: #fff4df;
  stroke-width: 1.5;
}

.prototype-map-anchor--candidate .prototype-anchor-dot {
  fill: var(--gold);
}

.prototype-anchor-letter {
  fill: #fff;
  font-size: 14px;
  font-weight: 820;
}

.anchor-rail {
  min-height: 0;
  padding: 0.68rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.35rem;
  border: 1px solid rgba(242, 240, 232, 0.12);
  border-radius: 0.45rem;
  background: rgba(5, 10, 9, 0.52);
}

.anchor-rail > span {
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.anchor-rail ol {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  list-style: none;
}

.anchor-rail li {
  min-height: 0;
  padding: 0.34rem 0.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  border-top: 1px solid rgba(242, 240, 232, 0.09);
}

.anchor-id {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 183, 103, 0.54);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 820;
}

.anchor-rail li div {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.anchor-rail li strong {
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.08;
}

.anchor-rail li small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.08;
}

.anchor-rail li .anchor-event-area {
  color: #c8cac3;
  font-size: 0.72rem;
  line-height: 1.08;
}

.anchor-rail li em {
  color: #fff4df;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 720;
  white-space: nowrap;
}

.indicator-legend {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 3;
  width: 10rem;
  padding: 0.72rem 0.76rem;
  display: grid;
  gap: 0.38rem;
  border: 1px solid rgba(242, 240, 232, 0.24);
  border-radius: 0.4rem;
  background: rgba(5, 11, 10, 0.9);
  box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.26);
  color: #e1e4de;
  backdrop-filter: blur(5px);
}

.indicator-legend > span {
  color: var(--gold);
  font-size: 0.56rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.indicator-legend > strong {
  font-size: 0.9rem;
  font-weight: 690;
  line-height: 1.15;
}

.indicator-legend .legend-year {
  color: var(--gold);
  font-size: 1.08em;
  font-weight: 850;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.indicator-legend ol {
  margin: 0.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.18rem;
  list-style: none;
}

.indicator-legend li {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  font-size: 0.69rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.indicator-legend-swatch {
  width: 1.65rem;
  height: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.08rem;
}

#nationalStage[data-indicator="rain_before_break"] .indicator-legend-swatch[data-level="1"] { background: #243f3b; }
#nationalStage[data-indicator="rain_before_break"] .indicator-legend-swatch[data-level="2"] { background: #34645f; }
#nationalStage[data-indicator="rain_before_break"] .indicator-legend-swatch[data-level="3"] { background: #4d8788; }
#nationalStage[data-indicator="rain_before_break"] .indicator-legend-swatch[data-level="4"] { background: #70aeb9; }
#nationalStage[data-indicator="rain_before_break"] .indicator-legend-swatch[data-level="5"] { background: #b6dde2; }

#nationalStage[data-indicator="dry_duration"] .indicator-legend-swatch[data-level="1"] { background: #29423a; }
#nationalStage[data-indicator="dry_duration"] .indicator-legend-swatch[data-level="2"] { background: #66704b; }
#nationalStage[data-indicator="dry_duration"] .indicator-legend-swatch[data-level="3"] { background: #a88d50; }
#nationalStage[data-indicator="dry_duration"] .indicator-legend-swatch[data-level="4"] { background: #d19a4f; }
#nationalStage[data-indicator="dry_duration"] .indicator-legend-swatch[data-level="5"] { background: #efb568; }

#nationalStage[data-indicator="hot_days"] .indicator-legend-swatch[data-level="1"] { background: #3b3c35; }
#nationalStage[data-indicator="hot_days"] .indicator-legend-swatch[data-level="2"] { background: #725244; }
#nationalStage[data-indicator="hot_days"] .indicator-legend-swatch[data-level="3"] { background: #a85f42; }
#nationalStage[data-indicator="hot_days"] .indicator-legend-swatch[data-level="4"] { background: #d66c3f; }
#nationalStage[data-indicator="hot_days"] .indicator-legend-swatch[data-level="5"] { background: #f2a269; }

.indicator-legend > small {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(242, 240, 232, 0.14);
  color: #bec5bf;
  font-size: 0.58rem;
  line-height: 1.25;
}

.map-separation {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto auto;
  align-items: center;
  gap: 0.45rem;
  color: #aeb3ad;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.map-separation i {
  height: 1px;
  background: rgba(242, 240, 232, 0.18);
}

.map-separation strong {
  margin-left: 0.5rem;
  color: var(--gold);
  font-size: 0.7rem;
}

.spatial-data-details {
  color: var(--muted);
  font-size: 0.56rem;
}

.spatial-data-details summary {
  width: fit-content;
  cursor: pointer;
}

.spatial-data-details p {
  max-width: 56rem;
  margin: 0.45rem 0 0;
  line-height: 1.45;
}

.spatial-shell[data-state="spatial_unavailable"] .spatial-viewport {
  display: none;
}

.epilogue-scene {
  min-height: 82svh;
}

.epilogue-scene h2 {
  max-width: 14ch;
  font-size: clamp(2.15rem, 3.6vw, 4.25rem);
  line-height: 1.12;
}

.epilogue-scene-narration {
  color: #e6ece8;
  font-size: clamp(1.08rem, 1.35vw, 1.35rem) !important;
  line-height: 1.58 !important;
}

.epilogue-scene-recap {
  color: #aeb9b3;
}

.epilogue-scene-takeaway {
  margin-top: 1.8rem !important;
}

.epilogue-pupitre-backstage-trigger {
  width: min(100%, 29rem);
  min-height: 4.4rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.28rem 1rem;
  align-items: center;
  border: 1px solid rgba(234, 183, 103, 0.58);
  border-left: 3px solid var(--gold);
  border-radius: 0.4rem;
  color: #f1f4f2;
  background:
    linear-gradient(105deg, rgba(234, 183, 103, 0.16), rgba(234, 183, 103, 0.035)),
    rgba(13, 20, 18, 0.86);
  box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.epilogue-pupitre-backstage-trigger span {
  grid-column: 1;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.epilogue-pupitre-backstage-trigger strong {
  grid-column: 1;
  color: #f5f0e6;
  font-size: clamp(0.98rem, 1.25vw, 1.16rem);
  font-weight: 620;
  line-height: 1.3;
}

.epilogue-pupitre-backstage-trigger i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold);
  font-size: 1.55rem;
  font-style: normal;
}

.epilogue-pupitre-backstage-trigger:hover {
  border-color: rgba(244, 202, 132, 0.9);
  background:
    linear-gradient(105deg, rgba(234, 183, 103, 0.23), rgba(234, 183, 103, 0.06)),
    rgba(13, 20, 18, 0.92);
  transform: translateY(-1px);
}

.epilogue-pupitre-backstage-trigger:focus-visible {
  outline: 3px solid rgba(242, 211, 158, 0.82);
  outline-offset: 3px;
}

.epilogue-panel {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 20%, rgba(142, 199, 215, 0.14), transparent 32%),
    radial-gradient(circle at 28% 84%, rgba(234, 183, 103, 0.1), transparent 34%),
    linear-gradient(145deg, #172421, #0a100f 74%);
}

.epilogue-map-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.epilogue-map-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, 0.74), rgba(7, 11, 10, 0.08) 42%, rgba(7, 11, 10, 0.3)),
    linear-gradient(0deg, rgba(7, 11, 10, 0.72), transparent 36%);
  pointer-events: none;
}

.epilogue-map-field svg {
  width: 100%;
  height: 100%;
  filter: saturate(0.72) brightness(0.84);
  opacity: 0.72;
  transform: scale(1.015);
  transition:
    filter 900ms ease,
    opacity 900ms ease,
    transform 1.2s ease;
}

.stage[data-story-scene="engineering_instrument"] .epilogue-map-field svg {
  filter: saturate(0.58) brightness(0.72);
  opacity: 0.52;
  transform: scale(1.035);
}

.stage[data-story-scene="your_territory"] .epilogue-map-field svg {
  filter: saturate(0.88) brightness(1);
  opacity: 0.88;
  transform: scale(1);
}

.epilogue-map-light {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 62% 42%, rgba(211, 230, 222, 0.13), transparent 29%),
    radial-gradient(circle at 48% 65%, rgba(234, 183, 103, 0.08), transparent 34%);
  opacity: 0.46;
  transform: translate3d(-4%, 4%, 0);
  transition: opacity 1s ease, transform 1.2s ease;
}

.stage[data-story-scene="your_territory"] .epilogue-map-light {
  opacity: 1;
  transform: none;
}

.epilogue-map-field .western-europe-sea {
  fill: #101a1a;
}

.epilogue-map-field .western-europe-country {
  fill: #273630;
  stroke: rgba(225, 235, 229, 0.16);
  stroke-width: 0.8;
}

.epilogue-france-fill {
  fill: #354a40;
}

.epilogue-country-boundaries path {
  fill: none;
  stroke: rgba(220, 231, 224, 0.28);
  stroke-width: 0.75;
}

.epilogue-france-outline {
  fill: none;
  stroke: rgba(225, 237, 230, 0.72);
  stroke-width: 1.6;
}

.epilogue-map-field .france-city-dot {
  fill: #d5dfd8;
}

.epilogue-map-field .france-city-name {
  fill: rgba(231, 238, 233, 0.72);
}

.epilogue-framing-reticle {
  opacity: 0;
  transition: opacity 800ms ease;
}

.epilogue-framing-reticle path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.7;
  vector-effect: non-scaling-stroke;
}

.epilogue-framing-reticle text {
  fill: #f2d6a0;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.stage[data-story-scene="your_territory"] .epilogue-framing-reticle {
  opacity: 1;
}

.epilogue-stage-shell {
  position: absolute;
  z-index: 2;
  inset: clamp(1rem, 2.2vw, 2rem) clamp(1rem, 2.2vw, 2rem) 2.9rem;
  overflow: hidden;
  border: 1px solid rgba(230, 238, 233, 0.2);
  border-radius: 0.75rem;
  background: rgba(7, 12, 11, 0.14);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(1px);
}

.epilogue-stage-cue {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  min-height: 4.4rem;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(230, 238, 233, 0.14);
  background: linear-gradient(180deg, rgba(7, 12, 11, 0.74), rgba(7, 12, 11, 0.42));
}

.epilogue-stage-cue span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.epilogue-stage-cue strong {
  max-width: 35rem;
  color: #edf2ef;
  font-size: clamp(0.92rem, 1.35vw, 1.26rem);
  font-weight: 560;
  line-height: 1.3;
  text-align: right;
}

.epilogue-evidence-layer,
.epilogue-instrument-layer,
.epilogue-territory-layer {
  position: absolute;
  inset: 4.4rem 0 0;
  padding: clamp(1rem, 2vw, 1.8rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.65rem);
  transition:
    opacity 420ms ease,
    transform 620ms ease,
    visibility 0s linear 620ms;
}

.epilogue-stage-shell[data-state="what_is_demonstrated"] .epilogue-evidence-layer,
.epilogue-stage-shell[data-state="engineering_instrument"] .epilogue-instrument-layer,
.epilogue-stage-shell[data-state="your_territory"] .epilogue-territory-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 80ms;
}

.epilogue-evidence-layer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  background: linear-gradient(90deg, rgba(8, 14, 13, 0.78), rgba(8, 14, 13, 0.18));
}

.epilogue-recap {
  max-width: 54rem;
  margin: 0;
  color: #d7e0da;
  font-size: clamp(0.82rem, 1.08vw, 1.04rem);
  line-height: 1.5;
}

.epilogue-statuses {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
}

.epilogue-statuses li {
  max-width: 60rem;
  padding: 0.7rem 0.85rem;
  display: grid;
  grid-template-columns: 1.4rem minmax(9.5rem, 0.48fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid rgba(229, 238, 232, 0.19);
  background: linear-gradient(90deg, rgba(10, 17, 15, 0.72), rgba(10, 17, 15, 0.22));
}

.epilogue-status-mark {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  border: 1px solid #d9e4dd;
}

.epilogue-statuses li[data-status="observed"] .epilogue-status-mark {
  border-radius: 50%;
  background: #dbe7e0;
  box-shadow: 0 0 0 0.22rem rgba(219, 231, 224, 0.12);
}

.epilogue-statuses li[data-status="derived"] .epilogue-status-mark {
  background:
    repeating-linear-gradient(135deg, rgba(234, 183, 103, 0.88) 0 1px, transparent 1px 4px);
  border-color: var(--gold);
}

.epilogue-statuses li[data-status="projected"] .epilogue-status-mark {
  border: 0;
  background:
    linear-gradient(180deg, transparent 0 15%, #e69763 15% 28%, transparent 28% 43%, #e69763 43% 56%, transparent 56% 71%, #e69763 71% 84%, transparent 84%);
}

.epilogue-statuses li[data-status="to_investigate"] .epilogue-status-mark {
  border-style: dashed;
  border-color: #a8b4ad;
  border-right-color: transparent;
}

.epilogue-statuses strong {
  color: #f0f3f1;
  font-size: clamp(0.8rem, 1.08vw, 1.02rem);
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.epilogue-statuses p {
  margin: 0;
  color: #c7d1cb;
  font-size: clamp(0.78rem, 0.98vw, 0.95rem);
  line-height: 1.42;
}

.epilogue-evidence-layer blockquote {
  max-width: 52rem;
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  color: #f0dec0;
  font-size: clamp(0.86rem, 1.08vw, 1.02rem);
  line-height: 1.45;
}

.epilogue-instrument-layer {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  background:
    linear-gradient(90deg, rgba(8, 14, 13, 0.7), rgba(8, 14, 13, 0.42)),
    repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(255, 255, 255, 0.018) 10%);
}

.epilogue-chain {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 1.1rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 0.55rem;
  list-style: none;
}

.epilogue-chain::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  left: 5%;
  height: 1px;
  background: rgba(230, 239, 233, 0.34);
}

.epilogue-chain::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 2px);
  left: 5%;
  width: 14%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), #f2d9a6, transparent);
  filter: drop-shadow(0 0 0.5rem rgba(234, 183, 103, 0.55));
  animation: epilogue-chain-light 5.8s ease-in-out infinite;
}

.epilogue-chain li {
  position: relative;
  z-index: 2;
  min-height: 8.2rem;
  padding: 0.8rem;
  display: grid;
  align-content: center;
  gap: 0.42rem;
  border: 1px solid rgba(226, 236, 230, 0.18);
  border-radius: 0.4rem;
  background: rgba(12, 20, 18, 0.88);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

.epilogue-chain li > span {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.epilogue-chain li > strong {
  color: #edf2ef;
  font-size: clamp(0.78rem, 1vw, 0.98rem);
  line-height: 1.3;
}

.epilogue-chain li > small {
  color: #abb7b0;
  font-size: clamp(0.68rem, 0.82vw, 0.8rem);
  line-height: 1.35;
}

@keyframes epilogue-chain-light {
  0%, 10% {
    left: 4%;
  }

  48%, 58% {
    left: 43%;
  }

  90%, 100% {
    left: 82%;
  }
}

.epilogue-transformations {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  list-style: none;
}

.epilogue-transformations li {
  padding-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  border-top: 2px solid rgba(234, 183, 103, 0.48);
}

.epilogue-transformations span,
.epilogue-transformations strong {
  font-size: clamp(0.7rem, 0.88vw, 0.86rem);
  line-height: 1.4;
}

.epilogue-transformations span {
  color: #aeb9b2;
}

.epilogue-transformations strong {
  color: #e9efeb;
  font-weight: 620;
}

.epilogue-transformations i {
  color: var(--gold);
  font-style: normal;
}

.epilogue-territory-layer {
  background:
    linear-gradient(90deg, rgba(7, 12, 11, 0.72), transparent 43%),
    linear-gradient(0deg, rgba(7, 12, 11, 0.84), transparent 45%);
}

.epilogue-parameters {
  position: absolute;
  top: clamp(1rem, 2vw, 1.8rem);
  left: clamp(1rem, 2vw, 1.8rem);
  width: min(20rem, 38%);
  padding: 0.85rem 1rem;
  border: 1px solid rgba(231, 239, 234, 0.24);
  background: rgba(8, 14, 12, 0.82);
  backdrop-filter: blur(8px);
}

.epilogue-parameters > span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.epilogue-parameters ol {
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.38rem;
  list-style: none;
}

.epilogue-parameters li {
  padding-top: 0.38rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  border-top: 1px solid rgba(231, 239, 234, 0.14);
}

.epilogue-parameters li span {
  color: #9faaa4;
  font-size: 0.66rem;
}

.epilogue-parameters li strong {
  color: #edf2ef;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  font-weight: 590;
}

.epilogue-outputs {
  position: absolute;
  right: 1.2rem;
  bottom: 8.2rem;
  left: 1.2rem;
  margin: 0;
  color: #d7e0da;
  font-size: clamp(0.76rem, 1vw, 0.94rem);
  line-height: 1.5;
  text-align: center;
}

.epilogue-outputs span {
  white-space: nowrap;
}

.epilogue-signature {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.epilogue-signature strong {
  max-width: 64rem;
  margin-inline: auto;
  color: #f1dfbd;
  font-size: clamp(1rem, 1.6vw, 1.52rem);
  font-weight: 570;
  line-height: 1.35;
  text-wrap: balance;
}

.epilogue-signature p,
.epilogue-signature small {
  margin: 0;
}

.epilogue-signature p {
  color: #d6dfda;
  font-size: clamp(0.72rem, 0.86vw, 0.84rem);
}

.epilogue-signature small {
  color: #9faba4;
  font-size: 0.72rem;
}

.epilogue-backstage-trigger {
  position: absolute;
  z-index: 7;
  right: 1rem;
  bottom: 0.9rem;
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 1px solid rgba(235, 240, 237, 0.48);
  color: #dce4df;
  background: rgba(8, 13, 12, 0.74);
  cursor: pointer;
  font-size: 0.76rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition: opacity 360ms ease, transform 360ms ease, visibility 0s linear 360ms;
}

.epilogue-stage-shell[data-state="your_territory"] .epilogue-backstage-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 420ms;
}

.epilogue-backstage-trigger:hover,
.epilogue-backstage-trigger:focus-visible {
  color: #fff1d5;
  border-bottom-color: var(--gold);
}

.epilogue-backstage {
  position: fixed;
  inset: clamp(0.8rem, 2vw, 1.7rem) clamp(0.8rem, 2vw, 1.7rem) clamp(0.8rem, 2vw, 1.7rem) auto;
  width: min(72rem, calc(100vw - clamp(2rem, 8vw, 8rem)));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(232, 239, 235, 0.28);
  border-radius: 0.75rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 4%, rgba(142, 199, 215, 0.1), transparent 26%),
    linear-gradient(145deg, #17211f, #0b1110 74%);
  box-shadow: -2rem 0 7rem rgba(0, 0, 0, 0.48);
}

.epilogue-backstage::backdrop {
  background: rgba(4, 7, 6, 0.7);
  backdrop-filter: blur(3px);
}

.epilogue-backstage > header {
  position: sticky;
  z-index: 4;
  top: 0;
  padding: clamp(1.2rem, 2.5vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(232, 239, 235, 0.16);
  background: rgba(12, 18, 17, 0.96);
  backdrop-filter: blur(14px);
}

.epilogue-backstage > header span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.13em;
}

.epilogue-backstage h2 {
  margin: 0.6rem 0 0;
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 520;
  line-height: 1.02;
}

.epilogue-backstage > header p {
  max-width: 47rem;
  margin: 1rem 0 0;
  color: #bdc8c1;
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  line-height: 1.55;
}

.epilogue-backstage > header button {
  min-height: 2.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(232, 239, 235, 0.3);
  border-radius: 0.35rem;
  color: #e6ece8;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 0.82rem;
}

.epilogue-backstage > nav {
  position: sticky;
  z-index: 3;
  top: clamp(10rem, 20vw, 14rem);
  padding: 0.7rem clamp(1.2rem, 2.5vw, 2.2rem);
  border-bottom: 1px solid rgba(232, 239, 235, 0.12);
  background: rgba(12, 18, 17, 0.94);
}

.epilogue-backstage > nav ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
  list-style: none;
}

.epilogue-backstage > nav a {
  color: #cbd5cf;
  font-size: 0.78rem;
  text-decoration-color: rgba(234, 183, 103, 0.5);
  text-underline-offset: 0.24rem;
}

.epilogue-backstage-content {
  padding: 0 clamp(1.2rem, 2.5vw, 2.2rem) 5rem;
}

.epilogue-backstage-section {
  position: relative;
  padding: clamp(2.1rem, 4vw, 3.8rem) 0;
  scroll-margin-top: 15rem;
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1.6fr);
  gap: 1.4rem clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(232, 239, 235, 0.14);
}

.epilogue-backstage-index {
  grid-column: 1;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.epilogue-backstage-section h3 {
  grid-column: 1;
  max-width: 12ch;
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight: 540;
  line-height: 1.15;
}

.epilogue-backstage-section > dl {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  display: grid;
}

.epilogue-backstage-section > dl > div {
  padding: 0.9rem 0;
  display: grid;
  grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 1.4fr);
  gap: 1.2rem;
  border-top: 1px solid rgba(232, 239, 235, 0.12);
}

.epilogue-backstage-section dt,
.epilogue-backstage-section dd {
  margin: 0;
  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  line-height: 1.55;
}

.epilogue-backstage-section dt {
  color: #e4ebe7;
  font-weight: 680;
}

.epilogue-backstage-section dd {
  color: #b7c2bb;
}

.epilogue-backstage-section h4 {
  grid-column: 2;
  margin: 1.4rem 0 0;
  color: #ead8b5;
  font-size: 0.9rem;
  font-weight: 680;
}

.epilogue-backstage-section > .epilogue-version-register {
  grid-column: 2;
  grid-row: auto;
  margin-top: 0.35rem;
  padding: 0.8rem;
  border: 1px solid rgba(234, 183, 103, 0.2);
  background: rgba(234, 183, 103, 0.035);
}

.epilogue-version-register > div {
  padding: 0.35rem 0 !important;
}

.epilogue-version-register dd {
  overflow-wrap: anywhere;
  color: #d9c9aa;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
}

.epilogue-backstage-section dd {
  display: grid;
  gap: 0.22rem;
}

.epilogue-backstage-section dd a {
  color: #b8dce5;
  text-underline-offset: 0.2rem;
}

.epilogue-backstage-section dd small {
  color: #8fa097;
  font-size: 0.72rem;
}

.citation-block {
  border-bottom-color: rgba(234, 183, 103, 0.42);
}

.citation-block h3 {
  color: #fff1ce;
}

.epilogue-technical-register {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid rgba(232, 239, 235, 0.16);
  border-radius: 0.45rem;
  color: #aebbb4;
  background: rgba(255, 255, 255, 0.025);
}

.epilogue-technical-register summary {
  color: #dce5df;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.epilogue-technical-register p,
.epilogue-technical-register li,
.epilogue-technical-register dt,
.epilogue-technical-register dd {
  font-size: 0.72rem;
  line-height: 1.45;
}

.locked-panel {
  padding: clamp(2.5rem, 8vw, 8rem);
  display: grid;
  align-content: center;
  gap: 1rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 12px),
    #121817;
}

.locked-panel h2 {
  max-width: 13ch;
  margin: 0;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  font-weight: 520;
  line-height: 0.98;
}

.locked-panel > p:not(.locked-eyebrow, .locked-limit) {
  max-width: 42rem;
  margin: 0;
  color: var(--gold);
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 2vw, 2rem);
}

.absence-card {
  max-width: 42rem;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1px dashed rgba(234, 183, 103, 0.58);
  background: rgba(234, 183, 103, 0.035);
}

.absence-card strong {
  color: var(--gold);
}

.absence-card p,
.locked-limit {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.locked-limit {
  max-width: 42rem;
  margin: 0;
}

.stage-footer {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: rgba(8, 12, 11, 0.92);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.primary-action,
.secondary-action,
.replay-opening {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(234, 183, 103, 0.56);
  border-radius: 999px;
  cursor: pointer;
}

.primary-action {
  color: #18130b;
  background: var(--gold);
  font-weight: 760;
}

.secondary-action,
.replay-opening {
  color: var(--ink);
  background: rgba(14, 20, 19, 0.82);
}

.primary-action:disabled,
.secondary-action:disabled {
  cursor: wait;
  opacity: 0.5;
}

.replay-opening {
  width: fit-content;
  margin-top: 0.2rem;
  background: transparent;
}

body:not([data-experience="story"]) {
  overflow: hidden;
}

body:not([data-experience="story"]) .topbar {
  grid-template-columns: 1fr auto;
}

body:not([data-experience="story"]) .act-rail {
  display: none;
}

body:not([data-experience="story"]) .story-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage";
}

body:not([data-experience="story"]) .pupitre {
  display: none;
}

body:not([data-experience="story"]) .stage-shell {
  top: 5.4rem;
  height: calc(100svh - 5.4rem);
  padding: 0;
}

body:not([data-experience="story"]) .stage {
  height: calc(100svh - 5.4rem);
  border: 0;
  border-radius: 0;
}

.entry-gate {
  position: absolute;
  z-index: 14;
  inset: 0;
  padding: clamp(1.5rem, 7vw, 7rem);
  display: grid;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, 0.98) 0 28%, rgba(7, 11, 10, 0.82) 48%, rgba(7, 11, 10, 0.08) 100%),
    linear-gradient(0deg, rgba(7, 11, 10, 0.42), transparent 52%);
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

body:not([data-experience="threshold"]) .entry-gate {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-experience="threshold"] .entry-gate {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 360ms ease,
    visibility 0s linear 0s;
}

.entry-card {
  width: min(78rem, 88vw);
  display: grid;
  gap: 0.8rem;
}

.entry-eyebrow,
.prologue-beat-label {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.entry-eyebrow {
  margin-bottom: 0.8rem;
  font-size: 1.22rem;
  line-height: 1.2;
}

.entry-card h1 {
  margin: 0;
  color: #f5f2e9;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.2rem, 5.8vw, 6.6rem);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.entry-card h1 em {
  color: var(--ember);
  font-style: italic;
  font-weight: 620;
}

.entry-lead,
.entry-national-fact,
.entry-invitation {
  max-width: 50rem;
  margin: 0;
  line-height: 1.45;
}

.entry-lead {
  margin-block: clamp(0.65rem, 1.3vw, 1.3rem);
  color: #fff4df;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-weight: 720;
}

.entry-national-fact {
  color: #d8ded9;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
}

.entry-case {
  width: fit-content;
  max-width: 46rem;
  margin-block: 0.75rem 0.65rem;
  padding: 0.8rem 1rem 0.9rem;
  display: grid;
  gap: 0.45rem;
  border-left: 3px solid var(--ember);
  background: rgba(7, 11, 10, 0.74);
  backdrop-filter: blur(10px);
}

.entry-case span {
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.13em;
}

.entry-case strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  font-weight: 650;
}

.entry-invitation {
  margin-top: 0.25rem;
  color: #e7e8e2;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
}

.entry-actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body[data-experience="threshold"] #map {
  filter: saturate(0.82) brightness(0.78);
}

body[data-experience="threshold"] .scene-slate,
body[data-experience="threshold"] .illustration-label,
body[data-experience="threshold"] .event-map-legend,
body[data-experience="threshold"] .smoke-veil,
body[data-experience="threshold"] .map-landmark,
body[data-experience="threshold"] .event-callout,
body[data-experience="threshold"] .territory-callout,
body[data-experience="threshold"] .fire-glow {
  opacity: 0 !important;
}

body[data-experience="threshold"] .map-landmark,
body[data-experience="threshold"] .event-callout,
body[data-experience="threshold"] .territory-callout,
body[data-experience="threshold"] .fire-glow {
  visibility: hidden;
}

.prologue-score {
  position: absolute;
  z-index: 10;
  left: clamp(1rem, 4vw, 4rem);
  bottom: clamp(3.5rem, 7vh, 6.5rem);
  width: min(42rem, 58vw);
  display: grid;
  gap: 0.9rem;
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
}

body:not([data-experience="prologue"]) .prologue-score {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);
}

body[data-experience="prologue"] .prologue-score {
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    visibility 0s linear 0s;
}

.prologue-copy {
  padding: clamp(1rem, 2.4vw, 2rem);
  display: grid;
  gap: 0.75rem;
  border-left: 3px solid var(--gold);
  background: rgba(7, 11, 10, 0.9);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.prologue-copy h2 {
  max-width: 16ch;
  margin-block: clamp(0.65rem, 0.9vw, 0.9rem);
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 3.35rem);
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.prologue-copy > p:not(.prologue-beat-label) {
  max-width: 38rem;
  margin: 0;
  color: #d8ded9;
  font-size: clamp(0.95rem, 1.18vw, 1.15rem);
  line-height: 1.5;
}

.prologue-proof {
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.prologue-proof summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 720;
}

.prologue-proof p {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
}

.prologue-proof strong {
  color: var(--gold);
}

.stage:not([data-prologue-beat="observed_extent"]):not([data-prologue-beat="open_question"]) .prologue-proof {
  display: none;
}

.prologue-actions {
  min-height: 3.8rem;
  padding: 0.45rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 20, 19, 0.94);
  backdrop-filter: blur(12px);
}

.prologue-actions span {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.prologue-beat-label {
  font-size: 0.78rem;
}

#rewindFromPrologue,
#replayPrologue {
  display: none;
}

.stage[data-prologue-beat="open_question"] #skipPrologue,
.stage[data-prologue-beat="open_question"] #advancePrologue {
  display: none;
}

.stage[data-prologue-beat="open_question"] #rewindFromPrologue,
.stage[data-prologue-beat="open_question"] #replayPrologue {
  display: block;
}

.stage[data-prologue-beat="open_question"] #replayPrologue {
  grid-column: 1;
  grid-row: 1;
}

.stage[data-prologue-beat="open_question"] #prologuePosition {
  grid-column: 2;
  grid-row: 1;
}

.stage[data-prologue-beat="open_question"] #rewindFromPrologue {
  grid-column: 3;
  grid-row: 1;
}

.prologue-time-hint {
  position: absolute;
  z-index: 9;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(4.8rem, 9vh, 8rem);
  width: min(34rem, 34vw);
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(234, 183, 103, 0.38);
  color: var(--muted);
  background: rgba(7, 11, 10, 0.82);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 300ms ease, transform 300ms ease;
}

.prologue-time-hint span,
.prologue-time-hint strong {
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}

.prologue-time-hint i {
  height: 1px;
  background: var(--gold);
}

.stage[data-prologue-beat="open_question"] .prologue-time-hint {
  opacity: 1;
  transform: none;
}

body[data-experience="prologue"] .scene-slate,
body[data-experience="prologue"] .illustration-label,
body[data-experience="prologue"] .event-map-legend,
body[data-experience="prologue"] .smoke-veil,
body[data-experience="prologue"] .event-callout,
body[data-experience="prologue"] .territory-callout,
body[data-experience="prologue"] .fire-glow {
  transition: opacity 380ms ease;
}

body[data-experience="prologue"] .scene-slate {
  left: 8.4rem;
}

.stage[data-prologue-beat="territory"] .territory-callout {
  opacity: 1 !important;
}

.stage[data-prologue-beat="territory"] .illustration-label,
.stage[data-prologue-beat="territory"] .smoke-veil,
.stage[data-prologue-beat="territory"] .event-map-legend,
.stage[data-prologue-beat="territory"] .event-callout,
.stage[data-prologue-beat="territory"] .fire-glow {
  opacity: 0 !important;
}

.stage[data-prologue-beat="fire_signal"] .territory-callout {
  opacity: 0 !important;
}

.stage[data-prologue-beat="fire_signal"] .event-callout {
  opacity: 1 !important;
}

.stage[data-prologue-beat="fire_signal"] .fire-glow {
  opacity: 1 !important;
}

.stage[data-prologue-beat="observed_extent"] .territory-callout,
.stage[data-prologue-beat="observed_extent"] .event-callout {
  opacity: 0 !important;
}

.stage[data-prologue-beat="observed_extent"] .fire-glow {
  opacity: 0.48 !important;
}

.stage[data-prologue-beat="observed_extent"] .event-map-legend {
  opacity: 1;
}

.stage[data-prologue-beat="observed_extent"] .illustration-label {
  opacity: 0;
}

.stage[data-prologue-beat="observed_extent"] .smoke-veil {
  opacity: 0.18;
}

.stage[data-prologue-beat="open_question"] .scene-slate,
.stage[data-prologue-beat="open_question"] .illustration-label,
.stage[data-prologue-beat="open_question"] .event-map-legend,
.stage[data-prologue-beat="open_question"] .smoke-veil {
  opacity: 0;
}

.stage[data-prologue-beat="open_question"] .territory-callout,
.stage[data-prologue-beat="open_question"] .event-callout {
  opacity: 0 !important;
}

.stage[data-prologue-beat="open_question"] .fire-glow {
  opacity: 0 !important;
}

body[data-experience="story"] .entry-gate,
body[data-experience="story"] .prologue-score,
body[data-experience="story"] .prologue-time-hint,
body[data-experience="story"] .smoke-veil,
body[data-experience="story"] .illustration-label,
body[data-experience="story"] .event-map-legend,
body[data-experience="story"] .territory-callout,
body[data-experience="story"] .fire-glow {
  display: none;
}

body[data-experience="story"] .stage[data-story-scene="ignition"] .ignition-reprise {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene="ignition"] .fire-glow {
  display: block;
  opacity: 1 !important;
}

body[data-experience="story"] .stage[data-story-scene="spatial_landing"] .spatial-landing-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene="spatial_landing"] .diois-callout,
body[data-experience="story"] .stage[data-story-scene="spatial_landing"] .diois-place {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene^="territory_"] .territory-analysis-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene^="territory_"] .territory-map-legend,
body[data-experience="story"] .stage[data-story-scene^="territory_"] .territory-landmark {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 80ms;
}

body[data-experience="story"] .stage[data-story-scene^="territory_"] .territory-fire-context,
body[data-experience="story"] .stage[data-story-scene^="territory_"] .scene-slate {
  opacity: 0;
  visibility: hidden;
}

body[data-experience="story"] .stage[data-story-scene^="territory_"] .diois-callout {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .climate-analysis-card,
body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .climate-territory-constant,
body[data-experience="story"] .stage[data-story-scene="climate_limits"] .climate-analysis-card,
body[data-experience="story"] .stage[data-story-scene="climate_limits"] .climate-territory-constant {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .scene-slate,
body[data-experience="story"] .stage[data-story-scene="climate_limits"] .scene-slate {
  max-width: 34%;
}

.climate-panel {
  padding: clamp(1rem, 2.35vw, 2.25rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.7rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 15%, rgba(142, 199, 215, 0.14), transparent 32%),
    radial-gradient(circle at 88% 84%, rgba(228, 103, 56, 0.12), transparent 32%),
    linear-gradient(145deg, #15201e, #0a100f 76%);
}

.climate-stage-shell {
  min-height: 0;
  padding: clamp(0.8rem, 1.45vw, 1.35rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(8, 13, 12, 0.72), rgba(7, 11, 10, 0.48)),
    repeating-linear-gradient(90deg, transparent 0 7.9%, rgba(255, 255, 255, 0.012) 8%);
}

.climate-stage-cue {
  min-height: 2.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.climate-stage-cue span {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 830;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.climate-stage-cue strong {
  max-width: 42rem;
  color: #e6eee9;
  font-size: clamp(0.9rem, 1.35vw, 1.25rem);
  font-weight: 560;
  line-height: 1.25;
  text-align: right;
}

.climate-stage-visual {
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 0.7rem;
}

.climate-stage-meta {
  padding-top: 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #c2cbc6;
  font-size: 0.56rem;
  line-height: 1.3;
}

.climate-stage-meta span {
  color: #dce5df;
  font-weight: 720;
}

.climate-stage-meta small {
  color: var(--muted);
  text-align: right;
}

.climate-data-details {
  min-height: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  color: #c5cec8;
  background: rgba(7, 11, 10, 0.78);
  font-size: 0.62rem;
}

.climate-data-details summary {
  padding: 0.58rem 0.72rem;
  color: #d8e0dc;
  cursor: pointer;
  font-weight: 680;
}

.climate-data-details[open] {
  max-height: 42%;
  overflow: auto;
}

#climateStageDetails {
  padding: 0 0.72rem 0.72rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

#climateStageDetails section {
  padding-top: 0.55rem;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#climateStageDetails strong {
  color: #eef2ef;
  font-size: 0.65rem;
}

#climateStageDetails p,
#climateStageDetails small {
  margin: 0;
  color: #acb8b2;
  line-height: 1.4;
}

.climate-detail-facts,
.climate-detail-sites dl {
  margin: 0;
  display: grid;
  gap: 0.22rem;
}

.climate-detail-facts > div,
.climate-detail-sites dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.climate-detail-facts dt,
.climate-detail-facts dd,
.climate-detail-sites dt,
.climate-detail-sites dd {
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.3;
}

.climate-detail-facts dd,
.climate-detail-sites dd {
  color: #ead9b2;
  text-align: right;
}

.climate-ingredients-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.7vw, 0.58rem);
}

.climate-ingredient-card {
  min-height: 0;
  padding: clamp(0.52rem, 0.8vw, 0.78rem);
  display: grid;
  grid-template-columns: minmax(11rem, 0.72fr) minmax(0, 1.5fr);
  align-items: stretch;
  gap: clamp(0.65rem, 1.2vw, 1.1rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 3px solid var(--ingredient-color, var(--sky));
  border-radius: 0.52rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ingredient-color, var(--sky)) 9%, transparent), transparent 58%),
    rgba(6, 11, 10, 0.7);
}

.climate-ingredient-card[data-component="summer_rain"] { --ingredient-color: #8ec7d7; }
.climate-ingredient-card[data-component="longest_dry_spell"] { --ingredient-color: #d5ae61; }
.climate-ingredient-card[data-component="hot_days"] { --ingredient-color: #ed7546; }
.climate-ingredient-card[data-component="dry_soil_days"] { --ingredient-color: #b88c63; }

.climate-ingredient-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 0.1rem 0.55rem;
}

.climate-ingredient-symbol {
  grid-row: 1 / 3;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: 0.14rem;
  border-radius: 50%;
  background: var(--ingredient-color);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--ingredient-color) 55%, transparent);
}

.climate-ingredient-card header strong {
  color: #edf2ef;
  font-size: clamp(0.92rem, 1.2vw, 1.16rem);
  line-height: 1.1;
}

.climate-ingredient-card header small {
  color: var(--muted);
  font-size: clamp(0.62rem, 0.78vw, 0.76rem);
  line-height: 1.35;
}

.climate-ingredient-values {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  list-style: none;
}

.climate-ingredient-values li {
  position: relative;
  min-width: 0;
  padding: 0.52rem 0.46rem;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.36rem;
  background: rgba(255, 255, 255, 0.025);
}

.climate-ingredient-values li + li::before {
  content: "→";
  position: absolute;
  left: -0.31rem;
  top: 50%;
  color: var(--ingredient-color);
  font-size: 0.72rem;
  transform: translate(-50%, -50%);
}

.climate-ingredient-values span {
  color: #aeb9b4;
  font-size: clamp(0.58rem, 0.72vw, 0.7rem);
  font-weight: 760;
  letter-spacing: 0.07em;
}

.climate-ingredient-values strong {
  color: #fff;
  font-size: clamp(1.28rem, 2.1vw, 1.95rem);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  line-height: 1;
}

.climate-ingredient-values small {
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(0.56rem, 0.68vw, 0.66rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.climate-instrument {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1.05fr) auto minmax(8rem, 0.72fr) auto minmax(12rem, 1fr);
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 1.25rem);
}

.climate-instrument-inputs {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-self: stretch;
  gap: 0.38rem;
  list-style: none;
}

.climate-instrument-inputs li {
  min-height: 0;
  padding: 0.5rem 0.68rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 0.16rem 0.45rem;
  border: 1px solid rgba(142, 199, 215, 0.22);
  border-radius: 0.45rem;
  background: rgba(142, 199, 215, 0.05);
}

.climate-instrument-inputs i {
  grid-row: 1 / 3;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.1rem;
  border: 1px solid var(--sky);
  border-radius: 50%;
  box-shadow: 0 0 0.8rem rgba(142, 199, 215, 0.28);
}

.climate-instrument-inputs strong {
  color: #e7eeea;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
}

.climate-instrument-inputs span {
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.28;
}

.climate-instrument-arrow {
  width: clamp(1rem, 2.2vw, 2.6rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(142, 199, 215, 0.2), var(--sky));
}

.climate-instrument-arrow::after {
  content: "";
  float: right;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid var(--sky);
  border-right: 1px solid var(--sky);
  transform: translateY(-0.21rem) rotate(45deg);
}

.climate-instrument-core {
  aspect-ratio: 1;
  min-width: 8rem;
  padding: 0.9rem;
  display: grid;
  place-content: center;
  gap: 0.18rem;
  border: 1px solid rgba(234, 183, 103, 0.72);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle, rgba(228, 103, 56, 0.22), rgba(8, 13, 12, 0.95) 68%);
  box-shadow:
    0 0 0 0.45rem rgba(234, 183, 103, 0.06),
    0 1rem 3rem rgba(0, 0, 0, 0.38);
  text-align: center;
}

.climate-instrument-core span,
.climate-instrument-output span {
  color: var(--gold);
  font-size: 0.47rem;
  font-weight: 820;
  letter-spacing: 0.09em;
}

.climate-instrument-core strong {
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 520;
  line-height: 0.9;
}

.climate-instrument-core em {
  color: #f0b66d;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 720;
}

.climate-instrument-core small {
  color: #b9c6c0;
  font-size: 0.45rem;
  line-height: 1.2;
}

.climate-instrument-output {
  min-height: 10rem;
  padding: 1rem;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  border-left: 3px solid var(--ember);
  background: linear-gradient(90deg, rgba(228, 103, 56, 0.12), transparent);
}

.climate-instrument-output strong {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 520;
}

.climate-instrument-output p,
.climate-instrument-output small {
  margin: 0;
  color: #cad4cf;
  line-height: 1.35;
}

.climate-instrument-output p {
  font-size: 0.72rem;
}

.climate-instrument-output small {
  color: var(--muted);
  font-size: 0.52rem;
}

.climate-instrument-boundary {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(234, 183, 103, 0.4);
  color: #f2dcad;
  background: rgba(234, 183, 103, 0.055);
  font-size: clamp(0.72rem, 1.15vw, 1rem);
  font-weight: 760;
  letter-spacing: 0.04em;
  text-align: center;
}

.tracc-map-layout {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(8.6rem, 11rem) minmax(0, 1fr);
  gap: clamp(0.65rem, 1.3vw, 1.15rem);
}

.tracc-map-legend {
  padding: clamp(0.6rem, 1vw, 0.9rem);
  display: grid;
  align-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(242, 240, 232, 0.2);
  border-radius: 0.48rem;
  background: rgba(5, 11, 10, 0.82);
}

.tracc-map-legend > span {
  color: var(--gold);
  font-size: 0.5rem;
  font-weight: 820;
  letter-spacing: 0.09em;
}

.tracc-map-legend > strong {
  color: #edf1ed;
  font-size: 0.78rem;
  line-height: 1.2;
}

.tracc-map-legend ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.18rem;
  list-style: none;
}

.tracc-map-legend li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  color: #c8d0cb;
  font-size: 0.54rem;
  font-variant-numeric: tabular-nums;
}

.tracc-map-legend li i {
  height: 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.08rem;
}

.tracc-map-legend > small {
  color: var(--muted);
  font-size: 0.45rem;
  line-height: 1.35;
}

.tracc-map-pair {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  overflow: hidden;
}

.tracc-map-pair[data-transition="shift_2050_to_2100"]
  .tracc-map-figure[data-period="tracc_2050"] {
  z-index: 2;
  animation: tracc-map-shift-left 1.05s cubic-bezier(0.22, 0.74, 0.2, 1) both;
}

.tracc-map-pair[data-transition="shift_2050_to_2100"]
  .tracc-map-figure[data-period="tracc_2100"] {
  animation: tracc-map-enter-right 1.05s cubic-bezier(0.22, 0.74, 0.2, 1) 0.08s both;
}

@keyframes tracc-map-shift-left {
  from {
    transform: translateX(calc(100% + 0.65rem));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes tracc-map-enter-right {
  from {
    opacity: 0.35;
    transform: translateX(calc(100% + 0.65rem));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tracc-map-figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.52rem;
  background: #101816;
}

.tracc-map-figure svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #182422;
}

.tracc-map-grid {
  opacity: 0.98;
}

.tracc-map-boundaries path {
  fill: none;
  stroke: rgba(235, 239, 235, 0.42);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.tracc-france-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.tracc-map-figure .france-city-dot {
  fill: rgba(255, 255, 255, 0.8);
}

.tracc-map-figure .france-city-name {
  fill: rgba(255, 255, 255, 0.76);
  paint-order: stroke;
  stroke: rgba(20, 25, 22, 0.8);
  stroke-width: 1.5px;
}

.tracc-map-site circle {
  fill: #111715;
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tracc-map-site text {
  fill: #fff;
  font-family: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 7px;
  font-weight: 760;
  paint-order: stroke;
  stroke: rgba(10, 14, 12, 0.92);
  stroke-width: 2px;
}

.tracc-map-site .tracc-map-site-value {
  fill: #f4d496;
  font-size: 6px;
  font-weight: 650;
}

.tracc-map-figure figcaption {
  min-height: 4.2rem;
  padding: 0.58rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #dce4df;
  background: rgba(5, 9, 8, 0.9);
}

.tracc-map-figure figcaption > div:first-child {
  display: grid;
  gap: 0.12rem;
}

.tracc-map-figure figcaption > div:first-child span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 820;
}

.tracc-map-figure figcaption > div:first-child small {
  color: var(--muted);
  font-size: 0.5rem;
}

.tracc-map-primary-value {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 0.28rem;
  text-align: right;
}

.tracc-map-primary-value strong {
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 530;
}

.tracc-map-primary-value span {
  color: #e1e6e2;
  font-size: 0.58rem;
  font-weight: 680;
}

.tracc-map-primary-value small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.47rem;
}

.climate-stage-shell[data-state="climate_tracc_2100"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.climate-stage-shell[data-state="climate_tracc_2100"] .climate-stage-visual {
  grid-template-rows: minmax(0, 1fr) auto;
}

.climate-season-extension {
  padding: 0.55rem 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.18rem 0.75rem;
  border: 1px solid rgba(228, 103, 56, 0.36);
  border-radius: 0.42rem;
  background: linear-gradient(90deg, rgba(228, 103, 56, 0.1), rgba(234, 183, 103, 0.04));
}

.climate-season-extension > span {
  color: var(--muted);
  font-size: 0.47rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.climate-season-extension > strong {
  grid-row: 1 / 3;
  grid-column: 3;
  color: #f2c27d;
  font-size: clamp(0.9rem, 1.6vw, 1.35rem);
  white-space: nowrap;
}

.climate-season-line {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: minmax(1rem, 0.28fr) minmax(5rem, 1fr) minmax(1rem, 0.28fr);
  align-items: center;
}

.climate-season-line i {
  height: 0.4rem;
  background: repeating-linear-gradient(90deg, #9e7653 0 5px, transparent 5px 9px);
}

.climate-season-line b {
  padding: 0.38rem 0.5rem;
  color: #fff;
  background: linear-gradient(90deg, #c95636, #e69b54);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.climate-season-extension p,
.climate-season-extension small {
  margin: 0;
}

.climate-season-extension p {
  grid-column: 1 / 3;
  color: #d8c2aa;
  font-size: 0.52rem;
}

.climate-season-extension small {
  grid-column: 3;
  color: var(--muted);
  font-size: 0.42rem;
  text-align: right;
}

body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .climate-analysis-card,
body[data-experience="story"] .stage[data-story-scene="climate_limits"] .climate-analysis-card {
  top: auto;
  right: 1rem;
  bottom: 3.4rem;
  width: min(30rem, 52%);
  max-height: calc(100% - 5rem);
  padding: 0.82rem 0.92rem;
  gap: 0.5rem;
  border-color: rgba(234, 183, 103, 0.45);
  background:
    linear-gradient(145deg, rgba(228, 103, 56, 0.1), transparent 48%),
    rgba(6, 11, 10, 0.93);
}

body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .climate-visual,
body[data-experience="story"] .stage[data-story-scene="climate_limits"] .climate-visual {
  padding: 0.2rem 0;
  border: 0;
  background: none;
}

.climate-threshold-horizon,
.climate-return-chain {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.climate-threshold-horizon {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
}

.climate-threshold-horizon li {
  position: relative;
  min-width: 0;
  padding: 0.45rem 0.35rem;
  display: grid;
  gap: 0.08rem;
  border-top: 2px solid #7a8e83;
  background: rgba(255, 255, 255, 0.025);
}

.climate-threshold-horizon li[data-status="tracc-2050"] { border-color: var(--gold); }
.climate-threshold-horizon li[data-status="tracc-2100"] { border-color: var(--ember); }

.climate-threshold-horizon i {
  position: absolute;
  top: -0.31rem;
  left: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.climate-threshold-horizon strong {
  color: #fff;
  font-size: 0.85rem;
}

.climate-threshold-horizon span {
  color: var(--muted);
  font-size: 0.48rem;
}

.climate-return-chain {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}

.climate-return-chain li {
  min-width: 0;
  padding: 0.45rem;
  display: grid;
  gap: 0.12rem;
  border-top: 2px solid #708f78;
  background: rgba(112, 143, 120, 0.08);
}

.climate-return-chain li[data-status="recross"] {
  border-color: var(--gold);
  background: rgba(234, 183, 103, 0.07);
}

.climate-return-chain li[data-status="next-inquiry"] {
  border-color: #8b6961;
  background: rgba(139, 105, 97, 0.07);
}

.climate-return-chain strong {
  color: #edf1ee;
  font-size: 0.54rem;
}

.climate-return-chain span {
  color: var(--muted);
  font-size: 0.43rem;
  line-height: 1.25;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .act-rail {
    grid-column: 1 / -1;
    order: 3;
  }

  .build-status {
    grid-column: 2;
    grid-row: 1;
  }

  .stage-shell {
    top: 7.9rem;
    height: calc(100svh - 7.9rem);
  }

  .stage {
    height: calc(100svh - 9.9rem);
  }
}

@media (max-width: 820px) {
  .topbar {
    position: relative;
    min-height: auto;
    padding: 0.55rem 0.7rem;
    gap: 0.55rem;
  }

  .brand strong {
    font-size: 1rem;
  }

  .act-rail {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .act-rail ol {
    width: 43rem;
  }

  .story-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "pupitre";
  }

  .stage-shell {
    top: 0;
    z-index: 8;
    height: 47svh;
    padding: 0.5rem;
    background: var(--night);
  }

  .stage {
    height: calc(47svh - 1rem);
  }

  .pupitre {
    padding-bottom: 7rem;
    border-right: 0;
  }

  .scene {
    min-height: 68svh;
    padding-block: 4rem;
    scroll-margin-top: calc(47svh + 0.75rem);
  }

  .scene.territory-scrollytelling {
    padding-block: 0 6rem;
  }

  .territory-scene-opening {
    min-height: 64svh;
    padding-block: 3.5rem;
    scroll-margin-top: calc(47svh + 0.75rem);
  }

  .territory-reading-flow::before {
    left: 0.2rem;
  }

  .territory-reading-step {
    min-height: 76svh;
    padding: 2.5rem 0 2.5rem 0.9rem;
    scroll-margin-top: calc(47svh + 0.75rem);
  }

  .territory-reading-step-card {
    padding: 1rem;
    gap: 0.62rem;
  }

  .territory-reading-step-card h3 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }

  .territory-reading-question {
    font-size: 1rem !important;
  }

  .territory-reading-narration {
    font-size: 0.88rem !important;
  }

  .territory-reading-facts {
    gap: 0.3rem;
  }

  .territory-reading-facts > div {
    min-height: 3.25rem;
    padding: 0.45rem 0.5rem;
  }

  .territory-reading-step-card blockquote {
    font-size: 1rem;
  }

  .territory-scrollytelling > .proof-card {
    margin: 1rem 0 6rem 0.9rem;
  }

  .scene-slate {
    top: 0.5rem;
    left: 0.5rem;
    min-width: 0;
    max-width: calc(100% - 1rem);
    padding: 0.55rem 0.65rem;
  }

  .prologue-back {
    top: 0.5rem;
    left: 0.5rem;
    min-height: 2.25rem;
    padding: 0.42rem 0.6rem;
    font-size: 0.65rem;
  }

  body[data-experience="prologue"] .scene-slate {
    left: 5.6rem;
    max-width: calc(100% - 6.1rem);
  }

  .scene-slate span,
  .scene-slate time {
    font-size: 0.48rem;
  }

  .scene-slate strong {
    font-size: 1rem;
  }

  .illustration-label {
    top: 5.25rem;
    right: 0.5rem;
    max-width: 70%;
    font-size: 0.54rem;
  }

  .map-landmark {
    display: none;
  }

  .event-leader {
    width: 1.7rem;
  }

  .event-marker {
    padding: 0.55rem 0.65rem;
  }

  .event-marker strong {
    font-size: 1.05rem;
  }

  .event-marker span,
  .event-marker small {
    font-size: 0.52rem;
  }

  .map-attribution {
    bottom: 2.45rem;
    max-width: 95%;
    font-size: 0.46rem;
  }

  .timeline-panel,
  .spatial-panel,
  .locked-panel {
    padding: 0.65rem;
    gap: 0.35rem;
  }

  .stage-kicker em {
    display: none;
  }

  .timeline-shell {
    min-height: 0;
    padding: 0.55rem;
    gap: 0.35rem;
  }

  .timeline-cue strong {
    font-size: 1.05rem;
  }

  .timeline-cue p {
    display: none;
  }

  .temporal-plot {
    min-height: 12.8rem;
  }

  .danger-sensations > p,
  .danger-chart p,
  .time-to-space-copy > span {
    font-size: 0.48rem;
  }

  .danger-inset {
    inset: 2% 0.5%;
    padding: 0.45rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.35rem;
  }

  .danger-sensations {
    gap: 0.24rem;
  }

  .danger-sensations h3 {
    margin-bottom: 0.12rem;
    font-size: 0.72rem;
  }

  .danger-sensations ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .danger-sensations li {
    min-height: 2.65rem;
    padding: 0.24rem;
  }

  .danger-sensations li strong {
    font-size: 0.48rem;
  }

  .danger-sensations li span {
    font-size: 0.46rem;
    line-height: 1.18;
  }

  .danger-chart {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "eyebrow summary"
      "plot plot"
      "note note";
    gap: 0.2rem;
    padding-top: 0;
  }

  .danger-chart > strong {
    font-size: 0.5rem;
  }

  .danger-chart > small {
    font-size: 0.46rem;
  }

  .danger-chart svg {
    min-height: 6.8rem;
    max-height: 9rem;
  }

  .ignition-reprise {
    top: auto;
    right: 0.5rem;
    bottom: 3rem;
    width: calc(100% - 1rem);
    padding: 0.65rem 0.75rem;
    gap: 0.24rem;
  }

  .ignition-reprise > span {
    font-size: 0.46rem;
  }

  .ignition-reprise > strong {
    font-size: 1rem;
  }

  .ignition-reprise > p {
    font-size: 0.52rem;
  }

  .ignition-reprise > small {
    font-size: 0.46rem;
  }

  .spatial-landing-card {
    right: 0.5rem;
    bottom: 2.85rem;
    width: calc(100% - 1rem);
    padding: 0.6rem 0.7rem;
    gap: 0.22rem;
  }

  .spatial-landing-card > span {
    font-size: 0.48rem;
  }

  .spatial-landing-card > strong {
    font-size: 0.86rem;
  }

  .spatial-landing-card > p {
    font-size: 0.56rem;
  }

  .spatial-landing-card > small {
    font-size: 0.48rem;
  }

  .territory-fire-context {
    top: 5.4rem;
    left: 0.5rem;
    bottom: auto;
    width: min(10.5rem, 46%);
    padding: 0.42rem 0.48rem 0.46rem 0.56rem;
    gap: 0.1rem;
  }

  .territory-fire-context > span,
  .territory-fire-context > small {
    font-size: 0.36rem;
  }

  .territory-fire-context > strong {
    font-size: 0.58rem;
  }

  .territory-fire-context > p {
    font-size: 0.42rem;
  }

  .territory-fire-context > p b {
    font-size: 0.62rem;
  }

  .territory-map-legend {
    top: 4.7rem;
    left: 0.5rem;
    width: min(12.5rem, 52%);
    padding: 0.55rem 0.58rem;
    gap: 0.3rem 0.45rem;
  }

  .territory-map-legend > span {
    font-size: 0.5rem;
  }

  .territory-map-legend > strong {
    font-size: 0.78rem;
  }

  .territory-map-legend li {
    grid-template-columns: 0.75rem minmax(0, 1fr);
    gap: 0.3rem;
    font-size: 0.55rem;
  }

  .territory-map-legend li i {
    width: 0.68rem;
    height: 0.52rem;
  }

  .territory-map-legend > small {
    font-size: 0.5rem;
  }

  .territory-map-explore {
    top: 15.5rem;
    left: 0.5rem;
    bottom: auto;
    max-width: calc(100% - 1rem);
  }

  .territory-map-explore span {
    display: none;
  }

  .territory-north {
    width: 1.35rem;
  }

  .territory-north i {
    height: 1.15rem;
  }

  .territory-analysis-card {
    top: auto;
    right: 0.5rem;
    bottom: 2.85rem;
    width: calc(100% - 1rem);
    max-height: 56%;
    padding: 0.58rem 0.62rem;
    gap: 0.38rem;
  }

  .territory-analysis-card > header {
    gap: 0.15rem;
  }

  .territory-analysis-card > header span,
  .territory-analysis-card > small,
  .territory-analysis-limit {
    font-size: 0.4rem;
  }

  .territory-analysis-card > header strong {
    font-size: 0.88rem;
  }

  .territory-analysis-card > header p {
    font-size: 0.5rem;
  }

  .territory-plan-explanation,
  .territory-analysis-card > blockquote,
  .territory-analysis-limit,
  .territory-analysis-card > small {
    display: none;
  }

  .territory-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .territory-modes button {
    min-height: 1.7rem;
    padding: 0.2rem 0.1rem;
    font-size: 0.52rem;
  }

  .territory-metrics {
    gap: 0.22rem;
  }

  .territory-metrics > div {
    min-height: 2.2rem;
    padding: 0.28rem 0.34rem;
  }

  .territory-metrics dt {
    font-size: 0.5rem;
  }

  .territory-metrics dd {
    font-size: 0.7rem;
  }

  .territory-analysis-card > blockquote {
    font-size: 0.55rem;
  }

  .climate-analysis-card {
    top: auto;
    right: 0.5rem;
    bottom: 2.85rem;
    width: calc(100% - 1rem);
    max-height: 65%;
    padding: 0.52rem 0.58rem;
    gap: 0.28rem;
  }

  .climate-analysis-card > header {
    gap: 0.1rem;
  }

  .climate-analysis-card > header span {
    font-size: 0.38rem;
  }

  .climate-analysis-card > header strong {
    font-size: 0.86rem;
  }

  .climate-analysis-card > header p {
    font-size: 0.45rem;
  }

  .climate-analysis-card > blockquote,
  .climate-analysis-limit,
  .climate-analysis-card > small {
    display: none;
  }

  .climate-visual {
    padding: 0.3rem;
    gap: 0.25rem;
  }

  .climate-threshold {
    padding: 0.22rem 0.28rem;
    font-size: 0.34rem;
  }

  .climate-season-collection {
    max-height: 8.7rem;
  }

  .climate-period-layout {
    gap: 0.2rem;
  }

  .climate-period,
  .climate-fixed-territory {
    padding: 0.3rem;
    gap: 0.06rem;
  }

  .climate-fixed-territory {
    width: 5.4rem;
  }

  .climate-period span,
  .climate-fixed-territory span,
  .climate-model-grid-list span,
  .climate-model-grid-list small {
    font-size: 0.3rem;
  }

  .climate-period strong,
  .climate-fixed-territory strong {
    font-size: 0.48rem;
  }

  .climate-period p,
  .climate-period small,
  .climate-fixed-territory small {
    font-size: 0.31rem;
  }

  .climate-model-grid-list {
    gap: 0.18rem;
  }

  .climate-model-grid-list li {
    padding: 0.24rem;
  }

  .climate-model-grid-list strong {
    font-size: 0.36rem;
  }

  .climate-delta-rows {
    gap: 0.22rem;
  }

  .climate-delta-row {
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.24rem;
  }

  .climate-delta-row > header strong {
    font-size: 0.39rem;
  }

  .climate-delta-row > header span {
    font-size: 0.29rem;
  }

  .climate-delta-models {
    gap: 0.08rem;
  }

  .climate-delta-model {
    grid-template-columns: 4.7rem minmax(0, 1fr) 3.9rem;
    gap: 0.16rem;
  }

  .climate-delta-model small,
  .climate-delta-model b {
    font-size: 0.3rem;
  }

  .climate-delta-model i {
    height: 0.25rem;
  }

  .climate-calendar-unavailable,
  .climate-sensitivity {
    padding: 0.22rem 0.28rem;
  }

  .climate-calendar-unavailable strong,
  .climate-sensitivity strong {
    font-size: 0.34rem;
  }

  .climate-calendar-unavailable span,
  .climate-sensitivity span,
  .climate-calendar-unavailable p,
  .climate-sensitivity p {
    font-size: 0.28rem;
  }

  .climate-summary-relations {
    gap: 0.16rem;
  }

  .climate-summary-relations > div {
    padding: 0.24rem;
  }

  .climate-summary-relations strong {
    font-size: 0.42rem;
  }

  .climate-summary-relations span {
    font-size: 0.3rem;
  }

  .climate-causal-chain {
    gap: 0.14rem;
  }

  .climate-causal-chain li {
    min-height: 3.65rem;
    padding: 0.22rem;
    gap: 0.08rem;
  }

  .climate-causal-chain i {
    width: 0.72rem;
    height: 0.72rem;
    font-size: 0.3rem;
  }

  .climate-causal-chain strong {
    font-size: 0.31rem;
  }

  .climate-causal-chain span {
    font-size: 0.27rem;
  }

  .climate-final-statement {
    padding: 0.26rem 0.3rem;
    font-size: 0.36rem;
  }

  .climate-territory-constant {
    top: 4.6rem;
    left: 0.5rem;
    bottom: auto;
    width: min(10rem, 47%);
    padding: 0.38rem 0.42rem 0.4rem 0.5rem;
    gap: 0.08rem;
  }

  .climate-territory-constant span {
    font-size: 0.32rem;
  }

  .climate-territory-constant strong {
    font-size: 0.5rem;
  }

  .climate-territory-constant p,
  .climate-territory-constant small {
    font-size: 0.3rem;
  }

  .diois-ring {
    width: 3.2rem;
    height: 3.2rem;
    margin-left: -1.6rem;
  }

  .diois-leader {
    width: 1rem;
  }

  .diois-marker {
    padding: 0.45rem 0.5rem;
  }

  .diois-marker strong {
    font-size: 0.68rem;
  }

  .diois-marker small,
  .diois-place span {
    font-size: 0.4rem;
  }

  .time-to-space-card {
    inset: 2%;
    padding: 0.55rem;
    grid-template-columns: minmax(7.5rem, 0.85fr) minmax(0, 1.15fr);
    gap: 0.5rem;
  }

  .time-to-space-card h3 {
    font-size: 1.05rem;
  }

  .time-to-space-copy {
    gap: 0.42rem;
  }

  .time-to-space-map-frame,
  .time-to-space-map-frame svg {
    min-height: 10rem;
  }

  .time-to-space-map-frame figcaption {
    right: 0.3rem;
    bottom: 0.25rem;
    font-size: 0.46rem;
  }

  .timeline-data-details {
    font-size: 0.52rem;
  }

  .timeline-data-details[open] {
    right: 0.65rem;
    bottom: 2.4rem;
    left: 0.65rem;
    max-height: 75%;
  }

  .prototype-warning {
    display: none;
  }

  .spatial-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .spatial-panel > .stage-kicker {
    display: none;
  }

  .spatial-shell {
    padding: 0.42rem;
    grid-template-rows: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .spatial-cue {
    display: none;
  }

  .comparison-stage {
    gap: 0.2rem;
  }

  .comparison-contract {
    gap: 0.3rem;
  }

  .comparison-contract > span,
  .comparison-contract > strong,
  .comparison-contract > small {
    font-size: 0.5rem;
  }

  .comparison-row {
    grid-template-columns: 5.3rem minmax(0, 1fr);
  }

  .comparison-row > header {
    padding: 0.3rem;
    gap: 0.1rem;
  }

  .comparison-row > header span,
  .comparison-row > header small {
    font-size: 0.46rem;
  }

  .comparison-row > header strong {
    font-size: 0.64rem;
  }

  .comparison-row > svg {
    min-height: 4.8rem;
  }

  .comparison-key {
    display: block;
    gap: 0.2rem;
    font-size: 0.46rem;
  }

  .comparison-key span:first-child,
  .comparison-key span:nth-child(2) {
    display: none;
  }

  .comparison-key span:last-child {
    display: block;
    text-align: center;
  }

  .comparison-mobile-summary {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.16rem 0.28rem 0.22rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.16rem;
    border-top: 1px solid rgba(242, 240, 232, 0.1);
  }

  .comparison-mobile-summary div {
    min-width: 0;
    display: grid;
    gap: 0.06rem;
    text-align: center;
  }

  .comparison-mobile-summary dt {
    color: var(--muted);
    font-size: 0.42rem;
    font-weight: 780;
    letter-spacing: 0.04em;
  }

  .comparison-mobile-summary dd {
    margin: 0;
    display: grid;
    gap: 0.02rem;
    font-size: 0.48rem;
    font-weight: 720;
  }

  .mobile-summary-rain {
    color: #a8d9e4;
  }

  .mobile-summary-temperature {
    color: #ffad83;
  }

  .spatial-bridge {
    grid-template-columns: minmax(0, 1fr) minmax(8.8rem, 44%);
    gap: 0.22rem 0.3rem;
  }

  .fire-overview-map-frame,
  .fire-overview-map-frame svg {
    min-height: 7.5rem;
  }

  .fire-overview-map-frame figcaption {
    right: 0.25rem;
    bottom: 0.2rem;
    font-size: 0.34rem;
  }

  .fire-overview-rail {
    padding: 0.28rem;
    gap: 0.08rem;
  }

  .fire-overview-rail > span {
    font-size: 0.38rem;
  }

  .fire-overview-rail h3 {
    font-size: 0.38rem;
  }

  .fire-overview-rail ol {
    gap: 0.02rem;
  }

  .fire-overview-rail li {
    padding: 0.08rem 0;
    gap: 0.16rem;
  }

  .fire-overview-rail li strong {
    font-size: 0.42rem;
  }

  .fire-overview-rail li small {
    font-size: 0.32rem;
  }

  .fire-overview-rail li em {
    max-width: 4.2rem;
    font-size: 0.38rem;
  }

  .spatial-bridge > p {
    font-size: 0.56rem;
  }

  .national-stage {
    gap: 0.2rem;
  }

  .map-indicator {
    min-height: 2rem;
    gap: 0.05rem 0.35rem;
  }

  .map-indicator > span {
    padding: 0.2rem 0.28rem;
    font-size: 0.34rem;
  }

  .map-indicator h3 {
    font-size: 0.65rem;
  }

  .map-indicator p {
    display: none;
  }

  .national-layout {
    grid-template-columns: minmax(0, 1fr) minmax(8.8rem, 44%);
    gap: 0.3rem;
  }

  .france-map-frame svg {
    min-height: 7.5rem;
  }

  .france-map-frame figcaption {
    font-size: 0.36rem;
  }

  .anchor-rail {
    padding: 0.25rem;
    gap: 0.1rem;
  }

  .anchor-rail > span {
    font-size: 0.38rem;
  }

  .anchor-rail ol {
    gap: 0.05rem;
  }

  .anchor-rail li {
    padding: 0.1rem;
    gap: 0.18rem;
  }

  .anchor-id {
    width: 0.95rem;
    height: 0.95rem;
    font-size: 0.42rem;
  }

  .anchor-rail li strong {
    font-size: 0.46rem;
  }

  .anchor-rail li small {
    display: none;
  }

  .anchor-rail li .anchor-event-area {
    font-size: 0.34rem;
  }

  .anchor-rail li em {
    font-size: 0.42rem;
  }

  .indicator-legend {
    top: 0.25rem;
    left: 0.25rem;
    width: 5.7rem;
    padding: 0.28rem;
    gap: 0.14rem;
  }

  .indicator-legend > span {
    font-size: 0.28rem;
  }

  .indicator-legend > strong {
    font-size: 0.4rem;
  }

  .indicator-legend ol {
    gap: 0.06rem;
  }

  .indicator-legend li {
    grid-template-columns: 0.9rem minmax(0, 1fr);
    gap: 0.18rem;
    font-size: 0.34rem;
  }

  .indicator-legend-swatch {
    width: 0.9rem;
    height: 0.35rem;
  }

  .indicator-legend > small {
    padding-top: 0.12rem;
    font-size: 0.29rem;
  }

  .map-separation {
    gap: 0.25rem;
    font-size: 0.38rem;
  }

  .map-separation strong {
    font-size: 0.38rem;
  }

  .spatial-data-details {
    font-size: 0.38rem;
  }

  .spatial-data-details[open] p {
    position: absolute;
    right: 0.65rem;
    bottom: 2.35rem;
    left: 0.65rem;
    z-index: 12;
    padding: 0.55rem;
    border: 1px solid var(--line);
    background: rgba(8, 12, 11, 0.97);
  }

  .locked-panel h2 {
    font-size: 2rem;
  }

  .entry-gate {
    padding: 1rem;
    align-items: end;
    background:
      linear-gradient(0deg, rgba(7, 11, 10, 0.99) 0 28%, rgba(7, 11, 10, 0.72) 58%, rgba(7, 11, 10, 0.14) 100%);
  }

  .entry-card {
    width: 100%;
    padding: 1rem 0.8rem 1.8rem;
    gap: 0.75rem;
  }

  .entry-card h1 {
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: 0.94;
    white-space: normal;
  }

  .entry-card h1 span,
  .entry-card h1 em {
    white-space: nowrap;
  }

  .entry-card h1 em {
    display: block;
  }

  .entry-lead {
    margin-block: 0.4rem;
    font-size: 1rem;
  }

  .entry-national-fact,
  .entry-invitation {
    font-size: 0.78rem;
  }

  .entry-case {
    margin-block: 0.35rem 0.45rem;
    padding: 0.6rem 0.75rem;
  }

  .entry-case span {
    font-size: 1.04rem;
    letter-spacing: 0.09em;
  }

  .entry-case strong {
    font-size: 0.9rem;
  }

  .entry-actions {
    margin-top: 0.8rem;
    gap: 0.45rem;
  }

  .entry-actions button {
    min-height: 2.55rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
  }

  .territory-ring {
    width: 3.5rem;
    height: 3.5rem;
    margin-left: -1.75rem;
  }

  .territory-leader {
    width: 1.2rem;
  }

  .territory-marker {
    padding: 0.5rem 0.6rem;
  }

  .territory-marker strong {
    font-size: 0.78rem;
  }

  .territory-marker small {
    margin-block: 0.12rem;
    font-size: 0.63rem;
  }

  .event-map-legend {
    top: 0.5rem;
    right: 0.5rem;
    max-width: 70%;
    font-size: 0.48rem;
  }

  .prologue-score {
    right: 0.7rem;
    bottom: 2.9rem;
    left: 0.7rem;
    width: auto;
  }

  .prologue-copy {
    max-height: calc(100svh - 12.5rem);
    padding: 1rem;
    gap: 0.55rem;
    overflow: auto;
  }

  .prologue-copy h2 {
    max-width: 15ch;
    margin-block: 0.75rem;
    font-size: clamp(1.35rem, 6.67vw, 2.15rem);
  }

  .prologue-copy > p:not(.prologue-beat-label) {
    font-size: 0.88rem;
  }

  .prologue-proof p {
    font-size: 0.67rem;
  }

  .prologue-actions {
    min-height: 3.25rem;
    padding: 0.3rem;
    gap: 0.35rem;
  }

  .prologue-actions button {
    min-height: 2.45rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
  }

  .prologue-actions span {
    font-size: 0.68rem;
  }

  .prologue-time-hint {
    top: 0.7rem;
    right: 0.7rem;
    bottom: auto;
    left: 0.7rem;
    width: auto;
    padding: 0.6rem;
  }

  body:not([data-experience="story"]) .map-attribution {
    bottom: 2.25rem;
  }

  .story-navigation {
    position: fixed;
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
  }
}

@media (max-width: 820px) {
  .climate-panel {
    padding: 0.55rem;
    gap: 0.35rem;
  }

  .climate-stage-shell {
    padding: 0.5rem;
    gap: 0.36rem;
  }

  .climate-stage-cue {
    min-height: 1.55rem;
    gap: 0.4rem;
  }

  .climate-stage-cue span {
    font-size: 0.38rem;
  }

  .climate-stage-cue strong {
    max-width: 56%;
    font-size: 0.52rem;
    line-height: 1.15;
  }

  .climate-stage-meta {
    padding-top: 0.28rem;
    gap: 0.35rem;
    font-size: 0.34rem;
  }

  .climate-data-details {
    display: none;
  }

  .climate-ingredients-grid {
    gap: 0.3rem;
  }

  .climate-ingredient-card {
    padding: 0.3rem;
    grid-template-columns: minmax(5.5rem, 0.72fr) minmax(0, 1.5fr);
    gap: 0.25rem;
    border-top-width: 2px;
  }

  .climate-ingredient-card header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.04rem 0.26rem;
  }

  .climate-ingredient-symbol {
    width: 0.42rem;
    height: 0.42rem;
    margin-top: 0.05rem;
  }

  .climate-ingredient-card header strong {
    font-size: 0.58rem;
  }

  .climate-ingredient-card header small {
    display: block;
    font-size: 0.34rem;
    line-height: 1.2;
  }

  .climate-ingredient-values {
    gap: 0.15rem;
  }

  .climate-ingredient-values li {
    padding: 0.24rem 0.18rem;
    gap: 0.05rem;
  }

  .climate-ingredient-values li + li::before {
    left: -0.08rem;
    font-size: 0.38rem;
  }

  .climate-ingredient-values span {
    font-size: 0.34rem;
  }

  .climate-ingredient-values strong {
    font-size: 0.82rem;
  }

  .climate-ingredient-values small {
    font-size: 0.32rem;
  }

  .climate-instrument {
    grid-template-columns: minmax(7rem, 1.05fr) 0.5rem minmax(4.2rem, 0.7fr) 0.5rem minmax(6.8rem, 1fr);
    gap: 0.25rem;
  }

  .climate-instrument-inputs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .climate-instrument-inputs li {
    min-height: 0;
    padding: 0.18rem 0.25rem;
    gap: 0.04rem 0.18rem;
  }

  .climate-instrument-inputs i {
    width: 0.35rem;
    height: 0.35rem;
  }

  .climate-instrument-inputs strong {
    font-size: 0.35rem;
  }

  .climate-instrument-inputs span {
    font-size: 0.3rem;
  }

  .climate-instrument-arrow {
    width: 0.5rem;
  }

  .climate-instrument-core {
    min-width: 4.2rem;
    padding: 0.35rem;
  }

  .climate-instrument-core span,
  .climate-instrument-output span {
    font-size: 0.26rem;
  }

  .climate-instrument-core strong {
    font-size: 1.3rem;
  }

  .climate-instrument-core em {
    font-size: 0.52rem;
  }

  .climate-instrument-core small {
    font-size: 0.24rem;
  }

  .climate-instrument-output {
    min-height: 5rem;
    padding: 0.4rem;
    gap: 0.15rem;
  }

  .climate-instrument-output strong {
    font-size: 0.9rem;
  }

  .climate-instrument-output p {
    font-size: 0.32rem;
  }

  .climate-instrument-output small {
    font-size: 0.26rem;
  }

  .climate-instrument-boundary {
    padding: 0.3rem;
    font-size: 0.44rem;
  }

  .tracc-map-layout {
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 0.32rem;
  }

  .tracc-map-legend {
    padding: 0.35rem;
    gap: 0.2rem;
  }

  .tracc-map-legend > span {
    font-size: 0.28rem;
  }

  .tracc-map-legend > strong {
    font-size: 0.4rem;
  }

  .tracc-map-legend ol {
    gap: 0.08rem;
  }

  .tracc-map-legend li {
    grid-template-columns: 0.85rem minmax(0, 1fr);
    gap: 0.2rem;
    font-size: 0.3rem;
  }

  .tracc-map-legend li i {
    height: 0.35rem;
  }

  .tracc-map-legend > small {
    font-size: 0.25rem;
  }

  .tracc-map-pair {
    gap: 0.28rem;
  }

  .tracc-map-figure figcaption {
    min-height: 2.25rem;
    padding: 0.25rem;
    gap: 0.2rem;
  }

  .tracc-map-figure figcaption > div:first-child span {
    font-size: 0.4rem;
  }

  .tracc-map-figure figcaption > div:first-child small,
  .tracc-map-primary-value small {
    font-size: 0.27rem;
  }

  .tracc-map-primary-value strong {
    font-size: 0.75rem;
  }

  .tracc-map-primary-value span {
    font-size: 0.3rem;
  }

  .tracc-map-site text {
    font-size: 5px;
  }

  .tracc-map-site .tracc-map-site-value {
    font-size: 4px;
  }

  .climate-season-extension {
    padding: 0.25rem 0.35rem;
    gap: 0.08rem 0.3rem;
  }

  .climate-season-extension > span,
  .climate-season-extension p {
    font-size: 0.27rem;
  }

  .climate-season-extension > strong {
    font-size: 0.55rem;
  }

  .climate-season-line b {
    padding: 0.18rem;
    font-size: 0.25rem;
  }

  .climate-season-extension small {
    font-size: 0.23rem;
  }

  body[data-experience="story"] .stage[data-story-scene="climate_threshold"] .climate-analysis-card,
  body[data-experience="story"] .stage[data-story-scene="climate_limits"] .climate-analysis-card {
    right: 0.5rem;
    bottom: 2.85rem;
    width: calc(100% - 1rem);
    padding: 0.55rem 0.6rem;
  }

  .climate-threshold-horizon strong {
    font-size: 0.58rem;
  }

  .climate-threshold-horizon span,
  .climate-return-chain strong {
    font-size: 0.34rem;
  }

  .climate-return-chain span {
    font-size: 0.28rem;
  }
}

@media (max-width: 820px) {
  .epilogue-scene {
    min-height: 72svh;
  }

  .epilogue-scene h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .epilogue-pupitre-backstage-trigger {
    min-height: 4rem;
    margin-top: 1rem;
  }

  .epilogue-stage-shell {
    inset: 0.45rem 0.45rem 2.25rem;
    border-radius: 0.5rem;
  }

  .epilogue-stage-cue {
    min-height: 2.45rem;
    padding: 0.48rem 0.55rem;
    gap: 0.4rem;
  }

  .epilogue-stage-cue span {
    font-size: 0.58rem;
  }

  .epilogue-stage-cue strong {
    max-width: 58%;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .epilogue-evidence-layer,
  .epilogue-instrument-layer,
  .epilogue-territory-layer {
    inset: 2.45rem 0 0;
    padding: 0.45rem;
  }

  .epilogue-evidence-layer {
    grid-template-rows: minmax(0, 1fr);
  }

  .epilogue-recap,
  .epilogue-evidence-layer blockquote {
    display: none;
  }

  .epilogue-statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .epilogue-statuses li {
    min-width: 0;
    padding: 0.42rem;
    grid-template-columns: 0.75rem minmax(0, 1fr);
    align-content: center;
    gap: 0.24rem 0.42rem;
  }

  .epilogue-status-mark {
    width: 0.7rem;
    height: 0.7rem;
  }

  .epilogue-statuses strong {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .epilogue-statuses p {
    grid-column: 1 / -1;
    font-size: 0.61rem;
    line-height: 1.25;
  }

  .epilogue-instrument-layer {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .epilogue-chain {
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .epilogue-chain::before,
  .epilogue-chain::after {
    display: none;
  }

  .epilogue-chain li {
    min-height: 0;
    padding: 0.24rem 0.35rem;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-content: center;
    gap: 0.02rem 0.3rem;
    border-radius: 0.25rem;
  }

  .epilogue-chain li > span {
    grid-row: 1 / 3;
    font-size: 0.54rem;
  }

  .epilogue-chain li > strong {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .epilogue-chain li > small {
    display: none;
  }

  .epilogue-transformations {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .epilogue-transformations li {
    padding: 0.34rem;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0.08rem;
    border: 1px solid rgba(234, 183, 103, 0.26);
    border-top-width: 2px;
    background: rgba(8, 14, 12, 0.72);
  }

  .epilogue-transformations span,
  .epilogue-transformations strong {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .epilogue-transformations i {
    display: none;
  }

  .epilogue-parameters {
    top: 0.45rem;
    left: 0.45rem;
    width: 45%;
    padding: 0.45rem;
  }

  .epilogue-parameters > span {
    font-size: 0.58rem;
  }

  .epilogue-parameters ol {
    margin-top: 0.3rem;
    gap: 0.12rem;
  }

  .epilogue-parameters li {
    padding-top: 0.16rem;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.2rem;
  }

  .epilogue-parameters li span {
    font-size: 0.52rem;
  }

  .epilogue-parameters li strong {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .epilogue-outputs {
    right: 0.45rem;
    bottom: 4.8rem;
    left: 50%;
    padding: 0.35rem;
    color: #eef2ef;
    background: rgba(8, 14, 12, 0.72);
    font-size: 0.6rem;
    line-height: 1.35;
    text-align: left;
  }

  .epilogue-outputs span {
    white-space: normal;
  }

  .epilogue-signature {
    right: 0.45rem;
    bottom: 0.4rem;
    left: 0.45rem;
    gap: 0.15rem;
    text-align: left;
  }

  .epilogue-signature strong {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.22;
  }

  .epilogue-signature p {
    max-width: 72%;
    font-size: 0.58rem;
    line-height: 1.2;
  }

  .epilogue-signature small {
    font-size: 0.54rem;
  }

  .epilogue-backstage-trigger {
    right: 0.45rem;
    bottom: 0.35rem;
    min-height: 1.8rem;
    padding: 0.3rem 0.4rem;
    font-size: 0.58rem;
  }

  .epilogue-framing-reticle text {
    font-size: 7px;
  }

  .epilogue-backstage {
    inset: 0;
    width: 100vw;
    height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .epilogue-backstage > header {
    position: relative;
    padding: 1rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .epilogue-backstage h2 {
    font-size: clamp(2rem, 11vw, 3.25rem);
  }

  .epilogue-backstage > header p {
    font-size: 0.9rem;
  }

  .epilogue-backstage > header button {
    width: fit-content;
    grid-row: 1;
  }

  .epilogue-backstage > nav {
    top: 0;
    padding: 0.75rem 1rem;
  }

  .epilogue-backstage > nav ol {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
  }

  .epilogue-backstage > nav a {
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .epilogue-backstage-content {
    padding-inline: 1rem;
  }

  .epilogue-backstage-section {
    padding-block: 2rem;
    scroll-margin-top: 4.5rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .epilogue-backstage-index,
  .epilogue-backstage-section h3,
  .epilogue-backstage-section > dl,
  .epilogue-backstage-section h4,
  .epilogue-backstage-section > .epilogue-version-register {
    grid-column: 1;
    grid-row: auto;
  }

  .epilogue-backstage-section h3 {
    max-width: none;
  }

  .epilogue-backstage-section > dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .epilogue-backstage-section dt,
  .epilogue-backstage-section dd {
    font-size: 0.84rem;
  }
}

/* Les petits écrans disposent de compositions dédiées et d’un plateau plein écran. */
@media (max-width: 820px) {
  .stage-expand {
    position: absolute;
    z-index: 40;
    right: 0.55rem;
    bottom: 2.65rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    display: block;
    border: 1px solid rgba(234, 183, 103, 0.8);
    border-radius: 999px;
    color: #17130c;
    background: var(--gold);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.42);
    font: 760 0.72rem/1 Inter, Arial, sans-serif;
  }

  .stage[data-panel="map"] .stage-expand {
    top: 0.55rem;
    right: 0.55rem;
    bottom: auto;
  }

  body.stage-expanded {
    overflow: hidden;
  }

  body.stage-expanded .stage-shell {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100vw;
    height: 100svh;
    padding: 0;
    background: #080d0c;
  }

  body.stage-expanded .stage {
    width: 100vw;
    height: 100svh;
    border: 0;
    border-radius: 0;
  }

  body.stage-expanded .stage-expand {
    top: 0.55rem;
    right: 0.55rem;
    bottom: auto;
  }

  body.stage-expanded .stage-footer {
    display: none;
  }

  body.stage-expanded .spatial-panel,
  body.stage-expanded .climate-panel {
    padding: 3.35rem 0.55rem 0.55rem;
  }

  body.stage-expanded .spatial-panel,
  body.stage-expanded .spatial-shell,
  body.stage-expanded .spatial-viewport,
  body.stage-expanded .climate-stage-shell,
  body.stage-expanded .climate-stage-visual {
    min-height: 0;
    height: 100%;
  }

  .comparison-row {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .comparison-row > header {
    padding: 0.45rem 0.55rem;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    border-right: 0;
    border-bottom: 1px solid rgba(242, 240, 232, 0.12);
  }

  .comparison-row > header span,
  .comparison-row > header small {
    font-size: 0.62rem;
  }

  .comparison-row > header strong {
    font-size: 0.82rem;
  }

  .comparison-row > svg:not(.comparison-mobile-chart) {
    display: none;
  }

  .comparison-mobile-chart {
    width: 100%;
    min-height: 10rem;
    display: block;
  }

  .comparison-mobile-axis,
  .comparison-mobile-month,
  .comparison-mobile-legend {
    font-family: Inter, Arial, sans-serif;
    font-weight: 700;
  }

  .comparison-mobile-axis {
    fill: #c7cec9;
    font-size: 8px;
  }

  .comparison-mobile-month {
    fill: #d5dad5;
    font-size: 8px;
    letter-spacing: 0.5px;
  }

  .comparison-mobile-legend {
    font-size: 8px;
  }

  .comparison-mobile-summary {
    padding: 0.35rem;
    gap: 0.28rem;
  }

  .comparison-mobile-summary dt {
    font-size: 0.58rem;
  }

  .comparison-mobile-summary dd {
    font-size: 0.66rem;
  }

  body.stage-expanded .comparison-stage {
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }

  body.stage-expanded .comparison-contract > span,
  body.stage-expanded .comparison-contract > strong,
  body.stage-expanded .comparison-contract > small {
    font-size: 0.68rem;
  }

  body.stage-expanded .comparison-charts {
    min-height: auto;
    grid-template-rows: repeat(2, auto);
  }

  .spatial-bridge,
  .national-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fire-overview-rail,
  .anchor-rail,
  .spatial-data-handoff {
    display: none;
  }

  .fire-overview-map-frame,
  .fire-overview-map-frame svg,
  .france-map-frame svg {
    min-height: 16rem;
  }

  .spatial-bridge > p {
    font-size: 0.72rem;
  }

  body.stage-expanded .spatial-bridge,
  body.stage-expanded .national-stage {
    overflow-y: auto;
    align-content: start;
  }

  body.stage-expanded .fire-overview-map-frame,
  body.stage-expanded .fire-overview-map-frame svg,
  body.stage-expanded .france-map-frame svg {
    min-height: 25rem;
  }

  body.stage-expanded .fire-overview-rail,
  body.stage-expanded .anchor-rail,
  body.stage-expanded .spatial-data-handoff {
    display: grid;
  }

  body.stage-expanded .fire-overview-rail > span,
  body.stage-expanded .anchor-rail > span {
    font-size: 0.72rem;
  }

  body.stage-expanded .fire-overview-rail h3 {
    font-size: 0.72rem;
  }

  body.stage-expanded .fire-overview-rail ol,
  body.stage-expanded .anchor-rail ol {
    grid-template-rows: repeat(5, auto);
  }

  body.stage-expanded .fire-overview-rail li strong,
  body.stage-expanded .anchor-rail li strong {
    font-size: 0.78rem;
  }

  body.stage-expanded .fire-overview-rail li small,
  body.stage-expanded .anchor-rail li small,
  body.stage-expanded .anchor-rail li .anchor-event-area {
    display: block;
    font-size: 0.66rem;
  }

  body.stage-expanded .fire-overview-rail li em,
  body.stage-expanded .anchor-rail li em {
    max-width: 8rem;
    font-size: 0.72rem;
  }

  .indicator-legend {
    top: 0.5rem;
    left: 0.5rem;
    width: 9.4rem;
    padding: 0.55rem;
    gap: 0.3rem;
  }

  .indicator-legend > span {
    font-size: 0.55rem;
  }

  .indicator-legend > strong {
    font-size: 0.74rem;
  }

  .indicator-legend li {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.35rem;
    font-size: 0.62rem;
  }

  .indicator-legend-swatch {
    width: 1.35rem;
    height: 0.6rem;
  }

  .indicator-legend > small {
    font-size: 0.56rem;
  }

  .map-indicator > span {
    font-size: 0.58rem;
  }

  .map-indicator h3 {
    font-size: 0.82rem;
  }

  .map-separation {
    display: none;
  }

  .territory-map-legend {
    top: 0.5rem;
    width: min(13.5rem, 58%);
  }

  .territory-map-legend > span,
  .territory-map-legend > small {
    font-size: 0.58rem;
  }

  .territory-map-legend > strong {
    font-size: 0.82rem;
  }

  .territory-map-legend li {
    font-size: 0.62rem;
  }

  .territory-analysis-card {
    width: calc(100% - 1rem);
    max-height: 34%;
  }

  .territory-metrics {
    display: none;
  }

  .territory-modes button {
    min-height: 2.15rem;
    font-size: 0.62rem;
  }

  body.stage-expanded .territory-analysis-card {
    bottom: 0.7rem;
    max-height: 38%;
  }

  body.stage-expanded .territory-metrics {
    display: grid;
  }

  body.stage-expanded .territory-metrics dt {
    font-size: 0.62rem;
  }

  body.stage-expanded .territory-metrics dd {
    font-size: 0.82rem;
  }

  body.stage-expanded .territory-map-legend {
    top: 3.25rem;
  }

  body.stage-expanded .maplibregl-ctrl-bottom-right {
    bottom: 0.7rem;
  }

  .climate-stage-visual {
    min-height: 0;
    overflow-y: auto;
  }

  .climate-ingredients-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    align-content: start;
  }

  .climate-ingredient-card {
    min-height: 6.2rem;
    padding: 0.55rem;
    grid-template-columns: minmax(7.5rem, 0.85fr) minmax(0, 1.15fr);
  }

  .climate-ingredient-card header strong {
    font-size: 0.72rem;
  }

  .climate-ingredient-card header small,
  .climate-ingredient-values span,
  .climate-ingredient-values small {
    font-size: 0.58rem;
  }

  .climate-ingredient-values strong {
    font-size: 0.88rem;
  }

  .climate-instrument {
    padding-bottom: 0.4rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1.4rem auto 1.4rem auto;
    gap: 0.25rem;
  }

  .climate-instrument-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
  }

  .climate-instrument-inputs li {
    min-height: 3.2rem;
    padding: 0.45rem;
  }

  .climate-instrument-inputs strong,
  .climate-instrument-inputs span {
    font-size: 0.62rem;
  }

  .climate-instrument-arrow {
    width: 1.4rem;
    height: 1.4rem;
    justify-self: center;
    transform: rotate(90deg);
  }

  .climate-instrument-core {
    min-width: 0;
    min-height: 6rem;
  }

  .climate-instrument-core span,
  .climate-instrument-output span,
  .climate-instrument-core small,
  .climate-instrument-output small,
  .climate-instrument-output p {
    font-size: 0.62rem;
  }

  .climate-instrument-core strong {
    font-size: 1.8rem;
  }

  .climate-instrument-output {
    min-height: 6rem;
  }

  .climate-instrument-output strong {
    font-size: 1.05rem;
  }

  .tracc-map-layout {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.45rem;
  }

  .tracc-map-legend {
    padding: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tracc-map-legend > span,
  .tracc-map-legend > strong,
  .tracc-map-legend > small {
    grid-column: 1 / -1;
    font-size: 0.62rem;
  }

  .tracc-map-legend ol {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.45rem;
  }

  .tracc-map-legend li {
    grid-template-columns: 1.1rem minmax(0, 1fr);
    font-size: 0.58rem;
  }

  .tracc-mobile-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .tracc-mobile-switch button {
    min-height: 2.5rem;
    border: 1px solid rgba(234, 183, 103, 0.48);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
    font: 720 0.68rem/1.1 Inter, Arial, sans-serif;
  }

  .tracc-mobile-switch button[aria-pressed="true"] {
    color: #18130b;
    background: var(--gold);
  }

  .tracc-map-pair {
    display: block;
  }

  .tracc-map-pair[data-mobile-active="reference"] .tracc-map-figure:not([data-period="reference"]),
  .tracc-map-pair[data-mobile-active="tracc_2050"] .tracc-map-figure:not([data-period="tracc_2050"]),
  .tracc-map-pair[data-mobile-active="tracc_2100"] .tracc-map-figure:not([data-period="tracc_2100"]) {
    display: none;
  }

  .tracc-map-figure svg {
    min-height: 22rem;
  }

  .tracc-map-figure figcaption > div:first-child span,
  .tracc-map-primary-value strong {
    font-size: 0.82rem;
  }

  .tracc-map-figure figcaption > div:first-child small,
  .tracc-map-primary-value span,
  .tracc-map-primary-value small {
    font-size: 0.62rem;
  }

  .tracc-map-site text {
    font-size: 8px;
  }

  .tracc-map-site .tracc-map-site-value {
    font-size: 7px;
  }

  .proof-sources li,
  .proof-sources a,
  .proof-sources span,
  .proof-sources small {
    font-size: 0.78rem;
  }

  .epilogue-signature p {
    max-width: 82%;
    font-size: 0.66rem;
  }

  .epilogue-signature small {
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 720;
  }

  .epilogue-technical-register {
    margin: 1.5rem 1rem 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .epilogue-chain::after {
    left: 43%;
    animation: none !important;
  }
}