/* Seashore */
:root {
  --sand: #f6efe3; --sand-2: #ead9bd; --sea: #2b6f8f; --foam: #7fb7c9; --coral: #d9a066; --deep: #17465c;
  --bg: var(--sand); --ink: #1d3b4a; --muted: #5d7480; --accent: var(--sea); --accent-ink: #fff;
  --card: #fffcf6; --line: rgba(43, 111, 143, .2);
  --font-display: "Lustria", Georgia, serif; --font-body: "Figtree", system-ui, sans-serif; --font-script: "Lustria", serif;
  --font-label: "Figtree", system-ui, sans-serif; --font-ta: "Hind Madurai", sans-serif; --radius: 22px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { font-size: 17.5px; background: var(--grain), var(--sand); }
.sec h2 { color: var(--sea); }
.sec h2 [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .66em; }
.eyebrow { color: #a65e26; letter-spacing: .3em; font-weight: 600; }
.cs-w1 { animation: cs-roll 7s ease-in-out infinite alternate; }
.cs-w2 { animation: cs-roll 9s ease-in-out infinite alternate-reverse; }
.cs-w3 { animation: cs-roll 11s ease-in-out infinite alternate; }
@keyframes cs-roll { to { transform: translateX(-60px); } }

/* ---------- intro: the wave ---------- */
.cs-intro { background: var(--grain), linear-gradient(180deg, #f2e6cf, var(--sand-2)); overflow: hidden; transition: opacity .7s ease 1.8s, visibility 0s linear 2.4s; }
.cs-sand .cs-shell { position: absolute; left: 12%; top: 14%; width: 54px; transform: rotate(-20deg); }
.cs-sand .cs-star { position: absolute; right: 12%; top: 20%; width: 50px; transform: rotate(14deg); }
.cs-cover { position: absolute; inset: 0 0 18% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; transition: opacity .5s ease .6s; }
.cs-written { font-family: "Caveat", "Lustria", cursive; font-family: var(--font-display); font-size: clamp(80px, 24vw, 150px); line-height: 1; color: #d9c29a;
  text-shadow: -2px -2px 1px rgba(255,255,255,.7), 2px 2px 2px rgba(120,90,50,.45); letter-spacing: .04em; }
.cs-written span { font-size: .6em; color: #e3a98c; }
.cs-title { font-family: var(--font-display); font-size: clamp(36px, 9vw, 58px); color: var(--deep); line-height: 1.1; margin-top: 10px; }
.cs-title [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .6em; line-height: 1.5; }
.cs-names { color: var(--muted); margin: 6px 0 20px; }
.cs-cta { background: var(--sea); color: #fff; }
.cs-lang { margin-top: 12px; background: rgba(255,255,255,.5); color: var(--deep); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.cs-shore { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; }
.cs-flood { position: absolute; left: 0; right: 0; top: 100%; height: 130%; background: linear-gradient(180deg, transparent 0 120px, var(--foam) 120px, var(--sea)); transition: transform 1.4s cubic-bezier(.5, 0, .3, 1); }
.cs-flood-top { width: 100%; height: 200px; display: block; }
html.intro-opening .cs-flood { transform: translateY(-108%); }
html.intro-opening .cs-cover { opacity: 0; transition-delay: 0s; }
html.intro-opening .cs-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.cs-hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 34vh 1fr; }
.cs-sky { position: relative; background: linear-gradient(180deg, #bfe0ea, #f6dcc3); overflow: hidden; }
.cs-sun { position: absolute; left: 50%; top: 30%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, #ffe3b0, #f7b98a 70%); box-shadow: 0 0 80px #ffd9a8; }
.cs-sea { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 52%; }
.cs-hero-body { text-align: center; padding: 40px var(--gutter) 70px; position: relative; }
.cs-hero-body .cs-shell { width: 44px; margin: 26px auto 0; }
.cs-lead { color: var(--muted); max-width: 460px; margin: 12px auto 28px; }
.cs-hero .name { font-size: clamp(52px, 12vw, 100px); color: var(--deep); }
.cs-hero .name [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .5em; line-height: 1.7; display: inline-block; }
.cs-hero .weds { color: #a65e26; font-family: var(--font-display); font-size: 26px; font-style: italic; }
.cs-hero .weds [lang="ta"] { font-family: var(--font-ta); font-style: normal; font-size: 16px; }
.cs-date { margin-top: 24px; display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--sea); color: #fff; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }
.cs-date [lang="ta"] { letter-spacing: 0; }

/* ---------- sections ---------- */
.cs-ocean { position: relative; background: linear-gradient(180deg, var(--sea), var(--deep)); color: #eef7fa; --ink: #eef7fa; --muted: rgba(238,247,250,.75); --line: rgba(255,255,255,.22); --accent: #ffd9a8; --accent-ink: var(--deep); --card: rgba(255,255,255,.07); }
.cs-ocean .sec h2 { color: #fff; }
.cs-edge { display: block; width: 100%; height: 70px; transform: scaleY(-1); margin-top: -1px; }
.cs-edge path:not([fill="none"]) { fill: var(--sand); }
.cs-edge path[fill="none"] { stroke: #fff; }
.scratch { --foil-1: #d9c29a; --foil-2: #f6efe3; --foil-3: #c4a978; --foil-label: "Brush the sand away"; --burst: #7fb7c9, #2b6f8f, #d9a066, #fff; background: var(--card); border-radius: 26px; box-shadow: 0 20px 40px -30px rgba(23,70,92,.6); }
.event { background: var(--card); border-radius: 22px; padding: 22px; box-shadow: 0 16px 32px -26px rgba(23,70,92,.6); }
.event-date b { color: var(--sea); font-family: var(--font-display); }
.cd-cell { background: var(--card); border: 1px solid var(--line); border-radius: 50% 50% 22px 22px; }
.cd-cell b { color: #fff; font-family: var(--font-display); }
.venue, .note { background: var(--card); border-radius: 28px; padding: clamp(28px, 6vw, 48px) 20px; box-shadow: 0 20px 40px -32px rgba(23,70,92,.6); }
.signature { font-family: var(--font-display); color: var(--sea); font-style: italic; }
.foot-names { color: #fff; }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
}