:root{
  --bg:#0b0a0a;
  --ink:#111010;
  --text:#fff7ee;            /* brighter ivory */
  --muted:#d8cbbd;           /* lighter sand */
  --line:rgba(255,255,255,.12);

  --gold:#f0c24b;            /* brighter gold */
  --copper:#d28a4e;          /* brighter copper */
  --berry:#b64a6b;           /* celebratory accent */
  --sage:#6da68f;            /* fresh accent */

  --shadow: 0 18px 45px rgba(0,0,0,.50);
}
/* Make sure elements with the HTML hidden attribute are not displayed */
[hidden] {
  display: none !important;
}
/* Never show the mobile menu on desktop, even if hidden breaks */
@media (min-width: 821px) {
  .mobileNav { display: none !important; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color:var(--text);
  line-height:1.55;

  /* Brighter + festive “glow” while staying rustic */
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(240,194,75,.26), transparent 60%),
    radial-gradient(900px 650px at 92% 8%, rgba(210,138,78,.22), transparent 55%),
    radial-gradient(700px 520px at 78% 88%, rgba(182,74,107,.18), transparent 60%),
    radial-gradient(700px 520px at 18% 85%, rgba(109,166,143,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    var(--bg);
}
/* ===== Global Smooth Background ===== */
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(240,194,75,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(240,194,75,.08), transparent 55%),
radial-gradient(700px 520px at 78% 88%, rgba(182,74,107,.18), transparent 60%),
    linear-gradient(
      180deg,
      #0f0f0f 0%,
      #141414 30%,
      #1a1a1a 55%,
      #121212 80%,
      #0f0f0f 100%
    );
  background-attachment: fixed;
  color: rgba(255,255,255,.92);
}
/* Remove blocky section backgrounds */
.section,
.section.alt,
.pageHero{
  background: transparent;
}


/* subtle “grain” texture */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 2px,
      transparent 2px,
      transparent 10px
    );
  mix-blend-mode: overlay;
  opacity:.25;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(980px, calc(100% - 40px)); margin:0 auto; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95em;
  color: rgba(240,194,75,.95);
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  background: rgba(11,10,10,.70);
}

.brand{
  font-weight:800;
  letter-spacing:.10em;
  padding:8px 12px;
  border:1px solid rgba(240,194,75,.40);
  border-radius:999px;
  background: rgba(240,194,75,.08);
}

/* Active/current page highlight */
.nav a[aria-current="page"],
.mobileNav a[aria-current="page"]{
  color: var(--text);
  background: rgba(240,194,75,.16);
  border: 1px solid rgba(240,194,75,.30);
}

/* Make sure nav links have borders so the active state looks clean */
.nav a{
  border: 1px solid transparent;
}
.mobileNav a{
  border: 1px solid rgba(255,255,255,.10);
}

.nav{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.nav a{
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.nav a:hover{
  color:var(--text);
  background: rgba(240,194,75,.10);
  border:1px solid rgba(240,194,75,.22);
}
.navSep{ color: rgba(255,255,255,.22); }
.navGhost{ opacity:.75; }

.menuBtn{
  display:none;
  border:1px solid rgba(240,194,75,.34);
  background: rgba(240,194,75,.08);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.mobileNav{
  position:sticky; top:56px; z-index:49;
  background: rgba(11,10,10,.90);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; gap:12px; flex-wrap:wrap;
  padding:12px 18px;
}
.mobileNav a{
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius:999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.mobileNav a:hover{
  color:var(--text);
  border-color: rgba(240,194,75,.28);
}
.mobileHr{
  width:100%;
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  margin:2px 0;
}

.kicker{
  color:var(--muted);
  margin:0 0 10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.82rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.heroCenter{
  text-align: center;
}

.heroCenter .countdown{
  justify-content: center;
}

.hero{ padding:74px 0 42px; }
.heroInner{
  width:min(980px, calc(100% - 40px));
  margin:0 auto;
  padding:34px;
  border-radius:26px;
  box-shadow: 0 0 0 1px rgba(199,123,108,.18),
    0 20px 40px rgba(0,0,0,.06),
    0 8px 18px rgba(199,123,108,.08);
  border: 1px solid rgba(199,123,108,.35);
  background:
   linear-gradient(
    180deg,
    rgba(199,123,108,.16),
    rgba(199,123,108,.08)
  );
}

h1{
  margin:0 0 8px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing:.02em;
}
.amp{ color: var(--gold); font-weight: 700; }
.sub{
  margin:0 0 18px;
  color:var(--muted);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.heroNote{
  margin:16px 0 0;
  color: rgba(240,194,75,.95);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.06em;
}

.countdown{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:14px 0 18px;
}
.pill{
  display:flex; flex-direction:column; gap:2px;
  border-radius:18px;
  padding:10px 14px;
  min-width: 92px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(240,194,75,.14), rgba(0,0,0,.18));
}
.pill span{ font-size:1.55rem; font-weight:800; }
.pill small{
  color:var(--muted);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.heroCtas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.btn:hover{
  background: rgba(240,194,75,.12);
  border-color: rgba(240,194,75,.22);
}
.btn.primary{
  border-color: rgba(240,194,75,.55);
  background: rgba(240,194,75,.18);
}
.btn.small{ padding:8px 10px; border-radius:12px; font-size:.92rem; }

.section{ padding:54px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

h2{ margin:0 0 18px; font-size:1.9rem; letter-spacing:.02em; }
.h2Small{ font-size:1.45rem; margin-bottom:8px; }

.card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,16,16,.72), rgba(18,16,16,.48));
  border-radius:22px;
  padding:18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.28);
}
.card.note{
  border-color: rgba(240,194,75,.22);
  background: linear-gradient(180deg, rgba(210,138,78,.18), rgba(18,16,16,.55));
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.muted{
  color:var(--muted);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.timeline{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.timeline li{
  display:flex; gap:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(210,138,78,.10));
}
.time{
  width:92px;
  color: rgba(240,194,75,.98);
  font-weight:800;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.item{
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.form label{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
input::placeholder, textarea::placeholder{ color: rgba(216,203,189,.72); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.status{
  margin:10px 0 0;
  color: rgba(240,194,75,.98);
  min-height:1.2em;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.accordion{ display:flex; flex-direction:column; gap:10px; }
.accBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,16,16,.55);
  color:var(--text);
  padding:14px 14px;
  border-radius:18px;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
/* ===== FAQ: Larger, clearer questions ===== */

.accBtn{
font-family: "Playfair Display", serif; /* or your elegant serif */  
font-size: 1.05rem;        /* increase size */
  font-weight: 600;
  line-height: 1.35;

  padding: 16px 18px;        /* more tap-friendly */
  letter-spacing: 0.02em;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Optional: make the chevron feel balanced */
.accBtn .chev{
  font-size: 1.1rem;
  opacity: 0.7;
}
.accPanel{
  border:1px solid rgba(255,255,255,.10);
  border-top:none;
  background: rgba(0,0,0,.18);
  margin-top:-8px;
  padding:12px 14px;
  border-radius:0 0 18px 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.chev{ opacity:.9; }

.copyRow{ display:flex; gap:10px; align-items:center; }
.copyRow input{ flex:1; }
.bullets{ margin:10px 0 0 18px; color:var(--muted); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

.footer{
  padding:34px 0 60px;
  text-align:center;
  color:var(--muted);
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.listHeader{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}

/* ===== Landing page ===== */
body.landing{
  overflow:hidden;
}
.landingWrap{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
}
.landingVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.05);
}
.landingOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(240,194,75,.20), transparent 60%),
    radial-gradient(900px 650px at 90% 10%, rgba(210,138,78,.20), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.55));
}
.landingContent{
  position:relative;
  z-index:2;
  width:min(980px, calc(100% - 40px));
  padding:34px;
  border-radius:26px;
  border:1px solid rgba(240,194,75,.22);
  background: rgba(0,0,0,.34);
  box-shadow: var(--shadow);
  text-align:center;
}
.landingTitle{
  margin:0 0 10px;
  font-size: clamp(2.3rem, 5vw, 3.8rem);
}
.landingCtas{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}
.landingNote{
  margin:14px 0 0;
  color: rgba(240,194,75,.98);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.04em;
}

/* ===== Page hero (About/Gallery) ===== */
.pageHero{
  padding:58px 0 18px;
}
.pageTitle{
  margin:0 0 10px;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
  z-index:999;
  padding:20px;
}
.lightboxImg{
  max-width:min(980px, 94vw);
  max-height:74vh;
  border-radius:18px;
  border:1px solid rgba(240,194,75,.22);
  box-shadow: var(--shadow);
}

.lightboxClose{
  position:absolute;
  top:16px; right:16px;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(240,194,75,.22);
  background: rgba(240,194,75,.10);
  color: var(--text);
  cursor:pointer;
  font-size:18px;
.lightboxClose{ z-index: 1001; }
.lightboxNav{ z-index: 1001; }
.lightboxImg{ z-index: 1000; }
}
.lightboxNav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(240,194,75,.22);
  background: rgba(240,194,75,.10);
  color: var(--text);
  cursor:pointer;
  font-size:26px;
  display:grid;
  place-items:center;
}
.lightboxNav.left{ left:16px; }
.lightboxNav.right{ right:16px; }

/* ===== Falling Twinkling Lights ===== */
.floaters{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* each light particle */
.twinkle{
  position: absolute;
  top: -10vh;
  left: var(--x, 50vw);

  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 999px;

  /* warm gold glow */
  background: rgba(184, 134, 11, var(--a, 0.85));
  box-shadow:
    0 0 10px rgba(184,134,11,.55),
    0 0 22px rgba(184,134,11,.35),
    0 0 46px rgba(184,134,11,.20);

  filter: blur(0.2px);
  opacity: 0;

  transform: translateY(-20vh);

  animation:
    twinkleFall var(--dur, 16s) linear var(--delay, 0s) 1,
    twinklePulse var(--pulse, 2.6s) ease-in-out var(--delay, 0s) infinite;
}

/* fall straight down */
@keyframes twinkleFall{
  0%   { transform: translateY(-20vh); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(130vh); opacity: 0; }
}

/* fade in/out while falling (twinkle) */
@keyframes twinklePulse{
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

/* Keep site content above the background */
.hero,
.section,
.pageHero,
.footer{
  position: relative;
  z-index: 1;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .twinkle{ animation: none; opacity: 0.25; }
}

/* About page layout */
.aboutTightTop{
  padding-top: 24px; /* pulls content closer to the page hero */
}

.aboutTopGrid,
.aboutStoryGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.aboutStoryGrid{
  margin-top: 14px;
}

@media (max-width: 820px){
  .aboutTopGrid,
  .aboutStoryGrid{
    grid-template-columns: 1fr;
  }
}

/* Media inputs */
.mediaBlock{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mediaVideo{
  width: 100%;
  max-height: 340px;
  border-radius: 18px;
  border: 1px solid rgba(240,194,75,.18);
  background: rgba(0,0,0,.18);
}
#guestStatus{
  margin-top:8px;
}
/* Make certain selects narrower */
.selectShort{
  width: 220px;
  max-width: 100%;
}
.audioBar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* ===== Landing Page – Elegant Typography ===== */
body.landing {
  font-family: "Cormorant Garamond", Georgia, serif;
}

body.landing .landingContent {
  text-align: center;
  color: #C86A4F;
}

/* Small, refined kicker */
body.landing .kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}

/* Main title – elegant, not loud */
body.landing .landingTitle {
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* Date text */
body.landing .sub {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 20px;
}

/* CTA buttons – refined */
body.landing .btn {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 22px;
}

/* Subtle note at bottom */
body.landing .landingNote {
  margin-top: 24px;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}
body.landing .landingTitle {
  line-height: 1.15;
}
body.landing .landingContent {
  animation: landingFade 1.6s ease-out forwards;
}

@keyframes landingFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Landing hero image behaves like the old video background */
.landingHeroImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills screen; crops edges */
  object-position: center;
  z-index: 0;
}
/* ===== Landing Page text color fix ===== */
body.landing .landingContent,
body.landing .landingContent .kicker,
body.landing .landingContent .landingTitle,
body.landing .landingContent .sub,
body.landing .landingContent .landingNote{
  color: #F6F1E8 !important; /* deep ivory/cream */
}

/* Keep the bottom note peach if you want it highlighted */
body.landing .landingContent .landingNote{
  color: rgba(200,106,79,.92) !important; /* matte peach */
}
/* ===== Home Hero Name Styling ===== */
.heroInner h1{
  text-align: center;     /* ✅ center names */
  margin-left: auto;
  margin-right: auto;
}
/* Elegant cursive for names */
.heroInner h1{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: 0.06em;
}

/* Style the ampersand separately (optional but gorgeous) */
.heroInner .amp{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9em;
  margin: 0 0.3em;
}
.heroCtas{
  display: flex;
  justify-content: center;   /* ✅ center buttons */
  gap: 12px;
  flex-wrap: wrap;
}
/* ===== Home Hero: centered + elegant script ===== */
.heroInner{
  text-align: center;
  position: relative; /* for deco positioning */
}

.heroNames{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 10px 0 8px;
}

/* Deeper gold ampersand */
.heroNames .amp{
  color: #C86A4F; 
  font-family: "Great Vibes", cursive;
  margin: 0 0.25em;
}

/* ===== Hero Polaroid Layer ===== */
.heroCenter{
  position: relative; /* anchor polaroids to this block */
}

/* This block sits immediately after countdown, so its top = bottom of countdown */
.heroPolaroids{
  position: relative;
  margin-top: 10px; /* small breathing room below pills */
  height: 0;        /* we use absolute children so it doesn't push layout */
  pointer-events: none;
  z-index: 2;
}

.polaroid{
  position: absolute;
  top: -55px; /* ✅ top aligned to bottom of countdown (heroPolaroids top) */
  width: 150px;     /* adjust size here */
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  padding: 10px 10px 24px; /* extra bottom = polaroid frame */
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.08);
  transform-origin: center;
}

/* Image inside the polaroid */
.polaroid img{
  width: 100%;
  height: 140px;       /* keeps a consistent “polaroid photo” window */
  object-fit: cover;   /* polaroid look (cropped slightly) */
  border-radius: 7px;
  display: block;
}

/* Left polaroid: sits left, tilts inward (clockwise) */
.polaroidLeft{
  left: -60px; /* pulls it outward from card */
  transform: rotate(-15deg);
}

/* Right polaroid: sits right, tilts inward (counter-clockwise) */
.polaroidRight{
  right: -60px;
  transform: rotate(15deg);
}

/* Keep buttons and other hero elements above the polaroids if needed */
.heroCtas{
  position: relative;
  z-index: 3;
}

/* Mobile: reduce size and/or hide if too tight */
@media (max-width: 820px){
  .polaroid{
    width: 120px;
    padding: 8px 8px 18px;
  }
  .polaroid img{
    height: 110px;
  }
  .polaroidLeft{ left: -40px; }
  .polaroidRight{ right: -40px; }
}
/* ===== Details section grid ===== */
#details .detailsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;                 /* ✅ space between cards (all directions) */
  margin-top: 18px;
}

/* Make the cards equal height */
#details .detailsGrid .card{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Note card spans full width but keeps same gap */
#details .detailsNote{
  grid-column: 1 / -1;       /* ✅ full row */
}

/* Responsive: stack nicely */
@media (max-width: 900px){
  #details .detailsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  #details .detailsGrid{
    grid-template-columns: 1fr;
  }
}
#details .card{
  position: relative;
  padding-top: 60px; /* creates space for the bubble */
}
/* Remove extra top space from the note card */
#details .card.note{
  padding-top: 20px;   /* adjust 24–36px to taste */
}
/* ===== Details Title Bubble ===== */
#details .card h3{
  position: absolute;
  top: 32px;
  left: 8px;

  display: inline-block;
  width: auto;                 /* ✅ prevents full width */
  max-width: 75%;              /* prevents long text overflow */

  padding: 8px 18px;
  border-radius: 999px;

  background: #D68A6F;         
  color: #000;

  font-size: 0.85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;

  box-shadow: 
    0 6px 14px rgba(199,123,108,.25),
    0 2px 4px rgba(0,0,0,.05);
}
@media (max-width: 560px){
  .heroPolaroids{ display: none; } /* optional: hide on very small screens */
}
.mediaVideo{
  background: rgba(0,0,0,.25);
  object-fit: cover;
}
/* How We Met poster */
.posterMet{
  object-position: 50% 35%;
}

/* Our Engagement poster */
.posterEngagement{
  object-position: 50% 40%;
}
#googleRsvpForm{
  width: 100%;
  border: 0;
  display: block;
}
.grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 820px){
  .grid2{ grid-template-columns: 1fr; }
}
.mapEmbed{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.mapEmbed iframe{
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}
/* 3-up grid for Welcome cards */
.grid3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}

/* Jump to row */
.jumpRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jumpLabel{
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Tip bar section */
.tipBar{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(240,194,75,.18);
}

/* Map embed styling */
.mapEmbed{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.mapEmbed iframe{
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
}
/* Tighten spacing around Jump row */
.jumpSection{
  padding-top: 10px;     /* reduce top padding */
  padding-bottom: 10px;  /* reduce bottom padding */
}

.jumpSection .jumpRow{
  margin: 0;             /* remove extra space inside the section */
}

/* Reduce space before Welcome to Atlanta */
#welcome.section{
  padding-top: 12px;     /* pulls Welcome section upward */
}


/* ===== Lodging Slideshow Card ===== */
.hotelSlideCard .slideFrame{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.hotelSlideCard img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.slideCaption{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.2;
}

.slideBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.slideBtn.left{ left: 10px; }
.slideBtn.right{ right: 10px; }

.slideDots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.slideDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
}

.slideDot.active{
  background: rgba(184,134,11,.95); /* deep gold */
}
/* RSVP layout */
#rsvpForm.form{
  max-width: 900px;
  margin: 0 auto;
}

#rsvpFields{
  margin-top: 14px;
}

#googleRsvpForm{
  width: 100%;
  height: 1350px;  /* adjust if needed */
  border: 0;
  display: block;
}


/* ===== Lightbox (cleaner) ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 999;
}

.lightbox[hidden]{ display:none; }

.lightboxImg{
  max-width: min(980px, 92vw);
  max-height: 76vh;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  background: #111;
}

/* ===== Lightbox caption: ivory bg, peach text, black border ===== */
.lightboxCaption{
  margin-top: 12px;
  max-width: min(980px, 92vw);
  padding: 10px 12px;
  border-radius: 14px;

  background: #C86A4F;      /* ivory */
  border: 3px solid #FDF6EC; /* black border */
  color: #C86A4F;           /* peach text */

  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}

.lightboxClose{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.lightboxNav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}
.lightboxNav.left{ left: 14px; }
.lightboxNav.right{ right: 14px; }
/* ===== Shelf Gallery (Barn Wood) ===== */

.galleryGrid{
  --cols: 5;                 /* ✅ 5 photos per shelf */
  --imgH: 130px;             /* base photo height */
  --gap: 12px;

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  position: relative;

  padding: 18px 14px 22px;
  border-radius: 18px;

  /* A repeating “plank lip” under each row */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--imgH) + var(--gap) - 10px),
      rgba(240,194,75,.20) calc(var(--imgH) + var(--gap) - 10px),
      rgba(240,194,75,.20) calc(var(--imgH) + var(--gap) - 9px),
      rgba(0,0,0,.35) calc(var(--imgH) + var(--gap) - 8px),
      rgba(0,0,0,.35) calc(var(--imgH) + var(--gap) - 5px),
      rgba(0,0,0,0) calc(var(--imgH) + var(--gap))
    );

  opacity: .95;
}

/* Responsive shelves */
@media (max-width: 1000px){
  .galleryGrid{ --cols: 4; }
}
@media (max-width: 760px){
  .galleryGrid{ --cols: 3; }
}
@media (max-width: 520px){
  .galleryGrid{ --cols: 2; }
}
.galleryGrid{ --gap: 35px; }
.galleryShell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Shelf plank lines aligned with each grid row */
.galleryGrid::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 18px;

  /* A repeating “plank lip” under each row */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--imgH) + var(--gap) - 10px),
      rgba(240,194,75,.20) calc(var(--imgH) + var(--gap) - 10px),
      rgba(240,194,75,.20) calc(var(--imgH) + var(--gap) - 9px),
      rgba(0,0,0,.35) calc(var(--imgH) + var(--gap) - 8px),
      rgba(0,0,0,.35) calc(var(--imgH) + var(--gap) - 5px),
      rgba(0,0,0,0) calc(var(--imgH) + var(--gap))
    );

  opacity: .95;
}

/* Each photo “print” — no frame */
.galleryItem{
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  position: relative;
  border-radius: 14px;
  overflow: visible;

  /* Tiny tilt + “lean back” */
  transform-style: preserve-3d;
  transform:
    translateY(var(--lift, 0px))
    rotate(var(--tilt, 0deg))
    perspective(900px)
    rotateX(10deg); /* ✅ lean back */
  transition: transform .18s ease, filter .18s ease;
}

/* Hover: gently lift forward */
.galleryItem:hover{
  transform:
    translateY(-6px)
    rotate(var(--tilt, 0deg))
    perspective(900px)
    rotateX(6deg);
  filter: saturate(1.05) contrast(1.02);
}

/* The actual image */
.galleryItem img{
  width: 100%;

  /* base height + JS variance */
  height: calc(var(--imgH) * var(--hScale, 1));

  object-fit: cover;
  display: block;
  border-radius: 14px;

  /* Shadow makes it look like a print on wood */
  box-shadow: 0 16px 26px rgba(0,0,0,.28);
}

.galleryItem img{
  object-position: var(--pos, 50% 50%);
}

/* Hide captions in the grid (keep for lightbox) */
.galleryCap{ display:none; }

/* ✅ String-lights reflection overlay on each print */
.galleryItem::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 16px;
  pointer-events:none;

  background:
    radial-gradient(circle at 14% 12%, rgba(255,232,160,.55), transparent 26%),
    radial-gradient(circle at 34% 18%, rgba(255,232,160,.35), transparent 28%),
    radial-gradient(circle at 58% 14%, rgba(255,232,160,.42), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(255,232,160,.30), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%);

  opacity: .22;              /* subtle glow */
  mix-blend-mode: screen;    /* reflection feel */
  filter: blur(.2px);
  transition: opacity .18s ease;
}

.galleryItem:hover::after{
  opacity: .30;
}
/* ===== Bubbled Card Titles (Travel Page) ===== */

.card > h3{
  display: inline-block;
  margin-top: -18px;           /* pull upward to “float” */
  margin-bottom: 10px;

  padding: 6px 14px;
  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #111;
  background:
    linear-gradient(180deg, #f3d37a, #d4af37); /* gold bubble */

  box-shadow:
    0 6px 16px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.45);

  border: 1px solid rgba(0,0,0,.12);
}

/* Dark cards (if any) */
.section.alt .card > h3{
  color: #111;
}

/* Optional: small entrance polish */
.card > h3{
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover > h3{
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* ===== Editorial / Magazine Story ===== */
.story{
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* Subtle “magazine column” feel without forcing columns */
.storyHeader{
  margin-bottom: 14px;
}

.storyDek{
  font-size: 1.06rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.88);
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(240,194,75,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

.storySection{
  padding: 6px 6px;
}

.story p{
  margin: 0 0 12px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.90);
  text-wrap: pretty;
}

.storyH2{
  margin: 18px 0 10px;
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,194,75,.95); /* gold */
}

.storyRule{
  border: 0;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(240,194,75,.35), transparent);
}

.storyPull{
  margin: 10px 0 14px;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: .01em;
  font-style: italic;
  color: rgba(255,255,255,.95);
}

.storyQuote{
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-left: 3px solid rgba(240,194,75,.85);
  background: rgba(0,0,0,.30);
  border-radius: 14px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255,255,255,.96);
}

.storyFigure{
  margin: 18px 0 18px;
  padding: 14px;
  border-radius: 18px;
  background: #FDF6EC;
  border: 1px solid rgba(240,194,75,.18);
  box-shadow: 
  0 0 4px #C86A4F, 
  0 18px 40px rgba(0,0,0,.35);
}

.storyVideo{
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

.storyCaption{
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

.storyEnd{
  margin-top: 16px;
  font-size: 1.08rem;
}

/* Mobile readability */
@media (max-width: 640px){
  .storyDek{ padding: 16px; }
  .storyQuote{ font-size: 1.05rem; }
}

/* ===== Registry: Single Card Clean Layout ===== */

.registryWrap{
  max-width: 480px;       /* ⬅ controls width */
  margin: 0 auto;
}

.registryCard{
  text-align: center;
  padding: 30px 28px;
}

/* Title style */
.registryCard h3{
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Description */
.registryCard .muted{
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Center button */
.registryCard .actions{
  justify-content: center;
}
/* ===== Mobile Hamburger Nav ===== */

/* Desktop nav visible by default; hide hamburger */
.hamburger{ display: none; }

/* Mobile: hide desktop links, show hamburger */
@media (max-width: 860px){
  .topbar .nav{ display: none; }
  .hamburger{ display: inline-flex; }
}

/* Hamburger button */
.menuBtn.hamburger{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(240,194,75,.20);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 3 lines */
.hambLines{
  position: relative;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
  display: block;
}
.hambLines::before,
.hambLines::after{
  content:"";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.hambLines::before{ top: -6px; }
.hambLines::after{ top: 6px; }

/* Turn into X when open */
.menuOpen .hambLines{ background: transparent; }
.menuOpen .hambLines::before{ top: 0; transform: rotate(45deg); }
.menuOpen .hambLines::after{ top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobileNav{
  position: fixed;
  top: 64px;                 /* match your header height */
  right: 14px;
  left: 14px;
  z-index: 999;

  border-radius: 16px;
  padding: 12px;

  background: rgba(15,15,15,.80);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(240,194,75,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);

  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

/* Open state */
.mobileNav.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Stacked links */
.mobileNav a{
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.mobileNav a:hover{
  background: rgba(255,255,255,.08);
}

/* Optional divider */
.mobileHr{
  border: 0;
  height: 1px;
  background: rgba(240,194,75,.18);
  margin: 10px 6px;
}
/* ===== Travel: Jump To (Desktop vs Mobile) ===== */
.travelPage .jumpRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Desktop default */
.travelPage .jumpDropdown{ display: none; }
.travelPage .jumpLinks{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Mobile: show dropdown only, hide desktop links */
@media (max-width: 768px){
  .travelPage .jumpLinks{ display: none !important; }
  .travelPage .jumpDropdown{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 6px 0 14px; /* tighten space */
  }
}

/* ===== Travel: Bubbled Dropdown Look ===== */
.travelPage .jumpLabel{
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* Centered, not full width */
.travelPage .jumpSelectWrap{
  position: relative;
  width: min(320px, 86vw);  /* ✅ compact + centered */
}

/* Bubble dropdown */
.travelPage .jumpSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 12px 44px 12px 14px; /* right padding for arrow */
  border-radius: 999px;

  border: 1px solid rgba(240,194,75,.22);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(12px);

  color: rgba(255,255,255,.92);
  font-size: 0.95rem;
  line-height: 1;
}

/* Arrow inside on the far right */
.travelPage .jumpSelectWrap::after{
  content: "⌄";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(240,194,75,.85);
  pointer-events: none;
  font-size: 1.05rem;
}
@media (max-width: 768px){
  .travelPage .jumpDropdown{
    width: auto;                 /* not full width */
    justify-content: center;
    flex-wrap: nowrap;           /* ✅ keep on one row */
    white-space: nowrap;
  }

  .travelPage .jumpSelectWrap{
    width: 220px;                /* ✅ smaller so label + select fit */
    max-width: 220px;
  }

  .travelPage .jumpLabel{
    margin-right: 8px;
  }
}

/* Focus polish */
.travelPage .jumpSelect:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(240,194,75,.18);
}
.storyCard{
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.75;
}

.storyHr{
  border: 0;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(240,194,75,.35), transparent);
}

.h2Small{ font-size: 1.1rem; letter-spacing: .02em; }
.h3Small{ font-size: 1.02rem; margin-top: 4px; }

.mediaCard{
  max-width: 920px;
  margin: 0 auto;
}

.mediaVideo{
  width: 100%;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(240,194,75,.20);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
/* =========================================
   THEME OVERRIDES (COLOR ONLY)
   Paste at bottom of styles.css
   ========================================= */

:root{
  --bg-cream: #F6F1E8;        /* deep ivory / warm cream */
  --cream-soft: #FBF7F1;      /* lighter cream */

  --black: #111111;
  --black-soft: #1A1A1A;

  --peach: #D89A86;           /* matte peach */
  --peach-soft: #E7B3A3;
  --peach-dark: #C7836D;

  --text-dark: #1B1B1B;
  --text-muted: #6E655D;

  --border-soft: rgba(0,0,0,.10);
}

/* Global background + text (no layout changes) */
body{
  background: var(--bg-cream) !important;
  color: var(--text-dark) !important;
}

/* Muted text */
.muted,
.sub,
.kicker{
  color: var(--text-muted) !important;
}

/* Top nav bar stays black */
.topbar{
  background: var(--black) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.topbar .brand,
.topbar a{
  color: rgba(255,255,255,.88) !important;
}

.topbar a:hover{
  color: var(--peach-soft) !important;
}

.nav a[aria-current="page"],
.mobileNav a[aria-current="page"]{
  color: var(--peach) !important;
}

/* Cards: ONLY recolor (keep your existing padding/radius/shadows) */
.card{
  background: rgba(255,255,255,.92) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-soft) !important;
}

/* If you use dark cards inside .section.alt, keep them readable */
.section.alt .card{
  background: rgba(255,255,255,.86) !important;
  color: var(--text-dark) !important;
}

/* Buttons: ONLY recolor (keep your existing sizing/layout rules) */
.btn.primary,
.btn{
  background: var(--peach) !important;
  border-color: rgba(0,0,0,.06) !important;
  color: #fff !important;
}

.btn:hover{
  background: var(--peach-dark) !important;
}

/* Optional: outline-style buttons if you have them */
.btn.secondary{
  background: transparent !important;
  color: var(--black) !important;
  border: 1px solid var(--black) !important;
}

.btn.secondary:hover{
  background: var(--black) !important;
  color: #fff !important;
}

/* Inputs/selects (keeps form clean on cream background) */
input, select, textarea{
  background: rgba(255,255,255,.95) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-soft) !important;
}

input::placeholder, textarea::placeholder{
  color: rgba(27,27,27,.45) !important;
}
/* =========================================
   FIX WHITE TEXT FOR CREAM THEME
   Color-only overrides
   ========================================= */

/* Replace pure white text with dark text */
[style*="color:#fff"],
[style*="color: white"],
[style*="color: #ffffff"]{
  color: var(--text-dark) !important;
}

/* Fix commonly white-styled classes */
.section,
.section.alt,
.pageHero{
  color: var(--text-dark) !important;
}

/* Headings that may have been white */
h1, h2, h3, h4, h5{
  color: var(--text-dark) !important;
}

/* Paragraph text */
p{
  color: var(--text-dark) !important;
}

/* Travel page muted titles */
.kicker{
  color: var(--peach-dark) !important;
}

/* FAQ buttons if they were white */
.accBtn{
  color: var(--text-dark) !important;
}
/* ===== Home: Schedule styling ===== */
#schedule .timeline{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px; /* space between rows */
}

#schedule .timeline li{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Time "bubble" */
#schedule .timeline .time{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ✅ peach time text */
  color: var(--peach, #C77B6C);

  /* bubble sizing */
  padding: 8px 10px;
  min-width: 92px;          /* ✅ makes bubbles narrower */
  border-radius: 999px;

  /* subtle bubble look (adjust if you want more/less) */
  background: rgba(199, 123, 108, 0.12);
  border: 1px solid rgba(199, 123, 108, 0.35);

  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Schedule item text */
#schedule .timeline .item{
  /* ✅ black words */
  color: #111;
  font-weight: 600;
  font-size: 1rem;
}

/* If the Schedule section is on a darker "alt" background and you need item text lighter on some themes,
   delete this rule OR adjust it. */
#schedule .timeline .time{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto !important;

  padding: 6px 10px;
  min-width: unset !important;
  width: auto !important;

  border-radius: 999px;
}
#schedule .timeline{
  display: grid;
  gap: 14px;
  justify-content: center;
}

#schedule .timeline li{
  display: inline-flex;
  align-items: center;
  gap: 12px;

  background: rgba(0,0,0,.04);
  padding: 10px 18px;
  border-radius: 999px;

  width: auto;
}
/* ===== Countdown Number Styling ===== */
.countdown .pill span{
  color: #000;            /* black numbers */
  font-weight: 600;
  font-size: 2rem;        /* adjust if needed */
}

/* ===== Countdown Label Styling ===== */
.countdown .pill small{
  color: #000;            /* black labels */
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.countdown .pill{
  background: rgba(199,123,108,.12);
  border: 1px solid rgba(199,123,108,.35);
  border-radius: 16px;
  padding: 16px 18px;
}
/* ===== Countdown card: beveled + thicker border + glass ===== */
.heroInner{
  /* keep your existing background, then add glass sheen */
  border: 2px solid rgba(0,0,0,.22); /* thicker border */
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.55),   /* top bevel highlight */
    inset 0 -10px 22px rgba(0,0,0,.10);    /* bottom bevel shade */

  /* glass effect */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  overflow: visible;
}

/* subtle glass “sheen” across the card */
.heroInner::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(closest-side at 20% 15%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(115deg, rgba(255,255,255,.18), transparent 55%);
  transform: rotate(-8deg);
  pointer-events:none;
  opacity:.55;
}
/* ===== Countdown pills: beveled + thicker border + glass ===== */
.countdown .pill{
  border: 2px solid rgba(0,0,0,.20); /* thicker */
  border-radius: 10px;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.22)
    );

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.70),  /* top highlight */
    inset 0 -12px 22px rgba(0,0,0,.12);    /* bottom shade */

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  position: relative;
  overflow: hidden;
}

/* little glossy streak on each pill */
.countdown .pill::before{
  content:"";
  position:absolute;
  left:-25%;
  top:-55%;
  width:150%;
  height:120%;
  background: linear-gradient(120deg, rgba(255,255,255,.45), transparent 55%);
  transform: rotate(-10deg);
  opacity:.45;
  pointer-events:none;
}
/* Force ampersand peach color */
.heroInner h1 .amp{
  color: #C86A4F !important;
  font-family: "Great Vibes", cursive;
}
/* ===== FAQ (accordion) — Soft Pink + Soft Black ===== */

[data-accordion]{
  display: grid;
  gap: 18px;
  justify-items: center;   /* ✅ center everything */
}

/* Question button */
.accBtn{
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 18px;

  background: rgba(200,106,79,.65);   /* ✅ lighter / transparent peach */
  color: #fff;

  border: 2px solid rgba(200,106,79,.45);
  border-radius: 16px;

  font-weight: 650;
  letter-spacing: .01em;

  cursor: pointer;
  transition: all .2s ease;
}

.accBtn:hover{
  background: rgba(200,106,79,.85);
}

/* Chevron */
.accBtn .chev{
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}

.accBtn[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

/* Answer panel */
.accPanel{
  width: 70%;                  /* ✅ match button width */
  background: rgba(0,0,0,.75); /* ✅ softer black */
  color: #fff !important;      /* ✅ force white text */

  border: 2px solid rgba(255,255,255,.15);
  border-top: none;

  padding: 16px 18px;
  margin-top: -10px;

  border-radius: 0 0 16px 16px;
}

/* Ensure paragraph text is white */
.accPanel p{
  margin: 0;
  line-height: 1.55;
  color: #fff !important;
}
/* ===== DETAILS SECTION UPDATE ===== */

/* 2️⃣ Title bubble → White */
#details .card h3{
  background: #ffffff;
  color: #000;
  border: 1px solid rgba(0,0,0,.08);
}

/* 3️⃣ Shorten card width */
#details .detailsGrid{
  width: 85%;              /* reduce overall grid width */
  margin: 0 auto;          /* center it */
}

/* ===== DETAILS OVERRIDES (works with .detailsGrid HTML) ===== */

/* Darker peach background ONLY for the 6 grid cards (not the note card) */
#details .detailsGrid > .card:not(.note){
  background: rgba(200,106,79,.20) !important;   /* darker = raise this number */
  border: 2px solid rgba(200,106,79,.45) !important;
  color: #111 !important;
}

/* Keep note card unchanged */
#details .detailsGrid > .card.note{
  background: unset !important;
  border: unset !important;
  color: inherit !important;
}

/* Center ONLY the time line (and not note card text) */
#details .detailsGrid > .card:not(.note) > p:first-of-type{
  text-align: center !important;
  margin-top: 6px;
}

#details .detailsGrid > .card:not(.note) > p:first-of-type strong{
  display: inline-block;
}
/* ===== Travel Page – Match Home Card Colors ===== */

/* Travel cards background + border */
.travelPage .card{
  background: rgba(200,106,79,.18) !important;   /* matte peach */
  border: 2px solid rgba(200,106,79,.45) !important;
  color: #111; /* keep text readable */
}

/* White title bubbles */
.travelPage .card h3{
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.08);
}
/* ===== Force Peach Cards in Travel (including .section.alt) ===== */
.travelPage .section.alt .card{
  background: rgba(200,106,79,.18) !important;
  border: 2px solid rgba(200,106,79,.45) !important;
}
/* ===== Travel Page – Bullet + Text Color ===== */

/* Make bullet text black */
.travelPage .bullets li{
  color: #000 !important;
}

/* Make bullet dot black */
.travelPage .bullets li::marker{
  color: #000 !important; 
}
#transportation .card:first-child{
  padding-bottom: 16px;
}
/* Travel bullets – add vertical spacing */
.travelPage .bullets li{
  margin-bottom: 10px; /* adjust 8–14px to taste */
}
.travelPage .bullets{
  font-family: inherit;
}
/* Dress Code links — custom underline */
#details a{
  color: inherit;                 /* keeps text black */
  text-decoration: underline;
  text-decoration-color: #C86A4F; /* matte peach underline */
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

#details a:hover{
  text-decoration-color: #000;    /* optional: darker on hover */
}
/* Force lightbox caption text color */
.lightboxCaption,
.lightboxCaption *{
  color: #fff !important;
}
/* Highlighted story moment */
.storyMoment{
  display: block;
  Width: fit-content;
  margin:22px auto;
  padding:10px 20px;

  background:#FDF6EC;        /* ivory */
  color:#C86A4F;             /* peach */
  border:2px solid #000;

  border-radius:999px;

  font-weight:600;
  letter-spacing:.04em;
  text-align:center;

  box-shadow:
    0 6px 14px rgba(0,0,0,.12);
}