/* Generated from the Event Room design system; see eventGuide.css/eventsSite.css. */
:root{--barH:74px;
  --plaster:#f3f2ed; --ground-2:#e9e7e0; --paper:#fbfaf6;
  --ink:#14384f; --band:#0c2536; --band-ink:#edefea; --band-soft:#9fb4c2;
  --brass:#a97c3f; --brass-ink:#855f26; --muted:#5a7386; --hairline:#d9d6cd;
  --photo-gold:#d4a462;
  --r-img:16px;   /* every photograph in the flow carries the same corner */
  --display:'Bodoni Moda','Bookman Old Style',Georgia,serif;
  --body:'Jost',Futura,ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
/* A <picture> is a wrapper, never a box: as a flex/grid child it computes its
   own (content) size and the img inside sizing against it goes circular —
   which is how the gallery slats and the Romana band rendered EMPTY. contents
   dissolves it so the img is the real child everywhere. */
picture{display:contents}
/* No embed gets to side-scroll the page: the OpenTable widget shipped 876px
   wide on a 390px phone. clip, not hidden — hidden creates a scroll container
   and quietly breaks position:sticky. */
html,body{overflow-x:clip}
/* The root paints the band navy: iPhone Safari fills its under-toolbar strip
   and both overscroll zones from the ROOT background, and white there reads
   as a broken page under a dark hero. Body's plaster still covers the page. */
html{background:var(--band)}
body{margin:0;background:var(--plaster);color:var(--ink);
  font-family:var(--body);font-weight:300;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brass-ink)}
p{margin:0}

/* ---- chrome: the deep-blue band, as it is the Room's --------------------- */
.bar{position:sticky;top:0;z-index:30;background:var(--band);color:var(--band-ink);
  display:flex;align-items:center;gap:2rem;padding:0 max(calc((100% - 92rem)/2), 2.5rem);height:var(--barH)}
.mark{font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;
  color:var(--band-ink);line-height:1.15;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px}
.brand{height:60px;width:auto;display:block;padding:5px 6px;box-sizing:border-box}
@media (max-width:520px){.brand{height:48px;padding:4px 4px}}
.rail{display:flex;gap:1.65rem;margin-left:auto;margin-right:1.2rem;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--band-soft)}
.rail a{padding:.85rem 0;border-bottom:2px solid transparent}
.rail a.on{color:var(--band-ink);border-bottom-color:var(--brass)}
/* A group in the rail: closed until it is asked for. The label is a button —
   hover-to-open opens by accident on a desk and not at all on a trackpad-less
   phone — and the panel is absolutely positioned, so opening one moves nothing
   in the band. */
.rail-grp{position:relative;display:flex;align-items:center}
.rail-grp.on > .rail-grp-btn{color:var(--band-ink);border-bottom-color:var(--brass)}
.rail-grp-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;cursor:pointer;padding:.85rem 0;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:.15em}
.rail-grp-btn:hover,.rail-grp-btn[aria-expanded="true"]{color:var(--band-ink)}
.rail-caret{font-size:.7em;opacity:.7;margin-left:.15em;display:inline-block}
.rail-grp-btn[aria-expanded="true"] .rail-caret{transform:rotate(180deg)}
.rail-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:12rem;
  display:flex;flex-direction:column;padding:.5rem 0;background:var(--band);
  border:1px solid rgb(159 180 194 / .18);border-radius:10px;box-shadow:0 18px 40px rgb(0 0 0 / .35);z-index:40}
.rail-menu[hidden]{display:none}
.rail-menu a{padding:.55rem 1.1rem;border-bottom:none;white-space:nowrap}
.rail-menu a:hover,.rail-menu a.on{color:var(--band-ink);background:rgb(159 180 194 / .12)}
/* The overlay's accordion row: the same control, wearing the overlay's type. */
.ovl-grp{font-family:var(--display);font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.35;
  color:var(--band-soft);display:flex;align-items:baseline;gap:1.1rem;width:100%;
  padding:.35rem 0;border:0;border-bottom:1px solid rgb(159 180 194 / .14);
  background:none;cursor:pointer;text-align:left;letter-spacing:inherit}
.ovl-grp.on,.ovl-grp:hover,.ovl-grp[aria-expanded="true"]{color:var(--band-ink)}
.ovl-chev{margin-left:auto;font-family:var(--body);font-size:.55em;opacity:.7;
  display:inline-block;align-self:center}
.ovl-grp[aria-expanded="true"] .ovl-chev{transform:rotate(180deg)}
.ovl-subs{display:flex;flex-direction:column}
.ovl-subs[hidden]{display:none}
.ovl-nav a.ovl-sub{font-size:clamp(1.3rem,4.5vw,1.8rem);padding-left:2.4rem;border-bottom-color:rgb(159 180 194 / .08)}
@media (prefers-reduced-motion: no-preference){
  .rail-caret,.ovl-chev{transition:transform .2s ease}
  /* The rail panel keeps its centring translate — animating plain translateY
     would drop it and the dropdown would jump half its width. */
  .rail-menu:not([hidden]){animation:navMenuIn .2s ease both}
  .ovl-subs:not([hidden]) > a{animation:navGrpIn .24s ease both}
  .ovl-subs:not([hidden]) > a:nth-child(2){animation-delay:.05s}
  .ovl-subs:not([hidden]) > a:nth-child(3){animation-delay:.1s}
  .ovl-subs:not([hidden]) > a:nth-child(n+4){animation-delay:.14s}
}
@keyframes navGrpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes navMenuIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}
  to{opacity:1;transform:translateX(-50%)}}
.bar-side{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.bar .cta{padding:.8rem 1.5rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
/* The band carries BOTH house actions on a desk: Reserve in brass, Order
   beside it as the same pill in outline — the pair the phone's overlay foot
   has always shown. Order lived ONLY in that overlay, and the overlay opens
   only from the hamburger, which stops at 900px — so above 900px Order had no
   way onto the screen at all and Reserve stood alone.
   The transparent border on the brass pill keeps the two the same height; the
   ghost's border colour has to be re-stated at .bar's specificity, or
   .bar .cta (0,2,0) beats .cta-band-ghost (0,1,0) and blanks it out. */
.bar .cta{border:1px solid transparent}
.bar .cta-band-ghost{border-color:rgb(237 239 234 / .4)}
.bar .cta-band-ghost:hover{border-color:var(--band-ink)}
/* Just above the rail's breakpoint the band is short of room for two pills
   AND six nav links, so everything in it gives a little padding back. */
@media (min-width:901px) and (max-width:1180px){
  .bar{gap:1.1rem}
  .rail{gap:1.15rem;margin-right:.8rem}
  .bar .cta{padding:.8rem 1.05rem}
  .bar-side{gap:.3rem}
}
.tel-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--band-soft);border-radius:50%}
.tel-ic:hover{color:var(--band-ink)}

/* ---- type ---------------------------------------------------------------- */
/* .eyebrow is worn by paragraphs AND by h2 elements — a menu course and a wine
   category are real section headings, whatever they look like. Every property
   a browser would otherwise give an h2 (font-size, font-weight, margin) is
   therefore stated here outright, so the two tags render byte-identically. Do
   not move any of the three into a "p.eyebrow" rule. */
.eyebrow{font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--brass-ink);margin:0}
.band .eyebrow,.hero .eyebrow{color:var(--brass)}
.hero .eyebrow{color:var(--photo-gold);text-shadow:0 1px 8px rgb(0 0 0 / .6)}
.h{font-family:var(--display);font-variation-settings:'opsz' 16;font-weight:500;
  color:var(--ink);font-size:2.5rem;line-height:1.08;letter-spacing:.01em;margin:0;
  text-wrap:balance}
.h-sm{font-size:1.75rem}
.cta-ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.cta-ghost:hover{border-color:var(--brass)}
/* The package menus in print: each menu a block under a hairline, courses as
   name + options run together the way a printed menu reads. */
.ev-pkg{border-top:1px solid var(--hairline);padding:2rem 0 1.4rem}
.ev-pkg:first-child{border-top:0;padding-top:0}
.ev-pkg-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ev-pkg-price{font-family:var(--display);font-size:1.375rem;color:var(--brass-ink);margin:0}
.ev-pkg-price span{font-family:var(--body);font-size:.8125rem;color:var(--muted)}
.ev-pkg-blurb{margin:.4rem 0 0;color:var(--muted);font-size:.9375rem;line-height:1.7;max-width:38rem}
.ev-pkg-when{margin:.35rem 0 0;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink)}
.ev-pkg-incl{margin:1.1rem 0 0;font-size:.875rem;color:var(--muted);font-style:italic}
.ev-course{margin-top:1.1rem}
.ev-course-name{font-weight:500;letter-spacing:.02em;margin:0 0 .3rem}
.ev-course-name span{font-weight:400;color:var(--muted);font-size:.9em}
.ev-course-options{margin:0;color:var(--muted);line-height:1.75;font-size:.9375rem}
.ev-course-options em{font-style:normal;color:var(--brass-ink);font-size:.85em}
.ev-addons{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:1.2rem 0 0;padding:0}
.ev-addons span{border:1px solid var(--hairline);border-radius:999px;padding:.35rem .8rem;font-size:.875rem;background:var(--paper)}
.ev-addons em{font-style:normal;color:var(--brass-ink)}
.band .h{color:var(--band-ink)}
.display{font-family:var(--display);font-variation-settings:'opsz' 16;font-weight:500}
.lede{color:var(--muted);font-size:1.0625rem;line-height:1.72;max-width:34rem;margin:0}
.band .lede{color:var(--band-soft)}
.quiet{color:var(--muted)}

/* ---- ground -------------------------------------------------------------- */
.wrap{max-width:1080px;margin-inline:auto;padding-inline:3.5rem}
.section{padding-block:6.5rem}
.section-sm{padding-block:4.25rem}
.band{background:var(--band);color:var(--band-ink)}
.ground-2{background:var(--ground-2)}

/* ---- the brass pill ------------------------------------------------------ */
.cta{display:inline-block;font-family:var(--body);font-weight:500;letter-spacing:.04em;
  background:var(--brass);color:#fff;padding:.9rem 2.4rem;border-radius:999px;
  font-size:.95rem;white-space:nowrap}
.cta:hover{color:#fff;filter:brightness(1.08)}
.cta-ghost{background:transparent;border:1px solid rgb(255 255 255 / .55);color:#fff}
.link{font-family:var(--body);font-weight:500;letter-spacing:.06em;font-size:.78rem;
  text-transform:uppercase;color:var(--brass-ink);border-bottom:1px solid var(--brass);
  padding-bottom:2px}
.band .link{color:var(--photo-gold);border-bottom-color:var(--photo-gold)}

/* ---- the signature: an arch. A niche in the plaster wall, holding a room. - */
.arch{background:var(--paper);border:1px solid var(--hairline);
  border-radius:999px 999px 8px 8px;padding:2.5rem 1.5rem 1.75rem;text-align:center;
  box-shadow:0 1px 2px rgb(20 56 79 / .04),0 12px 34px rgb(20 56 79 / .06)}
.arch-name{font-family:var(--display);font-variation-settings:'opsz' 16;font-weight:500;
  font-size:1.375rem;color:var(--ink)}
.arch-fig{font-family:var(--display);font-variation-settings:'opsz' 16;font-weight:600;
  font-size:2.5rem;line-height:1;color:var(--brass);margin-top:.75rem}
.arch-fig-label{font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;
  font-size:.6rem;color:var(--muted)}
/* the brass keystone - the room's motif in miniature */
.keystone{width:56px;height:28px;margin-inline:auto;border:1.5px solid var(--brass);
  border-bottom:none;border-radius:999px 999px 0 0}
.hero .keystone{border-color:var(--photo-gold)}

/* ---- paper cards --------------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--hairline);border-radius:12px;
  padding:18px 20px}
.kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-ink);font-weight:600;margin-bottom:10px}

/* ---- a menu row ---------------------------------------------------------- */
.menu-row{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:.85rem;border-bottom:1px solid rgb(159 180 194 / .25)}
/* Menu type is tunable per field from the Website screen (theme.type):
   face, size scale, weight and case ride in --mn-* variables; every layout's
   size multiplies the same scale so a "larger" name is larger everywhere. */
.menu-name{font-family:var(--mn-name-font,var(--display));font-variation-settings:'opsz' 16;
  font-weight:var(--mn-name-weight,500);font-size:calc(1.25rem*var(--mn-name,1)*var(--mn-zoom,1));line-height:1.2;
  text-transform:var(--mn-name-case,none);font-variant-caps:var(--mn-name-caps,normal)}
.menu-desc{color:color-mix(in srgb,var(--muted) 65%,var(--ink));font-family:var(--mn-desc-font,var(--body));
  font-size:calc(.9375rem*var(--mn-desc,1)*var(--mn-zoom,1));font-weight:var(--mn-desc-weight,400);line-height:1.6;
  margin-top:.2rem;max-width:calc(30rem*var(--mn-zoom,1));text-transform:var(--mn-desc-case,none);font-variant-caps:var(--mn-desc-caps,normal)}
.menu-price{font-family:var(--mn-price-font,var(--display));font-variation-settings:'opsz' 16;
  color:var(--brass);white-space:nowrap;font-size:calc(1.0625rem*var(--mn-price,1)*var(--mn-zoom,1));
  font-weight:var(--mn-price-weight,400)}
/* The guest's own reading aids on the menu page (pages.mjs menus()): a type
   size step, multiplied into every menu size above so the operator's tuning
   and the guest's choice compose, and a language that shows one of each
   .l-en/.l-es pair. Only the menu page's head script ever sets these. */
html[data-mn-zoom="2"]{--mn-zoom:1.18}
html[data-mn-zoom="3"]{--mn-zoom:1.36}
html[data-mn-lang="es"] .l-en{display:none}
html:not([data-mn-lang="es"]) .l-es{display:none}
section[data-edit^="menu:group"] .eyebrow,#wines .eyebrow{font-family:var(--mn-head-font,var(--body));
  font-size:calc(.72rem*var(--mn-head,1)*var(--mn-zoom,1));font-weight:var(--mn-head-weight,500);
  text-transform:var(--mn-head-case,uppercase);letter-spacing:var(--mn-head-track,.22em);
  font-variant-caps:var(--mn-head-caps,normal)}

/* ---- a full-bleed photograph, scrimmed to the mural blue ----------------- */
.hero{position:relative;display:grid;overflow:hidden;background:var(--ground-2)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(12 37 54 / .38),rgb(12 37 54 / .64))}
.hero-foot{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgb(12 37 54 / .72) 0%,rgb(12 37 54 / .12) 30%,transparent 55%),
  linear-gradient(to top,rgb(12 37 54 / .95) 0%,rgb(12 37 54 / .7) 30%,transparent 68%)}
.hero-body{position:relative;z-index:1;color:#fff}
.hero .h{color:#fff}
.hero .lede{color:rgb(255 255 255 / .88)}

/* ---- the menu, in two columns ------------------------------------------- */
/* A wider measure than .wrap's 1080: two columns of dish + description need
   it, and a menu is the one page where the type is the layout. */
.wrap-wide{max-width:1240px;margin-inline:auto;padding-inline:3.5rem}
/* Multi-column, not a two-cell grid: a plate is about three rows tall, so
   hand-balanced columns leave a void under whichever side is shorter. Let the
   browser balance them, and each column then reads DOWN, as a menu should. */
.cols{column-count:2;column-gap:3.5rem}
/* A dish never fractures across columns — name at the foot of one, its
   description atop the next. Both column dresses, all engine spellings. */
/* The round printer, bottom right: on the brochure it prints, on the events
   pages it opens the brochure. One rule for both so they cannot drift. Screen
   only — it is chrome, not content. */
.site-fab{position:fixed;z-index:40;right:max(1.25rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--brass-ink);color:#fff;box-shadow:0 6px 18px rgb(12 37 54 / .28);
  transition:transform .15s ease,background-color .15s ease}
.site-fab:hover{background:var(--band);color:#fff;transform:translateY(-2px)}
.site-fab:focus-visible{outline:3px solid var(--band);outline-offset:3px}
.site-fab svg{width:26px;height:26px;display:block}
@media (prefers-reduced-motion:reduce){.site-fab{transition:none}.site-fab:hover{transform:none}}
@media print{.site-fab{display:none !important}}
.cols > *,.cols-3 > *{break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid}
/* A photograph sitting in the run of dishes, taking one cell. */
/* margin-inline:0 because a <figure> brings 40px of UA margin each side,
   which sat every photographed dish visibly inset from the text rows. */
.plate{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-img);
  overflow:hidden;margin-block:.85rem 1.25rem;margin-inline:0}
.plate img{width:100%;height:200px;object-fit:cover;display:block}
.plate figcaption{padding:.85rem 1.1rem 1rem}
/* A dish's own photo: 4:3 rather than the 200px strip, because most of
   Toast's plate photos are portrait and a strip showed a sliver of them.
   Capped so a wide desktop column does not grow a poster: a phone gets the
   full 4:3, a desktop column about 2:1. */
.plate img.plate-dish{height:auto;aspect-ratio:4/3;max-height:260px;object-fit:cover}
/* A section's header photograph: the full width of the section, under its
   heading and above the columns. Short, so it introduces the section rather
   than slicing the page. */
.sec-banner{margin:0 0 1.5rem;border-radius:var(--r-img);overflow:hidden;border:1px solid var(--hairline);background:var(--paper)}
.sec-banner img{width:100%;height:clamp(130px,17vw,210px);object-fit:cover;display:block}
.plate .menu-name{font-size:calc(1.125rem*var(--mn-name,1)*var(--mn-zoom,1))}
/* wine tasting notes: the row opens */
/* The wine spread: two columns of SECTIONS — whites left, reds right —
   each reading straight down. */
.wine-spread{display:grid;gap:0 4.5rem}
@media (min-width:900px){.wine-spread{grid-template-columns:1fr 1fr;align-items:start}}
.wine-list{display:block}
.wine-one{max-width:46rem;margin:0 auto}
.wg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.25rem;margin-top:.85rem}
.wg-card{border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:var(--paper)}
.wg-img{height:185px;display:flex;align-items:center;justify-content:center;background:var(--ground-2)}
.wg-img img{max-height:165px;max-width:78%;object-fit:contain;filter:drop-shadow(0 2px 5px rgb(0 0 0/.18))}
.wg-body{padding:.85rem 1rem 1rem}
.ws-row{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.ws-img{width:64px;height:104px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 5px rgb(0 0 0/.18))}
.ws-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.w-lead{display:flex;gap:.85rem;align-items:center;min-width:0}
.w-thumb{width:34px;height:52px;object-fit:cover;border-radius:5px;flex:none;
  box-shadow:0 1px 3px rgb(0 0 0/.18);background:var(--ground-2)}
.wnote-body{padding-bottom:1rem}
.w-pairs{margin:.4rem 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink)}
.wnote{border-bottom:1px solid var(--hairline)}
.wnote .menu-row{border-bottom:none;cursor:pointer;list-style:none}
.wnote summary::-webkit-details-marker{display:none}
.wtag{font-family:var(--body);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);margin-left:.5rem;vertical-align:middle;white-space:nowrap}
.wtag::after{content:"\2039";display:inline-block;margin-left:.3rem;transform:rotate(-90deg);transition:transform .2s ease}
.wnote[open] .wtag{color:var(--muted)}
.wnote[open] .wtag::after{transform:rotate(90deg)}
.wnote-p{color:var(--muted);font-size:.9rem;line-height:1.75;max-width:38rem;
  padding:0 0 1rem;margin:0}
/* ---- the hero reel & the arch wall --------------------------------------- */
/* The reel fills what the bar leaves: it sits in flow BELOW the opaque bar,
   so a plain 100svh hung its bottom 74px (dots, the button's air) under the
   fold on every desktop screen. */
.hw{position:relative;min-height:calc(100vh - var(--barH));min-height:calc(100svh - var(--barH));overflow:hidden;background:var(--plaster)}
/* The wall as a band of its own: same construction, in the page's flow. */
.wall-band{min-height:auto;padding:3.5rem 0 4rem}
.wall-band .hw-slide{position:relative;inset:auto;opacity:1;pointer-events:auto}
.hw-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hw-slide.on{opacity:1;pointer-events:auto}
.hw-video-poster+video{opacity:0;transition:opacity .3s ease}
.hw-video-poster+video.media-playing{opacity:1}
.hw-media-feedback{position:absolute;z-index:6;bottom:3.5rem;left:1rem;right:1rem;text-align:center;color:#fff;font:12px/1.5 system-ui;pointer-events:none}
.hw-media-feedback button{pointer-events:auto;margin-left:.7rem;color:inherit;background:rgb(0 0 0 / .6);border:1px solid currentColor;border-radius:6px;padding:.5rem .75rem}
.hw-media-feedback:has([data-media-retry]:not([hidden])){background:rgb(0 0 0 / .55);padding:.35rem;border-radius:6px}

/* A gallery slide: one shot holding several photographs in a fixed collage.
   The grid is the slide's whole canvas; the copy rides the usual scrim. */
.hw-gal{display:grid;align-content:end}
.hw-gal .hw-galgrid{position:absolute;inset:0;display:grid;gap:6px;background:#14100a}
.hw-gal .hw-gcell{position:relative;overflow:hidden;background:#1d1710}
.hw-gal .hw-gcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw-gal .hw-gcell video{position:absolute;left:50%;top:50%;width:auto;height:auto;
  min-width:100.5%;min-height:100.5%;max-width:none;transform:translate(-50%,-50%)}
.lay-mosaic .hw-galgrid{grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-template-areas:"a b c" "a d e"}
.lay-triptych .hw-galgrid{grid-template-columns:repeat(3,1fr);grid-template-areas:"a b c"}
.lay-filmstrip .hw-galgrid{grid-template-columns:repeat(4,1fr);grid-template-areas:"a b c d"}
.lay-banded .hw-galgrid{grid-template-columns:repeat(3,1fr);grid-template-rows:1.35fr 1fr;
  grid-template-areas:"a a a" "b c d"}
.hw-gal .hw-gcell:nth-child(1){grid-area:a}
.hw-gal .hw-gcell:nth-child(2){grid-area:b}
.hw-gal .hw-gcell:nth-child(3){grid-area:c}
.hw-gal .hw-gcell:nth-child(4){grid-area:d}
.hw-gal .hw-gcell:nth-child(5){grid-area:e}
@media (max-width:760px){
  .lay-mosaic .hw-galgrid{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr 1fr;
    grid-template-areas:"a a" "b c" "d e"}
  .lay-triptych .hw-galgrid{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr;
    grid-template-areas:"a a" "b c"}
  .lay-filmstrip .hw-galgrid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
    grid-template-areas:"a b" "c d"}
  .lay-banded .hw-galgrid{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr 1fr;
    grid-template-areas:"a a" "b c" "d d"}
}
/* The photo slide's scrim is a full wash; over a collage that murders five
   photographs to light one headline. Bottom-weighted and lighter here. */
.hw-gal .hero-scrim{background:linear-gradient(rgba(10,14,24,.12),rgba(10,14,24,.34) 55%,rgba(10,14,24,.66))}
/* Arrivals. Cascade deals the tiles left to right; bloom breathes them in
   together from slightly small; fade is the collage as one. Off-slide, the
   tiles rest in their hidden pose so re-entry replays the arrival. */
.hw-gal .hw-gcell{opacity:0;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.ganim-cascade .hw-gcell{transform:translateY(26px)}
.ganim-bloom .hw-gcell{transform:scale(.94)}
.hw-gal.on .hw-gcell{opacity:1;transform:none}
.ganim-cascade.on .hw-gcell:nth-child(1){transition-delay:.08s}
.ganim-cascade.on .hw-gcell:nth-child(2){transition-delay:.19s}
.ganim-cascade.on .hw-gcell:nth-child(3){transition-delay:.3s}
.ganim-cascade.on .hw-gcell:nth-child(4){transition-delay:.41s}
.ganim-cascade.on .hw-gcell:nth-child(5){transition-delay:.52s}
.ganim-bloom.on .hw-gcell{transition-duration:.9s;transition-delay:.12s}
@media (prefers-reduced-motion: reduce){
  .hw-gal .hw-gcell,.ganim-cascade .hw-gcell,.ganim-bloom .hw-gcell{transform:none;transition:opacity .4s ease}
  .ganim-cascade.on .hw-gcell{transition-delay:0s}
}
/* slide one: the dining room's own wall. Not flat beige — plaster: two
   turbulence grains (fine tooth + broad mottle) over the light gradients. */
.hw-wall{display:grid;align-content:center;justify-items:center;
  background:
    radial-gradient(140% 90% at 50% -10%, rgb(255 252 244/.9), transparent 60%),
    radial-gradient(120% 120% at 50% 115%, rgb(122 103 74/.18), transparent 55%),
    linear-gradient(#f2ead9, #ece2cd)}
.hw-wall::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/img/plaster-1600.jpg) center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.9}
.hw-wall::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/img/plaster-1600.jpg) center/cover no-repeat;
  mix-blend-mode:soft-light;opacity:.6;transform:scale(-1,1)}
.hw-inner{width:100%;padding-block:5rem 3.6rem;text-align:center;position:relative;z-index:1}
/* One knob scales the whole wall: every width derives from --wallH, so an
   arch never changes proportion — the wall scales, or a column leaves. */
.hw-arches{--wallH:min(calc((94vw - 160px) / 2.09), 52vh, 580px);--gap:14px;
  display:flex;justify-content:center;align-items:flex-end;gap:var(--gap);
  position:relative;width:fit-content;margin:0 auto}
/* the bottom shelf with its dark wood lip */
.hw-arches::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-10px;height:10px;
  background:linear-gradient(#5a4634,#3e2f22);border-radius:2px;
  box-shadow:0 10px 18px rgb(90 70 47/.35)}
/* the sign: heavier brass, each letter backlit on its own */
.hw-sign{position:absolute;right:calc(100% + clamp(.4rem,1.4vw,1.4rem));top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--wallH) * .028);
  font-family:var(--display);font-weight:600;font-size:calc(var(--wallH) * .088);
  color:#a3835a;z-index:1;line-height:1;
  padding:0 calc(var(--wallH) * .02)}
/* channel letters: extruded brass falling away to the lower right, the
   mount shadow beneath, and the cool backlight from the wall behind */
.hw-sign i{font-style:normal;position:relative;
  text-shadow:
    .018em .018em 0 #7d6440,
    .036em .036em 0 #6b5535,
    .054em .054em 0 #59462c,
    .09em .1em .12em rgb(48 36 18/.5),
    0 0 .05em rgb(255 250 235/.4)}
.hw-sign i::before{content:"";position:absolute;inset:-38% -75%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgb(150 200 230/.5), rgb(150 200 230/0) 68%)}
.hw-tall{height:var(--wallH);width:calc(var(--wallH) * .44)}
.hw-stacks{position:relative;display:flex;gap:var(--gap);height:var(--wallH);align-items:flex-end}
/* the SECOND ledge: the top register rests on its own shelf */
.hw-stacks::before{content:"";position:absolute;left:calc(-1 * var(--gap) / 2);right:calc(-1 * var(--gap) / 2);
  top:calc(50% - 4px);height:8px;z-index:1;
  background:linear-gradient(#5a4634,#3e2f22);border-radius:2px;
  box-shadow:0 8px 14px rgb(90 70 47/.3)}
.hw-stack{display:flex;flex-direction:column;gap:var(--gap);height:var(--wallH)}
.hw-stack .hw-niche{flex:1 1 0;width:calc(var(--wallH) * .33)}
a.hw-door{text-decoration:none;cursor:pointer;display:block}
a.hw-door img{transition:filter .35s ease}
a.hw-door:hover img{filter:brightness(1.1)}
.hw-tag{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  font-family:var(--body);font-style:normal;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:#f3e9d2;
  background:rgba(20,14,6,.62);border:1px solid rgba(214,178,110,.5);
  border-radius:999px;padding:.28rem .7rem;backdrop-filter:blur(3px)}
a.hw-door:hover .hw-tag{background:rgba(20,14,6,.8);border-color:rgba(214,178,110,.9)}
@media (max-width:760px){.hw-tag{font-size:.5625rem;padding:.2rem .5rem}}
.hw-niche{position:relative;border-radius:999px 999px 0 0;overflow:hidden;background:#e6dcc6;
  box-shadow:inset 0 6px 18px rgb(90 70 47/.5), inset 0 -4px 10px rgb(90 70 47/.25),
    0 1px 0 rgb(255 255 255/.7)}
/* The jamb is the plaster left showing between the niche and the picture, and
   the picture's own frame is what keeps it: the frame carries the inset (and
   the parallax splice on it), and the frame — not the niche — clips the
   photograph. A niche zoomed in Adjust therefore crops its picture instead of
   spreading over the jambs and the crown, which is what it used to do once the
   zoom pushed the image past a 6% inset the niche's overflow no longer held. */
.hw-reveal{position:absolute;top:4%;height:96%;
  left:calc(6% - var(--vx, 0) * 3%);right:calc(6% + var(--vx, 0) * 3%);
  overflow:hidden;border-radius:999px 999px 0 0}
.hw-niche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:999px 999px 0 0;transform-origin:center}
/* the puck light at each crown */
.hw-niche::after{content:"";position:absolute;inset:0;border-radius:999px 999px 0 0;
  background:
    radial-gradient(52% 16% at 50% 0%, rgb(255 244 214/.28), rgb(255 244 214/0) 72%),
    linear-gradient(rgb(40 28 16/0) 70%, rgb(40 28 16/.26)),
    radial-gradient(115% 115% at 50% 46%, rgb(24 17 8/0) 52%, rgb(24 17 8/var(--vig, 0))),
    linear-gradient(rgb(20 14 6/var(--dim, 0)), rgb(20 14 6/var(--dim, 0))),
    linear-gradient(rgb(236 226 205/var(--wash, 0)), rgb(236 226 205/var(--wash, 0)));
  /* --vx (-1 left … 1 right of wall center, set by the page) angles the
     niche's apparent depth: the recess shades away from the viewer. */
  box-shadow:inset calc(var(--vx, 0) * 14px) 0 18px -8px rgb(40 28 16/.4);
  pointer-events:none}
/* The viewer stands at the wall's center, fixed: jambs deepen toward the
   edges, symmetric — the far column's walls read widest. Custom props
   inherit, so a stack hands its angle to both its niches. */
.hw-tall{--vx:-1}
.hw-stack:nth-of-type(1){--vx:-.62}
.hw-stack:nth-of-type(2){--vx:-.3}
.hw-stack:nth-of-type(3){--vx:.05}
.hw-stack:nth-of-type(4){--vx:.5}
.hw-stack:nth-of-type(5){--vx:1}
/* columns leave as the room narrows; below that the whole wall scales.
   The tall arch and the sign stay to the last. */
@media (max-width:1240px){.hw-stack:nth-of-type(5){display:none}
  .hw-arches{--wallH:min(calc((94vw - 150px) / 1.76), 52vh, 580px)}}
@media (max-width:1040px){.hw-stack:nth-of-type(4){display:none}
  .hw-arches{--wallH:min(calc((94vw - 135px) / 1.43), 52vh, 580px)}}
@media (max-width:850px){.hw-stack:nth-of-type(3){display:none}
  .hw-arches{--wallH:min(calc((94vw - 120px) / 1.10), 44vh, 480px)}}
@media (max-width:560px){.hw-arches{--gap:10px;--wallH:min(calc((94vw - 100px) / 1.10), 42vh)}}
.hw-copy{max-width:44rem;margin:3rem auto 0;padding:0 1.4rem}
/* the wall is a LIGHT slide: it writes in ink, not in the hero's white */
.hw-wall .eyebrow{color:var(--brass-ink);text-shadow:none}
.hw-wall .h{color:var(--ink)}
.hw-wall .lede{color:var(--muted);text-shadow:none}
/* the photo slides + their animations */
.hw-photo{display:grid;align-content:end}
.hw-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Video covers by GEOMETRY, not object-fit: WebKit drops object-fit on a
   <video> inside a composited (opacity-transitioning) layer — iPhones drew
   the film letterboxed in the middle of the slide. Auto dimensions with
   min-width/height cover the box at the video's own ratio everywhere. */
.hw-photo>video{position:absolute;left:50%;top:50%;width:auto;height:auto;
  min-width:100.5%;min-height:100.5%;max-width:none;transform:translate(-50%,-50%)}
.hw-photo-copy{position:relative;text-align:center;padding-block:0 clamp(4.75rem, 8vh, 7rem)}
/* The words' own arrival, independent of the pictures'. */
.canim-rise.on .hw-photo-copy{animation:hwRise .9s .18s ease-out both}
.canim-fade.on .hw-photo-copy{animation:hwFadeIn 1.1s .18s ease both}
@keyframes hwFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .canim-rise.on .hw-photo-copy,.canim-fade.on .hw-photo-copy{animation:none}}
/* A second, quieter button beside the brass one. */
.cta-dark{background:transparent;border:1px solid rgb(255 255 255/.6);color:#fff}
.cta-dark:hover{border-color:#fff;background:rgb(255 255 255/.08)}
.hw-dots{position:absolute;left:0;right:0;bottom:1.15rem;z-index:5}
@media (min-width:2200px){
  .hw-photo-copy .h,.hw-copy .h{font-size:3.9rem!important}
  .hw-photo-copy .lede,.hw-copy .lede{font-size:1.3rem!important;max-width:44rem}
  .hw-photo-copy .eyebrow,.hw-copy .eyebrow{font-size:.95rem}
  .ch-dots button{width:9px;height:9px}
}
@media (prefers-reduced-motion: no-preference){
  .anim-drift.on>img,.anim-drift.on>video{animation:hwDrift 10s ease-out forwards}
  .anim-pan.on>img,.anim-pan.on>video{animation:hwPan 11s ease-out forwards}
  .anim-rise.on .hw-photo-copy{animation:hwRise 1s ease-out both}
}
@keyframes hwDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes hwPan{from{transform:scale(1.12) translateX(2.5%)}to{transform:scale(1.06) translateX(-2.5%)}}
@keyframes hwRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* ---- the events pages ---------------------------------------------------- */
@view-transition { navigation: auto }
.ev-prose{color:var(--muted);font-size:1rem;line-height:1.85;margin:1.1rem 0 0;max-width:46rem}
.ev-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem}
.ev-rooms-sm{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.ev-card{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;
  aspect-ratio:4/3;background:var(--band)}
.ev-card-big{aspect-ratio:3/2}
.ev-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease}
.ev-card:hover img{transform:scale(1.04)}
.ev-card-body{position:absolute;left:0;right:0;bottom:0;padding:1.9rem 1.4rem 1.1rem;
  background:linear-gradient(to top,rgb(12 37 54/.88),rgb(12 37 54/.35) 65%,transparent);
  display:flex;flex-direction:column;gap:.2rem}
.ev-card-name{font-family:var(--display);font-size:1.35rem;color:var(--band-ink)}
.ev-card-sub{font-size:.75rem;letter-spacing:.06em;color:var(--band-soft)}
.ev-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.ev-facts span{padding:.5rem 1rem;border:1px solid var(--hairline);border-radius:999px;
  background:var(--paper);font-size:.78rem;letter-spacing:.08em;color:var(--muted)}
.ev-faq{border-bottom:1px solid var(--hairline);padding:.85rem 0}
.ev-faq summary{cursor:pointer;font-family:var(--display);font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline}
.ev-faq summary::-webkit-details-marker{display:none}
.ev-faq summary::after{content:"+";color:var(--brass-ink);font-family:var(--body)}
.ev-faq[open] summary::after{content:"\2212"}
.ev-faq p{color:var(--muted);font-size:.9375rem;line-height:1.8;margin:.7rem 0 0;max-width:42rem}
/* The crawlable half of a room shows the SAME photographs as the deck, in the
   same shape: a masonry of equal columns, each picture at its own aspect, never
   cropped. CSS columns rather than a grid — the static page has no JS to balance
   with, and the browser's own column balancing is close enough. */
.ev-gallery{columns:1;column-gap:20px}
@media(min-width:700px){.ev-gallery{columns:2;column-gap:24px}}
@media(min-width:1180px){.ev-gallery{columns:3;column-gap:28px}}
.ev-gallery img{display:block;width:100%;height:auto;margin:0 0 20px;break-inside:avoid;border-radius:var(--r-img)}
@media(min-width:700px){.ev-gallery img{margin-bottom:24px}}
@media(min-width:1180px){.ev-gallery img{margin-bottom:28px}}
.ev-layouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;margin-top:1.6rem}
.ev-layout{margin:0}
.ev-layout img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-img)}
.ev-layout figcaption{margin-top:.5rem;font-size:.78rem;letter-spacing:.08em;color:var(--muted);text-align:center}
.ev-layout-tables{display:block;margin-top:.2rem;letter-spacing:.02em;font-size:.74rem;line-height:1.45}
.ev-pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:1.1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ev-pager a:hover{color:var(--brass-ink)}
.ev-pager-all{color:var(--brass-ink)}
/* the allergy lens */
.al-chip{font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem 1.05rem;border-radius:999px;border:1px solid var(--hairline);
  background:var(--paper);color:var(--muted);cursor:pointer}
.al-chip.on{background:var(--band);border-color:var(--band);color:var(--band-ink)}
.al-hit{opacity:.38}
.al-tag{font-family:var(--body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#b0574a;margin-left:.45rem;vertical-align:middle;white-space:nowrap}
.al-tag-ask{color:var(--brass-ink)}
/* osteria: the photo-card menu section */
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.dish{margin:0;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-img);
  overflow:hidden;display:flex;flex-direction:column}
.dish img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.dish figcaption{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.dish .menu-name{font-size:calc(1.05rem*var(--mn-name,1)*var(--mn-zoom,1))}
.dish .menu-desc{font-size:calc(.8125rem*var(--mn-zoom,1))}
.dish .menu-price{margin-top:auto;padding-top:.35rem}
/* trattoria: three columns of pure type on wide screens */
.sp-list{margin-top:2.5rem;column-count:2;column-gap:4.5rem}
.sp-group{break-inside:avoid;margin-bottom:2.25rem}
.sp-group .eyebrow{margin-bottom:.35rem}
@media (max-width:820px){.sp-list{column-count:1}}
.cols-3{column-count:3;column-gap:3rem}
@media (max-width:1100px){.cols-3{column-count:2}}
@media (max-width:700px){.cols-3{column-count:1}}

/* ---- the section rail ---------------------------------------------------- */
/* The sliding active pill is 21st's scroll-spy pattern (@ddoemonn/scroll-spy),
   in brass on the band rather than its stock black on grey. */
.rail-spy{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
/* The rail wears the same glass as the scrolled bar — two different
   materials stacked at the top read as a seam. */
.mn-rail{background:rgb(12 37 54 / .94);backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 1px 0 rgb(0 0 0 / .25)}
/* Jumps land clear of the bar (56px) + the pinned rail (~48px). */
.rv[id]{scroll-margin-top:calc(var(--barH) + 62px)}
.mn-head{padding:2.75rem 0 0}
.mn-head h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.mn-pills{margin-top:1.1rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.mn-tabs{margin-top:1.4rem}
.al-disclaimer{margin:.9rem auto 0;max-width:34rem;font-size:.78rem;line-height:1.55;color:var(--brass-ink);
  padding:.55rem .9rem;border:1px solid color-mix(in srgb,var(--brass) 35%,transparent);border-radius:8px;background:var(--paper)}
.mn-pill .lbl-m{display:none}
/* The reading aids: a small round button in the bottom-right corner (where
   the events pages keep their printer), quieter than that one — paper, not
   brass — because it is a convenience, not a call to action. It opens a
   card above itself with the type sizes and the language. */
.mn-fab{position:fixed;z-index:40;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.mn-fab-btn{width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.05rem;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);
  box-shadow:0 4px 14px rgb(12 37 54 / .16);transition:transform .15s ease,box-shadow .15s ease}
.mn-fab-btn small{font-size:.75em}
.mn-fab-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgb(12 37 54 / .22)}
.mn-fab-btn[aria-expanded="true"]{border-color:var(--brass)}
.mn-fab-btn:focus-visible,.mn-seg button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.mn-panel{background:var(--paper);border:1px solid var(--hairline);border-radius:12px;padding:.8rem .9rem;
  box-shadow:0 10px 30px rgb(12 37 54 / .18);display:grid;gap:.7rem;min-width:13.5rem}
.mn-panel[hidden]{display:none}
.mn-row{display:grid;gap:.35rem}
.mn-k{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mn-seg{display:flex;border:1px solid var(--hairline);border-radius:8px;overflow:hidden}
.mn-seg button{flex:1;font:inherit;font-size:.8125rem;color:var(--muted);background:none;border:0;cursor:pointer;
  padding:.45rem .6rem;min-height:38px;display:flex;align-items:center;justify-content:center}
.mn-seg button + button{border-left:1px solid var(--hairline)}
.mn-seg button[data-z]{font-family:var(--display);line-height:1}
.mn-seg button[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--brass) 14%,transparent)}
@media (prefers-reduced-motion:reduce){.mn-fab-btn{transition:none}.mn-fab-btn:hover{transform:none}}
@media print{.mn-fab{display:none !important}}
.mn-pill{padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--hairline);background:var(--paper);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;font-family:inherit}
.mn-pill:hover,.mn-pill.on{border-color:var(--brass);color:var(--ink)}
/* A phone gets the head in one breath: a smaller title, the actions as one
   slim row that scrolls if it must, the first dish a thumb's reach away. */
@media (max-width:640px){
  .mn-head{padding-top:1.3rem}
  .mn-head h1{font-size:1.45rem}
  .mn-pills{margin-top:.7rem;gap:.4rem;flex-wrap:nowrap;justify-content:safe center;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .mn-pills::-webkit-scrollbar{display:none}
  .mn-pill{padding:.38rem .75rem;font-size:.66rem;letter-spacing:.08em;white-space:nowrap;flex:0 0 auto}
  .mn-pill .lbl-d{display:none}.mn-pill .lbl-m{display:inline}
  .mn-tabs{margin-top:.8rem}
  .mn-menu .mn-rail{margin-top:.9rem!important}
  .mn-menu section[data-edit^="menu:group"]:first-of-type{margin-top:2rem!important}
  #al-fold{margin-top:.9rem!important}
}
/* Osteria in menu order: a text dish spans the card grid as a reading row. */
.dishes-flow .menu-row{grid-column:1/-1;max-width:44rem}
.rail-spy::-webkit-scrollbar{display:none}
.rail-spy a{padding:.72rem 1.1rem;border-radius:999px;white-space:nowrap;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--band-soft)}
.rail-spy a.on{background:var(--brass);color:#fff}


/* ---- photographs -------------------------------------------------------- */
/* One corner radius for every image in the flow. Page-top heroes stay
   edge-to-edge: a rounded corner needs a margin, and insetting the opening
   would cost the photograph its stage. */
.ph-img,.shot{border-radius:var(--r-img);display:block;object-fit:cover;width:100%}

/* ---- the gallery -------------------------------------------------------- */
/* Filter chips + lightbox after @moumensoliman/gallery-grid-block-shadcnui;
   the follow-cursor over a tile is @educalvolpz/cursor-follow. */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-img)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal .tall{grid-row:span 2}
/* The cursor carries the word, so the photograph needs no caption plate. */
.cursor-pill{position:absolute;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--brass);color:#fff;border-radius:999px;padding:.45rem 1rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 6px 20px rgb(12 37 54 / .35);pointer-events:none}

/* ---- a field ------------------------------------------------------------ */
/* @ddoemonn/floating-label: the label rises into a slot RESERVED above the
   field, so nothing below it moves when it floats. */
.field{display:block;margin-bottom:1.5rem}
.field-label{display:block;height:1.1rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.field-box{width:100%;background:var(--paper);border:1px solid var(--hairline);
  border-radius:10px;padding:.85rem 1rem;font-family:var(--body);font-size:1rem;
  color:var(--ink);font-weight:300}
.field.on .field-label{color:var(--brass-ink)}
.field.on .field-box{border-color:var(--brass);box-shadow:0 0 0 3px rgb(169 124 63 / .14)}
.field-hint{display:flex;justify-content:space-between;gap:1rem;margin-top:.4rem;
  font-size:.78rem;color:var(--muted)}

/* ---- links -------------------------------------------------------------- */
/* @soralabs/text-underline: the rule slides through on hover rather than
   appearing. Shown here mid-slide on the .is-hover example. */
.uline{position:relative;padding-bottom:2px;color:var(--brass-ink)}
.uline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brass);transition:width .28s ease}
.uline:hover::after,.uline.is-hover::after{width:100%}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px){
  :root{--barH:56px}
  .wrap,.wrap-wide{padding-inline:1.15rem}
  /* The phone keeps its one navigation: the hero leads with Reserve and the
     overlay's foot carries Reserve + Order, so the band shows neither pill. */
  .bar-reserve,.bar-order{display:none}
  .section{padding-block:3.5rem}
  .section-sm{padding-block:2.5rem}
  .cols{column-count:1}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col,.grid-3{grid-template-columns:minmax(0,1fr) !important;gap:2rem !important}
  .bar{padding:0 1.15rem}
  .rail{display:none}
  .bar .cta{margin-left:auto;padding:.72rem 1.2rem}
  .h{font-size:1.95rem}
  .hero .h{font-size:2rem}
}
/* The hamburger exists only below the rail's breakpoint. Its first version
   was un-scoped and declared after the desktop media query — equal
   specificity, later wins — so desktop showed BOTH navigations at once. */
.ham{display:none}
@media (max-width: 900px){
  .ham{margin-left:auto;background:none;border:0;cursor:pointer;display:flex;
    flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    padding:0 10px;align-items:stretch}
  .ham span{height:1.5px;background:var(--band-ink);display:block;transition:transform .2s,opacity .2s}
  .ham[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .ham[aria-expanded="true"] span:nth-child(2){opacity:0}
  .ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---- focus + motion ------------------------------------------------------ */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--band);
  color:var(--band-ink);padding:.8rem 1.4rem}
.skip:focus{left:0}
/* Reveal on scroll — one well-behaved entrance, off entirely for reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .rv.in{opacity:1;transform:none}
}
/* The bar gains a hairline + blur once the page has scrolled under it. */
.bar{transition:box-shadow .2s ease}
.bar.scrolled{box-shadow:0 1px 0 rgb(0 0 0 / .25);backdrop-filter:saturate(1.2) blur(6px);
  background:rgb(12 37 54 / .94)}


/* ---- the lightbox -------------------------------------------------------- */
main figure img,main .w-thumb,main .wg-img img,main .ws-img,main .gal img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:80;background:rgb(12 37 54 / .96);display:flex;
  align-items:center;justify-content:center;padding:3.5rem 1rem 4.5rem}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;border-radius:8px}
.lb-cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:var(--band-soft);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.lb-x,.lb-p,.lb-n{position:absolute;background:none;border:0;color:var(--band-ink);
  cursor:pointer;padding:.8rem;line-height:1;min-width:44px;min-height:44px}
.lb-x{top:.8rem;right:.8rem;font-size:1.6rem}
.lb-p{left:.4rem;top:50%;transform:translateY(-50%);font-size:2rem}
.lb-n{right:.4rem;top:50%;transform:translateY(-50%);font-size:2rem}



/* ---- the overlay menu ---------------------------------------------------- */
/* 21st's Curved Menu (@ishamsu) in the Room's language: the whole band,
   numbered entries arriving in a stagger, the house facts at the foot. */
.ovl{position:fixed;inset:0;z-index:90;background:var(--band);color:var(--band-ink);
  display:flex;flex-direction:column;justify-content:center;padding:2rem clamp(1.5rem,8vw,5rem);
  opacity:0;transition:opacity .24s ease}
.ovl.in{opacity:1}
.ovl[hidden]{display:none}
.ovl-x{position:absolute;top:.7rem;right:.7rem;background:none;border:0;cursor:pointer;
  color:var(--band-soft);font-size:2rem;line-height:1;width:48px;height:48px}
.ovl-x:hover{color:var(--band-ink)}
.ovl-nav{display:flex;flex-direction:column;gap:.2rem}
.ovl-nav a{font-family:var(--display);font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.35;
  color:var(--band-soft);display:flex;align-items:baseline;gap:1.1rem;padding:.35rem 0;
  border-bottom:1px solid rgb(159 180 194 / .14)}
.ovl-nav a.on,.ovl-nav a:hover{color:var(--band-ink)}
.ovl-n{font-family:var(--body);font-size:.72rem;letter-spacing:.18em;color:var(--brass);
  font-weight:500;min-width:2ch}
@media (prefers-reduced-motion: no-preference){
  .ovl-nav > a,.ovl-nav > .ovl-grp{opacity:0;transform:translateY(16px)}
  .ovl.in .ovl-nav > a,.ovl.in .ovl-nav > .ovl-grp{opacity:1;transform:none;
    transition:opacity .4s ease var(--d,0ms),transform .4s ease var(--d,0ms)}
}
.ovl-foot{margin-top:2.5rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.ovl-tel{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--band-soft)}
.cta-band-ghost{background:transparent;border:1px solid rgb(237 239 234/.4);color:var(--band-ink)}
.cta-band-ghost:hover{border-color:var(--band-ink)}
.ovl-tel-ic{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(237 239 234/.4);
  border-radius:999px;color:var(--band-ink)}
.ovl-tel-ic:hover{border-color:var(--band-ink)}
/* The wine page's pairing chips: wrapped on a desk, one swipeable row on a
   phone — fourteen wrapped chips were most of the first screen. */
.wp-chips{display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:640px){
  .wp-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:-1.25rem;padding-inline:1.25rem;padding-bottom:.35rem}
  .wp-chips a{white-space:nowrap;flex:0 0 auto}
}
.ovl-tel:hover{color:var(--band-ink)}

/* ---- the hero carousel --------------------------------------------------- */
/* 21st's Hero Carousel (@crafterui): a filmstrip along the hero's foot, the
   focused card unfurled taller, and the whole background re-grading to the
   focused photograph. Crossfade is two stacked layers swapping opacity. */
.hc-bg{position:absolute;inset:0}
.hc-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease}
.hc-bg img.on{opacity:1}
.hc-strip{position:relative;z-index:1;display:flex;gap:.6rem;align-items:flex-end;
  padding:0 clamp(1.15rem,4vw,3.5rem) 1.4rem;max-width:1080px;margin-inline:auto;width:100%}
.hc-strip button{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:10px;flex:1;height:64px;opacity:.66;outline-offset:2px;
  transition:height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,flex .4s cubic-bezier(.4,0,.2,1)}
.hc-strip button.on{height:96px;flex:1.7;opacity:1;box-shadow:0 8px 26px rgb(0 0 0 / .35)}
.hc-strip img{width:100%;height:100%;object-fit:cover;display:block}
.hc-strip span{position:absolute;left:.6rem;bottom:.4rem;color:#fff;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgb(0 0 0 / .7);
  opacity:0;transition:opacity .3s}
.hc-strip button.on span{opacity:1}
@media (max-width: 900px){
  .hc-strip{gap:.4rem;padding-bottom:1rem}
  .hc-strip button{height:44px;border-radius:7px}
  .hc-strip button.on{height:60px}
  .hc-strip span{display:none}
}

/* ---- the spotlight ------------------------------------------------------- */
.spot{display:grid;grid-template-columns:280px 1fr auto;align-items:center;gap:2rem;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-img);
  overflow:hidden;min-height:170px}
.spot-img{width:100%;height:100%;min-height:170px;object-fit:cover;display:block}
.spot-body{padding-block:1.4rem}
.spot-go{font-size:1.5rem;color:var(--brass);padding-right:2rem;transition:transform .2s ease}
.spot:hover .spot-go{transform:translateX(5px)}
.spot:hover{color:inherit}
@media (max-width: 900px){
  .spot{grid-template-columns:1fr;gap:0}
  .spot-img{height:180px;min-height:0}
  .spot-body{padding:1.1rem 1.2rem 1.4rem}
  .spot-go{display:none}
}

/* ---- gallery captions ---------------------------------------------------- */
.gal figure{cursor:pointer}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .9rem .7rem;
  background:linear-gradient(to top,rgb(12 37 54 / .72),transparent);color:#fff;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.gal figure:hover .gal-cap,.gal figure:focus-visible .gal-cap{opacity:1}

/* ---- OpenTable, dressed -------------------------------------------------- */
/* The widget's DOM is inline (iframe=false) and themed by --otkit custom
   properties; overriding them here is the supported knob, not a hack. The
   fonts rule reaches text the variables do not. */
.ot-shell{max-width:44rem;margin:2rem auto 0}
.ot-shell #ot-reservation-widget{
  --otkit-color-background-action:var(--brass) !important;
  --otkit-color-background-action-alt:var(--brass) !important;
  --otkit-color-background-action-hover:var(--photo-gold) !important;
  --otkit-color-background-action-pressed:#8a6531 !important;
  --otkit-color-background-action-focused:var(--photo-gold) !important;
  --otkit-color-foreground-on-action:#ffffff !important;
  --otkit-color-foreground:var(--ink) !important;
  --otkit-color-foreground-action:var(--brass-ink) !important;
  --otkit-color-background:var(--paper) !important;
  --otkit-color-background-border:var(--hairline) !important;
  background:var(--paper);border-radius:14px;padding:1rem 1.1rem;
  box-shadow:0 10px 34px rgb(0 0 0 / .25);text-align:left}
.ot-shell #ot-reservation-widget *{font-family:var(--body) !important}
/* Their wide theme never wraps, and its form is 876px — wider than this card
   at EVERY width, because .ot-shell caps the card at 44rem (704px). These
   rules used to be gated on a 900px viewport, so above that nothing held the
   form in and the Find-a-table button hung 128px outside the card's right
   edge. The form has to fit the CARD, not the window: constrain the picker to
   the card everywhere and let the row wrap inside it. */
.ot-shell .ot-dtp-picker,.ot-shell .ot-dtp-picker.wide{
  width:100% !important;max-width:100% !important;min-width:0 !important;
  box-sizing:border-box !important}
.ot-shell .ot-dtp-picker-form{display:flex !important;flex-wrap:wrap !important;
  gap:.5rem;align-items:center;justify-content:center}
/* Every box on that row may shrink and none may outgrow the card; their own
   margins go, the gap above spaces the row instead. */
.ot-shell .ot-dtp-picker-form>*{min-width:0 !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important}
.ot-shell .ot-dtp-picker-button,.ot-shell .ot-button{
  max-width:100% !important;box-sizing:border-box !important;
  white-space:normal !important;flex:0 1 auto !important}
/* On a phone the row becomes a stack: one full-width control per line. */
@media (max-width: 900px){
  .ot-shell .ot-dtp-picker-selector{width:100% !important;max-width:none !important;
    border:1px solid var(--hairline) !important;border-radius:10px !important}
  .ot-shell .ot-dtp-picker-button,.ot-shell .ot-button{width:100% !important;border-radius:999px !important}
}
.ot-shell #ot-reservation-widget h1,.ot-shell #ot-reservation-widget h2,
.ot-shell #ot-reservation-widget [class*=title]{font-family:var(--display) !important;
  color:var(--ink) !important}


/* ---- the cinematic hero -------------------------------------------------- */
/* One slow drift, alternating direction per slide so consecutive photographs
   never move the same way. Paused wholesale under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .ch .hc-bg img{transform:scale(1.08)}
  .ch .hc-bg img.on{animation:ch-drift 14s ease-out forwards}
  .ch .hc-bg img.on.alt{animation-name:ch-drift-b}
  @keyframes ch-drift{from{transform:scale(1.08) translateX(1.2%)}to{transform:scale(1.0) translateX(0)}}
  @keyframes ch-drift-b{from{transform:scale(1.08) translateX(-1.2%)}to{transform:scale(1.0) translateX(0)}}
}
.ch-dots{display:flex;gap:.65rem;justify-content:center;margin-top:2.5rem}
.ch-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgb(255 255 255 / .45);transition:background .25s,transform .25s;
  /* dot stays 7px; the tap target does not */
  position:relative}
.ch-dots button::after{content:"";position:absolute;inset:-14px}
.ch-dots button.on{background:var(--photo-gold);transform:scale(1.25)}

.rule{height:1px;background:var(--hairline);border:0;margin:0}
.band .rule{background:rgb(159 180 194 / .28)}
footer a{padding-block:.5rem;display:inline-block}