/*
 * Static mode: the whole story as still frames and captions, with no scroll-driven
 * transitions, no video and no animation. Applied when
 *   · JavaScript is unavailable or fails   (the <link> ships with media="all"), or
 *   · the visitor prefers reduced motion   (the boot switch sets the media query), or
 *   · they switch Motion off in the HUD    (scripts/prefs.ts sets media="all").
 * Unlayered on purpose: it outranks every layered rule in the main stylesheet.
 */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html {
  scroll-behavior: auto;
}
/* without JavaScript, hide every control that would do nothing */
html:not(.js) .hud__controls,
html:not(.js) [data-action],
html:not(.js) [data-star-egg],
html:not(.js) .credits__eggs {
  display: none;
}

/* ---------- opening: one big title card, tagline beneath ---------- */
.opening {
  height: auto;
}
.opening__stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  display: grid;
  /* one column, no wider than the screen, whatever is laid in it */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: clamp(2rem, 6vw, 4rem);
  padding: calc(var(--hud-h) + 2.5rem) var(--gutter) 3rem;
}
/* Dixie's portrait, the mountains under her, the title over all */
.opening__art--portrait,
.opening__art--horizon {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  translate: none;
  scale: 1;
  opacity: 1;
  mask: none;
}
.opening__art--portrait {
  z-index: 1;
  width: min(40svh, 74vw, 25rem);
}
/* the mountains stay behind her, never across her face */
.opening__art--horizon {
  z-index: 0;
  width: min(34rem, 100%);
  margin-top: -9rem;
  opacity: 0.8;
}
/* the still title page is a plain stack: no ground behind her */
.opening__wash {
  display: none;
}
.opening__cue {
  display: none;
}
.opening__shade {
  display: none;
}
.opening__title {
  order: -1;
  opacity: 1;
  translate: none;
  padding-top: 0;
}
.opening__tagline {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
  justify-items: center;
  text-align: center;
}
.opening__tagline .headline__word {
  opacity: 1;
  translate: none;
  clip-path: none;
}
.opening__rule {
  clip-path: none;
}

/* ---------- story: picture, words, picture, words ---------- */
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}
.story__stage,
.story__scenes,
.story__track {
  display: contents;
  overflow: visible;
}
.story__stage::after,
.story__shade,
.story__actdim,
.story__bar,
.scene__streak,
.scene__black {
  display: none;
}
/* the chapter map becomes a row of chips under the intro */
.story__map {
  position: static;
  order: 0;
  width: min(72rem, 100%);
  height: auto;
  margin: 0;
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.story__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.story__tick {
  flex: none;
  max-width: 100%;
}
.story__tick--act::before,
.story__link::before {
  display: none;
}
.story__link {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  /* the chapters as comic tabs: paper, a bold ink border, level */
  background: var(--paper);
  border: 3px solid var(--ink);
  outline: 2px solid var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.story__link:hover {
  outline-color: var(--pink);
}
.story__tick--act .story__link {
  background: var(--tiffany);
  outline-color: var(--tiffany);
}
.story__tip {
  position: static;
  white-space: normal;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  color: inherit;
  opacity: 1;
  translate: none;
}
.story__tip-num {
  color: var(--pink-ink);
}
/* on the Tiffany tabs, ink (pink-ink there would fall short of 7:1) */
.story__tick--act .story__tip-num {
  color: var(--ink);
}
/* act cards: a title card, not a full screen */
.act {
  min-height: 0;
  width: min(72rem, 100%);
  padding-block: clamp(2rem, 6vw, 4rem) 0;
}
.story__intro {
  order: 0;
  min-height: 0;
  padding-block: 2rem;
}
.scene {
  position: relative;
  inset: auto;
  width: min(72rem, 100%);
  aspect-ratio: 16 / 9;
  opacity: 1;
  clip-path: none;
  mask: none;
  margin-top: clamp(2rem, 6vw, 4rem);
}
.scene :is(.scene__portrait, .scene__motif) img {
  filter: none;
}
/* every panel's picture and ink is shown in the still story */
.scene :is(.scene__portrait, .scene__motif, .scene__field) {
  display: block;
}
.scene__portrait,
.scene__portrait[data-shape='wide'] {
  inset: 4% auto 0 50%;
  width: auto;
  height: 96%;
  max-width: 100%;
  translate: -50% 0;
  scale: 1;
  transform-origin: 50% 100%;
}
.scene__portrait[data-shape='wide'] {
  inset: 50% auto auto 50%;
  width: 94%;
  height: auto;
  translate: -50% -50%;
}
/* art painted with a cropped edge sits against that edge of the panel */
.scene[data-bleed='left'] .scene__portrait {
  inset: 4% auto 0 0;
  translate: -2% 0;
}
.scene[data-bleed='right'] .scene__portrait {
  inset: 4% 0 0 auto;
  translate: 2% 0;
}
.scene__field,
.scene[data-shape] .scene__field {
  inset: auto auto 0 50%;
  width: min(50%, 32rem);
  height: 82%;
  translate: -50% 0;
  scale: 1;
  transform: none;
  opacity: 0.46;
}
.scene[data-shape='wide'] .scene__field {
  width: min(94%, 64rem);
  height: 88%;
}
/* a painting set against an edge has its ground behind it, at that edge */
.scene[data-bleed='left'] .scene__field {
  left: 4%;
  translate: 0 0;
}
.scene[data-bleed='right'] .scene__field {
  left: auto;
  right: 4%;
  translate: 0 0;
}
.scene[data-shape='motif'] .scene__field {
  inset: 50% auto auto 50%;
  width: min(46%, 30rem);
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
}
/* the motifs sit still, centred in the frame */
.scene__motif {
  --spin: 0deg;
  --lift: 0px;
  inset: 6% auto auto 50%;
  width: auto;
  height: 88%;
  translate: -50% 0;
  scale: 1;
}
.scene__motif--fallen {
  --spin: 27deg;
}
.chapter {
  width: min(72rem, 100%);
  justify-items: start;
  gap: 1.25rem;
  padding: 0;
}
.chapter--right {
  justify-items: start;
}
.chapter__head,
.beat {
  min-height: 0;
  padding: 0;
  align-content: start;
}
.chapter--right .chapter__head,
.chapter--right .pullquote {
  text-align: left;
}
.chapter--right .chapter__kicker,
.chapter--right .stamp-time {
  flex-direction: row;
}
.chapter--right .chapter__title::after {
  margin-left: 0;
}
.chapter--right .pullquote {
  justify-items: start;
}
.caption {
  width: min(44rem, 100%);
}
/* up to 20 chapters: act card, then picture, then words */
.act[data-act-for='0'] { order: 1; }
.scene[data-scene='0'] { order: 2; }
.chapter[data-chapter='0'] { order: 3; }
.act[data-act-for='1'] { order: 4; }
.scene[data-scene='1'] { order: 5; }
.chapter[data-chapter='1'] { order: 6; }
.act[data-act-for='2'] { order: 7; }
.scene[data-scene='2'] { order: 8; }
.chapter[data-chapter='2'] { order: 9; }
.act[data-act-for='3'] { order: 10; }
.scene[data-scene='3'] { order: 11; }
.chapter[data-chapter='3'] { order: 12; }
.act[data-act-for='4'] { order: 13; }
.scene[data-scene='4'] { order: 14; }
.chapter[data-chapter='4'] { order: 15; }
.act[data-act-for='5'] { order: 16; }
.scene[data-scene='5'] { order: 17; }
.chapter[data-chapter='5'] { order: 18; }
.act[data-act-for='6'] { order: 19; }
.scene[data-scene='6'] { order: 20; }
.chapter[data-chapter='6'] { order: 21; }
.act[data-act-for='7'] { order: 22; }
.scene[data-scene='7'] { order: 23; }
.chapter[data-chapter='7'] { order: 24; }
.act[data-act-for='8'] { order: 25; }
.scene[data-scene='8'] { order: 26; }
.chapter[data-chapter='8'] { order: 27; }
.act[data-act-for='9'] { order: 28; }
.scene[data-scene='9'] { order: 29; }
.chapter[data-chapter='9'] { order: 30; }
.act[data-act-for='10'] { order: 31; }
.scene[data-scene='10'] { order: 32; }
.chapter[data-chapter='10'] { order: 33; }
.act[data-act-for='11'] { order: 34; }
.scene[data-scene='11'] { order: 35; }
.chapter[data-chapter='11'] { order: 36; }
.act[data-act-for='12'] { order: 37; }
.scene[data-scene='12'] { order: 38; }
.chapter[data-chapter='12'] { order: 39; }
.act[data-act-for='13'] { order: 40; }
.scene[data-scene='13'] { order: 41; }
.chapter[data-chapter='13'] { order: 42; }
.act[data-act-for='14'] { order: 43; }
.scene[data-scene='14'] { order: 44; }
.chapter[data-chapter='14'] { order: 45; }
.act[data-act-for='15'] { order: 46; }
.scene[data-scene='15'] { order: 47; }
.chapter[data-chapter='15'] { order: 48; }
.act[data-act-for='16'] { order: 49; }
.scene[data-scene='16'] { order: 50; }
.chapter[data-chapter='16'] { order: 51; }
.act[data-act-for='17'] { order: 52; }
.scene[data-scene='17'] { order: 53; }
.chapter[data-chapter='17'] { order: 54; }
.act[data-act-for='18'] { order: 55; }
.scene[data-scene='18'] { order: 56; }
.chapter[data-chapter='18'] { order: 57; }
.act[data-act-for='19'] { order: 58; }
.scene[data-scene='19'] { order: 59; }
.chapter[data-chapter='19'] { order: 60; }

/* ---------- card: no deal, no tilt, no foil; it only turns over ---------- */
.card__scene {
  opacity: 1 !important;
  cursor: auto;
  touch-action: auto;
}
.card__inner {
  --rx: 0deg !important;
  --rz: 0deg !important;
  --fy: 0px !important;
  --fs: 1 !important;
}
.scene .scene__graphic {
  --ix: 50%;
}

/* ---------- pinned art sits in the flow, above its words ---------- */
.beat--art-beside > picture {
  order: -1;
}
.beat__art--beside,
.chapter--right .beat__art--beside,
.beat--pull .beat__art--beside {
  position: relative;
  display: block;
  inset: auto;
  translate: none;
  width: 9rem;
  margin-bottom: -1rem;
}

/* ---------- still frames: nothing is masked mid-reveal ---------- */
/* the paintings are shown finished: the colour layer whole, the ink drawing unneeded */
.scene__ink {
  visibility: hidden;
}
.scene__paint {
  mask: none !important;
}
.debut__ring,
.debut__art-img,
.debut__where,
.rosette,
.caption,
.beat__art {
  mask: none !important;
}
.debut__debut {
  clip-path: none !important;
}
/* the splash behind a pull quote sits above it instead, so it never covers the caption before */
.beat--art-behind > picture {
  order: -1;
}
.beat__art--behind {
  position: static;
  translate: none;
  width: min(14rem, 60vw);
  margin-bottom: -2.5rem;
}

/* nothing moves in the still story, so nothing needs its own layer */
.scene__field,
.scene__motif,
.scene__portrait,
.opening__art,
.opening__wash {
  will-change: auto;
}

/* after the credits: the stinger simply stands there */
.stinger__name {
  opacity: 1 !important;
  transition: none !important;
}
.stinger__will {
  clip-path: none !important;
  transition: none !important;
}