/* ==========================================================================
   Mitr Thai — 2026-08 homepage redesign (Bangkok Supper Club-style layout,
   Mitr palette). Loaded AFTER styles.css on index/menu/reservations.
   Sections: 1 nav (BSC 3-column) · 2 full-screen hero slideshow ·
   3 big tagline · 4 menu/events cards · 5 regional stories ·
   6 event modal (all pages) · 7 menu course filter (menu page)
   ========================================================================== */

/* ---------- 1. Top bar: address | logo | nav + Reserve ---------- */
.nav--bsc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav__side { display: flex; align-items: center; }
.nav__side--left {
  justify-self: start;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.nav__side--right {
  justify-self: end;
  gap: 24px;
}
.nav__brand--center { justify-self: center; }
.nav__addr, .nav__tel {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.nav.scrolled .nav__addr, .nav.scrolled .nav__tel { color: var(--ink); text-shadow: none; }
.nav__addr:hover, .nav__tel:hover { color: var(--gold-on-dark); }
.nav.scrolled .nav__addr:hover, .nav.scrolled .nav__tel:hover { color: var(--gold-deep); }
.nav--bsc .nav__brand,
.nav--bsc .nav__list a { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.nav--bsc.scrolled .nav__brand,
.nav--bsc.scrolled .nav__list a { text-shadow: none; }
.nav--bsc .nav__list { gap: 24px; }
@media (max-width: 1180px) {
  .nav--bsc .nav__list { gap: 16px; }
  .nav--bsc .nav__list a { letter-spacing: 0.12em; }
}
@media (max-width: 960px) {
  .nav--bsc { grid-template-columns: auto 1fr auto; }
  .nav__side--left { display: none; }
  .nav__brand--center { justify-self: start; }
}
/* BSC-style: the drawer (burger) button is available on DESKTOP too, next to
   Reserve — quick jump to Order Online / Catering / eGift Card / everything. */
.nav--bsc .nav__burger { display: flex; }

/* ---------- 2. Full-screen hero slideshow ---------- */
.bsc-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--emerald-deep);
}
.bsc-hero__slides, .bsc-hero__slide {
  position: absolute;
  inset: 0;
}
.bsc-hero__slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bsc-hero__slide.is-active { opacity: 1; }
.bsc-hero__slide img,
.bsc-hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* slow cinematic drift while a slide is showing (Ken Burns) */
@media (prefers-reduced-motion: no-preference) {
  .bsc-hero__slide.is-active img { animation: kenburns 8s ease-out forwards; }
  @keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }
}
.bsc-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(15, 34, 27, 0.62), rgba(15, 34, 27, 0) 26%),
    linear-gradient(to top, rgba(15, 34, 27, 0.55), rgba(15, 34, 27, 0) 32%),
    radial-gradient(ellipse at center, rgba(15, 34, 27, 0.34), rgba(15, 34, 27, 0.08) 70%);
}
.bsc-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.bsc-hero__mark {
  width: clamp(110px, 14vw, 185px);
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}
.bsc-hero__brand {
  font-family: 'Larken', var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7.5vw, 96px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-soft);
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.bsc-hero__th {
  font-family: var(--font-thai);
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--gold-rich);
  margin-top: 10px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.bsc-hero__est {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(251, 247, 238, 0.85);
  margin-top: 16px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.bsc-hero__controls {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(18px, 3.5vh, 36px);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.bsc-hero__dots { display: flex; gap: 9px; }
.bsc-hero__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(251, 247, 238, 0.9);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.bsc-hero__dot.is-active { background: var(--cream-soft); transform: scale(1.25); }
.bsc-hero__toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(251, 247, 238, 0.75);
  background: rgba(15, 34, 27, 0.35);
  cursor: pointer;
  position: relative;
  transition: background 0.3s var(--ease);
}
.bsc-hero__toggle:hover { background: rgba(15, 34, 27, 0.6); }
.bsc-hero__toggle-pause,
.bsc-hero__toggle-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
/* pause icon: two bars */
.bsc-hero__toggle-pause {
  width: 8px; height: 10px;
  border-left: 2.5px solid var(--cream-soft);
  border-right: 2.5px solid var(--cream-soft);
}
/* play icon: triangle (hidden until paused) */
.bsc-hero__toggle-play {
  display: none;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--cream-soft);
  margin-left: 1px;
}
.bsc-hero__toggle.is-paused .bsc-hero__toggle-pause { display: none; }
.bsc-hero__toggle.is-paused .bsc-hero__toggle-play { display: block; }
.bsc-hero__cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 3vh, 30px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(251, 247, 238, 0.85);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.bsc-hero__cue:hover { color: var(--cream-soft); }
.bsc-hero__cue-arrow {
  font-size: 18px;
  line-height: 1;
  animation: bscCue 2.2s ease-in-out infinite;
}
@keyframes bscCue {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ---------- 3. Big tagline ---------- */
.bsc-tagline {
  background: var(--cream);
  padding: clamp(64px, 9vw, 120px) 0;
  text-align: center;
}
.bsc-tagline__l1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.2;
  color: var(--ink);
}
.bsc-tagline__l2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.25;
  color: var(--gold-deep);
  margin-top: 10px;
}
.bsc-tagline__l2 em { font-style: italic; }

/* ---------- 4. Menu / Private Events — BSC-style FULL-BLEED split rows ----------
   Exactly like the Bangkok Supper Club reference screenshots: each row spans
   the whole viewport, the photo runs edge-to-edge on its side (no radius,
   no margin) at a fixed tall height, and the text column is a calm cream
   panel with the heading + button centered. Row 1: MENU text left, photo
   bleeding off the RIGHT edge. Row 2: photo bleeding off the LEFT edge,
   PRIVATE EVENTS text right. Mobile: stacked image-then-text. */
.bsc-splits {
  background: var(--cream);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.bsc-split {
  display: grid;
  grid-template-columns: 1fr 1.7fr;   /* text panel | huge photo */
  align-items: stretch;
  text-decoration: none;
  width: 100%;
}
.bsc-split + .bsc-split { margin-top: clamp(28px, 4vw, 64px); }
.bsc-split__body { order: 1; }
.bsc-split__img  { order: 2; }
.bsc-split--flip { grid-template-columns: 1.7fr 1fr; }
.bsc-split--flip .bsc-split__img  { order: 1; }
.bsc-split--flip .bsc-split__body { order: 2; }
.bsc-split__img {
  display: block;
  position: relative;
  height: clamp(380px, 34vw, 600px);
  overflow: hidden;
  border-radius: 0;
}
/* inset gold keyline — the brand's double-frame motif on the big photos */
.bsc-split__img::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 181, 122, 0.55);
  pointer-events: none;
}
.home-visit__map a {
  position: relative;
  display: block;
}
.home-visit__map a::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(212, 181, 122, 0.55);
  pointer-events: none;
}
.bsc-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}
.bsc-split:hover .bsc-split__img img { transform: scale(1.03); }
.bsc-split__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  padding: 40px clamp(24px, 4vw, 80px);
}
.bsc-split__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.bsc-split:hover .bsc-split__title { color: var(--gold-deep); }
.bsc-split__btn { white-space: nowrap; }
@media (max-width: 900px) {
  .bsc-split,
  .bsc-split--flip { grid-template-columns: 1fr; }
  .bsc-split__img,
  .bsc-split--flip .bsc-split__img  { order: 1; height: auto; aspect-ratio: 4 / 3; }
  .bsc-split__body,
  .bsc-split--flip .bsc-split__body { order: 2; padding: 22px 20px 6px; gap: 16px; }
}

/* ---------- 4b. "Guest Favorite" — small round red seal on the dish photo ---------- */
.dish-rec-badge {
  top: 8px;
  right: 8px;
  left: auto;
  bottom: auto;
  width: 68px;
  height: 68px;
  padding: 6px;
  border-radius: 50%;
  background: #A8322A;
  color: #FBF7EE;
  border: none;
  outline: 1.5px dashed rgba(251, 247, 238, 0.85);
  outline-offset: -6px;
  transform: rotate(-8deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(42, 31, 23, 0.3);
}
/* the star floats in the top arc of the seal; the wording stays dead-center */
.dish-rec-badge::before {
  content: "★";
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50% 0;
  font-size: 10px;
  line-height: 1;
  color: #E6C47C;
  opacity: 1;
  letter-spacing: 0;
}
.dish-rec-badge::after { content: none; }

/* ---------- 4c. Gold koi weaving through section backgrounds ---------- */
.bsc-tagline, .home-story, .home-regions, .home-visit, .reserve-banner { position: relative; overflow: hidden; }
.bsc-tagline > .container, .home-story > .container, .home-regions > .container, .home-visit > .container { position: relative; z-index: 1; }
.koi {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1083 / 590;
  background: url("/img/decor/fish.webp") no-repeat center / contain;
  opacity: 0.09;
}
.koi--tag-r   { width: min(30vw, 380px); right: -70px; top: 50%; transform: translateY(-50%) rotate(9deg); }
.koi--story-l { width: min(26vw, 330px); left: -80px; bottom: 6%; transform: scaleX(-1) rotate(-10deg); }
.koi--reg-r   { width: min(24vw, 300px); right: -60px; top: 4%; transform: rotate(6deg); opacity: 0.07; }
.koi--reg-l   { width: min(24vw, 300px); left: -70px; bottom: 22%; transform: scaleX(-1) rotate(-7deg); opacity: 0.07; }
.koi--visit-r { width: min(26vw, 330px); right: -60px; bottom: -30px; transform: rotate(-6deg); }
/* menu page: a koi drifting in the dark reserve banner */
.reserve-banner::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -24px;
  width: min(28vw, 340px);
  aspect-ratio: 1083 / 590;
  background: url("/img/decor/fish.webp") no-repeat center / contain;
  opacity: 0.14;
  transform: rotate(-7deg);
  pointer-events: none;
}
@media (max-width: 720px) {
  .koi, .reserve-banner::after { display: none; }
}

/* ---------- 5. Regional stories ---------- */
.home-regions {
  background: var(--cream-soft);
  padding: var(--section-y) 0;
}
.home-regions__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(48px, 6vw, 90px);
}
.home-regions__head h2 {
  font-size: clamp(30px, 4vw, 48px);
  color: var(--ink);
}
.home-regions__head h2 em { color: var(--gold-deep); }
.home-regions__head p {
  margin-top: 14px;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1.7;
}
.region-story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4.5vw, 70px);
  align-items: center;
  padding: clamp(36px, 4.5vw, 64px) 0;
  position: relative;
}
.region-story + .region-story { border-top: 1px solid var(--line-soft); }
/* giant faint Thai numerals ๑ ๒ ๓ ๔ floating behind each region chapter */
.region-story::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -2%;
  font-family: var(--font-thai);
  font-size: clamp(180px, 22vw, 330px);
  line-height: 1;
  color: rgba(184, 153, 104, 0.12);
  pointer-events: none;
  z-index: 0;
}
.region-story--flip::after { right: auto; left: -2%; }
.home-regions .region-story:nth-of-type(1)::after { content: "๑"; }
.home-regions .region-story:nth-of-type(2)::after { content: "๒"; }
.home-regions .region-story:nth-of-type(3)::after { content: "๓"; }
.home-regions .region-story:nth-of-type(4)::after { content: "๔"; }
.region-story__text, .region-story__dishes { position: relative; z-index: 1; }
.region-story--flip .region-story__text { order: 2; }
.region-story--flip .region-story__dishes { order: 1; }
/* region NAME as an emerald nameplate with the site's signature double gold
   frame (same motif as the hero panel / Reserve button) — gold serif EN name,
   cream Thai name beneath, like a brass house sign. */
.region-story__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(150deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  border: 1px solid rgba(194, 162, 94, 0.65);
  outline: 1px solid rgba(194, 162, 94, 0.35);
  outline-offset: -5px;
  border-radius: 4px;
  padding: 14px 28px 12px;
  box-shadow: 0 10px 26px rgba(20, 52, 42, 0.2);
  font-size: 0; /* hides the raw "·" separator between the two names */
}
.region-story__label > span:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--gold-rich);
}
.region-story__label [lang="th"] {
  font-family: var(--font-thai);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.06em;
  color: rgba(251, 247, 238, 0.88);
}
/* the poetic opening line steps back to a supporting role */
.region-story__text h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 12px 0 14px;
}
.region-story__text p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.85;
}
.region-story__link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.region-story__link:hover { color: var(--emerald); border-bottom-color: var(--emerald); }
.region-story__dishes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
}
.region-dish {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(42, 31, 23, 0.06);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  padding-bottom: 16px;
}
.region-dish:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(42, 31, 23, 0.12);
}
.region-dish__img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 14px;
}
.region-dish__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.region-dish:hover .region-dish__img img { transform: scale(1.05); }
.region-dish__course {
  display: block;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.region-dish__name {
  display: block;
  padding: 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.region-dish__thai {
  display: block;
  padding: 0 16px;
  font-family: var(--font-thai);
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.home-regions__cta {
  text-align: center;
  margin-top: clamp(40px, 5vw, 70px);
}
@media (max-width: 900px) {
  .region-story { grid-template-columns: 1fr; align-items: start; }
  .region-story--flip .region-story__text { order: 1; }
  .region-story--flip .region-story__dishes { order: 2; }
}
@media (max-width: 420px) {
  .region-story__dishes { gap: 12px; }
  .region-dish__name { font-size: 16px; }
}

/* ---------- 6. Private Events modal (injected by events.js on all pages) ---------- */
.ev-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* CRITICAL: display:flex above would override the browser's built-in
   [hidden]{display:none}, leaving an invisible full-screen overlay that
   swallows every click on the page. Never remove this rule. */
.ev-modal[hidden] { display: none !important; }
.ev-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 52, 42, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ev-modal.is-open .ev-modal__overlay { opacity: 1; }
.ev-modal__panel {
  position: relative;
  background: var(--cream-soft);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ev-modal.is-open .ev-modal__panel { transform: translateY(0); opacity: 1; }
.ev-modal__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 50%;
}
.ev-modal__close:hover { color: var(--ink); background: var(--cream-warm); }
.ev-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  margin-bottom: 14px;
}
.ev-modal__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.ev-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.ev-modal__copy {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--gold-deep);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--gold);
  cursor: pointer;
  padding: 6px 2px;
}
.ev-modal__copy:hover { color: var(--emerald); }
.ev-modal__copy.is-copied { color: var(--emerald); border-bottom-color: var(--emerald); }
.ev-modal__note { margin-top: 18px; font-size: 13px; }
.ev-modal__note a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ev-modal__note a:hover { color: var(--gold-deep); }

/* ---------- 7. Menu course filter (menu page) ---------- */
.course-filter {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream-warm);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: top 0.3s var(--ease);
}
body.section-nav-visible .course-filter { top: 56px; }
.course-filter__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.course-filter__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin-right: 4px;
}
.course-chip {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.course-chip:hover { background: rgba(184, 153, 104, 0.14); }
.course-chip.is-active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream-soft);
}

/* ---------- 8. Soft wave joints between sections + drifting koi ----------
   Bangkok Supper Club uses torn-paper edges; our version of the same idea is
   a gentle Thai water-wave line (matching the seigaiha pattern and the koi),
   so hard section boundaries melt into each other. */
.bsc-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 6vw, 112px); /* torn-paper wave stays visible on desktop too */
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 30C140 14 300 40 460 28 620 16 760 42 920 30 1080 18 1220 40 1440 24L1440 56 0 56Z' fill='%23F7F2E8' fill-opacity='0.5'/%3E%3Cpath d='M0 38C140 24 300 48 460 36 620 24 760 50 920 38 1080 26 1220 48 1440 32L1440 56 0 56Z' fill='%23F7F2E8'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* keep the slideshow controls and scroll cue clear of the wave */
.bsc-hero__controls { bottom: clamp(92px, 13vh, 132px); }
.bsc-hero__cue { bottom: clamp(84px, 12vh, 122px); }

.home-regions::before,
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: clamp(36px, 4.5vw, 84px);
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26C120 42 260 10 420 22 580 34 700 8 860 20 1020 32 1180 12 1300 24 1360 30 1400 22 1440 28L1440 0 0 0Z' fill='%23F7F2E8'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* regions sits on cream-soft, footer on dark ink — both receive the cream
   wave of the section above them, so the joint reads as one flowing page */

@media (prefers-reduced-motion: no-preference) {
  .koi, .footer::after {
    animation: koiDrift 12s ease-in-out infinite alternate;
  }
  @keyframes koiDrift {
    from { translate: 0 -6px; }
    to   { translate: 0 9px; }
  }
}

/* ---------- 9. Original watercolor sticker layer over the Thailand map ----------
   Recovered from the dine-in menu PSD ('Cartoon' group, ~60 stickers).
   Placed at the group's original offset relative to the map raster in the
   PSD: left (2073-2306)/1503, top (214-532)/2767, width 1839/1503. */
/* Region name pills cloned ABOVE the sticker layer (script.js) — cream
   plates with a gold ring and a soft halo, so the names read clearly and
   each region separates from the art without touching the original layout */
.map-names-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
/* originals stay hidden under the art — the callouts replace them */
.thailand-map .th-names { opacity: 0; }
.map-callout rect {
  fill: rgba(251, 247, 238, 0.97);
  stroke: #B89968;
  stroke-width: 1.3;
  transition: fill 0.25s ease, stroke-width 0.25s ease;
}
.map-callout text {
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: fill 0.25s ease;
}
.map-callout {
  filter: drop-shadow(0 0 6px rgba(247, 242, 232, 0.95)) drop-shadow(0 2px 5px rgba(42, 31, 23, 0.3));
  pointer-events: auto; /* the label itself is tappable */
  cursor: pointer;
}
.map-callout__line {
  stroke: #B89968;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: 0.85;
}
.map-callout__dot { fill: #B89968; }
/* hover/tap the region -> its name callout lights up emerald & gold */
.map-callout.is-active rect { fill: #1E4A36; stroke: #D4B57A; stroke-width: 2; }
.map-callout.is-active text { fill: #FBF7EE; }
.map-callout.is-active .map-callout__line { stroke: #1E4A36; stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.map-callout.is-active .map-callout__dot { fill: #1E4A36; }

/* User chose the designer's ORIGINAL full sticker set (2026-08-10):
   our photo stickers + region collages are hidden; the map is dressed by
   the untouched 'Cartoon' PSD layer alone. Delete this rule to bring the
   photo stickers back. */
.map-stickers .map-sticker { display: none; }
.map-cartoon {
  position: absolute;
  /* measured against the Thailand shape inside the site SVG (not the full
     mount): shape occupies (57,9) 447x821 of the 560x840 mount */
  left: -2.3%;
  top: -10.1%;
  width: 97.7%;
  max-width: none;
  height: auto;
  z-index: 0; /* under the photo stickers */
  pointer-events: none;
}

/* ---------- 10. Hanging gold lantern mobiles (from the CI kit, like the
   real wire mobiles in the dining room) ---------- */
.lantern {
  position: absolute;
  top: 0;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 319 / 1257;
  background: url("/img/decor/lantern.webp") no-repeat top / contain;
  opacity: 0.55;
}
.lantern--l { left: clamp(16px, 6vw, 90px); width: clamp(36px, 4vw, 60px); }
.lantern--r { right: clamp(16px, 7vw, 110px); width: clamp(30px, 3.2vw, 48px); top: -46px; opacity: 0.45; }
@media (max-width: 720px) { .lantern { display: none; } }

/* ---------- 11. Language switcher + first-visit picker ---------- */
.lang-switch {
  display: flex;
  gap: 2px;
  border: 1px solid rgba(194, 162, 94, 0.55);
  border-radius: 999px;
  padding: 2px;
  margin-left: 4px;
}
.lang-switch button {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cream-soft);
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav.scrolled .lang-switch button,
.nav.nav--solid .lang-switch button { color: var(--ink); }
.lang-switch button.is-active {
  background: var(--gold);
  color: var(--emerald-deep) !important;
}
@media (max-width: 960px) {
  .lang-switch { margin-right: 8px; }
}
.lang-picker {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 52, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}
.lang-picker.is-leaving { opacity: 0; }
.lang-picker__panel {
  background: var(--cream-soft);
  border: 1px solid rgba(194, 162, 94, 0.65);
  outline: 1px solid rgba(194, 162, 94, 0.35);
  outline-offset: -6px;
  border-radius: 12px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.lang-picker__panel h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--ink);
  margin: 14px 0 6px;
}
.lang-picker__panel p { font-size: 13px; color: var(--ink-mute); margin-bottom: 22px; }
.lang-picker__btns { display: flex; flex-direction: column; gap: 10px; }
.lang-picker__btns button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 13px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-picker__btns button:hover {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream-soft);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bsc-hero__slide { transition: none; }
  .bsc-hero__cue-arrow { animation: none; }
  .bsc-card, .bsc-card__img img, .region-dish, .region-dish__img img { transition: none; }
}

/* ============ 12) DIETARY & ALLERGY FILTER (menu page) ============ */
.allergy-filter {
  padding: 6px 0 4px;
  background: transparent;
}
.allergy-filter__inner { text-align: center; }
.allergy-filter__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.allergy-filter__label::before,
.allergy-filter__label::after { content: ' — '; color: rgba(200, 164, 88, 0.55); }
.allergy-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.allergy-chip {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(200, 164, 88, 0.65);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s var(--ease, ease);
}
.allergy-chip:hover { border-color: var(--gold-deep); color: var(--ink); }
.allergy-chip.is-active {
  background: var(--emerald-deep);
  border-color: var(--emerald-deep);
  color: #F2E7C8;
  box-shadow: 0 4px 14px rgba(11, 59, 46, 0.25);
}
.allergy-chip.is-active::before { content: '✓ '; color: var(--gold); }
.allergy-filter__meta {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
}
.allergy-count { letter-spacing: 0.04em; }
.allergy-clear {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.allergy-clear:hover { color: var(--ink); }
.allergy-empty {
  margin: 26px auto 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
}
.dish-allergy-notes { margin-top: 10px; display: grid; gap: 6px; }
.dish-allergy-note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 10px;
  background: linear-gradient(90deg, rgba(200, 164, 88, 0.09), transparent 70%);
}

/* ---- 12b) allergy panel folded into the sticky toolbar (menu page) ---- */
.course-filter .allergy-filter {
  border-top: 1px dashed rgba(200, 164, 88, 0.4);
  padding: 12px 0 14px;
}
.toolbar-sep {
  width: 1px;
  height: 22px;
  background: rgba(200, 164, 88, 0.5);
  margin: 0 4px;
  display: inline-block;
}
.allergy-toggle { display: inline-flex; align-items: center; gap: 7px; }
.allergy-toggle__caret { font-size: 10px; transition: transform 0.25s var(--ease); }
.allergy-toggle.is-open .allergy-toggle__caret { transform: rotate(180deg); }
.allergy-toggle.has-active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream-soft);
}
.allergy-toggle__count {
  background: var(--gold);
  color: #2A1F0E;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  padding: 0 4px;
}
.allergy-empty { margin: 30px auto 8px; text-align: center; }
/* catering page variant — standalone bar between category pills and menu */
.allergy-filter--catering { padding: 24px 0 4px; }

/* ---- 12c) floating filter button + combined panel (menu page) ---- */
.menu-fab { position: fixed; top: 78px; right: 22px; z-index: 70; }
.menu-fab__btn {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--emerald-deep);
  color: #F2E7C8;
  border: 1px solid rgba(200, 164, 88, 0.55);
  box-shadow: 0 6px 18px rgba(11, 40, 31, 0.32);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.menu-fab__btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(11, 40, 31, 0.38); }
.menu-fab__btn.has-active { border-color: var(--gold); }
.menu-fab__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--gold);
  color: #2A1F0E;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 19px;
  height: 19px;
  line-height: 19px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.menu-fab__panel {
  position: absolute;
  top: 58px;
  right: 0;
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  background: var(--cream-warm);
  border: 1px solid rgba(200, 164, 88, 0.45);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(24, 18, 8, 0.28);
  padding: 16px 18px 18px;
}
.menu-fab__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.menu-fab__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.menu-fab__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 2px;
}
.menu-fab__close:hover { color: var(--ink); }
.fab-group-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.fab-course__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-fab__panel .course-chip { padding: 7px 14px; font-size: 11.5px; }
.menu-fab__panel .allergy-filter {
  padding: 12px 0 0;
  margin-top: 14px;
  border-top: 1px dashed rgba(200, 164, 88, 0.4);
}
.menu-fab__panel .allergy-filter__chips { justify-content: flex-start; gap: 7px; }
.menu-fab__panel .allergy-chip { padding: 7px 13px; font-size: 12px; }
.menu-fab__panel .allergy-filter__meta { justify-content: flex-start; margin-top: 12px; }
.menu-fab__btn svg { width: 25px; height: 25px; }
@media (max-width: 640px) {
  .menu-fab { top: 90px; right: 12px; }
  .menu-fab__btn { width: 54px; height: 54px; border-radius: 14px; }
  .menu-fab__panel { top: 62px; }
}

/* ============ 13) ANNOUNCEMENT POPUP (CMS: Sanity doc 'announcement') ============ */
.announce-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 17, 8, 0.55);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.announce-overlay.is-on { opacity: 1; }
.announce-overlay.is-leaving { opacity: 0; }
.announce-box { position: relative; width: min(440px, 100%); }
.announce-card {
  display: block;
  background: var(--cream-warm, #F7F2E8);
  border: 1px solid rgba(200, 164, 88, 0.55);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  text-decoration: none;
  color: inherit;
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.announce-overlay.is-on .announce-card { transform: none; }
a.announce-card:hover { border-color: var(--gold, #C8A458); }
.announce-card__img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; }
.announce-card__body { padding: 18px 22px 20px; text-align: center; }
.announce-card__title { font-family: var(--font-display); font-size: 24px; margin: 0 0 6px; color: var(--ink); }
.announce-card__text { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.announce-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 88, 0.6);
  background: var(--emerald-deep, #0B3B2E);
  color: #F2E7C8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 480px) { .announce-close { top: -12px; right: -6px; } }

/* ---- 12d) Studio preview focus: highlight the item being edited ---- */
@keyframes mitrFocusPulse {
  0%   { box-shadow: 0 0 0 3px rgba(200, 164, 88, 0.95), 0 0 26px rgba(200, 164, 88, 0.55); }
  70%  { box-shadow: 0 0 0 3px rgba(200, 164, 88, 0.95), 0 0 26px rgba(200, 164, 88, 0.55); }
  100% { box-shadow: 0 0 0 3px rgba(200, 164, 88, 0); }
}
.mitr-focus {
  position: relative;
  border-radius: 14px;
  animation: mitrFocusPulse 2.6s ease-out 3;
  scroll-margin-top: 120px;
}
.mitr-focus::after {
  content: attr(data-focus-label);
  position: absolute;
  top: -13px;
  left: 12px;
  z-index: 3;
  background: var(--emerald-deep, #0B3B2E);
  color: #F2E7C8;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold, #C8A458);
  white-space: nowrap;
}