/* Approved ivory gallery. */
:root:has(.gallery){background:var(--ivory)}
.gallery .poster{padding:28px 5vw;min-height:100svh}
.gallery .poster .mast{position:absolute;top:26px;right:5vw;z-index:8;margin:0;padding:0;background:transparent}
.gallery .identity{display:grid;place-items:center;width:68px;height:68px}
.gallery .identity img{width:46px;height:42px;filter:none}
.gallery .gallery-body{padding:64px 0 24px}
.gallery .intro h1{font-family:Heebo,Arial,sans-serif;font-size:clamp(38px,4vw,58px);font-weight:550;letter-spacing:-.045em;line-height:1.18}
.gallery .intro p{font-size:16px}
.gallery .intro .eyebrow{font-size:13px;margin-bottom:12px}
.gallery .destinations{margin-top:28px}
.gallery .rail-head{margin-bottom:38px}
.gallery .city-selectors{gap:8px}
.gallery .city-selectors button{min-width:72px;min-height:44px}
.gallery #rail{--card-w:clamp(230px,min(29vw,40svh),350px);--step:calc(var(--card-w)*.71);perspective:1600px;height:calc(var(--card-w)*1.23)}
.gallery .card{transition:transform .68s cubic-bezier(.22,.8,.22,1),box-shadow .68s ease;border-radius:22px}
.gallery .card[data-depth="1"]{--scale:.84;--step:calc(var(--card-w)*.71);--light:.98}
.gallery .card[data-depth="2"]{--scale:.66;--step:calc(var(--card-w)*.66);--light:.96}
.gallery .city{font-family:Heebo,Arial,sans-serif;font-size:27px;font-weight:500;letter-spacing:-.04em}
.gallery .rail-nav{gap:12px;margin-top:32px}
.gallery .rail-nav button{width:46px;height:46px;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .18s ease}
.gallery .rail-nav button:active{transform:scale(.94)}
.gallery .identity{border-radius:22px;background:var(--charcoal);box-shadow:0 7px 16px -9px #14191e99,inset 0 1px 0 #ffffff50}
.gallery .card{transform:translate(-50%,-50%) translateX(calc(var(--offset)*var(--step))) translateY(calc((1 - var(--scale))*18px)) rotateY(calc(var(--offset)*-5deg)) scale(var(--scale))}
.gallery .card[data-depth="0"]{box-shadow:0 26px 32px -21px #14191e88,0 4px 10px -4px #14191e40}
.gallery .card[data-depth="1"]{box-shadow:0 16px 26px -20px #14191e88}
.gallery .city-selectors button{border-color:#14191e40}
.gallery .city-selectors [aria-pressed=true]{background:var(--red);border-color:var(--red)}
.gallery .city-selectors [aria-pressed=true]::before{display:none}

.gallery .card{background:var(--charcoal);color:var(--ivory)}
.gallery .card .city{position:absolute;top:39%;right:0;left:0;line-height:1.15;font-size:clamp(40px,4.3vw,70px);font-weight:350;letter-spacing:-.06em;z-index:2;text-shadow:0 2px 12px var(--ink)}
.gallery .card-action,.gallery .state{position:absolute;bottom:25px;z-index:2}
.gallery .card::after{display:none}
.gallery .card .surface{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#f3f0e815,transparent 45%),var(--charcoal)}
.gallery .surface::before{content:"";position:absolute;left:20px;right:20px;top:20px;bottom:20px;border:1px solid #f3f0e822;border-radius:11px;box-shadow:inset 0 1px 0 #f3f0e833}
.gallery .card .city::after{content:"";display:block;width:30px;height:3px;border-radius:10px;background:var(--red);margin:25px auto 0;box-shadow:0 0 15px #c94b3a55}
.gallery .card::before{z-index:3;pointer-events:none;background:linear-gradient(122deg,#f3f0e833,transparent 16%,transparent 79%,#f3f0e80c);box-shadow:inset 0 0 0 1px #f3f0e866,inset 2px 2px 1px #f3f0e8cc,inset -2px -2px 2px var(--ink);opacity:.68;transition:opacity .68s ease}
.gallery .card[data-depth="0"]::before{opacity:1}

@media(max-width:700px){
  .gallery .poster{padding:22px 16px}
  .gallery .poster .mast{top:18px;right:20px}
  .gallery .identity{width:54px;height:54px;border-radius:17px}
  .gallery .identity img{width:38px;height:34px}
  .gallery .gallery-body{padding:96px 0 28px;justify-content:center}
  .gallery .intro h1{font-size:37px}
  .gallery .intro p{font-size:15px;max-width:30ch}
  .gallery .city-selectors button{min-width:56px;padding:5px 9px;font-size:13px}
  .gallery .city-selectors{gap:5px}
  .gallery .destinations{margin-top:24px}
  .gallery .rail-head{margin-bottom:30px}
  .gallery #rail{--card-w:54vw;--step:calc(var(--card-w)*.77)}
  .gallery .rail-nav{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .gallery .card,.gallery .card::before,.gallery .rail-nav button{transition:none}
}
