:root{
  --paper:#FBF0D5; --paper-2:#F4E0B4; --ink:#2B0B12; --ink-soft:#5B2A2F;
  --kumkum:#9B1026; --magenta:#D2196E; --turmeric:#F5B301; --orange:#E8641B;
  --teal:#0E7470; --album:#0E4F4C; --gold:#B7862C; --cream:#FFF6E0;
  --f-ta:"Arima","Latha","Nirmala UI","Tamil Sangam MN",serif;
  --f-body:"Hind Madurai","Latha","Nirmala UI","Tamil MN",system-ui,sans-serif;
  --f-en:"Abril Fatface","Playfair Display",Georgia,serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#22090F;--paper-2:#2F0F18;--ink:#F7E9CC;--ink-soft:#E6CCA8;--kumkum:#F0617A;--gold:#E2B45A;--teal:#5CC9C2}
}
:root[data-theme="dark"]{--paper:#22090F;--paper-2:#2F0F18;--ink:#F7E9CC;--ink-soft:#E6CCA8;--kumkum:#F0617A;--gold:#E2B45A;--teal:#5CC9C2}
*,*::before,*::after{box-sizing:inherit}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.locked{overflow:hidden;height:100%}
img{max-width:100%;display:block}
button,a{font:inherit}
:focus-visible{outline:3px solid var(--turmeric);outline-offset:3px;border-radius:4px}
.ta{font-family:var(--f-ta)}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
.narrow{width:min(720px,100% - 40px);margin-inline:auto}
section{position:relative}

/* film grain, static */
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.08;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* saree zari strip */
.zari{height:26px;background:
 linear-gradient(135deg,var(--turmeric) 25%,transparent 25%) -13px 0/26px 26px,
 linear-gradient(225deg,var(--turmeric) 25%,transparent 25%) -13px 0/26px 26px,
 linear-gradient(315deg,var(--turmeric) 25%,transparent 25%) 0 0/26px 26px,
 linear-gradient(45deg,var(--turmeric) 25%,transparent 25%) 0 0/26px 26px,
 #9B1026;border-block:4px solid #B7862C;position:relative;z-index:2}
.zari.green{background-color:#16613B}
.zari.pink{background-color:#D2196E}

/* gentle scroll reveal */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}

/* ---------- temple door gate ---------- */
#gate{position:fixed;inset:0;z-index:100;overflow:hidden;background:#140805;perspective:1500px;perspective-origin:50% 50%}
.gate-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform:scale(1.12);transform-origin:50% 74%;will-change:transform;filter:brightness(.55)}
#gate.open .gate-photo{transform:scale(3.1);filter:brightness(1.05);transition:transform 3.6s cubic-bezier(.6,0,.2,1) 1.2s,filter 2s ease .8s}
.doors{position:absolute;inset:0;transform-style:preserve-3d}
.door{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform;background-color:#2A1608;background-size:cover;background-repeat:no-repeat;
 box-shadow:inset 0 0 120px rgba(0,0,0,.55);transition:transform 3s cubic-bezier(.55,0,.18,1) .55s}
.door.l{left:0;transform-origin:0 50%;background-image:url("../assets/images/door-left.jpg");background-position:right center}
.door.r{right:0;transform-origin:100% 50%;background-image:url("../assets/images/door-right.jpg");background-position:left center}
.door .edge{position:absolute;top:0;bottom:0;width:46px;background:linear-gradient(90deg,#1E0F05,#4A2A12 50%,#1E0F05)}
.door.l .edge{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.door.r .edge{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.door .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.85));opacity:0;transition:opacity 3s .55s}
.door.r .shade{background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.85))}
#gate.open .door.l{transform:rotateY(-104deg)}
#gate.open .door.r{transform:rotateY(104deg)}
#gate.open .door .shade{opacity:1}
#gate.unlatch .doors{animation:unlatch .5s ease-in-out}
@keyframes unlatch{20%{transform:translateX(-2px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
.beam{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;z-index:1;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,rgba(255,236,180,.0),rgba(255,236,180,.95) 30%,rgba(255,220,140,.95) 70%,rgba(255,236,180,0));
 box-shadow:0 0 40px 18px rgba(255,210,120,.55);transition:opacity .6s ease .5s,transform 2.6s cubic-bezier(.55,0,.18,1) .6s}
#gate.open .beam{opacity:1;transform:scaleX(60)}
#gate.fadebeam .beam{opacity:0;transition:opacity 1.2s ease}
.dust{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity 1s ease 1s}
#gate.open .dust{opacity:1}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,236,190,.9);box-shadow:0 0 6px rgba(255,220,150,.9);animation:mote var(--d) ease-in-out infinite alternate}
@keyframes mote{to{transform:translate3d(var(--mx),var(--my),0)}}
#gate.fade{opacity:0;transition:opacity 1s ease}
.plaque{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);z-index:3;width:min(400px,calc(100% - 44px));text-align:center;
 background:linear-gradient(180deg,#FFF6E0,#F8E6BC);color:#2B0B12;border:3px solid #B7862C;outline:6px solid #3A1F0E;
 border-radius:200px 200px 18px 18px;padding:50px 24px 28px;box-shadow:0 30px 70px rgba(0,0,0,.7);transition:opacity .5s,transform .6s var(--ease)}
#gate.open .plaque{opacity:0;transform:translate(-50%,-48%) scale(.92);pointer-events:none}
.plaque .om{font-family:var(--f-ta);color:#9B1026;font-size:1.05rem}
.plaque h1{font-family:var(--f-ta);font-weight:700;font-size:clamp(2rem,9vw,2.7rem);line-height:1.3;margin:.3em 0 .1em;color:#C2185B;text-shadow:2px 2px 0 #F5B301}
.plaque .names{font-family:var(--f-en);font-size:1.25rem;color:#0E4F4C;margin:.2em 0 1.1em;line-height:1.35}
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;border:0;cursor:pointer;background:#9B1026;color:#FFF6E0;padding:14px 26px;border-radius:999px;font-weight:600;font-size:1.05rem;box-shadow:0 4px 0 #5E0614;transition:transform .15s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5E0614}
.btn small{display:block;font-family:var(--f-ta);font-weight:500;font-size:.85rem;opacity:.9}
.quiet{display:block;margin:14px auto 0;background:none;border:0;color:#5B2A2F;text-decoration:underline;cursor:pointer;font-size:.95rem}

/* ---------- hanging flower garlands ---------- */
.garlands{position:absolute;left:0;right:0;top:0;height:0;z-index:2;pointer-events:none}
.strand{position:absolute;top:-4px;width:30px;margin-left:-15px;transform-origin:50% 0;will-change:transform}
.seg{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.seg::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(80,60,30,.6)}
.seg .seg{position:absolute;left:0;right:0;top:100%}
.lvl{position:relative;display:flex;justify-content:center;height:10px;margin-bottom:1px}
.jas{width:8px;height:14px;margin:0 -1px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
 background:radial-gradient(ellipse at 38% 30%,#FFF 0,#FFFCF2 35%,#EEE7D2 70%,#CFC6A8 100%);box-shadow:0 1px 1.5px rgba(40,30,10,.35)}
.lvl .jas:nth-child(1){transform:rotate(-24deg) translateY(1px)}
.lvl .jas:nth-child(3){transform:rotate(24deg) translateY(1px)}
.rose{width:20px;height:20px;border-radius:50%;margin:2px 0;
 background:
  radial-gradient(circle at 50% 50%,rgba(60,0,10,.6) 0 2px,transparent 3px),
  repeating-radial-gradient(circle at 46% 44%,#E8253F 0 2px,#A50E25 2px 3.5px),
  radial-gradient(circle at 40% 35%,#FF6378,#C4102C 55%,#6E0014);
 box-shadow:0 2px 3px rgba(40,0,10,.45),inset -2px -3px 4px rgba(60,0,10,.5)}
.mari{width:22px;height:22px;border-radius:50%;margin:2px 0;
 background:repeating-conic-gradient(from 8deg,rgba(170,70,0,.45) 0 5deg,transparent 5deg 13deg),radial-gradient(circle at 45% 40%,#FFE16A,#FFA600 50%,#D96200 100%);
 box-shadow:0 2px 3px rgba(60,20,0,.4),inset -2px -2px 4px rgba(120,40,0,.4)}
.tassel{position:relative;width:16px;height:20px;margin-top:1px;border-radius:50% 50% 30% 30%;background:radial-gradient(circle at 40% 30%,#FFF3C4,#E0B04A 45%,#8A6418)}
.tassel::before,.tassel::after{content:"";position:absolute;top:-6px;width:10px;height:16px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#5DAA3C,#2C6B1F)}
.tassel::before{left:-9px;transform:rotate(-30deg)}.tassel::after{right:-9px;transform:scaleX(-1) rotate(-30deg)}
.swag{position:absolute;top:0;left:0;right:0;height:80px;transform-origin:50% 0;animation:swag 6s ease-in-out infinite alternate}
.swag span{position:absolute;margin:-7px 0 0 -7px}
@keyframes swag{from{transform:translateY(0) rotate(-.4deg)}to{transform:translateY(3px) rotate(.4deg)}}
.print .garlands{z-index:3}

/* ---------- falling petals ---------- */
.petals{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-30px;width:14px;height:12px;border-radius:0 80% 0 80%;
 background:radial-gradient(circle at 30% 30%,#FF7A8C,#D0122F 60%,#8A0019);will-change:transform;animation:fall var(--d) linear forwards}
.petal.w{background:radial-gradient(circle at 30% 30%,#FFF,#F3EBD3 70%,#D8CFAF);width:9px;height:13px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%}
.petal.y{background:radial-gradient(circle at 30% 30%,#FFE16A,#FFA600 70%,#D96200);border-radius:40% 60% 40% 60%}
@keyframes fall{
 0%{transform:translate3d(0,0,0) rotate(0)}
 25%{transform:translate3d(var(--sx),27vh,0) rotate(160deg)}
 50%{transform:translate3d(calc(var(--sx) * -.6),55vh,0) rotate(320deg)}
 75%{transform:translate3d(var(--sx),82vh,0) rotate(480deg)}
 100%{transform:translate3d(calc(var(--sx) * .3),112vh,0) rotate(640deg)}}

/* ---------- hero with real gopuram ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;color:#FFF6E0;text-align:center;background:#3A0518}
.hero-bg{position:absolute;inset:-6% 0 -6% 0;will-change:transform;transform:scale(1.08);background:transparent}
.hero-photo{position:absolute;inset:0;background:url("../assets/images/temple-gopuram-wide.jpg") center 60%/cover no-repeat}
@media (max-aspect-ratio:4/5){
 .hero-bg{background:linear-gradient(180deg,#5B1E5E 0%,#B5236B 22%,#EE6A3A 42%,#F7B05B 56%,#F3C98A 70%)}
 .hero-photo{top:auto;height:70%;background:url("../assets/images/temple-gopuram-tall.jpg") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
 .hero::after{content:"";position:absolute;z-index:1;left:50%;top:38%;width:46vw;height:46vw;margin-left:-23vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,170,.95) 0,rgba(255,200,110,.6) 40%,transparent 70%);pointer-events:none;mix-blend-mode:screen}
}
.hero-tint{position:absolute;inset:0;pointer-events:none;
 background:
  radial-gradient(ellipse 80% 45% at 50% 22%,rgba(40,4,18,.62),transparent 72%),
  linear-gradient(180deg,rgba(255,150,60,.18) 0%,transparent 35%,transparent 55%,rgba(58,5,24,.6) 72%,rgba(40,3,16,.92) 100%),
  linear-gradient(110deg,rgba(214,25,110,.28),transparent 30%,transparent 70%,rgba(245,179,1,.25))}
.hero-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;padding:clamp(34px,7vh,72px) 18px 0;will-change:transform,opacity}
.hero .sivam{font-family:var(--f-ta);font-size:1.1rem;color:#FFF3C4;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hero .kicker{font-family:var(--f-ta);font-size:clamp(1.05rem,3.6vw,1.35rem);margin-top:.2em;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.title{font-family:var(--f-ta);font-weight:700;margin:.12em 0 0;line-height:1.25;font-size:clamp(2.3rem,10.5vw,7rem);white-space:nowrap;color:#F5B301;
 text-shadow:3px 3px 0 #D2196E,6px 6px 0 #6A0A2A,10px 12px 22px rgba(0,0,0,.55)}
.title-en{font-family:var(--f-en);font-size:clamp(1.1rem,3.6vw,1.6rem);color:#FFF3C4;margin-top:.1em;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hero-foot{margin-top:auto;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));display:grid;gap:6px;justify-items:center}
.couple .ta{font-size:clamp(1.3rem,4.8vw,2.1rem);font-weight:700;line-height:1.4;text-shadow:0 2px 0 #3A0518,0 4px 14px rgba(0,0,0,.6)}
.couple .en{font-family:var(--f-en);font-size:clamp(1.05rem,3.8vw,1.6rem);line-height:1.3;color:#FFF3C4;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.ribbon{margin-top:12px;display:inline-block;transform:rotate(-2deg);background:#0E7470;color:#FFF6E0;font-family:var(--f-en);font-size:clamp(1.1rem,4vw,1.5rem);padding:8px 26px;border:3px solid #F5B301;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.scroll-cue{margin-top:16px;width:26px;height:42px;border:2px solid rgba(255,246,224,.8);border-radius:14px;position:relative}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#FFF6E0;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
/* entrance */
.hero .intro{opacity:0;transform:scale(1.18)}
body.ready .hero .intro{opacity:1;transform:none;transition:opacity 1s ease-out,transform 1.3s var(--ease)}
body.ready .hero .intro.d2{transition-delay:.3s}
body.ready .hero .intro.d3{transition-delay:.6s}
body.ready .hero .intro.d4{transition-delay:.9s}

/* ---------- birds ---------- */
.sky{position:absolute;inset:0 0 40% 0;z-index:2;pointer-events:none;overflow:hidden}
.flock{position:absolute;left:0;top:var(--y);animation:fly var(--t) linear var(--dl) infinite;will-change:transform;opacity:0}
.flock.rtl{animation-name:flyback}
@keyframes fly{0%{transform:translate3d(-12vw,0,0);opacity:0}6%{opacity:1}50%{transform:translate3d(50vw,-5vh,0)}94%{opacity:1}100%{transform:translate3d(112vw,2vh,0);opacity:0}}
@keyframes flyback{0%{transform:translate3d(112vw,0,0) scaleX(-1);opacity:0}6%{opacity:1}50%{transform:translate3d(50vw,4vh,0) scaleX(-1)}94%{opacity:1}100%{transform:translate3d(-12vw,-3vh,0) scaleX(-1);opacity:0}}
.bird{position:absolute;width:var(--s);height:calc(var(--s) * .5);left:var(--x);top:var(--by);animation:bob 3.2s ease-in-out var(--bd) infinite alternate}
.bird svg{width:100%;height:100%;overflow:visible}
.bird .wing{fill:#2A0C12;transform-origin:50% 60%;animation:flap var(--f) ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
@keyframes bob{to{transform:translateY(10px)}}

/* ---------- invitation text ---------- */
.invite{padding:clamp(60px,9vw,100px) 0;text-align:center;background:radial-gradient(circle at 50% 0,rgba(245,179,1,.18),transparent 60%),var(--paper)}
.lamp{width:54px;margin:0 auto 12px}
.sec-h{font-family:var(--f-ta);font-weight:700;color:var(--kumkum);font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.3;margin:0}
.sub-en{font-family:var(--f-en);color:var(--teal);font-size:clamp(1.05rem,3vw,1.3rem);margin:.2em 0 1.2em}
.para-ta{font-size:clamp(1.05rem,2.9vw,1.2rem);line-height:2;margin:0 0 1.4em;color:var(--ink)}
.para-en{font-size:clamp(1rem,2.7vw,1.1rem);line-height:1.8;color:var(--ink-soft);margin:0}
.para-ta strong,.para-en strong{color:var(--kumkum)}

/* ---------- temple feature (parallax photo band) ---------- */
.temple{position:relative;overflow:hidden;color:#FFF6E0;padding:clamp(80px,14vw,150px) 0;text-align:center;background:#2B0B12}
.px{position:absolute;inset:-18% 0;background-size:cover;background-position:center;will-change:transform}
.temple .px{background-image:url("../assets/images/temple-mandapam.jpg")}
.temple::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,11,18,.75),rgba(43,11,18,.45) 40%,rgba(43,11,18,.8));}
.temple .wrap{position:relative;z-index:2;display:grid;gap:clamp(28px,5vw,56px);align-items:center;grid-template-columns:1fr}
@media (min-width:820px){.temple .wrap{grid-template-columns:1.1fr .9fr;text-align:left}}
.temple .sec-h{color:#F5B301;text-shadow:0 3px 0 #6A0A2A}
.temple .sub-en{color:#BFE6DA}
.temple p{font-size:1.1rem;line-height:1.9;margin:0 0 .6em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.temple .en-p{color:#F3DCC0;font-size:1rem}
.pillar-print{justify-self:center;width:min(300px,72vw);background:#FFF8E6;padding:10px 10px 40px;box-shadow:0 18px 40px rgba(0,0,0,.55);transform:rotate(3deg)}
.pillar-print img{width:100%;height:auto;aspect-ratio:774/1032;object-fit:cover}
.pillar-print span{display:block;text-align:center;color:#9B1026;font-family:var(--f-ta);font-weight:700;padding-top:8px;font-size:1.05rem}

/* ---------- album ---------- */
.album{overflow:hidden;color:#FFF6E0;padding:clamp(60px,9vw,100px) 0;text-align:center;
 background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.07),transparent 40%),repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px),#0E4F4C}
.album .sec-h{color:#F5B301}
.album .sub-en{color:#BFE6DA}
.prints{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(32px,5vw,64px);margin-top:24px}
.print{flex:0 1 360px;max-width:360px;background:#FFF8E6;padding:12px;box-shadow:0 16px 34px rgba(0,0,0,.45);position:relative;margin:0;cursor:zoom-in;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.print.single{flex-basis:420px;max-width:420px;transform:rotate(-1deg)}
.print:hover{transform:rotate(0) translateY(-6px);box-shadow:0 24px 44px rgba(0,0,0,.5)}
.print .ph{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:#d9c9a5}
.print img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.print .c{position:absolute;width:30px;height:30px;background:#1D1A16;z-index:2}
.print .c.tl{top:-4px;left:-4px;clip-path:polygon(0 0,100% 0,0 100%)}
.print .c.tr{top:-4px;right:-4px;clip-path:polygon(0 0,100% 0,100% 100%)}
.print .c.bl{bottom:-4px;left:-4px;clip-path:polygon(0 0,100% 100%,0 100%)}
.print .c.br{bottom:-4px;right:-4px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.print figcaption{color:#2B0B12;padding:12px 4px 4px;line-height:1.4}
.print figcaption .ta{font-size:1.25rem;font-weight:700;color:#9B1026;display:block}
.print figcaption .en{font-size:.95rem;color:#5B2A2F}
.hint{margin-top:22px;font-size:.92rem;color:#BFE6DA}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(20,4,10,.92);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-height:86vh;max-width:min(92vw,620px);width:auto;height:auto;border:10px solid #FFF8E6;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.94);transition:transform .5s var(--ease)}
.lb.on img{transform:none}
.lb button{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;background:#FFF6E0;color:#2B0B12;border:0;border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer}

/* ---------- events tickets ---------- */
.events{padding:clamp(60px,9vw,100px) 0;text-align:center;background:repeating-linear-gradient(-45deg,rgba(210,25,110,.06) 0 14px,transparent 14px 28px),var(--paper-2)}
.tickets{display:grid;gap:34px;margin-top:22px}
.ticket{display:grid;grid-template-columns:1fr auto;text-align:left;color:#2B0B12;border-radius:6px;filter:drop-shadow(0 10px 18px rgba(60,0,20,.25));
 --notch:radial-gradient(circle at 0 50%,transparent 14px,#000 15px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 14px,#000 15px) right/51% 100% no-repeat;
 -webkit-mask:var(--notch);mask:var(--notch)}
.ticket .main{padding:26px 26px 24px 34px;background:var(--tk)}
.ticket .stub{width:118px;background:var(--tk2);border-left:3px dashed rgba(43,11,18,.45);padding:22px 14px 22px 12px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}
.ticket.rec{--tk:#FFC7DA;--tk2:#FFA9C6}
.ticket.muh{--tk:#FFE38A;--tk2:#FFD24D}
.ticket h3{margin:0;font-family:var(--f-ta);font-size:clamp(1.7rem,5.5vw,2.3rem);line-height:1.25;color:#9B1026}
.ticket .en-h{font-family:var(--f-en);font-size:1.2rem;color:#0E4F4C;margin-bottom:12px}
.row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0;align-items:start}
.row .k{font-size:.85rem;font-weight:600;color:#7A1F2D;padding-top:4px;min-width:62px}
.row .v{font-size:1.08rem;line-height:1.55;font-weight:500}
.row .v .ta{display:block;font-family:var(--f-body);font-weight:600}
.big{display:block;font-family:var(--f-en);font-size:1.5rem;line-height:1.2;color:#2B0B12}
.map{display:inline-flex;margin-top:14px;padding:10px 18px;border-radius:999px;background:#0E4F4C;color:#FFF6E0;text-decoration:none;font-weight:600;font-size:.98rem}
.stub .admit{font-family:var(--f-en);font-size:1.05rem;line-height:1.2;color:#9B1026}
.stub .serial{font-family:var(--f-en);font-size:.9rem;color:#5B2A2F;writing-mode:vertical-rl;transform:rotate(180deg)}
.stub .ta{font-size:.95rem;font-weight:700;color:#2B0B12;line-height:1.35}
@media (max-width:560px){
 .ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none;border-radius:14px;overflow:hidden}
 .ticket .main{padding:24px 22px}
 .ticket .stub{width:auto;flex-direction:row;border-left:0;border-top:3px dashed rgba(43,11,18,.45);padding:14px 22px}
 .stub .serial{writing-mode:horizontal-tb;transform:none}
}

/* ---------- countdown over the gopuram ---------- */
.count{overflow:hidden;color:#FFF6E0;text-align:center;padding:clamp(80px,12vw,130px) 0;background:#3A0518}
.count .px{background-image:url("../assets/images/temple-gopuram-tall.jpg");background-position:center 30%}
@media (min-aspect-ratio:1/1){.count .px{background-image:url("../assets/images/temple-gopuram-wide.jpg")}}
.count::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(58,5,24,.82),rgba(106,10,42,.6) 50%,rgba(58,5,24,.85))}
.count .wrap{position:relative;z-index:2}
.count .sec-h{color:#F5B301;text-shadow:0 3px 0 #3A0518}
.count .sub-en{color:#FFD7E6}
.tiles{display:flex;justify-content:center;gap:clamp(8px,2.5vw,18px);flex-wrap:wrap}
.tile{background:#FFF6E0;color:#2B0B12;border-radius:10px;min-width:clamp(70px,19vw,110px);padding:12px 8px 8px;box-shadow:0 6px 0 #3A0518}
.tile b{display:block;font-family:var(--f-en);font-size:clamp(2rem,8vw,3.4rem);line-height:1.1;font-variant-numeric:tabular-nums;font-weight:400}
.tile span{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
.tile small{display:block;font-size:.8rem;color:#5B2A2F}
.done{font-family:var(--f-ta);font-size:1.5rem}

/* ---------- closing + footer ---------- */
.closing{padding:clamp(60px,9vw,100px) 0 clamp(36px,5vw,56px);text-align:center;background:var(--paper)}
.closing .sign{font-family:var(--f-ta);font-weight:700;font-size:clamp(1.5rem,5vw,2.1rem);color:var(--kumkum);line-height:1.4;margin:.6em 0 .1em}
.closing .sign-en{font-family:var(--f-en);font-size:1.2rem;color:var(--ink-soft)}
.thanks{font-size:1.1rem;line-height:1.9;margin:0}
footer{background:var(--paper);padding:0 20px calc(110px + env(safe-area-inset-bottom,0px))}
.foot-card{max-width:520px;margin:0 auto;background:#FFF9EC;border:1.5px solid #B7862C;border-radius:14px;padding:16px 20px 14px;text-align:center;color:#5B2A2F;font-size:.92rem;line-height:1.6}
.foot-card p{margin:0}
.foot-card img{width:120px;height:auto;margin:0 auto 8px}
.foot-card .ft-1{color:#2B0B12;font-weight:500}
.foot-card a{color:#9B1026;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.foot-card .ft-2{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;color:#5B2A2F;font-size:.85rem}
.foot-card .sep{color:#B7862C}
@media (max-width:440px){.foot-card .sep{display:none}.foot-card .ft-2{flex-direction:column;align-items:center}}

/* ---------- music player ---------- */
.player{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
 display:flex;align-items:center;gap:10px;background:#2B0B12;color:#FFF6E0;border:2px solid #F5B301;border-radius:999px;padding:6px 16px 6px 6px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35);
 opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.player.show{opacity:1;transform:none}
.vinyl{width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(circle,#D2196E 0 7px,#F5B301 7px 10px,#111 10px 11px,#1d1d1d 11px 13px,#111 13px 15px,#262626 15px 17px,#111 17px 19px,#222 19px 22px)}
.player.playing .vinyl{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px}
.eq i{width:3px;background:#F5B301;height:4px;border-radius:1px}
.player.playing .eq i{animation:eq .8s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.4s!important}
@keyframes eq{to{height:16px}}
.player .lbl{font-weight:600;font-size:.98rem;line-height:1.2;text-align:left}
.player .lbl small{display:block;font-weight:500;font-size:.78rem;color:#FFD98A}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .flock,.bird,.bird .wing,.player.playing .vinyl,.scroll-cue::after{animation:none}
 .flock{opacity:1;transform:translate3d(40vw,0,0)}
 .rv,.hero .intro{opacity:1;transform:none;transition:none}
 .curtain{transition-duration:.01s}
}


/* ticket details: one English line, one Tamil line */
.info{margin:0;padding:10px 0;border-top:1px dashed rgba(43,11,18,.28)}
.info:first-of-type{border-top:0;padding-top:4px}
.info p{margin:0}
.info b{color:#7A1F2D;font-weight:700}
.en-line{font-size:1.06rem;line-height:1.5;font-weight:500;color:#2B0B12}
.ta-line{font-size:1.02rem;line-height:1.65;font-weight:600;color:#2B0B12;margin-top:2px!important}
.stub .st{display:grid;gap:2px;font-size:.92rem;font-weight:700;line-height:1.3;color:#2B0B12}
/* bride's name: Hind Madurai shapes ஶ்ரீ clearly (Arima does not) */
.sri{font-family:"Hind Madurai","Nirmala UI","Latha",sans-serif;font-weight:700}