/* ==========================================================================
   SAMIE WEDDING PLANNER & DECOR — "Extraordinary Journey"
   ==========================================================================
   ANIMATION CONFIG
   All animation timing/easing/distance lives in these custom properties.
   Tweak values here to retime the whole site without touching selectors.
   ========================================================================== */
:root{
  /* ---- palette (from proposal moodboard) ---- */
  --c-green:      #364129;
  --c-green-dark: #232b19;
  --c-wine:       #2F0707;
  --c-wine-soft:  #6e2323;
  --c-sage:       #A8B889;
  --c-cream:      #FAF6E2;
  --c-cream-dim:  #efe8d2;
  --c-ink:        #1c1a14;

  /* ---- type ---- */
  --f-display: 'Playfair Display', 'Georgia', serif;
  --f-script:  'Alex Brush', cursive;
  --f-body:    'Cormorant Garamond', 'Georgia', serif;

  /* =============== EASE / TIMING TOKENS (edit freely) =============== */
  --ease-soft:    cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,.8,.24,1);
  --ease-inout:   cubic-bezier(.65,0,.35,1);
  --ease-elastic: cubic-bezier(.34,1.56,.64,1);

  --dur-instant: .18s;
  --dur-fast:    .4s;
  --dur-base:    .8s;
  --dur-slow:    1.4s;
  --dur-hero:    1.6s;

  --stagger-step: 60ms;      /* delay added per revealed sibling */
  --reveal-rise:  36px;      /* how far reveal-up elements travel */
  --reveal-scale: .94;       /* start scale for scale-reveal elements */

  --hover-lift:   -8px;
  --hover-scale:  1.03;
  --parallax-strength: 1;    /* global multiplier for parallax speed */

  --float-dur: 6s;           /* gentle floating decor elements */
  --shimmer-dur: 2.6s;       /* monogram glitter sweep */
  --kenburns-dur: 18s;       /* hero background slow zoom */
  --spin-dur: 14s;           /* hero monogram flat rotation */

  --hero-headline-size: clamp(2rem, 9.2vw, 7rem); /* drives both the headline and the logo above it */
  --hero-logo-scale: 1.15;               /* logo height as a multiple of the headline size */
  --hero-logo-glow-inner: rgba(255,252,235,.8);  /* tight white-gold glow */
  --hero-logo-glow-outer: rgba(214,178,94,.55);  /* wider warm gold halo */
  --hero-logo-brightness: 1.18;
  --hero-logo-contrast: 1.08;
}
@media (max-width:520px){
  :root{ --hero-headline-size: 11.4vw; }
}

/* ============================== RESET ============================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--c-cream);
  color:var(--c-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,figure{ margin:0; padding:0; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }

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

/* ============================ UTILITIES ============================= */
.eyebrow{
  display:block; font-family:var(--f-body); font-style:italic; font-size:.95rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-wine); margin-bottom:.6em;
  opacity:.85;
}
.section-head{ text-align:center; margin:0 auto 3rem; max-width:44rem; padding:0 1.5rem; }
.section-title{
  font-family:var(--f-display); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:clamp(1.9rem,4.6vw,3.1rem); color:var(--c-wine);
  line-height:1.1;
}
.section-head[light] .section-title{ color:var(--c-cream); }
.section-head[light] .eyebrow{ color:var(--c-sage); }
.serif-script{ text-transform:none; }

.texture-bg{
  position:absolute; inset:0; background-image: linear-gradient(180deg, rgba(250,246,226,.86), rgba(250,246,226,.93)), var(--tex);
  background-size:cover; background-position:center; z-index:0;
}

/* ============================ REVEAL SYSTEM =========================== */
.reveal{
  opacity:0;
  transform:translateY(var(--reveal-rise));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-scale{
  opacity:0;
  transform:scale(var(--reveal-scale));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }

.reveal-line{
  display:block;
  opacity:0;
  transform:translateY(22px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-line.is-visible{ opacity:1; transform:translateY(0); }

/* ============================ SCROLL PROGRESS ========================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--c-wine),var(--c-sage));
  z-index:9999; transition:width .12s linear;
}

/* ============================== PRELOADER ============================= */
.preloader{
  position:fixed; inset:0; background:var(--c-green-dark); z-index:10000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity var(--dur-slow) var(--ease-inout), visibility var(--dur-slow) var(--ease-inout);
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ color:var(--c-cream); animation:pulse-ring 1.8s var(--ease-inout) infinite; }
.preloader-letter{ font-family:var(--f-script); font-size:2.4rem; fill:var(--c-cream); }
@keyframes pulse-ring{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }

/* ================================ NAV ================================= */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  transition: background var(--dur-fast) var(--ease-soft), padding var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.site-nav.is-scrolled{
  background:rgba(250,246,226,.92); backdrop-filter:blur(10px);
  padding-top:.7rem; padding-bottom:.7rem;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.nav-logo{ display:flex; align-items:center; }
/* Full lockup (monogram + "SAMIE" + tagline) baked into one transparent PNG.
   It's white by default for the photo hero behind the nav; brightness(0)
   flips it to solid dark once the nav goes to its solid cream background —
   transparency is preserved either way since only pixel color is remapped. */
.nav-logo-mark{
  height:52px; width:auto;
  transition: height var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
}
.site-nav.is-scrolled .nav-logo-mark{ height:44px; filter:brightness(0); opacity:.88; }

.nav-links{ display:flex; align-items:center; gap:1.4rem; white-space:nowrap; }
.nav-links a{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  position:relative; padding-bottom:4px; transition:color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast);
  opacity:.9;
}
.site-nav.is-scrolled .nav-links a{ color:var(--c-ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ right:0; }
.nav-links a:hover{ opacity:1; }
.nav-cta{ border:1px solid currentColor; padding:.5em 1.1em !important; border-radius:999px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:1.5px; background:#fff; transition:transform var(--dur-fast), opacity var(--dur-fast), background var(--dur-fast); }
.site-nav.is-scrolled .nav-toggle span{ background:var(--c-ink); }

@media (max-width:1180px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--c-green-dark); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:2rem 2.4rem; gap:1.6rem; transform:translateX(100%);
    transition:transform var(--dur-base) var(--ease-inout);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ color:var(--c-cream); font-size:1rem; }
  .nav-toggle{ display:flex; z-index:600; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

/* =============================== HERO ================================== */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-media{ position:absolute; inset:0; background:#1b1a14; }
/* Same treatment for the <video> and its fallback <img> (old browsers without
   video support render the img instead) — both fill the section edge-to-edge
   without distorting, and share one very slow, subtle zoom for a cinematic
   layer on top of the video's own motion. */
.hero-video, .hero-media .hero-img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transform:scale(1.06);
  animation: kenburns var(--kenburns-dur) var(--ease-inout) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.14); } }
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,10,.35) 0%, rgba(20,18,10,.15) 40%, rgba(20,18,10,.55) 100%);
}

.hero-content{ position:relative; z-index:2; text-align:center; padding:0 1rem; margin-top:-4vh; }
.hero-title{
  font-family:var(--f-display); color:var(--c-cream); font-weight:500;
  font-size:var(--hero-headline-size); letter-spacing:.04em; line-height:1;
  text-shadow:0 8px 40px rgba(0,0,0,.35); white-space:nowrap;
}
@media (max-width:520px){
  .hero-title{ letter-spacing:.01em; }
}
.hero-title-line{ display:block; }
.hero-title-line .char{
  display:inline-block; opacity:0; transform:translateY(40px) rotate(4deg);
  animation:char-in var(--dur-base) var(--ease-out) forwards;
  animation-delay: calc(var(--i,0) * var(--stagger-step) + .3s);
}
@keyframes char-in{ to{ opacity:1; transform:translateY(0) rotate(0); } }
.hero-title-script{
  display:block; font-family:var(--f-script); font-weight:400; text-transform:none;
  font-size:clamp(2.4rem,7vw,5.4rem); color:var(--c-sage); margin-top:-.08em;
  opacity:0; transform:translateY(16px); filter:blur(6px);
  animation: script-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: 1.5s;
}
@keyframes script-in{ to{ opacity:1; transform:translateY(0); filter:blur(0); } }

@keyframes fade-pop{ from{ opacity:0; transform:translateX(-50%) scale(.7); } to{ opacity:1; transform:translateX(-50%) scale(1); } }
.hero-badge-mono{ font-family:var(--f-script); font-size:1.6rem; }
.hero-badge-mono.small{ font-size:1.1rem; }

/* ---- Hero logo: spins continuously above the headline, centered ---- */
.hero-logo-spin{
  display:block; margin:0 auto .6em;
  /* Sized off the same variable that drives the headline font-size, so it
     stays in proportion at every viewport — --hero-logo-scale controls how
     much bigger than the headline it reads (1 = same size). */
  height:calc(var(--hero-headline-size) * var(--hero-logo-scale)); width:auto;
  /* Layered glow: tight white-gold halo for crispness against the busy trees,
     a wider soft gold bloom for the "premium" feel, then a grounding shadow
     so it still reads as sitting in front of the photo rather than floating
     flat on top of it. brightness/contrast lift the monogram's fine linework
     so it doesn't get lost in the dark, textured background. */
  filter:
    drop-shadow(0 0 10px var(--hero-logo-glow-inner))
    drop-shadow(0 0 28px var(--hero-logo-glow-outer))
    drop-shadow(0 8px 22px rgba(0,0,0,.4))
    brightness(var(--hero-logo-brightness)) contrast(var(--hero-logo-contrast));
  animation: spin-logo var(--spin-dur) linear infinite;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
/* Vertical-axis spin (rotateY) — turns like a revolving door / coin flip,
   not a flat clock-face rotation. perspective() gives it real depth so the
   sides foreshorten as they turn instead of just squashing flat. */
@keyframes spin-logo{
  from{ transform:perspective(900px) rotateY(0deg); }
  to{ transform:perspective(900px) rotateY(360deg); }
}

.hero-scroll{
  position:absolute; left:50%; bottom:3.2%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2;
  color:var(--c-cream); opacity:0; animation:fade-pop var(--dur-base) var(--ease-out) forwards; animation-delay:2.3s;
}
.hero-scroll span{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
.hero-scroll i{
  width:1px; height:34px; background:linear-gradient(var(--c-cream),transparent);
  position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--c-sage);
  animation:scroll-drip 1.8s var(--ease-inout) infinite;
}
@keyframes scroll-drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---- Sound toggle: unmutes the hero video's own audio track ---- */
.sound-toggle{
  position:absolute; right:clamp(1.1rem,4vw,2.6rem); bottom:6.5%; z-index:3;
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .95rem .5rem .5rem; border-radius:999px;
  background:rgba(20,18,10,.34); border:1px solid rgba(250,246,226,.4);
  backdrop-filter:blur(6px); color:var(--c-cream);
  opacity:0; transform:translateY(10px);
  animation: fade-pop var(--dur-base) var(--ease-out) forwards; animation-delay:2.15s;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform var(--dur-instant) var(--ease-soft);
}
.sound-toggle:hover{ background:rgba(20,18,10,.52); border-color:var(--c-sage); transform:translateY(-2px); }

.sound-toggle-ring{
  position:absolute; inset:-5px; border-radius:999px; border:1px solid var(--c-sage); pointer-events:none;
  opacity:0; transform:scale(.9);
}
/* Gentle attention-pulse only while sound is actually on, so it reads as a
   "now playing" cue rather than a distracting loop forever. */
.sound-toggle.is-on .sound-toggle-ring{ animation: sound-pulse 2.4s var(--ease-out) infinite; }
@keyframes sound-pulse{
  0%{ opacity:.55; transform:scale(.92); }
  100%{ opacity:0; transform:scale(1.3); }
}

.sound-toggle-icon{ position:relative; width:20px; height:20px; flex:0 0 auto; }
.sound-toggle-icon svg{
  position:absolute; inset:0; width:100%; height:100%;
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-elastic);
}
.icon-muted{ opacity:1; transform:scale(1); }
.icon-on{ opacity:0; transform:scale(.65); }
.sound-toggle.is-on .icon-muted{ opacity:0; transform:scale(.65); }
.sound-toggle.is-on .icon-on{ opacity:1; transform:scale(1); }

.sound-toggle-label{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }

@media (max-width:600px){
  .sound-toggle{ right:1rem; bottom:9.5%; padding:.5rem; }
  .sound-toggle-label{ display:none; }
}

/* ============================== JOURNEY ================================ */
.journey{ position:relative; padding:9rem 1.5rem 8rem; overflow:hidden; }
.journey-inner{ position:relative; z-index:1; max-width:52rem; margin:0 auto; text-align:center; }
.quote-mark{ font-family:var(--f-display); font-size:4.5rem; color:var(--c-wine); line-height:1; opacity:.5; display:block; margin-bottom:.4rem; }
.journey-quote{
  font-family:var(--f-body); font-style:italic; font-weight:500; color:var(--c-wine);
  font-size:clamp(1.25rem,2.6vw,1.85rem); line-height:1.6;
}
.journey .divider{ margin-top:3rem; display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--c-sage); }
.journey .divider span{ width:60px; height:1px; background:currentColor; opacity:.6; }

/* ============================== PALETTE ================================= */
.palette{ position:relative; background:var(--c-green); padding:7rem 1.5rem 6rem; overflow:hidden; }
.palette .section-title, .palette .eyebrow{ color:var(--c-cream); }
.palette .eyebrow{ color:var(--c-sage); }
.palette-flowers{
  position:absolute; left:-4%; top:8%; width:min(38vw,420px); opacity:.9; z-index:0;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
}
.swatches{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem;
  max-width:64rem; margin:0 auto;
}
.swatch{ width:170px; }
.swatch-card{
  width:100%; aspect-ratio:3/4; border-radius:14px; background:var(--c);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:1.4rem 1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  transition: transform var(--dur-fast) var(--ease-elastic), box-shadow var(--dur-fast) var(--ease-soft);
}
.swatch-card:hover{ transform:translateY(var(--hover-lift)) scale(var(--hover-scale)); box-shadow:0 26px 50px rgba(0,0,0,.35); }
.swatch-dot{
  width:28px; height:28px; border-radius:50%; background:var(--a); margin-bottom:auto; margin-top:1rem;
  box-shadow:0 0 0 6px rgba(255,255,255,.08);
  transition:transform var(--dur-fast) var(--ease-elastic);
}
.swatch-card:hover .swatch-dot{ transform:scale(1.15) rotate(10deg); }
.swatch-hex{ font-family:var(--f-body); letter-spacing:.08em; font-weight:600; color:var(--a); font-size:.95rem; }
.swatch-copy{ font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--a); opacity:0; transform:translateY(4px); transition:opacity var(--dur-fast), transform var(--dur-fast); margin-top:.3rem; }
.swatch-card:hover .swatch-copy{ opacity:.75; transform:translateY(0); }

.toast{
  position:fixed; left:50%; bottom:2.2rem; transform:translateX(-50%) translateY(20px);
  background:var(--c-ink); color:var(--c-cream); padding:.7em 1.4em; border-radius:999px;
  font-size:.85rem; letter-spacing:.05em; opacity:0; pointer-events:none; z-index:3000;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================== MOOD & TONE ============================= */
.mood{ position:relative; padding:7rem 1.5rem 8rem; }
.mood-grid{
  position:relative; z-index:1; max-width:68rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:1.6rem 1.4rem;
}
.mood-card{
  grid-column:span 2; border-radius:4px; background:#fff; padding:.6rem .6rem 1rem;
  box-shadow:0 16px 30px rgba(30,20,10,.16);
  transform:rotate(var(--rot)); transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  position:relative;
}
.mood-card:hover{ transform:rotate(0) translateY(var(--hover-lift)) scale(1.02); box-shadow:0 24px 40px rgba(30,20,10,.24); z-index:2; }
.mood-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.mood-card--tall{ grid-row:span 2; }
.mood-card--tall img{ aspect-ratio:4/6.4; }
.mood-card figcaption{
  font-family:var(--f-body); font-style:italic; color:var(--c-wine); font-size:.92rem; text-align:center; padding-top:.6rem; line-height:1.35;
}
.mood-card figcaption span{ display:block; font-size:.72rem; color:#8a8a7a; font-style:normal; letter-spacing:.02em; margin-top:.15rem; }

@media (max-width:760px){
  .mood-grid{ grid-template-columns:repeat(2,1fr); }
  .mood-card{ grid-column:span 1; }
  .mood-card--tall{ grid-row:auto; }
  .mood-card--tall img{ aspect-ratio:4/5; }
}

/* ============================== SHOWCASE (Dance floor hero) ============= */
.showcase{ position:relative; background:var(--c-green-dark); padding:6rem 1.5rem 6rem; }
.showcase-media{ max-width:60rem; margin:0 auto; border-radius:6px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.showcase-media img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.showcase-media:hover img{ transform:scale(1.04); }
.showcase-caption{ text-align:center; margin:3.2rem 0 3rem; }
.showcase .section-title{ color:var(--c-cream); }
.showcase .eyebrow{ color:var(--c-sage); }

.ref-row{ max-width:60rem; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.ref-card{ overflow:hidden; border-radius:6px; box-shadow:0 16px 34px rgba(0,0,0,.4); }
.ref-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; transition:transform var(--dur-slow) var(--ease-soft), filter var(--dur-slow); filter:saturate(.94); }
.ref-card img[data-pos="low"]{ object-position:center 88%; }
.ref-card:hover img{ transform:scale(1.08); filter:saturate(1.1); }

.lighting-line{
  text-align:center; margin-top:3.4rem; font-family:var(--f-body); font-style:italic; color:var(--c-cream);
  opacity:.85; font-size:clamp(1rem,2vw,1.3rem); position:relative; padding-top:1.6rem;
}
.lighting-line::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:1px; background:var(--c-sage); }

/* ============================== DETAIL (Dance Floor cream) ============== */
.detail{ position:relative; padding:7rem 1.5rem 7rem; overflow:hidden; }
.detail-stage{ position:relative; max-width:50rem; margin:0 auto 3.5rem; display:flex; align-items:center; justify-content:center; z-index:1; }
.detail-floor{ width:min(92%,760px); }

.float{ animation: floaty var(--float-dur) var(--ease-inout) infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) scaleX(var(--fx,1)); } 50%{ transform:translateY(-14px) scaleX(var(--fx,1)); } }
.detail-flowers--right{ --fx:-1; }

.detail-notes{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:3rem 4rem; max-width:50rem; margin:0 auto; }
.detail-note{ max-width:16rem; text-align:center; }
.detail-note-line{ display:block; width:1px; height:34px; background:var(--c-wine-soft); margin:0 auto 1rem; opacity:.5; }
.detail-note p{ font-family:var(--f-body); color:var(--c-wine); font-size:1.05rem; line-height:1.5; }
.detail-note p em{ display:block; font-size:.8rem; color:#8a8266; font-style:italic; margin-top:.25rem; }
.mono-shimmer{
  width:88px; height:88px; margin:0 auto 1rem; border-radius:50%; overflow:hidden; position:relative;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.mono-shimmer img{ width:100%; height:100%; object-fit:cover; }
.mono-shimmer::after{
  content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  background-size:220% 220%; animation:shimmer var(--shimmer-dur) linear infinite;
}
@keyframes shimmer{ 0%{ background-position:-150% -150%; } 100%{ background-position:150% 150%; } }

/* ============================== TABLE SETTING ============================ */
.table-setting{ position:relative; padding:7rem 0 7rem; background:var(--c-cream-dim); }
.table-mockup{ max-width:44rem; margin:0 auto 4rem; padding:0 1.5rem; }
.table-mockup img{ border-radius:10px; box-shadow:0 26px 50px rgba(30,20,10,.2); }

.item-row{
  display:flex; gap:1.4rem; overflow-x:auto; padding:1rem 1.5rem 2rem; scroll-snap-type:x proximity;
  max-width:78rem; margin:0 auto; -webkit-overflow-scrolling:touch;
}
.item-row::-webkit-scrollbar{ height:6px; }
.item-row::-webkit-scrollbar-thumb{ background:var(--c-sage); border-radius:999px; }
.item-card{
  flex:0 0 auto; width:150px; scroll-snap-align:start; background:#fff; border-radius:10px; padding:1rem .9rem 1.1rem;
  text-align:center; box-shadow:0 12px 24px rgba(30,20,10,.12);
  transition:transform var(--dur-fast) var(--ease-elastic), box-shadow var(--dur-fast) var(--ease-soft);
}
.item-card:hover{ transform:translateY(var(--hover-lift)) scale(var(--hover-scale)); box-shadow:0 20px 34px rgba(30,20,10,.2); }
.item-card img{ width:100%; height:130px; object-fit:contain; margin-bottom:.7rem; }
.item-card span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-wine); }

/* ============================== CEREMONY (image band) ==================== */
.ceremony{ position:relative; height:52vh; min-height:320px; overflow:hidden; }
.ceremony-img{ width:100%; height:100%; object-fit:cover; object-position:center 88%; }
.ceremony-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,10,.15), rgba(20,18,10,.35)); }

/* ============================== BACKDROP ================================= */
.backdrop{ position:relative; background:var(--c-green-dark); padding:7rem 1.5rem 6rem; }
.backdrop-mockup{ max-width:56rem; margin:0 auto 3.5rem; border-radius:6px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.backdrop-mockup img{ width:100%; }

/* ============================== OVERVIEW ================================= */
.overview{ position:relative; background:var(--c-green-dark); padding:2rem 1.5rem 8rem; }
.overview-media{ max-width:62rem; margin:0 auto; border-radius:6px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.overview-media img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.overview-media:hover img{ transform:scale(1.03); }
.overview-caption{ text-align:center; margin-top:2.2rem; color:var(--c-cream); font-style:italic; opacity:.85; }
.overview-caption span{ display:block; font-size:.78rem; opacity:.7; margin-top:.2rem; }

/* ============================== CONTACT / FOOTER ========================= */
.contact{ position:relative; background:var(--c-green); padding:7rem 1.5rem 3rem; overflow:hidden; }
.contact-deco{ position:absolute; width:min(20vw,220px); opacity:.5; z-index:0; }
.contact-deco--left{ left:-4%; bottom:0; }
.contact-deco--right{ right:-4%; bottom:0; transform:scaleX(-1); --fx:-1; }
.contact-inner{
  position:relative; z-index:1; max-width:60rem; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:3rem;
}
.contact .section-title{ margin-bottom:.6rem; }
.contact-tag{ font-family:var(--f-script); font-size:1.6rem; color:var(--c-sage); margin-bottom:1.6rem; }
.contact-brand{ font-size:.82rem; letter-spacing:.14em; color:var(--c-cream); opacity:.75; margin-bottom:.8rem; }
.contact-list{ display:flex; flex-direction:column; gap:.6rem; color:var(--c-cream); font-size:1.02rem; }
.contact-list span{ display:inline-block; width:5.4rem; opacity:.6; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; vertical-align:top; }
.contact-list a{ transition:color var(--dur-instant); border-bottom:1px solid transparent; }
.contact-list a:hover{ color:var(--c-sage); border-color:currentColor; }

.contact-col--social{ display:flex; flex-direction:column; gap:1.6rem; justify-content:center; }
.social-item h3{ font-family:var(--f-display); font-style:italic; font-size:1rem; color:var(--c-sage); margin-bottom:.25rem; }
.social-item a{ color:var(--c-cream); font-size:1.05rem; position:relative; }
.social-item a::after{ content:'↗'; margin-left:.4em; font-size:.8em; opacity:0; transition:opacity var(--dur-instant), margin-left var(--dur-instant); }
.social-item a:hover::after{ opacity:1; margin-left:.6em; }
.social-item a:hover{ color:var(--c-sage); }

.contact-foot{
  position:relative; z-index:1; max-width:60rem; margin:5rem auto 0; padding-top:2rem;
  border-top:1px solid rgba(250,246,226,.15); display:flex; align-items:center; gap:1rem;
  color:var(--c-cream); opacity:.6; font-size:.8rem;
}

@media (max-width:700px){
  .contact-inner{ grid-template-columns:1fr; }
}

/* ============================== BACK TO TOP =============================== */
.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; width:46px; height:46px; border-radius:50%;
  background:var(--c-wine); color:var(--c-cream); display:flex; align-items:center; justify-content:center;
  z-index:400; opacity:0; transform:translateY(12px) scale(.8); pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-elastic);
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.back-to-top.is-shown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ transform:translateY(-4px) scale(1.06); }

/* ============================== RESPONSIVE TWEAKS ========================= */
@media (max-width:600px){
  .journey{ padding:6rem 1.2rem 5rem; }
  .palette-flowers{ display:none; }
  .detail-flowers{ width:16%; }
  .swatch{ width:42%; }
}