:root{
  /* Light / editorial theme (template-like) */
  /* Canvas background (outside the framed site) */
  --canvas:#ffffff;

  /* Paper background (inside the framed site) */
  --bg1:#ffffff;
  --bg2:#ffffff;
  --panel:rgba(255,255,255,.88);
  --text:#101010;
  --muted:rgba(16,16,16,.62);
  --line:rgba(16,16,16,.14);
  --line2:rgba(16,16,16,.22);
  --shadow:0 22px 60px rgba(0,0,0,.12);
  --radius:24px;

  /* Body */
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Editorial serif (display) */
  --serif:"Bodoni Moda", serif;

  /* Spacing scale (for consistent / equal distances everywhere) */
  --space-xs:8px;
  --space-s:12px;
  --space-m:18px;
  --space-l:28px;
  --space-xl:44px;
  --section-pad:90px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Pure white, full-bleed background */
  background:#ffffff;
  color:var(--text);
  font-family:var(--sans);
  letter-spacing:.01em;
  line-height:1.7;
}

/* Normalize text block spacing so wording gaps are consistent */
h1,h2,h3,p{margin:0}
/* Use controlled spacing via containers/classes */

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:min(1320px, calc(100% - 72px)); margin-inline:auto}

/* Framed website (like the reference screenshot) */
.pageFrame{
  /* Full width website (no small framed card) */
  width:100%;
  margin:0;
  background:#ffffff;
  border:none;
  box-shadow:none;
}

.topStrip{
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
}

/* Framed site (paper card on canvas) */
.sr-only{position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.kicker{
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}

.h2{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 var(--space-m);
  text-align:center;
}

.lead{font-size:16px; line-height:1.8; color:var(--muted); margin:0}
.muted{color:var(--muted)}

.divider{height:1px; background:var(--line); margin:18px 0}

/* Gate */
.gate{
  position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(900px 520px at 50% 15%, rgba(0,0,0,.08), transparent 55%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  z-index:50;
  padding:24px;
}
.gate__card{
  width:min(520px, 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow:var(--shadow);
}
.gate__title{
  font-family:var(--serif);
  font-style:italic;
  font-size:58px;
  font-weight:500;
  letter-spacing:-.02em;
  margin:8px 0 6px;
}
.gate__hint{margin:0; color:var(--muted); line-height:1.6}
.gate__form{display:grid; gap:10px; margin-top:16px}
.gate__form input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--text);
  outline:none;
}

/* Lock the site behind the invite gate */
.main[data-locked="true"]{
  pointer-events:none;
  user-select:none;
  filter:blur(10px);
  opacity:.22;
}
.gate__form input::placeholder{color:rgba(16,16,16,.35)}
.gate__msg{margin-top:10px; font-size:13px; color:var(--muted); min-height:18px}
.gate__footer{
  display:flex; gap:10px; justify-content:center; align-items:center;
  margin-top:14px; font-size:12px; color:var(--muted)
}
.link{background:none; border:none; color:var(--text); opacity:.75; cursor:pointer; padding:0}
.link:hover{opacity:1}
.dot{opacity:.5}

/* Header */
.site-header{
  width:100%;
  margin:0;
  position:sticky;
  top:0;
  z-index:20;
background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

/* Template header: keep the brand perfectly centered regardless of left/right widths */
.header__inner--template{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:18px;
}
.nav--left{justify-self:start}
.header__right{justify-self:end}
.brand--center{justify-self:center}
.brand{display:flex; gap:10px; align-items:baseline}
.brand__serif{font-family:var(--serif); font-style:italic; font-size:20px; font-weight:500}
.brand__amp{font-size:10px; opacity:.75; letter-spacing:.2em}

.nav{display:flex; gap:18px}
.nav a{font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.75}
.nav a:hover{opacity:1}

/* Right-side template buttons (FAQ/RSVP) */
.nav--right a{
  opacity:1;
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.65);
}
.nav--right a:hover{background:#fff}

.header__right{display:flex; gap:10px; align-items:center}
.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
  opacity:.85;
}
.chip:hover{opacity:1}
.chip--ghost{background:transparent}

/* Paper body (centered like the screenshot) */
.main{
  width:100%;
  margin:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  padding-bottom:52px;
}

/* Legacy hero (kept for safety) */
.hero{
  padding:34px 0 26px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:80px; max-width:980px; margin:0 auto;
  align-items:stretch;
}
.hero__title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:76px;
  line-height:1;
  letter-spacing:-.015em;
  margin:10px 0 12px;
}
.hero__amp{display:inline-block; margin:0 8px; opacity:.9}
.hero__greeting{color:var(--muted); margin:0 0 10px; min-height:22px}

.hero__meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.meta{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 12px;
  background:var(--panel);
  box-shadow:var(--shadow);
transition:transform .25s ease, border-color .25s ease;
}
.meta:hover{transform:translateY(-2px); border-color:var(--line2)}
.meta__label{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.meta__value{margin-top:8px; font-family:var(--serif); font-style:italic; font-size:20px; letter-spacing:-.01em}
.meta__sub{margin-top:4px; font-size:12px; color:var(--muted)}

.hero__cta{display:flex; gap:10px; margin-top:18px}

.btn{
  border-radius:999px;
  padding:11px 16px;
  border:1px solid var(--text);
  background:var(--text);
  color:#ffffff;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
}
.btn:hover{filter:brightness(.96)}
.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{border-color:rgba(16,16,16,.32)}

.countdown__label{font-size:12px; color:var(--muted); margin-bottom:10px}
.countdown__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.cd{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 12px 10px;
  background:var(--panel);
  text-align:center;
  box-shadow:var(--shadow);
}
.cd__num{font-family:var(--serif); font-style:italic; font-size:34px; line-height:1}
.cd__lab{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:6px}

.hero__media{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:14px;
}

/* Single-photo hero (template-like editorial) */
.hero__media--single{
  grid-template-rows:1fr;
}
.photo--single{
  min-height:520px;
}
.photo{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(1);
  transform:scale(1.02);
}

/* ---------- Template-like layout blocks (matches your reference) ---------- */

.heroBg{
  /* Single hero photo as background from date till details */
  background-image:linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.96)), url('photo-1.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.heroT{padding:64px 0 32px; text-align:center}
.heroT__wrap{width:min(980px, calc(100% - 72px)); margin:0 auto}

.heroT__title{
  font-family:var(--serif);
  font-weight:600;
  font-style:italic;
  font-size:66px;
  letter-spacing:-.03em;
  line-height:1.05;
  margin:0 0 12px;
}
.heroT__date{
  font-family:var(--serif);
  font-style:normal;
  font-weight:600;
  letter-spacing:-.045em;
  margin:18px 0 18px;
  font-size:74px;
  line-height:1;
}
.date__dot{opacity:.55; margin:0 8px}

.heroT__photos{display:none}
.frame{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  box-shadow:none;
  overflow:hidden;
}
.frame--side{width:112px; height:152px; border-radius:14px}
.frame--main{width:280px; height:220px; border-radius:18px}
.frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.frame--side img{object-position:50% 30%}
.frame--main img{object-position:50% 40%}

.heroT__tagline{margin:0 auto 10px; max-width:620px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(16,16,16,.7); line-height:1.7}
.heroT__greeting{margin:0 auto 12px; color:var(--muted); min-height:18px}
.heroT__cta{display:flex; justify-content:center; gap:10px}

/* Schedule banner */
.banner{
  position:relative;
  min-height:110vh; /* BIG square feel to show faces clearly */
  display:flex;
  align-items:center;
  padding:140px 0;
  text-align:center;
  overflow:hidden;
  background:#000;
}
.banner .banner__inner{width:100%;}
.banner__bg{
  position:absolute;
  inset:-2px; /* avoid any tiny strip edges */
  background-image:url('photo-1.jpg');
  background-size:cover;
  background-position:50% 30%; /* focus on faces */
  background-repeat:no-repeat;
  /* Clear B&W faces — keep it crisp */
  filter:grayscale(1) brightness(.96) contrast(1.18);
  transform:scale(1.34);
}


.banner::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.18)}
.banner__inner{position:relative; z-index:1; color:#fff}
.banner__kicker{font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.85}
.banner__title{
  margin:12px 0 34px;
  font-family:var(--serif);
  font-style:normal;
  font-weight:600;
  font-size:56px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.banner__times{
  display:grid;
  grid-template-columns:repeat(4, minmax(120px, 1fr));
  gap:44px;
  justify-content:center;
  max-width:780px;
  margin:0 auto;
}

/* Schedule tiles glass (so text stays readable without fading photo) */
.banner__times .time{
  padding:18px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(0,0,0,.48);
  }
.time__t{font-size:16px; letter-spacing:.22em; text-transform:uppercase; opacity:.94}
.time__l{margin-top:10px; font-size:15px; letter-spacing:.18em; text-transform:uppercase; opacity:.92}

/* Location template */
.locationT{text-align:center}
.locationT__title{margin-bottom:18px}
.locationT__grid{
  /* Keep the original two-location alignment (middle + right)
     and let the church sketch “float” further left without
     pushing the columns to the right. */
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  max-width:980px;
  margin:0 auto;
  align-items:center;
  justify-items:center;
  overflow:visible;
}
.loc__name{margin:0; font-size:11px; letter-spacing:.28em; text-transform:uppercase}
.loc__sub{margin:10px 0 0}
.locationT__photo{
  margin:0;
  /* Church sketch: no frame + no crop */
  border:none;
  border-radius:0;
  overflow:visible;
  height:auto;
  box-shadow:none;
}
.locationT__photo--left{
  position:absolute;
  left:-260px;
  top:50%;
  transform:translateY(-50%);
  width:210px;
  max-width:210px;
}
.locationT__photo img{
  width:100%;
  height:auto;
  max-height:320px;
  display:block;
  object-fit:contain;
  filter:grayscale(1) contrast(1.05);
}
.locationT__cta{margin-top:22px}

/* Countdown banner */
.countBanner{position:relative; min-height:92vh; display:flex; align-items:center; padding:120px 0; text-align:center; overflow:hidden; background:#000}
.countBanner .countBanner__inner{width:100%;}
.countBanner__bg{
  position:absolute;
  inset:-2px;
  background-image:url('photo-1.jpg');
  background-size:cover;
  background-position:50% 35%;
  background-repeat:no-repeat;
  /* Clear B&W faces — keep it crisp */
  filter:grayscale(1) brightness(.96) contrast(1.18);
  transform:scale(1.28);
}



.countBanner::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.18)}
.countBanner__inner{position:relative; z-index:1; color:#fff}
.countBanner__grid{display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin-top:22px}
/* Countdown blocks glass */
.countBanner__grid .cb{
  min-width:140px;
  padding:18px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  background:rgba(0,0,0,.48);
  }

.cb__num{font-family:var(--serif); font-style:italic; font-weight:600; font-size:72px; line-height:1}
.cb__lab{margin-top:12px; font-size:13px; letter-spacing:.24em; text-transform:uppercase; opacity:.9}

/* Registry / Dress code cards */
.twoCards{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
/* Make both cards the exact same height in this row */
.twoCards > .card{height:100%}
.card--simple{
  padding:26px;
  display:flex;
  flex-direction:column;
}

/* Photo upload */
.upload{margin-top:16px}
.upload__input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.85);
}
.upload__share{margin-top:12px; width:100%}
.photoPreview{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.thumb{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  height:76px;
}
.thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}


/* Details (centered title + stacked church/reception) */
.detailsCenter{text-align:center}
.detailsCenter__wrap{max-width:780px}
.detailsCenter__lead{max-width:560px; margin:0 auto}
.detailsCenter__note{margin:var(--space-xl) 0 var(--space-xl); font-size:11px; letter-spacing:.22em; text-transform:uppercase}
.detailsStack{display:grid; gap:var(--space-xl); max-width:640px; margin:0 auto}

.bibleInline{padding:0}
.bibleInline__text{margin:0; font-family:var(--serif); font-style:italic; font-weight:700; color:#000; line-height:1.6}
.bibleInline__ref{margin-left:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(0,0,0,.65)}

/* Bible separators between sections (sit exactly in the middle of section gaps) */
.bibleSep{padding:calc(var(--section-pad) / 2) 0; text-align:center}
.bibleSep__text{margin:0; font-family:var(--serif); font-style:italic; font-weight:700; color:#000; letter-spacing:.01em; line-height:1.6}
.bibleSep__ref{margin-left:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(0,0,0,.62)}


/* Sections (equal distance between every section) */
.section{padding:var(--section-pad) 0; border-top:none}
.section--template{padding:var(--section-pad) 0}
.section--tight{padding:var(--section-pad) 0}

/* Bring the Details heading closer to the hero greeting (without breaking overall rhythm) */
#details.section{padding-top:60px;}
.section__grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:26px; align-items:start}
.section__head{display:flex; flex-direction:column; gap:var(--space-m); margin-bottom:var(--space-xl); text-align:center}

/* Wishes section: keep everything centered and beautifully stacked */
.wishesCenter{max-width:920px; margin:0 auto}
.form--center{max-width:680px; margin:0 auto}
.btnrow--center{justify-content:center}

/* Wishes layout: heading centered + box below */
#wishes .section__grid{
  grid-template-columns:1fr;
  gap:18px;
  text-align:center;
  align-items:center;
}
#wishes .section__left{max-width:720px; margin:0 auto;}
#wishes .section__right{max-width:720px; margin:0 auto;}
#wishes .btnrow{justify-content:center;}

.cards{display:grid; gap:16px}
.cards--two{grid-template-columns:repeat(2, 1fr)}
.card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 24px 22px;
  background:rgba(255,255,255,.62);
  box-shadow:none;
transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{transform:translateY(-1px); border-color:var(--line2); background:rgba(255,255,255,.72)}
.card--wide{grid-column:1/-1}
.card__title{margin:0 0 var(--space-s); font-family:var(--serif); font-style:italic; font-weight:500; font-size:26px}
.card__text{margin:0; color:var(--muted); line-height:1.8}

.mini{display:inline-block; margin-top:10px; font-size:12px; opacity:.75}
.mini:hover{opacity:1}

/* Timeline */
.timeline{display:grid; gap:10px}
.t{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:var(--panel);
  box-shadow:var(--shadow);
transition:transform .25s ease, border-color .25s ease;
}
.t:hover{transform:translateY(-2px); border-color:var(--line2)}
.t__time{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.t__title{font-family:var(--serif); font-style:italic; font-size:26px; margin-bottom:4px}
.t__desc{color:var(--muted); line-height:1.7}

/* Quote block */
.quote{
  margin:14px 0 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.quote__text{
  font-family:var(--serif);
  font-style:italic;
  letter-spacing:.02em;
  line-height:1.6;
  color:var(--text);
}
.quote__ref{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* FAQ */
.faq{display:grid; gap:10px}
.faq details{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  background:var(--panel);
  box-shadow:var(--shadow);
transition:transform .25s ease, border-color .25s ease;
}
.faq details:hover{transform:translateY(-2px); border-color:var(--line2)}
.faq summary{cursor:pointer; list-style:none; font-size:13px; letter-spacing:.08em}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0; color:var(--muted); line-height:1.7}

/* Form */
.form{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
input, select, textarea{
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:var(--text);
  padding:12px;
  outline:none;
}
textarea{resize:vertical}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.form__small{margin:10px 0 0; font-size:12px}
.form__msg{margin-top:10px; font-size:13px; color:var(--muted); min-height:18px}

/* Footer */
.footer{border-top:1px solid var(--line); padding:26px 0 10px}
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

/* Responsive */
@media (max-width: 920px){
  .banner__title{font-size:44px;}
  .cb__num{font-size:46px;}
  .banner__times{gap:28px;}
  .hero__grid{grid-template-columns:1fr;}
  .hero__title{font-size:58px}
  .hero__media{grid-template-rows:auto; grid-template-columns:1fr 1fr}
  .hero__media--single{grid-template-columns:1fr;}
  .photo--single{min-height:460px;}
  .section__grid{grid-template-columns:1fr;}
  .cards--two{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;}
  .locationT__grid{grid-template-columns:1fr; gap:22px;}
  /* On smaller screens, put the sketch back into the flow */
  .locationT__photo--left{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    max-width:420px;
    margin:0 auto;
  }
  .locationT__photo{max-width:420px; margin:0 auto; height:auto;}
  .nav{display:none}
}
@media (max-width: 520px){

  /* Schedule + Countdown photo fill on small screens */
  .banner{
    min-height: 100vh !important;
    padding: 120px 0 !important;
  }
  .countBanner{
    min-height: 86vh !important;
    padding: 105px 0 !important;
  }
  .banner__title{font-size:34px;}
  .time__t{font-size:13px;}
  .time__l{font-size:12px;}
  .cb__num{font-size:40px;}
  .hero__title{font-size:48px}
  .countdown__grid{grid-template-columns:repeat(2,1fr)}
}
/* ===========================
   ✅ MOBILE FIX PACK (NO DESKTOP IMPACT)
   Prevents overflow / out-of-screen sections on phones
=========================== */

/* Hard stop any accidental horizontal scroll */
html, body { overflow-x: hidden; }

/* Make all media responsive */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Phones + small tablets */
@media (max-width: 980px) {

  /* Give containers comfortable mobile padding */
  .container{
    width: min(1320px, calc(100% - 32px)) !important;
  }

  /* Header becomes stacked + centered (no overflow) */
  .site-header--template .header__inner--template{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  /* Hide left nav links on mobile (cleaner + prevents wrap overflow) */
  .nav--left{ display: none !important; }

  /* Keep brand perfectly centered */
  .brand--center{
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Invite chip centered */
  .header__right{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Gate title scales safely */
  .gate__title{
    font-size: clamp(38px, 10vw, 58px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  /* HERO date scales down */
  .heroT__date{
    font-size: clamp(44px, 11vw, 74px) !important;
    letter-spacing: -0.03em !important;
  }

  .heroT__tagline{
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ✅ SCHEDULE: 4 columns → 2 columns (prevents overflow) */
  .banner__times{
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    max-width: 520px !important;
  }

  /* ✅ Location: remove absolute negative-left sketch on mobile */
  .locationT__grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: center !important;
  }

  .locationT__photo--left{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .locationT__photo img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .locationT__middle,
  .locationT__right{
    text-align: center !important;
  }

  .locationT__cta{
    display: flex !important;
    justify-content: center !important;
  }

  /* ✅ Photos/Dress Code: 2 columns → 1 column */
  .twoCards{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ✅ Any two-card layouts stack */
  .cards--two{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Photo preview: 3/4 columns → 2 columns */
  .photoPreview{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Uniform section spacing on mobile */
  .section{
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .bibleSep{ padding-block: 18px !important; }
  .bibleSep__text{
    max-width: 92% !important;
    margin: 0 auto !important;
  }
}

/* Extra-small phones */
@media (max-width: 420px) {

  /* Schedule: 2 columns → 1 column */
  .banner__times{
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
  }
}



/* --- Cinematic scroll reveal animations --- */
:root{
  --reveal-y: 18px;
  --reveal-blur: 2px;
  --reveal-duration: 800ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
}
.reveal{
  opacity:0;
  transform: translate3d(0,var(--reveal-y),0);
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
.reveal--fade{
  transform:none;
}
.reveal--soft{
  filter: blur(1px);
}
.reveal--zoom{
  transform: scale(.975);
}
.reveal.is-visible{
  opacity:1;
  transform: none;
  filter: none;
}

/* Hero micro animation when the site unlocks */
body.site-unlocked .heroT__date{ transition-delay: 40ms; }
body.site-unlocked .heroT__tagline{ transition-delay: 120ms; }
body.site-unlocked .heroT__greeting{ transition-delay: 200ms; }

/* Smooth hover lift for schedule tiles */
.banner__times .time{
  transition: transform .28s var(--reveal-ease), opacity .28s ease;
}
.banner__times .time:hover{
  transform: translateY(-2px);
}

/* Parallax friendliness (we will override transform inline) */
.banner__bg,
.countBanner__bg{
  will-change: transform;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .banner__bg,
  .countBanner__bg{
    transform:scale(1.18) !important;
  }
}
/* ✅ WHITE BACKGROUND ONLY FOR HERO/DATE SECTION */
.heroBg--white {
  background: #ffffff !important;
  background-image: none !important;
}

/* ✅ Make hero/date text black (since background is now white) */
.heroBg--white .heroT,
.heroBg--white .heroT * {
  color: #111 !important;
}

/* Optional: Make date bold and premium on white */
.heroBg--white .heroT__date {
  color: #000 !important;
}
.heroBg--white .heroT__tagline {
  color: #222 !important;
}
/* ✅ DARKEN BACKGROUND PHOTO BEHIND SCHEDULE + COUNTDOWN */
#schedule, 
#countdown {
  position: relative;
  overflow: hidden;
}

/* Overlay */
#schedule::before,
#countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* ✅ increase for darker */
  z-index: 0;
}

/* Keep content above the overlay */
#schedule > *,
#countdown > * {
  position: relative;
  z-index: 1;
}
/* ✅ Small church sketch on LEFT side of Location (no layout change) */
.location--sketch {
  position: relative;
  overflow: hidden;
}

/* Decorative sketch placed on the left */
.location--sketch::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 180px;
  background: url("./church-sketch.jpg") center / contain no-repeat;
  opacity: 0.18;          /* subtle */
  pointer-events: none;   /* doesn't block clicks */
  z-index: 0;
}

/* Keep location content above the sketch */
.location--sketch .container {
  position: relative;
  z-index: 1;
}

/* ✅ Mobile: make sketch smaller so it won’t disturb anything */
@media (max-width: 768px) {
  .location--sketch::before {
    width: 95px;
    height: 120px;
    left: 10px;
    opacity: 0.14;
  }
}
/* ✅ Center Ceremony + Reception block under Location title */
#location .locationT__details,
#location .locationT__cards,
#location .locationT__info {
  justify-self: center;      /* ✅ centers inside the grid */
  width: 100%;
  max-width: 980px;          /* ✅ controls card row width */
}

/* ✅ Make ceremony + reception cards align perfectly */
#location .locationT__details .cards,
#location .locationT__details .grid,
#location .locationT__details .locationCards,
#location .locationT__details .locationT__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  justify-content: center;
  margin: 0 auto;            /* ✅ centers the card row */
}

/* ✅ Mobile: stack */
@media (max-width: 900px) {
  #location .locationT__details .cards,
  #location .locationT__details .grid,
  #location .locationT__details .locationCards,
  #location .locationT__details .locationT__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
/* ✅ CENTER the Location block content properly */
#location .locationT{
  text-align: center;
}

/* ✅ CENTER Ceremony + Reception row */
#location .locationT__places,
#location .locationT__grid,
#location .locationT__cards{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 140px) !important;
  width: 100%;
  margin: 0 auto !important;
}

/* ✅ Make both cards same width so they align perfectly */
#location .locationT__place,
#location .locationT__card{
  flex: 0 0 min(320px, 42vw);
  text-align: center;
}

/* ✅ Center the Travel & Stay button under BOTH */
#location .locationT__cta,
#location .locationT__actions,
#location .travelStay{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ✅ Mobile: stack nicely */
@media (max-width: 900px){
  #location .locationT__places,
  #location .locationT__grid,
  #location .locationT__cards{
    flex-direction: column;
    gap: 18px !important;
    align-items: center !important;
  }

  #location .locationT__place,
  #location .locationT__card{
    flex: 0 0 auto;
    width: min(520px, 92%);
  }
}
/* ✅ PERFECT EQUAL SPACING: Quote ↔ Location ↔ Details */
#location .locationT__title,
#location .locationT__title * {
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Quote right above location (remove huge bottom margin) */
#location blockquote,
#location .quote,
#location .section__quote,
#location .locationT__quote,
#location .locationT__verse {
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ✅ Apply SAME spacing above + below Location heading */
#location .locationT__title {
  margin: 34px auto !important;   /* ✅ SAME GAP top & bottom */
  text-align: center !important;
}

/* ✅ Keep ceremony + reception row tight (no extra top gap) */
#location .locationT__places,
#location .locationT__grid,
#location .locationT__cards {
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ✅ Remove Travel & Stay button completely */
#location a.btn,
#location .travelStay,
#location .locationT__cta {
  display: none !important;
}
/* ================================
   ✅ LOCATION SPACING FIX (EQUAL GAP)
   ================================ */

:root{
  --loc-gap: 34px; /* ✅ change this to 28px or 40px if you want */
}

/* ✅ Remove extra padding from the section itself */
#location.section--template{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ✅ This is the Bible quote ABOVE the Location heading (reduce huge space) */
#location .quote,
#location .section__quote,
#location .templateQuote,
#location blockquote{
  margin-bottom: var(--loc-gap) !important;
  padding-bottom: 0 !important;
}

/* ✅ Location heading should have equal spacing above AND below */
#location .locationT__title{
  margin-top: 0 !important;                 /* important */
  margin-bottom: var(--loc-gap) !important; /* ✅ equal gap down */
  padding: 0 !important;
  text-align: center !important;
}

/* ✅ Ceremony + Reception row should NOT stick close to the heading */
#location .locationT__places,
#location .locationT__grid,
#location .locationT__cards{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ✅ Add equal spacing BELOW the content if you have the quote after location */
#location .quoteBottom,
#location .section__quote--bottom{
  margin-top: var(--loc-gap) !important;
}

/* ✅ remove Travel & Stay button (as you requested) */
#location a.btn,
#location .travelStay,
#location .locationT__cta{
  display: none !important;
}
/* =========================================
   ✅ GLOBAL SPACING SYSTEM (EQUAL GAPS)
   Paste this at the VERY BOTTOM of styles.css
   ========================================= */

/* 1) One spacing value used everywhere */
:root{
  --section-gap: clamp(56px, 7vw, 96px);   /* ✅ section-to-section space */
  --block-gap: clamp(16px, 2vw, 26px);     /* ✅ inside section spacing */
  --title-gap: clamp(18px, 2.4vw, 30px);   /* ✅ spacing under headings */
}

/* 2) Every section gets same top/bottom padding */
.section{
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-gap) !important;
}

/* 3) Kill random margins that cause uneven big gaps */
.section > *{
  margin-top: 0 !important;
}

/* 4) Inside each section, keep consistent spacing between blocks */
.section .container{
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

/* 5) Headings spacing — consistent under every heading */
.section h1,
.section h2,
.section h3{
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center;
}

.section h1{ margin-bottom: var(--title-gap) !important; }
.section h2{ margin-bottom: var(--title-gap) !important; }
.section h3{ margin-bottom: calc(var(--title-gap) * 0.75) !important; }

/* 6) Bible verses / quotes spacing everywhere */
.section blockquote,
.section .quote,
.section .section__quote{
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 1.55;
}

/* 7) Paragraph spacing clean (no giant gaps) */
.section p{
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 8) Buttons spacing consistent */
.section .btn,
.section button,
.section a.btn{
  margin-top: calc(var(--block-gap) * 0.75) !important;
}

/* 9) Mobile spacing slightly tighter */
@media (max-width: 768px){
  :root{
    --section-gap: clamp(44px, 9vw, 72px);
    --block-gap: clamp(14px, 3vw, 20px);
    --title-gap: clamp(14px, 3.2vw, 22px);
  }
}
/* ==============================
   ✅ MESSAGE FROM US (WITH PHOTO)
   ============================== */

.section--message{
  background: #fff;
}

/* Title centered */
.messageT__title{
  text-align: center;
  margin-bottom: 26px;
}

/* Grid layout (photo + text) */
.messageT__grid{
  display: grid;
  grid-template-columns: 0.95fr 1.25fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}

/* Photo wrapper */
.messageT__photoWrap{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.messageT__photo{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  filter: grayscale(100%); /* ✅ keeps it B&W */
}

/* Text content */
.messageT__content{
  text-align: left;
  max-width: 760px;
}

.messageT__text{
  margin: 0 0 14px 0;
  font-size: clamp(15.5px, 1.15vw, 18.5px);
  line-height: 1.75;
  color: #1a1a1a;
}

/* Blessing line */
.messageT__blessing{
  margin: 16px 0 12px 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
}

/* Bible verse styling */
.messageT__verse{
  margin: 10px 0 16px 0;
  font-style: italic;
  color: #222;
  line-height: 1.6;
}

.messageT__verseRef{
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Signature */
.messageT__sign{
  margin-top: 10px;
  color: #111;
}

.messageT__names{
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ✅ Mobile: stack photo on top, text below */
@media (max-width: 900px){
  .messageT__grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .messageT__content{
    text-align: center;
  }
}
/* ==============================
   ✅ NOTE FROM US - CENTERED + CLEAN
   ============================== */

.section--message{
  background: #fff;
}

.messageT{
  text-align: center;
}

/* Title spacing */
.messageT__title{
  margin-bottom: 22px !important;
}

/* ✅ Photo centered with fixed max width */
.messageT__photoWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px auto;
  width: 100%;
}

.messageT__photo{
  width: min(820px, 92%);
  height: auto;
  display: block;
  border-radius: 18px;
  filter: grayscale(100%);
}

/* ✅ Text width centered and font matching Location details style */
.messageT__content{
  max-width: 820px;
  margin: 0 auto;
  text-align: left; /* keeps it readable like your location details */
}

/* Same “location-details vibe” */
.messageT__text{
  margin: 0 0 14px 0;
  font-size: 14px;            /* ✅ similar to location detail font size */
  letter-spacing: 0.06em;     /* ✅ matches that neat template feel */
  text-transform: none;
  line-height: 1.85;
  color: #111;
  font-weight: 400;
}

/* Blessing line stronger */
.messageT__blessing{
  margin: 18px 0 10px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #111;
}

/* ✅ BIG bold italic verse */
.messageT__verseBig{
  margin: 20px 0 14px 0;
  font-size: clamp(18px, 1.3vw, 22px);
  font-style: italic;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
  color: #111;
}

.messageT__verseRefBig{
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  display: inline-block;
  margin-top: 6px;
}

/* Sign */
.messageT__sign{
  margin-top: 10px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #111;
}

.messageT__names{
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ✅ Mobile: keep centered but readable */
@media (max-width: 768px){
  .messageT__content{
    text-align: left;
    width: 92%;
  }
  .messageT__sign{
    text-align: left;
  }
}
/* ✅ FORCE "A Note From Us" section perfectly centered */
#message .messageT{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* ✅ Centers everything */
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* ✅ If any old grid exists, kill it */
#message .messageT__grid{
  display: block !important;
  width: 100% !important;
}

/* ✅ Center the photo perfectly */
#message .messageT__photoWrap{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 18px auto !important;
}

#message .messageT__photo{
  width: min(820px, 92vw) !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 18px;
  filter: grayscale(100%);
}

/* ✅ Center the text block under the photo */
#message .messageT__content{
  width: min(820px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important; /* readable like Location details */
}
/* =========================================
   ✅ MESSAGE SECTION — FORCE PERFECT CENTER
   ========================================= */

#message.section--message{
  background: #fff;
}

/* ✅ Override template container behavior for this section */
#message .messageT{
  width: 100% !important;
  max-width: 1200px !important;  /* keeps same layout width as site */
  margin: 0 auto !important;
  text-align: center !important;
}

/* ✅ Photo wrapper centered */
#message .messageT__photoWrap{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 22px auto !important;
}

/* ✅ Photo centered (THIS is the main fix) */
#message .messageT__photo{
  width: min(980px, 92vw) !important; /* ✅ centered inside screen */
  max-width: 980px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;          /* ✅ forces center */
  border-radius: 18px;
  filter: grayscale(100%);
  object-fit: cover;
  object-position: center;
}

/* ✅ Text block centered + bigger + bold */
#message .messageT__content{
  width: min(980px, 92vw) !important;  /* ✅ same width as photo */
  max-width: 980px !important;
  margin: 0 auto !important;           /* ✅ forces center */
  text-align: center !important;
}

/* ✅ Message paragraph styling (bigger + bold) */
#message .messageT__text{
  margin: 0 auto 14px auto !important;
  font-size: clamp(15.5px, 1.15vw, 18.5px) !important;
  line-height: 1.85 !important;
  font-weight: 700 !important;         /* ✅ bold */
  color: #111 !important;
  letter-spacing: 0.02em !important;
}

/* ✅ Blessing line stronger */
#message .messageT__blessing{
  margin: 18px auto 8px auto !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

/* ✅ Verse bigger + bold + italic */
#message .messageT__verseBig{
  margin: 22px auto 14px auto !important;
  font-size: clamp(20px, 1.5vw, 26px) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  color: #111 !important;
}

#message .messageT__verseRefBig{
  display: inline-block !important;
  margin-top: 8px !important;
  font-style: italic !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* ✅ Signature centered too */
#message .messageT__sign{
  margin-top: 8px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

#message .messageT__names{
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}
/* ✅ Word-style justified paragraphs for Message section */
#message .messageT__content{
  text-align: justify !important;
  text-justify: inter-word !important;
}

#message .messageT__blessing,
#message .messageT__verseBig,
#message .messageT__sign{
  text-align: center !important; /* keep these centered */
}
/* ✅ MESSAGE SECTION: normal website font + NOT bold */
#message .messageT__content,
#message .messageT__text,
#message .messageT__blessing,
#message .messageT__sign {
  font-family: inherit !important;  /* ✅ use website font */
  font-weight: 400 !important;      /* ✅ not bold */
  letter-spacing: 0.02em !important;
}

/* ✅ Message paragraph sizing (clean + readable) */
#message .messageT__text{
  font-size: 14px !important;      /* matches your location details style */
  line-height: 1.85 !important;
  color: #111 !important;
}

/* ✅ Blessing line normal */
#message .messageT__blessing{
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* ✅ ONLY Bible verse bold + italic (as you want) */
#message .messageT__verseBig{
  font-style: italic !important;
  font-weight: 900 !important;     /* ✅ bold */
  font-size: clamp(20px, 1.6vw, 26px) !important;
  text-align: center !important;
  margin: 18px auto 12px auto !important;
  line-height: 1.6 !important;
}

#message .messageT__verseRefBig{
  font-style: italic !important;
  font-weight: 900 !important;
}
/* ✅ HARD RESET: Make all Message text NORMAL (not bold) */
#message,
#message * {
  font-weight: 400 !important;
}

/* ✅ Paragraphs in message should stay normal */
#message p,
#message .messageT__text,
#message .messageT__blessing,
#message .messageT__sign,
#message .messageT__names {
  font-weight: 400 !important;
}

/* ✅ ONLY Bible verse bold + italic */
#message .messageT__verseBig,
#message .messageT__verseBig * {
  font-style: italic !important;
  font-weight: 900 !important;
}
/* =========================================
   ✅ GLOBAL UNIFORM SPACING (SAFE + CLEAN)
   Applies equal spacing between ALL sections
   Including Bible verse blocks
   ========================================= */

:root{
  --sec-pad: clamp(56px, 6vw, 92px);   /* section padding top/bottom */
  --block-gap: clamp(14px, 2vw, 24px); /* spacing inside sections */
  --title-gap: clamp(16px, 2.2vw, 28px);
}

/* ✅ Uniform spacing for every main section */
.section{
  padding-top: var(--sec-pad) !important;
  padding-bottom: var(--sec-pad) !important;
}

/* ✅ Keep section content stacked with clean consistent gaps */
.section .container{
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

/* ✅ Remove random huge margins that cause uneven gaps */
.section :where(h1,h2,h3,p,blockquote,ul,ol){
  margin-top: 0 !important;
}

/* ✅ Keep titles consistent everywhere */
.section :where(h1,h2,h3){
  margin-bottom: var(--title-gap) !important;
  text-align: center;
}

/* ✅ Bible verse blocks: same spacing as other content */
.section :where(blockquote,.quote,.bibleVerse,.section__quote){
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ✅ Buttons: consistent spacing */
.section :where(.btn,button,a.btn){
  margin-top: calc(var(--block-gap) * 0.75) !important;
}

/* ✅ Mobile: slightly tighter spacing */
@media (max-width: 768px){
  :root{
    --sec-pad: clamp(44px, 8vw, 72px);
    --block-gap: clamp(12px, 3vw, 20px);
    --title-gap: clamp(12px, 3.2vw, 22px);
  }
}
/* ✅ Make Message section closer to Schedule section */
#message.section {
  padding-bottom: 18px !important;  /* ✅ reduce bottom space */
}

/* ✅ Reduce top padding of Schedule (black section) */
#schedule.section,
#schedule {
  padding-top: 18px !important;     /* ✅ reduce top space */
}

/* ✅ Also remove extra bottom margin inside message (if any) */
#message .messageT__verseBig {
  margin-bottom: 10px !important;
}

#message .messageT__sign {
  margin-bottom: 0px !important;
}