/* Hallmark · route: custom (bespoke) · structure: colour-blocked panels that sweep up over each other
 * idea: "Ras + Rang — every section is its own colour" · palette: Rang Utsav
 * hero/find: midnight · menu/footer: marigold · store: teal · games: kumkum · team: ivory
 * display: Fraunces · body: Geist · motion: GSAP + ScrollTrigger + SplitText + Flip, Lenis smooth scroll (js/motion.js)
 * gates: contrast pass (≥4.5 on every text pairing) · reduced motion = static, complete page
 */

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: calc(var(--banner-h) + var(--bar-h));
  background: var(--rang-midnight);
  color: var(--rang-ivory);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent, var(--rang-marigold)); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-sm); top: -100px; z-index: 800;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--rang-marigold); color: var(--rang-ink);
  font-weight: 600; text-decoration: none; border-radius: var(--radius-pill);
}
.skip-link:focus-visible { top: var(--space-sm); }

.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 700; }

/* ── Panels: every section is a colour block ─────────── */
.shell { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.panel {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
/* each panel after the hero overlaps the one before it with a rounded top */
.panel + .panel {
  margin-top: calc(var(--panel-radius) * -1);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  box-shadow: 0 -24px 48px -24px var(--shade);
}
.panel { overflow: clip; }
/* background layers (motion.js): fireworks canvas + a giant faint Hindi word; content sits above */
.fw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.panel-word {
  position: absolute;
  top: 12%;
  right: -0.06em;
  z-index: 0;
  font-family: var(--font-deva);
  font-size: clamp(9rem, 32vw, 30rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--word);
  pointer-events: none;
  user-select: none;
}
#menu .panel-word, #team .panel-word { right: auto; left: -0.06em; }
.panel > .shell, .hero__inner, .footer > .shell { position: relative; z-index: 1; }
.section {
  padding-block: calc(var(--section-gap) + var(--panel-radius) * 0.5) var(--section-gap);
  scroll-margin-top: calc(var(--banner-h) + var(--bar-h));
}

/* ── Section heads ───────────────────────────────────── */
.section-head { display: grid; gap: var(--space-sm); max-width: 50rem; margin-bottom: var(--space-2xl); }
.section-head--center { margin-inline: auto; justify-items: center; text-align: center; }
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  line-height: 1;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
}
.section-lede { font-size: var(--text-lg); color: var(--muted); max-width: 42ch; text-wrap: pretty; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: scale var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
/* fill wipes up from the bottom on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform 420ms var(--ease-out);
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--fg); border-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateY(0); }
  .btn--accent:hover { color: var(--bg); }
  .btn--ghost:hover { color: var(--bg); border-color: var(--fg); }
}
.btn:active { scale: 0.97; }
.btn[disabled] { cursor: not-allowed; opacity: 0.5; }

/* ═══ 1 + 2 · Countdown banner + nav ════════════════════ */
.nav { position: fixed; inset: 0 0 auto; z-index: 500; }
.nav__banner {
  position: relative;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--page-gutter);
  background: var(--rang-marigold);
  color: var(--rang-ink);
}
.countdown {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.countdown__time { display: inline-flex; gap: 4px; }
.countdown__time:empty { display: none; }
.cd-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 2px 6px;
  color: var(--rang-marigold);
  background: var(--rang-ink);
  border-radius: 5px;
  perspective: 200px;
}
.cd-unit__n { display: inline-block; min-width: 2ch; text-align: right; font-weight: 700; letter-spacing: 0.02em; transform-origin: 50% 60%; }
.cd-unit__u { font-style: normal; opacity: 0.7; letter-spacing: 0; }
.countdown__when { display: none; padding-left: var(--space-xs); border-left: 1.5px solid currentColor; }
@media (min-width: 40rem) { .countdown__when { display: inline; } }
@media (max-width: 26rem) {
  .countdown { letter-spacing: 0.06em; gap: var(--space-2xs); }
  .countdown__long { display: none; }
}
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.progress__bar { display: block; height: 100%; background: var(--rang-kumkum); transform-origin: left; transform: scaleX(var(--p, 0)); }

.nav__bar {
  height: var(--bar-h);
  background: var(--rang-midnight);
  color: var(--rang-ivory);
  border-bottom: var(--rule-hair) solid oklch(32% 0.05 275);
}
.nav__inner {
  max-width: var(--page-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand { display: inline-flex; align-items: baseline; gap: var(--space-2xs); text-decoration: none; white-space: nowrap; }
.brand__latin { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.brand__deva { font-family: var(--font-deva); font-size: 0.95rem; line-height: 1; color: var(--rang-marigold); }

/* firework sound toggle */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  margin-left: auto;
  padding: 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--rang-ivory);
  background: transparent;
  border: 1.5px solid oklch(40% 0.05 275);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sound-toggle:hover { border-color: var(--rang-marigold); }
.sound-toggle[aria-pressed="true"] { color: var(--rang-marigold); border-color: var(--rang-marigold); }
.sound-toggle .icon-sound-on { display: none; }
.sound-toggle[aria-pressed="true"] .icon-sound-on { display: block; }
.sound-toggle[aria-pressed="true"] .icon-sound-off { display: none; }
@media (max-width: 40rem) {
  .sound-toggle { padding: 0; }
  .sound-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 60rem) { .sound-toggle { order: 3; margin-left: 0; } }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--rang-ink);
  background: var(--rang-marigold);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__links {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: var(--space-xs) var(--page-gutter) var(--space-lg);
  background: var(--rang-midnight);
  border-bottom: 3px solid var(--rang-marigold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
}
.nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; }
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid oklch(32% 0.05 275);
}
.nav__link[aria-current="true"] { color: var(--rang-marigold); }
.nav__link--cta { color: var(--rang-marigold); border-bottom: 0; }

@media (min-width: 60rem) {
  .nav__toggle { display: none; }
  .nav__links {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__link { min-height: 44px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; border: 0; }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--rang-marigold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 420ms var(--ease-out);
  }
  .nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
  .nav__link[aria-current="true"] { color: var(--rang-ivory); }
  .nav__link--cta {
    min-height: 40px;
    padding-inline: var(--space-md);
    color: var(--rang-ink);
    background: var(--rang-marigold);
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: background-color var(--dur-short) var(--ease-out);
  }
  .nav__link--cta::after { display: none; }
  .nav__link--cta:hover, .nav__link--cta[aria-current="true"] { color: var(--rang-ink); background: var(--rang-ivory); }
}

/* ═══ 3 · Hero (midnight) ═══════════════════════════════ */
.hero { overflow: hidden; scroll-margin-top: calc(var(--banner-h) + var(--bar-h)); }
.hero::before {
  content: "";
  position: absolute;
  top: -14rem;
  left: 50%;
  width: min(160vw, 80rem);
  height: 56rem;
  translate: -50% 0;
  background: radial-gradient(closest-side circle, var(--glow) 0%, oklch(78% 0.17 62 / 0.10) 35%, transparent 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: var(--page-max);
  min-height: calc(100dvh - var(--banner-h) - var(--bar-h));
  margin-inline: auto;
  padding: var(--space-sm) var(--page-gutter) calc(var(--space-sm) + var(--panel-radius) + var(--walker-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__diya { width: clamp(76px, 8vw, 96px); margin-bottom: var(--space-2xs); }
.hero__deva { font-family: var(--font-deva); font-size: var(--text-xl); line-height: 1.3; color: var(--accent); }
.hero__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(4.5rem, 18vw, 12.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--fg);
  overflow-wrap: break-word;
  min-width: 0;
}
.hero__word .char { display: inline-block; }
.hero__foot { display: grid; justify-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.hero__quote { margin: 0; }
.hero__quote p {
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--muted);
}
.hero__quote .q { color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

/* ── Hanging lanterns (akash kandil, drawn in motion.js) ── */
.lanterns { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); }
.nav.is-past-hero .lanterns { opacity: 0; translate: 0 -24px; }
.lantern { position: absolute; top: 0; width: 40px; translate: -50% 0; transform-origin: 50% 0; }
.lantern__sway { display: block; transform-origin: 50% 0; animation: lantern-sway var(--sway, 3.6s) var(--ease-in-out) var(--delay, 0s) infinite alternate; }
.lantern__string { display: block; width: 1.5px; height: var(--len, 40px); margin: 0 auto; background: var(--rang-marigold-deep); }
.lantern svg { width: 100%; height: auto; overflow: visible; margin-top: -2px; }
.lantern__glow { animation: halo 2.6s var(--ease-in-out) var(--delay, 0s) infinite alternate; }
.lantern:nth-child(2), .lantern:nth-child(3) { display: none; }
@media (max-width: 40rem) { .lantern { width: 26px; } }
@media (min-width: 40rem) { .lantern:nth-child(2), .lantern:nth-child(3) { display: block; } }
@keyframes lantern-sway { from { rotate: -5deg; } to { rotate: 5deg; } }

/* ── The diya (SVG built in motion.js) ───────────────── */
[data-diya] svg { width: 100%; height: auto; overflow: visible; }
.diya__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame var(--flick, 1.4s) var(--ease-in-out) infinite alternate; }
.diya__halo { animation: halo 3.2s var(--ease-in-out) infinite alternate; }
.diya__wick { stroke: var(--color-oil); stroke-width: 2.4; stroke-linecap: round; }
.diya__band { fill: none; stroke: var(--rang-marigold-deep); stroke-width: 1.1; opacity: 0.85; }
.diya__dot { fill: var(--rang-marigold); }
.diya__rimline { fill: none; stroke: var(--color-clay-light); stroke-width: 1.4; opacity: 0.7; }
.diya__oil { fill: var(--color-oil); }
.diya__foot { fill: var(--color-clay-dark); }

/* ── Cards (sit on a panel; colours from the theme) ──── */
.dish, .shop-item, .member, .game, .venue {
  position: relative;
  background: var(--card);
  color: var(--card-fg);
  border-radius: var(--radius-md);
}
.halftone { background: var(--card-line); }

/* ═══ 4a · Banner parade: two walkers carry the event details along the menu panel's top edge ═══ */
#menu { overflow: visible; }
.parade {
  --walker-w: calc(var(--walker-h) * 70 / 130);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  /* feet sit on the panel edge (the walker art leaves 14/130 of its height below the feet) */
  translate: 0 calc(-100% + var(--walker-h) * 14 / 130);
  pointer-events: none;
}
/* the group rests at the left of the page column; scrolling walks it to the right edge (motion.js) */
.parade__track {
  display: flex;
  justify-content: flex-start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.parade__group { display: flex; align-items: flex-start; }
.walker { display: block; flex: none; width: var(--walker-w); height: var(--walker-h); }
.walker svg { width: 100%; height: 100%; overflow: visible; }
.walker svg { transform-origin: 50% 100%; }
.parade__banner {
  position: relative;
  z-index: -1;
  margin-top: calc(var(--walker-h) * 0.06);
  margin-inline: calc(var(--walker-w) * -0.14);
  padding: var(--space-xs) var(--space-md);
  color: var(--rang-ink);
  background: var(--rang-ivory);
  border-block: 4px solid var(--rang-kumkum);
  box-shadow: 0 10px 18px -12px var(--shade);
}
/* bunting fringe along the bottom edge */
.parade__banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background: conic-gradient(from 135deg at top, var(--rang-kumkum) 90deg, transparent 0) 0 0 / 16px 12px repeat-x;
}
.banner__facts { display: grid; gap: 0; line-height: 1.35; }
.banner__fact { display: flex; align-items: baseline; gap: var(--space-2xs); white-space: nowrap; }
.banner__fact dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rang-kumkum); }
.banner__fact dd { font-size: var(--text-sm); font-weight: 600; }
.banner__icon {
  display: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* narrow phones: icons stand in for the label words (still read by screen readers), venue may wrap */
@media (max-width: 29.99rem) {
  .parade__banner { padding: 5px var(--space-xs); }
  .parade__banner::after { height: 6px; background-size: 10px 6px; }
  .banner__facts { gap: 2px; line-height: 1.2; }
  .banner__fact { align-items: start; gap: 6px; white-space: normal; }
  .banner__icon { display: block; margin-top: 1px; }
  .banner__label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .banner__fact dd { max-width: 8.5rem; font-size: 0.875rem; text-wrap: balance; }
}
/* wide screens: one row, the stacked banner is too narrow to carry it below 64rem */
@media (min-width: 64rem) {
  .banner__facts { display: flex; gap: var(--space-lg); }
  .banner__fact { flex-direction: column; gap: 0; }
  .banner__fact dd { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
}
/* walk cycle (classes toggled by motion.js) */
.leg, .arm-free { transform-box: view-box; }
.leg--1, .leg--2 { transform-origin: 35px 82px; }
.arm-free { transform-origin: var(--shoulder, 28px 44px); }
.walker.is-walking .leg--1 { animation: step 0.42s var(--ease-in-out) infinite alternate; }
.walker.is-walking .leg--2 { animation: step 0.42s var(--ease-in-out) infinite alternate-reverse; }
.walker.is-walking .arm-free { animation: swing 0.42s var(--ease-in-out) infinite alternate; }
.walker.is-walking svg { animation: bob 0.21s var(--ease-in-out) infinite alternate; }
.parade.is-back .walker svg { scale: -1 1; }
@keyframes step { from { rotate: -22deg; } to { rotate: 22deg; } }
@keyframes swing { from { rotate: 18deg; } to { rotate: -18deg; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -3px; } }

/* ═══ 4 · Menu (marigold) — horizontal pinned track on desktop ═══ */
.dish-grid {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-gutter);
  padding-bottom: var(--space-sm);
  margin-inline: calc(var(--page-gutter) * -1);
  padding-inline: var(--page-gutter);
  scrollbar-width: none;
}
.dish-grid::-webkit-scrollbar { display: none; }
.dish {
  flex: 0 0 min(82vw, 22rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
}
.dish--combo { flex-basis: min(88vw, 34rem); }
/* desktop: motion.js pins the section and slides this track sideways */
.is-hscroll .dish-grid { overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0; }
.is-hscroll .dish { flex-basis: clamp(20rem, 30vw, 26rem); }
.is-hscroll .dish--combo { flex-basis: clamp(34rem, 52vw, 46rem); }
.menu-hint { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--muted); }
/* pinned mode must fit one screen: tighter padding, shorter photos */
.is-hscroll.section { padding-block: calc(var(--space-lg) + var(--panel-radius) * 0.5) var(--space-lg); }
.is-hscroll .section-head { margin-bottom: var(--space-md); }
.is-hscroll .dish:not(.dish--combo) .dish__photo { aspect-ratio: 16 / 10; }
.is-hscroll .dish__name, .is-hscroll .dish__price { font-size: var(--text-xl); }
.is-hscroll .dish--combo .dish__name, .is-hscroll .dish--combo .dish__price { font-size: var(--text-2xl); }
.is-hscroll .menu-hint { display: none; }

.dish__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  background: var(--card-line);
}
.dish__photo:not(.is-loaded) { visibility: hidden; }
.dish__body { display: grid; gap: var(--space-2xs); padding: var(--space-md); }
.dish__head { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; column-gap: var(--space-xs); align-items: baseline; }
.dish__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; font-variation-settings: "opsz" 72; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: break-word; text-wrap: balance; }
.dish__price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--card-accent); white-space: nowrap; }
.dish__desc { font-size: var(--text-sm); color: var(--card-muted); max-width: 40ch; }
.veg {
  align-self: center;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-veg);
  border-radius: 2px;
  background: radial-gradient(circle, var(--color-veg) 0 3px, transparent 3.5px);
}
.dish__pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.dish__pair .dish__photo { aspect-ratio: 3 / 4; }
.dish__plus {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--rang-ink);
  background: var(--rang-marigold);
  border: 3px solid var(--card);
  border-radius: 50%;
}
.dish__tag {
  justify-self: start;
  padding: 2px var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rang-ivory);
  background: var(--card-accent);
  border-radius: var(--radius-pill);
}
@media (min-width: 60rem) {
  .is-hscroll .dish--combo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* combo: price drops under the name so the name gets the full width */
  .is-hscroll .dish--combo .dish__head { grid-template-columns: 1rem minmax(0, 1fr); row-gap: var(--space-2xs); }
  .is-hscroll .dish--combo .dish__price { grid-column: 2; }
  .is-hscroll .dish--combo .dish__pair .dish__photo { height: 100%; aspect-ratio: auto; }
  .is-hscroll .dish--combo .dish__body { align-content: center; padding: var(--space-lg); }
}

/* ═══ 5 · Artisan Store (teal) + stall games (shared feature card) ═══ */
.shop-list { display: grid; gap: var(--space-xl); }
.shop-item { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 52rem) { .shop-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shop-item__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
@media (min-width: 52rem) { .shop-item__media { aspect-ratio: auto; min-height: 32rem; } }
.shop-item__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-item__photo:not(.is-loaded) { visibility: hidden; }
.shop-item__photo.is-missing { display: none; }
.shop-item__placeholder { font-size: var(--text-sm); color: var(--card-muted); }
.shop-item__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  padding: var(--space-3xs) var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rang-ink);
  background: var(--rang-marigold);
  border-radius: var(--radius-pill);
}
.shop-item__body { display: grid; align-content: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); }
@media (min-width: 52rem) { .shop-item__body { padding: var(--space-2xl) var(--space-xl); } }
.shop-item__kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-accent); }
.shop-item__name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; font-variation-settings: "opsz" 144; line-height: 1.02; letter-spacing: -0.012em; overflow-wrap: break-word; text-wrap: balance; min-width: 0; }
.shop-item__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--card-accent); }
.shop-item__price span { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--card-muted); }
.shop-item__desc { color: var(--card-muted); max-width: 46ch; }
.shop-item__points { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-block: var(--rule-hair) solid var(--card-line); font-size: var(--text-sm); }
.shop-item__points li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-2xs); }
.shop-item__points li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--card-accent); }
.shop-item__points b { font-weight: 600; }
.shop-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }
.shop-item__actions .btn--accent { background: var(--card-accent); color: var(--rang-ink); }
.shop-item__actions .btn--ghost { color: var(--card-fg); }
.shop-item__facts { border-top: var(--rule-hair) solid var(--card-line); }
.shop-item__how-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.shop-item__steps { display: grid; gap: var(--space-2xs); padding-left: 1.25rem; font-size: var(--text-sm); }
.is-placeholder-text { color: var(--card-muted); }
.store-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 50% at 50% 30%, var(--glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.fact { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--card-line); }
.fact dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-muted); padding-top: 0.3em; }

/* ═══ 6 · Games (kumkum) ════════════════════════════════ */
.block-title { display: flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.block-title--spaced { margin-top: var(--space-3xl); }
.block-title + .shop-list, .block-title + .game, .block-title + .mentor-grid { margin-top: var(--space-md); }
.block-title__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.8em;
  height: 1.8em;
  padding-inline: 0.45em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
}
.game-list { perspective: 1400px; }

.game { display: grid; justify-items: start; gap: var(--space-sm); max-width: 50rem; padding: var(--space-lg) var(--space-md); }
@media (min-width: 40rem) { .game { padding: var(--space-xl); } }
@media (min-width: 60rem) {
  .game--quiz {
    max-width: none;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "title quiz" "rule quiz" "track quiz";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .game--quiz .game__title { grid-area: title; }
  .game--quiz .game__rule { grid-area: rule; }
  .game--quiz .quiz__track { grid-area: track; }
  .game--quiz .quiz { grid-area: quiz; }
}
.game__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.012em; text-wrap: balance; }
.game__rule { font-size: var(--text-sm); color: var(--card-muted); max-width: 46ch; }
.quiz__track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: 100%; list-style: none; }
.quiz__track li { height: 6px; background: var(--card-line); border-radius: var(--radius-pill); transition: background-color var(--dur-long) var(--ease-out); }
.quiz__track li.is-current { background: var(--rang-marigold); }
.quiz__track li.is-right { background: var(--color-success); }
.quiz__track li.is-wrong { background: var(--color-wrong); }
.quiz { display: grid; gap: var(--space-sm); width: 100%; }
.quiz .btn { justify-self: start; min-width: 9rem; background: var(--rang-kumkum); color: var(--rang-ivory); }
.quiz .btn::before { background: var(--rang-ink); }
.quiz__progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-muted); }
.quiz__level { padding: 2px var(--space-2xs); border-radius: var(--radius-pill); color: var(--rang-ink); background: var(--rang-ivory-2); }
.quiz__level[data-level="Medium"] { background: var(--rang-marigold); }
.quiz__level[data-level="Hard"] { color: var(--rang-ivory); background: var(--rang-kumkum); }
.quiz__clue { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.25; max-width: 36ch; min-height: 2.6em; }
.quiz__options { display: grid; gap: var(--space-2xs); }
.quiz__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 54px;
  padding: var(--space-xs) var(--space-md);
  text-align: left;
  font-weight: 600;
  color: var(--card-fg);
  background: transparent;
  border: 1.5px solid var(--card-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out);
}
.quiz__opt:hover:not([disabled]) { border-color: var(--rang-kumkum); translate: 6px 0; }
.quiz__opt[disabled] { cursor: default; opacity: 1; color: var(--card-muted); }
.quiz__opt.is-correct, .quiz__opt.is-correct[disabled] { color: var(--rang-ivory); background: var(--color-success); border-color: var(--color-success); }
.quiz__opt.is-wrong, .quiz__opt.is-wrong[disabled] { color: var(--rang-ivory); background: var(--color-wrong); border-color: var(--color-wrong); }
.quiz__opt .mark { font-size: var(--text-sm); white-space: nowrap; }
.quiz__feedback { min-height: 1.6em; color: var(--card-muted); max-width: 48ch; }
.quiz__feedback b { color: var(--card-fg); }
.quiz__score { display: inline-block; font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; line-height: 1; color: var(--rang-kumkum); }

/* ═══ 7 · Team (ivory) ══════════════════════════════════ */
.team-bar { display: grid; gap: var(--space-sm); margin: var(--space-3xl) 0 var(--space-md); }
.team-filter { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 42px;
  padding: var(--space-3xs) var(--space-md);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--fg);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.chip__n { opacity: 0.7; }
.team-filter__status { min-height: 1.5em; font-size: var(--text-sm); color: var(--muted); }

.team-grid, .mentor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 40rem) { .team-grid, .mentor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 60rem) { .team-grid, .mentor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .team-grid, .mentor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.member { display: flex; flex-direction: column; align-items: center; padding: var(--space-lg) var(--space-sm) var(--space-md); text-align: center; border: var(--rule-hair) solid var(--card-line); transition: translate var(--dur-long) var(--ease-out), rotate var(--dur-long) var(--ease-out); }
/* hover uses translate/rotate, leaving transform free for GSAP */
@media (hover: hover) and (pointer: fine) { .member:hover { translate: 0 -6px; rotate: -1deg; } }
.member[hidden] { display: none; }
.member__photo {
  position: relative;
  display: grid;
  place-items: end center;
  width: 74%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--rang-ivory-2);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--rang-marigold);
}
.member--mentor .member__photo { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--rang-kumkum); }
.member__silhouette { width: 64%; height: auto; fill: var(--card-line); }
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member__photo img:not(.is-loaded) { visibility: hidden; }
.member__photo img.is-missing { display: none; }
.member__body { display: grid; justify-items: center; gap: 2px; margin-top: var(--space-md); }
.member__tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--rang-teal); }
.member--mentor .member__tag { color: var(--rang-kumkum); }
.member__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: break-word; text-wrap: balance; }
.member__name.is-placeholder { color: var(--card-muted); }
.member__team { font-size: var(--text-xs); color: var(--card-muted); }

/* ═══ 8 · How to find (midnight) ════════════════════════ */
.find { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 60rem) { .find { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; } }
.venue { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); }
@media (min-width: 40rem) { .venue { padding: var(--space-xl); } }
.venue__kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-accent); }
.venue__name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.012em; overflow-wrap: break-word; text-wrap: balance; min-width: 0; }
.venue__org { color: var(--card-muted); }
.venue__facts { margin-top: var(--space-sm); border-top: var(--rule-hair) solid var(--card-line); }
.venue__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.find__map {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24rem;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-md);
}
.find__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.find__map-fallback { padding: var(--space-md); font-size: var(--text-sm); color: var(--card-muted); text-align: center; }
.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 34px;
  height: 44px;
  translate: -50% -100%;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px var(--shade));
}
.map-pin path { fill: var(--rang-kumkum); stroke: var(--rang-ivory); stroke-width: 1.5; }
.map-pin circle { fill: var(--rang-ivory); }

/* ═══ 9 · Footer (marigold) ═════════════════════════════ */
main + .footer.panel {
  margin-top: calc(var(--panel-radius) * -1);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  box-shadow: 0 -24px 48px -24px var(--shade);
}
.footer { padding-block: calc(var(--section-gap) + var(--panel-radius) * 0.5) var(--space-lg); text-align: center; overflow: hidden; }
.footer__diya { width: 64px; margin: 0 auto var(--space-lg); }
.footer__line {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 0.95;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
}
/* outline copy underneath; the filled copy on top is clipped by scroll (motion.js) */
.footer__line-outline { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.footer__line-fill { display: block; position: absolute; inset: 0; clip-path: inset(-30% 0% -30% 0%); -webkit-text-stroke: 1.5px var(--fg); }
.footer__meta { display: grid; justify-items: center; gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1.5px solid var(--line); }
.footer .brand__deva { color: var(--rang-kumkum); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); }
@media (min-width: 40rem) { .footer__links { column-gap: var(--space-lg); } }
.footer__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-position: 0 85%; background-repeat: no-repeat; transition: background-size 420ms var(--ease-out); }
.footer__link:hover { background-size: 100% 2px; }
.footer__credit { font-size: var(--text-xs); color: var(--muted); text-wrap: balance; }

/* ── Keyframes (the only CSS-driven loops: the flame) ── */
@keyframes flame {
  0%   { transform: scale(1, 1) skewX(0deg); }
  30%  { transform: scale(0.97, 1.04) skewX(-1.5deg); }
  60%  { transform: scale(1.02, 0.97) skewX(1deg); }
  100% { transform: scale(0.99, 1.02) skewX(1.5deg); }
}
@keyframes halo { from { opacity: 0.7; } to { opacity: 1; } }

/* ── Reduced motion: still, complete page ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 120ms !important; }
  .quiz__opt:hover:not([disabled]), .member:hover { translate: none; rotate: none; }
}