/* Nakshatra Night */
:root {
  --night: #070b1f; --night-2: #111a44; --star: #e9d8a6; --peri: #9db4ff; --moon: #f4e7c3;
  --bg: var(--night); --ink: #ece6d6; --muted: rgba(236, 230, 214, .66); --accent: var(--star); --accent-ink: #0b0f26;
  --card: rgba(157, 180, 255, .06); --line: rgba(157, 180, 255, .2);
  --font-display: "Forum", Georgia, serif; --font-body: "Raleway", system-ui, sans-serif; --font-script: "Forum", serif;
  --font-label: "Raleway", system-ui, sans-serif; --font-ta: "Noto Serif Tamil", serif; --radius: 18px;
}
body { font-size: 17px; font-weight: 300; }
.sec h2 { color: var(--star); letter-spacing: .04em; }
.sec h2 [lang="ta"] { font-family: var(--font-ta); font-size: .66em; }
.eyebrow { color: var(--peri); letter-spacing: .34em; font-weight: 400; }

.nk-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.nk-s1 { animation: nk-tw 3.2s ease-in-out infinite; }
.nk-s2 { animation: nk-tw 4.6s ease-in-out infinite 1s; }
@keyframes nk-tw { 50% { opacity: .15; } }
.nk-moon { width: 82px; filter: drop-shadow(0 0 22px rgba(244,231,195,.55)); }

/* ---------- intro ---------- */
.nk-intro { background: radial-gradient(ellipse at 50% 20%, var(--night-2), var(--night) 70%); overflow: hidden; transition: opacity .8s ease 1.4s, visibility 0s linear 2.3s; }
.nk-intro .nk-field { transition: transform 1.8s cubic-bezier(.6, 0, .2, 1), opacity 1.4s; }
.nk-intro .nk-moon { position: absolute; top: 7%; right: 12%; transition: transform 1.6s, opacity 1s; }
.nk-initials { position: absolute; left: 50%; top: 30%; width: min(92vw, 520px); transform: translate(-50%, -50%); overflow: visible; transition: transform 1.6s cubic-bezier(.6, 0, .2, 1), opacity 1s .4s; }
.nk-initials text { font-family: "Forum", Georgia, serif; font-size: 190px; fill: none; letter-spacing: 20px; }
.nk-lines { stroke: rgba(157,180,255,.35); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: nk-draw 3.4s ease forwards .4s; }
.nk-stars { stroke: #fffbe9; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 26; filter: drop-shadow(0 0 4px #fff); animation: nk-twinkle 2.6s ease-in-out infinite; }
@keyframes nk-draw { to { stroke-dashoffset: 0; } }
@keyframes nk-twinkle { 50% { stroke-width: 3.6; opacity: .75; } }
.nk-cover { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 0 24px max(7vh, 40px); transition: opacity .5s; }
.nk-kicker { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--peri); }
.nk-kicker [lang="ta"] { letter-spacing: 0; font-size: 14px; font-family: var(--font-ta); }
.nk-title { font-family: var(--font-display); font-size: clamp(44px, 11vw, 76px); line-height: 1.05; margin: 6px 0; color: var(--moon); }
.nk-title [lang="ta"] { font-family: var(--font-ta); font-size: .55em; line-height: 1.5; }
.nk-names { color: var(--muted); font-size: 18px; letter-spacing: .1em; margin-bottom: 22px; }
.nk-cta { background: transparent; color: var(--moon); border: 1px solid var(--star); box-shadow: 0 0 24px rgba(233,216,166,.25), inset 0 0 18px rgba(233,216,166,.12); }
.nk-lang { margin-top: 12px; background: transparent; color: var(--peri); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
html.intro-opening .nk-cover { opacity: 0; }
html.intro-opening .nk-intro .nk-field { transform: scale(2.6); opacity: 0; }
html.intro-opening .nk-initials { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
html.intro-opening .nk-intro .nk-moon { transform: translate(30px, -60px); opacity: 0; }
html.intro-opening .nk-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.nk-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, var(--night-2), var(--night) 70%); }
.nk-hero-body { position: relative; text-align: center; padding: 70px var(--gutter); }
.nk-hero .nk-moon { margin: 0 auto 26px; }
.nk-lead { color: var(--muted); max-width: 460px; margin: 12px auto 30px; }
.nk-hero .name { font-size: clamp(56px, 13vw, 108px); letter-spacing: .08em; color: var(--moon); text-shadow: 0 0 30px rgba(244,231,195,.25); }
.nk-hero .name [lang="ta"] { font-family: var(--font-ta); font-size: .5em; letter-spacing: 0; line-height: 1.7; display: inline-block; }
.nk-hero .weds { font-family: var(--font-label); letter-spacing: .5em; text-transform: uppercase; font-size: 12px; color: var(--peri); margin: 12px 0; display: flex; gap: 12px; align-items: center; justify-content: center; }
.nk-hero .weds::before, .nk-hero .weds::after { content: "✦"; color: var(--star); letter-spacing: 0; }
.nk-date { margin-top: 28px; letter-spacing: .3em; text-transform: uppercase; color: var(--star); font-size: 14px; }
.nk-date [lang="ta"] { letter-spacing: .02em; }

/* ---------- sections ---------- */
.nk-band { background: var(--night); }
.nk-deep { background: linear-gradient(180deg, var(--night), var(--night-2) 50%, var(--night)); }
.scratch { --foil-1: #1b2350; --foil-2: #4a5aa8; --foil-3: #0e1433; --foil-label: "Clear the clouds"; --burst: #fffbe9, #e9d8a6, #9db4ff; background: var(--card); border: 1px solid var(--line); border-radius: 24px; }
.event { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; backdrop-filter: blur(4px); }
.event.is-main { border-color: var(--star); box-shadow: 0 0 30px -10px rgba(233,216,166,.35); }
.event-date b { color: var(--star); font-family: var(--font-display); }
.cd-cell { background: var(--card); border: 1px solid var(--line); border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; padding: 0; }
.cd-cell b { color: var(--moon); font-family: var(--font-display); font-size: clamp(30px, 8vw, 56px); }
.cd-cell small { font-size: 9.5px; }
.venue, .note { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 6vw, 48px) 20px; }
.map { filter: invert(.9) hue-rotate(190deg) saturate(.6); }
.signature { font-family: var(--font-display); color: var(--star); }
.foot { background: var(--night); }
.foot-names { color: var(--moon); letter-spacing: .06em; }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
}