/* =====================================================================
   gallery.html only. A contact sheet: the four real photographs (382 / 287 / 382 / 680 px wide, all 510 px tall) sit on one baseline at
   (never above) their real size, between two rulers, with an index of the frames. Clicking a frame opens it on a specimen plate (page-gallery.js).
   ===================================================================== */

/* the banner gives its bottom air to the prints: they start on the first screen */
.gl-pb{padding-bottom:clamp(12px,1.8vw,22px)}
.gw{position:relative;display:grid;gap:clamp(18px,2.4vw,32px);padding-block:clamp(30px,3.4vw,44px)}
.gw::before,.gw::after{content:'';position:absolute;inset-inline:0;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px) left/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(79,200,232,.55) 0 1px,transparent 1px 64px) left/100% 9px no-repeat}
.gw::before{top:0}
.gw::after{bottom:0;transform:scaleY(-1)}

/* row 1: three portraits, space-between; they shrink together (same ratio) on narrower screens, never grow past their pixels */
.gw-a{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(12px,2vw,28px)}
.gw-f{margin:0;min-width:0;flex:0 1 var(--w);max-width:var(--w)}
.gw-f .gg-i{width:100%;max-width:none;flex:none;aspect-ratio:var(--ar)}
.gw-cap{display:none}

/* row 2: the index (start side) and the wide print (end side), one baseline */
.gw-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:clamp(12px,2vw,28px);align-items:end}
.gw-wide{justify-self:end;width:100%}
@media (min-width:1101px){.gw-index{grid-column:1;grid-row:1}.gw-wide{grid-column:2;grid-row:1}}

.gw-index{display:grid;grid-template-rows:minmax(0,1fr) auto;align-self:stretch;background:var(--card);border:1px solid var(--line-2);min-width:0}
.gw-list{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.gw-list ol{grid-auto-rows:minmax(0,1fr)}
.gw-list h3{display:flex;align-items:center;gap:14px;padding:18px clamp(18px,2vw,26px);font-size:var(--fs-3);font-weight:700;border-bottom:1px solid var(--line-c)}
.gw-list h3 .ic{width:22px;height:22px;color:var(--cyan)}
.gw-list ol{display:grid}
.gw-list li{display:grid;min-height:0}
.gi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px clamp(18px,2vw,26px);border-bottom:1px solid var(--line);color:#dfe3e5;font-size:var(--fs-3);line-height:1.7;transition:background-color .25s,color .25s}
.gi b{font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--cyan);direction:ltr}
.gi .ic{width:20px;height:20px;color:var(--cyan);opacity:.55;transition:opacity .25s,transform .4s var(--ease)}
.gi:hover,.gi.is-hot,.gi:focus-visible{background:rgba(79,200,232,.07);color:#fff}
.gi:hover .ic,.gi.is-hot .ic,.gi:focus-visible .ic{opacity:1;transform:translateX(-4px)}
.gi:focus-visible{outline-offset:-3px}
.gw-act{padding:18px clamp(18px,2vw,26px)}
.gw-act .btn{width:100%}

/* the index number sits on a small dark chip, so it reads on a white car or a light wall as well */
.gw .gal-n{padding:4px 7px 3px;background:rgba(13,13,13,.8);border:1px solid rgba(255,255,255,.16);text-shadow:none}

/* Latin names (JMS Performance, TEXA) are never split across two lines; captions break evenly */
.gw-cap span,.gi span,.lb-cap{text-wrap:balance}
.gw-cap bdi,.gi bdi,.lb-cap bdi{white-space:nowrap}

/* a frame that is hovered / focused in the index is lit on the sheet, and the other way round */
.gg-i.is-hot{--bc:#a9e8f8;box-shadow:0 0 0 1px rgba(79,200,232,.55)}
.gg-i.is-hot img{transform:scale(1.035)}

/* the prints "develop" as they arrive: they come up out of the dark, top to bottom (only when JS runs) */
html.js .gg-i.rv img{clip-path:inset(0 0 100% 0);filter:brightness(.3) saturate(.25)}
html.js .gg-i.rv.in img{clip-path:inset(0);filter:none;transition:clip-path 1.25s var(--ease-io) calc(var(--d,0s) + .1s),filter 1.9s var(--ease) calc(var(--d,0s) + .1s),transform 1.2s var(--ease)}
html.rv-all .gg-i img{clip-path:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){html.js .gg-i.rv img,html.js .gg-i.rv.in img{clip-path:none;filter:none}}

/* tablets: the index sits above the wide print */
@media (max-width:1100px){
  .gw-b{grid-template-columns:minmax(0,1fr);align-items:start}
  .gw-wide{justify-self:center;max-width:680px}
}

/* phones: prints stacked at (up to) their real width, each with its caption; the list is not needed (the captions carry the text) */
@media (max-width:700px){
  .gw-a{flex-direction:column;align-items:center;gap:24px}
  .gw-f{flex:none;width:100%}
  .gw-cap{display:flex;align-items:baseline;gap:12px;margin-top:10px;color:var(--soft);font-size:var(--fs-2);line-height:1.7}
  .gw-cap b{font:600 12px/1 var(--f-data);letter-spacing:.16em;color:var(--cyan);direction:ltr}
  .gw-list{display:none}
  .gw-index{background:none;border:0;grid-template-rows:auto}
  .gw-act{padding:0}
  .gw-b{gap:24px}
  .gw-wide{justify-self:stretch}
}

/* ---- the lightbox: one specimen plate, at (never above) the photograph's real size ---- */
.lb{padding:0;border:0;background:transparent;color:var(--text);width:min(94vw,780px);max-width:none;max-height:calc(100vh - 20px);overflow:visible}
.lb::backdrop{background:rgba(6,8,9,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb[open]{animation:lbIn .45s var(--ease) both}
.lb[open]::backdrop{animation:lbFade .35s ease both}
@keyframes lbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lb-in{display:grid;gap:0;background:#0f1113;border:1px solid var(--line-2)}
.lb-stage{position:relative;display:grid;place-items:center;padding:clamp(14px,3vw,30px);--bc:rgba(79,200,232,.85);--bs:16px;
  background:linear-gradient(rgba(79,200,232,.1) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(79,200,232,.1) 1px,transparent 1px) 0 0/24px 24px,radial-gradient(70% 70% at 50% 50%,#1b2124,#0d0f10)}
.lb-img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 250px);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.5)}
.lb-tb{border-inline:0;grid-template-columns:auto minmax(0,1fr)}
.lb-tb .lb-cap{font-size:var(--fs-3)}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px clamp(12px,2vw,20px);border-top:1px solid var(--line-2)}
.lb-bar .btn{min-height:44px}
.lb-bar .lb-close{margin-inline:auto}
@media (max-width:520px){.lb-bar .btn{padding:0 14px;gap:8px;font-size:15px}}

/* the first row sits right under the banner: less air above it, so the prints show on the first screen */
#prints{padding-top:clamp(10px,1.6vw,20px)}