/* ============================================================
   Kyler & Stormy — wedding invitation
   Faithful rebuild of the Canva "016" template as an editable site.
   ============================================================ */

[hidden] { display: none !important; }

@font-face {
  font-family: "The Seasons";
  src: url("../fonts/theseasons-reg.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/theseasons-bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --olive:        #6f7350;
  --olive-deep:   #4d5138;
  --olive-card:   #59613f;
  --cream:        #f3ecdd;
  --paper:        #ffffff;
  --ink:          #3a3128;
  --ink-soft:     #5b5346;
  --burgundy:     #4e1626;
  --burgundy-deep:#3a1019;
  --wine:         #5c1a2b;
  --gold:         #b0925a;
  --near-black:   #021436;

  --f-script: sloop-script-pro, "Pinyon Script", cursive;
  --f-serif:  "Cormorant Garamond", Georgia, serif;
  --f-sans:   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:   "Courier Prime", "Courier New", monospace;
  --f-geist:  "Geist Mono", "Courier Prime", monospace;
  --f-seasons: "The Seasons", "Cormorant Garamond", serif;
  --f-geist:   "Geist Mono", "Courier Prime", monospace;
  --fig-green: #6d6e23;

  /* palette from the Figma design */
  --fig-ink:       #08004c;
  --fig-navy:      #021436;
  --fig-pink-pale: #eadee3;
  --fig-pink:      #f3c4cb;
  --fig-mauve:     #c2818c;
  --fig-olive-lt:  #b3b957;
  --fig-olive:     #6d6e23;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* fixed banner heights — photos stay cropped (cover), never grow with viewport */
  --h-hero: 340px;
  --h-foot: 440px;
}
@media (min-width: 768px) {
  :root { --h-hero: 403px; --h-foot: 521px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.label {
  font-family: var(--f-serif);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-weight: 500;
}
.caps {
  font-family: var(--f-sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: 400;
}
.script { font-family: var(--f-script); font-weight: 400; line-height: .9; }

/* ============================================================
   SCENE SYSTEM
   ============================================================ */
#app { position: relative; width: 100%; min-height: 100dvh; }
.scene {
  position: fixed; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
  overflow: hidden;
}
.scene.is-active { opacity: 1; visibility: visible; }
.scene--scroll.is-active {
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}

/* shared button ovals */
.oval {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--f-sans); text-transform: uppercase;
  letter-spacing: .26em; font-size: 13px; font-weight: 400;
  color: var(--paper);
  background: var(--burgundy);
  border-radius: 50%/50%;
  padding: 20px 46px;
  cursor: pointer;
  transition: background .4s var(--ease), transform .4s var(--ease);
  border: none;
}
.oval:hover { background: var(--burgundy-deep); transform: translateY(-2px); }
.oval--ghost {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85);
}
.oval--ghost:hover { background: rgba(255,255,255,.12); }

.back-link {
  font-family: var(--f-sans); text-transform: uppercase;
  letter-spacing: .34em; font-size: 12px; font-weight: 400;
  cursor: pointer; display: inline-block;
}
.back-link:hover { opacity: .6; }

/* banner heroes shared by story + details */
.hero-banner {
  position: relative;
  min-height: var(--h-hero);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(22px,5vh,46px);
  padding: clamp(34px,7vh,64px) 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-banner .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.62);
}
.hero-banner .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(15,13,11,.28);
}
.hero-banner .back-link {
  position: absolute; top: clamp(20px,4vh,40px); left: 50%;
  transform: translateX(-50%); color: #fff; z-index: 2;
}
.hero-banner .hero-title {
  position: relative; z-index: 2;
  font-family: var(--f-script);
  font-size: clamp(52px, 8vw, 108px);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-banner .fd-back { z-index: 2; }

/* footer "celebrate" banner (FAQs) */
.hero-banner--foot {
  min-height: var(--h-foot); gap: clamp(16px, 3vh, 44px);
}
.hero-banner.hero-banner--foot .fd-back { position: static; transform: none; left: auto; top: auto; }
.celebrate-bow {
  position: relative; z-index: 2;
  width: clamp(90px, 15vw, 114px); height: auto;
}
.celebrate-caps {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--f-sans); text-transform: uppercase;
  letter-spacing: .1em; font-size: clamp(12px, 2.4vw, 18px);
  color: #eadee3; text-align: center;
}

/* generic white mid-page block ("Coming soon!") */
.page-mid {
  background: #fff; text-align: center;
  padding: clamp(48px, 9vh, 104px) 20px;
}
.page-mid .coming-soon { margin: 0; }

/* ============================================================
   INTRO  — Figma frame 53:1144 (venue bg + envelope + florals)
   ============================================================ */
#intro { background: #021436; }
.intro-bg2 {
  position: absolute; inset: 0;
  background: url("../img/figma/intro/bg.jpg") center / cover no-repeat;
}
.intro-bg2::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.intro-inner {
  position: relative; height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px,2.6vh,32px);
  padding: clamp(24px,5vh,70px) 20px; color: #fff; text-align: center;
}
.intro-label, .intro-cta2 {
  font-family: var(--f-geist); text-transform: uppercase; font-weight: 400;
  letter-spacing: .18em; font-size: clamp(12px,3.1vw,24px); color: #fff; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.intro-couple {
  font-family: var(--f-script); font-weight: 400; color: #fff;
  font-size: clamp(54px,14.5vw,124px); line-height: .95; margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.intro-cta2 { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* envelope composition */
.envelope-stage {
  position: relative; width: min(620px,94vw);
  cursor: pointer; z-index: 1;
}
.env-arrangement {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2021 / 1247;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.42));
}
.envelope-stage.is-opening { cursor: default; }

/* ============================================================
   HOME  — Figma collage 35:653 (coordinate-exact scaled canvas)
   ============================================================ */
#home { background: #fff; }
.fig-wrap { position: relative; width: 100%; overflow: hidden; }
.fig-canvas { width: 1442px; position: relative; transform-origin: top left; }
#homeCanvas { height: 2361px; }
#storyCanvas { height: 900px; }

/* polaroid frame + photo (Our Story / XOXO collages) */
.pol-fig { position: absolute; transform-origin: center; aspect-ratio: 245 / 305; }
.pol-fig .pol-frame { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(60,50,40,.22)); pointer-events: none; }
.pol-fig .pol-photo { position: absolute; left: 11%; top: 9.5%; width: 78%; height: 62%; overflow: hidden; z-index: 1; }
.pol-fig .pol-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.02); }
.pol-fig .pol-cap { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; z-index: 3;
  font-family: var(--f-geist); text-transform: uppercase; letter-spacing: .1em;
  font-size: 18px; color: var(--fig-ink); }

.story-tail { text-align: center; padding: clamp(12px,2.4vh,26px) 20px clamp(44px,8vh,88px); }

/* flattened Figma collage exported as one image */
.collage-img-wrap { width: 100%; display: flex; justify-content: center; padding: clamp(10px,3vw,40px) 0 0; }
.collage-img { display: block; width: min(1080px, 100%); height: auto; }
.fig-canvas .fe { position: absolute; }
.fig-canvas img.fe, .fig-canvas .fe > img { display: block; width: 100%; }
.env-liner { overflow: hidden; clip-path: polygon(50% 2%, 95% 56%, 5% 56%); }
.env-liner img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.polnav { cursor: pointer; }
.fig-script  { font-family: var(--f-script); font-weight: 400; line-height: .9; }
.fig-seasons { font-family: var(--f-seasons); font-weight: 700; text-transform: uppercase; letter-spacing: 1.44px; color: var(--fig-navy); line-height: 1.2; }
.fig-geist   { font-family: var(--f-geist); text-transform: uppercase; letter-spacing: 1.8px; color: var(--fig-navy); line-height: 1.2; }
.fig-click   { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 1.8px; font-size: 18px; line-height: 1.2; }

/* home collage: flattened Figma scrapbook + invisible nav hotspots */
.home-collage {
  position: relative; width: 100%; max-width: 760px;
  margin: 0 auto; padding: clamp(6px,2vw,24px) 0 clamp(20px,5vh,60px);
}
@media (min-width: 768px)  { .home-collage { max-width: 900px; } }
@media (min-width: 1200px) { .home-collage { max-width: 1040px; } }
.home-collage-img { display: block; width: 100%; height: auto; }
.home-collage .hot {
  position: absolute; display: block; cursor: pointer;
  border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.home-collage .hot:focus-visible { outline: 2px solid var(--fig-olive); outline-offset: 3px; }

/* bottom banner (we can't wait + names) */
.home-banner2 { position: relative; min-height: var(--h-foot); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.home-banner2 .fd-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: grayscale(1) brightness(.5); }
.hero-banner--foot .hero-bg { background-position: center 30%; }
.home-banner2 .fd-hero-bg::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.3); }
.home-banner2 .fd-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(22px,4vh,44px); padding: 40px 20px; }
.hb-tagline { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(13px,3.4vw,18px); margin: 0; }
.hb-names { font-family: var(--f-script); font-weight: 400; font-size: clamp(64px,15vw,124px); line-height: .9; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.4); }

/* ============================================================
   LOVE STORY
   ============================================================ */
#story { background: var(--paper); }
.story-body { padding: clamp(40px,6vh,72px) 20px clamp(50px,8vh,90px); }

/* three polaroids + garland */
.polaroids {
  position: relative;
  width: min(760px, 94vw); margin: 0 auto clamp(30px,6vh,60px);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 15%;
}
.polaroids .pol {
  position: relative; width: 30%; background: #fff;
  padding: 4% 4% 15%; box-shadow: 0 14px 28px rgba(60,50,40,.24);
  z-index: 2;
}
.polaroids .pol img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(1) contrast(1.03); }
.polaroids .pol .cap {
  position: absolute; left: 0; right: 0; bottom: 5%;
  text-align: center; font-family: var(--f-geist);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fig-ink); font-size: clamp(10px,1.4vw,16px);
}
.polaroids .pol--1 { transform: rotate(-7deg); margin-right: -3%; }
.polaroids .pol--2 { transform: rotate(2deg); z-index: 3; margin-top: 3%; }
.polaroids .pol--3 { transform: rotate(6deg); margin-left: -3%; }
/* lush garland draped across + over the tops of the polaroids */
.garland { position: absolute; top: 0; left: 0; right: 0; height: 52%; z-index: 4; pointer-events: none; }
.garland img { position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
/* draping greenery (behind) */
.g-amar1  { width: 7%;  left: 17%; top: 52%; z-index: 1; }
.g-amar2  { width: 7%;  right: 28%; top: 50%; z-index: 1; }
/* base of white hydrangeas spanning the band */
.g-hydw   { width: 18%; left: 4%;  top: 40%; z-index: 2; }
.g-hydw2  { width: 18%; left: 40%; top: 44%; z-index: 2; }
.g-hydw3  { width: 17%; right: 4%; top: 40%; z-index: 2; }
.g-baby   { width: 20%; left: 30%; top: 16%; z-index: 2; }
/* mauve + green hydrangea filler */
.g-hydp   { width: 15%; left: 22%; top: 34%; z-index: 3; }
.g-hydg   { width: 15%; right: 20%; top: 36%; z-index: 3; }
/* focal blooms on top */
.g-rose   { width: 13%; left: 12%; top: 30%; z-index: 4; }
.g-rose2  { width: 13%; right: 12%; top: 28%; z-index: 4; }
.g-dahlia { width: 13%; left: 39%; top: 24%; z-index: 5; }
.g-ranu   { width: 11%; left: 55%; top: 34%; z-index: 4; }
.g-anth   { width: 10%; right: 3%; top: 22%; z-index: 4; }
.g-calla  { width: 9%;  left: 33%; top: 6%;  z-index: 3; }

.coming-soon {
  font-family: var(--f-sans); font-size: clamp(18px,2vw,24px);
  color: var(--fig-ink); text-align: center; margin: clamp(8px,1.6vh,18px) 0;
}
.join-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px,4vh,40px); text-align: center; margin-top: clamp(24px,5vh,48px);
}
.join-bow { width: clamp(120px,20vw,167px); aspect-ratio: 167 / 95; height: auto; }
.join-title {
  font-family: var(--f-script); font-weight: 400; color: var(--fig-ink);
  font-size: clamp(48px,11vw,110px); line-height: .9; margin: 0;
}
.join-by { font-family: var(--f-sans); font-size: clamp(15px,1.6vw,20px); color: var(--fig-ink); margin: 0; }
.todo {
  display: inline-block; font-family: var(--f-sans); font-weight: 400;
  font-size: 12px; letter-spacing: .04em; color: var(--burgundy);
  background: rgba(78,22,38,.08); border: 1px dashed rgba(78,22,38,.4);
  border-radius: 3px; padding: 0 7px; font-style: normal;
}

/* ============================================================
   FINER DETAILS  — faithful to Figma frame 30:8
   ============================================================ */
#details { background: var(--paper); }

/* hero + rsvp banners */
.fd-hero, .fd-rsvp-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.fd-hero { min-height: var(--h-hero); }
.fd-rsvp-banner { min-height: var(--h-foot); }
.fd-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1); }
.fd-hero .fd-hero-bg::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.5); }
.fd-rsvp-banner .fd-hero-bg::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.32); }
.fd-hero-inner {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: clamp(22px,5vh,46px); padding: 44px 20px;
}
.fd-back {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--f-sans); text-transform: uppercase; letter-spacing: .1em;
  font-size: 18px; font-weight: 400;
  color: #fff; cursor: pointer; line-height: 1;
}
.fd-back::before {
  content: ""; flex: none;
  width: .3em; height: .3em;
  border-left: .085em solid currentColor;
  border-bottom: .085em solid currentColor;
  transform: rotate(45deg);
}
.fd-title {
  font-family: var(--f-script); font-weight: 400; color: #fff;
  font-size: clamp(58px,14vw,124px); line-height: .92; margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* body */
.fd-body {
  max-width: 600px; margin: 0 auto;
  padding: clamp(50px,9vh,104px) 22px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--fig-ink);
}

/* heart-locket monogram */
.fd-mono { position: relative; width: 150px; margin-bottom: clamp(28px,5vh,45px); }
.fd-mono img { width: 100%; display: block; }
.fd-mono-l { position: absolute; font-family: var(--f-serif); color: var(--fig-navy); font-size: 23px; letter-spacing: .12em; }
.fd-mono-s { left: 20%; top: 43%; }
.fd-mono-k { left: 55%; top: 37%; }

.fd-intro, .fd-desc {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(16px,1.7vw,20px); line-height: 1.35; letter-spacing: -0.01em;
  color: var(--fig-ink); margin: 0;
}
.fd-intro { max-width: 470px; margin-bottom: clamp(48px,9vh,95px); }
.fd-desc { max-width: 560px; }

.fd-block { margin-bottom: clamp(48px,9vh,95px); width: 100%; }
.fd-caps {
  font-family: var(--f-sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; font-size: clamp(18px,2.2vw,25px); margin: 0 0 1.1em;
  color: var(--fig-ink);
}
.fd-when { font-family: var(--f-sans); font-size: clamp(16px,1.7vw,20px); line-height: 1.35; margin-bottom: 1.1em; }
.fd-when p { margin: 0 0 4px; }

/* script-headed sections */
.fd-section { margin-bottom: clamp(48px,9vh,80px); width: 100%; display: flex; flex-direction: column; align-items: center; }
.fd-script {
  font-family: var(--f-script); font-weight: 400; color: var(--fig-ink);
  font-size: clamp(44px,11vw,92px); line-height: .9; margin: 0 0 .4em;
  white-space: nowrap; max-width: 100%;
}
/* the long "Timeline of the day" heading: keep to one line, only wrap if the
   viewport is too narrow to fit it */
.fd-section .fd-script { font-size: clamp(30px, 8vw, 76px); }

/* timeline */
.fd-timeline {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,7vh,79px) clamp(46px,11vw,118px); margin-top: 10px;
}
.fd-tl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fd-tl { min-height: 0; }
.fd-tl .fd-tl-ico { height: clamp(64px,13vw,92px); width: auto; margin-bottom: 8px; display: block; }
.fd-tl-time { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .11em; font-size: clamp(16px,1.7vw,22px); margin: 0; }
.fd-tl-label { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(14px,1.5vw,19px); margin: 4px 0 0; }

/* hotels */
.fd-hotels { display: flex; flex-direction: column; gap: clamp(50px,8vh,95px); margin-top: 44px; width: min(390px,100%); }
.fd-hotel { display: flex; flex-direction: column; align-items: center; gap: clamp(22px,4vh,40px); }
.fd-hotel-name { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .11em; font-size: clamp(16px,1.7vw,22px); color: var(--fig-navy); margin: 0; }
.fd-hotel-addr, .fd-hotel-dist { font-family: var(--f-sans); font-size: clamp(15px,1.6vw,20px); color: var(--fig-navy); margin: 0; line-height: 1.35; }

/* olive oval buttons */
/* consistent oval button (matches Figma 348×108 pill, ~24px caps text) */
.fd-oval {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(16px,4.6vw,24px); font-weight: 400; color: #fff;
  background: var(--fig-olive); border-radius: 50%;
  width: min(348px,82%); aspect-ratio: 348 / 108; padding: 4px 20px;
  cursor: pointer; text-align: center; line-height: 1.1;
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.fd-oval:hover { filter: brightness(1.08); transform: translateY(-2px); }
.fd-oval--ghost { background: transparent; color: var(--fig-pink-pale); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }

/* back link inside the shared photo-banner heroes (story / details / faqs / xoxo) */
.hero-banner .fd-back { z-index: 3; color: #fff; }

/* dress-code swatches */
.fd-swatches { display: flex; gap: clamp(6px,1.5vw,14px); justify-content: center; margin-top: 22px; }
.fd-swatches span { width: clamp(42px,12vw,104px); height: clamp(42px,12vw,104px); border-radius: 50%; flex: 0 0 auto; }

/* gift-corner bow */
.fd-bow { width: clamp(120px,20vw,167px); height: auto; margin-bottom: 8px; }

.fd-rsvp-before { font-family: var(--f-sans); letter-spacing: .06em; font-size: 14px; color: #fff; margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .polaroids { padding-top: 12%; }
  .timeline { max-width: 340px; }
}