/* ============================================================
   Ganesh Contest 2026 — Design System
   Festival theme: saffron · marigold · gold · temple maroon · cream
   ============================================================ */
:root {
  /* paper / neutrals */
  --cream: #FBF3E2;
  --cream-2: #F6EAD0;
  --cream-3: #EFE0C0;
  --ink: #33231a;
  --ink-soft: #5c4a3d;
  --muted: #8a7d6d;
  /* saffron / marigold */
  --saffron: #E9821B;
  --saffron-deep: #C96A0C;
  --marigold: #F5A623;
  /* gold */
  --gold: #B8892E;
  --gold-2: #D9B24A;
  --gold-soft: #EAD59A;
  /* temple maroon / plum */
  --maroon: #7C1F3D;
  --maroon-deep: #5E132C;
  --maroon-2: #9A2A4E;
  --plum: #6E1E52;
  /* velvet chrome (header · hero · footer) + bright golds on dark */
  --velvet: #4A0E1F;
  --velvet-2: #5A1226;
  --velvet-deep: #360816;
  --gold-bright: #F0D488;
  --sun: #F5C542;
  --sun-deep: #E0AC28;
  --leaf: #2f7d4e;
  /* lines */
  --line: rgba(124, 31, 61, .15);
  --gold-line: rgba(184, 137, 46, .45);

  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --pill: 999px;
  --sh-sm: 0 1px 3px rgba(94, 19, 44, .08), 0 2px 8px rgba(94, 19, 44, .06);
  --sh: 0 6px 22px rgba(94, 19, 44, .12);
  --sh-lg: 0 20px 50px rgba(60, 10, 28, .22);
  --maxw: 1180px;

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Mukta", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-accent: "Yatra One", var(--f-display);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 0, rgba(245, 166, 35, .06), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(124, 31, 61, .05), transparent 42%);
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit
}

svg {
  display: block
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 36px)
}

.center {
  display: flex;
  justify-content: center
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none
}

/* ---------- Section header ---------- */
.sec-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vw, 48px)
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  margin-bottom: .6rem
}

.kicker::before,
.kicker::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-line)
}

.sec-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.08;
  color: var(--maroon);
  letter-spacing: -.01em
}

.sec-title em {
  font-style: italic;
  color: var(--saffron-deep)
}

.sec-sub {
  margin-top: .7rem;
  color: var(--ink-soft);
  font-size: 1.05rem
}

/* signature divider: a lit diya flanked by gold threads — a lamp under
   every section title, in keeping with the festival */
.rule {
  width: 132px;
  height: 28px;
  border: none;
  margin: 1.05rem auto 0;
  position: relative;
  background: url("../assets/diya.svg") center/26px 26px no-repeat
}

.rule::before,
.rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 44px;
  height: 1px;
  transform: translateY(-50%)
}

.rule::before {
  right: calc(50% + 18px);
  background: linear-gradient(90deg, transparent, var(--gold-2))
}

.rule::after {
  left: calc(50% + 18px);
  background: linear-gradient(270deg, transparent, var(--gold-2))
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  border-radius: var(--pill);
  padding: .82em 1.7em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn:active {
  transform: translateY(1px)
}

.btn-primary {
  background: var(--saffron);
  color: #fff;
  box-shadow: 0 6px 16px rgba(233, 130, 27, .32)
}

.btn-primary:hover {
  background: var(--saffron-deep);
  box-shadow: 0 10px 22px rgba(201, 106, 12, .4);
  transform: translateY(-2px)
}

.btn-ghost {
  background: rgba(184, 137, 46, .1);
  color: var(--maroon);
  border: 1.5px solid var(--gold-2)
}

.btn-ghost:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

/* ghost button placed on the dark maroon page background */
.btn-ghost.btn-onmaroon {
  background: rgba(245, 197, 66, .08);
  color: var(--gold-bright);
  border-color: var(--gold-2)
}

.btn-ghost.btn-onmaroon:hover {
  background: var(--sun);
  color: var(--maroon-deep);
  border-color: var(--sun)
}

/* gold-on-maroon plaque — the signature button, raised and tactile */
.btn-plaque {
  background: linear-gradient(180deg, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright);
  border: 1.5px solid var(--gold-2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(240, 212, 136, .28), 0 5px 14px rgba(30, 4, 14, .42)
}

.btn-plaque:hover {
  color: #fff;
  border-color: var(--sun);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(240, 212, 136, .4), 0 10px 24px rgba(30, 4, 14, .55)
}

.btn-gold {
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  color: var(--maroon-deep);
  border: 1px solid rgba(122, 77, 10, .55);
  border-radius: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 244, 205, .8), 0 8px 20px rgba(30, 4, 14, .4)
}

.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.05)
}

.btn-lg {
  font-size: 1.08rem;
  padding: 1em 2.2em
}

.btn-sm {
  font-size: .86rem;
  padding: .6em 1.15em
}

.btn-block {
  width: 100%
}

.btn .icon {
  width: 1.15em;
  height: 1.15em
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--velvet), var(--velvet-deep));
  border-bottom: 2px solid var(--gold-2);
  box-shadow: 0 4px 18px rgba(30, 4, 14, .35)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1rem
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem
}

.brand img {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 6px rgba(245, 197, 66, .35))
}

/* the committee logo mark ships as a square saffron plate — every placement
   rounds it into a gold-ringed medallion so it reads on the maroon chrome. */
img[src$="logo-mark.png"] {
  border-radius: 50%;
  object-fit: cover;
  background: #D9873A;
  box-shadow: 0 0 0 1.5px rgba(217, 178, 74, .7)
}

.brand-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.1;
  color: var(--gold-bright)
}

.brand-text small {
  display: block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .14em;
  color: #e8cfa8;
  opacity: .85;
  margin-top: .2rem
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem
}

.nav-links a {
  font-weight: 600;
  font-size: .95rem;
  color: #f3e3c8;
  position: relative;
  padding: .3rem 0
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--sun);
  transition: width .22s
}

.nav-links a:hover {
  color: var(--sun)
}

.nav-links a:hover::after {
  width: 100%
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1.5px solid var(--gold-2);
  border-radius: 10px
}

.nav-register-mobile {
  display: none
}

.hamburger span {
  width: 24px;
  height: 2.4px;
  background: var(--gold-bright);
  border-radius: 2px;
  transition: .25s
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.4px) rotate(45deg)
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.4px) rotate(-45deg)
}

/* ---------- Toran ---------- */
.toran {
  height: 52px;
  background: var(--maroon-deep) url("../assets/toran.svg") repeat-x center/auto 96px;
  background-position: center -6px
}

/* ---------- Hero: maroon velvet temple frame ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #f6e7cd;
  padding: clamp(26px, 4vw, 48px) 0 clamp(16px, 2.5vw, 26px);
  background:
    radial-gradient(ellipse 90% 60% at 72% 30%, rgba(245, 166, 35, .16), transparent 55%),
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(154, 42, 78, .5), transparent 60%),
    linear-gradient(165deg, var(--velvet-2), var(--velvet) 45%, var(--velvet-deep));
  border-bottom: 2px solid var(--gold-2)
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: min(360px, 42vw);
  aspect-ratio: 1;
  background: url("../assets/mandala-corner.svg") no-repeat center/contain;
  opacity: .18;
  pointer-events: none;
  z-index: 0
}

.hero::before {
  top: -10%;
  left: -10%
}

.hero::after {
  bottom: -14%;
  right: -10%;
  top: auto
}

.hero-inner {
  --hero-measure: 40rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center
}

.hero-kicker {
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--gold-2)
}

.hero-title {
  display: flex;
  flex-direction: column;
  margin-top: .5rem;
  line-height: 1.02;
  letter-spacing: -.01em;
  font-family: var(--f-display);
  font-weight: 900
}

.hero-title .ht-1,
.hero-title .ht-2 {
  font-size: clamp(2.5rem, 7.5vw, 4.6rem);
  background: linear-gradient(180deg, #F7E3A5 20%, var(--sun) 55%, #C88F1F 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 6, 18, .55))
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 0;
  margin-top: 1rem;
  font-weight: 600;
  font-size: clamp(.95rem, 2.4vw, 1.12rem);
  color: #f6e7cd
}

.hero-tags span {
  display: flex;
  align-items: center
}

.hero-tags span+span::before {
  content: "•";
  color: var(--sun);
  margin: 0 .75em;
  font-size: .85em
}

.prize-plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  max-width: 100%;
  background: linear-gradient(180deg, #5E132C, #3a0b1b);
  border: 2px solid var(--gold-2);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  box-shadow: 0 12px 28px rgba(20, 2, 9, .5)
}

/* engraved inner gold frame — the ornate double border */
.prize-plaque::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(240, 212, 136, .55);
  border-radius: 9px;
  pointer-events: none
}

.prize-plaque .pp-trophy {
  flex: none;
  line-height: 1;
  font-size: clamp(44px, 12vw, 58px);
  filter: drop-shadow(0 2px 3px rgba(20, 2, 9, .5))
}

.prize-plaque .pp-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  min-width: 0
}

/* the boxed "Rewards" badge — a solid gold ticket framing the amount */
.prize-plaque .pp-amount-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFEBAE, var(--sun) 52%, var(--sun-deep));
  border: 2px solid var(--gold-bright);
  box-shadow: inset 0 0 0 2px rgba(94, 19, 44, .3), 0 5px 12px rgba(20, 2, 9, .4)
}

.prize-plaque b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: var(--gold-bright);
  letter-spacing: .02em
}

.prize-plaque em {
  font-style: normal;
  font-size: clamp(.85rem, 2.2vw, 1rem);
  color: #eed9b4;
  margin-top: .1rem
}

/* "— Prize Pool —" caption with ornamental flanking rules */
.prize-plaque .pp-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(.72rem, 1.9vw, .86rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sun);
  margin-top: .5rem
}

.prize-plaque .pp-caption::before,
.prize-plaque .pp-caption::after {
  content: "";
  height: 1px;
  width: clamp(16px, 5vw, 30px);
  background: linear-gradient(90deg, transparent, var(--gold-2))
}

.prize-plaque .pp-caption::after {
  background: linear-gradient(90deg, var(--gold-2), transparent)
}

/* big "Rewards" focal text, boxed inside the gold badge */
.prize-plaque .pp-amount {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.2vw, 2.7rem);
  line-height: 1;
  color: var(--maroon-deep);
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255, 240, 190, .45)
}

.prize-plaque strong {
  font-family: var(--f-display);
  color: var(--sun);
  font-size: 1.25em
}

/* "free entry" message under the hero prize plaque */
.free-note {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: .95rem;
  color: #f3e3c0;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.4
}

.fn-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: linear-gradient(180deg, #FFE27A, var(--sun-deep));
  color: var(--maroon-deep);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .42em .9em;
  border-radius: var(--pill);
  border: 1px solid #fff3cd;
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 3px 10px rgba(30, 4, 14, .35);
  animation: freePulse 2.2s ease-in-out infinite
}

@keyframes freePulse {

  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 0 0 0 rgba(245, 197, 66, .55), 0 3px 10px rgba(30, 4, 14, .35)
  }

  50% {
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 0 0 7px rgba(245, 197, 66, 0), 0 4px 14px rgba(30, 4, 14, .4)
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-tag {
    animation: none
  }
}

.fn-tag .icon {
  width: 1.05em;
  height: 1.05em
}

/* inline highlight for "free" copy on cream cards */
.free-hl {
  font-style: normal;
  font-weight: 800;
  color: var(--saffron-deep)
}

/* friendly free-entry callout inside the register modal */
.free-callout {
  display: flex;
  align-items: center;
  gap: .55em;
  margin: -.2rem 0 1.1rem;
  padding: .65em .9em;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFF6E0, var(--cream-2));
  border: 1px solid var(--gold-2);
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.4
}

.free-callout .icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--saffron-deep);
  flex: none
}

.free-callout strong {
  color: var(--maroon)
}

.hero-cta {
  max-width: var(--hero-measure);
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem
}

/* Sized to their own labels and kept on one line — the pair shares a single
   row on desktop, and the phone breakpoint below stacks them full-width. */
.hero-cta .btn {
  flex: 0 1 auto;
  justify-content: center;
  white-space: nowrap
}

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem
}

/* soft golden halo behind the circular portrait */
.hero-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(470px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 66, .24), transparent 62%)
}

/* idol clipped into the circle — the ivory + gold ring is its border */
.hero-art img {
  position: relative;
  width: min(400px, 86%);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 8px var(--gold-2),
    0 0 0 12px rgba(217, 178, 74, .35), 0 18px 46px rgba(20, 2, 9, .55), 0 0 60px rgba(245, 197, 66, .25)
}

/* action tiles — cream cards floating over the hero's lower edge */
.actions {
  display: grid;
  /* auto-fit, not a fixed 4 — the Annaprasadam and Homam cards are time-gated,
     and fixed tracks left the two survivors hugging the left edge with a
     column and a half of empty grid beside them */
  grid-template-columns: repeat(auto-fit, minmax(150px, 210px));
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  max-width: 900px;
  margin: clamp(40px, 6vw, 60px) auto 0;
  position: relative;
  z-index: 3;
  list-style: none
}

.actions>li {
  display: flex
}

.actions .action {
  width: 100%
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
  min-width: 0;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-lg);
  padding: 1.3rem .8rem 1.1rem;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35), 0 14px 30px rgba(30, 4, 14, .35);
  transition: transform .18s ease, box-shadow .2s ease
}

.action:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .6), 0 18px 36px rgba(30, 4, 14, .42)
}

.action-ic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright);
  box-shadow: 0 6px 14px rgba(94, 19, 44, .35), inset 0 0 0 2.5px var(--gold-2);
  overflow: hidden;
  position: relative;
}

.action-ic .icon {
  width: 30px;
  height: 30px
}

.action-ic.has-img,
.action-ic:has(img) {
  padding: 0;
  border: 2.5px solid var(--gold-2);
  box-shadow: 0 6px 14px rgba(94, 19, 44, .35);
  background: #fdf7ec;
}

.action-ic img,
.action-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform .25s ease;
}

.action:hover .action-img {
  transform: scale(1.08);
}

.action-label {
  font-weight: 700;
  font-size: .98rem;
  color: var(--maroon);
  line-height: 1.2
}

/* ---------- Seva journey band ---------- */
.seva {
  position: relative;
  margin-top: clamp(30px, 5vw, 52px)
}

.seva-band {
  background: linear-gradient(150deg, var(--maroon), var(--velvet-deep));
  color: #f7e9d8;
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 4px var(--velvet-deep), inset 0 0 0 5.5px rgba(217, 178, 74, .55), var(--sh);
  border: 1.5px solid var(--gold-2)
}

.seva-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") no-repeat right -80px bottom -80px/300px;
  opacity: .12
}

.seva-band .kicker {
  color: var(--gold-2)
}

.seva-band h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #fff;
  position: relative
}

.seva-tagline {
  max-width: 560px;
  margin: .7rem auto 0;
  opacity: .86;
  position: relative
}

.seva-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0 1.2rem;
  position: relative
}

.seva-stats div {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(217, 178, 74, .28);
  border-radius: var(--r);
  padding: 1.1rem .5rem
}

.seva-stats b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  color: var(--gold-2)
}

.seva-stats span {
  font-size: .82rem;
  font-weight: 600;
  opacity: .82;
  letter-spacing: .02em
}

.seva-note {
  font-size: .86rem;
  opacity: .65;
  position: relative
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(52px, 7vw, 96px) 0;
  position: relative
}

.section-tint {
  background: var(--cream-2);
  border-block: 1px solid var(--line)
}

/* ---------- Winners podium ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 26px);
  align-items: end;
  max-width: 920px;
  margin-inline: auto
}

.rank {
  background: linear-gradient(180deg, #fff, var(--cream-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.1rem 1.5rem;
  text-align: center;
  position: relative;
  box-shadow: var(--sh-sm);
  transition: transform .2s
}

.rank:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh)
}

.rank-1 {
  background: linear-gradient(180deg, #fffaf0, #fdeecb);
  border-color: var(--gold);
  transform: translateY(-16px);
  box-shadow: var(--sh)
}

.rank-1:hover {
  transform: translateY(-24px)
}

.medal {
  width: 56px;
  height: 56px;
  margin: 0 auto .3rem
}

.rank-crown {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%)
}

.rank-place {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--maroon);
  line-height: 1
}

.rank-place sup {
  font-size: .5em;
  color: var(--saffron-deep)
}

.rank h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: .35rem;
  color: var(--ink)
}

.rank p {
  font-size: .9rem;
  color: var(--muted);
  min-height: 1.2em
}

.rank-score {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .7rem;
  background: var(--maroon);
  color: var(--gold-2);
  font-weight: 700;
  font-size: .82rem;
  padding: .35em 1em;
  border-radius: var(--pill)
}

/* ---------- Organizer ---------- */
.organizer {
  max-width: 780px;
  margin: clamp(34px, 5vw, 56px) auto 0;
  text-align: center;
  background: linear-gradient(180deg, #fff, var(--cream-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 5vw, 44px);
  box-shadow: var(--sh);
  position: relative
}

.organizer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: url("../assets/emblem.svg") center/contain no-repeat;
  background-color: var(--cream);
  border-radius: 50%
}

.organizer .kicker {
  margin-top: .6rem
}

.organizer-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  color: var(--maroon);
  margin-top: .2rem
}

.organizer-addr {
  color: var(--ink-soft);
  margin-top: .35rem
}

.organizer-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  justify-content: center;
  margin-top: 1.2rem
}

.organizer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--maroon)
}

.organizer-contacts a:hover {
  color: var(--saffron-deep)
}

.organizer-contacts .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--saffron-deep)
}

/* ---------- Donors ---------- */
.donor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 20px)
}

.donor-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  color: #f7e9d8;
  background: linear-gradient(155deg, var(--maroon-2), var(--maroon-deep));
  border: 1px solid rgba(217, 178, 74, .4);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .2s
}

.donor-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 120px;
  height: 120px;
  background: url("../assets/mandala-corner.svg") center/contain no-repeat;
  opacity: .12
}

.donor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh)
}

.donor-photo {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-2);
  box-shadow: 0 4px 10px rgba(20, 2, 9, .4)
}

.donor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit
}

.donor-tier {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-2)
}

.donor-tier .icon {
  width: .95em;
  height: .95em
}

.donor-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: .25rem;
  color: #fff
}

.donor-amt {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold-2);
  margin-top: .5rem
}

.donor-loc {
  font-size: .85rem;
  opacity: .85;
  display: flex;
  align-items: center;
  gap: .3rem
}

.donor-loc .icon {
  width: .9em;
  height: .9em
}

.donor-more {
  font-size: .78rem;
  margin-top: .6rem;
  opacity: .9;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem
}

/* ---------- Committees ---------- */
.search-box {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border: 1.5px solid var(--gold-line);
  border-radius: var(--pill);
  padding: .8rem 1.3rem;
  max-width: 580px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  box-shadow: var(--sh-sm)
}

.search-box .icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex: none
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  background: transparent;
  color: var(--ink)
}

.committee-grid,
.promoter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px)
}

.committee-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .2s, border-color .2s;
  position: relative;
  border-top: 3px solid var(--saffron)
}

.committee-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh);
  border-color: var(--gold-line)
}

.committee-top {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem
}

.badge-initial {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(150deg, var(--marigold), var(--saffron-deep));
  flex: none
}

.committee-id {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted)
}

.committee-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.15
}

.committee-meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .88rem;
  color: var(--ink-soft)
}

.committee-meta span {
  display: flex;
  align-items: center;
  gap: .45rem
}

.committee-meta .icon {
  width: 1em;
  height: 1em;
  color: var(--saffron-deep)
}

.committee-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line)
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  background: var(--cream-3);
  color: var(--maroon);
  padding: .32em .85em;
  border-radius: var(--pill)
}

.view-link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--saffron-deep);
  display: inline-flex;
  align-items: center;
  gap: .25rem
}

/* ---------- Promoters ---------- */
.promoter-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.2rem;
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem
}

.promoter-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh)
}

.promoter-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--marigold), var(--saffron-deep));
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  box-shadow: var(--sh-sm)
}

.promoter-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.promoter-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-top: .2rem
}

.promoter-type {
  font-size: .86rem;
  color: var(--muted)
}

.promoter-socials {
  display: flex;
  gap: .55rem;
  margin-top: .5rem
}

.promoter-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform .15s
}

.promoter-socials a:hover {
  transform: translateY(-3px)
}

.promoter-socials .icon {
  width: 18px;
  height: 18px
}

.s-fb {
  background: #1877f2
}

.s-ig {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888)
}

.s-wa {
  background: #25d366
}

.promoters-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 44px)
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center
}

.about-text .sec-title {
  text-align: left
}

.about-text .kicker {
  margin-bottom: .5rem
}

.about-text .lead {
  color: var(--ink-soft);
  margin: 1rem 0 .8rem;
  font-size: 1.05rem
}

.about-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.2rem
}

.about-points li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem 1.1rem;
  box-shadow: var(--sh-sm);
  font-weight: 600;
  color: var(--ink)
}

.about-points .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cream-3);
  color: var(--saffron-deep);
  display: grid;
  place-items: center;
  flex: none
}

.about-points .ic .icon {
  width: 20px;
  height: 20px
}

.about-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--maroon), var(--maroon-deep));
  aspect-ratio: 4/5;
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
  border: 1px solid rgba(217, 178, 74, .4)
}

.about-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") center/150% no-repeat;
  opacity: .1
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about-media-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #f7e9d8;
  text-align: center;
  padding: 2rem;
  position: relative
}

.about-media-fallback img {
  width: min(220px, 60%)
}

.about-media-fallback span {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-2)
}

/* ---------- Gallery (admin-managed) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 18px)
}

.g-item {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--gold-2);
  aspect-ratio: 4/3;
  background: var(--cream-2);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .2s
}

.g-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh)
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* ---------- Empty states ---------- */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  color: var(--muted);
  padding: 2.4rem 1rem;
  font-weight: 500;
  background: rgba(124, 31, 61, .03);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-lg)
}

.muted-copy {
  color: var(--muted);
  font-style: italic
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--maroon-deep), #40091d);
  color: #e9d8c8
}

.footer-toran {
  height: 22px;
  background: var(--maroon-deep) url("../assets/toran.svg") repeat-x center/auto 96px;
  background-position: center -2px;
  opacity: .9
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-block: clamp(38px, 6vw, 60px)
}

.footer-brand .brand {
  margin-bottom: 1rem
}

.footer-brand .brand-text,
.footer-brand .brand-text small {
  color: #fff
}

.footer-brand p {
  font-size: .92rem;
  opacity: .8;
  line-height: 1.7
}

.socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.1rem
}

.soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: transform .15s, background .2s;
  border: 1px solid rgba(217, 178, 74, .25)
}

.soc .icon {
  width: 18px;
  height: 18px
}

.soc:hover {
  transform: translateY(-3px)
}

.soc-fb:hover {
  background: #1877f2
}

.soc-ig:hover {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888)
}

.soc-wa:hover {
  background: #25d366
}

.footer-col h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--gold-2)
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  opacity: .82;
  padding: .3rem 0;
  transition: .15s
}

.footer-col a:hover {
  opacity: 1;
  color: var(--gold-2);
  transform: translateX(3px)
}

.footer-col .icon {
  width: 1em;
  height: 1em;
  flex: none
}

.footer-note {
  font-size: .86rem;
  opacity: .7;
  margin-top: .6rem;
  line-height: 1.6
}

.footer-bottom {
  border-top: 1px solid rgba(217, 178, 74, .2);
  padding-block: 1.1rem;
  text-align: center;
  font-size: .88rem;
  opacity: .85
}

.footer-bottom .devotion {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--gold-2)
}

.footer-bottom .devotion .icon {
  width: .95em;
  height: .95em;
  color: #e25563
}

/* ---------- Modals ---------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none
}

.modal-root.open {
  display: grid;
  place-items: center;
  padding: 12px
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 8, 22, .6);
  backdrop-filter: blur(4px);
  animation: fade .2s ease
}

.modal {
  position: relative;
  z-index: 2;
  background: var(--cream);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  width: min(560px, 100%);
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(16px, 4vw, 40px);
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px rgba(217, 178, 74, .4), var(--sh-lg);
  animation: pop .25s cubic-bezier(.2, .9, .3, 1.1)
}

.modal-wide {
  width: min(940px, 100%)
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: .15s
}

.modal-close .icon {
  width: 22px;
  height: 22px
}

.modal-close:hover {
  background: rgba(124, 31, 61, .08);
  color: var(--maroon)
}

.modal-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--maroon);
  padding-right: 2rem
}

.modal-desc {
  color: var(--ink-soft);
  margin: .35rem 0 1.3rem
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ---------- Forms ---------- */
.site-form .mini-head,
.anna-cart .mini-head {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--maroon);
  margin: 1.2rem 0 .7rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.mini-head .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--saffron);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 700;
  flex: none
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1rem;
  min-width: 0
}

.field-grid .col-2 {
  grid-column: 1/-1
}

.site-form label,
#modal-location label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 0
}

.site-form input,
.site-form select,
#modal-location input,
#modal-location select,
.site-form textarea {
  font-family: inherit;
  font-size: .96rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  transition: border .15s, box-shadow .15s
}

.site-form input:focus,
.site-form select:focus,
#modal-location input:focus,
#modal-location select:focus,
.site-form textarea:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(233, 130, 27, .15)
}

.site-form input:invalid:not(:placeholder-shown) {
  border-color: #d05a5a
}

.radio-field {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-top: 1rem
}

.radio-field legend {
  font-size: .82rem;
  font-weight: 700;
  color: var(--maroon);
  padding: 0 .4rem
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: 1.4rem;
  font-weight: 600
}

.radio input {
  width: auto
}

/* OTP */
.otp-block {
  margin-top: 1.2rem
}

.otp-inner {
  background: #fffdf6;
  border: 1.5px solid var(--gold-2);
  border-radius: 12px;
  padding: clamp(10px, 2.5vw, 17.6px);
  text-align: center;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35)
}

.otp-inner p {
  font-size: .86rem;
  color: var(--ink-soft);
  margin-bottom: .7rem
}

/* ad / video slot shown while verifying OTP */
.otp-ad {
  margin: 0 0 .9rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gold-2)
}

.otp-ad video {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: cover;
  background: #000
}

.otp-ad-splash {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  text-align: left;
  background: linear-gradient(180deg, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright)
}

.otp-ad-splash .oa-emblem {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep))
}

.otp-ad-splash .oa-emblem img {
  width: 26px;
  height: 26px
}

.otp-ad-splash .oa-copy {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  line-height: 1.3
}

.otp-ad-splash .oa-copy b {
  font-family: var(--f-display);
  font-size: 1rem
}

.otp-ad-splash .oa-copy span {
  font-size: .82rem;
  color: #eed9b4
}

.otp-digits {
  display: flex;
  gap: clamp(4px, 1.2vw, 8px);
  justify-content: center
}

.otp-digits input {
  width: clamp(30px, 11vw, 46px);
  min-width: 0;
  text-align: center;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  font-weight: 700;
  padding: .55rem 0
}

.otp-send {
  margin-top: .7rem
}

/* Cart */
.anna-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: start
}

.anna-cart {
  background: #fff;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 1.3rem;
  position: sticky;
  top: 0
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: var(--cream-2)
}

.cart-item-name {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.15;
  color: var(--ink)
}

.cart-item-price {
  font-size: .78rem;
  color: var(--muted)
}

.qty {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: none
}

.qty button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--cream-3);
  font-weight: 800;
  color: var(--maroon);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: .15s
}

.qty button:hover {
  background: var(--saffron);
  color: #fff
}

.qty span {
  min-width: 22px;
  text-align: center;
  font-weight: 700
}

.combo-row {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem
}

.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--gold-line);
  font-family: var(--f-display)
}

.cart-total b {
  font-size: 1.6rem;
  color: var(--saffron-deep)
}

/* Info popup */
.info-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem
}

.info-avatar {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  background: linear-gradient(150deg, var(--maroon-2), var(--maroon-deep))
}

.info-head h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--maroon)
}

.info-head .sub {
  color: var(--muted);
  font-size: .9rem
}

.info-rows {
  display: flex;
  flex-direction: column
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .96rem
}

.info-row span:first-child {
  color: var(--muted)
}

.info-row span:last-child {
  font-weight: 600;
  text-align: right
}

.info-badge {
  display: inline-block;
  background: var(--maroon);
  color: var(--gold-2);
  font-weight: 700;
  padding: .28em 1em;
  border-radius: var(--pill);
  font-size: .85rem
}

/* Share — equal themed channel tiles + tidy copy row */
.share-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1.3rem
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 0;
  padding: 1rem .5rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--maroon);
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .28);
  transition: transform .15s, box-shadow .2s
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .5), var(--sh-sm)
}

.share-btn .share-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(20, 2, 9, .25)
}

.share-btn .share-ic .icon {
  width: 22px;
  height: 22px
}

.share-wa .share-ic {
  background: #25d366
}

.share-fb .share-ic {
  background: #1877f2
}

.share-tw .share-ic {
  background: #1a1a1a
}

.copy-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: .45rem
}

.copy-row {
  display: flex;
  gap: .5rem;
  align-items: stretch
}

.copy-row input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--gold-2);
  border-radius: 10px;
  padding: .72rem .9rem;
  font-size: .85rem;
  background: #fffdf6;
  color: var(--ink-soft)
}

.copy-row .btn {
  flex: none;
  white-space: nowrap
}

@media (max-width:420px) {
  .copy-row {
    flex-direction: column
  }

  .copy-row .btn {
    width: 100%
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0;
  pointer-events: none;
  background: var(--maroon);
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  padding: 1.05rem 1.7rem;
  border-radius: 16px;
  box-shadow: var(--sh-lg);
  z-index: 200;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.1), opacity .25s ease;
  max-width: min(90vw, 420px);
  text-align: center;
  line-height: 1.4;
  border: 1px solid rgba(217, 178, 74, .4)
}

.toast.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1
}

/* dim + blur the page behind a centered popup */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 2, 9, .22);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease
}

body.toast-open::before {
  opacity: 1
}

.toast.ok {
  background: #1f7a3f
}

.toast.err {
  background: #a52828
}

/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--saffron);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .2s, background .2s
}

.to-top .icon {
  width: 22px;
  height: 22px
}

.to-top.show {
  opacity: 1;
  pointer-events: auto
}

.to-top:hover {
  transform: translateY(-3px);
  background: var(--saffron-deep)
}

/* ---------- Trust chips ---------- */
.trust-chips {
  display: flex;
  justify-content: center;
  gap: clamp(.6rem, 2vw, 1.1rem);
  flex-wrap: wrap;
  margin: -6px auto clamp(24px, 4vw, 40px)
}

.tchip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--maroon);
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--pill);
  padding: .45rem 1rem .45rem .5rem;
  box-shadow: var(--sh-sm)
}

.tchip-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright);
  flex: none;
  box-shadow: inset 0 0 0 2px rgba(217, 178, 74, .55)
}

.tchip-ic .icon {
  width: 16px;
  height: 16px
}

/* ---------- Contest timeline band ---------- */
.timeline-band {
  max-width: 1000px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3.5vw, 34px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35), var(--sh-sm)
}

.timeline-band:empty {
  display: none
}

.tl-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--maroon);
  margin-bottom: 1rem
}

.tl-head .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--saffron-deep)
}

.tl-steps {
  display: flex;
  align-items: stretch;
  gap: .6rem
}

.tl-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem
}

.tl-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright);
  margin-bottom: .35rem;
  box-shadow: inset 0 0 0 2.5px var(--gold-2)
}

.tl-ic .icon {
  width: 20px;
  height: 20px
}

.tl-step b {
  font-size: .88rem;
  color: var(--maroon);
  line-height: 1.25
}

.tl-date {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink)
}

.tl-time {
  font-size: .8rem;
  color: var(--muted)
}

.tl-dots {
  flex: none;
  align-self: center;
  width: clamp(20px, 4vw, 54px);
  border-top: 2px dotted var(--gold-2);
  margin-top: -30px
}

/* ---------- Voting ---------- */
.vote {
  max-width: 1000px;
  margin-inline: auto
}

.vote-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: clamp(20px, 3vw, 32px)
}

.vote-slot {
  background: linear-gradient(180deg, #fff, var(--cream-2));
  border: 1.5px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1rem;
  text-align: center;
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem
}

.vote-slot .medal {
  width: 40px;
  height: 40px
}

.vote-slot .slot-rank {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon)
}

.vote-slot .slot-name {
  font-weight: 700;
  color: var(--ink)
}

.vote-slot .slot-empty {
  color: var(--muted);
  font-size: .9rem
}

.vote-slot.filled {
  border-color: var(--saffron);
  box-shadow: var(--sh-sm)
}

.vote-slot .slot-clear {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%
}

.vote-slot .slot-clear:hover {
  background: rgba(124, 31, 61, .08);
  color: var(--maroon)
}

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px)
}

.vote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .2s
}

.vote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh)
}

.vote-card .vc-photo {
  aspect-ratio: 16/10;
  background: var(--cream-2);
  overflow: hidden;
  position: relative
}

.vote-card .vc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.vc-plaque {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  border: 1px solid var(--gold-2);
  border-radius: 9px;
  padding: .3em .7em;
  box-shadow: inset 0 0 0 2px rgba(94, 19, 44, .9), inset 0 0 0 3px rgba(217, 178, 74, .5), 0 4px 10px rgba(20, 2, 9, .4)
}

.vote-card .vc-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1
}

.vote-card .vc-id {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted)
}

.vote-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.15
}

.vote-card .vc-loc {
  font-size: .85rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .35rem
}

.vote-card .vc-loc .icon {
  width: 1em;
  height: 1em;
  color: var(--saffron-deep)
}

.vc-ranks {
  display: flex;
  gap: .4rem;
  margin-top: .7rem
}

.vc-ranks button {
  flex: 1;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .82rem;
  padding: .5rem .3rem;
  border-radius: 9px;
  border: 1.5px solid var(--gold-2);
  color: var(--maroon);
  background: #fff;
  transition: .15s
}

.vc-ranks button:hover {
  border-color: var(--sun-deep);
  background: #fff8e2
}

.vc-ranks button.active {
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  border-color: var(--sun-deep);
  color: var(--maroon-deep);
  box-shadow: inset 0 1px 0 rgba(255, 244, 205, .8)
}

.vote-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(251, 243, 226, .4), var(--cream));
  padding: 1rem 1.2rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm)
}

.vote-status {
  font-weight: 600;
  color: var(--ink-soft)
}

.vote-status.ready {
  color: var(--leaf)
}

.vote-summary {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.2rem
}

.vote-summary .vs-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .9rem
}

.vote-summary .medal {
  width: 30px;
  height: 30px;
  flex: none
}

.vote-summary b {
  font-family: var(--f-display);
  color: var(--maroon)
}

/* ---------- Committee photo (list card) ---------- */
.committee-card .cc-photo {
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: .9rem
}

.committee-card .cc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* ---------- File input ---------- */
.site-form input[type="file"] {
  padding: .55rem .7rem;
  background: #fff;
  font-size: .86rem;
  color: var(--ink-soft);
  cursor: pointer
}

.site-form input[type="file"]::file-selector-button {
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  margin-right: .7rem;
  padding: .4rem .9rem;
  border-radius: 8px;
  border: none;
  background: var(--cream-3);
  color: var(--maroon);
  cursor: pointer
}

.site-form input[type="file"]::file-selector-button:hover {
  background: var(--saffron);
  color: #fff
}

/* reCAPTCHA host: fixed offscreen anchor while invisible; normal flow once
   moved into a form's .otp-captcha for the visible checkbox fallback */
body>#recaptcha-container {
  position: fixed;
  bottom: 0;
  left: 0
}

.otp-captcha:not(:empty) {
  display: flex;
  justify-content: center;
  margin-top: .7rem
}

/* ---------- Mandatory video overlay ---------- */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(46, 8, 22, .82);
  backdrop-filter: blur(6px)
}

.video-overlay.show {
  display: grid
}

.video-box {
  width: min(720px, 100%);
  background: #120309;
  border: 1px solid rgba(217, 178, 74, .4);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg)
}

.video-stage {
  aspect-ratio: 16/9;
  background: linear-gradient(150deg, var(--maroon), var(--maroon-deep));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden
}

.video-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000
}

.video-splash {
  text-align: center;
  color: #f7e9d8;
  position: relative;
  padding: 2rem
}

.video-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") center/120% no-repeat;
  opacity: .12
}

.vs-emblem {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  animation: vspin 8s linear infinite;
  position: relative
}

@keyframes vspin {
  to {
    transform: rotate(360deg)
  }
}

.vs-title {
  font-family: var(--f-accent);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--gold-2);
  position: relative
}

.vs-sub {
  font-family: var(--f-display);
  font-style: italic;
  opacity: .85;
  margin-top: .4rem;
  position: relative
}

.video-progress {
  height: 5px;
  background: rgba(255, 255, 255, .12)
}

.video-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--marigold), var(--gold-2));
  transition: width .12s linear
}

.video-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.2rem;
  color: #e9d8c8;
  background: #1c060f
}

.video-foot #videoNote {
  font-size: .92rem;
  opacity: .85
}

/* ============================================================ RESPONSIVE */
@media (max-width:960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center
  }

  .hero-tags,
  .hero-cta {
    justify-content: center
  }

  .prize-plaque {
    margin-inline: auto
  }

  .hero-art {
    order: -1;
    padding: .6rem;
    margin-bottom: .8rem
  }

  .hero-art::before {
    width: min(250px, 66vw)
  }

  .hero-art img {
    width: min(190px, 50vw)
  }

  .tl-steps {
    flex-direction: column;
    gap: 1.1rem
  }

  .tl-dots {
    display: none
  }

  .tl-step {
    flex-direction: row;
    text-align: left;
    gap: .8rem;
    align-items: center;
    flex-wrap: wrap
  }

  .tl-ic {
    margin-bottom: 0
  }

  .tl-step b {
    flex: 1 1 130px
  }

  .about-grid {
    grid-template-columns: 1fr
  }

  .about-media {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 4/3
  }

  .about-text .sec-title {
    text-align: center
  }

  .about-text .kicker {
    display: flex;
    justify-content: center
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .anna-layout {
    grid-template-columns: 1fr
  }

  .anna-cart {
    position: static
  }
}

@media (max-width:780px) {
  .nav-links {
    position: fixed;
    top: 68px;
    right: 0;
    width: min(300px, 82vw);
    height: calc(100dvh - 68px);
    background: linear-gradient(180deg, var(--velvet), var(--velvet-deep));
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    padding: 1.3rem;
    box-shadow: var(--sh-lg);
    transform: translateX(105%);
    transition: transform .28s ease;
    z-index: 59;
    border-left: 1.5px solid var(--gold-2)
  }

  .nav-links.open {
    transform: translateX(0)
  }

  .nav-links a {
    padding: .9rem .4rem;
    border-bottom: 1px solid rgba(217, 178, 74, .22)
  }

  .nav-links a::after {
    display: none
  }

  .nav-links .btn {
    margin-top: 1rem
  }

  .hamburger {
    display: flex
  }

  /* single landing page: no drawer needed — one-tap Register instead */
  body.single-view .hamburger {
    display: none
  }

  body.single-view .nav-register-mobile {
    display: inline-flex
  }

  .seva-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .actions {
    grid-template-columns: repeat(2, 1fr);
    max-width: 440px
  }
}

@media (max-width:560px) {
  .field-grid {
    grid-template-columns: 1fr
  }

  .field-grid .col-2 {
    grid-column: auto
  }

  .podium {
    grid-template-columns: 1fr;
    max-width: 380px
  }

  .rank-1 {
    transform: none
  }

  .rank-1:hover {
    transform: translateY(-6px)
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .share-row {
    flex-direction: column
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch
  }

  .vote-slots {
    grid-template-columns: 1fr
  }

  .vote-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center
  }

  .vote-bar .btn {
    width: 100%
  }

  /* compact brand so it sits beside the Register button */
  .brand img {
    width: 36px;
    height: 36px
  }

  .brand-text {
    font-size: .92rem
  }

  .brand-text small {
    font-size: .54rem;
    letter-spacing: .1em
  }

  .nav {
    gap: .5rem
  }

  /* right-size the hero for small screens */
  .hero {
    padding-top: 22px
  }

  .hero-title .ht-1,
  .hero-title .ht-2 {
    font-size: clamp(2rem, 8.6vw, 2.9rem)
  }

  .hero-kicker {
    font-size: .72rem;
    letter-spacing: .18em
  }

  .prize-plaque {
    width: 100%;
    gap: .7rem;
    padding: .8rem 1rem
  }

  /* tighter section rhythm + card padding on phones */
  .section {
    padding: 34px 0
  }

  .sec-head {
    margin-bottom: 24px
  }

  .focus-card,
  .support-card {
    padding: 22px 1.2rem
  }

  .supporter-card {
    padding: 1rem .7rem .95rem
  }

  .page-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem)
  }
}

@media (max-width:380px) {
  .seva-stats {
    grid-template-columns: 1fr 1fr
  }

  .donor-grid {
    grid-template-columns: 1fr
  }
}

/* profile moved out of the panel and into the top overlay */
.reel-profile {
  position: absolute;
  top: 13px;
  right: 12px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  background: rgba(30, 4, 14, .62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 178, 74, .5)
}

.reel-profile:hover {
  background: rgba(124, 31, 61, .85)
}

.reel-profile .icon {
  width: 15px;
  height: 15px
}

/* the photo-count chip and the ranked ribbon share that corner */
.reel-count {
  right: 50px
}

.reel-item.is-ranked .reel-profile {
  top: 50px
}

.reel-item.is-ranked .reel-count {
  top: 50px;
  right: 50px
}

/* Short phones. The reel's height is fixed by --chrome (which is sized so the
   rank buttons clear the sticky vote bar — do not shrink that here), so the
   only way to give the photo more room is to take it from the panel. */
@media (max-height:780px) {
  .reel-info {
    padding-top: 1.7rem;
    gap: .2rem
  }

  .reel-info .vc-votes {
    display: none
  }
}

@media (max-height:700px) {
  .reel-info {
    padding: 1.4rem .85rem .6rem
  }

  .reel-info h3 {
    font-size: 1.02rem
  }

  .reel-info .vc-loc {
    font-size: .78rem
  }

  .reel-info .vc-ranks button {
    padding: .46rem .3rem;
    font-size: .78rem
  }

  .reel-dots {
    margin-bottom: .25rem
  }

  .reel-near {
    margin-bottom: .2rem;
    font-size: .6rem;
    padding: .22em .6em
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important
  }
}

/* ============================================================
   SEGMENTED VIEWS + DARK "TEMPLE" THEME  (2026 rebuild)
   Appended last so it overrides earlier rules by source order.
   ============================================================ */
:root {
  --page: #3B0A1A;
  --page-2: #511026;
}

body {
  color: #f3e3c8;
  background:
    radial-gradient(ellipse 70% 40% at 80% 6%, rgba(245, 166, 35, .10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 30%, rgba(154, 42, 78, .30), transparent 65%),
    linear-gradient(180deg, var(--page-2), var(--page) 40%, #2E0714);
  background-attachment: fixed;
}

/* view router: only the active view is in flow */
[hidden] {
  display: none !important
}

.view[hidden] {
  display: none !important
}

/* launch-gated single-page mode: no bottom nav, no reserved space for it */
body.single-view {
  padding-bottom: 0
}

.view {
  animation: viewin .32s ease
}

@keyframes viewin {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* headings on dark */
.sec-title {
  color: var(--gold-bright)
}

.sec-title em {
  color: var(--sun)
}

.kicker {
  color: var(--sun)
}

.kicker::before,
.kicker::after {
  background: var(--gold-2)
}

.sec-sub {
  color: #e9d8c8
}

.section {
  padding: clamp(40px, 6vw, 72px) 0
}

.section-tint {
  background: transparent;
  border: none
}

.empty-state {
  background: rgba(255, 255, 255, .05);
  border-color: var(--gold-line);
  color: #e9d8c8
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem
}

/* nav active state */
.nav-link.active {
  color: var(--sun)
}

.nav-link.active::after {
  width: 100%
}

/* page heads for inner views */
.page-head {
  position: relative;
  padding: clamp(26px, 5vw, 52px) 0 clamp(20px, 3vw, 28px);
  text-align: center;
  background: radial-gradient(ellipse 80% 100% at 50% 0, rgba(245, 166, 35, .12), transparent 60%);
  border-bottom: 1px solid var(--gold-line)
}

.page-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  margin-top: .3rem;
  background: linear-gradient(180deg, #F7E3A5, var(--sun) 60%, #C88F1F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.page-sub {
  max-width: 640px;
  margin: .7rem auto 0;
  color: #e9d8c8;
  font-size: 1.05rem
}

.page-sub sup {
  color: var(--sun)
}

.prize-banner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  font-family: var(--f-display);
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  border: 1.5px solid var(--gold-2);
  border-radius: 14px;
  padding: .6rem 1.3rem;
  box-shadow: inset 0 0 0 3px rgba(94, 19, 44, .9), inset 0 0 0 4px rgba(217, 178, 74, .5)
}

.prize-banner b {
  color: var(--sun);
  font-size: 1.5rem;
  margin: 0 .1rem
}

.prize-banner .pp-trophy {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep));
  color: var(--maroon-deep)
}

.prize-banner .pp-trophy .icon {
  width: 20px;
  height: 20px
}

/* focus pillars (home) */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 24px);
  margin-bottom: clamp(30px, 4vw, 44px)
}

.focus-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 30px) 1.3rem;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35), 0 14px 30px rgba(20, 2, 9, .32)
}

/* emphasise the featured pillar without breaking the row baseline */
.focus-card.featured {
  background: linear-gradient(180deg, #fff8e6, #fdeecb);
  border-color: var(--sun-deep);
  box-shadow: inset 0 0 0 3px #fff8e6, inset 0 0 0 4px rgba(224, 172, 40, .6), 0 16px 34px rgba(20, 2, 9, .4)
}

.focus-card .focus-ic {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  box-shadow: inset 0 0 0 2.5px var(--gold-2)
}

.focus-card .focus-ic .icon {
  width: 32px;
  height: 32px
}

.focus-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.25rem
}

.focus-card p {
  color: var(--ink-soft);
  font-size: .95rem;
  flex: 1
}

.focus-card .btn {
  margin-top: .4rem
}

@media (max-width:820px) {
  .focus-grid {
    grid-template-columns: 1fr
  }

  .focus-card.featured {
    transform: none
  }
}

/* contest info cards */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
  margin-bottom: clamp(30px, 4vw, 48px)
}

.info-card {
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .3), var(--sh-sm)
}

.info-card .info-ic {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: .7rem;
  color: var(--gold-bright);
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  box-shadow: inset 0 0 0 2px var(--gold-2)
}

.info-card .info-ic .icon {
  width: 26px;
  height: 26px
}

.info-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.2rem;
  margin-bottom: .3rem
}

.info-card p {
  color: var(--ink-soft);
  font-size: .95rem
}

@media (max-width:820px) {
  .info-cards {
    grid-template-columns: 1fr
  }
}

/* voting info row (contest) */
.voteinfo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px)
}

.voteinfo {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem
}

.voteinfo b {
  color: #f6e7cd;
  font-family: var(--f-body);
  font-weight: 700
}

.voteinfo .vi-ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--maroon-deep);
  background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep))
}

.voteinfo .vi-ic .icon {
  width: 22px;
  height: 22px
}

@media (max-width:820px) {
  .voteinfo-grid {
    grid-template-columns: 1fr
  }
}

/* CTA band */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px);
  background: linear-gradient(150deg, var(--maroon), var(--velvet-deep));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3.5vw, 36px);
  box-shadow: inset 0 0 0 4px var(--velvet-deep), inset 0 0 0 5.5px rgba(217, 178, 74, .5)
}

.cta-band h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold-bright)
}

.cta-band p {
  color: #e9d8c8;
  margin-top: .2rem
}

.cta-band-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap
}

/* support cards */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 24px)
}

.support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 32px) 1.4rem;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35), 0 14px 30px rgba(20, 2, 9, .3)
}

.support-card .support-ic {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  box-shadow: inset 0 0 0 3px var(--gold-2);
  overflow: hidden;
  position: relative;
}

.support-card .support-ic .icon {
  width: 34px;
  height: 34px
}

.support-card .support-ic.has-img,
.support-card .support-ic:has(img) {
  padding: 0;
  border: 3px solid var(--gold-2);
  box-shadow: 0 6px 14px rgba(94, 19, 44, .35);
  background: #fdf7ec;
}

.support-card .support-ic img,
.support-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform .25s ease;
}

.support-card:hover .support-img {
  transform: scale(1.08);
}

.support-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.3rem
}

.support-card p {
  color: var(--ink-soft);
  font-size: .95rem;
  flex: 1
}

@media (max-width:820px) {
  .support-grid {
    grid-template-columns: 1fr
  }
}

/* donor &  preview strips (home) */
.donor-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 18px)
}

.-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 16px)
}

@media (max-width:860px) {
  .donor-strip {
    grid-template-columns: repeat(2, 1fr)
  }

  .-strip {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:520px) {
  .-strip {
    grid-template-columns: repeat(2, 1fr)
  }
}

.donor-photo-mono {
  display: grid !important;
  place-items: center;
  background: linear-gradient(150deg, var(--maroon-2), var(--maroon-deep)) !important;
  color: var(--gold-2)
}

.donor-photo-mono .icon {
  width: 26px;
  height: 26px
}

/* promoter tier badge */
.promoter-card {
  position: relative
}

.promoter-tier {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: linear-gradient(180deg, #F7E3A5, var(--sun-deep));
  border-radius: 999px;
  padding: .2em .7em
}

/* rules teaser (home) */
.rules-teaser {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: linear-gradient(150deg, var(--maroon), var(--velvet-deep));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: inset 0 0 0 4px var(--velvet-deep), inset 0 0 0 5.5px rgba(217, 178, 74, .5)
}

.rules-teaser .rt-icon {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--maroon-deep);
  background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep))
}

.rules-teaser .rt-icon .icon {
  width: 28px;
  height: 28px
}

.rules-teaser .rt-text {
  flex: 1 1 220px
}

.rules-teaser h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--gold-bright);
  font-size: 1.3rem
}

.rules-teaser p {
  color: #e9d8c8
}

/* results teaser */
.results-teaser {
  max-width: 600px;
  margin: clamp(40px, 6vw, 72px) auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(30px, 5vw, 52px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .35), var(--sh)
}

.results-teaser .rt-emblem {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  background: radial-gradient(circle, rgba(245, 197, 66, .18), transparent 70%)
}

.results-teaser .rt-emblem img {
  width: 74px;
  height: 74px;
  margin: 0
}

.results-teaser h2 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  line-height: 1.2
}

.results-teaser p {
  color: var(--ink-soft);
  margin: .7rem 0 1.5rem;
  max-width: 44ch
}

/* browse/vote card extras */
.vc-votes {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--ink-soft);
  margin-top: .15rem
}

.vc-votes .icon {
  width: 1em;
  height: 1em;
  color: var(--maroon-2)
}

.vc-votes b {
  color: var(--maroon);
  font-family: var(--f-display)
}

.vc-actions {
  margin-top: .6rem
}

.vc-details {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .82rem;
  color: var(--maroon);
  border: 1.5px solid var(--gold-2);
  border-radius: 9px;
  padding: .45rem .8rem;
  width: 100%;
  justify-content: center;
  background: #fff;
  transition: .15s
}

.vc-details:hover {
  background: #fff8e2
}

.vc-details .icon {
  width: 15px;
  height: 15px
}

.vc-ranklabel {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
  padding-top: .7rem
}

/* ============ MOBILE BOTTOM NAV ============ */
.bottom-nav {
  display: none
}

@media (max-width:820px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: linear-gradient(180deg, var(--velvet), var(--velvet-deep));
    border-top: 2px solid var(--gold-2);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(20, 2, 9, .4)
  }

  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .66rem;
    font-weight: 700;
    color: #e6cfa6;
    padding: 4px 2px;
    min-height: 52px;
    justify-content: center
  }

  .bn-item .bn-ic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center
  }

  .bn-item .bn-ic .icon {
    width: 20px;
    height: 20px
  }

  .bn-item.active {
    color: var(--sun)
  }

  .bn-item.active .bn-ic {
    background: rgba(245, 197, 66, .14)
  }

  .bn-center .bn-ic {
    background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep));
    color: var(--maroon-deep);
    width: 46px;
    height: 46px;
    margin-top: -16px;
    border: 3px solid var(--velvet-deep);
    box-shadow: 0 4px 12px rgba(20, 2, 9, .5)
  }

  .bn-center.active .bn-ic {
    background: radial-gradient(circle at 32% 28%, #F7E3A5, var(--sun-deep))
  }

  .bn-center {
    color: var(--sun)
  }

  body {
    padding-bottom: 66px
  }

  .to-top {
    bottom: 80px
  }
}

/* hero ribbon — supporters above the fold */
.hero-supporters {
  position: relative;
  z-index: 2;
  margin-top: clamp(16px, 2.5vw, 26px);
  padding-top: clamp(12px, 2vw, 18px);
  border-top: 1px solid var(--gold-line)
}

.hero-supporters[hidden] {
  display: none
}

.hsp-label {
  display: block;
  text-align: center;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: .7rem;
  opacity: .9
}

.hsp-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.hsp-track {
  display: flex;
  gap: .7rem;
  width: max-content;
  animation: hspscroll 38s linear infinite
}

.hero-supporters:hover .hsp-track {
  animation-play-state: paused
}

.hsp-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-weight: 700;
  font-size: .9rem;
  color: #fbeccf;
  background: linear-gradient(180deg, rgba(255, 253, 246, .10), rgba(255, 253, 246, .04));
  border: 1.5px solid var(--gold-2);
  border-radius: 999px;
  padding: .42rem 1rem
}

.hsp-chip em {
  font-style: normal;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: linear-gradient(180deg, #F7E3A5, var(--sun-deep));
  border-radius: 999px;
  padding: .12em .55em;
  margin-left: .15rem
}

.hsp-star {
  display: inline-flex;
  color: var(--sun)
}

.hsp-star .icon {
  width: 14px;
  height: 14px
}

@keyframes hspscroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

@media (prefers-reduced-motion:reduce) {
  .hsp-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center
  }

  .hsp-viewport {
    -webkit-mask-image: none;
    mask-image: none
  }
}

/* unified Donors  showcase */
.supporters-lead {
  padding-top: clamp(30px, 4vw, 48px)
}

.supporter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.8vw, 18px)
}

@media(max-width:1000px) {
  .supporter-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:760px) {
  .supporter-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:460px) {
  .supporter-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* home "Our Donors" — dual-row infinite marquee (row 1 → left, row 2 → right) */
.supporters-lead .supporter-grid {
  display: block;
  grid-template-columns: none;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)
}

.dm-row {
  overflow: hidden;
  padding: 14px 0
}

.dm-row+.dm-row {
  margin-top: 0
}

/* the track holds the row's cards duplicated once (A + A); translating it by
   -50% lands the second copy exactly where the first started → seamless loop.
   spacing lives on each card's margin (not flex gap) so -50% is pixel-exact. */
.dm-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: dmscroll 46s linear infinite
}

.dm-ltr .dm-track {
  animation-direction: reverse
}

.dm-row:hover .dm-track,
.dm-track:focus-within {
  animation-play-state: paused
}

/* marquee cards are horizontal rectangles: emblem on the left, copy stacked
   to its right. a 2-column grid does it without touching the card markup. */
.supporters-lead .supporter-card {
  flex: 0 0 auto;
  width: clamp(248px, 78vw, 320px);
  margin-right: clamp(12px, 1.8vw, 18px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: start;
  column-gap: .85rem;
  row-gap: .22rem;
  text-align: left;
  padding: .95rem 1.05rem
}

.supporters-lead .sup-logo {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 58px;
  height: 58px
}

.supporters-lead .sup-initials {
  font-size: 1.2rem
}

.supporters-lead .sup-tier,
.supporters-lead .supporter-card h3,
.supporters-lead .sup-sub {
  grid-column: 2;
  max-width: 100%
}

.supporters-lead .supporter-card h3 {
  display: block;
  min-height: 0;
  text-align: left;
  font-size: 1rem;
  overflow-wrap: break-word
}

.supporters-lead .sup-sub {
  font-size: .88rem
}

@keyframes dmscroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* respect reduced-motion: stop the marquee, fall back to a manual scroll */
@media (prefers-reduced-motion: reduce) {
  .dm-track {
    animation: none
  }

  .dm-row {
    overflow-x: auto
  }
}

.supporter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  min-width: 0;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-lg);
  padding: 1.2rem .9rem 1.1rem;
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .3), 0 10px 22px rgba(20, 2, 9, .28);
  transition: transform .18s, box-shadow .2s
}

.supporter-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .55), 0 16px 30px rgba(20, 2, 9, .35)
}

.sup-logo {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  background: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  color: var(--gold-bright);
  border: 2px solid var(--gold-2)
}

.sup-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sup-initials {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold-bright)
}

.sup-tier {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: linear-gradient(180deg, #F7E3A5, var(--sun-deep));
  border-radius: 999px;
  padding: .18em .7em
}

.sup-tier .icon {
  width: .85em;
  height: .85em
}

/* fixed name box so tier/amount lines share a baseline across every card */
.supporter-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--maroon);
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center
}

.sup-sub {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--saffron-deep);
  font-size: .95rem
}

.supporter-card {
  justify-content: flex-start
}

/* quality floor: visible gold keyboard focus on every interactive element */
:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px
}

.btn:focus-visible,
.action:focus-visible,
.nav-link:focus-visible,
.bn-item:focus-visible,
.supporter-card:focus-visible,
.donor-card:focus-visible,
.committee-card:focus-visible,
.vc-ranks button:focus-visible,
.vc-details:focus-visible,
.action:focus-visible,
.hsp-chip:focus-visible {
  outline-offset: 3px;
  border-radius: 12px
}

/* remove the low-contrast default focus once a visible ring is in place */
.action:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none
}

/* dark-theme tweaks for existing pieces */
.search-box {
  background: #fffdf6
}

.organizer {
  background: linear-gradient(180deg, #fffdf6, var(--cream))
}

.about-text .sec-title {
  color: var(--gold-bright)
}

.about-points li {
  background: rgba(255, 255, 255, .94)
}

/* ============================================================
   Annaprasadam 3-step wizard + readable cart + clickable ads
   ============================================================ */
.anna-cart {
  background: transparent;
  border: none;
  padding: 0;
  position: static
}

.cart-items {
  gap: .5rem
}

.cart-item {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .65rem .8rem
}

.cart-item.in-cart {
  border-color: var(--gold-2);
  background: linear-gradient(180deg, #fffdf6, var(--cream))
}

.cart-item-info {
  min-width: 0
}

.cart-item-name {
  color: var(--ink);
  font-weight: 700
}

.cart-item-price {
  color: var(--saffron-deep);
  font-weight: 700
}

.qty {
  gap: .5rem
}

.qty button {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--gold-line);
  background: #fff;
  color: var(--maroon)
}

.qty button:hover {
  background: var(--saffron);
  color: #fff;
  border-color: var(--saffron)
}

.qty span {
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #1a1a1a
}

.cart-total b {
  color: var(--saffron-deep)
}

/* step indicator */
.stepper {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0
}

.stepper li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  padding: .5rem .3rem;
  border-bottom: 2.5px solid var(--line);
  text-align: center
}

.stepper li .st-n {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream-3);
  color: var(--muted);
  font-size: .78rem;
  flex: none;
  font-family: var(--f-body)
}

.stepper li.active {
  color: var(--maroon);
  border-bottom-color: var(--saffron)
}

.stepper li.active .st-n {
  background: var(--saffron);
  color: #fff
}

.stepper li.done {
  color: var(--leaf);
  border-bottom-color: var(--leaf)
}

.stepper li.done .st-n {
  background: var(--leaf);
  color: #fff
}

/* step navigation */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-top: 1.4rem
}

.step-nav-end {
  justify-content: flex-end
}

.step-nav .btn {
  min-width: 130px
}

.anna-step[hidden],
.wiz-step[hidden] {
  display: none !important
}

/* "use my current location" button on address steps */
.use-loc {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: -.2rem 0 .2rem;
  padding: .5em 1em;
  border-radius: var(--pill);
  background: rgba(184, 137, 46, .1);
  border: 1.5px solid var(--gold-2);
  color: var(--maroon);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .86rem;
  cursor: pointer;
  transition: background .2s, color .2s
}

.use-loc:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

.use-loc[disabled] {
  opacity: .65;
  cursor: default
}

.use-loc .icon {
  width: 1.05em;
  height: 1.05em
}

/* freeze background scroll while a popup / modal is open (#11) */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden !important
}

/* location section at the top of a wizard step */
.loc-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFF6E0, var(--cream-2));
  border: 1px dashed var(--gold-2)
}

.loc-bar .use-loc {
  margin: 0
}

.loc-hint {
  font-size: .82rem;
  color: var(--ink-soft)
}

/* add-a-child (#12) */
.children-block {
  margin: .2rem 0 .5rem
}

.children-block .cb-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .4rem
}

.children-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .55rem
}

.child-row {
  display: flex;
  gap: .5rem;
  align-items: center
}

.child-row input {
  flex: 1
}

.child-del {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--gold-line);
  background: #fff;
  color: var(--maroon);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer
}

.child-del:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

.add-child {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em 1em;
  border-radius: var(--pill);
  background: rgba(184, 137, 46, .1);
  border: 1.5px solid var(--gold-2);
  color: var(--maroon);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer
}

.add-child:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

.add-child .icon {
  width: 1em;
  height: 1em
}

/* committee members — name + phone rows (reuses the children-block look) */
.members-block {
  margin: .2rem 0 .5rem
}

.members-block .cb-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .4rem
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .55rem
}

.member-row {
  display: flex;
  gap: .5rem;
  align-items: center
}

.member-row input:first-child {
  flex: 1.5
}

.member-row input:nth-child(2) {
  flex: 1
}

.member-del {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--gold-line);
  background: #fff;
  color: var(--maroon);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer
}

.member-del:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

.add-member {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em 1em;
  border-radius: var(--pill);
  background: rgba(184, 137, 46, .1);
  border: 1.5px solid var(--gold-2);
  color: var(--maroon);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer
}

.add-member:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon)
}

.add-member .icon {
  width: 1em;
  height: 1em
}

@media (max-width:460px) {
  .member-row {
    flex-wrap: wrap
  }

  .member-row input:first-child {
    flex: 1 1 100%
  }
}

/* Instagram share button (#16) */
.share-ig .share-ic {
  background: linear-gradient(135deg, #FEDA75, #D62976 45%, #4F5BD5);
  color: #fff
}

/* share QR block (#17) */
.share-qr {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line)
}

.share-qr>img {
  width: 112px;
  height: 112px;
  flex: none;
  border-radius: 10px;
  border: 1.5px solid var(--gold-2);
  background: #fff;
  padding: 6px
}

.share-qr-copy {
  min-width: 0
}

.share-qr-copy b {
  font-family: var(--f-display);
  color: var(--maroon);
  font-size: 1rem
}

.share-qr-copy p {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: .2rem 0 .6rem
}

.share-qr-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.share-ad {
  margin-top: 1.1rem
}

/* spread-the-word: contest QR + share (#10) */
.spread-card {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .3), var(--sh-lg)
}

.spread-qr {
  flex: none
}

.spread-qr img {
  width: clamp(140px, 22vw, 180px);
  height: clamp(140px, 22vw, 180px);
  border-radius: 14px;
  border: 1.5px solid var(--gold-2);
  background: #fff;
  padding: 8px
}

.spread-copy {
  min-width: 0
}

.spread-copy h3 {
  font-family: var(--f-display);
  color: var(--maroon);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: .4rem
}

.spread-copy p {
  color: var(--ink-soft);
  margin-bottom: 1rem
}

.spread-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap
}

@media (max-width:620px) {
  .spread-card {
    flex-direction: column;
    text-align: center
  }

  .spread-actions {
    justify-content: center
  }
}

@media (max-width:520px) {
  .stepper li {
    font-size: 0;
    gap: 0;
    padding: .5rem .2rem
  }

  .stepper li .st-n {
    font-size: .8rem;
    margin: 0 auto
  }

  .step-nav .btn {
    min-width: 0;
    flex: 1
  }
}

/* clickable  ads in the hero ribbon */
.hsp-chip {
  cursor: pointer
}

.hsp-chip:hover {
  border-color: var(--sun);
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 253, 246, .16), rgba(255, 253, 246, .06))
}

.hero-supporters:focus-within .hsp-track {
  animation-play-state: paused
}

/* ============================================================
   INNER PAGES — Contest · Vote · Support · Results
   A room of the same temple for each page: velvet head with mandala
   corners, one dark engraved plaque as the centrepiece, cream cards
   mounted like framed prints. Appended last so it wins by source order.
   ============================================================ */
:root {
  --gap-block: clamp(48px, 7vw, 88px);
  --plaque-bg: linear-gradient(150deg, var(--maroon), var(--velvet-deep));
  --plaque-ring: inset 0 0 0 4px var(--velvet-deep), inset 0 0 0 5.5px rgba(217, 178, 74, .5);
  --card-bg: linear-gradient(180deg, #fffdf6, var(--cream));
  --card-ring: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(217, 178, 74, .3);
  --glass: rgba(255, 253, 246, .06);
  --gold-sun: linear-gradient(180deg, #F7E3A5, var(--sun-deep));
  --maroon-orb: radial-gradient(circle at 32% 26%, var(--maroon-2), var(--maroon-deep));
  --medal-1: #E7C56A;
  --medal-2: #D8D8D8;
  --medal-3: #E3A977;
}

/* ---------- page head: the velvet arch ---------- */
.page-head {
  overflow: hidden;
  padding: clamp(30px, 5vw, 56px) 0 clamp(26px, 3.5vw, 38px);
  border-bottom: 2px solid var(--gold-2);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0, rgba(245, 166, 35, .16), transparent 58%),
    radial-gradient(ellipse 50% 50% at 8% 100%, rgba(154, 42, 78, .45), transparent 60%),
    linear-gradient(165deg, var(--velvet-2), var(--velvet) 45%, var(--velvet-deep));
  box-shadow: 0 12px 30px rgba(20, 2, 9, .28)
}

.ph-ornate::before,
.ph-ornate::after {
  content: "";
  position: absolute;
  width: min(320px, 40vw);
  aspect-ratio: 1;
  background: url("../assets/mandala-corner.svg") no-repeat center/contain;
  opacity: .14;
  pointer-events: none;
  z-index: 0
}

.ph-ornate::before {
  top: -46%;
  left: -7%
}

.ph-ornate::after {
  bottom: -50%;
  right: -7%
}

.page-head .container {
  position: relative;
  z-index: 1
}

.page-head .hero-kicker {
  color: var(--gold-2)
}

.page-head .rule {
  margin-top: .85rem
}

.page-sub {
  margin-top: .8rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.55
}

.ph-plaques {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.15rem
}

.ph-plaques .prize-banner {
  margin-top: 0
}

/* phase ribbon — where we are in the festival calendar */
.phase-ribbon {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem .55rem .85rem;
  border-radius: var(--pill);
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  font-weight: 700;
  font-size: .88rem;
  color: #f6e7cd;
  line-height: 1;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center
}

.phase-ribbon:empty {
  display: none
}

.pr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 3px rgba(47, 125, 78, .28);
  flex: none
}

.phase-ribbon.is-voting .pr-dot {
  background: #E4553F;
  box-shadow: 0 0 0 3px rgba(228, 85, 63, .3);
  animation: prpulse 1.6s ease-in-out infinite
}

.phase-ribbon.is-closed .pr-dot,
.phase-ribbon.is-prevote .pr-dot {
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .28)
}

.pr-detail {
  color: #e6cfa6;
  font-weight: 600
}

.pr-sep {
  width: 1px;
  height: 14px;
  background: var(--gold-line)
}

.pr-count {
  color: var(--sun);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .95rem
}

@media (max-width:560px) {
  .phase-ribbon {
    border-radius: 16px;
    padding: .6rem 1rem;
    row-gap: .3rem
  }

  .pr-sep {
    display: none
  }

  .pr-count {
    flex-basis: 100%;
    text-align: center
  }
}

@keyframes prpulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(228, 85, 63, .3)
  }

  50% {
    box-shadow: 0 0 0 6px rgba(228, 85, 63, .12)
  }
}

/* ---------- inner page rhythm ---------- */
.inner-page {
  padding-top: clamp(34px, 4.5vw, 56px);
  padding-bottom: clamp(52px, 7vw, 92px)
}

.inner-page .block {
  margin-top: var(--gap-block)
}

.inner-page>.block:first-child {
  margin-top: 0
}

.inner-page .cta-band {
  margin-top: var(--gap-block)
}

.inner-page .sec-head {
  margin-bottom: clamp(24px, 3.5vw, 40px)
}

.cta-band {
  box-shadow: var(--plaque-ring), var(--sh-lg)
}

/* ============ CONTEST ============ */
/* the calendar: a thread of diyas */
.calendar {
  position: relative;
  overflow: hidden;
  background: var(--plaque-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
  box-shadow: var(--plaque-ring), var(--sh-lg)
}

.calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") no-repeat right -90px bottom -90px/320px;
  opacity: .1;
  pointer-events: none
}

.calendar[hidden] {
  display: none
}

.cal-thread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: clamp(12px, 2.5vw, 28px)
}

/* the gold thread runs between diya centres; the lit part reaches the current date */
.cal-line {
  position: absolute;
  left: calc(100% / (var(--n, 3) * 2));
  right: calc(100% / (var(--n, 3) * 2));
  top: 33px;
  height: 2px;
  background: rgba(217, 178, 74, .28);
  z-index: 0
}

.cal-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cal-fill, 0%);
  background: linear-gradient(90deg, var(--gold-2), var(--sun));
  box-shadow: 0 0 10px rgba(245, 197, 66, .55);
  transition: width .8s ease
}

.cal-station {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem
}

.cal-diya {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--maroon-orb);
  box-shadow: inset 0 0 0 2.5px var(--gold-2), 0 8px 18px rgba(20, 2, 9, .5)
}

.cal-diya img {
  width: 36px;
  height: 36px;
  transition: filter .3s, opacity .3s
}

.is-next .cal-diya img {
  filter: grayscale(.6) brightness(.8);
  opacity: .6
}

.is-current .cal-diya {
  animation: diyaglow 2.4s ease-in-out infinite
}

.cal-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--leaf);
  color: #fff;
  border: 2px solid var(--velvet-deep)
}

.cal-check .icon {
  width: 13px;
  height: 13px
}

@keyframes diyaglow {

  0%,
  100% {
    box-shadow: inset 0 0 0 2.5px var(--gold-2), 0 8px 18px rgba(20, 2, 9, .5), 0 0 0 0 rgba(245, 197, 66, .45)
  }

  50% {
    box-shadow: inset 0 0 0 2.5px var(--sun), 0 8px 18px rgba(20, 2, 9, .5), 0 0 0 12px rgba(245, 197, 66, 0)
  }
}

.cal-date {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: .6rem;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 2.7rem);
  line-height: 1;
  color: var(--gold-bright);
  letter-spacing: -.01em
}

.cal-date small {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sun)
}

.cal-label {
  font-weight: 700;
  font-size: 1.02rem;
  color: #f6e7cd;
  margin-top: .1rem
}

.cal-time {
  font-size: .86rem;
  color: #e6cfa6
}

.cal-state {
  margin-top: .5rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38em .9em;
  border-radius: var(--pill);
  border: 1px solid var(--gold-line);
  color: #e6cfa6
}

.is-current .cal-state {
  background: var(--gold-sun);
  color: var(--maroon-deep);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(20, 2, 9, .4)
}

.is-done .cal-state {
  color: #a9e3bd;
  border-color: rgba(47, 125, 78, .7)
}

.is-next .cal-date,
.is-next .cal-label {
  opacity: .8
}

/* the rulebook */
.rulebook {
  max-width: 940px;
  margin-inline: auto;
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(6px, 1.5vw, 14px) clamp(18px, 3.5vw, 40px) clamp(18px, 3vw, 28px);
  box-shadow: var(--card-ring), var(--sh-lg)
}

.rules {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
  margin: 0;
  padding: 0
}

.rb-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line)
}

.rb-item:nth-last-child(-n+2) {
  border-bottom: none
}

.ri-n {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold-2);
  min-width: 2ch;
  padding-top: .35rem;
  font-variant-numeric: tabular-nums
}

.ri-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--maroon-orb);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 2px var(--gold-2)
}

.ri-ic .icon {
  width: 21px;
  height: 21px
}

.ri-body b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.12rem;
  line-height: 1.2;
  margin: .3rem 0 .25rem
}

.ri-body p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55
}

.rules-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gold-line);
  font-size: .86rem;
  color: var(--muted);
  text-align: center
}

.rules-foot .icon {
  width: 18px;
  height: 18px;
  color: var(--saffron-deep);
  flex: none
}

/* how voting works: three steps on a dotted thread */
.howvote {
  --hv-gap: clamp(14px, 2.4vw, 26px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hv-gap);
  margin: 0;
  padding: 0
}

.howvote li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.4rem 1.4rem
}

.howvote li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  right: calc(-1 * var(--hv-gap) - 1.5px);
  width: var(--hv-gap);
  border-top: 2px dotted var(--gold-2)
}

.hv-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-sun);
  color: var(--maroon-deep);
  margin-bottom: .45rem;
  box-shadow: 0 6px 14px rgba(20, 2, 9, .4)
}

.hv-ic .icon {
  width: 25px;
  height: 25px
}

.hv-n {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sun)
}

.howvote b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gold-bright);
  line-height: 1.2
}

.howvote p {
  color: #e9d8c8;
  font-size: .95rem
}

@media (max-width:820px) {
  .rules {
    grid-template-columns: 1fr
  }

  .rb-item:nth-last-child(2) {
    border-bottom: 1px solid var(--line)
  }

  .howvote {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto
  }

  .howvote li:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 44px;
    bottom: calc(-1 * var(--hv-gap) - 1.5px);
    width: 0;
    height: var(--hv-gap);
    border-top: none;
    border-left: 2px dotted var(--gold-2)
  }
}

@media (max-width:720px) {
  .calendar {
    padding: 22px 18px 22px 16px
  }

  .cal-thread {
    grid-template-columns: 1fr;
    gap: 1.3rem
  }

  .cal-line {
    left: 32px;
    right: auto;
    top: 33px;
    bottom: 33px;
    width: 2px;
    height: auto
  }

  .cal-line i {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--cal-fill, 0%);
    background: linear-gradient(180deg, var(--gold-2), var(--sun))
  }

  .cal-station {
    display: grid;
    grid-template-columns: 66px 1fr;
    grid-template-areas: "diya date" "diya label" "diya time" "diya state";
    column-gap: 1rem;
    row-gap: .15rem;
    text-align: left;
    align-items: start
  }

  .cal-diya {
    grid-area: diya
  }

  .cal-date {
    grid-area: date;
    margin-top: .1rem;
    font-size: 1.9rem
  }

  .cal-label {
    grid-area: label
  }

  .cal-time {
    grid-area: time
  }

  .cal-state {
    grid-area: state;
    justify-self: start
  }
}

/* ============ VOTE ============ */
/* the ballot */
.ballot {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(8px, 1.4vw, 14px);
  background: var(--plaque-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(12px, 1.8vw, 18px);
  box-shadow: var(--plaque-ring), var(--sh-lg);
  margin-bottom: clamp(22px, 3vw, 32px);
  position: relative;
  overflow: hidden
}

.ballot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") no-repeat right -110px top -110px/300px;
  opacity: .08;
  pointer-events: none
}

.ballot-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  padding: .3rem 1.4rem .3rem .7rem;
  border-right: 1px solid var(--gold-line);
  min-width: 170px
}

.ballot-head .kicker {
  margin: 0;
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--sun)
}

.ballot-head .kicker::before,
.ballot-head .kicker::after {
  display: none
}

.ballot-head b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--gold-bright)
}

.ballot-head small {
  font-size: .8rem;
  color: #e6cfa6
}

.ballot-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  min-height: 74px;
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  border-radius: 16px;
  padding: .65rem 2rem .65rem .8rem;
  transition: background .2s, border-color .2s, box-shadow .2s
}

.ballot-slot .medal {
  width: 40px;
  height: 40px;
  margin: 0;
  flex: none;
  filter: drop-shadow(0 3px 5px rgba(20, 2, 9, .45))
}

.ballot-slot.filled {
  background: var(--card-bg);
  border-color: var(--gold-2);
  box-shadow: var(--card-ring), 0 8px 20px rgba(20, 2, 9, .35)
}

.bs-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: .12rem
}

.bs-rank {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sun)
}

.filled .bs-rank {
  color: var(--saffron-deep)
}

.bs-name {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bs-empty {
  color: #e6cfa6;
  font-size: .9rem
}

.ballot-slot .slot-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: .15s
}

.ballot-slot .slot-clear:hover {
  background: var(--maroon);
  color: #fff
}

/* toolbar + trust */
.vote-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
  margin-bottom: .9rem
}

.vote-toolbar .search-box {
  margin: 0;
  flex: 1 1 320px;
  max-width: 560px;
  border-color: var(--gold-2);
  box-shadow: var(--card-ring), 0 8px 20px rgba(20, 2, 9, .3)
}

.vote-count {
  font-weight: 600;
  color: #e6cfa6;
  font-size: .92rem;
  white-space: nowrap
}

.vote-count b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-bright)
}

.vote-count:empty {
  display: none
}

.trust-chips {
  margin: 0 0 clamp(22px, 3vw, 32px);
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  gap: .55rem
}

.tchip {
  background: var(--glass);
  color: #f6e7cd;
  border-color: var(--gold-line);
  box-shadow: none;
  font-size: .84rem;
  font-weight: 600;
  padding: .3rem .9rem .3rem .3rem;
  gap: .5rem
}

.tchip-ic {
  width: 28px;
  height: 28px;
  background: var(--gold-sun);
  color: var(--maroon-deep);
  box-shadow: none
}

.tchip-ic .icon {
  width: 15px;
  height: 15px
}

/* the cards: photos mounted on a cream mat inside a gold frame */
.vote {
  max-width: none
}

.vote-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 24px)
}

.vote-card {
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  box-shadow: var(--card-ring), 0 14px 30px rgba(20, 2, 9, .32);
  overflow: hidden;
  position: relative;
  transition: transform .2s, box-shadow .25s, border-color .2s
}

.vote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-ring), 0 22px 40px rgba(20, 2, 9, .42)
}

.vote-card.is-ranked {
  border-color: var(--sun);
  box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4.5px var(--sun), 0 18px 36px rgba(20, 2, 9, .42)
}

.vote-card .vc-photo {
  aspect-ratio: 4/3;
  min-height: 0;
  margin: 12px 12px 0;
  padding: 3px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  overflow: hidden;
  position: relative
}

.vote-card .vc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  display: block
}

.vc-plaque {
  top: 11px;
  left: 11px
}

.vc-ribbon {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: var(--gold-sun);
  border-radius: var(--pill);
  padding: .38em .8em;
  box-shadow: 0 4px 10px rgba(20, 2, 9, .45)
}

.vc-ribbon .icon {
  width: 13px;
  height: 13px
}

.vote-card .vc-body {
  padding: .95rem 1rem 1rem;
  gap: .3rem
}

.vote-card h3 {
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.12rem;
  line-height: 1.2
}

.vote-card .vc-loc {
  margin-top: .05rem
}

.vc-votes {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .5rem
}

.vv-num {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--ink-soft)
}

.vv-num .icon {
  width: 1em;
  height: 1em;
  color: var(--maroon-2)
}

.vv-num b {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--maroon);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums
}

.vv-bar {
  display: block;
  height: 5px;
  border-radius: var(--pill);
  background: rgba(124, 31, 61, .1);
  overflow: hidden
}

.vv-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun-deep), var(--sun));
  transition: width .5s ease
}

.vc-ranklabel {
  margin-top: .8rem;
  padding-top: 0;
  font-size: .66rem;
  letter-spacing: .14em
}

.vc-ranks {
  gap: .45rem;
  margin-top: .4rem
}

.vc-ranks button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem .3rem;
  border-radius: 12px;
  background: #fffdf6;
  font-weight: 800;
  font-size: .86rem
}

.vc-ranks button::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--medal);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18)
}

.vc-ranks button[data-rank="1"] {
  --medal: var(--medal-1)
}

.vc-ranks button[data-rank="2"] {
  --medal: var(--medal-2)
}

.vc-ranks button[data-rank="3"] {
  --medal: var(--medal-3)
}

.vc-ranks button.active {
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  border-color: var(--sun-deep);
  color: var(--maroon-deep);
  box-shadow: inset 0 1px 0 rgba(255, 244, 205, .8), 0 4px 10px rgba(20, 2, 9, .25)
}

.vc-ranks button.active::before {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .3), 0 0 0 2px rgba(255, 253, 246, .7)
}

.vc-details {
  width: 100%;
  margin-top: .75rem;
  padding: .3rem 0 0;
  border: none;
  border-top: 1px dashed var(--gold-line);
  border-radius: 0;
  background: transparent;
  color: var(--saffron-deep);
  font-size: .84rem;
  padding-top: .7rem
}

.vc-details:hover {
  background: transparent;
  color: var(--maroon)
}

/* the cast plaque */
.vote-bar {
  bottom: 12px;
  background: var(--plaque-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: .85rem 1rem .85rem 1.2rem;
  box-shadow: inset 0 0 0 3px var(--velvet-deep), inset 0 0 0 4px rgba(217, 178, 74, .5), 0 -8px 26px rgba(20, 2, 9, .3), 0 14px 30px rgba(20, 2, 9, .45)
}

.vote-bar-left {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0
}

.vote-progress {
  display: flex;
  gap: .35rem;
  flex: none
}

.vote-progress i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-2);
  background: transparent;
  transition: .2s
}

.vote-progress i.m-1 {
  --medal: var(--medal-1)
}

.vote-progress i.m-2 {
  --medal: var(--medal-2)
}

.vote-progress i.m-3 {
  --medal: var(--medal-3)
}

.vote-progress i.on {
  background: var(--medal);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(240, 212, 136, .35)
}

.vote-status {
  color: #f6e7cd;
  font-weight: 600
}

.vote-status.ready {
  color: #a9e3bd
}

.vote-bar .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.7)
}

.vote-bar .btn[disabled]:hover {
  transform: none
}

@media (max-width:820px) {
  .ballot {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .ballot-head {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    min-width: 0;
    padding: .2rem .3rem .65rem;
    border-right: none;
    border-bottom: 1px solid var(--gold-line)
  }

  .ballot-head .kicker {
    width: 100%
  }

  .ballot-slot {
    min-height: 60px;
    padding: .5rem 2rem .5rem .7rem
  }

  .ballot-slot .medal {
    width: 34px;
    height: 34px
  }

  .vote-bar {
    bottom: 76px;
    flex-direction: row;
    align-items: center;
    text-align: left
  }

  .vote-bar .btn {
    width: auto;
    flex: 1 1 100%
  }

  .trust-chips {
    justify-content: center
  }

  .vote-toolbar {
    justify-content: center
  }

  .vote-count {
    width: 100%;
    text-align: center
  }
}

/* ============ SUPPORT ============ */
.offerings {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px)
}

.offering {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: clamp(4px, 1vw, 12px);
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  box-shadow: var(--card-ring), 0 18px 40px rgba(20, 2, 9, .35);
  padding: 12px
}

.offering.reverse .off-media {
  order: 2
}

.off-media {
  position: relative;
  border-radius: 16px;
  min-height: 300px;
  padding: 3px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  overflow: hidden
}

.off-media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  min-height: 300px
}

.off-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  border: 1px solid var(--gold-2);
  border-radius: var(--pill);
  padding: .45em .95em;
  box-shadow: inset 0 0 0 2px rgba(94, 19, 44, .9), inset 0 0 0 3px rgba(217, 178, 74, .5), 0 4px 12px rgba(20, 2, 9, .45)
}

.off-tag .icon {
  width: 15px;
  height: 15px
}

.off-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .65rem;
  padding: clamp(18px, 3vw, 36px) clamp(16px, 3vw, 36px)
}

.off-body .kicker {
  color: var(--saffron-deep);
  margin-bottom: 0
}

.off-body .kicker::before,
.off-body .kicker::after {
  background: var(--gold-line)
}

.off-body .kicker::before {
  display: none
}

.off-body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  color: var(--maroon);
  letter-spacing: -.01em
}

.off-body h3 span {
  color: var(--saffron-deep);
  white-space: nowrap
}

.off-body>p {
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 48ch
}

.off-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: .45rem;
  margin: .2rem 0 0;
  padding: 0
}

.off-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .45rem .7rem
}

.off-list li span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* "Donate a Meal" leads the list — gild it so it reads as the primary ask */
.off-list li:first-child {
  background: linear-gradient(180deg, #FFF6DF, #FBE9BE);
  border-color: var(--gold-2);
  color: var(--maroon);
  font-weight: 700
}

.off-list b {
  color: var(--saffron-deep);
  font-family: var(--f-display);
  font-weight: 700;
  flex: none
}

.off-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .1rem 0 0;
  padding: 0
}

.off-facts li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem
}

.off-facts .icon {
  width: 18px;
  height: 18px;
  color: var(--saffron-deep);
  flex: none
}

.off-actions {
  margin-top: .5rem
}

/* live preview of a sponsor's placement */
.off-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.6rem 0 3.4rem;
  background: var(--plaque-bg);
  box-shadow: inset 0 0 0 3px var(--velvet-deep)
}

.off-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") no-repeat left -120px top -120px/320px;
  opacity: .1;
  pointer-events: none
}

.pv-ribbon {
  display: flex;
  gap: .6rem;
  white-space: nowrap;
  position: relative;
  align-self: stretch;
  padding-left: 1.4rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent)
}

.pv-ribbon .hsp-chip {
  flex: none
}

.pv-ribbon .hsp-chip.is-you {
  border-color: var(--sun);
  background: rgba(245, 197, 66, .14);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(245, 197, 66, .18)
}

.pv-card.supporter-card {
  width: 176px;
  position: relative;
  padding: 1.1rem .9rem 1rem;
  pointer-events: none;
  box-shadow: var(--card-ring), 0 0 0 4px rgba(245, 197, 66, .18), 0 14px 28px rgba(20, 2, 9, .45)
}

.pv-card.supporter-card h3 {
  font-size: 1rem;
  min-height: 0
}

/* volunteer strip */
.volunteer-strip {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 32px);
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.5vw, 22px) clamp(16px, 3vw, 28px)
}

.vol-ic {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-sun);
  color: var(--maroon-deep);
  box-shadow: 0 6px 14px rgba(20, 2, 9, .4)
}

.vol-ic .icon {
  width: 28px;
  height: 28px
}

.vol-text {
  flex: 1 1 260px
}

.vol-text h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--gold-bright);
  line-height: 1.2
}

.vol-text p {
  color: #e9d8c8;
  margin-top: .15rem
}

/* organizer as a letterhead */
.organizer.letterhead {
  max-width: none;
  margin: clamp(20px, 3vw, 32px) 0 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  text-align: left;
  padding: clamp(16px, 2.5vw, 24px) clamp(18px, 3vw, 30px);
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  box-shadow: var(--card-ring), var(--sh)
}

.organizer.letterhead::before {
  display: none
}

.lh-emblem {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 8px rgba(94, 19, 44, .25))
}

.letterhead .kicker {
  margin: 0 0 .1rem;
  font-size: .68rem;
  color: var(--saffron-deep)
}

.letterhead .kicker::before {
  display: none
}

.letterhead .kicker::after {
  background: var(--gold-line)
}

.letterhead .organizer-name {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  margin: 0;
  line-height: 1.15
}

.letterhead .organizer-addr {
  margin-top: .15rem;
  font-size: .95rem
}

.letterhead .organizer-contacts {
  margin: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem
}

.letterhead .organizer-contacts:empty {
  display: none
}

/* about */
.about-grid.block {
  align-items: center
}

.about-text p {
  color: #e9d8c8;
  margin-bottom: .7rem
}

.about-text .lead {
  color: #f6e7cd;
  font-size: 1.08rem;
  margin: 1rem 0 .8rem
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: 1.2rem
}

.about-points li {
  align-items: center;
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: 14px;
  color: var(--ink);
  font-size: .92rem;
  box-shadow: var(--card-ring), 0 8px 18px rgba(20, 2, 9, .28)
}

.about-points .ic {
  border-radius: 50%;
  background: var(--maroon-orb);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 2px var(--gold-2)
}

.about-media {
  border: 1.5px solid var(--gold-2);
  padding: 10px;
  background: var(--plaque-bg);
  box-shadow: var(--plaque-ring), var(--sh-lg)
}

.about-media img {
  border-radius: 16px;
  position: relative
}

@media (max-width:820px) {
  .offering {
    grid-template-columns: minmax(0, 1fr)
  }

  .off-media {
    min-width: 0
  }

  .offering.reverse .off-media {
    order: 0
  }

  .off-media {
    min-height: 0;
    aspect-ratio: 16/10
  }

  .off-media>img {
    min-height: 0
  }

  .off-preview {
    aspect-ratio: auto;
    min-height: 240px
  }

  .organizer.letterhead {
    grid-template-columns: auto 1fr
  }

  .letterhead .organizer-contacts {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .4rem 1.2rem
  }
}

@media (max-width:560px) {
  .about-points {
    grid-template-columns: 1fr
  }

  .off-body>p {
    max-width: none
  }

  /* long labels: let the buttons fill the card and wrap instead of overflowing */
  .off-actions .btn,
  .cta-band-actions .btn,
  .volunteer-strip .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    padding-inline: 1.2em
  }

  .cta-band-actions {
    width: 100%
  }
}

/* ============ RESULTS ============ */
.countdown {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--plaque-bg);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 46px) clamp(16px, 3vw, 36px);
  box-shadow: var(--plaque-ring), var(--sh-lg)
}

.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/mandala-corner.svg") no-repeat right -100px bottom -100px/320px;
  opacity: .1;
  pointer-events: none
}

.countdown>* {
  position: relative
}

.cd-label {
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--sun)
}

.cd-grid {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  margin: 1.1rem 0 1rem
}

.cd-grid:empty {
  display: none
}

.cd-cell {
  min-width: clamp(64px, 14vw, 108px);
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  border-radius: 16px;
  padding: .85rem .5rem .65rem
}

.cd-cell b {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums
}

.cd-cell small {
  display: block;
  margin-top: .4rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #e6cfa6
}

.cd-note {
  color: #e9d8c8;
  font-size: .98rem;
  max-width: 54ch;
  margin-inline: auto
}

.countdown.is-results .cd-label {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--gold-bright);
  margin-bottom: .6rem
}

/* the podium: three stepped pedestals */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(10px, 2vw, 20px);
  max-width: 880px;
  margin-inline: auto
}

.pedestal {
  --h: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  background: var(--card-bg);
  border: 1.5px solid var(--gold-2);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 1.7rem 1rem 0;
  box-shadow: var(--card-ring), 0 14px 30px rgba(20, 2, 9, .32);
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) both
}

.pedestal.step-1 {
  --h: 132px;
  animation-delay: .08s;
  z-index: 1
}

.pedestal.step-2 {
  --h: 92px;
  animation-delay: .2s
}

.pedestal.step-3 {
  animation-delay: .32s
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.pedestal .medal {
  width: 64px;
  height: 64px;
  margin: 0 0 .2rem;
  filter: drop-shadow(0 4px 6px rgba(20, 2, 9, .3))
}

.pedestal.step-1 .medal {
  width: 76px;
  height: 76px
}

.pedestal .rank-crown {
  top: -24px
}

.pd-place {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--maroon);
  line-height: 1
}

.pd-place span {
  font-size: .6em;
  font-weight: 700;
  color: var(--saffron-deep)
}

.pedestal h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.2;
  margin-top: .4rem;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center
}

.pedestal h3.tba {
  color: var(--muted);
  font-style: italic;
  font-weight: 600
}

.pedestal p {
  font-size: .86rem;
  color: var(--muted);
  min-height: 1.3em
}

.pd-base {
  width: calc(100% + 2rem);
  height: var(--h);
  margin: 1.1rem -1rem 0;
  display: grid;
  place-items: center;
  background: var(--plaque-bg);
  border-top: 2px solid var(--gold-2);
  box-shadow: inset 0 0 0 3px var(--velvet-deep), inset 0 0 0 4px rgba(217, 178, 74, .45)
}

.pd-base span {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold-2);
  opacity: .9
}

.pedestal.step-1 .pd-base span {
  font-size: 3rem;
  color: var(--sun)
}

/* standings */
.standings {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.st-row {
  display: grid;
  grid-template-columns: 40px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  background: var(--card-bg);
  border: 1.5px solid var(--gold-line);
  border-radius: 16px;
  padding: .6rem 1rem .6rem .6rem;
  box-shadow: 0 8px 18px rgba(20, 2, 9, .25)
}

.st-row.top {
  border-color: var(--gold-2);
  box-shadow: var(--card-ring), 0 10px 22px rgba(20, 2, 9, .3)
}

.st-rank {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums
}

.top-1 .st-rank {
  color: var(--gold)
}

.top-2 .st-rank {
  color: #8f969c
}

.top-3 .st-rank {
  color: #B06A38
}

.st-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--maroon-orb);
  color: var(--gold-bright);
  font-family: var(--f-display);
  font-weight: 700;
  border: 1.5px solid var(--gold-2)
}

.st-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.st-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2
}

.st-name b {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.st-name small {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: .15rem
}

.st-votes {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-items: end;
  gap: .1rem .3rem;
  min-width: 130px
}

.st-votes b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.st-votes small {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em
}

.st-bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 5px;
  border-radius: var(--pill);
  background: rgba(124, 31, 61, .1);
  overflow: hidden
}

.st-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun-deep), var(--sun))
}

@media (max-width:640px) {
  .podium {
    grid-template-columns: 1fr;
    max-width: 380px;
    gap: 14px
  }

  .pedestal {
    border-radius: var(--r-xl);
    border-bottom: 1.5px solid var(--gold-2);
    padding-top: 1.5rem;
    animation: none
  }

  .pedestal.step-1 {
    order: -1
  }

  .pedestal .pd-base {
    --h: 42px !important;
    border-radius: 0 0 20px 20px
  }

  .pedestal .pd-base span,
  .pedestal.step-1 .pd-base span {
    font-size: 1.5rem
  }

  .st-row {
    grid-template-columns: 30px 48px minmax(0, 1fr);
    gap: .6rem .7rem;
    padding: .6rem .8rem .6rem .5rem
  }

  .st-rank,
  .st-thumb {
    grid-row: span 2
  }

  .st-thumb {
    width: 48px;
    height: 48px
  }

  .st-name b {
    white-space: normal;
    font-size: 1rem;
    line-height: 1.15
  }

  .st-votes {
    grid-column: 3;
    justify-items: start;
    min-width: 0;
    grid-template-columns: auto auto
  }

  .st-bar {
    grid-column: 1 / -1
  }
}

/* reduced motion: keep the calendar & podium still */
@media (prefers-reduced-motion:reduce) {

  .is-current .cal-diya,
  .phase-ribbon.is-voting .pr-dot,
  .pedestal {
    animation: none
  }
}

/* ============================================================
   PRIZE PLAQUE — the supplied gold cartouche frame (assets/
   plaque-frame.png, 2172x724). Measured from its alpha channel:
   exactly 3:1, the ornate ends intrude 130px (6% of width) and
   the rails clear at y=98 / y=645. Locking the box to 3:1 means
   the frame is never stretched, and every inner metric below is
   that measurement expressed against the height.
   ============================================================ */
.prize-plaque {
  --pp-h: clamp(84px, 28vw, 176px);
  --pp-amount: calc(var(--pp-h) * .26);
  --pp-trophy: calc(var(--pp-h) * .5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pp-h) * .04);
  margin-top: 1.4rem;
  max-width: 100%;
  height: var(--pp-h);
  width: calc(var(--pp-h) * 3);
  /* 6% of width clears the end ornaments; the rails sit at 13.5% /
     10.9% of height, so the copy stays off the gold either way */
  padding: calc(var(--pp-h) * .14) 6% calc(var(--pp-h) * .12);
  background: url("../assets/plaque-frame.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative
}

/* a translucent plate so the copy reads against whatever sits behind,
   inset far enough to never cover the frame's gold */
.prize-plaque::before {
  content: "";
  position: absolute;
  left: 6.2%;
  right: 6.2%;
  top: 14.5%;
  bottom: 12%;
  background: rgba(62, 10, 26, .42);
  border-radius: calc(var(--pp-h) * .06);
  z-index: 0;
  pointer-events: none
}

.prize-plaque::after {
  content: none
}

.prize-plaque .pp-trophy,
.prize-plaque .pp-text {
  position: relative;
  z-index: 1
}

.prize-plaque .pp-trophy {
  display: block;
  width: auto;
  height: var(--pp-trophy);
  aspect-ratio: 120 / 140;
  flex: none;
  font-size: 0;
  line-height: 0;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 6px 10px rgba(20, 2, 9, .55))
}

.prize-plaque .pp-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pp-h) * .03);
  line-height: 1;
  min-width: 0
}

.prize-plaque .pp-amount {
  font-family: "Times New Roman", Tinos, "Noto Serif", Georgia, serif;
  font-weight: 700;
  font-size: var(--pp-amount);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFF3C4 0%, #F7D269 42%, #E6AC2E 68%, #C98A12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(60, 10, 20, .6)) drop-shadow(0 5px 8px rgba(20, 2, 9, .35))
}

/* "FOR WINNERS" ribbon — gold band with notched ends, as on the poster */
.prize-plaque .pp-caption {
  display: inline-block;
  padding: .3em 1.5em;
  font-family: var(--f-display);
  font-weight: 800;
  font-style: normal;
  font-size: calc(var(--pp-h) * .095);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #5A0F21;
  white-space: nowrap;
  background: linear-gradient(180deg, #FDEEBC 0%, #F2CE74 45%, #D9A32E 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%);
  filter: drop-shadow(0 2px 3px rgba(20, 2, 9, .45))
}

.prize-plaque .pp-caption::before,
.prize-plaque .pp-caption::after {
  content: none
}

/* compact plate for inner page heads */
.prize-plaque.pp-compact {
  --pp-h: clamp(58px, 17vw, 84px);
  margin-top: 0
}

.ph-plaques .prize-plaque {
  margin-top: 0
}

@media (max-width:560px) {
  .prize-plaque.pp-compact {
    --pp-h: 62px
  }
}

/* ============================================================
   CONTEST REEL — one mandapam per screen
   Vertical scroll-snap between mandapams, horizontal snap between
   that mandapam's photos. Both are native scroll containers, so the
   gestures, momentum and accessibility come for free.
   ============================================================ */
/* The reel is sized to the space actually left over once the page chrome is
   accounted for — sticky header, the ballot, the search toolbar and the sticky
   "Cast My Vote" bar. Sizing it any taller pushes a mandapam's rank buttons
   behind that bar, and pinning it with position:sticky is not an option: the
   reel contains its own scroll, so on a phone there would be nothing left to
   scroll the page with. */
.reel-stage {
  position: relative;
  margin-bottom: 1rem
}

.reel {
  --chrome: 300px;
  --reel-h: clamp(360px, calc(100dvh - var(--chrome)), 640px);
  height: var(--reel-h);
  max-width: 470px;
  margin-inline: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  /* deliberately NOT scroll-behavior:smooth — a smooth scroll on a mandatory
     snap container gets re-snapped mid-animation and lands back where it
     started, which swallows wheel scrolling entirely. Snap scrolling is
     already animated by the browser. */
  border-radius: var(--r-xl);
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  background: var(--velvet-deep);
  box-shadow: inset 0 0 0 1.5px var(--gold-2), 0 18px 40px rgba(20, 2, 9, .34)
}

.reel::-webkit-scrollbar {
  display: none
}

.reel-item {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative
}

.reel-media {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--velvet-deep)
}

/* --- the photos: horizontal snap track --- */
.reel-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain
}

.reel-track::-webkit-scrollbar {
  display: none
}

.reel-slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always
}

.reel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* --- overlays --- */
.reel-media .vc-plaque {
  top: 12px;
  left: 12px
}

.reel-count {
  position: absolute;
  top: 13px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .32em;
  font-size: .72rem;
  font-weight: 800;
  color: var(--gold-bright);
  background: rgba(30, 4, 14, .62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 178, 74, .5);
  border-radius: var(--pill);
  padding: .3em .7em
}

.reel-count .icon {
  width: 13px;
  height: 13px
}

.reel-media .vc-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5
}

.reel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: .5rem;
  pointer-events: none
}

.reel-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 245, 224, .42);
  box-shadow: 0 1px 3px rgba(20, 2, 9, .6);
  transition: width .2s, background .2s
}

.reel-dots i.on {
  width: 20px;
  border-radius: var(--pill);
  background: var(--sun)
}

.reel-nav {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  background: rgba(30, 4, 14, .5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 178, 74, .45);
  opacity: 0;
  transition: opacity .18s, background .18s
}

.reel-item:hover .reel-nav,
.reel-nav:focus-visible {
  opacity: 1
}

.reel-nav:hover {
  background: rgba(124, 31, 61, .8)
}

.reel-nav .icon {
  width: 17px;
  height: 17px
}

.reel-nav.prev {
  left: 10px
}

.reel-nav.prev .icon {
  transform: rotate(180deg)
}

.reel-nav.next {
  right: 10px
}

/* --- the details + rank panel over the photo --- */
.reel-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 2.2rem .9rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  color: #fff6e4;
  background: linear-gradient(180deg, transparent, rgba(24, 3, 12, .5) 26%, rgba(24, 3, 12, .93) 62%);
  pointer-events: none
}

.reel-info>* {
  pointer-events: auto
}

.reel-info h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.15;
  color: #fff8ea;
  text-shadow: 0 2px 10px rgba(20, 2, 9, .7)
}

/* `location` carries the raw "Mandapam Address" a committee typed, which is
   often a full address plus a pasted maps link — left to wrap it ate three
   lines of a short reel, so keep it to one and let the profile show the rest */
.reel-info .vc-loc {
  font-size: .85rem;
  color: #f0dcc0;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.reel-info .vc-loc .icon {
  flex: 0 0 auto
}

.reel-info .vc-loc .icon {
  width: 1em;
  height: 1em;
  color: var(--sun)
}

.reel-info .vc-votes {
  margin-top: .15rem;
  color: #f5e4c8
}

.reel-info .vc-votes b {
  color: var(--sun)
}

.reel-info .vv-bar {
  background: rgba(255, 245, 224, .2)
}

.reel-info .vc-ranks {
  margin-top: .3rem
}

.reel-info .vc-ranks button {
  background: rgba(255, 248, 235, .1);
  color: #fff3dd;
  border-color: rgba(217, 178, 74, .6);
  backdrop-filter: blur(6px);
  padding: .58rem .3rem
}

.reel-info .vc-ranks button:hover {
  background: rgba(255, 248, 235, .2)
}

.reel-info .vc-ranks button.active {
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  color: var(--maroon-deep);
  border-color: var(--sun)
}

.reel-item.is-ranked .reel-media {
  box-shadow: inset 0 0 0 3px var(--sun)
}

/* --- HUD: position counter + gesture hint --- */
.reel-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none
}

.reel-pos {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #e9d3aa;
  background: rgba(30, 4, 14, .62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 178, 74, .45);
  border-radius: var(--pill);
  padding: .25em .75em
}

.reel-pos b {
  color: var(--sun)
}

.reel-hint {
  font-size: .66rem;
  font-weight: 600;
  color: #e9d3aa;
  background: rgba(30, 4, 14, .62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 178, 74, .3);
  border-radius: var(--pill);
  padding: .22em .7em
}

@media (max-width:820px) {
  .reel {
    /* the bottom nav replaces some chrome and the ballot stacks tighter */
    --chrome: 280px;
    max-width: none;
    border-radius: var(--r-lg)
  }

  .reel-nav {
    display: none
  }

  .reel-hint {
    display: none
  }
}

@media (prefers-reduced-motion:reduce) {

  .reel,
  .reel-track {
    scroll-behavior: auto;
    scroll-snap-type: none
  }
}

/* the multi-photo picker's live feedback */
.fld-hint {
  display: block;
  font-size: .74rem;
  font-weight: 500;
  color: var(--muted);
  margin: .1rem 0 .35rem
}

.pick-note {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  margin-top: .3rem
}

.pick-note.ok {
  color: var(--leaf)
}

.pick-note.over {
  color: var(--saffron-deep)
}

/* ============================================================
   COMING SOON — teaser that replaces a page's live UI
   ============================================================ */
.vote-soon {
  text-align: center;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1rem, 4vw, 2.4rem) clamp(2rem, 5vw, 3rem);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(245, 197, 66, .10), transparent 60%),
    linear-gradient(180deg, var(--velvet-2), var(--velvet-deep));
  box-shadow: inset 0 0 0 3px rgba(94, 19, 44, .9), inset 0 0 0 4.5px rgba(217, 178, 74, .38),
    0 18px 40px rgba(20, 2, 9, .34)
}

.soon-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  border-radius: var(--pill);
  padding: .4em 1.1em;
  box-shadow: 0 4px 12px rgba(20, 2, 9, .4)
}

.soon-title {
  margin-top: .8rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.15;
  color: #fff8ea
}

.soon-title em {
  font-style: normal;
  color: var(--sun)
}

.soon-lead {
  margin: .7rem auto 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.6;
  color: #f0dcc0
}

.vote-soon .countdown {
  margin-top: 1.4rem
}

.soon-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center
}

@media (max-width:560px) {
  .soon-actions .btn {
    width: 100%
  }
}

/* ============================================================
   LOCATION — gate modal, header chip, "near you" badges
   ============================================================ */
#modal-location .btn-block {
  width: 100%
}

.loc-status {
  min-height: 1.2em;
  margin-top: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center
}

.loc-or {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.1rem 0 .9rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.loc-or::before,
.loc-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-line)
}

.loc-actions {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between
}

.loc-actions .btn-gold {
  flex: 1
}

/* header chip showing the saved place */
.btn-locchip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  max-width: 12rem;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(255, 245, 224, .08);
  border: 1px solid rgba(217, 178, 74, .45);
  border-radius: var(--pill);
  padding: .4em .85em;
  transition: background .15s, border-color .15s
}

.btn-locchip:hover {
  background: rgba(255, 245, 224, .18);
  border-color: var(--sun)
}

.btn-locchip .icon {
  width: 13px;
  height: 13px;
  color: var(--sun);
  flex: 0 0 auto
}

.btn-locchip .lc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* "near you" badges */
.reel-near {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-bottom: .35rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: var(--gold-sun, linear-gradient(180deg, var(--sun), var(--sun-deep)));
  border-radius: var(--pill);
  padding: .3em .8em
}

.reel-near.t1 {
  color: #fff3dd;
  background: rgba(255, 248, 235, .14);
  border: 1px solid rgba(217, 178, 74, .5)
}

.reel-near .icon {
  width: 12px;
  height: 12px
}

.vc-near {
  color: var(--sun);
  font-weight: 700;
  white-space: nowrap
}

.vc-near .icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em
}

.sup-near {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  margin-top: .3rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--leaf);
  background: rgba(47, 125, 78, .12);
  border-radius: var(--pill);
  padding: .25em .65em
}

.sup-near .icon {
  width: 11px;
  height: 11px
}

@media (max-width:820px) {
  .btn-locchip {
    max-width: 8rem;
    font-size: .72rem;
    padding: .35em .7em
  }
}

/* ============================================================
   MANDAPAM DETAILS PAGE — #/mandapam/<contest id>
   ============================================================ */
.md-back {
  margin-bottom: 1rem
}

.md-back .icon {
  transform: rotate(180deg)
}

.md-card {
  background: var(--card-bg, #fffdf6);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  box-shadow: var(--card-ring, none), 0 16px 36px rgba(20, 2, 9, .28);
  overflow: hidden;
  padding: clamp(1.1rem, 3vw, 2rem)
}

.md-head {
  position: relative;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--gold-line)
}

.md-plaque {
  position: static;
  display: inline-block;
  margin-bottom: .5rem
}

.md-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4.5vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink)
}

.md-loc {
  margin-top: .35rem;
  font-size: .9rem;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: .4rem
}

.md-loc .icon {
  width: 1em;
  height: 1em;
  color: var(--saffron-deep);
  flex: 0 0 auto;
  margin-top: .25em
}

/* gallery */
.md-gallery {
  margin: 1.1rem 0
}

.md-main {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  padding: 3px;
  background-image: linear-gradient(180deg, var(--gold-2), var(--gold))
}

.md-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - 3px);
  display: block
}

.md-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin
}

.md-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: var(--cream-2);
  transition: border-color .15s, transform .15s
}

.md-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.md-thumb.on {
  border-color: var(--sun);
  transform: translateY(-2px)
}

/* body: description + QR side by side */
.md-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start
}

.md-h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--maroon);
  margin-bottom: .5rem
}

.md-desc {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft)
}

.md-desc p+p {
  margin-top: .7rem
}

.md-desc-empty {
  font-style: italic;
  color: var(--muted)
}

.md-rows {
  margin-top: 1.1rem
}

.md-qr {
  text-align: center;
  padding: 1rem;
  border: 1.5px dashed var(--gold-2);
  border-radius: var(--r-lg);
  background: var(--cream-2)
}

.md-qr-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 6px
}

.md-qr-note {
  margin-top: .5rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--ink-soft)
}

.md-qr-actions {
  margin-top: .7rem;
  display: flex;
  gap: .4rem;
  justify-content: center;
  flex-wrap: wrap
}

.md-qr-actions .icon {
  width: 13px;
  height: 13px
}

/* rank strip */
.md-vote {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-line)
}

.md-vote .vc-ranks {
  max-width: 420px
}

@media (max-width:760px) {
  .md-body {
    grid-template-columns: 1fr
  }

  .md-qr {
    order: -1
  }
}

.md-soon {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--maroon);
  background: var(--cream-2);
  border: 1px dashed var(--gold-2);
  border-radius: var(--r);
  padding: .7rem .9rem
}

.md-soon .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--saffron-deep);
  flex: 0 0 auto
}

/* ============================================================
   BACKGROUND MUSIC TOGGLE
   ============================================================ */
.bgm-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 65;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--velvet-2), var(--velvet-deep));
  border: 1.5px solid var(--gold-2);
  box-shadow: 0 6px 18px rgba(20, 2, 9, .45);
  cursor: pointer;
  transition: transform .15s, border-color .15s
}

.bgm-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--sun)
}

.bgm-toggle .icon {
  width: 19px;
  height: 19px
}

.bgm-toggle.is-playing {
  color: var(--sun);
  border-color: var(--sun)
}

/* three bars that pulse only while it is actually playing */
.bgm-wave {
  position: absolute;
  inset: auto 0 6px;
  display: none;
  justify-content: center;
  gap: 2px;
  height: 7px
}

.bgm-toggle.is-playing .bgm-wave {
  display: flex
}

.bgm-toggle.is-playing .bgm-ic .icon {
  transform: translateY(-4px)
}

.bgm-wave i {
  width: 2px;
  border-radius: 1px;
  background: var(--sun);
  animation: bgmBar .9s ease-in-out infinite
}

.bgm-wave i:nth-child(2) {
  animation-delay: .15s
}

.bgm-wave i:nth-child(3) {
  animation-delay: .3s
}

@keyframes bgmBar {

  0%,
  100% {
    height: 3px
  }

  50% {
    height: 7px
  }
}

/* sits above the mobile bottom nav, and clear of the back-to-top button */
@media (max-width:820px) {
  .bgm-toggle {
    right: 12px;
    bottom: 150px;
    width: 42px;
    height: 42px
  }
}

@media (prefers-reduced-motion:reduce) {
  .bgm-wave i {
    animation: none;
    height: 5px
  }
}

/* ============================================================
   HOME HERO — seva-led (prize messaging now lives on the contest page)
   ============================================================ */
.hero-lead {
  margin-top: .6rem;
  max-width: var(--hero-measure);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 4.2vw, 1.9rem);
  line-height: 1.2;
  color: #f7e6c4
}

.hero-lead em {
  display: block;
  font-style: normal;
  color: var(--sun)
}

.hero-sub {
  margin-top: .55rem;
  max-width: var(--hero-measure);
  font-size: clamp(.95rem, 2.6vw, 1.1rem);
  font-weight: 600;
  line-height: 1.45;
  color: #f0dcc0
}

.hero-note {
  margin-top: .5rem;
  max-width: 34rem;
  font-size: clamp(.85rem, 2.3vw, .95rem);
  line-height: 1.6;
  color: #d9bf9b
}

/* Identity · Visibility · More Devotees — the poster's three pillars.
   fit-content so the row never leaves a gap on the right of the column. */
.hero-pillars {
  width: fit-content;
  max-width: 100%;
  margin: 1.1rem 0 1.2rem;
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem clamp(.9rem, 3vw, 1.8rem);
  list-style: none;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background: rgba(255, 245, 224, .06)
}

.hero-pillars li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-left: clamp(.9rem, 3vw, 1.8rem);
  border-left: 1px solid var(--gold-line);
  font-size: clamp(.82rem, 2.3vw, .95rem);
  color: #f0dcc0
}

.hero-pillars .icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--sun);
  flex: none
}

/* the divider belongs between pillars, not before the first one — and the
   gap already supplies the spacing on the leading item */
.hero-pillars li:first-child {
  padding-left: 0;
  border-left: 0
}

.hero-pillars b {
  font-weight: 700
}

/* On a phone the three pillars cannot share a row — stacking them keeps the
   left dividers from reappearing at the start of a wrapped line. */
@media (max-width:560px) {
  .hero-pillars {
    width: 100%;
    flex-direction: column;
    gap: .5rem
  }

  .hero-pillars li {
    padding-left: 0;
    border-left: 0
  }
}

/* The poster's closing band. */
.hero-band {
  width: fit-content;
  max-width: 100%;
  margin-top: 1.1rem;
  padding: .45rem 1.1rem;
  font-family: var(--f-display);
  font-size: clamp(.9rem, 2.6vw, 1.05rem);
  letter-spacing: .06em;
  color: var(--sun);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(255, 245, 224, .05)
}

/* ============================================================
   JOIN UTSAV — the mandapam / devotee fork
   ============================================================ */
.join-picks {
  display: grid;
  gap: .8rem;
  margin-top: 1.1rem
}

.join-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-lg);
  background: var(--cream-2);
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, border-color .15s
}

.join-pick:hover {
  transform: translateY(-2px);
  border-color: var(--saffron);
  box-shadow: var(--sh)
}

.jp-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--maroon-deep);
  background: linear-gradient(180deg, var(--sun), var(--sun-deep))
}

.jp-ic .icon {
  width: 21px;
  height: 21px
}

.jp-text b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--maroon)
}

.jp-text small {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft)
}

.jp-go .icon {
  width: 18px;
  height: 18px;
  color: var(--saffron-deep)
}

/* ============================================================
   END CARD — after a devotee joins
   ============================================================ */
.modal-endcard {
  text-align: center
}

.ec-mark img {
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(20, 2, 9, .25)
}

.ec-title {
  margin-top: .7rem;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: var(--maroon)
}

.ec-line {
  margin-top: .5rem;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 3.4vw, 1.35rem);
  color: var(--saffron-deep)
}

.ec-sub {
  margin: .5rem auto 1.2rem;
  max-width: 40ch;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft)
}

/* ============================================================
   SPONSOR AD SLOTS
   ============================================================ */
.ad-slot {
  position: relative;
  display: block;
  margin: 1rem auto;
  max-width: 900px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: rgba(255, 245, 224, .05);
  line-height: 0
}

.ad-slot img {
  width: 100%;
  height: auto;
  display: block
}

.ad-slot[aria-disabled="true"] {
  cursor: default;
  pointer-events: none
}

.ad-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: #f0dcc0;
  background: rgba(30, 4, 14, .68);
  border: 1px solid rgba(217, 178, 74, .4);
  border-radius: var(--pill);
  padding: .4em .7em
}

.ad-1 {
  margin: .8rem auto 0;
  max-width: 720px
}

.ad-2 {
  margin-bottom: 1.4rem
}

/* position 3 — full-bleed inside the post-submit overlay */
.ad-full-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0
}

.ad-full {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a0209
}

/* ============================================================
   WHY GANAPATISEVA — client copy, two columns
   The .w-web / .w-mob pairs carry the Web View and Mobile View
   wordings from GanapatiSeva Homepage Content.pdf.
   ============================================================ */
.w-mob {
  display: none
}

.why {
  padding: clamp(1.6rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 2rem)
}

.why-lead {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--ink-soft)
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: clamp(1rem, 3vw, 1.8rem);
  align-items: stretch
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3.2vw, 1.9rem) clamp(1.1rem, 3vw, 1.8rem) clamp(1.1rem, 3vw, 1.6rem);
  border: 1.5px solid var(--gold-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245, 197, 66, .12), transparent 62%),
    var(--card-bg, #fffdf6);
  box-shadow: var(--card-ring, none), 0 12px 28px rgba(20, 2, 9, .2);
  transition: transform .2s, box-shadow .25s
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-ring, none), 0 20px 40px rgba(20, 2, 9, .3)
}

/* gold rule across the top of each card */
.why-card::before {
  content: "";
  position: absolute;
  left: clamp(1.1rem, 3vw, 1.8rem);
  right: clamp(1.1rem, 3vw, 1.8rem);
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold-2), var(--sun), var(--gold-2), transparent)
}

/* Badge beside the title rather than stacked above it — the cards were tall
   and top-heavy, and this puts the heading on the reader's first line. */
.why-top {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(184, 137, 46, .28)
}

.why-titles {
  min-width: 0
}

.why-badge {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  background: linear-gradient(180deg, var(--cream-2), var(--cream-3));
  border: 1.5px solid var(--gold-2);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(20, 2, 9, .12)
}

.why-h {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  line-height: 1.15;
  color: var(--maroon)
}

.why-tag {
  margin-top: .2rem;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft)
}

/* The journey reads as steps, so it is set as steps — a row of chips instead
   of one long uppercase run-on line. No separator glyph: the chips wrap on a
   narrow card and a hanging chevron at the start of a line looked broken. */
.why-steps {
  margin-top: .95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  list-style: none
}

.why-steps li {
  padding: .28rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  background: rgba(233, 130, 27, .09);
  border: 1px solid rgba(233, 130, 27, .3);
  border-radius: var(--pill)
}

.why-steps.w-mob {
  display: none
}

.why-list {
  margin: 1rem 0 0;
  display: grid;
  gap: .5rem;
  list-style: none          /* the ticked disc below is the marker */
}

.why-list li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft)
}

.why-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .08em;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  color: var(--leaf);
  background: rgba(47, 125, 78, .12);
  border: 1px solid rgba(47, 125, 78, .3);
  border-radius: 50%
}

.why-list b {
  color: var(--maroon)
}

/* min-height keeps the two Telugu blocks the same depth, so the lists and
   the button rows line up across the pair even though one wraps to two lines */
.why-te {
  margin: 1.1rem 0 1.3rem;
  min-height: 4.3rem;
  display: flex;
  align-items: center;
  padding: .65rem .85rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--maroon);
  background: var(--cream-2);
  border-left: 3px solid var(--gold-2);
  border-radius: 0 var(--r) var(--r) 0
}

/* Both cards end in the same two-button row, pinned to the bottom so the
   pair line up across cards of different text length. */
.why-cta {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem
}

@media (min-width:520px) {
  .why-cta {
    /* minmax(0,…) — a plain 1fr lets a long label ("Register — FREE")
       widen its own column and the pair stops matching */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }
}

/* One pairing everywhere on the site: gold primary, maroon plaque secondary.
   The old ghost secondary was cream-on-cream and barely read as a button. */
.why-cta .btn {
  width: 100%;
  padding-inline: .8rem;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  font-size: 1rem
}

/* sits on the dark page ground, not on a card — needs light ink */
.why-foot {
  margin-top: clamp(1.1rem, 3vw, 1.8rem);
  text-align: center;
  font-size: .9rem;
  color: #e3c79a
}

.why-foot b {
  font-family: var(--f-display);
  color: var(--sun)
}

@media (max-width:820px) {
  .w-web {
    display: none
  }

  .w-mob {
    display: inline
  }

  /* the step chips are lists, so they need their own show/hide — the shared
     rule above resolves to `display:inline` and would collapse the row */
  .why-steps.w-web {
    display: none
  }

  .why-steps.w-mob {
    display: flex
  }
}