/* =========================================================
   THE LOJEKS — Rachel & Kyle, May 20 2027
   Dark theme
   ========================================================= */
:root{
  --bg:         #FDFBF7;
  --panel:      #F4EEE5;
  --panel-2:    #EAE0D2;
  --text:       #17110E;
  --text-soft:  rgba(23,17,14,.66);
  --border:     rgba(23,17,14,.14);

  --blush:      #17110E;
  --rose-gold:  rgba(23,17,14,.5);
  --cherry:     #17110E;
  --burgundy:   #17110E;
  --sky:        #CFE1EC;
  --paper:      #F4EEE5;

  --font-display: "Instrument Serif", serif;
  --font-script:  "Petit Formal Script", cursive;
  --font-body:    "Poppins", sans-serif;

  --container: 1160px;
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-snap-type: y proximity; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 400; margin: 0; color: var(--blush); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--cherry); color:var(--bg);
  padding:.75em 1.25em; z-index:200;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

:focus-visible{ outline: 2px solid var(--cherry); outline-offset: 3px; }

.script{ font-family: var(--font-script); font-weight: 400; }

/* ambient backdrop wash behind whole page */
.tide{
  position: fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(23,17,14,.05), transparent 55%),
    radial-gradient(ellipse at 90% 30%, rgba(23,17,14,.03), transparent 45%),
    var(--bg);
}

.eyebrow{
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: .08em;
  color: var(--cherry);
  font-size: 1.05rem;
  margin: 0 0 .4em;
  text-align:center;
}
.eyebrow--light{ color: var(--bg); }

.section__title{
  font-size: clamp(2.1rem, 4vw, 3rem);
  text-align:center;
  margin-bottom: 2.6rem;
  color: var(--blush);
}
.section__title--light{ color: var(--bg); }

.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.placeholder-copy{
  color: var(--text-soft);
  font-style: italic;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 1.15em 3.2em;
  border: 1px solid var(--cherry);
  border-radius: var(--radius);
  transition: background var(--ease) .25s, color var(--ease) .25s, transform var(--ease) .2s, box-shadow var(--ease) .25s;
}
.btn--primary{
  background: var(--cherry);
  color: var(--bg);
  box-shadow: 0 8px 30px rgba(23,17,14,.25);
}
.btn--primary:hover{ background: var(--bg); color: var(--text); border-color: var(--text); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(23,17,14,.35); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.75rem;
  background: rgba(253,251,247,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__mark{
  display:flex; align-items:center;
  text-decoration:none;
}
.nav__logo{
  height: 46px;
  width:auto;
  display:block;
}
.nav__amp{ color: var(--cherry); margin: 0 .05em; }

.nav__links{
  display:flex; align-items:center; gap: 1.9rem;
}
.nav__links a{
  text-decoration:none;
  font-size: 1rem;
  letter-spacing:.03em;
  color: var(--text);
  position:relative;
  padding: .2em 0;
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--cherry);
  transition:right .25s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{
  border:1px solid var(--cherry);
  padding: .7em 1.8em;
  border-radius: var(--radius);
  color: var(--cherry);
}
.nav__cta:hover{ background: var(--cherry); color: var(--bg); }

.nav__toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:30px;
  background:none; border:none; cursor:pointer;
}
.nav__toggle span{ display:block; height:1.5px; background: var(--blush); }

@media (max-width: 860px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background: rgba(244,238,229,.96);
    backdrop-filter: blur(10px);
    max-height:0; overflow:hidden;
    transition: max-height .35s var(--ease);
    border-bottom: 1px solid var(--border);
  }
  .nav__links.is-open{ max-height: 400px; }
  .nav__links a{ width:100%; padding: 1rem 1.75rem; border-top:1px solid var(--border); }
  .nav__cta{ margin:1rem 1.75rem; border-radius: var(--radius); display:inline-block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 6rem 1.5rem 4rem;
  background: var(--bg);
  scroll-snap-align: start;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__content{ position:relative; z-index:2; max-width: 760px; }
.hero__content .hero__headline{ color: var(--bg); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero__content .hero__subhead{ color: rgba(253,251,247,.92); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero__content .countdown__num{ color: var(--bg); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero__content .countdown__label{ color: rgba(253,251,247,.85); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hero__scroll{ border-color: var(--bg); }
.hero__scroll span{ background: var(--bg); }
.hero__cta{
  display:inline-block;
  margin-top: 1.8rem;
  transition: transform .3s var(--ease);
}
.hero__cta img{
  width: 200px;
  height:auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.hero__cta:hover{
  transform: translateY(-4px) rotate(-2deg) scale(1.04);
}

.hero__headline{
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 1.4rem;
}
.hero__subhead{
  font-size: 1.15rem;
  letter-spacing:.02em;
  margin: 0;
}

.countdown{
  display:flex; justify-content:center; gap: 1.4rem;
  margin: 2.6rem 0 2.4rem;
}
.countdown__unit{
  display:flex; flex-direction:column; align-items:center;
  min-width: 58px;
}
.countdown__num{
  font-family: var(--font-display);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}
.countdown__label{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing:.1em;
}

.hero__scroll{
  position:absolute; bottom: 2rem; left:50%; transform:translateX(-50%);
  width: 22px; height:36px; border:1px solid; border-radius: 12px;
}
.hero__scroll span{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:6px; border-radius:2px;
  animation: dip 1.8s ease-in-out infinite;
}
@keyframes dip{
  0%{ opacity:1; top:6px; }
  70%{ opacity:0; top:18px; }
  100%{ opacity:0; top:6px; }
}

/* =========================================================
   STORY (plain background, text only)
   ========================================================= */
.story{ text-align:center; }
.story__copy{
  max-width: 680px; margin: 2.4rem auto 0;
  font-size: 1.15rem; line-height: 1.75;
  color: var(--text);
}
.story__copy p{ margin: 0 0 1.2rem; }
.story__copy p:last-child{ margin-bottom: 0; }

/* =========================================================
   STORY VIDEO (standalone, no text)
   ========================================================= */
.story-video{
  position:relative;
  overflow:hidden;
  height: 78vh;
  min-height: 420px;
}
.story-video__el{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
@media (max-width: 700px){
  .story-video{ height: 52vh; min-height: 320px; }
}

/* =========================================================
   DETAILS (full-bleed photo, floating text)
   ========================================================= */
.details{
  position:relative;
  overflow:hidden;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  padding: 7rem 1.5rem;
  text-align:center;
  scroll-snap-align: start;
}
.details__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.details__scrim{
  position:absolute; inset:0;
  background: rgba(23,17,14,.5);
}
.details__content{
  position:relative; z-index:2;
  max-width: var(--container);
  margin: 0 auto;
}

.details__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.6rem;
}
@media (max-width: 780px){ .details__grid{ grid-template-columns:1fr; } }
.details__card{
  text-align:center;
  background: rgba(23,17,14,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(253,251,247,.25);
  padding: 2rem 1.6rem;
}
.details__card h3{ font-size: 1.4rem; margin: 0 0 .6rem; color: var(--bg); }
.details__card p{ color: rgba(253,251,247,.9); margin:0; }

/* =========================================================
   TRAVEL (full-bleed photo, floating text)
   ========================================================= */
.travel{
  position:relative;
  overflow:hidden;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  padding: 7rem 1.5rem;
  text-align:center;
  scroll-snap-align: start;
}
.travel__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.travel__scrim{
  position:absolute; inset:0;
  background: rgba(23,17,14,.58);
}
.travel__content{
  position:relative; z-index:2;
  max-width: var(--container);
  margin: 0 auto;
}

.travel__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 2.6rem;
}
@media (max-width: 900px){ .travel__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .travel__grid{ grid-template-columns:1fr; } }
.travel__card{
  background: rgba(23,17,14,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(253,251,247,.25);
  padding: 2rem 1.6rem;
}
.travel__card h3{ font-size: 1.3rem; margin: 0 0 .6rem; color: var(--bg); }
.travel__card p{ color: rgba(253,251,247,.9); margin:0; }

/* =========================================================
   FAQ
   ========================================================= */
.accordion{ max-width: 820px; margin: 2.6rem auto 0; }
.accordion--large .accordion__item{ padding: 1.8rem 0; }
.accordion--large .accordion__item summary{ font-size: 1.5rem; }
.accordion--large .accordion__item p{ font-size: 1.15rem; margin-top: 1.1rem; }
.accordion__item{
  border-bottom: 1px solid var(--border);
  padding: 1.3rem 0;
}
.accordion__item summary{
  cursor:pointer; list-style:none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--blush);
  display:flex; justify-content:space-between; align-items:center;
}
.accordion__item summary::-webkit-details-marker{ display:none; }
.accordion__item summary::after{
  content:"+"; color: var(--cherry); font-size:1.4rem; margin-left:1rem; transition: transform .2s var(--ease);
}
.accordion__item[open] summary::after{ transform: rotate(45deg); }
.accordion__item p{ margin: .9rem 0 0; color: var(--text-soft); }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp{
  max-width:none;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  background: var(--text);
  padding: 6rem 1.5rem;
  text-align:center;
  scroll-snap-align: start;
}
.rsvp__inner{ max-width: 640px; margin: 0 auto; }
.rsvp__submit{
  display:inline-block;
  transition: transform .3s var(--ease);
}
.rsvp__submit img{
  width: min(560px, 80vw);
  height:auto;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.5));
}
.rsvp__submit:hover{
  transform: translateY(-6px) rotate(1.5deg) scale(1.04);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  text-align:center; padding: 0 0 3rem;
  background: var(--bg); color: var(--blush);
}
.footer__strip{
  display:grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 3rem;
}
.footer__strip img{
  width:100%; aspect-ratio: 1/1; object-fit:cover; display:block;
}
.footer__mark{ font-size: 2.2rem; margin: 0 0 .3rem; }
.footer__sub{ margin:0; letter-spacing:.05em; color: var(--text-soft); }