/* ═══════════════════════════════════════════════════════════════════════
   The Table Remembers — the film, the two doors, and the tour

   Loaded after station.css and deliberately kept apart from it. Everything
   here belongs to the parts of the piece that have a beginning and an end —
   the overture that opens it and the guided route through it — as against the
   station itself, which just runs. Keeping them in separate files means the
   composition of the wall can be worked on without stepping through 200 lines
   of things that are only on screen for ninety seconds.

   Same rules as the main sheet: near-black ground, no pure white, nothing
   hover-only, and nothing meaningful under 15px.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   The overture — the film that opens the piece
   ══════════════════════════════════════════════════════════════════════ */

/*
   Above the intro rather than inside it, because it has to outlive the intro's
   own fade. Hidden with [hidden] and not only with opacity, so the video
   element is genuinely out of the document between showings — a 23MB decode
   left running behind the station is fine for ten minutes and not for four
   hours.
*/
#overture {
  position: fixed; inset: 0; z-index: 120;
  background: #000;
  display: grid; place-items: center;
  opacity: 0; transition: opacity 1s ease;
  cursor: pointer;
}
#overture[hidden] { display: none; }
#overture.on { opacity: 1; }

#overture-video {
  width: 100%; height: 100%;
  object-fit: contain;          /* never crop a face off a frame */
  background: #000;
}

/* Letterbox, opening as the film starts. Not decoration: the film is 16:9 and
   the wall may not be, and bars that belong to the piece read better than
   whatever the browser would otherwise leave at the edges. */
#overture::before, #overture::after {
  content: ''; position: absolute; left: 0; right: 0; height: 9vh;
  background: #000; pointer-events: none; z-index: 2;
  transform: scaleY(1);
  transition: transform 1.8s cubic-bezier(.16,.8,.3,1);
}
#overture::before { top: 0; transform-origin: top; }
#overture::after  { bottom: 0; transform-origin: bottom; }
#overture.on::before, #overture.on::after { transform: scaleY(.3); }

/* The title, over the film's opening seconds. */
#overture-card {
  position: absolute; z-index: 3;
  left: 50%; bottom: 16%; transform: translate(-50%, 1.2rem);
  text-align: center; width: min(90vw, 46rem);
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16,.8,.3,1);
  pointer-events: none;
  text-shadow: 0 2px 40px rgba(0,0,0,.95), 0 0 90px rgba(0,0,0,.8);
}
#overture-card.on { opacity: 1; transform: translate(-50%, 0); }

#overture-card .ov-place {
  font-family: var(--mono);
  font-size: clamp(.78rem, 1vw, .95rem);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1em;
}
#overture-card h2 {
  font-size: clamp(2.1rem, 6vw, 5rem);
  font-weight: 300; line-height: 1; letter-spacing: .02em;
  color: var(--bone);
}
#overture-card .ov-sub {
  margin-top: .8em;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-style: italic; color: var(--bone); opacity: .82;
}

#overture-skip {
  position: absolute; z-index: 4;
  right: clamp(1rem, 3vw, 2.6rem); bottom: clamp(1rem, 3vw, 2.6rem);
  font-family: var(--mono);
  font-size: .86rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone); background: rgba(6,6,10,.6);
  border: 1px solid rgba(236,229,214,.32);
  padding: .85em 1.5em; cursor: pointer;
  min-height: 2.9rem;
  opacity: 0; transition: opacity .8s ease, background .3s, color .3s;
  backdrop-filter: blur(8px);
}
#overture-skip.on { opacity: .85; }
#overture-skip:hover, #overture-skip:focus-visible {
  opacity: 1; background: var(--gold); color: var(--void); border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   The two ways in
   ══════════════════════════════════════════════════════════════════════ */

.intro-ways {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem 1.1rem;
}
.intro-ways button { min-height: 3rem; }
.intro-ways #enter { padding-inline: 2.4em; }

/* The tour is the recommended door — the one that explains itself to somebody
   who has never heard of this table — so it gets the filled button. */
#enter-tour.way-primary {
  background: var(--gold); color: var(--void); border-color: var(--gold);
}
#enter-tour.way-primary:hover:not(:disabled),
#enter-tour.way-primary:focus-visible:not(:disabled) {
  background: var(--bone); border-color: var(--bone); color: var(--void);
}

/* ═══════════════════════════════════════════════════════════════════════
   The tour strip
   ══════════════════════════════════════════════════════════════════════ */

#tour {
  position: fixed; z-index: 24;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--edge) + 6.4rem);
  width: min(92vw, 56rem);
  pointer-events: none;
}
#tour[hidden] { display: none; }

/* The chapter card fades back to the work after a few seconds rather than
   sitting over it. The piece is the room, not the caption. */
.tour-card {
  text-align: center;
  opacity: 0; transform: translateY(.7rem);
  transition: opacity 1s ease, transform 1s cubic-bezier(.16,.8,.3,1);
  margin-bottom: 1.1rem;
}
#tour.card-on .tour-card { opacity: 1; transform: none; }

.tour-meta {
  font-family: var(--mono);
  font-size: .82rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: .7em;
}
#tour-title {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 300; letter-spacing: .01em; color: var(--accent);
  transition: color .8s ease;
  text-shadow: 0 2px 26px rgba(6,6,10,.95);
}
#tour-say {
  margin: .6em auto 0; max-width: 42em;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 300; line-height: 1.5; color: var(--bone); opacity: .92;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(6,6,10,.95), 0 0 60px rgba(6,6,10,.8);
}

.tour-controls {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; pointer-events: auto;
}
.tour-controls button {
  font-family: var(--mono);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(6,6,10,.7); border: 1px solid rgba(224,183,101,.24);
  color: var(--bone-dim); padding: .7em 1.15em; cursor: pointer;
  min-height: 2.8rem; white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: color .3s, border-color .3s, background .3s;
}
.tour-controls button:hover, .tour-controls button:focus-visible {
  color: var(--bone); border-color: rgba(224,183,101,.5);
}
#tour-quit { border-color: transparent; opacity: .8; }

/* How far through the route. The one part of the tour that stays up the whole
   time — somebody who joins at chapter seven should be able to see that there
   were six before it. */
.tour-bar {
  flex: 1; max-width: 22rem; height: 2px;
  background: rgba(224,183,101,.18); position: relative;
}
.tour-bar i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--tour-progress, 0%);
  background: var(--accent);
  transition: width 1.2s cubic-bezier(.16,.8,.3,1);
}

/* While a tour is running the lens strip is not the control to reach for, so
   it steps back — but stays reachable, because pressing it is a legitimate
   way to leave the tour. */
body.touring #lenses { opacity: .42; }
body.touring #lenses:hover, body.touring #lenses:focus-within { opacity: 1; }

/* Somebody is actually speaking. The centre panel lifts out of the field by a
   hair, so the eye knows where the voice is coming from. */
body.speaking #stage-media {
  box-shadow: 0 0 90px rgba(0,0,0,.85), 0 0 170px -20px var(--accent);
}

/* ── the film and the tour on small screens ─────────────────────────── */

@media (max-width: 860px) {
  /* A 16:9 film in a portrait viewport is already mostly black; bars on top
     of that are just a smaller picture. They close up and give the frame back. */
  #overture::before, #overture::after { height: 4vh; }
  #overture-card { bottom: 22%; }
  #overture-skip { left: 50%; right: auto; transform: translateX(-50%); }

  #tour {
    bottom: calc(var(--edge) + 6.8rem);
    width: calc(100% - var(--edge) * 2);
  }
  #tour-say { font-size: 1.05rem; }
  #tour-title { font-size: 1.35rem; }
  .tour-meta { font-size: .95rem; letter-spacing: .18em; }

  /* The chapter card and the station's own caption want the same band, and on
     a 375px screen there is only one of it. While the card is up the caption
     steps aside; the card retires within seconds — and within two and a half
     of them once somebody starts speaking — so the speaker's name is back
     before you want it. */
  body.chapter-card #stage { opacity: 0; transition: opacity .5s ease; }
  /* Back and Next belong to an operator with a keyboard. On a phone the two
     that matter are how far through you are, and the way out. */
  #tour-prev, #tour-next { display: none; }
  .tour-controls { gap: .6rem; }
  .tour-controls button { font-size: .8rem; padding: .7em .95em; }
}

@media (max-height: 460px) and (orientation: landscape) {
  #tour { bottom: calc(var(--edge) + 4.8rem); }
  .tour-card { margin-bottom: .6rem; }
  #tour-say { font-size: .98rem; }
  #tour-title { font-size: 1.2rem; }
  #overture-card { bottom: 14%; }
}

/* The bars, the card and the progress fill are all motion. Under a reduced
   motion preference they simply arrive. */
@media (prefers-reduced-motion: reduce) {
  #overture::before, #overture::after { transform: scaleY(.3); transition: none; }
  .tour-bar i { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The opening screen has to fit the screen

   It did not. At 1280x720 — an ordinary laptop, and the resolution of plenty
   of projectors — the intro measured 814px tall in a 720px window. The two
   buttons that start the piece sat at 755-805px, below the fold, and
   `body { overflow: hidden }` meant they could not be scrolled to. The piece
   was unenterable, and the failure was silent: a handsome page with no visible
   way in.

   Three defences, in order of preference:

   1. It fits. The type and the spacing come down on short viewports so the
      whole thing lands inside the window without scrolling at all.
   2. If it still does not fit, it scrolls. `overflow-y: auto` with `margin:
      auto` on the inner block centres the content when there is room and lets
      it scroll from the top when there is not — grid centring alone clips the
      top of overflowing content instead, which is how you lose a heading.
   3. The buttons are never the thing that overflows. They come before the
      hint line in the source and both are inside the scroll container.
   ══════════════════════════════════════════════════════════════════════ */

#intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Centres when it fits; scrolls from the top when it does not. */
.intro-inner { margin: auto; padding-block: 1rem; }

/* ── short viewports ────────────────────────────────────────────────── */
/* 720p laptops and projectors, and any phone held sideways. */

@media (max-height: 860px) {
  #intro h1 { font-size: clamp(2.2rem, 6.5vh, 4.4rem); margin-bottom: .2em; }
  .intro-place { margin-bottom: 1.2em; letter-spacing: .28em; }
  .intro-blurb { font-size: clamp(1rem, 2.2vh, 1.25rem); line-height: 1.45; margin-bottom: 1em; }
  .intro-counts { gap: .3em clamp(1rem, 2.6vw, 2.2rem); margin-bottom: 1.3em; }
  .intro-counts b { font-size: clamp(1.3rem, 3.4vh, 2rem); }
  .intro-ways { gap: .7rem .9rem; }
  .intro-ways button { padding-block: .85em; min-height: 2.9rem; }
  .intro-hint { margin-top: 1.2em; }
}

@media (max-height: 700px) {
  /* The second paragraph is the one that can go: it is context, and the
     counts above it already say twenty did not live to see this. Everything
     that tells somebody what this is and how to start it stays. */
  .intro-now { display: none; }
  #intro h1 { font-size: clamp(2rem, 6vh, 3.4rem); }
  .intro-counts li { font-size: .74rem; letter-spacing: .14em; }
}

/* Landscape phones — the tightest real case, and the one most likely to be
   held up at an event. */
@media (max-height: 460px) {
  /* 375px of height, and a third of it is browser chrome. What survives is
     exactly what somebody needs to know what this is and how to start it:
     the place, the name, one sentence, and the two doors. The counts and the
     fullscreen hint both go — the numbers are on the wall within seconds, and
     nobody reads a keyboard hint on a phone. */
  .intro-counts, .intro-hint { display: none; }
  .intro-inner { padding-block: .4rem; }
  .intro-place { margin-bottom: .5em; font-size: .7rem; letter-spacing: .22em; }
  #intro h1 { font-size: clamp(1.6rem, 9vh, 2.4rem); margin-bottom: .15em; }
  .intro-blurb:not(.intro-now) {
    font-size: .95rem; line-height: 1.35; margin-bottom: .7em;
    /* One sentence is enough to stand up a title; the rest is on the wall. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .intro-ways button { min-height: 2.6rem; padding-block: .6em; }
}