/* ==========================================================================
   Di Papa's Italian Restaurant
   Design system: cream paper, near black ink, and the restaurant's own red.
   Palette is grounded in their assets, see the token block below. Fraunces
   (display, italic accent) + Manrope (body/UI).
   Vanilla CSS, no framework. Mobile first, 360px -> 1440px.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette.
     Grounded in the restaurant's own assets rather than invented. Their previous
     site's stylesheet contained exactly two colours that were not Bootstrap
     defaults: #C51414 and #792A0C. Their logo is monochrome white, so it offers
     no hue at all. The room itself is the real identity: red banquettes, black
     and white checked cloths, dark wood, warm cream walls and amber pendants.
     The espresso brown and olive green used before this were in neither the
     logo nor the site, which is why the green read as neon against the food. */
  --cream: #FBF8F1;
  --cream-deep: #F4EFE4;
  --ink: #1C1917;          /* dark wood and the checks, not chocolate */
  --ink-soft: #4A403A;
  --red: #C51414;          /* theirs */
  --rust: #792A0C;         /* theirs */
  --rust-warm: #A6371A;
  --gold: #D9A441;         /* the pendant lamps over their tables */

  /* Legacy aliases. The olive tokens are referenced in a dozen places; rather
     than rewrite each one they now resolve to the grounded palette. Do not
     reintroduce a green here. */
  --olive: var(--rust);
  --olive-light: var(--gold);
  --olive-deep: #2E1710;   /* deep band ground, used by .section--olive */

  --line: #6B6257;
  --white: #FFFDF9;

  /* Semantic */
  --bg: var(--cream);
  --bg-alt: var(--cream-deep);
  --text: var(--ink);
  --text-muted: var(--line);
  --accent: var(--rust);
  --accent-strong: var(--olive-deep);
  --cta: var(--red);
  --cta-hover: var(--rust);
  --border: rgba(28, 25, 23, 0.14);
  --surface: var(--white);

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --section-pad: clamp(4.5rem, 8vw, 8.5rem);
  --container-max: 1240px;
  --container-narrow: 760px;
  --radius: 4px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-soft: 0 18px 44px -22px rgba(59, 35, 19, 0.32);
  --shadow-card: 0 12px 28px -16px rgba(59, 35, 19, 0.24);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Gutter: single source for horizontal insets. Never write a padding
     shorthand on an element that also carries .container. */
  --gutter: 1.25rem;
}
@media (max-width: 560px) {
  :root { --gutter: 1.5rem; }
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The mobile nav drawer is position:fixed and parked off screen with
   translateX(100%). Chrome still counts it in the document's scrollable width,
   which made the whole page scroll sideways by 294px at 375px even with the
   drawer shut. `clip` rather than `hidden`: hidden would turn these into scroll
   containers and break the two `position: sticky` elements (the site header and
   the menu subnav). Measured before 294px, after 0px, drawer still opens. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Cormorant has a small x-height and light hairlines below 600, so the
     display face only ever runs at 600 and 700 and every clamp below is about
     12% larger than the Bodoni sizes it replaced. */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* Headings were dropping a single short word onto a line of its own:
     "practice", "table", "1997.". Balance spreads the words across the lines
     it uses, which is cheaper and more robust than hand tuning each string. */
  text-wrap: balance;
}
h1, h2 { line-height: 1.05; }
/* Bodoni reads richer light: section titles set to weight 400 with slightly
   tighter tracking than the h1/h3/h4 base. Selectors that already declare
   their own font-weight (menu category italics, footer/nav smallcaps) win on
   specificity and are unaffected. */
h2 { font-weight: 600; letter-spacing: 0; }
/* On photo and dark bands the type must hold against the image. */
.band h2, .band h3 { font-weight: 700; }
.band p { font-weight: 500; }
p {
  max-width: 65ch;
  text-wrap: pretty;   /* stops a one word last line in body copy */
}

:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 400;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-pad); }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--ink);
  color: var(--cream);
}
.section--dark .eyebrow { color: var(--olive-light); }
.section--olive {
  background: var(--olive-deep);
  color: var(--cream);
}

.section-lede--center { margin-inline: auto; }
/* Chapter hairline: a single top rule on a section that otherwise has no
   photo band or eyebrow to announce it (La Piccola, Careers), so the section
   reads as the start of a chapter rather than a floating block. The section's
   own --section-pad already supplies the padding above it. */
.chapter-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
/* .btn--outline (section 4) also sets color: var(--ink) at equal specificity
   and comes later in the file, which silently won and made "Email Us" in
   Private Events render near-invisible ink-on-ink text. Chaining the
   selector to .btn--outline.btn--outline-on-dark outranks it regardless of
   source order. Found while wiring the same combination into the new menu
   hero band. */
.btn--outline.btn--outline-on-dark { border-color: rgba(251,248,241,0.55); color: var(--cream); }
.section-head { max-width: 620px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { max-width: 620px; margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.4rem;
}

h2.section-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
}
h3.card-title {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.section-lede {
  margin-top: 1rem;
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 56ch;
}

.italic-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--cta);
  line-height: 1.15;
  padding-bottom: 0.15em;
  display: inline-block;
}

/* Bodoni Moda is high contrast and unreadable below 1.35rem. Anything that
   used the display face at a smaller size moves here instead: Manrope 700,
   uppercase, tracked out. Used for the header/footer wordmark, the private
   events row headings and the menu subgroup labels. */
.smallcaps {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform 0.18s var(--ease-out), background-color 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--cta);
  color: var(--white);
  border-color: var(--cta);
}
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--cream); }

.btn--on-dark {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 248, 241, 0.55);
}
.btn--on-dark:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* On a photo band the button has no background of its own, so its contrast is
   whatever pixel happens to sit behind it. Measured 2.63:1 for the hero's
   "Order Online" label against a bright patch of the food photograph. A
   translucent ink fill gives it a backdrop it controls. Solid coloured
   sections, such as the olive menu teaser, keep the plain outline. */
.band .btn--on-dark,
.band .btn--outline-on-dark {
  background: rgba(35, 20, 10, 0.62);
  border-color: rgba(251, 248, 241, 0.72);
}
.band .btn--on-dark:hover,
.band .btn--outline-on-dark:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn--ghost {
  background: transparent;
  color: var(--cta);
  border-color: transparent;
  padding: 0.6rem 0.2rem;
  border-radius: 0;
  border-bottom: 2px solid currentColor;
}
.btn--ghost:hover { color: var(--cta-hover); }

.btn--sm { padding: 0.65rem 1.25rem; font-size: 0.9rem; }

/* Plain inline link, used where a CTA button would repeat one that already
   exists elsewhere on the page (Take Out Offers links to the same Order
   Online destination as the header and hero). On-dark styling: this only
   appears on the specials photo band. */
.text-link {
  color: var(--cream);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { opacity: 0.8; }

/* -------------------------------------------------------------------------
   5. Header / Nav
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(251, 248, 241, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), padding 0.25s var(--ease-out);
}
.site-header.is-scrolled {
  border-color: var(--border);
  box-shadow: 0 8px 24px -18px rgba(59, 35, 19, 0.4);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: padding 0.25s var(--ease-out);
}
.site-header.is-scrolled .header-inner { padding-block: 0.55rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.brand img {
  height: 52px;
  width: auto;
  transition: height 0.25s var(--ease-out);
}
.site-header.is-scrolled .brand img { height: 42px; }
/* Bodoni Moda does not read below 1.35rem, and the wordmark sits at 1.05rem
   next to the logo mark, so it moves to Manrope smallcaps rather than grow
   into the logo's space. */
.brand-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}
.brand-text span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.15rem; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}
.main-nav a:not(.btn) {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  position: relative;
  padding-block: 0.3rem;
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--ease-out);
}
.main-nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 0.9rem; }
.header-call {
  display: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
}
.hamburger span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100dvh;
    width: min(78vw, 360px);
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 5.5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease-out);
    box-shadow: -20px 0 40px -20px rgba(59,35,19,0.35);
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a:not(.btn) { font-size: 1.15rem; padding-block: 0.65rem; width: 100%; border-bottom: 1px solid var(--border); }
  .main-nav .btn { margin-top: 1.25rem; width: 100%; }
  .hamburger { display: flex; }
  .header-actions .btn--primary.header-order { display: none; }
}
@media (min-width: 941px) {
  .header-call { display: inline-flex; align-items: center; gap: 0.4rem; }
  /* Call + Order Online already live in .header-actions at desktop widths;
     the copies inside .main-nav exist only for the mobile drawer, so hide
     them here to avoid duplicate CTAs and header overflow. */
  .main-nav .btn { display: none; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(59, 35, 19, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
  z-index: 190;
}
.nav-scrim.is-visible { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------------------
   5b. Full-bleed band component
   Reused by the hero, the story photo, the lunch band, and the specials
   band. One implementation: a real <img>, a scrim for readability, and an
   inner container for the content. Every band strengthens its scrim on
   mobile, since the crop tightens and there is more detail behind the copy.
   ------------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
}
.band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Object-position tuned per band so the crop keeps its focal point where
   the copy is not sitting. */
.band--hero .band__media img { object-position: center 42%; }
.band--lunch .band__media img { object-position: center 55%; }
.band--specials .band__media img { object-position: center 18%; }
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.band__inner {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
/* Copy sits low in the band rather than dead centre. The hero photograph is an
   overhead of a full table, so its subject is in the upper two thirds: anchoring
   the text to the bottom keeps the food visible instead of laying a scrim over
   the middle of it, and it stops the hero reading as a centred template block. */
.hero.band--hero {
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero .band__scrim {
  background:
    linear-gradient(to right, rgba(35, 20, 10, 0.88) 0%, rgba(35, 20, 10, 0.72) 45%, rgba(35, 20, 10, 0.32) 100%),
    linear-gradient(to top, rgba(35, 20, 10, 0.4) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(35, 20, 10, 0.4) 0%, transparent 35%);
}
.hero .band__inner { width: 100%; padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* The hero carried a second copy of the logo and a "Kendall, Miami" overline.
   The logo already sits in the header two inches away, and the overline said
   nothing the sub line does not. Both removed: the headline now opens the page. */
.hero-copy { max-width: 680px; }
.hero-copy .eyebrow { color: var(--cream); }
.hero h1 {
  font-size: clamp(2.9rem, 6vw, 4.7rem);
  color: var(--cream);
  /* Without this the headline orphaned "for" onto a line of its own at 1280px.
     Balance spreads the words evenly across the lines it does use. */
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--olive-light);
  padding-bottom: 0.08em;
  display: inline-block;
}
.hero-sub {
  margin-top: 1.15rem;
  font-size: 1.15rem;
  color: rgba(251, 248, 241, 0.9);
  max-width: 44ch;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}
@media (max-width: 900px) {
  .hero.band--hero { min-height: clamp(520px, 74vh, 680px); }
}
@media (max-width: 560px) {
  .hero.band--hero { min-height: clamp(480px, 68vh, 600px); }
  .hero .band__scrim {
    background:
      linear-gradient(to right, rgba(35, 20, 10, 0.94) 0%, rgba(35, 20, 10, 0.86) 60%, rgba(35, 20, 10, 0.62) 100%),
      linear-gradient(to top, rgba(35, 20, 10, 0.5) 0%, transparent 40%),
      linear-gradient(to bottom, rgba(35, 20, 10, 0.5) 0%, transparent 35%);
  }
}

/* -------------------------------------------------------------------------
   7. Story / About
   ------------------------------------------------------------------------- */
.story-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: 0;
  align-items: start;
  text-align: left;
}
.story-head { grid-column: 1; }
.story-text { grid-column: 2; }
.story-layout .eyebrow { color: var(--rust); }
.story-layout h2 {
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  text-wrap: balance;
}
.story-body {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.story-body + .story-body { margin-top: 1.1rem; }

/* The quote is typography, not a caption. It sits under a hairline across
   both columns, left aligned, balanced so no line is left with one word. */
blockquote.pull-quote {
  grid-column: 1 / -1;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  max-width: none;
  padding-right: 30%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}
blockquote.pull-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: var(--text-muted);
}
@media (max-width: 860px) {
  .story-layout { grid-template-columns: 1fr; row-gap: 1.4rem; }
  .story-head, .story-text, blockquote.pull-quote { grid-column: 1; }
  blockquote.pull-quote { padding-right: 0; }
}

/* -------------------------------------------------------------------------
   8. Signature dishes: the carte
   Left, one large photo. Right, a typeset list of the same dishes. Hovering
   or focusing a row cross fades the photo (assets/js/main.js). No boxes, no
   radius on the rows, no hover lift: this is a printed list, not a card grid.
   ------------------------------------------------------------------------- */
.carte {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.carte-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.carte-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s var(--ease-out);
}
.carte-photo.is-fading img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .carte-photo img { transition: none; }
}
.carte-list { display: grid; }
.carte-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--border);
}
.carte-list a.carte-row:last-child { border-bottom: 1px solid var(--border); }
.carte-row-text { display: flex; flex-direction: column; gap: 0.35rem; }
.carte-name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  transition: color 0.18s var(--ease-out);
}
.carte-row:hover .carte-name,
.carte-row:focus-visible .carte-name { color: var(--cta); }
.carte-desc { font-size: 0.92rem; color: var(--text-muted); max-width: 42ch; }
.carte-price {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rust);
  white-space: nowrap;
}

@media (min-width: 860px) {
  /* A portrait plate photo beside a list reads as a menu card, not a web
     tile. Below 860px the photo stacks above the list and stays 4 / 3. */
  .carte-photo { aspect-ratio: 3 / 4; }
}
@media (max-width: 860px) {
  .carte { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   8b. Lunch band
   ------------------------------------------------------------------------- */
.band--lunch {
  min-height: clamp(260px, 30vw, 340px);
  display: flex;
  align-items: center;
}
.band--lunch .band__scrim {
  background: linear-gradient(to right, rgba(35, 20, 10, 0.82) 0%, rgba(35, 20, 10, 0.6) 45%, rgba(35, 20, 10, 0.25) 100%);
}
.band--lunch .band__inner { width: 100%; }
.lunch-copy { max-width: 560px; }
.lunch-copy h2 { color: var(--cream); font-size: clamp(2rem, 3.4vw, 2.6rem); }
.lunch-copy p { margin-top: 0.7rem; color: rgba(251, 248, 241, 0.88); font-size: 1.02rem; }
.lunch-copy .btn { margin-top: 1.3rem; }

@media (max-width: 560px) {
  .band--lunch { min-height: clamp(300px, 42vw, 380px); }
  .band--lunch .band__scrim {
    background: linear-gradient(to right, rgba(35, 20, 10, 0.92) 0%, rgba(35, 20, 10, 0.8) 60%, rgba(35, 20, 10, 0.5) 100%);
  }
}

/* -------------------------------------------------------------------------
   8c. Specials band
   ------------------------------------------------------------------------- */
.band--specials .band__scrim {
  background: linear-gradient(180deg, rgba(35, 20, 10, 0.78) 0%, rgba(35, 20, 10, 0.42) 55%, rgba(35, 20, 10, 0.6) 100%);
}
.band--specials .band__inner { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.band--specials .eyebrow { color: var(--olive-light); }
.band--specials .section-title { color: var(--cream); }

/* A single left-aligned list, not three boxed cards over the photo. */
.specials-block {
  margin-top: 2rem;
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}
.specials-item {
  padding-block: 1.3rem;
  border-top: 1px solid rgba(251, 248, 241, 0.22);
}
.specials-item:last-child { border-bottom: 1px solid rgba(251, 248, 241, 0.22); }
.specials-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--cream);
  line-height: 1.2;
}
.specials-item p { margin-top: 0.5rem; font-size: 1rem; color: var(--cream); }
.specials-item p .text-link { margin-left: 0.15em; }
@media (max-width: 560px) {
  .band--specials .band__scrim {
    background: linear-gradient(180deg, rgba(35, 20, 10, 0.88) 0%, rgba(35, 20, 10, 0.58) 55%, rgba(35, 20, 10, 0.74) 100%);
  }
}

/* -------------------------------------------------------------------------
   9. Menu teaser band
   ------------------------------------------------------------------------- */
.menu-teaser { position: relative; }
.band--menu-teaser .band__media img { object-position: center 40%; }
/* 0.72 ink scrim over the flatlay texture so cream text clears 4.5:1. */
.band--menu-teaser .band__scrim { background: rgba(28, 25, 23, 0.72); }
.band--menu-teaser .band__inner { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.menu-teaser-inner { max-width: 640px; }
.menu-teaser h2 { color: var(--cream); font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.menu-teaser .section-lede { color: rgba(251,248,241,0.82); }
/* An index of links, not a row of pill buttons: no background, no radius,
   a vertical hairline between entries instead. */
.menu-index {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.menu-index a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  padding-inline: 0.9rem;
}
.menu-index a:first-child { padding-left: 0; }
.menu-index a:not(:first-child) { border-left: 1px solid rgba(251,248,241,0.35); }
.menu-index a:hover { text-decoration: underline; }
.menu-teaser-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  align-items: center;
}

/* -------------------------------------------------------------------------
   10. La Piccola
   ------------------------------------------------------------------------- */
.piccola-band {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.piccola-visual { position: relative; }
.piccola-photo {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.piccola-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piccola-badge {
  position: absolute;
  left: -1rem;
  bottom: -1.2rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--cream-deep);
  padding: 6px;
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.piccola-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(59,35,19,0.18)); }
.piccola-copy .eyebrow { color: var(--rust); }
.piccola-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.piccola-copy p { margin-top: 0.9rem; color: var(--ink-soft); font-size: 1.05rem; }
.piccola-copy .btn { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .piccola-band { grid-template-columns: 1fr; text-align: center; }
  .piccola-badge { width: 76px; height: 76px; left: 50%; bottom: -1rem; transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------
   11. Private events
   ------------------------------------------------------------------------- */
.events-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Rows, not icon cards. */
.event-list { display: grid; margin-top: 1.6rem; }
.event-item {
  padding-block: 1.1rem;
  border-top: 1px solid var(--border);
}
.event-item:last-child { border-bottom: 1px solid var(--border); }
.event-item h3 { color: var(--ink); }
.event-item p { margin-top: 0.3rem; font-size: 0.95rem; color: var(--text-muted); }

.events-cta {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-sm);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.events-cta h3 { font-weight: 600; font-size: 1.85rem; }
.events-cta p { margin-top: 0.8rem; color: rgba(251,248,241,0.78); }
.events-cta .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

@media (max-width: 860px) {
  .events-layout { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   12. Find us
   ------------------------------------------------------------------------- */
.find-us-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}
.find-us-info .eyebrow { color: var(--olive); }
.info-block { margin-top: 1.6rem; display: grid; gap: 1.3rem; }
.info-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-row .ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rust);
}
.info-row .ico svg { width: 18px; height: 18px; }
.info-row h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; }
.info-row p, .info-row a { font-size: 0.98rem; color: var(--ink-soft); }
.info-row a:hover { color: var(--cta); }

.social-row { display: flex; gap: 0.7rem; margin-top: 1.8rem; }
.social-row a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.social-row a:hover { background: var(--cta); color: var(--white); }
.social-row svg { width: 19px; height: 19px; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  min-height: 340px;
  border: 1px solid var(--border);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

@media (max-width: 860px) {
  .find-us-layout { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   13. Careers
   ------------------------------------------------------------------------- */
.careers-band {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.careers-band h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.careers-band p { margin: 1rem auto 0; color: var(--ink-soft); font-size: 1.05rem; }
.careers-band .btn { margin-top: 1.6rem; }

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  /* Extra bottom padding keeps the copyright row clear of the fixed
     accessibility button when the page is scrolled all the way down. */
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4.5rem, 10vw, 6rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.7rem; }
.footer-brand img { height: 46px; width: auto; }
/* Same reasoning as .brand-text: below Bodoni's 1.35rem floor, moved to smallcaps. */
.footer-brand-text { font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-tagline { margin-top: 1rem; color: rgba(251,248,241,0.68); font-size: 0.94rem; max-width: 32ch; }
/* Footer column titles were promoted from h4 to h2: an h4 straight after the
   page's last h2 is a heading level skip, which showed up on privacy.html. */
.footer-col h4,
.footer-col .footer-col-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251,248,241,0.7);
  margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a, .footer-col p { font-size: 0.95rem; color: rgba(251,248,241,0.88); }
.footer-col a:hover { color: var(--cream); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(251,248,241,0.1);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--olive); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251,248,241,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(251,248,241,0.6);
}
.footer-bottom button {
  background: none;
  border: none;
  color: rgba(251,248,241,0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom button:hover { color: var(--cream); }
.footer-credit {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 241, 0.5);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer-credit:hover, .footer-credit:focus-visible { color: var(--cream); }
@media (max-width: 640px) { .footer-credit { margin-left: 0; } }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* -------------------------------------------------------------------------
   15. Scroll reveal
   ------------------------------------------------------------------------- */
/* The hiding is scoped to html.js-reveal, a class added by an inline script in
   the head and removed again by the script tag's own onerror. Content is
   therefore visible by default and only hidden while a live script is around to
   reveal it again. Unscoped `[data-reveal] { opacity: 0 }` means that if
   main.js ever fails to load, every section below the hero stays blank forever
   and the page still returns 200. */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   16. Menu page
   ------------------------------------------------------------------------- */
.band--menu-hero {
  min-height: clamp(300px, 34vw, 420px);
  display: flex;
  align-items: center;
}
.band--menu-hero .band__media img { object-position: center 40%; }
.band--menu-hero .band__scrim { background: rgba(28, 25, 23, 0.68); }
.menu-hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) 1rem;
  text-align: center;
  width: 100%;
}
.menu-hero .eyebrow { color: var(--olive-light); }
.menu-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.menu-hero p { margin: 1rem auto 0; max-width: 56ch; color: rgba(251, 248, 241, 0.9); font-size: 1.05rem; }
.menu-hero-actions {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.menu-subnav {
  position: sticky;
  /* Stacks directly under the sticky header instead of overlapping it.
     --header-h is kept in sync with the header's real height by main.js. */
  top: var(--header-h, 80px);
  z-index: 150;
  background: rgba(251, 248, 241, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.menu-subnav-scroll {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-block: 0.8rem;
  scrollbar-width: none;
}
.menu-subnav-scroll::-webkit-scrollbar { display: none; }
/* Smallcaps links with a hairline between them, not filled pills. The active
   state is an underline in the brand red, not a solid background. */
.menu-subnav-scroll a {
  flex-shrink: 0;
  position: relative;
  padding-inline: 0.9rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.menu-subnav-scroll a:not(:first-child) { border-left: 1px solid var(--border); }
.menu-subnav-scroll a:hover { color: var(--ink); }
.menu-subnav-scroll a.is-active { color: var(--ink); }
.menu-subnav-scroll a.is-active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: -0.3rem;
  height: 2px;
  background: var(--red);
}

.menu-category {
  padding-block: clamp(2.75rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h, 80px) + 4rem);
}
.menu-category:last-of-type { border-bottom: none; }
.menu-category-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  align-items: center;
  margin-bottom: 1.9rem;
}
.menu-category-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-card);
}
.menu-category-head .it {
  grid-column: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: var(--cta);
  padding-bottom: 0.1em;
  margin: 0;
  display: inline-block;
}
.menu-category-head .en {
  grid-column: 2;
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.menu-category-note {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (max-width: 560px) {
  .menu-category-thumb { width: 60px; height: 60px; }
}

.menu-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 1.7rem;
}
.menu-item { break-inside: avoid; }
.menu-item-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.menu-item-name {
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--ink);
}
.menu-item-leader {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  min-width: 12px;
  transform: translateY(-0.3em);
}
.menu-item-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--rust);
  white-space: nowrap;
}
.menu-item-price.tbd {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  font-style: italic;
}
.menu-item-desc {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 46ch;
}

@media (max-width: 720px) {
  .menu-items { grid-template-columns: 1fr; }
}

/* Pizza table */
.pizza-table-wrap { overflow-x: auto; margin-top: 0.5rem; }
table.pizza-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
table.pizza-table th, table.pizza-table td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  font-size: 0.95rem;
}
table.pizza-table thead th {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
table.pizza-table thead th:not(:first-child),
table.pizza-table td:not(:first-child) { text-align: right; }
table.pizza-table tbody tr { border-bottom: 1px solid var(--border); }
table.pizza-table tbody tr:last-child { border-bottom: none; }
table.pizza-table td:first-child { font-weight: 700; color: var(--ink); }
table.pizza-table td.tbd { color: var(--text-muted); font-style: italic; font-size: 0.85rem; }

.topping-grid {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.topping-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.topping-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.topping-card .price-line { font-size: 0.85rem; color: var(--rust); font-weight: 700; margin-bottom: 0.6rem; }
.topping-card p { font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 640px) { .topping-grid { grid-template-columns: 1fr; } }

.menu-advisory {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h, 80px) + 2rem);
}
.menu-advisory-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.8rem;
}
.menu-advisory p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.menu-advisory p + p { margin-top: 0.5rem; }
.menu-advisory-mark { color: var(--rust); font-weight: 700; }
.advisory-link { color: var(--rust); text-decoration: none; }
.advisory-link:hover, .advisory-link:focus-visible { text-decoration: underline; }

.menu-pdf-band {
  text-align: center;
  padding-block: clamp(3rem, 5vw, 4rem);
}
.menu-pdf-band p { margin: 0.8rem auto 0; max-width: 48ch; color: var(--text-muted); }
.menu-pdf-band .btn { margin-top: 1.4rem; }

/* -------------------------------------------------------------------------
   19. Utility
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .section { padding-block: clamp(2.75rem, 9vw, 4rem); }
}