@font-face{font-family:Oswald;font-weight:200 700;font-style:normal;font-display:swap;src:url(/fonts/oswald-var.woff2) format("woff2")}

/* The original is laid out on a 1024-wide canvas that scales with the window. 1u = 1 canvas px. */
:root{--u:calc(var(--vw,100vw) / 1024)}
@media (max-width:700px){:root{--u:calc(var(--vw,100vw) / 560);--ox:-232}}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-y:scroll;background:#000;-webkit-text-size-adjust:100%}
body{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:450;color:#fff;background:#000;overflow-x:hidden}
a{color:inherit;text-decoration:none}
i{display:block}

.bg{position:fixed;inset:0;background:#fff url(/img/bg.jpg) center/cover no-repeat;z-index:0}

.page{position:relative;height:calc(var(--u)*4260);overflow:hidden;z-index:1}
.page>*{position:absolute}
#menus{position:absolute;inset:0}

/* absolutely placed helpers: --x --y --w --h are canvas units */
.fixed{position:fixed;z-index:50;pointer-events:none}
.nav{left:0;top:0;width:calc(var(--u)*300);height:calc(var(--u)*150)}
.nav>*,.addr>*{position:absolute;pointer-events:auto}
.nav a,.nav i{left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.nav i{pointer-events:none}
.ln b{position:absolute;left:50%;top:50%;width:calc(var(--len)*var(--u));height:calc(var(--u)*2);margin-left:calc(var(--len)*var(--u)/-2);margin-top:calc(var(--u)*-1);background:#fff;transform:rotate(var(--rot))}
.t12{font-size:calc(var(--u)*12);line-height:calc(var(--lh)*var(--u));letter-spacing:calc(var(--u)*3);text-transform:uppercase;white-space:nowrap;transition:opacity .2s;display:block}
.nav a:hover{opacity:.5}
.nav a[href="#lunch"],.nav a[href="#dinner"],.nav a[href="#wine"],.nav a[href="#pudding"]{cursor:pointer}

.addr{right:0;top:0;width:calc(var(--u)*300);height:calc(var(--u)*150)}
.addr>*{right:calc(var(--r)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));display:block;white-space:nowrap}
.addr .rl{height:calc(var(--u)*2);margin-top:calc(var(--u)*-1);background:#fff;pointer-events:none}
.addr .n15,.addr .n16{height:calc(var(--h)*var(--u));line-height:calc(var(--u)*40);font-size:calc(var(--u)*20);margin-top:calc(var(--u)*0)}
.addr .n15 u{text-decoration:none;letter-spacing:calc(var(--u)*3)}
.addr .street{font-size:calc(var(--u)*9);line-height:calc(var(--u)*9);margin-top:calc(var(--u)*0);right:calc(var(--u)*69);width:calc(var(--u)*182)}
.addr .street span{display:inline-block;white-space:nowrap}
.addr .tel{font-size:calc(var(--u)*9);line-height:calc(var(--u)*9);margin-top:calc(var(--u)*-3);right:calc(var(--u)*69);width:calc(var(--u)*182)}
.addr .tel span{display:inline-block;white-space:nowrap}

.hint{position:fixed;z-index:40;left:calc(50% - var(--u)*38);bottom:calc(var(--u)*222);width:calc(var(--u)*10);height:calc(var(--u)*6);transition:opacity .4s;pointer-events:none}
.hint.gone{opacity:0}

/* menu sheets */
.lab{position:absolute;left:calc((var(--x) + var(--ox,0))*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--u)*20);border:calc(var(--u)*2) solid #fff;font-size:calc(var(--u)*12);line-height:calc(var(--u)*16);letter-spacing:calc(var(--u)*3);padding-left:calc(var(--u)*6);white-space:nowrap;text-transform:uppercase}
.sheet{position:absolute;left:calc((var(--x) + var(--ox,0))*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));background:#fff;cursor:zoom-in;border:0;padding:0;display:block}
.sheet img{width:100%;height:100%;object-fit:contain;display:block}
.vline{z-index:-1;position:absolute;left:calc((511 + var(--ox,0))*var(--u));top:calc(var(--u)*2592);width:calc(var(--u)*2);height:calc(var(--u)*254);background:#fff}

.gr{background:url(/img/gradient.png) 0 0/100% 100% no-repeat;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));pointer-events:none}

/* footer */
.ft,.ico,.logo,.fl{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w,auto)*var(--u))}
.ft{font-size:calc(var(--u)*12);line-height:calc(var(--u)*16);letter-spacing:calc(var(--u)*.9);white-space:nowrap;width:auto}
.contact{line-height:calc(var(--u)*14);letter-spacing:calc(var(--u)*.6)}
.phone{line-height:calc(var(--u)*14);letter-spacing:calc(var(--u)*.6)}
.map{letter-spacing:calc(var(--u)*1.7)}
.hours{letter-spacing:calc(var(--u)*1.5)}
.tiny{font-size:calc(var(--u)*8)}
.wwu{font-size:calc(var(--u)*11)}
.ft a,a.ft{transition:opacity .2s}
.ft a:hover,a.ft:hover,.ico:hover,.logo:hover{opacity:.45}
.ico{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.ico img,.logo img{width:100%;height:100%;display:block}
.logo{width:calc(var(--u)*56);height:calc(var(--u)*38);opacity:.81}
.fl{height:calc(var(--u)*2);width:calc(var(--w)*var(--u));margin-top:calc(var(--u)*11);background:#fff;transform:rotate(var(--rot))}

/* full-screen viewer */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-s{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;display:flex}
.lb-s img{margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;cursor:zoom-in}
.lb-s.zoom img{max-width:none;max-height:none;width:min(1600px,200vw);cursor:zoom-out}
.lb button{position:absolute;z-index:2;border:0;background:none;color:#fff;font:450 40px/1 Oswald,sans-serif;cursor:pointer;padding:12px 18px;opacity:.85}
.lb button:hover{opacity:1}
.lb-x{top:6px;right:10px;font-size:44px!important}
.lb-p{left:4px;top:50%;transform:translateY(-50%)}
.lb-n{right:4px;top:50%;transform:translateY(-50%)}
.lb-p[hidden],.lb-n[hidden]{display:none}
body.lock{overflow:hidden}

footer .soc,footer .by{display:contents}

/* phones: menus centred and larger, fixed nav/address kept readable, footer flows below the sheets */
@media (max-width:700px){
  .nav,.addr{--u:calc(var(--vw,100vw) / 600)}
  .nav .t12{font-size:calc(var(--u)*15)}
  .addr .street{font-size:calc(var(--u)*11)}
  .addr .tel{font-size:calc(var(--u)*11)}
  .addr .n15,.addr .n16{font-size:calc(var(--u)*22)}
  .page{height:auto;padding-top:calc(var(--u)*1040)}
  #menus{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;padding-bottom:calc(var(--u)*150)}
  .lab,.sheet,.vline{position:relative;left:auto;top:auto}
  .lab{align-self:flex-start;margin:calc(var(--u)*100) 0 calc(var(--u)*12) 12%;height:calc(var(--u)*26);line-height:calc(var(--u)*22);font-size:calc(var(--u)*15);padding-left:calc(var(--u)*8);width:calc(var(--w)*var(--u)*1.25)}
  .sheet{width:76%;height:auto;aspect-ratio:287 / 409.47}
  .vline{width:calc(var(--u)*2);height:calc(var(--u)*54)}
  .gr{left:0;top:auto;bottom:0;width:100%;height:calc(var(--u)*1000)}
  .page>footer{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*22);padding:0 24px calc(var(--u)*90);z-index:2}
  footer .ft,footer .ico,footer .logo{position:static;width:auto}
  footer .fl{display:none}
  footer .ft{font-size:calc(var(--u)*17);line-height:1.5;white-space:normal}
  footer .contact{line-height:1.5}
  footer .phone{line-height:1.5}
  footer .tiny{font-size:calc(var(--u)*12)}
  footer .wwu{font-size:calc(var(--u)*15)}
  footer .soc,footer .by{display:flex;align-items:center;gap:14px}
  footer .ico{width:calc(var(--u)*26);height:calc(var(--u)*26)}
  footer .logo{width:calc(var(--u)*72);height:calc(var(--u)*49)}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- type weights: capitals and headings 450, small footer text 230 ---- */
.nav .t12,.lab,.addr .n15,.addr .n16,.addr .street,.addr .tel{font-weight:450}
footer .ft{font-weight:230}

/* ---- menu sheets tilt a few degrees on hover ---- */
.sheet{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.sheet:hover{transform:rotate(var(--rot,0deg))}}

/* ---- reveal: every element fades from 0 to 100% over half a second ---- */
@keyframes rv{from{opacity:0}}
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:rv .5s ease backwards;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.js .rv:not(.in){opacity:1}.js .rv.in{animation:none}.sheet{transition:none}}

/* ---- hero logo: centred on load, slides off to the left as the first menu arrives ---- */
.hero-logo{position:fixed;left:50%;top:50%;width:calc(var(--u)*300);margin:0;z-index:3;pointer-events:none;transform:translate3d(-50%,-50%,0);will-change:transform}
.hero-logo img{display:block;width:100%;height:auto}
@media (max-width:700px){.hero-logo{width:calc(var(--u)*270)}}

.norv .rv,.norv .rv.in{opacity:1!important;animation:none!important}