/* Now showing: the screening room. A 3D cinema (screening.js) with its programme, cues and notes beside it.
   Everything here is namespaced .screening / .sr-* (the page's .sr-only is reused, never redefined). */
.screening { padding: 160px var(--margin) 0; }
.sr-head { max-width: 980px; }
.sr-title { margin-top: 10px; font: 400 var(--step-head)/.95 var(--display); text-transform: uppercase; letter-spacing: -.01em; max-width: 15ch; }
.sr-sub { margin-top: 16px; max-width: 42ch; font-size: var(--step-lead); line-height: 1.3; color: var(--muted); }

.sr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 32px; margin-top: 40px; align-items: start; }
html:not(.js) .sr-body { display: none; }
.sr-nojs { display: none; margin-top: 24px; color: var(--muted); }
html:not(.js) .sr-nojs { display: block; }

/* The stage: the room floats in the page, no box round it */
.sr-stage { position: relative; height: clamp(500px, 50vw, 760px); touch-action: pan-y; }
.sr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out); }
.sr-stage.is-ready canvas { opacity: 1; }
.sr-film { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.sr-marquee { display: none; }
.sr-note { position: absolute; inset: auto 0 12px; margin: 0; text-align: center; font-size: var(--step-small); color: var(--muted); pointer-events: none; }
.sr-note[hidden] { display: none; }

/* Without WebGL: the reel plays as a plain video, under a marquee line */
.sr-stage.is-flat .sr-film { top: 72px; bottom: 44px; width: auto; height: calc(100% - 116px); aspect-ratio: 9 / 16; transform: translateX(-50%); opacity: 1; pointer-events: auto; background: #000; box-shadow: 0 0 0 10px #0b0b0b, 0 0 90px rgb(160 134 114 / .18); }
.sr-stage.is-flat .sr-marquee {
  display: block; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; padding: 8px 18px 6px; white-space: nowrap;
  border: 2px solid var(--accent); font: 400 var(--step-lead)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.sr-marquee b { font-weight: 400; color: var(--ink); }
.sr-stage.is-flat .sr-bubble-in { margin-bottom: 0; }
.sr-stage.is-flat .sr-bubble-in::after { display: none; }
.sr-marquee span { color: var(--muted); }

/* Loading skeleton: the room's outline in the same box, so nothing moves when the canvas fades in */
.sr-skel {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .6s var(--ease-out);
  --sr-sk-a: #181818; --sr-sk-b: var(--surface); --sr-sk-c: #232323;
}
html:not(.js) .sr-skel { display: none; }
.sr-stage.is-ready .sr-skel { opacity: 0; }
.sr-skel svg { display: block; width: 100%; height: 100%; }
.sr-sk-room { fill: var(--sr-sk-a); }
.sr-sk-wall { fill: var(--sr-sk-b); }
.sr-sk-beam { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.sr-sk-screen { fill: var(--sr-sk-c); }
.sr-sk-sign { fill: #141414; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 2; }
.sr-sk-rows { fill: none; stroke: var(--sr-sk-c); stroke-width: 12; }
.sr-sk-drape { fill: #201b18; }
.sr-sk-booth { fill: var(--sr-sk-c); }
.sr-sheen-edge { stop-color: #fff; stop-opacity: 0; }
.sr-sheen-mid { stop-color: #fff; stop-opacity: .05; }
@media (prefers-reduced-motion: no-preference) { .sr-sheen { animation: sr-sheen 2.6s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .sr-sheen { display: none; } }
@keyframes sr-sheen { from { transform: translateX(0) skewX(-16deg); } 72%, to { transform: translateX(1500px) skewX(-16deg); } }

/* Film grain over the room, fading out at the edges */
.sr-grain {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.sr-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr-stage:not(.is-ready) .sr-grain { display: none; }
@media (prefers-reduced-motion: no-preference) { .sr-grain::before { animation: sr-grain .8s steps(5) infinite; } }
@keyframes sr-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }

/* Speech labels over the audience */
.sr-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sr-bubble { position: absolute; left: 0; top: 0; max-width: min(240px, 66vw); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out), visibility .2s; }
.sr-bubble.is-on { opacity: 1; visibility: visible; }
.sr-bubble-in {
  position: relative; width: max-content; max-width: 100%; margin-bottom: 11px; padding: 7px 12px 8px;
  background: var(--ink); color: var(--bg); font: italic 400 var(--step-small)/1.3 var(--text);
  box-shadow: 0 10px 26px rgb(0 0 0 / .5); /* taste-skill-ignore: labels float over the room */
}
.sr-bubble-in::after {
  content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -7px; width: 14px; height: 7px; margin-left: -7px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sr-bubble-in b { display: block; margin-bottom: 3px; font: 400 .8125rem/1 var(--display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #6d5a4c; }
.sr-bubble[data-mood="annoyed"] .sr-bubble-in { background: var(--accent); color: var(--accent-ink); }
.sr-bubble[data-mood="annoyed"] .sr-bubble-in b { color: #3a2f27; }
.sr-bubble[data-mood="angry"] .sr-bubble-in { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 26px rgb(0 0 0 / .5); font-style: normal; font-weight: 600; }
.sr-bubble[data-mood="angry"] .sr-bubble-in::after { background: var(--accent); }
.sr-bubble[data-mood="angry"] .sr-bubble-in b { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .sr-bubble.is-on .sr-bubble-in { animation: sr-pop .32s var(--ease-out); }
  .sr-bubble.is-on[data-mood="angry"] .sr-bubble-in { animation: sr-pop .32s var(--ease-out), sr-jitter .28s linear .32s 2; }
}
@keyframes sr-pop { from { transform: translateY(6px) scale(.9); opacity: 0; } }
@keyframes sr-jitter { 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }

/* The panel: play, programme, caption, cues, sheet and mix */
.sr-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; min-width: 0; }
.sr-deck { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-play, .sr-ask, .sr-again {
  min-height: 44px; padding: 0 18px; border: 0; font: 400 var(--step-lead)/1 var(--display); letter-spacing: .03em;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
}
.sr-play { min-width: 104px; background: var(--accent); color: var(--accent-ink); }
.sr-play:hover { background: var(--ink); }
.sr-ask, .sr-again { background: var(--surface); color: var(--ink); }
.sr-ask:hover, .sr-again:hover { background: var(--ink); color: var(--bg); }
.sr-play:active, .sr-ask:active, .sr-again:active { transform: scale(.97); }

.sr-label { font: 400 var(--step-small)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sr-feature { display: grid; gap: 6px; }
.sr-feature-title { font: 400 clamp(2rem, 1.4rem + 1.4vw, 2.75rem)/1 var(--display); text-transform: uppercase; }
.sr-caption { font-style: italic; color: var(--muted); max-width: 36ch; }

.sr-cues-wrap { display: grid; gap: 8px; }
.sr-cues { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--surface); }
.sr-cue {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; width: 100%; min-height: 40px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--surface); background: none; text-align: left; color: var(--muted);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.sr-cue:hover { color: var(--ink); }
.sr-tc { font: 400 .8125rem/1 var(--code); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sr-cue-name { font-size: var(--step-body); line-height: 1.2; }
.sr-cue-note { display: none; grid-column: 2; margin-top: 4px; font-size: var(--step-small); line-height: 1.35; color: var(--muted); }
.sr-cue[aria-current="true"] { color: var(--ink); }
.sr-cue[aria-current="true"] .sr-tc { color: var(--accent); }
.sr-cue[aria-current="true"] .sr-cue-note { display: block; }

.sr-more { border-top: 1px solid var(--surface); }
.sr-more:last-of-type { border-bottom: 1px solid var(--surface); }
.sr-more summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none;
  font: 400 var(--step-lead)/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.sr-more summary::-webkit-details-marker { display: none; }
.sr-more summary::after { content: "+"; font-size: 1.1em; color: var(--accent); transition: transform .25s var(--ease-out); }
.sr-more[open] summary::after { transform: rotate(45deg); }
.sr-more summary:hover { color: var(--accent); }
.sr-more-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 4px 0 16px; }
.sr-more-body img { width: 100%; height: auto; background: var(--surface); }
.sr-more-body pre { margin: 0; padding: 14px; max-height: 340px; overflow: auto; overscroll-behavior: contain; background: var(--surface); font: 400 .75rem/1.55 var(--code); white-space: pre; }
.sr-more-body p { font-size: var(--step-small); color: var(--muted); }
.sr-frames { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sr-frames img { aspect-ratio: 9 / 16; object-fit: cover; }
.sr-hint { font-size: var(--step-small); color: var(--muted); }

/* Tablet and phone: the room on top, the panel under it */
@media (max-width: 1100px) {
  .sr-body { grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; }
}
@media (max-width: 860px) {
  .screening { padding-top: 110px; }
  .sr-title { font-size: 12vw; }
  .sr-body { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .sr-stage { height: min(112vw, 600px); margin: 0 calc(var(--margin) * -1); }
  /* the room runs off the sides here, so its edges fade instead of cutting */
  .sr-stage canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .sr-panel { gap: 18px; }
  .sr-feature-title { font-size: 1.75rem; }
}
@media (forced-colors: active) {
  .sr-cue[aria-current="true"] { outline: 2px solid Highlight; }
}