/* ============================================================================
   The showroom, "stage" design (Stephen, 8 Oct 2026: "build it"). The site's own ground,
   type and tokens (styles.css), plus what a page of films needs: the room bar, a band per
   room, the stage (a big screen that plays the room's chapters in turn, the chapter list
   beside it), and the theatre the full films open in. Every clip sits on a pale screen in
   the films' own stage colour, fully visible: nothing dims or covers the footage.
   ========================================================================== */

.showroom { --stage: #F4F2EC; --ink-2: #18293F; }
.showroom .section-inner { max-width: 84rem; }

/* fixed header: anchors land below it */
.sr-room, .sr-stage, .sr-screen, .sr-ch { scroll-margin-top: 5.5rem; }

/* ---- the opening ---- */
.sr-head .section-inner { padding-bottom: clamp(3rem, 6vw, 4rem); }
.sr-eyebrow { margin-bottom: 1.4rem; color: var(--fg-faint); }
.sr-eyebrow b { font-weight: 500; color: var(--linen); }
.sr-head h1 { max-width: 14em; }
.sr-head .page-lede { margin-top: 1.6rem; }
.sr-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  border: 1px solid var(--rule);
}
.sr-rooms a {
  display: flex; align-items: baseline; gap: 1rem;
  min-height: 44px; padding: 1.3rem 1.4rem 1.2rem;
  border-right: 1px solid var(--rule);
  text-decoration: none; color: var(--fg);
  transition: background 300ms var(--ease);
}
.sr-rooms a:last-child { border-right: 0; }
.sr-rooms-n { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--linen); }
.sr-rooms-t { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.2; }
.sr-rooms-c {
  margin-left: auto; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--fg-faint);
}
.sr-note { margin-top: 1.6rem; max-width: var(--measure); font-size: 0.9rem; color: var(--fg-faint); }

/* ---- a room: its own full-width band, alternating ink and a lighter navy ---- */
.sr-room { position: relative; background: var(--bg); border-top: 1px solid var(--rule); }
.sr-room.sr-band-2 { background: var(--ink-2); }
.sr-room .section-inner { padding-block: clamp(4.5rem, 8vw, 6.5rem); }
.sr-room-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.4rem 2rem;
  align-items: end;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.sr-big { font-family: var(--serif); font-size: clamp(4.5rem, 9vw, 8rem); line-height: 0.8; color: var(--linen); }
.sr-words .klabel { margin-bottom: 0.9rem; color: var(--fg-faint); }
.sr-words .section-h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; }
.sr-line {
  margin: 0.6rem 0 0; max-width: 34em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.1rem; line-height: 1.4; color: var(--linen);
}

/* ---- watch the full demo ---- */
.sr-watch { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.sr-watch-btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  min-height: 44px; padding: 0.7rem 1.2rem 0.7rem 0.8rem;
  background: none; border: 1px solid var(--linen); border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--fg); white-space: nowrap;
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.sr-ring {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--linen); color: var(--midnight-ink);
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.sr-ring svg { width: 0.56rem; height: 0.68rem; margin-left: 0.12rem; fill: currentColor; }
.sr-len { max-width: 19em; text-align: right; font-size: 0.82rem; line-height: 1.4; color: var(--fg-faint); }

/* ---- the stage: a big screen (about two thirds) and the chapter list ---- */
.sr-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(17.5rem, 1fr);
  border: 1px solid var(--rule);
  /* a list taller than the 16:9 screen gets more stage colour around the clip, never a dark strip */
  background: var(--stage);
  background-clip: padding-box;
}
.sr-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: center;
  background: var(--stage);
  overflow: hidden;
}
/* every chapter's clip sits on the screen; only the one playing shows */
.sr-screen video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--stage);
  opacity: 0;
}
.sr-screen video.on { opacity: 1; }
.sr-motion .sr-screen video { transition: opacity 700ms var(--ease); }
/* the caption tag and the play/pause tag sit in the corners, on the frame, not over it */
.sr-cap, .sr-clip-play {
  position: absolute; bottom: 1rem;
  padding: 0.5rem 0.8rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; line-height: 1.3; color: var(--sacred-stone);
  background: rgba(15, 27, 42, 0.86); border-radius: 2px;
}
.sr-cap { left: 1rem; max-width: calc(100% - 12rem); }
.sr-cap:empty { display: none; }
.sr-clip-play {
  right: 1rem; min-height: 44px; min-width: 44px;
  border: 1px solid rgba(246, 242, 236, 0.24); cursor: pointer;
}

.sr-list {
  display: flex; flex-direction: column;
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--rule);
  background: var(--bg);
}
.sr-ch { position: relative; flex: 1 0 auto; border-bottom: 1px solid var(--rule); transition: background 300ms var(--ease); }
.sr-ch:last-child { border-bottom: 0; }
.sr-ch.on { background: rgba(246, 242, 236, 0.04); }
.sr-pick {
  display: flex; align-items: baseline; gap: 0.9rem;
  width: 100%; min-height: 44px; padding: 1rem 1.3rem 0.95rem 1.4rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; color: var(--fg-faint);
  transition: color 300ms var(--ease);
}
.sr-ch.on .sr-pick { color: var(--fg); }
.sr-ch-n {
  flex: none; min-width: 1.6rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--fg-faint);
}
.sr-ch.on .sr-ch-n { color: var(--linen); }
/* the thin line on the left that fills as the chapter's clip plays */
.sr-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--rule); pointer-events: none; }
.sr-bar i { position: absolute; inset: 0; background: var(--linen); transform: scaleY(0); transform-origin: top; }
/* the open chapter's line and its jump into the film */
.sr-more { padding: 0 1.3rem 1.1rem calc(1.4rem + 2.5rem); }
.sr-ch:not(.on) .sr-more { display: none; }
.sr-measuring .sr-ch .sr-more { display: none; }
.sr-measuring .sr-ch.sr-m .sr-more { display: block; }
.sr-more p { margin: 0; max-width: 30em; font-size: 0.9rem; line-height: 1.5; color: var(--fg-muted); }
.sr-more p + p { margin-top: 0.6rem; }
.sr-more .sr-deck {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem; line-height: 1.45; color: var(--linen);
}
.sr-fine { font-size: 0.84rem; color: var(--fg-faint); }
.sr-more .sr-fine { font-size: 0.8rem; color: var(--fg-faint); }
.sr-jump {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; margin-top: 0.2rem; padding: 0;
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--linen);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.sr-jump svg { width: 0.5rem; height: 0.56rem; fill: var(--terracotta); }

/* ---- the close ---- */
.sr-who {
  margin-top: 2.2rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--fg-faint);
}
.sr-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 2rem; margin-top: 1.6rem; }
.sr-back a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--fg-muted); font-size: 0.95rem;
  border-bottom: 1px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

/* ---- the theatre ---- */
.sr-theatre {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(1rem, 4vw, 3rem) var(--gutter);
  border: 0; background: rgba(9, 16, 26, 0.96); color: var(--fg);
}
.sr-theatre[open] { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sr-theatre::backdrop { background: rgba(9, 16, 26, 0.96); }
.sr-th-bar, .sr-th-frame, .sr-theatre > .sr-fine {
  width: 100%;
  max-width: min(78rem, calc((100vh - 9rem) * 16 / 9));
}
.sr-th-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; margin-bottom: 1rem; }
.sr-th-bar h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.2; }
.sr-th-close {
  margin-left: auto; min-height: 44px; padding: 0.5rem 0.95rem; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg); background: transparent;
  border: 1px solid var(--rule); border-radius: 2px;
}
.sr-th-frame { aspect-ratio: 16 / 9; background: #000; }
.sr-th-frame video { display: block; width: 100%; height: 100%; background: #000; }
.sr-theatre > .sr-fine { margin-top: 0.9rem; }
.sr-theatre > .sr-fine:empty { display: none; }
html.sr-theatre-open { overflow: hidden; }

/* ---- hover, only where there is a pointer to hover (a tap must not leave it stuck) ---- */
@media (hover: hover) {
  .sr-rooms a:hover { background: rgba(246, 242, 236, 0.04); }
  .sr-watch-btn:hover { background: var(--linen); color: var(--midnight-ink); }
  .sr-watch-btn:hover .sr-ring { background: var(--midnight-ink); color: var(--linen); }
  .sr-clip-play:hover { background: var(--midnight-ink); }
  .sr-jump:hover { color: var(--fg); border-bottom-color: var(--fg-muted); }
  .sr-back a:hover { color: var(--fg); border-bottom-color: var(--fg-muted); }
  .sr-th-close:hover { border-color: var(--fg-muted); }
  .sr-pick:hover { color: var(--fg); }
}

/* ---- narrower: the stage stacks, screen then list (below 1080px the list would outgrow the screen) ---- */
@media (max-width: 1080px) {
  .sr-stage { grid-template-columns: minmax(0, 1fr); }
  .sr-list { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .sr-room-head { grid-template-columns: auto minmax(0, 1fr); }
  .sr-watch { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
  .sr-len { text-align: left; }
  .sr-rooms { grid-template-columns: minmax(0, 1fr); }
  .sr-rooms a { border-right: 0; border-bottom: 1px solid var(--rule); }
  .sr-rooms a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .sr-room-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sr-big { font-size: 4rem; }
  /* on a phone the chapter's name sits right under the screen; the tag would cover the footage */
  .sr-cap { display: none; }
  .sr-clip-play { right: 0.6rem; bottom: 0.6rem; font-size: 0.58rem; letter-spacing: 0.16em; padding: 0.4rem 0.6rem; }
  .sr-more { padding-left: calc(1.4rem + 2.5rem); }
}
@media (max-width: 700px) {
  .sr-th-bar h2 { flex-basis: 100%; }
  .sr-th-close { margin-left: 0; }
}
/* a phone or tablet has no Esc key to press */
@media (hover: none), (pointer: coarse) {
  .sr-esc { display: none; }
}