/* ============================================================================
   By Loge's Light — theatre chrome
   Proscenium · captions · cards · curtain · programme · playbills
   ========================================================================== */

:root {
  color-scheme: only light;   /* with the meta tags in index.html: forced dark mode would turn the ink white on the cream tickets and cards */
  --fk: min(calc(100vw / 1800), calc(100vh / 1000));   /* proscenium scale, CSS px per plate px; set from JS on resize */
  --fr-t: calc(var(--fk) * 91);   /* plain depth of the top band (pelmet) */
  --fr-s: calc(var(--fk) * 66);   /* side pilasters */
  --fr-b: calc(var(--fk) * 79);   /* bottom apron */
  --parch: #f3e2c0;
  --gilt: #e8c06a;
  --gilt-hi: #fbeaa8;
  --gilt-lo: #a8741c;
  --ember2: #ff9a3c;
  --oxblood: #4a0a10;
  --velvet: #7c1620;
  --cap-size: calc(26px * clamp(0.75, var(--stage-s, 1), 1.35));
}

#frame, #caption, #hint, #choice, #card, #veil, #controls, #menu, #flash, #curtain { position: absolute; }
#app button, #app .ticket, #app [role="button"] { cursor: pointer; font: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ proscenium */
#frame { inset: 0 var(--gap, 0px); z-index: 36; pointer-events: none; transition: opacity .7s ease; }
/* on very wide windows the proscenium stands in a dark house; these are its walls */
#frame::before, #frame::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--gap, 0px);
  background: linear-gradient(180deg, #170d08, #0d0705 60%, #080403); }
#frame::before { right: 100%; box-shadow: inset -18px 0 24px -12px rgba(0, 0, 0, .8); } #frame::after { left: 100%; box-shadow: inset 18px 0 24px -12px rgba(0, 0, 0, .8); }
#frame.gone { opacity: 0; }
.fr > * { position: absolute; }
/* One illustrated plate, 9-sliced: corners keep their drawing, the bands between them stretch. */
.fr-arch {
  inset: 0; box-sizing: border-box; border-style: solid; border-color: transparent;
  border-width: calc(var(--fk) * 340) calc(var(--fk) * 336) calc(var(--fk) * 180) calc(var(--fk) * 336);
  border-image: url(../../assets/theatre/proscenium.webp) 340 336 180 336 / calc(var(--fk) * 340) calc(var(--fk) * 336) calc(var(--fk) * 180) calc(var(--fk) * 336) stretch;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .7));
}
/* Bayreuth's covered orchestra pit, the 'mystic abyss': a dark hood in front of the stage, only its gilt rim
   showing above the apron (it hides the musicians; no light comes out of it) */
.fr-pit {
  left: 50%; bottom: calc(var(--fr-b) - var(--fk) * 52); width: calc(var(--fk) * 660); aspect-ratio: 1400 / 207;
  transform: translateX(-50%); background: url(../../assets/stage/pit_hood.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, .55));
}
/* the empty sockets in the plate's top corners hold the raven (Wotan) and the flame (Loge) */
.fr-roundel { top: calc(var(--fk) * 13); width: calc(var(--fk) * 100); height: calc(var(--fk) * 100); background: center / 100% 100% no-repeat; }
.fr-roundel.l { left: calc(var(--fk) * 33); background-image: url(../../assets/theatre/roundel_raven.webp); }
.fr-roundel.r { right: calc(var(--fk) * 34.5); background-image: url(../../assets/theatre/roundel_flame.webp); }

/* the title cartouche: painted plate, live lettering in its oxblood field */
.fr-cart {
  left: 50%; top: calc(var(--fk) * 2); width: clamp(210px, calc(var(--fk) * 440), 46vw); aspect-ratio: 1200 / 395;
  transform: translateX(-50%); background: url(../../assets/theatre/cartouche.webp) center / 100% 100% no-repeat;
  container-type: inline-size; opacity: 1; transition: opacity .6s ease;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6));
}
.fr-cart.empty { opacity: 0; }
.fr-cart .plaque {
  position: absolute; inset: 37% 12% 30% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1;
}
.fr-cart .ev {
  font-family: 'UnifrakturMaguntia', 'IM Fell English', serif; font-size: 6.4cqw; color: #f2d98e;
  text-shadow: 0 1px 0 #1e0306, 0 0 9px rgba(246, 215, 128, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.fr-cart .sc {
  font-family: 'IM Fell English SC', 'IM Fell English', serif; font-size: max(10px, 3.1cqw); letter-spacing: .14em; color: #ead6b0;
  text-shadow: 0 1px 0 #1e0306; margin-top: .45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.fr-cart.one .ev { font-size: 7cqw; }
.fr-cart.one .sc { margin-top: 0; font-size: 4.6cqw; letter-spacing: .12em; color: #f2d98e; }

/* ------------------------------------------------------------------ controls */
#controls {
  --btn: clamp(22px, calc(var(--fk) * 37), 34px);
  /* house controls stay with the proscenium, above the stage's black veil and the cards */
  z-index: 45; top: max(3px, calc(var(--fk) * 46 - var(--btn) / 2)); right: calc(var(--fk) * 300 + var(--gap, 0px));
  display: flex; gap: max(calc(var(--btn) * .28), calc(44px - var(--btn))); pointer-events: none;
}
/* Small engraved brass medallions, in the roundels' own manner: a matte disc (warm gilt, the
   proscenium's own gold family, --gilt/--gilt-lo — a gentle tonal falloff, no bright specular
   highlight) carries a dark, bold, plain cut-paper silhouette (src/art/cut/btn_*.js, traced by
   tools/cutpaper.py from assets/src/theatre/buttons/raw_cut_*.png — the show's own stage medium,
   generated with the Cut recipe, AGENT_HANDOFF §7.2). Kept simple on purpose (round 3, owner
   review 2026-10-05: "too complex and illegible… trying to be too cute" — fewer details, bolder
   shapes win at 22-34px over anything fussy). Each glyph sits at ~68% of the disc, inside its
   inner rim, with real breathing room; see --btn-glyph-size per button below. */
#controls button {
  pointer-events: auto; position: relative; width: var(--btn); height: var(--btn); padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #2a1406;
  background: radial-gradient(circle at 50% 46%, #cfa655 0%, #bd954a 52%, var(--gilt-lo) 100%);
  box-shadow: 0 0 0 1px #2d1b06, 0 0 0 2.5px #c6a155, inset 0 0 0 1px rgba(30, 17, 4, .5),
    inset 0 2px 3px rgba(0, 0, 0, .3), inset 0 -1px 1px rgba(255, 244, 214, .12), 0 2px 4px 1px rgba(0, 0, 0, .5);
  transition: transform .15s ease, filter .15s ease;
  -webkit-appearance: none; appearance: none;
}
#controls button svg { width: var(--btn-glyph-size, 68%); height: var(--btn-glyph-size, 68%); display: block; overflow: visible; }
#btn-menu { --btn-glyph-size: 64%; }
#btn-sound { --btn-glyph-size: 70%; }
#controls { transition: opacity .6s ease; }
/* small ornaments, full-size targets: every control answers a 44 px touch */
#controls button::after { content: ''; position: absolute; inset: calc(-1 * max(0px, (44px - var(--btn)) / 2)); border-radius: 50%; }
@media (max-aspect-ratio: 1/1) { #controls { top: calc(var(--fr-t) + 8px); right: calc(var(--fr-s) + 10px); } }
#app.card-up #controls { opacity: .22; }
#app.card-up #controls:hover, #app.card-up #controls:focus-within { opacity: 1; }
#controls button:hover { filter: brightness(1.08); transform: translateY(-1px); }
#controls button:active { transform: translateY(1px); filter: brightness(.92); }
#controls button:focus-visible { outline: 2px solid #fff3c0; outline-offset: 5px; }
/* ------------------------------------------------------------------ caption */
/* Everything here stands on the pit hood's rim (--pit: its top, up from the window's foot; the hood is drawn over the
   stage, so nothing may sink behind it). A line's last row sits just above it, leaving the fuse room; the hint row sits
   on the rim, and a line with a hint up stands exactly one hint row higher (a compact row under a sung line). */
#app { --pit: calc(var(--fr-b) + var(--fk) * 46); --hint-fs: calc(22px * clamp(0.85, var(--stage-s, 1), 1.3)); --hint-row: calc(var(--hint-fs) * 1.95); }
#app.has-song { --hint-row: calc(var(--hint-fs) * .84 * 1.95); }
#caption {
  z-index: 20; left: 0; right: 0; bottom: calc(var(--pit) - var(--cap-size) * .35);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 clamp(14px, 3vw, 44px); pointer-events: none;
  transition: bottom .4s ease;
}
#app.has-hint #caption, #app.has-take #caption { bottom: calc(var(--pit) - var(--hint-fs) * .3 + var(--hint-row) - var(--cap-size) * .85); }
.cap {
  position: relative; isolation: isolate; width: 100%;
  max-width: min(calc(1040px * clamp(0.75, var(--stage-s, 1), 1.35)), 100%);
  padding: .95em 1.5em 1em; text-align: center; color: var(--parch);
  font-family: 'IM Fell English', Georgia, serif; font-size: var(--cap-size); line-height: 1.38;
  opacity: 0; transition: opacity .45s ease, transform .5s ease; transform: translateY(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .75), 0 0 24px rgba(255, 150, 60, .14);
  font-feature-settings: 'liga', 'dlig', 'onum';
}
.cap::before {
  content: ''; position: absolute; z-index: -1; inset: -2.4em -5.5em -1.9em; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(9, 4, 2, .8) 0%, rgba(9, 4, 2, .66) 42%, rgba(9, 4, 2, .3) 74%, rgba(9, 4, 2, 0) 100%);
}
.cap.go { opacity: 1; transform: none; }
.cap.out { opacity: 0; transform: translateY(-5px); transition: opacity .45s ease, transform .5s ease; }
.cap-who {
  display: flex; align-items: center; justify-content: center; gap: .7em; margin: 0 0 .32em;
  font-family: 'IM Fell English SC', 'IM Fell English', serif; font-size: .58em; letter-spacing: .3em; color: var(--ember2);
  line-height: 1.1;
}
.cap-who::before, .cap-who::after { content: ''; width: 2.2em; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 154, 60, .85)); }
.cap-who::after { transform: scaleX(-1); }
.cap-who span { transform: translateX(.15em); }
.cap-de {
  font-family: 'UnifrakturMaguntia', 'IM Fell English', serif; font-size: 1.1em; line-height: 1.22; color: var(--gilt);
  margin: 0 0 .28em; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(232, 192, 106, .32), 0 0 8px rgba(0, 0, 0, .8);
}
.cap-en { font-style: italic; }
.cap-en em { font-style: normal; }
.cap-en .sc, .cap-en .w.sc { font-family: 'IM Fell English SC', 'IM Fell English', serif; font-style: normal; letter-spacing: .06em; }
/* each word kindles in ember light and cools to the line's own colour, rather than fading up through grey */
.cap .w { display: inline-block; opacity: 0; transform: translateY(.45em); color: #ffc677;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 .55em rgba(255, 140, 50, .75);
  transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .2, 1), color 1.3s ease .25s, text-shadow 1.5s ease .2s;
  transition-delay: var(--d, 0s), var(--d, 0s), calc(var(--d, 0s) + .25s), calc(var(--d, 0s) + .2s); }
.cap .w.i { font-style: normal; }
.cap.go .w { opacity: 1; transform: none; color: inherit; text-shadow: inherit; }
.cap.now .w { transition-duration: .16s; transition-delay: 0s; }
/* A line waiting on the viewer: a small still gilt lozenge, a printer's mark, that comes only if they linger
   2.5 s after the line is whole (a fluent reader never sees it). No flicker, no glow: the cursor is the only flame. */
.cap-mark { display: inline-block; width: .26em; height: .26em; margin: 0 0 0 .62em; vertical-align: .2em; transform: rotate(45deg);
  background: #d2aa5c; box-shadow: 0 1px 1px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .25s ease; }
.cap.done .cap-mark { opacity: .85; transition: opacity 1.1s ease 2.5s; }
/* a timed line burns a fuse for exactly as long as it will stay: a gilt cord over its own faint track, so what is
   left reads as a share of the whole, and an ember at the burning end */
.cap-fuse { position: relative; display: block; width: min(46%, 15em); height: 2px; margin: .6em auto 0; opacity: 0; transition: opacity .5s ease .3s;
  background: rgba(232, 192, 106, .16); border-radius: 1px; }
.cap.go .cap-fuse { opacity: 1; }
.cap-fuse i { position: absolute; right: 0; top: 0; height: 2px; width: 100%; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 176, 90, .95), rgba(232, 192, 106, .8) 22%, rgba(232, 192, 106, .62));
  animation: fuse var(--dur, 4s) linear forwards; }
.cap-fuse i::before { content: ''; position: absolute; left: -3px; top: -2.5px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff0c8 0, #ffc070 35%, rgba(255, 140, 50, .55) 60%, rgba(255, 120, 40, 0) 72%); }
@keyframes fuse { from { width: 100%; } to { width: 0%; } }
#app.paused .cap-fuse i, #app.paused .cap-fuse i::before { animation-play-state: paused; }

/* voice: another character speaking — upright, cooler */
.cap.st-voice { color: #e4e8ee; }
.cap.st-voice .cap-en { font-style: normal; }
.cap.st-voice .cap-en em, .cap.st-voice .cap-en .w.i { font-style: italic; }
.cap.st-voice .cap-who { color: #a7bde0; }
.cap.st-voice .cap-who::before { background: linear-gradient(90deg, transparent, rgba(167, 189, 224, .85)); }
.cap.st-voice .cap-who::after { background: linear-gradient(90deg, transparent, rgba(167, 189, 224, .85)); }
.cap.st-voice { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .75), 0 0 24px rgba(120, 160, 230, .16); }

/* a reread line: an echo of what was said, smaller and cooler, standing above the current line */
.cap.cap-echo { font-size: calc(var(--cap-size) * .8); color: rgba(243, 226, 192, .8); padding-top: .5em; padding-bottom: .55em; transform: translateY(-4px); }
.cap.cap-echo.go { transform: none; }
/* its own smoked backing, denser than a line's, so it reads as words held up in front of the play, not part of it */
.cap.cap-echo::before { inset: -1.1em -3.2em -.8em;
  background: radial-gradient(closest-side, rgba(9, 4, 2, .93) 0%, rgba(9, 4, 2, .88) 55%, rgba(9, 4, 2, .5) 82%, rgba(9, 4, 2, 0) 100%); }
.cap.cap-echo .cap-who { opacity: .75; }
.cap.cap-echo .cap-de { opacity: .85; }
.cap.cap-echo .cap-vis { position: relative; }
.cap.cap-echo + .cap::after { content: ''; position: absolute; top: .2em; left: 50%; width: min(40%, 12em); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 192, 106, .35), transparent); }

/* song: the Fraktur a quarter larger than the narration, wrapped into even lines, with its gloss beside it when the
   two share a line (a small gilt lozenge between) and under it when they do not */
.cap.st-song .cap-de { font-size: 1.25em; line-height: 1.16; margin-bottom: .2em; color: #f0cb78; text-wrap: balance; max-width: min(100%, 62ch); }
.cap.st-song .cap-vis > .cap-de { margin-inline: auto; }
.cap.st-song .cap-en { font-size: .86em; opacity: .94; text-wrap: balance; }
.cap-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.cap-pair > .cap-en { max-width: 100%; }
.cap-pair.side > .cap-de { margin-bottom: 0; }
.cap-pair.side > .cap-en::before { content: ''; display: inline-block; width: .3em; height: .3em; margin: 0 1em 0 1.1em; vertical-align: .22em;
  transform: rotate(45deg); background: rgba(232, 192, 106, .7); box-shadow: 0 0 5px rgba(255, 154, 60, .5); }

@media (max-aspect-ratio: 1/1) {
  /* tall screens: captions live in the letterbox space under the stage */
  #caption { bottom: auto; top: calc(100% - var(--stage-bottom, 0px) + 10px); align-items: flex-start; padding: 0 16px; }
  #app.has-hint #caption, #app.has-take #caption { bottom: auto; }
  .cap { --cap-size: clamp(16.5px, 4.5vw, 27px); max-width: 100%; padding: .5em .4em .8em; }
  .cap::before { inset: -.6em -16px -.4em; background: linear-gradient(180deg, rgba(9, 4, 2, 0), rgba(9, 4, 2, .55) 24%, rgba(9, 4, 2, .55) 76%, rgba(9, 4, 2, 0)); }
}

/* ------------------------------------------------------------------ hint */
#hint {
  z-index: 21; left: 0; right: 0; bottom: calc(var(--pit) - var(--hint-fs) * .3); text-align: center; pointer-events: none;
  font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: var(--hint-fs);
  color: #f6dc8c; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .9), 0 0 22px rgba(255, 154, 60, .25);
  padding: 0 24px; display: flex; justify-content: center; align-items: center;
}
#hint { transition: bottom .5s ease, font-size .4s ease; }
/* under a sung line the hint draws in to a compact row */
#app.has-song #hint { font-size: calc(var(--hint-fs) * .84); }
.h-row { opacity: 0; transition: opacity .6s ease; }
#hint.show .h-row { opacity: 1; }
/* "Loge, take over": offered (never forced) while a gesture is wanted; it opens beside the hint, on the same row */
.h-take { display: grid; grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns .5s ease, opacity .6s ease .1s; }
.h-take > div { overflow: hidden; white-space: nowrap; }
#hint.take .h-take { grid-template-columns: 1fr; opacity: 1; }
.h-take-btn {
  pointer-events: none; display: inline-flex; align-items: center; gap: .5em; margin: 0 0 0 .5em; padding: .25em .9em; border: 0; border-radius: 2em;
  background: radial-gradient(closest-side, rgba(9, 4, 2, .6), rgba(9, 4, 2, 0)); color: #e8c06a; opacity: .72; letter-spacing: .14em;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); transition: opacity .25s ease, color .25s ease; -webkit-appearance: none; appearance: none;
}
#hint.take .h-take-btn { pointer-events: auto; }
.h-take-btn:hover, .h-take-btn:focus-visible { opacity: 1; color: #fbeaa8; outline: none; }
.h-take-btn:focus-visible span { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
#app .h-take-btn { font: normal 400 .68em/1.2 'IM Fell English SC', 'IM Fell English', serif; }
.h-take-btn kbd { font-family: 'Oswald', sans-serif; font-style: normal; font-size: .78em; letter-spacing: 0; line-height: 1; padding: .15em .4em .12em; border: 1px solid rgba(232, 192, 106, .5); border-radius: 3px; color: inherit; }

/* the last line again: a small gilt curl set in the apron's red band, just past the band's gilt star (the band is
   the plate's stretched middle slice, so its place is a fraction of it), quiet until wanted: house, not stage */
#again {
  position: absolute; z-index: 37; bottom: calc(var(--fk) * 59 - 22px);
  left: calc(var(--gap, 0px) + var(--fk) * 336 + (100% - 2 * var(--gap, 0px) - var(--fk) * 672) * .085);
  display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 .5em; border: 0; background: none; color: #e8c06a;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s, color .2s;
  -webkit-appearance: none; appearance: none;
}
#app #again { font: italic 400 calc(15px * clamp(0.85, var(--stage-s, 1), 1.25)) / 1 'IM Fell English', Georgia, serif; }
#again.on { opacity: .38; visibility: visible; transition: opacity .5s ease, visibility 0s, color .2s; }
#again.on:hover, #again.on:focus-visible { opacity: 1; color: #fbeaa8; outline: none; }
#again:focus-visible span { text-decoration: underline; text-underline-offset: .25em; }
#again svg { width: 1.15em; height: 1em; filter: drop-shadow(0 1px 1px #000); }
#app.card-up #again { opacity: 0; visibility: hidden; }
@media (max-aspect-ratio: 1/1) { #again { bottom: auto; top: calc(100% - var(--stage-bottom, 0px) - 46px); } }
.h-in { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .7em; padding: .35em 1em; }
.h-in::before { content: ''; position: absolute; z-index: -1; inset: -.9em -3em; background: radial-gradient(closest-side, rgba(9, 4, 2, .72), rgba(9, 4, 2, .4) 55%, rgba(9, 4, 2, 0)); }
@media (max-aspect-ratio: 1/1) { #hint { bottom: calc(var(--fr-b) + 14px); font-size: clamp(16px, 4.2vw, 22px); flex-wrap: wrap; } #app.has-take #hint { bottom: calc(var(--fr-b) + 14px + var(--fk) * 34); } }

/* ------------------------------------------------------------------ veil + flash */
/* Scene changes darken the stage and its words, while the curtain and proscenium stay in the house. */
#veil { inset: 0; z-index: 34; background: #000; opacity: 0; pointer-events: none; }
/* a flash lights the stage, not the house: it sits under the proscenium (and the words), so only the opening flares */
#flash { inset: 0; z-index: 19; opacity: 0; pointer-events: none; mix-blend-mode: normal; }

/* ------------------------------------------------------------------ choice: ticket stubs */
#choice {
  inset: 0; z-index: 30; display: none; place-items: center; padding: calc(var(--fr-t) + 8px) 20px calc(var(--fr-b) + 14px);
  pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(ellipse 70% 60% at 50% 52%, rgba(8, 4, 2, .72), rgba(8, 4, 2, .35) 60%, transparent 100%);
}
#choice.on { display: grid; }
#choice.in { opacity: 1; }
#choice.in:not(.picked) .ch-wrap { pointer-events: auto; }
/* --clear (stage px, set per choice): the prompt stays where it is and the row drops that far, leaving the stage's subject (the Rhine's gold) uncovered between them */
.ch-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(clamp(14px, 3vh, 30px) + var(--clear, 0) * var(--stage-s, 1) * 1px); max-width: 100%;
  transform: translateY(calc(var(--clear, 0) * var(--stage-s, 1) * .5px)); }
/* and its scrim leaves that subject lit: a soft window at the stage's middle, the dark weight moved down onto
   the tickets themselves (a bed under the row that travels with it), so the question's gold keeps its light */
#choice.clear { background: radial-gradient(ellipse 70% 60% at 50% 52%, rgba(8, 4, 2, .06), rgba(8, 4, 2, .1) 26%, rgba(8, 4, 2, .38) 62%, transparent 100%); }
#choice.clear .ch-prompt { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .95), 0 0 26px rgba(8, 4, 2, .85), 0 0 24px rgba(255, 154, 60, .2); }
#choice.clear .ch-row { position: relative; }
#choice.clear .ch-row::before { content: ''; position: absolute; inset: -60% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 4, 2, .72), rgba(8, 4, 2, .5) 55%, transparent); }
/* while tickets are up the question is the prompt's: a sung line still lingering in the caption band would ask it twice */
#app:has(#choice.on) .cap { opacity: 0; transition: opacity .3s ease; }
.ch-prompt {
  margin: 0; max-width: 34em; text-align: center; font-family: 'IM Fell English', serif; font-style: italic;
  font-size: clamp(19px, calc(26px * var(--stage-s, 1)), 34px); line-height: 1.3; color: var(--parch);
  text-shadow: 0 1px 2px #000, 0 0 14px rgba(0, 0, 0, .9), 0 0 24px rgba(255, 154, 60, .2);
}
.ch-prompt .sc { font-style: normal; font-family: 'IM Fell English SC', serif; }
.ch-prompt em { font-style: normal; }
.ch-prompt::before, .ch-prompt::after { content: ''; display: block; width: 90px; height: 7px; margin: 0 auto; opacity: .85;
  background: radial-gradient(circle at 50% 50%, #ff9a3c 0 2.5px, transparent 3px) center / 100% 100% no-repeat,
    linear-gradient(90deg, transparent, #e8c06a 30%, transparent 46%, transparent 54%, #e8c06a 70%, transparent) center 3px / 100% 1px no-repeat; }
.ch-prompt::before { margin-bottom: .55em; } .ch-prompt::after { margin-top: .55em; }
.ch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.2vw, 28px); max-width: calc(100vw - 2 * var(--fr-s) - 2vw); }
.ch-row.n2 { --n: 2; } .ch-row.n1 { --n: 1; }

/* The ticket is real printed stock (assets/tickets/, generated letterpress card with no words on it: v10 asset/tickets/):
   stub, punched notches, perforation and rules are all in the print, and every word on it is live type.
   It keeps the stock's own proportions (aspect-ratio), so the print is never stretched; the answers are sized to fit.
   (A 9-slice border-image was tried: it showed seams when a ticket scales on hover.)
   Sizes are in --tu, one pixel of the 720 px stock, so the ticket is one drawing that scales as a whole. */
.ticket {
  --tk: #d8402c; --tk2: #7e1a10; --rot: 0deg;
  --tk-img: url(../../assets/tickets/vermilion.webp);
  --tw: clamp(196px, min(24vw, calc((100vw - 2 * var(--fr-s) - 4vw) / var(--n, 3) - 2.2vw)), calc(300px * clamp(1, var(--stage-s, 1), 1.3)));
  --tu: calc(var(--tw) / 720); --stub: calc(var(--tu) * 182);
  position: relative; display: flex; align-items: stretch; width: var(--tw); aspect-ratio: 720 / 239; padding: 0; border: 0;
  background: none; color: #1a0f08; text-align: left; transform: rotate(var(--rot)); transition: transform .22s cubic-bezier(.2, .8, .3, 1.2), filter .2s;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .6)); -webkit-appearance: none; appearance: none;
  opacity: 0; animation: tkin .55s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(.12s + var(--i) * .1s);
}
/* two answers get the wider stock, so a long one ("Only one who has never learned fear") still sits in two lines */
.ch-row.n2 .ticket { --tw: clamp(196px, min(28vw, calc((100vw - 2 * var(--fr-s) - 4vw) / 2 - 2.2vw)), calc(360px * clamp(1, var(--stage-s, 1), 1.3))); }
#app .ticket { font-size: calc(var(--tu) * 38.4); }   /* 16px on a 300px ticket */
@keyframes tkin { from { opacity: 0; transform: translateY(26px) rotate(calc(var(--rot) * 3)); } to { opacity: 1; transform: rotate(var(--rot)); } }
.ticket.tk-cy { --tk: #f2b52a; --tk2: #a8730a; --tk-img: url(../../assets/tickets/yellow.webp); }
.ticket.tk-pb { --tk: #1f3b6e; --tk2: #0e1f42; --tk-img: url(../../assets/tickets/prussian.webp); }
.ticket::before {   /* the stock: stub, perforation, notches and rules are all in the print */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--tk-img) center / 100% 100% no-repeat;
}
.tk-stub, .tk-body { position: relative; z-index: 2; }
.tk-stub { width: var(--stub); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fbf1d4; font-family: 'Oswald', sans-serif; font-weight: 500; text-shadow: 1px 1px 0 var(--tk2); }
.ticket.tk-cy .tk-stub { color: #2a1406; text-shadow: 1px 1px 0 rgba(255, 240, 180, .6); }
.tk-stub small { font-size: max(10px, .6875em); letter-spacing: .18em; text-transform: uppercase; }
.tk-stub small sup { font-size: .7em; }
.tk-stub b { font-family: 'Rye', 'Ultra', serif; font-weight: 400; font-size: 2.375em; line-height: 1; margin-top: .125em; }
.tk-body { flex: 1; padding: calc(var(--tu) * 30) calc(var(--tu) * 46) calc(var(--tu) * 32) calc(var(--tu) * 48); display: flex; flex-direction: column; justify-content: center; gap: .25em; }
/* "Admit One" is read, not just seen: the stub colours darkened to a printer's ink (>= 4.5:1 on the cream) */
.tk-kick { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: max(10.5px, .72em); letter-spacing: .26em; text-transform: uppercase; color: var(--tk-ink, var(--tk)); }
.ticket.tk-vm { --tk-ink: #9c2a18; }
.ticket.tk-cy .tk-kick { color: #6f4504; }
.tk-txt { font-family: 'IM Fell English', serif; font-size: max(18px, 1.4em); line-height: 1.12; color: #1a0f08; text-wrap: balance; }
.tk-txt em { font-style: italic; } .tk-txt .sc { font-family: 'IM Fell English SC', serif; }
/* once a ticket has dealt itself in it settles: hovering then only lifts it, never replays the entrance */
.ticket.settled { animation: none; opacity: 1; }
.ticket.settled:hover, .ticket:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.04); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .65)) brightness(1.05); animation: none; opacity: 1; z-index: 3; }
/* a keyboard player's focus is the hover lift plus lamplight spilling from the die-cut card (no ring: light, not a UI outline) */
.ticket:focus-visible { outline: none; filter: brightness(1.07) drop-shadow(0 0 7px rgba(255, 214, 140, .8)) drop-shadow(0 0 20px rgba(255, 150, 60, .55)) drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.ticket:active { transform: rotate(0) translateY(-2px) scale(.99); }
.ticket::selection { background: transparent; }
#choice.picked .ticket:not(.chosen) { opacity: 0; transform: translateY(14px) scale(.94) rotate(calc(var(--rot) * 2)); transition: opacity .35s, transform .4s; animation: none; }
#choice.picked .ticket.chosen { transform: translateY(-16px) rotate(-3deg) scale(1.1); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); animation: none; opacity: 1; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6)) brightness(1.1); }
#choice.picked .ch-prompt { opacity: .3; transition: opacity .4s; }
@media (max-width: 760px) {
  .ch-row { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .ticket, .ch-row.n2 .ticket { --tw: min(86vw, 360px); flex: none; }
}

/* the pass-out check: a small prussian ticket tucked over the opening bill's corner (sized in bill widths) */
.ticket.tk-check {
  --tk: #1f3b6e; --tk2: #0e1f42; --tk-img: url(../../assets/tickets/check.webp); --tw: max(150px, 22cqw); --stub: calc(var(--tu) * 188);
  position: absolute; z-index: 5; top: -1.4cqw; right: -3cqw; aspect-ratio: 720 / 302; animation-delay: .9s;
}
#app .ticket.tk-check { font-size: max(9.5px, 1.55cqw); }
/* the numeral clears the punched notch on the stub's edge and shrinks to fit a long one (VIII, XIII) */
.tk-check .tk-stub { padding-left: calc(var(--tu) * 24); box-sizing: border-box; }
.tk-check .tk-stub small { font-size: .75em; letter-spacing: .12em; }
.tk-check .tk-stub b { font-size: min(1.55em, calc(4.1em / var(--nl, 1))); margin-top: .1em; white-space: nowrap; }
.tk-check .tk-body { padding: calc(var(--tu) * 28) calc(var(--tu) * 40) calc(var(--tu) * 28) calc(var(--tu) * 56); gap: .1em; }
.tk-check .tk-kick { font-size: .72em; letter-spacing: .26em; }
.tk-check .tk-txt { font-size: 1.3em; line-height: 1.04; }
.tk-check .tk-at { font-family: 'IM Fell English', serif; font-size: 1em; line-height: 1.15; color: #4a3320; }
.tk-check .tk-at em { font-style: italic; color: #1a0f08; }
.ticket.tk-check.chosen { transform: rotate(0deg) translateY(-8px) scale(1.06); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .6)) brightness(1.08); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); animation: none; opacity: 1; }

/* ------------------------------------------------------------------ cards (common) */
#card { inset: 0; z-index: 40; display: none; pointer-events: none; cursor: pointer; }
#card.on { display: block; pointer-events: auto; }
.card-inst { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .7s ease; overflow: hidden; }
.card-inst.in { opacity: 1; }
.card-inst.out { opacity: 0; transition: opacity .6s ease; }

/* ---- intertitle: silent-film title card */
.c-intertitle { background: radial-gradient(ellipse at 50% 45%, #1a120d 0%, #0c0806 62%, #050302 100%); }
.film { position: absolute; inset: 0; pointer-events: none; }
.film .grain { position: absolute; inset: -50%; background: var(--art-film); opacity: .34; mix-blend-mode: screen; animation: grain .9s steps(6) infinite; }
.film .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%); }
.film .flick { position: absolute; inset: 0; background: #f3e2c0; opacity: 0; animation: filmflick 5s steps(1) infinite; mix-blend-mode: soft-light; }
.film .scratch { position: absolute; top: -10%; bottom: -10%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 244, 214, .35) 20%, rgba(255, 244, 214, .15) 60%, transparent); opacity: 0; }
.film .s1 { left: 23%; animation: scratch 4.7s steps(1) infinite; }
.film .s2 { left: 71%; animation: scratch 6.3s steps(1) 1.4s infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 33% { transform: translate(3%, -5%); } 50% { transform: translate(-6%, -2%); } 67% { transform: translate(5%, 4%); } 83% { transform: translate(-2%, 6%); } 100% { transform: translate(0, 0); } }
@keyframes filmflick { 0%, 100% { opacity: 0; } 8% { opacity: .07; } 9% { opacity: 0; } 47% { opacity: .05; } 48% { opacity: 0; } 71% { opacity: .09; } 72% { opacity: .02; } 73% { opacity: 0; } }
@keyframes scratch { 0%, 100% { opacity: 0; } 20% { opacity: 1; } 21% { opacity: 0; } 60% { opacity: .8; transform: translateX(3px); } 61% { opacity: 0; } }

.it-frame { position: absolute; inset: clamp(14px, 3.4vmin, 40px); pointer-events: none; }
.it-line { position: absolute; background: linear-gradient(90deg, #a8741c, #f0cf78 50%, #a8741c); }
.it-line.t, .it-line.b { left: calc(var(--cs) * .9); right: calc(var(--cs) * .9); height: 2px; }
.it-line.t { top: 6px; } .it-line.b { bottom: 6px; }
.it-line.l, .it-line.r { top: calc(var(--cs) * .9); bottom: calc(var(--cs) * .9); width: 2px; background: linear-gradient(180deg, #a8741c, #f0cf78 50%, #a8741c); }
.it-line.l { left: 6px; } .it-line.r { right: 6px; }
.it-frame { --cs: clamp(90px, 21vmin, 210px); }
.it-corner { position: absolute; width: var(--cs); height: var(--cs); filter: drop-shadow(0 0 6px rgba(232, 192, 106, .3)); }
.it-corner svg { display: block; width: 100%; height: 100%; }
.it-corner.tl { top: 0; left: 0; } .it-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.it-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); } .it-corner.br { bottom: 0; right: 0; transform: scale(-1, -1); }
.it-mid { position: absolute; left: 50%; width: clamp(70px, 12vmin, 130px); transform: translateX(-50%); }
.it-mid svg { display: block; width: 100%; }
.it-mid.t { top: -4px; } .it-mid.b { bottom: -4px; transform: translateX(-50%) scaleY(-1); }
.it-body {
  position: relative; z-index: 2; max-width: min(760px, 78vw); text-align: center; padding: 0 2vmin;
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vmin, 20px);
}
.it-title { margin: 0; font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: clamp(34px, 8.4vmin, 92px); line-height: 1.04; color: #f3d98f;
  text-shadow: 0 0 22px rgba(232, 192, 106, .35), 0 2px 0 #4a2f08, 0 0 3px rgba(255, 233, 160, .45); }
.it-orn { color: #c99432; width: clamp(130px, 22vmin, 230px); opacity: .95; }
.it-orn svg { display: block; width: 100%; }
.it-de { margin: 0; font-family: 'UnifrakturMaguntia', serif; font-size: clamp(22px, 4.2vmin, 44px); line-height: 1.22; color: #e8c06a; text-shadow: 0 0 14px rgba(232, 192, 106, .3); }
.it-text { margin: 0; font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(17px, 2.7vmin, 30px); line-height: 1.45; color: var(--parch); max-width: 34em; text-shadow: 0 1px 2px #000; }
.it-text em { font-style: normal; } .it-text .sc, .it-title .sc { font-family: 'IM Fell English SC', serif; font-style: normal; }
.c-intertitle .it-title, .c-intertitle .it-orn, .c-intertitle .it-de, .c-intertitle .it-text { opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1.2s ease; }
.c-intertitle.in .it-title { opacity: 1; transform: none; transition-delay: .35s; }
.c-intertitle.in .it-orn { opacity: .95; transform: none; transition-delay: .8s; }
.c-intertitle.in .it-de { opacity: 1; transform: none; transition-delay: 1.1s; }
.c-intertitle.in .it-text { opacity: 1; transform: none; transition-delay: 1.7s; }
.c-intertitle .it-frame { opacity: 0; transition: opacity 1.4s ease .1s; } .c-intertitle.in .it-frame { opacity: 1; }
@media (max-width: 599px) { .it-body { max-width: 72vw; } .it-frame { inset: 10px; --cs: 72px; } }

/* ---- dedication */
.c-dedication { background: radial-gradient(ellipse at 50% 50%, rgba(10, 5, 3, .8), rgba(4, 2, 1, .94)); }
.ded-wrap { padding: 20px; }
/* the dedication is printed on a poppy-and-wave card (1440x900 plate) */
.ded {
  position: relative; width: min(88vw, calc(72vh * 1.6), 1400px); aspect-ratio: 1440 / 900; container-type: inline-size;
  transform: rotate(-.7deg) scale(.96); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
  background: url(../../assets/theatre/dedication.webp) center / 100% 100% no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 80px rgba(255, 154, 60, .12);
}
.c-dedication.in .ded { transform: rotate(-.7deg) scale(1); }
.ded-in { position: absolute; inset: 15% 13% 18% 13%; display: flex; align-items: center; justify-content: center; text-align: center; }
.ded-text { margin: 0; font-family: 'IM Fell English', serif; font-style: italic; font-size: max(12px, 2.75cqw); line-height: 1.45; color: #2a1608; text-wrap: balance; }
/* the friend's name is the largest thing on the card */
.ded-text em { display: inline-block; font-style: normal; font-size: 2.15em; line-height: 1.05; color: #6b1219; margin: 0 .12em .12em; letter-spacing: .01em; }
.ded-text .sc { font-family: 'IM Fell English SC', serif; font-style: normal; }

/* ------------------------------------------------------------------ curtain */
/* A painted house curtain (2200x1400 plate) covering the window; its halves gather up and out
   toward the top corners like a Wagner curtain, then the pelmet lifts away. --o: 0 closed, 1 open. */
#curtain { inset: 0 var(--gap, 0px); z-index: 35; pointer-events: none; overflow: hidden; --o: 0; --o2: 0; visibility: hidden; container-type: size; }
.cu-box { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * 2200 / 1400)); aspect-ratio: 2200 / 1400; transform: translate(-50%, -50%); }
.cu-half { position: absolute; top: 0; bottom: 0; width: 50%; will-change: transform; contain: layout paint; }
.cu-half.l { left: 0; transform-origin: 0 0; filter: drop-shadow(6px 0 8px rgba(0, 0, 0, .5));
  transform: translateX(calc(var(--o) * -4%)) scaleX(calc(1 - var(--o) * .8)) scaleY(calc(1 - var(--o) * .62)) skewX(calc(var(--o) * -12deg)) skewY(calc(var(--o) * -20deg)); }
.cu-half.r { right: 0; transform-origin: 100% 0; z-index: 2; filter: drop-shadow(-6px 0 8px rgba(0, 0, 0, .55));
  transform: translateX(calc(var(--o) * 4%)) scaleX(calc(1 - var(--o) * .8)) scaleY(calc(1 - var(--o) * .62)) skewX(calc(var(--o) * 12deg)) skewY(calc(var(--o) * 20deg)); }
.cu-half > * { position: absolute; inset: 0; }
.cu-half { overflow: hidden; }
.cu-half.l { border-bottom-right-radius: calc(var(--o) * 85%) calc(var(--o) * 55%); }
.cu-half.r { border-bottom-left-radius: calc(var(--o) * 85%) calc(var(--o) * 55%); }
.cu-half.l .cu-cloth { background: url(../../assets/theatre/curtain_l.webp) 0 0 / 100% 100% no-repeat; }
.cu-half.r .cu-cloth { background: url(../../assets/theatre/curtain_r.webp) 0 0 / 100% 100% no-repeat; }
.cu-dim { background: #000; opacity: calc(var(--o) * .45); }
.cu-valance {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: calc(300 / 1400 * 100%);
  background: url(../../assets/theatre/curtain_valance.webp) 0 0 / 100% 100% no-repeat;
  transform: translateY(calc(var(--o2) * -112%)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
}
.cu-glow { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 150, 80, .1), transparent 70%); opacity: calc(1 - var(--o)); }
@media (prefers-reduced-motion: reduce) {
  .cu-half { will-change: auto; }
}

/* ------------------------------------------------------------------ programme (menu) */
#menu { inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: clamp(10px, 3vh, 34px) clamp(8px, 3vw, 40px); }
#menu[hidden] { display: none; }
.pg-back { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(14, 7, 4, .74), rgba(4, 2, 1, .94)); opacity: 0; transition: opacity .35s ease; cursor: pointer; }
#menu.in .pg-back { opacity: 1; }
.prog {
  position: relative; width: min(900px, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #f3e8cc, #e9d9b4); color: #1c0f07; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(40, 22, 6, .6), 0 22px 60px rgba(0, 0, 0, .8), 0 0 90px rgba(255, 154, 60, .1);
  opacity: 0; transform: translateY(18px) rotate(-.5deg) scale(.98); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
#menu.in .prog { opacity: 1; transform: none; }
.prog:focus { outline: none; }   /* it holds focus only so a stray key lands nowhere; the bill is its own frame */
.prog::before { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; z-index: 0;
  background: var(--art-blotch), var(--art-grain), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 70, 20, .28)); mix-blend-mode: multiply; opacity: .7; }
.pg-border { position: absolute; inset: 9px; pointer-events: none; z-index: 1; border: 2px solid #8c1d12; outline: 1px solid #1c0f07; outline-offset: -6px; }
.pg-border::before, .pg-border::after { content: ''; position: absolute; width: 11px; height: 11px; background: #1c0f07; transform: rotate(45deg); top: -6.5px; left: 50%; margin-left: -5.5px; }
.pg-border::after { top: auto; bottom: -6.5px; }
/* printed matter, not a button: an oxblood × set in the card's own ink, matching .pg-again-link /
   .pg-sound-choice. A soft paper-coloured halo (not a gradient disc) keeps it legible over the
   painted corner ornament on the plate variants, the same way caption text gets a paper shadow. */
.pg-close { position: absolute; z-index: 5; top: 13px; right: 15px; width: 32px; height: 32px; border-radius: 4px; border: 0; padding: 0; display: grid; place-items: center;
  background: none; color: #6e1119; font-family: 'IM Fell English SC', 'IM Fell English', serif; font-size: 20px; line-height: 1;
  text-shadow: 0 0 4px rgba(243, 232, 204, .95), 0 0 2px rgba(243, 232, 204, .95), 0 1px 0 rgba(243, 232, 204, .5);
  transition: color .2s ease, transform .15s ease; }
.pg-close svg { display: block; width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; overflow: visible; }
.pg-close:hover { color: #8c1d12; transform: scale(1.1); }
.pg-close:active { transform: scale(.92); }
.pg-close:focus-visible { outline: 2px solid #8c1d12; outline-offset: 2px; border-radius: 4px; }
.pg-scroll { position: relative; z-index: 2; overflow: auto; min-height: 0; padding: clamp(26px, 4.4vh, 44px) clamp(24px, 4vw, 54px) clamp(22px, 3.4vh, 34px); scrollbar-width: thin; scrollbar-color: #8c1d12 transparent; }
.pg-head { text-align: center; margin-bottom: clamp(12px, 2.2vh, 22px); }
.pg-house { margin: 0; font-family: 'IM Fell English SC', serif; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .34em; color: #8c1d12; }
.pg-title { margin: .1em 0 0; font-family: 'Rye', 'Ultra', serif; font-weight: 400; font-size: clamp(34px, 6.4vw, 66px); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: #1c0f07; }
.pg-title span { display: inline-block; text-shadow: .045em .03em 0 #d8402c, -.03em -.02em 0 rgba(31, 59, 110, .8); }
.pg-sub { margin: .15em 0 .5em; font-style: italic; font-size: clamp(15px, 1.8vw, 20px); color: #4a3320; }
.pg-rule { color: #8c1d12; width: min(230px, 50%); margin: 0 auto; } .pg-rule svg { display: block; width: 100%; }
.pg-body { columns: 2 340px; column-gap: clamp(26px, 4vw, 56px); column-rule: 1px solid rgba(140, 29, 18, .25); }
.pg-evening { break-inside: avoid; margin: 0 0 clamp(14px, 2.4vh, 24px); }
.pg-evening header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 2px solid #1c0f07; padding-bottom: 3px; margin-bottom: 6px; position: relative; }
.pg-evening header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid #1c0f07; }
.pg-evening h3 { margin: 0; font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: clamp(25px, 3vw, 33px); line-height: 1.1; color: #6e1119; }
.pg-evening header p { margin: 0; font-family: 'IM Fell English SC', serif; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .16em; color: #4a3320; }
.pg-evening ol { list-style: none; margin: 10px 0 0; padding: 0; }
.pg-scene {
  position: relative; display: flex; align-items: baseline; gap: .55em; width: 100%; padding: 5px 4px 5px 20px; border: 0; background: none; text-align: left; color: #1c0f07; border-radius: 2px;
  font-family: 'IM Fell English', serif; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.25; -webkit-appearance: none; appearance: none; transition: background .2s, color .2s;
}
/* the scene now playing (and the one under the hand) is marked with a still printer's lozenge in the bill's red */
.pg-flame { position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #8c1d12; opacity: 0; transform: rotate(45deg) scale(.6); transition: opacity .2s, transform .25s; }
.pg-num { font-family: 'Rye', serif; font-size: .62em; color: #d8402c; min-width: 2.7em; letter-spacing: .02em; }
.pg-name { flex: none; max-width: 78%; }
.pg-lead { flex: 1; min-width: 14px; align-self: flex-end; margin-bottom: .32em; border-bottom: 2px dotted rgba(28, 15, 7, .45); }
.pg-pg { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .7em; color: #4a3320; min-width: 1.4em; text-align: right; }
.pg-scene:hover, .pg-scene:focus-visible { background: rgba(216, 64, 44, .1); color: #8c1d12; outline: none; }
.pg-scene:hover .pg-flame, .pg-scene:focus-visible .pg-flame, .pg-scene.here .pg-flame { opacity: 1; transform: rotate(45deg); }
.pg-scene.here .pg-name { font-style: italic; }
.pg-scene:focus-visible { box-shadow: inset 0 0 0 1.5px #8c1d12; }
.pg-foot { text-align: center; margin-top: clamp(4px, 1vh, 10px); font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .18em; color: #6a5238; }
.pg-foot i { font-family: 'Oswald', sans-serif; font-style: normal; font-size: .85em; border: 1px solid currentColor; border-radius: 3px; padding: 0 .4em; letter-spacing: .05em; }
.pg-empty { text-align: center; font-style: italic; }
.pg-col { display: contents; }
.pg-sound { margin-top: .75em; padding-top: .65em; border-top: 1px solid rgba(140, 29, 18, .3); font-size: 13px; line-height: 1.35; color: #4a3320; text-align: center; }
.pg-sound-head { margin: 0 0 .4em; font-family: 'IM Fell English SC', serif; font-size: .78em; letter-spacing: .22em; text-transform: uppercase; color: #8c1d12; }
.pg-sound-choices { display: flex; align-items: baseline; justify-content: center; gap: 1em; flex-wrap: wrap; }
.pg-sound-choice { font: inherit; font-family: 'IM Fell English SC', serif; font-size: 1em; letter-spacing: .04em; color: #6a5238; background: none; border: 0; padding: .1em .05em; cursor: pointer; }
.pg-sound-choice::before { content: '◆ '; font-size: .85em; color: #8c1d12; opacity: 0; transition: opacity .2s; }
.pg-sound-choice[aria-pressed="true"] { color: #1c0f07; font-style: italic; }
.pg-sound-choice[aria-pressed="true"]::before { opacity: 1; }
.pg-sound-choice:hover { color: #8c1d12; }
.pg-sound-choice:focus-visible { outline: 2px solid #8c1d12; outline-offset: 3px; }
.pg-sound p { margin: .45em 0 0; text-align: center; }
.pg-sound-note { font-style: italic; }
.pg-pit-credit { font-style: italic; }
.pg-pit-credit[hidden] { display: none; }
.pg-again-link { display: inline-block; margin-top: .55em; font: inherit; font-family: 'IM Fell English SC', serif; font-size: .92em; letter-spacing: .06em; color: #6e1119; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(110, 17, 25, .4); text-underline-offset: .2em; }
.pg-again-link:hover, .pg-again-link:focus-visible { color: #8c1d12; text-decoration-color: currentColor; }
.pg-again-link:focus-visible { outline: 2px solid #8c1d12; outline-offset: 3px; }

/* ---- the painted plate (assets/programme/, wired in by ui.js applyPlate): the image is the card, the list is live type
   laid into its blank body box and fitted by script (fitPlate). Without .plate (image failed, narrow or portrait) the
   cream CSS card above stands. */
.prog.plate {
  display: block; width: min(1180px, 94vw, calc(92vh * var(--ar))); max-height: none; aspect-ratio: var(--ar);
  background: var(--plate) center / 100% 100% no-repeat; border-radius: 0;
}
.prog.plate::before, .prog.plate .pg-border { display: none; }
/* the plate prints the house name, the title and the key hint: they stay for screen readers only */
.prog.plate .pg-head, .prog.plate .pg-foot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
/* on the painted card the close mark stands just off its top-right corner, in cream on the dark house,
   clear of the printed ornament (on the plain card it stays printed in oxblood on the paper) */
.prog.plate .pg-close { top: 0; right: calc(-1 * min(48px, (100vw - 100%) / 2 - 2px)); width: 38px; height: 38px;
  color: #e9d6a6; text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.prog.plate .pg-close:hover { color: #fff3c0; }
.prog.plate .pg-close:focus-visible { outline-color: #fff3c0; }
.prog.plate .pg-scroll { position: absolute; left: var(--bl); top: var(--bt); width: var(--bw); height: var(--bh); padding: 0; overflow-x: hidden; overflow-y: hidden; font-size: 20px; }
.prog.plate .pg-body { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2em; align-items: start; }
.prog.plate .pg-col { display: block; min-width: 0; }
.prog.plate .pg-sound { font-size: .65em; }
.prog.plate .pg-col + .pg-col { border-left: 1px solid rgba(140, 29, 18, .32); padding-left: 1.2em; margin-left: -.6em; }
.prog.plate .pg-evening { margin: 0 0 .55em; }
.prog.plate .pg-evening header { gap: .1em .45em; padding-bottom: .12em; margin-bottom: .25em; }
.prog.plate .pg-evening header::after { bottom: -.22em; }
.prog.plate .pg-evening h3 { font-size: 1.38em; line-height: 1; white-space: nowrap; }
.prog.plate .pg-evening header p { font-size: .62em; line-height: 1; letter-spacing: .14em; margin-left: auto; white-space: nowrap; color: #3d2814; }
.prog.plate .pg-evening ol { margin: .4em 0 0; }
.prog.plate .pg-scene { font-size: 1em; padding: .04em .1em .04em 1em; gap: .4em; color: #1c0f07; }
.prog.plate .pg-flame { left: .12em; width: .34em; height: .34em; margin-top: -.17em; }
.prog.plate .pg-num { font-size: .62em; min-width: 2.1em; color: #b3321f; }
.prog.plate .pg-name { flex: 0 1 auto; min-width: 0; max-width: none; white-space: nowrap; }
.prog.plate .pg-lead { min-width: .3em; border-bottom-color: rgba(28, 15, 7, .5); }
.prog.plate .pg-pg { font-size: .68em; min-width: 1.2em; color: #3d2814; }
.prog.plate .pg-scene:hover, .prog.plate .pg-scene:focus-visible { background: rgba(179, 50, 31, .14); color: #7a1410; }
.prog.plate .pg-scene.here { color: #8c1d12; }
.prog.plate .pg-scene:focus-visible { box-shadow: inset 0 0 0 2px #8c1d12; }
@media (max-width: 640px) { .pg-body { columns: 1; } .pg-name { max-width: 72%; } }
/* short landscape screens (phones): the whole programme fits on one sheet, no hidden scroll */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #menu { padding: 6px 10px; }
  .pg-scroll { padding: 14px 26px 10px; }
  .pg-close { top: 12px; right: 12px; width: 26px; height: 26px; font-size: 16px; }
  .pg-head { margin-bottom: 4px; } .pg-house { font-size: 10px; } .pg-title { font-size: 26px; }
  .pg-sub { font-size: 12px; margin: 0 0 .2em; } .pg-rule { display: none; }
  .pg-body { columns: 2; column-gap: 26px; }
  .pg-evening { margin-bottom: 6px; } .pg-evening h3 { font-size: 19px; } .pg-evening header p { font-size: 9.5px; }
  .pg-evening ol { margin-top: 5px; }
  .pg-scene { font-size: 13.5px; padding: 1px 4px 1px 18px; }
  .pg-foot { display: none; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cap, .cap .w, .card-inst, #choice, .prog, .pg-back, #frame, .fr-cart { transition-duration: .01s !important; transition-delay: 0s !important; }
  .cap .w { opacity: 1; transform: none; }
  .film .grain, .film .flick, .film .scratch { animation: none !important; }
  .ticket { animation: none; opacity: 1; }
  .ticket:hover { transform: translateY(-4px); }
}

/* ============================================================================
   PLAYBILLS — circus / sideshow posters (penny plain, tuppence coloured)
   Sizes are in --u = 1% of the poster's width (times a fit factor --k), so a
   poster is one drawing that scales as a whole.
   ========================================================================== */
/* the house lights go down for a bill: the whole house dims (painted frame too, so no box edge ever crosses
   its ornament), a little deeper behind the sheet */
.c-playbill { padding: var(--fr-t) calc(var(--fr-s) + var(--gap, 0px)) var(--fr-b); }
/* The bill is a sheet let down from the flies, never a ghost: the house dims first, then the sheet drops in from
   a little above, opaque from its first frame (so the velvet never shows through it); on its way out it lifts
   and is gone quickly. The card itself does not fade; its backdrop and its sheet move separately. */
.card-inst.c-playbill, .card-inst.c-playbill.out { opacity: 1; transition: none; }
.c-playbill::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(8, 4, 2, .7), rgba(6, 3, 2, .55) 62%, rgba(4, 2, 1, .5) 100%); }
.c-playbill.in::before { opacity: 1; }
.c-playbill.out::before { opacity: 0; transition: opacity .5s ease .2s; }
.card-inst.c-playbill .pb { opacity: 0; transform: translateY(-6vh); transition: opacity .12s linear, transform .8s cubic-bezier(.2, .85, .3, 1.06); }
.c-playbill.in .pb.ready { opacity: 1; transform: none; transition-delay: .32s; }
.c-playbill.out .pb { opacity: 0; transform: translateY(-3vh); transition: opacity .3s ease-in, transform .35s ease-in; }
.c-playbill .pb-sheet, .c-playbill.in .pb-sheet { transform: rotate(-.35deg); transition: none; }
@media (prefers-reduced-motion: reduce) { .c-playbill .pb, .c-playbill.out .pb { transform: none; } }

.pb {
  --ar: 1.38; --ph: min(calc(100vh - var(--fr-t) - var(--fr-b) - 3vh), calc((100vw - 2 * var(--fr-s) - 2 * var(--gap, 0px) - 6vw) / var(--ar)));
  --u: calc(1cqw * var(--k, 1));
  --paper: #f0e3c4; --ink: #0c0806; --c1: #d8402c; --c2: #1f3b6e; --c3: #f2b52a;
  --rb: #d8402c; --rb2: #a02a1a; --rb3: #5e140c; --rbt: #fbf1d4;
  container: pb / size; position: relative; height: var(--ph); width: calc(var(--ph) * var(--ar));
  opacity: 0; transition: opacity .3s;
}
.pb.ready { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  .pb { --ph: min(96vh, calc(96vw * 2.05)); width: min(96vw, calc(var(--ph) * .667)); }
}

/* ---- the painted bills (v9, "Loge's Lantern Bill"): one plate at its own aspect (--ar, set inline), with the
   live lines laid into its measured slots; playbills.js fits their size. The type-set bills below are the fallback. */
.pb-plate .pb-sheet { background: #0b1820; border-radius: .25cqw; overflow: hidden;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, .75), 0 0 0 1px rgba(201, 148, 50, .4), 0 0 6cqw rgba(255, 140, 50, .12); }
.pl-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.pl-slot { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pl-slot > span { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1; }
/* v10: the name is inked in Rye, dark red, multiplied into the panel's paper (as in family.html). */
.pl-name > span { font-family: 'Rye', serif; color: #8c1d12; mix-blend-mode: multiply; text-shadow: .03em .02em 0 rgba(31, 59, 110, .55); }
/* v9: the name is lettered in the bill's vermilion, as though inked into the cartouche */
.pb-v9 .pl-name > span { mix-blend-mode: normal; font-family: 'IM Fell English SC', 'IM Fell English', serif; color: #a5281a; padding-top: .08em;
  text-shadow: 0 0 .02em rgba(90, 20, 8, .6), .03em .04em 0 rgba(176, 128, 40, .5); }
/* the curtain line, in gilt on the foot ribbon, between two still gilt lozenges (the cursor is the only living flame) */
.pb-v9 .pl-bar > span { color: #f2d38a; text-shadow: 0 0 .6em rgba(240, 170, 60, .35), 0 .06em .1em rgba(0, 0, 0, .6); }
.pb-v9 .pl-bar i { background: #e2bd6e; }
.pl-bar > span { gap: .8em; font-family: 'IM Fell English SC', 'IM Fell English', serif; color: #f4e6c4; letter-spacing: .2em; text-indent: .2em;
  text-shadow: 0 .05em .08em rgba(40, 6, 4, .6); }
.pl-bar i { display: block; width: .3em; height: .3em; background: #e9d2a0; transform: rotate(45deg); box-shadow: 0 .04em .08em rgba(0, 0, 0, .6); }
.pl-copy { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-aspect-ratio: 1/1) { .pb.pb-plate { --ph: min(90vh, calc(94vw / var(--ar))); width: calc(var(--ph) * var(--ar)); } }
.pb-sheet {
  position: absolute; inset: 0; background: var(--paper); border-radius: .5cqw .9cqw .4cqw .7cqw / .7cqw .4cqw .8cqw .5cqw;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, .7), 0 0 0 1px rgba(30, 14, 4, .5);
  transform: rotate(-.35deg) scale(.93) translateY(3%); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.c-playbill.in .pb-sheet { transform: rotate(-.35deg); }
.pb-paper { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pb-paper::before {   /* grain + stains + foxing */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255, 252, 240, .5), transparent 70%),
    var(--art-fox), var(--art-blotch), var(--art-grain);
  background-size: auto, 300px 300px, 520px 520px, 260px 260px;
  mix-blend-mode: multiply; opacity: .85;
}
.pb-paper::after {    /* edge burn + fold creases */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), rgba(70, 40, 12, .2) 50%, rgba(255, 250, 232, .38) calc(50% + 1.2px), transparent calc(50% + 3.5px)),
    linear-gradient(180deg, transparent calc(33.3% - 2px), rgba(70, 40, 12, .16) 33.3%, rgba(255, 250, 232, .3) calc(33.3% + 1.2px), transparent calc(33.3% + 3px)),
    linear-gradient(180deg, transparent calc(66.6% - 2px), rgba(70, 40, 12, .16) 66.6%, rgba(255, 250, 232, .3) calc(66.6% + 1.2px), transparent calc(66.6% + 3px));
  box-shadow: inset 0 0 5.5cqw rgba(120, 72, 22, .5), inset 0 0 1cqw rgba(70, 36, 10, .55);
}
.pb-print { position: absolute; inset: calc(var(--u) * 2.1); filter: url(#ui-rough2); }
.pb-edge { position: absolute; inset: 0; border: calc(var(--u) * .5) solid var(--ink); pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 calc(var(--u) * .42) var(--paper), inset 0 0 0 calc(var(--u) * .62) var(--c1), 0 0 0 calc(var(--u) * .14) var(--ink); }
.pb-edge .c { position: absolute; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); background: var(--c3); border: calc(var(--u) * .3) solid var(--ink); transform: rotate(45deg); }
.pb-edge .c.tl { top: calc(var(--u) * -1.6); left: calc(var(--u) * -1.6); } .pb-edge .c.tr { top: calc(var(--u) * -1.6); right: calc(var(--u) * -1.6); }
.pb-edge .c.bl { bottom: calc(var(--u) * -1.6); left: calc(var(--u) * -1.6); } .pb-edge .c.br { bottom: calc(var(--u) * -1.6); right: calc(var(--u) * -1.6); }
.pb-inner { position: absolute; inset: calc(var(--u) * 1.6) calc(var(--u) * 1.8) 0; display: grid; row-gap: calc(var(--u) * 1.1); color: var(--ink); min-height: 0; z-index: 2; }
.pb-inner > * { min-width: 0; }

/* landscape posters are budgeted by height: 1u = 1% of the poster's height */
@container pb (min-aspect-ratio: 1/1) { .pb-sheet { --u: calc(1cqh * var(--k, 1)); } }

/* ---- type */
.fit { display: block; width: 100%; min-width: 0; text-align: center; white-space: nowrap; line-height: 1.05; contain: inline-size; }
.fit .ft { display: inline-block; }
.pb { text-rendering: geometricPrecision; }
.t-rye { font-family: 'Rye', 'Ultra', serif; text-transform: uppercase; font-weight: 400; }
.t-ultra { font-family: 'Ultra', 'Rye', serif; text-transform: uppercase; font-weight: 400; }
.t-osw { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; }
.t-fell { font-family: 'IM Fell English', serif; font-style: italic; }
.extrude .ft { color: var(--ink); text-shadow:
  .018em .016em 0 var(--c1), .036em .032em 0 var(--c1), .054em .048em 0 var(--c1), .072em .064em 0 var(--c1), .09em .08em 0 var(--c1),
  -.03em -.02em 0 rgba(31, 59, 110, .78); }
.act .ft { text-shadow: .035em .025em 0 var(--c3), -.022em -.014em 0 rgba(31, 59, 110, .42); }
.act.a0 { font-family: 'Rye', serif; text-transform: uppercase; color: var(--c1); }
.act.a1 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); }
.act.a2 { font-family: 'Ultra', serif; text-transform: uppercase; color: var(--c2); }
.act.a3 { font-family: 'IM Fell English', serif; font-style: italic; color: var(--ink); line-height: 1.12; }
.st { display: inline-block; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); color: var(--c1); flex: none; }
.dm { display: block; width: calc(var(--u) * 5); height: calc(var(--u) * 1.4); color: var(--c1); flex: none; }
.rule { display: flex; align-items: center; gap: calc(var(--u) * 1.4); color: var(--c1); }
.rule i { flex: 1; height: calc(var(--u) * .5); border-top: calc(var(--u) * .35) solid currentColor; border-bottom: calc(var(--u) * .12) solid currentColor; }
.cast { margin: 0; text-align: center; font-family: 'IM Fell English', serif; font-style: italic; font-size: max(10px, calc(var(--u) * 2.15)); line-height: 1.32; text-wrap: balance; }
.cast span { white-space: normal; }
.cast .sep { display: inline-block; width: .42em; height: .42em; background: var(--c1); transform: rotate(45deg); margin: 0 .75em .12em; }
.pb-bar { grid-area: bar; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.8); background: var(--ink); color: #f6e7c4;
  height: max(19px, calc(var(--u) * 4.7)); padding-bottom: calc(var(--u) * .5); margin: 0 calc(var(--u) * -1.8); font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: max(9px, calc(var(--u) * 1.7)); letter-spacing: .26em; text-transform: uppercase; padding-left: .3em; white-space: nowrap; border-top: calc(var(--u) * .4) solid var(--c1); }
.pb-bar i { display: block; width: calc(var(--u) * .75); height: calc(var(--u) * .75); background: var(--c3); transform: rotate(45deg); }

/* acts may set in two lines where the column is narrow */
.w-acts .fit, .s-acts .fit { --lines: 2; }
@container pb (min-aspect-ratio: 1/1) { .act { --lines: 2; } }

/* ---- ribbons */
.rib { --rh: calc(var(--u) * 7.2); display: flex; height: var(--rh); filter: drop-shadow(0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .18)); }
.rib .rt { height: 100%; width: calc(var(--rh) * .72); flex: none; overflow: visible; }
.rib .rt.r { transform: scaleX(-1); }
.rib .rt .tail { fill: var(--rb2); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rib .rt .fold { fill: var(--rb3); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rib .rbody { position: relative; flex: 1; height: 82%; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 1.2); background: var(--rb);
  border-top: calc(var(--u) * .3) solid var(--ink); border-bottom: calc(var(--u) * .3) solid var(--ink); box-shadow: inset 0 calc(var(--u) * .5) 0 rgba(255, 255, 255, .22), inset 0 calc(var(--u) * -.5) 0 rgba(0, 0, 0, .18); }
.rib .rbody::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .2) 24%, transparent 26%) 0 0 / calc(var(--u) * .8) calc(var(--u) * .8); mix-blend-mode: multiply; }
.rib .rtxt { position: relative; z-index: 1; color: var(--rbt); font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; text-shadow: .06em .06em 0 var(--ink); }
.rib-sub .rtxt, .rib-g2 .rtxt, .rib-g3 .rtxt { font-family: 'IM Fell English SC', serif; font-weight: 400; letter-spacing: .12em; text-transform: none; }

/* ---- starburst */
.burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burst .b1 { fill: var(--c3); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.burst .b2 { fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.burst .b3 { fill: #fff3c4; stroke: none; opacity: .55; }

/* ---------------------------------------------------------------- OVERTURE */
.pb-overture .pb-inner {
  grid-template-columns: 100%; grid-template-rows: auto auto auto auto 1fr auto auto auto auto auto;
  grid-template-areas: "banner" "head" "title" "sub" "mid" "finale" "tag" "ded" "foot" "bar";
}
.o-banner { grid-area: banner; display: flex; justify-content: center; }
.arc { display: block; width: 100%; height: auto; max-height: calc(var(--u) * 20); overflow: visible; }
.arc.l { display: none; }
.arc .body { fill: var(--rb); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.arc .tail { fill: var(--rb2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.arc .fold { fill: var(--rb3); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.arc .hi { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 3; }
.arc text { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; fill: var(--rbt); stroke: var(--ink); stroke-width: .2; paint-order: stroke; }
.o-head { grid-area: head; display: grid; gap: calc(var(--u) * .4); }
.house .ft { color: var(--c1); text-shadow: .045em .04em 0 var(--ink), -.03em -.02em 0 rgba(31, 59, 110, .85); }
.presents { display: flex; align-items: center; gap: calc(var(--u) * 1.6); font-family: 'IM Fell English', serif; font-style: italic; font-size: calc(var(--u) * 3.2); line-height: 1; justify-content: center; color: var(--ink); }
.presents i { flex: 1; max-width: 30%; height: 0; border-top: calc(var(--u) * .3) solid var(--c1); border-bottom: calc(var(--u) * .1) solid var(--c1); }
.o-title { grid-area: title; display: grid; gap: calc(var(--u) * .3); justify-items: center; }
.o-title .fit { width: 100%; }
.tt1 .ft { color: var(--c2); }
.o-sub { grid-area: sub; display: flex; justify-content: center; }
.o-sub .rib { width: 78%; --rb: var(--c2); --rb2: #16294f; --rb3: #0a1530; }
.o-mid { grid-area: mid; display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.o-emb { order: 1; flex: 1 1 calc(var(--u) * 24); min-height: calc(var(--u) * 15); position: relative; }
.o-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-acts { display: grid; gap: calc(var(--u) * .5); align-content: center; }
.o-acts.l { order: 2; } .o-acts.r { order: 3; }
.o-finale { grid-area: finale; position: relative; height: max(24px, calc(var(--u) * 9)); display: grid; place-items: center; margin: calc(var(--u) * .3) 0; }
.o-finale .bt { position: relative; width: 66%; }
.o-finale .bt .ft { color: var(--ink); text-shadow: .03em .03em 0 rgba(255, 255, 255, .3); }
.o-tag { grid-area: tag; margin: 0; text-align: center; font-family: 'IM Fell English', serif; font-style: italic; font-size: max(10.5px, calc(var(--u) * 2.5)); line-height: 1.28; text-wrap: balance; padding: 0 calc(var(--u) * 2); }
.o-ded { grid-area: ded; text-align: center; border: calc(var(--u) * .35) double var(--c1); padding: calc(var(--u) * .9) calc(var(--u) * 1.6) calc(var(--u) * 1.1); background: rgba(255, 245, 215, .45); }
.o-ded .d1 { margin: 0 0 calc(var(--u) * .4); font-family: 'IM Fell English SC', serif; font-size: max(10px, calc(var(--u) * 2.1)); letter-spacing: .06em; line-height: 1.15; text-wrap: balance; }
.o-ded .dn { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); }
.o-ded .dn .fit { flex: 1 1 0; width: auto; max-width: 80%; --fmax: .07; }
.o-ded .dn .fit .ft { color: var(--c1); text-shadow: .04em .035em 0 var(--ink); }
.o-foot { grid-area: foot; margin: 0; text-align: center; font-family: 'IM Fell English SC', serif; font-size: max(9.5px, calc(var(--u) * 1.85)); letter-spacing: .08em; line-height: 1.25; text-wrap: balance; color: #3a2616; }

@container pb (min-aspect-ratio: 1/1) {
  .pb-overture .pb-inner { grid-template-columns: .62fr 1fr; column-gap: calc(var(--u) * 2); grid-template-areas: "banner banner" "head head" "title title" "sub sub" "mid mid" "finale finale" "tag ded" "foot foot" "bar bar"; grid-template-rows: auto auto auto auto 1fr auto auto auto auto; }
  .arc.p { display: none; } .arc.l { display: block; width: 72%; height: auto; max-height: none; }
  .o-title .tt1 { width: 62%; }
  .o-title .tt2 { --fmax: .105; } .o-head .house { --fmax: .058; } .o-title .tt1 { --fmax: .034; }
  .o-sub .rib { width: 40%; --rh: calc(var(--u) * 4.6); }
  .o-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21%) minmax(0, 1fr); gap: calc(var(--u) * 1.8); align-items: center; }
  .o-emb { order: 0; min-height: 0; height: 100%; }
  .o-acts.l, .o-acts.r { order: 0; }
  .o-finale { width: 52%; justify-self: center; height: max(22px, calc(var(--u) * 6.2)); margin: 0; }
  .o-tag { text-align: left; align-self: center; }
  .o-ded { align-self: center; }
}

/* ---------------------------------------------------------------- RHEINGOLD (river green & gold on cream) */
.pb-rheingold { --paper: #ebe7c6; --ink: #0d2a22; --c1: #1d6b54; --c2: #b9831f; --c3: #f2c648; --rb: #1d6b54; --rb2: #12483a; --rb3: #0a2c24; --rbt: #fbf3d2; }
.pb-rheingold .pb-inner { grid-template-columns: 100%; grid-template-rows: auto auto auto 1fr auto auto auto;
  grid-template-areas: "ribbon" "title" "sub" "emb" "acts" "cast" "bar"; }
.pb-rheingold .pb-edge { box-shadow: inset 0 0 0 calc(var(--u) * .42) var(--paper), inset 0 0 0 calc(var(--u) * .62) var(--c2), 0 0 0 calc(var(--u) * .14) var(--ink); }
.r-ribbon { grid-area: ribbon; display: flex; justify-content: center; } .r-ribbon .rib { width: 74%; }
.r-title { grid-area: title; display: grid; justify-items: center; gap: calc(var(--u) * .3); }
.r-title .tt1 .ft { color: var(--c2); }
.pb-rheingold .extrude .ft { text-shadow: .018em .016em 0 var(--c2), .036em .032em 0 var(--c2), .054em .048em 0 var(--c2), .072em .064em 0 var(--c2), .09em .08em 0 var(--c2), -.03em -.02em 0 rgba(216, 64, 44, .6); color: var(--c1); }
.pb-rheingold .extrude .ft { -webkit-text-stroke: .014em var(--ink); }
.r-sub { grid-area: sub; display: grid; grid-template-columns: 1fr 50% 1fr; align-items: center; gap: calc(var(--u) * 2); }
.r-sub .fit .ft { color: var(--ink); }
.r-emb { grid-area: emb; position: relative; min-height: calc(var(--u) * 20); }
.r-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .8) rgba(30, 20, 5, .35)); }
.r-acts { grid-area: acts; display: grid; gap: calc(var(--u) * .7); padding: 0 calc(var(--u) * 3); }
.pb-rheingold .act .ft { text-shadow: .035em .025em 0 rgba(242, 198, 72, .8); }
.pb-rheingold .act.a2 { color: #12483a; } .pb-rheingold .act.a0 { color: #b9831f; }
.r-cast { grid-area: cast; border-top: calc(var(--u) * .3) solid var(--c1); border-bottom: calc(var(--u) * .3) solid var(--c1); padding: calc(var(--u) * 1) calc(var(--u) * 1.5); background: rgba(185, 131, 31, .08); }
@container pb (min-aspect-ratio: 1/1) {
  .pb-rheingold .pb-inner { grid-template-columns: 38% 1fr; grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "ribbon ribbon" "emb title" "emb sub" "emb acts" "cast cast" "bar bar"; column-gap: calc(var(--u) * 2.4); }
  .r-ribbon .rib { width: 50%; } .r-acts { align-content: center; padding: 0 calc(var(--u) * 1); }
  .r-emb { min-height: 0; }
}

/* ---------------------------------------------------------------- WALKÜRE (storm prussian & vermilion) */
.pb-walkure { --paper: #e7e3d6; --ink: #0f1a33; --c1: #d8402c; --c2: #1f3b6e; --c3: #f2b52a; --rb: #d8402c; --rb2: #9a2616; --rb3: #5a120a; }
.pb-walkure .pb-inner { grid-template-columns: 40% 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "band band" "emb acts" "cast cast" "bar bar"; column-gap: calc(var(--u) * 1.6); }
.w-band { grid-area: band; position: relative; display: grid; gap: calc(var(--u) * .5); padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 2.6); justify-items: center; isolation: isolate; margin: 0 calc(var(--u) * -1.8); }
.w-storm { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12) 24%, transparent 26%) 0 0 / calc(var(--u) * 1) calc(var(--u) * 1),
    linear-gradient(100deg, transparent 0 8%, rgba(242, 181, 42, .0) 8%),
    linear-gradient(180deg, #14254f, #1f3b6e 55%, #2b4f8f);
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); border-top: 3px solid var(--ink); }
.w-storm::before, .w-storm::after { content: ''; position: absolute; top: 0; bottom: 0; width: 15%; background: var(--c3);
  clip-path: polygon(46% 0, 74% 0, 56% 38%, 82% 38%, 30% 100%, 44% 52%, 20% 52%); filter: drop-shadow(2px 2px 0 var(--ink)); }
.w-storm::before { left: 2%; } .w-storm::after { right: 2%; transform: scaleX(-1); }
.w-rib { width: 62%; transform: rotate(-2.4deg); } .w-rib .rib { width: 100%; --rh: calc(var(--u) * 6.4); }
.pb-walkure .w-band .fit { color: #f6ead0; }
.pb-walkure .tt1 .ft { color: var(--c3); text-shadow: .05em .05em 0 var(--ink); }
.pb-walkure .extrude .ft { color: #fbf1d4; text-shadow: .02em .02em 0 var(--c1), .04em .04em 0 var(--c1), .06em .06em 0 var(--c1), .08em .08em 0 var(--c1), .1em .1em 0 var(--ink), .12em .12em 0 var(--ink); }
.tsub .ft { color: #f6ead0; text-shadow: .04em .04em 0 var(--ink); }
.w-emb { grid-area: emb; position: relative; min-height: calc(var(--u) * 20); }
.w-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(calc(var(--u) * .5) calc(var(--u) * .6) 0 rgba(15, 26, 51, .3)); }
.w-acts { grid-area: acts; display: grid; gap: calc(var(--u) * .9); align-content: center; }
.arow { display: grid; grid-template-columns: calc(var(--u) * 4.4) 1fr; align-items: center; gap: calc(var(--u) * 1); }
.arow .n { display: grid; place-items: center; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); background: var(--c1); color: #fbf1d4; font-family: 'Rye', serif; font-weight: 400; font-size: calc(var(--u) * 2.6); border: calc(var(--u) * .3) solid var(--ink); transform: rotate(45deg) scale(.8); box-shadow: calc(var(--u) * .3) calc(var(--u) * .3) 0 var(--c3); }
.arow .n { text-indent: 0; }
.arow .fit { text-align: left; }
.arow .fit .ft { transform-origin: 0 50%; }
.pb-walkure .act.a2 { color: var(--c2); }
.w-cast { grid-area: cast; border-top: calc(var(--u) * .4) solid var(--ink); padding: calc(var(--u) * 1) calc(var(--u) * 2) 0; }
.w-cast .cast .sep { background: var(--c3); border: 1px solid var(--ink); }
@container pb (min-aspect-ratio: 1/1) { .pb-walkure .tt2 { --fmax: .12; } .pb-walkure .pb-inner { grid-template-columns: 42% 1fr; } .w-band { padding-top: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 1.8); } .w-rib .rib { --rh: calc(var(--u) * 5.6); } .w-acts { padding-right: calc(var(--u) * 1.2); } }

/* ---------------------------------------------------------------- SIEGFRIED (forest green & chrome yellow) */
.pb-siegfried { --paper: #efe7c2; --ink: #11200f; --c1: #2c5a2e; --c2: #b3260f; --c3: #f2b52a; --rb: #2c5a2e; --rb2: #1b3a1d; --rb3: #0e2010; --rbt: #fbefb8; }
.pb-siegfried .pb-inner { grid-template-columns: 100%; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "ribbon" "title" "main" "cast" "bar"; }
.pb-siegfried .pb-edge { box-shadow: inset 0 0 0 calc(var(--u) * .42) var(--paper), inset 0 0 0 calc(var(--u) * .62) var(--c1), 0 0 0 calc(var(--u) * .14) var(--ink); }
.s-ribbon { grid-area: ribbon; display: flex; justify-content: center; } .s-ribbon .rib { width: 62%; }
.s-title { grid-area: title; display: grid; gap: calc(var(--u) * .6); justify-items: center; }
.s-title .tt1 .ft { color: var(--c2); }
.s-slab { position: relative; width: 100%; padding: calc(var(--u) * 1.2) calc(var(--u) * 1) calc(var(--u) * 1.5); background: var(--c3); border-top: calc(var(--u) * .5) solid var(--ink); border-bottom: calc(var(--u) * .5) solid var(--ink); box-shadow: inset 0 0 0 calc(var(--u) * .25) var(--c3), inset 0 0 0 calc(var(--u) * .45) var(--ink); overflow: hidden; }
.s-slab::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(160, 90, 0, .28) 24%, transparent 26%) 0 0 / calc(var(--u) * .9) calc(var(--u) * .9); mix-blend-mode: multiply; }
.s-slab .fit { position: relative; z-index: 1; }
.s-slab .fit .ft { color: var(--c1); text-shadow: .03em .03em 0 #fbefb8, .05em .05em 0 var(--ink), -.03em -.02em 0 rgba(179, 38, 15, .75); }
.s-main { grid-area: main; display: flex; gap: calc(var(--u) * 1.2); align-items: stretch; }
.s-acts { display: grid; gap: calc(var(--u) * .8); align-content: center; flex: 1 1 0; min-width: 0; }
.s-acts.r { display: none; }
.s-sword { position: relative; flex: 0 0 31%; min-height: calc(var(--u) * 22); order: 2; }
.s-sword svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(calc(var(--u) * .5) calc(var(--u) * .6) 0 rgba(17, 32, 15, .28)); }
.pb-siegfried .act .ft { text-shadow: .035em .025em 0 rgba(242, 181, 42, .85); }
.pb-siegfried .act.a0 { color: var(--c2); } .pb-siegfried .act.a2 { color: var(--c1); }
.s-cast { grid-area: cast; border: calc(var(--u) * .3) solid var(--c1); outline: calc(var(--u) * .12) solid var(--c1); outline-offset: calc(var(--u) * .3); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); margin: calc(var(--u) * .4); background: rgba(242, 181, 42, .14); }
@container pb (min-aspect-ratio: 1/1) {
  .s-ribbon .rib { width: 40%; --rh: calc(var(--u) * 5.2); }
  .s-main { display: grid; grid-template-columns: minmax(0, 1fr) 21% minmax(0, 1fr); gap: calc(var(--u) * 2); }
  .s-acts.r { display: grid; } .s-sword { flex: none; order: 0; min-height: 0; }
}

/* ---------------------------------------------------------------- GÖTTERDÄMMERUNG (black & fire red, ember gold) */
.pb-dark { --paper: #130a08; --ink: #f3e2c0; --c1: #e0381f; --c2: #f0b84a; --c3: #f0b84a; --rb: #c8281a; --rb2: #7d140c; --rb3: #3e0804; --rbt: #fbe9b8; }
.pb-dark .pb-sheet { box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, .8), 0 0 0 1px rgba(240, 184, 74, .35), 0 0 4cqw rgba(224, 56, 31, .18); }
.pb-dark .pb-paper::before { background: radial-gradient(ellipse 70% 40% at 50% 28%, rgba(224, 56, 31, .22), transparent 70%), var(--art-film); background-size: auto, 300px 300px; mix-blend-mode: screen; opacity: .5; }
.pb-dark .pb-paper::after { box-shadow: inset 0 0 6cqw rgba(0, 0, 0, .9), inset 0 0 1.2cqw rgba(0, 0, 0, .8);
  background: linear-gradient(90deg, transparent calc(50% - 2px), rgba(0, 0, 0, .45) 50%, rgba(240, 184, 74, .1) calc(50% + 1.2px), transparent calc(50% + 3.5px)),
    linear-gradient(180deg, transparent calc(33.3% - 2px), rgba(0, 0, 0, .35) 33.3%, rgba(240, 184, 74, .08) calc(33.3% + 1.2px), transparent calc(33.3% + 3px)),
    linear-gradient(180deg, transparent calc(66.6% - 2px), rgba(0, 0, 0, .35) 66.6%, rgba(240, 184, 74, .08) calc(66.6% + 1.2px), transparent calc(66.6% + 3px)); }
.pb-dark .pb-edge { border-color: var(--c2); box-shadow: inset 0 0 0 calc(var(--u) * .42) var(--paper), inset 0 0 0 calc(var(--u) * .62) var(--c1), 0 0 0 calc(var(--u) * .14) #000; }
.pb-dark .pb-edge .c { background: var(--c1); border-color: var(--c2); }
.pb-dark .pb-bar { background: var(--c1); color: #fbe9b8; border-top-color: var(--c2); }
.pb-dark .rib .rbody, .pb-dark .rib .rt .tail, .pb-dark .rib .rt .fold, .pb-dark .arc .body { stroke: #000; border-color: #000; }
.pb-dark .rib .rt .tail, .pb-dark .rib .rt .fold { stroke: #000; }
.pb-dark .rib .rtxt { text-shadow: .06em .06em 0 #000; }
.pb-gotterdammerung .pb-inner { grid-template-columns: 100%; grid-template-rows: auto 1fr auto auto auto auto auto auto;
  grid-template-areas: "ribbon" "emb" "title" "sub" "acts" "finale" "cast" "bar"; }
.g-ribbon { grid-area: ribbon; display: flex; justify-content: center; } .g-ribbon .rib { width: 46%; --rh: calc(var(--u) * 6); }
.g-emb { grid-area: emb; position: relative; min-height: calc(var(--u) * 24); }
.g-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 calc(var(--u) * 2.6) rgba(224, 56, 31, .5)); }
.g-title { grid-area: title; display: grid; gap: calc(var(--u) * .2); justify-items: center; }
.pb-dark .extrude .ft { color: var(--c2); text-shadow: .02em .02em 0 var(--c1), .04em .04em 0 var(--c1), .06em .06em 0 var(--c1), .08em .08em 0 #6e1410, .1em .1em 0 #6e1410, .12em .12em 0 #000, 0 0 .3em rgba(224, 56, 31, .5); }
.g-sub { grid-area: sub; display: flex; justify-content: center; } .g-sub .rib { width: 56%; --rh: calc(var(--u) * 5.6); }
.g-acts { grid-area: acts; display: grid; gap: calc(var(--u) * .5); padding: 0 calc(var(--u) * 5); }
.pb-dark .act .ft { text-shadow: .035em .025em 0 rgba(0, 0, 0, .9); }
.pb-dark .act.a0 { color: var(--c1); } .pb-dark .act.a1 { color: var(--c2); } .pb-dark .act.a2 { color: #fbe9b8; } .pb-dark .act.a3 { color: #f3e2c0; }
.g-finale { grid-area: finale; display: flex; justify-content: center; transform: rotate(-1.6deg); margin-top: calc(var(--u) * .6); }
.g-finale .rib { width: 94%; --rh: calc(var(--u) * 6); --rb: #e0381f; }
.rib-g3 .rtxt { --lines: 1; }
@container pb (min-aspect-ratio: 1/1) { .g-finale .rib { --rh: calc(var(--u) * 9.4); width: 96%; } .rib-g3 .rtxt { --lines: 2; line-height: 1.12; } }
.pb-dark .rib-g3 .rtxt { font-family: 'Rye', serif; text-transform: uppercase; letter-spacing: .04em; color: #fff0c4; }
.g-cast { grid-area: cast; border-top: calc(var(--u) * .3) solid var(--c1); padding: calc(var(--u) * 1) calc(var(--u) * 1.5) 0; }
.pb-dark .cast { color: #e9d5ad; } .pb-dark .cast .sep { background: var(--c1); }
@container pb (min-aspect-ratio: 1/1) {
  .pb-gotterdammerung .pb-inner { grid-template-columns: 44% 1fr; grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "emb ribbon" "emb title" "emb sub" "emb acts" "cast cast" "bar bar"; column-gap: calc(var(--u) * 2.2); }
  .g-finale { grid-area: emb; align-self: end; z-index: 2; margin: 0 0 calc(var(--u) * 1.5); transform: rotate(-2.2deg); }
  .g-emb svg { height: calc(100% - var(--u) * 6.5); }
  .g-ribbon .rib { width: 70%; } .g-sub .rib { width: 70%; } .g-acts { padding: 0 calc(var(--u) * 2); align-content: center; } .g-finale .rib { width: 100%; }
  .g-emb { min-height: 0; }
}

/* ---------------------------------------------------------------- tall posters (phones in portrait) */
@container pb (max-aspect-ratio: 9/10) {
  .pb-walkure .pb-inner { grid-template-columns: 100%; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "band" "emb" "acts" "cast" "bar"; }
  .w-acts { padding: 0 calc(var(--u) * 1); gap: calc(var(--u) * 1.4); }
  .w-band { padding-top: calc(var(--u) * 3.4); padding-bottom: calc(var(--u) * 3.6); }
  .pb-siegfried .s-main { flex-direction: column; }
  .pb-siegfried .s-sword { order: 1; flex: 1 1 0; min-height: calc(var(--u) * 24); }
  .pb-siegfried .s-acts { order: 2; flex: none; align-content: start; gap: calc(var(--u) * 1.2); }
  .pb-siegfried .s-acts.r { display: grid; order: 3; }
  .s-acts .fit, .w-acts .fit { --lines: 2; --fmax: .066; }
}
@media (min-aspect-ratio: 16/10) { .pb { --ar: 1.4; } }
@media (min-aspect-ratio: 19/10) { .pb { --ar: 1.6; } }

@media (prefers-reduced-motion: reduce) { .pb-sheet { transition: none; transform: rotate(-.35deg); } }

/* ================================================================== the last curtain (epilogue; finale2) */
/* After the final ticket the house lights go down over ~4 s: the proscenium, its roundels, the pit's rim, the
   "again" curl and the controls fall to ~15% (the controls come back under the pointer); the plaque, dimmed less,
   fades its lettering out and back in to read "Ende". Loge's last line stands centred on the velvet, larger,
   with no smudge behind it. The epilogue takes the class off as it leaves: the house relights. */
#app.ende .fr-arch { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .7)) brightness(.15); transition: filter 4s ease; }
#app.ende .fr-pit { filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, .55)) brightness(.3); transition: filter 4s ease; }
#app.ende .fr-roundel, #app.ende #again { filter: brightness(.15); transition: filter 4s ease, opacity .5s ease; }
#app.ende #controls { filter: brightness(.15); transition: filter 4s ease, opacity .6s ease; }
#app.ende #controls:hover, #app.ende #controls:focus-within { filter: none; transition: filter .3s ease; }
#app.ende .fr-cart { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)) brightness(.55); transition: filter 4s ease, opacity .6s ease; }
#app.ende .fr-cart .plaque { transition: opacity .7s ease; }
#app.ende.ende-swap .fr-cart .plaque { opacity: 0; }
#app.ende #caption { z-index: 38; top: 0; bottom: 0; justify-content: center; }
#app.ende .cap { font-size: calc(var(--cap-size) * 1.55); }
#app.ende .cap::before { display: none; }
/* ...and the velvet keeps only a last pool of light at its middle, where the line stands (fades in as it closes) */
#app.ende .cu-glow { background: radial-gradient(ellipse 72% 80% at 50% 46%, rgba(8, 3, 2, 0) 30%, rgba(8, 3, 2, .55) 100%); }