/* cave textures (relative to this sheet) */
.cave {
  --tex-wall-a: url(../img/rock/rock-wall-a.webp);
  --tex-deep: url(../img/rock/rock-deep.webp);
}
/* cave.css — #cueva. Default = vertical document (no JS, reduced motion, failure).
   The horizontal cave exists only under html.is-cave (SPEC §2, §3, §5, §6, §8). Owner: fe-cave. */

/* ======================================================================
   1. Vertical mode (default)
   ====================================================================== */
.cave {
  position: relative;
  /* above .descent-light (z1) (SPEC-v2 §2.4) */
  z-index: 5;
  background: var(--void);
  color: var(--bone-200);
}
.cave__light, .cave__back, .cave__fore, .cave__embers, .cave-hint, .intro__veil, .cave__floor,
.panel__video, .panel__shade {
  display: none;
}

/* v2: the umbral is a dark block of its own at the end of the page (SPEC-v2 §2.9) */
.intro {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 8svh var(--gutter);
  background: #050302;
  text-align: center;
}
/* intro.blocks: display pair + note; .intro__line = verbatim line breaks */
.intro__phrase {
  margin-block: 0;
  margin-inline: auto;
  max-width: 60rem;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-intro-note);
  line-height: 1.15;
  letter-spacing: .005em;
  color: var(--fire-5); /* 5:1 on black */
  text-shadow: 0 0 .45em rgba(163, 48, 15, .8);
}
.intro__twin, .intro__block, .intro__line { display: block; }
.intro__line { text-wrap: balance; }
.intro__block--display {
  font-size: var(--fs-intro-display);
  line-height: 1.05;
  letter-spacing: -.012em;
}
.intro__block--note {
  max-width: 72ch;
  margin: clamp(1.75rem, 6svh, 4rem) auto 0;
  font-size: calc(var(--fs-intro-note) * var(--intro-k, 1));
  font-weight: 360;
  line-height: 1.5;
  letter-spacing: .008em;
}

.cave__world {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 12vh, 8rem);
  padding: 2rem var(--gutter) clamp(5rem, 12vh, 9rem);
}
.station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}
.panel {
  position: relative;
  width: min(100%, 64rem);
  margin: 0;
}
/* SPEC-v5 scene = poster + looping video, edges melted into the rock (no JS / reduced motion: poster only) */
.panel--video {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 58%, transparent 100%);
}
.panel__media { position: relative; }
.panel__poster {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74svh;
  object-fit: contain;
}
.station__text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 34ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  margin-inline: auto;
  text-align: center;
}
.station__text > * + * { margin-top: 1rem; }
.station__text > .trazo-line { margin-top: .35em; }
.station__text .trazo-line { margin-inline: auto; }

/* Vertical document (no JS / reduced motion / fallback): scene, then its text */
html:not(.is-cave) .station { padding-block: 6svh; }
html:not(.is-cave) .station--mouth { display: none; }
html:not(.is-cave) .station--chamber .station__text--end { max-width: 60rem; }
html:not(.is-cave) .station--chamber .bonfire { position: relative; left: auto; margin: 0 auto 2rem; }

/* ---- type in the cave: ink per beat (SPEC-v2 §7.3) ---- */
.station__text[data-beat="b2"] { color: var(--ink-s1); }
.station__text[data-beat="b3"] { color: var(--ink-s2); }
.station__text[data-beat="b4a"], .station__text[data-beat="b4b"] { color: var(--ink-s3); }
.station__text[data-beat="b5"], .station__text[data-beat="b6"] { color: var(--ink-s4); }
.station__text[data-beat="b10"] { color: var(--ink-s5); }
.station__text[data-beat="b7"], .station__text[data-beat="b8"] { color: var(--ink-s6); }
.station__text[data-beat="b9"] { color: var(--ink-s7); }
.station__text[data-beat="b11"] { color: var(--ink-s8); }

.station__text :is(.cave-lead, .cave-body, .cave-statement, .cave-caption, .cave-eyebrow, .cave-punch) {
  text-shadow: var(--lit-shadow), var(--legible-shadow);
}
.cave-eyebrow {
  color: var(--pig-ochre-lt);
  margin-bottom: .9rem;
}
h2.cave-h2-eyebrow { font-family: var(--font-body); font-weight: 500; }
.cave-h1 {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -.012em;
}
.cave-lead { font-size: var(--fs-lead); line-height: 1.5; color: inherit; }
.cave-body {
  font-size: var(--fs-cave-body);
  line-height: 1.62;
  letter-spacing: .003em;
}
.cave-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 320;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.cave-punch {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 360;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 1.5rem !important;
}
.cave-statement {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.cave-statement .sym { color: var(--fire-7); font-size: .6em; vertical-align: .35em; margin-right: .3em; }
.cave-caption {
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--bone-400);
}
.end-phrase {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 320;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  color: #FCE3A6;
  text-shadow: 0 0 .5em rgba(246, 163, 58, .55);
}
.title-fire .mline, .reveal-grad .mline { padding-bottom: .08em; }
.station__text .lg-line.lg-cold { text-shadow: var(--legible-shadow); }
/* gradient-clipped text: no text-shadow (it would paint over the fill) */
.station__text .lg-line.title-fire,
.station__text .lg-line.title-fire .mline { text-shadow: none; }
.station__text .lg-line + .lg-line { margin-top: .55em; }
.station__text .cave-lead { color: inherit; }

/* ---- bonfire (static and lit by default) ---- */
.station--chamber .bonfire {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  --bf-w: min(30vw, 15rem);
  --bf-h: calc(var(--bf-w) * 1.4);
  width: var(--bf-w);
  height: var(--bf-h);
  margin-left: calc(var(--bf-w) / -2);
  /* panel height = width / 2.4; anchor at 87 % of it (margin % resolves against the width) */
  margin-top: calc(36.25% - var(--bf-h));
  pointer-events: none;
}
.bonfire__glow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 200%;
  height: 90%;
  margin-left: -100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246,163,58,.55), rgba(217,84,26,.2) 50%, transparent 75%);
  opacity: .8;
}
.bonfire__flames {
  position: absolute;
  inset: 0 0 12% 0;
}
.flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--fw);
  height: var(--fh);
  margin-left: calc(var(--fw) / -2 + var(--fx, 0%));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
}
.flame--back { --fw: 46%; --fh: 82%; background: radial-gradient(ellipse at 50% 80%, #F07A22 0%, #A3260E 55%, transparent 72%); }
.flame--mid  { --fw: 32%; --fh: 64%; background: radial-gradient(ellipse at 50% 80%, #F6A33A 0%, #D9541A 50%, transparent 70%); }
.flame--core { --fw: 20%; --fh: 36%; background: radial-gradient(ellipse at 50% 85%, #FFF4D6 0%, #F9C66B 40%, transparent 70%); }
/* tongues lean outwards (individual `rotate`, composes with the GSAP transform) */
.flame--back:nth-child(1) { --fx: -24%; --fw: 36%; --fh: 62%; rotate: -11deg; }
.flame--back:nth-child(2) { --fx: 0%; --fw: 40%; --fh: 88%; }
.flame--back:nth-child(3) { --fx: 23%; --fw: 34%; --fh: 58%; rotate: 12deg; }
.flame--mid:nth-child(4) { --fx: -12%; --fw: 26%; --fh: 54%; rotate: -6deg; }
.flame--mid:nth-child(5) { --fx: 3%; --fw: 28%; --fh: 70%; rotate: 2deg; }
.flame--mid:nth-child(6) { --fx: 14%; --fw: 24%; --fh: 46%; rotate: 8deg; }
.flame--core:nth-child(7) { --fx: -3%; --fw: 18%; --fh: 38%; }
.flame--core:nth-child(8) { --fx: 7%; --fw: 14%; --fh: 26%; rotate: 5deg; }
.bonfire__logs {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 78%;
  height: auto;
  margin-left: -39%;
  overflow: visible;
}
.bonfire .crack { opacity: 1; }
.bonfire__spark {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 6px;
  height: 6px;
  margin: 0 0 -3px -3px;
  border-radius: 50%;
  background: #FFF4D6;
  box-shadow: 0 0 10px 3px rgba(249, 198, 107, .7);
  opacity: 0;
}
.station__text--end { max-width: 60rem; text-align: center; }

/* ======================================================================
   2. Cave mode (html.is-cave): pinned stage, horizontal world
   ====================================================================== */
html.is-cave .cave {
  height: 100svh;
  overflow: clip;
  touch-action: pan-y;
}
html.is-cave .cave__inner {
  position: absolute;
  inset: 0;
}
html.is-cave .cave__world {
  position: absolute;
  top: 0;
  left: 0;
  height: 100svh;
  width: max-content;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  will-change: transform;
  background-color: #1B130E;
  background-image:
    var(--tex-wall-a, linear-gradient(180deg, #120C09 0%, #2A1E16 22%, #241811 55%, #1B130E 80%, #0A0706 100%));
  background-repeat: repeat-x;
  background-size: auto 100%;
}
html.is-cave .cave__back {
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  height: 100svh;
  width: 100%;
  pointer-events: none;
  will-change: transform;
  opacity: .55;
  background-image: var(--tex-deep, radial-gradient(60% 40% at 30% 60%, rgba(59,43,31,.5), transparent 70%));
  background-repeat: repeat-x;
  background-size: auto 100%;
  mix-blend-mode: normal;
}
html.is-cave .station {
  display: block;
  flex-direction: row;
  align-items: flex-start;
  flex: none;
  height: 100svh;
  max-width: none;
  margin: 0;
  width: auto;
}
html.is-cave .panel {
  position: absolute;
  z-index: 1;
  margin: 0;
}
html.is-cave .panel.is-far { visibility: hidden; }
/* scene: poster under the video, both covering the patch; the media box takes the camera push (scale) */
html.is-cave .panel__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}
html.is-cave .panel__poster,
html.is-cave .panel__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
/* fades in over its poster at the first "playing" */
html.is-cave .panel__video { opacity: 0; transition: opacity .4s var(--ease-breath); }
html.is-cave .panel--video.is-live .panel__video { opacity: 1; }
/* scene light level (opacity written by scenes.js) */
html.is-cave .panel__shade {
  display: block;
  position: absolute;
  inset: 0;
  background: #050302;
  opacity: .45;
  will-change: opacity;
}
html.is-cave .station__text {
  position: absolute;
  /* above the foreground silhouettes (z4): stalactites must never cut a word */
  z-index: 5;
  margin: 0;
  max-width: none;
  text-align: left;
}
/* soot veil behind the words (radial, never a box; ≥ 4.5:1) */
html.is-cave .station__text:not(.station__text--end)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -18%;
  background: radial-gradient(closest-side, rgba(11,7,5,.88) 0%, rgba(11,7,5,.8) 52%, rgba(11,7,5,.42) 80%, rgba(11,7,5,0) 100%);
  pointer-events: none;
}
/* the end phrase over the lit chamber: a lighter smoke veil (the wall glows warm around it) */
html.is-cave .station__text--end::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% -6%;
  background: radial-gradient(closest-side, rgba(26,12,6,.6) 0%, rgba(26,12,6,.5) 48%, rgba(26,12,6,.22) 76%, rgba(26,12,6,0) 100%);
  pointer-events: none;
  transition: opacity 1.6s var(--ease-breath);
}
/* no smoke before the phrase exists */
html.is-cave[data-bonfire="unlit"] .station__text--end::before { opacity: 0; }
/* the veil carries legibility: tight shadow only */
html.is-cave .station__text :is(.cave-lead, .cave-body, .cave-statement, .cave-punch) {
  text-shadow: 0 1px 2px rgba(5,3,2,.9), 0 0 .6em rgba(5,3,2,.55);
}
html.is-cave .station__text .trazo-line { margin-inline: 0; }
html.is-cave .station__text--end { text-align: center; }
html.is-cave .station__text { transition: opacity .9s var(--ease-breath); }
html.is-cave .station__text.is-dim { opacity: .18; }

/* light rig (all compositor: transform + opacity only, written by light.js) */
html.is-cave .cave__light {
  display: block;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
}
.cave__light > * {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.light__dark {
  width: 200vmax;
  height: 200vmax;
  outline: 70vmax solid #050302;
  background: radial-gradient(closest-side, rgba(5,3,2,0) 0%, rgba(5,3,2,0) 9%, rgba(5,3,2,.45) 16%, rgba(5,3,2,.82) 26%, rgba(5,3,2,.96) 38%, #050302 50%);
}
.light__glow {
  width: 160vmax;
  height: 160vmax;
  opacity: 0;
  mix-blend-mode: screen;
}
.light__glow--red { background: radial-gradient(closest-side, rgba(163,38,14,.55) 0%, rgba(122,26,10,.25) 35%, transparent 70%); }
.light__glow--orange { background: radial-gradient(closest-side, rgba(240,122,34,.45) 0%, rgba(217,84,26,.18) 35%, transparent 70%); }
.light__glow--gold { background: radial-gradient(closest-side, rgba(252,227,166,.40) 0%, rgba(246,163,58,.16) 35%, transparent 70%); }
.light__far {
  width: 120vmax;
  height: 120vmax;
}
.light__far > i {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}
.far--ember { background: radial-gradient(closest-side, rgba(217,84,26,.6), rgba(122,26,10,.25) 40%, transparent 70%); }
.far--flame { background: radial-gradient(closest-side, rgba(252,227,166,.7), rgba(246,163,58,.35) 30%, rgba(163,38,14,.12) 55%, transparent 72%); }

html.is-cave .cave__fore {
  display: block;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  height: 100svh;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}
.fore-band {
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
}
.fore-band--top {
  top: 0;
  height: 18svh;
  /* an uneven ceiling: overlapping soft lobes (no drawn edge) */
  background-image:
    radial-gradient(60% 100% at 22% 0%, #050302 20%, rgba(5,3,2,0) 70%),
    radial-gradient(45% 80% at 68% 0%, #050302 25%, rgba(5,3,2,0) 72%),
    linear-gradient(180deg, rgba(5,3,2,.85), rgba(5,3,2,0));
  background-size: 140vw 100%, 110vw 100%, 100% 100%;
}
.fore-band--bottom {
  bottom: 0;
  height: 14svh;
  background-image:
    radial-gradient(55% 100% at 40% 100%, #050302 25%, rgba(5,3,2,0) 72%),
    linear-gradient(0deg, rgba(5,3,2,.9), rgba(5,3,2,0));
  background-size: 130vw 100%, 100% 100%;
}
.fore-pillar {
  position: absolute;
  top: 0;
  height: 100svh;
  width: 16vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(90deg, rgba(5,3,2,0), rgba(5,3,2,.93) 36%, rgba(5,3,2,.93) 64%, rgba(5,3,2,0));
}
.fore-pillar--b { background-image: linear-gradient(90deg, rgba(5,3,2,0), rgba(5,3,2,.9) 40%, rgba(5,3,2,.95) 70%, rgba(5,3,2,0)); }
.fore-pillar--chamber-l { width: 10vw; background-image: linear-gradient(90deg, #050302 0%, rgba(5,3,2,.75) 35%, rgba(5,3,2,0) 100%); }
.fore-pillar--chamber-r { width: 10vw; background-image: linear-gradient(270deg, #050302 0%, rgba(5,3,2,.75) 35%, rgba(5,3,2,0) 100%); }

html.is-cave .cave__embers {
  display: block;
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100svh;
  pointer-events: none;
}
html.is-cave .cave__floor {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12svh;
  background: linear-gradient(#1B130E, #0B0705);
}
.cave__floor i {
  position: absolute;
  top: 0;
  height: 3.2svh;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(110% 120% at 50% 0%, rgba(246,163,58,.25) 0%, rgba(42,30,22,.85) 30%, rgba(18,12,9,0) 100%);
}
.cave__floor i:nth-child(1) { left: 8%; width: 9%; }
.cave__floor i:nth-child(2) { left: 26%; width: 5%; height: 1.6svh; }
.cave__floor i:nth-child(3) { left: 47%; width: 12%; }
.cave__floor i:nth-child(4) { left: 68%; width: 6%; height: 1.8svh; }
.cave__floor i:nth-child(5) { left: 84%; width: 10%; }

/* threshold */
html.is-cave .intro {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  pointer-events: none;
}
html.is-cave .intro__veil {
  display: block;
  position: absolute;
  inset: 0;
  background: #050302;
}
html.is-cave .intro__phrase {
  position: absolute;
  left: 0;
  right: 0;
  /* centred on 46svh by flex (GSAP would freeze a translate -50 % in px) */
  top: 0;
  height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color: #140503;
  text-shadow: 0 0 .5em currentColor;
  opacity: .92;
}
html.is-cave .intro__phrase .ichar { text-shadow: 0 0 .5em currentColor; }
html.is-cave .cave-hint {
  display: flex;
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 7svh;
  margin-left: -5px;
  width: 10px;
  pointer-events: none;
}
.cave-hint__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  opacity: 0;
}
.cave-hint b { display: block; }
.cave-hint i {
  display: block;
  border-radius: 50%;
  color: #7A1A0A;
  background: currentColor;
  box-shadow: 0 0 8px 1px currentColor;
  opacity: .15;
}
.cave-hint b:nth-child(1) i { width: 6px; height: 6px; }
.cave-hint b:nth-child(2) i { width: 5px; height: 5px; }
.cave-hint b:nth-child(3) i { width: 4px; height: 4px; }

/* bonfire in the cave: hidden until ignition (bonfire.js sets the initial state) */
html.is-cave .station--chamber .bonfire { margin: 0; }
html.is-cave[data-bonfire="unlit"] .flame,
html.is-cave[data-bonfire="unlit"] .bonfire__glow { opacity: 0; }
html.is-cave:not([data-bonfire="unlit"]) .flame { will-change: transform, opacity; }

/* ---------- landscape: (min-width: 768px) and (min-aspect-ratio: 1/1) ---------- */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  /* the narration is bigger on a wide screen (PORT keeps the token values) */
  .cave {
    --fs-cave-body: clamp(1.05rem, 0.9rem + 0.45vw, 1.45rem);
    --fs-lead: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
  }
  /* SPEC-v5: the scene fills the frame (92 svh, ≥ 80 vw), text on its faded right edge */
  html.is-cave .cave {
    --px: 2vw;
    --pw: min(84vw, 175svh);
    --ph: 92svh;
    --tx: calc(var(--px) + var(--pw) * .8);
    --tw: min(28vw, 32rem);
  }
  html.is-cave .station--mouth { width: 100vw; }

  html.is-cave .station--plate {
    width: calc(var(--tx) + var(--tw));
    margin-right: 12vw;
  }
  html.is-cave .station--plate .panel {
    left: var(--px);
    width: var(--pw);
    height: var(--ph);
    top: calc(50svh - var(--ph) / 2);
  }
  html.is-cave .panel--video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 72%, transparent 100%), linear-gradient(transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 72%, transparent 100%), linear-gradient(transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  html.is-cave .station--plate .station__text {
    left: var(--tx);
    width: var(--tw);
    top: var(--ty, 50svh);
    translate: 0 -50%;
  }
  /* text clears the figures: s1 lion, s9 chain, s10 breath of fire */
  .station__text[data-beat="b2"] { --ty: 27svh; }
  .station__text[data-beat="b9"] { --ty: 30svh; }
  .station__text[data-beat="b10"] { --ty: 58svh; }
  /* a thinner ceiling and floor shadow: the scene reaches almost to the edges of the frame */
  .fore-band--top { height: 9svh; }
  .fore-band--bottom { height: 8svh; }
  /* display lines scale with the body */
  html.is-cave .station__text .cave-statement { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem); }
  html.is-cave .station__text .cave-statement--md { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); }
  html.is-cave .station__text .cave-punch { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem); }

  html.is-cave .station--chamber { width: 201.6svh; }
  html.is-cave .station--chamber .bonfire {
    --bf-w: 30svh;
    --bf-h: 44svh;
    left: calc(50% - 15svh);
    top: calc(8svh + 84svh * .87 - 44svh);
  }
  /* S9 (SPEC-v2 §5): the end phrase, alone, in 16–36svh */
  html.is-cave .station__text--end {
    left: calc(50% - min(40vw, 30rem));
    width: min(80vw, 60rem);
    top: 16svh;
    height: 20svh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html.is-cave .end-phrase { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5.25rem); }
  html.is-cave .flame { mix-blend-mode: screen; filter: blur(6px); }
}

/* short landscape */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) and (max-height: 560px) {
  html.is-cave .cave { --pw: 80vw; --tw: 32vw; }
  .cave { --fs-cave-body: clamp(.95rem, 0.8rem + 0.4vw, 1.2rem); }
}

/* ---------- portrait (everything else) ---------- */
@media not all and (min-width: 768px) and (min-aspect-ratio: 1/1) {
  /* SPEC-v5.1: the same 16:9 scene as LAND, whole (never cropped), as wide as the screen (capped by the height on
     a short landscape phone), its text under it; scene + text are one column centred in the frame (cave.js
     fitTexts() makes a text that does not fit scroll inside its station) */
  html.is-cave .cave {
    --pw: min(100vw, 62svh * 832 / 480);
    --text-w: calc(100vw - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  }
  html.is-cave .station--mouth { width: 100vw; }

  html.is-cave .station--plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    margin-right: 30vw;
    padding-bottom: 4svh;
  }
  html.is-cave .station--plate .panel { position: relative; flex: none; width: var(--pw); aspect-ratio: 832 / 480; }
  html.is-cave .station--plate :is(.panel__poster, .panel__video) { object-fit: contain; }
  /* narrow feathered edges (LAND: 10 % left, 28 % right, 9 % top / bottom): the painted content stays visible */
  html.is-cave .panel--video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  html.is-cave .station--plate .station__text {
    position: relative;
    flex: none;
    width: var(--text-w);
    margin-top: clamp(1rem, 3svh, 1.75rem);
    text-align: center;
  }
  .fore-band--top { height: 12svh; }
  .fore-band--bottom { height: 10svh; }
  html.is-cave .station--plate .station__text :is(.mline, .trazo-line) { margin-inline: auto; }

  html.is-cave .station--chamber { width: 148.8svh; }
  html.is-cave .station--chamber .bonfire {
    --bf-w: 26svh;
    --bf-h: 36svh;
    left: calc(50% - 13svh);
    top: 40svh;
  }
  /* the end phrase above the flames, never over them (10–34svh; the bonfire starts at 40svh) */
  html.is-cave .station__text--end {
    left: calc(50% - var(--text-w) / 2);
    width: var(--text-w);
    top: 10svh;
    height: 24svh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html.is-cave .end-phrase { font-size: clamp(2.25rem, 1.4rem + 4vw, 3.25rem); }
  .flame--back:nth-child(3), .flame--mid:nth-child(6), .flame--core:nth-child(8) { display: none; }
  .light__glow { mix-blend-mode: normal; }
  .light__far > i { mix-blend-mode: normal; }
}
/* PORT on a short landscape phone (e.g. 740x360): a smaller scene leaves the narration room to be read */
@media not all and (min-width: 768px) and (min-aspect-ratio: 1/1) {
  @media (max-height: 500px) { html.is-cave .cave { --pw: min(100vw, 50svh * 832 / 480); } }
}
/* PORT tablets / near-square (≥ 600 px): narration 19 → 24 px, readable measure */
@media not all and (min-width: 768px) and (min-aspect-ratio: 1/1) {
  @media (min-width: 600px) {
    .cave {
      --fs-cave-body: clamp(1.2rem, 0.45rem + 2vw, 1.5rem);
      --fs-lead: clamp(1.35rem, 0.55rem + 2.3vw, 1.75rem);
    }
    html.is-cave .cave {
      --text-w: min(calc(100vw - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), 40rem);
    }
    html.is-cave .station--plate .station__text .lg-line { text-wrap: balance; }
  }
}

/* narration taller than its band (200 % text, WCAG 1.4.4): cave.js fitTexts() */
html.is-cave .station--plate .station__text.is-fit { top: var(--fit-top); translate: 0 0; }
html.is-cave .station--plate .station__text.is-scroll { max-height: var(--fit-max); overflow-y: auto; scrollbar-width: thin; }