/* ──────────────────────────────────────────────────────────────────────────
   A PAGE OF TEXT. One shell, for every one of them.

   Until 2026-10-28 a show's two text pages — the press release and the poem —
   were written out separately, and the second was the first with different
   numbers typed into it. They agreed on everything that matters (the wash, the
   absolutely positioned centred block, the phone's relative override) and
   differed only in four values, which is precisely the kind of pair that drifts.

   THE REASON THIS FILE EXISTS RATHER THAN A THIRD COPY is Mikhael's, 2026-10-28:
   "Each show will have different sub menus. some might not have a press release
   and the Text will not always be a poem. So we need to leave space for
   flexibility on that." A text page must therefore know nothing about poems.
   There is no `.stanza` here and no `.poem`: there are blocks of text, and a
   page says how wide, how big, how leaded and how far apart they sit.

   A PAGE SETS FOUR NUMBERS AND NOTHING ELSE:

     :root {
       --text-width:   476px;   the measure (px — see rule 25)
       --text-size:    17px;    the type size
       --text-leading: 1.62;    the leading
       --text-gap:     1.62em;  between blocks, in the text's own em
     }

   VERSE AND PROSE ARE THE SAME THING HERE. A stanza and a paragraph are both a
   block separated from the next by one gap; the difference is that verse breaks
   its own lines with <br> and prose lets them wrap. Nothing in the CSS needs to
   know which it is looking at, so nothing here does.

   WHAT STAYS WITH THE PAGE: anything that is that document's own — the press
   release's masthead and its small print, a heading style a particular text
   wants. This file is the shell, not the typography of every text ever written.

   Rules 22, 23, 25 and 26 all meet in here; each is marked where it applies.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Defaults are the press release's, being the commoner shape of the two. */
  --text-size: 18px;
  --text-leading: 1.5;
  --text-gap: 1.2em;
  /* A phone may want a smaller size; where it does not, it inherits. */
  --text-size-phone: var(--text-size);
}

/* The white veil over the cutting mat. Rule 26: the content clears it at
   z-index 10, and an unpositioned element would throw that z-index away. */
#page-wash {
  position: fixed;
  /* NOT `inset: 0`. THIS LAYER MUST NOT CHANGE SIZE WHILE THE PAGE SCROLLS.
     `inset: 0` makes it as tall as the window IS, and on a touch device that is
     not one number: scrolling up brings Safari's toolbar back and the window
     loses its height as it comes. This is a translucent layer sitting over the
     mat, so every frame of that animation made the browser re-blend 60% white
     across the whole screen against a freshly re-drawn photograph underneath —
     with whatever the page is showing, a playing film included, composited on
     top. Mikhael found what that costs on his iPad, 2026-11-06: scrolling back
     up the press release made the words and the film disappear and then jump
     about.

     `100vh` IS THE LARGE VIEWPORT on a touch device — the window with the
     toolbar hidden, the biggest it ever gets, and it does not move while you
     scroll. So the wash always covers what can be seen and never resizes. With
     the toolbar showing, its foot is off the bottom of the screen, which costs
     nothing: it is a flat colour with nothing in it to crop. On a desktop
     `100vh` is simply the window, so nothing there changes at all. */
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1;
  pointer-events: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: black;                          /* rule 24: the site is set in black */
}

/* THE BLOCK ITSELF. Rule 25: centred in the window on its OWN width, with
   --text-left worked out from --text-width in nav.css so the width and the
   centring cannot drift apart. Rule 22's floor is carried inside --text-left,
   so on a window too narrow to centre it the text stops at the menu rather than
   sliding under it. Rule 23: the first line sits on the menu's first line. */
#section-content {
  position: absolute;
  z-index: 10;
  top: 18px;
  left: var(--text-left);
  width: var(--text-width);
  max-width: calc(100vw - var(--text-left) - 40px);
  padding: 0 0 60px 0;
  box-sizing: border-box;
  font-size: var(--text-size);
}

/* A block of text — a paragraph, or a stanza; they are the same object. */
#section-content p {
  line-height: var(--text-leading);
  margin: 0 0 var(--text-gap) 0;
  /* Never split a block's first or last line off on its own at the foot of a
     column. */
  orphans: 2;
  widows: 2;
}

/* ── ON A PHONE ────────────────────────────────────────────────────────────
   The menu is a bar across the top and the content clears it rather than
   sitting beside it. */
@media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  #section-content {
    /* RELATIVE, NOT STATIC, AND THE REASON IS THE WASH (rule 26). #page-wash is
       a fixed white veil at z-index 1 and this block sits above it at z-index 10
       — but z-index only counts on a positioned element, so `static` threw it
       away and the veil painted over the words. That is the faded look Mikhael
       found on his phone, 2026-10-24: "it also looks like it might have a
       transparency over it". `relative` lays the block out in normal flow
       exactly as `static` did and keeps the z-index. */
    position: relative;
    /* `left` and `top` belong to the wide-screen rule above, where the block is
       absolutely positioned and centred. They still apply to a relative box, so
       they have to be cleared here — without this the phone text is shoved
       --text-left (229px) to the right and runs off the screen. */
    left: auto;
    top: auto;
    display: block;
    width: auto;
    max-width: none;
    padding: 15px 18px 60px 18px;
    font-size: var(--text-size-phone);
  }
}