/* ══════════════════════════════════════════════════════════════════════════
   De Nada Tapas Bar — page styles
   Loaded after denada.css. Everything here belongs to one section type.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ HERO ══════════════════════════════════════════════════════════════════
   Copy against a photo box. The ground is oxblood with a warm glow rather than
   the flat field it used to be, and the photo box has no rounded corners so it
   matches the square edges everything else on the site uses. */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + clamp(40px, 6vw, 76px)) var(--pad) clamp(48px, 6vw, 84px);
  background:
    radial-gradient(ellipse 90% 80% at 78% 40%, rgba(150, 54, 48, 0.5) 0%, rgba(92, 31, 31, 0) 70%),
    linear-gradient(165deg, var(--oxblood) 0%, var(--oxblood-dp) 100%);
}
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero-rule {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.hero-rule .kicker { color: #EBC6A4; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(244, 238, 228, 0.32);
  border-radius: 100px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 0 0 rgba(143, 160, 92, 0.6);
  animation: pulse 2.4s infinite;
}
.status-dot.shut { background: #D69277; animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 160, 92, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(143, 160, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 160, 92, 0); }
}

/* Sized for a half-width column: at the old full-bleed 78px this ran to three
   enormous lines. Three lines is right here, at this measure. */
.hero-hl {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-optical-sizing: none;
  margin-bottom: 20px;
}
.hero-hl em { font-style: italic; }
.hero .lede { max-width: 40ch; color: rgba(244, 238, 228, 0.82); margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Entrance stagger. Brand identity, so it plays whatever the motion setting,
   per the house animation rules. */
.hero-rule, .hero-hl, .hero .lede, .hero-actions, .hero-media {
  animation: heroIn 1s var(--ease) both;
}
.hero-hl { animation-delay: 0.08s; }
.hero .lede { animation-delay: 0.16s; }
.hero-actions { animation-delay: 0.24s; }
.hero-media { animation-delay: 0.14s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ── hero carousel ─────────────────────────────────────────────────────── */

.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
.carousel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.carousel img.on { opacity: 1; }

.car-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 17, 16, 0.44);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s var(--ease), background 0.2s var(--ease);
  z-index: 2;
}
.carousel:hover .car-btn, .car-btn:focus-visible { opacity: 1; }
.car-btn:hover { background: rgba(23, 17, 16, 0.72); }
.car-prev { left: 0; }
.car-next { right: 0; }
.car-btn::before {
  content: '';
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--chalk);
  border-right: 1.5px solid var(--chalk);
}
.car-prev::before { transform: rotate(-135deg); margin-left: 3px; }
.car-next::before { transform: rotate(45deg); margin-right: 3px; }

.car-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 7px;
  z-index: 2;
}
/* The dot you see is the pseudo-element; the button around it is the hit area,
   which has to clear 44px on a phone. Sizing the button itself to the dot made
   a 7px tap target. */
.car-dots button {
  width: 26px; height: 26px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none;
  cursor: pointer;
}
.car-dots button::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(252, 250, 246, 0.45);
  transition: background 0.2s, transform 0.2s;
}
.car-dots button.on::before { background: var(--chalk); transform: scale(1.25); }

/* ══ ABOUT ═════════════════════════════════════════════════════════════════
   Landscape photo beside the copy, not a full-width band. The source tops out
   at 2002px wide, so run across the full 1240px measure it is upscaled on any
   2x display and a low-light handheld shot goes to mush. At roughly half the
   measure it has pixels to spare and stays sharp. Landscape either way. */

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
/* A print, not a white div. The things that make it read as an object are the
   hard offset shadow rather than a blur, the photograph being graded so it
   looks printed, warm stock instead of pure white, and a caption annotated off
   to the corners rather than centred. Same devices as the masa archetype,
   without importing its zine vocabulary. */
.about-photo {
  --tilt: -1.8deg;
  position: relative;
  background: var(--print);
  padding: 13px 13px 54px;
  transform: rotate(var(--tilt));
  /* Hard printed offset carries the shape; the soft pass underneath is what
     lifts it off a near-black ground, where a hard shadow alone disappears. */
  box-shadow:
    10px 12px 0 rgba(0, 0, 0, 0.4),
    0 26px 54px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-photo:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.012);
  box-shadow:
    14px 18px 0 rgba(0, 0, 0, 0.44),
    0 36px 72px rgba(0, 0, 0, 0.56);
}
.about-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  /* The room is lit hot red. Pulled back and given contrast it reads as a
     photographic print rather than a raw phone frame. */
  filter: saturate(0.9) contrast(1.07) brightness(1.02);
}

/* Matte tape across the corner. Two things it got wrong first time: it was
   centred on the top edge, which with a tilted frame reads as a fixing bracket
   rather than tape, and it was half transparent. Over tan paper translucency
   is what makes tape look like tape; over a near-black ground the same fill
   just goes grey. It is nearly opaque here and the corner does the work. */
.about-photo .tape {
  position: absolute;
  top: 16px; left: -30px;
  width: 104px; height: 25px;
  transform: rotate(-45deg);
  background: rgba(238, 230, 213, 0.88);
  border-left: 1px solid rgba(23, 17, 16, 0.16);
  border-right: 1px solid rgba(23, 17, 16, 0.16);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.about-photo figcaption {
  position: absolute;
  left: 17px; right: 17px; bottom: 17px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.about-photo .cap {
  font-family: var(--display);
  font-style: italic;
  font-size: 16.5px;
  color: #4A4038;
}
.about-photo .fig {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(23, 17, 16, 0.48);
  white-space: nowrap;
}

.about-copy .kicker { margin-bottom: 16px; }
.about-copy h2 { margin-bottom: 22px; max-width: 14ch; }
.about-copy p { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.8; color: var(--on-ink-soft); margin-bottom: 18px; }

/* ══ REVIEWS ═══════════════════════════════════════════════════════════════
   Sits on the brand oxblood, which is the page's only strong colour beat now
   the ticker is gone. Hairline dividers come from a 1px grid gap showing the
   darker ground behind the cards. */

.reviews { background: var(--oxblood); }
.reviews .kicker { color: #EBC6A4; }
.reviews-head { margin-bottom: clamp(32px, 4vw, 50px); }
.reviews-head h2 { max-width: 16ch; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.review {
  background: var(--oxblood);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}
.stars {
  width: 90px; height: 15px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23EBC6A4' d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/></svg>");
  background-size: 18px 15px;
  background-repeat: repeat-x;
}
.review blockquote {
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: #F8F1E8;
  margin: 16px 0 auto;
}
.review figcaption {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid rgba(252, 250, 246, 0.2);
}
.review figcaption b {
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--chalk);
  margin-bottom: 4px;
}
.review figcaption span {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(252, 250, 246, 0.72);
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rule-ink);
  border: 1px solid var(--rule-ink);
  margin-top: 34px;
}
.about-facts div { background: var(--ink); padding: 20px 22px; }
.about-facts dt {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 8px;
}
.about-facts dd { font-size: 14.5px; line-height: 1.6; color: var(--on-ink-soft); }

/* ══ CARTE (menu preview) ══════════════════════════════════════════════════
   The old home page never showed a single dish, so the only way to find out
   what the kitchen cooks was to leave the page. */

.carte-head { max-width: 62ch; margin-bottom: clamp(38px, 4.5vw, 58px); }
.carte-head .kicker { margin-bottom: 16px; }
.carte-head h2 { margin-bottom: 18px; }

.carte-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
.carte-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 3.5vw, 52px); }

.carte-cat {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oxblood);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-lime);
  margin-bottom: 6px;
}
.carte-cat + .dish { padding-top: 14px; }
.carte-cols > div > .carte-cat:not(:first-child) { margin-top: 30px; }

.dish { padding: 11px 0; border-bottom: 1px solid rgba(23, 17, 16, 0.07); }
.dish-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dish-name { font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.3; }
.dish-price { font-family: var(--display); font-size: 16px; font-weight: 500; color: var(--oxblood); white-space: nowrap; }
.dish-desc { font-size: 13.5px; line-height: 1.6; color: var(--on-lime-soft); margin-top: 4px; max-width: 44ch; }

.carte-side { position: sticky; top: calc(var(--nav-h) + 28px); }
.carte-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.carte-side figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--on-lime-soft); }
.carte-side figcaption b { display: block; font-weight: 600; color: var(--on-lime); letter-spacing: 0.02em; }

/* The list has to visibly stop, or a reader takes the sample for the menu. */
.carte-more {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--rule-lime);
  font-size: 14.5px;
  color: var(--ember-deep);
  transition: gap 0.25s var(--ease);
}
.carte-more::after {
  content: '';
  width: 8px; height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.carte-more:hover { gap: 18px; }
.carte-more span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(160, 74, 40, 0.35); }
.carte-more:hover span { text-decoration-color: currentColor; }

.carte-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule-lime);
}
.carte-foot .note { font-size: 13.5px; color: var(--on-lime-soft); margin-left: auto; }

.btn-lime { background: var(--oxblood); color: var(--chalk); }
.btn-lime:hover { background: var(--oxblood-dp); }
.btn-lime-line { border-color: rgba(23, 17, 16, 0.28); color: var(--on-lime); }
.btn-lime-line:hover { border-color: var(--on-lime); background: rgba(23, 17, 16, 0.05); }

/* ══ OFFERS ════════════════════════════════════════════════════════════════ */

.offers-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
.offers-head { margin-bottom: clamp(30px, 3.5vw, 44px); }
.offers-head .kicker { margin-bottom: 16px; }
.offers-head h2 { max-width: 18ch; }

.offer {
  display: block;
  background: var(--ink-2);
  border: 1px solid var(--rule-ink);
  border-left: 2px solid var(--ember);
  padding: clamp(26px, 3vw, 38px);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.offer + .offer { margin-top: 18px; }
.offer:hover { background: var(--ink-3); transform: translateX(4px); }
.offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 12px; }
.offer h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); }
.offer .price { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); color: var(--ember); white-space: nowrap; }
.offer p { font-size: 14.5px; line-height: 1.7; color: var(--on-ink-soft); max-width: 48ch; }
.offer .when {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--rule-ink);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 238, 228, 0.55);
}
.offer .when b { color: var(--on-ink); font-weight: 600; }
.offer .go { margin-left: auto; color: var(--ember); letter-spacing: 0.14em; }

.offers-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.offers-photo figcaption { margin-top: 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 238, 228, 0.42); }

/* ══ VISIT ═════════════════════════════════════════════════════════════════
   Hours, address and the booking prompt in one block. They used to be three
   separate stacked sections plus a map plus a second call to action, which is
   what made the bottom of the page feel like it never ended. */

.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.visit-copy .kicker { margin-bottom: 16px; }
.visit-copy h2 { margin-bottom: 22px; max-width: 14ch; }
.visit-copy .lede { margin-bottom: 30px; max-width: 46ch; }

.visit-contact { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }

.visit-address { border-top: 1px solid var(--rule-ink); padding-top: 24px; }
.visit-address dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; }
.visit-address dd { font-size: 15px; line-height: 1.75; color: var(--on-ink-soft); margin-bottom: 20px; }
.visit-address dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 238, 228, 0.28); }
.visit-address dd a:hover { color: var(--on-ink); }

.hours { background: var(--ink-2); border: 1px solid var(--rule-ink); padding: clamp(24px, 3vw, 34px); }
.hours h3 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); margin-bottom: 18px; }
.hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-ink);
  font-size: 14.5px;
}
.hours-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.hours-row .day { font-weight: 500; }
.hours-row .time { color: var(--on-ink-soft); text-align: right; }
.hours-row.today { color: var(--on-ink); }
.hours-row.today .day { color: var(--ember); }
.hours-row.today .time { color: var(--on-ink); }

.map { height: clamp(300px, 40vh, 440px); border-top: 1px solid var(--rule-ink); }
/* Google will not serve a dark embed without an API key. Desaturating the
   light tiles was the first attempt and made it worse: a flat grey slab across
   the full width of an otherwise dark page, which is the one thing on the page
   that looked broken. Inverting and rotating the hue back is the treatment
   that actually works. Lightness flips so the tiles go dark, the hue rotation
   puts the colours back roughly where they started, so the pin stays red and
   the parkland stays green. The knock-back values stop the inversion reading
   as pure black and keep the labels legible.

   Known risk, accepted by Max on 20 Sep 2026 rather than dropping the embed:
   filtering a live cross-origin iframe is not wholly reliable. It can repaint
   unfiltered mid-scroll, and a CSS filter forces sRGB compositing, so on a
   wide-gamut or HDR display the filtered band is colour-managed differently
   from the page around it and reads as a saturation shift. It renders
   correctly in a clean Chrome and the fallbacks, if it ever needs one, are an
   inset unfiltered panel or an address block with a directions button. Do not
   swap it back to a greyscale knock-back, which is what started this. */
.map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: invert(0.93) hue-rotate(180deg) brightness(0.92) saturate(0.7) contrast(0.95);
}

/* ══ CAREERS ═══════════════════════════════════════════════════════════════
   Deliberately slight: one open role, sat between the map and the footer so it
   reads as a note at the end rather than a section competing with the menu. */

.careers {
  background: var(--ink-2);
  border-top: 1px solid var(--rule-ink);
  padding: clamp(30px, 3.6vw, 46px) var(--pad);
}
.careers-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.careers .kicker { margin-bottom: 10px; }
.careers h2 { margin-bottom: 6px; }
.careers p { font-size: 14.5px; line-height: 1.6; color: var(--on-ink-soft); }
.careers .btn { flex: 0 0 auto; text-transform: none; letter-spacing: 0.02em; font-size: 14px; }

@media (max-width: 620px) {
  .careers-inner { flex-direction: column; align-items: flex-start; }
  .careers .btn { width: 100%; }
}

/* ══ MENU PAGES ════════════════════════════════════════════════════════════
   The category rail used to be a second full-width dark bar directly under the
   nav, so the top of the page read as two navigation bars. It is now a row of
   chips that belongs to the menu sheet, sits on the light ground, and never
   spans the full width. */

.menu-wrap { background: var(--lime); color: var(--on-lime); padding: 0 var(--pad) clamp(64px, 8vw, 110px); }
.menu-sheet { max-width: 980px; margin: 0 auto; }

.menu-rail {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 18px 0;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--lime) 72%, rgba(243, 237, 227, 0) 100%);
}
.menu-rail::-webkit-scrollbar { display: none; }
.menu-rail a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px;   /* a real tap target on a phone */
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-lime-soft);
  border: 1px solid rgba(23, 17, 16, 0.16);
  padding: 0 18px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-rail a:hover { border-color: var(--on-lime); color: var(--on-lime); }
.menu-rail a.here { background: var(--oxblood); border-color: var(--oxblood); color: var(--chalk); }

.menu-note {
  font-size: 13.5px; line-height: 1.7;
  color: var(--on-lime-soft);
  border-left: 2px solid var(--ember-deep);
  padding: 4px 0 4px 16px;
  margin: clamp(20px, 3vw, 34px) 0 clamp(30px, 4vw, 48px);
  max-width: 60ch;
}

.menu-cat { margin-bottom: clamp(38px, 5vw, 62px); scroll-margin-top: calc(var(--nav-h) + 72px); }
.menu-cat > h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--oxblood);
  margin-bottom: 6px;
}
.menu-sub {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember-deep);
  margin: 30px 0 4px;
}
.menu-cat .dish:last-child { border-bottom: none; }
.menu-cat .dish { padding: 13px 0; }
.menu-cat .dish-name { font-size: 18px; }
.menu-cat .dish-price { font-size: 17px; }

.menu-tail {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--rule-lime);
  padding-top: clamp(28px, 3.5vw, 42px);
}
.menu-tail p { font-size: 14px; color: var(--on-lime-soft); margin-right: auto; max-width: 42ch; }
.menu-tail b, .deal-terms b { color: var(--ember-deep); font-weight: 600; }

.diet {
  font-family: var(--ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ember-deep);
  vertical-align: 2px;
  margin-left: 6px;
}

.dish-tiers { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.dish-tiers span { font-size: 13.5px; color: var(--on-lime-soft); }
.dish-tiers b { font-weight: 500; color: var(--on-lime); }

/* ── wine tables ─────────────────────────────────────────────────────────
   Kept as a table because a wine genuinely has four prices. It scrolls inside
   its own box rather than pushing the page sideways, and collapses to stacked
   rows with the measure printed against each price on a phone. */

.wines-wrap { overflow-x: auto; margin-bottom: 8px; }
.wines { width: 100%; border-collapse: collapse; }
.wines thead th {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-lime-soft);
  text-align: right;
  padding: 0 0 12px 16px;
  border-bottom: 1px solid var(--rule-lime);
  white-space: nowrap;
}
.wines thead th:first-child { text-align: left; padding-left: 0; }
.wines tbody tr { border-bottom: 1px solid rgba(23, 17, 16, 0.07); }
.wines tbody tr:last-child { border-bottom: none; }
.wines tbody th {
  text-align: left; font-weight: 400;
  padding: 14px 20px 14px 0;
  vertical-align: top;
}
.wines tbody td {
  text-align: right;
  padding: 14px 0 14px 16px;
  vertical-align: top;
  font-family: var(--display);
  font-size: 15px; font-weight: 500;
  color: var(--oxblood);
  white-space: nowrap;
}
.wines .none { color: rgba(23, 17, 16, 0.2); }
.wine-name { display: block; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.3; }
.wine-desc { display: block; font-size: 13px; line-height: 1.6; color: var(--on-lime-soft); margin-top: 4px; max-width: 46ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ══ DEAL PAGES ════════════════════════════════════════════════════════════ */

.deal-body { max-width: 760px; margin: 0 auto; }
.deal-body > h2 { margin-bottom: 18px; }
.deal-body > .lede { max-width: 56ch; }
.deal-hero-price {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(52px, 9vw, 96px); line-height: 1;
  color: var(--ember);
  margin: 6px 0 14px;
}
.deal-when {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--rule-ink);
  padding: 12px 18px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-soft);
}
.deal-when b { color: var(--on-ink); font-weight: 600; }

.deal-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule-lime); border: 1px solid var(--rule-lime); margin: clamp(28px, 4vw, 44px) 0; }
.deal-steps div { background: var(--lime); padding: 26px 24px; }
.deal-steps h3 { font-family: var(--display); font-size: 20px; font-weight: 400; margin-bottom: 10px; }
.deal-steps p { font-size: 14px; line-height: 1.7; color: var(--on-lime-soft); }
.deal-steps .n { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-deep); display: block; margin-bottom: 12px; }

.deal-terms { border-top: 1px solid var(--rule-lime); padding-top: 26px; margin-top: clamp(28px, 4vw, 44px); }
.deal-terms li { font-size: 14px; line-height: 1.8; color: var(--on-lime-soft); list-style: none; padding-left: 18px; position: relative; }
.deal-terms li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--ember-deep); }

/* ══ CONTACT PAGE ══════════════════════════════════════════════════════════ */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact-block { border-top: 1px solid var(--rule-ink); padding: 22px 0; }
.contact-block h3 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.contact-block p, .contact-block a { font-size: 15px; line-height: 1.75; color: var(--on-ink-soft); }
.contact-block a:hover { color: var(--on-ink); }

.book-card { background: var(--ink-2); border: 1px solid var(--rule-ink); padding: clamp(26px, 3.5vw, 40px); }
.book-card h2 { margin-bottom: 16px; }
.book-card p { font-size: 14.5px; line-height: 1.8; color: var(--on-ink-soft); margin-bottom: 22px; }

/* ══ PROSE (privacy) ═══════════════════════════════════════════════════════ */

.prose { max-width: 68ch; margin: 0 auto; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); margin: 38px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.85; color: var(--on-ink-soft); margin-bottom: 14px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 48px); }
  .hero-media { order: -1; max-width: 420px; }
  .about-photo { --tilt: -1.1deg; }
  .hero .lede { max-width: 46ch; }
  .car-btn { opacity: 1; }
  .car-dots { bottom: 8px; }
  .car-dots button { width: 44px; height: 44px; }
}

@media (max-width: 1000px) {
  .about-grid, .carte-grid, .offers-grid, .visit-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-copy h2 { max-width: 18ch; }
  .carte-side { position: static; max-width: 460px; }
  .offers-photo { max-width: 460px; }
}

@media (max-width: 700px) {
  .carte-cols { grid-template-columns: 1fr; }
  .carte-cols > div:last-child > .carte-cat:first-child { margin-top: 30px; }
  .carte-foot .note { margin-left: 0; }
  .offer-top { flex-direction: column; gap: 4px; }
  .offer .go { margin-left: 0; }
  .hours-row { font-size: 13.5px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .about-photo img { aspect-ratio: 4 / 3; }
  .about-photo { padding: 10px 10px 44px; }
  .about-photo figcaption { left: 13px; right: 13px; bottom: 14px; }
  .about-photo .cap { font-size: 15px; }
  /* The frame goes full width on a phone, so a tape corner hanging 25px off
     the left edge is clipped by the page rather than overhanging the photo.
     Pulled inside the frame at this width. */
  .about-photo .tape { width: 80px; height: 20px; top: 14px; left: -14px; }
  /* Same target minimum as the footer, for the address block links.
     :not(.btn) matters: .visit-contact holds the two buttons, and an earlier
     version of this rule targeted that instead of the address list, overriding
     .btn's own padding and shrinking the primary Reserve button to 27px on a
     phone. Never let this rule reach a .btn. */
  .visit-address a:not(.btn), .contact-block a:not(.btn) {
    display: inline-block;
    padding: 6px 0;
  }
  .menu-tail p { margin-right: 0; }

  /* Wine tables stack: each price keeps the measure it belongs to. */
  .wines, .wines tbody, .wines tbody tr, .wines tbody th, .wines tbody td { display: block; width: 100%; }
  .wines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wines tbody tr { padding: 16px 0; border-bottom: 1px solid rgba(23, 17, 16, 0.09); }
  .wines tbody th { padding: 0 0 10px; }
  .wines tbody td {
    display: inline-flex; align-items: baseline; gap: 8px;
    width: auto; padding: 0 20px 0 0; text-align: left;
  }
  .wines tbody td::before {
    content: attr(data-label);
    font-family: var(--ui);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--on-lime-soft);
  }
  .wines tbody td:empty, .wines tbody td:has(.none) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
  .offer:hover { transform: none; }
  .about-photo:hover { transform: rotate(var(--tilt)); }
  .carousel img { transition: none; }
}