:root{
  --marble:#f3efe7; --marble-2:#e9e2d6; --paper:#fbf9f5;
  /* Card stock for the reservations popup. Warmer and deeper than --paper,
     which at #fbf9f5 photographs as white rather than as paper. Checked
     against the same AA bar as --muted/--gold: --muted clears 4.84:1 here,
     --ink 12.33:1, --red 5.70:1. Anything new on this ground gets checked
     the same way. */
  --cream:#f0ead9;
  --ink:#2b2723; --body:#544c44;
  /* --muted and --gold were darkened 2026-07-28 to clear WCAG AA (4.5:1) on all
     three page backgrounds. Same hue and saturation, lower lightness only.
     was #8d8377 (3.24:1) -> 5.07:1  ·  was #b3924f (2.56:1) -> 5.07:1
     Anything new that sits on marble should be checked the same way. */
  --muted:#6c645b;
  --red:#b5121a; --red-deep:#7d0d13; --gold:#796234; --gold-lt:#c9ac6d;
  --line:rgba(43,39,35,.14);
  /* Owner-supplied brand accents (Benjamin Moore, sampled from their swatches).
     First colours to come from the client directly — reuse these variables,
     never re-hardcode the hexes. */
  --espresso-bark:#55433C;   /* CSP-390 */
  --quietly-violet:#927977;  /* CSP-415 */
  /* Client typography spec 2026-08-09: headings Bodoni Moda, body Montserrat.
     --serif/--sans/--text keep their old names so every existing rule follows
     the swap; only the stacks changed. Bodoni Moda is a high-contrast Didone,
     so it needs the Didot/Bodoni MT fallbacks to degrade in character. */
  --serif:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --text:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--text);color:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--marble);
  background-image:
    radial-gradient(60% 40% at 12% 8%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(50% 35% at 88% 22%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(45% 40% at 30% 70%, rgba(214,205,190,.45), transparent 65%),
    radial-gradient(55% 45% at 80% 88%, rgba(214,205,190,.4), transparent 65%);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* KEYBOARD FOCUS
   Nothing in the design showed a focus ring, so anyone navigating by Tab had no
   idea where they were. :focus-visible only fires for keyboard/AT users, so
   mouse clicks look exactly as they did before. */
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}

/* Button, outside the .band context (used on the 404 page). */
.btn{display:inline-block;margin:6px;background:var(--red);color:#fff;padding:13px 26px;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.btn:hover{background:var(--red-deep)}

/* Skip link — invisible until it receives focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px;border:1px solid var(--line)}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;font-size:.64rem;color:var(--gold)}

/* NAV — logo left, links right */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,239,231,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav__in{max-width:1140px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__right{display:flex;align-items:center;gap:22px}
.nav__links{display:none;gap:17px;align-items:center}
.nav__links a{font-family:var(--sans);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);padding:6px 0;position:relative;white-space:nowrap}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transition:.3s}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--red)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1);background:var(--gold)}
.nav__logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__logo .emblem{height:42px;width:auto}
.nav__logo span{font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.02rem;color:var(--ink);white-space:nowrap}
.burger{width:26px;height:18px;position:relative;background:none;border:0}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:8px}.burger i:nth-child(3){top:16px}
/* Must stay visually identical to the .btn at the bottom of the page, only smaller.
   It is a <button>, so the browser gives it a 2px outset border unless told
   otherwise — setting a background does not remove it. That border, plus the
   rounded corner, was the whole difference between the two. */
.nav__res{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:9px 14px;border:0;border-radius:0;white-space:nowrap}
.nav__res:hover{background:var(--red-deep)}
.mob{display:none;flex-direction:column;gap:2px;padding:10px 24px 18px;border-top:1px solid var(--line);background:var(--paper)}
.mob.open{display:flex}
.mob a{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
/* A nav link for a page hidden in the admin (content_blocks.page_visibility).
   Shipped on Swag and Press so they are already down before migration 0009 is
   run, and applied/removed by content.js after it reads the database. !important
   because .nav__links sets display:flex on its children at wide widths. */
.pg-off{display:none!important}

/* HERO — the client's artwork, wordmark baked in, shown unaltered.
   No scrim and no overlay type: the picture already carries the logotype, so
   anything laid over it would be a change to artwork we were asked not to touch.

   The sizing exists to protect that wordmark. aspect-ratio matches the file, so
   at narrow widths the whole image shows and nothing is cropped at all.
   max-height caps it on wide screens; because the box can then only be WIDER
   than the image's own ratio, object-fit trims top and bottom and never the
   sides — and the sides are where the wordmark reaches.

   object-position is 48% because that is the measured vertical centre of the
   baked-in type (it occupies 38.4%-57.7% of the file). Centring the crop on the
   text rather than on the frame is what keeps it safe in a short window: at
   2560x420 the default-ish 45% left barely a pixel of clearance, 48% leaves
   ~25px on both sides. If the artwork is ever re-exported, re-measure. */
.hero{width:100%;aspect-ratio:2403/1324;max-height:min(78vh,760px);overflow:hidden}
/* The h1 is a wrapper, not a text block. It must be given the hero's full
   height: the image below sizes with height:100%, and a percentage height
   against an auto-height parent resolves to auto — which made the picture
   render at full natural height and simply overflow past the crop. */
.hero__h1{margin:0;line-height:0;height:100%}
.hero__art{width:100%;height:100%;object-fit:cover;object-position:center 48%}

/* HOME — hero only, locked to the viewport (client direction 2026-08-21).
   Navigation is the sole way off this page, so there is nothing below the fold
   and nothing to scroll to.

   100dvh, not 100vh: on mobile Safari 100vh is the height WITHOUT the browser
   chrome, so a 100vh page is taller than what you can actually see and scrolls
   by exactly the height of the toolbar. dvh tracks the visible area instead.

   object-fit becomes `contain` here. Filling the box would crop, and on a
   phone the box is far taller than the artwork's 1.815 ratio, so the crop
   would come off the SIDES — which is precisely where the wordmark reaches
   (it spans 30.5%-74% of the frame). Contain guarantees the whole logotype is
   visible at every size; the mat colour below is sampled from the artwork's
   own edges and darkened, so the letterboxing reads as a frame. */
body.home{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.home .nav{flex:0 0 auto}
body.home main{flex:1 1 auto;min-height:0;display:flex}
body.home .hero{flex:1 1 auto;min-height:0;width:100%;position:relative;
  aspect-ratio:auto;max-height:none;background:#3c332e;
  /* Size container so the rule below can ask about the HERO's own shape rather
     than the viewport's. The two differ by the masthead (stripes + nav, ~159px),
     so the hero is always measurably wider in ratio than the window it sits in;
     a viewport media query would leave the mat showing across a whole band of
     ordinary desktop sizes (at 1024x700 the window is 1.46:1, the hero 1.89:1). */
  container:hero / size}
/* The artwork is 1.815:1, so on a phone it can only ever be ~207px tall before
   the sides would need cropping — and the sides are where the wordmark lives.
   That leaves a lot of empty mat. Rather than a flat slab, fill it with the
   same picture blown up, blurred and dimmed: it costs no extra download (the
   file is already in cache from the <img>), and it reads as an ambient
   surround instead of dead space. scale() hides the transparent fringe blur
   leaves at the edges. The artwork itself is untouched and sits on top. */
body.home .hero::before{content:"";position:absolute;inset:0;
  background:url('img/hero-text-1200.jpg?v=20260811') center/cover no-repeat;
  filter:blur(30px) brightness(.45) saturate(.85);transform:scale(1.18)}
body.home .hero__h1{position:relative;z-index:1}
body.home .hero__h1{height:100%;width:100%}
body.home .hero__art{height:100%;width:100%;object-fit:contain;object-position:center}
/* ...but only while the box is TALLER than the artwork. Once the hero is wider
   than 1.815:1 — every landscape desktop — `contain` pillarboxes instead, and
   the mat turns up as two blurred bars beside the fresco, which reads as a
   rendering fault rather than a frame. There the crop `cover` takes comes off
   the top and bottom, never the sides, so the wordmark (30.5%-74% of the frame)
   is untouched; 48% is the measured vertical centre of the baked-in type, same
   figure the inner pages use. */
@container hero (min-aspect-ratio:2403/1324){
  body.home .hero__art{object-fit:cover;object-position:center 48%}
}
/* The striped band keeps its full 96px here too. It was doubled at the client's
   request and is part of the masthead, so it is not something to quietly shrink
   to buy space — the hero takes whatever height is left instead. */
body.home .tstripes{flex:0 0 auto}

/* INTRO */
/* padding-block only: the shorthand was cancelling .wrap's side gutters. */
.intro{padding-top:80px;padding-bottom:10px;text-align:center}
.intro p{font-size:1.16rem;max-width:66ch;margin:0 auto 20px;color:var(--body)}
.intro a.inline{color:var(--red);border-bottom:1px solid rgba(181,18,26,.4)}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:44px 0}
.divider span{height:1px;width:70px;background:var(--line)}
.divider .emblem{height:38px;width:auto}

/* SPLIT (two-photo compare, like the reference's before/after) */
.split{display:grid;grid-template-columns:1fr;gap:22px;padding-top:24px;padding-bottom:10px}
.split figure img{width:100%;height:300px;object-fit:cover;border-radius:2px}
.split figcaption{font-family:var(--text);font-style:italic;color:var(--muted);text-align:center;margin-top:10px;font-size:.98rem}
/* Empty image slot, same footprint as a .split figure's image so dropping the
   real photo in later does not reflow the page. */
.ph{height:300px;background:var(--marble-2);border:1px dashed var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center}
.ph span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:2;padding:18px}

/* FEATURE */
.feature{margin:70px 0;position:relative}
.feature img{width:100%;height:380px;object-fit:cover;border-radius:2px}

/* BIOS */
.bios{padding-top:40px;padding-bottom:20px}
.bio{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:56px;align-items:start}
.bio__ph{aspect-ratio:1;background:var(--marble-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;filter:grayscale(1)}
.bio__ph span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:18px;line-height:1.9}
.bio h3{font-family:var(--serif);font-size:1.6rem;color:var(--ink);font-weight:500}
.bio h4{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:6px 0 14px;font-weight:400}
.bio p{margin-bottom:12px}
.chip{display:inline-block;font-family:var(--sans);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px dashed rgba(181,18,26,.4);padding:4px 9px;margin-top:6px}

/* SECTION HEADS */
/* padding shorthand here used to zero out .wrap's 24px side gutters, so every
   "wrap sec" section ran edge-to-edge on phones. Vertical only now. */
.sec{padding-top:66px}
.sec__h{text-align:center;margin-bottom:38px}
.sec__h h1,.sec__h h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.5rem,5vw,2rem);color:var(--ink);margin-top:12px}

/* MENU */
.menu-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.menu-tabs button{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--ink);padding:9px 14px}
.menu-tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.course{max-width:720px;margin:0 auto;display:none}
.course.on{display:block}
/* Course subtitle, e.g. "Rotating Menu" under Carne / Pesce. */
.course__sub{text-align:center;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:-14px 0 22px}
/* Pre-release notice. Sized like a statement, not a form message — this is the
   whole page until the menu goes live. */
.menu-soon{max-width:720px;margin:26px auto 40px;text-align:center;background:var(--paper);
  border:1px solid var(--line);padding:64px 28px}
.menu-soon__msg{font-family:var(--serif);font-size:clamp(1.3rem,4.4vw,1.9rem);line-height:1.35;
  color:var(--ink);letter-spacing:.01em}
.dish{padding:16px 0;border-bottom:1px dotted var(--line)}
.dish__t{display:flex;align-items:baseline;gap:10px}
.dish__n{font-family:var(--serif);font-size:1.14rem;color:var(--ink)}
.dish__l{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.dish__p{font-family:var(--sans);font-size:.84rem;color:var(--red)}
.dish__d{font-style:italic;color:var(--muted);margin-top:4px}
/* TASTING PANEL — one type scale, one accent, even rhythm.
   Previously this block used five sizes, four colours and ad-hoc margins
   inherited from .eyebrow / h3 / p / .pr / .note. Everything below is stated
   explicitly so the panel reads as a single designed object. */
.tasting{max-width:720px;margin:0 auto;text-align:center;background:var(--paper);
  border:1px solid var(--line);padding:40px 28px;font-family:var(--sans)}
.tasting > * + *{margin-top:14px}                 /* even rhythm, no stray margins */
.tasting .eyebrow{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.tasting h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.25;letter-spacing:.01em;color:var(--ink)}
.tasting p{font-size:1rem;line-height:1.65;color:var(--body);max-width:52ch;margin-left:auto;margin-right:auto}
.tasting .pr{font-size:1.15rem;font-weight:500;letter-spacing:.02em;color:var(--red)}
.tasting .pair{font-size:1rem;color:var(--muted)}
.tasting .note{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:20px}
.note{text-align:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:26px}

/* GALLERY */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.grid figure{overflow:hidden;aspect-ratio:1;cursor:pointer;background:var(--marble-2)}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.grid figure:hover img{transform:scale(1.05)}

/* FORM */
.form{max-width:640px;margin:0 auto;background:var(--paper);border:1px solid var(--line);padding:28px 22px}
.f{margin-bottom:14px}
.f label{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.f input,.f textarea,.f select{width:100%;padding:11px 12px;border:1px solid var(--line);background:#fff;font-family:var(--text);font-size:1.02rem;color:var(--ink)}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--gold)}
/* Start Time is three selects (hour / minute / AM-PM) rather than <input type=time>,
   at the client's request for a plain 12-hour picker. site.js recombines them
   into the 24-hour "HH:MM" that the submit_event_enquiry RPC expects. */
.timesel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.f textarea{min-height:90px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.submit{width:100%;background:var(--red);color:#fff;border:0;padding:14px;font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.thanks{display:none;text-align:center;padding:26px 8px}
.thanks.on{display:block}
.thanks h3{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin:10px 0}

/* CTA band */
.band{margin-top:70px;background:var(--ink);color:#efe7dc;text-align:center;padding:56px 24px}
.band__in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.band h2{font-family:var(--serif);font-size:clamp(1.5rem,5vw,2rem);margin-bottom:10px;color:#fff}
.band a.btn{display:inline-block;margin-top:18px;background:var(--red);color:#fff;padding:13px 26px;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.band__addr{font-size:1.06rem;letter-spacing:.02em}
/* Opening hours as a description list: each day-range is a <dt>/<dd> pair, so
   the label and the time stay associated for screen readers instead of being
   two loose runs of text. Rows are centred under 900px and become a tidy
   two-column table once the band splits text | map. */
.hours{margin:18px auto 4px;max-width:340px;font-family:var(--sans);font-size:.92rem}
.hours > div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;
  border-bottom:1px solid rgba(239,231,220,.16)}
.hours > div:last-child{border-bottom:0}
.hours dt{color:#efe7dc;letter-spacing:.04em}
.hours dd{color:var(--gold-lt);white-space:nowrap}
/* The brief asked for the reservation call-to-action to be prominent: larger
   type, more padding and more tracking than the standard .btn. */
.band a.btn--reserve{margin-top:26px;padding:17px 46px;font-size:.78rem;letter-spacing:.28em}

/* FOOTER — address / hours / social like the reference */
footer{background:var(--paper);border-top:1px solid var(--line);padding:56px 0 0}
.fgrid{display:grid;grid-template-columns:1fr;gap:34px;text-align:center}
.fgrid h4{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fgrid p{color:var(--body);line-height:1.9}
.fmark{display:flex;flex-direction:column;align-items:center;gap:10px}
.fmark .emblem{height:50px;width:auto}
.fmark span{font-family:var(--serif);text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;color:var(--ink)}
.social{display:flex;gap:12px;justify-content:center;margin-top:12px}
.social a{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.social svg{width:16px;height:16px;fill:var(--ink)}
/* Subpage footers drop the Visit/Hours columns (client brief 2026-08-09 — the
   address and hours are shown prominently on Home instead), which leaves a
   single brand column. Centre it rather than letting it sit in column 1 of a
   three-column grid that no longer has columns 2 and 3. */
.fgrid--slim{grid-template-columns:1fr;justify-items:center;text-align:center}
.fbot{margin-top:44px;border-top:1px solid var(--line);padding:18px 24px;text-align:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;color:var(--muted)}
.fbot a{color:var(--red)}

/* LIGHTBOX / MODAL */
.lb,.modal{position:fixed;inset:0;z-index:90;background:rgba(20,16,14,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lb.on,.modal.on{display:flex}
.lb img{max-width:100%;max-height:84vh}
.lb button{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:2rem;font-family:var(--sans)}
.modal{background:rgba(20,16,14,.6)}

/* RESERVATIONS CARD
   A printed card rather than a dialog box: tall and narrow, everything centred,
   one fact per block, links underlined, nothing boxed or filled.

   The blocks are written by assets/content.js from content_blocks.reservation_popup,
   and the client can switch any of them off. That is why the spacing below is
   margin-top on each block, and never a fixed height or a gap on the container:
   a removed block takes its own space away with it instead of leaving a hole
   where it used to be. */
/* TYPE ON THE CARD — the whole system, stated once.
   The card is Bodoni. The one thing you can click is Montserrat. Sans is not
   decoration here, it is a signal: "this is a control, and it is the same
   control as the toolbar." Everything else is one serif and takes its hierarchy
   from size and colour alone.

     wordmark   1.34  caps .16em   --ink     the identity
     value      1.02  sentence     --ink     the thing itself
     quiet       .82  sentence     --muted   label, note, Close
     button       .6  caps .16em   sans      the exception, and the only one

   The family is declared HERE rather than on each child. It used to be repeated
   on every element, which is how a second family crept in unnoticed — stating it
   once makes the rule structurally true, and leaves .resbtn as the single
   visible override in this whole block. */
.rescard{position:relative;width:100%;max-width:330px;text-align:center;
  font-family:var(--serif);color:var(--ink);
  padding:20px 26px 44px;background-color:var(--cream);
  /* The wash body already uses, at a fraction of the strength — enough that a
     narrow panel of flat colour does not read as plastic. Warm-white rather
     than white now, so it lifts the cream instead of bleaching it. */
  background-image:
    radial-gradient(70% 30% at 20% 6%, rgba(255,252,244,.85), transparent 60%),
    radial-gradient(60% 30% at 85% 42%, rgba(222,212,190,.45), transparent 65%);
  box-shadow:0 26px 70px rgba(20,16,14,.42);
  /* dvh, not vh: on mobile Safari vh is the address-bar-HIDDEN height, so a card
     sized in vh is clipped at the bottom until the chrome scrolls away. */
  max-height:calc(100dvh - 40px);overflow-y:auto}
.rescard__x{position:absolute;top:14px;right:16px;background:none;border:0;padding:4px 2px}
.rescard__x:hover{color:var(--ink)}
.rescard__mark{height:46px;width:auto;margin:16px auto 0}
.rescard__name{margin-top:12px;font-weight:500;font-size:1.34rem;
  text-transform:uppercase;letter-spacing:.16em;
  /* letter-spacing lands after the final letter too, which throws a centred word
     visibly to the left. A block with text-align:center shifts its text right by
     HALF its left padding, so padding == tracking restores exactly the half that
     was lost. The two must always be changed together. */
  padding-left:.16em}
.resb{margin-top:40px;font-size:1.02rem;line-height:1.34}
.resb a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:from-font}
.resb a:hover{color:var(--red)}
/* QUIET SUPPORTING TEXT — Close, a block's label, and the note under the button.
   One rule, because they are one role: text that helps and then gets out of the
   way. They were previously three separate near-identical treatments (.82 serif,
   1.06 serif, .58 sans caps) — three ways of saying the same thing, which is
   what read as clashing. A label that matched its own value exactly was the
   other half of it: "Telefono //" and the number were the same size and colour,
   so the pair read as two equal lines instead of a label and a thing. */
.rescard__x,.resb__l,.resb__note{font-size:.82rem;color:var(--muted)}
/* A block's label lives inside the block with its value, so the two can never be
   split apart by a switched-off block landing between them. */
.resb__l{display:block;margin-bottom:4px}
.resb__note{display:block;margin-top:8px}
/* The toolbar's Reservations button, repeated inside the card so the action
   is offered in the form people already recognise from the nav. It is an <a>
   when there is somewhere to go and a <span> when there is not, so the inert
   state has nothing to click and nothing announced as a link.
   These override .resb a above, which underlines and reddens on hover. */
.resbtn{display:inline-block;margin-top:2px;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;
  padding:11px 20px;border:0;text-decoration:none}
.resbtn:hover{background:var(--red-deep);color:#fff;text-decoration:none}
.resbtn--off,.resbtn--off:hover{background:var(--muted);cursor:default}

@media(max-width:420px){
  .rescard{padding:20px 20px 40px}
  .resb{margin-top:34px;font-size:1.02rem}
}

/* Full 8-item nav only appears where it genuinely fits on one line;
   below this the burger menu takes over (avoids a 3-row cramped nav). */
@media(min-width:1080px){
  .nav__links{display:flex}
  .burger{display:none}
}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .bio{grid-template-columns:280px 1fr;gap:34px}
  .grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .fgrid{grid-template-columns:1.2fr 1fr 1fr;text-align:left}
  .fmark{align-items:flex-start}
  .social{justify-content:flex-start}
  /* Restated inside the query: the three-column rule above lands later in the
     file than .fgrid--slim and would otherwise win at equal specificity. */
  .fgrid--slim{grid-template-columns:1fr;text-align:center}
  .fgrid--slim .fmark{align-items:center}
  .fgrid--slim .social{justify-content:center}
  .f2{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* MAP (landing band) */
/* The map used to sit full-width under the text. It now shares the band with it:
   text on the left, map on the right at roughly a third of its old footprint.
   Below 900px the two stack and the map goes back to full width, where a small
   map would be unreadable on a phone. */
.mapwrap{max-width:960px;margin:6px auto 0}
.map-frame{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:4px;overflow:hidden;height:340px;background:#12100e}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2) contrast(1.03)}
@media(min-width:900px){
  .band__in{grid-template-columns:2fr 1fr;gap:48px;text-align:left}
  .band__t{text-align:left}
  .mapwrap{max-width:none;margin:0}
  .map-frame{height:300px}
  /* Left-aligned with the rest of the band once the layout splits. */
  .hours{margin-left:0;max-width:400px}
}
.map-open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);padding:11px 20px}
.map-open:hover{background:rgba(255,255,255,.12)}

/* INNER PAGES (no hero) */
.pagetop{padding-top:30px}
@media(min-width:900px){ .pagetop{padding-top:46px} }

/* PRIVATE DINING intro + form errors */
.pd-intro{max-width:66ch;margin:0 auto 38px;text-align:center}
.pd-intro p{font-size:1.06rem;color:var(--body)}
.formerr{display:none;font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--red);
  background:rgba(181,18,26,.07);border:1px solid rgba(181,18,26,.3);padding:10px 12px;margin:4px 0 10px}
.formerr.on{display:block}
.submit[disabled]{opacity:.6;cursor:default}

/* SWAG + PRESS (content-driven) */
.lede{text-align:center;max-width:60ch;margin:0 auto 40px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.card__img{aspect-ratio:1;overflow:hidden;background:var(--marble-2)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__b{padding:18px 18px 20px}
.card__b h3{font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--ink)}
.card__b p{font-size:.94rem;color:var(--muted);margin-top:6px}
.card__p{margin-top:12px;font-family:var(--sans);font-size:1rem;color:var(--red)}
.card__p span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card__p .soldout{color:var(--ink);border:1px solid var(--line);padding:2px 7px;margin-left:6px}

.presslist{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.press{padding:24px 0;border-bottom:1px dotted var(--line)}
.press h3{font-family:var(--serif);font-size:1.16rem;font-weight:500;color:var(--ink)}
.press__m{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:6px 0 10px}
.press p{color:var(--muted);font-style:italic}
.press__go{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.press a:hover h3{color:var(--red)}

/* Press items that have a screenshot (text-only items keep the original
   layout, exactly as .dish--img does on the menu). The screenshot is a
   click cue, not the content: kept small so the headline stays the thing
   the eye lands on, and cropped to 4:3 so a tall phone screenshot and a
   wide desktop one still line up down the column.

   220px is measured, not chosen by eye: checked against a real full-width
   desktop capture of a City Life article, where 180px reduced the masthead
   to an unreadable smudge and 200px was still borderline. A phone-width
   screenshot reads clearly at any of these — it is the wide desktop capture
   that sets the floor. */
.press--img > a,.press--img{display:flex;gap:20px;align-items:flex-start}
.press--img > a{width:100%}
.press__i{flex:0 0 auto;width:220px;aspect-ratio:4/3;overflow:hidden;background:var(--marble-2);border:1px solid var(--line)}
.press__i img{width:100%;height:100%;object-fit:cover;object-position:top}
.press__c{flex:1;min-width:0}
.press--img > a:hover .press__i{border-color:var(--gold-lt)}
/* Stacked below 560px, but as a slim band rather than a full 4:3 block: at
   phone width that would fill half the screen and push the headline under the
   fold. object-position:top keeps the masthead — the part that identifies the
   publication — inside the crop. */
@media(max-width:560px){
  .press--img > a,.press--img{flex-direction:column;gap:14px}
  .press__i{width:100%;aspect-ratio:2/1}
}

/* Menu dishes that have a photo (text-only dishes keep the original layout) */
.dish--img{display:flex;gap:16px;align-items:flex-start}
.dish__i{width:76px;height:76px;object-fit:cover;border-radius:2px;flex:0 0 auto;background:var(--marble-2)}
.dish__c{flex:1;min-width:0}


/* FOOTER STRIPE BAND — 7 equal vertical stripes, hard-edged, alternating
   Espresso Bark / Quietly Violet and ending on Espresso Bark (4 dark, 3 light,
   symmetric). Full-bleed: the negative margins cancel .fbot's 18px/24px padding
   so it runs edge-to-edge and sits flush under the hairline rule.
   One gradient, no extra elements or images, so it reflows to any viewport.
   The owner asked for it BIG — do not shrink it without being asked.
   2026-08-09: doubled 48px -> 96px at the client's request, and mirrored at the
   top of every page as .tstripes (see below). The gradient itself is shared. */
.fstripes,.tstripes{
  width:auto;
  height:96px;
  margin:-18px -24px 20px;
  background:linear-gradient(to right,
    var(--espresso-bark)   0%,       var(--espresso-bark)  14.2857%,
    var(--quietly-violet) 14.2857%,  var(--quietly-violet) 28.5714%,
    var(--espresso-bark)  28.5714%,  var(--espresso-bark)  42.8571%,
    var(--quietly-violet) 42.8571%,  var(--quietly-violet) 57.1429%,
    var(--espresso-bark)  57.1429%,  var(--espresso-bark)  71.4286%,
    var(--quietly-violet) 71.4286%,  var(--quietly-violet) 85.7143%,
    var(--espresso-bark)  85.7143%,  var(--espresso-bark)  100%);
}
/* Top mirror of the footer band. It sits ABOVE the sticky nav in source order,
   so it scrolls away while the nav stays pinned — the band is a masthead, not a
   permanent 96px bite out of every viewport. No negative margins here: unlike
   .fstripes it has no padded parent to cancel out. */
.tstripes{margin:0}