/* Outlet Mall Museum. Image-first panels like Wet Pets. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

.museum{
 --pad:clamp(18px,4vw,64px);
 --ink:#EFEAE0;
 --ink-2:#B8AFA0;
 --ink-3:#8C826C;
 --bg:#0B0A08;
 --panel:#16130E;
 --rule:#241F18;
 --gold:#D4A574;
 --ease:cubic-bezier(.22,1,.36,1);
}

body.museum{
 margin:0;
 background:var(--bg);
 color:var(--ink);
 font-family:system-ui,-apple-system,sans-serif;
 line-height:1.5;
 overflow-x:hidden;
 -webkit-font-smoothing:antialiased;
}
.museum a{color:inherit}

.panel{
 position:relative;
 width:100%;
 height:82svh;
 min-height:400px;
 overflow:hidden;
 background:#14110c center/cover no-repeat;
}
.panel#approach{
 background-image:
 linear-gradient(180deg,rgba(11,10,8,.1),rgba(11,10,8,.52) 78%),
 url("assets/storefront.jpg");
}
.panel#hall{
 background-image:
 linear-gradient(180deg,rgba(11,10,8,.08),rgba(11,10,8,.48) 78%),
 url("assets/hall.jpg");
}
.panel--mid{height:70svh;min-height:360px}
.panel__band{
 position:absolute;left:0;right:0;bottom:0;z-index:5;
 padding:clamp(48px,12vh,120px) var(--pad) clamp(22px,4vh,44px);
 background:linear-gradient(180deg,transparent,rgba(8,7,5,.7) 70%);
}
.eyebrow{
 margin:0;
 font-size:clamp(.55rem,1.1vmin,.68rem);
 letter-spacing:.3em;
 text-transform:uppercase;
 color:rgba(212,165,116,.95);
 text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.title{
 margin:.35em 0 0;
 color:#fffaf3;
 font-weight:650;
 line-height:.94;
 letter-spacing:-.025em;
 font-size:clamp(2rem,6.8vmin,4.8rem);
 text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.title--sm{font-size:clamp(1.5rem,4.8vmin,3rem);line-height:1.05}
.sub{
 margin:.7em 0 0;
 max-width:48ch;
 font-size:clamp(.86rem,1.7vmin,1.05rem);
 line-height:1.55;
 color:rgba(239,234,224,.92);
 text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.cta{
 display:inline-flex;align-items:center;gap:9px;
 margin-top:1.4em;
 padding:.85em 1.6em;
 border:1px solid rgba(212,165,116,.7);
 color:#fff;
 text-decoration:none;
 font-size:clamp(.55rem,1.1vmin,.66rem);
 letter-spacing:.24em;
 text-transform:uppercase;
 transition:background 200ms var(--ease),color 200ms var(--ease);
}
.cta:hover,.cta:focus-visible{background:var(--gold);color:var(--bg)}

.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.block{padding:clamp(38px,7vh,84px) 0 0}
.label{
 display:flex;align-items:baseline;justify-content:space-between;gap:16px;
 padding-bottom:12px;margin-bottom:clamp(14px,2.4vh,26px);
 border-bottom:1px solid var(--rule);
}
.label h2{
 margin:0;font-size:clamp(.6rem,1.2vmin,.72rem);font-weight:600;
 letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.label span{font-size:clamp(.66rem,1.2vmin,.76rem);color:var(--ink-3)}
.cap{
 padding:14px 0 0;
 font-size:clamp(.8rem,1.5vmin,.94rem);
 color:var(--ink-2);max-width:62ch;
}

.shot{position:relative;display:block;width:100%;overflow:hidden;background:#16130E;margin:0}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot--wide{aspect-ratio:16/9}
.full.bleed{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}

.split{display:grid;gap:clamp(10px,1.6vw,20px)}
.split>*{min-width:0}

.wings{
 display:grid;
 gap:clamp(12px,1.8vw,22px);
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.wing{
 display:block;
 text-decoration:none;
 color:var(--ink);
 border:1px solid var(--rule);
 background:var(--panel);
 overflow:hidden;
 transition:border-color 180ms var(--ease),transform 180ms var(--ease);
}
.wing:hover,.wing:focus-visible{
 border-color:var(--gold);
 transform:translateY(-3px);
}
.wing .shot{aspect-ratio:16/9}
.wing__body{padding:14px 15px 18px}
.wing__body em{
 display:inline-block;font-style:normal;font-size:.5rem;letter-spacing:.18em;
 text-transform:uppercase;color:var(--bg);background:var(--gold);padding:2px 7px;
 margin-bottom:9px;
}
.wing__body b{display:block;font-size:.95rem;font-weight:600}
.wing__body span{display:block;margin-top:5px;font-size:.76rem;color:var(--ink-3);line-height:1.4}

.pair{display:grid;gap:clamp(8px,1.2vw,16px);grid-template-columns:1fr 1fr}
.pair .shot{aspect-ratio:16/9}
.pair figcaption{padding-top:9px;font-size:clamp(.66rem,1.2vmin,.76rem);color:var(--ink-3)}

.fine{
 padding:clamp(34px,6vh,70px) var(--pad) clamp(50px,9vh,90px);
 text-align:center;
 font-size:clamp(.68rem,1.2vmin,.78rem);
 color:var(--ink-3);
}

@media (min-aspect-ratio: 13/9){
 .panel{height:100svh;min-height:0}
 .panel__band{padding-bottom:clamp(20px,5vh,52px)}
 .title{font-size:clamp(2.4rem,8vmin,6rem)}
 .split{grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-aspect-ratio: 13/9){
 .panel{height:78svh}
 .split{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* Featured Amber Flynn wing: large sign, hero panel above the four outbound wings */
.panel--featured{
 background-image:
 linear-gradient(180deg,rgba(11,10,8,.18),rgba(11,10,8,.62) 72%),
 url("assets/wing-amber-flynn.jpg");
 height:88svh;
 min-height:440px;
}
.panel__band--sign{padding-top:clamp(56px,14vh,140px)}
.title--sign{
 font-size:clamp(1.55rem,5.4vmin,3.6rem);
 letter-spacing:.02em;
 line-height:1.05;
 text-transform:uppercase;
 max-width:18ch;
}
.sign-heading{
 margin:0 0 clamp(14px,2.2vh,22px);
 color:#fffaf3;
 font-weight:650;
 font-size:clamp(1.35rem,3.8vmin,2.4rem);
 letter-spacing:.02em;
 line-height:1.1;
 text-transform:uppercase;
}
.featured-wing__grid{
 display:grid;
 gap:clamp(14px,2vw,28px);
 grid-template-columns:1.35fr .9fr;
 align-items:start;
}
.featured-wing__shot{margin:0}
.featured-wing__copy{
 border:1px solid var(--rule);
 background:var(--panel);
 padding:clamp(16px,2.2vw,26px);
}
.featured-wing__eyebrow{margin:0 0 .8em}
.featured-wing__copy p{
 margin:0 0 .85em;
 font-size:clamp(.84rem,1.55vmin,.98rem);
 color:var(--ink-2);
 line-height:1.55;
 max-width:46ch;
}
.featured-wing__copy p:last-of-type{margin-bottom:1.2em}
.cta--inline{margin-top:.2em}
.featured-wing__detail{margin:clamp(14px,2.2vh,24px) 0 0}
.featured-wing__detail figcaption{
 padding-top:9px;
 font-size:clamp(.66rem,1.2vmin,.76rem);
 color:var(--ink-3);
}
@media (max-width:900px){
 .featured-wing__grid{grid-template-columns:1fr}
 .title--sign{max-width:none}
}
@media (min-aspect-ratio:13/9){
 .panel--featured{height:100svh;min-height:0}
 .title--sign{font-size:clamp(2rem,6.2vmin,4.2rem)}
}