/* Kolam at Dawn */
:root {
  --earth: #7c2d12; --earth-dk: #5a1f0b; --rice: #fdf6ec; --turmeric: #e9c46a; --kumkum: #c1121f;
  --bg: var(--rice); --ink: #3b1a0c; --muted: #7d5a48; --accent: var(--earth); --accent-ink: var(--rice);
  --card: #fffdf8; --line: rgba(124, 45, 18, .18);
  --font-display: "Cormorant SC", Georgia, serif; --font-body: "EB Garamond", Georgia, serif; --font-script: "EB Garamond", serif;
  --font-label: "Cormorant SC", Georgia, serif; --font-ta: "Noto Serif Tamil", serif; --radius: 2px;
}
body { font-size: 19px; }
.eyebrow { font-size: 15px; letter-spacing: .24em; text-transform: lowercase; }
.sec h2 { letter-spacing: .04em; }

/* ---------- intro: the kolam draws itself ---------- */
.kl-intro { overflow: hidden; transition: opacity .9s ease 1.3s, visibility 0s linear 2.2s; }
.kl-floor { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #93391a, var(--earth) 55%, var(--earth-dk)); }
.kl-floor::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .05 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kl-big { position: absolute; left: 50%; top: 34%; width: min(78vw, 380px); transform: translate(-50%, -50%); color: var(--rice); filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); transition: transform 1.6s cubic-bezier(.5, 0, .2, 1), opacity 1s ease .6s; }
.kl-draw .kl-lines > * { stroke-dasharray: 400; stroke-dashoffset: 400; animation: kl-draw 3.2s ease forwards; }
.kl-draw .kl-lines > :nth-child(3n) { animation-delay: .5s; }
.kl-draw .kl-lines > :nth-child(3n+1) { animation-delay: 1s; }
.kl-draw .kl-lines path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation-duration: 2.4s; animation-delay: 0s; }
.kl-draw .kl-dots circle { opacity: 0; animation: kl-dot .4s ease forwards; }
.kl-draw .kl-dots circle:nth-child(odd) { animation-delay: .15s; }
@keyframes kl-draw { to { stroke-dashoffset: 0; } }
@keyframes kl-dot { to { opacity: 1; } }
.kl-cover { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px max(7vh, 40px); text-align: center; color: var(--rice); transition: opacity .5s; }
.kl-kicker { font-family: var(--font-label); font-size: 18px; letter-spacing: .2em; color: var(--turmeric); }
.kl-title { font-family: var(--font-display); font-size: clamp(40px, 10vw, 68px); line-height: 1.05; margin: 6px 0; }
.kl-title [lang="ta"], .kl-kicker [lang="ta"] { font-size: .6em; letter-spacing: 0; line-height: 1.5; }
.kl-names { font-style: italic; font-size: 22px; opacity: .9; margin-bottom: 22px; }
.kl-cta { background: var(--rice); color: var(--earth); font-weight: 600; }
.kl-lang { margin-top: 12px; background: transparent; color: var(--rice); border: 1px solid rgba(253,246,236,.4); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
html.intro-opening .kl-cover { opacity: 0; }
html.intro-opening .kl-big { transform: translate(-50%, -40%) scale(3.2) rotate(45deg); opacity: 0; }
html.intro-opening .kl-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.kl-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: var(--rice);
  background: radial-gradient(ellipse at 50% 30%, #93391a, var(--earth) 60%, var(--earth-dk)); }
.kl-corner { position: absolute; width: 340px; color: rgba(253,246,236,.85); }
.kl-c1 { top: -150px; left: -150px; }
.kl-c2 { bottom: -150px; right: -150px; }
.kl-hero-body { position: relative; text-align: center; padding: 80px var(--gutter); max-width: 760px; }
.kl-hero .eyebrow { color: var(--turmeric); }
.kl-lead { font-style: italic; opacity: .85; margin: 12px auto 34px; max-width: 480px; }
.kl-hero .name { font-size: clamp(54px, 13vw, 100px); letter-spacing: .02em; }
.kl-hero .name [lang="ta"] { font-family: var(--font-ta); font-size: .5em; line-height: 1.7; display: inline-block; }
.kl-hero .parents { color: rgba(253,246,236,.75); }
.kl-hero .weds { font-family: var(--font-body); font-style: italic; color: var(--turmeric); font-size: 24px; }
.kl-pulli { display: flex; justify-content: center; gap: 16px; margin: 30px 0 14px; }
.kl-pulli i { width: 6px; height: 6px; border-radius: 50%; background: var(--rice); }
.kl-pulli i:nth-child(3) { background: var(--kumkum); box-shadow: 0 0 0 3px rgba(193,18,31,.25); }
.kl-date { font-family: var(--font-label); font-size: 22px; letter-spacing: .14em; }

/* ---------- bands: whitewashed wall / red-earth floor ---------- */
.kl-earth { background: var(--earth); color: var(--rice); --ink: var(--rice); --muted: rgba(253,246,236,.72); --line: rgba(253,246,236,.22); --accent: var(--turmeric); --accent-ink: var(--earth-dk); --card: rgba(0,0,0,.12);
  background-image: radial-gradient(circle, rgba(253,246,236,.22) 1.5px, transparent 2px); background-size: 34px 34px; }
.kl-wall { background: var(--rice); }
.kl-wall .sec h2 { color: var(--earth); }
.sec-head h2::after { content: "· · ·"; display: block; font-size: 20px; letter-spacing: .4em; color: var(--kumkum); margin-top: 6px; }
.scratch { --foil-1: #d8c9b0; --foil-2: #fffaf0; --foil-3: #bfae92; --foil-label: "Sweep the rice flour"; --burst: #fdf6ec, #e9c46a, #c1121f, #7c2d12; background: var(--card); border: 1px dashed var(--accent); border-radius: 0; }
.kl-earth .scratch { background: rgba(0,0,0,.15); }
.event { border-bottom: 1px dashed var(--line); padding-bottom: 22px; }
.event-date b { color: var(--accent); }
.cd-cell { border: 2px dotted var(--line); border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; padding: 0; }
.venue h3 { color: var(--accent); }
.note { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; }
.signature { font-family: var(--font-display); color: var(--accent); }
.foot-names { color: var(--rice); }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .cd-cell b { font-size: 30px; }
}