*{box-sizing:border-box}
:root{
  color-scheme: only light;
  --ivory:#f8f3e8;
  --paper:#fffdf7;
  --green:#334428;
  --green2:#55664a;
  --gold:#bb914d;
  --blush:#d9b6ad;
  --ink:#2f322a;
}
html{scroll-behavior:smooth}
html, body{
  color-scheme: only light;
  background-color:#ece7df;
}
body{
  margin:0;
  background:#ece7df;
  color:var(--ink);
  font-family:"Montserrat",sans-serif;
  overflow-x:hidden;
}
.site-shell{
  position:relative;
  width:min(100%,480px);
  margin:0 auto;
  background:var(--ivory);
  min-height:100vh;
  box-shadow:0 0 55px rgba(56,47,35,.14);
  overflow:hidden;
}
.screen{position:relative;width:100%}
.hero{height:100svh;min-height:720px;overflow:hidden}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%;
  filter:saturate(.84) contrast(.94) brightness(1.03);
  transform:scale(1.015);
}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 25%,rgba(248,243,232,.28) 53%,rgba(248,243,232,.94) 73%,var(--ivory) 100%);
}
.top-monogram{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  z-index:3;color:var(--gold);
  font:500 27px "Cormorant Garamond",serif;
  letter-spacing:.22em;text-shadow:0 2px 8px rgba(255,255,255,.75)
}
.sound-dot{
  position:absolute;z-index:4;top:24px;right:18px;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(187,145,77,.55);
  background:#fffdf7;color:var(--gold);font-size:17px;
}
.hero-card{
  position:absolute;left:16px;right:16px;bottom:18px;
  z-index:3;text-align:center;
  padding:42px 24px 28px;
  border-radius:120px 120px 28px 28px;
  background:#fffdf7;
  backdrop-filter:blur(8px);
  border:1px solid rgba(187,145,77,.25);
}
.tiny{
  margin:0 auto 14px;
  font:500 11px "Cormorant Garamond",serif;
  letter-spacing:.14em;
  max-width:270px;
}
.tiny.wide{max-width:330px;margin-top:16px}
h1{
  margin:10px 0;
  font:500 55px/.85 "Cormorant Garamond",serif;
  color:var(--green);
}
h1 span,h1 em{display:block}
h1 em{
  font:400 34px "Great Vibes",cursive;
  color:var(--gold);margin:8px 0 6px;
}
.gold-flourish{color:var(--gold);font-size:24px;margin:10px 0}
.event-type{
  font:500 12px "Cormorant Garamond",serif;
  letter-spacing:.28em;color:var(--green);margin:8px 0 20px;
}
.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(187,145,77,.28);
  border-bottom:1px solid rgba(187,145,77,.28);
  margin:18px 0 20px;
}
.countdown div{padding:13px 4px;border-right:1px solid rgba(187,145,77,.24)}
.countdown div:last-child{border-right:0}
.countdown strong{
  display:block;font:500 26px "Cormorant Garamond",serif;color:var(--green)
}
.countdown span{font-size:8px;letter-spacing:.13em}
.scroll-cue{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  text-decoration:none;color:var(--gold);
  border:1px solid rgba(187,145,77,.35);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(5px)}}

.paper-section{
  padding:72px 18px 70px;
  text-align:center;
  background:
    radial-gradient(circle at 5% 20%,rgba(217,182,173,.11),transparent 22%),
    radial-gradient(circle at 90% 85%,rgba(85,102,74,.08),transparent 24%),
    var(--paper);
}
.section-kicker{
  margin:0;color:#77766e;font-size:10px;letter-spacing:.23em
}
h2{
  margin:8px auto 0;
  max-width:360px;
  font:500 35px/1.05 "Cormorant Garamond",serif;
  letter-spacing:.05em;color:var(--green);
}
.watercolor-wrap{
  margin:28px -18px 10px;
  overflow:hidden;
}
.watercolor-wrap img{
  display:block;width:100%;height:390px;object-fit:cover;
  filter:saturate(.78) brightness(1.04);
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
}
.date-stack{
  margin:3px auto 26px;
  display:flex;flex-direction:column;gap:5px;
  color:var(--green);letter-spacing:.18em;
}
.date-stack span{font:500 13px "Cormorant Garamond",serif}
.date-stack strong{font:500 64px/.9 "Cormorant Garamond",serif;color:var(--gold)}
.green-card{
  position:relative;
  margin:0 -18px -70px;
  padding:48px 28px 62px;
  background:linear-gradient(180deg,#3a4d30,#2f4128);
  color:white;
  border-radius:44px 44px 0 0;
  overflow:hidden;
}
.green-card:before,.green-card:after{
  content:"✿";position:absolute;color:rgba(255,247,235,.14);font-size:110px
}
.green-card:before{left:-30px;bottom:-25px}
.green-card:after{right:-24px;bottom:-20px}
.info-row{
  display:flex;gap:16px;align-items:flex-start;text-align:left;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.13)
}
.info-row .icon{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(213,187,136,.55);color:#d6b879;font-size:19px;flex:0 0 42px
}
.info-row small{display:block;font-size:9px;letter-spacing:.18em;color:#d7cbb7;margin-bottom:6px}
.info-row b{display:block;font:500 18px "Cormorant Garamond",serif;letter-spacing:.05em}
.info-row span:not(.icon){display:block;font-size:11px;margin-top:3px;color:#e7e0d5}
.location-btn{
  position:relative;z-index:2;
  margin-top:28px;display:inline-flex;gap:10px;align-items:center;
  text-decoration:none;color:#fff;padding:14px 21px;
  border:1px solid #d1b577;border-radius:4px;
  font-size:10px;letter-spacing:.13em
}
.floral-divider{margin-top:96px;color:var(--gold);letter-spacing:.2em}

.venue-section{padding-top:78px}
.stage-card{
  margin:28px 0 22px;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 50px rgba(55,49,40,.10)
}
.stage-card img{
  width:100%;height:470px;object-fit:cover;object-position:center 33%;
  filter:saturate(.82) brightness(1.04)
}
.venue-copy{
  max-width:340px;margin:22px auto 28px;
  font:400 18px/1.7 "Cormorant Garamond",serif;color:#55584e
}
.feature-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.feature-row span{
  font-size:26px;color:var(--gold);
  padding:18px 6px;border:1px solid rgba(187,145,77,.22);border-radius:16px
}
.feature-row small{
  display:block;margin-top:10px;font-size:8px;letter-spacing:.11em;color:#62665a
}

.gallery-section{
  padding:72px 14px 80px;text-align:center;background:#f8f4ec
}
.gallery{
  margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.gallery img{
  width:100%;height:255px;object-fit:cover;border-radius:15px;
  filter:saturate(.88) contrast(.97)
}
.gallery img:nth-child(3){grid-column:1/3;height:300px}
.gallery img:nth-child(4){grid-column:1/3;height:230px;object-position:center 38%}

.ending{
  min-height:92svh;
  display:grid;place-items:center;
  background:var(--paper);
  text-align:center;padding:80px 24px;
}
.ending-content{position:relative;z-index:2}
.ending-monogram{
  font:500 48px "Cormorant Garamond",serif;
  color:var(--gold);letter-spacing:.18em;margin-bottom:30px
}
.ending p{
  max-width:290px;margin:auto;
  font:500 25px/1.45 "Cormorant Garamond",serif;
  letter-spacing:.04em;color:var(--green)
}
.back-top{
  margin:28px auto 0;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(187,145,77,.4);
  color:var(--gold);text-decoration:none
}
.ending-flower{
  position:absolute;width:260px;height:170px;opacity:.20;
  background:
    radial-gradient(circle at 30% 55%,#d7b1aa 0 16%,transparent 17%),
    radial-gradient(circle at 48% 35%,#f1e1cf 0 14%,transparent 15%),
    radial-gradient(circle at 65% 60%,#d9cab2 0 13%,transparent 14%),
    radial-gradient(ellipse at 30% 80%,#728267 0 13%,transparent 14%),
    radial-gradient(ellipse at 70% 80%,#728267 0 13%,transparent 14%);
}
.ending-flower.top{top:20px;right:-70px;transform:rotate(12deg)}
.ending-flower.bottom{bottom:15px;left:-70px;transform:rotate(190deg)}

.reveal{opacity:0;transform:translateY(18px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}

/* Falling petals */
.petals{position:fixed;inset:0;pointer-events:none;z-index:20;width:min(100vw,480px);margin:auto}
.petal{
  position:absolute;top:-30px;
  width:10px;height:15px;border-radius:60% 40% 60% 40%;
  background:rgba(220,185,176,.72);
  animation:fall linear forwards;
  filter:blur(.2px)
}
@keyframes fall{
  to{transform:translate3d(var(--drift),110vh,0) rotate(520deg);opacity:.2}
}

@media(min-width:481px){
  body{padding:18px 0}
  .site-shell{border-radius:30px}
}


.couple-story-section{
  padding-top:76px;
  padding-bottom:82px;
  overflow:hidden;
}
.couple-art{
  width:calc(100% + 36px);
  margin:28px -18px 8px;
  position:relative;
}
.couple-art:before{
  content:"";
  position:absolute;
  inset:6% 10% 4%;
  border-radius:50% 50% 18% 18%;
  background:radial-gradient(circle,rgba(217,182,173,.16),transparent 66%);
  filter:blur(14px);
}
.couple-art img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-height:620px;
  object-fit:contain;
  filter:saturate(.94) brightness(1.02);
}
.milestone{
  position:relative;
  z-index:2;
  margin:-4px auto 0;
  max-width:350px;
  padding:18px 18px 0;
  text-align:center;
}
.milestone-label{
  display:block;
  font-size:9px;
  letter-spacing:.22em;
  color:#77766e;
  margin-bottom:10px;
}
.milestone strong{
  display:block;
  font:500 34px "Cormorant Garamond",serif;
  color:var(--gold);
  letter-spacing:.12em;
}
.milestone p{
  margin:18px auto 12px;
  font:400 18px/1.65 "Cormorant Garamond",serif;
  color:#55584e;
}
.milestone em{
  display:block;
  margin-top:8px;
  font:400 35px "Great Vibes",cursive;
  color:var(--gold);
}

.couple-art{
  margin: 22px -6px 4px !important;
  width: calc(100% + 12px) !important;
  background: transparent !important;
}
.couple-art:before{ display:none !important; }
.couple-art img{
  width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block;
  background:transparent !important;
  filter:none !important;
}


/* Keep the invitation visually identical when the guest uses OS/browser dark mode. */
html, body, .site-shell, .paper-section, .gallery-section, .ending {
  forced-color-adjust: none;
}
input, button, a { color-scheme: only light; }

@media (prefers-color-scheme: dark) {
  :root {
    --ivory:#f8f3e8;
    --paper:#fffdf7;
    --green:#334428;
    --green2:#55664a;
    --gold:#bb914d;
    --blush:#d9b6ad;
    --ink:#2f322a;
  }
  html,body { background:#ece7df !important; color:#2f322a !important; }
  .site-shell { background:#f8f3e8 !important; }
  .paper-section,.ending { background-color:#fffdf7 !important; }
  .hero-card { background:#fffdf7 !important; color:#2f322a !important; }
  .sound-dot { background:#fffdf7 !important; color:#bb914d !important; }
  .green-card { background:linear-gradient(180deg,#3a4d30,#2f4128) !important; color:#fff !important; }
}

/* Phone hero: reserve a clean, unobstructed window for the venue photo. */
@media (max-width:480px) {
  .hero { height:100svh; min-height:700px; background:var(--ivory); }
  .hero-photo {
    height:56%;
    object-fit:cover;
    object-position:center 34%;
    transform:none;
  }
  .hero-fade {
    height:60%;
    bottom:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.01) 0%,rgba(248,243,232,.03) 65%,var(--ivory) 100%);
  }
  .hero-card {
    left:10px; right:10px; bottom:8px;
    padding:30px 18px 20px;
    border-radius:92px 92px 24px 24px;
    backdrop-filter:blur(5px);
  }
  h1 { font-size:48px; }
  .tiny { margin-bottom:9px; }
  .tiny.wide { margin-top:10px; }
  .event-type { margin-bottom:12px; }
  .countdown { margin:12px 0 13px; }
  .countdown div { padding:9px 3px; }
  .countdown strong { font-size:23px; }
}

/* Very short phones: keep both the venue and invitation content readable. */
@media (max-width:480px) and (max-height:740px) {
  .hero { min-height:680px; }
  .hero-photo { height:52%; object-position:center 31%; }
  .hero-card { padding-top:25px; }
  h1 { font-size:43px; }
}


/* HARD LIGHT-THEME LOCK
   Prevents normal OS/browser dark mode from altering the invitation palette. */
:root {
  color-scheme: only light !important;
}

html {
  background:#ece7df !important;
  color-scheme: only light !important;
}

body {
  background:#ece7df !important;
  color:#2f322a !important;
  color-scheme: only light !important;
}

html, body, .site-shell, .screen, .paper-section, .ending,
.hero-card, .sound-dot, .milestone, .couple-story-section {
  forced-color-adjust:none !important;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.site-shell {
  background:#f8f3e8 !important;
}

.paper-section,
.couple-story-section,
.ending {
  background-color:#fffdf7 !important;
}

.hero-card,
.sound-dot {
  background-color:#fffdf7 !important;
}

/* Keep transparent decorative layers transparent ONLY over our own fixed light surfaces. */
.couple-art,
.couple-art img,
.petals {
  background-color:transparent !important;
}

/* Explicit text colors so mobile dark mode cannot infer replacements. */
.tiny, .invite-line, .countdown span, .milestone p {
  color:#2f322a !important;
}
h1, h2, .event-type, .date-stack, .ending p {
  color:#334428 !important;
}
.gold-flourish, .top-monogram, .ending-monogram,
.milestone strong, .milestone em, .scroll-cue {
  color:#bb914d !important;
}

/* Re-assert exact same palette in dark preference. */
@media (prefers-color-scheme: dark) {
  html, body {
    background:#ece7df !important;
    color:#2f322a !important;
  }
  .site-shell { background:#f8f3e8 !important; }
  .paper-section, .couple-story-section, .ending { background:#fffdf7 !important; }
  .hero-card, .sound-dot { background:#fffdf7 !important; }
  h1, h2, .event-type, .date-stack, .ending p { color:#334428 !important; }
  .tiny, .invite-line, .countdown span, .milestone p { color:#2f322a !important; }
}

/* Some Android browsers apply extra darkening to form controls. */
button, a {
  color-scheme:only light !important;
}

/* IMAGE-BASED LIGHT PALETTE LOCK
   Some mobile browsers force "darken websites" even against normal CSS colors.
   Opaque background images are used for the invitation surfaces so they are not recolored. */
html {
  color-scheme: light !important;
  background: #ece7df url("assets/outer-bg.png") repeat !important;
}
body {
  color-scheme: light !important;
  background: #ece7df url("assets/outer-bg.png") repeat !important;
  color:#2f322a !important;
}
.site-shell {
  background: #f8f3e8 url("assets/ivory-bg.png") repeat !important;
}
.paper-section,
.couple-story-section,
.ending,
.gallery-section {
  background: #fffdf7 url("assets/paper-bg.png") repeat !important;
}
.hero-card,
.sound-dot {
  background: #fffdf7 url("assets/paper-bg.png") repeat !important;
}

/* keep venue hero image itself untouched */
.hero {
  background-color:#f8f3e8 !important;
}

/* explicit foreground colors */
h1,h2,.event-type,.date-stack,.ending p { color:#334428 !important; }
.tiny,.invite-line,.countdown span,.milestone p,.venue-copy { color:#2f322a !important; }
.gold-flourish,.top-monogram,.ending-monogram,.milestone strong,.milestone em,.scroll-cue {
  color:#bb914d !important;
}
.green-card {
  background:#334428 !important;
  background-image:none !important;
  color:#fff !important;
}
.location-btn { color:#fff !important; border-color:#d1b577 !important; }

/* common accessibility/extension overrides */
* {
  forced-color-adjust:none !important;
}
@media (prefers-color-scheme: dark) {
  html, body { background:#ece7df url("assets/outer-bg.png") repeat !important; color:#2f322a !important; }
  .site-shell { background:#f8f3e8 url("assets/ivory-bg.png") repeat !important; }
  .paper-section,.couple-story-section,.ending,.gallery-section,
  .hero-card,.sound-dot { background:#fffdf7 url("assets/paper-bg.png") repeat !important; }
}