/* ══════════════════════════════════════════════════════════════════════
   THE GALLERY, IN THE LANGUAGE OF THE PAGE.

   The gallery was built before the ground went dark. It centres every
   placard, gives every room a full screen, and speaks in the old
   stylesheet's type. Next to index-v5 it reads as a different site.

   Nothing inside the exhibits is touched. They are the app, running,
   and they already carry both grounds through the ramp. What changes
   is the room around them: one grid, left-aligned, so a heading starts
   exactly where the screen below it starts.
   ══════════════════════════════════════════════════════════════════════ */

/* the old sheets still paint the body and lay a fixed sheen over it */
body.v5::before{display:none}
body.v5{font:400 17px/1.62 var(--v-sans);overflow-x:clip}
.desk{display:none !important}

/* ── a room ──────────────────────────────────────────────────────── */
.band.room{min-height:0;display:block;padding:clamp(54px,7.5vh,110px) 0;gap:0}
.band.room::before{display:none}
.band.room .wrap{display:block}

/* the placard, on the same grid as everything else */
.placard{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  text-align:left;max-width:none;margin:0 0 clamp(26px,3.6vh,46px)}
.placard h2{margin:16px 0 0;max-width:none;text-align:left;color:var(--v-ink);
  font:600 clamp(30px,4.2vw,58px)/1.0 var(--v-sans);letter-spacing:-.044em}
.placard p{margin:clamp(16px,2vh,22px) 0 0;text-align:left;
  font:400 clamp(15px,1.4vw,18px)/1.62 var(--v-sans);color:var(--v-soft);
  letter-spacing:-.008em;max-width:52ch}

/* the one thing this page has that the front page does not: you can
   put your hands on it. It is an instruction, so it is given the
   colour the app uses when it is listening. */
.touch{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,2.4vh,26px);
  padding:9px 15px 9px 13px;border-radius:999px;
  font:500 12.5px var(--v-sans);letter-spacing:-.01em;color:var(--v-mid);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-cr) 40%,transparent)}
.touch::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--v-cr);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--v-cr) 16%,transparent)}

/* ── the object ──────────────────────────────────────────────────── */
.band.room .exhibit{justify-content:flex-start;width:100%}
.band.room .exhibit > *{margin:0}
/* the exhibits carry the old sheet's shadow, built for a cream wall.
   On this ground a screen has to sit in the same light as the film. */
.band.room .frame,.band.room .plate,.band.room .stage{
  box-shadow:0 0 0 1px var(--v-line),0 2px 6px rgba(0,0,0,.5),
             0 34px 70px -30px rgba(0,0,0,.75),0 90px 150px -70px rgba(0,0,0,.9)}
html.light .band.room .frame,html.light .band.room .plate,html.light .band.room .stage{
  box-shadow:0 0 0 1px rgba(20,18,15,.07),0 2px 6px rgba(20,18,15,.05),
             0 30px 60px -28px rgba(20,18,15,.20),0 80px 140px -80px rgba(20,18,15,.22)}
/* the old rooms dimmed an exhibit until its room was "lit". The band
   already arrives on scroll, so the second gate only made it grey. */
.band.room .exhibit{opacity:1;transform:none;filter:none}
.tryhint{display:none}

/* ── the rooms not built yet ─────────────────────────────────────── */
.rest{border-top:1px solid var(--v-line);margin-top:clamp(20px,3vh,34px)}
.rest a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(16px,2.4vw,40px);padding:clamp(18px,2.4vh,26px) 0;
  border-bottom:1px solid var(--v-line);text-decoration:none;color:inherit;
  transition:opacity .2s var(--v-glide)}
.rest a:hover{opacity:.62}
.rest .n{font:400 11px var(--v-mono);color:var(--v-dim);letter-spacing:.2em}
.rest .t{font:500 clamp(17px,1.9vw,24px) var(--v-sans);letter-spacing:-.028em;
  color:var(--v-ink)}
.rest .s{font:400 14px var(--v-sans);color:var(--v-faint);text-align:right}
@media(max-width:720px){
  .rest a{grid-template-columns:auto 1fr}
  .rest .s{display:none}
}

/* ── room 06: what was said, in the page's own voice ─────────────────
   The old sheet set a spoken line in italic serif inside quote marks.
   That was tried on the front page and thrown out: a second typeface is
   what makes a page look like a template. Speech is told apart here the
   way it is there, by weight and by the rule beside it in the colour
   the app uses when it has heard you. */
.band.room .pairs{margin-top:clamp(26px,3.4vh,42px)}
.band.room .pairs .ph{font:600 9.5px var(--v-sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--v-faint);border-bottom:1px solid var(--v-line)}
.band.room .pairs .sd,.band.room .pairs .ld{border-bottom:1px solid var(--v-line)}
.band.room .pairs .sd{position:relative;font-family:var(--v-sans);font-style:normal;
  font-weight:300;font-size:clamp(16px,1.6vw,20px);line-height:1.3;
  letter-spacing:-.022em;color:var(--v-soft);
  padding:clamp(15px,1.9vh,21px) 0 clamp(15px,1.9vh,21px) clamp(14px,1.2vw,18px);
  margin-left:0;border-radius:0}
.band.room .pairs .sd[data-say]::before{content:"";position:absolute;left:0;
  top:clamp(15px,1.9vh,21px);bottom:clamp(15px,1.9vh,21px);width:2px;border-radius:2px;
  background:var(--v-cr);opacity:.3;transition:opacity .3s var(--v-glide)}
.band.room .pairs .sd[data-say]:hover{color:var(--v-mid);background:none}
.band.room .pairs .sd[data-say]:hover::before{opacity:.65}
.band.room .pairs .sd.on{color:var(--v-ink)}
.band.room .pairs .sd.on::before{opacity:1}
.band.room .pairs .ld{min-height:clamp(54px,7vh,64px)}

/* ── the spoken line, everywhere it appears ──────────────────────────
   Two more italic serif quotes were left inside the app windows: the
   sentence that made the dinner page, and the line the creature heard.
   Same rule as the front page and as room 06. One typeface, and the
   colour of having been heard. */
.band.room .psaid,.band.room .csaid{
  font-family:var(--v-sans);font-style:normal;font-weight:300;
  letter-spacing:-.02em;color:var(--v-mid)}
.band.room .csaid{position:relative;padding-left:14px}
.band.room .csaid:not(:empty)::before{content:"";position:absolute;left:0;top:.14em;
  bottom:.12em;width:2px;border-radius:2px;background:var(--v-cr)}

/* ── room 07: the reply gets written where you already were ──────────
   The room used to hear a sentence and put a reminder under it, which
   rooms 02 and 06 already show twice. Its claim is a different one: it
   never opens a window, and it finishes what you were in the middle of.
   So the mail you had open is the thing that changes. */
.band.room .cquote{display:flex;flex-direction:column;gap:11px;opacity:.5;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--v-line)}
.band.room .creply{display:flex;flex-direction:column;gap:9px;min-height:96px}
.band.room .rline{font:400 14.5px/1.5 var(--v-sans);color:var(--v-ink);
  letter-spacing:-.012em}
.band.room .rline:first-child{color:var(--v-soft)}
.band.room .creply .caret{display:inline-block;width:2px;height:17px;
  background:var(--v-cr);animation:cblink 1.1s steps(1) infinite}
@keyframes cblink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* what is left over when it goes: a sentence, arriving after the writing
   has finished, so the absence is the last thing you read */
.band.room .cgone{margin-top:clamp(18px,2.4vh,26px);opacity:0;
  transform:translateY(8px);
  transition:opacity .6s var(--v-glide),transform .6s var(--v-glide)}
.band.room .cgone.in{opacity:1;transform:none}
.band.room .cgone p{margin-top:12px;font:400 15px/1.6 var(--v-sans);
  color:var(--v-soft);max-width:52ch}

/* the creature comes in from the edge of the window, not onto its corner:
   the grip point sits just past the right edge, and the window clips the
   rest, so half of it is outside, as on a Mac. 2026-09-02. */
.cwin .creature{left:calc(100% + 16px);top:24%;z-index:6}

/* the app's creature on the window's edge, as the app hangs it: grip on the
   edge, about a third of the way down, half of the body outside. No meter
   under it: the app has none. */
.stage .cpet{position:absolute;right:-50px;top:calc(26px + 7%);width:clamp(96px,8.5vw,124px);z-index:6;pointer-events:none}
.stage .cpet svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(-6px 10px 22px rgba(0,0,0,.55))}
html.light .stage .cpet svg,.light .stage .cpet svg{filter:drop-shadow(-5px 9px 18px rgba(20,18,15,.24))}
.stage.talking .cpet{animation:none}
#cmeter,.cmeter{display:none!important}
.stage .creature{display:none}