/* ==============================================================
   YOURI & NIKKESHA - WEDDING INVITATION . STYLESHEET
   All styling for the site lives in this one file.

   * COLOURS - the palette is at the very top (":root"):
      ivory / sage green #8CAE9F / gold. Change any colour of the
      whole site there, in one place.

   Sections: [C0] palette . [C0b] layout (grid/utilities)
     [C1] envelope . [C2] site base . [C2b] utilities
     [C3] RSVP button . [C4] hero . [C5] shared . [C6] story
     [C7] events . [C8] venue . [C9] gallery . [C10] rsvp
     [C11] footer . [C12] timeline
============================================================== */
/* ===== [C0] PALETTE - change any colour of the whole site here ===== */
:root {
  /* === PALETTE - Ivory (main) . Sage green (detail) . Gold (secondary detail) ===
     Change any colour of the whole site here in one place. */
  --ivory:#f8f4e9; --ivory2:#efe7d3; --ivory3:#e2d8bd; --cream:#fbf8f2;
  --sage:#8CAE9F; --sage-lt:#B4CBC1; --sage-dk:#496E5E; --sage-xdk:#22352D;
  --gold:#c8a84f; --gold-lt:#e6cd84; --gold-dk:#9c7a2c;
  --text:#2a1e0a; --text-lt:#5a4a2a;
}
/* === ENVELOPE PAPER - your floral lace paper, embedded (used on every face of the envelope) === */
:root { --paper-band:url("../assets/paper-band.webp"); }

:root { --paper:url("../assets/paper-lace.webp"); }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Cormorant Garamond',serif;background:#0F1613;color:var(--text);overflow-x:hidden;}
body.env-open{overflow:hidden;height:100vh;}

/* ===== [C0b] LAYOUT - small replacement for the handful of Bootstrap
   grid/utility classes this page actually used (container, row, col-*,
   gutters, alignment). Bootstrap itself has been removed: it added a
   ~230KB stylesheet + JS bundle for about a dozen classes, almost all
   of it unused. This does the same job in ~30 lines. ===== */
.container{width:100%;padding-left:12px;padding-right:12px;margin-left:auto;margin-right:auto;}
@media(min-width:576px){.container{max-width:540px;}}
@media(min-width:768px){.container{max-width:720px;}}
@media(min-width:992px){.container{max-width:960px;}}
@media(min-width:1200px){.container{max-width:1140px;}}
@media(min-width:1400px){.container{max-width:1320px;}}
.row{
  --gx: .75rem; /* half-gutter, both sides - 1.5rem gutter by default */
  display:flex;
  flex-wrap:wrap;
  margin-left:calc(var(--gx) * -1);
  margin-right:calc(var(--gx) * -1);
  row-gap:0;
}
.row.g-4{ row-gap:1.5rem; }
.row.g-5{ --gx:1.5rem; row-gap:3rem; }
.col-12,.col-md-8,.col-md-10,.col-lg-4,.col-lg-5,.col-lg-7,.col-lg-8{
  padding-left:var(--gx);
  padding-right:var(--gx);
  flex:0 0 auto;
  width:100%;
}
@media(min-width:768px){
  .col-md-8{width:66.66667%;}
  .col-md-10{width:83.33333%;}
}
@media(min-width:992px){
  .col-lg-4{width:33.33333%;}
  .col-lg-5{width:41.66667%;}
  .col-lg-7{width:58.33333%;}
  .col-lg-8{width:66.66667%;}
  .order-lg-1{order:1;}
  .order-lg-2{order:2;}
}
.align-items-center{align-items:center;}
.align-items-start{align-items:start;}
.justify-content-center{justify-content:center;}
.text-center{text-align:center;}
.position-relative{position:relative;}
.mb-4{margin-bottom:1.5rem;}
.mb-5{margin-bottom:3rem;}

/* ===== [C1] ENVELOPE OVERLAY - two lace panels + wax seal ===== */
/* ===============================
   ENVELOPE SCREEN
=============================== */
#envScreen {
  position:fixed;inset:0;z-index:500;
  background:transparent; /* the live website sits right behind the panels */
  cursor:default;
}
#envScreen.gone{display:none;}

/* The envelope box - fills the entire screen (folds and flap are
   percentage-based, so the geometry adapts to any screen shape) */
.env-box {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* === THE ENVELOPE = TWO PAPER PANELS over the live website.
   The left half is an envelope fold with a triangle point that
   lies over the right half - the wax seal rests on the point.
   On open, both halves slide apart and the site is unveiled
   from the middle outward. === */
.env-panel {
  position:absolute;top:0;bottom:0;
  background-color:#eee2d2;
  background-size:auto, cover;
  transition:transform 1.9s cubic-bezier(.65,.05,.2,1) .45s;
  will-change:transform;
}
/* Right half - concave inward triangle that receives the fold's point.
   Its notch runs parallel to the fold's edges (2% hidden overlap so the
   seal is airtight until it opens). */
.env-right {
  right:0;width:60%;
  z-index:5;
  background-image:
    linear-gradient(240deg, rgba(255,255,250,.18) 0%, rgba(255,255,250,0) 50%, rgba(90,74,36,.28) 100%),
    linear-gradient(to left, transparent 60%, rgba(70,55,25,.14)),
    var(--paper);
  background-position:center, center, right center;
  box-shadow:inset 0 0 90px rgba(70,55,25,.12);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
  /* plain border line on the notch edge + layered shadow */
  filter:
    drop-shadow(-1.8px 0 0 rgba(120,98,55,.55))
    drop-shadow(-4px 0 5px rgba(45,34,12,calc(.38 * var(--edge-cast,1))))
    drop-shadow(-12px 0 20px rgba(45,34,12,calc(.36 * var(--edge-cast,1))))
    drop-shadow(-28px 0 50px rgba(30,22,8,calc(.26 * var(--edge-cast,1))));
}
/* cast shadow painted onto this panel along the fold's edge -
   the dark seam between the two papers that sells the overlap */
.fold-cast-shadow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}
.fold-cast-shadow .cast-a{stroke:rgba(40,30,10,calc(.5  * var(--edge-cast,1)));}
.fold-cast-shadow .cast-b{stroke:rgba(40,30,10,calc(.34 * var(--edge-cast,1)));}
.fold-cast-shadow .cast-c{stroke:rgba(30,22,8,calc(.24 * var(--edge-cast,1)));}

/* matching plain paper band along the concave notch */
.env-right::after {
  content:'';position:absolute;inset:0;z-index:2;
  background-color:#eee1d2;
  background-image:
    linear-gradient(240deg, rgba(255,253,245,.2) 0%, transparent 55%, rgba(110,90,50,.09) 100%),
    var(--paper-band);
  background-size:auto, 151px 112px;
  background-repeat:no-repeat, repeat;
  background-position:center, 63px 41px;
  clip-path:polygon(0 0, 40% 50%, 0 100%,
    calc(4.4% * var(--edge-band-width,1)) 100%,
    calc(40% + 4% * var(--edge-band-width,1)) 50%,
    calc(4.4% * var(--edge-band-width,1)) 0);
  filter:
    drop-shadow(-1px 0 0 rgba(255,255,252,calc(.8 * var(--edge-rim,1))))
    drop-shadow(2.5px 0 1px rgba(85,64,30,calc(.65 * var(--edge-groove,1))))
    drop-shadow(2.5px 0 0 rgba(255,255,250,calc(.85 * var(--edge-groove,1))))
    drop-shadow(1.5px 0 2px rgba(85,64,30,calc(.3 * var(--edge-groove,1))));
}
/* Left half - the fold: straight edge at centre, triangle point
   reaching over the right half (point tip at 58% of the screen) */
.env-left {
  left:-4%;width:70%; /* 4% bleed past the screen edge for the over-slide */
  z-index:6;
  background-image:
    linear-gradient(120deg, rgba(255,255,250,.36) 0%, rgba(255,255,250,.03) 55%, rgba(90,74,36,.16) 100%),
    var(--paper);
  background-position:center, left center;
  clip-path:polygon(0 0, 65.7% 0, 100% 50%, 65.7% 100%, 0 100%);
  /* plain border line + heavy layered shadow: the fold visibly
     floats OVER the paper beneath it */
  filter:
    drop-shadow(1.8px 0 0 rgba(120,98,55,.55))
    drop-shadow(5px 0 6px rgba(40,30,10,calc(.52 * var(--edge-cast,1))))
    drop-shadow(14px 0 24px rgba(40,30,10,calc(.46 * var(--edge-cast,1))))
    drop-shadow(34px 0 62px rgba(25,18,6,calc(.34 * var(--edge-cast,1))));
}
/* curvature shading - the paper darkens as it turns toward the edge */
.env-left::after {
  content:'';position:absolute;top:0;bottom:0;right:0;width:40%;z-index:1;
  background:linear-gradient(to left,
    rgba(50,38,12,.42) 0%, rgba(55,42,14,.22) 22%,
    rgba(55,42,14,.08) 50%, transparent 78%);
  clip-path:polygon(0 0, 13.7% 0, 100% 50%, 13.7% 100%, 0 100%);
}
/* plain paper band edging the fold - smooth ivory trim against the
   textured lace, like the border strip on a real lined envelope */
.env-left::before {
  content:'';position:absolute;inset:0;z-index:2;
  /* felt-marked paper, pre-tinted to the lace's exact colours - seamless tile */
  background-color:#eee1d2;
  background-image:
    linear-gradient(120deg, rgba(255,253,246,.34) 0%, rgba(255,253,246,.06) 55%, rgba(110,90,50,.1) 100%),
    var(--paper-band);
  background-size:auto, 151px 112px;
  background-repeat:no-repeat, repeat;
  clip-path:polygon(65.7% 0, 100% 50%, 65.7% 100%,
    calc(65.7% - 4.2% * var(--edge-band-width,1)) 100%,
    calc(100% - 4.1% * var(--edge-band-width,1)) 50%,
    calc(65.7% - 4.2% * var(--edge-band-width,1)) 0);
  /* raised strip: lit rim on the outer edge, then a groove (dark
     hairline) and a ridge-light where the band meets the lace -
     the band visibly stands proud of the paper */
  filter:
    drop-shadow(1px 0 0 rgba(255,255,252,calc(.8 * var(--edge-rim,1))))
    drop-shadow(-2.5px 0 1px rgba(85,64,30,calc(.65 * var(--edge-groove,1))))
    drop-shadow(-2.5px 0 0 rgba(255,255,250,calc(.85 * var(--edge-groove,1))))
    drop-shadow(-1.5px 0 2px rgba(85,64,30,calc(.3 * var(--edge-groove,1))));
}

/* === AUTO-OPEN - the fold first glides a touch OVER the paper
   (like a flap being slid free), then both halves sweep apart === */
#envScreen.open .env-left {
  animation:foldSlide 2.1s cubic-bezier(.65,.05,.2,1) .45s forwards;
}
#envScreen.open .env-right { transform:translateX(112%); transition-delay:.75s; }
@keyframes foldSlide {
  0%   { transform:translateX(0); }
  16%  { transform:translateX(calc(2.6% * var(--edge-overslide,1))); }   /* the little slide over the paper */
  100% { transform:translateX(-118%); }
}

/* Wax seal - sits at flap fold point (centre of envelope) */
.env-seal {
  position:absolute;
  /* rests on the fold's point */
  left:66%;top:50%;
  transform:translate(-50%,-50%);
  width:calc(clamp(84px,14vw,150px) * var(--seal-scale,1));
  height:calc(clamp(84px,14vw,150px) * var(--seal-scale,1));
  z-index:9;
  /* rides away with the fold - same glide as the panels */
  transition:transform 1.9s cubic-bezier(.65,.05,.2,1) .45s;
}
.env-seal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 9px rgba(10,14,6,.5)) drop-shadow(0 1px 2px rgba(10,14,6,.4));transition:opacity .45s ease;}
/* Monogram stamped over the seal - scales with the seal automatically */
.seal-mono-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .45s ease;display:none;}
/* the engraved monogram belongs to the built-in gold seal - it only
   appears when the custom seal is missing and the gold one steps in */
.env-seal.seal-fallback .seal-mono-svg{display:block;}
/* the seal stays whole and rides the fold - same little over-slide,
   same sweep, same distance (118% of the 66vw panel), as one piece */
#envScreen.open .env-seal {
  animation:sealSlide 2.1s cubic-bezier(.65,.05,.2,1) .45s forwards;
}
@keyframes sealSlide {
  0%   { transform:translate(-50%, -50%); }
  16%  { transform:translate(calc(-50% + 1.82vw * var(--edge-overslide,1)), -50%); }
  100% { transform:translate(calc(-50% - 82.6vw), -50%); }
}

/* ===== [C2] SITE BASE - website phase, typography, layout ===== */
/* ===============================
   WEBSITE PHASE
=============================== */
#websitePhase {
  display:none;
  flex-direction:column;
  background:#faf7f0;
  opacity:0;
  transition:opacity .8s ease;
  z-index:300;
}
#websitePhase.visible{display:flex;opacity:1;}

/* ===== [C2b] UTILITIES - lace background tile ===== */
.lace-bg{
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='rgba(170,135,55,0.08)' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='18' fill='none' stroke='rgba(170,135,55,0.06)' stroke-width='.7' stroke-dasharray='2 2'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(170,135,55,0.09)'/%3E%3C/svg%3E");
  background-size:80px 80px;
}


/* ===== [C3] FLOATING RSVP BUTTON - the travelling wax seal ===== */
/* === FLOATING RSVP SEAL BUTTON ===
   A wax-seal button that floats in the bottom corner while you scroll -
   it appears after the hero and hides itself on the RSVP section. */
#rsvpFab {
  position:fixed;
  right:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  z-index:250;
  width:calc(clamp(76px,15vw,100px) * var(--fab-scale,1));
  height:calc(clamp(76px,15vw,100px) * var(--fab-scale,1));
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)) drop-shadow(0 2px 5px rgba(0,0,0,.3));
  opacity:0;visibility:hidden;
  transform:translateY(18px) scale(.88);
  transition:opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
#rsvpFab.show {
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .45s ease, transform .45s ease, visibility 0s;
}
#rsvpFab.show:hover { transform:translateY(-2px) scale(1.06); }
#rsvpFab img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none; }
/* pulsing gold ring to draw the eye */
#rsvpFab::after {
  content:'';position:absolute;inset:4%;
  border-radius:50%;
  border:1.5px solid rgba(200,168,79,.75);
  opacity:0;
  pointer-events:none;
}
#rsvpFab.show::after { animation:fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse {
  0%   { transform:scale(.82); opacity:.9; }
  70%  { transform:scale(1.28); opacity:0; }
  100% { transform:scale(1.28); opacity:0; }
}
/* little note that greets the first appearance, then slips away */
.fab-note {
  position:absolute;
  right:calc(100% + 12px);
  top:50%;transform:translateY(-50%) translateX(6px);
  background:rgba(30,44,38,.94);
  border:1px solid rgba(200,168,79,.45);
  color:var(--gold-lt);
  font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;
  padding:9px 14px;white-space:nowrap;
  opacity:0;
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
#rsvpFab.note-visible .fab-note { opacity:1; transform:translateY(-50%) translateX(0); }
@media(max-width:480px){ .fab-note{font-size:.48rem;letter-spacing:.16em;} }

/* ===== [C4] HERO - first screen: video + names ===== */
#wsHero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--sage-xdk);}
/* Phones held upright: the hero fills the screen exactly (svh = the
   real visible height, so no gaps around the browser bars) and the
   video covers it edge-to-edge - no panels above or below. */
@media (orientation:portrait) and (max-width:820px){
  #wsHero{min-height:100svh;height:100svh;}
}
.hero-photo{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,38,33,.35) 0%,rgba(26,38,33,.1) 40%,rgba(26,38,33,.55) 85%,rgba(26,38,33,.85) 100%),linear-gradient(135deg,#4F7565,#8CAE9F 40%,#22352D);background-size:cover;background-position:center;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
/* hero background video (activated automatically when PHOTOS.heroVideo loads) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;} /* invisible via opacity, NOT display:none - iOS refuses to load display:none videos */
/* soft dark veil over the video so the names stay readable */
.hero-veil{position:absolute;inset:0;display:none;background:linear-gradient(to bottom,rgba(26,38,33,.42) 0%,rgba(26,38,33,.16) 40%,rgba(26,38,33,.55) 85%,rgba(26,38,33,.82) 100%);}
.ph-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(201,168,76,.28);font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.3em;pointer-events:none;}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 20px;
  /* the text hovers high above the footage on a heavy black shadow */
  text-shadow:
    0 2px 3px rgba(0,0,0,.85),
    0 5px 10px rgba(0,0,0,.75),
    0 12px 24px rgba(0,0,0,.6),
    0 24px 55px rgba(0,0,0,.5);
  /* the names fade in as the video appears behind the parting envelope */
  opacity:0;transform:translateY(16px);
  transition:opacity 1.7s ease, transform 1.7s ease;}
.hero-content.fade-in{opacity:1;transform:none;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-lbl{font-family:'Cinzel',serif;font-size:clamp(.62rem,1.9vw,.8rem);letter-spacing:.5em;color:var(--gold-lt);text-transform:uppercase;margin-bottom:24px;opacity:.95;animation:fadeUp 1.2s ease .2s both;}
.hero-lbl2{font-family:'Cinzel',serif;font-size:clamp(.6rem,1.8vw,.76rem);letter-spacing:.42em;color:var(--gold-lt);text-transform:uppercase;margin-top:6px;animation:fadeUp 1.2s ease .7s both;}
.hero-names{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(3rem,10vw,7.5rem);color:var(--ivory);line-height:1;animation:fadeUp 1.2s ease .5s both;}
.hero-amp{display:inline-block;color:var(--gold);font-size:.65em;margin:0 .2em;vertical-align:middle;}
.hero-date{font-family:'Cinzel',serif;font-size:clamp(.65rem,2vw,.9rem);letter-spacing:.4em;color:var(--gold-lt);margin-top:28px;animation:fadeUp 1.2s ease .8s both;}
.hero-div{filter:drop-shadow(0 1px 2px rgba(8,12,9,.5)) drop-shadow(0 3px 10px rgba(8,12,9,.35));display:flex;align-items:center;justify-content:center;gap:16px;margin:28px auto;width:min(320px,80vw);animation:fadeUp 1.2s ease 1s both;}
.hero-div-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.5));}
.hero-div-line.r{background:linear-gradient(to left,transparent,rgba(201,168,76,.5));}
.hero-div-gem{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);}
.hero-loc{font-style:italic;font-size:clamp(.9rem,2.5vw,1.1rem);color:rgba(240,228,196,.7);animation:fadeUp 1.2s ease 1.1s both;}
.scroll-hint{text-shadow:0 2px 3px rgba(0,0,0,.85), 0 5px 10px rgba(0,0,0,.7), 0 12px 26px rgba(0,0,0,.55);position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(201,168,76,.5);font-family:'Cinzel',serif;font-size:.48rem;letter-spacing:.4em;animation:floatHint 2.5s ease-in-out infinite;}
.scroll-hint .arr{width:1px;height:40px;background:linear-gradient(to bottom,rgba(201,168,76,.5),transparent);}
@keyframes floatHint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ===== [C5] SHARED SECTION STYLES - labels, titles, dividers, cards ===== */
section{position:relative;}
.sec-label{font-family:'Cinzel',serif;font-size:clamp(.48rem,1.4vw,.58rem);letter-spacing:.45em;color:var(--sage);text-transform:uppercase;display:block;margin-bottom:14px;}
.sec-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(2rem,5vw,3.5rem);color:var(--sage-dk);line-height:1.1;}
.sec-div{display:flex;align-items:center;gap:12px;margin:20px 0 36px;}
.sec-div .line{flex:1;height:1px;background:linear-gradient(to right,var(--sage),transparent);max-width:120px;}
.sec-div .gem{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);}
.sec-div .line2{flex:0;width:40px;height:1px;background:linear-gradient(to right,rgba(201,168,76,.4),transparent);}
.gold-line{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.4),transparent);}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}.rd5{transition-delay:.5s}.rd6{transition-delay:.6s}
.gold-card{border:1px solid rgba(140,174,159,.5);background:var(--ivory);position:relative;padding:36px;}
.gold-card::before,.gold-card::after{content:'';position:absolute;width:28px;height:28px;border-color:var(--gold);border-style:solid;opacity:.5;}
.gold-card::before{top:8px;left:8px;border-width:1px 0 0 1px;}
.gold-card::after{bottom:8px;right:8px;border-width:0 1px 1px 0;}

/* ===== [C6] OUR STORY - photo grid + text ===== */
#wsStory{padding:100px 0 80px;background:var(--cream);}
.story-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:300px 300px;gap:12px;}
@media(max-width:991px){.story-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px 220px;}}
@media(max-width:575px){.story-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,240px);}}
.story-photo{position:relative;overflow:hidden;background:var(--ivory2);}
.story-photo:first-child{grid-row:1/3;background:linear-gradient(135deg,#8CAE9F,#4F7565);}
@media(max-width:991px){.story-photo:first-child{grid-row:1/2;}}
.story-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block;}
.story-photo:hover img{transform:scale(1.04);}
.story-photo .ph-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(201,168,76,.3);font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.3em;gap:8px;pointer-events:none;}
.story-body{font-size:clamp(1rem,2vw,1.15rem);color:var(--text-lt);line-height:1.9;font-weight:300;font-style:italic;max-width:480px;}

/* ===== [C7] THE DAY - events section ===== */
#wsEvents{padding:90px 0;background:var(--sage-xdk);position:relative;overflow:hidden;}
#wsEvents::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(201,168,76,0.05)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='3' fill='rgba(201,168,76,0.05)'/%3E%3C/svg%3E");background-size:100px 100px;pointer-events:none;}
#wsEvents .sec-title{color:var(--ivory);}
#wsEvents .sec-label{color:var(--gold-lt);}
#wsEvents .sec-div .line{background:linear-gradient(to right,var(--gold-lt),transparent);}
#wsEvents .sec-div .gem{background:var(--gold-lt);}
.timeline{position:relative;}
@media(min-width:768px){.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(201,168,76,.4) 10%,rgba(201,168,76,.4) 90%,transparent);transform:translateX(-50%);}}
.tl-item{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:0 24px;margin-bottom:48px;}
.tl-item:last-child{margin-bottom:0;}
.tl-left{text-align:right;}.tl-right{text-align:left;}
.tl-node{display:flex;align-items:flex-start;justify-content:center;padding-top:5px;}
.tl-dot{width:14px;height:14px;background:var(--gold);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(201,168,76,.15);position:relative;}
.tl-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(201,168,76,.3);}
.tl-time{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.3em;color:var(--gold);margin-bottom:6px;}
.tl-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.3rem,3vw,1.75rem);color:var(--ivory);font-weight:300;line-height:1.1;margin-bottom:8px;}
.tl-desc{font-size:.92rem;color:rgba(220,210,185,.7);line-height:1.7;font-style:italic;}
.tl-icon{width:48px;height:48px;border:1px solid rgba(201,168,76,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--gold);}
.tl-left .tl-icon{margin-left:auto;}.tl-right .tl-icon{margin-left:0;}
@media(max-width:767px){
  .timeline::before{display:none;}
  .tl-item{grid-template-columns:24px 1fr;gap:0 16px;}
  .tl-left,.tl-right{text-align:left;}
  .tl-node{justify-content:flex-start;}
  .tl-icon{margin-left:0!important;}
}

/* ===== [C8] VENUE - photos, details, map ===== */
#wsVenue{padding:90px 0;background:var(--cream);}
.venue-hero{position:relative;height:clamp(280px,50vw,480px);overflow:hidden;background:linear-gradient(135deg,#8CAE9F,#4F7565 60%,#22352D);}
.venue-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease;}
.venue-hero:hover img{transform:scale(1.03);}
.venue-hero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,38,33,.7) 0%,transparent 60%);display:flex;align-items:flex-end;padding:32px 40px;}
.venue-hero-lbl{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.6rem,4vw,2.5rem);color:var(--ivory);font-weight:300;}
.venue-details{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(140,174,159,.3);border:1px solid rgba(140,174,159,.3);}
@media(max-width:575px){.venue-details{grid-template-columns:1fr;}}
.venue-di{background:var(--ivory);padding:28px 32px;}
.venue-di-lbl{font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.35em;color:var(--sage-dk);text-transform:uppercase;margin-bottom:8px;}
.venue-di-val{font-size:1rem;color:var(--sage-dk);font-style:italic;font-weight:300;line-height:1.5;}
/* the two location cards (ceremony / reception) */
.venue-loc{text-align:center;}
.venue-loc-name{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--sage-dk);font-style:italic;font-weight:400;margin-bottom:8px;}
.venue-loc-addr{font-size:.92rem;color:var(--text-lt);line-height:1.6;font-style:italic;}
.venue-loc-time{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.22em;color:var(--gold-dk);margin-top:14px;padding-top:12px;border-top:1px solid rgba(140,174,159,.35);display:inline-block;}
/* the two location blocks: kicker headers with flanking lines */
.venue-block-kicker{display:flex;align-items:center;justify-content:center;gap:18px;font-family:'Cinzel',serif;font-size:clamp(.82rem,2vw,1.05rem);letter-spacing:.45em;color:var(--sage);text-transform:uppercase;margin-bottom:20px;}
.venue-block-kicker::before,.venue-block-kicker::after{content:'';height:1px;flex:1;max-width:150px;}
.venue-block-kicker::before{background:linear-gradient(to right,transparent,var(--sage));}
.venue-block-kicker::after{background:linear-gradient(to left,transparent,var(--sage));}
.venue-block-gap{margin-top:52px;}
.venue-hero-sm{height:clamp(220px,36vw,340px);}
.venue-details-one{grid-template-columns:1fr;}
@media(max-width:575px){.venue-details-one{grid-template-columns:1fr;}}
.venue-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px;}
@media(max-width:575px){.venue-gallery{grid-template-columns:1fr 1fr;}}
.venue-gi{height:180px;overflow:hidden;position:relative;background:var(--ivory3);}
.venue-gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.venue-gi:hover img{transform:scale(1.06);}
.map-box{height:280px;position:relative;overflow:hidden;border:1px solid rgba(140,174,159,.35);}
/* maps in the stacked venue section - a comfortable tall aspect */
.map-box.venue-map-tall{height:clamp(280px,42vw,420px);}
.venue-hero-lbl-solo{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--sage-dk);
  font-weight:300;margin:2px 0 12px;
}
.map-lbl{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.3em;color:var(--sage-dk);text-transform:uppercase;margin-bottom:8px;}
.gt-card{padding:36px 32px;}
.map-box iframe{width:100%;height:100%;border:none;filter:sepia(.35) hue-rotate(105deg) saturate(.55);}
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(201,168,76,.4);font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.3em;background:linear-gradient(135deg,#4F7565,#8CAE9F);text-align:center;padding:20px;}

/* ===== [C9] GALLERY - masonry (built from SETTINGS.photos.gallery) ===== */
#wsGallery{padding:90px 0;background:var(--ivory2);}
/* uniform grid: every cell the same width, fixed row height, photos
   cropped to fill - flows left-to-right with zero holes, whatever the
   mix of portrait and landscape shots. Every 4th photo spans 2 rows
   for rhythm; grid-auto-flow:dense fills any gap that would create. */
.gallery-masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:12px;grid-auto-flow:dense;}
@media(max-width:767px){.gallery-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;}}
@media(max-width:480px){.gallery-masonry{grid-template-columns:1fr;grid-auto-rows:230px;}}
.gal-item{position:relative;overflow:hidden;background:var(--ivory3);}
.gal-item.tall{grid-row:span 2;}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.gal-item:hover img{transform:scale(1.04);}
.gal-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:rgba(170,130,50,.28);font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.3em;gap:8px;}

/* ===== [C10] RSVP - form + success/error states ===== */
#wsRsvp{padding:90px 0 100px;background:var(--sage-xdk);position:relative;overflow:hidden;}
#wsRsvp::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='2' fill='rgba(201,168,76,0.05)'/%3E%3C/svg%3E");background-size:100px 100px;pointer-events:none;}
#wsRsvp .sec-title{color:var(--ivory);}
#wsRsvp .sec-label{color:var(--gold-lt);}
#wsRsvp .sec-div .line{background:linear-gradient(to right,var(--gold-lt),transparent);}
#wsRsvp .sec-div .gem{background:var(--gold-lt);}
.rsvp-intro{font-size:clamp(.95rem,2vw,1.1rem);color:rgba(220,210,185,.75);font-style:italic;line-height:1.8;margin-bottom:32px;max-width:520px;}
.rsvp-form-wrap{background:rgba(245,240,224,.05);border:1px solid rgba(201,168,76,.22);padding:clamp(24px,5vw,52px);position:relative;}
.rsvp-form-wrap::before{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid rgba(201,168,76,.09);pointer-events:none;}
.f-group{margin-bottom:26px;}
.f-label{display:block;font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.3em;color:var(--gold-lt);text-transform:uppercase;margin-bottom:10px;}
.f-input{width:100%;background:rgba(245,240,224,.06);border:none;border-bottom:1px solid rgba(201,168,76,.35);padding:12px 0;color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;outline:none;transition:border-color .3s;-webkit-appearance:none;}
.f-input::placeholder{color:rgba(220,210,185,.3);}
.f-input:focus{border-bottom-color:var(--gold);}
.f-select{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(201,168,76,.35);padding:12px 0;color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1,1 L6,7 L11,1' fill='none' stroke='rgba(201,168,76,0.6)' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:28px;transition:border-color .3s;}
.f-select:focus{border-bottom-color:var(--gold);}
.f-select option{background:var(--sage-xdk);color:var(--ivory);}
textarea.f-input{resize:vertical;min-height:80px;border:1px solid rgba(201,168,76,.18);padding:12px;background:rgba(245,240,224,.04);}
textarea.f-input:focus{border-color:var(--gold);}
.guest-ctr{display:flex;align-items:center;gap:16px;padding:8px 0;}
.ctr-btn{width:32px;height:32px;border:1px solid rgba(201,168,76,.4);background:none;color:var(--gold-lt);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.ctr-btn:hover{background:rgba(201,168,76,.1);border-color:var(--gold);}
.ctr-num{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--ivory);min-width:28px;text-align:center;}
.attend-opts{display:flex;gap:20px;flex-wrap:wrap;}
.attend-opt{display:flex;align-items:center;gap:10px;cursor:pointer;}
.attend-opt input[type=radio]{display:none;}
.attend-dot{width:18px;height:18px;border:1px solid rgba(201,168,76,.4);border-radius:50%;position:relative;flex-shrink:0;transition:all .2s;}
.attend-dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .2s;}
.attend-opt input:checked + .attend-dot{border-color:var(--gold);}
.attend-opt input:checked + .attend-dot::after{opacity:1;}
.attend-lbl{font-size:1rem;color:var(--ivory);font-style:italic;}
.diet-opts{display:flex;flex-wrap:wrap;gap:10px 20px;}
.diet-opt{display:flex;align-items:center;gap:8px;cursor:pointer;}
.diet-opt input[type=checkbox]{display:none;}
.diet-box{width:16px;height:16px;border:1px solid rgba(201,168,76,.4);position:relative;flex-shrink:0;transition:all .2s;}
.diet-box::after{content:'';position:absolute;inset:2px;background:var(--gold);opacity:0;transition:opacity .2s;}
.diet-opt input:checked + .diet-box{border-color:var(--gold);}
.diet-opt input:checked + .diet-box::after{opacity:1;}
.diet-lbl{font-size:.9rem;color:rgba(220,210,185,.8);font-style:italic;}
.btn-gold{display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid var(--gold);color:var(--gold-lt);font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;padding:16px 48px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;}
.btn-gold::before{content:'';position:absolute;inset:0;background:rgba(201,168,76,.12);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.btn-gold:hover::before{transform:scaleX(1);}
.btn-gold:hover{color:var(--gold);border-color:var(--gold-lt);}
.btn-gold:disabled{opacity:.5;cursor:not-allowed;}
#formSuccess{display:none;padding:20px 28px;margin-top:20px;border:1px solid rgba(180,203,193,.4);color:var(--sage-lt);background:rgba(180,203,193,.06);font-style:italic;line-height:1.7;}
#formError{display:none;padding:20px 28px;margin-top:20px;border:1px solid rgba(180,80,60,.4);color:#e09080;background:rgba(180,80,60,.06);font-style:italic;line-height:1.7;}
.spin{display:inline-block;width:16px;height:16px;border:1.5px solid rgba(201,168,76,.3);border-top-color:var(--gold);border-radius:50%;animation:spinAnim .7s linear infinite;}
@keyframes spinAnim{to{transform:rotate(360deg)}}

/* ===== [C11] FOOTER ===== */
#wsFoot{background:#101815;padding:60px 0 40px;border-top:1px solid rgba(201,168,76,.15);text-align:center;}
.foot-mono{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(2rem,5vw,3.2rem);color:var(--gold);opacity:.7;font-weight:300;}
.foot-date{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.5em;color:rgba(201,168,76,.4);margin-top:14px;}
.foot-div{width:60px;height:1px;background:rgba(201,168,76,.25);margin:24px auto;}
.foot-note{font-size:.82rem;color:rgba(220,210,185,.22);font-style:italic;}

/* ===== [C12] INFOGRAPHIC TIMELINE - inside THE DAY ===== */
/* ===============================
   INFOGRAPHIC TIMELINE
=============================== */
.itl-wrap { position:relative; padding:0 0 8px; }

.itl-row {
  display:grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items:flex-start;
  min-height:110px;
}

/* - spine column (centre) - */
.itl-spine-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.itl-dot {
  width:52px; height:52px;
  border-radius:50%;
  background:var(--ivory);
  border:2px solid rgba(180,203,193,.65);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 6px rgba(201,168,76,.08);
}
.itl-dot-gold {
  background:var(--gold);
  border-color:var(--gold-lt);
  box-shadow:0 0 0 6px rgba(201,168,76,.2), 0 4px 16px rgba(201,168,76,.3);
}

.itl-line {
  width:2px;
  flex:1;
  min-height:40px;
  background:linear-gradient(to bottom, rgba(180,203,193,.45), rgba(180,203,193,.15));
  margin-top:0;
}

/* - time column - */
.itl-time-col {
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding-top:12px;
  padding-right:16px;
}
.itl-time-right {
  justify-content:flex-start;
  padding-right:0;
  padding-left:16px;
}
.itl-time {
  font-family:'Cinzel', serif;
  font-size:clamp(.75rem, 2vw, 1rem);
  font-weight:600;
  color:var(--gold-lt);
  letter-spacing:.05em;
  white-space:nowrap;
}

/* - content column - */
.itl-content-col {
  padding-top:10px;
  padding-left:16px;
}
.itl-content-left {
  padding-left:0;
  padding-right:16px;
  text-align:right;
}
.itl-event {
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.1rem, 2.5vw, 1.45rem);
  color:var(--ivory);
  line-height:1.2;
  margin-bottom:5px;
}
.itl-detail {
  font-size:clamp(.78rem, 1.6vw, .9rem);
  color:rgba(220,210,185,.6);
  line-height:1.6;
  font-style:italic;
}

/* Mobile: collapse to single column */
@media(max-width:575px){
  .itl-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
  }
  .itl-row.itl-right .itl-time-col,
  .itl-row.itl-left .itl-time-col { display:none; }
  .itl-row.itl-left .itl-content-col { order:3; }
  .itl-row.itl-left .itl-spine-col  { order:1; grid-column:1; }
  .itl-row.itl-left .itl-content-col.itl-content-left { order:2; grid-column:2; text-align:left; padding-left:16px; padding-right:0; }
  .itl-time-col.itl-time-right { display:none; }
  .itl-dot { width:40px; height:40px; }
  .itl-content-col { padding-left:12px; }
  /* Show time inline inside content for mobile */
  .itl-event::before {
    display:block;
    font-family:'Cinzel',serif;
    font-size:.65rem;
    font-style:normal;
    color:var(--gold);
    letter-spacing:.08em;
    margin-bottom:3px;
    content:attr(data-time);
  }
}
@keyframes itlSlideIn {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Items start hidden; .itl-playing parent triggers the animation */
.itl-wrap .itl-ani {
  opacity: 0;
}
.itl-wrap.itl-playing .itl-ani {
  animation: itlSlideIn .7s ease forwards;
}

/* ===== envelope tap hint ===== */
.env-hint{
  position:absolute;
  left:50%;bottom:10vh;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:'Cinzel',serif;
  font-size:clamp(.8rem,3vw,1rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#F5EEDD;
  background:rgba(20,28,22,.55);
  border:1px solid rgba(201,169,97,.55);
  padding:.7em 1.3em;
  border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  white-space:nowrap;
  pointer-events:none;
  animation:envHintBob 1.8s ease-in-out infinite;
  transition:opacity .4s ease;
}
.env-hint::before{
  content:"";
  width:1.15em;height:1.15em;
  flex:0 0 auto;
  background:no-repeat center/contain;
  /* finger-tap icon in warm gold */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8D9B0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a1.5 1.5 0 0 1 3 0v5'/%3E%3Cpath d='M12 11V4.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M15 11V6.5a1.5 1.5 0 0 1 3 0V13c0 4-2.5 7-6 7s-6-2.5-6-6.5c0-1 .5-1.8 1.4-2.2L9 11'/%3E%3C/svg%3E");
}
#envScreen.open .env-hint{opacity:0;animation:none;}
#envScreen{cursor:pointer;}
#envScreen:focus-visible{outline:2px solid rgba(201,169,97,.6);outline-offset:-6px;}
@keyframes envHintBob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-7px);}
}
@media (prefers-reduced-motion: reduce){
  .env-hint{animation:none;}
}

/* ===== language switch (EN | NL) ===== */
#langSwitch{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  right:16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:.35em;
  padding:.3em .7em;
  background:rgba(20,28,22,.5);
  border:1px solid rgba(201,169,97,.4);
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-family:'Cinzel',serif;
}
#langSwitch button{
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:.72rem;
  letter-spacing:.12em;
  color:rgba(220,210,185,.55);
  padding:.15em .25em;
  transition:color .25s ease;
}
#langSwitch button:hover{ color:rgba(220,210,185,.85); }
#langSwitch button.lang-active{ color:var(--gold-lt); }
#langSwitch .lang-sep{ color:rgba(201,169,97,.4); font-size:.7rem; }
#langSwitch button:focus-visible{ outline:1px solid rgba(201,169,97,.6); outline-offset:2px; border-radius:3px; }