:root{
  --ink:#0a0a09;
  --ink-2:#121210;
  --line:rgba(241,236,228,.14);
  --text:#f1ece4;
  --muted:#a9a297;
  --gold:#e0ab55;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--gold);background:var(--gold);color:#14110a;transition:background .3s,color .3s}
.btn.ghost{background:transparent;color:var(--text);border-color:rgba(241,236,228,.5)}
@media (hover:hover){
  .btn:hover{background:transparent;color:var(--gold)}
  .btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
  .nav-links a:hover,.foot a:hover,.textlink:hover{color:var(--gold)}
}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);transition:background .4s,padding .4s}
.nav.solid{background:rgba(10,10,9,.86);backdrop-filter:blur(10px);padding-top:14px;padding-bottom:14px}
.mark{font:600 22px/1 var(--sans);letter-spacing:.3em}
.nav-links{display:flex;gap:36px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.nav-links a{transition:color .3s}
.nav .btn{padding:13px 20px;font-size:12px}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
/* photo is sized from the window width and hung so the neon sign always sits at 22% down, whatever the window shape */
.hero-img{position:absolute;left:0;top:calc(22svh - 31.3vw);width:134%;aspect-ratio:3/2;will-change:transform}
.hero-img img{animation:settle 2.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:scale(1.12);opacity:0}to{transform:scale(1);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,0) 30%,rgba(10,10,9,.2) 55%,rgba(10,10,9,.96) 100%)}
.hero-copy{position:relative;z-index:2;padding:0 var(--gutter) clamp(48px,9vh,110px);max-width:980px}
.hero h1{font-size:clamp(52px,min(9.2vw,15vh),136px);margin:22px 0 24px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{max-width:560px;font-size:clamp(17px,1.4vw,20px);color:#ddd6cb}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.rise{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.35s}.rise.d2{animation-delay:.55s}.rise.d3{animation-delay:.75s}.rise.d4{animation-delay:.95s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.cue{position:absolute;right:var(--gutter);bottom:clamp(48px,9vh,110px);z-index:2;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.cue::after{content:"";width:1px;height:64px;background:linear-gradient(var(--gold),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* pronunciation */
.brand{display:flex;align-items:baseline;gap:12px}
.say-nav{font:italic 400 18px/1 var(--serif);color:#cfc8bc;white-space:nowrap}
.dict{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px;font:400 clamp(20px,1.9vw,26px)/1.3 var(--serif);color:#cfc8bc}
.dict b{font:600 clamp(15px,1.3vw,18px)/1 var(--sans);letter-spacing:.3em;color:var(--text)}
.dict i{font-style:normal;color:var(--muted)}
.dict em{color:var(--gold)}
.say-foot{font:400 clamp(19px,2vw,26px)/1.3 var(--serif);color:#cfc8bc;margin-top:14px}
.say-foot span{color:var(--muted);margin-left:10px}
/* statement */
.statement{padding:clamp(110px,20vh,240px) var(--gutter);max-width:1480px;margin:0 auto;text-align:center}
.statement p.big{font:400 clamp(30px,4.6vw,64px)/1.18 var(--serif);max-width:19em;margin:28px auto 0;text-wrap:balance}
@media (max-width:600px){.statement p.big{font-size:6.6vw}}
.w{opacity:.16;transition:opacity .35s}
.w.on{opacity:1}

/* room */
.room-head{padding:0 var(--gutter) clamp(40px,7vh,80px)}
.room-head h2{font-size:clamp(34px,4.2vw,64px);margin-top:20px}
.room{display:grid;grid-template-columns:1.05fr .95fr;border-top:1px solid var(--line)}
.room-media{position:sticky;top:0;height:100svh;overflow:hidden}
.room-media img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.6s ease}
.room-media img.on{opacity:1;transform:scale(1)}
.mod{min-height:calc(var(--n,1)*75svh + 25svh);padding:0 var(--gutter);border-bottom:1px solid var(--line)}
.mod-in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.ticks{display:flex;gap:8px;margin-top:34px}
.ticks i{width:34px;height:2px;background:var(--line);transition:background .5s}
.ticks i.on{background:var(--gold)}
.mod:last-child{border-bottom:0}
.mod .num{font:400 20px/1 var(--serif);font-style:italic;color:var(--gold)}
.mod h3{font-size:clamp(44px,5.6vw,88px);margin:16px 0 20px}
.mod p{max-width:42ch;color:#cfc8bc}
.mod .inline{display:none}
.also{border-top:1px solid var(--line);padding:clamp(70px,12vh,140px) var(--gutter)}
.also-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);margin-top:clamp(30px,5vh,56px)}
.also-item{border-top:1px solid var(--gold);padding-top:28px}
.also-item .num{font:400 20px/1 var(--serif);font-style:italic;color:var(--gold)}
.also-item h3{font-size:clamp(40px,4.6vw,72px);margin:14px 0 18px}
.also-item p{max-width:42ch;color:#cfc8bc}

/* band: the photo is hung so the neon sign sits 38% down, and the title sits just under it */
.band{position:relative;height:100svh;overflow:hidden;text-align:center}
.band-in{position:absolute;inset:0;will-change:transform}
.band-img{position:absolute;left:7%;width:86%;aspect-ratio:3/2;top:calc(38% - 25.2vw);opacity:.9;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 44%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 44%,#000 40%,transparent 100%)}
.band-copy{position:absolute;left:0;right:0;top:calc(38% + 6.5vw);padding:0 var(--gutter)}
.band h2{font-size:clamp(30px,4.4vw,68px);font-style:italic}
.band p{margin:18px auto 0;font-size:clamp(17px,1.4vw,20px);color:#e4ddd2}

/* how */
.how{padding:clamp(90px,16vh,190px) var(--gutter);max-width:1320px;margin:0 auto}
.how h2{font-size:clamp(38px,5.4vw,76px);margin:20px 0 clamp(44px,8vh,90px);max-width:16ch}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.col{border-top:1px solid var(--gold);padding-top:26px}
.col h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:14px}
.col p{color:#cfc8bc}

/* gallery */
.gallery{position:relative}
.gallery-pin{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-pin::-webkit-scrollbar{display:none}
.track{display:flex;gap:clamp(12px,1.6vw,24px);padding:0 var(--gutter);width:max-content}
.track figure{margin:0;height:min(72svh,640px);aspect-ratio:2/3;overflow:hidden;scroll-snap-align:center;flex:none}
.track figure.wide{aspect-ratio:3/2}
.gallery.pin{height:340vh}
.gallery.pin .gallery-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.gallery.pin .track{will-change:transform}

/* paths */
.paths{padding:clamp(90px,16vh,190px) var(--gutter) clamp(60px,10vh,120px);max-width:1440px;margin:0 auto}
.paths-head{text-align:center;margin-bottom:clamp(40px,7vh,80px)}
.paths-head h2{font-size:clamp(38px,5.4vw,76px);margin-top:20px}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.path{position:relative;min-height:min(78svh,720px);overflow:hidden;display:flex;align-items:flex-end;padding:clamp(26px,3.4vw,52px)}
.path img{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.path::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.1) 20%,rgba(10,10,9,.92) 100%)}
.path-copy{position:relative;z-index:2;max-width:460px}
.path h3{font-size:clamp(32px,3.4vw,52px);margin:16px 0 14px}
.path p{color:#ddd6cb;margin-bottom:26px}
@media (hover:hover){.path:hover img{transform:scale(1.05)}}

/* locations: a heading, a compact card per open room, then placeholders for the next ones */
.locs{padding-top:clamp(70px,12vh,150px)}
.locs-head{text-align:center;margin-bottom:clamp(30px,5vh,60px);padding:0 var(--gutter)}
.locs-head h2{font-size:clamp(38px,5.4vw,76px);margin-top:20px}
.loc{position:relative;overflow:hidden;width:min(1040px,calc(100% - 2*var(--gutter)));margin:0 auto;border:1px solid var(--line)}
.loc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 36%,rgba(10,10,9,.6) 58%,rgba(10,10,9,.1) 100%)}
.loc-copy{position:relative;z-index:2;max-width:60%;min-height:360px;padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.loc h3{font-size:clamp(30px,3.2vw,44px);margin:16px 0 8px}
.loc .where{color:var(--muted);font:500 12px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px}
.loc p.note{color:#cfc8bc;max-width:36ch;margin-bottom:24px}
.loc .btn{padding:15px 22px;font-size:12px}
.loc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.textlink{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text);padding:10px 0;border-bottom:1px solid var(--gold);transition:color .3s}
.loc-img{position:absolute;inset:0 0 0 36%;overflow:hidden}
/* the photo is an unmarked staff link to the maintenance checklist */
a.loc-img{cursor:default}
.loc-copy{pointer-events:none}
.loc-copy>*{pointer-events:auto}
.soon-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);width:min(1040px,calc(100% - 2*var(--gutter)));margin:clamp(12px,1.6vw,20px) auto 0}
.soon{border:1px dashed rgba(241,236,228,.24);padding:clamp(26px,3.2vw,44px)}
.soon .eyebrow{color:var(--muted)}
.soon h3{font-size:clamp(26px,2.6vw,36px);margin:14px 0 6px;color:#cfc8bc}
.soon p{color:var(--muted)}

/* footer */
.foot{padding:clamp(70px,12vh,130px) var(--gutter) 40px;text-align:center}
.foot .mark{font-size:clamp(40px,9vw,120px);letter-spacing:.24em;margin-right:-.24em;display:block}
.foot .tag{font:italic 400 clamp(22px,2.4vw,32px)/1.2 var(--serif);color:var(--gold);margin:12px 0 44px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.foot small{display:block;margin-top:56px;color:var(--muted);font-size:13px}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.s1{transition-delay:.12s}.js .reveal.s2{transition-delay:.24s}
.js .slide-l img{opacity:0;transform:translateX(-56px);transition:opacity 1.3s cubic-bezier(.2,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .slide-l.in img{opacity:1;transform:none}

@media (max-width:900px){
  .nav-links{display:none}
  .cue{display:none}
  .hero-img{top:0;width:100%;height:60%;aspect-ratio:auto}
  .hero-img img{object-position:50% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(10,10,9,.5) 0%,rgba(10,10,9,0) 16%,rgba(10,10,9,0) 34%,var(--ink) 58%)}
  .room{display:block}
  .room-media{display:none}
  .mod{min-height:0;padding:0 0 56px;border-bottom:0}
  .mod-in{position:static;height:auto;display:block}
  .ticks{display:none}
  .mod .inline{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-bottom:28px}
  .mod .inline::-webkit-scrollbar{display:none}
  .mod .inline img{flex:0 0 100%;height:auto;aspect-ratio:4/5;scroll-snap-align:center}
  .mod .inline.multi{padding:0 var(--gutter)}
  .mod .inline.multi img{flex-basis:84%}
  .mod .num,.mod h3,.mod p{margin-left:var(--gutter);margin-right:var(--gutter)}
  .band{height:72svh}
  .band-img{left:-10%;width:120%;top:calc(34% - 35.2vw)}
  .band-copy{top:calc(34% + 10vw)}
  .cols{grid-template-columns:1fr}
  .also-grid{grid-template-columns:1fr}
  .track figure{height:56svh}
  .path-grid{grid-template-columns:1fr}
  .path{min-height:64svh}
  .loc::after{background:linear-gradient(180deg,rgba(10,10,9,.1) 0,rgba(10,10,9,.55) 150px,var(--ink) 250px)}
  .loc-img{inset:0 0 auto 0;height:260px}
  .loc-copy{max-width:none;min-height:0;padding-top:200px}
  .soon-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .brand{gap:8px}
  .say-nav{font-size:15px}
  .mark{font-size:18px}
  .nav .btn{padding:12px 14px;letter-spacing:.12em}
  .hero-btns .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .slide-l img{opacity:1;transform:none}
  .w{opacity:1}
}
@media (max-width:370px){.say-nav{display:none}}