/* ==========================================================
   Swagat — home: a luxurious, quiet dark-and-cream composition
   ========================================================== */
/* ==========================================================
   THE FEAST — sticky stage, thali plated course by course
   ========================================================== */
.fx { position: relative; height: calc(100vh + 7.4 * 90vh); background: var(--night); }
.fx__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.fx__bg { position: absolute; inset: 0; pointer-events: none; }
.fx__bg i { position: absolute; border-radius: 50%; }
.fx__lamp {
  left: 50%; top: -42vh; width: 130vw; height: 100vh; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(176, 52, 72, .42), rgba(140, 34, 54, .16) 55%, transparent);
}
.fx__pool {
  left: 50%; bottom: -46vh; width: 150vw; height: 90vh; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(120, 22, 42, .5), rgba(90, 14, 30, .2) 60%, transparent);
}
.fx__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(26, 2, 8, .6));
}
.fx__ghost {
  position: absolute; left: 0; right: 0; top: 7vh; text-align: center; pointer-events: none; user-select: none;
  font: 400 min(31vw, 54vh)/1 var(--f-hindi); color: transparent; -webkit-text-stroke: 1px rgba(232, 207, 150, .07);
  white-space: nowrap;
}
.fx__ghost span { display: inline-block; }
.fx__ghost { display: none; }

.fx__hero {
  position: absolute; inset: 0 0 auto; z-index: 3; margin: 0 auto;
  padding-top: calc(var(--nav-h) + 86px + 2vh); display: grid; justify-items: center; text-align: center;
}
.fx__kicker {
  display: flex; align-items: center; gap: 1rem;
  font: 500 .7rem/1 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-l);
}
.fx__kicker i { width: 36px; height: 1px; background: var(--gold); opacity: .7; }
.fx__title {
  margin-top: 1.7rem; font: 400 clamp(3rem, 7.2vw, 8rem)/.95 var(--f-display); letter-spacing: -.035em; color: var(--on-dark);
}
.fx__line { display: block; overflow: hidden; padding: 0 .06em .08em; }
.fx__line > span { display: block; }
.fx__title em, .course__name em .wi {
  font-style: italic; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.course__name em { font-style: italic; }
.fx__lead { max-width: 32em; margin-top: 1.5rem; color: var(--on-dark-2); font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.75; }
.fx__cta { margin-top: 2.1rem; justify-content: center; }

.fx__meta {
  position: absolute; left: 0; right: 0; bottom: 3.6vh; z-index: 3; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none;
}
.fx__meta > * { pointer-events: auto; }
.fx__rating { display: flex; align-items: center; gap: .9rem; }
.fx__rating b { font: 400 2.5rem/1 var(--f-display); color: var(--gold-l); }
.fx__rating > span, .fx__open { display: grid; gap: .35rem; }
.fx__rating small, .fx__open small { font-size: .78rem; color: var(--on-dark-2); }
.fx__open { justify-items: end; }
.fx__rating .stars { color: var(--gold); font-size: .8rem; }
.fx__cue {
  display: grid; justify-items: center; gap: .8rem; color: var(--on-dark-2);
  font: 500 .62rem/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase;
}
.fx__cue i { position: relative; width: 1px; height: 46px; background: rgba(232, 207, 150, .22); overflow: hidden; }
.fx__cue i::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold-l);
  animation: cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue { to { top: 100%; } }

/* --- the thali --- */
.fx__thali {
  --S: min(44vw, 86vh);
  position: absolute; z-index: 2; left: 68%; top: 55%; width: var(--S); height: var(--S);
  margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2); pointer-events: none; will-change: transform;
}
.fx__intro { position: absolute; inset: 0; perspective: 1700px; }
.fx__tilt, .fx__turn, .fx__spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx__tilt { transform: rotateX(52deg); }
.fx__plate { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(0); }
.fx__plate-sh {
  position: absolute; inset: -3%; border-radius: 50%; transform: translate3d(2%, 4.5%, -3px);
  background: radial-gradient(closest-side, rgba(22, 2, 7, .78) 62%, rgba(22, 2, 7, .35) 82%, transparent);
}
.fx__sh, .fx__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); visibility: hidden; }
.fx__sh {
  aspect-ratio: 1; border-radius: 50%; margin: 1.6% 0 0 1%;
  background: radial-gradient(closest-side, rgba(26, 3, 8, .62), rgba(26, 3, 8, .32) 62%, transparent);
}
.fx__sh--flat { background: radial-gradient(closest-side, rgba(26, 3, 8, .4), rgba(26, 3, 8, .16) 60%, transparent); margin: .8% 0 0 .5%; }
.fx__item { height: auto; will-change: transform, opacity; }

.fx__steam {
  position: absolute; left: 50%; top: 26%; width: 50%; height: 56%; translate: -50% -55%;
  pointer-events: none; visibility: hidden;
}
.fx__steam i {
  position: absolute; bottom: 0; width: 34%; height: 100%; opacity: 0;
  background: radial-gradient(40% 50% at 50% 70%, rgba(255, 244, 226, .12), transparent 70%);
  animation: steam 7s ease-in-out infinite; transform-origin: 50% 100%;
}
.fx__steam i:nth-child(1) { left: 6%; animation-delay: -1s; }
.fx__steam i:nth-child(2) { left: 34%; animation-delay: -3.4s; }
.fx__steam i:nth-child(3) { left: 62%; animation-delay: -5.6s; }
@keyframes steam {
  0% { transform: translateY(18%) scale(.6, .5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-34%) scale(1.15, 1.2) skewX(8deg); opacity: 0; }
}

/* --- course panels --- */
.fx__courses { position: absolute; inset: 0; z-index: 3; margin: 0 auto; pointer-events: none; }
.course {
  position: absolute; left: var(--pad); top: 52%; translate: 0 -50%; width: min(38vw, 500px);
  visibility: hidden; pointer-events: auto;
}
.course__no { display: flex; align-items: center; gap: .9rem; font: 600 .7rem/1 var(--f-body); letter-spacing: .2em; color: var(--on-dark-2); }
.course__no b { color: var(--gold-l); font-weight: 600; }
.course__no i { width: 46px; height: 1px; background: var(--gold); opacity: .6; }
.course__hi { margin-top: 2.2rem; font: 400 1.35rem/1.2 var(--f-hindi); color: var(--gold-l); opacity: .9; }
.course__name { margin-top: .5rem; font: 400 clamp(3rem, 5.4vw, 5.8rem)/.98 var(--f-display); letter-spacing: -.03em; color: var(--on-dark); }
.course__name .w { padding-bottom: .12em; margin-bottom: -.12em; }
.course__desc { margin-top: 1.4rem; max-width: 30em; color: var(--on-dark-2); font-size: clamp(.98rem, 1.1vw, 1.06rem); line-height: 1.8; }
.course__meta { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.course__price { font: 400 1.9rem/1 var(--f-display); color: var(--gold-l); }
.course__meta span:last-child { display: inline-flex; align-items: center; gap: .55rem; font: 500 .7rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.course .mark--veg { border-color: #6FB27F; }
.course .mark--veg::after { background: #6FB27F; }
.course__lunch { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.6rem; }
.course__lunch div { display: grid; gap: .55rem; padding: 1rem 1.2rem; border: 1px solid var(--hair); border-radius: 2px; }
.course__lunch span { display: inline-flex; align-items: center; gap: .5rem; font: 500 .68rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); }
.course__lunch b { font: 400 2rem/1 var(--f-display); color: var(--gold-l); }
.course--final .btn-row { margin-top: 1.6rem; }

/* --- course rail --- */
.fx__rail {
  position: absolute; left: 0; right: 0; bottom: 3.2vh; z-index: 4; width: max-content; margin: 0 auto;
  display: flex; gap: clamp(1rem, 2vw, 2.2rem); visibility: hidden;
}
.fx__rail button { display: grid; justify-items: start; gap: .55rem; min-width: 64px; color: var(--on-dark-2); transition: color .5s var(--ease); }
.fx__rail button::before {
  content: ''; width: 100%; height: 1px; background: linear-gradient(var(--gold-l), var(--gold-l)) 0 0 / 0% 100% no-repeat, rgba(232, 207, 150, .18);
  transition: background-size .7s var(--ease);
}
.fx__rail b { font: 600 .62rem/1 var(--f-body); letter-spacing: .14em; }
.fx__rail span { font: 500 .6rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: .7; }
.fx__rail .is-past button::before { background-size: 100% 100%; }
.fx__rail .is-past button { color: rgba(243, 233, 217, .8); }
.fx__rail .is-active button { color: var(--gold-l); }
.fx__rail .is-active button::before { background-size: 100% 100%; }
.fx__rail button:hover { color: var(--on-dark); }

/* static fallback (reduced motion / no GSAP) */
.fx--static, .no-gsap .fx { height: auto; }
.fx--static .fx__stage, .no-gsap .fx__stage { position: relative; height: 100vh; min-height: 720px; }
.fx--static .fx__thali, .no-gsap .fx__thali { left: 50%; top: 96%; --S: min(70vw, 900px); }
.fx--static .fx__sh, .fx--static .fx__item, .no-gsap .fx__sh, .no-gsap .fx__item { visibility: visible; }
.fx--static .fx__item, .no-gsap .fx__item { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateZ(6px); }
.fx--static .fx__tilt, .no-gsap .fx__tilt { transform: rotateX(62deg); }
.fx--static .fx__rail, .fx--static .fx__courses, .no-gsap .fx__rail, .no-gsap .fx__courses { display: none; }

/* ==========================================================
   WELCOME
   ========================================================== */
.wl, .sg, .rv { background: var(--cream); color: var(--ink); }
.wl { position: relative; padding: clamp(7rem, 13vw, 11.5rem) 0 clamp(6rem, 10vw, 9rem); }
.wl__inner { display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.wl__emblem { width: 52px; height: 52px; color: var(--gold-d); }
.wl__text { max-width: 24em; font: 400 clamp(1.7rem, 3.2vw, 3rem)/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.wl__stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 1040px; margin-top: 3.5rem; border-top: 1px solid var(--line); }
.wl__stats li { display: grid; gap: .6rem; padding: 2.2rem 1rem 0; }
.wl__stats li + li { border-left: 1px solid var(--line); }
.wl__stats b { font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--f-display); letter-spacing: -.02em; }
.wl__stats i { font-style: normal; color: var(--gold-d); font-size: .55em; vertical-align: .6em; margin-left: .1em; }
.wl__stats li > span { font: 600 .68rem/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }

/* ==========================================================
   SIGNATURES
   ========================================================== */
.sg { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(7rem, 12vw, 11rem); }
.sg__head { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 2rem 6vw; margin-bottom: clamp(4rem, 7vw, 6.5rem); }
.sg__head .h2 { margin-top: 1.4rem; }
.sg__aside { display: grid; gap: 1.6rem; justify-items: start; }
.sg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem); }
.dish { display: block; }
.dish:nth-child(3n + 2) { margin-top: clamp(3rem, 8vw, 8rem); }
.dish__plate { position: relative; aspect-ratio: 1; }
.dish__plate::before {
  content: ''; position: absolute; inset: 6% 2% -6% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 40, 14, .3), rgba(70, 40, 14, .1) 70%, transparent);
}
.dish__spin { position: relative; display: block; transition: transform 1.4s var(--ease); }
.dish__spin img { width: 100%; }
.dish:hover .dish__spin { transform: rotate(16deg) scale(1.03); }
.dish__body { position: relative; display: grid; gap: .55rem; margin-top: 2.4rem; padding-top: 1.5rem; }
.dish__body::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform: scaleX(var(--rule, 1)); transform-origin: left;
}
.js [data-dish] .dish__plate, .js [data-dish] .dish__body > * { visibility: hidden; }
.no-gsap [data-dish] .dish__plate, .no-gsap [data-dish] .dish__body > * { visibility: visible !important; }
.dish__no { font: 600 .66rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }
.dish h3 { padding-right: 4.5rem; font: 400 clamp(1.7rem, 2.2vw, 2.15rem)/1.1 var(--f-display); letter-spacing: -.015em; transition: color .4s; }
.dish:hover h3 { color: var(--gold-d); }
.dish p { color: var(--ink-2); font-size: .95rem; max-width: 30em; }
.dish__price { position: absolute; right: 0; top: 1.4rem; font: 400 1.3rem/1 var(--f-display); color: var(--gold-d); }

/* ==========================================================
   THREE KITCHENS
   ========================================================== */
.kt { position: relative; padding: clamp(7rem, 12vw, 11rem) 0; background: var(--night); color: var(--on-dark); overflow: hidden; }
.kt::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 120vw; height: 70%; translate: -50% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(176, 52, 72, .3), transparent);
}
.kt .container { position: relative; }
.kt__head { display: grid; justify-items: center; gap: 1.4rem; text-align: center; margin-bottom: clamp(4rem, 7vw, 6rem); }
.kt .h2 em { color: var(--gold-l); }
.kt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); }
.kcard { display: grid; justify-items: center; text-align: center; }
.kcard__frame { position: relative; width: 100%; }
.kcard__frame .arch-line { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
.kcard__frame .arch-line path { stroke: rgba(232, 207, 150, .35); }
.kcard__arch {
  position: relative; aspect-ratio: 3 / 3.9; display: grid; place-items: center; overflow: hidden;
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
  background: radial-gradient(90% 60% at 50% 30%, #6A1A2C, #2E0710 75%);
}
.kcard__plate { width: 84%; margin-top: 14%; transition: scale 1.2s var(--ease); }
.kcard__plate img { width: 100%; filter: drop-shadow(0 26px 30px rgba(20, 0, 6, .55)); }
.kcard:hover .kcard__plate { scale: 1.05; }
.kcard__hi { margin-top: 2.4rem; font: 400 1.1rem/1 var(--f-hindi); color: var(--gold-l); }
.kcard h3 { margin-top: .7rem; font: 400 clamp(1.9rem, 2.6vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.kcard p { margin-top: .9rem; max-width: 24em; color: var(--on-dark-2); font-size: .95rem; }
.kcard__go {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  font: 600 .7rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-l);
}
.kcard__go svg { width: 16px; transition: transform .5s var(--ease); }
.kcard:hover .kcard__go svg { transform: translateX(6px); }

/* ==========================================================
   STORY
   ========================================================== */
.st {
  position: relative; overflow: hidden; padding: clamp(7rem, 13vw, 12rem) 0; color: var(--on-dark); text-align: center;
  background: radial-gradient(90% 80% at 50% 40%, #8A2236, #5A1222 60%, #3B0A16);
}
.st__mandala { position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); aspect-ratio: 1; translate: -50% -50%; color: var(--gold-l); opacity: .07; }
.st__inner { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
.st__hindi { font: 400 clamp(1.8rem, 3.4vw, 3rem)/1.2 var(--f-hindi); color: var(--gold-l); }
.st .h2 em { color: var(--gold-l); }
.st .lead { color: var(--on-dark-2); margin-top: .4rem; }
.st__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 4vw; width: 100%; max-width: 1000px; margin: 3rem 0 1.5rem; }
.st__pillars li { display: grid; justify-items: center; gap: .7rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.st__pillars svg { width: 42px; height: 42px; color: var(--gold-l); margin-bottom: .4rem; }
.st__pillars b { font: 400 1.4rem/1.2 var(--f-display); }
.st__pillars span { font-size: .92rem; color: var(--on-dark-2); }
.st .link-arrow { color: var(--gold-l); }
.st .link-arrow:hover { color: var(--on-dark); }

/* ==========================================================
   REVIEWS
   ========================================================== */
.rv { padding: clamp(7rem, 12vw, 10.5rem) 0; }
.rv__grid { display: grid; grid-template-columns: minmax(240px, .8fr) 2fr; gap: 3rem 7vw; align-items: center; }
.rv__score { display: grid; gap: .9rem; justify-items: start; }
.rv__score b { margin-top: .8rem; font: 400 clamp(6rem, 11vw, 9.5rem)/.9 var(--f-display); letter-spacing: -.04em; }
.rv__score .stars { color: var(--gold-d); font-size: 1.05rem; }
.rv__score small { font-size: .88rem; color: var(--ink-2); }
.rv__stage { display: grid; }
.rv__q { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.rv__q.is-on { visibility: visible; opacity: 1; }
.rv__q blockquote { font: italic 400 clamp(1.6rem, 2.7vw, 2.55rem)/1.32 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.rv__q figcaption { margin-top: 1.8rem; font: 600 .76rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.rv__q figcaption span { margin-left: .8rem; font-weight: 500; color: var(--ink-2); letter-spacing: .12em; }
.rv__nav { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.8rem; }
.rv__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s, color .4s, border-color .4s; }
.rv__btn svg { width: 18px; }
.rv__btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rv__count { font: 500 .8rem/1 var(--f-body); letter-spacing: .12em; color: var(--ink-2); min-width: 4.5em; text-align: center; }
.rv__count b { color: var(--ink); font-weight: 600; }
.rv__bar { position: relative; width: min(200px, 22vw); height: 1px; background: var(--line); overflow: hidden; }
.rv__bar i { position: absolute; inset: 0; background: var(--gold-d); transform-origin: 0 50%; transform: scaleX(0); }

/* ==========================================================
   VISIT
   ========================================================== */
.vs { padding: clamp(7rem, 12vw, 10.5rem) 0; background: var(--night-2); color: var(--on-dark); }
.vs__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem 6vw; align-items: center; }
.vs__copy { display: grid; gap: 1.4rem; justify-items: start; }
.vs .h2 em { color: var(--gold-l); }
.vs .lead { color: var(--on-dark-2); }
.vs__info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.5rem; width: 100%; margin: 1.2rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.vs__info dt { font: 600 .66rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.vs__info dd { font-size: .98rem; line-height: 1.6; }
.vs__info a:hover { color: var(--gold-l); }
.vs__map { position: relative; aspect-ratio: 1 / .95; border-radius: 3px; overflow: hidden; outline: 1px solid var(--hair); outline-offset: 12px; }
.vs__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.45) sepia(.25) contrast(1.05) brightness(.95); }

/* ==========================================================
   ORNAMENT ON THE HOME PAGE (shared pieces live in theme.css)
   ========================================================== */
/* cusped Mughal arch framing the hero */
.fx__frame {
  position: absolute; z-index: -1; left: 50%; top: calc(var(--nav-h) + 112px); width: min(880px, 76vw); height: 130vh;
  translate: -50% 0; pointer-events: none;
}
.fx__frame svg { width: 100%; height: 100%; overflow: visible; }
.fx__frame path { fill: none; stroke: rgba(232, 207, 150, .4); stroke-width: 1; }
.fx__frame path:first-child { fill: rgba(255, 214, 170, .035); }
.fx__frame path + path { stroke: rgba(232, 207, 150, .2); }
.fx__hero { isolation: isolate; }

/* filigree corners */
.fx__corner { position: absolute; pointer-events: none; width: clamp(84px, 10vw, 160px); aspect-ratio: 1; z-index: 1; color: var(--gold); opacity: .38; }
.fx__corner svg { width: 100%; height: 100%; overflow: visible; }
.fx__corner--bl { left: 12px; bottom: 12px; transform: scaleY(-1); }
.fx__corner--br { right: 12px; bottom: 12px; transform: scale(-1, -1); }

/* rangoli on the table beneath the thali */
.fx__rangoli { position: absolute; inset: -14%; color: var(--gold-l); opacity: .34; transform: translateZ(-4px); pointer-events: none; }
.fx__rangoli svg { width: 100%; height: 100%; }

/* half mandalas peeking in from the edges of cream sections */
.sg, .rv { overflow: hidden; }
.rv { position: relative; }
.sg > .container, .rv > .container { position: relative; z-index: 1; }
.wl::before, .sg::before, .rv::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--jaali) 0 0 / 88px 88px; opacity: .05;
}
.wl > *, .sg > *, .rv > * { position: relative; }
.wl > .deco-corner, .sg > .half-mandala, .rv > .half-mandala { position: absolute; }

/* lotus ornament dividers */
.wl .ornament, .sg .ornament, .rv .ornament { color: var(--gold-d); }
.sg__head .ornament { margin-top: 1.6rem; }
.rv__score .ornament { width: 150px; }

/* signature plates sit inside a rangoli ring */
.dish__plate::after {
  content: ''; position: absolute; inset: -5%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(142, 106, 48, .32); outline: 1.5px dotted rgba(142, 106, 48, .45); outline-offset: 9px;
  opacity: var(--ring, 1); transform: scale(calc(.92 + var(--ring, 1) * .08));
}

/* kitchens: cusped arches with jaali and a kalash finial */
.kcard__arch {
  -webkit-mask-image: var(--cusp); mask-image: var(--cusp);
  background: var(--jaali-gold) 50% 0 / 88px 88px, radial-gradient(90% 60% at 50% 30%, #6A1A2C, #2E0710 75%);
}
.kcard__frame::before {
  content: ''; position: absolute; left: 50%; top: -48px; width: 22px; height: 44px; translate: -50% 0;
  background: var(--finial) center / contain no-repeat;
}
.kcard__frame .arch-line path { stroke: rgba(232, 207, 150, .5); }

/* story: diyas either side of the blessing */
.st__blessing { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.4vw, 2rem); }

/* visit: the map seen through a cusped arch */
.vs__mapwrap { position: relative; }
.vs__mapwrap .arch-line { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.vs__mapwrap .arch-line path { stroke: rgba(232, 207, 150, .5); }
.vs__mapwrap::before {
  content: ''; position: absolute; left: 50%; top: -50px; width: 22px; height: 44px; translate: -50% 0; z-index: 1;
  background: var(--finial) center / contain no-repeat;
}
.vs__map { aspect-ratio: 1 / 1.12; border-radius: 0; outline: 0; -webkit-mask: var(--cusp) center / 100% 100% no-repeat; mask: var(--cusp) center / 100% 100% no-repeat; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .course { width: min(42vw, 460px); }
  .sg__grid { grid-template-columns: repeat(2, 1fr); }
  .dish:nth-child(3n + 2) { margin-top: 0; }
  .dish:nth-child(even) { margin-top: clamp(3rem, 8vw, 6rem); }
}
@media (max-width: 860px) {
  .fx { height: calc(100svh + 7.4 * 78svh); }
  .fx__stage { height: 100svh; }
  .fx__hero { padding-top: calc(var(--nav-h) + 58px + 1svh); }
  .fx__frame { top: calc(var(--nav-h) + 74px); width: 94vw; }
  .fx__corner { width: 70px; opacity: .3; }
  .deco-corner { width: 64px; }
  .fx__title { font-size: clamp(2.7rem, 11.6vw, 4.4rem); margin-top: 1.3rem; }
  .fx__lead { font-size: .96rem; max-width: 26em; }
  .fx__cta { margin-top: 1.6rem; }
  .fx__meta { display: none; }
  .fx__ghost { top: 14svh; font-size: 40vw; }
  .fx__thali { --S: min(112vw, 64svh); left: 50%; top: 69%; }
  .course { top: calc(var(--nav-h) + 54px); translate: none; width: auto; right: var(--pad); }
  .course--final .course__hi { display: none; }
  .course__hi { margin-top: 1.1rem; font-size: 1.1rem; }
  .course__name { font-size: clamp(2.4rem, 10.5vw, 3.6rem); margin-top: .3rem; }
  .course__desc { margin-top: .8rem; font-size: .92rem; line-height: 1.65; }
  .course__meta { margin-top: 1rem; padding-top: .9rem; }
  .course__price { font-size: 1.5rem; }
  .course--final .course__desc { display: none; }
  .course__lunch { margin-top: 1rem; }
  .course__lunch div { padding: .75rem .9rem; }
  .course__lunch b { font-size: 1.5rem; }
  .course--final .btn-row { margin-top: 1rem; }
  .fx__rail { bottom: 2.4svh; gap: .55rem; }
  .fx__rail button { min-width: 34px; }
  .fx__rail span { display: none; }
  .sg__head, .vs__grid, .rv__grid { grid-template-columns: 1fr; }
  .kt__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 4.5rem; }
  .st__pillars { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wl__stats { grid-template-columns: 1fr 1fr; }
  .wl__stats li:nth-child(3) { border-left: 0; }
  .wl__stats li { padding-bottom: 1.8rem; }
  .wl__stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .sg__grid { grid-template-columns: 1fr; gap: 4rem; }
  .dish:nth-child(even) { margin-top: 0; }
  .dish__plate { width: 82%; margin: 0 auto; }
  .vs__info { grid-template-columns: 1fr; }
  .rv__bar { display: none; }
  .fx__kicker { gap: .6rem; letter-spacing: .26em; font-size: .62rem; }
  .fx__kicker i { width: 20px; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .fx__title { font-size: clamp(3rem, 6vw, 6rem); }
  .course__hi { margin-top: 1.4rem; }
  .course__name { font-size: clamp(2.8rem, 4.6vw, 4.6rem); }
}
@media (max-height: 640px) and (max-width: 860px) {
  .course { top: calc(var(--nav-h) + 40px); }
  .course__hi { margin-top: .7rem; font-size: 1rem; }
  .course__name { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .course__desc { font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .course__meta { margin-top: .7rem; padding-top: .7rem; }
  .course__price { font-size: 1.3rem; }
  .course__lunch { margin-top: .7rem; }
  .course__lunch div { padding: .55rem .8rem; }
  .course__lunch b { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fx__cue i::after, .fx__steam i, .toran__p, .diya__flame, .diya__glow { animation: none; }
}