/* ==========================================================================
   COVIELLO — Restaurant & Wine Bar, Durham
   Design system: "La Persiana" — lime-plaster walls, Naples yellow,
   Pompeian red, shutter green. Light through louvred shutters.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --calce:        #F0E9DA;   /* lime plaster wall */
  --calce-warm:   #E7DCC6;   /* sunlit plaster */
  --travertino:   #D3C4A8;   /* stone */
  --persiana:     #2E4034;   /* shutter green — primary dark */
  --persiana-dk:  #1E2A22;
  --giallo:       #D9A22E;   /* giallo napoletano */
  --pompeiano:    #8E3B2C;   /* rosso pompeiano */
  --inchiostro:   #1A1712;   /* ink */
  --muted:        #5A5342;   /* AA on both plaster and calce */

  /* Type */
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --step-4:  clamp(3rem, 2rem + 5.5vw, 7.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --max: 1240px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load bearing. The width/height attributes on every <img> map
   to presentational hints, so without this the attribute height wins and every
   aspect-ratio rule below is silently ignored. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--giallo); color: var(--inchiostro); }

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

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--persiana); color: var(--calce); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* ---------- Typographic helpers ---------- */
.display {
  font-family: var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pompeiano);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; flex: none;
}
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}
em.it { font-family: var(--display); font-style: italic; letter-spacing: 0; }

/* ---------- Signature: the shutter light ---------- */
/* Warm louvred light falling across a surface, as through a persiana. */
.shutterlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
  mix-blend-mode: soft-light;
}
.shutterlight::before {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 90%; height: 190%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 233, 178, 0) 0px,
    rgba(255, 233, 178, 0) 26px,
    rgba(255, 226, 150, .95) 26px,
    rgba(255, 226, 150, .95) 62px
  );
  transform: rotate(-18deg);
  filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 20% 25%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 70% at 20% 25%, #000 0%, transparent 78%);
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--persiana);
  --fg: var(--calce);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.9rem;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--bg);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--giallo);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--inchiostro); border-color: var(--giallo); }
.btn:hover::after { transform: translateY(0); }
.btn--ghost { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.btn--light { --bg: var(--calce); --fg: var(--persiana-dk); }

.arrow { display: inline-block; transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  color: var(--calce);
  transition: background .5s var(--ease), color .5s var(--ease),
              padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid {
  background: var(--calce);
  color: var(--inchiostro);
  padding-block: .75rem;
  box-shadow: 0 1px 0 rgba(26,23,18,.12);
}
.brand {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.brand small {
  display: block;
  font-family: var(--body);
  font-size: .5rem;
  letter-spacing: .34em;
  opacity: .75;
  margin-top: .38rem;
  font-weight: 500;
}

/* Tricolore on the closing letters of the wordmark.
   The header runs two states, so the flag can't be one fixed set of hexes:
   over the hero photo it needs brightening to survive the dark image, and on
   the solid cream header the white letter would disappear entirely — there it
   falls back to ink so the mark never reads with a hole in it. */
.tri { transition: color .5s var(--ease); }
.tri--g { color: #4FBE80; }
.tri--w { color: #FFFFFF; }
.tri--r { color: #E8615A; }
.site-header.is-solid .tri--g { color: #008C45; }
.site-header.is-solid .tri--w { color: var(--inchiostro); }
.site-header.is-solid .tri--r { color: #C0392B; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-block: .3rem;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--giallo); }
.site-header.is-solid .nav a[aria-current="page"] { color: var(--pompeiano); }
.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; padding: .8rem 1.4rem; } }

/* Mobile nav */
.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit;
}
.burger span {
  display: block; width: 24px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: var(--persiana);
    color: var(--calce);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--ease);
    z-index: 90;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav a { font-family: var(--display); font-size: var(--step-2); letter-spacing: .04em; text-transform: none; }
  .nav a[aria-current="page"] { color: var(--giallo); }
  .burger { position: relative; z-index: 95; }
}
@media (min-width: 900px) { .burger { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--persiana-dk);
  color: var(--calce);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(.92) contrast(1.02);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20,26,21,.97) 0%, rgba(20,26,21,.88) 26%, rgba(20,26,21,.6) 52%, rgba(20,26,21,.34) 100%),
    linear-gradient(to right, rgba(20,26,21,.72), rgba(20,26,21,.15) 70%);
}
.hero__inner { padding-block: clamp(3rem, 9vh, 6rem) clamp(3rem, 8vh, 5rem); }
.hero h1 {
  font-family: var(--display);
  font-size: var(--step-4);
  letter-spacing: -0.035em;
  line-height: .88;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero h1 em {
  display: block;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--giallo);
  font-size: .38em;
  margin-top: .35em;
  padding-left: .12em;
}
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem;
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,233,218,.82);
  margin-bottom: 2.4rem;
}
.hero__meta .dot { width: 4px; height: 4px; background: var(--giallo); border-radius: 50%; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }


/* Scroll cue */
.cue {
  /* decorative */
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vh, 5rem);
  display: none;
  writing-mode: vertical-rl;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(240,233,218,.72);
  align-items: center;
  gap: 1rem;
}
.cue::after {
  content: ""; width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--giallo), transparent);
}
@media (min-width: 900px) { .cue {
  /* decorative */ display: flex; } }

/* ---------- Page banner (inner pages) ---------- */
.banner {
  position: relative;
  background: var(--persiana);
  color: var(--calce);
  padding: clamp(8rem, 18vh, 12rem) 0 clamp(3.5rem, 8vh, 5.5rem);
  overflow: hidden;
}
.banner h1 {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.banner p { color: rgba(240,233,218,.82); max-width: 52ch; margin-top: 1.2rem; }
.banner .eyebrow { color: var(--giallo); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
.section--plaster { background: var(--calce-warm); }
.section--dark { background: var(--persiana); color: var(--calce); }
.section--dark .eyebrow { color: var(--giallo); }
.section--dark .lede { color: rgba(240,233,218,.82); }
.section--ink { background: var(--inchiostro); color: var(--calce); }

.section-title {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  max-width: 20ch;
  /* Bodoni's display cut goes hairline at large optical sizes; pin the opsz
     axis low for the sturdier text cut, then lift it off the plaster. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 16;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(26, 23, 18, .18);
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .section-title { margin-inline: auto; }
.section-head--split {
  display: grid;
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  align-items: end;
}
@media (min-width: 820px) {
  .section-head--split { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- Intro / manifesto ---------- */
.manifesto {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .manifesto { grid-template-columns: 1fr 1fr; } }
.manifesto__text p { max-width: 48ch; color: var(--muted); }
.manifesto__figure { position: relative; }
.manifesto__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.figure-tag {
  position: absolute;
  bottom: 0; left: 0;
  transform: translate(-8%, 34%);
  background: var(--pompeiano);
  color: var(--calce);
  padding: 1.1rem 1.4rem;
  max-width: 15rem;
}
.figure-tag strong {
  display: block;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.figure-tag span {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; opacity: .92;
}
@media (max-width: 640px) { .figure-tag { transform: translate(0, 20%); max-width: none; } }

/* ---------- Offer cards ---------- */
.cards {
  display: grid;
  gap: 1px;
  background: rgba(26,23,18,.14);
  border-block: 1px solid rgba(26,23,18,.14);
}
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--calce);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
  min-height: 17rem;
}
.card__no {
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--pompeiano);
  transition: color .5s var(--ease);
}
.card h3 {
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}
.card p { color: var(--muted); font-size: .92rem; margin: 0; transition: color .5s var(--ease); }
.card__link {
  margin-top: auto;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: .6rem;
}
.card:hover { background: var(--persiana); color: var(--calce); }
.card:hover p { color: rgba(240,233,218,.75); }
.card:hover .card__no { color: var(--giallo); }
.card:hover .arrow { transform: translateX(5px); }

/* ---------- Feature (image + text, alternating) ---------- */
.feature {
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: 2; }
}
.feature__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.feature__body h2 { font-family: var(--display); font-size: var(--step-3); letter-spacing: -0.03em; margin-bottom: 1.2rem; }
.feature__body p { max-width: 46ch; }
.section--dark .feature__body p { color: rgba(240,233,218,.85); }

/* Portrait sources need a portrait window. The default feature ratio goes
   wide at larger viewports, which beheads a standing bottle. */
.feature--tall .feature__media img { aspect-ratio: 4 / 5; }

/* ---------- Plates: the specials grid ----------
   Deliberately loose. Two up on desktop with a lot of air, because a tight
   grid of many small plates reads busy, and busy reads cheap. */
.plates {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) {
  .plates { grid-template-columns: 1fr 1fr; }
}
.plate { margin: 0; overflow: hidden; }
.plate img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.plate:hover img { transform: scale(1.04); }

/* ---------- Detail list (opening times etc.) ---------- */
.detail-list { display: grid; gap: 0; }
.detail-list li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(240,233,218,.18);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-list li:first-child { border-top: 1px solid rgba(240,233,218,.18); }
.detail-list .day { color: rgba(240,233,218,.78); }
.detail-list .time { font-family: var(--display); letter-spacing: .02em; font-size: 1.05rem; text-transform: none; }
.section:not(.section--dark):not(.section--ink) .detail-list li { border-color: rgba(26,23,18,.14); }
.section:not(.section--dark):not(.section--ink) .detail-list .day { color: var(--muted); }

/* ---------- Menu ---------- */
.menu-nav {
  position: sticky;
  top: 62px;
  z-index: 50;
  background: var(--calce);
  border-bottom: 1px solid rgba(26,23,18,.14);
  padding-block: .85rem;
}
.menu-nav__inner {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu-nav__inner::-webkit-scrollbar { display: none; }
.menu-nav button {
  flex: none;
  background: none;
  border: 1px solid transparent;
  padding: .55rem 1.05rem;
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: #4A4436;
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.menu-nav button:hover { color: var(--inchiostro); }
.menu-nav button.is-active {
  color: var(--calce);
  background: var(--persiana);
  border-color: var(--persiana);
}

.course { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid rgba(26,23,18,.12); scroll-margin-top: 130px; }
.course:last-of-type { border-bottom: 0; }
.course__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.course__head h2 {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: -0.03em;
}
.course__head p { margin: 0; color: var(--muted); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }

.dishes { display: grid; gap: 0; }
@media (min-width: 860px) { .dishes { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); } }

.dish {
  padding-block: 1.15rem;
  border-bottom: 1px solid rgba(26,23,18,.1);
}
.dish__top {
  display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: .3rem;
}
.dish__name {
  font-family: var(--display);
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  flex: none;
  max-width: 74%;
}
.dish__rule {
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(26,23,18,.28) 0 2px, transparent 2px 5px);
  transform: translateY(-3px);
}
.dish__price {
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.dish__desc { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }

/* Diet tags */
.tags { display: inline-flex; gap: .3rem; margin-left: .1rem; transform: translateY(-1px); }
.tag {
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .18rem .34rem;
  border: 1px solid currentColor;
  line-height: 1;
  border-radius: 2px;
}
.tag--v  { color: #3C6330; }
.tag--ve { color: #2A6147; }
.tag--n  { color: #75581F; }
.tag--s  { color: var(--pompeiano); }

/* Wine table */
.wine-head {
  display: grid;
  grid-template-columns: 1fr 4.2rem 4.2rem 4.6rem;
  gap: .6rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(26,23,18,.28);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.wine-head span:not(:first-child) { text-align: right; }
.wine {
  display: grid;
  grid-template-columns: 1fr 4.2rem 4.2rem 4.6rem;
  gap: .2rem .6rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(26,23,18,.1);
  align-items: baseline;
}
.wine__name { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em; }
.wine__abv { font-size: .58rem; letter-spacing: .14em; color: var(--pompeiano); margin-left: .45rem; }
.wine__desc {
  grid-column: 1 / -1;
  font-size: .84rem;
  color: var(--muted);
  margin: .15rem 0 0;
  max-width: 46ch;
}
.wine b {
  text-align: right;
  font-weight: 600;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .wine-head { grid-template-columns: 1fr 3.3rem 3.3rem 3.6rem; font-size: .52rem; }
  .wine { grid-template-columns: 1fr 3.3rem 3.3rem 3.6rem; }
  .wine b { font-size: .82rem; }
  .wine__name { font-size: 1.02rem; }
}

/* Simple two-column price list (coffee, spirits) */
.pricelist { display: grid; gap: 0; }
.price-row {
  display: flex; align-items: baseline; gap: .7rem;
  padding-block: .72rem;
  border-bottom: 1px solid rgba(26,23,18,.1);
}
.price-row__name { flex: none; max-width: 70%; }
.price-row__name small { display: block; font-size: .78rem; color: var(--muted); }
.price-row .dish__rule { transform: translateY(-2px); }
.price-row b { font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; flex: none; }
.price-row b i { font-style: normal; color: var(--muted); font-weight: 400; }

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.sub-title {
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
  color: var(--pompeiano);
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(26,23,18,.28);
  margin-bottom: .4rem;
}

/* Highlight panel — platters, wine flight */
.panel {
  background: var(--persiana);
  color: var(--calce);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  position: relative;
  overflow: hidden;
}
.panel h3 {
  font-family: var(--display);
  font-size: var(--step-2);
  color: var(--giallo);
  margin-bottom: .6rem;
}
.panel p { color: rgba(240,233,218,.86); font-size: .9rem; }
.panel .price-row { border-color: rgba(240,233,218,.2); }
.panel .price-row__name small { color: rgba(240,233,218,.6); }
.panel .dish__rule { background: repeating-linear-gradient(to right, rgba(240,233,218,.34) 0 2px, transparent 2px 5px); }
.panel .stamp {
  margin-top: 1.4rem;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--giallo);
  border: 1px solid rgba(217,162,46,.5);
  padding: .6rem .9rem;
  display: inline-block;
}

.allergen {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(26,23,18,.16);
  font-size: .8rem;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
}
.allergen .key { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Story (about) ---------- */
.story {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
}
@media (min-width: 900px) { .story { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.story__media { position: sticky; top: 110px; }
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .story__media { position: static; } }
.story__body p { max-width: 56ch; }
.story__body p:first-of-type {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--inchiostro);
}
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.9em;
  line-height: .8;
  padding: .06em .12em 0 0;
  color: var(--pompeiano);
}

.pillars { display: grid; gap: 1px; background: rgba(26,23,18,.14); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--calce); padding: 1.8rem; }
.pillar h4 { font-family: var(--display); font-size: var(--step-1); margin-bottom: .5rem; }
.pillar p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-block + .contact-block { margin-top: 2.6rem; }
.contact-block h3 {
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
  color: var(--pompeiano);
  margin-bottom: .9rem;
}
.contact-block a { text-decoration: none; border-bottom: 1px solid rgba(26,23,18,.25); }
.contact-block a:hover { border-color: var(--pompeiano); color: var(--pompeiano); }
.big-link {
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  display: inline-block;
  border-bottom: 1px solid rgba(26,23,18,.25) !important;
}
address { font-style: normal; font-family: var(--display); font-size: var(--step-1); line-height: 1.4; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: #4A4436;
}
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: 16px; /* iOS zooms the page on focus below 16px */
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.9rem;
  color: var(--inchiostro);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26,23,18,.3);
  padding: .7rem 0;
  border-radius: 0;
  transition: border-color .3s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--pompeiano);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute; right: 2px; bottom: 1.35rem;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.form .btn { justify-content: center; margin-top: .6rem; }
.form-note { font-size: .78rem; color: var(--muted); margin: 0; }

.map-card {
  display: block;
  position: relative;
  background: var(--persiana);
  color: var(--calce);
  padding: clamp(2rem, 5vw, 3rem);
  text-decoration: none;
  overflow: hidden;
  min-height: 15rem;
}
.map-card__grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(240,233,218,.07) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(240,233,218,.07) 1px, transparent 1px) 0 0 / 34px 100%;
}
.map-card__pin {
  position: absolute; left: 22%; top: 44%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--giallo);
  box-shadow: 0 0 0 0 rgba(217,162,46,.5);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 26px rgba(217,162,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,162,46,0); }
}
.map-card__body { position: relative; }
.map-card h3 { font-family: var(--display); font-size: var(--step-2); color: var(--giallo); margin-bottom: .5rem; }
.map-card p { color: rgba(240,233,218,.86); margin-bottom: 1.2rem; }
.map-card__cta { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; display: inline-flex; gap: .6rem; }
.map-card:hover .arrow { transform: translateX(5px); }

/* ---------- Neighbour strip (Three Blades Club) ---------- */
.neighbour {
  display: grid;
  gap: 1.6rem clamp(2rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 820px) { .neighbour { grid-template-columns: 1fr auto; } }
.neighbour h3 { font-family: var(--display); font-size: var(--step-2); margin-bottom: .6rem; }
.neighbour p { color: rgba(240,233,218,.82); max-width: 52ch; margin: 0; font-size: .92rem; }

/* ---------- Marquee ---------- */
.ribbon {
  background: var(--pompeiano);
  color: var(--calce);
  padding-block: .9rem;
  overflow: hidden;
  white-space: nowrap;
}
.ribbon__track {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  animation: slide 34s linear infinite;
  will-change: transform;
}
.ribbon span {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: .02em;
}
.ribbon span::after { content: "·"; margin-left: 3rem; opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band h2 {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: 0 auto 1.2rem;
}
.cta-band .lede { margin-inline: auto; margin-bottom: 2.2rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--inchiostro);
  color: rgba(240,233,218,.7);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2rem;
  font-size: .88rem;
}
.footer-grid { display: grid; gap: 2.5rem clamp(2rem, 6vw, 4rem); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
  color: var(--giallo);
  margin-bottom: 1rem;
}
.site-footer a { text-decoration: none; opacity: .85; transition: opacity .3s, color .3s; }
.site-footer a:hover { opacity: 1; color: var(--giallo); }
.site-footer ul { display: grid; gap: .55rem; }
.footer-brand {
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--calce);
  margin-bottom: .8rem;
}
.footer-brand + p { max-width: 34ch; }
.socials { display: flex; gap: 1.2rem; margin-top: 1.4rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.legal {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(240,233,218,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(240,233,218,.62);
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ribbon__track { animation: none; }
}

/* ==========================================================================
   iOS / small-screen hardening
   ========================================================================== */

/* The louvred light uses a 7px blur over a repeating gradient plus a mask and
   a blend mode. On iPhone that's three compositing passes on a full-screen
   layer and it drives Safari into texture-memory thrash (the symptom is
   scroll jank, then sections flashing white). Swap it for a flat, cheap
   gradient below tablet width — same warmth, one paint. */
@media (max-width: 820px) {
  .shutterlight { mix-blend-mode: normal; opacity: .3; }
  .shutterlight::before {
    filter: none;
    background: linear-gradient(150deg, rgba(255,226,150,.5) 0%, rgba(255,226,150,0) 55%);
    -webkit-mask-image: none;
            mask-image: none;
    transform: none;
    top: 0; left: 0; width: 100%; height: 100%;
  }
}

/* Sticky menu nav sits under a shorter header on small screens */
@media (max-width: 899px) {
  .menu-nav { top: 58px; }
  .course { scroll-margin-top: 116px; }
}

/* Comfortable tap targets */
.nav a, .card, .btn, .price-row, .menu-nav button { -webkit-tap-highlight-color: rgba(142,59,44,.12); }
.menu-nav button { min-height: 40px; }

/* iOS momentum scrolling on the menu chip row */
.menu-nav__inner { -webkit-overflow-scrolling: touch; }

/* Long Italian dish names shouldn't overflow the price on narrow screens */
@media (max-width: 420px) {
  .dish__name { max-width: 100%; hyphens: auto; }
  .dish__top { flex-wrap: wrap; }
  .dish__rule { min-width: 1.5rem; }
}

/* ==========================================================================
   Legibility pass
   ========================================================================== */

/* THE BUG: .shutterlight is absolutely positioned; the .wrap beside it is not.
   Positioned elements paint above static siblings, so the warm light film was
   rendering ON TOP of the copy rather than behind it. Push the light to the
   back of its section and lift the content above it. */
.section, .banner, .panel, .hero { isolation: isolate; }
.shutterlight { z-index: 0; }
.section > .wrap,
.banner > .wrap,
.hero__inner,
.panel > :not(.shutterlight) { position: relative; z-index: 1; }

/* With the film gone, secondary copy can sit much closer to full strength. */
:root { --muted: #4E4839; }              /* 7.5:1 on cream, 6.7:1 on plaster */

.section--dark .lede,
.banner p,
.neighbour p,
.section--dark .feature__body p { color: rgba(240,233,218,.92); }
.panel p,
.map-card p,
.hero__meta { color: rgba(240,233,218,.9); }
.detail-list .day { color: rgba(240,233,218,.88); }
.site-footer { color: rgba(240,233,218,.86); }
.legal { color: rgba(240,233,218,.75); }

/* Small uppercase text was the hardest to read: thin strokes, wide tracking.
   More weight and less letter-spacing does more here than colour alone. */
.eyebrow { font-weight: 600; letter-spacing: .22em; }
.card__no,
.sub-title,
.contact-block h3,
.site-footer h4 { font-weight: 700; letter-spacing: .2em; }
.menu-nav button { font-weight: 700; font-size: .72rem; letter-spacing: .16em; }
.card__link, .map-card__cta { font-weight: 700; letter-spacing: .18em; }

/* Descriptions and body copy: a touch more weight and line-height */
.dish__desc, .wine__desc, .price-row__name small {
  color: var(--muted);
  font-weight: 450;
  line-height: 1.6;
}
.card p, .pillar p { font-weight: 450; }
.lede { color: #4E4839; }

/* On phones the light film is decorative only — keep it well out of the way */
@media (max-width: 820px) {
  .shutterlight { opacity: .16; }
}

/* ==========================================================================
   Surface system
   Every surface declares its own background AND the ink that goes on it, so
   text colour can never be inherited from the wrong parent. This removes the
   whole class of dark-on-dark bugs rather than patching them one at a time.
   ========================================================================== */

.section, .banner, .course, .panel, .card, .pillar, .map-card, .site-footer {
  --on-surface:     var(--inchiostro);           /* headings */
  --on-surface-mid: #4E4839;                     /* body copy   7.5:1 */
  --on-surface-dim: #625B4A;                     /* labels      5.5:1 */
  --accent-on:      var(--pompeiano);
}
.section--dark, .section--ink, .banner, .panel, .map-card, .site-footer, .card:hover {
  --on-surface:     var(--calce);
  --on-surface-mid: rgba(240,233,218,.92);
  --on-surface-dim: rgba(240,233,218,.8);
  --accent-on:      var(--giallo);
}

.section, .banner, .course, .panel, .card, .pillar, .map-card { color: var(--on-surface); }

.section h1, .section h2, .section h3, .section h4,
.banner h1, .course h2, .course h3,
.panel h3, .card h3, .pillar h4, .map-card h3,
.section-title, .feature__body h2, .cta-band h2 { color: var(--on-surface); }

.section p, .banner p, .course p, .panel p, .card p, .pillar p, .map-card p,
.lede, .dish__desc, .wine__desc, .story__body p, .manifesto__text p,
.feature__body p, .neighbour p { color: var(--on-surface-mid); }

.eyebrow, .card__no, .sub-title, .contact-block h3, .course__head p,
.wine__abv { color: var(--accent-on); }

.detail-list .day, .price-row__name small, .form-note,
.field label, .menu-nav button { color: var(--on-surface-dim); }
.detail-list li { border-color: color-mix(in srgb, var(--on-surface) 18%, transparent); }

/* The story/manifesto lead paragraph is display type — full strength ink */
.story__body p:first-of-type,
.section-head .section-title { color: var(--on-surface); }

/* Cream sections are explicitly cream, never inheriting a darker parent */
.section:not(.section--dark):not(.section--ink):not(.section--plaster) { background: var(--calce); }

/* Menu chips: active state keeps its own pairing */
.menu-nav button.is-active { color: var(--calce); }
.card:hover p { color: var(--on-surface-mid); }
.card:hover .card__no { color: var(--giallo); }

/* ==========================================================================
   Imagery — shorter, tighter crops
   4:5 portraits ran too long on a phone, where a full-width image ate more
   than a screen before any copy appeared. 4:3 roughly halves that height.
   ========================================================================== */
.manifesto__figure img,
.feature__media img,
.story__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Keep them from dominating a wide column */
.manifesto__figure, .feature__media { max-width: 40rem; }
.story__media { max-width: 34rem; }

@media (max-width: 899px) {
  .manifesto__figure img,
  .feature__media img,
  .story__media img { aspect-ratio: 3 / 2; }   /* shorter again on phones */
  .figure-tag { position: static; transform: none; max-width: none; }
}

/* Root fallbacks so any element outside a declared surface still resolves */
:root {
  --on-surface: var(--inchiostro);
  --on-surface-mid: #4E4839;
  --on-surface-dim: #625B4A;
  --accent-on: var(--pompeiano);
}
.hero { --on-surface: var(--calce); --on-surface-mid: rgba(240,233,218,.92);
        --on-surface-dim: rgba(240,233,218,.8); --accent-on: var(--giallo); }

/* ==========================================================================
   Marquee — pixel driven
   ========================================================================== */
.ribbon__track {
  animation-name: slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 30s;              /* JS overrides with a measured value */
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-w, 50%))); }
}

/* ==========================================================================
   Imagery — trimmed further on phones
   ========================================================================== */
@media (max-width: 899px) {
  .manifesto__figure img,
  .feature__media img,
  .story__media img {
    aspect-ratio: 16 / 9;
    max-height: 42vh;
  }
}
@media (max-width: 560px) {
  .manifesto__figure img,
  .feature__media img,
  .story__media img {
    aspect-ratio: 16 / 9;
    max-height: 34vh;
  }
}

/* Re-assert reduced motion: the marquee block above reintroduces an
   animation-name, and it sits later in the file than the original guard. */
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   Opening sequence
   The louvre reveal was nine hard-edged blocks retracting in sequence — the
   geometry read as mechanical rather than elegant. This replaces it with a
   warm plaster veil that dissolves while the photograph settles and the
   headline rises through a soft focus. Nothing has a hard edge.
   ========================================================================== */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--calce);
  pointer-events: none;
  animation: veil 1.25s .85s cubic-bezier(.65, 0, .35, 1) forwards;
}
.curtain__mark {
  font-family: var(--display);
  font-size: clamp(1.1rem, 4.5vw, 2rem);
  letter-spacing: .42em;
  text-indent: .42em;           /* balance the trailing tracking */
  text-transform: uppercase;
  color: var(--persiana);
  opacity: 0;
  animation: markIn 1s .15s cubic-bezier(.22,.61,.36,1) forwards,
             markOut .7s .75s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes veil {
  to { opacity: 0; transform: scale(1.04); visibility: hidden; }
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(9px); letter-spacing: .58em; }
  to   { opacity: 1; transform: none;                         filter: blur(0);  letter-spacing: .42em; }
}
@keyframes markOut { to { opacity: 0; transform: translateY(-8px); } }

/* The photograph eases down to rest rather than simply appearing */
.hero__media img {
  animation: settle 3s .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes settle {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Headline, meta and buttons drift up through a soft focus, staggered */
.hero h1,
.hero__meta,
.hero__actions {
  animation: drift 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
.hero h1        { animation-delay: 1.05s; }
.hero__meta     { animation-delay: 1.25s; }
.hero__actions  { animation-delay: 1.4s; }
.hero .cue      { animation: drift 1.15s 1.6s cubic-bezier(.16,1,.3,1) both; }

@keyframes drift {
  from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* The header eases in last, so nothing competes with the wordmark */
.site-header { animation: fadeIn 1s 1.5s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Nothing scrolls while the veil is up */
html.is-loading, html.is-loading body { overflow: hidden; }

/* Animated blur is the expensive part; phones get the same motion without it */
@media (max-width: 820px) {
  @keyframes drift {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes markIn {
    from { opacity: 0; transform: translateY(12px); letter-spacing: .52em; }
    to   { opacity: 1; transform: none;             letter-spacing: .42em; }
  }
}

/* Reduced motion gets the opening as a plain cross-fade rather than nothing.
   Opacity is not what provokes vestibular symptoms — translation, scale, blur
   and parallax are — so those are stripped and the fade is kept, at roughly a
   third of the running time. */
@media (prefers-reduced-motion: reduce) {
  /* !important throughout: the blanket rule above flattens every duration to
     .001ms via the universal selector, which would make this instantaneous. */
  .curtain {
    display: grid;
    animation: veilFade .55s .4s ease forwards !important;
  }
  .curtain__mark {
    animation: fadeIn .4s ease forwards,
               fadeOut .3s .45s ease forwards !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: .42em !important;
  }

  /* The photograph settles instantly; no slow scale */
  .hero__media img { animation: none !important; transform: none !important; }

  .hero h1, .hero__meta, .hero__actions, .hero .cue, .site-header {
    animation: fadeIn .45s ease both !important;
    transform: none !important;
    filter: none !important;
  }
  .hero h1       { animation-delay: .8s !important; }
  .hero__meta    { animation-delay: .87s !important; }
  .hero__actions { animation-delay: .94s !important; }
  .hero .cue     { animation-delay: 1s !important; }
  .site-header   { animation-delay: .94s !important; }
}

@keyframes veilFade { to { opacity: 0; visibility: hidden; } }
@keyframes fadeOut  { to { opacity: 0; } }