/* WeddingOS — Sage Botanical theme approved from the visual reference */
:root{
  --sage-950:#41493d;
  --sage-850:#515c4b;
  --sage-700:#6f7c68;
  --sage-550:#91a08a;
  --sage-400:#aeb9a8;
  --sage-300:#c2cbbd;
  --sage-200:#d5dccf;
  --sage-100:#e7ebe2;
  --ivory:#fffaf1;
  --cream:#f6efe4;
  --paper:#eee5d7;
  --sand:#d5c19f;
  --gold:#a8874d;
  --ink:#3f463b;
  --ink-soft:#687064;
  --sage-line:rgba(79,91,73,.22);
  --sage-shadow:0 26px 72px rgba(70,76,62,.14);
  --bg:var(--cream);
  --bg2:var(--sage-100);
  --text:var(--ink);
  --muted:var(--ink-soft);
  --accent:var(--gold);
  --accent2:var(--sage-700);
  --surface:rgba(255,250,241,.84);
  --line:var(--sage-line);
  --shadow:var(--sage-shadow);
}

html{background:var(--cream)!important;scrollbar-color:var(--sage-550) var(--cream)!important}
body{background:var(--cream)!important;color:var(--ink)!important}
body::before{
  background:
    radial-gradient(circle at 8% 4%,rgba(174,185,168,.28),transparent 29%),
    radial-gradient(circle at 92% 9%,rgba(213,193,159,.22),transparent 27%),
    linear-gradient(180deg,var(--ivory),var(--cream))!important;
}
body::after{opacity:.02!important}
.page-shell{background:var(--cream)!important;color:var(--ink)!important}

/* The curtain is the only opening experience. */
.cj-intro{display:none!important}
.loading::before{background:var(--cream)!important}
.loading::after{border-color:rgba(111,124,104,.16)!important;border-top-color:var(--sage-700)!important}

/* Pale-sage translucent fabric, closed in the middle and pulled toward each side. */
.opening-veil{
  inset:-3px!important;
  background:rgba(232,237,226,.34)!important;
  backdrop-filter:blur(2px) saturate(.82)!important;
  -webkit-backdrop-filter:blur(2px) saturate(.82)!important;
}
.opening-veil::after{
  background:
    radial-gradient(ellipse at 50% 23%,rgba(255,255,255,.46),transparent 43%),
    linear-gradient(90deg,rgba(109,124,102,.12),transparent 47% 53%,rgba(109,124,102,.12))!important;
  opacity:.62!important;
}
.veil-panel{
  top:-7%!important;
  bottom:-7%!important;
  width:53.5%!important;
  opacity:.82!important;
  background-color:rgba(194,203,189,.92)!important;
  background-image:
    radial-gradient(ellipse at 21% 18%,rgba(255,255,255,.7) 0 17%,transparent 47%),
    radial-gradient(ellipse at 78% 62%,rgba(255,250,241,.32) 0 16%,transparent 48%),
    repeating-linear-gradient(94deg,
      rgba(230,235,225,.96) 0 7%,
      rgba(174,186,169,.82) 11%,
      rgba(217,225,213,.95) 17%,
      rgba(153,168,149,.72) 23%,
      rgba(224,231,220,.94) 30%)!important;
  box-shadow:inset -15px 0 30px rgba(65,73,61,.08)!important;
  filter:drop-shadow(0 0 17px rgba(64,73,60,.13))!important;
  transition:transform 1.75s cubic-bezier(.72,.02,.17,1),filter 1.75s ease,opacity .9s ease!important;
}
.veil-panel::before{
  background:repeating-radial-gradient(ellipse at 50% -18%,transparent 0 8%,rgba(70,82,66,.045) 9%,transparent 12%)!important;
  opacity:.5!important;
  mix-blend-mode:multiply!important;
}
.veil-left{
  left:-3%!important;
  border-radius:0 58% 24% 0/0 15% 8% 0!important;
}
.veil-right{
  right:-3%!important;
  border-radius:58% 0 0 24%/15% 0 0 8%!important;
}
.veil-seam{
  width:2px!important;
  background:linear-gradient(180deg,transparent,rgba(126,139,119,.42) 13% 87%,transparent)!important;
  box-shadow:0 0 18px rgba(89,102,83,.14)!important;
}
.veil-monogram{
  width:82px!important;
  height:82px!important;
  border-color:rgba(83,96,77,.32)!important;
  background:rgba(238,242,233,.72)!important;
  color:var(--sage-850)!important;
  box-shadow:0 15px 42px rgba(67,75,62,.1)!important;
}
.opening-veil.is-opening .veil-left{transform:translate3d(-105%,0,0) skewY(-2.4deg) scaleX(.95)!important}
.opening-veil.is-opening .veil-right{transform:translate3d(105%,0,0) skewY(2.4deg) scaleX(-.95)!important}

/* Light botanical hero framed like an arched doorway. */
.hero{
  min-height:100svh!important;
  padding:74px 18px 112px!important;
  color:var(--ink)!important;
  background:
    radial-gradient(ellipse at 50% 12%,rgba(255,255,255,.9),transparent 45%),
    radial-gradient(circle at 7% 18%,rgba(174,185,168,.22),transparent 28%),
    radial-gradient(circle at 94% 74%,rgba(145,160,138,.18),transparent 30%),
    linear-gradient(180deg,#fffaf1 0%,#f5eee3 72%,#e8ecE3 100%)!important;
}
.hero::before{
  inset:18px 16px 30px!important;
  border:1px solid rgba(168,135,77,.28)!important;
  border-radius:46% 46% 20px 20px/15% 15% 20px 20px!important;
  box-shadow:inset 0 0 90px rgba(142,153,133,.07)!important;
}
.hero::after{height:150px!important;background:linear-gradient(transparent,var(--cream))!important}
.hero-art{
  background:
    radial-gradient(ellipse at 50% 30%,rgba(214,222,209,.42),transparent 45%),
    linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.48) 44%,transparent 51%)!important;
}
.hero-art::before{opacity:.16!important;background:repeating-linear-gradient(104deg,transparent 0 45px,rgba(116,132,109,.13) 48px,transparent 86px)!important}
.hero-art::after{background:var(--sage-300)!important;opacity:.16!important}
.grid-lines{opacity:.025!important}
.cj-branch{opacity:.54!important;filter:drop-shadow(0 18px 28px rgba(76,86,70,.12))!important}
.cj-branch path{stroke:#77856f!important}
.cj-branch ellipse{fill:#91a08a!important;opacity:.68!important}
.cj-leaf{background:linear-gradient(135deg,#b8c3b2,#73816b)!important;opacity:.5}

.hero-card{
  width:min(900px,100%)!important;
  padding:72px clamp(23px,8vw,96px) 64px!important;
  color:var(--ink)!important;
  background:rgba(255,250,241,.74)!important;
  border:1px solid rgba(113,126,106,.22)!important;
  border-radius:46% 46% 24px 24px/13% 13% 24px 24px!important;
  box-shadow:0 30px 100px rgba(80,87,72,.14)!important;
  backdrop-filter:blur(10px)!important;
}
.hero-card::before,.hero-card::after{background:linear-gradient(90deg,transparent,rgba(168,135,77,.6),transparent)!important}
.hero-card .eyebrow{color:var(--gold)!important;letter-spacing:.38em!important}
.hero h1{color:var(--sage-950)!important;text-shadow:none!important;font-size:clamp(4rem,12vw,8.8rem)!important;line-height:.82!important}
.hero h1 .amp{color:var(--gold)!important}
.hero-subtitle{color:var(--ink-soft)!important}
.hero-date{color:var(--sage-850)!important}
.hero-date::before,.hero-date::after{background:var(--gold)!important}
.scroll-hint{color:var(--sage-700)!important}
.scroll-hint::after{background:linear-gradient(var(--sage-700),transparent)!important}

.btn{
  min-height:46px!important;
  border-radius:9px!important;
  border-color:rgba(78,91,72,.28)!important;
  text-transform:uppercase!important;
  letter-spacing:.1em!important;
  font-size:.7rem!important;
  box-shadow:none!important;
}
.btn.primary{
  background:linear-gradient(135deg,var(--sage-700),var(--sage-550))!important;
  color:var(--ivory)!important;
  border-color:transparent!important;
}
.btn.secondary{
  background:rgba(255,250,241,.7)!important;
  color:var(--sage-850)!important;
  border-color:rgba(82,96,76,.32)!important;
}
.btn:hover{transform:translateY(-2px)!important;box-shadow:0 13px 30px rgba(75,84,68,.13)!important}

.guest-banner{
  margin-top:-48px!important;
  border-radius:16px!important;
  color:var(--sage-950)!important;
  background:rgba(199,208,194,.94)!important;
  border-color:rgba(89,102,83,.24)!important;
  box-shadow:0 20px 56px rgba(75,83,68,.13)!important;
}
.guest-banner span{color:#687164!important}
.badge{color:var(--ivory)!important;background:var(--sage-700)!important;border-color:transparent!important}

main>section,
main>section:not(:has(.countdown)):not(:has(.event-grid)),
main>section:has(.countdown),
main>section:has(.event-grid){
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(180,192,175,.18),transparent 27%),
    radial-gradient(circle at 92% 82%,rgba(213,193,159,.15),transparent 30%),
    linear-gradient(180deg,var(--ivory),var(--cream))!important;
}
main>section:nth-of-type(even){background:linear-gradient(180deg,#e5e9df,#d9e1d5)!important}
main>section::after{opacity:.16!important}
.section-kicker,
main>section:has(.countdown) .section-kicker,
main>section:has(.event-grid) .section-kicker{color:var(--gold)!important}
.section-title{color:var(--sage-950)!important}
.section-copy,
main>section:has(.countdown) .section-copy,
main>section:has(.event-grid) .section-copy{color:var(--ink-soft)!important}

.panel,
main>section:has(.event-grid) .panel,
main>section:has(.countdown) .panel{
  color:var(--ink)!important;
  background:rgba(255,250,241,.82)!important;
  border:1px solid rgba(91,104,85,.21)!important;
  border-radius:18px!important;
  box-shadow:var(--sage-shadow)!important;
  backdrop-filter:blur(10px)!important;
}
.info-card p,.event-item span,.timeline-content p,.faq-answer,.rsvp-summary p,.save-date-card p{color:var(--ink-soft)!important}

.countdown{
  width:min(760px,100%);
  margin-inline:auto;
  padding:20px!important;
  border:1px solid rgba(84,97,79,.2)!important;
  border-radius:28px!important;
  background:rgba(202,211,198,.58)!important;
  box-shadow:0 20px 55px rgba(76,84,69,.11)!important;
}
.countdown-item{
  border:0!important;
  border-right:1px solid rgba(84,97,79,.17)!important;
  border-radius:0!important;
  background:transparent!important;
}
.countdown-item:last-child{border-right:0!important}
.countdown-item strong{color:var(--sage-950)!important;font-family:var(--display)!important;font-weight:500!important}
.countdown-item span{color:var(--sage-700)!important}

.event-card{background:rgba(255,250,241,.9)!important}
.event-icon{background:var(--sage-200)!important;color:var(--sage-850)!important}
.map-frame{border-color:rgba(85,98,79,.22)!important;background:var(--sage-100)!important}
.timeline-time{color:var(--gold)!important}
.timeline-dot{border-color:var(--sage-200)!important;background:var(--sage-700)!important}

/* Editorial, integrated photographs rather than a conventional gallery. */
.gallery{
  grid-template-columns:1.25fr .75fr!important;
  grid-auto-rows:minmax(190px,31vw)!important;
  gap:12px!important;
  padding:12px!important;
  border:1px solid rgba(91,104,85,.18)!important;
  border-radius:26px!important;
  background:rgba(255,250,241,.7)!important;
  box-shadow:var(--sage-shadow)!important;
}
.gallery img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.gallery img:first-child{grid-row:span 2;border-radius:150px 150px 18px 18px!important}
.gallery img:nth-child(3){border-radius:18px 18px 150px 150px!important}

/* Personal QR/ticket card in pale sage. */
.personal-access-section{
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.55),transparent 25%),
    linear-gradient(145deg,#e3e8de,#cbd5c7)!important;
}
.personal-access-card{
  background:rgba(255,250,241,.84)!important;
  border-color:rgba(82,96,76,.24)!important;
  box-shadow:var(--sage-shadow)!important;
}
.personal-access-copy h2{color:var(--sage-950)!important}
.personal-access-copy p{color:var(--ink-soft)!important}
.personal-access-copy .ticket-name{color:var(--gold)!important}
.personal-qr-shell{background:var(--ivory)!important;border-color:rgba(77,91,71,.24)!important}
.personal-access-actions .btn.primary{background:var(--sage-700)!important;color:var(--ivory)!important}
.personal-access-actions .btn.secondary{background:rgba(255,250,241,.75)!important;color:var(--sage-850)!important}
.personal-access-note{color:#70786c!important}

.rsvp-shell{align-items:start}
.rsvp-summary,.rsvp-form{background:rgba(255,250,241,.88)!important}
.field label{color:var(--sage-700)!important}
.field input,.field select,.field textarea{
  color:var(--ink)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(86,99,80,.24)!important;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sage-550)!important;
  box-shadow:0 0 0 3px rgba(145,160,138,.16)!important;
}
.choice{color:var(--ink)!important;background:rgba(229,235,225,.58)!important;border-color:rgba(86,99,80,.2)!important}
.choice:has(input:checked){background:var(--sage-300)!important;border-color:var(--sage-700)!important}
.notice{background:var(--sage-100)!important;color:var(--ink-soft)!important}
.notice.success{border-color:var(--sage-550)!important;color:var(--sage-850)!important}

.faq-item button{color:var(--sage-950)!important}
.footer{color:var(--ink-soft)!important;background:var(--cream)!important}
.footer strong{color:var(--sage-950)!important}
.toast{color:var(--ink)!important;background:var(--ivory)!important;border-color:var(--sage-line)!important}
.cj-progress{background:linear-gradient(90deg,var(--sage-550),var(--gold))!important;box-shadow:none!important}
.cj-organic-veil{opacity:.1!important}

@media(max-width:820px){
  .hero{padding:54px 10px 92px!important}
  .hero::before{inset:10px 8px 22px!important}
  .hero-card{padding:58px 20px 50px!important;border-radius:44% 44% 22px 22px/10% 10% 22px 22px!important}
  .gallery{grid-auto-rows:minmax(175px,48vw)!important}
}
@media(max-width:600px){
  .opening-veil{inset:-5px!important}
  .veil-panel{width:55%!important}
  .veil-left{left:-5%!important}
  .veil-right{right:-5%!important}
  .veil-monogram{width:68px!important;height:68px!important}
  .hero h1{font-size:clamp(3.7rem,18vw,6rem)!important}
  .hero-card{background:rgba(255,250,241,.8)!important}
  .guest-banner{margin-inline:8px!important}
  .countdown{padding:12px 7px!important;border-radius:20px!important}
  .countdown-item{padding:12px 5px!important}
  .gallery{grid-template-columns:1fr 1fr!important;grid-auto-rows:180px!important;padding:8px!important}
  .gallery img:first-child{grid-column:1/-1;grid-row:auto;border-radius:100px 100px 16px 16px!important}
  .gallery img:nth-child(3){border-radius:16px 16px 90px 90px!important}
}
@media(max-width:390px){
  .hero-card{padding-inline:16px!important}
  .countdown-item strong{font-size:1.35rem!important}
  .countdown-item span{font-size:.52rem!important}
}
@media(prefers-reduced-motion:reduce){
  .opening-veil.is-opening{opacity:0!important}
  .opening-veil.is-opening .veil-panel{transform:none!important}
}