/* ============================================================
   Tatum & Ryno — Champagne Gold Wedding
   Design system: ivory linens, gilded accents, candlelight
   ============================================================ */

:root{
  /* Neutrals — warm throughout */
  --ivory:#FBF8F3;
  --cream:#F4EDE2;
  --sand:#E7DAC6;
  --taupe:#C9BBA6;
  --stone:#998E7E;
  --ink:#2E2A26;

  /* Champagne gold accent */
  --gold:#C9A86A;
  --gold-hover:#B8945A;
  --gold-press:#9C7C45;

  /* Secondary */
  --blush:#D9B8B0;
  --sage:#9AA88F;

  /* Functional */
  --shadow-sm:0 2px 10px rgba(70,63,56,.10);
  --shadow-md:0 12px 34px rgba(70,63,56,.16);
  --shadow-lg:0 26px 60px rgba(70,63,56,.22);
  --gold-glow:0 0 0 1px rgba(201,168,106,.35), 0 14px 40px rgba(201,168,106,.22);

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

  --f-display:'Playfair Display', Georgia, serif;
  --f-serif:'Cormorant Garamond', Georgia, serif;
  --f-body:'Jost', -apple-system, sans-serif;
  --f-script:'Great Vibes', cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  font-family:var(--f-body);
  font-weight:300;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--gold-press);text-decoration:none;transition:color .28s var(--ease)}
a:hover{color:var(--gold-hover)}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.15;color:var(--ink)}
.eyebrow{
  font-family:var(--f-body);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold-press);
  margin-bottom:18px;display:block;
}
.script{font-family:var(--f-script);color:var(--gold);font-weight:400}
.amp{font-family:var(--f-display);font-style:italic;color:var(--gold)}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.section{padding:104px 0}
.section--cream{background:var(--cream)}
.section--ink{background:var(--ink);color:var(--ivory)}
.section--ink h2,.section--ink h3{color:var(--ivory)}
.section--ink .eyebrow{color:var(--gold)}
.center{text-align:center}

/* ---------- Gold diamond divider ---------- */
.divider{
  display:flex;align-items:center;justify-content:center;gap:0;
  margin:22px auto 40px;max-width:240px;
}
.divider::before,.divider::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.divider i{
  width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);margin:0 14px;flex:none;
}
.section--ink .divider i{background:var(--gold)}

/* Section heading block */
.head{margin-bottom:14px}
.head h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.head .sub{
  font-family:var(--f-serif);font-style:italic;font-size:1.25rem;
  color:var(--stone);max-width:620px;margin:0 auto;
}
.section--ink .head .sub{color:var(--taupe)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  padding:12px 32px;
}
.nav__mono{
  font-family:var(--f-display);font-size:1.45rem;color:var(--ivory);
  letter-spacing:1px;transition:color .4s var(--ease);display:flex;align-items:center;
}
.nav__logo{
  height:56px;width:auto;display:block;transition:height .4s var(--ease);
  /* logo is legible on the dark hero as-is; slightly lift it there */
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.nav.scrolled .nav__logo{height:44px;filter:none}
.nav.scrolled .nav__mono{color:var(--ink)}
.nav__mono .amp{font-size:1.1rem}
.nav__links{display:flex;gap:30px;list-style:none;align-items:center}
.nav__links a{
  font-family:var(--f-body);font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ivory);
  transition:color .28s var(--ease)
}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav__links a:hover{color:var(--gold)}
.nav.scrolled .nav__links a:hover{color:var(--gold-press)}
.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--ivory);margin:5px 0;transition:all .3s var(--ease)}
.nav.scrolled .nav__toggle span{background:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--ivory);overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  z-index:0;transform:scale(1.06);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(46,42,38,.42),rgba(46,42,38,.62));
}
.hero__inner{position:relative;z-index:2;padding:0 24px;max-width:880px}
.hero__eyebrow{
  font-family:var(--f-body);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.34em;color:var(--ivory);
  opacity:.92;margin-bottom:26px;
}
.hero__names{
  font-family:var(--f-display);font-weight:400;color:var(--ivory);
  font-size:clamp(3.2rem,9vw,6.4rem);line-height:1.04;
  text-shadow:0 2px 30px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
}
.hero__names .amp{font-style:italic;color:var(--gold);display:block;font-size:.5em;margin:6px 0}
.hero__script{
  font-family:var(--f-script);font-size:clamp(2rem,5vw,3.1rem);
  color:var(--gold);margin:14px 0 8px;text-shadow:0 2px 20px rgba(0,0,0,.25)
}
.hero__date{
  font-family:var(--f-serif);font-style:italic;font-size:1.4rem;
  letter-spacing:.04em;color:var(--ivory);margin-top:6px;opacity:.95;
}
.hero__cta{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero__scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:2;color:var(--ivory);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.8;font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero__scroll i{width:1px;height:34px;background:var(--ivory);animation:scrolldown 2.2s var(--ease) infinite}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sparkle layer */
.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.95),rgba(201,168,106,.5));
  opacity:0;animation:twinkle linear infinite}
@keyframes twinkle{
  0%{opacity:0;transform:translateY(0) scale(.4)}
  20%{opacity:.9}
  50%{opacity:.5;transform:translateY(-40px) scale(1)}
  100%{opacity:0;transform:translateY(-90px) scale(.3)}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-weight:500;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding:15px 34px;border-radius:4px;cursor:pointer;
  border:1.5px solid var(--gold);transition:all .3s var(--ease);
  position:relative;
}
.btn--primary{background:var(--gold);color:var(--ivory)}
.btn--primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--ivory);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--primary:active{background:var(--gold-press);border-color:var(--gold-press);transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ivory)}
.btn--ghost:hover{background:var(--gold);color:var(--ivory);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--gold-press)}
.btn--outline:hover{background:var(--gold);color:var(--ivory)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:40px 0 6px}
.count__box{min-width:96px}
.count__num{
  font-family:var(--f-display);font-size:clamp(2.4rem,6vw,3.6rem);
  color:var(--gold);line-height:1;font-weight:500;
}
.count__label{
  font-family:var(--f-body);font-weight:500;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--stone);margin-top:8px;
}
.hero .count__label{color:var(--ivory);opacity:.85}
.hero .count__num{color:var(--gold)}

/* ============================================================
   CARDS / DETAILS
   ============================================================ */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px}
.card{
  background:var(--ivory);border-radius:8px;padding:42px 40px;
  box-shadow:var(--shadow-md);position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(201,168,106,.4);
  border-radius:5px;pointer-events:none;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card h3{font-size:1.6rem;margin-bottom:6px}
.card .card__eyebrow{
  font-family:var(--f-body);font-weight:500;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold-press);margin-bottom:14px;display:block;
}
.card__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--cream)}
.card__row:last-of-type{border-bottom:none}
.card__row .k{color:var(--stone);font-size:.92rem}
.card__row .v{font-weight:400;color:var(--ink);text-align:right}
.card .venue-name{font-family:var(--f-serif);font-style:italic;font-size:1.9rem;color:var(--gold-press)}
.card__note{display:flex;align-items:center;gap:9px;color:var(--stone);font-size:.9rem;margin-top:10px}
.card__map{margin-top:18px}

.venue-photo{margin-top:46px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md);position:relative}
.venue-photo img{width:100%;height:auto;display:block;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.venue-photo:hover img{transform:scale(1.12)}

/* ============================================================
   STORY
   ============================================================ */
.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story__img{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)}
.story__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.story__img:hover img{transform:scale(1.12)}
.story__text p{margin-bottom:18px;color:#4a443d}
.story__text .lead{font-family:var(--f-serif);font-style:italic;font-size:1.4rem;color:var(--gold-press);line-height:1.5}

/* ============================================================
   FORMS (underline-only)
   ============================================================ */
.form{max-width:640px;margin:0 auto;text-align:left}
.field{margin-bottom:26px}
.field label{
  display:block;font-family:var(--f-body);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold-press);margin-bottom:8px;
}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;border:none;border-bottom:1px solid var(--taupe);
  background:transparent;padding:10px 2px;font-family:var(--f-body);font-size:1rem;
  color:var(--ink);transition:border-color .3s var(--ease);
}
.section--ink .field input,.section--ink .field textarea{color:var(--ivory);border-bottom-color:var(--stone)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field textarea{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.attend-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 4px}
.attend-opt{position:relative}
.attend-opt input{position:absolute;opacity:0}
.attend-opt label{
  display:block;text-align:center;padding:18px;border:1px solid var(--taupe);
  border-radius:6px;cursor:pointer;transition:all .3s var(--ease);
  font-family:var(--f-serif);font-style:italic;font-size:1.15rem;
  text-transform:none;letter-spacing:0;color:var(--ink);
}
.section--ink .attend-opt label{color:var(--ivory)}
.attend-opt input:checked + label{
  border-color:var(--gold);background:rgba(201,168,106,.12);
  box-shadow:var(--gold-glow);color:var(--gold-press);
}
.section--ink .attend-opt input:checked + label{color:var(--gold)}
.attend-opt input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}

.partner-block{
  margin-top:14px;padding-top:30px;border-top:1px dashed rgba(201,168,106,.4);
}
.partner-block h4{
  font-family:var(--f-serif);font-style:italic;font-size:1.4rem;color:var(--gold-press);margin-bottom:18px;
}

.adults-note{
  font-family:var(--f-serif);font-style:italic;font-size:1.2rem;
  color:var(--taupe);max-width:560px;margin:0 auto 36px;text-align:center;line-height:1.5;
}

.form-msg{
  padding:22px;border-radius:6px;margin-bottom:20px;text-align:center;
  font-family:var(--f-serif);font-style:italic;font-size:1.2rem;
}
.form-msg.ok{background:rgba(154,168,143,.16);color:#5c6b4f;border:1px solid rgba(154,168,143,.4)}
.form-msg.err{background:rgba(217,184,176,.2);color:#9a5a4d;border:1px solid rgba(217,184,176,.5)}

/* ============================================================
   RSVP SUCCESS + CALENDAR
   ============================================================ */
.rsvp-success{text-align:center;max-width:560px;margin:0 auto}
.rsvp-success .tick{
  width:74px;height:74px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
  color:var(--gold);
}
.cal-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ============================================================
   MORE INFO
   ============================================================ */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:14px}
.info-card{
  background:var(--ivory);border-radius:8px;padding:34px;box-shadow:var(--shadow-sm);
  border:1px solid var(--cream);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.info-card h3{font-size:1.3rem;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.info-card p{color:#4a443d;font-size:.96rem}
.info-card .ico{color:var(--gold-press);flex:none}

/* Embedded weather widget */
.info-card--weather{grid-column:1 / -1}
/* Contact card — full width, centered, matching weather widget width */
.info-card--contact{grid-column:1 / -1;text-align:center}
.info-card--contact h3{justify-content:center}
.info-card--contact p{max-width:none}
.weather-embed{
  margin-top:16px;background:linear-gradient(135deg,var(--cream),var(--ivory));
  border:1px solid rgba(201,168,106,.22);border-radius:10px;padding:20px 22px;
}
.wx-current{display:flex;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid rgba(201,168,106,.18)}
.wx-icon{flex:none;display:flex;align-items:center;justify-content:center;width:54px;height:54px}
.wx-temp{font-family:var(--f-display);font-size:2.6rem;color:var(--gold-press);line-height:1}
.wx-desc{font-family:var(--f-serif);font-style:italic;font-size:1.2rem;color:var(--ink);margin-top:2px}
.wx-meta{font-size:.78rem;color:var(--stone);margin-top:4px;letter-spacing:.02em}
.wx-forecast{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.wx-day{text-align:center;padding:10px 4px;border-radius:8px;transition:background .3s var(--ease)}
.wx-day:hover{background:rgba(201,168,106,.1)}
.wx-dname{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-press);font-weight:500;margin-bottom:6px}
.wx-dicon{display:flex;align-items:center;justify-content:center;height:30px}
.wx-dtemp{margin-top:6px;font-size:.82rem;color:var(--stone)}
.wx-dtemp b{color:var(--ink);font-weight:500}
.wx-credit{text-align:right;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--taupe);margin-top:14px}
@media (max-width:560px){
  .wx-forecast{grid-template-columns:repeat(5,1fr);gap:4px}
  .wx-dtemp{font-size:.72rem}
  .wx-temp{font-size:2.1rem}
}

.gift-block{margin-top:46px;text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.gift-block .gift-text{font-family:var(--f-serif);font-style:italic;font-size:1.5rem;color:var(--ink);line-height:1.6}
.gift-reveal{margin-top:24px}
.gift-details{
  margin-top:20px;padding:30px 28px;background:var(--ivory);border-radius:8px;
  box-shadow:var(--shadow-md);display:none;text-align:left;
  font-family:var(--f-body);position:relative;
}
.gift-details::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,168,106,.4);border-radius:5px;pointer-events:none}
.gift-details.open{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gift-details__intro{
  font-family:var(--f-serif);font-style:italic;font-size:1.2rem;color:var(--gold-press);
  text-align:center;margin-bottom:22px;line-height:1.5;
}
.bank-lines{display:flex;flex-direction:column;gap:10px}
.bank-line{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--cream);border:1px solid transparent;border-radius:6px;
  padding:13px 16px;font-family:var(--f-body);transition:all .25s var(--ease);position:relative;
}
.bank-line:hover{border-color:var(--gold);background:rgba(201,168,106,.08)}
.bank-line__label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);
  font-weight:500;flex:none;width:120px;
}
.bank-line__value{
  font-size:1.05rem;color:var(--ink);font-weight:400;flex:1;letter-spacing:.02em;
}
.bank-line__copy{color:var(--gold-press);flex:none;opacity:.55;transition:opacity .25s var(--ease)}
.bank-line:hover .bank-line__copy{opacity:1}
.bank-line.copied{border-color:var(--sage);background:rgba(154,168,143,.14)}
.bank-line.copied::after{
  content:"Copied \2713";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:var(--sage);color:#fff;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  padding:4px 10px;border-radius:20px;font-weight:500;
}
.bank-line.copied .bank-line__copy{opacity:0}
.bank-copy-all{margin-top:20px;width:100%;justify-content:center}

/* ============================================================
   MOMENTS UPLOAD + GALLERY
   ============================================================ */
.moments-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch}
.moments-img{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md);position:relative;min-height:100%}
.moments-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.moments-img:hover img{transform:scale(1.09)}
.upload-drop{
  border:1.5px dashed var(--taupe);border-radius:8px;padding:30px;text-align:center;
  cursor:pointer;transition:all .3s var(--ease);background:rgba(255,255,255,.4)
}
.upload-drop:hover{border-color:var(--gold);background:rgba(201,168,106,.06)}
.upload-drop .ico{color:var(--gold-press);margin-bottom:10px}
.upload-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.upload-preview img{width:70px;height:70px;object-fit:cover;border-radius:5px;box-shadow:var(--shadow-sm)}

.gallery{margin-top:60px}

/* Fading mosaic — 15 tiles, each cross-fades between its own photos */
.mosaic{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  max-width:1000px;margin:0 auto;
}
.mosaic__tile{
  position:relative;margin:0;aspect-ratio:1;border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow-sm);cursor:pointer;background:var(--sand);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mosaic__tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md);z-index:2}
.mosaic__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.mosaic__img.is-active{opacity:1}
.mosaic__tile::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(46,42,38,.28));
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.mosaic__tile:hover::after{opacity:1}
/* make a few tiles larger for an editorial mosaic feel */
.mosaic__tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic__tile:nth-child(8){grid-column:span 2;grid-row:span 2}

@media (prefers-reduced-motion:reduce){
  .mosaic__img{transition:opacity .5s linear}
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(46,42,38,.94);z-index:200;
  display:none;align-items:center;justify-content:center;padding:30px;
}
.lightbox.open{display:flex;animation:lbfade .3s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:6px;box-shadow:var(--shadow-lg)}
.lightbox__close,.lightbox__nav{
  position:absolute;color:var(--ivory);background:rgba(201,168,106,.2);
  border:1px solid rgba(201,168,106,.5);width:48px;height:48px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;transition:all .3s var(--ease)
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--gold)}
.lightbox__close{top:24px;right:24px}
.lightbox__nav.prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox__nav.next{right:24px;top:50%;transform:translateY(-50%)}

/* community moments shown after approval */
.community{margin-top:50px}
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.community-card{background:var(--ivory);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.community-card img{width:100%;height:200px;object-fit:cover}
.community-card .cc-body{padding:16px}
.community-card .cc-msg{font-family:var(--f-serif);font-style:italic;color:var(--ink);font-size:1.05rem}
.community-card .cc-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-press);margin-top:8px}

/* ============================================================
   ACCOMMODATION
   ============================================================ */
.accom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.accom-card{
  background:var(--ivory);border-radius:8px;padding:26px;box-shadow:var(--shadow-sm);
  border:1px solid var(--cream);transition:all .4s var(--ease);
  display:flex;flex-direction:column;justify-content:space-between;min-height:130px;
}
.accom-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.accom-card h3{font-family:var(--f-serif);font-style:italic;font-size:1.35rem;color:var(--gold-press);font-weight:500}
.accom-card a{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500;margin-top:14px;display:inline-block}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--taupe);text-align:center;padding:70px 24px 40px}
.footer__logo{height:110px;width:auto;margin:0 auto 18px;display:block}
.footer__mono{font-family:var(--f-display);font-size:2.4rem;color:var(--ivory);margin-bottom:8px}
.footer__mono .amp{font-style:italic;color:var(--gold)}
.footer__love{font-family:var(--f-script);font-size:1.8rem;color:var(--gold);margin-bottom:20px}
.footer__date{font-family:var(--f-serif);font-style:italic;color:var(--taupe);letter-spacing:.05em}
.footer__credit{margin-top:36px;font-size:.72rem;letter-spacing:.1em;color:var(--stone)}
.footer__credit a{color:var(--gold)}

/* ============================================================
   MUSIC CONTROL
   ============================================================ */
.music-btn{
  position:fixed;bottom:24px;right:24px;z-index:60;
  width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--ivory);
  border:none;cursor:pointer;box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease)
}
.music-btn:hover{background:var(--gold-hover);transform:scale(1.06)}
.music-btn .bars{display:flex;gap:2px;align-items:flex-end;height:18px}
.music-btn .bars i{width:2.5px;background:var(--ivory);border-radius:2px;animation:eq .9s ease-in-out infinite}
.music-btn .bars i:nth-child(1){height:7px;animation-delay:0s}
.music-btn .bars i:nth-child(2){height:14px;animation-delay:.2s}
.music-btn .bars i:nth-child(3){height:10px;animation-delay:.4s}
.music-btn .bars i:nth-child(4){height:16px;animation-delay:.1s}
.music-btn.paused .bars i{animation-play-state:paused;height:6px}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}

.music-prompt{
  position:fixed;bottom:88px;right:24px;z-index:60;
  background:var(--ivory);border-radius:8px;padding:14px 20px;box-shadow:var(--shadow-md);
  font-family:var(--f-serif);font-style:italic;font-size:1rem;color:var(--ink);
  display:none;align-items:center;gap:10px;max-width:240px;
  border:1px solid rgba(201,168,106,.4);animation:fadeUp .5s var(--ease)
}
.music-prompt.show{display:flex}
.music-prompt b{color:var(--gold-press);font-style:normal;font-weight:500}

/* ---------- Scroll reveal (only when JS enables it) ---------- */
.js-reveal .card,.js-reveal .info-card,.js-reveal .accom-card,
.js-reveal .story__img,.js-reveal .story__text,.js-reveal .venue-photo{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js-reveal .card.revealed,.js-reveal .info-card.revealed,.js-reveal .accom-card.revealed,
.js-reveal .story__img.revealed,.js-reveal .story__text.revealed,.js-reveal .venue-photo.revealed{
  opacity:1;transform:none;
}
@media (prefers-reduced-motion:reduce){
  .js-reveal .card,.js-reveal .info-card,.js-reveal .accom-card,
  .js-reveal .story__img,.js-reveal .story__text,.js-reveal .venue-photo{opacity:1;transform:none}
}

/* ============================================================
   ENHANCED HOVER & INTERACTION EFFECTS
   ============================================================ */
/* Detail cards: deeper lift + soft gold glow */
.card{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg), 0 0 0 1px rgba(201,168,106,.25)}
.card::before{transition:border-color .5s var(--ease)}
.card:hover::before{border-color:rgba(201,168,106,.7)}

/* Info cards: gold top accent grows on hover */
.info-card{position:relative;overflow:hidden}
.info-card::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--blush));transition:width .5s var(--ease);
}
.info-card:hover::after{width:100%}

/* Accommodation cards: gold sweep + name shift */
.accom-card{position:relative;overflow:hidden}
.accom-card::before{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,106,.08),transparent 60%);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.accom-card:hover::before{opacity:1}
.accom-card h3{transition:transform .4s var(--ease)}
.accom-card:hover h3{transform:translateX(4px)}

/* Primary button: gentle gold shine sweep on hover */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn--primary:hover::after{left:160%}

/* Animated underline on nav + content links */
.nav__links a{position:relative}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--gold);transition:width .35s var(--ease);
}
.nav__links a:hover::after{width:100%}

/* Eyebrow letters breathe slightly on section hover */
.section .head{transition:transform .5s var(--ease)}

/* Countdown numbers pulse subtly when they tick (added via JS class) */
.count__num{transition:transform .3s var(--ease), color .3s var(--ease)}
.count__num.tick{transform:scale(1.12)}

/* Community moment cards lift */
.community-card{transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.community-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.community-card img{transition:transform 1s var(--ease)}
.community-card:hover img{transform:scale(1.06)}

/* Map / outline buttons fill smoothly */
.btn--outline,.btn--ghost{position:relative;overflow:hidden;z-index:1}

/* ============================================================
   GRAND ENTRANCE — tap-to-play alpha video opens onto the site
   ============================================================ */
html.entrance-lock, html.entrance-lock body{overflow:hidden;height:100%}

.entrance{
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  background:var(--ink);cursor:pointer;
  transition:background .3s var(--ease);
}
/* once playing, the overlay is transparent so the alpha video reveals the site */
.entrance.playing{background:transparent;cursor:default}
.entrance.done{opacity:0;transition:opacity .6s var(--ease);pointer-events:none}

.entrance video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* packed mode: the raw stacked video is hidden; WebGL canvas shows the recombined alpha */
.entrance[data-mode="packed"] video{opacity:0;pointer-events:none;width:2px;height:2px;left:-10px;top:-10px}
.entrance__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.entrance.playing .entrance__poster{display:none}
.entrance canvas{
  position:absolute;inset:0;width:100%;height:100%;display:none;
}
.entrance[data-mode="packed"] canvas{display:block}

/* ---------- Tap-to-enter prompt ---------- */
.entrance__tap{
  position:absolute;left:50%;bottom:14vh;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;
  opacity:0;animation:tapin 1s var(--ease) .6s forwards;
}
@keyframes tapin{to{opacity:1}}
.entrance.playing .entrance__tap{display:none}
.entrance__ring{
  width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(251,244,228,.9);
  position:relative;box-shadow:0 2px 16px rgba(60,40,5,.4);
}
.entrance__ring::before{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid rgba(251,244,228,.9);
  animation:tappulse 2s var(--ease) infinite;
}
.entrance__ring::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(201,168,106,.9);
}
@keyframes tappulse{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.9);opacity:0}
}
.entrance__tapText{
  font-family:var(--f-script);font-size:clamp(1.5rem,4.5vw,2rem);color:#FBF4E4;
  text-shadow:0 2px 16px rgba(60,40,5,.6);
}

/* ---------- Skip ---------- */
.entrance__skip{
  position:absolute;bottom:26px;right:26px;z-index:9;
  background:rgba(46,42,38,.35);border:1px solid rgba(251,244,228,.55);color:#FBF4E4;
  font-family:var(--f-body);font-weight:500;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 20px;border-radius:30px;cursor:pointer;
  backdrop-filter:blur(4px);transition:all .3s var(--ease);
}
.entrance__skip:hover{background:var(--gold);border-color:var(--gold)}

@media (max-width:600px){
  .entrance__tap{bottom:16vh}
  .entrance__skip{bottom:18px;right:18px}
}

/* ============================================================
   RSVP SUCCESS MODAL (pop-up confirmation)
   ============================================================ */
.rsvp-modal{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(46,42,38,.62);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.rsvp-modal.open{opacity:1;visibility:visible}
.rsvp-modal__card{
  background:var(--ivory);border-radius:12px;box-shadow:0 40px 90px rgba(46,42,38,.45);
  max-width:460px;width:100%;padding:44px 40px 36px;text-align:center;position:relative;
  transform:translateY(16px) scale(.97);transition:transform .5s var(--ease);
}
.rsvp-modal.open .rsvp-modal__card{transform:translateY(0) scale(1)}
.rsvp-modal__card::before{content:"";position:absolute;inset:12px;border:1px solid rgba(201,168,106,.4);border-radius:8px;pointer-events:none}
.rsvp-modal__close{
  position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.8rem;
  color:var(--stone);cursor:pointer;line-height:1;padding:4px;transition:color .25s var(--ease);
}
.rsvp-modal__close:hover{color:var(--gold-press)}
.rsvp-modal__tick{
  width:78px;height:78px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  animation:tickpop .6s var(--ease);
}
@keyframes tickpop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.rsvp-modal__eyebrow{
  font-family:var(--f-body);font-weight:500;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.22em;color:var(--gold-press);margin-bottom:10px;
}
.rsvp-modal__card h3{font-family:var(--f-display);font-weight:400;font-size:2rem;color:var(--ink);margin-bottom:12px}
.rsvp-modal__msg{font-family:var(--f-serif);font-style:italic;font-size:1.2rem;color:var(--stone);line-height:1.5;margin-bottom:24px}
.rsvp-modal__cal{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.rsvp-modal__done{
  margin-top:4px;background:transparent;border-color:var(--taupe);color:var(--stone);
}
.rsvp-modal__done:hover{
  background:var(--gold);border-color:var(--gold);color:var(--ivory);transform:translateY(-1px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mosaic__tile:nth-child(1),.mosaic__tile:nth-child(8){grid-column:span 2;grid-row:span 2}
}
@media (max-width:768px){
  .section{padding:72px 0}
  /* give the opening line breathing room below the nav on smaller screens */
  .hero__inner{padding-top:clamp(76px,13vh,120px)}
  .nav__links{
    position:fixed;top:0;right:0;bottom:0;width:74%;max-width:320px;
    background:var(--ivory);flex-direction:column;justify-content:center;
    gap:28px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:var(--shadow-lg)
  }
  .nav__links.open{transform:translateX(0)}
  .nav__links a{color:var(--ink) !important;font-size:.9rem}
  .nav__toggle{display:block;z-index:60}
  .detail-grid,.story,.moments-wrap{grid-template-columns:1fr;gap:30px}
  .moments-img{min-height:0;max-height:340px}
  .moments-img img{transform:none}
  .info-grid{grid-template-columns:1fr}
  .accom-grid{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .hero__names{font-size:clamp(2.6rem,12vw,4rem)}
  .mosaic{grid-template-columns:repeat(3,1fr);gap:8px}
  .mosaic__tile:nth-child(1){grid-column:span 2;grid-row:span 2}
  .mosaic__tile:nth-child(8){grid-column:auto;grid-row:auto}
}
@media (max-width:480px){
  .accom-grid{grid-template-columns:1fr}
  .countdown{gap:12px}
  .count__box{min-width:68px}
  .card{padding:32px 24px}
  .mosaic{grid-template-columns:repeat(2,1fr);gap:8px}
  .mosaic__tile:nth-child(1),.mosaic__tile:nth-child(8){grid-column:auto;grid-row:auto}
}