/* Photo gallery page */
.g-hero{background:radial-gradient(800px 360px at 90% -20%,rgba(211,24,106,.35),transparent 60%),
  radial-gradient(700px 360px at -10% 120%,rgba(47,63,191,.5),transparent 60%),var(--ink);color:#c5cde4;padding:44px 0 92px}
.g-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:#aab4d0}
.g-crumb a{color:#fff;font-weight:600}
.g-crumb .ic{width:14px;height:14px}
.g-hero h1{margin-top:14px;font-size:clamp(26px,3.2vw,40px);color:#fff;max-width:20em;
  background:linear-gradient(100deg,#fff 30%,#ffd57a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-hero p{margin-top:10px;max-width:40em;font-size:15px}
.g-stats{display:flex;gap:28px;margin:22px 0 0}
.g-stats dt{font-size:12.5px;color:#aab4d0;font-weight:600}
.g-stats dd{margin:0;font-size:26px;font-weight:800;color:#fff}

/* album rail overlapping the hero */
.g-albums{margin-top:-62px;position:relative;z-index:2}
.g-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.g-album{flex:0 0 228px;scroll-snap-align:start;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(16,26,58,.55);
  border:2px solid transparent;transition:transform .2s,border-color .2s,box-shadow .2s}
.g-album:hover{transform:translateY(-3px);box-shadow:0 24px 50px -24px rgba(16,26,58,.6)}
.g-album.on{border-color:var(--cta)}
.g-album-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.g-album-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.g-album:hover .g-album-img img{transform:scale(1.06)}
.g-album-t{display:block;padding:10px 14px 12px}
.g-album-t b{display:block;color:var(--ink);font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-album-t small{color:var(--muted);font-size:12.5px}

.g-sec{padding-top:36px}
.g-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px;position:sticky;top:calc(var(--hdr) - 8px);
  z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 0}
.g-chips{display:flex;gap:8px;flex-wrap:wrap}
.g-chips button{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--text)}
.g-chips button span{color:var(--muted);font-weight:600;margin-left:2px}
.g-chips button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.g-chips button[aria-selected="true"] span{color:#aab4d0}
.g-view{display:flex;border:1.5px solid var(--line-2);border-radius:12px;overflow:hidden}
.g-view button{width:40px;height:36px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.g-view button.on{background:var(--ink);color:#fff}

.g-group{margin-bottom:48px}
.g-group[hidden]{display:none}
.g-group-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.g-group-h h2{font-size:clamp(20px,2vw,24px);--hA:#2f3fbf;--hB:#d3186a;
  background:linear-gradient(100deg,var(--hA),var(--hB));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-group:nth-child(3n+2) .g-group-h h2{--hA:#d3186a;--hB:#e7a623}
.g-group:nth-child(3n+3) .g-group-h h2{--hA:#157a46;--hB:#2f3fbf}
.g-group-h p{color:var(--muted);font-size:13.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.g-group-h p span{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--text)}
.g-group-h p .ic{width:15px;height:15px}

.g-grid.masonry{columns:4 240px;column-gap:14px}
.g-grid.masonry .g-item{display:block;width:100%;margin:0 0 14px;break-inside:avoid}
.g-grid.square{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.g-grid.square .g-item{aspect-ratio:1}
.g-grid.square .g-item img{height:100%}
.g-item{position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--paper);
  box-shadow:0 10px 24px -18px rgba(16,26,58,.5)}
.g-item img{width:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .5s;opacity:0}
.g-item img.ok{opacity:1}
.g-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px;color:#fff;
  background:linear-gradient(180deg,rgba(10,16,38,.35),transparent 35%,transparent 55%,rgba(10,16,38,.75));opacity:0;transition:opacity .3s}
.g-ov .ic{align-self:flex-end;width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.g-ov em{font-style:normal;font-weight:700;font-size:13.5px;text-align:left;line-height:1.35}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.06)}
.g-item:hover .g-ov,.g-item:focus-visible .g-ov{opacity:1}
@media(hover:none){.g-ov{opacity:1;background:linear-gradient(180deg,transparent 60%,rgba(10,16,38,.7))}.g-ov .ic{display:none}}

.g-empty{text-align:center;max-width:520px;margin:0 auto;padding:30px 20px}
.g-empty>.ic{width:52px;height:52px;color:var(--cta)}
.g-empty h2{margin-top:14px;font-size:24px}
.g-empty p{margin:10px 0 20px}

.g-cta{background:var(--paper);padding:56px 0}
.g-cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.g-cta h2{font-size:clamp(20px,2.2vw,26px);background:linear-gradient(100deg,#2f3fbf,#d3186a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-cta p{margin-top:6px}
.g-cta-b{display:flex;gap:10px;flex-wrap:wrap}

/* full-screen viewer */
.gv{position:fixed;inset:0;z-index:400;background:#070a18;display:flex;flex-direction:column;color:#fff}
.gv[hidden]{display:none}
.gv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.gv-title{min-width:0;line-height:1.3}
.gv-title b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-title span{font-size:12.5px;color:#aab4d0}
.gv-tools{display:flex;gap:6px}
.gv-tools button,.gv-tools a{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.gv-tools button:hover,.gv-tools a:hover{background:rgba(255,255,255,.22)}
.gv-tools button.on{background:var(--cta)}
.gv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 70px;touch-action:pan-y}
.gv-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.gv-fig img{max-width:100%;max-height:calc(100vh - 210px);border-radius:10px;box-shadow:0 30px 80px -30px #000;transition:opacity .3s,transform .3s}
.gv-fig img.fade{opacity:0;transform:scale(.98)}
.gv-fig figcaption{margin-top:12px;font-size:14px;color:#dfe5f5;text-align:center;min-height:20px}
.gv-nav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.gv-nav:hover{background:var(--cta)}
.gv-nav.prev{left:12px}.gv-nav.next{right:12px}
.gv-nav .ic{width:24px;height:24px}
.gv-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.gv-progress i{display:block;height:100%;width:0;background:var(--gold)}
.gv.playing .gv-progress i{animation:gvp 4s linear forwards}
@keyframes gvp{to{width:100%}}
.gv-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 16px;justify-content:safe center;scrollbar-width:none}
.gv-strip::-webkit-scrollbar{display:none}
.gv-strip button{flex:0 0 72px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;opacity:.5;cursor:pointer;background:#1b2752}
.gv-strip button img{width:100%;height:100%;object-fit:cover}
.gv-strip button.on{opacity:1;border-color:var(--gold)}
.gv-toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;
  padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none}
.gv-toast.show{opacity:1}
@media(max-width:700px){
  .gv-stage{padding:0 8px}
  .gv-nav{width:42px;height:42px;margin-top:-21px;background:rgba(0,0,0,.35)}
  .gv-fig img{max-height:calc(100vh - 190px)}
  .g-album{flex-basis:180px}
  .g-hero{padding-bottom:84px}
  .g-bar{position:static}
}
@media(prefers-reduced-motion:reduce){.g-item img,.gv-fig img{transition:none}}
@media(max-width:700px){
  .g-grid.masonry{columns:2;column-gap:8px}
  .g-grid.masonry .g-item{margin-bottom:8px;border-radius:10px}
  .g-grid.square{grid-template-columns:repeat(3,1fr);gap:6px}
  .g-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .g-chips::-webkit-scrollbar{display:none}
  .g-chips button{flex-shrink:0}
  .g-bar{flex-wrap:nowrap}
  .g-ov em{font-size:12px}
}