/* ────────────────────────────────────────────────────────────────────────────
   A SHOW'S FRONT DOOR. One shape, for every show that uses it.

   The words at --content-left, one picture standing beside them and holding
   still while the document scrolls past. A Johannesburg Landscape is the page
   this was lifted out of, and it was the only copy of it.

   THE REASON THIS FILE EXISTS IS HIS, 2026-11-07: "next show to add is Home
   Building Ideas... which will have the same or very similar layout to A Joburg
   landsape." D12 made that argument for the works and installation pages and
   lifted their styling into works.css and installation.css — and it stopped one
   page short. The front door kept its whole stylesheet inline, 228 lines of it,
   so the next show's front door would have been those 228 lines copied by hand
   and then left to drift. Nothing would have noticed; nothing could have.

   THE SHAPE IS THE WORKS PAGE'S, ON PURPOSE. Words at --content-left with the
   picture standing beside them is what he chose on 2026-11-05 after sending
   Artlogic's private view as a model, and a front door that used a different
   arrangement would be the site arguing with itself.

   THE PICTURE HOLDS STILL WHILE THE DOCUMENT GOES PAST IT. A press release is
   four screens of reading and the picture is one screenful tall, so one of the
   two has to give. `position: sticky` on the picture is the answer that keeps
   both: the column of words scrolls and the picture stays where it started,
   which is also what the two columns were for. Scrolling it away would have
   left three screens of text with nothing beside it.

   THE PICTURE SLOT DOES NOT ASSUME A FILM — his, 2026-11-09: a show may put a
   still where this one has its walkthrough. So
   every rule that draws the picture names `video` AND `img`, and a still drops
   into the same slot without touching this file. The SOUND mark is a film's
   furniture and a page without a film simply has no such button; the rule costs
   a page nothing.

   WHAT A SHOW SETS FOR ITSELF. The :root block below is the default, and a page
   that wants a different number re-declares it in a <style> of its own AFTER
   this file is linked. Three of those values restate text.css's own defaults on
   purpose, so a show can read all of its measures in one place rather than two.

   WHAT STAYS WITH THE PAGE, and must: the document itself, its masthead and its
   small print, the picture's own file and everything particular to it, and the
   script that measures the picture and writes its width and height. None of
   that is shape.

   WHERE THE PICTURE'S SIZE COMES FROM, because it is not here. The width and
   height of #front-pic are written by the page's own script, and the reason is
   worth keeping: a video's intrinsic 720px leaks into the max-content width of
   any box that holds it, so a wrapper sized by its contents comes out wider
   than the picture drawn inside it and the words stand too far away. Measured
   once at 720 against a picture drawing 630.8.

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

:root {
  /* 476px is about 60 characters at 18px. The press release page set its own
     measure at 640 because it had the window to itself; here it stands beside
     the film, and 640 does not fit next to an upright picture on a laptop. */
  --text-width:       476px;
  --text-size:        18px;
  --text-leading:     1.5;
  --text-gap:         1.2em;
  --text-size-phone:  17px;
  /* The gap between the words and the moving picture. */
  --front-gap:        36px;
  /* The row's first line, written by the script from Nav.alignTop (rule 23).
     The picture sticks to the same line, so the two start level. */
  --front-top:        18px;
}

/* THE ROW. The left edge is where the menu ends (rule 22, measured by nav.js
   and never hardcoded — the fallback is only for the instant before the
   first measurement) and the first line is the menu's own (rule 23, set by
   the script). It is in normal flow rather than pinned to the window,
   because the document inside it is longer than a screen and the page has
   to scroll. Rule 26: it clears the wash at z-index 10. */
#front {
  position: relative;
  z-index: 10;
  margin: 0 40px 0 var(--content-left, 229px);
  /* The air at the foot belongs to the WORDS, not to the row. On the row it
     is part of the row's padding box, which is what a sticky item is
     constrained by — so the picture was pushed 29px off the top of the
     window over the last few hundred pixels of a 4,600px scroll. On the
     words it is the same gap on the screen and the picture stays put. */
  padding: var(--front-top) 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--front-gap);
}

/* THE WORDS COME FIRST AND THE PICTURE STANDS TO THEIR RIGHT (his,
   2026-11-05). They are in this order in the markup as well as on the
   screen, so the page is read title-first by anything that reads it aloud. */
#front-words {
  flex: 0 1 var(--text-width);
  min-width: 240px;
  padding-bottom: 60px;
  font-size: var(--text-size);
  color: black;                      /* rule 24: the site is set in black */
}

/* HIS DOCUMENT, SET AS THE PRESS RELEASE PAGE SET IT. Same measure rules,
   same masthead, same quiet note at the foot — the page it came from is
   gone, so these come with it rather than being left behind. */
#front-words .masthead { margin: 0 0 1.2em 0; }
#front-words .masthead p { margin: 0; line-height: var(--text-leading); }
#front-words .masthead .who { margin: 0 0 0.4em 0; }

#front-words p {
  line-height: var(--text-leading);
  margin: 0 0 var(--text-gap) 0;
  orphans: 2;
  widows: 2;
}

#front-words p:last-child { margin-bottom: 0; }

/* The small print at the foot, quieter than the document it follows. */
#front-words .note {
  font-size: 15px;
  margin-top: 1.6em;
  opacity: 0.8;
}

/* THE PICTURE, AND IT STAYS PUT. `sticky` holds it on the line it started
   on while the document scrolls past; `top` is the same number the row's
   first line uses, so the two begin level and the picture never rises above
   it. The height is the window less that line and the margin at the foot,
   and the width follows the file's shape — BOTH ARE WRITTEN BY THE SCRIPT.
   They are not left to CSS, and the reason is worth keeping: a video's
   intrinsic 720px leaks into the max-content width of any box that holds it,
   so a wrapper sized by its contents comes out wider than the picture drawn
   inside it and the words stand too far away. Measured once at 720 against a
   picture drawing 630.8. With a mark underneath, this box holds contents
   again, so the number is set rather than inferred. */
#front-pic {
  position: sticky;
  top: var(--front-top);
  flex: 0 0 auto;
}

#front-pic .frame { display: block; }

#front-pic video,
#front-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  background-color: rgba(0, 0, 0, 0.04);
}

/* SOUND ON / SOUND OFF. His, and set at the weight the DETAIL mark carries
   on the works page: 11px, spaced out, capitals from the stylesheet so a
   screen reader says the words rather than spelling them, and 0.52 against
   the text's black. It says what the click will DO, not what the state is —
   a toggle under a film reads as an invitation. The native control bar has a
   mute button of its own; this one is here because the bar is the browser's
   furniture and easy to miss, and because the sound is worth offering in the
   site's own voice. */
#front-pic .sound {
  display: inline-block;
  margin: 14px 0 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: black;
  opacity: 0.52;
  cursor: pointer;
}

#front-pic .sound:hover { opacity: 0.8; }

/* ── ON A PHONE ───────────────────────────────────────────────────────
   The menu is a bar across the top and the page clears it, the way every
   other page of this show does. The row becomes a column: the moving
   picture at full width, then the document. */
@media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  #front {
    margin: 0;
    padding: 15px 18px 60px 18px;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* THE PICTURE COMES BACK TO THE TOP HERE. On a laptop the words are to
     its left and are read first; stacked, a page that opened with four
     screens of document and put the film underneath would bury the film.
     `order` moves it on the screen without moving it in the markup, so what
     is read aloud is the same on both. It does not stick: on a phone the
     film would cover most of the screen it was meant to leave for reading. */
  #front-pic {
    position: static;
    order: -1;
    width: 100% !important;          /* the script's desktop width, undone */
    margin-bottom: 26px;
  }

  #front-pic .frame { height: auto !important; width: 100% !important; }
  #front-pic video,
  #front-pic img { height: auto; }

  /* The air at the foot is the row's own here, so the words do not add a
     second helping of it. */
  #front-words { padding-bottom: 0; font-size: var(--text-size-phone); }
}