/* ============================================================
   BATAK WEDDING INVITATION — style.css
   New Light Palette:
   --parchment: #f4f3e0  (warm page background)
   --olive:     #747d40  (Batak olive green)
   --brown:     #745832  (warm brown accent)
   --white:     #ffffff
   --olive-dk:  #4f5628  (darker olive for text/borders)
   ============================================================ */

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --parchment:  #f4f3e0;
  --parchment2: #ecebd3;
  --olive:      #747d40;
  --olive-dk:   #4f5628;
  --olive-lt:   #9aaa56;
  --brown:      #745832;
  --brown-lt:   #9a7448;
  --white:      #ffffff;
  --ink:        #2e2a1e;
  --ink2:       #4a4434;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Outfit', system-ui, sans-serif;
  --font-script:'Great Vibes', cursive;

  --shadow-sm: 0 2px 12px rgba(116,88,50,.10);
  --shadow-md: 0 8px 32px rgba(116,88,50,.14);
  --shadow-lg: 0 20px 60px rgba(116,88,50,.18);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  font-family: var(--font-sans);
  background: var(--parchment);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  scroll-snap-type: y mandatory;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

section[id] {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 20px 4vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.hidden  { display: none !important; }
.visible { display: block; }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── FLOATING SHAPES ──────────────────────────────────────── */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.fs-1 { width:240px; height:240px; background:radial-gradient(circle, rgba(116,125,64,0.22), transparent 70%); top:-60px; right:-60px; animation: floatY 6s ease-in-out infinite; }
.fs-2 { width:180px; height:180px; background:radial-gradient(circle, rgba(116,88,50,0.18), transparent 70%); bottom:100px; left:-60px; animation: floatY 8s ease-in-out infinite reverse; }
.fs-3 { width:120px; height:120px; background:radial-gradient(circle, rgba(116,125,64,0.15), transparent 70%); top:50%; right:20px; animation: floatY 7s ease-in-out infinite 1s; }
.fs-4 { width:280px; height:280px; background:radial-gradient(circle, rgba(116,88,50,0.12), transparent 70%); top:0; left:-80px; animation: floatY 9s ease-in-out infinite; }
.fs-5 { width:200px; height:200px; background:radial-gradient(circle, rgba(116,125,64,0.15), transparent 70%); bottom:0; right:-60px; animation: floatY 7.5s ease-in-out infinite reverse; }
.fs-6 { width:220px; height:220px; background:radial-gradient(circle, rgba(116,88,50,0.14), transparent 70%); top:20px; right:-70px; animation: floatY 10s ease-in-out infinite; }
.fs-7 { width:160px; height:160px; background:radial-gradient(circle, rgba(116,125,64,0.12), transparent 70%); top:10%; left:-50px; animation: floatY 8.5s ease-in-out infinite reverse; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

/* ── ENVELOPE COVER ───────────────────────────────────────── */
.envelope-cover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.76,0,0.24,1), opacity 0.6s ease;
}
.envelope-cover.opening {
  transform: translateY(-100vh);
  opacity: 0;
  pointer-events: none;
}
.env-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #e8e6cb 0%, var(--parchment) 40%, #ece9d0 100%);
}
.env-pattern {
  position: absolute;
  inset: 0;
  /* background-image: url('ulos_pattern.png'); */
  background-size: 280px;
  opacity: 0.12;
  animation: patternScroll 40s linear infinite;
}
@keyframes patternScroll {
  from { background-position: 0 0; }
  to   { background-position: 280px 280px; }
}
.env-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 400px;
  width: 100%;
}
.env-gorga {
  font-size: 2rem;
  color: var(--olive);
  /* letter-spacing: 8px; */
  margin-bottom: 28px;
  animation: fadeGlow 2s ease-in-out infinite alternate;
}
@keyframes fadeGlow {
  from { opacity: 0.6; text-shadow: 0 0 8px rgba(116,125,64,0.3); }
  to   { opacity: 1;   text-shadow: 0 0 20px rgba(116,125,64,0.6); }
}
.env-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 3px;
  color: rgba(46,42,30,0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.env-logo {
  width: clamp(150px, 18vh, 160px);
  height: auto;
  /* margin: 16px 0 24px; */
  filter: drop-shadow(0 4px 12px rgba(116,88,50,0.15));
  /* animation: logoPresence 5s ease-in-out infinite alternate; */
}

.env-logo2 {
  width: clamp(200px, 18vh, 160px);
  height: auto;
  /* margin: 16px 0 24px; */
  filter: drop-shadow(0 4px 12px rgba(116,88,50,0.15));
  /* animation: logoPresence 5s ease-in-out infinite alternate; */
}

@keyframes logoPresence {
  from { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 12px rgba(116,88,50,0.15)); }
  to   { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 15px 35px rgba(116,125,64,0.35)); }
}
.env-guest {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--olive-dk);
  margin-bottom: 24px;
}
.env-sub {
  color: rgba(46,42,30,0.45);
  letter-spacing: 2px;
}
.env-guest-name {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--olive-dk);
  margin-bottom: 5px;
  text-transform: capitalize;
}
.env-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
  margin-bottom: 24px;
  gap: 4px;
}
.seal-icon {
  font-size: 2.2rem;
  color: var(--olive);
  animation: rotateSeal 8s linear infinite;
}
@keyframes rotateSeal {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.seal-text {
  font-size: 0.65rem;
  letter-spacing: 4px;
  color: var(--brown);
  text-transform: uppercase;
}
.open-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--olive-dk), var(--olive));
  color: var(--white);
  border: none;
  padding: 16px 36px;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 8px 30px rgba(116,125,64,0.35);
}
.open-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brown), var(--brown-lt));
  opacity: 0;
  transition: opacity 0.4s;
}
.open-btn:hover::before { opacity: 1; }
.open-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(116,88,50,0.35); }
.btn-text, .btn-arrow { position: relative; z-index: 1; }
.btn-arrow { animation: bounceArrow 1.5s ease-in-out infinite; }
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}
.env-bottom-gorga {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--olive), var(--brown), var(--olive), transparent);
}

/* ── MAIN SITE ────────────────────────────────────────────── */
.main-site { position: relative; }

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(244,243,224,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(116,125,64,0.25);
  transition: var(--transition);
}
.navbar.scrolled {
  padding: 10px 20px;
  background: rgba(244,243,224,0.97);
  box-shadow: var(--shadow-sm);
}
.nav-logo {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--olive-dk);
}
.nav-toggle {
  background: none;
  border: 1px solid rgba(116,125,64,0.35);
  color: var(--olive-dk);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.nav-toggle:hover { background: rgba(116,125,64,0.1); }
.nav-links {
  display: flex;
  gap: 4px;
}
.nav-link {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(46,42,30,0.65);
  padding: 6px 12px;
  border-radius: 6px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: var(--olive-dk);
  background: rgba(116,125,64,0.12);
}

/* ── SECTION DIVIDER ──────────────────────────────────────── */
.section-divider {
  /* display: flex;
  justify-content: center;
  padding: 8px 0;
  overflow: hidden;
  background: transparent; */
}
.divider-img {
  width: 100%;
  max-width: 600px;
  height: 48px;
  object-fit: cover;
  opacity: 0.55;
}

/* ── SECTION COMMONS ──────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: clamp(16px, 4vh, 48px); flex-shrink: 0; }
.section-tag {
  display: block;
  font-size: clamp(0.65rem, 1.5vh, 0.75rem);
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: clamp(8px, 1.5vh, 12px);
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vh, 2.6rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: clamp(6px, 1.5vh, 12px);
}
.section-sub {
  font-size: clamp(0.75rem, 2vh, 0.92rem);
  color: rgba(46,42,30,0.6);
  line-height: 1.4;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: linear-gradient(180deg, var(--parchment) 0%, #e8e7cc 50%, var(--parchment2) 100%);
  padding: 0 !important;
}
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  /* background-image: url('ulos_pattern.png'); */
  background-size: 200px;
  opacity: 0.08;
  animation: patternScroll 60s linear infinite;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(10px, 2vh, 40px) 20px;
  max-width: 480px;
  width: 100%;
  flex-shrink: 0;
}
.hero-pre {
  font-size: 0.75rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 40px;
}
.hero-couple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.hero-name {
  font-family: var(--font-script);
  font-size: 5rem;
  color: var(--olive-dk);
  line-height: 1.05;
  text-shadow: 0 4px 20px rgba(116,88,50,0.2);
}
.hero-amp {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--olive-dk);
  line-height: 1;
}
.hero-sub {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 3px;
  margin-bottom: 32px;
}
.hero-img-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
  border-radius: 0 0 9999px 9999px;
  overflow: hidden;
  border-bottom: 4px solid var(--olive);
  box-shadow: 0 8px 40px rgba(116,88,50,0.2);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244,243,224,0.9) 0%, rgba(244,243,224,0.5) 60%, rgba(244,243,224,0) 100%);
  z-index: 2;
}
.hero-text-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 20px 2vh;
  text-align: center;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  z-index: 1;
}
/* Decorative pulsing ring — overlaid inside the wrap so it crops to the arch */
.hero-img-ring {
  position: absolute;
  inset: 16px;
  border-radius: 0 0 9999px 9999px;
  border: 1px solid rgba(255,255,255,0.6);
  pointer-events: none;
  animation: ringPulse 3s ease-in-out infinite;
  z-index: 4;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50%       { transform: scale(1.02); opacity: 0.85; }
}
/* Outer dashed border ring */
.hero-img-border {
  position: absolute;
  inset: 24px;
  border-radius: 0 0 9999px 9999px;
  border: 1px dashed rgba(255,255,255,0.5);
  pointer-events: none;
  animation: ringPulse 3s ease-in-out infinite 0.5s;
  z-index: 4;
}
.hero-savethedate {
  font-family: var(--font-script);
  font-size: clamp(3rem, 12vw, 5rem);
  color: var(--olive-dk);
  line-height: 1.2;
  margin-top: clamp(20px, 3vh, 32px);
  text-align: center;
  text-shadow: 0 4px 20px rgba(116,88,50,0.15);
  z-index: 5;
  animation: glowText 3s ease-in-out infinite alternate;
}
@keyframes glowText {
  from { text-shadow: 0 4px 15px rgba(116,88,50,0.1); }
  to { text-shadow: 0 6px 25px rgba(116,88,50,0.3); }
}

.hero-chevron {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  z-index: 5;
}

.chevron-icon {
  font-size: 3rem;
  color: var(--olive-dk);
  opacity: 0.8;
  animation: bounceDown 2s infinite ease-in-out;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(10px); opacity: 1; }
}

.hero-date {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 20px);
  margin-bottom: clamp(16px, 4vh, 32px);
  padding: clamp(12px, 2vh, 20px) clamp(20px, 5vw, 36px);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(116,125,64,0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  animation: spinPulse 1s infinite ease-in-out;
}
.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.date-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--olive-dk);
  line-height: 1;
}
.date-label {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(46,42,30,0.45);
  margin-top: 4px;
}
.date-divider {
  width: 1px;
  height: 50px;
  background: rgba(116,125,64,0.3);
}



/* ── SCROLL HINT ──────────────────────────────────────────── */
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(46,42,30,0.35);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.scroll-line {
  width: 40px;
  height: 1px;
  background: rgba(46,42,30,0.2);
}
.scroll-txt { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}

/* ── STORY ────────────────────────────────────────────────── */
.story-section {
  position: relative;
  overflow: hidden;
  padding: 0 !important; /* overrides global section padding for full-bleed */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--parchment2); /* solid fallback or base color */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.story-main-img-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  flex: 4;
  margin: 0;
  overflow: hidden;
  box-shadow: none;
  border-radius: 0;
}
.story-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.story-text-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  flex: 3;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.story-text {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 2.8vh, 1.3rem);
  color: var(--ink);
  line-height: 1.6;
}
.story-collage {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  flex: 4;
  margin: 0;
  gap: clamp(40px, 4vw, 40px);
  padding: 0 clamp(20px, 5vw, 40px) clamp(24px, 4vh, 40px) clamp(20px, 5vw, 40px);
}
.story-collage-img-wrap {
  flex: 1;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(116,88,50,0.15);
  border: 1px solid rgba(116,125,64,0.1);
}
.story-collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zoom-anim {
  animation: imageZoomInOut 10s infinite ease-in-out;
  transform-origin: center 45%;
}

@keyframes imageZoomInOut {
  0% { transform: scale(1); }
  66.6% { transform: scale(2.5); } /* 4s / 6s = 66.6% */
  100% { transform: scale(1); }
}
/* .story-leaf-ornament {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 20vh, 120px);
  height: clamp(160px, 40vh, 240px);
  z-index: 2;
  pointer-events: none;
}
.story-leaf-ornament svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(46,42,30,0.12));
} */

/* ── DETAILS ──────────────────────────────────────────────── */
.modern-details {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important; /* overrides global section padding for full bleed */
  background: var(--parchment);
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.details-top-img {
  width: 100%;
  flex: 2;
  position: relative;
  overflow: hidden;
}

.details-top-img .venue-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.details-top-img .venue-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(46,42,30,0.5) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
}

.venue-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 20px;
}

.venue-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 300;
  color: var(--white);
  letter-spacing: 2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.venue-brief-info {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 6vw, 60px);
  width: 100%;
  max-width: 600px;
}

.vb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vb-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}

.vb-value {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--white);
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.details-bottom-clean {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  padding: clamp(12px, 2vh, 24px);
}

.details-venue-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(12px, 2vh, 24px);
}

.venue-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 3vh, 1.5rem);
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
  opacity: 0.85;
}

.showcase-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 800px;
  gap: clamp(16px, 3vw, 40px);
}

.info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.map-wrapper {
  width: 100%;
  max-width: 300px;
  height: clamp(120px, 20vh, 180px);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(116,125,64,0.15);
  margin-bottom: 4px;
}

.embedded-map {
  width: 100%;
  height: 100%;
  border: none;
  filter: sepia(10%) saturate(1.1);
}

.pure-qr-img {
  width: auto;
  max-width: 100%;
  height: clamp(120px, 20vh, 180px);
  object-fit: contain;
  margin-bottom: 4px;
}

.info-text {
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink2);
}


/* ── DRESS CODE ───────────────────────────────────────────── */
.dresscode-section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex !important;
  flex-direction: column;
}

.dresscode-details-text {
  display: flex !important;
  flex-direction: row !important;
  font-weight: bold;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 5vw, 48px);
  padding: clamp(12px, 2vh, 20px) 20px;
  text-align: center;
  background: var(--parchment);
}

.dc-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dc-column p {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 2vh, 1.1rem);
  color: var(--ink);
  line-height: 1.4;
}

.dresscode-palette-img-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  background: var(--parchment);
  padding: 16px 0 0 0;
}

.palette-title {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 3vh, 1.5rem);
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
  opacity: 1;
  animation: rgbCycle 3s infinite linear;
}

@keyframes rgbCycle {
  0% { color: #ff4848 } /* Soft Red */
  20% { color: #d0c830; } /* Soft Green */
  40% { color: #208420; } /* Soft Green */
  60% { color: #3030c3; } /* Soft Blue */
  80% { color: #a72b90; } /* Soft Purple */
  100% { color: #ff4848; }
}

.dresscode-palette-img {
  max-width: 320px;
  width: 90%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(116,88,50,0.10);
  border: 1px solid var(--parchment2);
}

.details-bottom-clean {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  padding: clamp(12px, 2vh, 24px);  
}

.dresscode-note {
  margin-top: 10px;
  text-align: center;
  z-index: 5;
  position: relative;
}

.dresscode-note p {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 2vh, 1.1rem);
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

.note-mdn {
  font-style: italic;
  font-size: 0.8rem !important;
  opacity: 0.7;
  margin-top: 4px !important;
}

.people-wave-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.waving-people-img {
  max-width: 100%;
  max-height: 90%;
  object-fit: contain;
  transform-origin: bottom center;
  animation: waveAnim 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 16px rgba(116,88,50,0.15));
  position: relative;
  z-index: 2;
}

.grass-img {
  position: absolute;
  bottom: -80px;
  width: 100%;
  /* left: -10%; */
  /* height: clamp(150px, 45%, 350px); */
  object-fit: contain;
  transform-origin: bottom center;
  /* animation: grassWave 3.5s ease-in-out infinite alternate; */
  filter: opacity(0.9) drop-shadow(0 4px 10px rgba(116,88,50,0.15));
  z-index: 1;
}

@keyframes grassWave {
  0% { transform: rotate(-3deg) translateY(2px); }
  100% { transform: rotate(3deg) translateY(-2px); }
}

.flower-img {
  position: absolute;
  bottom: -5px; /* Slight tuck to hide the bottom cut */
  height: clamp(180px, 90%, 350px);
  width: auto;
  object-fit: contain;
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 16px rgba(116,88,50,0.15));
  z-index: 3;
}

.flower-left {
  left: -40%; /* Slight tuck to counteract any transparent PNG borders */
  bottom: -20%;
  rotate: 45deg;
  animation: flowerWaveLeft 1.5s ease-in-out infinite alternate;
}

.flower-right {
  right: -40%;
  bottom: -20%;
  rotate: -45deg;
  animation: flowerWaveRight 1.5s ease-in-out infinite alternate;
}

@keyframes waveAnim {
  0% { transform: rotate(-4deg) translateY(2px); }
  100% { transform: rotate(8deg) translateY(-2px); }
}

@keyframes flowerWaveLeft {
  0% { transform: scaleX(-1) rotate(-8deg) translateY(0); }
  100% { transform: scaleX(-1) rotate(6deg) translateY(-3px); }
}

@keyframes flowerWaveRight {
  0% { transform: rotate(8deg) translateY(0); }
  100% { transform: rotate(-6deg) translateY(-3px); }
}

/* ── GIFT ─────────────────────────────────────────────────── */
.modern-gift {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gift-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  z-index: 1;
}

.gift-layout-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.gl-top-right {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 40px);
  display: flex;
  /* align-items: center; */
  gap: 16px;
  pointer-events: auto;
}

.gl-text {
  margin-top: clamp(20px, 4vh, 40px);
  text-align: right;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.fleur-de-leah-regular {
  font-family: "Fleur De Leah", cursive;
  font-weight: 400;
  font-style: normal;
}

.gl-title {
  text-align: left;
  font-family: "Fleur De Leah", cursive;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400;
}

.gl-title2 {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 6vw, 6rem);
  margin-bottom: 4px;
}

.gl-subtitle {
  margin-top: clamp(20px, 4vh, 40px);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1rem);
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.gl-img-top {
  width: clamp(200px, 140vw, 150px);
  /* height: clamp(80px, 15vw, 150px); */
  object-fit: cover;
  border-radius: var(--radius-sm);
  /* box-shadow: 0 8px 24px rgba(0,0,0,0.25); */
  /* border: 2px solid rgba(255,255,255,0.3); */
}

.gl-bottom-left {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  /* left: clamp(20px, 4vw, 40px); */
  pointer-events: auto;
}

.gl-img-bottom {
  width: clamp(180px, 25vw, 200px);
  height: clamp(180px, 25vw, 200px);
  /* object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.4); */
}

.gl-bottom-right {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
  text-align: center;
  align-items: center; /* Ensure contents like gift-intro are centered */
}

.gift-intro {
  font-family: var(--font-serif);
  /* font-size: clamp(0.85rem, 2vh, 1rem); */
  /* color: var(--white); */
  /* max-width: 280px; */
  line-height: 1.4;
  margin-bottom: 4px;
  /* text-shadow: 0 2px 12px rgba(0,0,0,0.6); */
  opacity: 0.9;
}

.account-card {
  background: #07417e;
  opacity: 0.8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px;
  border-radius: var(--radius-sm);
  color: var(--white);
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-right: 4px solid var(--white);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.account-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('bca.png') center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
}

.account-card2 {
  background: #281b85;
  opacity: 0.8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px;
  border-radius: var(--radius-sm);
  color: var(--white);
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-right: 4px solid var(--white);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.account-card2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('ovo.png') center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
}

.account-card3 {
  background: #175bad;
  opacity: 0.8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px;
  border-radius: var(--radius-sm);
  color: var(--white);
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-right: 4px solid var(--white);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.account-card3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('bri.png') center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
}

.acc-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  /* margin-bottom: 6px; */
  opacity: 0.7;
}

.acc-number {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vh, 1.4rem);
  letter-spacing: 1px;
  /* margin-bottom: 4px; */
}

.acc-name {
  font-size: 0.7rem;
  opacity: 0.6;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── RSVP ─────────────────────────────────────────────────── */
.rsvp-section {
  position: relative;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--parchment2) 0%, var(--parchment) 100%);
  padding: 0 !important;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.rsvp-layout {
  display: flex;
  flex-direction: column-reverse;
  height: auto;
  width: 100%;
  padding: 16px;
  gap: 16px;
}
.rsvp-image-side {
  height: 30vh;
  flex: none;
  overflow: hidden;
  display: block;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}
.rsvp-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rsvp-love-img {
  position: absolute;
  top: auto;
  bottom: 15vh; /* Position it overlapping the bottom image */
  right: 0px;
  width: 150px;
  z-index: 3;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  animation: floatLove 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatLove {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-15px) rotate(5deg); }
  50% { transform: translateY(-30px) rotate(-5deg); }
  75% { transform: translateY(-15px) rotate(5deg); }
}
.rsvp-form-side {
  flex: 1;
  padding: clamp(12px, 3vh, 32px) 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow-y: auto;
}
.rsvp-form-side .section-header {
  margin-bottom: clamp(6px, 1.5vh, 12px);
}
.rsvp-title-shape {
  width: clamp(24px, 4vh, 40px);
  margin: clamp(10px, 2vh, 20px) auto 4px;
  display: block;
  opacity: 0.8;
}
.rsvp-form {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
  width: 100%;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive-dk);
  font-weight: 600;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.number-input-wrap {
  background: transparent !important;
  border: 1px solid rgba(116,125,64,0.4) !important;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 10px 16px;
  outline: none;
  transition: var(--transition);
  box-shadow: none !important;
}
.form-group input:focus,
.form-group textarea:focus,
.number-input-wrap:focus-within {
  border-color: var(--olive) !important;
  background: rgba(116,125,64,0.03) !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(46,42,30,0.3); }
.form-group textarea { resize: vertical; min-height: 60px; }

.number-input-wrap {
  display: flex;
  align-items: center;
  padding: 0 !important;
  overflow: hidden;
}
.num-btn {
  background: rgba(116,125,64,0.05);
  border: none;
  color: var(--olive-dk);
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.num-btn:hover { background: rgba(116,125,64,0.1); }
.number-input-wrap input {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(116,125,64,0.2) !important;
  border-right: 1px solid rgba(116,125,64,0.2) !important;
  text-align: center;
  flex: 1;
  padding: 0 !important;
  height: 48px;
}

.rsvp-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--olive-dk), var(--olive));
  color: var(--white);
  border: none;
  padding: 16px;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 8px 24px rgba(116,125,64,0.3);
  /* margin-top: 8px; */
}
.rsvp-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(116,88,50,0.25); }

.rsvp-success {
  text-align: center;
  padding: 24px 20px;
  background: rgba(116,125,64,0.05);
  border: 1px solid rgba(116,125,64,0.2);
  border-radius: var(--radius-lg);
  margin-top: 16px;
}
.success-icon { font-size: 3rem; margin-bottom: 16px; }
.rsvp-success h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--olive-dk);
  margin-bottom: 12px;
}
.rsvp-success p {
  font-size: 0.9rem;
  color: rgba(46,42,30,0.65);
  line-height: 1.6;
}

/* ── WISHES ───────────────────────────────────────────────── */
.wishes-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment2) 100%);
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8vh 20px 4vh !important;
}

/* Messages Board */
.messages-board {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(116, 125, 64, 0.2);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(116, 88, 50, 0.08);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.mb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(116, 125, 64, 0.3);
}

.mb-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--olive-dk);
}

.mb-count {
  background: var(--olive);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(116, 125, 64, 0.3);
}

.messages-scroll-container {
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 125, 64, 0.4) transparent;
  flex: 1;
  min-height: 0;
}

.messages-scroll-container::-webkit-scrollbar {
  width: 4px;
}
.messages-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(116, 125, 64, 0.4);
  border-radius: 4px;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  padding: 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(116, 88, 50, 0.05);
  border: 1px solid rgba(116, 125, 64, 0.1);
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.msg-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(116, 88, 50, 0.1);
  border-color: rgba(116, 125, 64, 0.3);
}

.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive), var(--olive-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(116, 125, 64, 0.3);
}

.msg-body {
  flex: 1;
}

.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.msg-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--olive-dk);
}

.msg-text {
  font-size: 0.85rem;
  color: rgba(46, 42, 30, 0.75);
  line-height: 1.5;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--parchment2) 0%, var(--parchment) 100%);
  text-align: center;
  border-top: 1px solid rgba(116,125,64,0.2);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.footer-pattern {
  position: absolute;
  inset: 0;
  /* background-image: url('ulos_pattern.png'); */
  background-size: 180px;
  opacity: 0.07;
}
.footer-inner { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; }
.footer-gorga {
  font-size: 1.1rem;
  color: var(--olive);
  letter-spacing: 8px;
  margin-bottom: 24px;
  animation: fadeGlow 2s ease-in-out infinite alternate;
}
.footer-names {
  font-family: var(--font-script);
  font-size: 3.5rem;
  color: var(--ink);
  text-shadow: 0 4px 20px rgba(116,88,50,0.2);
  margin-bottom: 20px;
}
.footer-verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(46,42,30,0.55);
  line-height: 1.9;
  margin-bottom: 20px;
}
.footer-verse small { font-size: 0.72rem; color: var(--brown); letter-spacing: 2px; }
.footer-date {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 6px;
  color: var(--olive-dk);
  margin-bottom: 28px;
}
.footer-thanks {
  font-size: 0.85rem;
  color: rgba(46,42,30,0.5);
  line-height: 1.8;
  margin-bottom: 28px;
}
.footer-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--olive), transparent);
  margin: 0 auto 24px;
}
.footer-copy {
  font-size: 0.72rem;
  color: rgba(46,42,30,0.3);
  letter-spacing: 1px;
}

/* ── MUSIC BUTTON ─────────────────────────────────────────── */
.music-btn {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--olive);
  border: 2px solid rgba(255,255,255,0.5);
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(116,125,64,0.4);
  transition: var(--transition);
}
.music-btn:hover { transform: scale(1.1); background: var(--olive-dk); box-shadow: 0 8px 28px rgba(116,88,50,0.35); }
.music-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px; /* gives some breathing room inside the circle */
  transition: var(--transition);
  animation: discRotation 3s linear infinite;
  animation-play-state: paused;
}
.music-btn.playing { animation: spinPulse 4s linear infinite; }
.music-btn.playing .music-icon { animation-play-state: running; }
@keyframes spinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(116,125,64,0.5); }
  50%  { box-shadow: 0 0 0 12px rgba(116,125,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(116,125,64,0); }
}
@keyframes discRotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar { display: none !important; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(244,243,224,0.98);
    border-bottom: 1px solid rgba(116,125,64,0.2);
    backdrop-filter: blur(20px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .nav-links.open { max-height: 400px; }
  .nav-link {
    padding: 14px 24px;
    border-radius: 0;
    border-bottom: 1px solid rgba(46,42,30,0.06);
  }

  .hero-name { font-size: 4rem; }
  .section-title { font-size: 2.1rem; }
  .cd-block { min-width: 56px; padding: 10px 12px; }
  .cd-num { font-size: 1.7rem; }

  .tl-left  { padding-right: 28px; }
  .tl-right { padding-left: 28px; }

  .dc-cards { grid-template-columns: 1fr; }

  .rsvp-layout { flex-direction: column-reverse; height: auto; padding: 16px; gap: 16px; }
  .rsvp-image-side { height: 30vh; flex: none; border-radius: var(--radius-md); }
  .rsvp-section { height: 100vh; overflow-y: auto; }
}

@media (max-width: 400px) {
  .hero-name  { font-size: 3.2rem; }
  .hero-amp   { font-size: 1.5rem; }
  .countdown  { gap: 4px; }
  .cd-block   { min-width: 50px; padding: 8px 10px; }
  .cd-num     { font-size: 1.5rem; }
  .cd-sep     { font-size: 1.4rem; }
  .date-num   { font-size: 2rem; }
}

@media (min-width: 769px) {
  .hero-inner, .story-section .story-intro, .timeline,
  .events-grid, .map-container, .gift-cards,
  .rsvp-form, .messages-board, .dc-palette, .dc-cards, .dc-img-wrap, .dc-note-box {
    max-width: 480px;
  }

  /* Desktop: phone mockup centered */
  .main-site {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(46,42,30,0.2), 0 0 0 1px rgba(116,125,64,0.15);
    height: 100vh;
    position: relative;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  body { background: var(--parchment2); }
}



/* ── CONFIRMATION DIALOG ─────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46,42,30,0.6);
  backdrop-filter: blur(4px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.confirm-overlay.active { opacity: 1; pointer-events: auto; }
.confirm-card {
  background: var(--parchment);
  padding: 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 380px;
  width: 90%;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(116,125,64,0.2);
}
.confirm-overlay.active .confirm-card { transform: translateY(0); }
.confirm-icon { font-size: 3rem; margin-bottom: 16px; }
.confirm-card h3 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--olive-dk); margin-bottom: 8px; }
.confirm-card p { font-size: 0.9rem; color: rgba(46,42,30,0.6); margin-bottom: 20px; }
.confirm-details {
  background: rgba(116,125,64,0.05);
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  text-align: left;
}
.cd-row { font-size: 0.9rem; margin-bottom: 4px; color: var(--ink); }
.cd-row strong { color: var(--olive-dk); }
.confirm-btns {
  display: flex;
  gap: 12px;
}
.confirm-cancel, .confirm-yes {
  flex: 1;
  padding: 12px;
  border-radius: 50px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
.confirm-cancel { background: transparent; border: 1px solid var(--olive); color: var(--olive-dk); }
.confirm-yes { background: var(--olive); color: var(--white); }
.confirm-cancel:hover { background: rgba(116,125,64,0.1); }
.confirm-yes:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(116,125,64,0.3); }

/* ── SUCCESS OVERLAY ────────────────────────────────────── */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46,42,30,0.8);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.success-overlay.active { opacity: 1; pointer-events: auto; }
.so-content {
  background: var(--parchment);
  padding: 40px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 400px;
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-lg);
}
.success-overlay.active .so-content { transform: scale(1); }
.so-icon { font-size: 4rem; margin-bottom: 20px; }
.so-content h2 { font-family: var(--font-serif); margin-bottom: 12px; color: var(--olive-dk); }
.so-content p { color: rgba(46,42,30,0.6); margin-bottom: 32px; }
.so-close {
  background: var(--olive);
  color: var(--white);
  border: none;
  padding: 12px 32px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition);
}
.so-close:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(116,125,64,0.3); }

/* ── CONFETTI ──────────────────────────────────── */
.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall 3s linear infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.8; }
  70% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── GALLERY ─────────────────────────────────────────────── */
.gallery-section {
  background: var(--olive-lt);
  padding: 10vh 20px !important;
  height: auto !important;
  min-height: 100vh;
  overflow: hidden;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px; /* Proper size box image */
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(116, 88, 50, 0.1);
  background: var(--white);
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.7);
  z-index: 1;
  transform: none !important; /* Ensure it doesn't offset or stagger */
}

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

.gallery-item:hover {
  transform: translateY(-4px) !important;
  z-index: 100 !important;
  box-shadow: 0 20px 40px rgba(116, 88, 50, 0.2);
  border-color: var(--olive);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 576px) {
  .gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
  .gallery-item {
    height: 450px;
    transform: rotate(0deg) !important;
  }
  /* Keep a tiny bit of character for mobile */
  .gallery-item:nth-child(odd) { transform: translateX(5px) rotate(-1deg) !important; }
  .gallery-item:nth-child(even) { transform: translateX(-5px) rotate(1deg) !important; }
}