@font-face {
  font-family: "Balsamiq Sans";
  src: url("assets/comic14/fonts/balsamiqsans/BalsamiqSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Balsamiq Sans";
  src: url("assets/comic14/fonts/balsamiqsans/BalsamiqSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Russo One";
  src: url("assets/comic14/fonts/russoone/RussoOne-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


:root {
  color-scheme: light;
  --paper: #efe9dc; --paper-light: #faf6ed; --ink: #202820; --ink-soft: #4d544a;
  --green: #4d654d; --green-deep: #29392f; --red: #a84736; --amber: #d59a3e;
  --line: rgba(32,40,32,.24); --comic: "Balsamiq Sans", "Trebuchet MS", sans-serif;
  --title: "Russo One", Impact, sans-serif; --music-dock-height: 0px;
  font-family: var(--comic); background: var(--paper); color: var(--ink);
}
* { box-sizing: border-box; }
html { min-width: 0; scroll-padding-bottom: calc(var(--music-dock-height) + 1rem); }
body { margin: 0; min-width: 0; padding-bottom: var(--music-dock-height); font: 1rem/1.55 var(--comic); background: var(--paper); color: var(--ink); }
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .22em; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
[hidden] { display: none !important; }
img[data-src]:not([src]) { display: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
button:disabled { opacity: .45; cursor: default; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; inset: .75rem auto auto .75rem; transform: translateY(-180%); padding: .7rem 1rem; background: var(--ink); color: white; border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }
.js-control { display: none; }
body.js-ready .js-control { display: flex; }
.nojs-note { max-width: 50rem; margin: 1rem auto; padding: 1rem; border: 1px solid var(--line); background: var(--paper-light); }
.view-header { min-height: 4.5rem; padding: .8rem clamp(1rem,4vw,3rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: var(--paper-light); }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--title); letter-spacing: .035em; }
.wordmark img { width: 1.75rem; height: 1.75rem; }
.eyebrow { margin: 0; color: var(--green); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story-nav, .view-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.story-nav a, .view-links a { min-height: 44px; display: inline-flex; align-items: center; }
.view-links { justify-content: center; padding: 1rem; }
.comic-button, .text-button, .desktop-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--green-deep); border-radius: 999px; padding: .55rem 1rem; background: var(--paper-light); cursor: pointer; text-decoration: none; line-height: 1.25; }
.comic-button:hover, .desktop-action:hover { background: #fffdf5; }
.comic-button-primary, .desktop-action-primary { background: var(--green-deep); color: var(--paper-light); font-weight: 700; }
.comic-button-primary:hover, .desktop-action-primary:hover { background: var(--green); }
.text-button { border: 0; padding: .4rem .6rem; background: transparent; text-decoration: underline; }

/* The illustrated entrance keeps its full portrait composition on a phone. */
.cover-shell { min-height: max(20rem,calc(100svh - var(--music-dock-height))); display: grid; place-items: center; }
.cover-stage { position: relative; width: min(100%,420px,calc((100svh - var(--music-dock-height)) * .46258)); aspect-ratio: 853 / 1844; margin: 0; line-height: 0; isolation: isolate; }
.cover-stage picture, .cover-stage img { width: 100%; height: 100%; }
.cover-stage img { object-fit: contain; }
.desktop-cover-header { display: contents; }
.desktop-cover-header .wordmark, .desktop-cover-footer { display: none; }
.desktop-quote { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.art-target { position: absolute; z-index: 2; display: block; min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; padding: 0; background: transparent; cursor: pointer; line-height: normal; }
.target-enter { left: 20%; top: 76.1%; width: 62%; height: 7.6%; }
.target-music { left: 11%; top: 90.6%; width: 26%; height: 4%; }
.target-about { left: 40%; top: 90.6%; width: 22%; height: 4%; }
.target-story { left: 65%; top: 90.6%; width: 19%; height: 4%; }
.art-target:focus-visible { outline: 3px solid #fff8df; box-shadow: 0 0 0 6px var(--green-deep); }
.entrance-reading { width: min(100% - 2rem,42rem); margin: 1rem auto 2rem; border: 1px solid var(--green-deep); border-radius: .6rem; background: var(--paper-light); }
.entrance-reading > summary, .cast-details > summary { min-height: 44px; padding: .55rem .85rem; cursor: pointer; font-weight: 700; list-style-position: inside; }
.entrance-reading-content { padding: 0 1rem 1rem; font-size: 1.125rem; }
.entrance-reading-nav { display: grid; gap: .65rem; }

/* A chapter is a comic leaf: artwork and caption travel together. */
.journey-heading, .journey-scenes, .chapter-tabs, .scene-navigation { width: min(100% - 3rem,1180px); margin-inline: auto; }
.journey-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(1.8rem,5vw,4rem) 0 1.7rem; }
.journey-heading h1, .music-intro h1 { font: clamp(2.2rem,5.5vw,4.8rem)/1.04 var(--title); letter-spacing: -.025em; margin: .6rem 0 .8rem; }
.journey-deck { color: var(--ink-soft); margin: 0; font-size: 1.15rem; }
.journey-start { flex-direction: column; align-items: stretch; flex: 0 0 18rem; gap: .6rem; }
.journey-start .comic-button span { font-size: .85rem; font-weight: 400; }
.journey-start p { font-size: .82rem; margin: .2rem .35rem 0; max-width: 18rem; color: var(--ink-soft); }
.chapter-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 1.8rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--paper-light); }
.chapter-tabs a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-width: 0; min-height: 52px; padding: .65rem .4rem; gap: .4rem; text-align: center; line-height: 1.35; text-decoration: none; font-size: .9rem; border-right: 1px solid var(--line); }
.chapter-tabs a:last-child { border-right: 0; }
.chapter-tabs span { color: var(--red); font-size: .75rem; font-family: var(--title); }
.chapter-tabs a[aria-current] { background: var(--green-deep); color: var(--paper-light); }
.chapter-tabs a[aria-current] span { color: #e4bd73; }
.chapter-tabs a:hover { box-shadow: inset 0 -3px var(--amber); }
.journey-scene { padding: 0 0 1.3rem; margin-bottom: 2.2rem; scroll-margin-top: 1rem; }
body.js-ready .journey-scene { margin-bottom: 0; }
.scene-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; }
.scene-heading h2 { font: clamp(1.35rem,2.3vw,2rem)/1.2 var(--title); margin: 0; text-align: right; }
.journey-art { min-width: 0; margin: 0; border: 2px solid var(--ink); border-radius: .3rem; background: var(--paper-light); box-shadow: 4px 5px 0 rgba(32,40,32,.12); }
.journey-art img { width: 100%; height: auto; object-fit: contain; }
.journey-art picture { border-radius: .2rem .2rem 0 0; }
.journey-art figcaption { padding: .9rem clamp(.8rem,2.4vw,1.8rem); border-top: 1px solid var(--line); }
.journey-art figcaption p { margin: 0; font-size: clamp(1rem,1.7vw,1.25rem); }
.home-introduction { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 2rem; margin-top: 1.5rem; }
.home-cast { font-size: 1rem; }
.home-cast p { margin: .65rem 0 1rem; }
.home-cast a { display: inline-flex; align-items: center; min-height: 44px; }
.creation-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; align-items: start; }
.scene-afterword { max-width: 42rem; margin: 1.5rem auto 0; text-align: center; font-size: 1.1rem; }
.finale-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1.5rem 0 0; }
.scene-navigation { justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid var(--line); padding: 1rem 0 2rem; }
.scene-navigation p { font-size: .86rem; color: var(--ink-soft); text-align: center; }
.scene-navigation button { min-width: 112px; }
.moving-sheet { transform-origin: center; animation: sheet-breathe 24s ease-in-out infinite; animation-play-state: paused; }
.flight-sheet { animation-name: sheet-flight; animation-duration: 32s; }
body.journey-playing .moving-sheet { animation-play-state: running; }
@keyframes sheet-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sheet-flight { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-4px); } }

.home-heading { width: min(100% - 2rem,1120px); margin: 2rem auto 1.4rem; }
.home-heading h1 { margin: .5rem 0 0; font: clamp(1.7rem,3.5vw,3rem)/1.2 var(--title); }
.hall-art { width: min(100%,1280px); margin: 0 auto; background: var(--green-deep); }
.hall-art img { width: 100%; height: auto; object-fit: contain; }
.hall-invitation { width: min(100% - 2rem,1120px); margin: 1.3rem auto .5rem; }
.hall-actions { width: min(100% - 2rem,1120px); margin: 1rem auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.action-card { min-height: 6rem; display: grid; align-content: center; gap: .15rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--paper-light); text-decoration: none; }
.action-card:hover { background: #fffdf5; }
.action-primary { grid-column: 1 / -1; border: 2px solid var(--green-deep); background: var(--green-deep); color: var(--paper-light); }
.action-primary:hover { background: var(--green); }
.action-primary > strong { font-family: var(--title); font-size: 1.2rem; }
.action-card small { font-size: .88rem; }
.action-number { font: .75rem var(--title); color: var(--red); }
.action-primary .action-number { color: #e4bd73; }

.music-page { width: min(100% - 3rem,1120px); margin: 0 auto; }
.music-intro { padding: clamp(2rem,5vw,4.5rem) 0 2.5rem; border-bottom: 1px solid var(--line); }
.music-lead { font-size: clamp(1.2rem,2vw,1.5rem); max-width: 42rem; margin: 1.2rem 0; }
.music-start { gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.music-editorial { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,6vw,5rem); padding: 2.5rem 0; }
.music-editorial h2, .music-credits h2 { font: clamp(1.7rem,3vw,2.3rem)/1.2 var(--title); margin: .6rem 0 1.1rem; }
.music-editorial p { max-width: 42rem; }
.music-downloads { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.music-chapters ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.music-chapters li { border-bottom: 1px solid var(--line); }
.music-chapters a { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; min-height: 52px; text-decoration: none; gap: 1rem; padding: .5rem .2rem; }
.music-chapters a:hover, .music-chapters a[aria-current] { color: var(--red); }
.music-chapters time { font: .9rem var(--title); color: var(--green); }
.music-credits { font-size: .88rem; border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; color: var(--ink-soft); }
.music-credits details { margin-top: 1rem; }
.music-credits summary { cursor: pointer; min-height: 44px; display: list-item; padding: .65rem 0; }
.music-source-list { padding-left: 1.2rem; }
.music-source-list li { margin-bottom: .7rem; overflow-wrap: anywhere; }

/* One native audio element; the enhanced dock has measured reading clearance. */
.audio-dock { padding: 1rem; border-top: 1px solid var(--line); background: var(--paper-light); }
.audio-dock > audio { display: block; width: min(100%,48rem); margin: 0 auto; }
body.js-ready .audio-dock { position: fixed; z-index: 80; inset: auto 0 0; padding: .35rem max(.75rem,env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left)); box-shadow: 0 -4px 20px rgba(32,40,32,.12); }
body.js-ready .audio-dock > audio { display: none; }
body.js-ready .audio-custom { display: block; width: min(100%,840px); margin: 0 auto; }
.audio-dock-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px; align-items: center; gap: .6rem; min-height: 52px; }
.dock-icon { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; font: 1.25rem/1 var(--comic); }
.dock-icon:hover { background: var(--green-deep); color: var(--paper-light); }
.audio-track { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.audio-track strong { font-size: .9rem; }
.audio-track span { font-size: .78rem; color: var(--ink-soft); }
.audio-status { margin: 0 0 .2rem 3.35rem; color: var(--ink-soft); font-size: .75rem; line-height: 1.35; }
.audio-seek-row { display: grid; grid-template-columns: 3rem minmax(0,1fr) 3rem; gap: .7rem; align-items: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.audio-seek-row > span:last-child { text-align: right; }
input[type="range"] { accent-color: var(--green-deep); min-width: 0; width: 100%; min-height: 36px; margin: 0; cursor: pointer; }
.audio-settings { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.audio-settings label { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.audio-settings label input { width: 8rem; }
.audio-settings button { font-size: .85rem; }
.cast-details { margin-top: .75rem; border-top: 1px dashed var(--line); }
.cast-details > summary { padding-inline: 0; }
.cast-details-copy { padding-top: .4rem; }
.cast-sources { font-size: .9rem; color: var(--ink-soft); }
.author-links a > span:first-child { min-width: 0; }
.author-links a > span[aria-hidden] { flex: 0 0 auto; }

@media (max-width: 740px) {
  .view-header { min-height: 3.8rem; flex-wrap: wrap; gap: .3rem 1rem; padding-inline: 1rem; }
  .view-header .story-nav { font-size: .9rem; gap: .2rem 1rem; }
  .journey-heading, .journey-scenes, .chapter-tabs, .scene-navigation, .music-page { width: min(100% - 1.5rem,42rem); }
  .journey-heading { display: block; padding-top: 1.8rem; }
  .journey-start { margin-top: 1.3rem; gap: .6rem; }
  .journey-start p { max-width: none; }
  .chapter-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 1.3rem; }
  .chapter-tabs a { min-height: 48px; font-size: .86rem; }
  .chapter-tabs a:nth-child(3) { border-right: 0; }
  .chapter-tabs a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .scene-heading { display: block; }
  .scene-heading h2 { text-align: left; margin-top: .3rem; }
  .home-introduction, .creation-pair, .music-editorial { grid-template-columns: 1fr; gap: 1.3rem; }
  .home-cast { padding: 0 .25rem; }
  .scene-navigation button { min-width: 96px; padding-inline: .7rem; }
  .scene-navigation p { font-size: .75rem; }
  .hall-actions { grid-template-columns: 1fr; }
  .action-primary { grid-column: auto; }
  .audio-dock-head { gap: .35rem; }
  .audio-track { display: block; line-height: 1.2; }
  .audio-track strong { display: block; font-size: .76rem; }
  .audio-track span { display: block; font-size: .67rem; margin-top: .2rem; }
  .audio-status { margin-left: 3.1rem; }
  .audio-settings { gap: .5rem; }
  .audio-settings label { gap: .5rem; font-size: .75rem; }
  .audio-settings label input { width: 5.5rem; }
  .audio-settings button { font-size: .75rem; padding-inline: 0; max-width: 10rem; text-align: right; }
}
@media (max-width: 360px) {
  .wordmark { font-size: .9rem; }
  .audio-settings label input { width: 4.5rem; }
  .audio-settings button { max-width: 8rem; }
  .scene-navigation button { min-width: 82px; }
}
@media (max-width: 479px) {
  .chapter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-tabs a { flex-direction: column; gap: .2rem; min-height: 64px; font-size: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .chapter-tabs a:nth-child(3) { border-right: 1px solid var(--line); }
  .chapter-tabs a:nth-child(2n) { border-right: 0; }
  .chapter-tabs a:nth-last-child(-n+2) { border-bottom: 0; }
  body.js-ready .scene-navigation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scene-navigation p { grid-column: 1 / -1; grid-row: 1; font-size: .95rem; margin: .3rem 0 .7rem; }
  .scene-navigation button { min-width: 0; width: 100%; }
  .cast-card .cast-copy h3 { font-size: clamp(1.1rem, 6vw, 1.6rem); overflow-wrap: normal; }
  .cast-details summary { overflow-wrap: normal; }
}
@media (min-width: 900px), (min-width: 600px) and (hover: hover) and (pointer: fine) {
  .cover-shell { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: max(30rem,calc(100svh - var(--music-dock-height))); min-height: 0; padding: .75rem clamp(1.25rem,4vw,4rem); gap: .5rem; }
  .desktop-cover-header { display: flex; flex: 0 0 auto; min-height: 4rem; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; max-width: 1720px; margin: 0 auto; }
  .desktop-cover-header .wordmark { display: inline-flex; font-size: clamp(1.1rem,2vw,1.7rem); }
  .desktop-quote { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font: 700 clamp(.9rem,1.6vw,1.4rem)/1.25 var(--comic); text-align: right; }
  .cover-stage { flex: 1 1 auto; width: 100%; min-height: 0; height: auto; aspect-ratio: auto; }
  .cover-stage img { object-fit: contain; object-position: center; }
  .art-target { display: none; }
  .desktop-cover-footer { display: flex; flex: 0 0 auto; min-height: 4rem; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem; }
  .desktop-action { font-weight: 700; white-space: nowrap; }
  .entrance-reading { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ABOUT16: full editorial view, same local assets and comic typography. */
.about-view { min-height: 100svh; }
.about-header { flex-wrap: wrap; }
.about-header .story-nav { margin: 0; padding: 0; }
.about-page { width: min(100% - 2rem, 1240px); margin: 0 auto; }
.about-intro { padding: clamp(2rem,6vw,5rem) 0 2rem; max-width: 58rem; }
.about-intro h1 { font: clamp(2.5rem,6vw,5.6rem)/1.03 var(--title); letter-spacing: -.02em; margin: .6rem 0 1.4rem; }
.about-intro h1 span { color: var(--red); }
.about-lead { font-size: clamp(1.1rem,2vw,1.4rem); max-width: 46rem; }
.about-home { margin: 0; border: 2px solid var(--ink); border-radius: .4rem; overflow: hidden; background: var(--paper-light); }
.about-home img { width: 100%; height: auto; }
.about-home figcaption { padding: .85rem 1rem; font-weight: 700; border-top: 1px solid var(--line); }
.about-chapter { padding: clamp(2.5rem,6vw,4.5rem) 0; border-bottom: 1px solid var(--line); }
.about-chapter h2, .about-author h2 { font: clamp(1.8rem,3vw,2.7rem)/1.15 var(--title); margin: .5rem 0 1rem; overflow-wrap: normal; }
.world-chapter, .future-chapter { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem,5vw,5rem); }
.chapter-copy p { margin: 0 0 1rem; }
.chapter-heading { max-width: 48rem; margin-bottom: 1.5rem; }
.cast-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; align-items: start; }
.cast-card { min-width: 0; border: 1px solid var(--ink); border-radius: .4rem; overflow: hidden; background: var(--paper-light); box-shadow: 3px 4px 0 rgba(32,40,32,.12); }
.cast-card img { width: 100%; height: auto; }
.cast-copy { padding: 1.15rem; border-top: 1px solid var(--line); }
.cast-copy h3 { font: 1.6rem/1.2 var(--title); margin: .4rem 0 .8rem; }
.cast-copy p { margin: 0 0 .8rem; }
.cast-copy .eyebrow { font-size: .8rem; }
.cast-note { border-top: 1px dashed var(--line); padding-top: .85rem; color: var(--ink-soft); }
.about-author { margin-top: 2.5rem; padding: clamp(1.2rem,4vw,3rem); border-radius: .4rem; border: 2px solid var(--green-deep); background: var(--green-deep); color: var(--paper-light); }
.about-author .eyebrow { color: #e4bd73; }
.about-author p { max-width: 50rem; }
.author-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.author-links a { display: inline-flex; align-items: center; gap: .25em; min-height: 44px; text-underline-offset: .25em; }
.about-footer { padding: 2rem 0 3rem; text-align: center; }
.about-footer p { font-size: 1.2rem; }
.about-view .desktop-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--green-deep); border-radius: 999px; background: var(--paper-light); color: var(--ink); font-weight: 700; text-decoration: none; }
.about-view .desktop-action-primary { background: var(--green-deep); color: var(--paper-light); }
@media (max-width: 1099px) { .cast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 719px) {
  .world-chapter, .future-chapter, .cast-grid { grid-template-columns: 1fr; }
  .about-header .story-nav { width: 100%; justify-content: flex-start; }
  .about-intro { padding-top: 2rem; }
  .about-chapter { gap: 1rem; }
}


.creation-single { grid-template-columns: 1fr; max-width: 1086px; margin-inline: auto; }

/* Watching retains a compact frame layout even when music is paused. */
@media (min-width: 900px) {
  body.journey-watching .journey-heading { padding-block: .65rem; }
  body.journey-watching .journey-heading h1 { font-size: 1.6rem; margin-block: .2rem; }
  body.journey-watching .journey-heading h1 br { display: none; }
  body.journey-watching .journey-heading h1 br::after { content: ' '; }
  body.journey-watching .journey-deck { font-size: .9rem; }
  body.journey-watching .chapter-tabs { margin-block: .3rem .65rem; }
  body.journey-watching .journey-art { margin-inline: auto; width: min(100%, calc(max(16rem, 100svh - var(--music-dock-height) - 23rem) * 1.5)); }
  body.journey-watching .journey-art figcaption { padding: .5rem .8rem; }
  body.journey-watching .journey-art figcaption p { font-size: 1rem; }
  body.journey-watching .journey-start { flex-direction: row; flex-wrap: wrap; flex: 0 1 34rem; justify-content: flex-end; align-items: center; }
  body.journey-watching .journey-start p { flex-basis: 100%; max-width: none; font-size: .75rem; text-align: right; }
}
@media (max-width: 740px) {
  body.journey-watching .journey-heading { padding-block: .6rem; }
  body.journey-watching .journey-heading h1 { font-size: 1.55rem; margin-block: .3rem; }
  body.journey-watching .journey-heading h1 br { display: none; }
  body.journey-watching .journey-deck { font-size: .9rem; }
  body.journey-watching .journey-start { margin-top: .7rem; flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  body.journey-watching .journey-start .comic-button { font-size: .85rem; padding-inline: .7rem; }
  body.journey-watching .journey-start p { flex-basis: 100%; font-size: .75rem; }
}
.cast-ensemble { margin: 0 0 1.5rem; border: 2px solid var(--ink); border-radius: .4rem; background: var(--paper-light); }
.cast-ensemble img { width: 100%; height: auto; }
.cast-ensemble figcaption { padding: .8rem 1rem; border-top: 1px solid var(--line); }
.cast-card .cast-copy { border-top: 1px solid var(--line); }
/* The dock owns a reserved viewport row; it never sits above the reading surface. */
body.js-ready { height: 100svh; overflow: hidden; padding-bottom: 0; }
body.js-ready main { height: calc(100svh - var(--music-dock-height)); min-height: 0; overflow: auto; overscroll-behavior: contain; }
body.journey-watching .journey-start { display: none !important; }
body.journey-watching .journey-deck { display: none; }
html.js-loading .view:not(#entrance) { display: none !important; }
body:not(.js-ready) img[data-src] { display: none; }
/* V3: optional paths after the artwork, with the story's layout and media intact. */
.marketing-v3{padding:clamp(24px,4vw,44px) 0;border-top:1px solid rgba(53,51,42,.22);max-width:78ch}
.marketing-v3 h2{font-size:clamp(24px,3.5vw,40px);line-height:1.15;max-width:26ch;margin:0 0 20px;overflow-wrap:break-word}
.marketing-v3 p{font-size:clamp(17px,1.65vw,20px);line-height:1.65;margin:0 0 18px}
.marketing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.marketing-actions .marketing-action{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:14px 18px;border:1px solid currentColor;border-radius:12px;line-height:1.4;font-size:16px;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.marketing-action>span:last-child{flex:0 0 auto}.marketing-after-story{width:min(100% - 40px,1000px);margin:40px auto 0}.marketing-after-story .marketing-v3{max-width:100%}
@media(min-width:800px){.marketing-after-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.marketing-after-story .marketing-v3:first-child,.marketing-after-story .marketing-v3:last-child{grid-column:1/-1}}
@media(max-width:600px){.marketing-actions{flex-direction:column}.marketing-actions .marketing-action{width:100%}.marketing-v3 h2{max-width:100%}.marketing-after-story{width:calc(100% - 32px)}}

/* A scene opens the invitation; the working enquiry has its own compact place. */
.marketing-after-story{display:block;width:min(100% - 40px,1120px);margin:40px auto}
.marketing-after-story .marketing-scene{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;padding:28px;border:3px solid var(--ink);background:var(--paper-light);max-width:none;align-items:center}
.marketing-scene figure{margin:0;min-width:0;align-self:center;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--frame-shadow)}
.marketing-scene img{display:block;width:100%;height:auto;object-fit:contain}
.marketing-scene-copy{padding:0;min-width:0}
.marketing-scene-copy h2{max-width:100%;font-size:clamp(26px,3vw,38px);line-height:1.16}
.marketing-scene-copy p{font-size:18px;line-height:1.55}
.marketing-scene .marketing-actions{gap:10px}
.marketing-actions .marketing-action,.marketing-shortcuts .marketing-action{border-radius:0;min-height:48px;box-sizing:border-box}
.marketing-shortcuts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:18px 0 28px}
.marketing-shortcuts .marketing-action{display:inline-flex;align-items:center;gap:12px;padding:10px 0;font-size:17px;line-height:1.4;text-underline-offset:4px}
.marketing-after-story .marketing-own-world{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;max-width:none;padding-block:28px}
.marketing-own-world>div,.world-conditions{min-width:0}
.marketing-own-world h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:16px}
.world-conditions{border:2px solid var(--ink);padding:0 20px;align-self:start;background:var(--paper-light)}
.world-conditions summary{display:list-item;cursor:pointer;min-height:48px;padding:16px 0;font-weight:700;font-size:18px;line-height:1.4}
.world-terms{display:grid;gap:0;margin:0 0 18px}
.world-terms>div{padding:14px 0;border-top:1px solid var(--line);min-width:0}
.world-terms dt{font-size:17px;font-weight:700;line-height:1.4}
.world-terms dd{margin:6px 0 0;font-size:17px;line-height:1.5}
.marketing-v3 .world-terms+p{font-size:16px;line-height:1.5}
.marketing-action:focus-visible,.world-conditions summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:800px){
 .marketing-after-story{width:calc(100% - 32px);margin-block:28px}
 .marketing-after-story .marketing-scene,.marketing-after-story .marketing-own-world{grid-template-columns:minmax(0,1fr)}
 .marketing-after-story .marketing-scene{padding:20px;gap:24px}
 .marketing-shortcuts{flex-direction:column;gap:0;margin-bottom:20px}
 .marketing-after-story .marketing-own-world{gap:22px;padding-block:24px}
 .marketing-scene .marketing-actions{flex-direction:column}
 .marketing-scene .marketing-action{width:100%}
}