/* =========================================================
   JUNGLE 8 · V3 EFFECTS LAYER
   Loaded AFTER components.css — overrides + adds modern fx.
   ========================================================= */

/* ---------- SCROLL FADE-UP ANIMATION ----------
   v3.1 polish: Default to VISIBLE. Use CSS animation (not transition)
   so elements always appear even when IntersectionObserver doesn't fire
   (long page, slow JS, headless screenshots). The `.is-visible` class
   from JS still works to layer a snappier entrance on scroll. */
[data-anim] {
  opacity: 1;
  transform: none;
  animation: j8-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes j8-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes j8-fade-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes j8-fade-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes j8-fade-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
[data-anim="left"]  { animation-name: j8-fade-left; }
[data-anim="right"] { animation-name: j8-fade-right; }
[data-anim="zoom"]  { animation-name: j8-fade-zoom; }

[data-delay="100"] { animation-delay: 100ms; }
[data-delay="200"] { animation-delay: 200ms; }
[data-delay="300"] { animation-delay: 300ms; }
[data-delay="400"] { animation-delay: 400ms; }
[data-delay="500"] { animation-delay: 500ms; }
[data-delay="600"] { animation-delay: 600ms; }

/* When JS marks as visible (intersection), no extra effect needed —
   the animation already played. .is-visible kept for legacy hooks. */
[data-anim].is-visible { opacity: 1; transform: none; }

/* Reduced motion: no entrance animation */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- CUSTOM CURSOR ---------- */
@media (min-width: 900px) and (hover: hover) {
  body { cursor: none; }
  a, button, [role="button"] { cursor: none; }
  .j8-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--j8-pink-500);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transition: width 0.3s var(--j8-ease-out),
                height 0.3s var(--j8-ease-out),
                background 0.3s var(--j8-ease-out);
    box-shadow: var(--j8-glow-md);
  }
  .j8-cursor.is-active {
    width: 60px; height: 60px;
    background: rgba(236, 155, 255, 0.15);
    border-color: var(--j8-pink-300);
  }
  .j8-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--j8-pink-500);
    pointer-events: none;
    z-index: 10000;
    box-shadow: var(--j8-glow-sm);
  }
}

/* ---------- SPARKLE BURST ---------- */
.j8-sparkle {
  position: absolute;
  font-size: 14px;
  color: var(--j8-pink-500);
  text-shadow: var(--glow-text);
  pointer-events: none;
  animation: sparkle 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 50;
}
@keyframes sparkle {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.2) rotate(360deg) translateY(-20px); }
}

/* ---------- NAV ON SCROLL ---------- */
.nav { transition: background-color 0.3s var(--j8-ease-out); }
.nav.is-scrolled {
  background: rgba(6, 3, 4, 0.94);
  border-bottom-color: var(--border-soft);
}

/* ---------- NEON FLICKER (hero "Wild." word) ---------- */
.hero-wordmark .pink {
  animation: neon-flicker 8s ease-in-out infinite;
}
@keyframes neon-flicker {
  0%, 92%, 100% {
    text-shadow: var(--glow-text-hero);
    opacity: 1;
  }
  93%, 95% { text-shadow: 0 0 4px var(--j8-pink-500); opacity: 0.78; }
  94%      { text-shadow: var(--glow-text-hero); opacity: 1; }
  96%, 98% { text-shadow: 0 0 2px var(--j8-pink-500); opacity: 0.65; }
  97%      { text-shadow: var(--glow-text-hero); opacity: 1; }
}

/* ---------- FLOATING ORNAMENTS ---------- */
.ornament {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.ornament svg { width: 100%; height: 100%; }
.ornament.float-slow { animation: float 8s ease-in-out infinite; }
.ornament.float-med  { animation: float 6s ease-in-out infinite; animation-delay: -2s; }
.ornament.float-fast { animation: float 4.5s ease-in-out infinite; animation-delay: -1s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}

/* ---------- LIVE STATUS TICKER (top bar enhancement) ---------- */
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--j8-font-mono);
  font-size: 11px;
  letter-spacing: var(--j8-tracking-wider);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.live-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-quaternary);
  box-shadow: 0 0 0 0 transparent;
  transition: all 0.3s var(--j8-ease-out);
}
.live-status.is-open { color: var(--j8-jade-400); }
.live-status.is-open::before {
  background: var(--j8-jade-400);
  box-shadow: 0 0 12px var(--j8-jade-400), 0 0 4px var(--j8-jade-400);
  animation: pulse 2s ease-in-out infinite;
}

/* ---------- MARQUEE V2 (2-row bidirectional) ---------- */
.marquee-2 {
  position: relative;
  background: var(--j8-bg-1);
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--j8-space-3);
  overflow: hidden;
}
.marquee-row {
  display: flex;
  gap: 64px;
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  font-size: var(--j8-text-2xl);
  text-transform: uppercase;
  white-space: nowrap;
  width: max-content;
}
.marquee-row.row-1 { animation: marquee-left 40s linear infinite; }
.marquee-row.row-2 {
  animation: marquee-right 36s linear infinite;
  margin-top: 12px;
  opacity: 0.5;
  font-size: var(--j8-text-xl);
}
.marquee-row span {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.marquee-row span:nth-child(2n) { color: var(--j8-pink-500); text-shadow: var(--glow-text); font-style: italic; }
.marquee-row span::after {
  content: '✦';
  font-size: 0.55em;
  color: var(--j8-pink-500);
  text-shadow: var(--glow-text);
  font-style: normal;
}
@keyframes marquee-left  { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- MAGAZINE-TILT FORMAT CARDS ---------- */
.formats-grid .format-card { transition: transform 0.5s var(--j8-ease-out), box-shadow 0.5s var(--j8-ease-out), border-color 0.3s; }
.formats-grid .format-card:nth-child(odd)  { transform: rotate(-0.7deg); }
.formats-grid .format-card:nth-child(even) { transform: rotate(0.7deg); }
.formats-grid .format-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  z-index: 10;
}

/* Add sticker stamp top-right of each card (price/time chip) */
.format-card .sticker {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  background: var(--j8-pink-500);
  color: var(--j8-text-on-pink);
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  font-size: 13px;
  letter-spacing: 0;
  padding: 6px 12px;
  border-radius: var(--j8-radius-pill);
  text-transform: uppercase;
  box-shadow: var(--j8-glow-sm);
  white-space: nowrap;
  transform: rotate(6deg);
}
.format-card .sticker.amber { background: var(--j8-amber-400); color: #2a1607; }
.format-card .sticker.jade { background: var(--j8-jade-400); color: #062a1c; }

/* ---------- FEATURED-IN PRESS STRIP ---------- */
.press-strip {
  background: var(--j8-bg-1);
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--j8-space-5);
}
.press-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--j8-space-7);
  flex-wrap: wrap;
}
.press-label {
  font-family: var(--j8-font-mono);
  font-size: 10px;
  letter-spacing: var(--j8-tracking-widest);
  text-transform: uppercase;
  color: var(--text-quaternary);
}
.press-logo {
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  font-size: var(--j8-text-lg);
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: var(--j8-tracking-tight);
  transition: color 0.3s var(--j8-ease-out);
  filter: grayscale(1);
}
.press-logo:hover { color: var(--j8-pink-300); filter: grayscale(0); }
.press-logo em { font-style: italic; color: var(--text-quaternary); font-weight: var(--j8-weight-medium); }

/* ---------- STORY TIMELINE ---------- */
.story-section {
  position: relative;
  overflow: hidden;
}
.story-line {
  position: relative;
  margin-top: var(--j8-space-7);
}
.story-line::before {
  content: '';
  position: absolute;
  top: 30px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}
.story-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--j8-space-7);
  position: relative;
}
@media (min-width: 768px) {
  .story-steps { grid-template-columns: repeat(4, 1fr); gap: var(--j8-space-4); }
}
.story-step {
  position: relative;
  text-align: center;
}
.story-step-dot {
  width: 60px; height: 60px;
  margin: 0 auto var(--j8-space-4);
  border-radius: 50%;
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  font-size: var(--j8-text-md);
  color: var(--j8-pink-500);
  position: relative;
  z-index: 1;
  transition: all 0.3s var(--j8-ease-out);
}
.story-step:hover .story-step-dot {
  background: var(--j8-pink-500);
  color: var(--j8-text-on-pink);
  box-shadow: var(--j8-glow-md);
  border-color: var(--j8-pink-500);
}
.story-step-year {
  font-family: var(--j8-font-mono);
  font-size: 10px;
  letter-spacing: var(--j8-tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.story-step-title {
  font-family: var(--j8-font-display);
  text-transform: uppercase;
  font-weight: var(--j8-weight-black);
  font-size: var(--j8-text-md);
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: var(--j8-tracking-tight);
}
.story-step-desc {
  font-size: var(--j8-text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  max-width: 24ch;
  margin: 0 auto;
}

/* ---------- FOOD SHOWCASE (full-width image block) ---------- */
.food-showcase {
  position: relative;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  isolation: isolate;
}
.food-showcase-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.04);
  filter: brightness(0.62) saturate(1.2);
}
.food-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--j8-bg-0) 0%, transparent 25%, transparent 75%, var(--j8-bg-0) 100%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(236, 155, 255, 0.25), transparent 70%);
  z-index: 1;
}
.food-showcase-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.food-showcase-title {
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  text-transform: uppercase;
  font-size: clamp(var(--j8-text-4xl), 9vw, var(--j8-text-7xl));
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin-bottom: var(--j8-space-4);
}
.food-showcase-title em {
  color: var(--j8-pink-500);
  text-shadow: var(--glow-text-hero);
  font-style: italic;
}

/* ---------- WORDMARK STROKED HOVER ---------- */
.hero-wordmark .stroke {
  -webkit-text-stroke: 2px var(--j8-pink-400);
  color: transparent;
  transition: color 0.4s var(--j8-ease-out);
}
.hero-wordmark .stroke:hover {
  color: var(--j8-pink-500);
}

/* ---------- DISH CARD 3D TILT ON HOVER ---------- */
.dish-card {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.5s var(--j8-ease-out), border-color 0.3s, background 0.3s;
}
.dish-card:hover {
  transform: translateY(-4px) rotateX(2deg);
}

/* ---------- VEGETABLE/STREET-FOOD SVG STICKERS ---------- */
.sticker-corner {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.sticker-corner.tl { top: -14px; left: -14px; }
.sticker-corner.tr { top: -14px; right: -14px; }
.sticker-corner.bl { bottom: -14px; left: -14px; }
.sticker-corner.br { bottom: -14px; right: -14px; }

/* ---------- HOVER LIFT FOR LINKS/CTAS ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s var(--j8-ease-out);
}
.btn--primary:hover::before { transform: translateX(100%); }

/* ---------- FORMAT CARD IMAGE OVERLAY for new banner photos ---------- */
.format-card-bg img {
  filter: brightness(0.9) saturate(1.1);
  transition: filter 0.5s var(--j8-ease-out), transform 0.8s var(--j8-ease-out);
}
.format-card:hover .format-card-bg img {
  filter: brightness(1) saturate(1.2);
}

/* ---------- IG STRIP — small inscription tag on hover ---------- */
.ig-cell {
  border-radius: 4px;
}

/* ---------- LARGE TYPE TREATMENT ---------- */
.huge-line {
  font-family: var(--j8-font-display);
  font-weight: var(--j8-weight-black);
  text-transform: uppercase;
  font-size: clamp(var(--j8-text-5xl), 12vw, var(--j8-text-7xl));
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.huge-line em {
  color: var(--j8-pink-500);
  text-shadow: var(--glow-text-hero);
  font-style: italic;
}

/* ---------- HERO HUD chips (corner badges) ---------- */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 10, 13, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  padding: 8px 14px;
  border-radius: var(--j8-radius-pill);
  font-family: var(--j8-font-mono);
  font-size: 11px;
  letter-spacing: var(--j8-tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hero-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--j8-pink-500);
  box-shadow: 0 0 8px var(--j8-pink-500);
  animation: pulse 2s ease-in-out infinite;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--j8-space-5);
}

/* =========================================================
   ===========   POLISH PASS — 2026-05-25 v3.1   ===========
   Fixes from visual verify (ui-visual-verifier agent):
   FIX-1: Hero stamp covered "WILD." wordmark @ 1280px → bottom-right
   FIX-2: Food showcase 2-line title crashed vertically → line gap
   FIX-3: Stamp tag font 9px violates ≥12px → bumped + readable
   FIX-4: data-anim scroll-fade used opacity:0 default → entire elements
          stayed invisible when IntersectionObserver didn't fire (long
          page, slow JS, headless). Refactored above to CSS keyframe
          animation that auto-plays on page load. No dependency on JS.
   FIX-5: Press strip too small/faint → enlarge label + logos
   FIX-6: Food showcase blurb hard to read on photo → backdrop chip
   ========================================================= */

/* FIX-1+3: Hero stamp — move INTO bottom-right corner (clear of wordmark) */
.hero-stamp {
  top: auto !important;
  bottom: 8% !important;
  right: 3% !important;
  width: 156px;
  padding: 16px;
  z-index: 3;
}
.hero-stamp .stamp-big {
  font-size: 32px !important;
  margin-block: 4px 6px !important;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stamp .stamp-tag {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2;
}
@media (max-width: 1199px) {
  .hero-stamp {
    width: 128px !important;
    bottom: 32% !important;
    right: 16px !important;
    padding: 12px !important;
    transform: rotate(-8deg) !important;
  }
  .hero-stamp .stamp-big { font-size: 26px !important; }
  .hero-stamp .stamp-tag { font-size: 10px !important; }
}
@media (max-width: 767px) {
  .hero-stamp {
    width: 100px !important;
    bottom: 26% !important;
    right: 10px !important;
    padding: 10px !important;
  }
  .hero-stamp .stamp-big { font-size: 20px !important; }
  .hero-stamp .stamp-tag { font-size: 9px !important; line-height: 1.1; }
}

/* Ensure hero wordmark sits ABOVE stamp z-stack */
.hero-wordmark { position: relative; z-index: 2; }

/* FIX-2: Food showcase typography — force breathing room between lines */
.food-showcase-title {
  line-height: 1.02 !important;
  letter-spacing: -0.025em;
}
.food-showcase-title em {
  display: inline-block;
  margin-top: 0.16em;
}

/* FIX-6: Food showcase blurb readable on photo */
.food-showcase-content > p {
  background: rgba(6, 3, 4, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(236, 155, 255, 0.18);
  border-radius: var(--j8-radius-md);
  padding: 14px 22px;
  margin-top: var(--j8-space-5) !important;
  color: var(--text-primary) !important;
}

/* FIX-5: Press strip — larger label + more presence */
.press-label { font-size: 11px !important; }
.press-logo { font-size: var(--j8-text-xl) !important; }

/* Polish: footer accessibility line height */
.footer-col a { line-height: 1.5; }

/* Polish: dish-card height equalizing for 4-up row */
@media (min-width: 1100px) {
  .dish-card { min-height: 280px; display: flex; flex-direction: column; }
  .dish-card .dish-en { flex: 1; }
}

/* Polish: reserve-mock-cell hover */
.reserve-mock-cell {
  transition: border-color 0.3s var(--j8-ease-out), background 0.3s var(--j8-ease-out);
}
.reserve-mock-cell:hover {
  border-color: var(--j8-pink-500);
  background: rgba(236, 155, 255, 0.06);
}

/* Polish: hero-stamp depth */
.hero-stamp { box-shadow: var(--j8-glow-lg), var(--j8-shadow-lg), inset 0 -8px 16px rgba(0,0,0,0.18); }


/* =========================================================
   ===========   ITER-2 IMPACT PASS - 2026-05-25   ==========
   Self-critique with magazine + brutalist + nightclub-flyer eyes.
   3 weakest zones identified after iter-1 polish:

   IMPACT-1 (story timeline): circle dots = generic SaaS roadmap.
     Replace with MASSIVE outline page-marker numerals (Druk XCond
     stacked behind the year), ditch the invisible center line,
     anchor each step to its own gigantic numeral.

   IMPACT-2 (menu/dish grid): 4 identical boxed cards = pricing-table
     vibe. Strip the box, replace with hairline-only dividers, hang
     huge ghost numerals as page markers, push price as the wow item.

   IMPACT-3 (reserve card): timid centered card. Make it edge-to-edge
     dark slab, drop the soft radius, push h2 to brutalist scale,
     expose grid lines on mock cells, add a tilted neon stamp tape.
   ========================================================= */

/* ----- IMPACT-1 - STORY TIMELINE re-imagined ----- */
.story-line::before { display: none !important; }
.story-section .section-title { max-width: 22ch; }
.story-step { text-align: left; padding-top: 12px; }
.story-step-dot {
  width: auto !important;
  height: auto !important;
  margin: 0 0 var(--j8-space-3) 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  font-family: var(--j8-font-display-x), var(--j8-font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(96px, 11vw, 168px) !important;
  line-height: 0.78 !important;
  letter-spacing: -0.04em !important;
  -webkit-text-stroke: 1.5px var(--j8-pink-500);
  color: transparent !important;
  text-shadow: 0 0 22px rgba(236, 155, 255, 0.22);
  transition: color 0.4s var(--j8-ease-out), -webkit-text-stroke-color 0.4s var(--j8-ease-out), text-shadow 0.4s var(--j8-ease-out);
}
.story-step:hover .story-step-dot {
  color: var(--j8-pink-500) !important;
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 38px rgba(236, 155, 255, 0.6) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-step-year {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: var(--j8-pink-300) !important;
  border-top: 1px solid var(--j8-border-strong);
  padding-top: 12px;
  margin-bottom: 8px !important;
}
.story-step-title {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}
.story-step-desc {
  max-width: 26ch;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--text-secondary) !important;
}
@media (max-width: 767px) {
  .story-step-dot { font-size: 96px !important; }
}

/* ----- IMPACT-2 - DISH GRID stripped and ghost-numerated ----- */
.menu-grid {
  gap: 0 !important;
  border-top: 1px solid var(--j8-border-strong);
  margin-top: var(--j8-space-7);
  counter-reset: dish-marker;
}
.dish-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--j8-border-strong) !important;
  border-radius: 0 !important;
  padding: var(--j8-space-6) var(--j8-space-5) !important;
  perspective: none !important;
  transform-style: flat !important;
  min-height: 0 !important;
  counter-increment: dish-marker;
  position: relative;
}
@media (min-width: 700px) {
  .dish-card { border-right: 1px solid var(--j8-border-strong) !important; }
  .dish-card:nth-child(2n) { border-right: none !important; }
}
@media (min-width: 1100px) {
  .dish-card:nth-child(2n) { border-right: 1px solid var(--j8-border-strong) !important; }
  .dish-card:last-child { border-right: none !important; }
}
.dish-card:hover {
  background: rgba(236, 155, 255, 0.04) !important;
  transform: none !important;
}
.dish-card::before {
  content: counter(dish-marker, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 18px;
  font-family: var(--j8-font-display-x), var(--j8-font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 155, 255, 0.22);
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.4s var(--j8-ease-out);
}
.dish-card:hover::before { -webkit-text-stroke-color: rgba(236, 155, 255, 0.55); }
.dish-card h3 {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  margin-bottom: var(--j8-space-3) !important;
  max-width: 14ch;
}
.dish-card .dish-en { min-height: 0 !important; max-width: 32ch; }
.dish-card-price {
  border-top: none !important;
  padding-top: var(--j8-space-4) !important;
  align-items: baseline;
}
.dish-card-price .p {
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 900;
  text-shadow: var(--glow-text);
}

/* ----- IMPACT-3 - RESERVE block brutalist re-cut ----- */
.reserve-section { padding-block: var(--j8-space-9) !important; }
.reserve-card {
  background: linear-gradient(180deg, #0F0A0D 0%, #181216 100%) !important;
  border: 1px solid var(--j8-border-strong) !important;
  border-radius: 0 !important;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) !important;
  text-align: left !important;
  box-shadow: 0 32px 120px -24px rgba(236, 155, 255, 0.28),
              0 1px 0 0 rgba(236, 155, 255, 0.18) inset !important;
  position: relative;
  overflow: visible !important;
}
.reserve-card::after {
  content: 'FORM / NZL / 2026';
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--j8-font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.reserve-card h2 {
  font-size: clamp(48px, 9vw, 120px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.035em !important;
  margin: var(--j8-space-3) 0 var(--j8-space-5) 0 !important;
  max-width: 14ch;
}
.reserve-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--j8-pink-300);
}
.reserve-card p {
  max-width: 56ch !important;
  margin: 0 0 var(--j8-space-7) 0 !important;
  font-size: var(--j8-text-md) !important;
  color: var(--text-secondary);
}
.reserve-mock {
  max-width: none !important;
  margin: 0 0 var(--j8-space-7) 0 !important;
  gap: 0 !important;
  border-top: 1px solid var(--j8-border-strong);
  border-bottom: 1px solid var(--j8-border-strong);
}
.reserve-mock-cell {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--j8-border-strong) !important;
  border-radius: 0 !important;
  padding: var(--j8-space-5) var(--j8-space-4) !important;
}
.reserve-mock-cell:last-child { border-right: none !important; }
.reserve-mock-cell .k {
  color: var(--j8-pink-300) !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.22em !important;
}
.reserve-mock-cell .v {
  font-size: clamp(20px, 2vw, 26px) !important;
  letter-spacing: -0.01em;
}
.reserve-mock-cell:hover {
  background: rgba(236, 155, 255, 0.06) !important;
  border-color: var(--j8-pink-500) !important;
}
.reserve-card > div:last-child { justify-content: flex-start !important; }
.reserve-tape {
  position: absolute;
  top: -16px;
  left: clamp(24px, 4vw, 56px);
  background: var(--j8-pink-500);
  color: var(--j8-text-on-pink);
  font-family: var(--j8-font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 8px 18px;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 32px -8px rgba(236, 155, 255, 0.6);
}

/* =========================================================
   ITER 3 — BRUTALIST UNIFICATION
   Goal: kill design-language collision between rounded
   format cards and editorial story/menu/reserve.
   Strategy: format cards adopt hairline + outline-numeral
   language; reserve h2 demoted to stop competing with hero;
   hero chips trimmed on mobile to lift wordmark above fold.
   ========================================================= */

/* ---- FIX 2: Reserve h2 — demote to xcond + stop weight=900 collision ---- */
.reserve-card h2 {
  font-family: var(--j8-font-display-x) !important;  /* Druk XCond = taller, thinner silhouette vs hero Druk Super wide */
  font-size: clamp(44px, 7vw, 88px) !important;       /* was 48-120 → 44-88 */
  letter-spacing: -0.025em !important;
  max-width: 16ch;
}
.reserve-card h2 em {
  color: var(--j8-pink-500);
  font-style: normal;                                  /* no italic mismatch */
  text-shadow: var(--j8-glow-text);
}

/* ---- FIX 3: Brutalize format cards — mirror story/menu editorial ---- */
.formats-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 !important;                                    /* hairline grid = no gap, borders touch */
  border-top: 1px solid var(--j8-border-soft);
  border-left: 1px solid var(--j8-border-soft);
}
.formats-grid .format-card {
  border-radius: 0 !important;                          /* was 22px → square */
  border: none !important;
  border-right: 1px solid var(--j8-border-soft) !important;
  border-bottom: 1px solid var(--j8-border-soft) !important;
  background: transparent !important;
  transform: none !important;                           /* kill magazine-tilt (was rotate ±0.7deg) */
  overflow: hidden;
}
.formats-grid .format-card:hover {
  transform: translateY(-2px) !important;               /* subtler than -8 + scale */
  background: rgba(236, 155, 255, 0.03) !important;
  box-shadow: none !important;
}
/* Kill rounded-circle stickers — replace with inline mono label */
.format-card .sticker {
  position: static !important;
  display: inline-block;
  background: transparent !important;
  color: var(--j8-pink-300) !important;
  font-family: var(--j8-font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  margin: var(--j8-space-4) var(--j8-space-5) 0 !important;
}
.format-card .sticker.amber { color: var(--j8-amber-400) !important; }
.format-card .sticker.jade  { color: var(--j8-jade-400) !important; }

/* Outline numeral 01/02/03/04/05 (mirrors story timeline) */
.formats-grid .format-card { counter-increment: fc-num; }
.formats-grid { counter-reset: fc-num; }
.formats-grid .format-card::before {
  content: counter(fc-num, decimal-leading-zero);
  position: absolute;
  top: var(--j8-space-4);
  right: var(--j8-space-5);
  z-index: 6;
  font-family: var(--j8-font-display-x);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  -webkit-text-stroke: 1px var(--j8-pink-500);
  color: transparent;
  letter-spacing: -0.04em;
  opacity: 0.55;
  pointer-events: none;
}
/* Photo dim → editorial */
.format-card-bg { height: 180px !important; }
.format-card-bg::before {
  background: linear-gradient(180deg, rgba(15,13,13,0.4) 0%, rgba(15,13,13,0.98) 100%) !important;
}
/* Body: remove price meta border (already hairline above), reduce price visual weight */
.format-card-meta {
  border-top: 1px solid var(--j8-border-soft) !important;
  padding-top: var(--j8-space-4) !important;
}
.format-card-meta .price {
  font-family: var(--j8-font-display-x) !important;
  font-weight: 900;
  text-shadow: none !important;
  letter-spacing: -0.01em;
}
.format-card-meta .arrow {
  border-radius: 0 !important;                          /* circle → square */
  border-color: var(--j8-border-soft) !important;
}

/* ---- FIX 4: Mobile hero — kill 2 of 3 chips, trim top-padding ---- */
@media (max-width: 767px) {
  .hero-chips .hero-chip:nth-child(n+2) { display: none; }
  .hero { padding-top: var(--j8-space-6) !important; }   /* trim ~30% */
  .hero-wordmark {
    font-size: clamp(64px, 18vw, 96px) !important;       /* was 72/16vw — bump density on mobile */
  }
}

/* ---- FIX 5 (typography weight ladder): demote format-card titles to 700 ---- */
.format-card-title {
  font-weight: 700 !important;                            /* was 900 — gives hero monopoly on 900 */
}

/* ---- FIX 6 (color depth): brand-tint card hover shadow ---- */
.formats-grid .format-card:hover {
  border-color: var(--j8-pink-500) !important;
  box-shadow: inset 0 0 0 1px var(--j8-pink-500),
              0 12px 40px -16px rgba(236, 155, 255, 0.35) !important;
}

/* =========================================================
   ITER 4 — HEADLINE LETTER-SPACING RELAX (Dang feedback)
   Issue: "ELLIOTT STABLES. JUST OFF QUEEN ST." reads
   crushed — letters touching, no breath.
   Strategy: relax all hardcoded -0.03/-0.04 negatives on
   Druk display headlines down to neutral or near-zero.
   Druk is drawn tight already — adding negative tracking
   on top crushes uppercase legibility.
   ========================================================= */
.formats-head .section-title,
.section-title { letter-spacing: 0 !important; }              /* was tracking-tight = -0.02 */

.story-step-title           { letter-spacing: -0.005em !important; }   /* was -0.03 */
.menu-pricelist .dish-en,
.dish-card .dish-en         { letter-spacing: -0.005em !important; }   /* was -0.025 */
.food-showcase-title        { letter-spacing: -0.005em !important; }   /* was -0.04 */
.marquee-track              { letter-spacing: 0.005em !important; }    /* was -0.01 */
.reserve-card h2            { letter-spacing: -0.005em !important; word-spacing: 0.08em !important; }   /* word-spacing to separate "FIND YOUR" */
.section-title              { word-spacing: 0.04em !important; }
.hero-wordmark              { word-spacing: 0.03em !important; }

/* =========================================================
   ITER 5 — KILL Druk italic synthesis trap (cross-cutting)
   Druk has NO 900-italic font-face → browser synth skew
   collapses narrow glyphs (I, L) against glow shadows.
   Strip italic from ALL display-headline <em> + marquee.
   Emphasis stays via color + glow, not italic skew.
   ========================================================= */
.marquee-row span:nth-child(2n),
.marquee-track span:nth-child(2n) {
  font-style: normal !important;
}
.vibe-copy h2 em,
.food-showcase-title em,
.vibe-visual-stamp em,
.story-section h2 em,
.story-section .section-title em,
.section-title em,
.press-logo em {
  font-style: normal !important;
}

/* =========================================================
   ITER 5 — DEMOTE marquee row-2 to static metadata caption
   Was: 2nd ticker scrolling opposite direction = ticker fatigue
   Now: single quiet line of mono caps under loud row-1
   Trade "second loud band" → "one loud + one quiet" classic poster move
   ========================================================= */
.marquee-2 { padding-block: var(--j8-space-6) var(--j8-space-5); }
.marquee-row.row-2 {
  animation: none !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  width: 100% !important;
  opacity: 0.45 !important;
  margin-top: 12px !important;
  font-family: var(--j8-font-mono) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
  font-style: normal !important;
  text-shadow: none !important;
}
.marquee-row.row-2 span {
  color: inherit !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 14px;
  position: relative;
}
.marquee-row.row-2 span::after {
  content: '·' !important;
  color: var(--j8-pink-500) !important;
  margin-left: 14px;
  font-size: 1em !important;
  -webkit-text-stroke: 0;
  text-shadow: none !important;
  font-style: normal !important;
}
.marquee-row.row-2 span:last-child::after { content: '' !important; }

/* =========================================================
   ITER 5 — Format-card photos readable
   Was: gradient 0.4→0.98 black = photos crushed into murk
   Now: 0.15→0.75 + height 180→220 = dish recognizable
   Also kill double-corner anchor stutter (sticker top-left
   competing with numeral top-right) → sticker moves into body
   ========================================================= */
.format-card-bg { height: 220px !important; }
.format-card-bg::before {
  background: linear-gradient(180deg, rgba(15,13,13,0.18) 0%, rgba(15,13,13,0.78) 100%) !important;
}
/* sticker moves inline with format-card-label (eyebrow row) */
.format-card .sticker {
  margin: 0 0 0 12px !important;
  vertical-align: middle;
}
.vibe-headline,
.vibe-copy h2               { letter-spacing: -0.005em !important; }   /* was -0.04 */
.press-strip-title          { letter-spacing: 0 !important; }
.format-card-title          { letter-spacing: 0 !important; }          /* was tracking-tight */
.footer-brand strong,
.footer-col h4              { letter-spacing: 0.04em !important; }     /* small caps benefit from positive tracking */

/* Hero wordmark already loosened in components.css (-0.01em base, 0 on .pink) */