/* ===========================================================
   Nadja & Julius — wedding site
   Black & white editorial. Shared across all pages.
   =========================================================== */

:root{
  --ink:#2c261d;          /* warm dark brown-black */
  --ink-soft:#5a5043;
  --muted:#8f8472;        /* captions / eyebrows */
  --paper:#fdfaf3;        /* warm off-white */
  --cream:#f1e9da;        /* warm sand */
  --cream-deep:#e6dac6;
  --line:rgba(44,38,29,.16);
  --line-soft:rgba(44,38,29,.10);

  --blue:#6C7FA3;         /* elegant accent */
  --blue-deep:#566688;
  --blue-tint:#e7ebf2;
  --clay:#c07f57;         /* boho terracotta */
  --clay-deep:#a4663f;
  --sage:#8c9a7c;         /* boho sage */
  --blush:#e7d3c4;

  /* warm, gently-desaturated photo treatment (boho, not stark B&W) */
  --img:saturate(.82) contrast(1.03) sepia(.06);
  --img-dark:saturate(.78) contrast(1.02) sepia(.06) brightness(.72);

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:"Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw:1180px;
  --pad:clamp(1.25rem, 5vw, 4rem);

  --eyebrow-fs:clamp(.66rem,.86vw,.78rem);
  --tracking:.34em;

  --dur:.5s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(1rem,1.05vw,1.075rem);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}

/* ---------- type helpers ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;margin:0;line-height:1.04;}
.serif{font-family:var(--font-display);}
.eyebrow{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--eyebrow-fs);
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.eyebrow.on-dark{color:rgba(255,255,255,.7);}
.script-amp{font-family:var(--font-display);font-style:italic;font-weight:400;}

/* small centered ornament */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto;}
.ornament::before,.ornament::after{content:"";height:1px;width:clamp(28px,6vw,64px);background:var(--line);}
.ornament i{display:block;width:6px;height:6px;background:var(--blue);transform:rotate(45deg);}
.ornament.on-dark::before,.ornament.on-dark::after{background:rgba(255,255,255,.4);}
.ornament.on-dark i{background:var(--blue);}
.script-amp{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--blue);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding-block:clamp(4.5rem,11vh,9rem);}
.section.cream{background:var(--cream);}
.section.ink{background:var(--ink);color:#fff;}
.center{text-align:center;}
.measure{max-width:60ch;margin-inline:auto;}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1.05rem var(--pad);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(8px);
  color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-head a{color:inherit;text-decoration:none;}
.monogram{
  font-family:var(--font-display);font-weight:500;
  font-size:1.35rem;letter-spacing:.04em;white-space:nowrap;
}
.monogram .amp{font-style:italic;font-weight:400;padding:0 .15em;}
.nav{
  display:flex;gap:clamp(1rem,2.4vw,2.4rem);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
}
.nav a{position:relative;padding:.2rem 0;opacity:.82;transition:opacity .25s;}
.nav a:hover{opacity:1;}
.nav a.active{opacity:1;}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--blue);}

.lang{display:flex;align-items:center;gap:.1rem;font-size:.72rem;letter-spacing:.14em;font-weight:400;}
.lang button{
  background:none;border:none;color:inherit;cursor:pointer;
  font:inherit;letter-spacing:inherit;padding:.25rem .45rem;opacity:.5;
  text-transform:uppercase;transition:opacity .2s;
}
.lang button:hover{opacity:.85;}
.lang button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.lang span{opacity:.3;}

/* transparent header over the dark home hero */
body.home .site-head{
  background:transparent;backdrop-filter:none;color:#fff;border-color:transparent;
}
body.home.scrolled .site-head{
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.1) blur(8px);
  color:var(--ink);border-color:var(--line-soft);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-sans);font-weight:400;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  padding:1.05em 2.6em;border:1px solid var(--blue);color:var(--blue-deep);
  background:transparent;cursor:pointer;text-decoration:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform .25s var(--ease);
}
.btn:hover{background:var(--blue);color:#fff;}
.btn:active{transform:scale(.99);}
.btn.on-dark{border-color:rgba(255,255,255,.85);color:#fff;}
.btn.on-dark:hover{background:#fff;color:var(--blue-deep);}
.btn.solid{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn.solid:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}

/* ---------- image treatment (warm, soft color) ---------- */
image-slot{
  background:var(--cream-deep);
  --is-placeholder-color:var(--muted);
  filter:var(--img);
}
.hero image-slot{filter:var(--img-dark);}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 1; transform: none; }
.reveal.in{opacity:1;transform:none;}

/* ---------- footer (blue banner) ---------- */
.site-foot{
  background:var(--blue);color:#fff;text-align:center;
  padding-block:clamp(3.5rem,8vh,6rem);
}
.site-foot .fmono{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.4rem);font-weight:500;line-height:1;}
.site-foot .fmono .amp{font-style:italic;font-weight:400;padding:0 .12em;color:#fff;}
.site-foot .fmeta{margin-top:1.4rem;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78);}
.site-foot .ftag{margin-top:2rem;font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);color:#fff;}

/* ===========================================================
   HERO (home)
   =========================================================== */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;
  background:#262019;
}
.hero image-slot{position:absolute;inset:0;width:100%;height:100%;}
.hero-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:var(--img) brightness(.96);}

/* hero waves — foam washing in & out along the surf line (no perspective change) */
.hero-waves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero-waves::before,.hero-waves::after{
  content:"";position:absolute;left:8%;right:-25%;top:-25%;bottom:-25%;
  mix-blend-mode:screen;will-change:transform,opacity;opacity:0;
}
.hero-waves::before{
  background:linear-gradient(108deg,transparent 42%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 56%,transparent 63%);
  filter:blur(9px);
  animation:wash-a 8.5s var(--ease) infinite;
}
.hero-waves::after{
  background:linear-gradient(108deg,transparent 46%,rgba(255,255,255,.22) 52%,transparent 60%);
  filter:blur(14px);
  animation:wash-b 11s var(--ease) infinite;
  animation-delay:2.4s;
}
@keyframes wash-a{
  0%{transform:translate(10%,-3%);opacity:0;}
  30%{opacity:.6;}
  62%{transform:translate(-7%,2%);opacity:.32;}
  100%{transform:translate(-12%,4%);opacity:0;}
}
@keyframes wash-b{
  0%{transform:translate(13%,-2%);opacity:0;}
  38%{opacity:.42;}
  70%{transform:translate(-6%,2%);opacity:.22;}
  100%{transform:translate(-11%,3%);opacity:0;}
}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,8,6,.55) 0%,rgba(10,8,6,.18) 30%,rgba(10,8,6,.28) 62%,rgba(10,8,6,.6) 100%);
  z-index:2;pointer-events:none;}
.hero-inner{position:relative;z-index:3;padding:6rem 1.25rem 0;}
.hero-names{
  font-weight:500;letter-spacing:.005em;
  font-size:clamp(3.4rem,13vw,9.5rem);line-height:.95;margin:.5rem 0 0;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-names .script-amp{font-weight:400;padding:0 .12em;}
.hero-meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;
  margin-top:2rem;font-size:clamp(.74rem,1.1vw,.86rem);
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.92);
}
.hero-meta i{width:5px;height:5px;background:#fff;transform:rotate(45deg);opacity:.8;}
.hero-scroll{
  position:absolute;bottom:1.9rem;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.85);text-decoration:none;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero-scroll::after{content:"";width:1px;height:34px;background:rgba(255,255,255,.6);animation:scrollpulse 2.2s var(--ease) infinite;}
@keyframes scrollpulse{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top;}50%{transform:scaleY(1);opacity:1;transform-origin:top;}}

/* hero video layer (drops in if hero-video.mp4 exists) */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;pointer-events:none;opacity:0;
  filter:var(--img-dark);
  transition:opacity 1.2s var(--ease);
}
.hero-video.ready{opacity:1;}

/* ===========================================================
   FULL-BLEED block (home: details + where to stay)
   =========================================================== */
.fullbleed{
  position:relative;min-height:clamp(560px,90vh,860px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;background:#262019;
}
.fullbleed > image-slot{position:absolute;inset:0;width:100%;height:100%;filter:var(--img-dark);}
.fb-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-dark);}
.fb-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.5),rgba(8,6,4,.3) 45%,rgba(8,6,4,.62));}
.fb-inner{position:relative;z-index:3;padding:5rem var(--pad);max-width:880px;}
.facts-row{display:flex;justify-content:center;gap:clamp(2.5rem,8vw,6rem);margin:1.8rem 0 0;flex-wrap:wrap;}
.facts-row .fact{margin:0;}
.facts-row dt{color:rgba(255,255,255,.66);}
.facts-row .fact-val{color:#fff;}
.facts-row .fact-note{color:rgba(255,255,255,.78);}
.stay-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem;}
.stay-link{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.55);padding:.95em 1.7em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.stay-link:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* stay list (named recommendations) */
.stay-list{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:680px;margin:1.5rem auto 0;text-align:left;}
.stay-item{
  display:flex;flex-direction:column;gap:.25rem;text-decoration:none;
  border:1px solid rgba(255,255,255,.4);padding:1.05em 1.3em;
  background:rgba(255,255,255,.06);backdrop-filter:blur(2px);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .25s var(--ease);
}
.stay-item:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px);}
.stay-title{font-family:var(--font-display);font-size:1.16rem;font-weight:500;color:#fff;line-height:1.2;}
.stay-note{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);}

/* ===========================================================
   EVEN GALLERY (home) — three equal portraits
   =========================================================== */
.gallery-even{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.5rem);align-items:stretch;}
.gallery-even image-slot{width:100%;aspect-ratio:4/5;height:auto;}
.gframe{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);}
.gframe img{width:100%;height:100%;object-fit:cover;filter:var(--img);transition:transform .9s var(--ease);}
.gframe:hover img{transform:scale(1.04);}

/* COUNTDOWN (home) */
.cd-grid{display:flex;justify-content:center;gap:clamp(1.4rem,6vw,4.5rem);margin-top:clamp(2rem,5vh,3rem);flex-wrap:wrap;}
.cd-unit{min-width:62px;}
.cd-num{font-family:var(--font-display);font-weight:500;font-size:clamp(2.8rem,9vw,5.6rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--clay-deep);}
.cd-label{margin-top:.7rem;font-size:var(--eyebrow-fs);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--muted);}
.cd-over{font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,5vw,3rem);margin:1.5rem 0 0;}

.block-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:500;}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.85;color:var(--ink-soft);}

/* ===========================================================
   DETAILS grid (home)
   =========================================================== */
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.details-photo image-slot{width:100%;aspect-ratio:4/5;height:auto;}
.details-text .facts{margin:1.8rem 0 2.2rem;display:flex;flex-direction:column;gap:1.8rem;}
.facts dt{font-size:var(--eyebrow-fs);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.facts .fact-val{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;line-height:1.1;margin:0;}
.facts .fact-note{margin:.35rem 0 0;color:var(--ink-soft);font-size:.95rem;}
.facts dd{margin-left:0;}

/* ===========================================================
   GALLERY (home)
   =========================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);align-items:start;}
.gallery .gg{width:100%;aspect-ratio:3/4;}
.gallery .gg-tall{aspect-ratio:3/4.4;margin-top:0;}
.gallery .gg:nth-child(2){margin-top:clamp(1.5rem,5vw,3.5rem);}

/* ===========================================================
   PAGE HERO (day / rsvp) — light editorial banner
   =========================================================== */
.page-hero{
  padding-top:clamp(8rem,16vh,11rem);
  padding-bottom:clamp(3.5rem,8vh,6rem);
  text-align:center;background:var(--cream);
}
.page-hero .page-title{font-size:clamp(3rem,9vw,6rem);font-weight:500;line-height:.98;margin:.6rem 0 0;}
.page-hero .page-sub{margin:1.6rem auto 0;max-width:46ch;}

/* ===========================================================
   TIMELINE (day)
   =========================================================== */
.timeline{max-width:760px;margin:0 auto;position:relative;}
.timeline::before{content:"";position:absolute;left:clamp(86px,16vw,150px);top:.4rem;bottom:.4rem;width:1px;background:var(--line);}
.t-item{display:grid;grid-template-columns:clamp(72px,15vw,134px) 1fr;gap:clamp(1.4rem,4vw,3rem);padding:clamp(1.3rem,3vh,2.1rem) 0;position:relative;}
.t-item::before{content:"";position:absolute;left:clamp(82px,16vw,146px);top:calc(clamp(1.3rem,3vh,2.1rem) + .55rem);width:9px;height:9px;background:var(--paper);border:1px solid var(--blue);transform:rotate(45deg);}
.section.cream .t-item::before{background:var(--cream);}
.t-time{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;line-height:1.15;text-align:right;white-space:nowrap;color:var(--blue-deep);}
.t-body h3{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:500;margin:0 0 .35rem;}
.t-body p{margin:0;color:var(--ink-soft);font-size:1rem;}

/* ===========================================================
   VENUE (day)
   =========================================================== */
.venue-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.venue-grid image-slot{width:100%;aspect-ratio:5/4;height:auto;}
.venue-name{font-size:clamp(2rem,4vw,3rem);font-weight:500;margin:.4rem 0 .3rem;}
.venue-addr{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem;}

/* ===========================================================
   RSVP FORM
   =========================================================== */
.rsvp-wrap{max-width:560px;margin:0 auto;}
.field{margin-bottom:2.2rem;}
.field > label{display:block;font-size:var(--eyebrow-fs);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;}
.field input[type="text"],.field textarea{
  width:100%;font-family:var(--font-sans);font-weight:300;font-size:1.05rem;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:.7rem 0;line-height:1.6;transition:border-color .25s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);}
.field textarea{min-height:3.2em;}
.field input::placeholder,.field textarea::placeholder{color:#b7afa3;}
.attend-opts{display:flex;gap:.8rem;flex-wrap:wrap;}
.attend-opts label{
  flex:1;min-width:140px;cursor:pointer;text-align:center;
  border:1px solid var(--line);padding:1.05em 1rem;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.attend-opts input{position:absolute;opacity:0;pointer-events:none;}
.attend-opts input:checked + label{background:var(--blue);color:#fff;border-color:var(--blue);}
.attend-opts label:hover{border-color:var(--blue);}
.form-foot{margin-top:.4rem;}
.form-note{margin-top:1.4rem;font-size:.85rem;color:var(--muted);}

/* ===========================================================
   INVITATION — static envelope + letter over photo (home)
   =========================================================== */
.invite-section{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4.5rem,11vh,8rem) var(--pad);background:#2a241d;
}
.invite-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:var(--img-dark);z-index:0;}
.invite-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,19,14,.5),rgba(24,19,14,.32) 45%,rgba(24,19,14,.62));}

.invite-stage{
  position:relative;z-index:2;width:min(880px,100%);
  display:flex;align-items:center;justify-content:center;
}

/* envelope (static, closed) */
.invite-envelope{
  position:relative;width:min(380px,42vw);aspect-ratio:1.5/1;flex:none;
  margin-right:-8%;align-self:center;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.4));
}
.ie-back{position:absolute;inset:0;border-radius:5px;z-index:1;
  background:linear-gradient(158deg,#8090b0,#6C7FA3);}
.ie-front{position:absolute;inset:0;border-radius:5px;z-index:3;
  background:linear-gradient(158deg,#6f82a6,#5f7298);
  clip-path:polygon(0 27%,50% 63%,100% 27%,100% 100%,0 100%);}
.ie-flap{position:absolute;top:0;left:0;width:100%;height:63%;z-index:4;
  background:linear-gradient(158deg,#788aae,#647a9f);
  clip-path:polygon(0 0,100% 0,50% 100%);
  display:flex;justify-content:center;}
.ie-mono{color:#fff;font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:.04em;padding-top:.7rem;opacity:.94;}
.ie-mono .amp{font-style:italic;padding:0 .12em;color:#fff;}

/* letter card */
.invite-card{
  position:relative;z-index:5;width:min(380px,62vw);
  background:var(--paper);border-radius:3px;text-align:center;
  padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,3.2vw,2.4rem);
  box-shadow:0 34px 70px rgba(0,0,0,.4);
}
.shell{display:block;width:40px;height:34px;margin:0 auto 1.1rem;color:var(--clay);}
.letter-title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(2rem,4vw,2.9rem);line-height:1.04;color:var(--ink);}
.letter-deadline{margin:1.1rem 0 0;font-size:.98rem;line-height:1.6;color:var(--ink-soft);}
.letter-hint{margin:.4rem 0 0;font-size:.8rem;letter-spacing:.04em;color:var(--muted);}

@media (max-width:680px){
  .invite-stage{flex-direction:column;}
  .invite-envelope{width:min(300px,72vw);margin:0 0 -14% 0;z-index:1;}
  .invite-card{width:min(420px,88vw);z-index:5;}
}

/* ===========================================================
   RSVP PHOTO HERO (rsvp page)
   =========================================================== */
.rsvp-photo-hero{
  position:relative;overflow:hidden;text-align:center;
  min-height:clamp(420px,62vh,640px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(8rem,16vh,11rem) var(--pad) clamp(3.5rem,8vh,6rem);
  background:#2a241d;
}
.rsvp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:var(--img-dark);z-index:0;}
.rsvp-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,19,14,.5),rgba(24,19,14,.3) 45%,rgba(24,19,14,.6));}
.rsvp-hero-inner{position:relative;z-index:2;}
.rsvp-hero-inner .page-sub{margin:1.4rem auto 0;max-width:46ch;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:780px){
  .details-grid{grid-template-columns:1fr;gap:2.2rem;}
  .details-photo{order:-1;}
  .venue-grid{grid-template-columns:1fr;gap:2.2rem;}
  .venue-grid image-slot{order:-1;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery .gg-tall{grid-column:1 / -1;aspect-ratio:16/10;}
  .gallery-even{grid-template-columns:1fr;gap:1.1rem;max-width:460px;margin-inline:auto;}
  .gallery-even image-slot{aspect-ratio:4/5;height:auto;}
  .facts-row{gap:2.2rem;}
  .stay-list{grid-template-columns:1fr;max-width:420px;}
  .site-head{padding-inline:clamp(1rem,5vw,2rem);}
  .nav{gap:1rem;font-size:.66rem;letter-spacing:.16em;}
}
@media (max-width:520px){
  .monogram{display:none;}
  .site-head{justify-content:space-between;}
}
@media (max-width:430px){
  .hero-meta{flex-direction:column;gap:.6rem;}
  .hero-meta i{display:none;}
  .attend-opts{flex-direction:column;}
  .lang button{padding:.25rem .3rem;}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-scroll::after{animation:none;}
  .hero-waves::before,.hero-waves::after{animation:none;opacity:0;}
  html{scroll-behavior:auto;}
}


/* ===========================================================
   MOBILE OPTIMISATIONS  (max-width: 600px)
   =========================================================== */
@media (max-width: 600px) {

  /* Nav: hide text labels, keep icons readable */
  .site-head { padding-inline: 1rem 1rem; gap: .5rem; }
  .nav { gap: .9rem; font-size: .6rem; letter-spacing: .12em; }
  .lang { gap: 0; font-size: .65rem; }
  .lang button { padding: .25rem .28rem; }

  /* Hero */
  .hero-names { font-size: clamp(3.2rem, 17vw, 5.5rem) !important; letter-spacing: -.01em !important; }
  .hero-meta { flex-direction: column; gap: .4rem; font-size: .68rem; }
  .hero-meta i { display: none; }
  .hero-scroll { display: none; }

  /* Sections: more breathing room */
  .section { padding-block: clamp(3rem, 8vh, 5rem); }

  /* Welcome */
  .block-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .lede { font-size: 1rem !important; }

  /* Countdown */
  .cd-grid { gap: clamp(1rem, 4vw, 2rem); }
  .cd-num { font-size: clamp(2.4rem, 11vw, 3.5rem) !important; }
  .cd-label { font-size: .55rem; letter-spacing: .15em; }

  /* Fullbleed details */
  .fb-inner { padding: 3rem 1.25rem; }
  .facts-row { flex-direction: column; gap: 1.6rem; align-items: flex-start; }
  .stay-list { grid-template-columns: 1fr; max-width: 100%; }
  .stay-item { padding: .9rem 1rem; }

  /* Gallery */
  .gallery-even { grid-template-columns: 1fr; gap: .7rem; max-width: 100%; }

  /* Timeline */
  .timeline::before { left: 54px; }
  .tl-time,
  .timeline .tl-time { width: 54px !important; font-size: .68rem !important; }
  .tl-body { padding-left: 1rem; }
  .tl-name { font-size: 1.1rem !important; }
  .tl-note { font-size: .85rem; }

  /* Dress code: stack vertically */
  .dress-grid,
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Invite / RSVP envelope section */
  .invite-section { min-height: auto; padding-block: 3rem; }
  .invite-stage { flex-direction: column; gap: 0; align-items: center; }
  .invite-envelope { width: min(260px, 70vw); margin-bottom: -10%; z-index: 1; }
  .invite-card { width: min(340px, 90vw); z-index: 5; padding: 2.5rem 1.5rem; }

  /* RSVP form */
  .btn { padding: 1em 1.8em; font-size: .7rem; }

  /* Footer */
  .site-foot { padding: 2.5rem 1.25rem; }
  .fmono { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-names { font-size: 2.8rem !important; }
  .nav { font-size: .55rem; gap: .6rem; letter-spacing: .08em; }
  .monogram { font-size: 1.1rem; }
}