/* Art Deco */
:root {
  --lacquer: #0e0e0e; --lacquer-2: #1d1d1b; --brass: #c9a45c; --brass-hi: #ecd49a; --ivory: #efe6d2;
  --bg: var(--lacquer); --ink: var(--ivory); --muted: rgba(239, 230, 210, .65); --accent: var(--brass); --accent-ink: var(--lacquer);
  --card: rgba(201, 164, 92, .06); --line: rgba(201, 164, 92, .4);
  --font-display: "Poiret One", "Josefin Sans", sans-serif; --font-body: "Josefin Sans", system-ui, sans-serif; --font-script: "Poiret One", sans-serif;
  --font-label: "Josefin Sans", system-ui, sans-serif; --font-ta: "Noto Sans Tamil", sans-serif; --radius: 0;
}
body { font-size: 17px; font-weight: 300; }
.sec h2 { text-transform: uppercase; letter-spacing: .14em; color: var(--brass-hi); display: flex; align-items: center; justify-content: center; gap: 16px; font-size: clamp(28px, 5vw, 44px); }
.sec h2::before, .sec h2::after { content: ""; width: 44px; height: 10px; background: linear-gradient(var(--brass), var(--brass)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--brass), var(--brass)) 0 4px / 100% 1px no-repeat, linear-gradient(var(--brass), var(--brass)) 0 8px / 100% 1px no-repeat; }
.sec h2 [lang="ta"] { font-family: var(--font-ta); text-transform: none; letter-spacing: 0; font-size: .66em; }
.eyebrow { color: var(--accent); letter-spacing: .4em; font-weight: 600; }

/* ---------- intro: gates ---------- */
.dc-intro { background: #000; overflow: hidden; transition: opacity .8s ease 1.4s, visibility 0s linear 2.3s; }
.dc-burst { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(236,212,154,.35) 0 2deg, transparent 2deg 10deg), radial-gradient(circle, #ecd49a, #7a5f2a 30%, #000 60%); opacity: .2; transition: opacity 1.2s ease .3s, transform 2.4s ease; }
.dc-gate { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform 1.5s cubic-bezier(.75, 0, .25, 1) .15s; box-shadow: 0 0 0 1px var(--brass); }
.dc-gate-svg { width: 100%; height: 100%; }
.dc-gl { left: 0; } .dc-gr { right: 0; }
.dc-gr .dc-gate-svg { transform: scaleX(-1); }
.dc-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 16px; transition: opacity .5s; }
.dc-medal { width: 128px; height: 128px; transform: rotate(45deg); background: var(--lacquer); border: 2px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 6px; display: grid; place-content: center; grid-auto-flow: column; gap: 6px; }
.dc-medal span { transform: rotate(-45deg); font-family: var(--font-display); font-size: 40px; color: var(--brass-hi); }
.dc-title { margin-top: 26px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(30px, 8vw, 52px); color: var(--ivory); background: rgba(0,0,0,.75); padding: 6px 14px; }
.dc-title [lang="ta"] { font-family: var(--font-ta); letter-spacing: 0; text-transform: none; font-size: .6em; }
.dc-cta { background: var(--brass); color: var(--lacquer); font-weight: 600; border-radius: 0; }
.dc-lang { background: #000; color: var(--brass-hi); border: 1px solid var(--line); padding: 7px 14px; font-size: 14px; }
html.intro-opening .dc-cover { opacity: 0; }
html.intro-opening .dc-gl { transform: translateX(-102%); }
html.intro-opening .dc-gr { transform: translateX(102%); }
html.intro-opening .dc-burst { opacity: 1; transform: rotate(30deg); }
html.intro-opening .dc-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.dc-hero { min-height: 100svh; display: grid; place-items: center; padding: 22px; background: repeating-conic-gradient(from -90deg at 50% 0%, rgba(201,164,92,.12) 0 1.5deg, transparent 1.5deg 9deg), radial-gradient(ellipse at 50% 0%, #2a2214, var(--lacquer) 60%); }
.dc-frame { width: min(100%, 720px); text-align: center; padding: 70px clamp(16px, 5vw, 50px); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 8px;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); background: rgba(0,0,0,.5); }
.dc-lead { color: var(--muted); max-width: 440px; margin: 12px auto 30px; }
.dc-hero .name { font-size: clamp(50px, 12vw, 100px); text-transform: uppercase; letter-spacing: .12em; color: var(--brass-hi); }
.dc-hero .name [lang="ta"] { font-family: var(--font-ta); text-transform: none; letter-spacing: 0; font-size: .5em; line-height: 1.7; display: inline-block; }
.dc-hero .parents { font-style: normal; letter-spacing: .06em; }
.dc-hero .weds { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .5em; font-size: 12px; color: var(--brass); margin: 14px 0; }
.dc-hero .weds [lang="ta"] { letter-spacing: .1em; font-family: var(--font-ta); font-size: 15px; }
.dc-date { margin-top: 30px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivory); border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); padding: 10px 0; }
.dc-date [lang="ta"] { letter-spacing: 0; }

/* ---------- sections ---------- */
.dc-black { background: var(--lacquer); }
.dc-ivory { background: var(--ivory); color: var(--lacquer); --ink: var(--lacquer); --muted: #5c5546; --line: rgba(14,14,14,.25); --accent: #8a6a2a; --accent-ink: var(--ivory); --card: #f8f2e3; }
.dc-ivory .sec h2 { color: var(--lacquer); }
.scratch { --foil-1: #8a6a2a; --foil-2: #ecd49a; --foil-3: #6b5120; --burst: #c9a45c, #ecd49a, #efe6d2, #0e0e0e; background: var(--card); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 5px; border-radius: 0; }
.event { border: 1px solid var(--line); padding: 20px; background: var(--card); }
.event-date b { font-family: var(--font-display); color: var(--accent); }
.event h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.cd-cell { border: 1px solid var(--brass); border-radius: 0; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); background: rgba(201,164,92,.08); }
.cd-cell b { font-family: var(--font-display); color: var(--brass-hi); }
.venue, .note { border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 6px; padding: clamp(28px, 6vw, 46px) 20px; background: var(--card); }
.venue h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.btn { border-radius: 0; }
.signature { font-family: var(--font-display); color: var(--accent); }
.foot-names { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--brass-hi); }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .sec h2::before, .sec h2::after { width: 22px; }
}