/* ===== Storybook, event cards, scratch cards ===== */
#book{ background:linear-gradient(180deg, var(--ivory), #F1EDE0 60%, var(--ivory)) }
.book-wrap{ position:relative; max-width:1120px; margin:0 auto; padding:0 clamp(14px,5vw,64px) }
.book{ position:relative; height:clamp(580px,72vh,680px); perspective:1900px }
.page{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:20px;
  background:linear-gradient(90deg,#FFFCF7 0%,#FBF4EC 49%,#F3E4DC 50%,#FFFCF7 51%,#FBF4EC 100%);
  box-shadow:0 0 0 1px rgba(194,161,92,.45), 0 40px 80px rgba(140,75,91,.22);
  opacity:0; pointer-events:none; transform:rotateY(-30deg) scale(.9); transform-origin:center;
  transition:opacity .6s ease, transform .75s cubic-bezier(.3,.8,.25,1) }
.page.active{ opacity:1; pointer-events:auto; transform:none; z-index:3 }
.page.prev{ opacity:.22; transform:rotateY(34deg) translateX(-12%) scale(.9); z-index:2 }
.page.next{ opacity:.22; transform:rotateY(-34deg) translateX(12%) scale(.9); z-index:2 }
.page::after{ content:""; position:absolute; left:50%; top:26px; bottom:26px; width:0; border-left:1px solid rgba(194,161,92,.5);
  box-shadow:-3px 0 12px rgba(140,75,91,.08), 3px 0 12px rgba(140,75,91,.08) }
.page .ph{ height:100% }
.pg-text{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,4vw,52px); text-align:left }
.pg-num{ margin:0; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-d); font-weight:500 }
.pg-year{ display:inline-block; align-self:flex-start; margin:10px 0 0; padding:4px 12px; border:1px solid rgba(194,161,92,.6); border-radius:999px;
  font-family:var(--title); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--emerald) }
.pg-title{ margin:12px 0 10px; font-family:var(--serif); font-weight:500; font-size:clamp(30px,3.4vw,44px); line-height:1.05; color:var(--emerald) }
.pg-body{ margin:0; font-size:16.5px; line-height:1.75; color:var(--ink) }
.pg-quote{ margin:18px 0 0; font-family:var(--script); font-size:clamp(25px,2.6vw,32px); line-height:1.25; color:var(--gold-d) }
.pg-caption{ position:absolute; left:clamp(26px,4vw,52px); bottom:22px; margin:0; font-family:var(--hand); font-size:20px; color:var(--ink-2) }
.pg-orn{ position:absolute; right:clamp(26px,4vw,52px); bottom:20px; width:44px; opacity:.7 }
.pg{ position:absolute; top:50%; z-index:6; width:52px; height:52px; margin-top:-26px; border-radius:50%; cursor:pointer;
  border:1px solid var(--gold); background:rgba(255,254,248,.95); color:var(--emerald); font-size:26px; line-height:1;
  box-shadow:0 10px 24px rgba(140,75,91,.18); transition:transform .25s, opacity .25s }
.pg:hover{ transform:scale(1.08) } .pg[disabled]{ opacity:.3; cursor:default }
.pg.prev{ left:0 } .pg.next{ right:0 }
.thread-nav{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:34px }
.thread-line{ position:relative; width:min(560px,78vw); height:2px; background:rgba(194,161,92,.25); border-radius:2px }
.thread-line i{ position:absolute; left:0; top:-1px; height:4px; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l)); box-shadow:0 0 10px rgba(228,206,140,.9); transition:width .7s cubic-bezier(.3,.8,.25,1) }
.dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--gold); background:transparent; cursor:pointer; transition:.3s }
.dots button.on{ background:var(--gold); transform:scale(1.4) }
@media (max-width:900px){
  .book-wrap{ padding:0 0 78px }
  .book{ display:flex; gap:14px; height:auto; padding:6px 0 12px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; perspective:none;
    scroll-padding-inline:7vw }
  .book::-webkit-scrollbar{ display:none }
  .page{ position:relative; inset:auto; flex:0 0 auto; width:min(86vw,430px); display:grid !important;
    grid-template-columns:1fr; scroll-snap-align:center; opacity:1 !important; transform:none !important; transition:none }
  .page:first-child{ margin-left:7vw } .page:last-child{ margin-right:7vw }
  .page::after{ display:none }
  .page .ph{ height:clamp(300px,64vw,430px) }
  .pg{ width:44px; height:44px; font-size:22px; top:auto; bottom:-62px; margin:0 }
  .pg.prev{ left:calc(50% - 60px) } .pg.next{ right:calc(50% - 60px) }
  .thread-nav{ margin-top:86px }
  .pg-caption{ position:static; margin:16px 0 0 } .pg-orn{ display:none }
  .swipe-hint{ display:block }
}
@keyframes pageIn{ from{ opacity:0; transform:translateY(16px) } }

/* ---------- event cards ---------- */
.ev-group{ max-width:1160px; margin:0 auto clamp(40px,6vw,64px); padding:0 22px }
.ev-group-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:0 0 18px; margin-bottom:26px; border-bottom:1px solid rgba(194,161,92,.4) }
.ev-group-head .line{ margin:0; font-family:var(--script); font-size:30px; line-height:1; color:var(--gold-d) }
.ev-group-head h3{ margin:0; font-family:var(--title); font-size:23px; font-weight:600; letter-spacing:.18em; color:var(--emerald) }
.ev-group-head h3 .native{ margin-right:12px; font-size:19px; letter-spacing:0 }
.ev-group-head small{ margin-left:auto; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }
.ev-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,320px)); justify-content:center; gap:24px }
.ev-card{ position:relative; overflow:hidden; border-radius:22px; background:var(--paper); border:1px solid rgba(194,161,92,.45);
  box-shadow:0 20px 44px rgba(140,75,91,.1); display:flex; flex-direction:column }
.ev-card.main{ box-shadow:0 0 0 1.5px var(--gold), 0 26px 52px rgba(140,75,91,.16) }
.ev-card .ph{ aspect-ratio:4/3 }
.ev-badge{ position:absolute; left:16px; top:16px; z-index:3; width:62px; height:62px; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:rgba(247,243,232,.95); border:1px solid var(--gold); box-shadow:0 8px 18px rgba(8,25,15,.25) }
.ev-badge b{ display:block; font-family:var(--serif); font-size:24px; line-height:1; color:var(--emerald) }
.ev-badge small{ display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-d) }
.ev-card .ev-ic{ position:absolute; right:16px; top:16px; z-index:3; width:34px; height:34px; padding:6px; border-radius:50%; color:var(--gold-l); background:rgba(94,47,58,.55) }
.ev-body{ padding:20px 22px 22px }
.ev-body h4{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.1; color:var(--emerald) }
.ev-body .tag{ padding:3px 9px 2px; border-radius:999px; background:var(--emerald); color:#F6E7C0; font-family:var(--sans); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase }
.ev-body p{ margin:2px 0; font-size:15px; line-height:1.5 }
.ev-body .time{ font-weight:500; color:var(--ink) }
.ev-body .venue{ margin-top:8px; font-family:var(--serif); font-size:19px; font-style:italic; line-height:1.3 }
.ev-body .addr{ font-size:13px; color:var(--ink-2) }
.ev-body .note{ margin-top:6px; font-size:13px; font-style:italic; color:var(--gold-d) }
.ev-body .dir{ margin-top:12px }
.ev-group.gujarat .ev-group-head{ border-color:rgba(194,161,92,.6) }

/* ---------- scratch cards ---------- */
#dates{ background:linear-gradient(180deg,#F1EDE0, var(--ivory)) }
.scratch-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; max-width:880px; margin:0 auto; padding:0 22px }
.scratch{ position:relative; min-height:264px; border-radius:22px; overflow:hidden; background:var(--paper);
  border:1px solid rgba(194,161,92,.5); box-shadow:0 22px 48px rgba(140,75,91,.12) }
.sc-under{ position:absolute; inset:0; display:grid; align-content:center; gap:6px; padding:30px 26px; text-align:center }
.sc-under .date{ margin:0; font-family:var(--serif); font-size:clamp(26px,3vw,34px); font-weight:600; line-height:1.15; color:var(--emerald) }
.sc-under .detail{ margin:0; font-size:14.5px; color:var(--ink) }
.sc-under .venue{ margin:6px 0 0; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-2) }
.sc-canvas{ position:absolute; inset:0; z-index:2; cursor:grab; touch-action:none; transition:opacity .7s ease }
.scratch.done .sc-canvas{ opacity:0; pointer-events:none }
.sc-reveal{ position:absolute; right:12px; bottom:10px; z-index:3; border:0; background:none; cursor:pointer; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); text-decoration:underline }
.scratch.done .sc-reveal{ display:none }
.countdown{ display:flex; justify-content:center; gap:clamp(8px,3vw,24px); margin:48px 0 6px; flex-wrap:wrap }
.countdown div{ min-width:78px; padding:14px 8px; border-radius:16px; background:var(--paper); border:1px solid rgba(194,161,92,.45) }
.countdown b{ display:block; font-family:var(--serif); font-size:clamp(30px,4vw,42px); font-weight:500; line-height:1; color:var(--emerald); font-variant-numeric:tabular-nums }
.countdown small{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2) }
.cd-note{ text-align:center; margin:0; font-family:var(--hand); font-size:21px; color:var(--gold-d) }

/* ---------- event flip cards ---------- */
.ev-grid{ grid-template-columns:repeat(auto-fit,minmax(248px,290px)) }
.ev-flip{ position:relative; height:300px; perspective:1400px; cursor:pointer; outline:none }
.ev-flip:focus-visible .face{ box-shadow:0 0 0 3px rgba(194,161,92,.55) }
.flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.3,.85,.25,1) }
.ev-flip.flipped .flip-inner{ transform:rotateY(180deg) }
.face{ position:absolute; inset:0; display:flex; flex-direction:column; border-radius:22px; padding:28px 24px;
  background:var(--paper); border:1px solid rgba(194,161,92,.55); box-shadow:0 20px 44px rgba(140,75,91,.12);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden }
.face::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(194,161,92,.45); border-radius:15px; pointer-events:none }
.face.front{ align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, #FFFCF7 0%, #FBF1E6 65%, #F5E3DC 100%) }
.face.front .ev-ic{ position:static; width:38px; height:38px; margin:0 0 14px; padding:0; background:none; color:var(--gold-d) }
.face.front h4{ margin:0; font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.05; color:var(--emerald) }
.face.front .tag{ margin-top:8px; padding:3px 10px 2px; border-radius:999px; background:var(--emerald); color:#FBEFD6;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase }
.face.front .f-date{ margin:10px 0 0; font-family:var(--title); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-d) }
.face.back{ transform:rotateY(180deg); justify-content:center; text-align:left;
  background:radial-gradient(120% 90% at 50% 0%, #FFFCF7 0%, #FBF4EC 100%) }
.face.back h4{ margin:0 0 8px; font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.1; color:var(--emerald) }
.face.back p{ margin:2px 0; font-size:14.5px; line-height:1.5 }
.face.back .time{ font-weight:500; color:var(--ink) }
.face.back .venue{ margin-top:8px; font-family:var(--serif); font-size:18px; font-style:italic; line-height:1.3 }
.face.back .addr{ font-size:12.5px; color:var(--ink-2) }
.face.back .note{ margin-top:6px; font-size:12.5px; font-style:italic; color:var(--gold-d) }
.face.back .dir{ margin-top:12px; align-self:flex-start }
.face .hint{ position:absolute; left:0; right:0; bottom:18px; text-align:center; font-family:var(--hand); font-size:17px; color:var(--gold-d); opacity:.85 }
.ev-flip.main .face.front{ box-shadow:0 0 0 1.5px var(--gold), 0 26px 52px rgba(140,75,91,.16) }
@media (max-width:560px){ .ev-flip{ height:280px } .face.front h4{ font-size:30px } }

/* ---------- countdown appears after a scratch ---------- */
.cd-hint{ margin:44px 0 0; text-align:center; font-family:var(--hand); font-size:22px; color:var(--gold-d); transition:opacity .6s, margin .6s, max-height .6s; max-height:60px }
.cd-hint.gone{ opacity:0; max-height:0; margin:0; overflow:hidden }
#cdWrap{ opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1) }
#cdWrap.show{ opacity:1; transform:none; pointer-events:auto }


.swipe-hint{ display:none; margin:14px 0 0; text-align:center; font-family:var(--hand); font-size:19px; color:var(--gold-d); opacity:.8 }

/* ===================== neon event cards ===================== */
.ev-flip{ height:322px }
.ev-flip .face.front{
  background:linear-gradient(160deg,#6E3746 0%,#8C4B5B 45%,#5E2F3A 100%);
  border:1px solid rgba(235,217,168,.7);
  box-shadow:0 0 22px rgba(194,161,92,.35), inset 0 0 26px rgba(0,0,0,.28), 0 24px 46px rgba(94,47,58,.28);
  overflow:hidden;
}
.ev-flip .face.front::before{ inset:10px; border:1px solid rgba(235,217,168,.55); border-radius:14px;
  box-shadow:0 0 12px rgba(235,217,168,.35), inset 0 0 12px rgba(235,217,168,.18) }
.ev-flip .face.front::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,244,214,.16) 47%,transparent 62%);
  transform:translateX(-130%); animation:sheen 7s ease-in-out infinite }
@keyframes sheen{ 45%{ transform:translateX(130%) } 100%{ transform:translateX(130%) } }
.ev-flip .face.front h4{ color:#FBEFD6; text-shadow:0 0 10px rgba(251,239,214,.6), 0 0 26px rgba(235,217,168,.45) }
.ev-flip .face.front .f-date{ color:var(--gold-l); text-shadow:0 0 12px rgba(235,217,168,.5) }
.ev-flip .face.front .hint{ color:rgba(251,239,214,.8) }
.ev-flip .face.front .tag{ background:rgba(251,239,214,.15); color:#FBEFD6; border:1px solid rgba(235,217,168,.6);
  box-shadow:0 0 12px rgba(235,217,168,.35) }
.ev-flip .face.front .ev-ic{ width:46px; height:46px; padding:9px; border-radius:50%; color:var(--gold-l);
  border:1px solid rgba(235,217,168,.65); background:rgba(0,0,0,.18);
  box-shadow:0 0 16px rgba(235,217,168,.45), inset 0 0 12px rgba(235,217,168,.25) }
.ev-flip .face.back{ border:1px solid rgba(194,161,92,.6); box-shadow:0 0 18px rgba(194,161,92,.28), 0 20px 44px rgba(140,75,91,.14) }
.ev-flip:hover .face.front, .ev-flip:focus-visible .face.front{ box-shadow:0 0 34px rgba(235,217,168,.55), inset 0 0 26px rgba(0,0,0,.28), 0 26px 52px rgba(94,47,58,.32) }
.ev-flip.main .face.front{ box-shadow:0 0 30px rgba(235,217,168,.5), inset 0 0 26px rgba(0,0,0,.3), 0 26px 52px rgba(94,47,58,.3) }
.ev-flip.main .face.front h4{ text-shadow:0 0 12px rgba(251,239,214,.75), 0 0 30px rgba(235,217,168,.55) }
.ev-group-head h3{ text-shadow:0 0 16px rgba(194,161,92,.3) }
.pg-title, .foot-script{ text-shadow:0 0 18px rgba(194,161,92,.22) }
.sc-under .date{ text-shadow:0 0 16px rgba(194,161,92,.25) }
.ev-flip .face.front .hint{ color:#FBEFD6; opacity:.92; text-shadow:0 0 10px rgba(235,217,168,.55) }
.sc-reveal{ color:#FFF6E6; text-shadow:0 1px 6px rgba(94,47,58,.8); opacity:.9 }
.sc-reveal:hover{ opacity:1 }
@media (max-width:820px){
  .ev-group-head{ align-items:flex-start }
  .ev-group-head small{ margin-left:0; flex-basis:100%; margin-top:4px }
  .ev-group-head h3{ font-size:20px; letter-spacing:.14em }
}