/* /gallery only. styles.css is the editor's stylesheet and its phone rules clip the page to
   one screen (`height:100svh; overflow:hidden`) so the shutter is always reachable without
   scrolling. A wall has to scroll, so this file releases that lock rather than weakening it in
   styles.css — the --chrome contract documented in the README stays intact and untouched,
   because it never applies here. */

  /* The editor's shell is derived from its stage, so it stops at 1200px to keep the canvas and
     the slider panel next to each other. Nothing on this page is paired with anything, and the
     whole point of a wall is how much of it you can see at once, so widen it here. Set on the
     body rather than on main, so the header, the wall and the footer stay on one edge. */
  body.page{--shell:min(1500px,95vw);--mg:clamp(4px,.55vw,9px)}

  main.wall{max-width:var(--shell);margin-inline:auto;width:100%;display:block;
    padding:clamp(16px,2.6vw,28px) var(--pad) var(--pad)}

  .mark a{text-decoration:none}
  .mark a:hover{color:var(--cyan)}

  .wall-bar{margin-bottom:clamp(14px,2vw,22px)}
  .wall-bar .note{margin:10px 0 0}

  /* Same shape as the one on /stats. Kept as its own copy rather than moved into styles.css,
     which is the editor's sheet and is loaded on every page: two pages using a component is not
     yet a shared component, and the editor has no banner. */
  .banner{border:1px solid rgba(53,200,255,.28);background:rgba(21,96,232,.1);border-radius:10px;
    padding:12px 14px;font-size:12.5px;color:var(--ink);margin-bottom:clamp(14px,2vw,22px);
    max-width:74ch}
  .banner b{font-weight:600}
  .banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
    background:rgba(3,6,28,.6);padding:1px 5px;border-radius:4px}
  .banner.bad{border-color:rgba(255,120,120,.4);background:rgba(120,20,20,.18)}

  /* ---------- the feed ----------
     Pinterest without the crop. Every render this site makes is square, so ragged column heights
     would have to be cut out of somebody's face; the density comes from span instead — mostly
     1×1, one 2×2 every seventh tile, and `dense` backfills the gaps the big ones leave behind.
     Six columns is where a 2×2 still reads as an accent rather than a takeover. */
  .feed{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--mg);
    grid-auto-rows:1fr;grid-auto-flow:dense}
  @media (max-width:1200px){.feed{grid-template-columns:repeat(5,minmax(0,1fr))}}
  @media (max-width:980px){.feed{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (max-width:720px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:460px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}

  .pin{position:relative;aspect-ratio:1;display:block;overflow:hidden;border-radius:10px;
    background:linear-gradient(150deg,#0A1E6B,#03061C);
    box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s ease,box-shadow .18s ease}
  .pin.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  /* Under seven tiles there is no rhythm for a 2×2 to be part of, so it is just one tile four
     times the size of the empty space next to it. gallery.js sets `.sparse`; see `isBig` there. */
  .feed.sparse .pin.big{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .pin:hover{transform:scale(1.012);z-index:2;
    box-shadow:inset 0 0 0 1px rgba(53,200,255,.55),0 0 30px rgba(53,200,255,.16)}
  .pin:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan)}
  .pin img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
  .pin.lit img{opacity:1}
  .pin.dead{display:grid;place-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,120,120,.3);background:none}
  .pin-gone{color:#FFA0A0;font-size:11.5px}

  /* The style name, which is the one thing a stranger's picture cannot tell you by itself. */
  .pin-tag{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;
    font-size:11.5px;color:#EAF3FF;pointer-events:none;opacity:0;transform:translateY(4px);
    background:linear-gradient(transparent,rgba(2,4,15,.85));
    transition:opacity .18s ease,transform .18s ease}
  .pin:hover .pin-tag,.pin:focus-visible .pin-tag{opacity:1;transform:none}
  /* on a touch screen there is no hover, and a label that never appears is just dead weight */
  @media (hover:none){.pin-tag{opacity:1;transform:none;padding:22px 9px 7px;font-size:11px}}

  /* The sentinel doubles as the place where the end of the feed is said out loud. A wall that
     silently stops producing tiles is indistinguishable from one that broke. */
  .more{min-height:1px;color:var(--mute);font-size:12.5px;text-align:center;
    padding:clamp(16px,2.4vw,26px) 0 2px}
  /* Centred is right under a full-width mosaic and wrong under three tiles, where it lands in the
     empty half of the row a couple of hundred pixels from the nearest picture. */
  .feed.sparse ~ .more{text-align:left}

  .empty{margin-top:clamp(6px,1.4vw,14px)}
  .empty[hidden]{display:none}
  .empty-say{color:var(--mute);font-size:13px;max-width:68ch;margin:0 0 clamp(18px,2.4vw,30px)}

  .lots{display:grid;gap:clamp(30px,3.6vw,54px)}

  /* The heading sticks while its own section is on screen, so you always know which style you
     are looking at. On a wall this long the alternative is scrolling back up to check. */
  .lot-head{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:10px;
    padding:9px 0 11px;margin-bottom:2px;
    background:linear-gradient(var(--void) 58%,rgba(3,6,28,.86) 82%,transparent)}
  .lot-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
    font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;margin:0}
  .lot-meta{color:var(--mute);font-size:12px;letter-spacing:.02em}
  .lot-open{margin-left:auto;color:var(--mute);font-size:12px;text-decoration:none;
    white-space:nowrap;transition:color .18s ease}
  .lot-head:hover .lot-open,.lot-open:focus-visible{color:var(--cyan)}

  /* Twelve cells per style: one hero at 2×2 and eight at 1×1. Twelve divides by 6, 4, 3 and 2,
     so the block comes out flush at every column count below and there is never a ragged last
     row. Small tiles carry the aspect ratio and therefore set the row height; the hero has none
     of its own and simply fills the 2×2 it spans, which keeps it square without being told. */
  .mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--mg);
    grid-auto-rows:1fr}
  @media (max-width:1200px){.mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (max-width:900px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:620px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}

  .tile{position:relative;aspect-ratio:1;display:block;text-decoration:none;
    border-radius:3px;overflow:hidden;transition:transform .2s ease}
  .tile.hero{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .tile:hover{transform:scale(1.015);z-index:2}

  .tile .frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    text-align:center;background:linear-gradient(150deg,#0A1E6B,#03061C);
    color:var(--mute);font-size:11.5px;padding:10px;
    box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s ease}
  .tile:hover .frame{box-shadow:inset 0 0 0 1px rgba(53,200,255,.55),0 0 28px rgba(53,200,255,.16)}
  .tile:focus-visible{outline:none}
  .tile:focus-visible .frame{box-shadow:inset 0 0 0 2px var(--cyan)}
  .tile canvas{display:block;width:100%;height:100%}
  /* the canvas arrives on a frame of its own, so fade it in rather than letting the wall pop */
  .tile.lit canvas{animation:tile-in .45s ease both}
  @keyframes tile-in{from{opacity:0}to{opacity:1}}
  .tile.dead .frame{background:none;box-shadow:inset 0 0 0 1px rgba(255,120,120,.35);color:#FFA0A0}

  /* The subject name is the one thing a caption row would have said that the section heading
     does not, and a caption row under every tile is what stopped the old grid reading as a
     wall — nine gutters of text per style. It rides on top instead, on hover, and the tile's
     aria-label carries it for anyone who never hovers. */
  .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;
    font-size:11.5px;color:#EAF3FF;pointer-events:none;opacity:0;transform:translateY(4px);
    background:linear-gradient(transparent,rgba(2,4,15,.82));
    transition:opacity .18s ease,transform .18s ease}
  .tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
  .tile.dead .cap{display:none}
  @media (hover:none){.tile .cap{display:none}}

  .wall-foot{color:var(--mute);font-size:12.5px;margin:clamp(24px,3vw,36px) 0 0;max-width:60ch}
  .wall-foot a{color:var(--cyan);text-decoration:none;
    border-bottom:1px solid rgba(53,200,255,.28);padding-bottom:1px}
  .wall-foot a:hover{border-bottom-color:var(--cyan)}

  @media (max-width:900px){
    /* release the editor's one-screen lock; this page is a wall and has to scroll */
    body.page{height:auto;overflow:visible;display:block;padding-bottom:0}
    body.page main.wall{display:block}
    .lot-open{font-size:11.5px}
  }