/* Mayil */
:root {
  --teal-dk: #063a3f; --teal: #0b6e75; --sapphire: #1d3fa5; --bronze: #c8a24a; --emerald: #0f5a3c; --leaf: #6ea83a;
  --bg: var(--teal-dk); --ink: #eef3ea; --muted: rgba(238, 243, 234, .7); --accent: #e0bd6a; --accent-ink: #0b1d1f;
  --card: rgba(255, 255, 255, .05); --line: rgba(200, 162, 74, .3);
  --font-display: "Prata", Georgia, serif; --font-body: "Nunito", system-ui, sans-serif; --font-script: "Prata", serif;
  --font-label: "Nunito", system-ui, sans-serif; --font-ta: "Mukta Malar", sans-serif; --radius: 20px;
  --iris: conic-gradient(from 0deg, #0b6e75, #1d3fa5, #6ea83a, #c8a24a, #0b6e75);
}
body { font-size: 17px; background: var(--teal-dk); }
.sec h2 { color: var(--accent); }
.sec h2 [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .66em; }
.eyebrow { color: #8fd3c9; letter-spacing: .3em; font-weight: 600; }

/* ---------- intro: the fan ---------- */
.pk-intro { background: radial-gradient(ellipse at 50% 100%, #0e5a60, var(--teal-dk) 60%, #021a1d); overflow: hidden; transition: opacity .8s ease 1.5s, visibility 0s linear 2.3s; }
.pk-fan { position: absolute; left: 50%; bottom: -6%; width: 0; height: 0; }
.pk-f { position: absolute; left: -38px; bottom: 0; width: 76px; height: auto; transform-origin: 50% 100%; transform: rotate(calc(var(--a) * .35)); filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  transition: transform 1.2s cubic-bezier(.3, .8, .2, 1) var(--d); animation: pk-sway 5s ease-in-out infinite; }
.pk-f { width: min(22vw, 120px); left: calc(min(22vw, 120px) / -2); }
@keyframes pk-sway { 50% { rotate: 1.5deg; } }
.pk-cover { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: max(8vh, 46px) 24px 0; transition: opacity .5s; }
.pk-kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #8fd3c9; }
.pk-kicker [lang="ta"] { font-family: var(--font-ta); letter-spacing: 0; font-size: 14px; }
.pk-title { font-family: var(--font-display); font-size: clamp(42px, 10vw, 72px); line-height: 1.08; margin: 8px 0; background: linear-gradient(180deg, #f3dc94, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-title [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .55em; line-height: 1.5; }
.pk-names { font-size: 19px; color: var(--muted); margin-bottom: 20px; }
.pk-cta { background: var(--iris); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset, 0 14px 30px -12px rgba(0,0,0,.6); }
.pk-lang { margin-top: 12px; background: rgba(0,0,0,.25); color: #cfe9e4; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
html.intro-opening .pk-cover { opacity: 0; }
html.intro-opening .pk-f { transform: rotate(var(--a)) scale(1.5); animation: none; }
html.intro-opening .pk-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.pk-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 110%, #0e6a66, var(--teal-dk) 55%); }
.pk-hero-fan { position: absolute; left: 50%; bottom: -60px; width: 0; height: 0; opacity: .32; }
.pk-hf { position: absolute; left: -70px; bottom: 0; width: 140px; transform-origin: 50% 100%; transform: rotate(var(--a)); }
.pk-hero-body { position: relative; text-align: center; padding: 70px var(--gutter) 120px; }
.pk-lead { color: var(--muted); max-width: 460px; margin: 12px auto 30px; }
.pk-hero .name { font-size: clamp(56px, 13vw, 108px); background: linear-gradient(180deg, #f6e2a2, var(--bronze) 60%, #8a6a22); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-hero .name [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .5em; line-height: 1.7; display: inline-block; }
.pk-hero .weds { color: #8fd3c9; font-family: var(--font-display); font-size: 26px; margin: 8px 0; }
.pk-hero .weds [lang="ta"] { font-family: var(--font-ta); font-size: 16px; }
.pk-date { margin-top: 28px; display: inline-block; padding: 10px 22px; border-radius: 999px; background: linear-gradient(var(--teal-dk), var(--teal-dk)) padding-box, var(--iris) border-box; border: 2px solid transparent; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; }
.pk-date [lang="ta"] { letter-spacing: 0; }

/* ---------- sections ---------- */
.pk-band { background: var(--teal-dk); }
.pk-emerald { background: linear-gradient(180deg, #0a4a48, var(--emerald)); }
.scratch { --foil-1: #0b6e75; --foil-2: #6fd1c4; --foil-3: #1d3fa5; --foil-label: "Brush the feather"; --burst: #c8a24a, #6ea83a, #1d3fa5, #0b6e75; background: var(--card); border-radius: 24px;
  border: 2px solid transparent; background: linear-gradient(#0a4247, #0a4247) padding-box, var(--iris) border-box; }
.event { border-radius: 22px; padding: 22px; border: 2px solid transparent; background: linear-gradient(rgba(6,58,63,.92), rgba(6,58,63,.92)) padding-box, var(--iris) border-box; }
.event-date b { color: var(--accent); font-family: var(--font-display); }
.cd-cell { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 40%, var(--sapphire) 0 28%, var(--teal) 29% 52%, var(--bronze) 53% 60%, rgba(110,168,58,.6) 61%); }
.cd-cell b { color: #fff; font-family: var(--font-display); text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cd-cell small { color: #fff; }
.venue, .note { border-radius: 26px; padding: clamp(28px, 6vw, 48px) 20px; border: 2px solid transparent; background: linear-gradient(#0a4247, #0a4247) padding-box, var(--iris) border-box; }
.signature { font-family: var(--font-display); color: var(--accent); }
.foot-names { color: var(--bronze); }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
}
.pk-f, .pk-hf { max-width: none; }