/* ──────────────────────────────────────────────────────────────────────────
   THE MENU. One copy, for every page.

   Until 2026-10-24 this lived three times over — in spa.html, slideshow.html and
   johannesburg.html — with no shared stylesheet or script anywhere on the site.
   Three copies had already cost two bugs in one day: the content margin reading
   253px on one page and 229px on another, and the phone title rules that had to be
   written in a different place in two of the three files. Mikhael's plan is around
   twenty bodies of work, each with its own sub-menu, so three copies were on their
   way to twenty-three.

   WHAT IS HERE: every rule the three files already agreed on, character for
   character. Nothing was redesigned. Visitors should see no change at all.

   WHAT IS NOT HERE, deliberately:
     · How a page marks where you are. The SPA shows an arrow and hides the upright
       mark; the spread viewer never shows the arrow and marks the current spread in
       italic instead. That is a real difference, decided at the time, and unifying
       it would be a design change. Each page keeps its own few lines.
     · Hiding the menu when a phone is turned sideways. slideshow.html and
       johannesburg.html do; the main site does not. That is an open question for
       Mikhael, noted under D2 — so it stays where it is rather than being settled
       here by accident.

   THE ONE THING THAT CHANGED: spa.html set line-height 1.15 on its menu items and
   the other two left it at "normal". Measured on the live site before the change:
   32.7px an item against 32.5px — a fifth of a pixel. The explicit value won,
   because "normal" is whatever the font decides and the typeface is under
   discussion. The copies had drifted; it just had not become visible yet.

   Order matters here. The phone rules come after the wide-screen ones, which is
   what johannesburg.html and slideshow.html had to do by hand — same specificity,
   so the later rule wins.
   ────────────────────────────────────────────────────────────────────────── */

/* ── WHERE A PAGE OF TEXT SITS ────────────────────────────────────────────── */

/* A PAGE OF TEXT IS CENTRED. His, 2026-10-24: he tried both, sharing the poem's
   left margin and then centring, and chose centred — each page in the middle of
   the window on its own width, the poem narrow and the press release wider.

   The image box every other page aligns to is itself centred on the window, so
   the middle of it is simply 50vw and there is no need to repeat the long
   3068/2031 expression here.

   HOW A PAGE USES THIS: set --text-width on :root, then take both values from it.

     :root            { --text-width: 640px; }
     #section-content { width: var(--text-width); left: var(--text-left); }

   The half is computed, never typed, so the width and the centring cannot drift
   apart — change the one number and the block stays centred. It has to be a px
   value and not an em one: --text-width is read here on :root, where an em is the
   16px root size rather than the page's own type size.

   The max() is the floor every page on the site uses: on a window too narrow for
   the centred block to clear the menu, the text stops at the menu instead of
   sliding under it. --content-left is measured from the menu by nav.js; 229px is
   only the value before that measurement lands. */
:root {
  --text-left: max(calc(50vw - var(--text-width, 0px) / 2), var(--content-left, 229px));
}

/* ── A PAGE IN TWO COLUMNS THAT SCROLL ON THEIR OWN ─────────────────────────

   His, 2026-10-25, asked for on About and meant to be used again elsewhere: two
   columns side by side, each scrolling by itself.

   WHY THE INDEPENDENT SCROLL IS THE WHOLE POINT. Two columns were measured and
   argued against earlier the same day, and the objection was that they will not
   balance — on About the lists outweigh the opening by 450 to 650px, so one
   column stops while the other runs on and you scroll past a long empty gutter.
   A column that scrolls on its own has no gutter to leave: it simply stays where
   it is while the other moves. That is what makes the layout work, and it is why
   it should not be reused with the columns locked together.

   HOW A PAGE USES THIS:

     :root { --text-width: 1328px; }       the PAIR's width — 640 + 48 + 640

   THE 640 IS THE SAME 640 a one-column page uses, and for the same reason: at
   18px it is about 67 characters a line, inside the 60–75 that reading wants.
   A pair narrower than this wastes a wide screen — at 968 the columns were 460
   each and stopped well short of the window, which is what he saw and objected
   to on 2026-10-25.

     <div class="two-columns">
       <div class="column"> … </div>
       <div class="column"> … </div>
     </div>

   --text-left is worked out from --text-width exactly as it is for a page of one
   column, just above, so the pair is centred on the window and stops beside the
   menu on a window too narrow to centre it. The columns are equal and share
   whatever width is really available: where the full width will not fit they
   shrink together instead of falling off the right-hand edge.

   WHAT THE PAGE MUST GIVE IT: a positioned ancestor the height of the window,
   and no scrolling of its own — the window holds still and the columns move.
   In the SPA that ancestor is #spa-content, which is already absolute and
   inset: 0.

   NOTHING HERE SAYS WHAT GOES IN THE COLUMNS. On a phone the two stack into one
   scroll, in source order, and the page supplies its own scrolling box as every
   phone layout on this site already does. */
.two-columns {
  position: absolute;
  top: 18px;                             /* the first line, level with the menu */
  bottom: 0;
  left: var(--text-left);
  width: var(--text-width);
  max-width: calc(100vw - var(--text-left) - 40px);
  display: flex;
  gap: var(--column-gap, 48px);
  box-sizing: border-box;
}

.two-columns > .column {
  flex: 1 1 0;                           /* equal, and both give way together */
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* A column that has reached its end does not hand the scroll on to the page
     behind it, which would otherwise bounce the whole window. */
  overscroll-behavior: contain;
  padding-bottom: 60px;
  box-sizing: border-box;
  /* NO SCROLLBARS — his, 2026-10-25, having seen them: a bar inside the page,
     between the two columns, looks like a mistake on a site this plain. Hiding
     them costs nothing in behaviour (the wheel, the trackpad, a finger and the
     keyboard all still scroll) and it also squares the two platforms: a Mac
     overlays its bars and takes no width, Windows reserves 15px and used to make
     the columns 15px narrower than they are here. What tells you a column goes on
     is the same thing that tells you a page does — the text runs off the bottom
     edge. */
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;              /* the old Edge */
}

.two-columns > .column::-webkit-scrollbar {
  display: none;                         /* Safari and Chrome */
}

/* TWO COLUMNS NEED ROOM, AND BELOW 1040px THERE IS NOT ANY. Measured on About:
   the pair gets 100vw minus the menu minus a 40px gutter, so at 900px each column
   is 292px — about 32 characters a line, half of what continuous text wants, and
   most of a list's entries wrapping. Below 1040 each column still has 361px, which
   is the floor. Under that they stack into one, which is the same layout a phone
   gets and is no worse than the one-column page this replaced.

   THE PAGE MUST TAKE THE SCROLLING BACK when they stack, because the columns are
   no longer doing it: a stacked .two-columns is ordinary flow inside whatever the
   page gives it, and something above it has to scroll. */
@media (max-width: 1040px), (max-height: 500px) and (pointer: coarse) {
  .two-columns {
    position: static;
    display: block;
    width: auto;
    max-width: none;
  }

  .two-columns > .column {
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }
}

/* ── THE MENU ON A WIDE SCREEN ────────────────────────────────────────────── */

/* The phone bar does not exist on a wide screen. */
#nav-bar {
  display: none;
}

#nav-buttons {
  position: fixed;
  top: 15px;
  left: 10px;
  /* 20, AND THE REASON MATTERS. When the three copies were merged this was the one
     value that genuinely differed — 20 in spa.html, 10 in the two standalone pages —
     and taking 10 was the fault Mikhael found on 2026-10-24: "completely unusable".
     In the main site `#spa-content` is itself z-index 10, so a menu at 10 loses to it
     on DOM order, and the landing page's two click zones inside it then covered the
     menu: the page-turn cursor over every item, and a click turning the slide instead
     of following the link. The menu has to clear the content layer on every page, and
     nothing on the two standalone pages sits between 10 and 20. */
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A MENU LONGER THAN THE WINDOW SCROLLS (task B45, his: "the menu would scroll
   down once it gets beyond the page's length. I prefer this to all the jumping
   about if items expand and collapse"). It is pinned, so until this anything
   below the bottom of the window could not be reached at all.

   ONLY WHERE THE MENU IS A COLUMN. The three lines of this query are the exact
   opposite of the phone query, written out the long way because the short way
   (`not`) is newer than some of the Safaris this site still serves. On a phone
   the menu is a panel with scrolling of its own and none of this applies.

   THE BOX'S WIDTH MUST NOT CHANGE. `measure()` in nav.js reads this box's right
   edge and every page starts its content from it (rule 22), so there is no
   side padding here and the scrollbar is hidden rather than given room — which
   is also his rule for a scrolling column: no bars (2026-10-25).

   `contain` stops the page behind from moving when the menu reaches its end.
   The foot padding is air under the last line, seen only at the very end. */
@media (min-width: 801px) and (pointer: fine),
       (min-width: 801px) and (pointer: none),
       (min-width: 801px) and (orientation: landscape) and (min-height: 501px) {
  #nav-buttons {
    max-height: calc(100vh - 15px);
    max-height: calc(100dvh - 15px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 30px;
    box-sizing: border-box;
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;            /* the old Edge */
  }

  #nav-buttons::-webkit-scrollbar {
    display: none;                       /* Safari and Chrome */
    width: 0;
    height: 0;
    -webkit-appearance: none;
  }
}

/* ── THE RULER: THE MENU'S OWN SCROLLBAR ──────────────────────────────────────
   His, 2026-11-10: "i generally hate what they look like but could you design
   one that is bespoke to this site and follows the same visual language?" — and
   of the three he tried, "I like the ruler". What follows is its fifth shape,
   every change his.

   It is drawn in the menu's colour. A HAIRLINE runs the height of the window,
   to the LEFT of the menu's text. A TICK stands out from it towards every line
   of the menu and travels with that line as the menu scrolls — the measuring
   edge of the cutting mat, turned upright: heavy for a main item, light for a
   sub-item, each level with the middle of its item. (Sixth round: every tick
   is now the light one, and only the main item you are on is heavy.)

   THE BAR YOU DRAG IS NOT ON THE RULER. The stroke that shows which part of the
   menu you are looking at stands by itself to the RIGHT of the menu, between
   its text and the page.

   THE PAGE YOU ARE ON IS AN ARROW GROWN OUT OF THE RULER. Its tick runs on
   towards the item and ends in an arrow's head — and that is now the ONLY
   arrow: the one the menu used to hang beside a sub-item is this one's head,
   with its tail carried back to the ruler (his: "we combine the arrows into
   one"). On a sub-item it reaches as far as the upright stroke stood and takes
   its place, as the old arrow did. On a main item it is a little longer than a
   tick. The head is drawn after the menu's own arrow glyph — an open chevron a
   third of an em tall — because the glyph comes in one weight and this has to
   come in the tick's.

   THE MENU MOVES RIGHT TO MAKE ROOM, by --rule-room. The box now starts at the
   window's edge so the ruler is inside it — which is what lets the ticks be
   part of the scrolling menu and move with the text exactly, where a tick moved
   by script would trail a finger on an iPad. THE PAGE DOES NOT MOVE: measure()
   takes the room off again before it publishes where content starts, so the
   8px comes out of the gap between the menu and the page (his, 2026-11-10).

   TWO SWITCHES, BOTH SET BY nav.js. `html.nav-ruled` draws the ruler — the
   hairline, the ticks, the arrow, and the room they take. `html.nav-overflows`
   draws the bar, which only a menu longer than the window has any use for.
   The ruler is drawn always (`rulerWhen` in nav.js) — he is living with it —
   and taking it away again is that one word.

   NO WASH BEHIND THE MENU. Washes and tints were tried over three rounds; with
   the bar standing apart he found it looks best with nothing. */
html {
  --rule-x: 8px;                         /* where the hairline stands */
  --rule-room: 0px;                      /* how far the menu's text gives way: */
  /* where the bar stands: 20px + the room is where the menu's text begins */
  --bar-x: calc((20px + var(--rule-room) + var(--show-width, 166px) + var(--content-left, 237px)) / 2);
}

html.nav-ruled {
  --rule-room: 8px;                      /* ...8px, and only while the ruler is drawn,
                                            so the bar stands halfway either way */
}

#nav-rail {
  display: none;
}

@media (min-width: 801px) and (pointer: fine),
       (min-width: 801px) and (pointer: none),
       (min-width: 801px) and (orientation: landscape) and (min-height: 501px) {
  html.nav-ruled #nav-buttons {
    left: 0;
    padding-left: calc(10px + var(--rule-room));
  }

  html.nav-ruled #nav-buttons > .nav-link,
  html.nav-ruled #nav-buttons > .nav-toggle {
    position: relative;
    /* how far this item's own box begins from the window's edge */
    --tick-from: calc(10px + var(--rule-room));
  }

  html.nav-ruled #nav-buttons .nav-sublink {
    --tick-from: calc(26px + var(--rule-room));   /* plus the sub-menu's 16px indent */
  }

  /* A tick for every line of the menu, standing out from the hairline — all of
     them the light one (his, sixth round: "make all of the ticks on the ruler
     the same as the light ones by the sub-menus"). */
  html.nav-ruled #nav-buttons > .nav-link::after,
  html.nav-ruled #nav-buttons > .nav-toggle::after,
  html.nav-ruled #nav-buttons .nav-sublink::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--rule-x) - var(--tick-from));
    width: 6px;
    height: 1px;
    transform: translateY(-50%);
    background: rgb(80, 25, 30);
    opacity: 0.6;
    pointer-events: none;
  }

  /* The page you are on, a main item: its tick goes from the light one to the
     heavy one, and nothing else — no head (his: "instead of adding the arrow
     head, just go from the new lighter tick to the old heavier one"). */
  html.nav-ruled #nav-buttons > .nav-link.selected::after,
  html.nav-ruled #nav-buttons > .nav-toggle.selected::after {
    height: 3px;
    opacity: 1;
  }

  /* The page you are on, a sub-item: out to where the upright stroke stood —
     10px of the item's own padding in from its edge, and the stroke's width. */
  html.nav-ruled #nav-buttons .nav-sublink.selected::after {
    width: calc(var(--tick-from) - var(--rule-x) + 14px);
    height: 7px;
    /* The same weight as the ticks and no more (his, seventh round): 1px, and
       the ticks' own 0.6, which this inherits from the rule above. */
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7'%3E%3Cpath d='M0.9 0.7 4.1 3.5 0.9 6.3' fill='none' stroke='%2350191e' stroke-width='1'/%3E%3C/svg%3E") right center / 5px 7px no-repeat,
      linear-gradient(rgb(80, 25, 30), rgb(80, 25, 30)) left center / calc(100% - 1px) 1px no-repeat;
  }

  /* A spread keeps its upright stroke at full strength — the book's own mark
     (C7) — so its arrow stops short of it. */
  html.nav-ruled #nav-buttons .nav-sublink.nav-cover.selected::after {
    width: calc(var(--tick-from) - var(--rule-x) + 7px);
  }

  /* The menu's own arrow beside a sub-item gives way to the ruler's. Not while
     measure() is reading the menu, which wants every arrow showing. */
  html.nav-ruled #nav-buttons:not(.measuring) .nav-sublink.selected:not(.nav-cover) .arrow {
    display: none;
  }

  /* THE HAIRLINE ENDS AT THE FOOT OF THE RIGHTS LINE — his: "cut it at the bottom
     of the copyright Mikhael Subotzky which will mean it extends a bit every
     time we add things to the menu". So it belongs to the menu and scrolls with
     it, and its length is the length of the menu.

     It is hung from the rights line and run UPWARDS, far further than any menu
     is long. The top of the menu's own box cuts it off, so with the menu at its
     top the line begins where the menu does; and nothing has to measure the
     menu to know where the line should stop.

     0.55: the rights line is itself set at 0.55, and what hangs from it is
     drawn through that. 0.55 of 0.55 is the 0.3 the hairline has always had. */
  html.nav-ruled #nav-rights {
    position: relative;
  }

  html.nav-ruled #nav-rights::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--rule-x) - 10px - var(--rule-room));
    width: 1px;
    /* IT BEGINS ON THE FIRST TICK — his, 2026-11-10: "the top of the ruler
       terminating exactly on the tick next to mikhael subotzky". nav.js works
       out how long that makes it and says so here; until it has, the line runs
       to the top of the menu as it did. */
    height: var(--rule-length, 100000px);
    background: rgb(80, 25, 30);
    opacity: 0.55;
    pointer-events: none;
  }

  /* THE BAR STANDS APART FROM THE RULER, on the other side of the menu (his,
     sixth round: "move the actual scrolling bar away from it to the right").
     Halfway between the last letter of the widest menu item and the edge the
     page's content starts from — both numbers measure() publishes, so it is
     worked out and never typed. Nine pixels to take hold of; what is drawn is
     the stroke alone, lighter than it was twice over — "still thicker than the
     ruler's vertical line but not as thick as it currently is". */
  html.nav-overflows #nav-rail {
    display: block;
    position: fixed;
    top: 15px;
    bottom: 15px;
    left: calc(var(--bar-x) - 4.5px);
    width: 9px;
    z-index: 20;
    touch-action: none;
    cursor: grab;
  }

  #nav-thumb {
    position: absolute;
    top: 0;
    left: 3.875px;
    width: 1.25px;                       /* was 3, then 1.5; the hairline is 1 */
    background: rgb(80, 25, 30);
    opacity: 0.9;
  }
}

/* .nav-toggle is named here because in the main site the 2004–2024 item carries
   that class alone. */
.nav-link,
.nav-toggle  {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-family: "Minion Pro", "Minion Pro Bold", Georgia, "Times New Roman", serif;
  font-weight: bold;
  text-decoration: none;
  color: rgb(80, 25, 30);
  background: none;
  padding: 6px 10px;
  border-radius: 0;
  cursor: pointer;
  font-style: normal;
  /* Explicit, not "normal": see the note at the top of this file. */
  line-height: 1.15;
  transition: font-style 0.2s ease;
}

.nav-link:hover,
.nav-toggle:hover  {
  font-style: italic;
}

#nav-buttons.measuring .nav-link .arrow,
#nav-buttons.measuring .nav-toggle .arrow {
  display: inline;
  order: -1;
}

/* The 2004–2024 menu, matching spa.html (task C6). Here the six stay open
   rather than folding away — the viewer is reached from inside the section, so
   there is nothing to reveal. */
.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
}

.nav-sublink {
  font-size: 15px;
  font-weight: normal;
  padding: 2px 10px;
  /* So the selected item's arrow can be placed against this box — see below. */
  position: relative;
}

.nav-sublink .mark {
  opacity: 0.55;
}

/* ── THE SUB-MENU ITEM YOU ARE ON WEARS THE ARROW ─────────────────────────
   His, 2026-10-25: "if we are on the Installation page the | will be replaced with
   the right arrow", and then, seeing it: Index should do the same, because it was
   jumping the word to the right instead.

   Replaced, not joined: the arrow takes the mark's place rather than sitting beside
   it, so the column keeps its one upright stroke per line.

   THE EXCEPTION IS A SPREAD, and `:not(.nav-cover)` is the whole of it. Front Cover,
   Epigraph I and II and Back Cover are marked the book's way instead — full-strength
   stroke and italic, no arrow — which is the viewer's own decision and the reason
   nav.css otherwise leaves "where am I" to each page. Everything else in a sub-menu
   is a page you are on, and marks itself the way the rest of the site does.

   THE ID IS IN THE SELECTOR ON PURPOSE. spa.html carries the site's top-level rule,
   `.nav-link.selected .arrow`, which pushes the word right to make room; that is the
   right behaviour for a top-level item standing in open space and the wrong one
   inside a column of sub-items. Same specificity and
   a later stylesheet means spa.html would win, so #nav-buttons puts these ahead of
   it. Drop the id and Index goes back to jumping.

   AND THE LABELS STAY IN ONE COLUMN, which is the fiddly part. The arrow is 15px
   wide against the mark's 5.6, so simply swapping one for the other pushed
   `Installation` 9px right of `Press Release` — measured, and it looked like a
   mistake. So the mark keeps its place in the line with `visibility: hidden` rather
   than `display: none`, and the arrow is lifted out of the flow and drawn just to
   its left, in the 16px the sub-menu is already indented by. Nothing after it moves,
   and the words stay level whichever page you are on. */
#nav-buttons .nav-sublink.selected:not(.nav-cover) .arrow {
  display: inline;
  position: absolute;
  left: 0;
}

/* `display` as well as `visibility`, because spa.html's top-level rule sets the mark
   to `display: none` and that would collapse the space the words are lining up on. */
#nav-buttons .nav-sublink.selected:not(.nav-cover) .mark {
  display: inline;
  visibility: hidden;
}

/* ── A TOP-LEVEL ITEM IS MARKED IN ITALIC (his, 2026-10-25) ─────────────────
   His name, a show's title, 2004–2024. They used to take the arrow like anything
   else, which pushed the word 24px right to make room — the last thing in the
   menu that moved when you navigated, and he wanted it still.

   AN ARROW CANNOT SIMPLY BE MOVED OUTSIDE HERE. A sub-item has 16px of indent to
   hang it in; a top-level item sits at the menu's left edge and has nowhere to
   put it. So these are marked the other way, in italic — which is what the whole
   menu already does on the rollover, so it is the site's own gesture rather than
   a new one. His words: "by keeping them italised like they are on rollover?"

   AND ITALIC MEANS "ON IT, OR INSIDE IT" (his, the same sentence). Click into the
   press release and A Johannesburg Landscape stays italic above it; the press
   release itself wears the arrow. So the two marks say different things and read
   together: italic is the body of work you are in, the arrow is the page.

   Done with `:has(+ .nav-submenu .selected)` rather than in script, because the
   main site re-marks the menu on every hash change and the two standalone pages
   mark theirs once when they build it. One CSS rule is true in all three without
   any of them being told about it. */
#nav-buttons:not(.measuring) .nav-link.selected:not(.nav-sublink) .arrow {
  display: none;
}

#nav-buttons .nav-link.selected:not(.nav-sublink),
#nav-buttons .nav-toggle.selected,
#nav-buttons .nav-sublink.selected:not(.nav-cover),
#nav-buttons .nav-link:has(+ .nav-submenu .selected),
#nav-buttons .nav-toggle:has(+ .nav-submenu .selected) {
  font-style: italic;
}

/* A SUB-ITEM TAKES BOTH MARKS (his, 2026-10-25): "the sub menu items need to BOTH
   get the arrow and keep their italics when you click on them." You roll over it
   and it goes italic; you click, and it stays italic and gains the arrow. So the
   rollover is a preview of where you are about to be rather than a separate
   gesture that vanishes on arrival.

   THE HIDDEN STROKE STAYS UPRIGHT, and that is not fussiness. It is invisible but
   it still holds the space the labels line up on, and an italic one is a fraction
   wider — which would push the page you are on out of the column by a hair, the
   same fault as the arrow pushing it 9px, only harder to see. */
#nav-buttons .nav-sublink.selected:not(.nav-cover) .mark {
  font-style: normal;
}

/* ── AND THE MENU IS MEASURED AS IF YOU WERE NOWHERE ───────────────────────
   Every arrow showing, nothing italic, the state no page is actually in. The
   point is that every page measures the SAME menu, so content starts in the same
   place everywhere (rule 22 — this is the old 253-against-229 fault).

   The arrow half of that was already here. The italic half had to be added the
   moment italic became a marking: Georgia's italic "Mikhael Subotzky" is 4px
   wider than its upright, so the landing page measured 233 against 229 on the
   rest — found by measuring, straight after the italic rule was written. Worse,
   an italic show title measures its own two lines wider, which sets --show-width,
   which decides where the second half of the title wraps — so the menu could have
   come out a line taller on the show's own page than anywhere else.

   What it costs: the italic word is up to 4px wider than the box it was measured
   in, and spends that in the 9px gap before the content. Nothing touches, and the
   rollover has always done exactly this.

   Each selector below mirrors one above it with `.measuring` added, so each wins
   on specificity. They are a pair: ADD TO BOTH, or a new marking will be measured
   as part of the menu's width and the site will move sideways again. */
#nav-buttons.measuring .nav-link,
#nav-buttons.measuring .nav-toggle,
#nav-buttons.measuring .nav-link.selected:not(.nav-sublink),
#nav-buttons.measuring .nav-toggle.selected,
#nav-buttons.measuring .nav-sublink.selected:not(.nav-cover),
#nav-buttons.measuring .nav-link:has(+ .nav-submenu .selected),
#nav-buttons.measuring .nav-toggle:has(+ .nav-submenu .selected),
#nav-buttons.measuring .show-short span {
  font-style: normal;
}

.nav-link svg {
  width: 14px;
  height: 14px;
  fill: rgb(80, 25, 30);
}

/* The arrow is never shown here — the current spread is marked in italic instead
   (task C7). It exists so this menu measures the same width as the SPA's, which
   does show it, so that --content-left agrees between the two and the work does
   not jump sideways when you move from a page into the book. */
/* .nav-toggle is named here as well, and that omission was the fault Mikhael found
   on 2026-10-24: the toggle does not carry .nav-link, so this rule did not reach it
   and 2004–2024 wore a back arrow on every page. Any rule below that hides or shows
   part of an item has to name both classes. */
.nav-link .arrow,
.nav-toggle .arrow {
  display: none;
}

/* ── THE SHOW TITLE ON TWO AND A HALF LINES (task D2) ──
   The menu carries the short title on two lines, as the September page set it,
   and the second half below them. Two lines rather than one is his choice and it
   is also what keeps the menu narrower than "Mikhael Subotzky", so the whole
   site's content margin stays where it is (standing rule 22). The second half is
   held to the width of the longest line of the short title, measured in JS, so it
   cannot widen the menu either.

   IT USED TO UNFURL, and stopped on 2026-10-25 — see nav.js for why and for what
   that cost. Nothing here should animate on navigation again: a menu that changes
   height moves everything below it, which is standing rule 21. */
/* THE TITLE RUNS ON, IT IS NOT STACKED IN BLOCKS (his, 2026-10-25): "please move
   (or onto the same line as Landscape". Only the FIRST line is hand-broken — the
   rest of the title is ordinary running text that wraps inside the menu's own
   width, so it reads

       A Johannesburg
       Landscape (or
       Thirteen Tons
       Settled to Brick)

   rather than breaking again after "Landscape" because the markup said to. The
   width it wraps in is --show-width, measured in JS from the longest line of the
   short title and the other top-level items, so the title can never widen the
   menu and move the whole site sideways (standing rule 22). */
.nav-show .text {
  display: block;
  width: var(--show-width, auto);
}

.nav-show .show-short .l1 {
  display: block;
  white-space: nowrap;
  width: max-content;
}

.nav-show .show-short .l2 {
  display: inline;
}

/* ── A TITLE WITH NO SECOND HALF (task D3) ──
   Ponte City's menu item is the whole exhibition title; there is nothing to
   unfurl below it. Such a title is set on the lines it is given in nav.js, every
   one of them its own unbreakable line, and the reason is standing rule 21 — see
   the long note in nav.js's showMarkup. In short: the show you are on is marked
   in italic, italic Georgia is wider, and running text re-wraps when it widens,
   so a title near a wrap point came out one line taller on its own page and shoved
   everything below it down the menu. Hand-broken lines cannot re-wrap.

   `width: auto` rather than the `max-content` of `.l1` above: these lines are
   blocks in a box that is already --show-width wide, so max-content would make
   each one shrink to its own text and the nowrap would have nothing to bite on. */
.nav-show .show-short.alone span {
  display: block;
  white-space: nowrap;
  width: auto;
}

/* The second half is set upright and goes italic on the rollover with everything
   else in the menu, and not before (his, 2026-10-24). */
.nav-show .show-rest {
  display: inline;
}

/* ── A SUBTITLE IS NOT BOLD (task B19, 2026-10-29) ──
   His: "make the subtitles Mikhael Subotzky and Patrick Waterhouse and (or
   Thirteen Tons Settled to Brick) not bold … they still behave the same in
   every other way with the rollover italicisation etc, but they are not bold
   in either state."

   TWO SELECTORS BECAUSE THE SITE HAS TWO KINDS OF SUBTITLE, not because one of
   them is a special case. A show with a second half carries it in `.show-rest`
   as running text; a show whose whole title is hand-broken marks its subtitle
   lines `.sub` in nav.js instead. Both are the same thing to a reader.

   WEIGHT ONLY. Nothing here touches font-style, so the rollover italic still
   comes from .nav-link:hover and the selected show, upright to italic, exactly
   as before — "in either state" is what that means. Nor does it touch size,
   colour or the lines the title is broken on.

   AND IT CANNOT MOVE THE SITE SIDEWAYS, which was the thing to check rather than
   assume. --show-width is the widest of the hand-broken title lines and the
   other top-level items, and the widest of those is the name at the top of the
   menu — "Mikhael Subotzky" at 165.2px, which is bold and stays bold. Lighter
   subtitle lines are narrower than that, so the measurement does not notice
   them and --content-left holds at 229px (standing rule 22). Measured both
   before and after. */
.nav-show .show-short .sub,
.nav-show .show-rest {
  font-weight: normal;
}

/* The markup has no space between the short title and its second half — it used
   to be two separate blocks, where a space would have been a stray indent. Now
   they run together they need one, and a plain breakable space rather than a
   fixed one, so the title can wrap between "Landscape" and "(or" if it ever has
   to. The phone used to carry this rule alone; it is true everywhere now. */
.nav-show .show-rest::before {
  content: " ";
}

/* ── THE 2004–2024 SUB-MENU (task C6) ───────────────────── */
/* 2004–2024 is the section: clicking it goes to the Index and opens the six
   places you can go inside it. It is kept out of .nav-link deliberately, so that
   updateNav() does not also mark it as the current page — the Index sub-item
   already carries that arrow, and two arrows would say it twice. The expanding
   show title (task B2) is a different gesture — a work's name unfurling its own
   second half — so do not unify the two to save code. */
.nav-toggle {
  text-align: left;
  line-height: inherit;
}

.arrow{ 
  font-weight: bold;
}

.nav-submenu[hidden] {
  display: none;
}

/* ── THE RIGHTS LINE (task B23) ────────────────────────────────────────────── */

/* Quieter than Back Cover above it: 13px against the sub-items' 15px, at the 0.55
   the picture credits in the viewer are set at, which is the weight he has already
   approved for a credit. Colour stated rather than inherited — this is not a
   .nav-link, and the menu's rgb(80, 25, 30) is the one exception to the all-black
   rule (rule 24) and lives in this file. No "Minion Pro" in the stack: rule 8 keeps
   it only where removing it would mean touching frozen positioning. */
#nav-rights {
  /* The menu's own gap is 10px; this takes the air to 28 so the line reads as the
     end of the menu rather than as another item after Back Cover. */
  margin-top: 18px;
  padding: 0 10px;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  /* Explicit, not "normal": see the note at the top of this file. */
  line-height: 1.35;
  color: rgb(80, 25, 30);
  opacity: 0.55;
}

/* ── THE MENU ON A PHONE (task C10) ───────────────────────────────────────── */
/* Narrow, OR short and touched — task B11, so a phone held sideways is still a
   phone. These come after the wide-screen rules on purpose; see the top. */
@media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {

  /* THE PHONE MENU (task C10, 2026-10-23). The same one line and the same panel
     as spa.html, because a menu that changed when you opened a spread would not
     be the site's menu. This page is not part of the SPA and carries its own copy
     of everything — rule 11 keeps it a separate page, so the duplication is the
     price of that and is deliberate.

     It buys the viewer something the pages do not get: the menu here was three
     rows over the artwork, and the spread now starts about 60px higher. */
  #nav-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 9px 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    /* Above the panel: the mark that opens it also closes it. */
    z-index: 23;
  }

  .nav-bar-home{
    font-size: 19px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    text-decoration: none;
    color: rgb(80, 25, 30);
    line-height: 1.15;
  }

  /* Two drawn lines, not the ☰ character: a glyph sits wherever its font puts it
     inside its line box, which is why it looked low beside the name. Two lines in
     a box of known height are centred by arithmetic, and they rotate into a cross
     on the way open. Same as spa.html. */
  #nav-open{
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    width: 44px;
    height: 44px;
    margin: -11px -10px -11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #nav-open .bars{
    position: relative;
    display: block;
    width: 28px;
    height: 16px;
  }

  #nav-open .bars span{
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgb(80, 25, 30);
    transition: top 180ms ease, transform 180ms ease;
  }

  #nav-open .bars span:first-child{ top: 2px; }

  #nav-open .bars span:last-child{ top: 12px; }

  html.nav-is-open #nav-open .bars span:first-child{
    top: 7px;
    transform: rotate(45deg);
  }

  html.nav-is-open #nav-open .bars span:last-child{
    top: 7px;
    transform: rotate(-45deg);
  }

  /* As tall as the menu and no taller, so the spread stays visible underneath and
     you can see where you are — his, 2026-10-23. The 82% wash is what makes the
     menu readable over the artwork; it matters more here than on the pages,
     because what is behind is a photograph rather than text. */
  #nav-buttons{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    max-height: var(--screen-height, 100vh);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 52px 20px 22px 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    /* The same margin on the right as on the left, his 2026-10-24 — so a
       title that runs the panel's width stops where the left one starts.
       The safe area was only honoured on the left, which on a notched phone
       held sideways made the two sides disagree. */
    padding-right: max(20px, env(safe-area-inset-right));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 22;

    /* Closed: just above where it lands, invisible, and out of the way. visibility
       is what stops a transparent panel swallowing taps on the spread. */
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 180ms ease, opacity 180ms ease, visibility 0s linear 180ms;
  }

  html.nav-is-open #nav-buttons{
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 180ms ease, opacity 180ms ease, visibility 0s;
  }

  @media (prefers-reduced-motion: reduce){
    #nav-buttons,
    html.nav-is-open #nav-buttons,
    #nav-open .bars span {
      transition-duration: 0s;
    }
  }

  /* A column in the panel, not a wrapping row: there is room for it now. */
  .nav-submenu{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 18px;
  }

  /* His name is in the bar, above the panel and always there, so the panel's own
     copy would be the same name twice on one screen. */
  #nav-buttons > .nav-home{
    display: none;
  }

  /* ABOUT AND CONTACT NEED NOTHING OF THEIR OWN HERE. His name is hidden from the
     panel, so for a moment they were set as top-level items to make up for the
     missing parent — but the name is still right above them in the bar, and he
     read it as parent enough: "the name in the top bar still looks enough like a
     main menu item" (2026-10-25). So they are ordinary sub-items in the panel,
     indented and stroked exactly like Index below them. */

  .nav-link{
    font-size: 19px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    padding: 7px 8px;
    background: none;
    border-radius: 0;
    color: rgb(80, 25, 30);
    font-style: normal;
    transition: font-style 0.2s ease;
  }

  .nav-link:hover{
    font-style: italic;
  }

  /* After .nav-link, not before it: a sublink carries both classes, they have the
     same weight, and the later rule wins. Written the other way round the covers
     came out as big and as bold as About. */
  .nav-sublink{
    font-size: 17px;
    font-weight: normal;
    padding: 5px 8px;
  }

  /* The panel is set two sizes larger than the column, so the rights line follows
     it up. It only shows while the menu is open — the bar holds one line and his
     name, and nothing was going to be added to it. Padding matches the panel's
     items (8px, not the column's 10). */
  #nav-rights{
    margin-top: 16px;
    padding: 0 8px;
    font-size: 14px;
  }
  /* ONE RUN OF TEXT ACROSS THE PANEL (his, 2026-10-24). On a phone the whole
     title shows from the moment the menu opens — the panel has the room, so
     there is nothing to reveal — and it is set as ordinary running text rather
     than in the wide screen's hand-broken lines. Every part of it is inline
     here, so the title wraps where it runs out of panel instead of where the
     markup says, and it stops the same distance from the right edge as it
     starts from the left. Inline also makes the unfurl's grid moot, which is
     why this does not need grid-template-rows any more.

     Both the line breaks and the unfurling are wide-screen gestures: there the
     menu is a column down the left, its width sets every page's content margin
     (rule 22), and a title that ran long would move the whole site sideways. */
  .nav-show .text,
  .nav-show .show-short span,
  .nav-show .show-short.alone span,
  .nav-show .show-rest,
  .nav-show .show-rest-inner{
    display: inline;
    width: auto;
    white-space: normal;
    overflow: visible;
    opacity: 1;
  }
}

/* ── THE PANEL ON A SHORT SCREEN (task B11, 2026-10-23) ───────────────────── */
/* Sideways there are 390px of screen and nine places to go, and at the upright
   spacing the last two — About and Contact — fall off the bottom. The panel does
   scroll, but nothing says so: the item above them ends short of the edge, so it
   reads as the end of the menu. Only the spacing gives way here. The type stays
   19px and 17px, which is the size he asked for in C10. */
@media (max-height: 500px) and (pointer: coarse) {
  #nav-buttons {
    padding-top: 46px;
    padding-bottom: 12px;
    gap: 0;
  }
  .nav-link,
  .nav-toggle {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .nav-submenu {
    gap: 0;
  }
  .nav-sublink {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  /* Sideways there is no room to spare — About and Contact only just fit — so the
     air above the rights line gives way with everything else. */
  #nav-rights {
    margin-top: 8px;
  }
}