/* The photo gallery. Two rules carry the whole page, and both are there because the
   artifact's earlier passes found the bugs they answer:
   1. EVERY img carries width and height, so its box is reserved before the bytes
      arrive. A column that reserves nothing reflows on every load, which is how a
      page grows as the viewport shrinks.
   2. Every grid track's minimum is min(<track>, 100%), so a 380px card never forces
      a 390px viewport to scroll sideways.
   The lightbox takes its width and height from the image's own attributes before the
   src is set, and the scroll lock sits on <html> against a reserved scrollbar gutter
   (brand.css, scrollbar-gutter: stable), so locking it reflows no column. */

.tabs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--space-5); padding:0}
.tab{appearance:none; cursor:pointer; background:var(--panel); color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:8px 16px;
  font:600 13px/1.2 var(--font-body); display:inline-flex; align-items:center; gap:8px;
  transition:all .18s var(--motion-ui)}
.tab:hover{border-color:var(--brand-600); color:var(--brand-700)}
.tab .tab-n{font:600 11px/1 var(--font-mono); color:var(--ink-3)}
.tab[aria-selected="true"]{background:var(--brand-700); border-color:var(--brand-700); color:#fff}
.tab[aria-selected="true"] .tab-n{color:#C7BCFF}
.panel[hidden]{display:none}

.photo{position:relative; margin:0; border-radius:var(--radius-photo); overflow:hidden;
  cursor:pointer; background:var(--surface-sunken); display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .photo{background:#1B1B1F} }
:root[data-theme="dark"] .photo{background:#1B1B1F}
.photo img{display:block; width:100%; height:auto; border:0; border-radius:0}
.photo--lead img,.photo--wide img,.photo--cast img{height:100%; object-fit:cover}
.photo--cast img{object-position:50% 32%}
.photo::after{content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(10,12,20,.10); pointer-events:none}
.photo:focus-visible{outline:3px solid var(--brand-600); outline-offset:3px}

.photo--lead{margin:0 0 var(--gutter)}
.photo--lead figcaption,.photo--wide figcaption{position:absolute; left:0; right:0; bottom:0;
  margin:0; color:#fff; padding:72px 32px 26px; font:500 18px/26px var(--font-body);
  background:linear-gradient(to top, rgba(45,47,68,.82) 0%, rgba(45,47,68,.55) 38%, rgba(45,47,68,0) 100%)}
.photo--wide figcaption{padding:56px 24px 20px; font-size:15px; line-height:22px}
@media (max-width:640px){
  .photo--lead figcaption{padding:56px 20px 18px; font-size:15px; line-height:22px}
  .photo--wide figcaption{padding:48px 18px 16px; font-size:14px; line-height:20px}
}

.pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--gutter); margin:0 0 var(--gutter)}

.frames{columns:4; column-gap:var(--gutter)}
@media (max-width:1440px){ .frames{columns:3} }
@media (max-width:1000px){ .frames{columns:2} }
@media (max-width:640px){ .frames{columns:1} }
.frames .photo{break-inside:avoid; margin:0 0 var(--gutter)}
.frames figcaption{display:none}

.cast-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
  gap:var(--gutter)}
.photo--cast{aspect-ratio:1 / 1}
.photo--cast figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; color:#fff;
  padding:52px 18px 16px; font:500 13px/18px var(--font-body);
  background:linear-gradient(to top, rgba(45,47,68,.86) 0%, rgba(45,47,68,.55) 45%, rgba(45,47,68,0) 100%)}
.photo--cast figcaption b{display:block; font-weight:700; font-size:15px; line-height:20px}
.photo--cast figcaption span{display:block; opacity:.85}

.plates{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:var(--gutter); max-width:1120px}
.plate-frame{margin:0}
.plate{position:relative; border-radius:var(--radius-photo); overflow:hidden;
  container-type:inline-size; background:var(--surface-sunken)}
.plate img{display:block; width:100%; height:auto; border:0}
.plate .line{position:absolute; left:6%; top:10%; white-space:nowrap;
  font:700 5cqw/1.2 var(--font-display)}
.plate .line.on-dark{color:#fff}
.plate .line.on-light{color:#1F2430}
.plate-frame figcaption{margin:10px 2px 0; font:500 13px/18px var(--font-body); color:var(--ink-3)}

/* ---- the lightbox ---- */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(10,12,16,.94);
  display:grid; place-items:center; padding:clamp(12px,3vh,32px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0; max-width:100%; max-height:100%; min-width:0; min-height:0;
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; justify-items:center}
.lightbox img{display:block; max-width:100%; max-height:100%; min-height:0;
  width:auto; height:auto; object-fit:contain; border-radius:10px; border:0}
.lightbox figcaption{color:#F2F0FF; font:500 15px/22px var(--font-body); text-align:center; max-width:70ch}
.lb-close,.lb-nav{position:absolute; background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  width:44px; height:44px; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.lb-close:hover,.lb-nav:hover,.lb-close:focus-visible,.lb-nav:focus-visible{
  background:var(--brand-700); border-color:var(--brand-700); outline:none}
.lb-close{top:20px; right:20px}
.lb-prev{left:20px; top:50%; transform:translateY(-50%)}
.lb-next{right:20px; top:50%; transform:translateY(-50%)}
.lb-dl{position:absolute; left:20px; bottom:20px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-pill); padding:9px 16px; font:600 13px/1.2 var(--font-body)}
.lb-dl:hover,.lb-dl:focus-visible{background:var(--brand-700); border-color:var(--brand-700); color:#fff}
@media (max-width:640px){
  .lb-close{top:8px; right:8px} .lb-prev{left:8px} .lb-next{right:8px}
  .lb-dl{left:8px; bottom:8px; padding:7px 12px; font-size:12px}
}
html.lb-open,html.lb-open body{overflow:hidden}