/* The landscape is the viewport. The interface stays at its edges. */
.hero,.header{
  --hero-ink:#fffdf4;
  --hero-muted:rgba(255,253,244,.83);
  --hero-line:rgba(255,253,244,.32);
  color:var(--hero-ink);
}
.hero{
  height:100svh;min-height:680px;max-height:none;
  background:#17231d;isolation:isolate;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,11,.58) 0%,rgba(4,14,11,.2) 17%,transparent 35%,transparent 48%,rgba(4,14,11,.12) 66%,rgba(4,14,11,.62) 100%);
  transition:opacity 1.4s;
}
.dusk .hero::before{opacity:.78}
#gallery{inset:0;top:0;width:100%;height:100%;mask-image:none;-webkit-mask-image:none;z-index:0}
.poster,.dusk .poster{inset:0;background:#17231d;z-index:0}
.poster>img{
  inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--photo-x,52%) var(--photo-y,52%);
  transform:scale(1.018);
}
.poster-reflection{display:none}
.header{height:106px;background:none;text-shadow:0 1px 16px rgba(0,0,0,.18)}
.header .monogram{font-size:36px}
.header .venue-nav{font-size:12px}
.header .group-nav{font-size:11px}
.venue-nav button{color:var(--hero-muted)}
.venue-nav button[aria-pressed=true],.venue-nav button:hover{color:#fffdf4}
.venue-nav button:after{height:1px;bottom:4px}
.header .group-nav a:after{bottom:5px}
.light-switch{font-size:10px}
.hero-wordmark{
  left:var(--gallery-gutter);bottom:65px;z-index:2;
  text-shadow:0 2px 32px rgba(0,0,0,.13);
}
.hero-wordmark h1{font-size:clamp(78px,7.2vw,124px);line-height:.85;letter-spacing:-.055em}
.hero-wordmark p{font-size:clamp(22px,2vw,30px);line-height:1.2;margin-top:20px;letter-spacing:-.015em}
.hero-wordmark p em{margin-left:4px}
.place-caption{right:var(--gallery-gutter);bottom:65px;max-width:44%;min-width:405px;text-shadow:0 1px 18px rgba(0,0,0,.15)}
.place-caption .eyebrow{font-size:8px;letter-spacing:.16em;color:var(--hero-muted)}
.place-title{font-size:clamp(42px,3.8vw,64px);line-height:1.04;margin:8px 0 10px auto;letter-spacing:-.035em}
.place-title span{font-size:22px;margin-left:15px}
.place-caption p{font-size:11px;line-height:1.6;letter-spacing:.015em;color:var(--hero-muted)}
.frame-navigation{gap:10px;margin-top:18px;min-height:36px}
.frame-label{min-width:132px;font-size:10px;color:var(--hero-muted)}
.frame-label small{font-size:8px;opacity:.65}
.frame-steps button{width:24px;height:36px}
.frame-steps button:after{top:17px;opacity:.4}
.frame-steps button[aria-pressed=true]:after{opacity:1}
.frame-navigation>button{height:36px}
.frame-navigation .motion-toggle{height:36px;font-size:10px;min-width:55px;padding-left:13px;margin-left:5px}
.scroll-cue{bottom:20px;color:rgba(255,253,244,.85);z-index:3;letter-spacing:.17em}
.hero :focus-visible,.header :focus-visible{outline-color:#fffdf4}
.hero #gallery:focus-visible{outline-offset:-5px}

@media(max-width:1320px){
  .header{height:118px;grid-template-rows:64px 54px}
  .header .venue-nav{border-top-color:rgba(255,253,244,.2)}
}
@media(min-width:761px) and (max-width:1100px){
  .hero-wordmark h1{font-size:76px}
  .hero-wordmark p{font-size:22px}
  .place-title{font-size:40px}
  .place-caption{min-width:350px}
  .frame-label{min-width:100px;font-size:9px}
  .frame-steps button{width:20px}
  .frame-navigation{gap:6px}
}
@media(max-width:760px){
  .hero{height:100svh;min-height:660px}
  .header{height:140px;grid-template-rows:64px 76px}
  .header .monogram{font-size:32px}
  .header .venue-nav{font-size:11px}
  .header .group-nav{font-size:9px}
  .hero::before{background:linear-gradient(180deg,rgba(4,14,11,.65),rgba(4,14,11,.23) 24%,transparent 40%,rgba(4,14,11,.13) 53%,rgba(4,14,11,.71) 100%)}
  .hero-wordmark{left:6vw;bottom:229px}
  .hero-wordmark h1{font-size:clamp(65px,17vw,100px);line-height:.85}
  .hero-wordmark p{font-size:21px;margin-top:14px}
  .place-caption{left:6vw;right:6vw;bottom:60px;max-width:none;min-width:0;text-align:left}
  .place-caption .eyebrow{font-size:7px;letter-spacing:.13em}
  .place-title{font-size:clamp(35px,9vw,48px);margin:6px 0 6px;text-align:left}
  .place-title span{font-size:18px;margin-left:10px}
  .place-caption p{font-size:10px;line-height:1.5}
  .frame-navigation{margin-top:11px;gap:5px;justify-content:flex-start}
  .frame-label{flex:1;min-width:0;font-size:9px;text-align:left}
  .frame-label small{font-size:7px;margin-left:5px}
  .frame-steps button{width:22px}
  .frame-navigation>button{width:28px}
  .frame-navigation .motion-toggle{min-width:28px;width:28px;font-size:0;padding-left:8px;margin-left:3px}
  .frame-navigation .motion-toggle span{font-size:13px}
  .scroll-cue{bottom:19px;font-size:7px}
}
@media(max-width:380px){
  .header .venue-nav{font-size:10px}
  .header .group-nav{font-size:8px}
  .hero-wordmark h1{font-size:62px}
  .hero-wordmark p{font-size:19px}
  .frame-label small{display:none}
}
@media(prefers-reduced-motion:reduce){.hero::before{transition:none}}