/* Thanjavur Gold */
:root {
  --tj-red: #7a1010; --tj-red-dk: #4f0707; --tj-green: #0e4d2c; --gold: #d4a437; --gold-hi: #ffe9a8; --gold-dk: #8a6416; --cream: #f7e9c8;
  --bg: var(--cream); --ink: #3d1608; --muted: #74503a; --accent: var(--tj-red); --accent-ink: var(--gold-hi);
  --card: #fff7e2; --line: rgba(138, 100, 22, .35);
  --font-display: "Cinzel Decorative", Georgia, serif; --font-body: "Libre Baskerville", Georgia, serif; --font-script: "Libre Baskerville", serif;
  --font-label: "Cinzel Decorative", Georgia, serif; --font-ta: "Noto Serif Tamil", serif; --radius: 4px;
  --gold-leaf: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dk));
  --gem-strip: radial-gradient(circle, #e74c3c 0 3.5px, #7b1414 4px, transparent 5px) 0 50% / 32px 18px repeat-x,
               radial-gradient(circle, #1abc6b 0 3.5px, #0a4d2a 4px, transparent 5px) 16px 50% / 32px 18px repeat-x,
               linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-dk));
}
body { font-size: 17px; }
.eyebrow { font-size: 11.5px; letter-spacing: .26em; }
.sec h2 { font-size: clamp(28px, 5vw, 46px); }
.sec h2 [lang="ta"] { font-weight: 600; font-size: .78em; }

/* ---------- intro ---------- */
.tj-intro { background: #1d0505; display: grid; place-items: center; padding: 14px; overflow: hidden; transition: opacity .8s ease 1.4s, visibility 0s linear 2.3s; }
.tj-frame { position: relative; width: min(100%, 520px); height: min(100%, 860px); padding: 22px; background: var(--gem-strip); background-size: 32px 18px, 32px 18px, 100% 100%;
  box-shadow: 0 0 0 3px var(--gold-dk), 0 40px 80px rgba(0,0,0,.7); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1); overflow: hidden; }
.tj-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.tj-panel { height: 100%; background: radial-gradient(ellipse at 50% 35%, #a51b1b, var(--tj-red) 50%, var(--tj-red-dk)); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--cream); }
.tj-arch { width: min(70%, 260px); margin-bottom: 14px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.tj-mono { font-family: var(--font-display); font-size: 40px; fill: var(--gold-hi); }
.tj-kicker { font-family: var(--font-label); font-size: 12px; letter-spacing: .25em; color: var(--gold-hi); }
.tj-title { font-family: var(--font-display); font-size: clamp(34px, 8vw, 54px); line-height: 1.1; margin: 8px 0 24px; background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tj-title [lang="ta"], .tj-kicker [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .6em; letter-spacing: 0; line-height: 1.6; }
.tj-cta { background: var(--gold-leaf); color: var(--tj-red-dk); font-weight: 700; box-shadow: 0 0 0 2px var(--tj-red-dk), 0 0 0 4px var(--gold); }
.tj-lang { margin-top: 14px; background: rgba(0,0,0,.25); color: var(--gold-hi); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
html.intro-opening .tj-frame::after { transform: translateX(120%); transition: transform 1s ease; }
html.intro-opening .tj-frame { transform: scale(2.4); }
html.intro-opening .tj-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.tj-hero { min-height: 100svh; display: grid; place-items: center; padding: 18px; background: linear-gradient(90deg, var(--tj-green) 0 18px, transparent 18px calc(100% - 18px), var(--tj-green) 0), radial-gradient(ellipse at 50% 30%, #a51b1b, var(--tj-red) 55%, var(--tj-red-dk)); }
.tj-hero-frame { width: min(100%, 760px); text-align: center; color: var(--cream); padding: 40px clamp(14px, 5vw, 40px) 56px; border: 10px solid transparent; border-image: var(--gold-leaf) 1; box-shadow: inset 0 0 0 2px var(--tj-red-dk), inset 0 0 0 5px var(--gold); }
.tj-hero-arch { width: min(62%, 240px); margin: 0 auto 6px; }
.tj-hero .eyebrow { color: var(--gold-hi); }
.tj-lead { font-style: italic; opacity: .85; max-width: 460px; margin: 10px auto 30px; }
.tj-hero .name { font-size: clamp(42px, 10vw, 84px); background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 var(--tj-red-dk)) drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.tj-hero .name [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .55em; line-height: 1.7; display: inline-block; }
.tj-hero .parents { color: rgba(247,233,200,.8); }
.tj-hero .weds { font-family: var(--font-label); font-size: 13px; letter-spacing: .4em; color: var(--gold-hi); margin: 12px 0; }
.tj-hero .weds [lang="ta"] { letter-spacing: .05em; font-size: 15px; font-family: var(--font-ta); }
.tj-date { margin-top: 28px; display: inline-block; padding: 10px 24px; background: var(--gold-leaf); color: var(--tj-red-dk); font-family: var(--font-label); font-weight: 700; letter-spacing: .12em; }
.tj-date [lang="ta"] { font-family: var(--font-ta); letter-spacing: 0; }

/* ---------- bands ---------- */
.tj-band { position: relative; }
.tj-gems { display: block; height: 18px; background: var(--gem-strip); background-size: 32px 18px, 32px 18px, 100% 100%; }
.tj-cream { background: var(--cream); }
.tj-cream .sec h2 { color: var(--tj-red); }
.tj-red, .tj-green { color: var(--cream); --ink: var(--cream); --muted: rgba(247,233,200,.75); --line: rgba(255,233,168,.3); --accent: var(--gold-hi); --accent-ink: var(--tj-red-dk); --card: rgba(0,0,0,.15); }
.tj-red { background: radial-gradient(ellipse at 50% 0%, #9a1616, var(--tj-red) 60%, var(--tj-red-dk)); }
.tj-green { background: radial-gradient(ellipse at 50% 0%, #136b3c, var(--tj-green) 65%, #072a17); }
.tj-red .sec h2, .tj-green .sec h2 { background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scratch { --foil-1: #8a6416; --foil-2: #ffe9a8; --foil-3: #b8892a; --burst: #d4a437, #e74c3c, #1abc6b, #ffe9a8; background: var(--card); border: 6px solid transparent; border-image: var(--gold-leaf) 1; border-radius: 0; }
.event { border: 1px solid var(--line); padding: 20px; background: var(--card); }
.event.is-main { box-shadow: 0 0 0 3px var(--gold); }
.event-date b { color: var(--accent); font-family: var(--font-body); }
.cd-cell { background: var(--card); border: 3px double var(--gold); border-radius: 50% 50% 6px 6px; }
.cd-cell b { color: var(--gold-hi); font-family: var(--font-body); }
.venue, .note { background: var(--card); border: 6px solid transparent; border-image: var(--gold-leaf) 1; padding: clamp(26px, 6vw, 46px) 20px; }
.signature { font-family: var(--font-display); font-size: 30px; color: var(--accent); }
.foot-names { font-family: var(--font-display); }
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .tj-hero { background: radial-gradient(ellipse at 50% 30%, #a51b1b, var(--tj-red) 55%, var(--tj-red-dk)); }
}