/* The installation page's own styling, lifted out of the page on 2026-11-07 (D8).
   Nothing in it names a show — it is page-type styling, so every show's
   installation page links this one file instead of carrying its own copy.
   The ground every page shares (background, wash, mat, notch) is in
   ground.css, which is linked BEFORE this and must stay that way: these
   rules came after it inside the page and some of them rely on that. */

/* HOW FAR THE PHOTOGRAPH STANDS IN FROM THE BOX IT IS CENTRED IN, and it is
   written once because three things need it: the picture itself, the caption
   under its bottom-left corner, and the cross beyond its top-right one. Since
   2026-11-09 the box is the window less a 40px margin — `100vw - 80px` by
   `100vh - 61px` — and a 3:2 picture takes `min(width, height × 1.5)` of it,
   so half of whatever is left over goes down each side. `max(0px, …)` is the
   case where the picture is held by its WIDTH and there is nothing left over:
   then it is 0 and everything sits on the box's own edges, which is what the
   file said before it was centred at all.

   NOTHING MEASURES ANYTHING. There is no script behind this and no element to
   read — it is the same arithmetic the layout itself does, written down, so a
   window of any shape puts all three in the right place with no help. */
:root {
  --picture-inset: max(0px, (100vw - 80px - (100vh - 61px) * 1.5) / 2);
}

#page-wash {
      position: fixed;
      /* NOT `inset: 0`, and the long reason is on `#page-wash` in `text.css`:
         this is a translucent layer over the mat, `inset: 0` makes it as tall as
         the window IS, and on a touch device that changes as Safari's toolbar
         slides back in — so the whole screen had to be re-blended on every frame
         of that animation. `100vh` is the LARGE viewport, the biggest the window
         ever gets, so the wash always covers what can be seen and never resizes.
         On a desktop it is simply the window. */
      top: 0;
      right: 0;
      left: 0;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.6);
      z-index: 1; pointer-events: none;
    }

    /* AND IT GOES TO 0.95 WHILE A PHOTOGRAPH IS OPEN (his, 2026-11-09: "lets just
       try it over the white wash the same as level 2 of the works slideshow").
       0.95 is level two's own number, settled by him on 2026-11-05 — 0.97 covered
       too much of what is behind, 0.90 let too much through — and the phone's
       `#work-wash` already stands a picture on it for the same reason. A
       photograph of a white room reads as a photograph on this; on the 0.6 the
       cutting mat shows through the wall.

       THE GRID KEEPS THE 0.6, which is the page's own ground: a field of 22
       pictures is already nearly all picture, and the mat is what holds it.
       `grid-is-up` is the class viewer.js puts on the root, so there is one
       description of which level is standing.

       IT IS NOT TRANSITIONED, deliberately. This layer is the size of the window
       and translucent, so animating its colour re-blends the whole screen on every
       frame — the note above is about exactly that cost. The picture's own 1200ms
       fade is the movement; the ground under it simply is what it is.

       AND IT GOES OVER THE MENU (his, 2026-11-09: "the wash should cover the menu
       as well (like the works level 2 one)"). That is the half of level two that
       was missing: there the panel is `inset: 0` at z-index 30 and covers
       everything, the menu included, because there is nothing to read but the
       picture. Here the menu is not covered but seen THROUGH the 0.95, at the same
       strength as the mat behind it — which is what the phone's `#work-wash` does
       with his name in B39, and he asked for that in as many words there too.

       THE COST IS THE FOUR LINES BELOW IT, and they are not optional. A wash at 24
       is over the menu (20, 22, 23) AND over the photograph (5), so everything
       that belongs to the photograph has to come up with it. The order between
       them is the order they already had — the click halves above the picture, the
       count and the cross above those — so nothing changes about what is clickable
       or what paints over what; the whole stack simply moves above the menu. */
    html:not(.grid-is-up) #page-wash {
      background-color: rgba(255, 255, 255, 0.95);
      z-index: 24;
    }

    /* The photograph, over the wash that is now over the menu. */
    html:not(.grid-is-up) #stage { z-index: 25; }
    /* The two halves you click to step. They follow #stage in the markup, so at
       the same number they go on painting over it, exactly as at 5. */
    html:not(.grid-is-up) .step-back,
    html:not(.grid-is-up) .step-on { z-index: 25; }
    /* And the two marks that belong to the photograph rather than to the page:
       the count with its credit, and the way out. */
    html:not(.grid-is-up) #picture-count,
    html:not(.grid-is-up) #work-close { z-index: 26; }

    /* THE WAY BACK OUT, and it is the second level's cross to the number (his,
       2026-11-09). `#second-close` in works.css is the copy these came from: same
       corner, same 22px, same 0.55, same hover. The works page's OTHER cross —
       `#work-close` there — is 30px at 500 because it stands out in the pale mat
       beyond the caption column, and this one stands on a 0.95 wash with a
       photograph beside it, which is the second level's case and not that one.

       Fixed rather than absolute: there is no positioned ancestor out here, so the
       two amount to the same thing today, and `fixed` says what is meant — it is
       a control of the window, not of the box. */
    #work-close {
      position: fixed;
      top: 10px;
      /* PEGGED TO THE PICTURE, NOT TO THE PAGE (his, 2026-11-09: "X is now too far
         from the image, it seems pegged to the edge of the page not the image.
         please keep it at the same distance from the right hand edge of the
         picture as the caption is to the bottom").

         HE IS DESCRIBING THE CSS EXACTLY. `right` is measured from the window, so
         a bare number IS pegged to the page — and that cost nothing while the
         photograph ran to 40px off the right, because the two edges moved
         together. Centring the picture that afternoon pulled it away and left the
         cross behind: 13px from the photograph in the morning, 65px by the
         evening, on his screen.

         SO IT CARRIES THE SAME `--picture-inset` THE PICTURE DOES, and the two now
         move as one at every width. **The number beside it is the caption's own
         gap**, which is what he asked it to match: the caption's box stands 17px
         under the photograph's bottom edge, so the cross's ink stands 17px beyond
         its right edge. 1px is what puts it there — the button is 34.1px wide and
         its × is about 9.7px of ink in the middle of that, so 12.2px of the box
         is air before the mark begins. Measured, not reasoned: 17.1px at 1512×982,
         17.1px at 1280×900 and 17.1px at 1024×768.

         THE 3px IT HELD FOR A FEW HOURS was the middle of the 40px band of mat,
         which was the right answer while the picture's edge and the window's were
         40px apart and is meaningless now that they are not. */
      right: calc(1px + var(--picture-inset));
      /* Over the picture and the count. It is raised again, with them, by the
         `grid-is-up` rules at the top of this file once the wash goes over the
         menu — this is the number it keeps when there is no wash to clear. */
      z-index: 10;
      border: 0;
      margin: 0;
      padding: 6px 10px;
      background: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 22px;
      line-height: 1;
      color: black;
      opacity: 0.55;
      transition: opacity 200ms ease;
    }

    #work-close:hover { opacity: 1; }

    #work-close:focus-visible {
      outline: 1px solid rgb(80, 25, 30);
      outline-offset: 2px;
    }

    /* Nothing to close on the grid. viewer.js also sets `hidden` on it there —
       this is the stylesheet's own statement of the same thing, so the rule holds
       for a page that arrives on the grid before any script has run. */
    html.grid-is-up #work-close,
    #work-close[hidden] { display: none; }

    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: "Minion Pro", Georgia, "Times New Roman", serif;
      color: black;
    }

    /* CENTRED ON THE WINDOW, NOT IN THE COLUMN BESIDE THE MENU (his, 2026-11-09:
       *"the pictures here in the installation slideshow need to be centered on the
       page without taking into consideration the space where the menu is under the
       wash — the same as the level two slideshow on the works page"*).

       IT FOLLOWS FROM THE WASH AND IT IS THE SAME ARGUMENT. Until this morning the
       menu stood beside the photograph, so the photograph began where every page's
       content begins — `--content-left`, 229px — and the two read as one layout.
       Now the wash is over the menu, the menu is a faint thing BEHIND the picture
       rather than a column next to it, and a 229px indent is an indent against
       nothing: the photograph sat right of centre with no visible reason. Level two
       of the works has never had that problem because it was built this way from
       the start — `#second-level` is `inset: 0` and its picture box is 70px off
       each side of the WINDOW.

       SO THE LEFT EDGE IS NOW 40px, THE SAME AS THE RIGHT, and the box is the
       window less its own margins. The top stays at 21px, the line the menu's name
       starts on (rule 23), because that is the one thing every level of every page
       here agrees on and it did not depend on the column.

       **IT MAKES THE PHOTOGRAPH BIGGER AS WELL AS CENTRED, and that is not a side
       effect to be apologised for — it is the same thing seen from the other end.**
       At 1512×982 the box was 1243 wide and the picture was held by its WIDTH at
       1243×829; the box is now 1432 wide, the picture is held by its HEIGHT
       instead, and it comes out 1381×921. 70px of air each side rather than 229
       and 40. If he wants it recentred at the old size instead, this is the one
       number to change — but the 40 is what makes it level two's box.

       A grid of one cell, not a flex row: the two layers below sit in the same cell
       so one view can fade into the next. */
    #stage {
      width: 100vw;
      height: 100vh;
      /* Above the wash — without this the 60% white sits on top of the photograph
         and bleaches it. */
      position: relative;
      z-index: 5;
      box-sizing: border-box;
      padding: 21px 40px 40px 40px;
      display: grid;
      grid-template-areas: "view";
    }

    /* Two layers taking turns, the same 1200ms cross-fade as the works and the
       landing page. ALL 22 EXPORTS ARE 3:2, which is why there is no table of
       per-picture ratios here as there is on the show page — if a later batch is
       not all the same shape, that table is what this page will need. */
    .picture-layer {
      grid-area: view;
      aspect-ratio: 3 / 2;
      max-height: 100%;
      align-self: start;
      /* AND CENTRED ACROSS THE CELL, which has to be said out loud now that the
         cell is wider than the picture. A grid item normally STRETCHES to its
         cell, and while the box was narrow enough to hold the picture by its
         width that was the same thing as centring it. It is not any more: an item
         with an `aspect-ratio` is not stretched — the ratio gives it a size of
         its own — so `normal` alignment falls back to `start` and the photograph
         sat flush against the left edge of a box 50px wider than itself.
         Measured, 2026-11-09: 40px of air on the left and 90.5px on the right,
         which is the fault this was meant to fix, moved along by 25px. */
      justify-self: center;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
      min-height: 0;
      opacity: 0;
      transition: opacity 1200ms ease;
      pointer-events: none;
    }

    .picture-layer.is-current {
      opacity: 1;
    }

    .picture-layer img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }

    /* While a picture is being fetched. A plain dim, not a spinner, because nothing
       else on this site has one — the same treatment as the works and the spreads. */
    .picture-layer.is-loading img {
      opacity: 0.6;
      transition: opacity 200ms ease;
    }

    /* The two halves of the screen you click to step through, with the same drawn
       cursors as the works and the book. */
    .step-back, .step-on {
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      z-index: 5;
    }

    .step-back {
      left: 0;
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='10' y='25' font-size='16' fill='%23501219' font-family='Helvetica, sans-serif'%3E%E2%86%90%3C/text%3E%3C/svg%3E") 12 12, w-resize;
    }

    .step-on {
      right: 0;
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='10' y='25' font-size='16' fill='%23501219' font-family='Helvetica, sans-serif'%3E%E2%86%92%3C/text%3E%3C/svg%3E") 12 12, e-resize;
    }

    /* Where you are in the 22, and who took the photograph, in the bottom-left
       corner of the box — by the same arithmetic the show page uses to put its play
       sign there, so the two pages mark that corner in the same place without
       either measuring anything. The works do not count themselves because they are
       the work; these are a record of a room, and knowing how far through it you
       are is part of reading them.

       The credit sits to the right of the count and at the same subtle weight (his,
       2026-10-25) — one line, so it reads as a footnote to the picture rather than
       as a caption competing with it.

       AND IT MOVED WITH THE PICTURE, 2026-11-09. `--content-left` used to be both
       things at once: the page's content line AND the photograph's left edge, since
       the photograph began there. Now the photograph is centred on the window, so
       those are two different places, and this line is the picture's — a footnote
       to it — not the page's. Left at 229 it would have floated 164px inside the
       photograph's own corner.

       THE ARITHMETIC IS THE SAME ARITHMETIC AS THE `top` BELOW IT, which has always
       worked the box out rather than measuring it. It is `--picture-inset` now,
       named at the head of this file, because the cross beyond the photograph's
       other corner needs the very same number and two copies of a sum like this
       one would drift. */
    #picture-count {
      position: absolute;
      left: calc(40px + var(--picture-inset));
      top: calc(21px + min(100vh - 61px, (100vw - 80px) * 2 / 3) + 4px);
      z-index: 6;
      font-size: 13px;
      line-height: 1;
      color: rgb(80, 25, 30);
      opacity: 0.55;
      pointer-events: none;
    }

    #picture-count .credit {
      margin-left: 12px;
    }

    /* ── THE FIRST LEVEL: THE WHOLE ROOM AT ONCE ───────────────────────────
       HIS, 2026-11-09: *"lets start with a grid like the works page. but please
       make the thumbnails here 3:2 rather than 4:3 and use the existing
       installation images to make them seeing as they almost always 3:2
       already. clicking on any of them should take you to that image on the
       existing slideshow, exactly as it currently is working."*

       They are 3:2 EXACTLY — all 22 exports are 1800x1200 — so a tile is a
       straight reduction of the photograph to 810x540 and not one of them is
       cropped. That is the whole difference from the works page, where fifteen
       shapes had to be cut by hand to 4:3 before a regular field was possible.

       IT IS THE WORKS PAGE'S FIELD TO ITS OWN NUMBERS: three columns, the same
       4.6% gutter, the same left edge, the same top line. Three things differ
       and all three are this page's: the shape, nothing written under a tile
       (an installation view has no title, and the one credit goes at the foot),
       and NO GRID ON A PHONE — the phone's column of the whole room is already
       an index of it, and he asked for the phone to stay exactly as it is.

       The works page's copy of these rules is in works.css and the two are
       deliberately not shared: each page of pictures keeps its own styling
       (D12), and these two disagree about every number that matters. */
    #work-grid {
      position: relative;
      z-index: 6;
      box-sizing: border-box;

      /* IT SCROLLS ITSELF, AND IT HAS TO. This page's body is `overflow: hidden`
         and one screen tall, because the level underneath is a slideshow that
         never scrolls — so a grid left to grow past the fold has its last rows
         cut off with no way to reach them. The works page found this by looking;
         eight rows of 22 is twice as far past the fold again. */
      height: 100vh;
      overflow-y: auto;
      /* The page behind it cannot scroll anyway, so this only stops the rubber
         band at the ends from reaching the window. */
      overscroll-behavior: contain;

      /* The same left edge as the stage and every other page: the column the
         whole site writes in, measured off the menu by nav.js (rule 22). The
         top line is the stage's own 21px, so the first row of tiles starts
         where a single view starts (rule 23). */
      padding: 21px 40px 72px var(--content-left, 229px);

      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      /* THE COLUMN GUTTER IS THE WORKS PAGE'S, and it is a percentage for the
         reason given there: three columns always fill the width between the menu
         and the right margin, so a tile is only made smaller by taking the space
         off it and putting it in the gutter — 4.6% twice leaves 90.8% for three
         tiles, which is the 95% he settled on.

         THE ROW GAP IS NOT THE WORKS PAGE'S, and that is the one number here
         that had to be chosen rather than copied. There it is 45px because a
         title sits IN the gap — one line of 13px and its 10px margin, so 45px
         of gap puts 72px between a tile and the one under it. Nothing sits in
         this gap, so 45 would have read as 45 and the rows would have come in
         tighter than the columns. 53px is what 4.6% comes to on his own 1512px
         screen, so the field is evenly spaced there and the rows hold still as
         the window changes while the columns breathe. */
      gap: 53px 4.6%;
      align-content: start;
    }
    /* #work-grid is display:grid and so is #stage, and both of those beat the
       browser's own [hidden] rule. Without these two lines the level being
       hidden stays on the screen underneath the one being shown. */
    #work-grid[hidden],
    #stage[hidden] { display: none; }

    /* AND THE COUNT GOES WITH THE STAGE. It is not inside it — it is positioned
       against the page, outside the box, for the reason given in the page's own
       comment — so hiding the stage leaves "7 / 22  Anthea Pokroy" floating over
       the grid. There is no current picture on a grid to count. viewer.js puts
       `grid-is-up` on the root; see openGrid(). */
    html.grid-is-up #picture-count { display: none; }

    .grid-work {
      /* Each picture's own address, so it opens in a new tab and copies like a
         link. `?image=NN` — the address this page has always had for one view. */
      display: block;
      text-decoration: none;
      color: #000;
      min-width: 0;
    }
    .grid-frame {
      display: block;
      width: 100%;
      /* The shape of the photographs themselves. CHANGE THIS AND THE TILES
         TOGETHER, never one alone: a frame that disagrees with the file
         letterboxes every tile on the page. */
      aspect-ratio: 3 / 2;
      /* A faint box while the tile is still coming, so the page does not jump
         as each one lands. */
      background: rgba(0, 0, 0, 0.045);
    }
    .grid-frame img {
      display: block;
      width: 100%;
      height: 100%;
      /* `contain`, never `cover`: the tile is already the box's shape, so these
         agree today — and a later batch that is not all 3:2 shows whole, with
         air round it, rather than being silently cropped. */
      object-fit: contain;
    }
    /* The picture lifts very slightly under the pointer — enough to say it is a
       door, not enough to be an effect. The works page's own gesture, so the two
       grids answer a pointer the same way. Nothing moves for anyone who has
       asked their system for less movement. */
    .grid-work .grid-frame { transition: opacity 180ms ease; }
    .grid-work:hover .grid-frame,
    .grid-work:focus-visible .grid-frame { opacity: 0.74; }
    .grid-work:focus-visible { outline: 1px solid rgba(0, 0, 0, 0.55); outline-offset: 6px; }
    @media (prefers-reduced-motion: reduce) {
      .grid-work .grid-frame { transition: none; }
    }

    /* THE CREDIT, ONCE, UNDER THE WHOLE FIELD — built by viewer.js from the
       names in the files, and the same line the phone's column ends on. Under
       every tile was tried on the column and he was right about it: "the
       repetition is too much" (2026-10-25). It spans the three columns rather
       than taking a cell, or it would sit in the first one with two empty
       beside it. Same 13px and same subtle weight as the count it replaces. */
    #work-grid .grid-credit {
      grid-column: 1 / -1;
      /* More air than between the rows, so it reads as the end of the field
         rather than as another thing in it. */
      margin: 15px 0 0 0;
      font-size: 13px;
      line-height: 1;
      color: rgb(80, 25, 30);
      opacity: 0.55;
    }

    /* The phone's column of all 22, built by script and empty on a wide screen,
       where it is display:none and so never fetches anything. */
    #picture-scroll {
      display: none;
    }

    #error-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 15px 20px;
      border-radius: 2px;
      font-size: 14px;
      z-index: 20;
      display: none;
    }

    #error-message.visible {
      display: block;
    }

    /* An iPad is touched but not short, so it keeps the slideshow and only needs
       the measured screen height — the same exception the show page makes. */
    @media (pointer: coarse) and (min-width: 768px) {
      #stage {
        height: calc(var(--vh, 1vh) * 100);
      }

      .picture-layer {
        align-items: center;
      }

      .step-back, .step-on {
        height: calc(var(--vh, 1vh) * 100);
        top: 0;
      }

      /* AND THE GRID IS A BOX OF THAT HEIGHT TOO, because it is its own
         scroller: 100vh on a touch device is the LARGE viewport, taller than
         what can be seen, so the last row would sit under Safari's toolbar with
         the scroll already at its end. --vh is the real innerHeight on this
         page (vhMode 'always'). */
      #work-grid {
        height: calc(var(--vh, 1vh) * 100);
      }
    }

    /* THE SCROLL, NOT THE SLIDESHOW — the treatment the landing page and the works
       both take on a phone (his, 2026-10-24), to the same measurements. Offset and
       shortened rather than padded: padding inside a scrolling box scrolls away
       with the content, and a picture would then pass behind the menu bar, which
       is translucent. --nav-bottom and --screen-height are measured by nav.js
       rather than guessed at. */
    @media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
      #stage {
        position: fixed;
        top: calc(var(--nav-bottom, 40px) + 10px);
        left: 0;
        padding: 0;
        box-sizing: border-box;
        height: calc(var(--screen-height, 100vh) - var(--nav-bottom, 40px) - 10px);
        width: 100vw;
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      /* 14px of cutting mat down each side, 26px between the pictures, 30px of air
         under the last one. max() on the sides because of the notch — turned
         sideways a phone reports an inset of about 50px on the notch side, and a
         photograph drawn under it loses that strip. */
      #picture-scroll {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
      }

      .picture-scroll-item {
        margin-bottom: 26px;
      }

      /* `last-of-type`, not `last-child`: the credit line below is the column's
         last child now, so `last-child` had quietly stopped matching anything and
         the gap before the credit was 26 + 18 by accident rather than by choice. */
      .picture-scroll-item:last-of-type {
        margin-bottom: 0;
      }

      /* The height comes from the aspect-ratio, and that is load-bearing twice
         over: it keeps the page from jumping as you scroll, and it gives a picture
         with no src yet a real height. Without it Safari draws a src-less image as
         nothing, all 22 pile up in the first screen, and the observer below sees
         every one of them as on screen and fetches the lot at the front door. */
      #picture-scroll img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
      }

      /* Nothing here steps, so nothing here has a control: no cross-fading layers,
         no halves of the screen to tap, and no count — the column shows you where
         you are by how far down it you have come.

         AND NO GRID (his, 2026-11-09: "installation page on mobile should stay
         exactly like is currently"). viewer.js never opens it at this width —
         `gridOnPhone: false` — so it is never built and never fetches a tile;
         this line is what makes that a stated rule of the page rather than a
         consequence of a flag, and it covers a window dragged across the line. */
      .picture-layer,
      .step-back,
      .step-on,
      #picture-count,
      #work-grid,
      /* AND NO CROSS. It closes a photograph and goes back to the grid; there is
         no grid here and no photograph to close — the column is the whole room
         and the menu is the way off the page, exactly as it has always been. */
      #work-close {
        display: none;
      }

      /* AND THE WASH STAYS AT 0.6. The rule above is written against
         `grid-is-up`, which a phone never carries, so without this line the
         phone would take the 0.95 — and the phone is unchanged by his
         instruction.

         THE SELECTOR HAS TO BE THE SAME SHAPE AS THE ONE IT UNDOES, and that is
         not tidiness. A plain `#page-wash` is one id; `html:not(.grid-is-up)
         #page-wash` is an id, a class and an element, so it wins wherever it
         stands — a media query lower down the file does not change that. Written
         plainly first, it lost, and the phone took the 0.95 (measured, 2026-11-09). */
      html:not(.grid-is-up) #page-wash {
        background-color: rgba(255, 255, 255, 0.6);
        /* AND BACK UNDER THE MENU. The wash goes to 24 on a wide screen so that it
           covers the menu; here the menu bar is fixed across the top and the
           column is meant to pass BEHIND it, which is the whole reason that bar is
           translucent. At 24 the wash would sit over it. */
        z-index: 1;
      }

      /* And the stage with it. It is raised to 25 on a wide screen to clear that
         wash; on a phone it is the scrolling column and belongs under the menu bar
         for the same reason. The other three raised rules need no undoing — the
         click halves, the count and the cross are all `display: none` here. */
      html:not(.grid-is-up) #stage {
        z-index: 5;
      }

      /* THE CREDIT STILL HAS TO APPEAR, ONCE. On a wide screen it sits beside the
         count, and the count is hidden here. It was under every picture for an
         hour and he was right about it: "the repetition is too much" (2026-10-25).
         So it is one line at the foot of the scroll, at the same subtle weight —
         you arrive at it having seen the room, which is where a credit belongs. */
      #picture-scroll .column-credit {
        /* More air than the 26px between the pictures, so it reads as the end of
           the scroll rather than as another item in it. */
        margin: 34px 0 0 0;
        font-size: 13px;
        line-height: 1;
        color: rgb(80, 25, 30);
        opacity: 0.55;
      }
    }