/* =========================================================
   Atulya Consultancy Services — Gallery page
   Loads after style.css and pages.css and reuses their tokens.
   Same rules: mobile-first, square corners, navy/azure/gold.
   ========================================================= */

/* =========================================================
   HERO — copy + a stack of prints
   ========================================================= */
.ghero{position:relative;overflow:hidden;background:var(--navy-900);color:var(--on-dark);}
.ghero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(80% 70% at 85% 0%,#000,transparent 75%);
  mask-image:radial-gradient(80% 70% at 85% 0%,#000,transparent 75%);
}
.ghero::after{
  content:"";position:absolute;right:-20%;top:-30%;width:80%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,160,230,.26),transparent);
}
.ghero__wm{
  position:absolute;left:-.04em;bottom:-.3em;pointer-events:none;user-select:none;
  font-family:var(--deva);font-size:clamp(8rem,3rem + 20vw,24rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(108,199,245,.13);
}
.ghero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-block:22px 56px;}
.ghero .crumbs a:hover,.ghero .crumbs [aria-current]{color:var(--gold);}

.roll{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:5px 14px 5px 5px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  color:#C4D1E0;font-size:11.5px;font-weight:800;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;
}
.roll b{padding:3px 9px;background:var(--gold);color:var(--navy-900);}

.ghero h1{margin:24px 0 18px;color:#fff;font-size:clamp(2.35rem,1.2rem + 4vw,4.6rem);line-height:1.04;letter-spacing:-.04em;}
.ghero .hl{color:var(--gold);}
.ghero .lead{color:#C4D1E0;}

/* viewfinder corners around the highlighted words */
.framed{position:relative;display:inline-block;padding:0 .14em;margin-left:-.14em;}
.framed::before,.framed::after{
  content:"";position:absolute;width:.34em;height:.34em;
  border:0 solid var(--azure-300);
  animation:focus .9s .6s var(--ease) both;
}
.framed::before{left:0;top:.02em;border-width:3px 0 0 3px;}
.framed::after{right:0;bottom:-.02em;border-width:0 3px 3px 0;}
@keyframes focus{from{opacity:0;scale:1.9;}}

.ghero__cta{display:grid;gap:10px;margin-top:30px;}
@media (min-width:480px){ .ghero__cta{display:flex;flex-wrap:wrap;} }

.ghero__facts{display:flex;margin-top:36px;padding-top:20px;border-top:1px solid var(--line-dark);}
.ghero__facts li{flex:1;padding-left:18px;border-left:1px solid var(--line-dark);}
.ghero__facts li:first-child{padding-left:0;border-left:0;}
.ghero__facts strong{display:block;color:#fff;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.ghero__facts span{display:block;margin-top:6px;font-size:12.5px;line-height:1.3;}

.ghero__copy > *{animation:rise .7s var(--ease) both;}
.ghero__copy > :nth-child(2){animation-delay:.06s;}
.ghero__copy > :nth-child(3){animation-delay:.12s;}
.ghero__copy > :nth-child(4){animation-delay:.18s;}
.ghero__copy > :nth-child(5){animation-delay:.24s;}
.ghero__copy > :nth-child(6){animation-delay:.3s;}

/* the prints */
.prints{position:relative;width:100%;max-width:540px;aspect-ratio:1 / .92;margin-inline:auto;--px:0;--py:0;}
.print{
  position:absolute;display:block;padding:10px 10px 0;
  background:#fff;box-shadow:0 26px 54px rgba(0,0,0,.42);cursor:zoom-in;
  translate:calc(var(--x,0%) + var(--px) * var(--depth,0px)) calc(var(--py) * var(--depth,0px));
  rotate:var(--rot,0deg);
  transition:rotate .6s var(--ease),translate .6s var(--ease),scale .6s var(--ease),box-shadow .6s;
  animation:drop 1s var(--ease) backwards;
}
.print::before{
  content:"";position:absolute;z-index:1;left:50%;top:-11px;width:86px;height:24px;margin-left:-43px;
  background:rgba(248,205,111,.8);box-shadow:0 1px 2px rgba(0,0,0,.15);rotate:-4deg;
}
.print img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--azure-50);}
.print__cap{
  display:block;padding:9px 4px 12px;
  color:var(--navy-900);font-family:var(--hand);font-size:clamp(1.1rem,.8rem + 1vw,1.55rem);font-weight:600;line-height:1.1;text-align:center;
}
.print--1{left:21%;top:9%;z-index:3;width:56%;--rot:-3deg;--depth:14px;animation-delay:.45s;}
.print--1 img{object-position:center 40%;}
.print--2{left:0;top:20%;z-index:1;width:38%;--rot:-10deg;--depth:6px;animation-delay:.2s;}
.print--2 img{aspect-ratio:3 / 4;object-position:center 30%;}
.print--3{right:0;top:2%;z-index:2;width:40%;--rot:9deg;--depth:10px;animation-delay:.32s;}
.print--3 img{object-position:60% center;}
.print--3::before{rotate:5deg;}
.print--2 .print__cap{padding-left:8px;text-align:left;}
.print--3 .print__cap{padding-right:8px;text-align:right;}
@keyframes drop{from{opacity:0;translate:0 -46px;rotate:0deg;scale:1.1;}}

.prints__note{
  position:absolute;right:3%;bottom:4%;display:flex;align-items:flex-end;gap:6px;
  color:var(--gold-300);font-size:1.55rem;rotate:-5deg;
  animation:pop .8s 1.1s var(--ease) both;
}
.prints__note svg{width:46px;height:auto;margin-bottom:14px;color:var(--azure-300);}
@media (max-width:419px){ .prints__note{display:none;} }

@media (hover:hover){
  .prints:hover .print--1{--rot:-1deg;}
  .prints:hover .print--2{--x:-7%;--rot:-14deg;}
  .prints:hover .print--3{--x:7%;--rot:13deg;}
  .prints .print:hover{z-index:4;scale:1.05;--rot:0deg;box-shadow:0 36px 70px rgba(0,0,0,.5);}
}
.print:focus-visible{z-index:4;outline:3px solid var(--gold);outline-offset:4px;}

@media (min-width:600px){ .prints__note{font-size:1.8rem;} }
@media (min-width:960px){
  .ghero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:72px;padding-block:36px 96px;}
  .prints{margin-top:24px;}
}

/* =========================================================
   FILM STRIP — decorative reel under the hero
   ========================================================= */
.film{position:relative;overflow:hidden;padding:36px 0;background:#050F1B;}
.film::before,.film::after{
  content:"";position:absolute;z-index:1;left:0;right:0;height:10px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 14px,transparent 14px 30px);
}
.film::before{top:9px;}
.film::after{bottom:9px;}
.film__track{display:flex;width:max-content;animation:marquee 80s linear infinite;}
.film ul{display:flex;flex:none;gap:10px;padding-right:10px;counter-reset:frame;}
.film li{position:relative;flex:none;counter-increment:frame;background:var(--navy-800);}
.film img{width:auto;height:112px;opacity:.9;transition:filter .5s,opacity .5s;}
.film li::after{
  content:"ATULYA 08  \25B8 " counter(frame) "A";
  position:absolute;left:2px;top:calc(100% + 6px);
  color:var(--gold-300);font-size:8.5px;font-weight:800;line-height:1;letter-spacing:.22em;white-space:pre;opacity:.75;
}
@media (hover:hover){
  .film img{filter:grayscale(1) contrast(1.05);opacity:.7;}
  .film li:hover img{filter:none;opacity:1;}
  .film:hover .film__track{animation-play-state:paused;}
}
@media (min-width:900px){
  .film{padding:42px 0;}
  .film ul{gap:14px;padding-right:14px;}
  .film img{height:160px;}
}

/* =========================================================
   FEATURED ALBUM
   ========================================================= */
.spread__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center;}
.spread__media{position:relative;max-width:600px;margin-top:28px;}
.spread__photo{position:relative;display:block;margin:0 16px 16px 0;cursor:zoom-in;}
.spread__photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--gold);transition:inset .5s var(--ease);}
.spread__photo > span:first-child{position:relative;display:block;overflow:hidden;box-shadow:var(--sh-2);}
.spread__photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--azure-50);transition:transform .9s var(--ease);}
.spread__badge{
  position:absolute;z-index:1;left:-8px;top:24px;display:flex;align-items:center;gap:12px;
  padding:12px 20px 12px 14px;background:var(--navy-900);box-shadow:var(--sh-2);
}
.spread__badge b{color:var(--gold);font-size:3.2rem;font-weight:800;line-height:.8;letter-spacing:-.05em;}
.spread__badge small{color:#fff;font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;}
.spread__zoom{
  position:absolute;z-index:1;right:14px;top:14px;display:grid;place-items:center;width:46px;height:46px;
  background:var(--gold);color:var(--navy-900);font-size:16px;
  opacity:0;scale:.8;transition:opacity .3s,scale .4s var(--ease);
}
.spread__note{position:absolute;right:4px;top:-34px;color:var(--azure);font-size:1.7rem;rotate:4deg;}
@media (hover:hover){
  .spread__photo:hover::before{inset:24px -24px -24px 24px;}
  .spread__photo:hover img{transform:scale(1.05);}
  .spread__photo:hover .spread__zoom{opacity:1;scale:1;}
}
.spread__photo:focus-visible .spread__zoom{opacity:1;scale:1;}

.spread__copy h2{margin:16px 0 18px;font-size:clamp(1.75rem,1.1rem + 2.5vw,3rem);}
.spread__copy > p{max-width:560px;}
.spread__quote{margin:28px 0 30px;padding:2px 0 2px 20px;border-left:3px solid var(--gold);}
.spread__quote p{color:var(--navy-900);font-family:var(--hand);font-size:clamp(1.65rem,1.2rem + 1.2vw,2.3rem);font-weight:600;line-height:1.12;}
.spread__quote footer{margin-top:8px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}

.spread__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:440px;margin-bottom:30px;}
.spread__thumbs > *{position:relative;overflow:hidden;aspect-ratio:1;background:var(--azure-50);}
.spread__thumbs a{cursor:zoom-in;}
.spread__thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.spread__thumbs a::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);opacity:0;transition:opacity .25s;}
.spread__album{
  display:flex;flex-direction:column;justify-content:space-between;padding:14px;
  border:0;background:var(--navy-900);color:var(--on-dark);cursor:pointer;text-align:left;
  transition:background-color .3s;
}
.spread__album b{display:block;color:#fff;font-size:2.2rem;font-weight:800;line-height:.9;letter-spacing:-.04em;}
.spread__album small{font-size:12px;font-weight:600;}
.spread__album span:last-child{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--gold);font-size:13px;font-weight:700;line-height:1.2;}
.spread__album i{transition:transform .3s var(--ease);}
@media (hover:hover){
  .spread__thumbs a:hover img{transform:scale(1.08);}
  .spread__thumbs a:hover::after{opacity:1;}
  .spread__album:hover{background:var(--azure);}
  .spread__album:hover i{transform:translateX(4px);}
}
@media (max-width:379px){ .spread__album{padding:10px;} .spread__album b{font-size:1.7rem;} }

@media (min-width:960px){
  .spread__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;}
  .spread__media{max-width:none;margin-top:0;}
  .spread__badge{left:-20px;top:40px;padding:16px 26px 16px 18px;}
  .spread__badge b{font-size:4.2rem;}
  .spread__note{right:10px;top:-44px;font-size:2rem;}
}

/* =========================================================
   THE WALL — toolbar
   ========================================================= */
.wall{overflow-x:clip;}
.bar{
  position:sticky;z-index:20;top:calc(var(--appbar-h) + 1px);
  display:flex;align-items:center;gap:10px;padding:10px 0;
}
.bar::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;
  background:rgba(255,255,255,.96);border-bottom:1px solid transparent;
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  transition:border-color .3s,box-shadow .3s;
}
.bar.is-stuck::before{border-bottom-color:var(--line);box-shadow:0 12px 28px rgba(7,28,51,.07);}

.albums{
  display:flex;flex:1;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;
  margin-left:calc(var(--gutter) * -1);padding:2px 24px 2px var(--gutter);
  scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);
}
.albums::-webkit-scrollbar{display:none;}
.albums button{
  flex:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 7px 0 14px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  color:var(--ink);font-size:14px;font-weight:700;white-space:nowrap;
  transition:background-color .25s,border-color .25s,color .25s;
}
.albums button i{color:var(--azure);font-size:13px;transition:color .25s;}
.albums__n{
  display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;
  background:var(--ivory);color:var(--muted);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  transition:background-color .25s,color .25s;
}
.albums button[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.albums button[aria-pressed="true"] i{color:var(--gold);}
.albums button[aria-pressed="true"] .albums__n{background:var(--gold);color:var(--navy-900);}
@media (hover:hover){ .albums button:hover:not([aria-pressed="true"]){border-color:var(--navy-900);} }

.views{display:flex;flex:none;}
.views button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:700;
  transition:background-color .25s,border-color .25s,color .25s;
}
.views button + button{margin-left:-1px;}
.views button[aria-pressed="true"]{position:relative;background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.views button[aria-pressed="true"] i{color:var(--gold);}
@media (hover:hover){ .views button:hover:not([aria-pressed="true"]){color:var(--ink);border-color:var(--navy-900);position:relative;} }
@media (max-width:767px){
  .views button{padding:0;}
  .views__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media (min-width:1100px){ .albums{margin-left:0;padding-left:0;-webkit-mask-image:none;mask-image:none;} }

.wall__status{margin:14px 0 18px;color:var(--muted);font-size:13px;font-weight:600;}
.wall__status b{color:var(--ink);}

/* =========================================================
   THE WALL — photos
   Without JS: a simple grid that keeps each photo's shape.
   .is-masonry (JS): 2px rows, each photo spans --span rows.
   .is-sheet: square contact sheet with captions underneath.
   ========================================================= */
.shots{
  --gap:8px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
  grid-auto-flow:row dense;align-items:start;counter-reset:shot;
}
@media (min-width:600px){ .shots{--gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1000px){ .shots{--gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));} }

.shot{position:relative;min-width:0;counter-increment:shot;scroll-margin-top:calc(var(--appbar-h) + 90px);}
/* banners run across two columns — but across three they would strand one, so they take the row */
.shot--wide{grid-column:span 2;}
@media (min-width:600px){ .shot--wide{grid-column:span 3;} }
@media (min-width:1000px){ .shot--wide{grid-column:span 2;} }
.shot figure{position:relative;margin:0;aspect-ratio:1 / var(--r,1);overflow:hidden;background:var(--azure-50);}
.shot__media{position:absolute;inset:0;overflow:hidden;background:var(--azure-50);}
.shot__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.shot--wide .shot__media img{object-position:right center;}

/* viewfinder corners on hover */
.shot__media::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top / 24px 3px,
    linear-gradient(var(--gold),var(--gold)) left top / 3px 24px,
    linear-gradient(var(--gold),var(--gold)) right top / 24px 3px,
    linear-gradient(var(--gold),var(--gold)) right top / 3px 24px,
    linear-gradient(var(--gold),var(--gold)) left bottom / 24px 3px,
    linear-gradient(var(--gold),var(--gold)) left bottom / 3px 24px,
    linear-gradient(var(--gold),var(--gold)) right bottom / 24px 3px,
    linear-gradient(var(--gold),var(--gold)) right bottom / 3px 24px;
  background-repeat:no-repeat;
  opacity:0;scale:1.12;transition:opacity .3s,scale .5s var(--ease);
}

.shot figcaption{
  position:absolute;z-index:1;left:0;right:0;bottom:0;padding:44px 16px 14px;
  background:linear-gradient(180deg,rgba(7,28,51,0),rgba(7,28,51,.62) 40%,rgba(7,28,51,.94));
  color:#fff;pointer-events:none;
  transition:opacity .35s,translate .45s var(--ease);
}
.shot__tag{
  display:inline-block;margin-bottom:6px;padding:3px 8px;
  background:var(--gold);color:var(--navy-900);
  font-size:10px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
}
.shot__title{display:block;font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.005em;}
.shot__desc{display:none;}

/* the whole card is the link; the icon and number sit on top */
.shot__open{position:absolute;z-index:2;inset:0;cursor:zoom-in;}
.shot__open:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}
.shot__open::before{
  content:counter(shot,decimal-leading-zero);
  position:absolute;left:14px;top:14px;padding:4px 8px;
  background:rgba(7,28,51,.78);color:#fff;
  font-size:11px;font-weight:800;line-height:1.2;letter-spacing:.1em;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .3s;
}
.shot__open i{
  position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;
  background:var(--gold);color:var(--navy-900);font-size:14px;
  opacity:0;scale:.7;transition:opacity .3s,scale .4s var(--ease);
}

@media (hover:hover){
  .shot figcaption{opacity:0;translate:0 12px;}
  .shot:hover figcaption,.shot:focus-within figcaption{opacity:1;translate:none;}
  .shot:hover .shot__media img{transform:scale(1.07);}
  .shot:hover .shot__media::after,.shot:focus-within .shot__media::after{opacity:1;scale:1;}
  .shot:hover .shot__open::before,.shot:hover .shot__open i,
  .shot:focus-within .shot__open::before,.shot:focus-within .shot__open i{opacity:1;scale:1;}
}
@media (hover:none){
  .shot figcaption{padding:30px 10px 10px;}
  .shot__tag{display:none;}
  .shot__title{font-size:12.5px;}
}
@media (hover:none) and (min-width:600px){
  .shot figcaption{padding:40px 14px 12px;}
  .shot__tag{display:inline-block;}
  .shot__title{font-size:14px;}
}

/* masonry */
.shots.is-masonry{grid-auto-rows:2px;row-gap:0;align-items:stretch;}
.shots.is-masonry .shot{grid-row-end:span var(--span);margin-bottom:var(--gap);}
.shots.is-masonry figure{height:100%;aspect-ratio:auto;}

/* contact sheet */
.shots.is-sheet{grid-auto-flow:row;align-items:stretch;}
.is-sheet .shot{
  padding:6px;background:#fff;border:1px solid var(--line);
  transition:box-shadow .35s,border-color .35s,translate .35s var(--ease);
}
.is-sheet .shot--wide{grid-column:auto;}
.is-sheet figure{display:flex;flex-direction:column;height:100%;aspect-ratio:auto;overflow:visible;background:none;}
.is-sheet .shot__media{position:relative;inset:auto;aspect-ratio:1;flex:none;}
.is-sheet figcaption{
  position:static;flex:1;padding:12px 4px 6px;background:none;color:var(--text);
  opacity:1;translate:none;pointer-events:auto;
}
.is-sheet .shot__tag{display:inline-block;background:var(--azure-50);color:var(--azure);}
.is-sheet .shot__title{color:var(--ink);font-size:13.5px;}
.is-sheet .shot__open::before{left:12px;top:12px;opacity:1;}
.is-sheet .shot__open i{right:12px;top:12px;}
@media (min-width:600px){
  .is-sheet .shot{padding:8px;}
  .is-sheet figcaption{padding:16px 6px 8px;}
  .is-sheet .shot__title{font-size:15px;}
  .is-sheet .shot__desc{
    display:-webkit-box;margin-top:5px;overflow:hidden;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;
    font-size:13px;line-height:1.5;
  }
}
@media (hover:hover){
  .is-sheet .shot:hover{border-color:transparent;box-shadow:var(--sh-2);translate:0 -4px;}
  .is-sheet .shot:hover .shot__title{color:var(--azure);}
}

/* photos "develop" as they scroll in: a gold wipe, then the image */
.shots.js-reveal .shot__media::before{
  content:"";position:absolute;z-index:1;inset:0;background:var(--gold);
  transform:translateX(-101%);pointer-events:none;
}
.shots.js-reveal .shot:not(.is-in) .shot__media img{opacity:0;}
.shots.js-reveal .shot.is-in .shot__media::before{animation:wipe .7s var(--d,0ms) cubic-bezier(.55,0,.45,1) both;}
.shots.js-reveal .shot.is-in .shot__media img{animation:develop .8s var(--d,0ms) var(--ease) both;}
@keyframes wipe{from{transform:translateX(-101%);}50%{transform:none;}to{transform:translateX(101%);}}
@keyframes develop{0%,50%{opacity:0;scale:1.14;}100%{opacity:1;scale:1;}}

/* fallback shuffle when View Transitions are unavailable */
.shots.is-shuffling .shot:not([hidden]){animation:rise .5s calc(var(--i,0) * 40ms) var(--ease) both;}

/* View Transitions for filtering and layout changes */
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1);}
::view-transition-old(root),::view-transition-new(root){animation:none;}
html.vt-shots .appbar{view-transition-name:appbar;}
html.vt-shots .bar{view-transition-name:wallbar;}
::view-transition-group(appbar),::view-transition-group(wallbar),
::view-transition-old(appbar),::view-transition-new(appbar),
::view-transition-old(wallbar),::view-transition-new(wallbar){animation:none;}


/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:#050F1B;color:#fff;}
.lb::backdrop{background:#050F1B;}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:fade-in .25s ease;}
.lb.is-closing{animation:fade-out .2s ease forwards;}

.lb__ambient{position:absolute;inset:-12%;z-index:0;pointer-events:none;}
.lb__ambient img{width:100%;height:100%;object-fit:cover;filter:blur(64px) saturate(1.4);opacity:.34;}
.lb > :not(.lb__ambient){position:relative;z-index:1;}

.lb__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px 16px;
}
.lb__count{display:flex;align-items:baseline;gap:6px;color:rgba(255,255,255,.55);font-size:13px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.lb__count b{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;}
.lb__count img{align-self:center;width:34px;height:34px;margin-right:8px;padding:3px;background:#fff;object-fit:contain;}
.lb__tools{display:flex;gap:4px;}
.lb__btn{
  display:grid;place-items:center;flex:none;width:44px;height:44px;
  border:0;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;font-size:16px;
  transition:background-color .2s,color .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.2);}
.lb__btn[aria-pressed="true"]{background:var(--gold);color:var(--navy-900);}
.lb__btn--close{margin-left:6px;background:#fff;color:var(--navy-900);font-size:18px;}
.lb__btn--close:hover{background:var(--gold);}
.lb__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07);}
.lb__progress i{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;}
.lb.is-playing .lb__progress i{animation:lb-bar 5s linear forwards;}
@keyframes lb-bar{to{transform:scaleX(1);}}
@media (max-width:420px){ .lb__count img{display:none;} .lb__tools{gap:2px;} .lb__btn{width:40px;} }

.lb__stage{position:relative;min-height:0;padding:6px 12px;overflow:hidden;touch-action:pinch-zoom;user-select:none;}
.lb > .lb__top,.lb > .lb__foot{z-index:2;}
.lb__figure{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;width:100%;height:100%;margin:0;}
.lb__img{
  width:100%;height:100%;object-fit:contain;
  cursor:zoom-in;-webkit-user-drag:none;
  transition:transform .4s var(--ease),translate .35s var(--ease);
}
.lb.is-dragging .lb__img{transition:none;}
.lb.is-zoomed .lb__img{transform:scale(2.2);cursor:zoom-out;transition:transform .4s var(--ease),transform-origin .15s linear;}
.lb.is-zoomed.is-panning .lb__img{transition:transform .4s var(--ease);}
@media (min-width:900px){ .lb__img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));} }

.lb__spin{
  position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--gold);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
  animation:spin .8s linear infinite;
}
.lb.is-loading .lb__spin{opacity:1;visibility:visible;}

.lb__nav{
  position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;
  border:1px solid rgba(255,255,255,.22);background:rgba(5,15,27,.55);color:#fff;cursor:pointer;font-size:15px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .2s,border-color .2s,color .2s,opacity .25s;
}
.lb__nav--prev{left:10px;}
.lb__nav--next{right:10px;}
.lb__nav:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900);}
.lb.is-zoomed .lb__nav{opacity:0;pointer-events:none;}
@media (min-width:900px){
  .lb__nav{width:58px;height:58px;margin-top:-29px;font-size:17px;}
  .lb__nav--prev{left:28px;}
  .lb__nav--next{right:28px;}
  .lb__stage{padding:10px 110px;}
}

.lb__foot{
  display:grid;gap:14px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(5,15,27,0),rgba(5,15,27,.85) 30%);
  transition:opacity .3s;
}
.lb.is-zoomed .lb__foot{opacity:.15;}
.lb.is-zoomed .lb__foot:hover{opacity:1;}
.lb__info{min-width:0;}
.lb__tag{display:inline-block;padding:3px 9px;background:var(--gold);color:var(--navy-900);font-size:10.5px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;}
.lb__info h2{margin:8px 0 4px;color:#fff;font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);letter-spacing:-.02em;}
.lb__info p{
  display:-webkit-box;max-width:680px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  color:var(--on-dark);font-size:14px;line-height:1.55;
}
.lb__thumbs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px;}
.lb__thumbs::-webkit-scrollbar{display:none;}
.lb__thumbs button{
  flex:none;width:52px;height:52px;padding:0;border:0;background:var(--navy-800);cursor:pointer;
  opacity:.42;outline:2px solid transparent;outline-offset:1px;
  transition:opacity .25s,outline-color .25s;
}
.lb__thumbs button:hover{opacity:.85;}
.lb__thumbs button[aria-current="true"]{opacity:1;outline-color:var(--gold);}
.lb__thumbs button:focus-visible{opacity:1;outline:3px solid var(--azure-300);}
.lb__thumbs img{width:100%;height:100%;object-fit:cover;}
@media (min-width:900px){
  .lb__foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;padding:20px 32px 26px;}
  .lb__thumbs{max-width:min(560px,48vw);}
  .lb__thumbs button{width:62px;height:62px;}
}

.lb__toast{top:56px;}
}

.lb__toast{
  position:absolute;z-index:3;left:50%;top:calc(76px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:10px;padding:11px 18px;
  background:#fff;border-left:3px solid var(--gold);box-shadow:var(--sh-2);
  color:var(--ink);font-size:14px;font-weight:700;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .25s,transform .3s var(--ease),visibility .25s;
}
.lb__toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* landscape phones: give the photo the height, trim the chrome */
@media (max-height:560px){
  .lb__top{padding:6px 8px 6px 12px;}
  .lb__count img{display:none;}
  .lb__count b{font-size:1.1rem;}
  .lb__btn{width:38px;height:38px;font-size:14px;}
  .lb__stage{padding:2px 8px;}
  .lb__nav{width:38px;height:38px;margin-top:-19px;font-size:13px;}
  .lb__foot{gap:0;padding:6px 14px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(5,15,27,0),rgba(5,15,27,.9) 60%);}
  .lb__info h2{margin:5px 0 0;font-size:1.05rem;}
  .lb__info p,.lb__thumbs{display:none;}