/* ====================================================================
   AWGP Seattle — landing page
   Palette: parchment cream / antique gold / deep navy
   Display: Cormorant Garamond  |  Devanagari: Tiro Devanagari Sanskrit
   Body:    Inter
   ==================================================================== */

:root {
  --bg:            #faf3e0;
  --bg-alt:        #f4ead0;
  --bg-deep:       #ece0bf;
  --paper:         #fffaf0;
  --ink:           #16263d;
  --ink-soft:      #324863;
  --muted:         #6b6b6b;
  --gold:          #b88746;
  --gold-deep:     #8b6508;
  --gold-soft:     #c9a449;
  --line:          rgba(22, 38, 61, 0.12);
  --line-strong:   rgba(22, 38, 61, 0.2);

  --radius:        14px;
  --radius-lg:     22px;
  --shadow-sm:     0 1px 2px rgba(22, 38, 61, 0.06), 0 2px 8px rgba(22, 38, 61, 0.04);
  --shadow-md:     0 6px 24px rgba(22, 38, 61, 0.08), 0 2px 6px rgba(22, 38, 61, 0.04);
  --shadow-lg:     0 18px 50px rgba(22, 38, 61, 0.14);

  --maxw:          1180px;
  --maxw-narrow:   780px;

  --space-1:       8px;
  --space-2:       16px;
  --space-3:       22px;
  --space-4:       32px;
  --space-5:       48px;
  --space-6:       72px;     /* was 96  */
  --space-7:       88px;     /* was 128 */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .page-bg-diya { transform: none !important; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

img { max-width: 100%; display: block; }

@media (max-width: 540px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(2.15rem, 12vw, 3rem); }
  h2 { font-size: clamp(1.75rem, 9vw, 2.35rem); }
  .container { padding: 0 var(--space-2); }
}

/* ── Page-wide parallax layer (diya pattern) ─────────────────────────
   Fixed-position; transform: translateY is animated by JS based on
   scrollY, so the pattern drifts behind content as you scroll.
   The radial mask makes the pattern fade out in the center where the
   text lives, and stay vivid at the edges — so it decorates the frame
   without ever fighting readability. */
.page-bg-diya {
  position: fixed;
  inset: -10% -5%;
  pointer-events: none;
  z-index: -1;
  will-change: transform, opacity;
  background-image: url("assets/diya-tile.png");
  background-repeat: repeat;
  background-size: 90px 90px;
  opacity: 0.85;
  mix-blend-mode: multiply;
  /* Smooth radial fade: clear center, gradual transition all the way out
     to fully visible at the corners. No hard stops. */
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at center, transparent 8%, black 95%);
          mask-image: radial-gradient(ellipse 95% 80% at center, transparent 8%, black 95%);
  transition: opacity 0.2s linear;
}

/* --- Typography ---------------------------------------------------- */

h1, h2, h3, .display {
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--space-2); }

.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.lede.subtle { color: var(--muted); }
.centered    { text-align: center; }
.nowrap      { white-space: nowrap; }

em { font-style: italic; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 var(--space-2);
}
.eyebrow.centered { text-align: center; }

.kicker {
  font-style: italic;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.ilink {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.ilink:hover { color: var(--ink); }

/* Inline accent — bold + slightly larger italic, for "Deep Yagya"
   and similar standout phrases in body copy. No underline. */
.accent {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.15em;
  color: var(--gold-deep);
  letter-spacing: 0.005em;
}

/* --- Layout helpers ------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container.narrow { max-width: var(--maxw-narrow); }

.section {
  padding: var(--space-6) 0;
  position: relative;
}
@media (max-width: 720px) {
  .section { padding: var(--space-5) 0; }
}

/* --- Top nav -------------------------------------------------------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 243, 224, 0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px var(--space-3);
}
.topnav .brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.brand-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  image-rendering: -webkit-optimize-contrast;
}
.brand-mark.large {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(22, 38, 61, 0.2);
}
.brand-text {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-sub {
  color: var(--gold-deep);
  font-style: italic;
  font-weight: 500;
}
.topnav ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: 0; padding: 0;
  align-items: center;
  flex: 0 0 auto;
}
.topnav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease-out);
}
.topnav a:hover { color: var(--ink); }
.topnav a.cta {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
}
.topnav a.cta:hover { background: var(--gold-deep); color: var(--paper); }
@media (max-width: 720px) {
  .topnav ul li:not(:last-child) { display: none; }
  .brand-text { font-size: 0.95rem; }
}
@media (max-width: 390px) {
  .topnav { padding: 9px 12px; }
  .brand-sub { display: none; }
  .topnav a.cta { padding: 8px 13px; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Light veil that lifts hero content over the page bg without hiding it */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 250, 240, 0.5) 0%, rgba(250, 243, 224, 0.78) 65%, var(--bg) 100%);
  z-index: -1;
}

.hero-inner {
  max-width: 920px;
  padding: var(--space-5) var(--space-3) var(--space-4);
}
@media (max-width: 540px) {
  .hero {
    min-height: auto;
    padding: var(--space-5) 0 var(--space-4);
  }
  .hero-inner { padding: var(--space-3) var(--space-2); }
  .brand-mark.large {
    width: 64px;
    height: 64px;
    border-radius: 13px;
  }
  .mantra {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: var(--space-3);
  }
  .kicker { font-size: 1.35rem; }
  .chief-name {
    display: block;
    margin: 4px 0 0;
  }
  .scroll-cue { display: none; }
}

/* Gayatri Mantra */
.mantra {
  font-family: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.85;
  color: var(--gold-deep);
  margin: 0 auto var(--space-4);
  max-width: 760px;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* Brand row in hero */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.brand-line {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.04em;
}
.brand-line span {
  color: var(--gold-deep);
  font-style: italic;
  font-weight: 500;
}

.hero h1.display {
  margin: var(--space-2) 0 var(--space-3);
  font-weight: 500;
}
.hero h1.display .hindi {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  color: var(--gold-deep);
  margin-bottom: var(--space-2);
}
.hero h1.display .english {
  display: block;
  font-weight: 500;
  font-size: 1em;
}
/* "Deep Yagya" — bolder + warm gold, inside the hero title and body copy */
.hero h1.display .accent {
  font-weight: 700;
  color: var(--gold-deep);
  font-style: italic;
}

/* Chief guest — prominent name, no underline */
.hero .chief {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: var(--space-2) 0 var(--space-4);
}
.chief-name {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.8em;
  font-style: italic;
  color: var(--ink);
  margin-left: 6px;
  line-height: 1;
}

/* Event meta — date / time / venue */
.event-meta {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}
.meta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 14px;
  min-width: 140px;
}
.meta-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.meta-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 4px 0;
}
.meta-sub {
  font-size: 0.85rem;
  color: var(--muted);
}
.date-block .meta-value {
  font-size: 1.7rem;
  color: var(--gold-deep);
}
.meta-divider {
  width: 1px;
  background: var(--line);
}
@media (max-width: 720px) {
  .event-meta {
    width: min(100%, 390px);
    margin: var(--space-3) auto var(--space-4);
    flex-direction: column;
    gap: 0;
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.68), rgba(244, 234, 208, 0.62));
    border: 1px solid rgba(139, 101, 8, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 28px rgba(22, 38, 61, 0.08);
  }
  .meta-divider { display: none; }
  .meta-block {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(22, 38, 61, 0.1);
  }
  .meta-block:last-child { border-bottom: 0; }
  .meta-label {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }
  .meta-value {
    font-size: 1.28rem;
    margin: 3px 0 2px;
  }
  .meta-sub { font-size: 0.82rem; }
  .date-block {
    align-items: center;
    text-align: center;
    padding: 14px 12px 15px;
    background: rgba(255, 250, 240, 0.52);
    border: 1px solid rgba(184, 135, 70, 0.18);
    border-radius: calc(var(--radius-lg) - 8px);
    margin-bottom: 4px;
  }
  .date-block .meta-value {
    font-size: 2rem;
    line-height: 1;
    margin: 5px 0 4px;
  }
}
@media (max-width: 380px) {
  .event-meta {
    border-radius: var(--radius);
    padding: 7px;
  }
  .meta-block { padding: 11px 12px; }
  .date-block .meta-value { font-size: 1.78rem; }
  .meta-value { font-size: 1.16rem; }
}

.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.25);
  border-radius: 999px;
  font-size: 0.92rem;
  color: rgba(255, 250, 240, 0.78);
  margin: 0 auto var(--space-4);
}
.lang-badge strong { color: var(--gold-soft); font-weight: 600; }
.lang-badge span   { color: rgba(255, 250, 240, 0.7); }
.lang-badge-wrap {
  text-align: center;
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: var(--gold-deep);
  opacity: 0.7;
  animation: bob 2.2s var(--ease-out) infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* --- Buttons -------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out),
              background 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--gold-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* --- Section: event ------------------------------------------------- */

.section-event { background: rgba(250, 243, 224, 0.85); text-align: center; }

/* --- Section: guidance (balanced asymmetric) ------------------------ */

.section-guidance { background: rgba(244, 234, 208, 0.92); }
.section-guidance h2 { margin-bottom: var(--space-4); }

.guidance-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .guidance-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 560px;
  }
  .g-main {
    width: min(100%, 430px);
    box-shadow: 0 14px 42px rgba(22, 38, 61, 0.13);
  }
  .g-side {
    grid-template-rows: none;
    width: min(100%, 500px);
    justify-self: center;
  }
  .g-portrait {
    grid-template-columns: minmax(150px, 190px) 1fr;
    min-height: 230px;
    box-shadow: 0 8px 24px rgba(22, 38, 61, 0.07);
  }
}

/* Maa Gayatri (left) aligns to the combined height of the two lineage portraits. */
.g-main {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: transparent;
  position: relative;
  align-self: stretch;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 720 / 845;
}
.g-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.g-main figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3) var(--space-3);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.g-main .cap-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 600;
}
.g-main .cap-sub {
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 250, 240, 0.88);
}

/* Right column — two equal-size portraits, stacked.
   Bigger now (240×320 image) so that two stacked ≈ Maa Gayatri height. */
.g-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-self: stretch;
  min-height: 0;
}
.g-portrait {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(170px, 210px) 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  overflow: hidden;
}
.g-portrait img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
.g-portrait figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2);
}
.g-portrait .cap-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 2px 0;
}
.g-portrait .cap-sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.03em;
}
/* The first cap-sub is the spiritual title (prefix); style it a bit warmer */
.g-portrait .cap-sub:first-child {
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
}
@media (max-width: 540px) {
  .section-guidance h2 { margin-bottom: var(--space-3); }
  .g-main {
    height: auto;
    aspect-ratio: 720 / 845;
    max-width: 390px;
    border-radius: var(--radius);
  }
  .g-main figcaption {
    padding: 56px var(--space-2) var(--space-2);
  }
  .g-main .cap-name { font-size: 1.45rem; }
  .g-main .cap-sub { font-size: 0.86rem; }
  .g-side { gap: 14px; }
  .g-portrait {
    grid-template-columns: 118px 1fr;
    min-height: 160px;
    border-radius: 12px;
  }
  .g-portrait img {
    width: 118px;
    height: 160px;
  }
  .g-portrait figcaption { padding: 12px 14px; }
  .g-portrait .cap-name { font-size: 1.05rem; }
  .g-portrait .cap-sub { font-size: 0.74rem; }
  .g-portrait .cap-sub:first-child { letter-spacing: 0.07em; }
}
@media (max-width: 380px) {
  .g-portrait {
    grid-template-columns: 104px 1fr;
    min-height: 148px;
  }
  .g-portrait img {
    width: 104px;
    height: 148px;
  }
  .g-portrait figcaption { padding: 10px 12px; }
  .g-portrait .cap-name { font-size: 0.98rem; }
  .g-portrait .cap-sub:first-child { font-size: 0.64rem; }
}

/* --- Section: speaker (split) -------------------------------------- */

.section-speaker { background: rgba(250, 243, 224, 0.92); }
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-5);
  align-items: center;
}
.split-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  position: relative;
  padding: 12px;
}
.split-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: calc(var(--radius-lg) - 8px);
}
.split-text h2 { margin-bottom: var(--space-3); }

.bio-list {
  list-style: none;
  padding: 0; margin: 0 0 var(--space-3);
}
.bio-list li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.bio-list li:last-child { border-bottom: 0; }
.bio-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
}
.links-inline a {
  color: var(--gold-deep);
  text-decoration: none;
  font-weight: 500;
}
.links-inline a:hover { color: var(--ink); }
@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 680px;
  }
  .split-image {
    width: min(100%, 460px);
    margin: 0 auto;
  }
}
@media (max-width: 540px) {
  .split {
    gap: var(--space-3);
  }
  .split-image {
    width: min(100%, 360px);
    padding: 8px;
    border-radius: var(--radius);
  }
  .split-image img {
    border-radius: 10px;
  }
  .bio-list li {
    padding: 8px 0 8px 18px;
    font-size: 0.93rem;
  }
  .bio-list li::before {
    left: 0;
    top: 15px;
    width: 6px;
    height: 6px;
  }
}

/* ── Section: program (DARK, pinned-feel via fixed bg) ────────────────
   The dark gradient + diya tile are position:fixed to the viewport,
   masked by the section bounds — so they stay STATIONARY while the
   program content scrolls past. */

.section-program {
  background: transparent;     /* the fixed bg below does the work */
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  /* Establishes a containing block so child fixed-positioned elements
     are clipped to this section. Modern browsers honor clip-path here. */
  clip-path: inset(0);
}
.program-bg, .program-bg-diya {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.program-bg {
  /* Deeper, more uniform navy so text contrast stays high.
     A subtle inner glow keeps the eye centered without lifting the bg
     to a value that fights white text. */
  background:
    radial-gradient(ellipse at 50% 35%, #16263d 0%, #0a1220 85%);
  z-index: 0;
}
.program-bg-diya {
  background-image: url("assets/diya-tile-cream.png");
  background-repeat: repeat;
  background-size: 130px 130px;
  opacity: 0.06;                 /* was 0.16 — was washing out text */
  z-index: 1;
  /* Same center-fade mask so pattern decorates edges only */
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, transparent 0%, rgba(0,0,0,0.5) 60%, black 100%);
          mask-image: radial-gradient(ellipse 60% 60% at center, transparent 0%, rgba(0,0,0,0.5) 60%, black 100%);
}
.section-program .container { position: relative; z-index: 2; }
.section-program h2 {
  color: var(--paper);
  margin-bottom: var(--space-3);
}
.section-program .eyebrow { color: var(--gold-soft); }

.program-list {
  list-style: none;
  padding: 0; margin: 0 auto;
  max-width: 780px;
}
.program-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 250, 240, 0.18);
}
.program-list li:last-child { border-bottom: 0; }
.program-list .time {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;             /* was 1.3 */
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.program-list h3 {
  margin-bottom: 6px;
  color: #fffaf0;
  font-size: 1.45rem;            /* was 1.3 */
  font-weight: 600;
  letter-spacing: 0;
  /* subtle glow so against subtle pattern the text always pops */
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.program-list p {
  color: rgba(255, 250, 240, 0.86);   /* was 0.78 */
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .section-program {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .section-program h2 {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
  }
  .lang-badge {
    border-radius: var(--radius);
    padding: 10px 14px;
    max-width: 270px;
    background: rgba(255, 250, 240, 0.055);
  }
  .lang-badge-wrap {
    margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  }
  .program-list {
    display: grid;
    gap: 14px;
    margin-top: var(--space-4);
  }
  .program-list li {
    display: block;
    padding: var(--space-3);
    position: relative;
    border: 1px solid rgba(255, 250, 240, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 250, 240, 0.035);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }
  .program-list .time {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(201, 164, 73, 0.12);
    font-size: 1.05rem;
    line-height: 1.1;
  }
  .program-list h3 {
    font-size: 1.28rem;
    margin-bottom: 5px;
  }
  .program-list p {
    font-size: 0.96rem;
    line-height: 1.5;
  }
}

/* --- Section: RSVP ------------------------------------------------- */

.section-rsvp {
  background: linear-gradient(180deg, rgba(250, 243, 224, 0.88) 0%, rgba(236, 224, 191, 0.92) 100%);
}
.section-rsvp h2 { margin-bottom: var(--space-1); }
.section-rsvp .lede { margin: 0 auto var(--space-4); max-width: 540px; }

#rsvp-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  text-align: left;
  max-width: 580px;
  margin: 0 auto;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
}
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.optional {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.field input {
  padding: 13px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(184, 135, 70, 0.18);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 540px) {
  .row { grid-template-columns: 1fr; }
  #rsvp-form {
    padding: var(--space-3);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(22, 38, 61, 0.08);
  }
  .field { margin-bottom: var(--space-2); }
  .field input { font-size: 16px; }
  #submit-btn {
    padding: 13px 18px;
  }
}
#submit-btn { width: 100%; margin-top: var(--space-2); }
.status {
  margin: var(--space-3) 0 0;
  min-height: 1.4em;
  font-size: 0.95rem;
  text-align: center;
}
.status.ok    { color: #2e7d32; }
.status.error { color: #b00020; }

/* --- Section: venue + parking ------------------------------------- */

.section-venue { background: rgba(250, 243, 224, 0.9); }
.vp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .vp-grid { grid-template-columns: 1fr; } }
.vp-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.vp-card h2 { margin-bottom: var(--space-2); font-size: 1.8rem; }
.vp-card address {
  font-style: normal;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  font-size: 1.05rem;
  line-height: 1.55;
}
.map-embed {
  margin-top: var(--space-3);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.9); }
@media (max-width: 540px) {
  .vp-card { padding: var(--space-3); }
  .vp-card h2 { font-size: 1.55rem; }
  .map-embed { aspect-ratio: 1 / 1; }
  .check-list li {
    padding: 9px 0 9px 26px;
    font-size: 0.95rem;
  }
}
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  padding: 10px 0 10px 30px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-weight: 700;
}

/* --- Section: about ----------------------------------------------- */

.section-about { background: rgba(244, 234, 208, 0.92); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.about-grid h2 { font-size: 1.9rem; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .name { color: var(--ink); font-weight: 500; }
.contact-list a {
  color: var(--gold-deep);
  text-decoration: none;
  font-feature-settings: "tnum";
}
.contact-list a:hover { color: var(--ink); }
@media (max-width: 420px) {
  .contact-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Monochrome SVG social icons */
.social-icons {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}
.social-icons svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.social-icons a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.links-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-3);
}
.links-stack a {
  color: var(--gold-deep);
  text-decoration: none;
  font-weight: 500;
}
.links-stack a:hover { color: var(--ink); }

/* --- Footer -------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 250, 240, 0.85);
  padding: var(--space-4) 0;
}
.footer-grid { display: grid; gap: var(--space-3); text-align: center; }
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-brand .brand-mark {
  border-radius: 9px;
  width: 40px; height: 40px;
}
.footer-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.65rem;     /* was 1.2 — a bit louder so it reads as the brand */
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}
.footer-brand .brand-mark { width: 52px; height: 52px; border-radius: 11px; }
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
@media (max-width: 540px) {
  .footer-links { gap: 10px 16px; }
  .footer-title { font-size: 1.35rem; }
}
.footer-links a {
  color: rgba(255, 250, 240, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s var(--ease-out);
}
.footer-links a:hover { color: var(--gold-soft); }

/* --- Reveal-on-scroll animations ---------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }