/* ═══════════════════════════════════════════════════════════════════════
   Captions

   Held to the same rules as the rest of the station — near-black ground, no
   pure white, nothing under 15px — plus the ones that only apply to type that
   changes every few seconds while somebody is talking:

   · It has to be readable over a moving picture, at distance, without a slab
     of background that blocks the face behind it. A scrim that follows the
     text, not a bar across the frame.
   · It must not move. Caption text that re-centres line by line makes the eye
     re-find it every cue; the block is a fixed box and the lines set inside it.
   · It must not be mistaken for the quote. The pull-quote is a chosen sentence
     in italics; a caption is what is being said now, and it is set upright.
   ══════════════════════════════════════════════════════════════════════ */

#caption {
  /* Reserve the space whether or not a cue is showing, so the name and role
     underneath do not jump every time a sentence ends. */
  min-height: 2.2em;
  margin: 0 auto;
  max-width: 30em;
  text-align: center;
  opacity: 0;
  transition: opacity .28s ease;
}
#caption.on { opacity: 1; }

#caption-line {
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.34;
  color: var(--bone);
  text-wrap: balance;
  /* The scrim. Three stacked shadows rather than a background box: it darkens
     what is immediately behind the glyphs and nothing else, so the speaker's
     face stays visible through the gaps in the words. */
  text-shadow:
    0 1px 2px rgba(6, 6, 10, .95),
    0 2px 18px rgba(6, 6, 10, .9),
    0 0 44px rgba(6, 6, 10, .85);
}
#caption-line:empty { display: none; }

/* The English block under an answer given in another language.
   Set apart deliberately: it is a translation of the whole answer and it is
   not synced to anything, so it must not read as more of the caption. */
#caption-trans {
  margin-top: .7em;
  font-size: clamp(.98rem, 1.35vw, 1.15rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 34em;
  margin-inline: auto;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s ease;
  text-shadow: 0 1px 14px rgba(6, 6, 10, .95);
}
#caption-trans.on {
  opacity: .92;
  max-height: 11em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
/* Says what it is. Without this it reads as the station putting English words
   in the mouth of somebody who spoke Arabic. */
#caption-trans.on::before {
  content: 'Translation \00B7 ';
  font-family: var(--mono);
  font-style: normal;
  font-size: .72em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* The caption and the pull-quote are the same idea at two levels of detail,
   and they occupy the same place. While a cue is on screen the quote stands
   down — what somebody is saying right now beats a sentence chosen from it. */
#caption.on ~ #stage-quote { display: none; }

/* Arabic, Hebrew and Farsi read right to left. The cue carries the answer's
   language on the element, so the browser can do this itself. */
#caption-line:dir(rtl) { text-align: center; }

/* ── the wall ───────────────────────────────────────────────────────── */
/* Read from across a room rather than at arm's length, so it goes up, not
   down. This is the case the piece was composed for. */
@media (min-width: 1500px) {
  #caption-line { font-size: clamp(1.7rem, 2.1vw, 2.4rem); }
}

/* ── small screens ──────────────────────────────────────────────────── */

@media (max-width: 860px) {
  #caption { max-width: none; min-height: 2.6em; }
  #caption-line { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
  /* A whole-answer translation is several paragraphs. On a phone that is the
     entire screen, so it gets a bounded, scrollable box rather than pushing
     the speaker's name off the bottom. */
  #caption-trans.on { max-height: 7.5em; font-size: 1rem; }
}

@media (max-height: 460px) and (orientation: landscape) {
  #caption-line { font-size: clamp(1rem, 2.8vw, 1.2rem); }
  #caption-trans { display: none; }   /* no room; the timed cue is the priority */
}

/* Captions off: the station is exactly what it was before they existed. */
body:not(.cc) #caption { display: none; }

@media (prefers-reduced-motion: reduce) {
  #caption, #caption-trans { transition: none; }
}