@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Forum&display=swap');

@font-face{
  font-family: 'Florise';
  src: url('https://static.tildacdn.one/tild6565-3136-4666-b566-396137323536/Floriselscript.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

.splash-body{
  margin: 0;
  background: #fafaef;
}

.tap-screen,
.splash{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  font-family: 'Cormorant Garamond', serif;
}

.splash{
  display: none;
}
.splash.is-active{
  display: flex;
}

.tap-screen.is-hidden{
  display: none;
}

.site-content{
  display: none;
}
.site-content.is-active{
  display: block;
}

.tap-btn{
  margin-top: 40px;
  padding: 16px 44px;
  border: 1px solid #b48a76;
  background: none;
  color: #6b5a4a;
  font-family: 'Forum', serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease-out .6s forwards, pulse 2.4s ease-in-out 2s infinite;
  transition: background .3s, color .3s;
}
.tap-btn:hover{ background: #b48a76; color: #fff; }

@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(180,138,118,.35); }
  50%{ box-shadow: 0 0 0 10px rgba(180,138,118,0); }
}

.splash__crest{
  width: 220px;
  max-width: 60vw;
  opacity: 0;
  animation: fadeUp 1.2s ease-out .1s forwards;
}

.splash__name{
  font-family: 'Florise', cursive;
  font-size: 44px;
  margin: 18px 0 2px;
  color: #6b5a4a;
  opacity: 0;
  animation: fadeUp 1.2s ease-out .4s forwards;
}

.splash__sub{
  font-family: 'Forum', serif;
  letter-spacing: .2em;
  font-size: 14px;
  color: #b48a76;
  margin: 0 0 40px;
  opacity: 0;
  animation: fadeUp 1.2s ease-out .6s forwards;
}

.splash__langs{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1.2s ease-out .85s forwards;
}

.splash__lang-btn{
  padding: 14px 32px;
  border: 1px solid #b48a76;
  color: #6b5a4a;
  text-decoration: none;
  font-family: 'Forum', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
  transition: background .3s, color .3s;
}
.splash__lang-btn:hover{ background: #b48a76; color: #fff; }

:root{
  --bg: #faf7f2;
  --ink: #2b2620;
  --gold: #a98a5b;
  --line: #ddd2c0;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

html{ max-width: 100%; overflow-x: hidden; }

body{
  margin: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.6;
  overflow-x: hidden;
}

img{ max-width: 100%; }

.eyebrow{
  font-family: 'Forum', serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 22px;
  text-align: center;
}

.section{
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 30px;
  text-align: center;
}

/* ---------- reveal animations ---------- */
.reveal-up{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-up.is-visible{ opacity: 1; transform: translateY(0); }

.reveal-zoom{
  opacity: 0;
  transition: opacity 1s ease;
}
.reveal-zoom.is-visible{ opacity: 1; }

.reveal-side{
  opacity: 0;
  transform: translateX(38px);
  transition: opacity 1.1s ease .15s, transform 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.reveal-side.is-visible{ opacity: 1; transform: translateX(0); }

.reveal-side-left{
  opacity: 0;
  transform: translateX(-38px);
  transition: opacity 1.1s ease .15s, transform 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.reveal-side-left.is-visible{ opacity: 1; transform: translateX(0); }

.gallery a.d2{ transition-delay: .1s; }
.gallery a.d3{ transition-delay: .1s; }
.gallery a.d4{ transition-delay: .2s; }

/* ---------- Hero collage ---------- */
.hero-collage{
  padding: 0;
  max-width: none;
  margin: 0;
  text-align: center;
  position: relative;
}

.hero-collage__frame{
  position: relative;
  max-width: none;
  margin: 0;
}

.hero-collage__frame::after{
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(250,247,242,0) 0%, var(--bg) 92%);
  pointer-events: none;
}

.hero-collage__photo{
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  object-fit: cover;
  object-position: top center;
}

.hero-collage__names{
  position: absolute;
  z-index: 2;
  top: 7%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--ink);
}

.hero-collage__names .name{
  display: block;
  font-family: 'Florise', cursive;
  font-size: 56px;
  line-height: 1;
}

.hero-collage__names .ornament{
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 12px auto;
}

.hero-collage__names .event{
  display: block;
  font-family: 'Florise', cursive;
  font-size: 30px;
  color: var(--ink);
}

.hero-collage__scroll{
  position: absolute;
  z-index: 2;
  bottom: 26px;
  left: 0;
  right: 0;
  color: var(--gold);
  font-size: 22px;
  animation: bounce 2.2s ease-in-out infinite;
}

@media (min-width: 640px){
  .hero-collage{
    padding: 56px 24px 40px;
    max-width: 760px;
    margin: 0 auto;
  }
  .hero-collage__frame{
    max-width: 420px;
    margin: 0 auto;
  }
  .hero-collage__photo{
    width: 82%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    box-shadow: 0 24px 50px -20px rgba(43,38,32,.45);
  }
  .hero-collage__frame::after{
    display: none;
  }
  .hero-collage__names{
    position: relative;
    top: auto;
    margin: -50px 0 0 34%;
    text-align: left;
  }
  .hero-collage__names .ornament{ margin: 12px 0; }
  .hero-collage__scroll{
    position: static;
    margin-top: 30px;
  }
}

@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(8px); }
}

/* ---------- Play button ---------- */
.play-circle{
  position: relative;
  width: 84px;
  height: 84px;
  margin: 34px auto 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-circle .ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  animation: spin 14s linear infinite;
}
.play-circle.is-playing .ring{ animation-play-state: running; }
.play-circle:not(.is-playing) .ring{ animation-play-state: paused; }

.play-circle .icon-play,
.play-circle .icon-pause{
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
}
.play-circle .icon-pause{ display: none; }
.play-circle.is-playing .icon-play{ display: none; }
.play-circle.is-playing .icon-pause{ display: block; }

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------- Welcome collage ---------- */
.welcome-collage{
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 24px 90px;
  display: block;
}
.welcome-collage__card{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-bottom: 32px;
}

.welcome-collage__quote{
  font-family: 'Florise', cursive;
  font-size: 52px;
  line-height: 1.2;
  color: var(--ink);
}

.welcome-collage__text{ min-width: 0; }
.welcome-collage__text .eyebrow{ text-align: left; margin-bottom: 14px; }

.welcome-collage__body{
  margin: 0;
  font-size: 18px;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

.welcome-collage__photo{
  display: block;
  justify-self: center;
  width: 74%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-top: 28px;
  transform: rotate(-2deg);
  box-shadow: 0 20px 40px -18px rgba(43,38,32,.4);
  position: relative;
  z-index: 2;
}

@media (min-width: 600px){
  .welcome-collage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    padding: 90px 30px 130px;
  }
  .welcome-collage__card{ margin-bottom: 0; }
  .welcome-collage__photo{
    grid-column: 1 / -1;
    justify-self: center;
    width: 56%;
    margin-top: 34px;
  }
}

/* ---------- Countdown ---------- */
.countdown{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 36px;
}

.countdown__box{
  flex: 1 1 0;
  min-width: 0;
  max-width: 78px;
  padding: 12px 4px;
}

.countdown__num{
  display: block;
  font-family: 'Forum', serif;
  font-size: 24px;
  color: var(--ink);
}

.countdown__label{
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

@media (min-width: 420px){
  .countdown{ gap: 14px; }
  .countdown__box{ padding: 16px 10px; }
  .countdown__num{ font-size: 32px; }
  .countdown__label{ font-size: 13px; letter-spacing: .08em; }
}

/* ---------- Calendar ---------- */
.calendar{
  max-width: 320px;
  margin: 0 auto 50px;
  padding: 0;
}

.calendar__month{
  font-family: 'Florise', cursive;
  font-size: 30px;
  padding: 4px 0 16px;
  color: var(--ink);
}

.countdown__title{
  font-family: 'Florise', cursive;
  font-size: 30px;
  color: var(--ink);
  margin: 0 0 18px;
}

.calendar__grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 15px;
  padding: 18px 14px 22px;
  row-gap: 10px;
}

.calendar__grid span{
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar__grid .dow{
  font-family: 'Forum', serif;
  font-size: 12px;
  color: var(--gold);
}

.calendar__grid .highlight{
  position: relative;
  color: var(--ink);
  font-weight: 600;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.calendar__grid .highlight::before{
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -52%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 27.5C16 27.5 3.5 19.6 3.5 11.7C3.5 7.3 7 3.8 11.3 3.8C13.6 3.8 15.4 4.9 16 5.6C16.6 4.9 18.4 3.8 20.7 3.8C25 3.8 28.5 7.3 28.5 11.7C28.5 19.6 16 27.5 16 27.5Z' fill='none' stroke='%23a98a5b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.calendar__grid .empty{ visibility: hidden; }

/* ---------- Details ---------- */
.details__grid{
  display: grid;
  gap: 30px;
  margin: 0 0 10px;
  text-align: center;
}

.details__item .label{
  font-family: 'Forum', serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 6px;
}

.details__item .value{
  font-size: 24px;
}

.details__item .value small{
  display: block;
  font-size: 16px;
  color: #6b6154;
  margin-top: 2px;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}

.map-btn{
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Forum', serif;
  font-size: 13px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.map-btn:hover{ background: var(--ink); color: #fff; }

/* ---------- RSVP ---------- */
.rsvp__form{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.rsvp__input{
  width: 100%;
  max-width: 320px;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: var(--ink);
}
.rsvp__input::placeholder{ color: #a99d8c; }
.rsvp__input:focus{ outline: none; border-bottom-color: var(--gold); }

.rsvp__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.rsvp__btn{
  padding: 14px 24px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: 'Forum', serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.rsvp__btn:hover{ background: var(--ink); color: #fff; }
.rsvp__btn--yes{ background: var(--gold); border-color: var(--gold); color: #fff; }
.rsvp__btn--yes:hover{ background: var(--ink); border-color: var(--ink); }

.rsvp__note{
  margin: 22px 0 0;
  color: var(--gold);
  font-family: 'Forum', serif;
  font-size: 15px;
  letter-spacing: .04em;
  min-height: 20px;
}

.rsvp__note--warn{
  color: #d98ea6;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

.rsvp__input--warn{
  border-bottom-color: #d98ea6;
}

/* ---------- Parents collage ---------- */
.parents-collage{
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 70px 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  text-align: center;
}

.parents-collage__photo{
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 20px 40px -18px rgba(43,38,32,.4);
}

.parents-collage__text{ text-align: center; min-width: 0; }
.parents-collage__text .eyebrow{ text-align: center; }

@media (min-width: 600px){
  .parents-collage{
    grid-template-columns: 1fr 1.2fr;
    padding: 90px 30px;
    text-align: left;
  }
  .parents-collage__photo{ max-width: none; margin: 0; }
  .parents-collage__text{ text-align: left; }
  .parents-collage__text .eyebrow{ text-align: left; }
}

.parents-collage__names{
  font-family: 'Florise', cursive;
  font-size: 38px;
  margin: 0 0 12px;
  color: var(--ink);
}

.parents-collage__body{
  margin: 0;
  color: #6b6154;
  font-size: 18px;
}

/* ---------- Gallery ---------- */
.gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  max-width: 380px;
  margin: 0 auto;
}

.gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.gallery a{
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 16px 30px -18px rgba(43,38,32,.4);
}

@media (min-width: 640px){
  .gallery{ max-width: 460px; }
}

/* ---------- Footer ---------- */
.footer{
  position: relative;
  text-align: center;
  padding: 60px 30px 80px;
  overflow: hidden;
}

.decor-branch{
  position: absolute;
  width: 90px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.decor-branch--footer-l{
  left: -10px;
  bottom: -6px;
  transform: rotate(-8deg);
}
.decor-branch--footer-r{
  right: -10px;
  top: -6px;
  transform: scaleX(-1) rotate(-8deg);
}
.decor-branch--splash{
  position: relative;
  width: 120px;
  margin: 10px auto -20px;
  opacity: .7;
  display: block;
}
.decor-branch--welcome{
  position: absolute;
  width: 80px;
  right: 6px;
  top: 10px;
  opacity: .45;
  pointer-events: none;
}
.decor-branch--hero{
  position: absolute;
  width: 100px;
  left: -6px;
  top: 2%;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}
.decor-branch--details{
  position: absolute;
  width: 70px;
  left: -4px;
  top: -10px;
  opacity: .4;
  pointer-events: none;
}
.decor-branch--parents{
  position: absolute;
  width: 70px;
  right: -8px;
  bottom: -14px;
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.decor-branch--rsvp{
  position: absolute;
  width: 64px;
  left: 4px;
  top: -6px;
  opacity: .4;
  pointer-events: none;
}
.decor-branch--gallery{
  position: absolute;
  width: 70px;
  right: -2px;
  top: -18px;
  opacity: .4;
  pointer-events: none;
}

.footer__mark{
  font-family: 'Florise', cursive;
  font-size: 32px;
  color: var(--gold);
  margin: 0 0 8px;
}

@media (min-width: 640px){
  .hero-collage__names .name{ font-size: 72px; }
  .hero-collage__names .event{ font-size: 36px; }
}

@media (max-width: 379px){
  .hero-collage__names .name{ font-size: 46px; }
  .hero-collage__names .event{ font-size: 26px; }
}