:root{--cream:#FDF4E7;--ink:#282E35;--ochre:#D19A47;--slate:#3B4A4C;--fern:#4E583F;--brown:#4D2E1D;--ease:cubic-bezier(.7,0,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);background:var(--ochre);transition:background .5s;line-height:1.5;font-size:17px}
body[data-floor="R"]{background:#6a3a2a;--fg:var(--cream)}
body[data-floor="4"]{background:var(--brown);--fg:var(--cream)}
body[data-floor="G"]{background:var(--ochre);--fg:var(--ink)}
body[data-floor="B"]{background:var(--fern);--fg:var(--cream)}
.skip{position:absolute;left:-999px;top:0;background:var(--cream);padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}

.top{position:fixed;top:0;left:0;right:0;z-index:20;padding:14px 20px;pointer-events:none}
.top{display:flex;justify-content:space-between;align-items:flex-start}
.hosp{margin:6px 0 0;font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;color:var(--fg,var(--ink));transition:color .5s;text-align:right}
.brand{pointer-events:auto;display:inline-block}
.brand img{height:40px;width:auto}

.floor{display:none;min-height:100vh;min-height:100dvh;padding:90px 24px 130px;color:var(--fg,var(--ink))}
.floor.on{display:block;animation:in .5s .1s both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.floor-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.col{max-width:560px}
.kicker{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;margin:0 0 6px;opacity:.85}
h1,h2{font-weight:800;font-stretch:90%;letter-spacing:-.02em;line-height:1.02;margin:0 0 18px}
h1{font-size:clamp(38px,6vw,72px)}
h2{font-size:clamp(34px,5vw,60px)}
h1:focus,h2:focus{outline:none}
.lead{font-size:19px;margin:0 0 24px;max-width:48ch}
h3{font-size:20px;margin:0 0 8px}

.btn{display:inline-block;border:3px solid var(--ink);background:var(--cream);color:var(--ink);border-radius:999px;padding:11px 22px;font-weight:700;text-decoration:none;box-shadow:3px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;font-size:16px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.solid{background:var(--ink);color:var(--cream);border-color:var(--cream);box-shadow:3px 4px 0 rgba(0,0,0,.45)}
.fG .btn.solid{border-color:var(--ink);box-shadow:3px 4px 0 var(--cream)}
.fR .btn,.f4 .btn,.fB .btn{border-color:var(--cream);box-shadow:3px 4px 0 rgba(0,0,0,.45);background:transparent;color:var(--cream)}
.fR .btn.solid,.f4 .btn.solid,.fB .btn.solid{background:var(--cream);color:var(--ink)}
.btn.small{padding:8px 16px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}

.plq{display:inline-block;background:var(--cream);border:4px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.5);padding:12px 18px;margin:0 0 28px;border-radius:6px}
.plq img{height:84px;width:auto}
.plq img.love{height:70px}

.hours{margin:0 0 24px;border-top:2px solid currentColor}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
.hours dt{font-weight:600}.hours dd{margin:0}
.also{font-family:'Instrument Serif',serif;font-style:italic;font-size:20px}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-style:italic;font-family:inherit}
.menu-h{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:26px;margin:8px 0 6px}
.menu{list-style:none;padding:0;margin:0 0 24px}
.menu li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed rgba(253,244,231,.35)}
.menu b{white-space:nowrap}

.photo{margin:0;transform:rotate(2deg)}
.photo img{width:100%;border:4px solid var(--cream);box-shadow:8px 10px 0 rgba(0,0,0,.4);border-radius:6px}
.photo figcaption{font-family:'Instrument Serif',serif;font-style:italic;margin-top:14px;font-size:19px;text-align:center}

/* street */
.hero{grid-template-columns:1fr 1fr}
.art-in{position:relative;max-width:520px;margin:0 auto}
.art-in>img{width:100%;filter:drop-shadow(8px 10px 0 rgba(40,46,53,.35))}
.hs{position:absolute;left:1%;width:49%;border:3px dashed transparent;background:transparent;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;padding:0}
.hs span{background:var(--ink);color:var(--cream);font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px;margin-bottom:8px;opacity:0;transform:translateY(4px);transition:.2s}
.hsR{top:0;height:23%}.hs4{top:24%;height:19%}.hsB{bottom:2.5%;height:17%}
.hs:hover,.hs:focus-visible{border-color:var(--ink);background:rgba(253,244,231,.2)}
.hs:hover span,.hs:focus-visible span{opacity:1;transform:none}
.info{max-width:1100px;margin:70px auto 0}
.info-in{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--cream);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);border-radius:10px;padding:22px}
.card p{margin:0 0 12px}
.card .links a{display:block;margin-bottom:6px;font-weight:600}
.foot{text-align:center;margin-top:48px}
.foot img{height:46px;margin:0 auto 10px}
.foot p{margin:4px 0}
.social a{margin:0 10px;font-weight:600}

/* lift panel */
.lift{position:fixed;z-index:30;right:20px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--cream);border:3px solid var(--cream);border-radius:16px;box-shadow:4px 6px 0 rgba(0,0,0,.4);padding:12px;width:104px;text-align:center}
.lift-top{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px}
.lvl{height:96px;width:auto;color:var(--cream)}
.lvl{--fR:transparent;--f4:transparent;--fG:transparent;--fB:transparent}
.z{transition:fill .3s}
.zR{fill:var(--fR)}.z4{fill:var(--f4)}.zG{fill:var(--fG)}.zB{fill:var(--fB)}
.z.zb{fill-opacity:.38}
body[data-floor="R"] .lvl{--fR:#D19A47}
body[data-floor="4"] .lvl{--f4:#D19A47}
body[data-floor="G"] .lvl{--fG:#D19A47}
body[data-floor="B"] .lvl{--fB:#D19A47}
.disp{font-family:'Bricolage Grotesque';font-weight:800;font-size:28px;background:#000;color:#ff9d3c;width:100%;border-radius:6px;padding:2px 0;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.btns{display:flex;flex-direction:column;gap:8px}
.lb{background:transparent;border:2px solid var(--cream);border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.lb b{font-size:22px}.lb span{font-size:11px;opacity:.85}
.lb[aria-current="true"]{background:var(--ochre);color:var(--ink);border-color:var(--ochre)}
.lb:hover{background:rgba(253,244,231,.15)}.lb[aria-current="true"]:hover{background:var(--ochre)}
.tag{font-family:'Instrument Serif',serif;font-style:italic;margin:10px 0 0;font-size:14px}

/* doors: cartoon lift doors */
.doors{position:fixed;inset:0;z-index:25;pointer-events:none}
.d{position:absolute;top:0;bottom:0;width:50%;background:var(--slate);transition:transform .38s var(--ease);overflow:hidden;
  background-image:repeating-linear-gradient(115deg,transparent 0 22px,rgba(253,244,231,.06) 22px 24px)}
.dl{left:0;transform:translateX(-101%);border-right:6px solid var(--ink)}
.dr{right:0;transform:translateX(101%);border-left:6px solid var(--ink)}
/* inset panel with hard ink outline and offset shadow */
.d b{position:absolute;inset:14% 12% 10% 12%;border:6px solid var(--ink);border-radius:8px;background:#46585a;box-shadow:inset 8px 8px 0 rgba(253,244,231,.12),6px 8px 0 rgba(40,46,53,.55)}
/* cream shine stripes */
.d u{position:absolute;top:18%;bottom:14%;left:24%;width:14px;background:var(--cream);opacity:.35;transform:skewX(-12deg);border-radius:8px;box-shadow:26px 0 0 -4px rgba(253,244,231,.35)}
.dr u{left:auto;right:24%}
/* ochre frame stripe at the seam, like the building's trim */
.dl::after,.dr::after{content:"";position:absolute;top:0;bottom:0;width:18px;background:var(--ochre);border:5px solid var(--ink);border-width:0 5px}
.dl::after{right:0}.dr::after{left:0}
.dsign{position:absolute;left:50%;top:5%;transform:translateX(-50%);min-width:84px;text-align:center;background:var(--cream);color:var(--ink);border:5px solid var(--ink);border-radius:999px 999px 10px 10px;box-shadow:4px 6px 0 rgba(40,46,53,.55);font-weight:800;font-size:34px;line-height:1;padding:12px 18px 8px;opacity:0;transition:opacity .2s;z-index:2}
.doors.shut .dl,.doors.shut .dr{transform:none}
.doors.shut .dsign{opacity:1}
.doors.shut{pointer-events:auto}

@media (min-width:821px){.floor{padding-right:150px}.top{padding-right:150px}}
@media (max-width:820px){
  body{font-size:16px}
  .floor{padding:76px 20px 130px}
  .floor-in,.hero{grid-template-columns:1fr;gap:32px}
  .photo{transform:none;order:2}
  .info-in{grid-template-columns:1fr}
  .plq img{height:70px}
  /* lift becomes bottom tab bar */
  .lift{top:auto;bottom:0;right:0;left:0;transform:none;width:auto;border-radius:16px 16px 0 0;border-width:3px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
  .lift-top{flex-direction:row;margin:0}
  .lvl{height:48px}.disp{width:46px;font-size:22px}
  .btns{flex-direction:row;flex:1}
  .lb{flex:1;flex-direction:row;gap:6px;justify-content:center;padding:8px 4px}
  .lb span{font-size:12px}
  .tag{display:none}
  .brand img{height:34px}.hosp{font-size:16px}
}
@media (max-width:560px){.lb span{display:none}.lb{padding:8px 2px}.lb b{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.kicker.addr{margin:-4px 0 18px}

/* menu page */
body.menu-page{background:var(--brown);--fg:var(--cream);color:var(--cream)}
.menu-page .top{padding-right:20px}
.menu-wrap{max-width:900px;margin:0 auto;padding:96px 24px 80px}
.menu-wrap h1{font-size:clamp(44px,8vw,84px)}
.menu-wrap h2{font-size:clamp(30px,5vw,46px);margin:56px 0 20px;padding-top:12px;border-top:3px solid var(--cream)}
.jump{display:flex;gap:12px;margin:0 0 8px}
.menu-page .btn{border-color:var(--cream);box-shadow:3px 4px 0 rgba(0,0,0,.45);background:transparent;color:var(--cream)}
.menu-page .btn.solid{background:var(--cream);color:var(--ink)}
.drinks{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.drink{background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.45);border-radius:10px;padding:20px 22px}
.drink h3{text-transform:uppercase;letter-spacing:.02em;font-weight:800;font-size:22px;margin:0 0 4px}
.drink p{margin:0 0 10px;font-size:16px}
.drink .ing{font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;color:var(--brown);line-height:1.25}
.drink .note{font-size:14px;font-weight:600;margin:0}
.dishes{list-style:none;padding:0;margin:0 0 18px}
.dishes li{padding:12px 0;border-bottom:1px dashed rgba(253,244,231,.35)}
.dishes b{display:block;font-size:19px}
.dishes span{display:block;opacity:.88}
.sub{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:28px;margin:28px 0 4px}
.fine{font-size:14px;opacity:.8}
.menu-actions{margin-top:48px}
@media (max-width:700px){.drinks{grid-template-columns:1fr}.menu-wrap{padding-top:84px}}
body.love-page{background:var(--fern)}
.priced li{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.priced em{font-style:normal;font-weight:800;font-size:19px;white-space:nowrap}
.priced span{max-width:52ch}
.love-page .drink .ing{color:var(--fern)}
.dh{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.dh em{font-style:normal;font-weight:800;font-size:19px}
.drink.mug{background:var(--ochre);display:flex;flex-direction:column;justify-content:center}

.card .links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.card .links a.btn{margin:0;font-weight:700}
.social{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.social a.btn{margin:0;font-weight:700;border-color:var(--ink);box-shadow:3px 4px 0 var(--ink)}
.card a.btn{text-decoration:none}


.addr-note{font-size:15px;margin:20px 0 0;opacity:.85;user-select:all}
.addr-note:empty{display:none}

.photo.duo{display:grid;gap:22px;transform:none}
.photo.duo img{width:100%}
.photo.duo img:nth-of-type(1){transform:rotate(1.6deg)}
.photo.duo img:nth-of-type(2){transform:rotate(-1.6deg)}
@media (max-width:820px){.photo.duo{order:2}.photo.duo img{transform:none}}

.photo.duo.roof img:nth-of-type(2){width:62%;justify-self:center}
@media (max-width:820px){.photo.duo.roof img:nth-of-type(2){width:78%}}
@media (max-width:480px){.hero .actions{flex-wrap:nowrap;gap:8px}.hero .actions .btn{padding:10px 13px;font-size:15px}}

/* header bar: Arch Slate block colour */
.top{background:var(--slate);border-bottom:3px solid var(--ink);pointer-events:auto;align-items:center;padding-top:10px;padding-bottom:10px}
.top .hosp{color:var(--cream);margin:0}
.floor{scroll-margin-top:70px}

.hero-logo{width:clamp(180px,26vw,300px);height:auto;margin:0 0 20px -6px}
.hero-logo{width:clamp(257px,40.5vw,486px);margin-left:-8px}
@media (max-width:820px){.hero-logo{width:min(100%,340px);margin-left:-6px}}