/* Jasmine Garden */
:root {
  --sage: #f3f6ef;
  --leaf: #2f5d50;
  --leaf-2: #5f8a6c;
  --blush: #e8b4b8;
  --rose: #c46f79;
  --bg: var(--sage);
  --ink: #23423a;
  --muted: #5d7469;
  --accent: var(--leaf);
  --accent-ink: #fff;
  --card: #ffffff;
  --line: rgba(47, 93, 80, .18);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Playfair Display", Georgia, serif;
  --font-script: "Parisienne", cursive;
  --font-label: "Marcellus", Georgia, serif;
  --font-ta: "Mukta Malar", sans-serif;
  --radius: 22px;
}
body {
  font-size: 18px;
  background:
    radial-gradient(40vmax 40vmax at 0% 10%, rgba(232, 180, 184, .28), transparent 70%),
    radial-gradient(36vmax 36vmax at 100% 40%, rgba(156, 192, 162, .3), transparent 70%),
    radial-gradient(40vmax 40vmax at 10% 85%, rgba(232, 180, 184, .22), transparent 70%),
    var(--sage);
}
.sec h2 { font-style: italic; color: var(--leaf); }
.sec h2 [lang="ta"] { font-style: normal; font-size: .7em; font-weight: 600; }
.eyebrow { color: var(--rose); letter-spacing: .26em; }

/* ---------- intro: jasmine curtain ---------- */
.jg-intro {
  background: radial-gradient(ellipse at 50% 45%, #fbfdf9, #e5eee1 85%);
  overflow: hidden; transition: opacity .9s ease 1.5s, visibility 0s linear 2.4s;
}
.jg-curtain { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 1vw; }
.jg-strand {
  width: calc(100% / 16); max-width: 46px; height: 100%; display: flex; justify-content: center;
  transform-origin: top center; animation: sway 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s);
  transition: transform 1.6s cubic-bezier(.6, 0, .25, 1) calc(var(--i) * 40ms), opacity 1.2s ease .5s;
}
.jg-strand svg { width: 100%; height: auto; max-height: 100%; filter: drop-shadow(0 4px 4px rgba(47, 93, 80, .15)); }
.jg-strand.is-right { animation-direction: reverse; }
@keyframes sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }

.jg-cover {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; transition: opacity .6s ease, transform .8s ease;
}
.jg-cover::before {
  content: ""; position: absolute; width: min(86vw, 440px); aspect-ratio: .78; border-radius: 999px 999px 28px 28px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(47, 93, 80, .35); z-index: -1;
}
.jg-cover-kicker { font-family: var(--font-label); letter-spacing: .24em; text-transform: uppercase; font-size: 12px; color: var(--rose); }
.jg-cover-kicker [lang="ta"] { font-size: 14px; letter-spacing: 0; }
.jg-cover-title { font-family: var(--font-script); font-size: clamp(50px, 11vw, 78px); line-height: 1.1; color: var(--leaf); margin: 10px 0 4px; }
.jg-cover-title [lang="ta"] { font-family: var(--font-ta); font-size: .5em; font-weight: 600; }
.jg-cover-mono { font-family: var(--font-display); font-size: 28px; letter-spacing: .1em; color: var(--ink); }
.jg-cover-mono i { font-family: var(--font-script); color: var(--rose); font-style: normal; }
.jg-cta { margin-top: 26px; background: var(--leaf); color: #fff; box-shadow: 0 12px 24px -10px rgba(47, 93, 80, .6); }
.jg-cover-hint { margin-top: 12px; font-style: italic; font-size: 14px; color: var(--muted); }
.jg-lang { margin-top: 18px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--muted); }

html.intro-opening .jg-cover { opacity: 0; transform: scale(.94); pointer-events: none; }
html.intro-opening .jg-strand { animation: none; }
html.intro-opening .jg-strand.is-left { transform: translateX(calc(-55vw - var(--i) * 3vw)) rotate(8deg); opacity: 0; }
html.intro-opening .jg-strand.is-right { transform: translateX(calc(55vw + var(--i) * 3vw)) rotate(-8deg); opacity: 0; }
html.intro-opening .jg-intro { opacity: 0; visibility: hidden; }

/* ---------- hero ---------- */
.jg-hero { min-height: 100svh; display: grid; place-items: center; padding: clamp(40px, 8vw, 80px) var(--gutter); }
.jg-arch {
  position: relative; width: min(100%, 620px); text-align: center;
  padding: clamp(110px, 16vw, 150px) clamp(20px, 6vw, 60px) clamp(56px, 8vw, 80px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
  border-radius: 999px 999px 32px 32px; border: 1px solid var(--line);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .45), 0 0 0 11px var(--line), 0 40px 80px -40px rgba(47, 93, 80, .35);
}
.jg-sprig { position: absolute; width: clamp(140px, 30vw, 210px); pointer-events: none; }
.jg-sprig-tl { top: 18%; left: -8%; transform: rotate(-24deg); }
.jg-sprig-br { bottom: -4%; right: -8%; transform: rotate(160deg); }
.jg-lead { font-style: italic; color: var(--muted); max-width: 440px; margin: 14px auto 34px; font-size: clamp(17px, 2.2vw, 20px); }
.jg-hero .couple { gap: 2px; }
.jg-hero .name { font-family: var(--font-script); font-size: clamp(60px, 14vw, 104px); color: var(--leaf); line-height: 1.15; }
.jg-hero .name [lang="ta"] { font-family: var(--font-ta); font-weight: 600; font-size: .5em; line-height: 1.7; display: inline-block; }
.jg-hero .parents { font-size: 15px; }
.jg-hero .weds { font-family: var(--font-label); font-size: 13px; letter-spacing: .4em; text-transform: uppercase; color: var(--rose); margin: 12px 0; }
.jg-hero .weds [lang="ta"] { letter-spacing: .05em; font-size: 15px; }
.jg-divider { width: 220px; margin: 30px auto 14px; }
.jg-hero-date { font-family: var(--font-label); letter-spacing: .24em; text-transform: uppercase; font-size: 15px; color: var(--leaf); }
.jg-hero-date [lang="ta"] { letter-spacing: 0; }

/* ---------- sections as soft cards ---------- */
.scratch { --foil-1: #c9a96a; --foil-2: #f4e6c4; --foil-3: #b48e4c; --burst: #ffffff, #e8b4b8, #9cc0a2, #f1e2a4; background: var(--card); border-radius: 26px; box-shadow: 0 30px 60px -36px rgba(47, 93, 80, .45); }
.dcell b { color: var(--leaf); }
.event { background: var(--card); border-radius: var(--radius); padding: clamp(20px, 4vw, 30px); box-shadow: 0 20px 40px -32px rgba(47, 93, 80, .5); border: 1px solid var(--line); }
.event.is-main { border-color: rgba(196, 111, 121, .45); box-shadow: 0 0 0 5px rgba(232, 180, 184, .25), 0 20px 40px -32px rgba(47, 93, 80, .5); }
.event-date { background: var(--sage); border-radius: 16px; padding: 12px 10px; }
.event-date b { color: var(--leaf); }
.event-date span { color: var(--rose); }
.event h3 { color: var(--leaf); }

.jg-band { background: linear-gradient(160deg, var(--leaf), #234a40); color: #f3f6ef; --ink: #f3f6ef; --muted: rgba(243, 246, 239, .72); --line: rgba(255, 255, 255, .22); }
.jg-band .sec h2 { color: #fff; }
.jg-band .eyebrow { color: var(--blush); }
.jg-band .cd-cell { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 18px; }
.jg-band .cd-cell b { color: #fff; }
.jg-band .amp { color: var(--blush); }

.venue { background: var(--card); border-radius: 28px; padding: clamp(28px, 5vw, 46px) clamp(18px, 4vw, 40px); box-shadow: 0 30px 60px -40px rgba(47, 93, 80, .5); }
.venue h3 { font-style: italic; color: var(--leaf); }
.note { background: var(--card); border-radius: 999px 999px 28px 28px; padding: clamp(90px, 12vw, 120px) clamp(22px, 6vw, 60px) clamp(40px, 6vw, 60px); box-shadow: 0 30px 60px -40px rgba(47, 93, 80, .5); border: 1px solid var(--line); }
.note blockquote { color: var(--leaf); }
.signature { color: var(--rose); }
.signature [lang="ta"] { font-family: var(--font-ta); font-size: .6em; font-weight: 600; }
.foot-names { font-family: var(--font-script); color: var(--leaf); font-size: clamp(40px, 8vw, 60px); }
.foot-names [lang="ta"] { font-family: var(--font-ta); font-size: .55em; }
.foot-names .amp { color: var(--rose); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; text-align: center; }
  .event-date { display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .event-date b { font-size: 34px; }
  .jg-sprig-tl { left: -16%; top: 3%; }
  .jg-sprig-br { right: -14%; }
}