/* Ember & Salt — restaurant concept. Moody typographic-poster read: ticket-
   stub buttons, dotted-leader menu lists, a fixed nav that solidifies on
   scroll. Deliberately unlike SiteMzansi's own agency look and unlike the
   other two concepts (no boxed cards, no hard offset shadows, no soft
   editorial serif). Interaction layer (custom cursor, magnetic buttons,
   scroll progress, accordion, drag-scroll gallery, testimonial carousel)
   modelled on the brief's reference site, reusing this site's own palette
   and type system rather than copying its colours/fonts. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #120d0a;
  --bg-raised: #1d1512;
  --deep: #430f08;
  --text: #f3ece2;
  --text-dim: #b0a293;
  --accent: #e2481f;
  --accent-ink: #1a0d08;
  --border: #ffffff16;
  --max: 1040px;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --mono: 'Space Mono', "Courier New", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 40px;
  --nav-h: 164px;
  --bars-h: calc(var(--topbar-h) + var(--nav-h));
}
@media (max-width: 760px) { :root { --nav-h: 68px; } }
@media (max-width: 480px) { :root { --topbar-h: 58px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.95;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.8rem, 9vw, 6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
p { margin: 0; color: var(--text-dim); }
/* height:auto is required here — without it, the width/height HTML
   attributes on <img> map to literal CSS width/height presentational
   hints, and since nothing else declares 'height', that hint's raw pixel
   value wins even after max-width or aspect-ratio shrink the width,
   stretching every image out of proportion. */
img { max-width: 100%; width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Native cursor stays on for touch/coarse pointers and reduced-motion
   users — the custom dot is a pointer-device flourish, never a
   replacement for a real cursor. */
@media (hover: hover) and (pointer: fine) {
  body:not(.reduce-motion) { cursor: none; }
  body:not(.reduce-motion) a,
  body:not(.reduce-motion) button,
  body:not(.reduce-motion) select { cursor: none; }
}

/* A flat accent-coloured dot disappears against the hero photo's own
   warm orange/brown tones — the white ring + dark drop-shadow below give
   it contrast against literally any background, photo or flat colour. */
#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 4px rgba(0,0,0,0.6);
  transition: width 0.2s, height 0.2s, background 0.2s;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  html.js body:not(.reduce-motion) #cursor { display: block; }
}
#cursor.hovering {
  width: 30px; height: 30px;
  background: transparent;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 6px rgba(0,0,0,0.6);
}

/* Trailing ring — same coordinates as #cursor, but with a slower
   left/top transition, so it eases toward each new position and reads
   as a soft trail following the pointer. */
#cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 1px 5px rgba(0,0,0,0.5);
  opacity: 0.8;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: left 0.22s cubic-bezier(0.22,1,0.36,1), top 0.22s cubic-bezier(0.22,1,0.36,1), width 0.2s, height 0.2s, opacity 0.2s;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  html.js body:not(.reduce-motion) #cursor-trail { display: block; }
}
#cursor-trail.hovering { width: 50px; height: 50px; opacity: 0.5; }

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent);
  z-index: 9998;
}

/* Fixed and stacked above .nav — .nav's own top offset is --topbar-h, so
   the two never occupy the same band regardless of how tall the topbar's
   text wraps to on a narrow screen. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 501;
  background: var(--bg-raised);
  color: var(--text-dim);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.topbar a { color: var(--accent); text-decoration: underline; }
body { padding-top: var(--bars-h); }

/* Ticket-stub button: small notches cut into the left and right edges,
   like a torn admission ticket, instead of a plain rectangle or pill. */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.9rem;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 93% 50%, 100% 62%, 100% 100%, 0 100%, 0 62%, 7% 50%, 0 38%);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: var(--bg-raised); color: var(--text); }
.btn--lg { padding: 1.1rem 2.4rem; font-size: 0.95rem; }

/* Magnetic wrap: JS nudges the inner control toward the cursor within
   ~80px, snapping back on mouseleave. Wrapping div keeps the hit-target
   stable while the visible button drifts. */
.magnetic { display: inline-block; }

/* ============================================================
   NAV — fixed, transparent over the hero, solidifies on scroll
============================================================ */
.nav {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.nav.nav--scrolled {
  background: rgba(18, 13, 10, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.5rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.nav__brand { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.01em; }
.nav__brand-amp { color: var(--accent); }
.nav__links { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
.nav__links a:hover { color: var(--accent); }
.nav .btn { margin-top: 0.15rem; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  position: absolute;
  right: 1.25rem;
  top: 1.15rem;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); transition: 0.3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .nav__links, .nav__inner > .btn { display: none; }
  .nav__inner { flex-direction: row; justify-content: center; padding: 1.1rem 3.5rem; }
  .hamburger { display: flex; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { font-family: var(--display); font-size: 2.2rem; text-transform: uppercase; }
.mobile-nav a:hover { color: var(--accent); }

/* ============================================================
   HERO — full-bleed photo, scramble-in title, magnetic CTAs
============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  margin-top: calc(-1 * var(--bars-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,13,10,0.95) 8%, rgba(18,13,10,0.55) 60%, rgba(18,13,10,0.35) 100%); z-index: 1; }
.hero__content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: calc(var(--bars-h) + 2rem) 1.5rem 2rem; width: 100%; }
.hero .eyebrow { letter-spacing: 0.35em; margin-bottom: 1.25rem; }
.hero__title { display: flex; flex-wrap: wrap; gap: 0.02em; }
.hero__title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotate(3deg);
}
.js .hero__title .ch { animation: charUp 0.7s var(--ease) forwards; }
@keyframes charUp { to { opacity: 1; transform: translateY(0) rotate(0deg); } }
.hero__content p { margin: 1.5rem 0 0; font-size: 1.05rem; max-width: 40ch; font-family: var(--mono); color: var(--text-dim); }
.hero__ctas { margin-top: 2.25rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }

.scroll-indicator {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-indicator span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.3em; color: var(--text-dim); }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--accent), transparent); }
.js .scroll-line { animation: scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ============================================================
   MARQUEE STRIP
============================================================ */
.marquee-strip {
  background: var(--deep);
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.marquee-inner { display: inline-flex; }
.js .marquee-inner { animation: marqueeScroll 22s linear infinite; }
.marquee-inner span { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--accent); padding: 0 1.75rem; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   DIAGONAL SECTION BREAKS
============================================================ */
.clip-break { height: 60px; }
.clip-break--to-raised { background: var(--bg-raised); clip-path: polygon(0 0, 100% 45%, 100% 100%, 0 100%); }
.clip-break--to-bg { background: var(--bg); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); }
.clip-break--to-text { background: var(--text); clip-path: polygon(0 0, 100% 45%, 100% 100%, 0 100%); }
.clip-break--to-deep { background: var(--deep); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); }

/* ============================================================
   PRESS STRIP
============================================================ */
.press-strip { padding: 2rem 1.5rem; text-align: center; border-bottom: 1px solid var(--border); }
.press-strip__label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; }
.press-strip__logos { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.press-strip__logos span { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.03em; color: var(--text-dim); opacity: 0.75; }

/* ============================================================
   STORY / STATS
============================================================ */
.story {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  background: var(--bg);
}
.story__text p { margin-top: 1.25rem; font-size: 1.02rem; font-family: var(--mono); max-width: 46ch; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.stat-item { text-align: center; padding: 1.75rem 1rem; border: 1px solid var(--border); border-top: 2px solid var(--accent); }
.stat-number { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--accent); display: block; }
.stat-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; max-width: 240px; margin: 0 auto; } }

/* ============================================================
   DISHES — accordion cards (services equivalent)
============================================================ */
.dishes { background: var(--bg-raised); padding: 5.5rem 1.5rem; }
.dishes-header { max-width: var(--max); margin: 0 auto 3rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; }
.dishes-header p { max-width: 34ch; font-family: var(--mono); font-size: 0.92rem; }
.dishes-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.dish-card { background: rgba(243,236,226,0.04); border: 1px solid var(--border); transition: border-color 0.3s var(--ease); }
.dish-card:hover { border-color: rgba(226,72,31,0.4); }
.dish-card.featured { grid-column: span 2; }
.dish-header { padding: 1.75rem 1.75rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; }
.dish-number { font-family: var(--display); font-size: 2rem; color: rgba(226,72,31,0.35); display: block; }
.dish-name { font-family: var(--display); font-size: 1.4rem; letter-spacing: 0.02em; }
.dish-tagline { font-family: var(--mono); font-size: 0.85rem; font-style: italic; color: var(--text-dim); margin-top: 0.3rem; }
.dish-toggle {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  margin-top: 0.4rem;
}
.dish-card.open .dish-toggle { transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); }
.dish-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.dish-card.open .dish-body { max-height: 220px; }
.dish-body-inner { padding: 0 1.75rem 1.75rem; border-top: 1px solid var(--border); }
.dish-desc { font-family: var(--mono); font-size: 0.88rem; margin-top: 1rem; margin-bottom: 1rem; line-height: 1.7; }
.dish-price-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.dish-price { font-family: var(--display); font-size: 1.3rem; color: var(--accent); }
@media (max-width: 760px) { .dishes-grid { grid-template-columns: 1fr; } .dish-card.featured { grid-column: span 1; } }

/* ============================================================
   FAQ — reuses the .dish-card accordion, one column
============================================================ */
.faq { max-width: 720px; margin: 0 auto; padding: 5.5rem 1.5rem; text-align: center; }
.faq h2 { margin-bottom: 3rem; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.faq-list .dish-header { align-items: center; }
.faq-list .dish-name { font-size: 1.1rem; }
.faq-list .dish-card.open .dish-body { max-height: 280px; }
.faq-list .dish-desc a { border-bottom: 1px solid var(--accent); }

/* ============================================================
   GALLERY — drag-scroll strip
============================================================ */
.gal { background: var(--bg); padding: 5.5rem 0 4.5rem; overflow: hidden; }
.gal-header { max-width: var(--max); margin: 0 auto 2.5rem; padding: 0 1.5rem; }
.gal-header p { font-family: var(--mono); font-style: italic; font-size: 0.9rem; margin-top: 0.6rem; }
.gal-wrap { overflow-x: auto; cursor: grab; padding: 0 1.5rem; scrollbar-width: none; }
.gal-wrap::-webkit-scrollbar { display: none; }
.gal-wrap.active { cursor: grabbing; }
.gal-track { display: flex; gap: 1rem; width: max-content; }
.gal-item { flex: 0 0 320px; height: 420px; position: relative; overflow: hidden; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); pointer-events: none; }
.gal-item:hover img { transform: scale(1.04); }
.gal-item-overlay { position: absolute; inset: auto 0 0 0; padding: 1.25rem; background: linear-gradient(to top, rgba(18,13,10,0.9), transparent); }
.gal-item-label { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--accent); }
@media (max-width: 600px) { .gal-item { flex: 0 0 240px; height: 320px; } }

/* ============================================================
   TEAM — light section
============================================================ */
.team-section { background: var(--text); color: var(--bg); padding: 5.5rem 1.5rem; }
.team-section .eyebrow { color: var(--deep); }
.team-section h2 { color: var(--bg); }
.team-section .team-intro { max-width: 56ch; margin-top: 1rem; font-family: var(--mono); color: rgba(18,13,10,0.65); font-size: 0.95rem; }
.team-grid { max-width: var(--max); margin: 3rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.team-member:nth-child(2) { margin-top: 3rem; }
.team-portrait { aspect-ratio: 3/4; overflow: hidden; margin-bottom: 1.1rem; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.team-member:hover .team-portrait img { transform: scale(1.05); }
.team-name { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.03em; }
.team-role { font-family: var(--mono); font-size: 0.82rem; font-style: italic; color: var(--deep); }
.team-bio { font-family: var(--mono); font-size: 0.85rem; color: rgba(18,13,10,0.65); margin-top: 0.6rem; line-height: 1.65; }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } .team-member:nth-child(2) { margin-top: 0; } }

/* ============================================================
   PROCESS
============================================================ */
.process { max-width: var(--max); margin: 0 auto; padding: 5.5rem 1.5rem; text-align: center; }
.process-steps { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; text-align: left; }
.process-steps::before {
  content: ''; position: absolute; top: 1.1rem; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent); opacity: 0.4;
}
.step-number {
  width: 38px; height: 38px; border: 1px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1rem; background: var(--bg); position: relative; margin-bottom: 1.1rem;
}
.step-title { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.step-desc { font-family: var(--mono); font-size: 0.85rem; line-height: 1.65; }
@media (max-width: 760px) { .process-steps { grid-template-columns: 1fr 1fr; } .process-steps::before { display: none; } }
@media (max-width: 500px) { .process-steps { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS — autoplay carousel
============================================================ */
.testimonials { background: var(--deep); padding: 5.5rem 1.5rem; text-align: center; }
.testimonials .eyebrow { color: var(--text); opacity: 0.7; }
.testimonials h2 { color: var(--text); }
.carousel-wrap { max-width: 720px; margin: 3rem auto 0; }
.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; }
.quote-mark { font-family: var(--display); font-size: 3.5rem; color: var(--accent); opacity: 0.6; display: block; margin-bottom: 0.5rem; }
.quote-text { font-family: var(--mono); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.75; color: var(--text); margin-bottom: 1.5rem; }
.quote-author { font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.15em; color: var(--accent); }
.quote-since { font-family: var(--mono); font-size: 0.8rem; color: rgba(243,236,226,0.55); margin-top: 0.3rem; }
.carousel-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,236,226,0.3); border: none; cursor: pointer; transition: 0.3s var(--ease); }
.carousel-dot.active { background: var(--accent); transform: scale(1.3); }

/* ============================================================
   FLAME DIVIDER — animated SVG, thematic stand-in for a barber pole
============================================================ */
.flame-divider { background: var(--bg); padding: 3.5rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.flame-divider__line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border)); }
.flame-divider__line:last-child { background: linear-gradient(to left, transparent, var(--border)); }
.flame path { transform-origin: 50% 100%; }
.js .flame path.flame-outer { animation: flicker 2.6s ease-in-out infinite; }
.js .flame path.flame-inner { animation: flicker 2.1s ease-in-out infinite reverse; }
@keyframes flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) skewX(0deg); }
  25%      { transform: scaleY(1.05) scaleX(0.96) skewX(1.5deg); }
  50%      { transform: scaleY(0.96) scaleX(1.03) skewX(-1deg); }
  75%      { transform: scaleY(1.03) scaleX(0.98) skewX(1deg); }
}

/* ============================================================
   BOOK TEASER — links out to the full reserve.html calendar
============================================================ */
.book-teaser { max-width: var(--max); margin: 0 auto; padding: 5.5rem 1.5rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.book-teaser__text p { margin-top: 1.25rem; font-family: var(--mono); font-size: 1rem; max-width: 44ch; }
.book-teaser__ctas { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.book-teaser__card { border: 1px solid var(--border); padding: 2rem; }
.hours-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.88rem; }
.hours-row span:last-child { color: var(--text); }
.book-teaser__address { margin-top: 1.25rem; font-family: var(--mono); font-size: 0.85rem; font-style: italic; }
@media (max-width: 760px) { .book-teaser { grid-template-columns: 1fr; } }

/* ============================================================
   PRIVATE EVENTS — package cards + enquiry form
============================================================ */
.package-grid { max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.package-card { border: 1px solid var(--border); padding: 2rem; text-align: center; }
.package-card--featured { border-color: var(--accent); background: rgba(226,72,31,0.06); }
.package-card__eyebrow { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; }
.package-card h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.package-card__desc { font-family: var(--mono); font-size: 0.88rem; line-height: 1.7; min-height: 5.5em; }
.package-card__price { margin-top: 1.25rem; font-family: var(--display); font-size: 1.4rem; color: var(--text); }
.package-card__price span { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
@media (max-width: 860px) { .package-grid { grid-template-columns: 1fr; } .package-card__desc { min-height: 0; } }

.events-form { max-width: 560px; margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.events-form__intro { text-align: center; margin-bottom: 2.5rem; }
.events-form__intro p { margin-top: 0.75rem; font-family: var(--mono); font-size: 0.95rem; }
.events-form form { display: flex; flex-direction: column; gap: 1.25rem; }
.events-form__confirm { text-align: center; font-family: var(--mono); font-size: 1.05rem; padding: 2rem 0; }

.menu { max-width: var(--max); margin: 0 auto; padding: 4.5rem 1.5rem; }
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.menu__intro { max-width: 60ch; margin-bottom: 3rem; text-align: center; margin-left: auto; margin-right: auto; }
.menu__layout { max-width: 640px; margin: 0 auto; }

/* Dotted-leader menu list: a classic printed-menu detail, distinct from
   a plain flex list or a boxed card grid. */
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.menu__name { white-space: nowrap; }
.menu__leader { flex: 1; border-bottom: 2px dotted var(--border); margin-bottom: 0.3rem; }
.menu__price { color: var(--accent); font-family: var(--mono); font-weight: 700; white-space: nowrap; }
@media (max-width: 780px) { .menu__name { white-space: normal; } }

.about { background: var(--bg-raised); border-top: 1px solid var(--border); text-align: center; }
.about__inner { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem; }
.about__inner p { margin-top: 1.25rem; font-size: 1.02rem; font-family: var(--mono); }

/* ============================================================
   FOOTER — expanded 4-column
============================================================ */
footer.site-footer { background: var(--accent-ink); padding: 4rem 1.5rem 1.5rem; border-top: 1px solid var(--border); }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand-name { font-family: var(--display); font-size: 1.9rem; color: var(--accent); letter-spacing: 0.03em; margin-bottom: 0.75rem; }
.footer-brand-desc { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; max-width: 280px; }
.footer-col-title { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 1.1rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); transition: color 0.25s; }
.footer-links a:hover { color: var(--text); }
.footer-address { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); line-height: 1.8; font-style: normal; }
.footer-address strong { color: var(--text); }
.footer-bottom { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); }
.footer-bottom a { color: var(--accent); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > *:first-child { grid-column: span 2; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } .footer-grid > *:first-child { grid-column: span 1; } }

.page-intro { max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.5rem 1rem; text-align: center; }
.page-intro p { max-width: 60ch; margin: 0.75rem auto 0; font-size: 1.02rem; font-family: var(--mono); }

.menu-full { max-width: 640px; margin: 0 auto; padding: 1rem 1.5rem 4rem; display: grid; gap: 2.75rem; }
.menu-cat h2 { font-size: 1.6rem; margin-bottom: 0.75rem; text-align: center; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.field input, .field select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font-size: 0.98rem;
  font-family: var(--mono);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

.reserve { max-width: 560px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.reserve__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 560px) { .reserve__row { grid-template-columns: 1fr; } }
.reserve__slots { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reserve__slot {
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 700;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 90% 50%, 100% 70%, 100% 100%, 0 100%, 0 70%, 10% 50%, 0 30%);
}
.reserve__slot:hover { border-color: var(--accent); }
.reserve__slot--selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.reserve__slot--taken { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.reserve__hint { margin-top: 1rem; font-size: 0.92rem; font-family: var(--mono); }
.reserve__selection { font-weight: 700; color: var(--text); margin-bottom: 1.5rem; font-size: 1.05rem; font-family: var(--mono); }
.reserve__actions { display: flex; gap: 1rem; margin-top: 0.5rem; align-items: center; }
.reserve__note { font-size: 0.8rem; margin-top: 1rem; font-family: var(--mono); }
#stepConfirm h2 { margin-bottom: 1rem; }
#stepConfirm p { margin-bottom: 0.75rem; font-family: var(--mono); }
#stepConfirm .btn { margin-top: 1rem; }

.shop { max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 4rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 800px) { .shop { grid-template-columns: 1fr; } }
.shop__products { display: flex; flex-direction: column; gap: 1.5rem; }
.product { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--bg-raised); border-left: 3px solid var(--accent); }
.product__body h2 { font-size: 1.2rem; }
.product__body p { margin-top: 0.4rem; max-width: 36ch; font-family: var(--mono); font-size: 0.9rem; }
.product__controls { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.product__qty { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 0.6rem; font-family: var(--mono); }

.cart { background: var(--bg-raised); border: 1px solid var(--border); padding: 1.75rem; position: sticky; top: calc(var(--bars-h) + 1rem); }
.cart h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.cart__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--mono); }
.cart__list li { display: flex; justify-content: space-between; font-size: 0.88rem; }
.cart__empty { color: var(--text-dim); }
.cart__total { display: flex; justify-content: space-between; font-weight: 700; font-family: var(--mono); padding-top: 1rem; border-top: 1px solid var(--border); margin-bottom: 1.25rem; }
.cart__checkout { width: 100%; justify-content: center; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }