/* Christian wedding - warm white, sage and olive with soft champagne gold; olive-branch line art. */
:root {
  --bg: #fcfaf6; --bg2: #f1efe7; --dark: #2f3d2f;
  --accent: #b79b63; --accent-ink: #86703f; --on-accent: #26302a;
  --ink: #2a2d2a; --head: #34452f; --muted: #667064; --max: 1120px; --nav-h: 64px;
  --nav-ink: #2f3d2f; --nav-solid: rgba(252, 250, 246, .96); --nav-line: rgba(63, 79, 63, .14); --nav-line2: rgba(63, 79, 63, .35);
  --hero-ink: #3f4f3f; --hero-line: rgba(63, 79, 63, .35); --hero-strong: #2f3d2f; --count-bg: rgba(255, 255, 255, .7);
  --card: #ffffff; --card-line: #e8e4d8; --badge-bg: #eef0e9; --field: #faf8f2; --field-line: #ddd8c7; --ring: rgba(124, 143, 122, .22);
  --on-dark: #e8e4d4; --on-dark-2: #c3c9b7;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tamil-sans: "Noto Sans Tamil", "Jost", system-ui, sans-serif;
  --tamil-serif: "Noto Serif Tamil", "Playfair Display", Georgia, serif;
}
.site-header:not(.scrolled) .lang button:not([aria-pressed="true"]) { color: var(--nav-ink); }
.btn-ghost { color: var(--dark); border-color: var(--dark); }
.btn-ghost:hover { background: var(--dark); color: #fff; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; color: var(--hero-ink);
  background-color: #fcfaf6; background-image: radial-gradient(ellipse at 50%% 40%%, rgba(255,255,255,.9) 0%%, rgba(255,255,255,0) 60%%, rgba(60,50,20,.05) 100%%); padding: 7rem 1.25rem 4rem; }
.branch { position: absolute; z-index: -1; width: min(34vw, 300px); opacity: .95; pointer-events: none; }
.b1 { left: -2%; top: 64px; }
.b2 { right: -2%; bottom: -10px; transform: rotate(180deg); }
.hero-inner { position: relative; max-width: 860px; }
.cross-mark { margin: 0 auto 1rem; }
.kicker { font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-ink); }
#names { margin-top: 1rem; font: 400 clamp(3rem, 9.5vw, 6.4rem)/1.05 var(--serif); color: var(--dark); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; letter-spacing: -.01em; }
#names .amp { font-style: italic; color: var(--accent); font-size: .6em; }
.hero-line { margin-top: 1rem; font: italic 400 clamp(1.15rem, 2.6vw, 1.5rem)/1.5 var(--serif); color: #5b6a58; }
.hero-date { margin-top: 1.3rem; font: 400 clamp(1.5rem, 3.4vw, 2rem)/1.3 var(--serif); color: var(--dark); }
.hero-place { margin-top: .3rem; font-size: .96rem; color: #667064; }
.count { margin-top: 2rem; }
.invite .verse-en.big { margin-top: 1rem; font: italic 400 clamp(1.4rem, 3vw, 1.95rem)/1.6 var(--serif); color: var(--head); }
.invite { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.soft-frame { border-radius: 999px 999px 18px 18px; box-shadow: 0 0 0 6px var(--bg2), 0 0 0 7px var(--accent), 0 24px 44px -28px rgba(47, 61, 47, .5); }
.dua-en { margin: .3rem auto 1.8rem; max-width: 50ch; color: var(--on-dark-2); font: italic 400 1.25rem/1.6 var(--serif); }
.foot-cross { margin: 0 auto .6rem; }
.btn-ghost { color: var(--dark); }
html[data-lang="ta"] #names { font-size: clamp(2.5rem, 8vw, 4.6rem); line-height: 1.25; }
html[data-lang="ta"] .hero-line, html[data-lang="ta"] .invite .verse-en.big, html[data-lang="ta"] .dua-en { font-style: normal; }
@media (max-width: 760px) {
  .branch { width: 46vw; opacity: .7; }
  .b1 { top: 54px; left: -10%; }
  .b2 { right: -10%; }
}
@media (max-width: 520px) {
  html[data-lang="ta"] #names { font-size: clamp(2.2rem, 10vw, 3rem); }
}
html[data-lang="ta"] .kicker { letter-spacing: .03em; text-transform: none; font-size: .95rem; }
@media (max-width: 760px) { .b2 { bottom: -70px; } }