/* ============================================================
   Lajawab Indian Cuisine, stylesheet
   ------------------------------------------------------------
   Sections in order:
     1. Ornament
     2. Header
     3. Hero
     4. Marquee
     5. Generic Band
     6. Intro
     7. Signatures
     8. Menu
     9. Menu Accordion + Jump Nav
     10. Tags
     11. Legend
     12. Gallery
     13. Story
     14. Catering
     15. Visit
     16. Footer
     17. Reveal
     18. Keyframes
     19. Responsive
   ============================================================ */

:root{
  --ivory:#F7F1E4; --cream:#EFE6D2; --paper:#FBF7EE;
  --crimson:#9E1B2F; --crimson-deep:#6E1320;
  --gold:#C8962E; --gold-bright:#E6BE57; --gold-pale:#F0DCA4; --gold-deep:#8C6A1E;
  --espresso:#1B130F; --espresso-2:#241912; --espresso-3:#2E2017;
  --ink:#2A1E16; --ink-soft:#5C4B3C; --line:#E2D4B6;
  --maxw:1200px; --gut:clamp(1.2rem,4vw,3.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:1.13rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.display{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.04em;line-height:1.12}
.eyebrow{font-family:"EB Garamond",serif;text-transform:uppercase;letter-spacing:.34em;font-size:.74rem;font-weight:600;color:var(--gold)}
.lede{font-size:1.24rem;color:var(--ink-soft)}

/* ============================================================
   ORNAMENT
   ============================================================ */
.orn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center}
.orn-line{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn-line:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.orn-dot{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 3px rgba(200,150,46,.16)}

/* ============================================================
   HEADER
   ============================================================ */
header.site{position:sticky;top:0;z-index:60;background:rgba(247,241,228,.9);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
/* padding-block only. A `padding` shorthand here would override the
   padding-inline that .wrap supplies, which left the header with no side
   gutter at all and the wordmark flush against the screen edge. */
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.25rem}
.bar .brand{flex-shrink:0}
/* The logo fills the bar rather than floating inside it. That is the padding's
   doing, not this height: .25rem above and below puts the artwork at 87% of the
   bar against 76% before. The height then only decides how big the whole header
   is, and it is traded against the header breakpoint below, measured not
   guessed: 58px needs 1120, 60px needs 1130, 63px needs 1140, 66px needs 1150.
   60px keeps the header at 69px, closest to the 71 everything else was verified
   against, and keeps every current iPad on the full navigation. */
.brand img{height:60px;width:auto;max-width:none}
nav.primary{display:flex;align-items:center;gap:1.7rem}
nav.primary a.link{text-decoration:none;text-transform:uppercase;letter-spacing:.17em;font-size:.77rem;font-weight:600;color:var(--ink);padding:.3rem 0;border-bottom:1px solid transparent;transition:.2s}
nav.primary a.link:hover,nav.primary a.link:focus-visible{color:var(--crimson);border-color:var(--gold)}
.cta-row{display:flex;align-items:center;gap:.55rem}
/* Two buttons in a pair should be the same width. A min-width is a floor, not a
   match, which is why the header pair sat 10px apart and the Visit pair 16px.
   An auto width grid with equal columns sizes every column to the widest
   content, so a pair matches whatever its labels happen to say and no width is
   fixed anywhere. */
.bar .cta-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"EB Garamond",serif;text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;font-weight:600;text-decoration:none;padding:.7rem 1.25rem;border:1px solid var(--crimson);color:var(--crimson);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s}
.btn:hover,.btn:focus-visible{background:var(--crimson);color:var(--ivory);transform:translateY(-1px);box-shadow:0 7px 20px rgba(110,19,32,.22)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.solid{background:var(--crimson);color:var(--ivory)}
.btn.solid:hover,.btn.solid:focus-visible{background:var(--crimson-deep);border-color:var(--crimson-deep)}
.btn.gold{border-color:var(--gold);color:var(--ink)}
.btn.gold:hover,.btn.gold:focus-visible{background:var(--gold);border-color:var(--gold);color:#231a10}
.btn.lg{padding:.95rem 1.7rem;font-size:.82rem}
.bar .cta-row .btn{min-width:150px;white-space:nowrap}
nav.primary a.link{white-space:nowrap}
.hero .cta-row .btn{min-width:210px}
.navtoggle{display:none;align-items:center;justify-content:center;min-height:44px;background:transparent;border:1px solid var(--crimson);color:var(--crimson);padding:.5rem .7rem;cursor:pointer;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.scrollbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));box-shadow:0 0 8px rgba(230,190,87,.55)}

/* ============================================================
   HERO
   ============================================================ */
/* The chrome above the hero is the header alone, and its height is published
   as --hdr by positionNav() in site.js rather than hardcoded here. svh is the
   address-bar-visible viewport, so the hero bottom and the scroll cue land on
   the real fold of a phone; the vh line above it is the fallback for engines
   without svh. 69px is the measured header height at every width from 320 to
   1920, used only for the instant before the script runs. It was 71 until the
   logo grew on 2026-08-02 and the bar padding came down to match.
   The content is CENTRED at every width. Bottom anchoring held a fixed 120 to
   160px under the buttons while the space ABOVE the headline ran 0px on an
   iPhone SE, 293 on a 14 Pro Max, 455 at 1920x937 and 795 at 2560x1297, so the
   composition was a different one on every screen and was never designed: it is
   what falls out of anchoring to the bottom with a padding that caps out. */
.hero{position:relative;min-height:calc(100vh - var(--hdr, 69px));min-height:calc(100svh - var(--hdr, 69px));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ivory);overflow:hidden;background:var(--espresso)}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06);animation:kenburns 22s ease-in-out infinite alternate}
/* The scrim, the dark layer that makes white type readable over a photograph.
   It used to be shaped around bottom anchored text: thinnest at 42% down, where
   the photograph shows through, and heaviest at the very bottom where the text
   sat. Centred text lands at 50%, which was the thinnest point, so the window
   moves up into the empty upper third and the weight follows the text down.
   Measured against the old curve: top third lighter by up to .065, middle
   heavier by up to .068, mean change across the full height +0.010. Behind the
   text it gives .56, against .526 on a 1366 laptop and .663 on a 1440p monitor
   under the old shape, so it sits inside the range the site already shipped. */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.62) 0%,rgba(20,12,8,.46) 25%,rgba(20,12,8,.58) 55%,rgba(20,12,8,.78) 100%)}
/* canvas is a replaced element, so inset:0 alone leaves it at its intrinsic
   300x150. width and height are what actually stretch it to fill the hero. */
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-inner{position:relative;z-index:3;padding:clamp(3rem,11vh,7.5rem) 1.25rem;max-width:880px}
.hero-eyebrow{display:inline-block;font-family:"EB Garamond",serif;text-transform:uppercase;letter-spacing:.32em;font-size:.74rem;font-weight:600;color:var(--gold-bright);margin-bottom:1.2rem;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero h1{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.05em;font-size:clamp(1.45rem,3.1vw,2rem);margin:0 0 .9rem;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero .sub{max-width:560px;margin:0 auto;font-size:1.12rem;opacity:.92}
.hero .cta-row{justify-content:center;margin-top:2rem;flex-wrap:wrap}
.hero .btn{border-color:rgba(247,241,228,.7);color:var(--ivory)}
.hero .btn:hover,.hero .btn:focus-visible{background:var(--ivory);color:var(--crimson);border-color:var(--ivory)}
.hero .btn.gold{background:var(--gold);border-color:var(--gold);color:#231a10}
.hero .btn.gold:hover,.hero .btn.gold:focus-visible{background:var(--gold-bright);border-color:var(--gold-bright)}
/* The cue's clearance above the hero's bottom edge was a fixed 41px at every
   size, which is thinner than the bottom browser chrome on a 14 Pro Max or a
   Galaxy S20, so the line fell into it and disappeared. It scales now, 60 to
   79px measured. */
.scrollcue{position:absolute;left:50%;bottom:clamp(3.4rem,7vh,4.6rem);transform:translateX(-50%);z-index:3;color:rgba(240,220,164,.8);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.scrollcue span{display:block;width:1px;height:26px;margin:.5rem auto 0;background:linear-gradient(transparent,var(--gold-bright));animation:cue 2s ease-in-out infinite}

/* Under 700px tall there is no room to centre the content AND leave the scroll
   cue its band, so the content is biased up rather than left to collide with it.
   An iPhone SE at 553px, a landscape phone, and a 1366x768 or 1280x720 laptop
   all land here and none of them can hold both however they are arranged. */
@media (max-height:700px){
  .hero-inner{padding-block:1rem 7rem}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{overflow:hidden;background:var(--crimson-deep);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.mtrack{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:scrollX 48s linear infinite}
.mtrack span{font-family:"Cinzel",serif;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--gold-pale);padding:.85rem 1.05rem}
.mtrack .sep{color:var(--gold-bright);font-size:.5rem;padding:.85rem .1rem}
.marquee:hover .mtrack{animation-play-state:paused}

/* ============================================================
   GENERIC BAND
   ============================================================ */
.band{padding:clamp(3.6rem,8vw,6.5rem) 0}
.band.dark{background:var(--espresso);color:var(--ivory)}
.band.cream{background:var(--cream)}
.sec-head{text-align:center;max-width:860px;margin:0 auto clamp(2.4rem,5vw,3.6rem)}
.sec-head h2{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.05em;font-size:clamp(2rem,4.6vw,2.5rem);margin:.85rem 0 .5rem}
.band.dark .sec-head h2{color:var(--ivory)}
.band.dark .eyebrow{color:var(--gold-bright)}

/* ============================================================
   INTRO
   ============================================================ */
.intro{text-align:center}
.intro .wrap{max-width:880px}
.intro p{font-size:clamp(1.3rem,2.6vw,1.7rem);font-style:italic;color:var(--ink);line-height:1.55}
.intro .accent{color:var(--crimson);font-style:normal}

/* ============================================================
   SIGNATURES
   ============================================================ */
/* Scroll anchoring, off. The rotator swaps three cards out and three in on every
   dot click, and the browser had latched an anchor onto one of the outgoing
   cards to keep it visually stable. When that card was hidden it re-anchored and
   threw the page 571px down, into the menu section. Confirmed from a click log:
   the jump landed 4ms after the click, in the same frame as the swap, with no
   scrollTo, no scrollIntoView and no hash change, so nothing in this codebase
   moved the page. It only bit going leftwards, because which node the browser
   anchors to depends on what is on screen and the two directions swap in
   different sets. It surfaced when the hero was centred and the header changed
   height, which moved every section offset and so changed the anchor. */
.sig-rotator,.sig-grid,.sig-dots{overflow-anchor:none}
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.sig-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.sig-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.sig-grid[data-cols="1"]{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
.sig[hidden]{display:none}
.sig-dots{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:clamp(2rem,4vw,2.8rem)}
/* The visible dot stays 8px. The ::after is an invisible hit area, 44px tall
   and as wide as the dot plus the row gap, so neighbouring dots abut instead of
   overlapping. Twelve 44px wide targets cannot fit a 320px phone, so the width
   here is set by the spacing rather than by the 44px guideline. */
.sig-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(247,241,228,.32);cursor:pointer;transition:width .35s ease,background .35s ease,box-shadow .35s ease}
.sig-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + .55rem);height:44px;border-radius:6px}
.sig-dot:hover{background:rgba(247,241,228,.6)}
.sig-dot.is-active{width:28px;background:var(--gold-bright);box-shadow:0 0 10px rgba(230,190,87,.55)}
.sig-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sig{display:flex;flex-direction:column}
.sig-img{position:relative;overflow:hidden;border:1px solid rgba(230,190,87,.4);border-radius:50% 50% 14px 14px/26% 26% 4% 4%;background:#000}
.sig-img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sig:hover .sig-img img{transform:scale(1.07)}
.sig-kind{position:absolute;top:1rem;left:50%;transform:translateX(-50%);font-family:"EB Garamond",serif;text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;color:var(--gold-pale);background:rgba(20,12,8,.5);border:1px solid rgba(230,190,87,.5);padding:.25rem .7rem;border-radius:20px}
.sig-cap{padding:1.1rem .4rem 0;text-align:center}
.sig-head{display:flex;align-items:baseline;justify-content:center;gap:.6rem}
.sig-head h3{font-family:"Cinzel",serif;font-weight:600;font-size:1.2rem;color:var(--gold-bright);margin:0}
.sig-price{color:var(--gold-pale);font-weight:600}
.sig-cap p{color:rgba(247,241,228,.78);margin:.4rem auto 0;max-width:38ch;font-size:1rem}

/* ============================================================
   MENU
   ============================================================ */
.menu-note{max-width:780px;margin:-.4rem auto clamp(2rem,4vw,3rem);text-align:center;font-size:.96rem;color:var(--ink-soft);border:1px dashed var(--gold);background:rgba(200,150,46,.06);padding:.85rem 1.1rem}
.menu-note b{color:var(--crimson);font-weight:600}
.msec{margin-bottom:clamp(2.6rem,5vw,4rem)}
.msec-h{text-align:center;margin-bottom:1.8rem}
.msec-h h3{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.06em;font-size:clamp(1.5rem,3vw,2rem);color:var(--crimson);margin:0 0 .7rem}
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
.dish{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:transform .3s,box-shadow .3s,border-color .3s}
.dish:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(42,30,22,.14);border-color:var(--gold)}
.dish-img{position:relative;overflow:hidden;aspect-ratio:3/2;background:linear-gradient(135deg,var(--espresso-2),var(--espresso-3))}
.dish-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.dish-img img.noimg{display:none}
.dish-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.dish-fallback::before{content:"";width:13px;height:13px;background:var(--gold);opacity:.55;transform:rotate(45deg);box-shadow:0 0 0 4px rgba(200,150,46,.12)}
.dish:hover .dish-img img{transform:scale(1.08)}
.dish-body{padding:1.05rem 1.15rem 1.25rem}
.dish-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.dish-head h4{font-family:"Cinzel",serif;font-weight:600;font-size:1.04rem;color:var(--ink);margin:0}
.dish-price{color:var(--crimson);font-weight:600;font-variant-numeric:tabular-nums}
.dish-body p{margin:.4rem 0 0;color:var(--ink-soft);font-size:.98rem}
.mi-cols{columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
.mi{break-inside:avoid;margin-bottom:1.1rem;padding-bottom:.1rem}
.mi-top{display:flex;align-items:baseline;gap:.5rem}
.mi-name{font-family:"Cinzel",serif;font-weight:500;font-size:1.04rem;color:var(--ink);letter-spacing:.01em}
.mi-dots{flex:1;border-bottom:1px dotted var(--gold);transform:translateY(-.22em);opacity:.5;min-width:14px}
.mi-price{color:var(--crimson);font-weight:600;font-variant-numeric:tabular-nums}
.mi-desc{margin:.15rem 0 0;color:var(--ink-soft);font-size:.99rem;font-style:italic}

/* ============================================================
   MENU ACCORDION + JUMP NAV
   ============================================================ */
.menu-nav{position:sticky;top:70px;z-index:40;background:rgba(247,241,228,.94);backdrop-filter:saturate(150%) blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Q3, the pill bar. One scrolling row that tells the truth about itself.
   The wrapper is the positioning context and carries the centring the track
   used to, so the masks and the arrows sit at the edges of the PILLS rather
   than at the edges of the full width bar. Both the arrows and the fades sit on
   var(--gut), the page's content column edge, so they line up with the wordmark
   on the left and the Reserve button on the right, and a pill fading out does so
   on the same line as every other element on the page rather than at the screen
   edge. The old single fade was hardcoded on
   and pinned to the bar, so on desktop it rendered far to the right of where the
   pills actually clipped and hinted at nothing. Both masks are now driven by
   real scroll position, so neither ever lies. */
.mnav-wrap{position:relative;max-width:var(--maxw);margin:0 auto;--arrow:32px;--lane:calc(var(--arrow) + 6px)}
.mnav-track{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem 0;margin-inline:var(--gut);scrollbar-width:none;scroll-behavior:smooth}
.mnav-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.mnav-track{scroll-behavior:auto}}
.mnav-wrap::before,.mnav-wrap::after{content:"";position:absolute;top:0;bottom:0;width:46px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.mnav-wrap::before{left:var(--gut);background:linear-gradient(to left,rgba(247,241,228,0),rgba(247,241,228,.95))}
.mnav-wrap::after{right:var(--gut);background:linear-gradient(to right,rgba(247,241,228,0),rgba(247,241,228,.95))}
.mnav-wrap.can-left::before,.mnav-wrap.can-right::after{opacity:1}
/* Arrows are for pointer devices only. On touch, swiping the row is the natural
   gesture and an arrow is just clutter. They are also hidden whenever the
   direction they point in has nothing left to reveal. */
.mnav-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:var(--arrow);height:var(--arrow);align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--ivory);color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mnav-arrow:hover,.mnav-arrow:focus-visible{background:var(--crimson);border-color:var(--crimson);color:var(--ivory)}
.mnav-arrow i{display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.mnav-prev{left:var(--gut)}
.mnav-prev i{transform:rotate(135deg);margin-left:3px}
.mnav-next{right:var(--gut)}
.mnav-next i{transform:rotate(-45deg);margin-right:3px}
@media (hover:hover) and (pointer:fine){
  .mnav-wrap.can-left .mnav-prev,.mnav-wrap.can-right .mnav-next{display:inline-flex}
  /* Pointer devices additionally hold back the pills by one arrow lane, so the
     arrow sits in the space the first pill would otherwise occupy rather than
     floating over it. The track's padding used to do this job and could not:
     padding is part of a scroll container's scrollable area, so pills scrolled
     through it and painted underneath the button.
     The lane is reserved permanently rather than only while an arrow is visible,
     because otherwise the track would change width mid scroll and every pill
     would shift sideways.
     Everything still derives from --gut and --arrow, so nothing here is a fixed
     width: the track stays fluid and the number of visible pills keeps varying
     with the viewport, which is the point. */
  .mnav-track{margin-inline:calc(var(--gut) + var(--lane))}
  .mnav-wrap::before{left:calc(var(--gut) + var(--lane))}
  .mnav-wrap::after{right:calc(var(--gut) + var(--lane))}
}
.mnav-pill{flex:none;white-space:nowrap;background:transparent;border:1px solid var(--line);color:var(--ink-soft);border-radius:22px;padding:.42rem .95rem;font-family:"EB Garamond",serif;font-size:.84rem;letter-spacing:.03em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mnav-pill:hover,.mnav-pill.active{background:var(--crimson);border-color:var(--crimson);color:var(--ivory)}
.menu-acc{max-width:none;margin:1.4rem auto 0}
.menu-acc.no-anim .acc-panel{transition:none}
/* Suppressing the transition on ONE section, so the outgoing panel can be
   collapsed synchronously while the incoming one still animates. --stick is set
   at runtime to the header plus pill bar height, so an anchor jump clears both
   sticky bars instead of landing behind them. */
.acc.no-anim .acc-panel{transition:none}
.acc{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--stick,128px) + 12px)}
.acc:first-child{border-top:1px solid var(--line)}
.acc-head{width:100%;display:flex;align-items:center;gap:1rem;background:transparent;border:0;cursor:pointer;padding:1.3rem .3rem;text-align:left}
.acc-title{flex:1;font-family:"Cinzel",serif;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;letter-spacing:.04em;color:var(--crimson);transition:opacity .2s}
.acc-head:hover .acc-title{opacity:.72}
.acc-count{font-family:"EB Garamond",serif;font-size:.82rem;color:var(--ink-soft);letter-spacing:.08em}
.acc-chev{width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .3s;margin-right:.5rem;flex:none}
.acc[data-open] .acc-chev{transform:rotate(-135deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.acc[data-open] .acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-inner .dish-grid{padding:.3rem 0 2.3rem}

/* ============================================================
   TAGS
   ============================================================ */
.tags{display:inline-flex;gap:.28rem;margin-left:.35rem;vertical-align:baseline}
.tg{font-family:"EB Garamond",serif;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.03em;width:1.22rem;height:1.22rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;line-height:1}
.tg.v{border:1.5px solid #3E7C4F;color:#3E7C4F}
.tg.vg{background:#3E7C4F;color:#fff}
.tg.gf{background:var(--crimson);color:#fff}

/* ============================================================
   LEGEND
   ============================================================ */
.legend{margin-top:clamp(2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:center;font-size:.92rem;color:var(--ink-soft);text-align:center}
.legend .li{display:inline-flex;align-items:center;gap:.5rem}
.legend .pepper{color:var(--crimson);letter-spacing:.12em}
.legend .fine{flex-basis:100%;font-size:.85rem;color:var(--ink-soft);opacity:.85;margin-top:.4rem}
.menu-legend{margin-top:clamp(1rem,2vw,1.5rem);padding-top:.2rem;border-top:none}
.legend-foot{margin-top:clamp(1.5rem,3vw,2.4rem);border-top:none;padding-top:0}
.sig[data-target]{cursor:pointer}
.sig:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.gcell{position:relative;margin:0;overflow:hidden;border-radius:5px;background:#000}
.gcell img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gcell:hover img{transform:scale(1.1)}
.gcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .7rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-pale);background:linear-gradient(transparent,rgba(20,12,8,.8));opacity:0;transform:translateY(6px);transition:.3s}
.gcell:hover figcaption{opacity:1;transform:none}
.gcell:nth-child(1){grid-column:span 2;grid-row:span 2}

/* ============================================================
   STORY
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.story-copy h2{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.05em;font-size:clamp(2rem,4.6vw,2.5rem);margin:.7rem 0 1rem}
.story-copy p{color:rgba(247,241,228,.82);margin:0 0 1rem}
.story-img{overflow:hidden;border:1px solid rgba(230,190,87,.35);border-radius:50% 50% 14px 14px/22% 22% 4% 4%;background:#000}
.story-img img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ============================================================
   CATERING
   ============================================================ */
/* The image URL is root relative and lives here on purpose. It used to come from
   an inline --cater-img custom property carrying a document relative URL, but a
   relative url() inside a custom property resolves against the stylesheet that
   USES it, not the document that declares it, so once the CSS moved out of the
   page it resolved to /assets/css/assets/img/... and the photograph 404d. */
.catering{position:relative;text-align:center;background:linear-gradient(rgba(20,12,8,.72),rgba(20,12,8,.82)),url('/assets/img/gal-spread.webp') center/cover;color:var(--ivory)}
.catering::after{content:"";position:absolute;inset:clamp(12px,2vw,26px);border:1px solid rgba(230,190,87,.45);pointer-events:none}
.catering .inner{position:relative;z-index:2;max-width:680px;margin:0 auto;padding:clamp(3.4rem,7vw,5.5rem) var(--gut)}
.catering h2{font-family:"Cinzel",serif;font-weight:600;letter-spacing:.05em;font-size:clamp(2rem,4.6vw,2.5rem);margin:.7rem 0 0}
.catering p{color:rgba(247,241,228,.9);font-size:1.14rem;margin:1rem auto 1.8rem;max-width:540px}
.catering .btn{border-color:var(--gold-bright);color:var(--ivory)}
.catering .btn:hover,.catering .btn:focus-visible{background:var(--gold);color:#231a10;border-color:var(--gold)}

/* ============================================================
   VISIT
   ============================================================ */
.visit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.8rem,5vw,4rem);align-items:stretch}
.facts dl{margin:0}
.facts .row{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.facts .row:first-child{padding-top:0}
.facts dt{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;color:var(--gold);margin-bottom:.35rem}
/* The email address is one unbreakable token about 219px wide. As a grid item
   floor it forced a page level horizontal scroll below roughly 256px, which is
   reachable at 200 percent zoom on a phone. Letting it break removes the floor. */
.facts dd{margin:0;font-size:1.08rem;overflow-wrap:anywhere}
.facts dd a{text-decoration:none;border-bottom:1px solid var(--line)}
/* 23.5px tall as a plain inline anchor, the smallest target on the page after
   the rotation dots and the one a hungry visitor actually reaches for. Needs
   inline-block before the padding does anything. Scoped to the phone number on
   purpose, the email is a lower intent tap and grows the Visit panel for less. */
.facts dd a[href^="tel:"]{display:inline-block;padding-block:.65rem}
.facts dd a:hover{border-color:var(--crimson);color:var(--crimson)}
.facts .muted{color:var(--ink-soft)}
.facts .cta-row{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:1.6rem}
/* The Visit pair is deliberately NOT gold, and there is nothing here to say so
   because there is nothing left to override. Gold belongs on the dark bands, the
   hero and catering, where it has contrast; on the light Visit panel a gold
   outline was the lowest contrast button on the page and sat directly beside the
   strongest one. It carried class="btn gold" with an override back to crimson
   until 2026-08-02, when the class came off the markup and the override with it.
   Solid crimson is the primary action, crimson outline the secondary. */
.map{border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:320px}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:saturate(.9)}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--espresso);color:var(--ivory);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.foot-emblem img{width:120px;margin-bottom:1rem}
.foot-blurb{color:rgba(247,241,228,.7);max-width:30ch;font-size:.98rem}
.foot-col h4{font-family:"Cinzel",serif;font-weight:500;letter-spacing:.08em;font-size:.84rem;text-transform:uppercase;color:var(--gold-bright);margin:0 0 .9rem}
.foot-col a,.foot-col p{display:block;text-decoration:none;color:rgba(247,241,228,.82);padding:.26rem 0;font-size:.97rem;margin:0}
.foot-col a:hover{color:var(--gold-bright)}
.foot-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(230,190,87,.22);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.8rem;color:rgba(247,241,228,.55)}

:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg{animation:none;transform:scale(1.04)}
  .mtrack{animation:none}.marquee{overflow-x:auto}
  .scrollcue span{animation:none}
  .acc-panel{transition:none}
  #sparks{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The gallery deliberately does NOT tile exactly at 1001px and up, or at 760px
   and down. Widening cells to close the grid was tried and reverted at PAC's
   direction: because .gcell img is locked to a 1:1 crop, a wider cell stretches
   the whole mosaic and turns the spread photograph into a tall awkward crop.
   Uniform squares with some empty space read better than a closed grid with
   distorted cells. The 761 to 1000 band tiles exactly by coincidence, nine
   slots in three by three, and is left alone. See Q1 in the findings file. */

@media (max-width:1000px){
  .sig-grid:not([data-cols]){grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:2rem}
  .dish-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gcell:nth-child(1){grid-column:span 2;grid-row:span 2}
  .split,.visit-grid{grid-template-columns:1fr}
  .story-img,.map{order:-1}
  .foot-top{grid-template-columns:1fr 1fr}
}
/* Header layout switch, 1130px. Was 1100 until the logo grew on 2026-08-02.
   The full header is the logo plus five nav links plus both buttons. The logo
   went from 173px wide to 192px, and the whole row was then swept at 1100, 1110,
   1120, 1130, 1140, 1150 and 1160 with the real artwork in place: it overflows
   at 1110 and 1120 and first fits at 1130 with 7px to spare. Measured, not
   computed from a content sum.
   The band this costs is 1100 to 1129. Nothing common sits in it: iPad mini
   landscape is 1133 and keeps the full navigation, iPad Air landscape is 1180,
   and the only real device that drops to the burger is a 2017 iPad Pro 10.5 at
   1112. A taller logo moves this further: 63px would need 1140 and would take
   iPad mini with it.
   Worth knowing before changing a label: renaming Reserve to Reserve a Table
   costs 31px, which would push this to about 1160.
   The switch used to sit at 760px, which left every width from 761 to 994
   squeezing the wordmark: 0px wide at 761, 54px at 820, 68px at 834 and 134px
   at 900 against a correct 176px, with object-fit computing to fill so the
   wordmark was distorted rather than scaled. It also wrapped Our Story and
   Order Online onto two lines, which is where the 83.8px header came from, and
   at 761 it pushed Reserve 4.7px past the right edge and gave the page a 4px
   horizontal scroll. Walked at 761, 820, 834, 900, 920, 940, 960, 980, 990,
   995, 999, 1000, 1001, 1023 and 1024. */
@media (max-width:1129px){
  nav.primary{display:none}
  .navtoggle{display:inline-flex}
  header.site.open .bar{flex-wrap:wrap}
  /* The toggle is last in the DOM, so once the open nav takes the full width it
     wrapped onto its own line BELOW all five links, 331px from where it was
     tapped. Ordering keeps it on the first row beside the wordmark, where it
     opened, so it can serve as the close control. */
  header.site.open .brand{order:1}
  header.site.open .bar .cta-row{order:2}
  header.site.open .navtoggle{order:3}
  header.site.open nav.primary{order:4;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.4rem 0 1rem;width:100%}
  header.site.open nav.primary a.link{font-size:.92rem;padding:.5rem 0}
}
/* Below the desktop switch the header has exactly TWO states, decided by whether
   the row physically fits rather than by guessing at device classes.
   Measured: wordmark 176 + the matched button pair 330 + toggle 68 + two 16px
   gaps = 606px of content, which clears the 4vw gutter from 659px up. 680 is
   used instead, for headroom: the bar is first laid out in a fallback face and
   relaid out when Cinzel and EB Garamond arrive, and we already have a case of
   the header measuring differently on a cold load.
   This replaced an earlier priority plus arrangement that kept Reserve in the
   bar and hid Order Online in the panel. Both buttons are the same kind of
   thing, so splitting them was arbitrary and left Reserve marooned in the middle
   of the bar between the wordmark and the toggle. */

/* IT FITS, 680 to 1129. Both buttons stay in the bar, pushed right so they group
   with the toggle rather than being spread evenly across it. The panel is links
   only, because the buttons are already on screen. */
@media (min-width:680px) and (max-width:1129px){
  .bar .cta-row{margin-left:auto}
}

/* IT DOES NOT FIT, below 680. The bar is the wordmark and the toggle only, and
   both buttons move into the open panel, stacked and matched to each other by
   the single column grid.
   They stay LAST, after the links, so the panel reads in the same order as the
   desktop bar does left to right. Keeping them last also means the DOM order is
   never rearranged, so tab order and screen reader order match what is on
   screen without any order property fighting them. */
@media (max-width:679px){
  .bar .cta-row{display:none}
  /* Spacing in the open panel, measured rather than guessed. The buttons used to
     sit 32px below the last link, which is the nav's own 16px bottom padding plus
     the bar's 16px row gap stacked on each other, while being only 9px apart from
     one another. So the pair read as less related to itself than to the links
     above it. 20px above the pair and 12px within it puts that the right way
     round. The nav's padding is only trimmed here, not in the 680 to 1099 band,
     where the panel holds links alone and that padding is its bottom edge. */
  header.site.open nav.primary{padding-bottom:.25rem}
  header.site.open .bar .cta-row{display:inline-grid;grid-auto-flow:row;gap:.75rem;order:5;width:auto;margin:0;padding-bottom:1rem}
}

@media (max-width:760px){
  /* Phones need the Visit pair to stack rather than share one row. */
  .facts .cta-row{display:flex;flex-wrap:wrap}
  .mi-cols{columns:1}
  .dish-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .gal{grid-template-columns:1fr 1fr}
  .gcell:nth-child(1){grid-column:span 2;grid-row:auto}
  .foot-top{grid-template-columns:1fr}
  /* Kept as an explicit belt and braces. .bar now uses padding-block, so the
     padding-inline that .wrap supplies is no longer overridden at any width and
     this line is a duplicate of it rather than the fix it originally was. */
  .bar{padding-inline:var(--gut)}
}