:root{
  --cream:#F7F1E6; --cream-2:#FBF6EC; --sand:#EDE2CE;
  --ink:#211B17; --ink-2:#2B1C12;
  --gold:#C9A24B; --gold-2:#C5AA82;
  --beige:#D9BC96; --tan:hsl(34 47% 68%); --light-brown:hsl(34 47% 64%);
  --night:#161009; --night-2:#100B06;
  --candle:#E8C98A;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --navh:70px;
  --rule:rgba(26,22,20,.16);
  --rule-l:rgba(247,241,230,.20);
  --rule-2:rgba(26,22,20,.30);
  --rule-l2:rgba(247,241,230,.34);
  /* whisper depth: --lift for the light half, --lift-n inverts for the night
     half where a dark shadow moves the ground by <2/255 and reads as nothing */
  --lift:0 1px 2px rgba(26,22,20,.04), 0 4px 14px rgba(26,22,20,.06);
  --lift-n:0 0 0 1px rgba(247,241,230,.09), 0 10px 30px rgba(0,0,0,.34);
  --grade:saturate(1.12) contrast(1.05) sepia(.08) brightness(1.01);
}
*{margin:0;padding:0;box-sizing:border-box}

/* ---- Muted daytime ground; each section owns its colour transition ---- */
html{
  min-height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--beige);
}
body{
  font-family:var(--sans); color:var(--ink); background:transparent;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* fine grain over the whole page - a banding fix for the long ramp, not
   decoration. sits above #nav (80) and below .ov (200); pointer-events:none
   is load-bearing, a fixed full-viewport layer would eat every click. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  mix-blend-mode:overlay;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.col{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* ---- shared type ---- */
.eyebrow{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-2)}
.dh{font-family:var(--serif);font-weight:300;line-height:1.03;letter-spacing:-.03em;
    font-size:clamp(2.5rem,5.4vw,4.5rem)}
.dh em{font-style:italic;font-weight:300}
.lede{max-width:46ch;color:var(--ink-2);font-weight:300}
.rule{height:1px;background:var(--rule);border:0}

/* ---- link + button system: whisper lift, still no radius ---- */
.btn{display:inline-block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
     font-weight:500;padding:15px 30px;border:1px solid currentColor;
     box-shadow:var(--lift);
     transition:background .25s ease,color .25s ease}
.btn-solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.tlink{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
       font-weight:500;padding-bottom:5px;border-bottom:1px solid currentColor}

/* ---- NAV ---- */
#nav{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--navh);
     display:flex;align-items:center;justify-content:space-between;
     padding:0 clamp(20px,4vw,48px);transition:background .3s ease,border-color .3s ease}
#nav.scrolled{background:rgba(217,188,150,.95);border-bottom:1px solid var(--rule);backdrop-filter:blur(10px)}
#nav.on-dark{color:var(--cream)}
#nav.on-dark.scrolled{background:rgba(16,11,6,.80);border-bottom-color:var(--rule-l)}
.nlogo .wm{display:block;height:40px;width:calc(40px * 3.3406);fill:currentColor}
.nlinks{display:flex;align-items:center;gap:clamp(24px,3vw,44px)}
.nlinks a{font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
          padding-bottom:3px;position:relative}
.nlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
                 transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nlinks a:hover::after{transform:scaleX(1)}
.nig{display:flex}
.nig svg{width:24px;height:24px}
.ntoggle{display:none;width:34px;height:26px;flex-direction:column;justify-content:center;gap:6px}
.ntoggle span{display:block;height:1px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.ntoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ntoggle.open span:nth-child(2){opacity:0}
.ntoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- section shell ---- */
.s{position:relative;padding:clamp(72px,8vw,112px) 0;scroll-margin-top:var(--navh)}
.shead{margin-bottom:clamp(26px,3.4vh,46px)}
.shead .eyebrow{display:block;margin-bottom:12px}
.on-night{color:var(--cream)}
.on-night .eyebrow,.on-night .lede{color:rgba(247,241,230,.66)}
.on-night .rule{background:var(--rule-l)}

/* The same sandy hue deepens gently through the three daytime sections. */
#services{background:var(--beige)}
#signatures{background:linear-gradient(180deg,var(--beige),var(--tan) 40px);
            padding-bottom:32px}
#byob{padding-top:40px;background:linear-gradient(180deg,var(--tan),var(--light-brown) 32px)}
#mood{
  background:
    radial-gradient(ellipse at 85% 44%,rgba(216,155,87,.27),transparent 48%),
    linear-gradient(180deg,
      var(--light-brown) 0, #8A6546 40px, #63452E 54px,
      #46301E 66px, #382517 76px, #331D11 86px, #2F1C12 42%, #291913 100%);
}
#visit{
  background:
    radial-gradient(90% 34% at 50% 74%,rgba(44,62,84,.10),transparent 75%),
    linear-gradient(180deg,#291913 0%,#1C120D 46%,#0C0806 100%);
}

/* ---- 1 · HERO ---- */
.hero{padding:0;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
      position:relative;overflow:hidden;background:var(--night)}
.hero-media{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:6px;z-index:1;pointer-events:none;
             background:linear-gradient(180deg,transparent,var(--beige))}
.hero-media img{filter:var(--grade);width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,7,4,.82) 0%,rgba(10,7,4,.58) 32%,rgba(10,7,4,.10) 64%,rgba(10,7,4,.34) 100%),
    linear-gradient(180deg,rgba(10,7,4,.58) 0%,rgba(10,7,4,.10) 30%,rgba(10,7,4,.42) 70%,rgba(10,7,4,.84) 100%)}
.hero-inner{position:relative;z-index:2;color:var(--cream);padding-top:180px;padding-bottom:clamp(56px,9vh,110px)}
.hero .eyebrow{color:rgba(247,241,230,.74);display:block;margin-bottom:20px}
.hero h1{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.04em;
         font-size:clamp(2.7rem,6.3vw,5.6rem)}
.hero h1 .a{display:block;font-family:var(--sans);font-size:clamp(.85rem,1.5vw,1.2rem);
            font-weight:400;line-height:1.5;letter-spacing:.08em;margin-bottom:24px}
.hero h1 em{display:block;font-size:1.5em;font-weight:300;color:var(--gold-2);
            line-height:1.06;margin-top:2px;text-shadow:0 4px 40px rgba(0,0,0,.2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-cta .btn{min-width:200px;text-align:center;transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.hero-cta .btn-solid{background:#f5e7cd;color:#302317;border-color:#f5e7cd;box-shadow:0 5px 26px rgba(232,201,138,.12)}
.hero-cta .btn-solid:hover{background:#fff3dc;box-shadow:0 5px 32px rgba(232,201,138,.28)}
.hero-cta .btn-line{color:#f6e7d0;background:rgba(73,29,32,.72);border-color:var(--gold-2);backdrop-filter:blur(8px)}
.hero-cta .btn-line:hover{background:rgba(103,42,46,.9);box-shadow:0 5px 30px rgba(192,120,76,.22)}
.hero-hours{position:absolute;right:clamp(20px,4vw,48px);top:calc(var(--navh) + 28px);z-index:2;
            color:rgba(247,241,230,.8);text-align:right;font-size:.76rem;letter-spacing:.06em;line-height:1.7}
.hero-hours b{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;
              color:var(--gold-2);display:block}
.scrollcue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
           color:rgba(247,241,230,.8);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.hero h1 .b{display:block}

/* hero opening - 7 beats, ~2.0s. fill:both so nothing can stick at opacity:0 */
@keyframes heroImg{from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:none}}
@keyframes heroUp {from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}}
@keyframes heroCue{from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translateX(-50%)}}
.hero-media img,.hero .eyebrow,.hero h1 .a,.hero h1 .b,.hero-cta,
.hero-hours,.scrollcue{animation:heroUp .8s cubic-bezier(.16,1,.3,1) both}
.hero-media img{animation:heroImg 1.6s cubic-bezier(.16,1,.3,1) .10s both}
.hero .eyebrow{animation-delay:.40s}
.hero h1 .a{animation-delay:.55s}
.hero h1 .b{animation-delay:.70s}
.hero-cta   {animation-delay:1.15s}
.hero-hours {animation-delay:1.45s;animation-duration:.55s}
.scrollcue  {animation:heroCue .55s cubic-bezier(.16,1,.3,1) 1.45s both}
.hero-cat{position:absolute;right:clamp(16px,4vw,64px);bottom:0;z-index:2;pointer-events:none;
          width:clamp(96px,11vw,170px);aspect-ratio:581/629;
          color:var(--gold-2);background-color:currentColor;
          -webkit-mask:url(/assets/cat-peek.png) no-repeat center bottom/contain;
                  mask:url(/assets/cat-peek.png) no-repeat center bottom/contain;
          animation:heroCat .7s cubic-bezier(.16,1,.3,1) 1.45s both}
@keyframes heroCat{from{opacity:0;transform:translateY(16px)} to{opacity:.92;transform:none}}

/* ---- 2 · SERVICES ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,42px);
          flex:1 1 auto;min-height:0}
.svc{display:flex;flex-direction:column;min-height:0}
.svc-media{position:relative;box-shadow:var(--lift);isolation:isolate;flex:1 1 auto;min-height:0;overflow:hidden;background:rgba(26,22,20,.06)}
.svc-media img{filter:var(--grade);width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.svc:hover .svc-media img{transform:scale(1.03)}
.svc-mark{position:absolute;right:14px;bottom:14px;width:clamp(38px,3.4vw,54px);aspect-ratio:120/158;
           color:var(--gold-2);opacity:.92;background-color:currentColor;
           -webkit-mask:var(--cat-img,url(/assets/cat-dance.png)) no-repeat center/contain;
                   mask:var(--cat-img,url(/assets/cat-dance.png)) no-repeat center/contain}
.svc-name{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.62rem);
          line-height:1.1;margin:18px 0 7px}
.svc-desc{font-size:.9rem;font-weight:300;color:var(--ink-2);line-height:1.5;min-height:2.9em}
.svc-hours{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
           margin:12px 0 16px;padding-top:12px;border-top:1px solid var(--rule-2)}
.svc-btn{display:block;width:100%;text-align:center;font-size:.72rem;letter-spacing:.16em;
         text-transform:uppercase;font-weight:500;padding:14px 10px;border:1px solid var(--ink);
         box-shadow:var(--lift);
         transition:background .25s ease,color .25s ease}
.svc-btn:hover{background:var(--ink);color:var(--cream)}
/* a card with no menu yet keeps the button's box so the three cards stay the
   same shape, but it is a <span>, so there is nothing to click or tab to. It is
   muted rather than restyled: dimmed text, the rule colour for the border, no
   lift and no hover. The point is to read as "not yet", not as broken. */
.svc-btn-soon{color:var(--ink-2);border-color:var(--rule-2);box-shadow:none;cursor:default}
.svc-btn-soon:hover{background:none;color:var(--ink-2)}
.svc-note{margin-top:clamp(14px,2vh,22px);font-size:.72rem;color:var(--ink-2);letter-spacing:.04em;font-weight:300}

/* ---- 3 · SIGNATURES ---- */
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,42px);
           flex:1 1 auto;min-height:0}
.dish{display:flex;flex-direction:column;min-height:0}
.dish-media{position:relative;box-shadow:var(--lift);isolation:isolate;flex:1 1 auto;min-height:0;overflow:hidden;background:rgba(26,22,20,.06)}
.dish-media img{filter:var(--grade);width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.dish:hover .dish-media img{transform:scale(1.03)}
.dish-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
           margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--rule-2)}
.dish-name{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.1}
.dish-price{font-size:.82rem;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
.dish-desc{font-size:.86rem;font-weight:300;color:var(--ink-2);line-height:1.5}
.s-foot{margin-top:clamp(16px,2.4vh,28px);display:flex;align-items:center;justify-content:space-between;
        gap:18px;flex-wrap:wrap}
.s-foot .note{font-size:.72rem;color:var(--ink-2);letter-spacing:.04em;font-weight:300}

/* ---- 4 · BYOB ---- */
.byob-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,88px);
           align-items:center;flex:1 1 auto;min-height:0}
.byob-copy{max-width:56ch}
.byob-tag{font-family:var(--serif);font-style:italic;font-weight:300;
          font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--ink-2);margin:14px 0 26px}
.steps{list-style:none;margin:0 0 26px;border-top:1px solid var(--rule-2)}
.steps li{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.steps .n{font-family:var(--serif);font-size:.9rem;color:var(--ink-2);min-width:26px;font-weight:400}
.steps .t{font-size:.92rem;font-weight:300;color:var(--ink-2)}
.steps .t b{font-weight:500;color:var(--ink)}
.byob-price{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.byob-price .amt{font-family:var(--serif);font-size:clamp(2.2rem,4.2vw,3.2rem);font-weight:300;line-height:1}
.byob-price .lab{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.byob-extra{font-size:.78rem;font-weight:300;color:var(--ink-2);margin-bottom:26px;max-width:44ch}
.byob-media{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;
            padding:38px 28px;background:var(--tan);border:1px solid rgba(64,54,46,.24);
            box-shadow:0 24px 55px rgba(33,27,23,.12)}
.byob-media img{filter:var(--grade);width:100%;max-width:300px;height:auto;box-shadow:0 12px 28px rgba(49,30,15,.17)}
.byob-photo-label{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.65rem);text-align:center}
.byob-photo-note{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;text-align:center;color:var(--ink-2)}

/* ---- 5 · MOOD ---- */
.mood-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto clamp(260px,25vw,350px) auto;
           gap:clamp(14px,2vw,30px);flex:1 1 auto;min-height:0}
.mood-head{grid-column:1/9;grid-row:1;align-self:start}
.mood-head h2{font-family:var(--serif);font-weight:300;line-height:.98;letter-spacing:-.04em;
              font-size:clamp(2.8rem,7.4vw,6.4rem)}
.mood-head h2 em{font-style:italic}
.mood-head .eyebrow{display:block;margin-bottom:14px}
.mf{position:relative;box-shadow:var(--lift-n);isolation:isolate;overflow:hidden;min-height:0;background:rgba(26,22,20,.10)}
.mf img{filter:var(--grade);width:100%;height:100%;object-fit:cover}

/* warm black lift: screen-blends a warm wash over each frame, raising the
   shadows without touching the highlights. isolation:isolate on the frames
   keeps the blend inside the frame instead of reaching the page ground. */
.svc-media::after,.dish-media::after,.mf::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(94,58,24,.17),rgba(38,24,12,.04) 58%,rgba(94,58,24,.14));
}
.m-a{grid-column:9/13;grid-row:1/3;overflow:visible;
     box-shadow:0 0 65px rgba(224,166,92,.15),0 24px 54px rgba(0,0,0,.36)}
.m-a::before{content:"";position:absolute;inset:14px -12px -14px 12px;
             border:1px solid rgba(213,186,143,.42);z-index:-1;pointer-events:none}
.mf figcaption{position:absolute;inset:auto 0 0;z-index:1;padding:52px 22px 22px;
               background:linear-gradient(transparent,rgba(16,11,6,.85));font-family:var(--serif);
               font-size:clamp(1.4rem,2.2vw,2rem);font-style:italic;color:var(--cream)}
.m-b{grid-column:1/5;grid-row:2/4}
.m-c{grid-column:5/9;grid-row:2/3}
.mood-note{grid-column:9/13;grid-row:3;align-self:end;font-size:.88rem;font-weight:300;line-height:1.6}
.mood-sign{grid-column:5/9;grid-row:3;align-self:end;font-family:var(--serif);font-style:italic;
           font-weight:300;font-size:clamp(1rem,1.6vw,1.25rem)}

/* ---- 6 · VISIT ---- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);
            flex:1 1 auto;min-height:0;align-content:center}
.vrows{border-top:1px solid var(--rule-l2)}
.vrow{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:15px 0;
      border-bottom:1px solid var(--rule-l);align-items:baseline}
.vrow .l{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,230,.55)}
.vrow .v{font-size:.94rem;font-weight:300;line-height:1.55}
.vrow a.v{border-bottom:1px solid rgba(247,241,230,.3);display:inline-block}
.vrow a.v:hover{border-bottom-color:var(--gold-2)}
.visit-cta{margin-top:clamp(22px,3vh,34px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.visit-cta .btn{border-color:var(--cream);color:var(--cream)}
.visit-cta .btn:hover{background:var(--cream);color:var(--ink)}
.visit-cat{width:clamp(118px,13vw,186px);aspect-ratio:400/226;margin-top:clamp(18px,3vh,32px);
           background-color:var(--gold-2);opacity:.9;
           -webkit-mask:url(/assets/cat-cheers.png) no-repeat center/contain;
                   mask:url(/assets/cat-cheers.png) no-repeat center/contain}
.ig-big{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:300;
        font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1}
.ig-big svg{width:26px;height:26px;flex:none}
.ig-sub{font-size:.8rem;color:rgba(247,241,230,.6);margin-top:10px;font-weight:300}
.foot{margin-top:64px;padding-top:clamp(24px,4vh,44px);border-top:1px solid var(--rule-l2);
      display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .fwm{display:block;height:24px;width:calc(24px * 3.3406);fill:currentColor;opacity:.85}
.fcopy{font-size:.7rem;color:rgba(247,241,230,.5);letter-spacing:.04em;line-height:1.7;font-weight:300}

/* ---- OVERLAYS ---- */
.ov{position:fixed;inset:0;z-index:200;display:none}
.ov.open{display:block}
/* until the panel became inset, this dim was covered edge-to-edge and had
   never once been visible. -webkit- twin is new code: it is not in this file. */
.ov-back{position:absolute;inset:0;background:rgba(10,7,4,.55);
         -webkit-backdrop-filter:blur(10px) saturate(.9);
                 backdrop-filter:blur(10px) saturate(.9)}
.ov-panel{position:absolute;inset:clamp(16px,4vh,54px) clamp(16px,4vw,56px);
          max-width:1180px;margin:0 auto;display:flex;flex-direction:column;
          background:var(--cream);color:var(--ink);
          box-shadow:0 24px 70px rgba(0,0,0,.46);
          animation:ovin .4s cubic-bezier(.16,1,.3,1)}
@keyframes ovin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#ov-wine .ov-panel{background:var(--night-2);color:var(--cream)}
#ov-catering .ov-panel{background:#2E2114;color:var(--cream)}
.ov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
         padding:clamp(22px,4vh,42px) clamp(20px,4vw,48px) clamp(16px,2.4vh,26px);flex:none}
.ov-head .eyebrow{display:block;margin-bottom:10px}
.ov-head h2{font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.02em;
            font-size:clamp(2.1rem,5vw,3.9rem)}
.ov-head .sub{font-size:.8rem;font-weight:300;margin-top:12px;opacity:.72;letter-spacing:.03em}
#ov-wine .ov-head .eyebrow,#ov-catering .ov-head .eyebrow{color:var(--gold-2)}
.ov-cat{flex:none;margin-left:auto;margin-right:clamp(14px,2.6vw,34px);color:var(--gold);
        background-color:currentColor;opacity:.9;
        -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        -webkit-mask-position:center;mask-position:center;
        -webkit-mask-size:contain;mask-size:contain}
#ov-wine .ov-cat,#ov-catering .ov-cat{color:var(--gold-2)}
#ov-cafe .ov-cat{width:clamp(74px,7vw,116px);aspect-ratio:200/112;
                 -webkit-mask-image:url(/assets/cat-wave.png);mask-image:url(/assets/cat-wave.png)}
#ov-wine .ov-cat{width:clamp(52px,4.8vw,82px);aspect-ratio:200/246;
                 -webkit-mask-image:url(/assets/cat-martini.png);mask-image:url(/assets/cat-martini.png)}
#ov-catering .ov-cat{width:clamp(52px,4.8vw,82px);aspect-ratio:200/235;
                     -webkit-mask-image:url(/assets/cat-bottle.png);mask-image:url(/assets/cat-bottle.png)}
.ov-x{width:44px;height:44px;border:1px solid currentColor;flex:none;display:flex;
      align-items:center;justify-content:center;transition:background .25s ease,color .25s ease}
.ov-x svg{width:15px;height:15px}
.ov-x:hover{background:currentColor}
.ov-x:hover svg{stroke:var(--cream)}
#ov-wine .ov-x:hover svg,#ov-catering .ov-x:hover svg{stroke:var(--night-2)}
/* ---- the scrollbar is hidden in all three menus. On a Mac set to "always
   show scrollbars" it draws a white track down the right edge of a panel that
   is cream, olive or near-black, and against artwork that reads as a seam
   rather than a control. Only the bar goes: wheel, trackpad, touch, the arrow
   keys, Page Up/Down and Home/End all still scroll, verified. Both properties
   are needed — scrollbar-width covers Firefox and current Chrome,
   ::-webkit-scrollbar covers Safari.
   Worth knowing if this is ever revisited: the bar was also the only standing
   hint that there is more below, and the wine bar menu is nine pages deep.
   Nothing here can be measured in headless Chrome, which always draws overlay
   scrollbars — check it on a Mac with that setting on. ---- */
.ov-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;
           padding:0 clamp(20px,4vw,48px) clamp(30px,6vh,64px);-webkit-overflow-scrolling:touch}
.ov-scroll::-webkit-scrollbar{width:0;height:0}
.ov-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,70px);
         max-width:1280px;margin:0 auto}

/* ---- the café menu is the designed artwork, not a re-typed list. The page
   images carry their own colour, type and drawings; the only thing this file
   decides is how wide they sit — and the answer is: the whole panel, where the
   panel is the same box the wine and catering menus use. Wider was tried at
   1760px and read as too big to take in: past roughly this width a page stops
   being something the eye takes at once and starts being something it has to
   scan in parts. The source export is 2482px (A4 at 300dpi), so the 1132px the
   page gets here is never upscaled, on a 2x screen either. A4 is taller than
   the panel regardless, so the pages scroll; two abreast would halve them, so
   they still stack. ---- */
.ov-pages{display:grid;gap:clamp(18px,2.4vw,30px);margin:0 auto}
.ov-page{display:block}
.ov-page img{display:block;width:100%;height:auto;box-shadow:var(--lift)}
/* the wine bar's pages are olive artwork on a near-black panel, where a shadow
   tuned for the light half of the site disappears. --lift-n is the same whisper
   inverted: its 9%-cream hairline is what gives the page an edge to stop at. */
#ov-wine .ov-page img{box-shadow:var(--lift-n)}

/* ---- a menu that IS its artwork needs the panel to get out of the way. The
   printed page already carries the name, the hours and the drawings, so the
   panel's own header collapses to a single line — a label and a way out, 180px
   originally, then 104px, now ~54px — and its inner padding tightens.
   Everything reclaimed goes to the page, inside a panel that is the same size
   as every other menu's: this block deliberately sets no inset and no
   max-width, so .ov-panel's own geometry stands and the café overlay opens at
   the wine bar's proportions. ---- */
.ov-panel-pages .ov-head{align-items:center;gap:clamp(8px,1.4vw,20px);
  padding:clamp(7px,1vh,11px) clamp(14px,2vw,24px)}
/* the three bits of text stack by default; here they sit on one baseline so the
   whole header costs one line instead of three. h2 leads — it is the overlay's
   accessible name and reads first — with the eyebrow trailing it. */
.ov-panel-pages .ov-head>:first-child{display:flex;align-items:baseline;
  gap:clamp(7px,1vw,14px);min-width:0}
.ov-panel-pages .ov-head h2{order:-1;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.25;
  white-space:nowrap}
.ov-panel-pages .ov-head .eyebrow{margin-bottom:0;white-space:nowrap}
.ov-panel-pages .ov-head .sub{margin-top:0;font-size:.72rem;white-space:nowrap}
/* measured: the name wants 106px and the hours 218px, so with the cat and the
   close button one line needs ~419px of content box — which a 393px phone
   cannot give, and the name was splitting into "Luna / Café". Below 480px the
   hours drop instead. They are not lost: page 1 of the artwork opens with
   "brunch & café: 9:00 AM - 17:00 PM" a few pixels further down. The .sub goes
   earlier, at 900px, since it is the first thing to push the line over. */
@media (max-width:899px){.ov-panel-pages .ov-head .sub{display:none}}
@media (max-width:479px){.ov-panel-pages .ov-head .eyebrow{display:none}}
/* the cat's width comes from an #id rule no amount of classes can outrank, so
   cap it with max-width, which that rule never sets. aspect-ratio recomputes the
   height from the capped width, so the drawing keeps its proportions exactly —
   a max-height would have letterboxed it instead. On a phone this is what stops
   the cat from squeezing the eyebrow until "09:00 — 17:00" breaks across lines. */
.ov-panel-pages .ov-cat{max-width:clamp(40px,4.2vw,56px)}
/* the café's cat waves lying down (200/112); the wine bar's stands up holding a
   bottle (200/246). Capped to the same width it would be twice as tall as the
   line it sits on, so it is capped on width to land at the same *height* —
   26px wide is 32px tall, which is what the café's cat measures. Setting width
   works where the max-width above would not: this selector carries the #id too,
   so it outranks the rule that fixed the width in the first place. */
#ov-wine .ov-panel-pages .ov-cat{width:clamp(20px,1.9vw,26px)}
/* below ~360px even the capped cat costs the eyebrow its line. The cat is
   decoration (aria-hidden); the opening hours are not, so the cat steps out. */
@media (max-width:359px){.ov-panel-pages .ov-cat{display:none}}
.ov-panel-pages .ov-x{width:32px;height:32px}
.ov-panel-pages .ov-scroll{padding:0 clamp(10px,1.8vw,24px) clamp(20px,3.4vh,34px)}
.mgroup{margin-bottom:clamp(26px,4vh,42px)}
.mgroup h3{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
           padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--rule-2)}
#ov-wine .mgroup h3,#ov-catering .mgroup h3{border-bottom-color:var(--rule-l2);color:var(--gold-2)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;
      border-bottom:1px solid var(--rule);align-items:baseline}
#ov-wine .mrow,#ov-catering .mrow{border-bottom-color:var(--rule-l)}
.mrow .nm{font-family:var(--serif);font-size:1.02rem;font-weight:400;line-height:1.25}
.mrow .mt{display:inline-block;font-family:var(--sans);font-size:.55rem;letter-spacing:.14em;
          text-transform:uppercase;font-weight:500;border:1px solid currentColor;
          padding:2px 5px;margin-left:7px;vertical-align:.14em;color:var(--gold);white-space:nowrap}
#ov-wine .mrow .mt,#ov-catering .mrow .mt{color:var(--gold-2)}
.mrow .ds{font-size:.82rem;font-weight:300;color:var(--ink-2);line-height:1.45;margin-top:3px}
#ov-wine .mrow .ds,#ov-catering .mrow .ds{color:rgba(247,241,230,.6)}
.mrow .pr{font-size:.88rem;letter-spacing:.06em;white-space:nowrap;color:var(--ink-2)}
#ov-wine .mrow .pr,#ov-catering .mrow .pr{color:var(--gold-2)}
.mrow.thumb{grid-template-columns:56px 1fr auto;gap:16px;align-items:center}
.mrow.thumb img{width:56px;height:56px;object-fit:cover}
.ov-byob{border:1px solid var(--rule);padding:clamp(18px,2.6vw,26px);margin-top:6px}
.ov-byob h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:6px}
.ov-byob p{font-size:.85rem;font-weight:300;color:var(--ink-2);line-height:1.55}
.ov-byob .amt{font-family:var(--serif);font-size:1.8rem;font-weight:300;margin:10px 0 4px}
.ov-flag{display:inline-block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
         border:1px solid currentColor;padding:5px 10px;color:var(--gold-2);margin-top:14px}

/* ---- reveal: .r stays the observed unit, but its parts arrive on their own
   beats. --rs (1 hidden / 0 shown) and --ro inherit down from .r; --ry/--rd/--rt
   are per-role, so the opacity+transform boilerplate is written exactly once.
   .r itself travels 0px - the roles do all the moving, so nothing compounds. */
.r{--rs:1;--ro:0;--ry:0px;--rd:0ms;--rt:.7s}
.r.in{--rs:0;--ro:1}
.r,
.r .eyebrow,.r .lede,.r h2,.r .dh,.r .svc-name,.r .dish-name,
.r .svc-desc,.r .dish-desc,.r .steps,.r .byob-extra,.r .vrow,.r .ig-sub,
.r .svc-media,.r .dish-media,
.r .btn,.r .svc-btn,.r .tlink{
  opacity:var(--ro);
  transform:translateY(calc(var(--ry) * var(--rs)));
  transition:opacity var(--rt) ease var(--rd),
             transform var(--rt) cubic-bezier(.16,1,.3,1) var(--rd);
}
.r .eyebrow                                        {--ry:8px; --rd:0ms;  --rt:.5s}
.r h2,.r .dh,.r .svc-name,.r .dish-name            {--ry:14px;--rd:80ms}
.r .lede,.r .svc-desc,.r .dish-desc,.r .steps,
.r .byob-extra,.r .vrow,.r .ig-sub,p.r             {--ry:12px;--rd:160ms}
.r .svc-media,.r .dish-media,.mf.r,.byob-media.r   {--ry:28px;--rd:120ms;--rt:1s}
.r .btn,.r .svc-btn,.r .tlink                      {--ry:10px;--rd:300ms;--rt:.6s}

/* ---- DESKTOP: sections follow their content, the hero holds the first screen ---- */
@media (min-width:1000px){
  .s{display:flex;flex-direction:column}
  .hero{min-height:100dvh;padding:0}
  #signatures{padding-top:48px}
  #mood{padding-top:140px}
  .shead{margin-bottom:3vh}
  /* rows align across the three columns regardless of copy length */
  .svc-grid{grid-template-rows:minmax(0,1fr) auto auto auto auto;row-gap:0}
  .svc{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .dish-grid{grid-template-rows:minmax(0,1fr) auto auto;row-gap:0}
  .dish{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .svc-desc{min-height:0}
}

/* ---- TABLET / MOBILE: no snap, normal flow ---- */
@media (max-width:999px){
  :root{--navh:62px}
  .nlogo .wm{height:34px;width:calc(34px * 3.3406)}
  .ov-panel{inset:0;max-width:none;margin:0;box-shadow:none}
  /* ---- the header does not follow the page on a phone. Fixed, it repainted
     its own background and text colour against whatever happened to be sliding
     underneath it, which reads as the header flickering rather than the page
     moving. Absolute takes both it and the drawer that hangs off it out of the
     viewport's frame and pins them to the top of the document instead, so they
     scroll away together rather than one staying put without the other. The
     drawer has no scroll lock, so leaving it fixed here would have left it
     hanging in mid-air once the header it belongs to had gone. ---- */
  #nav{position:absolute}
  .nlinks{position:absolute;inset:var(--navh) 0 auto 0;flex-direction:column;align-items:flex-start;
          gap:0;background:rgba(16,11,6,.97);padding:8px clamp(20px,5vw,32px) 22px;
          /* -120% is a percentage of the drawer's OWN height, but the drawer starts
             at top:var(--navh) - so at 296px tall it lifted 355px where it needed
             358px, and its dark bottom edge sat across the top of every phone
             screen. Lift its full height PLUS the nav it hangs from; the 1px
             absorbs subpixel rounding. */
          transform:translateY(calc(-100% - var(--navh) - 1px));
          transition:transform .35s cubic-bezier(.16,1,.3,1);color:var(--cream)}
  .nlinks.open{transform:none}
  .nlinks a{width:100%;padding:15px 0;font-size:1.05rem;letter-spacing:.1em;
            border-bottom:1px solid var(--rule-l)}
  .nlinks a::after{display:none}
  .nig{padding-top:16px}
  .hero-scrim{
    background:
      linear-gradient(100deg,rgba(10,7,4,.82) 0%,rgba(10,7,4,.58) 32%,rgba(10,7,4,.10) 64%,rgba(10,7,4,.34) 100%),
      linear-gradient(180deg,rgba(10,7,4,.58) 0%,rgba(10,7,4,.10) 30%,rgba(10,7,4,.60) 70%,rgba(10,7,4,.92) 100%)}
  .ntoggle{display:flex}
  .svc-grid,.dish-grid{grid-template-columns:1fr;gap:44px}
  .svc-media,.dish-media{aspect-ratio:4/5;flex:none}
  .byob-grid,.visit-grid{grid-template-columns:1fr;gap:38px}
  .byob-media{max-width:480px;width:100%;margin:0 auto}
  .mood-grid{grid-template-columns:1fr;grid-template-rows:none;gap:26px}
  .mood-head,.m-a,.m-b,.m-c,.mood-note,.mood-sign{grid-column:1;grid-row:auto}
  .mf{aspect-ratio:4/5}
  .m-c{aspect-ratio:3/2}
  .ov-cols{grid-template-columns:1fr;gap:0}
  .vrow{grid-template-columns:82px 1fr;gap:14px}
  .foot{margin-top:38px}
}
@media (max-width:600px){
  .hero-hours,.hero-cat{display:none}
  .svc-grid,.dish-grid{gap:38px}
  .vrow{grid-template-columns:1fr;gap:4px}
  .btn{padding:14px 24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
                       animation-delay:.001ms!important;transition-delay:.001ms!important}
  .r{opacity:1;transform:none;--ro:1;--rs:0}
}

/* ---- DESKTOP: fixed photo proportions keep the card rows aligned ---- */
@media (min-width:1000px){
  .svc-media{aspect-ratio:1/1;flex:0 0 auto}
  .dish-media{aspect-ratio:4/5;flex:0 0 auto}
  /* ...and the media row must not absorb the section's leftover height. A box
     with an aspect-ratio resolves align-self:normal to start, so a 1fr row
     taller than the photo left dead space beneath it, growing with the window.
     Content-sized rows, packed to the top; the slack falls below the grid. */
  .svc-grid{grid-template-rows:auto auto auto auto auto}
  .dish-grid{grid-template-rows:auto auto auto}
  .svc-grid,.dish-grid{align-content:start}
  /* 2-4 cards: one full row, no dead column and no orphan */
  .svc-grid[data-count="2"],.dish-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
  .svc-grid[data-count="4"],.dish-grid[data-count="4"]{grid-template-columns:repeat(4,1fr)}
}