:root{
  --ink:#0f2743; --ink-2:#273a53; --ink-3:#426084; --paper:#ffffff;
  --accent:#153a6a; --accent-2:#0d4f9a; --shadow:0 10px 30px rgba(0,0,0,.20);
  --radius:18px; --pad:min(5vw, 40px); --max:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:#f9fbff}

/* NAV */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;height:64px;padding:0 var(--pad);transition:background .25s,box-shadow .25s,color .25s;background:transparent}
.brand{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.2em;font-size:22px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.nav-row{width:100%;display:flex;align-items:center;gap:24px}
.nav-links{margin-left:auto;display:flex;gap:28px}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hamburger{display:none;margin-left:auto;font-size:28px;background:none;border:0;color:#fff;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.top-nav.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.top-nav.is-scrolled .brand,.top-nav.is-scrolled .nav-links a,.top-nav.is-scrolled .hamburger{color:var(--ink);text-shadow:none}

/* Mobile drawer */
.mobile-menu{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .hamburger{display:block}
  .mobile-menu{display:flex;position:fixed;inset:0;z-index:1200;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 100%);transform:translateY(-100%);transition:transform .3s ease}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{color:#fff;font-weight:700;font-size:clamp(1.5rem,6vw,2.2rem);text-decoration:none}
  body.no-scroll{overflow:hidden}
}

/* Welcome modal + header */
.hidden{display:none}
.welcome-modal{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.modal-card{width:min(560px,92vw);background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow);text-align:center}
.modal-title{font-family:"Cormorant Garamond",serif;margin:0 0 .25rem;font-size:clamp(2rem,5vw,3rem);color:var(--ink)}
.modal-sub{margin:.25rem 0 1.25rem;color:var(--ink-2)}
.name-input{width:100%;padding:14px 16px;border-radius:14px;border:2px solid #e8eef7;outline:none;font-size:1rem}
.name-input:focus{border-color:#b8c8e2;box-shadow:0 0 0 6px #eaf1fb}
.continue-btn{margin-top:14px;width:100%;padding:14px 16px;border-radius:14px;border:0;cursor:pointer;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 100%);color:#fff;font-weight:700}
.continue-btn:disabled{opacity:.5;cursor:not-allowed}
/* Welcome header: fade in, then we can hide it again without layout jump */
.welcome-header{
  position:absolute;
  left:50%; top:90px; transform:translateX(-50%);
  z-index:20; text-align:center; color:#fff; pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.35);

  /* new: fade/visibility control */
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.welcome-header.is-visible{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease;
}


/* HERO */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);filter:saturate(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.35) 30%,rgba(0,0,0,.55))}
.hero-inner{position:relative;text-align:center;z-index:1;padding:0 var(--pad)}
.tagline{color:#ffffffcc;font-size:clamp(1rem,2.2vw,1.25rem);margin:0 0 .75rem}
.names{font-family:"Cormorant Garamond",serif;font-weight:300;line-height:1.02;font-size:clamp(2.8rem,9.5vw,7.5rem);margin:.25rem 0;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ampersand{font-style:italic}
.hero-date{font-size:clamp(1.1rem,3.3vw,2rem);margin:.4rem 0 1.2rem;color:#fff}
.scroll-indicator{margin-top:18px;font-size:22px;opacity:.85;animation:float 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Sections */
section{padding:clamp(60px,10vw,120px) var(--pad)}
.section-wrapper{max-width:var(--max);margin:0 auto}
.section-title{font-family:"Cormorant Garamond",serif;font-size:clamp(1.8rem,4.8vw,3rem);margin:0 0 1.2rem;color:var(--ink)}
.muted{color:var(--ink-2)}

/* Countdown */
.countdown{background:#fff}
.countdown-timer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:center}
.time-box{background:linear-gradient(160deg,#f6f9ff 0%,#ecf3ff 100%);border-radius:16px;padding:18px 10px;box-shadow:0 6px 18px rgba(13,35,75,.06)}
.time-number{font-weight:800;font-size:clamp(1.8rem,4.5vw,2.8rem);color:var(--ink)}
.time-label{color:var(--ink-3);margin-top:.25rem;font-weight:600}
@media (max-width:700px){.countdown-timer{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Story */
.story{background:#f7faff}
.story .prose{color:var(--ink-2);line-height:1.8;font-size:1.05rem}

/* Entourage */
.entourage .grid{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.entourage .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.entourage h3{margin:0 0 .75rem;color:var(--ink)}
.entourage .list{display:grid;gap:10px}
.member{padding:10px 12px;border-radius:12px;background:#f2f6fd;font-weight:600;color:var(--ink-2)}
@media (max-width:800px){.entourage .grid{grid-template-columns:1fr}}

/* Sponsors */
.sponsors{background:#fff}
.sponsors .grid{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.sponsors .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.sponsors h3{margin:0 0 .75rem;color:var(--ink)}
.sponsors .list{display:grid;gap:10px}
@media (max-width:800px){.sponsors .grid{grid-template-columns:1fr}}

/* Special Roles */
.special-roles{background:#f7faff}
.special-roles .grid{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.special-roles .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.special-roles h3{margin:0 0 .75rem;color:var(--ink)}
.special-roles .list{display:grid;gap:10px}
@media (max-width:800px){.special-roles .grid{grid-template-columns:1fr}}

/* Details */
.events .cards{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.event{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.event .icon{font-size:30px}
.event .title{margin:.2rem 0 .4rem;font-size:1.4rem}
.map-btn{display:inline-block;margin-top:.6rem;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;color:#fff;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 100%)}
@media (max-width:800px){.events .cards{grid-template-columns:1fr}}

/* Gallery placeholder */
.coming-soon{display:grid;place-items:center;height:220px;background:linear-gradient(160deg,#eef4ff 0%,#e7efff 100%);border-radius:var(--radius);font-weight:700;color:var(--ink-3)}

/* Registry */
.registry .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);color:var(--ink-2)}

/* Message */
.message-form{display:grid;gap:12px}
.message-input{width:100%;padding:14px 16px;border-radius:14px;border:2px solid #e8eef7;outline:none;resize:vertical;min-height:120px;font:inherit}
.message-input:focus{border-color:#b8c8e2;box-shadow:0 0 0 6px #eaf1fb}
.message-btn{justify-self:start;padding:12px 16px;border-radius:12px;border:0;cursor:pointer;color:#fff;font-weight:700;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 100%)}

/* Footer & back to top */
footer{text-align:center;padding:60px var(--pad);color:var(--ink-3)}
.back-to-top{position:fixed;right:16px;bottom:16px;z-index:900;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 100%);color:#fff;font-weight:800;box-shadow:var(--shadow);display:none}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.show{opacity:1;transform:none}

/* Smooth-hide the welcome modal and its card */
.welcome-modal {
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.welcome-modal.is-hide {           /* fade out first */
  opacity: 0;
  visibility: hidden;
}
.welcome-modal.hidden {            /* then hard-hide */
  display: none !important;
}

/* also fade/scale the card during hide */
.welcome-modal .modal-card {
  transition: transform .35s ease, opacity .35s ease;
}
.welcome-modal.is-hide .modal-card {
  transform: scale(.98);
  opacity: 0;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gallery-grid .photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-grid .photo:hover img {
  transform: scale(1.06);
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-height: 600px;  /* ADD THIS - limits initial height */
  overflow: hidden;   /* ADD THIS - hides overflow */
  position: relative; /* ADD THIS - for button positioning */
  transition: max-height 0.5s ease; /* ADD THIS - smooth expand */
}

.gallery-grid.expanded {  /* ADD THIS - expanded state */
  max-height: none;
}

.gallery-grid .photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-grid .photo:hover img {
  transform: scale(1.06);
}

/* ADD THIS - Show More/Less Button */
.show-more-btn {
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-weight: 700;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Gallery - show only a few photos initially */
.gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gallery-grid .photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer; /* ADD THIS - indicates clickable */
}

.gallery-grid .photo:hover img {
  transform: scale(1.06);
}

/* Hide photos beyond the 6th initially */
.gallery-grid .photo:nth-child(n+7) {
  display: none;
}

/* Show More Button */
.show-more-btn {
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-weight: 700;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
}

.show-more-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Gallery Modal */
.gallery-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.95);
  align-items: center;
  justify-content: center;
}

.gallery-modal.active {
  display: flex;
}

.modal-image-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image-container img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2001;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2001;
  transition: all 0.3s ease;
}

.modal-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .modal-nav {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
  
  .modal-prev {
    left: 10px;
  }
  
  .modal-next {
    right: 10px;
  }
  
  .modal-close {
    top: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
  }
}
/* RSVP Section */
.rsvp {
  background: linear-gradient(160deg, #f6f9ff 0%, #ecf3ff 100%);
}

.rsvp .card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.rsvp-intro {
  text-align: center;
  color: var(--ink-2);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.rsvp-form {
  display: grid;
  gap: 20px;
}

.form-row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #e8eef7;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #b8c8e2;
  box-shadow: 0 0 0 4px #eaf1fb;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid #e8eef7;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 180px;
}

.radio-label:hover {
  border-color: #b8c8e2;
  background: #f6f9ff;
}

.radio-label input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.radio-label input[type="radio"]:checked + span {
  font-weight: 700;
  color: var(--accent);
}

.radio-label:has(input:checked) {
  border-color: var(--accent);
  background: #eaf1fb;
}

.rsvp-submit-btn {
  margin-top: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

.rsvp-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 58, 106, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .radio-group {
    flex-direction: column;
  }
  
  .radio-label {
    min-width: auto;
  }
  
  .rsvp .card {
    padding: 24px;
  }
}

/* Color Motif Section */
.color-motif{background:#fff}
.motif-subtitle{text-align:center;color:var(--ink-2);font-size:1.05rem;margin:-0.5rem 0 2rem}
.color-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;max-width:900px;margin:0 auto}
.color-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#f9fbff;border-radius:16px;transition:transform .3s ease}
.color-item:hover{transform:translateY(-4px)}
.color-circle{width:100px;height:100px;border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.15);border:3px solid #fff}
.color-name{font-weight:600;color:var(--ink);text-align:center;font-size:0.95rem}
@media (max-width:600px){.color-palette{grid-template-columns:repeat(2,1fr)}}

/* Music Toggle Button */
.music-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #002A60, #0d47a1);
  color: white;
  font-size: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 4px 20px rgba(0, 42, 96, 0.4);
  transition: all 0.3s ease;
}

.music-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 42, 96, 0.6);
}

@media (max-width: 768px) {
  .music-toggle {
    width: 50px;
    height: 50px;
    font-size: 20px;
    bottom: 20px;
    right: 20px;
  }
}

/* Adjust music button position when back-to-top is visible */
.back-to-top.visible ~ body .music-toggle,
body:has(.back-to-top:not([style*="display: none"])) .music-toggle {
  bottom: 100px;
}

@media (max-width: 768px) {
  .back-to-top.visible ~ body .music-toggle,
  body:has(.back-to-top:not([style*="display: none"])) .music-toggle {
    bottom: 85px;
  }
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}