/*
Theme Name: Maribella Ristorante
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for Maribella Ristorante, 360 S Main Ave, Sioux Falls. Built on the arch of their own dining room vault and on the pairing their own wine list already makes between every bottle and a plate.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: maribella
*/

/* ---------------------------------------------------------------------------
   The skin. assets/mechanics.css has already loaded and owns all behaviour:
   the sticky header, the burger, the mobile nav panel, the action bar, back to
   top, tap targets. Nothing in here should re-state any of that.

   The shape language is ARCHED HEADS, FLAT FEET. Every structural element is
   flat-bottomed with a curved top, and the curve springs from a visible
   horizontal, because that is what the barrel vault in their dining room does.
   There are no shadows anywhere on this site.
   ------------------------------------------------------------------------- */

:root{
  --mrb-ink:#17120F;         /* walnut-black: the page ground, their walls   */
  --mrb-ink-2:#221B16;       /* second dark band                            */
  --mrb-ink-3:#332A23;       /* rules and raised edges on dark              */
  --mrb-plaster:#F0E6D8;     /* the limewashed vault: panels, never ground  */
  --mrb-stucco:#E3D5C1;
  --mrb-heading:#2A211C;     /* 12.77 on plaster, 10.92 on stucco           */
  --mrb-body:#443730;        /*  9.27 / 7.93                                */
  --mrb-muted:#675245;       /*  5.93 / 5.07 — clears BOTH light tones      */
  --mrb-cream:#EFE5D7;       /* 14.92 on walnut                             */
  --mrb-dim:#B5A392;         /*  7.63 on walnut                             */
  --mrb-wine:#9C1E3C;        /* their glass-ring stain. Fill on light only  */
  --mrb-wine-lift:#B9254A;   /* same stain lifted: fills on the dark ground */
  --mrb-wine-ink:#8C1733;    /* inline links, 7.45 / 6.37                   */
  --mrb-sage:#A8BCA6;        /* their oven tile. Eyebrows + links on dark   */
  --mrb-rule:#D6C4AC;

  /* The contract mechanics.css reads. */
  --mrb-focus:var(--mrb-sage);
  --mrb-nav-bg:var(--mrb-ink);
  --mrb-burger:var(--mrb-cream);
  --mrb-header-h:96px;

  /* The arch. One value, used by every panel, window and button head. */
  --mrb-arch:50% 50% 0 0 / 22% 22% 0 0;
  --mrb-arch-sm:50% 50% 0 0 / 14% 14% 0 0;
  --mrb-btn-r:10px 10px 2px 2px;
}

body{background:var(--mrb-ink);color:var(--mrb-cream)}

/* --------------------------------------------------------------- bands ---- */
.mrb-band{
  padding-block:clamp(3rem,6.5vw,5.5rem);
  padding-inline:1.25rem;
  background:var(--mrb-ink);
  color:var(--mrb-cream);
}
.mrb-inner{max-width:68rem;margin-inline:auto}
.mrb-inner--narrow{max-width:50rem}

.mrb-band--dark{background:var(--mrb-ink);color:var(--mrb-cream)}
.mrb-band--dark2{background:var(--mrb-ink-2);color:var(--mrb-cream)}
.mrb-band--plaster{background:var(--mrb-plaster);color:var(--mrb-body)}
.mrb-band--stucco{background:var(--mrb-stucco);color:var(--mrb-body)}
.mrb-band--tight{padding-block:clamp(2rem,4vw,3rem)}

/* The springing line: a hairline across the top of a band, where a vault's
   curve would begin. It is the one rule that makes the arches read as
   architecture rather than as rounded boxes. */
.mrb-band--spring{position:relative}
.mrb-band--spring::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--mrb-rule);
}
.mrb-band--dark.mrb-band--spring::before,
.mrb-band--dark2.mrb-band--spring::before{background:var(--mrb-ink-3)}

/* Headings and body text per ground. theme.json paints headings for the light
   bands, so the dark ones have to be re-stated. */
.mrb-band--dark h1,.mrb-band--dark h2,.mrb-band--dark h3,.mrb-band--dark h4,
.mrb-band--dark2 h1,.mrb-band--dark2 h2,.mrb-band--dark2 h3,.mrb-band--dark2 h4,
.mrb-hero h1,.mrb-hero h2,.mrb-hero h3{color:var(--mrb-cream)}
.mrb-band--dark p,.mrb-band--dark li,.mrb-band--dark td,.mrb-band--dark th,
.mrb-band--dark2 p,.mrb-band--dark2 li,.mrb-band--dark2 td,.mrb-band--dark2 th{color:var(--mrb-cream)}
.mrb-band--plaster h1,.mrb-band--plaster h2,.mrb-band--plaster h3,.mrb-band--plaster h4,
.mrb-band--stucco h1,.mrb-band--stucco h2,.mrb-band--stucco h3,.mrb-band--stucco h4{color:var(--mrb-heading)}

/* Links. The wine only clears AA on the light grounds; inside a dark band the
   sage carries them instead (9.21 against the walnut). */
.mrb-band--plaster a:not(.mrb-btn):not(.mrb-chip),
.mrb-band--stucco a:not(.mrb-btn):not(.mrb-chip){
  color:var(--mrb-wine-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.mrb-band--dark a:not(.mrb-btn):not(.mrb-chip):not(.mrb-nav__link),
.mrb-band--dark2 a:not(.mrb-btn):not(.mrb-chip):not(.mrb-nav__link),
.mrb-hero a:not(.mrb-btn):not(.mrb-chip){
  color:var(--mrb-sage);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.mrb-band a:not(.mrb-btn):not(.mrb-chip):hover{text-decoration-thickness:2px}

/* A light panel sitting INSIDE a dark band is still a light ground, and the
   band-level rule above was painting its inline links sage: 1.63 on plaster.
   Anything with its own pale fill has to opt back into the light link colour,
   which is the same trap as checking a colour against the wrong ground. */
.mrb-band--dark .mrb-arch a:not(.mrb-btn):not(.mrb-chip),
.mrb-band--dark2 .mrb-arch a:not(.mrb-btn):not(.mrb-chip),
.mrb-hero .mrb-arch a:not(.mrb-btn):not(.mrb-chip),
.mrb-band--dark .mrb-res__done a:not(.mrb-btn),
.mrb-band--dark2 .mrb-res__done a:not(.mrb-btn){
  color:var(--mrb-wine-ink);
}

/* ------------------------------------------------------------ typography -- */
.mrb-lead{
  font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.6;
  max-width:46ch;color:inherit;
}
.mrb-band--plaster .mrb-lead,.mrb-band--stucco .mrb-lead{color:var(--mrb-body)}

/* The eyebrow: the Italian word, set in the display face in ITALIC and
   sentence case, over a small arc. Deliberately not uppercase letterspaced —
   that construction belongs to the agency's own site. */
.mrb-eyebrow{
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-style:italic;font-weight:500;
  font-size:1.0625rem;letter-spacing:0;
  color:var(--mrb-wine-ink);
  margin:0 0 .6rem;padding-top:.85rem;position:relative;
}
.mrb-eyebrow::before{
  content:"";position:absolute;top:0;left:0;
  width:34px;height:17px;
  border:1px solid currentColor;border-bottom:0;
  border-radius:17px 17px 0 0;
  opacity:.75;
}
.mrb-band--dark .mrb-eyebrow,.mrb-band--dark2 .mrb-eyebrow,
.mrb-hero .mrb-eyebrow{color:var(--mrb-sage)}

/* A heading rule that springs: flat line, arched centre. */
/* A flat springing line with an arch standing on it. The element owns the
   arch's full height, because hanging the arc outside the box with bottom:100%
   put it straight through the descenders of the heading above. */
.mrb-spring{
  border:0;height:30px;width:140px;margin:1.35rem 0 0;
  position:relative;background:none;
}
.mrb-spring::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--mrb-wine);
}
.mrb-spring::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:58px;height:29px;
  border:1.5px solid var(--mrb-wine);border-bottom:0;
  border-radius:29px 29px 0 0;
  background:transparent;
}
.mrb-band--dark .mrb-spring::before,.mrb-band--dark2 .mrb-spring::before,.mrb-hero .mrb-spring::before{background:var(--mrb-sage)}
.mrb-band--dark .mrb-spring::after,.mrb-band--dark2 .mrb-spring::after,.mrb-hero .mrb-spring::after{border-color:var(--mrb-sage)}

/* ---------------------------------------------------------------- buttons - */
.mrb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.5rem;
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-weight:600;font-size:1rem;line-height:1.2;
  text-decoration:none;border:0;cursor:pointer;
  border-radius:var(--mrb-btn-r);
  background:var(--mrb-wine);color:var(--mrb-plaster);
  transition:background .16s ease;
}
.mrb-btn:hover{background:var(--mrb-wine-ink);color:var(--mrb-plaster)}
/* On the walnut ground the darker wine only reaches 2.36 against the band, so
   the fill would read as a hole. The lifted stain clears 3:1 as a boundary and
   still carries the plaster label at 4.97. */
.mrb-band--dark .mrb-btn,.mrb-band--dark2 .mrb-btn,.mrb-hero .mrb-btn,
.mrb-footer .mrb-btn{background:var(--mrb-wine-lift);color:var(--mrb-plaster)}
.mrb-band--dark .mrb-btn:hover,.mrb-band--dark2 .mrb-btn:hover,
.mrb-hero .mrb-btn:hover,.mrb-footer .mrb-btn:hover{background:var(--mrb-wine)}

.mrb-btn--ghost{
  background:transparent;color:var(--mrb-heading);
  box-shadow:inset 0 0 0 1.5px var(--mrb-muted);
}
.mrb-btn--ghost:hover{background:rgba(42,33,28,.07);color:var(--mrb-heading)}
/* The mobile nav panel is a dark ground too, and it was missing from this
   list: the ghost button inside it fell back to the light-band ink colour and
   rendered near-black on walnut. */
.mrb-band--dark .mrb-btn--ghost,.mrb-band--dark2 .mrb-btn--ghost,
.mrb-hero .mrb-btn--ghost,.mrb-footer .mrb-btn--ghost,
.mrb-header .mrb-btn--ghost{
  background:transparent;color:var(--mrb-cream);
  box-shadow:inset 0 0 0 1.5px var(--mrb-dim);
}
.mrb-band--dark .mrb-btn--ghost:hover,.mrb-band--dark2 .mrb-btn--ghost:hover,
.mrb-hero .mrb-btn--ghost:hover,.mrb-footer .mrb-btn--ghost:hover,
.mrb-header .mrb-btn--ghost:hover{background:rgba(239,229,215,.1);color:var(--mrb-cream)}

.mrb-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ------------------------------------------------------------------ arch -- */
/* The structural component: a plaster panel with a vaulted head and a flat
   foot, with the springing line drawn where the curve begins. No border, no
   shadow, no 6px radius — none of which is the agency's card. */
.mrb-arch{
  position:relative;
  background:var(--mrb-plaster);color:var(--mrb-body);
  border-radius:var(--mrb-arch);
  padding:3.1rem 1.6rem 1.75rem;
  overflow:hidden;
}
.mrb-arch::before{
  content:"";position:absolute;left:1.6rem;right:1.6rem;top:2.3rem;height:1px;
  background:var(--mrb-rule);
}
.mrb-arch h3{margin:0 0 .5rem;color:var(--mrb-heading)}
.mrb-arch p{margin:0 0 .75rem;color:var(--mrb-body)}
.mrb-arch p:last-child{margin-bottom:0}
.mrb-band--plaster .mrb-arch{background:var(--mrb-stucco)}
.mrb-band--stucco .mrb-arch{background:var(--mrb-plaster)}

/* A photo seen through the vault. The image carries no text, ever.
   The arch and the clip live on the IMAGE, not on the figure: with them on the
   figure, overflow:hidden cropped the caption and the arch radius cut into it. */
.mrb-window{display:block;position:relative;margin:0}
.mrb-window img{
  display:block;width:100%;height:auto;
  border-radius:var(--mrb-arch);
  background:var(--mrb-ink-2);
}
.mrb-window--sm img{border-radius:var(--mrb-arch-sm)}
.mrb-window figcaption{
  margin-top:.6rem;font-size:.875rem;color:var(--mrb-dim);
}
.mrb-band--plaster .mrb-window figcaption,
.mrb-band--stucco .mrb-window figcaption{color:var(--mrb-muted)}

/* ------------------------------------------------------------------ hero -- */
.mrb-hero{
  background:var(--mrb-ink);color:var(--mrb-cream);
  padding:clamp(2.5rem,5vw,4rem) 1.25rem clamp(3rem,5.5vw,4.5rem);
  position:relative;
}
.mrb-hero__inner{
  max-width:68rem;margin-inline:auto;
  display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  align-items:center;
}
.mrb-hero h1{margin:0 0 1rem;max-width:16ch}
.mrb-hero__sub{font-size:clamp(1.05rem,1.8vw,1.22rem);line-height:1.6;max-width:44ch;color:var(--mrb-cream);margin:0}
.mrb-hero__rail{
  list-style:none;margin:1.9rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--mrb-ink-3);
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:.9375rem;color:var(--mrb-dim);
}
.mrb-hero__rail li{position:relative}
.mrb-hero__vault{position:relative}
.mrb-hero__vault img{
  display:block;width:100%;height:auto;
  border-radius:var(--mrb-arch);
}
/* No rule is drawn over the photograph. The vault the picture is of does the
   job, and a hairline across an image reads as a scratch on it. */

/* ---------------------------------------------------- the pairing row ----- */
/* Their own wine list matches every bottle to a dish. This is that, made the
   structure of the site: the plate on the left, the glass it is already
   married to on the right, and a rule between them. */
.mrb-pairs{margin:2rem 0 0;border-top:1px solid var(--mrb-rule)}
.mrb-band--dark .mrb-pairs,.mrb-band--dark2 .mrb-pairs{border-top-color:var(--mrb-ink-3)}
.mrb-pair{
  display:grid;gap:.35rem 1.5rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--mrb-rule);
}
.mrb-band--dark .mrb-pair,.mrb-band--dark2 .mrb-pair{border-bottom-color:var(--mrb-ink-3)}
.mrb-pair__plate{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.mrb-pair__name{
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-weight:600;font-size:1.1875rem;line-height:1.25;
  color:var(--mrb-heading);
}
.mrb-band--dark .mrb-pair__name,.mrb-band--dark2 .mrb-pair__name{color:var(--mrb-cream)}
.mrb-pair__price{
  font-variant-numeric:tabular-nums;font-weight:600;font-size:1.0625rem;
  color:var(--mrb-wine-ink);
}
.mrb-band--dark .mrb-pair__price,.mrb-band--dark2 .mrb-pair__price{color:var(--mrb-sage)}
.mrb-pair__glass{
  font-size:.9375rem;line-height:1.5;color:var(--mrb-muted);
  display:flex;align-items:baseline;gap:.5rem;
}
.mrb-band--dark .mrb-pair__glass,.mrb-band--dark2 .mrb-pair__glass{color:var(--mrb-dim)}
/* The join: a small arc, because two sides meeting at the top is what this
   whole site is built out of. */
.mrb-pair__glass::before{
  content:"";flex:0 0 auto;
  width:18px;height:9px;margin-top:.35em;
  border:1px solid var(--mrb-wine);border-bottom:0;
  border-radius:9px 9px 0 0;
}
.mrb-band--dark .mrb-pair__glass::before,
.mrb-band--dark2 .mrb-pair__glass::before{border-color:var(--mrb-sage)}
.mrb-pair__note{font-size:.9375rem;color:var(--mrb-muted);line-height:1.55}
.mrb-band--dark .mrb-pair__note,.mrb-band--dark2 .mrb-pair__note{color:var(--mrb-dim)}

/* ------------------------------------------------------------ menu list --- */
.mrb-course{margin-top:2.75rem;max-width:52rem}
.mrb-course:first-of-type{margin-top:1.5rem}
.mrb-course__head{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:.6rem;border-bottom:1px solid var(--mrb-rule);
}
.mrb-band--dark .mrb-course__head,.mrb-band--dark2 .mrb-course__head{border-bottom-color:var(--mrb-ink-3)}
.mrb-course__head h3{margin:0;font-size:1.6rem}
.mrb-course__note{font-size:.9375rem;color:var(--mrb-muted);margin:0}
.mrb-band--dark .mrb-course__note,.mrb-band--dark2 .mrb-course__note{color:var(--mrb-dim)}

.mrb-dish{padding:1.05rem 0;border-bottom:1px solid var(--mrb-rule)}
.mrb-band--dark .mrb-dish,.mrb-band--dark2 .mrb-dish{border-bottom-color:var(--mrb-ink-3)}
.mrb-dish__top{display:flex;align-items:baseline;gap:.75rem}
.mrb-dish__n{
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-weight:600;font-size:1.1875rem;color:var(--mrb-heading);
}
.mrb-band--dark .mrb-dish__n,.mrb-band--dark2 .mrb-dish__n{color:var(--mrb-cream)}
.mrb-dish__dots{flex:1 1 auto;border-bottom:1px dotted var(--mrb-rule);transform:translateY(-.3em)}
.mrb-band--dark .mrb-dish__dots,.mrb-band--dark2 .mrb-dish__dots{border-bottom-color:var(--mrb-ink-3)}
.mrb-dish__p{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mrb-wine-ink)}
.mrb-band--dark .mrb-dish__p,.mrb-band--dark2 .mrb-dish__p{color:var(--mrb-sage)}
.mrb-dish__d{margin:.3rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--mrb-muted);max-width:60ch}
.mrb-band--dark .mrb-dish__d,.mrb-band--dark2 .mrb-dish__d{color:var(--mrb-dim)}
.mrb-gf{
  font-size:.75rem;font-weight:600;color:var(--mrb-muted);
  border:1px solid var(--mrb-rule);border-radius:2px;
  padding:.1rem .35rem;margin-left:.4rem;white-space:nowrap;
}
.mrb-band--dark .mrb-gf,.mrb-band--dark2 .mrb-gf{color:var(--mrb-dim);border-color:var(--mrb-ink-3)}

/* ----------------------------------------------------------- grid helpers - */
.mrb-grid{display:grid;gap:1.5rem}
.mrb-split{display:grid;gap:clamp(1.75rem,3.5vw,3rem);align-items:center}

/* ----------------------------------------------------------- figure strip - */
.mrb-figures{
  list-style:none;margin:2rem 0 0;padding:0;
  display:grid;gap:1.25rem;
}
.mrb-figure__n{
  display:block;
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-weight:600;font-size:clamp(2rem,4vw,2.7rem);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--mrb-sage);
}
.mrb-band--plaster .mrb-figure__n,.mrb-band--stucco .mrb-figure__n{color:var(--mrb-wine-ink)}
.mrb-figure__l{display:block;margin-top:.45rem;font-size:.9375rem;line-height:1.45;color:var(--mrb-dim)}
.mrb-band--plaster .mrb-figure__l,.mrb-band--stucco .mrb-figure__l{color:var(--mrb-muted)}

/* ----------------------------------------------------------------- chips -- */
.mrb-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.mrb-chip{
  display:inline-flex;align-items:center;min-height:38px;
  padding:.35rem .85rem;font-size:.9375rem;text-decoration:none;
  border-radius:8px 8px 2px 2px;
  color:var(--mrb-cream);background:var(--mrb-ink-2);
  box-shadow:inset 0 0 0 1px var(--mrb-ink-3);
}
.mrb-band--plaster .mrb-chip,.mrb-band--stucco .mrb-chip{color:var(--mrb-body);background:rgba(42,33,28,.06);box-shadow:inset 0 0 0 1px var(--mrb-rule)}
.mrb-chip:hover{background:var(--mrb-ink-3)}
.mrb-band--plaster .mrb-chip:hover,.mrb-band--stucco .mrb-chip:hover{background:rgba(42,33,28,.15)}

/* ----------------------------------------------------------------- hours -- */
.mrb-hours{width:100%;border-collapse:collapse;font-size:1rem}
.mrb-hours th,.mrb-hours td{
  text-align:left;padding:.6rem 0;border-bottom:1px solid var(--mrb-ink-3);
  font-weight:400;
}
.mrb-band--plaster .mrb-hours th,.mrb-band--plaster .mrb-hours td,
.mrb-band--stucco .mrb-hours th,.mrb-band--stucco .mrb-hours td{border-bottom-color:var(--mrb-rule)}
.mrb-hours td{text-align:right;font-variant-numeric:tabular-nums}
.mrb-hours tr:last-child th,.mrb-hours tr:last-child td{border-bottom:0}
.mrb-hours .is-closed th,.mrb-hours .is-closed td{color:var(--mrb-dim)}
.mrb-band--plaster .mrb-hours .is-closed th,.mrb-band--plaster .mrb-hours .is-closed td,
.mrb-band--stucco .mrb-hours .is-closed th,.mrb-band--stucco .mrb-hours .is-closed td{color:var(--mrb-muted)}

/* ------------------------------------------------------------------ prose - */
.mrb-prose{max-width:38rem}
.mrb-prose p{margin:0 0 1.1rem}
.mrb-prose h2{margin:2.25rem 0 .75rem}
.mrb-prose h3{margin:1.75rem 0 .5rem}
.mrb-prose ul,.mrb-prose ol{margin:0 0 1.1rem;padding-left:1.25rem}
.mrb-prose li{margin:0 0 .4rem}
.mrb-prose > *:first-child{margin-top:0}

/* --------------------------------------------------------------- the FAQ -- */
.mrb-qa{border-top:1px solid var(--mrb-rule);margin-top:1.75rem}
.mrb-band--dark .mrb-qa,.mrb-band--dark2 .mrb-qa{border-top-color:var(--mrb-ink-3)}
.mrb-qa > div{padding:1.25rem 0;border-bottom:1px solid var(--mrb-rule)}
.mrb-band--dark .mrb-qa > div,.mrb-band--dark2 .mrb-qa > div{border-bottom-color:var(--mrb-ink-3)}
.mrb-qa h3{margin:0 0 .4rem;font-size:1.125rem}
.mrb-qa p{margin:0;color:var(--mrb-muted)}
.mrb-band--dark .mrb-qa p,.mrb-band--dark2 .mrb-qa p{color:var(--mrb-dim)}

/* ------------------------------------------------------------------ forms - */
/* These class names come from 010-maribella-enquiries.php, which renders the
   form. Changing one here without changing it there silently unstyles a field. */
.mrb-form{max-width:38rem}
.mrb-form h3{margin:0 0 .5rem}
.mrb-form__intro{margin:0 0 1.75rem;color:var(--mrb-muted)}
.mrb-band--dark .mrb-form__intro,.mrb-band--dark2 .mrb-form__intro{color:var(--mrb-dim)}
.mrb-form form{display:grid;gap:1.1rem}

.mrb-field{display:grid;gap:.4rem}
.mrb-field label{font-weight:600;font-size:.9375rem;color:inherit}
.mrb-field .mrb-hint{display:block;font-size:.875rem;color:var(--mrb-muted);font-weight:400;margin-top:.15rem}
.mrb-band--dark .mrb-field .mrb-hint,.mrb-band--dark2 .mrb-field .mrb-hint{color:var(--mrb-dim)}
.mrb-field input,.mrb-field select,.mrb-field textarea{
  font-family:inherit;font-size:1rem;line-height:1.4;
  padding:.8rem .9rem;min-height:52px;
  color:var(--mrb-heading);background:var(--mrb-plaster);
  border:1px solid var(--mrb-rule);border-radius:8px 8px 2px 2px;
  width:100%;
}
.mrb-field textarea{min-height:140px;resize:vertical}
.mrb-field input:focus-visible,.mrb-field select:focus-visible,.mrb-field textarea:focus-visible{
  outline:3px solid var(--mrb-sage);outline-offset:2px;
}
/* Bottom-aligned, because a hint under one label and not its neighbour makes
   the two inputs sit at different heights and the row look broken. */
.mrb-field-row{display:grid;gap:1.1rem;align-items:end}

/* The honeypot is pushed off-screen rather than hidden, because a bot reads
   display:none and skips it. Keep it reachable to the DOM and not to a person. */
.mrb-trap{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.mrb-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.85rem 1.75rem;
  font-family:inherit;font-weight:600;font-size:1rem;line-height:1.2;
  border:0;cursor:pointer;justify-self:start;
  border-radius:var(--mrb-btn-r);
  background:var(--mrb-wine);color:var(--mrb-plaster);
  transition:background .16s ease;
}
.mrb-submit:hover{background:var(--mrb-wine-ink)}
.mrb-band--dark .mrb-submit,.mrb-band--dark2 .mrb-submit{background:var(--mrb-wine-lift)}
.mrb-band--dark .mrb-submit:hover,.mrb-band--dark2 .mrb-submit:hover{background:var(--mrb-wine)}

.mrb-form__fine{margin:0;font-size:.875rem;color:var(--mrb-muted)}
.mrb-band--dark .mrb-form__fine,.mrb-band--dark2 .mrb-form__fine{color:var(--mrb-dim)}

.mrb-note{
  padding:1rem 1.15rem;border-radius:8px 8px 2px 2px;
  margin:0 0 1.75rem;border-left:3px solid var(--mrb-wine);
  background:rgba(42,33,28,.06);color:var(--mrb-body);
}
.mrb-note--ok{border-left-color:var(--mrb-sage)}
.mrb-band--dark .mrb-note,.mrb-band--dark2 .mrb-note{
  background:rgba(239,229,215,.08);color:var(--mrb-cream);border-left-color:var(--mrb-wine-lift);
}
.mrb-band--dark .mrb-note--ok,.mrb-band--dark2 .mrb-note--ok{border-left-color:var(--mrb-sage)}

/* ------------------------------------------------------- 404 page head ---- */
.mrb-pagehead{background:var(--mrb-ink-2);color:var(--mrb-cream);padding:clamp(3rem,6vw,5rem) 1.25rem}
.mrb-pagehead__inner{max-width:68rem;margin-inline:auto}
.mrb-pagehead h1{color:var(--mrb-cream)}

/* ----------------------------------------------------------------- header - */
.mrb-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:.75rem 1.1rem;background:var(--mrb-plaster);color:var(--mrb-heading);
  font-weight:600;text-decoration:none;
}
.mrb-skip:focus{left:.5rem;top:.5rem}

.mrb-header{
  background:var(--mrb-ink);
  border-bottom:1px solid var(--mrb-wine);
}
.mrb-headbar{
  max-width:80rem;margin-inline:auto;
  padding:.7rem 1.25rem;
  min-height:72px;
}
.mrb-brand img{display:block;height:54px;width:auto}
.mrb-nav__link{
  color:var(--mrb-cream);text-decoration:none;
  font-size:1rem;font-weight:500;
}
.mrb-nav__link:hover{color:var(--mrb-sage)}
.mrb-nav__foot p{color:var(--mrb-dim);font-size:.9375rem;margin:1.25rem 0 0}

/* The phone number in the bar. Hidden by default and switched on only when
   there is genuinely room for it, because the mobile panel already carries a
   full-width call button and two of them is noise. */
.mrb-nav__tel{display:none}

/* Mobile panel. mechanics.css owns the behaviour; this is only the paint. */
@media (max-width:52rem){
  .mrb-header .mrb-nav{background:var(--mrb-ink)}
  .mrb-header .mrb-nav__link{
    font-family:'Bodoni Moda','Didot',Georgia,serif;
    font-size:1.5rem;font-weight:500;
    border-bottom:1px solid var(--mrb-ink-3);
  }
  /* The panel's own foot carries the actions, so the bar's copy of the button
     would be the same call to action twice, one above the other. */
  .mrb-header .mrb-nav__inner > .mrb-btn{display:none}
  .mrb-header .mrb-nav__foot .mrb-btn{width:100%;margin-bottom:.6rem}
  .mrb-header .mrb-nav__hours{margin-top:1.5rem}
  .mrb-header .mrb-nav__hours th,.mrb-header .mrb-nav__hours td{
    color:var(--mrb-dim);font-size:.9375rem;padding:.45rem 0;
    border-bottom-color:var(--mrb-ink-3);
  }
  .mrb-header .mrb-nav__foot p{margin-top:1rem}
  .mrb-brand img{height:52px}
}

/* Everything that lays the desktop bar out has to be fenced in here: a media
   query adds no specificity, style.css loads second, and an unscoped flex rule
   would stomp the mobile panel at every width. */
@media (min-width:52.0625rem){
  .mrb-nav__inner{display:flex;align-items:center;gap:1.15rem}
  .mrb-nav__link{position:relative;padding-block:.35rem}
  /* A small arch under the current section, which is the same motif as the
     section rule and the card head rather than a new decoration. */
  .mrb-nav__link::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%) scaleX(0);
    width:22px;height:9px;
    border:1px solid var(--mrb-sage);border-bottom:0;border-radius:11px 11px 0 0;
    transition:transform .16s ease;
  }
  .mrb-nav__link:hover::after,
  .mrb-nav__link[aria-current]::after{transform:translateX(-50%) scaleX(1)}
  .mrb-nav__link[aria-current]{color:var(--mrb-sage)}
  .mrb-nav .mrb-btn{min-height:46px;padding:.6rem 1.15rem;font-size:.9375rem}
  .mrb-brand img{height:80px}
  .mrb-headbar{min-height:96px}
}
@media (min-width:70rem){
  .mrb-nav__inner{gap:1.5rem}
  .mrb-nav__tel{
    display:inline-flex;align-items:center;gap:.4rem;
    margin-left:.35rem;padding-block:.35rem;
    color:var(--mrb-dim);text-decoration:none;
    font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .mrb-nav__tel:hover{color:var(--mrb-sage)}
  .mrb-nav__tel svg{flex:0 0 auto;opacity:.8}
}

/* ----------------------------------------------------------------- footer - */
.mrb-footer{background:var(--mrb-ink-2);color:var(--mrb-cream);padding:clamp(2.75rem,5vw,4rem) 1.25rem 0}
.mrb-footer__inner{
  max-width:68rem;margin-inline:auto;
  display:grid;gap:2.25rem;
  padding-bottom:2.5rem;
}
.mrb-footer__mark img{display:block;height:58px;width:auto;margin-bottom:1rem}
.mrb-footer__note{color:var(--mrb-dim);font-size:.9375rem;max-width:30ch;margin:0}
.mrb-footer h4{
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-size:1.0625rem;font-weight:600;color:var(--mrb-cream);
  margin:0 0 .5rem;
}
.mrb-footer ul{list-style:none;margin:0;padding:0}
.mrb-footer ul a{color:var(--mrb-dim);text-decoration:none;font-size:.9375rem}
.mrb-footer ul a:hover{color:var(--mrb-sage);text-decoration:underline}
.mrb-footer .mrb-hours th,.mrb-footer .mrb-hours td{font-size:.9375rem;padding:.4rem 0;color:var(--mrb-dim)}
.mrb-footer__bar{
  max-width:68rem;margin-inline:auto;
  border-top:1px solid var(--mrb-ink-3);
  padding:1.25rem 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.875rem;color:var(--mrb-dim);
}
.mrb-footer__bar a{color:var(--mrb-dim)}

/* ------------------------------------------------- action bar + to top ---- */
.mrb-ab{
  border-radius:var(--mrb-btn-r);font-weight:600;font-size:1rem;
  background:var(--mrb-wine-lift);color:var(--mrb-plaster);
}
.mrb-ab--ghost{background:var(--mrb-plaster);color:var(--mrb-heading)}
.mrb-top{
  border:0;border-radius:23px 23px 4px 4px;
  background:var(--mrb-plaster);color:var(--mrb-heading);
}

/* ---------------------------------------------------------------- crumbs -- */
.mrb-crumbs{font-size:.875rem;color:var(--mrb-dim);margin:0 0 1rem}
.mrb-crumbs a{color:var(--mrb-sage)}
.mrb-band--plaster .mrb-crumbs,.mrb-band--stucco .mrb-crumbs{color:var(--mrb-muted)}
.mrb-band--plaster .mrb-crumbs a,.mrb-band--stucco .mrb-crumbs a{color:var(--mrb-wine-ink)}

/* ------------------------------------------------------------- responsive - */
@media (min-width:40rem){
  .mrb-pair{grid-template-columns:1.1fr 1fr;align-items:start}
  .mrb-figures{grid-template-columns:repeat(3,1fr);gap:2rem}
  .mrb-grid--2{grid-template-columns:repeat(2,1fr)}
  .mrb-arch{padding:3.4rem 2rem 2rem}
  .mrb-arch::before{left:2rem;right:2rem;top:2.5rem}
}
@media (min-width:56rem){
  .mrb-hero__inner{grid-template-columns:1.05fr .95fr}
  .mrb-split{grid-template-columns:1fr 1fr}
  .mrb-split--wide{grid-template-columns:1.25fr .75fr}
  .mrb-grid--3{grid-template-columns:repeat(3,1fr)}
  .mrb-grid--4{grid-template-columns:repeat(4,1fr)}
  .mrb-footer__inner{grid-template-columns:1.3fr 1fr 1fr 1.1fr}
  .mrb-dish__d{max-width:52ch}
}
@media (max-width:55.99rem){
  /* Stacked, the vault reads better as a wide opening than a tall one. */
  .mrb-hero__vault img{aspect-ratio:3/2;object-fit:cover}
}

@media (min-width:40rem){
  .mrb-field-row{grid-template-columns:1fr 1fr}
}

/* -------------------------------------------------------------------- map - */
/* The arch applies here too, so the map reads as another opening in the wall. */
.mrb-map{
  width:100%;aspect-ratio:16/11;border:0;display:block;
  border-radius:var(--mrb-arch);background:var(--mrb-ink-2);
}

/* ========================================================================== *
   Section rail, menu filter, and the reservation form.
   Added in the second pass: the long list pages needed navigation inside the
   page, and the restaurant needed a way to actually take a table request.
 * ========================================================================== */

/* ------------------------------------------------------------ the rail --- */
/* Sticky under the header on the long pages. z-index 80 keeps it under the
   header (100) and under the quick-action bar (95) and back-to-top (96).
   None of these selectors are ones mechanics.css owns, so they are safe at
   top level. */
.mrb-rail{
  position:sticky;top:var(--mrb-stick-h,96px);z-index:80;
  background:var(--mrb-ink-2);
  border-bottom:1px solid var(--mrb-ink-3);
  box-shadow:0 1px 0 var(--mrb-wine);
}
.mrb-rail__inner{
  max-width:68rem;margin-inline:auto;
  display:flex;gap:.4rem;align-items:center;
  padding:.55rem 1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.mrb-rail__inner::-webkit-scrollbar{display:none}
.mrb-rail__link{
  flex:0 0 auto;scroll-snap-align:center;
  display:inline-flex;align-items:center;
  min-height:40px;padding:.3rem .8rem;
  font-size:.9375rem;font-weight:500;line-height:1;
  color:var(--mrb-dim);text-decoration:none;
  border-radius:8px 8px 2px 2px;
  transition:background .14s ease,color .14s ease;
}
.mrb-rail__link:hover{color:var(--mrb-cream);background:var(--mrb-ink-3)}
.mrb-rail__link[aria-current]{
  background:var(--mrb-wine-lift);color:var(--mrb-plaster);font-weight:600;
}
.mrb-rail__link[hidden]{display:none}

/* The sticky rail stacks on top of the sticky header, so an anchor has to
   clear both or the heading lands underneath it. mechanics.css sets the
   header-only value; this adds the rail when there is one. */
html:has(.mrb-rail){
  scroll-padding-top:calc(var(--mrb-stick-h,96px) + var(--mrb-rail-h,54px) + 1rem);
}

/* ---------------------------------------------------------- the filter --- */
.mrb-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  padding:1rem 0 0;
}
.mrb-switch{
  display:inline-flex;align-items:center;gap:.65rem;
  min-height:44px;cursor:pointer;font-size:.9375rem;font-weight:600;
}
.mrb-switch input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.mrb-switch__track{
  position:relative;flex:0 0 auto;
  width:46px;height:26px;border-radius:999px;
  background:rgba(42,33,28,.24);
  transition:background .16s ease;
}
.mrb-switch__dot{
  position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:var(--mrb-plaster);
  box-shadow:0 1px 2px rgba(23,18,15,.3);
  transition:transform .16s ease;
}
.mrb-switch input:checked + .mrb-switch__track{background:var(--mrb-wine)}
.mrb-switch input:checked + .mrb-switch__track .mrb-switch__dot{transform:translateX(20px)}
.mrb-switch input:focus-visible + .mrb-switch__track{outline:3px solid var(--mrb-sage);outline-offset:3px}
.mrb-band--dark .mrb-switch__track,.mrb-band--dark2 .mrb-switch__track{background:rgba(239,229,215,.2)}
.mrb-band--dark .mrb-switch input:checked + .mrb-switch__track,
.mrb-band--dark2 .mrb-switch input:checked + .mrb-switch__track{background:var(--mrb-wine-lift)}
.mrb-filter__count{font-size:.9375rem;color:var(--mrb-muted)}
.mrb-band--dark .mrb-filter__count,.mrb-band--dark2 .mrb-filter__count{color:var(--mrb-dim)}
@media (prefers-reduced-motion:reduce){
  .mrb-switch__track,.mrb-switch__dot{transition:none}
}

[data-gf="on"] .mrb-dish:not(.is-gf){display:none}
.mrb-course[hidden]{display:none}

/* ------------------------------------------------- the menu in columns --- */
/* Their printed menu runs in two columns and so does this, which also halves
   the length of the dotted leader between a dish and its price. Multicol
   rather than grid, because a menu should flow and a grid would leave a
   ragged hole wherever one description runs long. */
.mrb-dishes{margin-top:.25rem}
@media (min-width:60rem){
  .mrb-dishes{columns:2;column-gap:3.25rem}
  .mrb-dish{break-inside:avoid-column;-webkit-column-break-inside:avoid}
  .mrb-course{max-width:none}
  /* The first dish in each column should not float away from the rule above
     it, and multicol adds no margin collapsing to help. */
  .mrb-dish:first-child{padding-top:0}
}

/* ---------------------------------------------------- reservation form --- */
.mrb-res{max-width:44rem}
.mrb-res h3{margin:0 0 .5rem}
.mrb-res__form{display:grid;gap:1.1rem;margin-top:.5rem}
.mrb-res__closed{
  margin:0;padding:.85rem 1rem;
  border-left:3px solid var(--mrb-wine);
  background:rgba(42,33,28,.06);
  font-size:.9375rem;
}
.mrb-band--dark .mrb-res__closed,.mrb-band--dark2 .mrb-res__closed{
  background:rgba(239,229,215,.08);border-left-color:var(--mrb-wine-lift);color:var(--mrb-cream);
}
.mrb-res__closed[hidden]{display:none}
.mrb-res .mrb-submit[disabled]{opacity:.5;cursor:not-allowed}
.mrb-res__done{
  padding:1.75rem;
  background:var(--mrb-plaster);color:var(--mrb-body);
  border-radius:var(--mrb-arch-sm);
}
.mrb-band--plaster .mrb-res__done{background:var(--mrb-stucco)}
.mrb-res__done h3{margin:0 0 .75rem;color:var(--mrb-heading)}
.mrb-res__done p{margin:0 0 .9rem}
.mrb-res__done p:last-child{margin-bottom:0}
.mrb-res__echo{
  font-family:'Bodoni Moda','Didot',Georgia,serif;
  font-size:1.35rem;line-height:1.3;color:var(--mrb-heading);
}
/* A phone keyboard zooms the page in on any control under 16px. */
.mrb-field input,.mrb-field select,.mrb-field textarea{font-size:16px}
@media (min-width:40rem){
  .mrb-field input,.mrb-field select,.mrb-field textarea{font-size:1rem}
  .mrb-field-row--3{grid-template-columns:1.1fr .9fr 1fr}
}

/* ------------------------------------------------------- hours callout --- */
.mrb-today{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  margin:1.25rem 0 0;padding:.9rem 1.1rem;
  border-left:3px solid var(--mrb-sage);
  background:rgba(239,229,215,.07);
  font-size:.9375rem;
}
.mrb-band--plaster .mrb-today,.mrb-band--stucco .mrb-today{
  background:rgba(42,33,28,.05);border-left-color:var(--mrb-wine);
}
.mrb-today strong{font-weight:600}