@font-face{font-family:'Marcellus';font-weight:400;font-display:swap;src:url(fonts/marcellus.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk.woff2) format('woff2')}

:root{
  /* color */
  --ink:#0d0a05;          /* dark shade of the logo gold: page base */
  --ink-2:#18120a;        /* raised dark surface */
  --gold:#e9b551;         /* logo gold (brand) */
  --gold-hi:#f3c66c;      /* hover */
  --gold-deep:#80591a;    /* gold as text on porcelain, 5.6:1 */
  --porcelain:#f6f5f1;    /* light surface, matches the white plates */
  --text:#f2ece0;         /* body on ink, 16:1 */
  --muted:#b8ac95;        /* secondary on ink, 8:1 */
  --text-dark:#1d1710;    /* body on porcelain */
  --muted-dark:#5c5244;   /* secondary on porcelain, 7:1 */
  --line-dark:rgba(233,181,81,.22);
  --line-light:#e2ddd2;

  /* type */
  --display:'Marcellus',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --t-hero:clamp(40px,5.4vw,72px);
  --t-h2:clamp(32px,3.8vw,50px);
  --t-h3:clamp(22px,2vw,26px);
  --t-body:17px;
  --t-small:15px;

  /* space */
  --gutter:clamp(16px,4.5vw,64px);
  --sec:clamp(72px,10vw,136px);
  --max:1240px;
  --radius:6px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font:400 var(--t-body)/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:.005em}
h2{font-size:var(--t-h2)}
.tbc{border-bottom:1px dashed currentColor;cursor:help}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--radius);font:600 16px var(--body);border:1.5px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .12s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hi)}
.btn-line{border-color:rgba(233,181,81,.55);color:var(--gold)}
.btn-line:hover{background:rgba(233,181,81,.1);border-color:var(--gold)}
.btn-dark{background:var(--text-dark);color:var(--porcelain)}
.btn-dark:hover{background:#3a2f22}

/* nav */
.nav{position:absolute;inset:0 0 auto;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:96px;max-width:none}
.nav .logo img{height:50px;width:auto}
.nav ul{display:flex;align-items:center;gap:30px;list-style:none;padding:0;font-size:var(--t-small)}
.nav ul a{color:var(--muted);transition:color .15s}
.nav ul a:hover{color:var(--text)}
.nav .tel{color:var(--gold);font-weight:600}
.nav .btn{min-height:42px;padding:0 18px;font-size:15px}
.nav .m-only{display:none}

/* hero */
.hero{position:relative;min-height:max(680px,100svh);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);background:radial-gradient(ellipse 60% 70% at 62% 44%,#21180b 0%,var(--ink) 68%)}
.ring{position:absolute;left:62%;top:47%;width:min(660px,74vh,62vw);aspect-ratio:1.25;transform:translate(-50%,-50%);perspective:900px}
.ring-tilt{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.dishes{position:absolute;inset:6% 9%;border-radius:50%;overflow:hidden;background:#000;
  -webkit-mask:radial-gradient(ellipse at center,#000 64%,transparent 70.5%);mask:radial-gradient(ellipse at center,#000 64%,transparent 70.5%)}
.dishes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 6.5s linear}
.dishes img.on{opacity:1;transform:scale(1)}
.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(30px)}
.ring path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:1300;stroke-dashoffset:1300;animation:draw 2s .25s cubic-bezier(.65,0,.25,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-copy{position:relative;z-index:2;align-self:end;padding:0 var(--gutter) clamp(40px,8vh,84px);max-width:560px}
.hero h1{font-size:var(--t-hero)}
.hero-copy p{color:var(--muted);margin-top:14px;max-width:34ch}
.acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.dish-cap{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(40px,8vh,84px);text-align:right;min-width:220px}
.dish-cap b{display:block;font:400 26px/1.2 var(--display);color:var(--gold)}
.dish-cap span{color:var(--muted);font-size:var(--t-small)}
.dish-cap .dots{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}
.dish-cap .dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dish-cap .dots button::after{content:"";width:18px;height:2px;background:rgba(233,181,81,.3);transition:background .3s}
.dish-cap .dots button.on::after{background:var(--gold)}

/* menu (porcelain) */
.menu{background:var(--porcelain);color:var(--text-dark);padding:var(--sec) 0}
.menu-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.menu-head p{color:var(--muted-dark);max-width:46ch;margin-top:12px}
.tabs{display:flex;gap:6px;margin:36px 0 8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #d6cfc0;background:none;color:var(--muted-dark);font-size:var(--t-small);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.tabs button:hover{border-color:var(--gold-deep);color:var(--text-dark)}
.tabs button[aria-selected=true]{background:var(--text-dark);border-color:var(--text-dark);color:var(--porcelain)}
.menu-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:28px;align-items:start}
.cat-note{color:var(--muted-dark);font-size:var(--t-small);margin-bottom:6px}
.items{list-style:none;padding:0;columns:1}
.items li{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-light)}
.items .nm{font:400 21px/1.25 var(--display)}
.items small{display:block;color:var(--muted-dark);font-size:14.5px;line-height:1.45;margin-top:3px;max-width:44ch}
.items .lead{flex:1;min-width:16px;border-bottom:1px dotted #c9bfa9;transform:translateY(-6px)}
.items .pr{color:var(--gold-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-side{position:sticky;top:24px}
.menu-photo{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#fff}
.menu-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.menu-photo figcaption{display:none}
.menu-side .order-box{margin-top:18px;padding:22px;border-radius:10px;background:#ece8de}
.menu-side .order-box p{color:var(--muted-dark);font-size:var(--t-small);margin:6px 0 16px}
.menu-side .order-box h3{font-size:var(--t-h3)}
.menu-src{margin-top:26px;color:var(--muted-dark);font-size:14px}

/* catering + events */
.catering{padding:var(--sec) 0;position:relative}
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.catering .lede{color:var(--muted);margin-top:16px;max-width:44ch}
.pans{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:10px;overflow:hidden}
.pan{background:var(--ink);padding:22px}
.pan .size{font:400 22px var(--display);color:var(--gold)}
.pan p{color:var(--muted);font-size:var(--t-small);margin-top:4px}
.trays{list-style:none;padding:0}
.trays li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-dark)}
.trays li span:last-child{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.trays li small{display:block;color:var(--muted);font-size:14px}
.events{margin-top:28px;color:var(--muted);font-size:var(--t-small)}
.events b{color:var(--text);font-weight:600}

/* reservations */
.reserve{background:var(--ink-2);padding:var(--sec) 0;border-top:1px solid var(--line-dark)}
.res-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.reserve .lede{color:var(--muted);margin-top:16px;max-width:38ch}
.reserve .call-big{display:inline-block;margin-top:26px;font:400 clamp(28px,3vw,36px) var(--display);color:var(--gold)}
.reserve .call-big:hover{color:var(--gold-hi)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--muted)}
label.full{grid-column:1/-1}
input,select{height:52px;padding:0 14px;border-radius:var(--radius);border:1px solid rgba(233,181,81,.28);background:var(--ink);font-size:16px;color:var(--text);transition:border-color .15s}
input:hover,select:hover{border-color:rgba(233,181,81,.5)}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,181,81,.18)}
input::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(.4)}
form .btn{grid-column:1/-1;justify-self:start;margin-top:6px}
.form-msg{grid-column:1/-1;color:var(--gold);min-height:1.6em}

/* visit */
.visit{padding:var(--sec) 0 calc(var(--sec)*.75)}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px)}
.facts{margin-top:30px;display:grid;gap:22px}
.facts h3{font-size:14px;font-family:var(--body);font-weight:600;color:var(--muted);letter-spacing:.02em;margin-bottom:4px}
.facts p,.facts a{font-size:19px}
.facts a{color:var(--gold)}
.facts a:hover{color:var(--gold-hi)}
.hours{border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:3px 24px 3px 0;font-size:17px}
.hours tr.closed td{color:var(--muted)}
.map{border-radius:10px;overflow:hidden;min-height:380px;border:1px solid var(--line-dark)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.85) invert(.92) hue-rotate(180deg) contrast(.9) sepia(.25)}

footer{border-top:1px solid var(--line-dark);padding:36px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:38px;width:auto}
footer .af{opacity:.7}

/* mobile action bar */
.bar{display:none}

@media (max-width:900px){
  .menu-body,.cat-grid,.res-grid,.visit-grid{grid-template-columns:1fr}
  .menu-side{position:static;order:-1}
  .menu-photo{aspect-ratio:16/9}
  .menu-side .order-box{display:none}
}
@media (max-width:1024px){
  .nav ul .d-only{display:none}
  .nav .m-only{display:list-item}
  .nav .wrap{height:76px}
  .nav .logo img{height:40px}
  .hero{display:block;min-height:0;padding:96px 0 40px;background:radial-gradient(ellipse 90% 45% at 50% 30%,#21180b 0%,var(--ink) 70%)}
  .ring{position:relative;left:auto;top:auto;transform:none;width:min(92vw,460px);margin:0 auto}
  .hero-copy{padding-top:18px;padding-bottom:0}
  .dish-cap{position:static;text-align:center;margin:4px auto 0;min-width:0}
  .dish-cap .dots{justify-content:center;margin-top:8px}
  .hero-copy{order:2}
  .bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(13,10,5,.94);border-top:1px solid var(--line-dark);backdrop-filter:blur(8px)}
  .bar .btn{min-height:48px;padding:0 10px}
  footer{padding-bottom:110px}
  .pans{grid-template-columns:1fr}
  form{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){ .acts .btn{flex:1 1 0;padding:0 12px} }
@media (prefers-reduced-motion:reduce){
  .ring path{animation:none;stroke-dashoffset:0}
  .dishes img{transition:opacity .01s;transform:none}
  .ring-tilt{transition:none}
}

/* designed photo placeholder */
.ph{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ebe6da 0 14px,#e4ded0 14px 28px);color:var(--muted-dark);font-size:var(--t-small)}
.ph span{background:var(--porcelain);padding:8px 14px;border-radius:999px;border:1px dashed #c9bfa9}

/* review fixes */
.nav ul a.btn{color:var(--ink)}
.nav ul a.btn:hover{color:var(--ink)}
.hero-copy{max-width:680px}
.hero-copy p{max-width:40ch}
@media (min-width:1100px){
  .menu-body{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
  .items{columns:2;column-gap:48px}
  .items li{break-inside:avoid}
}
@media (max-width:1024px){
  .hero{display:flex;flex-direction:column}
  .dish-cap{order:1;margin-top:6px}
  .hero-copy{order:2;padding-top:12px}
  .nav ul{display:none}
}
/* keep hero copy clear of the ring between 1025px and wide desktop */
@media (min-width:1025px){
  .ring{left:64%}
  .hero-copy{max-width:calc(40vw + var(--gutter))}
}
@media (max-width:1024px){
  .hero-copy{align-self:center;width:100%;max-width:640px;margin:0 auto}
}