/* 5680 pass 3: contact sheet to gallery wall (masonry grid + lightbox) and sourced city facts.
   Same tokens as site.css. Motion is transform/opacity (plus the tile clip-path wipe); reduced motion at the end. */

/* ===== Gallery grid: 2 cols phone, 3 cols desktop, 10px gap, 4px radius ===== */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:800px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gi[hidden]{display:none}
.gi.lead{grid-column:1/-1}
.gal.mas{grid-auto-rows:2px;row-gap:0}
.gal.mas .gi{grid-row-end:span var(--rs,100)}
.gt{position:relative;display:block;width:100%;aspect-ratio:var(--ar,3/2);border-radius:4px;overflow:hidden;text-align:left;transition:transform .1s var(--ease)}
.gal.mas .gt{aspect-ratio:auto;height:calc(100% - 10px)}
.gt .ph{position:absolute;inset:0;display:block;border-radius:inherit}
.gt .ph img{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(29,32,33,.74),rgba(29,32,33,0));pointer-events:none}
.gc{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;font:500 10px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);transition:transform .5s var(--ease)}
.gc-r{position:relative;padding-bottom:3px}
.gc-r::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.gc-n{flex:none;color:var(--muted);letter-spacing:.08em;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .gt:hover .ph img,.gt:focus-visible .ph img{transform:scale(1.04)}
  .gt:hover .gc,.gt:focus-visible .gc{transform:translateY(-4px)}
  .gt:hover .gc-r::after,.gt:focus-visible .gc-r::after{transform:scaleX(1)}
}
@media (hover:none){.gt:active{transform:scale(.98)}}

/* Tile reveal: staggered rise + clip-path wipe. Scroll-driven where supported, one-shot IO (.in) otherwise */
@supports (animation-timeline: view()){
  .gal .gi{animation:gi-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .gal .gi:nth-child(3n+2){animation-range:entry 8% entry 78%}
  .gal .gi:nth-child(3n){animation-range:entry 16% entry 86%}
}
@keyframes gi-in{from{opacity:0;transform:translateY(32px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(-8px)}}
html.no-sda .gal .gi{opacity:0;transform:translateY(32px);clip-path:inset(100% 0 0 0);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s),clip-path .9s var(--ease) var(--d,0s)}
html.no-sda .gal .gi.in{opacity:1;transform:none;clip-path:inset(-8px)}

/* ===== Lightbox ===== */
.lb{position:fixed;inset:0;z-index:150;--lbt:calc(64px + env(safe-area-inset-top));--lbb:calc(150px + env(safe-area-inset-bottom))}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;background:rgba(29,32,33,.96)}
.lb-glow{position:absolute;left:50%;top:42%;width:min(130vw,1300px);aspect-ratio:1;margin:calc(min(130vw,1300px) / -2) 0 0 calc(min(130vw,1300px) / -2);pointer-events:none;opacity:1}
.lb-view{position:absolute;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.lb-track{position:absolute;inset:0}
.lb-slide{position:absolute;inset:0;display:grid;place-items:center;padding:var(--lbt) max(12px,env(safe-area-inset-right)) var(--lbb) max(12px,env(safe-area-inset-left))}
.lb-pic{position:relative;transform-origin:center}
.lb-pic.ease{transition:transform .35s var(--ease)}
.lb-pic img{width:100%;height:100%;object-fit:contain;border-radius:2px;-webkit-user-drag:none}
.lb-cur .lb-pic img{animation:kb 12s linear both}
.lb.drag .lb-cur .lb-pic img,.lb.zoomed .lb-cur .lb-pic img{animation-play-state:paused}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.03)}}

.lb-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.lb-count{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--acid);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-acts{display:flex;align-items:center;gap:6px}
.lb-tour{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px 0 11px;border:1px solid var(--line-2);border-radius:999px;background:rgba(29,32,33,.6);font-size:12px;color:var(--text);transition:border-color .3s}
.lb-tour svg{width:20px;height:20px;flex:none}
.lb-ring0{fill:none;stroke:var(--line-2);stroke-width:1.6}
.lb-ring{fill:none;stroke:var(--acid);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center}
.lb-tour[aria-pressed="true"]{border-color:rgba(233,240,86,.55)}
.lb-tour.run .lb-ring{animation:ring 4s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
@media (max-width:420px){.lb-tour{padding:0;justify-content:center}.lb-tour span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (min-width:900px){
  .lb-p,.lb-n{position:fixed;top:50%;margin-top:-22px}
  .lb-p{left:max(20px,env(safe-area-inset-left))}.lb-n{right:max(20px,env(safe-area-inset-right))}
}

.lb-sheet{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:56px max(20px,env(safe-area-inset-right)) calc(74px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:linear-gradient(to top,rgba(29,32,33,.94) 45%,rgba(29,32,33,0));pointer-events:none;transition:opacity .3s}
.lb-sheet>*{max-width:760px;margin-inline:auto}
.lb-room{font:400 30px/1.05 var(--serif);color:var(--paper)}
.lb-story{margin-top:6px;font:400 15px/1.45 var(--sans);color:var(--text);min-height:22px}
.lb-sheet.in .lb-room{animation:cap-in .55s var(--ease) both}
.lb-sheet.in .lb-story{animation:cap-in .55s var(--ease) .12s both}
@keyframes cap-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Detail callouts: acid dot at x%,y% of the contained photo; tap / Enter opens a one-line pill */
.lb-dots{position:absolute;inset:0;pointer-events:none;transition:opacity .25s}
.lb-dot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;pointer-events:auto}
.lb-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(233,240,86,.22),0 1px 6px rgba(0,0,0,.45)}
.lb-dots.in .lb-dot{animation:dot-in .5s var(--ease) var(--d,.24s) both}
@keyframes dot-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.lb-note{position:absolute;left:36px;top:50%;width:max-content;max-width:min(240px,58vw);padding:8px 12px;border:1px solid rgba(233,240,86,.4);border-radius:999px;background:rgba(29,32,33,.92);font:500 12px/1.3 var(--sans);color:var(--paper);text-align:left;opacity:0;transform:translateY(-50%) scale(.96);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.lb-dot.l .lb-note{left:auto;right:36px}
.lb-dot.dn .lb-note{top:calc(50% + 40px)}
.lb-dot[aria-expanded="true"] .lb-note{opacity:1;transform:translateY(-50%)}
.lb.zoomed .lb-dots,.lb.zoomed .lb-sheet,.lb.zoomed .lb-strip{opacity:0;pointer-events:none}
.lb.zoomed .lb-dot{visibility:hidden}

/* Filmstrip scrubber */
.lb-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));transition:opacity .3s}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip button{position:relative;flex:none;width:56px;height:44px;border-radius:2px;overflow:hidden;opacity:.45;transition:opacity .3s}
.lb-strip button img{width:100%;height:100%;object-fit:cover}
.lb-strip button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lb-strip button[aria-current="true"]{opacity:1}
.lb-strip button[aria-current="true"]::after{transform:scaleX(1)}
.lb-strip button:hover{opacity:.8}
.lb-strip button:focus-visible{outline-offset:-2px}

/* View transition: shared-element morph, 550ms, backdrop fades in with the root crossfade */
html[data-vt="lb"]::view-transition-old(root),html[data-vt="lb"]::view-transition-new(root){animation-duration:.55s;animation-timing-function:var(--ease)}
::view-transition-old(lbimg),::view-transition-new(lbimg){height:100%;object-fit:cover;overflow:clip}

/* ===== City: sourced facts, public-license candidates, social slot ===== */
.facts{grid-column:1/-1;display:grid;gap:0}
@media (min-width:960px){.facts{grid-template-columns:repeat(2,1fr);column-gap:72px}}
.facts li{padding:18px 0;border-top:1px solid var(--line)}
.facts b{display:block;font:400 26px/1.1 var(--serif);color:var(--paper);margin-bottom:6px}
.facts p{font-size:14px;color:var(--text)}
.facts .src{margin-top:8px;font-size:11px;line-height:1.4;color:var(--muted)}
.facts .src a{color:var(--muted);text-underline-offset:2px;overflow-wrap:anywhere}
.facts .src a:hover{color:var(--paper)}
.px-mid.px-ok{fill:var(--paper)}
.lv-txt .lv-slot{align-content:center;gap:8px;text-align:left;justify-items:start;padding:14px}
.lv-txt .lv-f{font:italic 15px/1.2 var(--serif);color:var(--paper);overflow-wrap:anywhere}
.lv-txt .lv-l{font-size:11px;line-height:1.35;color:var(--muted)}

/* ===== Slot frames: placeholder for pending media ===== */
.gi-slot{pointer-events:none}
.slot-frame{background:var(--surface,#2c2f32);border-radius:4px;aspect-ratio:var(--ar,3/2);width:100%;height:100%;position:relative;border:1px solid var(--line,rgba(215,232,188,.12))}
.gal.mas .slot-frame{aspect-ratio:auto;height:calc(100% - 10px)}
.slot-tag{position:absolute;bottom:6px;left:6px;font:500 .6rem/1.3 Inter,sans-serif;color:rgba(255,255,255,.45);padding:2px 6px;background:rgba(0,0,0,.5);border-radius:3px;z-index:1;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-frame{background:var(--surface,#2c2f32);border-radius:6px;aspect-ratio:var(--ar,3/2);width:100%;border:1px solid var(--line,rgba(215,232,188,.12));position:relative}
#fpSlot{--ar:3/2}

/* ===== Reduced motion: 150ms crossfades, no Ken Burns, static callout labels ===== */
@media (prefers-reduced-motion: reduce){
  .gal .gi{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .gt,.gt .ph img,.gc,.gc-r::after{transition:none}
  .gt:hover .ph img,.gt:focus-visible .ph img,.gt:hover .gc,.gt:focus-visible .gc,.gt:active{transform:none}
  .lb-cur .lb-pic img,.lb-sheet.in .lb-room,.lb-sheet.in .lb-story,.lb-dots.in .lb-dot{animation:none}
  .lb-note{opacity:1;transform:translateY(-50%);transition:none}
  .lb-tour.run .lb-ring{animation:none;stroke-dashoffset:0}
  .lb-pic.ease,.lb-strip button,.lb-strip button::after,.lb-sheet,.lb-strip,.lb-dots{transition:none}
}