/* ==========================================================================
   Aishwarya & Sireesh — Wedding Celebrations
   Mobile-first. Ivory paper, gold foil, jewel-toned Mughal arches.
   ========================================================================== */

:root {
  --ivory: #fbf5ec;
  --ivory-2: #f4eadb;
  --paper: #fffbf4;
  --ink: #3a2817;
  --ink-soft: #6f5a43;
  --gold: #c9a96a;
  --gold-deep: #9c7a3c;
  --gold-dark: #7d5f2a;
  --gold-light: #ead7a4;
  --gold-pale: #f6ecd2;
  --line: rgba(201, 169, 106, 0.55);
  --line-soft: rgba(201, 169, 106, 0.28);

  --veg: #2f7a3a;
  --nonveg: #8a3b1c;

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;

  --pad: clamp(18px, 5.5vw, 40px);
  --frame: 9px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* deeper foil for ivory backgrounds */
  --foil: linear-gradient(100deg,
      #8c6a2e 0%, #b8913f 14%, #e2c77f 22%, #a8853f 34%, #6f5222 50%,
      #a8853f 64%, #d9bb6e 77%, #9c7a3c 89%, #8c6a2e 100%);
  /* brighter foil for jewel-toned backgrounds */
  --foil-light: linear-gradient(100deg,
      #c9a96a 0%, #f3e2ae 14%, #fffaf0 22%, #e2c77f 34%, #b8913f 50%,
      #e2c77f 64%, #fbf1cf 77%, #d2b26e 89%, #c9a96a 100%);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23d8bd7f' stroke-width='.7'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Event jewel moods */
[data-theme="haldi"]     { --j1: #b4620f; --j2: #5a2604; --j3: #d98a26; }
[data-theme="mehendi"]   { --j1: #3d6b45; --j2: #15301f; --j3: #6f9a5c; }
[data-theme="sangeet"]   { --j1: #8a2560; --j2: #3a0c2c; --j3: #b8457f; }
[data-theme="wedding"]   { --j1: #9e1f27; --j2: #4a0a10; --j3: #c8423a; }
[data-theme="reception"] { --j1: #24396b; --j2: #0c1630; --j3: #4560a0; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, #fffaf0 0%, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(234, 215, 164, 0.35), transparent 70%),
    radial-gradient(70% 40% at 0% 60%, rgba(234, 215, 164, 0.25), transparent 70%),
    var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
/* invitation-card frame around the viewport */
body::after {
  content: "";
  position: fixed;
  inset: var(--frame);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--line-soft);
  pointer-events: none;
  z-index: 60;
}
main, header, footer, section, nav { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }

/* ---------- Type helpers ---------- */
.foil {
  background: var(--foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil 9s linear infinite;
}
@keyframes foil { to { background-position: 200% 0; } }

.caps {
  font-family: var(--f-caps);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.script { font-family: var(--f-script); font-weight: 400; line-height: 1; }

.orn { color: var(--gold); width: min(220px, 62vw); margin: 0 auto; }
.orn svg { width: 100%; height: auto; overflow: visible; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   PALACE DOORS (intro, home only, once per session)
   ========================================================================== */
.doors { display: none; position: fixed; inset: 0; z-index: 100; perspective: 1800px; cursor: pointer; }
.show-doors .doors { display: block; }
.show-doors body { overflow: hidden; }

.door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.2%;
  background:
    var(--jali) center / 46px 46px,
    radial-gradient(120% 70% at 50% 50%, #8e1b22 0%, #5c0d14 55%, #3a060b 100%);
  transition: transform 1.9s cubic-bezier(0.65, 0, 0.2, 1), filter 1.9s ease;
  backface-visibility: hidden;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
}
.door--l { left: 0; transform-origin: left center; }
.door--r { right: 0; transform-origin: right center; }
.door::before,
.door::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(232, 205, 140, 0.75);
  border-radius: 999px 999px 6px 6px / 160px 160px 6px 6px;
  pointer-events: none;
}
.door::before { inset: 22px 16px 22px; }
.door::after { inset: 30px 24px 30px; border-color: rgba(232, 205, 140, 0.4); }
.door--l::before, .door--l::after { right: 0; }
.door--r::before, .door--r::after { left: 0; }
.door__edge { position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--gold-light), var(--gold-deep), var(--gold-light)); }
.door--l .door__edge { right: 0; }
.door--r .door__edge { left: 0; }

.seal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 18px;
  z-index: 2;
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
  text-align: center;
}
.seal__disc {
  width: 138px; height: 138px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fffdf7, #f6ead0 70%, #e9d6a8);
  box-shadow:
    0 0 0 3px #7a0f17,
    0 0 0 5px var(--gold),
    0 0 0 9px rgba(201, 169, 106, 0.25),
    0 20px 50px rgba(0, 0, 0, 0.5);
  position: relative;
}
.seal__disc::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(156, 122, 60, 0.6);
  animation: spin 40s linear infinite;
}
.seal__disc img { width: 54px; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal__names, .seal__hint {
  padding: 7px 16px;
  background: radial-gradient(120% 140% at 50% 50%, #7a121b, #4a080e);
  border-top: 1px solid rgba(232, 205, 140, 0.6);
  border-bottom: 1px solid rgba(232, 205, 140, 0.6);
  white-space: nowrap;
}
.seal__names { font-family: var(--f-caps); color: var(--gold-light); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; }
.seal__hint {
  font-family: var(--f-display); font-style: italic; font-size: 17px; color: #f3e2ae;
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 6px 18px;
  animation: breathe 2.6s ease-in-out infinite;
}
.seal__hint::before, .seal__hint::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
@keyframes breathe { 50% { color: rgba(243, 226, 174, 0.45); } }

.doors.open { pointer-events: none; }
.doors.open .seal { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
.doors.open .door--l { transform: rotateY(-105deg); filter: brightness(0.6); }
.doors.open .door--r { transform: rotateY(105deg); filter: brightness(0.6); }

/* pause hero entrance until doors open */
.doors-closed .hero * { animation-play-state: paused !important; }

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: calc(var(--frame) + 46px) var(--pad) calc(var(--frame) + 70px);
  overflow: hidden;
}
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero > *:not(.petals) { position: relative; z-index: 1; }

.hero__kicker { margin: 0 0 6px; opacity: 0; animation: rise 1.2s var(--ease) 0.5s forwards; }
.hero__invite {
  margin: 4px auto 0;
  max-width: 30ch;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  opacity: 0; animation: rise 1.2s var(--ease) 1.5s forwards;
}

.crest {
  position: relative;
  width: min(88vw, 520px);
  aspect-ratio: 1743 / 1454;
  margin: 10px auto 6px;
  opacity: 0;
  animation: crest-in 2s var(--ease) 0.7s forwards;
}
.crest img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(156, 122, 60, 0.16)); }
/* glint sweeping across the crest */
.crest::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 249, 228, 0.95) 48%, rgba(255, 255, 255, 1) 50%, rgba(255, 249, 228, 0.95) 52%, transparent 62%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: url("../img/crest-700.webp") center / contain no-repeat;
  mask: url("../img/crest-700.webp") center / contain no-repeat;
  animation: glint 7s ease-in-out 2.4s infinite;
  mix-blend-mode: soft-light;
}
@keyframes crest-in {
  from { opacity: 0; transform: scale(0.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes glint {
  0%   { background-position: 120% 0; }
  35%, 100% { background-position: -20% 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__date {
  margin: 22px 0 0;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-caps); font-size: 13px; letter-spacing: 0.28em; color: var(--gold-dark);
  opacity: 0; animation: rise 1.2s var(--ease) 1.8s forwards;
}
.hero__date::before, .hero__date::after { content: ""; width: 28px; height: 1px; background: var(--gold); }

.scroll-cue {
  position: absolute !important;
  left: 50%; bottom: calc(var(--frame) + 18px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  font-family: var(--f-caps); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-deep);
  opacity: 0; animation: rise 1s var(--ease) 2.4s forwards;
}
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: -1px; width: 3px; height: 10px; border-radius: 2px; background: var(--gold-deep); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { from { top: -10px; } to { top: 40px; } }

/* ---------- Countdown ---------- */
.countdown { text-align: center; padding: 34px var(--pad) 10px; }
.countdown__title { margin: 12px 0 18px; font-size: 23px; font-style: italic; font-weight: 500; color: var(--ink); }
.countdown__grid { display: flex; justify-content: center; gap: 10px; }
.cd {
  width: 72px;
  padding: 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 40px 40px 6px 6px;
  background: linear-gradient(180deg, var(--paper), var(--ivory-2));
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-soft);
}
.cd b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 32px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.cd span { font-family: var(--f-caps); font-size: 8.5px; letter-spacing: 0.24em; color: var(--ink-soft); text-transform: uppercase; }
.countdown__done { font-family: var(--f-script); font-size: 44px; margin: 0; }

/* ==========================================================================
   HOME — EVENTS
   ========================================================================== */
.section-head { text-align: center; padding: 64px var(--pad) 8px; }
.section-head h2 { margin: 8px 0 10px; font-family: var(--f-script); font-weight: 400; font-size: clamp(54px, 15vw, 88px); line-height: 1.05; }
.section-head p:not(.caps) { margin: 14px auto 0; max-width: 32ch; font-style: italic; color: var(--ink-soft); font-size: 17px; text-wrap: balance; }

.events {
  list-style: none;
  margin: 0 auto;
  padding: 30px var(--pad) 80px;
  display: grid;
  gap: 34px;
  max-width: 1180px;
}

.event {
  display: block;
  position: relative;
  padding: 34px 16px 26px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px 999px 14px 14px / 170px 170px 14px 14px;
  box-shadow:
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 6px var(--line-soft),
    0 28px 50px -28px rgba(110, 70, 20, 0.45),
    0 2px 6px rgba(110, 70, 20, 0.06);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.event:active { transform: scale(0.985); }

.event__no { display: block; margin: 14px 0 10px; }

.window {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 170;
  margin: 0 auto;
  color: var(--gold-light);
  container-type: inline-size;
}
.window__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.window__body {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  padding: 18% 14% 4%;
  gap: 4px;
}
.window__icon { width: 26%; max-width: 74px; color: var(--gold-light); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); }
.window__name {
  font-family: var(--f-script); font-size: clamp(48px, 15vw, 64px); font-size: min(19cqi, 64px); line-height: 1.15; padding: 0 0.12em; white-space: nowrap;
  background-image: var(--foil-light);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
}
.window__day { color: rgba(246, 236, 210, 0.85); font-size: 10px; }

.event__tagline { margin: 18px auto 0; max-width: 28ch; font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.event .orn { width: 120px; margin: 16px auto 14px; }
.meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.meta li { font-size: 17.5px; line-height: 1.4; }
.meta .meta__date { font-family: var(--f-caps); font-size: 12.5px; letter-spacing: 0.16em; color: var(--ink); }
.meta .meta__muted { color: var(--ink-soft); }
.meta .meta__dress { margin-top: 6px; font-style: italic; color: var(--gold-dark); }

.btn-gold {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 20px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--f-caps); font-size: 11.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: #3a2410;
  background: linear-gradient(100deg, #b8913f, #ecd9a0 35%, #c9a96a 60%, #a8853f);
  background-size: 200% 100%;
  box-shadow: 0 10px 22px -10px rgba(140, 100, 40, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(120, 80, 20, 0.3);
  transition: background-position 0.8s var(--ease), transform 0.4s var(--ease);
}
.btn-gold svg { width: 18px; height: 10px; transition: transform 0.4s var(--ease); }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 30px var(--pad) calc(var(--frame) + 44px); }
.footer img { width: 46px; margin: 22px auto 12px; opacity: 0.9; }
.footer .caps { color: var(--ink-soft); }
.footer p { margin: 4px 0; }
.footer__love { font-style: italic; color: var(--ink-soft); font-size: 16px; }

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--frame) + 14px) calc(var(--frame) + 12px) 0;
}
.back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 251, 244, 0.7);
  font-family: var(--f-caps); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark);
}
.back svg { width: 16px; height: 10px; transform: scaleX(-1); }
.topbar__mono { width: 30px; }
.topbar__spacer { width: 30px; }

.mhero { text-align: center; padding: 34px var(--pad) 8px; overflow: hidden; }
.mhero > *:not(.petals) { position: relative; z-index: 1; }
.mhero .window { width: min(100%, 430px); view-transition-name: event-window; }
.mhero .window__name { font-size: clamp(60px, 19vw, 92px); font-size: min(21cqi, 92px); }
.mhero__tagline { margin: 16px auto 0; max-width: 30ch; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.mhero .meta { margin-top: 16px; }

.mnav {
  position: sticky; top: 0; z-index: 30;
  margin-top: 28px;
  background: rgba(251, 245, 236, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mnav__track {
  display: flex; gap: 8px;
  display: none;
  overflow-x: auto;
  padding: 10px calc(var(--frame) + 14px);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.mnav__track::-webkit-scrollbar { display: none; }
.mnav__track > .chip:first-child { margin-left: auto; }
.mnav__track > .chip:last-child { margin-right: auto; }
.chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-caps); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold-dark);
  cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.chip[aria-current="true"] { background: var(--j2, var(--ink)); border-color: var(--j2, var(--ink)); color: var(--gold-light); }
.chip[hidden] { display: none; }

.mcard {
  position: relative;
  max-width: 680px;
  margin: 26px auto 0;
  margin-inline: calc(var(--frame) + 12px);
  padding: 50px 18px 64px;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px var(--line-soft),
    0 30px 60px -36px rgba(110, 70, 20, 0.5);
  text-align: center;
}
.corner { position: absolute; width: 54px; height: 54px; color: var(--gold); }
.corner svg { width: 100%; height: 100%; }
.corner--tl { top: 10px; left: 10px; }
.corner--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.corner--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.corner--br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

.mcard__title { margin: 0; text-transform: uppercase; font-family: var(--f-caps); font-weight: 500; font-size: 26px; letter-spacing: 0.5em; padding-left: 0.5em; color: var(--ink); }
.mcard__sub { margin: 6px 0 0; font-style: italic; color: var(--ink-soft); font-size: 17px; }
.mcard .orn { margin-top: 14px; }

.diet-toggle {
  display: inline-flex;
  margin: 22px auto 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(244, 234, 219, 0.6);
}
.diet-toggle button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--f-caps); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s;
}
.diet-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(110, 70, 20, 0.5), 0 0 0 1px var(--line); }

.course { padding-top: 40px; scroll-margin-top: 72px; }
.course[hidden] { display: none; }
.course__num { display: block; font-family: var(--f-display); font-style: italic; font-size: 19px; line-height: 1; color: var(--gold); }
.course__title {
  margin: 4px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-caps); font-weight: 600; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-dark);
}
.course__title::before, .course__title::after {
  content: ""; flex: 0 1 46px; height: 7px;
  background:
    radial-gradient(circle, var(--gold) 2px, transparent 2.5px) right center / 7px 7px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left center / calc(100% - 10px) 1px no-repeat;
}
.course__title::after { transform: scaleX(-1); }

.dishes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
.dish[hidden] { display: none; }
.dish__name {
  margin: 0;
  font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--ink);
  text-wrap: balance;
}
.dish__desc { margin: 3px auto 0; max-width: 34ch; font-style: italic; font-size: 16.5px; line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; }

.diet { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 9px; vertical-align: 0.02em; border: 1.5px solid currentColor; border-radius: 2px; }
.diet::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.diet--veg { color: var(--veg); }
.diet--non { color: var(--nonveg); }
.diet--non::after { width: 0; height: 0; border-radius: 0; background: none; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 6px solid currentColor; }

.tag-live {
  display: inline-block; margin-left: 8px; padding: 2px 8px 1px; vertical-align: 0.25em;
  border: 1px solid var(--gold); border-radius: 999px;
  font-family: var(--f-caps); font-size: 8.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--gold-dark); text-transform: uppercase;
}

.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; }
.legend .tag-live { margin: 0 8px 0 0; vertical-align: 0; }

.blessing { margin-top: 30px; }
.blessing__text { margin: 10px 0 0; font-family: var(--f-script); font-size: clamp(34px, 10vw, 46px); line-height: 1.2; }
.blessing__meaning { margin: 2px 0 0; font-style: italic; font-size: 15.5px; color: var(--ink-soft); }

.empty { padding: 30px 0 10px; font-style: italic; color: var(--ink-soft); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 680px; margin: 34px auto 0; padding: 0 calc(var(--frame) + 12px); }
.pager a {
  display: grid; gap: 2px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 60px 60px 8px 8px / 40px 40px 8px 8px;
  background: var(--paper);
  text-align: center;
}
.pager a.next { grid-column: 2; }
.pager .caps { font-size: 9px; color: var(--ink-soft); }
.pager .script { font-size: 34px; color: var(--gold-dark); }

.notfound { text-align: center; padding: 80px var(--pad); }
.notfound h1 { font-family: var(--f-script); font-weight: 400; font-size: 56px; margin: 0 0 10px; }

/* ==========================================================================
   Hover (pointer devices only)
   ========================================================================== */
@media (hover: hover) {
  .event:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--line), 0 40px 60px -30px rgba(110, 70, 20, 0.55), 0 2px 6px rgba(110, 70, 20, 0.06); }
  .event:hover .btn-gold { background-position: 100% 0; }
  .event:hover .btn-gold svg, .btn-gold:hover svg { transform: translateX(4px); }
  .back:hover { background: var(--paper); }
  .chip:hover { border-color: var(--gold-deep); }
  .pager a:hover { border-color: var(--gold-deep); }
}

/* ==========================================================================
   Larger screens
   ========================================================================== */
@media (min-width: 560px) {
  :root { --frame: 14px; }
  .cd { width: 86px; }
  .cd b { font-size: 38px; }
  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 17px); }
  .mcard { margin-inline: auto; padding: 60px 56px 52px; }
  .pager { padding: 0; }
}

@media (min-width: 980px) {
  :root { --frame: 18px; }
  .events { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 34px; }
  .events > li { grid-column: span 2; }
  .events > li:last-child:nth-child(odd) { grid-column: span 2; width: auto; justify-self: stretch; }
  /* 5 events: 3 on the first row, 2 centred on the second */
  .events > li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .events > li:nth-child(5):last-child { grid-column: 4 / span 2; }
  .hero__invite { font-size: 19px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  /* doors still appear, but fade away instead of swinging open */
  .doors { transition: opacity 0.8s ease !important; }
  .doors.open { opacity: 0; }
  .doors.open .door--l, .doors.open .door--r { transform: none; }
}