/* ==========================================================================
   Haute Dolci Edinburgh
   SocialsGroup

   The visual language is read off Haute Dolci's own Instagram, not invented:
   watercolour and gouache illustration on soft pastel grounds, deep burgundy
   for type, brushed gold for detail, and a lot of air. Their post format is
   a letterspaced serif caps title, an italic sub-label, the painting, and an
   italic caption underneath. That is what `.plate` reproduces.

   Grounds rotate through ivory, blush, duck-egg and sage the way the grid
   does. Dark is used once per page at most, and it is deep burgundy, never
   brown or black.

   Type: Cormorant Garamond throughout for display and titles, Jost only for
   the small working text: labels, buttons, body. Jost is the nearest free
   cut to the Futura PT in the HD wordmark.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  --ivory:#f6f0e5;
  --blush:#f7eae4;
  --egg:#e4edf1;
  --sage:#e8eee4;
  --linen:#fdfbf6;

  --burgundy:#5e2130;
  --burgundy-deep:#3d1421;
  --ink:#4f403a;
  --ink-soft:#6d5c54;
  --muted:#93857b;

  --gold:#b08d4f;
  --gold-lite:#d2b585;

  --line:rgba(94,33,48,.16);
  --line-soft:rgba(94,33,48,.08);

  /* chocolate. the buttons pour it, the loader pours it, same two stops. */
  --choc-a:#4a2617;
  --choc-b:#2b1410;
  --on-choc:#fdfbf6;

  --shell:min(1220px,calc(100% - 2.6rem));
  --narrow:min(880px,calc(100% - 2.6rem));
  --ease:cubic-bezier(.2,.72,.24,1);
  --slow:cubic-bezier(.16,.84,.28,1);
}

/* tint bands · a section changes ground, never palette */
.t-blush{background:var(--blush)}
.t-egg{background:var(--egg)}
.t-sage{background:var(--sage)}
.t-linen{background:var(--linen)}

/* the one dark treatment · deep burgundy, never brown */
.on-dark{
  --ivory:var(--burgundy-deep);
  --linen:#4a1a29;
  --ink:#f7efe6;
  --ink-soft:#e0cdc4;
  --muted:#b09b91;
  --burgundy:#f7efe6;
  --line:rgba(247,239,230,.18);
  --line-soft:rgba(247,239,230,.09);
  background:var(--burgundy-deep);color:#f7efe6;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:'Jost','Futura PT',Futura,Avenir,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;font-size:clamp(1rem,.95rem + .2vw,1.06rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0}

/* --- layout --------------------------------------------------------------- */
.shell{width:var(--shell);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
section{padding:clamp(4.5rem,9vw,8.5rem) 0;position:relative}
.pad-s{padding-block:clamp(3rem,6vw,4.5rem)}
.mid{text-align:center}
.mid .lede{margin-inline:auto}

/* --- type ----------------------------------------------------------------- */
.display,.h2,.h3,.title{
  font-family:'Cormorant Garamond',Cormorant,Georgia,'Times New Roman',serif;
  font-weight:300;color:var(--burgundy);text-wrap:balance;
}
.display{font-size:clamp(2.7rem,1.3rem + 5.2vw,5.6rem);line-height:1;letter-spacing:-.012em}
.h2{font-size:clamp(2.1rem,1.25rem + 3vw,3.6rem);line-height:1.06;letter-spacing:-.01em}
.h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);line-height:1.2;font-weight:400}
.display em,.h2 em{font-style:italic;color:var(--gold)}

/* the grid's own title treatment · letterspaced serif caps */
.title{
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  letter-spacing:.24em;text-transform:uppercase;line-height:1.35;font-weight:400;
}
/* …with an italic sub-label under it */
.sub-ital{
  display:block;margin-top:.4rem;color:var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1rem,.94rem + .4vw,1.25rem);letter-spacing:.02em;
}

.kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.66rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
}
.kicker::before{content:"";width:30px;height:1px;background:currentColor}
.kicker.plain::before{display:none}
.mid .kicker::before{display:none}

.lede{
  font-size:clamp(1.04rem,.98rem + .45vw,1.24rem);line-height:1.62;font-weight:300;
  color:var(--ink-soft);max-width:54ch;
}
.small{font-size:.82rem;line-height:1.7;color:var(--muted)}
.label{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.cap-ital{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.02rem;color:var(--ink-soft);
}

/* a hairline with a small gold lozenge, used between sections */
.divider{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--gold)}
.divider::before,.divider::after{content:"";height:1px;width:min(140px,18vw);background:currentColor;opacity:.45}
.divider span{width:5px;height:5px;transform:rotate(45deg);background:currentColor}

/* --- buttons · chocolate pour ---------------------------------------------
   On hover the chocolate pours down from the top and settles, with a scalloped
   drip edge leading the way. The edge is a repeating radial-gradient row sitting
   under the mass, so it is one element and no images.
   Text goes cream on every variant, because chocolate is chocolate.
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--burgundy); --fg:var(--linen); --bd:var(--burgundy);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7rem;padding:1rem 2rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.7rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color .45s var(--ease),border-color .5s var(--ease);
}

/* the chocolate itself */
.btn::after{
  content:"";position:absolute;left:-1px;right:-1px;top:0;height:100%;z-index:-1;
  background:
    /* drips hanging off the leading edge */
    radial-gradient(circle at 50% 0,var(--choc-b) 50%,transparent 51%) 0 100%/27px 16px repeat-x,
    radial-gradient(circle at 50% 0,var(--choc-b) 40%,transparent 41%) 13px 100%/45px 22px repeat-x,
    radial-gradient(circle at 50% 0,var(--choc-b) 34%,transparent 35%) 31px 100%/71px 27px repeat-x,
    /* the mass, with a little gloss across the top */
    linear-gradient(178deg,var(--choc-a) 0%,var(--choc-b) 62%) 0 0/100% calc(100% - 13px) no-repeat;
  transform:translateY(-102%);
  transition:transform .74s cubic-bezier(.36,.58,.22,1);
}
/* a wet highlight that slides through as it settles */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,236,214,.26) 50%,transparent 66%);
  transform:translateX(-120%);opacity:0;
  transition:transform .9s var(--slow),opacity .3s var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--on-choc);border-color:var(--choc-b)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(120%);opacity:1;transition-delay:.22s}
.btn:active::after{transform:translateY(0) scaleY(1.02)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.btn-line{--bg:transparent;--fg:var(--burgundy);--bd:var(--line)}
.btn-gold{--bg:var(--gold);--fg:#3d1421;--bd:var(--gold)}
.on-dark .btn-line{--fg:#f7efe6;--bd:rgba(247,239,230,.34)}
.hero .btn-line,.nav:not(.solid) .btn-line{--fg:#fdfbf6;--bd:rgba(253,251,246,.44)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.mid .btn-row{justify-content:center}

/* No pour without motion: the chocolate simply is. */
@media(prefers-reduced-motion:reduce){
  .btn::after{transform:none;opacity:0;transition:none}
  .btn::before{display:none}
  .btn:hover::after,.btn:focus-visible::after{opacity:1}
}

/* --------------------------------------------------------------------------
   Intro veil · the chocolate pour
   The buttons pour chocolate on hover. The page does the same thing on first
   load, at full size, so the loader is the brand rather than a spinner.

   Sequence: cream ground, watercolour arch and wordmark fade up, chocolate
   pours from the top with the same drip edge as the buttons, the wordmark
   flips to cream as the pour passes it, then the whole sheet wipes upward.

   The pour is capped at roughly 1.2s and runs once per session. Repeat page
   views get the `quick` variant, which is a 0.6s wipe with no hold, because
   this is paid-traffic furniture and every extra frame is a cost.
   -------------------------------------------------------------------------- */
.veil{
  position:fixed;inset:0;z-index:200;background:var(--ivory);
  pointer-events:none;
  /* deliberately NOT overflow:hidden. the trailing drips live below the
     bottom edge and have to escape the box to be seen during the wipe.
     .veil-choc does its own clipping, which is the only clip needed. */
  transition:transform .56s cubic-bezier(.7,0,.24,1);
}
.veil-mark{
  position:absolute;left:0;right:0;top:0;height:100vh;
  display:grid;place-content:center;justify-items:center;gap:1rem;text-align:center;
}
.veil-mark img{
  width:clamp(124px,15vw,178px);height:auto;
  /* the watercolours are painted on near-white paper. multiply plus a soft
     radial mask dissolves the rectangle into the cream instead of parking a
     grey box on it. same treatment as the menu lightbox. */
  mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.05);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 48%,transparent 86%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 48%,transparent 86%);
  opacity:0;transform:translateY(12px) scale(.95);
  transition:opacity .62s var(--ease),transform .9s var(--slow);
}
.veil-mark b{
  display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.35rem,4vw,2.15rem);line-height:1;
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:var(--burgundy);
  opacity:0;transition:opacity .58s ease .08s;
}
.veil-mark i{
  display:block;margin-top:.85rem;font-family:'Jost',system-ui,sans-serif;font-style:normal;
  font-size:.6rem;letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--gold);
  opacity:0;transition:opacity .58s ease .18s;
}
.veil.show .veil-mark img,
.veil.show .veil-mark b,
.veil.show .veil-mark i{opacity:1;transform:none}

/* the pour. same background recipe as .btn::after, scaled up for a page.
   Three drip rows at different frequencies so the leading edge reads as
   chocolate running rather than as a scalloped border: a tight ripple, a
   medium sag on top of it, and one long drip roughly every 240px. */
.veil-choc{
  position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;
  background:
    /* every tile is 40px tall so all three hang from the same line, and the
       ellipse heights are what vary: a long runner, a sag, a tight ripple */
    radial-gradient(ellipse 20px 40px at 50% 0,var(--choc-b) 99%,transparent 100%) 118px 100%/250px 40px repeat-x,
    radial-gradient(ellipse 33px 27px at 50% 0,var(--choc-b) 99%,transparent 100%) 41px 100%/131px 40px repeat-x,
    radial-gradient(ellipse 33px 15px at 50% 0,var(--choc-b) 99%,transparent 100%) 0 100%/66px 40px repeat-x,
    linear-gradient(178deg,var(--choc-a) 0%,var(--choc-b) 34%) 0 0/100% calc(100% - 40px) no-repeat;
  transition:height .68s cubic-bezier(.34,.6,.22,1);
}
/* the sheet sags as it lifts, so the trailing edge drips too */
.veil::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:40px;opacity:0;
  background:
    radial-gradient(ellipse 20px 40px at 50% 0,var(--choc-b) 99%,transparent 100%) 118px 0/250px 40px repeat-x,
    radial-gradient(ellipse 33px 27px at 50% 0,var(--choc-b) 99%,transparent 100%) 41px 0/131px 40px repeat-x,
    radial-gradient(ellipse 33px 15px at 50% 0,var(--choc-b) 99%,transparent 100%) 0 0/66px 40px repeat-x;
}
.veil.done::after{opacity:1}
/* the cream wordmark sits at the same viewport position as the burgundy one,
   so the pour reads as the letters changing colour, not as a second logo. */
.veil-choc .veil-mark img{visibility:hidden}
.veil-choc .veil-mark b{color:var(--on-choc);opacity:1;transform:none}
.veil-choc .veil-mark i{color:var(--gold-lite);opacity:1;transform:none}

.veil.pour .veil-choc{height:calc(100% + 30px)}
.veil.done{background:var(--choc-b)}
.veil.lift{transform:translateY(-101%)}

.veil.quick .veil-mark{display:none}
.veil.quick .veil-choc{transition-duration:.34s}
.veil.quick{transition-duration:.4s}

/* --- nav ------------------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),transform .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in srgb,var(--ivory) 93%,transparent);
  backdrop-filter:blur(16px);border-bottom-color:var(--line-soft);
}
.nav.up{transform:translateY(-102%)}
.nav-in{display:flex;align-items:center;gap:1.4rem;height:76px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;color:var(--linen)}
.nav.solid .brand{color:var(--burgundy)}
.brand b{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.06rem;letter-spacing:.4em;text-transform:uppercase;white-space:nowrap;
}
.brand span{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;margin-top:.44rem;opacity:.66}
.nav-gap{flex:1}
.nav-links{display:none;gap:2rem}
.nav-links a{
  text-decoration:none;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--linen);opacity:.82;transition:opacity .3s;
}
.nav.solid .nav-links a{color:var(--ink)}
.nav-links a:hover{opacity:1}
.nav .btn{padding:.75rem 1.4rem;font-size:.62rem}
.nav:not(.solid) .btn-line{--fg:#fdfbf6;--bd:rgba(253,251,246,.46)}
.nav:not(.solid) .btn-line:hover{color:var(--burgundy)}
.nav:not(.solid) .btn-line::after{background:#fdfbf6}
@media(min-width:1000px){.nav-links{display:flex}}

/* --- hero ----------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(76px + 2.5rem) 0 clamp(3rem,7vw,5.5rem);
  overflow:hidden;background:var(--burgundy-deep);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media img,.hero-media video{
  width:100%;height:100%;object-fit:cover;
  animation:drift 30s var(--ease) infinite alternate;
}
.hero-media video[data-hero]{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);
}
.hero-media video[data-hero].ready{opacity:1}
@keyframes drift{from{transform:scale(1.05)}to{transform:scale(1.13) translate3d(-1.2%,-1%,0)}}

/* --------------------------------------------------------------------------
   Hero draw-on
   The whole site is watercolour and ink, and then the hero was a photograph.
   This is the join: the room arrives as a painting of itself in exactly the
   language the menu illustrations are in, and reality follows in behind it.

   FIRST ATTEMPT, AND WHY IT WAS WRONG
   A previous version derived the drawing from the hero photo with edge
   detection and colour flattening, so the two registered to the pixel and the
   dissolve was a true resolve. Technically neat, and completely off-brand: a
   filtered photograph is not the same medium as the watercolours on /menu,
   and it read as a filter, because it was one. Scrapped.

   The painting is now generated to match the dish illustrations, which means
   it does NOT register with the photo. So the transition is a WIPE, not a
   dissolve: one soft-edged pass travels across the frame, the painting
   appearing ahead of it and the footage arriving behind it. Two images never
   overlap, so registration stops mattering and the brand wins.

   Sits inside .hero-media so .hero-media::after, the burgundy scrim the white
   headline needs, stays on top of it throughout. The copy and both buttons
   are live from the first frame; this costs the visitor one image.
   -------------------------------------------------------------------------- */
.hero-draw{
  position:absolute;inset:0;pointer-events:none;
  background:#fdfbf6;                 /* the paper the room is painted on */
  /* the erase pass · left goes transparent first, so reality arrives from the
     same side the paint arrived from and it reads as one brush travelling */
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,0) 0 30%,#000 58%);
          mask-image:linear-gradient(100deg,rgba(0,0,0,0) 0 30%,#000 58%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;  mask-position:100% 0;
  transition:-webkit-mask-position 1.35s cubic-bezier(.42,.05,.25,1),
                     mask-position 1.35s cubic-bezier(.42,.05,.25,1);
  /* deliberately NO z-index · the scrim is painted after this in DOM order
     and must stay above it, or the headline goes white-on-white */
}
.hero-draw picture{position:absolute;inset:0}
.hero-draw img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:none;                     /* the drift belongs to the photograph */
  /* the paint pass · same direction, same soft edge */
  -webkit-mask-image:linear-gradient(100deg,#000 0 30%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(100deg,#000 0 30%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;  mask-position:100% 0;
  transition:-webkit-mask-position 1.3s cubic-bezier(.32,.5,.2,1),
                     mask-position 1.3s cubic-bezier(.32,.5,.2,1);
}
.hero-draw.paint img{-webkit-mask-position:0 0;mask-position:0 0}
.hero-draw.resolve{-webkit-mask-position:0 0;mask-position:0 0}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(40,14,23,.92) 0%,rgba(40,14,23,.55) 38%,rgba(40,14,23,.3) 68%,rgba(40,14,23,.5) 100%),
    linear-gradient(to right,rgba(40,14,23,.72) 0%,rgba(40,14,23,.3) 38%,transparent 62%),
    radial-gradient(120% 85% at 10% 100%,rgba(61,20,33,.62),transparent 64%);
  transition:opacity .9s var(--ease);
}
/* The scrim eases off a little while the painting is up so the pigment reads,
   but only a little: the painting is bright and the headline is white, and at
   the 0.56 this ran at first the type nearly vanished. Restored mid-wipe. */
.hero-media.drawing::after{opacity:.8}
.hero-in{position:relative;z-index:2;color:var(--linen);width:var(--shell);margin-inline:auto}
.hero-in .kicker{color:var(--gold-lite)}
.hero-in .display{color:var(--linen);margin:1.3rem 0 0;max-width:15ch}
.hero-in .display em{color:var(--gold-lite)}
.hero-sub{
  margin-top:1.3rem;max-width:46ch;color:rgba(253,251,246,.82);
  font-size:clamp(1rem,.96rem + .42vw,1.2rem);line-height:1.6;
}
.hero-cta{margin-top:2rem}
.hero .btn{--bg:var(--gold);--fg:#3d1421;--bd:var(--gold)}
.hero .btn-line{--bg:transparent;--fg:#fdfbf6;--bd:rgba(253,251,246,.44)}
.hero .btn-line:hover{color:var(--burgundy-deep)}
.hero .btn-line::after{background:#fdfbf6}
.hero-foot{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(253,251,246,.2);
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(253,251,246,.66);
}
.scroll-cue{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  width:1px;height:50px;background:linear-gradient(to bottom,transparent,rgba(253,251,246,.55));
}
.scroll-cue::after{
  content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;
  background:var(--gold-lite);animation:cue 2.8s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* --- the plate · their Instagram post, as a component ---------------------- */
.plates{display:grid;gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:720px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.plates.four{grid-template-columns:repeat(4,1fr)}}

.plate{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;text-decoration:none;text-align:center;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2vw,1.6rem) clamp(1.2rem,2vw,1.6rem);
  background:var(--linen);border:1px solid var(--line-soft);cursor:pointer;
  transition:transform .6s var(--slow),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
/* a gold rule draws across the top on hover so it reads as a control */
.plate::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--slow);
}
.plate:hover,.plate:focus-visible{
  transform:translateY(-6px);border-color:rgba(176,141,79,.55);
  box-shadow:0 18px 40px -26px rgba(61,20,33,.5);
}
.plate:hover::before,.plate:focus-visible::before{transform:scaleX(1)}
.plate:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.plate:active{transform:translateY(-2px)}

/* the explicit affordance · this is the bit that says "there is a page here" */
.plate-go{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy);
  transition:color .4s var(--ease),gap .4s var(--slow);
}
.plate-go svg{width:15px;height:8px;overflow:visible;transition:transform .5s var(--slow)}
.plate-go svg path{stroke:currentColor;stroke-width:1.2;fill:none}
.plate:hover .plate-go{color:var(--gold);gap:.85rem}
.plate:hover .plate-go svg{transform:translateX(4px)}
.plate:hover .plate-art img{transform:scale(1.045) rotate(-.6deg)}
.plate.tint-blush{background:var(--blush)}
.plate.tint-egg{background:var(--egg)}
.plate.tint-sage{background:var(--sage)}
.plate.tint-ivory{background:var(--ivory)}
.plate-art{
  margin:clamp(1rem,2.4vw,1.7rem) auto 0;width:100%;max-width:300px;aspect-ratio:4/5;
  display:grid;place-items:center;
}
.plate-art img{
  width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 56%,transparent 94%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 56%,transparent 94%);
  transition:transform .8s var(--slow);
}
.plate .cap-ital{margin-top:auto;padding-top:1.1rem}
.plate .plate-meta{margin-bottom:0}
.plate-meta{
  margin-top:.8rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* --- editorial split ------------------------------------------------------ */
.split{display:grid;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
@media(min-width:940px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.12fr .88fr}
  .split.wide-right{grid-template-columns:.88fr 1.12fr}
}
.split>div>*+*{margin-top:1.3rem}

.numlist{margin-top:2.2rem;border-top:1px solid var(--line)}
.numlist li{
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start;
  padding:1.4rem 0;border-bottom:1px solid var(--line);
}
.numlist i{
  font-style:normal;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.4rem;line-height:1;color:var(--gold);min-width:1.5rem;
}
.numlist h4{font-size:1rem;font-weight:400;color:var(--burgundy);letter-spacing:.01em}
.numlist p{margin-top:.4rem;font-size:.94rem;color:var(--ink-soft)}

/* --- frames --------------------------------------------------------------- */
.frame{position:relative;overflow:hidden;background:var(--blush)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.r-45{aspect-ratio:4/5}
.r-11{aspect-ratio:1}
.r-32{aspect-ratio:3/2}
.r-169{aspect-ratio:16/9}
.cap{margin-top:.9rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* the arch is lifted off their circular windows and shopfront doorways */
.arch{border-radius:50% 50% 3px 3px / 40% 40% 3px 3px}
.round{border-radius:50%}

/* --- full bleed ----------------------------------------------------------- */
.bleed{position:relative;min-height:64svh;display:grid;place-items:center;overflow:hidden;background:var(--burgundy-deep)}
.bleed-media{position:absolute;inset:0}
.bleed-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.bleed-media::after{content:"";position:absolute;inset:0;background:rgba(40,14,23,.6)}
.bleed-in{position:relative;z-index:2;text-align:center;color:var(--linen);width:var(--narrow);padding:4.5rem 0}
.bleed-in .h2{color:var(--linen)}
.bleed-in .h2 em{color:var(--gold-lite)}

/* --- mosaic --------------------------------------------------------------- */
.mosaic{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);grid-template-columns:repeat(2,1fr)}
.mosaic.two{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .mosaic:not(.two){grid-template-columns:repeat(12,1fr)}
  .m-a{grid-column:span 5}
  .m-b{grid-column:span 7}
  .m-c{grid-column:span 4}
  .m-d{grid-column:span 4}
  .m-e{grid-column:span 4}
}

/* --- booking -------------------------------------------------------------- */
.book-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:start}
/* the card holds a fixed-width third-party widget, so it takes the larger
   share of the row. at 1220 that is roughly 700px of usable card, which
   clears OpenTable's 554px `wide` bar without any scaling at all. */
@media(min-width:980px){.book-grid{grid-template-columns:.68fr 1.32fr}}
.book-card{
  background:var(--linen);color:var(--ink);padding:clamp(1.4rem,2.6vw,2.1rem);
  border:1px solid rgba(176,141,79,.4);
}
.on-dark .book-card{background:#fdfbf6;color:#4f403a;--burgundy:#5e2130;--muted:#93857b;--line:rgba(94,33,48,.16)}
.on-dark .book-card .h3{color:#5e2130}
.book-note{margin-top:.85rem;font-size:.78rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   OpenTable widget
   The canvas widget renders at a FIXED pixel width per theme: `wide` needs
   554px, `standard` needs about 170px. It is not fluid and it will not
   reflow. Two earlier attempts got this wrong, first by picking the theme
   from window.innerWidth (the widget lives in a card, not the viewport) and
   then by picking it from the host width without doing anything about the
   gap. The result was a 170px vertical form floating in a 535px box.

   So: the stage is always laid out at the theme's true width and scaled to
   fit the host, and the host height is set from the scaled height in JS so
   there is never dead space under it.
   -------------------------------------------------------------------------- */
#ot-widget{
  margin-top:1.4rem;position:relative;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  min-height:118px;
}
#ot-stage{width:554px;transform-origin:0 0;will-change:transform}
#ot-widget[data-theme="standard"]{min-height:288px}
#ot-widget[data-theme="standard"] #ot-stage{width:100%;max-width:230px;margin:0 auto;transform:none}
#ot-widget iframe{display:block;width:100%;border:0}
#ot-widget[data-state="loading"]::after{
  content:"Loading the booking diary";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:#fff;
}
.book-or{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  margin-top:1.4rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.book-or::before,.book-or::after{content:"";height:1px;background:var(--line)}
.book-list{margin-top:1.8rem}
.book-list li{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding:1rem 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.95rem;
}
.book-list li::before{content:"";width:5px;height:5px;margin-top:.62rem;transform:rotate(45deg);background:var(--gold)}

/* --- form ----------------------------------------------------------------- */
.book-card label{display:block;margin-top:1.2rem}
.book-card input{
  width:100%;margin-top:.5rem;padding:.9rem 1.05rem;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink);
  font:inherit;font-size:.98rem;border-radius:0;
  transition:border-color .3s var(--ease);
}
.book-card input:focus{outline:none;border-color:var(--gold)}
.book-card .btn{margin-top:1.5rem}
.book-card #list-msg:empty{display:none}

/* --- terms ---------------------------------------------------------------- */
.mini{border-top:1px solid var(--line);padding-top:1.5rem}
.mini ul{margin-top:1rem;display:grid;gap:.5rem}
.mini li{font-size:.79rem;color:var(--muted);padding-left:1.1rem;position:relative}
.mini li::before{content:"";position:absolute;left:0;top:.62rem;width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.7}

/* --- hours table ---------------------------------------------------------- */
.hours{margin-top:1.6rem;border-top:1px solid var(--line)}
.hours div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;
}
.hours dt,.hours span:first-child{color:var(--ink-soft)}
.hours span:last-child{color:var(--burgundy);font-variant-numeric:tabular-nums}

/* --- sticky book dock (phones) -------------------------------------------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;
  background:color-mix(in srgb,var(--burgundy-deep) 95%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid rgba(247,239,230,.18);
  transform:translateY(110%);transition:transform .5s var(--slow);
}
.dock.in{transform:none}
.dock p{color:var(--linen);font-size:.76rem;line-height:1.3;flex:1}
.dock p b{display:block;font-weight:400;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite)}
.dock .btn{--bg:var(--gold);--fg:#3d1421;--bd:var(--gold);padding:.8rem 1.3rem;font-size:.62rem;flex:0 0 auto}
@media(min-width:820px){.dock{display:none}}

/* --- footer --------------------------------------------------------------- */
.foot{background:var(--burgundy-deep);color:#f7efe6;padding:clamp(3.5rem,6vw,5rem) 0 2.4rem}
.foot-grid{display:grid;gap:2.4rem}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot .brand{color:#f7efe6}
.foot h4{font-size:.62rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lite);margin-bottom:1rem}
.foot a{display:block;padding:.26rem 0;text-decoration:none;color:rgba(247,239,230,.76);font-size:.93rem;transition:color .3s}
.foot a:hover{color:#fdfbf6}
.foot .small{color:rgba(247,239,230,.58)}
.foot-base{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(247,239,230,.16);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-size:.7rem;letter-spacing:.12em;color:rgba(247,239,230,.48);
}

/* --- placeholder fallback ------------------------------------------------- */
.frame.is-missing,.hero-media.is-missing,.plate-art.is-missing{
  background:
    repeating-linear-gradient(135deg,rgba(176,141,79,.09) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,var(--blush),var(--linen) 65%);
  box-shadow:inset 0 0 0 1px rgba(176,141,79,.3);
  display:grid;place-items:center;
}
.frame.is-missing img,.hero-media.is-missing img,.hero-media.is-missing video,.plate-art.is-missing img{display:none}
.frame.is-missing::before,.hero-media.is-missing::before,.plate-art.is-missing::before{
  content:attr(data-slot);padding:0 1.6rem;text-align:center;position:relative;z-index:1;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.hero-media.is-missing{background:linear-gradient(150deg,#5e2130,#3d1421 62%)}
.hero-media.is-missing::before{color:rgba(253,251,246,.44)}

/* --- motion --------------------------------------------------------------- */
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--slow)}
.in .line>span,.line.in>span{transform:none}

.rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--slow)}
.rise.in{opacity:1;transform:none}

/* Clip the media child, never the observed element. A self-clipped box stops
   reporting an IntersectionObserver intersection in Chromium. */
.wipe>img,.wipe>video{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--slow)}
.wipe.in>img,.wipe.in>video{clip-path:inset(0 0 0 0)}
.wipe.is-missing{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--slow)}
.wipe.is-missing.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rise,.line>span,.wipe>img,.wipe>video{opacity:1;transform:none;clip-path:none}
  .veil{display:none}
}

/* --- small screens -------------------------------------------------------- */
@media(max-width:640px){
  .nav-in{height:62px}
  .brand b{font-size:.92rem;letter-spacing:.3em}
  .brand span{display:none}
  .nav .btn{padding:.68rem 1rem;font-size:.58rem;letter-spacing:.16em}
  .hero{padding-top:calc(62px + 1.6rem)}
  .hero-in .kicker{letter-spacing:.22em;font-size:.6rem}
  .hero-in .kicker::before{width:18px}
  .hero-in .display{max-width:none}
  .hero-cta .btn{flex:1 1 100%}
  .hero-foot{gap:.4rem 1.3rem;font-size:.6rem}
  .scroll-cue{display:none}
  .numlist li{gap:.9rem}
  .plate-art{max-width:230px}
}

/* --- full-bleed video band ------------------------------------------------
   Same contract as the hero: the still is the poster, the loop fades in only
   once it can play, so a blocked or missing file costs nothing. */
.bleed-media video[data-hero]{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.bleed-media video[data-hero].ready{opacity:1}
.bleed.has-video .bleed-media img{transform:none}

/* --- static plate · same object, nothing behind it ------------------------- */
.plate.static{cursor:default}
.plate.static:hover,.plate.static:focus-visible{transform:none;box-shadow:none;border-color:var(--line-soft)}
.plate.static::before{display:none}
.plate.static:hover .plate-art img{transform:none}

/* --- decorative watercolour motif ----------------------------------------- */
.motif{margin:clamp(1.8rem,4vw,2.6rem) auto 0;max-width:520px}
.motif img{
  width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 52%,transparent 92%);
  mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 52%,transparent 92%);
}

/* ==========================================================================
   THE MENU
   The real Haute Dolci menu, all 145 items across the eight printed sections.

   THE ILLUSTRATIONS ARE THEIRS. Every dish picture is HD's own watercolour,
   lifted out of the menu PDF as a transparent cutout, so it sits directly on
   the cream ground with no blend mode and no mask. Earlier versions of this
   page used illustrations we generated ourselves and it never quite matched
   the printed menu; this does, because it IS the printed menu.

   The list is dense on purpose. 145 items will not fit in the big two-column
   card layout this page used when it carried 30, so the art is small and set
   beside the dish rather than above a group, and the row is the unit.
   ========================================================================== */

/* The menu opens on a cream hero, not the dark one the homepage uses, so the
   nav has to carry its dark treatment from the very first frame or the whole
   bar is white-on-cream and simply invisible. */
body[data-campaign="menu"] .nav{
  background:rgba(246,240,229,.92);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
body[data-campaign="menu"] .nav .brand{color:var(--burgundy)}
body[data-campaign="menu"] .nav-links a{color:var(--ink)}
body[data-campaign="menu"] .nav .btn-line{color:var(--burgundy);border-color:var(--burgundy)}

/* --- the page opener, with the Matilda Cake --------------------------------- */
.ms-hero{
  padding:calc(76px + clamp(2.6rem,6vw,4.4rem)) 0 clamp(2.4rem,5vw,3.6rem);
  background:var(--ivory);
}
.ms-hero-in{display:grid;gap:clamp(2rem,4vw,3.4rem)}
@media(min-width:900px){.ms-hero-in{grid-template-columns:1fr 1fr;align-items:center}}
.ms-hero .lede{margin-top:1.3rem}

/* their most famous plate, given the room it earns */
.ms-star{margin:0;display:grid;gap:clamp(1.2rem,2.5vw,2rem);align-items:center}
@media(min-width:620px){.ms-star{grid-template-columns:1fr 1fr}}
.ms-star-art{position:relative}
.ms-star-art img,.ms-star-vid{width:100%;height:auto;display:block}
.ms-star-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .9s var(--ease);
}
.ms-star-vid.ready{opacity:1}
.ms-star-art:has(.ms-star-vid.ready) img{opacity:0;transition:opacity .9s var(--ease)}
.ms-star figcaption .label{color:var(--gold)}
.ms-star .h2{margin-top:.5rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.ms-star-price{font-size:.5em;color:var(--ink-soft)}
.ms-star-one{
  margin-top:.5rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.15rem;color:var(--gold);
}
.ms-star-desc{margin-top:.7rem;color:var(--ink-soft);font-size:.95rem;max-width:44ch}
.ms-star .btn{margin-top:1.4rem}

/* --- filters ---------------------------------------------------------------- */
.see-tools{margin-top:clamp(1.6rem,3vw,2.2rem)}
.see-filter{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  padding:.55rem 1.05rem;border:1px solid var(--line);background:none;cursor:pointer;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  transition:border-color .3s,color .3s,background .3s;
}
.chip:hover{border-color:var(--gold);color:var(--burgundy)}
.chip.on{background:var(--burgundy);border-color:var(--burgundy);color:var(--linen)}
.see-result{margin-top:.8rem;min-height:1.2em}

/* --- the section rail · eight tabs ------------------------------------------ */
.see-rail{
  position:sticky;top:0;z-index:60;background:rgba(246,240,229,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.see-rail ul{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  /* the tab strip is the one thing on this page allowed to scroll sideways.
     min-width:0 lets the flex container actually shrink to its parent so the
     overflow stays inside the strip instead of widening the document. */
  min-width:0;max-width:100%;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.see-rail ul::-webkit-scrollbar{display:none}
@media(max-width:820px){
  /* edge to edge on a phone, so eight tabs have somewhere to go */
  .see-rail .shell{width:100%}
  .see-rail ul{padding-inline:1.3rem}
}
.see-rail a{
  display:flex;align-items:baseline;gap:.45rem;white-space:nowrap;
  padding:1rem .95rem;text-decoration:none;color:var(--muted);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:color .3s,border-color .3s;
}
.see-rail a i{font-style:normal;font-size:.56rem;opacity:.6}
.see-rail a:hover{color:var(--burgundy)}
.see-rail a.on{color:var(--burgundy);border-bottom-color:var(--gold)}

/* --- numbered section head, straight off the printed menu ------------------- */
.ms{padding:clamp(3.2rem,7vw,5.4rem) 0;scroll-margin-top:60px}
/* One ground for every section, deliberately. The dish loops are
   composited onto --ivory by scripts/reground.sh, so an alternating
   blush band would frame every loop on it in a faint rectangle. */
.ms-head{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:clamp(.8rem,2vw,1.4rem);
}
.ms-num{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--gold);line-height:1;
}
.ms-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem);color:var(--burgundy);
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
}
.ms-rule{height:1px;background:var(--line)}
.ms-sub{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem);color:var(--ink-soft);text-align:right;
}
.ms-intro{
  margin-top:1rem;max-width:62ch;color:var(--ink-soft);font-size:.95rem;line-height:1.7;
}
.ms-quote{
  margin-top:clamp(2rem,4vw,3rem);text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:var(--gold);
}

/* --- a group ---------------------------------------------------------------- */
.mg{margin-top:clamp(2rem,4vw,3rem)}
.mg-label{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.2rem;
}
.mg-list{display:grid;gap:clamp(1.1rem,2.2vw,1.8rem)}
@media(min-width:760px){.mg-list{grid-template-columns:1fr 1fr;gap:clamp(1.4rem,2.6vw,2.4rem)}}
/* the footnote the printed menu sets under a run of dishes, e.g. that every
   speciality coffee is available iced. Deliberately quiet: it is a condition
   on the group above it, not another item. */
.mg-note{
  margin-top:1.1rem;font-size:.82rem;line-height:1.6;color:var(--ink-soft);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
}

/* --- one dish --------------------------------------------------------------- */
.mi{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,1.8vw,1.3rem);
  align-items:start;padding-bottom:clamp(1.1rem,2.2vw,1.6rem);
  border-bottom:1px solid var(--line-soft);
}
.mi.no-art{grid-template-columns:1fr}
.mi-art{
  position:relative;display:block;
  /* small on purpose · 145 items do not fit at the old card size */
  width:clamp(84px,13vw,132px);
}
.mi-art img{width:100%;height:auto;display:block}
.mi-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;pointer-events:none;transition:opacity .85s var(--ease);
  /* No blend mode. scripts/reground.sh masks each loop with its still's own
     alpha and composites it onto this exact cream, so the loop already
     matches the paper it sits on. Blending on top of that would only
     darken it. */
}
.mi-vid.ready{opacity:1}
/* the still steps aside once its loop is actually playing, so the two never
   double-print through each other's transparency */
.mi-art:has(.mi-vid.ready) img{opacity:0;transition:opacity .85s var(--ease)}

.mi-body{display:block;min-width:0}
.mi-top{display:flex;align-items:baseline;gap:.4rem;width:100%}
.mi-name{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
  color:var(--burgundy);font-weight:400;line-height:1.2;
}
.mi-dots{
  flex:1 1 auto;min-width:1.2rem;align-self:flex-end;margin-bottom:.28em;height:1px;
  background:linear-gradient(90deg,var(--line) 50%,transparent 50%) repeat-x;
  background-size:5px 1px;opacity:0;transition:opacity .35s var(--ease);
}
.mi:hover .mi-dots{opacity:1}
.mi-price{font-size:.92rem;color:var(--ink-soft);flex:0 0 auto}
.mi-one{
  display:block;margin-top:.3rem;font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-size:.98rem;color:var(--gold);
}
.mi-desc{display:block;margin-top:.4rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.mi-add{
  display:block;margin-top:.45rem;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

/* dietary marks, printed exactly as the menu prints them */
.v{
  display:inline-grid;place-items:center;min-width:1.15em;height:1.15em;padding:0 .2em;
  margin-left:.4em;border:1px solid currentColor;font-family:'Jost',sans-serif;
  font-size:.5rem;letter-spacing:.04em;vertical-align:.14em;
}
.v-v{color:#5f8a4e}
.v-ve{color:#3f7a46}
.v-gf{color:#a8823f}
.mi-tags{display:inline-flex;gap:.35rem;flex:0 0 auto;transform:translateY(-.1em)}
.tag{
  display:inline-block;padding:.2rem .45rem;border:1px solid var(--gold);
  font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;
}

/* --- choose your sauce / topping -------------------------------------------- */
.mi-opts{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.mi-opts.wide .sauces-l{flex:0 0 100%;margin:0 0 .1rem}
.sauces-l{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-right:.2rem;
}
.sauce{
  padding:.3rem .6rem;border:1px solid var(--line);background:none;cursor:pointer;
  font-size:.66rem;color:var(--ink-soft);transition:border-color .3s,color .3s,background .3s;
}
.sauce:hover{border-color:var(--gold);color:var(--burgundy)}
.sauce.on{background:var(--burgundy);border-color:var(--burgundy);color:var(--linen)}

.ms-closer{
  text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.3rem,1.1rem + 1vw,2rem);color:var(--burgundy);line-height:1.35;
}
.ms-closer em{color:var(--gold)}

/* nothing matched the current filter */
.mg.is-empty,.ms.is-empty{display:none}

/* --- lightbox ------------------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(40,14,23,.94);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb.in{opacity:1}
.lb[hidden]{display:none}
.lb-box{
  display:grid;width:min(980px,100%);max-height:88svh;background:var(--linen);
  overflow:hidden;margin:0;
}
@media(min-width:820px){.lb-box{grid-template-columns:1fr 1fr}}
.lb-media{background:var(--blush);display:grid;place-items:center;padding:clamp(1rem,3vw,2rem)}
.lb-media img{width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%,#000 56%,transparent 94%);
  mask-image:radial-gradient(ellipse 82% 82% at 50% 50%,#000 56%,transparent 94%);}
.lb-cap{padding:clamp(1.5rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.lb-cap .h3{margin:.6rem 0 0}
.lb-one{
  margin-top:.5rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.08rem;color:var(--gold);
}
.lb-one:empty{display:none}
.lb-price{margin-top:.8rem;color:var(--ink-soft);font-size:1.15rem;font-family:'Cormorant Garamond',Georgia,serif}
.lb-price:empty{display:none}
.lb-desc{margin-top:1rem;color:var(--ink-soft);line-height:1.6}
.lb-al{margin-top:1.1rem;font-size:.76rem;color:var(--muted)}
.lb-cap .btn{margin-top:1.7rem;align-self:flex-start}
.lb-x,.lb-nav{
  position:absolute;background:none;border:0;color:#fdfbf6;cursor:pointer;
  width:52px;height:52px;display:grid;place-items:center;opacity:.72;transition:opacity .3s;
}
.lb-x:hover,.lb-nav:hover{opacity:1}
.lb-x{top:.6rem;right:.8rem;font-size:2rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:.4rem}
.lb-next{right:.4rem}
.lb-nav::before{content:"";width:16px;height:16px;border-top:1px solid currentColor;border-right:1px solid currentColor}
.lb-prev::before{transform:rotate(-135deg)}
.lb-next::before{transform:rotate(45deg)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:819px){
  .lb-nav{top:auto;bottom:.4rem;transform:none}
}
body.lb-open{overflow:hidden}

@media(max-width:640px){
  .see-rail a{padding:.9rem .7rem;font-size:.6rem;letter-spacing:.16em}
  .ms{scroll-margin-top:52px}
  .ms-head{grid-template-columns:auto 1fr}
  .ms-rule{display:none}
  .mg-art{max-width:300px;margin-inline:auto}
}