/* Minimal front door: one photo, the wordmark, six choices. */
:root{
  --ink:#1F1B17; --ivory:#F6F2EA; --clay:#C9785C;
  --serif:"Fraunces",Georgia,serif; --sans:"Barlow Semi Condensed",system-ui,sans-serif;
  --pad:clamp(1.25rem,4vw,3.5rem); --ease:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font:400 1.05rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ivory);color:var(--ink);padding:.7rem 1rem}

/* background photos cross-fade to the place you point at */
.stage{position:fixed;inset:0;z-index:0;background:var(--ink)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--ease),transform 6s var(--ease)}
.stage img.on{opacity:1;transform:scale(1)}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(20,16,13,.3),rgba(20,16,13,.58)),linear-gradient(180deg,rgba(20,16,13,.25),rgba(20,16,13,.05) 40%,rgba(20,16,13,.7))}

.door{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-rows:1fr auto auto auto;padding:clamp(2rem,6vh,4rem) var(--pad) 0}
.brand{align-self:end;text-align:center;padding-bottom:clamp(2rem,5vh,3.5rem);opacity:0;animation:rise 1.4s .15s var(--ease) forwards}
.brand h1{margin:0}
.brand img{width:clamp(200px,24vw,320px);margin:0 auto}
.brand p{margin:1.4rem 0 0;font:500 .8rem var(--sans);letter-spacing:.28em;text-transform:uppercase;opacity:.85}
.brand .sep{margin:0 .8em;opacity:.55}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:70rem;width:100%;margin:0 auto;border-top:1px solid rgba(246,242,234,.3);opacity:0;animation:rise 1.4s .45s var(--ease) forwards}
.doors a{display:block;padding:clamp(1.1rem,2.6vh,1.7rem) 1rem;text-align:center;text-decoration:none;border-bottom:1px solid rgba(246,242,234,.3);transition:background .4s}
.doors a:nth-child(3n+2){border-left:1px solid rgba(246,242,234,.3);border-right:1px solid rgba(246,242,234,.3)}
.doors span{display:block;font:300 clamp(1.7rem,2.8vw,2.5rem)/1.1 var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.01em;transition:transform .5s var(--ease)}
.doors small{display:block;margin-top:.45rem;font-size:.95rem;opacity:.75;transition:opacity .3s}
.doors a:hover,.doors a:focus-visible{background:rgba(246,242,234,.08)}
.doors a:hover span,.doors a:focus-visible span{font-style:italic;transform:translateY(-2px)}
.doors a:hover small,.doors a:focus-visible small{opacity:1}

.bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 2rem;padding:clamp(1.25rem,3vh,2rem) 0 clamp(.9rem,2vh,1.3rem);font-size:.98rem;opacity:0;animation:rise 1.4s .75s var(--ease) forwards}
.bar a{text-decoration:none;opacity:.9}
.bar a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.bar .reserve{border:1px solid rgba(246,242,234,.7);padding:.45rem 1.1rem;font:500 .78rem var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:1}
.bar .reserve:hover{background:var(--ivory);color:var(--ink);text-decoration:none}
.bar .next b{font-weight:600}
.fineprint{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem 0;margin:0;padding:0 0 calc(1.3rem + env(safe-area-inset-bottom));font-size:.86rem;color:rgba(246,242,234,.6);opacity:0;animation:rise 1.4s .9s var(--ease) forwards}
.fineprint > *{padding:0 .9rem;border-left:1px solid rgba(246,242,234,.22);line-height:1.1}
.fineprint > :first-child{border-left:0}
.fineprint span + a{border-left:0;padding-left:.45rem}
.fineprint a{text-decoration:none;color:rgba(246,242,234,.78)}
.fineprint a:hover{color:var(--ivory);text-decoration:underline;text-underline-offset:4px}
.st{display:inline-flex;align-items:center;gap:.5rem}
.st i{width:.5rem;height:.5rem;border-radius:50%;background:#b9ad9f}
.st.open i{background:#A9D46F;box-shadow:0 0 0 3px rgba(169,212,111,.25)}

@media (max-width:760px){
  .door{grid-template-rows:auto auto auto;padding-top:clamp(3rem,10vh,5rem)}
  .brand{align-self:start}
  .brand .sep{display:block;height:.5rem;overflow:hidden;visibility:hidden}
  .doors{grid-template-columns:1fr 1fr}
  .doors a:nth-child(3n+2){border-left:0;border-right:0}
  .doors a:nth-child(odd){border-right:1px solid rgba(246,242,234,.3)}
  .doors small{font-size:.85rem}
  .bar{flex-wrap:wrap;justify-content:center;gap:.8rem}
  .bar .st,.bar .next{flex-basis:100%;justify-content:center;text-align:center}
  .fineprint{font-size:.82rem;gap:.5rem 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.brand,.doors,.bar,.fineprint{opacity:1}}