/* Groundrow — the prompt book. Typed script pages on the right, the stage manager's cues pencilled in the
   margin on the left, and at the top of the book the season's set model lit in its black box. Every cue is
   keyed to a word: its standby line is drawn across into the script as you read towards that word, and it
   goes as the word crosses the reading line, changing the light on the page, flying a batten, or waiting for
   you to press Play. */

@font-face {
  font-family: "League Gothic";
  src: url("/assets/fonts/specimen/league-gothic-var.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url("/assets/fonts/specimen/special-elite-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* a cue's state (0 marked, 1 standby, 2 go, 3 done) and how far its standby line is drawn; a wash's rise and fall */
@property --gr-s { syntax: "<number>"; inherits: true; initial-value: 3; }
@property --gr-d { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --gr-up { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --gr-dn { syntax: "<number>"; inherits: false; initial-value: 1; }

body.spec-groundrow { margin: 0; background: #111012; }

.gr-site {
  --gr-ground: #111012;
  --gr-paper: #F1ECE4;
  --gr-gel: #E8262F;
  --gr-spot: #FFE2B0;
  --gr-pencil: #8C8680;
  --gr-pen: #8C8680;
  --gr-gel-deep: #AA1A1F;
  --gr-wing: #1A191B;
  --gr-rule: rgba(241, 236, 228, .16);
  --gr-rule-p: rgba(17, 16, 18, .14);
  --gr-soft: rgba(241, 236, 228, .74);
  --gr-gothic: "League Gothic", "Arial Narrow", "Roboto Condensed", sans-serif;
  --gr-elite: "Special Elite", "Courier New", monospace;
  --gr-lh: 28px;
  --gr-m: 216px;
  --gr-pad: 32px;
  --gr-gut: 24px;
  --gr-body: clamp(16px, .25vw + 15px, 18px);
  --gr-d3: clamp(48px, 5.6vw + 12px, 112px);
  --gr-spill: #FFE2B0;
  --gr-spring: linear(0, .075, .24, .422, .625, .786, .929, 1.03, 1.087, 1.117, 1.122, 1.111, 1.089, 1.067, 1.042, 1.023, 1.007, .995, .989, .985, .985, .987, .989, .992, .995, .997, .999, 1.001, 1.001, 1.002, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 1);
  --gr-count: 400ms;
  position: relative;
  color: var(--gr-paper);
  background: var(--gr-ground);
  font-family: var(--gr-elite);
  font-size: var(--gr-body);
  line-height: var(--gr-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gr-site *, .gr-site *::before, .gr-site *::after { box-sizing: border-box; }
.gr-site :where(p, h1, h2, h3, ul, ol, figure, fieldset) { margin: 0; padding: 0; }
.gr-site :where(ul, ol) { list-style: none; }
.gr-site img { display: block; max-width: 100%; height: auto; }
.gr-site a { color: inherit; }
.gr-site :focus-visible { outline: 2px solid var(--gr-spot); outline-offset: 3px; }
.gr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gr-red { color: var(--gr-gel-deep); }
.gr-cc { text-decoration: none; color: var(--gr-gel-deep); border: 1.5px solid currentColor; padding: 0 4px; font-size: .86em; letter-spacing: .06em; }

/* ── the nav: sticky under the slim bar ─────────────────────────────────────────────────────────── */
.gr-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  height: 48px; display: flex; align-items: center; gap: 28px;
  padding: 0 max(var(--gr-pad), calc((100% - 1440px) / 2 + var(--gr-pad)));
  background: rgba(17, 16, 18, .96); border-bottom: 1px solid var(--gr-rule);
}
.gr-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.gr-mark { width: 28px; height: 28px; display: block; flex: none; }
.gr-brand-name { font: 400 24px/1 var(--gr-gothic); font-stretch: 90%; letter-spacing: .04em; text-transform: uppercase; color: var(--gr-paper); padding-top: 2px; }
.gr-links { display: flex; gap: 26px; margin-left: auto; }
.gr-links a, .gr-contents summary, .gr-contents a {
  font: 400 15px/1 var(--gr-elite); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: rgba(241, 236, 228, .82);
}
.gr-links a { padding: 8px 0; background: no-repeat 0 100% / 0 2px linear-gradient(var(--gr-gel), var(--gr-gel)); transition: background-size .2s, color .2s; }
.gr-links a:hover, .gr-links a:focus-visible { color: var(--gr-paper); background-size: 100% 2px; }
.gr-contents { display: none; position: relative; margin-left: auto; }
.gr-contents summary { list-style: none; cursor: pointer; padding: 10px 2px; display: flex; align-items: center; gap: 8px; }
.gr-contents summary::-webkit-details-marker { display: none; }
.gr-contents summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; translate: 0 -3px; rotate: 45deg; transition: rotate .2s; }
.gr-contents[open] summary::after { rotate: 225deg; translate: 0 2px; }
.gr-contents ul {
  position: absolute; right: -8px; top: calc(100% + 8px); width: 250px; padding: 12px 20px 14px;
  background: var(--gr-paper); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.gr-contents li { border-bottom: 1px solid var(--gr-rule-p); }
.gr-contents li:last-child { border-bottom: 0; }
.gr-contents a { display: block; padding: 12px 0; color: var(--gr-ground); }
.gr-bookkey {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 2px 16px 0;
  font: 400 24px/1 var(--gr-gothic); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--gr-paper); border: 1.5px solid var(--gr-gel); border-radius: 0;
  transition: background-color .15s, color .15s;
}
.gr-bookkey:hover, .gr-bookkey:focus-visible { background: var(--gr-gel); color: var(--gr-ground); }

/* ── the house: the only fixed layer, and it holds light washes only ──────────────────────────────── */
.gr-house { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.gr-wash { position: absolute; inset: 0; opacity: calc(var(--gr-up) * var(--gr-dn)); }
.gr-wash--work { background: rgba(221, 227, 232, .075); }
.gr-wash--spot { background: radial-gradient(42vmax 28vmax at 64% 40%, rgba(255, 226, 176, .13), transparent 72%); }
.gr-wash--gel { background: radial-gradient(120% 70% at 50% 112%, rgba(232, 38, 47, .15), transparent 70%); }
.gr-wash--black { background: rgba(0, 0, 0, .88); }
.gr-wash--warm { background: radial-gradient(60vmax 42vmax at 55% 55%, rgba(255, 190, 120, .085), transparent 72%); }
.gr-wash--harvest { background: radial-gradient(48vmax 30vmax at 72% 46%, rgba(255, 180, 90, .12), transparent 72%); }
.gr-wash--tubes { background: linear-gradient(rgba(230, 240, 214, .08), rgba(230, 240, 214, .03)); }
.gr-wash--garden { background: radial-gradient(48vmax 30vmax at 70% 46%, rgba(201, 194, 122, .12), transparent 72%); }
.gr-wash--dawn { background: linear-gradient(170deg, rgba(143, 163, 181, .13), rgba(143, 163, 181, 0) 70%); }

/* ── the book: a margin of cues, a gutter, and the script ─────────────────────────────────────────── */
.gr-book { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 var(--gr-pad); }
.gr-book::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--gr-pad); width: var(--gr-m);
  background: var(--gr-wing); border-right: 1px solid var(--gr-rule);
}
.gr-scene { position: relative; z-index: 1; display: grid; grid-template-columns: [margin] var(--gr-m) [gap] var(--gr-gut) [script] minmax(0, 1fr); }
.gr-margin { grid-column: margin; grid-row: 1; position: relative; z-index: 3; min-width: 0; }
.gr-script { grid-column: script; grid-row: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
.gr-script > * { grid-column: 1 / -1; }
.gr-scenehead { font: 400 15px/28px var(--gr-elite); letter-spacing: .08em; text-transform: uppercase; color: #a19c95; }
.gr-lede { max-width: 58ch; margin: 0 0 56px; color: var(--gr-soft); }

/* ── a cue: pencilled in the margin, level with its word ──────────────────────────────────────────── */
.gr-cue {
  position: relative; display: grid; grid-template-columns: 8px auto 1fr; column-gap: 9px; align-items: center;
  padding: 0 14px 0 16px; margin: 0 0 28px;
  font: 400 14px/28px var(--gr-elite); letter-spacing: .06em; text-transform: uppercase; color: var(--gr-pencil);
}
.gr-cue-lamp { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--gr-pencil); }
.gr-cue-no b { font-weight: 400; }
.gr-cue-no b + b { margin-left: .2em; color: rgba(241, 236, 228, .86); }
.gr-cue-st { justify-self: end; font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--gr-pencil); }
.gr-cue-st::before { content: "\2713"; }
.gr-cue-what { grid-column: 2 / -1; font-size: 13px; line-height: 18px; letter-spacing: .02em; text-transform: none; color: #8a857f; margin-top: -4px; }
.gr-cue-line { position: absolute; left: 100%; top: 10px; height: 8px; width: 0; overflow: visible; pointer-events: none; display: none; }
.gr-cue-line path { fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gr-cue-line .gr-l-mark { stroke: var(--gr-pencil); stroke-dasharray: 3 5; }

/* with script: each cue sits level with its word, and everything it shows follows --gr-s and --gr-d */
.gr-js .gr-cue { position: absolute; left: 0; right: 0; top: 0; margin: 0; translate: 0 var(--gr-y, 0px); transition: --gr-d calc(var(--gr-count) * 3) cubic-bezier(.3, .1, .3, 1); }
.gr-js .gr-cue-line { display: block; width: calc(var(--gr-gut) + var(--gr-x, 0px) - 10px); }
.gr-js .gr-cue-lamp {
  --lit: clamp(0, 1 - (var(--gr-s) - 1) * (var(--gr-s) - 1), 1);
  background: rgba(232, 38, 47, var(--lit));
  box-shadow: inset 0 0 0 1.25px var(--gr-pencil), 0 0 calc(var(--lit) * 10px) calc(var(--lit) * 1px) rgba(232, 38, 47, calc(var(--lit) * .75));
}
.gr-js .gr-l-mark { opacity: calc(.5 * clamp(0, 2 - var(--gr-s), 1)); }
.gr-js .gr-cue-line--draw { clip-path: inset(-4px calc((1 - var(--gr-d)) * 100%) -4px -4px); opacity: clamp(0, var(--gr-s), 1); }
.gr-js .gr-l-draw { stroke: color-mix(in srgb, var(--gr-pencil) calc(clamp(0, var(--gr-s) - 2, 1) * 100%), var(--gr-gel)); }
.gr-js .gr-cue-st::before { content: ""; }
.gr-js .gr-cue[data-gr-state="standby"] .gr-cue-st::before { content: "stby"; color: #F0555C; }
.gr-js .gr-cue[data-gr-state="go"] .gr-cue-st::before { content: "GO"; color: var(--gr-paper); letter-spacing: .08em; }
.gr-js .gr-cue[data-gr-state="done"] .gr-cue-st::before { content: "\2713"; }
.gr-js .gr-cue:not([data-gr-state]) { --gr-s: 0; --gr-d: 0; }
.gr-cue[data-gr-state="marked"] { --gr-s: 0; --gr-d: 0; }
.gr-cue[data-gr-state="standby"] { --gr-s: 1; --gr-d: 1; }
.gr-cue[data-gr-state="go"] { --gr-s: 2; --gr-d: 1; }
.gr-cue[data-gr-state="done"] { --gr-s: 3; --gr-d: 1; }
/* a sound cue that is running: GO, and its lamp warm while the sound plays */
.gr-js .gr-margin .gr-cue.is-live { animation: none; --gr-s: 2; --gr-d: 1; }
.gr-js .gr-margin .gr-cue.is-live .gr-cue-st::before { content: "GO"; color: var(--gr-paper); animation: none; }
.gr-js .gr-margin .gr-cue.is-live .gr-cue-lamp { background: var(--gr-spot); box-shadow: 0 0 0 3px rgba(255, 226, 176, .2), 0 0 12px 2px rgba(255, 226, 176, .7); }

/* the go-word: a bracket before it, a ring round it at GO */
.gr-go { position: relative; white-space: nowrap; text-decoration: underline 1.5px var(--gr-pencil); text-underline-offset: .18em; }
.gr-js .gr-go { text-decoration: none; transition: --gr-d calc(var(--gr-count) * 3); }
.gr-js .gr-go:not([data-gr-state]) { --gr-s: 0; }
.gr-go[data-gr-state="marked"] { --gr-s: 0; }
.gr-go[data-gr-state="standby"] { --gr-s: 1; }
.gr-go[data-gr-state="go"] { --gr-s: 2; }
.gr-go[data-gr-state="done"] { --gr-s: 3; }
.gr-brk, .gr-ring { position: absolute; pointer-events: none; overflow: visible; display: none; }
.gr-js .gr-brk, .gr-js .gr-ring { display: block; }
.gr-brk { right: calc(100% + .08em); top: .1em; height: .9em; width: .24em; color: color-mix(in srgb, var(--gr-gel) calc(clamp(0, var(--gr-s), 1) * clamp(0, 3 - var(--gr-s), 1) * 100%), var(--gr-pen)); }
.gr-ring { left: -.3em; top: -.2em; width: calc(100% + .6em); height: calc(100% + .38em); }
.gr-h1 .gr-ring, .gr-fly .gr-ring, .gr-pt .gr-ring { left: -.12em; top: -.02em; width: calc(100% + .24em); height: calc(100% + .06em); }
.gr-h1 .gr-brk, .gr-fly .gr-brk, .gr-pt .gr-brk { right: calc(100% + .05em); width: .16em; }
.gr-brk path, .gr-ring path { fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gr-brk path { stroke: currentColor; }
.gr-brk .gr-b-top { opacity: calc(.6 + .4 * clamp(0, var(--gr-s), 1)); }
.gr-brk .gr-b-foot { opacity: clamp(0, var(--gr-s) - 1, 1); }
.gr-ring path {
  opacity: clamp(0, var(--gr-s) - 1, 1);
  stroke: color-mix(in srgb, var(--gr-pen) calc(clamp(0, var(--gr-s) - 2, 1) * 100%), var(--gr-gel));
}
.gr-pt .gr-ring { display: none; }

/* scroll-driven: each cue and its word run on the word's own view timeline. Standby as the word reaches 90%
   of the window, the line drawn across as it rises, GO as it crosses the reading line at 38%, done at 30% */
@keyframes gr-cue {
  0%, 7.6% { --gr-s: 0; --gr-d: 0; }
  7.7% { --gr-s: 1; --gr-d: 0; }
  87.6% { --gr-s: 1; --gr-d: 1; }
  87.7%, 99.8% { --gr-s: 2; --gr-d: 1; }
  99.9%, 100% { --gr-s: 3; --gr-d: 1; }
}
@keyframes gr-cue-st {
  0%, 7.6% { content: ""; }
  7.7%, 87.6% { content: "stby"; color: #F0555C; }
  87.7%, 99.8% { content: "GO"; color: #F1ECE4; }
  99.9%, 100% { content: "\2713"; color: #8C8680; }
}
@keyframes gr-sq {
  0%, 7.6% { --gr-s: 0; --gr-d: 0; }
  7.7% { --gr-s: 1; --gr-d: 0; }
  100% { --gr-s: 1; --gr-d: 1; }
}
@keyframes gr-sq-st { 0%, 7.6% { content: ""; } 7.7%, 100% { content: "stby"; color: #F0555C; } }
.gr-sd .gr-go[data-gr-sd] { view-timeline-name: var(--gr-tl); }
.gr-sd :is(.gr-cue, .gr-go)[data-gr-sd], .gr-sd .gr-cue[data-gr-sd] .gr-cue-st::before {
  animation: gr-cue linear both; animation-timeline: var(--gr-tl);
  animation-range: entry calc(50% + 5vh) entry calc(50% + 70vh);
}
.gr-sd .gr-cue[data-gr-sd] .gr-cue-st::before { animation-name: gr-cue-st; }
.gr-sd :is(.gr-cue, .gr-go)[data-gr-sd="sq"] { animation-name: gr-sq; animation-range: entry calc(50% + 5vh) entry calc(50% + 62vh); }
.gr-sd .gr-cue[data-gr-sd="sq"] .gr-cue-st::before { animation-name: gr-sq-st; animation-range: entry calc(50% + 5vh) entry calc(50% + 62vh); }
.gr-sd :is(.gr-cue, .gr-go)[data-gr-sd][data-gr-end], .gr-sd .gr-cue[data-gr-end] .gr-cue-st::before { animation-range: entry calc(50% + 5vh) entry calc(50% + 32vh); }
/* the washes: up as their word goes, down as their part of the page leaves the reading line */
@keyframes gr-up { from { --gr-up: 0; } to { --gr-up: 1; } }
@keyframes gr-dn { from { --gr-dn: 1; } to { --gr-dn: 0; } }
.gr-sd .gr-house > .gr-wash {
  animation: gr-up linear both, gr-dn linear both; animation-timeline: var(--gr-tl), var(--gr-rt);
  animation-range: entry calc(50% + 62vh) entry calc(50% + 76vh), entry calc(100% + 48vh) entry calc(100% + 62vh);
}
.gr-sd .gr-house > .gr-wash[data-gr-until] { animation-range: entry calc(50% + 62vh) entry calc(50% + 76vh), entry calc(50% + 62vh) entry calc(50% + 76vh); }
.gr-sd .gr-house > .gr-wash[data-gr-end] { animation-range: entry calc(50% + 28vh) entry calc(50% + 33vh), entry calc(100% + 48vh) entry calc(100% + 62vh); }
.gr-io .gr-wash { transition: opacity calc(var(--gr-count) * 3) linear; }
.gr-io .gr-wash.is-on { --gr-up: 1; }

/* ── paper: typed pages, opaque, punched for the binder ───────────────────────────────────────────── */
.gr-page {
  position: relative; z-index: 1; background: var(--gr-paper); color: var(--gr-ground);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
  padding: 28px 28px 28px 44px;
  --gr-pen: #6f6a64;
  --gr-hole: radial-gradient(circle at 6px 6px, var(--gr-ground) 5.4px, rgba(17, 16, 18, 0) 6.2px);
  background-image: var(--gr-hole), var(--gr-hole), var(--gr-hole);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: 14px 50px, 14px 50%, 14px calc(100% - 50px);
}
.gr-page ::selection { background: rgba(232, 38, 47, .22); }
.gr-page .gr-go { text-decoration-color: rgba(17, 16, 18, .45); }

/* ── the first scene: the model box beside the title page ─────────────────────────────────────────── */
.gr-top { padding: 28px 0 84px; }
.gr-top-grid { align-items: start; }
.gr-stage { grid-column: 1 / span 8; position: relative; z-index: 3; }
.gr-titlepage { grid-column: 9 / span 4; position: relative; z-index: 1; }
.gr-titlepage .gr-scenehead { margin: 0 0 28px; color: rgba(241, 236, 228, .7); }

.gr-box {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--gr-ground);
  outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  --gr-spill-a: .16;
}
.gr-box:focus-visible { outline: 1.5px solid var(--gr-spot); outline-offset: 6px; }
.gr-box.is-dragging { cursor: grabbing; }
.gr-box::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 88%; height: 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 20%, var(--gr-spill), transparent 100%);
  opacity: var(--gr-spill-a); filter: blur(6px); transition: opacity 1.2s, background .8s;
}
.gr-poster, .gr-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.gr-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.gr-poster { transition: opacity calc(var(--gr-count) * 2) linear, filter calc(var(--gr-count) * 2) linear; }
.gr-poster.is-half { opacity: .35; }
.gr-poster.is-gone { opacity: 0; transition-duration: var(--gr-count); }
.gr-gl { display: block; opacity: 0; transition: opacity var(--gr-count) linear; }
.gr-gl.is-up { opacity: 1; }
.gr-cap {
  position: absolute; left: 16px; top: 12px; z-index: 2; margin: 0; pointer-events: none;
  font: 400 13px/22px var(--gr-elite); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 226, 176, .82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.gr-cap-st:empty { display: none; }
.gr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.gr-desk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; margin-top: 18px; }
.gr-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; container: gr-tabs / inline-size; }
.gr-tab {
  position: relative; flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 3px 12px 0; text-decoration: none; white-space: nowrap;
  font: 400 24px/1 var(--gr-gothic); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(241, 236, 228, .86); background: var(--gr-wing); border-top: 3px solid var(--gr-tint, var(--gr-spot));
  transition: background-color .15s, color .15s;
}
.gr-tab-n { font-family: var(--gr-elite); font-size: 13px; letter-spacing: 0; color: var(--gr-pencil); translate: 0 -1px; }
.gr-tab:hover { background: #242225; color: var(--gr-paper); }
.gr-tab[aria-pressed="true"], .gr-tab.is-on { background: var(--gr-paper); color: var(--gr-ground); }
.gr-tab[aria-pressed="true"] .gr-tab-n, .gr-tab.is-on .gr-tab-n { color: var(--gr-gel-deep); }
/* the four titles need about 570px in one row; below that they sit two by two, so no number ever runs into a title */
@container gr-tabs (max-width: 579px) { .gr-tab { flex: 1 1 calc(50% - 3px); } }
.gr-gowrap { display: flex; align-items: center; gap: 10px; }
.gr-gowrap[hidden] { display: none; }
.gr-gokey {
  position: relative; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 4px 0 0; cursor: pointer;
  font: 400 28px/1 var(--gr-gothic); letter-spacing: .06em; text-transform: uppercase; color: var(--gr-ground);
  background: radial-gradient(circle at 50% 38%, #F2434B, var(--gr-gel) 58%, #C51E26);
  box-shadow: 0 0 0 1px rgba(255, 226, 176, .3), 0 0 0 5px var(--gr-ground), 0 0 0 6px rgba(232, 38, 47, .55), 0 0 26px 2px rgba(232, 38, 47, .42);
  transition: box-shadow .12s steps(1, end), filter .12s;
}
.gr-gokey:hover { filter: brightness(1.08); }
.gr-gokey:active { translate: 0 1px; }
.gr-gokey.is-firing { box-shadow: 0 0 0 1px rgba(255, 226, 176, .3), 0 0 0 5px var(--gr-ground), 0 0 0 6px rgba(140, 134, 128, .5); filter: saturate(.7) brightness(.8); }
.gr-stby { font: 400 14px/1 var(--gr-elite); color: var(--gr-pencil); letter-spacing: .04em; }
.gr-gokey.is-firing + .gr-stby { color: var(--gr-paper); }
.gr-help { grid-column: 1 / -1; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--gr-pencil); max-width: 62ch; }

/* the title page */
.gr-page--title { padding-bottom: 32px; }
.gr-runhead { font: 400 15px/28px var(--gr-elite); letter-spacing: .08em; text-transform: uppercase; }
.gr-h1 {
  margin: 12px 0 18px; font: 400 clamp(46px, 3.2vw + 28px, 100px)/.9 var(--gr-gothic); font-stretch: 82%;
  letter-spacing: .004em; color: var(--gr-ground); text-wrap: balance;
}
.gr-h1 .gr-go { text-decoration-thickness: 2px; }
.gr-sub { font-size: var(--gr-body); line-height: 28px; margin: 0 0 22px; }
.gr-order { border-top: 1px solid var(--gr-rule-p); padding-top: 10px; }
.gr-ro { position: relative; display: grid; grid-template-columns: 1.4em minmax(0, 1fr); column-gap: 6px; padding: 5px 0 6px; }
.gr-ro + .gr-ro { border-top: 1px dotted rgba(17, 16, 18, .22); }
.gr-ro-n { grid-row: span 2; font-size: 15px; line-height: 26px; color: #6f6a64; }
.gr-ro-t { font-size: 15px; line-height: 26px; letter-spacing: .07em; text-transform: uppercase; justify-self: start; }
.gr-ro-t .gr-go { display: inline-block; }
.gr-ro-d { font-size: 14px; line-height: 20px; color: #3c3936; }
.gr-ro[aria-current="true"] .gr-ro-t .gr-go {
  background: no-repeat 0 100% / 100% 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C18 2.6 33 4.1 50 3.2S83 2.4 99 3.6' fill='none' stroke='%23E8262F' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ── headlines hang from a fly batten, and drop in from under it ─────────────────────────────────── */
.gr-flywrap { position: relative; padding-top: 24px; margin: 6px 0 44px; }
.gr-batten {
  position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: var(--gr-paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.gr-batten::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 5px;
  background: repeating-linear-gradient(90deg, transparent 0 80px, rgba(241, 236, 228, .6) 80px 84px);
}
.gr-batten::after {
  content: ""; position: absolute; left: 12%; top: -10px; width: 1px; height: 10px; background: rgba(241, 236, 228, .35);
  box-shadow: calc(76vw * .55) 0 0 rgba(241, 236, 228, .35);
}
.gr-fly {
  font: 400 var(--gr-d3)/.88 var(--gr-gothic); font-stretch: 100%;
  letter-spacing: .004em; color: var(--gr-paper); text-wrap: balance; max-width: 16ch;
  clip-path: inset(-.08em -100vw -1em -100vw);
}
.gr-fly-in { display: block; }
.gr-fly .gr-go { text-decoration-thickness: 3px; }
@keyframes gr-fly { from { translate: 0 -1.5lh; font-stretch: 75%; animation-timing-function: var(--gr-spring); } to { translate: 0 0; font-stretch: 100%; } }
.gr-sd .gr-flywrap { view-timeline-name: --gr-fw; }
.gr-sd .gr-fly.is-set .gr-fly-in { white-space: nowrap; animation: gr-fly both; animation-timeline: --gr-fw; animation-range: entry 15% cover 40%; }
.gr-io .gr-fly.is-set .gr-fly-in { white-space: nowrap; translate: 0 -1.5lh; font-stretch: 75%; transition: translate 1.6s var(--gr-spring), font-stretch 1.6s var(--gr-spring); }
.gr-io .gr-flywrap.is-in .gr-fly.is-set .gr-fly-in { translate: 0 0; font-stretch: 100%; }

/* a batten that tracks across the page on its cue, lanterns and all */
.gr-cross { position: relative; height: 96px; overflow: clip; pointer-events: none; }
.gr-pipe {
  position: absolute; left: 0; top: 22px; width: 62%; height: 3px; background: #cfc9bf;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6); translate: 30% 0;
  display: flex; justify-content: space-around;
}
.gr-pipe::before { content: ""; position: absolute; inset: -22px 12% auto; height: 22px; border-inline: 1px solid rgba(241, 236, 228, .3); }
.gr-pipe i { position: relative; top: 3px; width: 11px; height: 15px; background: #2b292c; border-radius: 1px 1px 3px 3px; box-shadow: inset 0 -2px 0 rgba(255, 226, 176, .55); }
.gr-pipe i::after {
  content: ""; position: absolute; left: 50%; top: 15px; width: 64px; height: 56px; translate: -50% 0;
  background: linear-gradient(rgba(255, 226, 176, .16), rgba(255, 226, 176, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
@keyframes gr-cross { from { translate: -104% 0; } to { translate: 164% 0; } }
.gr-sd .gr-cross[data-gr-sd] .gr-pipe { animation: gr-cross linear both; animation-timeline: var(--gr-tl); animation-range: entry calc(50% + 62vh) entry calc(50% + 150vh); }
.gr-io .gr-cross .gr-pipe { translate: -104% 0; }
.gr-io .gr-cross.is-go .gr-pipe { translate: 164% 0; transition: translate calc(var(--gr-count) * 14) linear; }

/* ── the season: a playbill title over each model, and the script's title page beside it ──────────── */
.gr-season { padding: 56px 0 84px; }
.gr-play { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-bottom: 140px; }
.gr-pt {
  grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; margin: 0 0 -.3em;
  font: 400 clamp(56px, 10.2vw + 8px, 184px)/.82 var(--gr-gothic); font-stretch: 100%; letter-spacing: .005em;
  text-transform: uppercase; color: var(--gr-paper); text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.gr-pt .gr-go { white-space: normal; }
.gr-play--mirror .gr-pt { text-align: right; }
.gr-plate { grid-column: 1 / span 7; grid-row: 2; background: #0b0a0c; }
.gr-plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gr-plate figcaption, .gr-roomphoto figcaption { margin-top: 10px; font-size: 13px; line-height: 20px; letter-spacing: .02em; color: #a19c95; }
.gr-page--play { grid-column: 8 / span 5; grid-row: 2; margin-top: 84px; }
.gr-play--mirror .gr-plate { grid-column: 6 / span 7; }
.gr-play--mirror .gr-page--play { grid-column: 1 / span 5; }
.gr-by { font-size: 15px; line-height: 22px; letter-spacing: .02em; margin-bottom: 14px; }
.gr-about { margin-bottom: 14px; }
.gr-dir, .gr-dirn { color: var(--gr-gel-deep); }
.gr-dir { margin-bottom: 14px; padding-left: 4ch; }
.gr-persons-h { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.gr-persons { margin: 0 0 14px; }
.gr-persons li { display: flex; align-items: baseline; gap: 6px; font-size: 15px; line-height: 26px; }
.gr-persons li span:first-child { flex: 0 1 auto; max-width: 78%; }
.gr-persons li::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(17, 16, 18, .35); translate: 0 -5px; min-width: 16px; }
.gr-persons li span:last-child { order: 2; flex: none; }
.gr-run, .gr-dates, .gr-price { font-size: 15px; line-height: 26px; }
.gr-acts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.gr-act { font: 400 24px/1 var(--gr-gothic); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 9px 16px 7px; border: 1.5px solid var(--gr-ground); }
.gr-act:hover, .gr-act:focus-visible { background: var(--gr-ground); color: var(--gr-paper); }
.gr-act--model { border-color: transparent; padding-inline: 0; text-decoration: underline 1.5px; text-underline-offset: .15em; }
.gr-act--model:hover, .gr-act--model:focus-visible { background: none; color: var(--gr-gel-deep); }
.gr-change { margin: -56px 0 84px; }
.gr-dirline { max-width: 46ch; margin: 0 auto 8px; text-align: center; color: var(--gr-soft); }

/* ── the running order: one typed sheet, with the light showing past it ───────────────────────────── */
.gr-making { padding: 56px 0 112px; }
.gr-page--sheet { grid-column: 2 / span 8; grid-row: 3; }
.gr-cross--behind { grid-column: 1 / -1; grid-row: 3; align-self: center; z-index: 0; }
.gr-sheethead { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--gr-rule-p); font-size: 13px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: #5d5852; }
.gr-para { margin-bottom: 28px; max-width: 62ch; }
.gr-para:last-child { margin-bottom: 0; }
.gr-dirn { display: block; padding-left: 4ch; margin-bottom: 2px; }
.gr-para .gr-go { text-decoration-color: rgba(17, 16, 18, .45); }

/* ── the company ──────────────────────────────────────────────────────────────────────────────────── */
.gr-company { padding: 56px 0 112px; }
.gr-roomphoto { grid-column: 1 / span 5; grid-row: 3 / span 2; }
.gr-roomphoto img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.gr-page--call {
  grid-column: 6 / span 7; grid-row: 3; align-self: start; margin-top: 28px; padding-top: 36px;
  background-image: var(--gr-hole), var(--gr-hole), var(--gr-hole), repeating-linear-gradient(transparent 0 27px, rgba(17, 16, 18, .09) 27px 28px);
  background-size: 12px 12px, 12px 12px, 12px 12px, auto; background-position: 14px 50px, 14px 50%, 14px calc(100% - 50px), 0 11px; background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.gr-clip { position: absolute; top: -30px; left: 64px; width: 28px; height: 76px; overflow: visible; }
.gr-clip path { fill: none; stroke: #9a948b; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35)); }
.gr-callhead { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.gr-calls { margin-bottom: 20px; }
.gr-calls li { font-size: 15px; display: grid; grid-template-columns: 4.4em minmax(0, 1fr); }
.gr-t { color: var(--gr-gel-deep); }
.gr-callsub { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; border-top: 1px solid var(--gr-rule-p); padding-top: 12px; }
.gr-people li { font-size: 15px; line-height: 28px; }
.gr-people b { font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.gr-aside { color: var(--gr-gel-deep); }
.gr-guests { margin-top: 14px; font-size: 15px; }
.gr-company-note { grid-column: 6 / span 7; grid-row: 4; margin-top: 42px; color: var(--gr-paper); max-width: 58ch; }

/* ── the room: the stage from the back row, the full width of the house ──────────────────────────── */
.gr-building { padding: 56px 0 112px; }
.gr-building .gr-margin { grid-row: 1 / span 3; }
.gr-stagephoto { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; margin: 14px calc(50% - 50vw) 0; }
.gr-stagephoto img { width: 100%; height: min(86vh, 56.25vw); object-fit: cover; object-position: 50% 62%; }
.gr-stagephoto::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(rgba(17, 16, 18, 0), rgba(17, 16, 18, .88)); }
.gr-building-text { grid-row: 3; position: relative; z-index: 3; }
.gr-flywrap--over { font-size: var(--gr-d3); margin-top: calc(-1.95em - 34px); }
.gr-flywrap--over .gr-fly { max-width: 22ch; }
.gr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gr-body { font-size: var(--gr-body); line-height: 28px; }
.gr-three .gr-dirn { color: var(--gr-pencil); }

/* ── front of house: the plan, the section, and what you hear ─────────────────────────────────────── */
.gr-tickets { padding: 56px 0 112px; }
.gr-seatwrap { grid-column: 1 / span 7; grid-row: 3; }
.gr-seatside { grid-column: 8 / span 5; grid-row: 3; position: sticky; top: calc(var(--bar-h, 40px) + 72px); align-self: start; }
.gr-planframe { background: var(--gr-wing); border: 1px solid var(--gr-rule); padding: 20px 16px 12px; }
.gr-plan-svg, .gr-cut-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--gr-elite); }
#gr-hatch path { stroke: rgba(241, 236, 228, .13); stroke-width: 1; }
.gr-p-room path { fill: none; stroke: rgba(241, 236, 228, .42); stroke-width: 1.5; }
.gr-p-room .gr-p-door { stroke-dasharray: 6 5; stroke-width: 1; }
.gr-p-wing { fill: rgba(241, 236, 228, .025); }
.gr-p-stage { fill: url(#gr-hatch); stroke: rgba(241, 236, 228, .3); }
.gr-p-grid { fill: none; stroke: rgba(241, 236, 228, .12); stroke-dasharray: 3 5; }
.gr-p-set { fill: none; stroke: rgba(255, 226, 176, .6); stroke-width: 1.5; stroke-dasharray: 10 6; }
.gr-p-cs { stroke: var(--gr-spot); stroke-width: 1.5; }
.gr-p-bank { fill: none; stroke: rgba(241, 236, 228, .14); }
.gr-p-wc { fill: none; stroke: rgba(241, 236, 228, .62); stroke-width: 1.5; }
.gr-p-rows text { font: 400 17px var(--gr-gothic); fill: #8f8a84; text-anchor: middle; }
.gr-seat { fill: rgba(241, 236, 228, .5); cursor: pointer; transition: fill .15s; }
.gr-seat:hover { fill: var(--gr-paper); }
.gr-seat[aria-checked="true"] { fill: var(--gr-spot); }
.gr-seat:focus { outline: none; }
.gr-seat:focus-visible { stroke: var(--gr-paper); stroke-width: 2.5; }
.gr-p-hid { fill: rgba(232, 38, 47, .16); }
.gr-p-sl { fill: none; stroke: var(--gr-gel); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gr-p-ring { fill: none; stroke: var(--gr-spot); stroke-width: 2; }
.gr-p-static .gr-p-sl { stroke: var(--gr-pencil); }
.gr-p-static .gr-p-hid { fill: rgba(241, 236, 228, .06); }
.gr-p-static .gr-p-ring { stroke: var(--gr-pencil); }
.gr-p-labels text, .gr-c-labels text { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: #8f8a84; }
.gr-p-labels text:first-child { text-anchor: middle; }
.gr-p-marks, .gr-p-static, .gr-p-labels, .gr-p-rows, .gr-c-marks { pointer-events: none; }
.gr-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--gr-pencil); }
.gr-lg { display: inline-flex; align-items: center; gap: 8px; }
.gr-lg::before { content: ""; width: 10px; height: 10px; flex: none; }
.gr-lg--seat::before { border-radius: 50%; background: rgba(241, 236, 228, .5); }
.gr-lg--wc::before { border: 1.5px solid rgba(241, 236, 228, .62); }
.gr-lg--sl::before { width: 18px; height: 2px; background: var(--gr-gel); }
.gr-lg--hid::before { width: 18px; background: rgba(232, 38, 47, .3); }
.gr-site:not(.gr-js) .gr-lg--sl::before { background: var(--gr-pencil); }
.gr-site:not(.gr-js) .gr-lg--hid::before { background: rgba(241, 236, 228, .12); }
.gr-cutframe { margin-top: 28px; }
.gr-cutframe figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--gr-pencil); }
.gr-c-stage { fill: url(#gr-hatch); stroke: rgba(241, 236, 228, .3); }
.gr-c-bank { fill: rgba(241, 236, 228, .05); stroke: rgba(241, 236, 228, .32); }
.gr-c-wall { stroke: rgba(241, 236, 228, .42); stroke-width: 1.5; }
.gr-c-heads circle { fill: none; stroke: rgba(241, 236, 228, .3); }
.gr-c-actor path { fill: none; stroke: var(--gr-spot); stroke-width: 1.5; stroke-linecap: round; }
.gr-c-actor circle { fill: var(--gr-spot); }
.gr-c-sl { fill: none; stroke: var(--gr-gel); stroke-width: 1.6; stroke-linecap: round; }
.gr-c-hid { fill: none; stroke: var(--gr-gel); stroke-width: 7; stroke-opacity: .55; }
.gr-c-eye { fill: var(--gr-spot); }
.gr-c-head { fill: none; stroke: var(--gr-paper); stroke-width: 1.5; }
.gr-seatctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.gr-playkey, .gr-stopkey {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 3px 22px 0 16px; cursor: pointer;
  font: 400 26px/1 var(--gr-gothic); letter-spacing: .05em; text-transform: uppercase;
  color: var(--gr-paper); background: transparent; border: 1.5px solid rgba(241, 236, 228, .5); border-radius: 0;
  transition: background-color .15s, color .15s, border-color .15s;
}
.gr-playkey svg, .gr-stopkey svg { translate: 0 -2px; }
.gr-playkey path, .gr-stopkey path { fill: var(--gr-spot); }
.gr-playkey { border-color: var(--gr-spot); }
.gr-playkey:hover, .gr-stopkey:hover { background: #242225; }
.gr-playkey[aria-pressed="true"] { background: var(--gr-spot); color: var(--gr-ground); }
.gr-playkey[aria-pressed="true"] path { fill: var(--gr-ground); }
.gr-playkey:disabled, .gr-stopkey:disabled { opacity: .45; cursor: default; }
.gr-noplay { flex-basis: 100%; font-size: 14px; line-height: 22px; color: var(--gr-pencil); }
.gr-seatnote { color: var(--gr-paper); max-width: 46ch; }
.gr-seatnotes { margin-top: 20px; display: grid; gap: 14px; max-width: 46ch; }
.gr-seatnotes li { font-size: 15px; line-height: 24px; color: var(--gr-soft); }
.gr-worked { margin-top: 10px; font-size: 14px; color: var(--gr-pencil); }
.gr-page--card { grid-column: 1 / -1; grid-row: 4; margin-top: 84px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: 12px 40px; padding: 30px 36px 30px 52px; }
.gr-cardhead { grid-column: 1 / -1; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.gr-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; line-height: 32px; border-bottom: 1px dotted rgba(17, 16, 18, .25); }
.gr-prices li > span:last-child { white-space: nowrap; }
.gr-cardtext { font-size: 15px; line-height: 26px; }
.gr-access { color: #3c3936; }
.gr-js .gr-seatctl, .gr-js .gr-worked { display: flex; }
.gr-seatctl, .gr-worked { display: none; }

/* ── the call board ───────────────────────────────────────────────────────────────────────────────── */
.gr-callboard { padding: 56px 0 112px; }
.gr-notices { display: grid; grid-template-columns: 4fr 3fr 5fr 3fr; gap: 24px; align-items: start; }
.gr-notice { position: relative; background: var(--gr-paper); color: var(--gr-ground); padding: 34px 22px 22px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.gr-notice::before { content: ""; position: absolute; left: 50%; top: 11px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0555C, var(--gr-gel) 60%, #9c1219); box-shadow: 1px 3px 3px rgba(0, 0, 0, .45); }
.gr-notice:nth-child(2) { margin-top: 28px; }
.gr-notice:nth-child(3) { margin-top: 56px; }
.gr-notice:nth-child(4) { margin-top: 14px; }
.gr-notice h3 { font: 400 32px/1 var(--gr-gothic); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.gr-notice p { font-size: 15px; line-height: 26px; }
.gr-notice-foot { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(17, 16, 18, .25); font-size: 13px; letter-spacing: .04em; color: var(--gr-gel-deep); }
.gr-walk { margin-top: 42px; font-size: 15px; color: #a19c95; }

/* ── the box office slip ──────────────────────────────────────────────────────────────────────────── */
.gr-boxoffice { padding: 56px 0 112px; }
.gr-book-lede { grid-column: 3 / span 7; }
.gr-slip { grid-column: 3 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; border: 0; padding-top: 40px;
  -webkit-mask: radial-gradient(circle 5px at 8px 0, transparent 4.5px, #000 5px) 0 0 / 16px 100% repeat-x; mask: radial-gradient(circle 5px at 8px 0, transparent 4.5px, #000 5px) 0 0 / 16px 100% repeat-x; }
.gr-slip-head { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #5d5852; border-bottom: 1px solid var(--gr-rule-p); padding-bottom: 8px; }
.gr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; }
.gr-field--wide { grid-column: 1 / -1; }
.gr-field label, .gr-field legend { font-size: 15px; line-height: 22px; letter-spacing: .06em; text-transform: uppercase; }
.gr-slip :is(input:not([type="checkbox"]), select, textarea) {
  font: inherit; font-size: 17px; color: var(--gr-ground); background: transparent; border: 0; border-bottom: 1.5px solid rgba(17, 16, 18, .55);
  border-radius: 0; min-height: 44px; padding: 6px 0; width: 100%;
}
.gr-slip :is(input, select, textarea):focus-visible { outline: none; border-bottom-color: var(--gr-gel); box-shadow: 0 1.5px 0 var(--gr-gel); }
.gr-needs { display: flex; flex-flow: row wrap; gap: 8px 24px; padding: 0; }
.gr-needs legend { width: 100%; margin-bottom: 6px; }
.gr-needs label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 16px; min-height: 44px; }
.gr-needs input { width: 18px; height: 18px; accent-color: var(--gr-gel-deep); }
.gr-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.gr-holdkey { font: 400 26px/1 var(--gr-gothic); letter-spacing: .05em; text-transform: uppercase; padding: 12px 22px 9px; border: 0; background: var(--gr-ground); color: var(--gr-paper); cursor: pointer; }
.gr-holdkey:hover, .gr-holdkey:focus-visible { background: #2a2729; }
.gr-status { font-size: 15px; color: var(--gr-gel-deep); }

/* ── the ghost light ──────────────────────────────────────────────────────────────────────────────── */
.gr-ghost { padding: 0; }
.gr-ghost .gr-script { min-height: calc(100svh - var(--bar-h, 40px) - 48px); display: flex; flex-direction: column; }
.gr-ghost-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 0 72px; }
.gr-ghostlight { height: min(300px, 34svh); aspect-ratio: 160 / 420; }
.gr-bulb { display: block; width: 100%; height: 100%; overflow: visible; }
.gr-bulb-glow { animation: gr-breathe 5s ease-in-out infinite alternate; transform-origin: 80px 64px; }
@keyframes gr-breathe { from { opacity: .82; } to { opacity: 1; } }
.gr-bulb-glass { fill: var(--gr-spot); }
.gr-bulb-cage { fill: none; stroke: #6c6862; stroke-width: 1.4; }
.gr-bulb-cap { fill: #5b5752; }
.gr-bulb-pole, .gr-bulb-feet { stroke: #5b5752; stroke-width: 3; fill: none; stroke-linecap: round; }
.gr-bulb-lead { fill: none; stroke: #3a3734; stroke-width: 2; }
.gr-ghost-h { margin-top: 28px; font: 400 var(--gr-d3)/.88 var(--gr-gothic); color: var(--gr-paper); text-wrap: balance; }
.gr-ghost-t { margin: 28px auto 0; max-width: 46ch; color: rgba(241, 236, 228, .86); }
.gr-back { padding: 28px 0 40px; border-top: 1px solid var(--gr-rule); display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 28px; align-items: start; font-size: 14px; line-height: 24px; color: var(--gr-pencil); }
.gr-back-h { letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.gr-back-dates span { display: inline-block; min-width: 13.5em; color: var(--gr-soft); }
.gr-back-links { display: grid; gap: 4px; }
.gr-back-links a { text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: rgba(241, 236, 228, .8); }
.gr-back-links a:hover { color: var(--gr-paper); }
.gr-back-name { justify-self: end; display: flex; align-items: center; gap: 14px; text-align: left; }
.gr-mark--foot { width: 48px; height: 48px; }

/* ── widths ───────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .gr-site { --gr-lh: 30px; }
  .gr-body, .gr-sub, .gr-para, .gr-seatnote { line-height: 30px; }
}
@media (max-width: 1199px) {
  .gr-site { --gr-m: 136px; --gr-pad: 24px; }
  .gr-cue-what { display: none; }
  .gr-stage { grid-column: 1 / span 7; }
  .gr-titlepage { grid-column: 8 / span 5; }
  .gr-box { aspect-ratio: auto; height: min(62vh, 75cqw); }
  .gr-stage { container-type: inline-size; }
  .gr-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .gr-h1 { font-size: clamp(46px, 5.8vw, 64px); }
  .gr-seatwrap { grid-column: 1 / span 7; }
  .gr-seatside { grid-column: 8 / span 5; }
  .gr-page--card { grid-template-columns: 1fr 1fr; }
  .gr-page--card .gr-access { grid-column: 2; }
  .gr-plate { grid-column: 1 / span 6; }
  .gr-page--play { grid-column: 7 / span 6; margin-top: 56px; }
  .gr-play--mirror .gr-plate { grid-column: 7 / span 6; }
  .gr-play--mirror .gr-page--play { grid-column: 1 / span 6; }
  .gr-notices { grid-template-columns: 1fr 1fr; }
  .gr-notice:nth-child(n) { margin-top: 0; }
  .gr-notice:nth-child(even) { margin-top: 28px; }
}
@media (max-width: 1023px) {
  .gr-site { --gr-m: 96px; }
  .gr-cue { padding: 0 8px 0 12px; column-gap: 6px; white-space: nowrap; }
  .gr-cue-st { font-size: 12px; }
  .gr-stage, .gr-titlepage { grid-column: 1 / -1; }
  .gr-box { height: auto; aspect-ratio: 4 / 3; }
  .gr-titlepage { margin-top: 56px; }
  .gr-titlepage .gr-page { max-width: 560px; }
  .gr-tabs { display: flex; }
  .gr-play, .gr-play--mirror { display: block; }
  .gr-page--play { max-width: 560px; margin: -84px 0 0 auto; }
  .gr-play--mirror .gr-page--play { margin: -84px auto 0 0; }
  .gr-page--sheet, .gr-slip, .gr-book-lede { grid-column: 1 / -1; }
  .gr-roomphoto { grid-column: 1 / span 5; }
  .gr-page--call, .gr-company-note { grid-column: 6 / span 7; }
  .gr-seatwrap, .gr-seatside { grid-column: 1 / -1; grid-row: auto; position: static; }
  .gr-seatside { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .gr-seatnote, .gr-seatnotes { max-width: 62ch; }
  .gr-page--card { grid-row: auto; }
  .gr-back-dates span { display: block; min-width: 0; }
}
@media (max-width: 859px) {
  .gr-links { display: none; }
  .gr-contents { display: block; }
  .gr-play--mirror .gr-pt { text-align: left; }
  .gr-page--play, .gr-play--mirror .gr-page--play { margin: -28px 12px 0; max-width: none; }
  .gr-three { grid-template-columns: 1fr; }
  .gr-roomphoto, .gr-page--call, .gr-company-note { grid-column: 1 / -1; grid-row: auto; }
  .gr-roomphoto img { aspect-ratio: 4 / 5; max-height: 78vh; }
  .gr-page--call { margin-top: 28px; margin-inline: 12px 0; }
  .gr-page--card { grid-template-columns: 1fr; }
  .gr-page--card .gr-access { grid-column: auto; }
  .gr-back { grid-template-columns: 1fr 1fr; }
  .gr-back-name { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 699px) {
  .gr-site { --gr-m: 44px; --gr-pad: 16px; --gr-gut: 12px; }
  .gr-nav { gap: 14px; }
  .gr-script { column-gap: 12px; }
  .gr-cue { display: block; padding: 0 0 0 13px; margin: 0 0 56px; text-align: left; line-height: 14px; }
  .gr-cue-lamp { position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; }
  .gr-cue-no b { display: block; font-size: 12px; line-height: 14px; letter-spacing: .02em; }
  .gr-cue-no b + b { margin: 0; }
  .gr-cue-st, .gr-cue-what { display: none; }
  .gr-js .gr-cue-line { left: 100%; top: 10px; width: calc(var(--gr-gut) + 10px); }
  .gr-top { padding-top: 0; }
  .gr-stage { margin-left: calc(-1 * (var(--gr-pad) + var(--gr-m) + var(--gr-gut))); margin-right: calc(-1 * var(--gr-pad)); }
  .gr-box { aspect-ratio: 4 / 3; height: auto; }
  .gr-desk { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: 48px; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 0; background: linear-gradient(rgba(17, 16, 18, 0), rgba(17, 16, 18, .72) 40%); z-index: 3; }
  .gr-tabs { display: flex; gap: 0; padding-left: 6px; }
  .gr-tab { flex: 0 0 48px; height: 48px; padding: 0; background: none; border-top: 0; color: var(--gr-paper); font-size: 0; }
  .gr-tab .gr-tab-n { font: 400 20px/1 var(--gr-gothic); color: rgba(241, 236, 228, .82); translate: none; }
  .gr-tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gr-tab[aria-pressed="true"], .gr-tab.is-on { background: none; }
  .gr-tab[aria-pressed="true"] .gr-tab-n, .gr-tab.is-on .gr-tab-n { color: var(--gr-paper); }
  .gr-tab[aria-pressed="true"]::after, .gr-tab.is-on::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 9px; height: 2px; background: var(--gr-gel); border-radius: 2px; rotate: -2deg; }
  .gr-gowrap { justify-content: center; }
  .gr-gokey { width: 44px; height: 44px; font-size: 20px; padding-top: 3px; box-shadow: 0 0 0 1px rgba(255, 226, 176, .3), 0 0 16px 1px rgba(232, 38, 47, .42); }
  .gr-stby { display: none; }
  .gr-help { display: none; }
  .gr-cap { left: 12px; top: 8px; font-size: 12px; }
  .gr-cap-scale, .gr-cap-name { display: none; }
  .gr-titlepage { margin-top: 14px; }
  .gr-titlepage .gr-scenehead { margin-bottom: 8px; }
  .gr-page { padding: 28px 18px 22px; background-position: 30% 9px, 50% 9px, 70% 9px; }
  .gr-h1 { font-size: clamp(40px, 11vw, 46px); margin: 8px 0 16px; }
  .gr-ro-d { font-size: 13px; }
  .gr-flywrap { margin-bottom: 28px; }
  .gr-lede { margin-bottom: 42px; }
  .gr-pt { font-size: clamp(50px, 16.5vw, 76px); margin-bottom: -.22em; }
  .gr-plate { margin-right: calc(-1 * var(--gr-pad)); }
  .gr-page--play, .gr-play--mirror .gr-page--play { margin-inline: 0 4px; }
  .gr-p-labels text { font-size: 14px; }
  .gr-c-labels text { font-size: 22px; }
  .gr-play { margin-bottom: 96px; }
  .gr-change { margin: -28px 0 56px; }
  .gr-cross { height: 84px; }
  .gr-pipe { width: 88%; }
  .gr-page--call { padding-top: 34px; }
  .gr-clip { left: 30px; }
  .gr-stagephoto img { height: auto; aspect-ratio: 3 / 4; }
  .gr-flywrap--over { margin-top: calc(-2.9em - 34px); }
  .gr-planframe, .gr-cutframe { margin-inline: calc(-1 * (var(--gr-pad) + var(--gr-m) + var(--gr-gut))) calc(-1 * var(--gr-pad)); }
  .gr-planframe { padding: 16px 6px 10px; border-inline: 0; }
  .gr-cutframe svg { padding-inline: 8px; }
  .gr-cutframe figcaption { padding-inline: calc(var(--gr-pad) + var(--gr-m) + var(--gr-gut)) var(--gr-pad); }
  .gr-playkey, .gr-stopkey { padding-inline: 12px 16px; }
  .gr-page--card { margin-top: 56px; padding: 28px 18px 22px; }
  .gr-notices { grid-template-columns: 1fr; }
  .gr-notice:nth-child(n) { margin: 0; }
  .gr-notice:nth-child(even) { margin-left: 12px; }
  .gr-notice:nth-child(odd) { margin-right: 12px; }
  .gr-slip { grid-template-columns: 1fr; }
  .gr-back { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .gr-brand-name { display: none; }
}
@media (max-width: 699px) and (max-height: 600px) {
  .gr-box { aspect-ratio: auto; height: min(72vw, 52svh); }
}

/* ── reduced motion: general cover, everything in its final place ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gr-site *, .gr-site *::before, .gr-site *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .gr-bulb-glow { animation: none; }
}