/* Muslim wedding (Nikah) - emerald, gold and cream, with geometric Islamic patterns. */
:root {
  --bg: #f8f3e8; --bg2: #efe7d6; --dark: #0f3d3a;
  --accent: #c9a24a; --accent-ink: #8a6a22; --on-accent: #0f3d3a;
  --ink: #1d2b29; --head: #0f3d3a; --muted: #5b6b67; --max: 1120px; --nav-h: 64px;
  --nav-ink: #f6ead2; --nav-solid: rgba(15, 61, 58, .96); --nav-line: rgba(201, 162, 74, .35); --nav-line2: rgba(201, 162, 74, .7);
  --hero-ink: #f6ead2; --hero-line: rgba(201, 162, 74, .55); --hero-strong: #fff; --count-bg: rgba(8, 40, 38, .45);
  --card: #fffdf7; --card-line: #e4d9bf; --badge-bg: #0f3d3a; --field: #fbf8ef; --field-line: #d9ccaa; --ring: rgba(15, 61, 58, .14);
  --on-dark: #eadfc3; --on-dark-2: #cdbf98;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arabic: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --tamil-sans: "Noto Sans Tamil", "Jost", system-ui, sans-serif;
  --tamil-serif: "Noto Serif Tamil", "DM Serif Display", Georgia, serif;
}
[lang="ar"] { font-family: var(--arabic); }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; color: var(--hero-ink); overflow: hidden; isolation: isolate;
  background-color: #0f3d3a; background-image: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.36) 100%); padding: 6.2rem 1rem 3rem; }
.hero-pattern { position: absolute; inset: 0; z-index: -1; background: url("../images/pattern.svg") center top / 120px; opacity: .13; }
.hero-arch { position: relative; width: min(94vw, 690px); padding: 5.2rem 2.2rem 3rem; }
.arch-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; }
.bismillah { font-family: var(--arabic); font-size: clamp(1.7rem, 4.6vw, 2.5rem); color: var(--accent); line-height: 1.8; }
.kicker { margin: .5rem auto 0; max-width: 34ch; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #d8c690; line-height: 1.7; }
#names { margin-top: 1.1rem; font: 400 clamp(3rem, 10vw, 5.5rem)/1.04 var(--serif); color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .2em; }
#names .amp { color: var(--accent); font-style: italic; font-size: .6em; }
.hero-line { margin-top: .9rem; font: italic 400 clamp(1.15rem, 2.6vw, 1.45rem)/1.5 var(--serif); color: #ecdcb0; }
.hero-date { margin-top: 1.2rem; font: 400 clamp(1.45rem, 3.4vw, 1.9rem)/1.3 var(--serif); color: #fff; }
.hero-place { margin-top: .3rem; font-size: .95rem; color: #d8c690; }
.invite { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.verse-ar { font-family: var(--arabic); }

.arch-frame { border-radius: 999px 999px 12px 12px; box-shadow: 0 0 0 6px var(--bg2), 0 0 0 7px var(--accent), 0 22px 40px -24px rgba(8, 40, 38, .55); }
.dark .day { background: rgba(255, 255, 255, .05); border-color: rgba(201, 162, 74, .4); }
.dark .day-title, .dark .timeline h4 { color: #fff; }
.dark .dow, .dark .timeline time { color: var(--accent); }
.dark .timeline p { color: var(--on-dark-2); }
.dark .timeline li { border-color: rgba(201, 162, 74, .25); }
.dark .badge { background: transparent; border: 1px solid var(--accent); }
.dark .badge img { width: 30px; height: 30px; }
.btn-ghost:hover { background: rgba(201, 162, 74, .16); }
.dua { font-family: var(--arabic); font-size: clamp(1.5rem, 3.4vw, 1.9rem); color: var(--accent); line-height: 2; }
.dua-en { margin: .3rem auto 1.8rem; max-width: 50ch; color: var(--on-dark-2); }
html[data-lang="ta"] #names { font-size: clamp(2.5rem, 8vw, 4.6rem); line-height: 1.25; }
html[data-lang="ta"] .bismillah, html[data-lang="ta"] .verse-ar, html[data-lang="ta"] .dua { font-family: var(--arabic); }
html[data-lang="ta"] .hero-line { font-style: normal; }
@media (max-width: 520px) {
  .hero-arch { padding: 4.4rem 1.2rem 2.4rem; }
  html[data-lang="ta"] #names { font-size: clamp(2.2rem, 10vw, 3rem); }
}
/* DM Serif Display is a display face: keep it for headings and use the light sans for running text. */
.lead { font: 300 clamp(1.15rem, 2.3vw, 1.35rem)/1.85 var(--sans); }
html[data-lang="ta"] .lead { font-weight: 400; font-size: clamp(1.1rem, 2.1vw, 1.25rem); }
.hero-line, .verse-en { font-family: var(--serif); }
html[data-lang="ta"] .kicker { letter-spacing: .03em; text-transform: none; font-size: .95rem; }