/* style.css - Optimized version */
:root {
  --lemon: #FFF4C4;
  --lemon-deep: #f0de86;
  --lemon-soft: #FFFBE8;
  --lavender: #DEDAF4;
  --lavender-deep: #b9b2e6;
  --lavender-soft: #F0EEF9;
  --peach: #FFE8D6;
  --peach-deep: #f4c8a8;
  --peach-soft: #FFF3EC;
  --rose: #C55D78;
  --rose-light: #d97f96;
  --rose-pale: #f8eaed;
  --rose-soft: #FDF0F3;
  --sage: #D6ECD6;
  --sage-deep: #a8cca8;

  --dusty-blue: #7aa3bc;
  --dusty-blue-deep: #3d6e8a;
  --dusty-blue-soft: #c0d9e8;
  --dusty-blue-pale: #ddeaf3;
  --dusty-blue-mid: #5c8daa;
  --dusty-blue-dark: #1e3d50;
  --dusty-blue-xdark: #142a38;

  --white: #ffffff;
  --off-white: #fdfbf8;
  --cream: #F6F2EC;
  --charcoal: #1e2d36;
  --mid: #3d5a6a;
  --border: #b0cedd;
  --border-soft: #cce0ec;

  --title: 'Great Vibes', cursive;
  --head: 'Playfair Display', Georgia, serif;
  --body: 'Lato', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(61,110,138,.18);
  --shadow-lg: 0 12px 48px rgba(30,61,80,.22);
  --shadow-xl: 0 24px 72px rgba(20,42,56,.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--white);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  font-weight: 700;
}
::selection { background: var(--dusty-blue-soft); color: var(--charcoal); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dusty-blue-xdark); }
::-webkit-scrollbar-thumb { background: var(--dusty-blue-mid); border-radius: 4px; }

/* TYPOGRAPHY */
.tag-label {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dusty-blue-deep);
}
.section-title {
  font-family: var(--head);
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  color: var(--charcoal);
  line-height: 1.08;
  margin-bottom: .5rem;
  font-weight: 700;
}
.section-sub {
  font-family: var(--head);
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  font-style: italic;
  font-weight: 400;
  color: var(--mid);
}
.section-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.btn-rose {
  display: inline-block;
  background: linear-gradient(135deg, var(--dusty-blue-deep), var(--dusty-blue-mid));
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 100px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(61,110,138,.35);
  transition: background .25s, transform .2s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.btn-rose::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  border-radius: inherit;
}
.btn-rose:hover {
  background: linear-gradient(135deg, #2e5570, var(--dusty-blue-deep));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(61,110,138,.42);
  text-decoration: none;
}
.floral-div {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dusty-blue-mid);
}
.floral-div::before, .floral-div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--dusty-blue-soft), transparent);
}

/* NAV */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  background: rgba(20, 42, 56, .97);
  border-bottom: 1px solid rgba(122,163,188,.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .3s, background .3s;
}
.site-nav.scrolled {
  background: rgba(14, 30, 42, .99);
  box-shadow: 0 4px 28px rgba(10, 25, 38, .55);
  border-bottom-color: rgba(122,163,188,.15);
}
.nav-brand {
  font-family: var(--title);
  font-size: 2rem;
  color: var(--dusty-blue-soft);
  text-decoration: none;
  line-height: 1;
  letter-spacing: .03em;
  transition: color .2s;
}
.nav-brand:hover { color: #fff; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(192,217,232,.72);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--dusty-blue-soft); }
.nav-pill {
  background: var(--dusty-blue-deep) !important;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid rgba(122,163,188,.3) !important;
  transition: all .2s !important;
}
.nav-pill:hover {
  background: var(--dusty-blue-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(61,110,138,.4) !important;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: rgba(210,228,240,.85);
  border-radius: 2px;
  transition: all .3s;
}
.mobile-menu {
  display: none;
  position: fixed;
  top: 66px; left: 0; right: 0;
  background: rgba(14, 30, 42, .98);
  border-bottom: 1px solid rgba(122,163,188,.2);
  padding: 1.75rem 2rem;
  z-index: 998;
  box-shadow: 0 12px 32px rgba(10, 25, 38, .4);
  backdrop-filter: blur(16px);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.mobile-menu a {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(192,217,232,.8);
  text-decoration: none;
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--dusty-blue-soft); }
@media(max-width: 768px) { .nav-links { display: none; } .nav-toggle { display: flex; } }

/* HERO */
#hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 115%, rgba(61,110,138,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 8% 12%, rgba(192,217,232,.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 92% 8%, rgba(122,163,188,.45) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 78% 82%, rgba(222,218,244,.25) 0%, transparent 50%),
    radial-gradient(ellipse 35% 30% at 20% 80%, rgba(255,244,196,.3) 0%, transparent 50%),
    linear-gradient(165deg, #f0f6fa 0%, #e8f2f8 35%, #fdfaf7 70%, #f5f0f8 100%);
  isolation: isolate;
}
.hero-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(64px); opacity: .5; }
.hero-blob-1 {
  width: clamp(220px, 40vw, 460px);
  height: clamp(220px, 40vw, 460px);
  background: radial-gradient(circle, var(--dusty-blue-soft), var(--dusty-blue));
  top: -80px; right: -80px;
  animation: blobDrift1 14s ease-in-out infinite alternate;
}
.hero-blob-2 {
  width: clamp(160px, 30vw, 340px);
  height: clamp(160px, 30vw, 340px);
  background: radial-gradient(circle, var(--lemon), var(--peach));
  bottom: 20px; left: -60px;
  animation: blobDrift2 17s ease-in-out infinite alternate;
}
.hero-blob-3 {
  width: clamp(100px, 20vw, 220px);
  height: clamp(100px, 20vw, 220px);
  background: radial-gradient(circle, var(--dusty-blue-mid), var(--dusty-blue-deep));
  top: 40%; right: 3%;
  opacity: .42;
  animation: blobDrift1 11s ease-in-out infinite alternate-reverse;
}
.hero-blob-4 {
  width: clamp(80px, 15vw, 160px);
  height: clamp(80px, 15vw, 160px);
  background: var(--dusty-blue-deep);
  bottom: 18%; left: 6%;
  opacity: .3;
  animation: blobDrift2 13s ease-in-out infinite alternate;
}
@keyframes blobDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(24px,-18px) scale(1.06); } }
@keyframes blobDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-18px,22px) scale(1.04); } }

.hero-eyebrow {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--dusty-blue-deep);
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeUp .8s .2s ease forwards;
}
.hero-title {
  font-family: var(--title);
  font-size: clamp(4.2rem, 14vw, 9.5rem);
  color: var(--dusty-blue-xdark);
  line-height: .95;
  margin-bottom: .3rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeUp .9s .4s ease forwards;
  text-shadow: 0 4px 32px rgba(61,110,138,.2);
}
.hero-sub {
  font-family: var(--body) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(.95rem, 2.8vw, 1.4rem);
  color: var(--mid);
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeUp .8s .6s ease forwards;
}
.hero-date-simple {
  font-family: var(--title);
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 400;
  color: var(--dusty-blue-deep);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  letter-spacing: .02em;
  line-height: 1.2;
  opacity: 0;
  animation: fadeUp .8s .75s ease forwards;
}
.hero-time-simple {
  font-family: var(--body);
  font-size: clamp(.85rem, 2.5vw, 1.1rem);
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dusty-blue-mid);
  margin-top: -.8rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeUp .8s .85s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.countdown-box {
  display: flex;
  max-width: 400px;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 28px rgba(61,110,138,.18), 0 1px 0 rgba(255,255,255,.9) inset;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeUp .8s .9s ease forwards;
}
.cd-cell {
  flex: 1;
  padding: 1.25rem .5rem;
  text-align: center;
  border-right: 1.5px solid var(--border);
  position: relative;
}
.cd-cell:last-child { border-right: none; }
.cd-num {
  font-family: var(--head);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 700;
  color: var(--dusty-blue-deep);
  display: block;
  line-height: 1;
  letter-spacing: -.02em;
}
.cd-lbl {
  font-family: var(--body);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dusty-blue-mid);
  display: block;
  margin-top: 5px;
}
.music-player {
  position: relative;
  z-index: 1;
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
  background: rgba(235,245,252,.96);
  border: 1.5px solid rgba(122,163,188,.3);
  border-radius: 60px;
  padding: 10px 20px;
  box-shadow: 0 4px 22px rgba(61,110,138,.16);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  animation: fadeUp .8s 1.1s ease forwards;
}
.mp-play {
  background: linear-gradient(135deg, var(--dusty-blue-deep), var(--dusty-blue-mid));
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 3px 14px rgba(61,110,138,.38);
  flex-shrink: 0;
}
.mp-play:hover { filter: brightness(1.1); transform: scale(1.05); }
.mp-seek-area { flex: 1; display: flex; align-items: center; }
.mp-seek {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 10px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.mp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dusty-blue-deep);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(61,110,138,.4);
}
.mp-mute {
  background: transparent;
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dusty-blue-deep);
  transition: background .2s;
  flex-shrink: 0;
}
.mp-mute:hover { background: var(--dusty-blue-pale); }
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .38;
  animation: fadeUp .8s 1.4s ease both;
}
.scroll-cue span {
  font-family: var(--body);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--dusty-blue-deep);
}
.scroll-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--dusty-blue-deep), transparent);
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* ABOUT */
#about {
  background: linear-gradient(180deg, #e8f4fa 0%, #cfe4f0 20%, var(--peach-soft) 60%, var(--off-white) 100%);
  padding: 0 0 clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  isolation: isolate;
}
.debutante-banner {
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dusty-blue-xdark) 0%, var(--dusty-blue-dark) 40%, #2c5266 60%, var(--dusty-blue-xdark) 100%);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.debutante-banner img.banner-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.debutante-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(20,42,56,.15) 0%,
    rgba(20,42,56,.08) 38%,
    rgba(20,42,56,.5) 54%,
    rgba(20,42,56,.38) 100%);
  z-index: 1;
}
.debutante-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.15) 100%);
  z-index: 1;
}
.banner-divider {
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(192,217,232,.4), transparent);
  z-index: 2;
  transform: translateX(-50%);
}
.banner-right {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.b-tag {
  font-family: var(--body);
  font-size: clamp(8px, 1.1vw, 11px);
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dusty-blue-soft);
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}
.b-title {
  font-family: var(--head);
  font-size: clamp(1.6rem, 4.8vw, 4.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  margin-bottom: clamp(.4rem, 1vw, .75rem);
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.b-sub {
  font-family: var(--head);
  font-size: clamp(.65rem, 1.3vw, 1.05rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(192,217,232,.82);
  line-height: 1.55;
}
.b-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}
.b-deco-line {
  width: clamp(20px, 4vw, 44px);
  height: 1px;
  background: linear-gradient(to right, var(--dusty-blue-soft), transparent);
}
.b-deco-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dusty-blue-soft); flex-shrink: 0; }
.banner-right .b-quote-mark {
  font-family: var(--title);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--dusty-blue-soft);
  line-height: .8;
  margin-bottom: clamp(.3rem, .8vw, .6rem);
  opacity: .8;
}
.banner-right .b-quote-text {
  font-family: var(--head);
  font-size: clamp(.7rem, 1.35vw, 1.05rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(235,247,253,.92);
  line-height: 1.72;
  margin-bottom: clamp(.75rem, 2vw, 1.5rem);
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.banner-right .b-name-line { display: flex; align-items: center; gap: 10px; }
.banner-right .b-name-bar {
  width: clamp(16px, 3vw, 28px);
  height: 1.5px;
  background: var(--dusty-blue-soft);
  border-radius: 2px;
  flex-shrink: 0;
}
.banner-right .b-name {
  font-family: var(--body);
  font-size: clamp(7px, 1vw, 10px);
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(192,217,232,.85);
}
.banner-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; opacity: .18; pointer-events: none; z-index: 0;
}
.banner-placeholder svg { color: #fff; }
.banner-placeholder span {
  font-family: var(--body); font-size: 10px;
  font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.mobile-quote-container {
  display: none;
  text-align: center;
  max-width: 500px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}
.mq-quote-mark { font-family: var(--title); font-size: 2.5rem; color: var(--dusty-blue-mid); line-height: 1; margin-bottom: .5rem; }
.mq-quote-text { font-family: var(--head); font-size: 1rem; font-style: italic; font-weight: 400; color: var(--charcoal); line-height: 1.72; margin-bottom: 1.2rem; }
.mq-name-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mq-name-bar { width: 28px; height: 1.5px; background: var(--dusty-blue-mid); border-radius: 2px; }
.mq-name { font-family: var(--body); font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--dusty-blue-deep); }

@media(max-width: 600px) {
  .debutante-banner { aspect-ratio: 3/2; }
  .banner-divider { display: none; }
  .banner-right {
    position: absolute; top: 0; left: 0;
    width: 100% !important; height: 100%;
    padding: 1rem 1.4rem 1rem 2rem;
    justify-content: center; text-align: right !important;
  }
  .b-title { font-size: clamp(1.5rem, 4.2vw, 1.5rem) !important; margin-bottom: .2rem !important; text-align: right !important; }
  .b-deco { margin-top: .25rem !important; margin-bottom: .25rem !important; justify-content: flex-end !important; }
  .banner-right .b-name-line { justify-content: flex-end !important; }
  .banner-right .b-quote-mark, .banner-right .b-quote-text { display: none !important; }
  .mobile-quote-container { display: block; }
}
.tag-label-large {
  font-family: var(--head);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dusty-blue-deep);
  text-transform: none;
}

/* 18 FACTS WIDGET */
.debut-facts-widget { margin: 2rem 0; width: 100%; }
.debut-facts-widget .masthead { text-align: center; width: 100%; max-width: 780px; margin: 0 auto 32px; }
.debut-facts-widget .masthead-over {
  font-family: var(--body);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--dusty-blue-mid);
  margin-bottom: 12px;
  display: block;
}
.debut-facts-widget .masthead-title {
  font-family: var(--head);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.06;
  font-size: clamp(28px, 8vw, 54px);
  margin-bottom: 8px;
}
.debut-facts-widget .masthead-title em { font-style: italic; color: var(--dusty-blue-deep); }
.debut-facts-widget .masthead-sub { font-family: var(--head); font-size: clamp(13px, 3vw, 17px); font-style: italic; color: var(--mid); margin-top: 8px; }
.debut-facts-widget .masthead-deco { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.debut-facts-widget .masthead-deco .line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--dusty-blue-mid)); }
.debut-facts-widget .masthead-deco .line.r { background: linear-gradient(90deg, var(--dusty-blue-mid), transparent); }
.debut-facts-widget .masthead-deco .diamond { width: 7px; height: 7px; background: var(--dusty-blue-deep); transform: rotate(45deg); border-radius: 1px; }
.debut-facts-widget .stage-wrap { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.debut-facts-widget .card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; will-change: transform, opacity; }
@media(max-width: 539px) { .debut-facts-widget .card-pair { grid-template-columns: 1fr; gap: 14px; } }
.debut-facts-widget .fact-card {
  background: #fff;
  border-radius: 20px;
  padding: clamp(20px, 4vw, 34px) clamp(18px, 3.5vw, 30px) clamp(18px, 3.5vw, 28px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(61,110,138,.06), 0 10px 36px rgba(61,110,138,.12);
  transition: box-shadow .25s ease, transform .25s ease;
  border: 1px solid rgba(180,212,228,.35);
}
.debut-facts-widget .fact-card:hover { box-shadow: 0 6px 0 rgba(61,110,138,.08), 0 18px 48px rgba(61,110,138,.18); transform: translateY(-2px); }
.debut-facts-widget .fact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
}
.debut-facts-widget .fact-card.accent-lavender::before { background: linear-gradient(90deg, #c8c2e8, #a09acc); }
.debut-facts-widget .fact-card.accent-blue::before { background: linear-gradient(90deg, var(--dusty-blue-mid), var(--dusty-blue-deep)); }
.debut-facts-widget .fact-card.accent-rose::before { background: linear-gradient(90deg, #e8a0b4, #c55d78); }
.debut-facts-widget .fact-card.accent-peach::before { background: linear-gradient(90deg, #f4c8a8, #f0a87c); }
.debut-facts-widget .watermark {
  position: absolute;
  bottom: -14px; right: -4px;
  font-family: var(--head);
  font-size: clamp(64px, 12vw, 100px);
  font-weight: 400; font-style: italic;
  line-height: 1;
  pointer-events: none; user-select: none;
}
.debut-facts-widget .fact-card.accent-lavender .watermark { color: rgba(157,150,204,.09); }
.debut-facts-widget .fact-card.accent-blue .watermark { color: rgba(61,110,138,.09); }
.debut-facts-widget .fact-card.accent-rose .watermark { color: rgba(197,93,120,.07); }
.debut-facts-widget .fact-card.accent-peach .watermark { color: rgba(200,140,100,.09); }
.debut-facts-widget .card-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: clamp(12px, 2.5vw, 18px); }
.debut-facts-widget .badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.debut-facts-widget .fact-card.accent-lavender .badge-dot { background: #9d96cc; }
.debut-facts-widget .fact-card.accent-blue .badge-dot { background: var(--dusty-blue-deep); }
.debut-facts-widget .fact-card.accent-rose .badge-dot { background: #d4849a; }
.debut-facts-widget .fact-card.accent-peach .badge-dot { background: #f4a870; }
.debut-facts-widget .badge-label { font-family: var(--head); font-size: clamp(1.4rem, 3vw, 2rem); font-style: italic; font-weight: 400; color: var(--mid); opacity: .5; }
.debut-facts-widget .card-text { font-family: var(--body); font-weight: 400; color: #2e3d48; line-height: 1.68; font-size: clamp(15px, 3.2vw, 19px); }
.debut-facts-widget .nav-area { width: 100%; max-width: 780px; margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.debut-facts-widget .nav-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.debut-facts-widget .nav-btn {
  font-family: var(--body);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  border: 1.5px solid rgba(61,110,138,.3);
  background: white;
  color: var(--dusty-blue-deep);
  min-height: 48px;
  padding: 0 clamp(16px, 4vw, 26px);
  border-radius: 40px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; font-weight: 700;
}
.debut-facts-widget .nav-btn:hover:not(:disabled) { background: var(--dusty-blue-pale); border-color: var(--dusty-blue-mid); }
.debut-facts-widget .nav-btn:disabled { border-color: #d8e5ec; color: #b0c4d0; pointer-events: none; }
.debut-facts-widget .nav-pips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 1; }
.debut-facts-widget .pip { height: 4px; border-radius: 4px; cursor: pointer; min-height: 48px; display: flex; align-items: center; background: transparent; position: relative; }
.debut-facts-widget .pip::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 4px; border-radius: 4px; background: #c0d5e0; transition: width .28s cubic-bezier(.34,1.56,.64,1), background .2s; }
.debut-facts-widget .pip.active::before { background: var(--dusty-blue-deep); width: 32px; }
.debut-facts-widget .nav-counter { font-family: var(--body); font-size: clamp(13px, 3vw, 15px); font-weight: 700; color: var(--dusty-blue-mid); opacity: .75; text-align: center; }
.debut-facts-widget .nav-counter strong { font-weight: 900; color: var(--dusty-blue-deep); opacity: 1; }
.debut-facts-widget .swipe-hint { font-family: var(--body); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #b0c8d8; display: none; margin-top: 2px; }
@media(pointer: coarse) { .debut-facts-widget .swipe-hint { display: block; } }

/* YEAR STRIP */
.year-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3rem; }
.year-item {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(61,110,138,.12);
  transition: transform .25s ease, box-shadow .25s;
  border: 1.5px solid rgba(180,212,228,.35);
}
.year-item:hover { transform: scale(1.04); box-shadow: 0 12px 28px rgba(61,110,138,.22); }
.year-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.year-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(20,42,56,.75), transparent);
  color: white;
  font-family: var(--body);
  font-size: 10px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 6px 6px;
  text-align: center;
}
@media(max-width: 576px) { .year-strip { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

/* LIGHTBOX */
.lightbox {
  display: none; position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(14,30,42,.94);
  z-index: 9999;
  align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
}
.lightbox.active { display: flex; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 14px; box-shadow: 0 24px 56px rgba(0,0,0,.4); cursor: zoom-out; }
.lightbox-nav { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; }
.lightbox-nav button {
  background: rgba(122,163,188,.22);
  border: 1px solid rgba(192,217,232,.3);
  color: white;
  font-size: 1.8rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox-nav button:hover { background: rgba(122,163,188,.45); transform: scale(1.06); }
.lightbox-close { position: absolute; top: 20px; right: 30px; background: none; border: none; color: white; font-size: 2.2rem; cursor: pointer; opacity: .65; transition: opacity .2s; z-index: 10; }
.lightbox-close:hover { opacity: 1; }
.lightbox-counter { color: rgba(192,217,232,.85); font-family: var(--body); font-size: 13px; margin-top: 12px; letter-spacing: .12em; background: rgba(20,42,56,.6); padding: 4px 14px; border-radius: 40px; }
@media(max-width: 640px) { .lightbox-nav button { width: 40px; height: 40px; font-size: 1.4rem; } .lightbox-close { top: 12px; right: 20px; font-size: 1.8rem; } }

/* TRAVEL COLLAGE */
.travel-collage { max-width: 580px; margin: 0 auto; width: 100%; }
.collage-top { display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: clamp(140px,25vw,210px) clamp(100px,18vw,145px); gap: 8px; margin-bottom: 8px; }
.collage-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-slot {
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: transform .3s ease;
  background: transparent; cursor: pointer;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-slot.p1 { grid-column: 1; grid-row: 1/3; background: var(--dusty-blue-soft); }
.photo-slot.p2 { grid-column: 2; grid-row: 1; background: var(--peach); }
.photo-slot.p3 { grid-column: 2; grid-row: 2; background: var(--lemon); }
.photo-slot.p4 { background: var(--lavender); min-height: 130px; height: auto; }
.photo-slot.p5 { background: var(--rose-pale); min-height: 130px; height: auto; }
.collage-bottom-extra { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.photo-slot.p6 { background: var(--dusty-blue-soft); min-height: 130px; height: auto; }
.photo-slot.p7 { background: var(--sage); min-height: 130px; height: auto; }
.photo-slot.p8 { background: var(--lemon); min-height: 130px; height: auto; }
.photo-slot.p6.anim-in { animation-delay: .8s; }
.photo-slot.p7.anim-in { animation-delay: .95s; }
.photo-slot.p8.anim-in { animation-delay: 1.1s; }
.photo-slot:hover { transform: scale(1.025) !important; z-index: 2; }
.photo-slot.anim-in { animation: slotIn .65s cubic-bezier(.22,1,.36,1) forwards; }
.photo-slot.p1.anim-in { animation-delay: .05s; }
.photo-slot.p2.anim-in { animation-delay: .2s; }
.photo-slot.p3.anim-in { animation-delay: .35s; }
.photo-slot.p4.anim-in { animation-delay: .5s; }
.photo-slot.p5.anim-in { animation-delay: .65s; }
@keyframes slotIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* DETAILS */
#details {
  background: linear-gradient(160deg,
    var(--dusty-blue-soft) 0%,
    #d8ecf7 25%,
    var(--peach-soft) 60%,
    var(--lemon-soft) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
}
#details::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--dusty-blue-mid) 30%, var(--dusty-blue-soft) 70%, transparent);
}
.venue-block { text-align: center; max-width: 580px; width: 100%; margin: 0 auto; }
.venue-eyebrow {
  font-family: var(--head);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dusty-blue-deep);
  margin-bottom: 1.4rem;
}
@media(max-width: 640px) { .venue-eyebrow { font-size: clamp(1.5rem, 7vw, 2rem); } }
.venue-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.8rem;
  box-shadow: var(--shadow-xl);
  border: 1.5px solid rgba(180,212,228,.5);
  background: linear-gradient(135deg, var(--dusty-blue-soft), var(--peach), var(--lemon));
}
.venue-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-name { font-family: var(--head); font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 700; color: var(--charcoal); margin-bottom: .5rem; }
.venue-address { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--mid); line-height: 1.65; margin-bottom: 1.6rem; }
.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--dusty-blue-deep), var(--dusty-blue-mid));
  color: #fff;
  font-family: var(--body);
  font-size: 11px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: all .25s;
  box-shadow: 0 6px 20px rgba(61,110,138,.32);
}
.map-btn:hover { filter: brightness(1.1); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(61,110,138,.4); text-decoration: none; }

/* RSVP */
#rsvp {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(160deg,
    #d8ecf7 0%,
    var(--dusty-blue-pale) 20%,
    var(--peach-soft) 55%,
    var(--lemon-soft) 100%);
  position: relative;
}
#rsvp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(61,110,138,.3) 40%, transparent);
}
.rsvp-card {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  border-radius: var(--radius);
  padding: clamp(2rem, 6vw, 3.5rem);
  box-shadow: 0 12px 60px rgba(61,110,138,.16);
  max-width: 720px;
  margin: 0 auto;
  border: 1.5px solid rgba(192,217,232,.55);
}
.field-label {
  display: block;
  font-family: var(--body);
  font-size: 9.5px; font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dusty-blue-deep);
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-family: var(--body);
  font-size: 15px; font-weight: 700;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  transition: all .2s;
}
.field-input:focus { border-color: var(--dusty-blue-mid); box-shadow: 0 0 0 3px rgba(122,163,188,.2); }
/* Center guestbook message text */
#guestbook textarea.field-input.gb-message {
  text-align: center;
  resize: vertical;
}
.char-remaining {
  text-align: right;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  color: var(--dusty-blue-mid);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.custom-select-wrapper { position: relative; width: 100%; }
.custom-select {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  user-select: none; -webkit-user-select: none;
}
.custom-select.placeholder > span:first-child { color: #aaa; font-weight: 400; }
.custom-select-wrapper.open .custom-select { border-color: var(--dusty-blue-mid) !important; box-shadow: 0 0 0 3px rgba(122,163,188,.2) !important; }
.cs-chevron {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--dusty-blue-deep);
  transition: transform .2s;
  flex-shrink: 0; margin-left: 8px;
}
.custom-select-wrapper.open .cs-chevron { transform: rotate(180deg); }
.cs-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 2px solid var(--dusty-blue-mid);
  border-radius: var(--radius-sm);
  z-index: 300;
  box-shadow: 0 10px 36px rgba(61,110,138,.22);
  display: none; overflow: hidden;
}
.custom-select-wrapper.open .cs-dropdown { display: block; }
.cs-opt { padding: 12px 15px; font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--charcoal); cursor: pointer; transition: background .15s; }
.cs-opt:hover:not(.cs-opt-disabled) { background: var(--dusty-blue-pale); color: var(--dusty-blue-deep); }
.cs-opt.cs-selected { background: var(--dusty-blue-pale); color: var(--dusty-blue-deep); }
.cs-opt-disabled { color: #bbb; font-weight: 400; pointer-events: none; cursor: default; }

/* GALLERY – with content-visibility for off-screen sections */
#gallery {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(61,110,138,.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 8% 85%, rgba(255,244,196,.2) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 92% 72%, rgba(222,218,244,.18) 0%, transparent 50%),
    linear-gradient(180deg, #deedf7 0%, #eff5f9 30%, var(--cream) 65%, var(--white) 100%);
  box-shadow: inset 0 8px 36px rgba(61,110,138,.15), inset 0 1px 0 rgba(61,110,138,.28);
  position: relative;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}
#gallery::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dusty-blue-mid) 35%, var(--dusty-blue-soft) 65%, transparent);
  pointer-events: none; z-index: 1;
}
.gallery-container { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }
.gallery-header { text-align: center; padding: 0 1rem 2.5rem; }
.gallery-title {
  font-family: var(--head);
  font-size: clamp(2rem, 7vw, 5rem);
  color: var(--charcoal);
  line-height: 1.08;
  font-weight: 400;
  text-shadow: 0 2px 14px rgba(61,110,138,.2), 0 6px 32px rgba(61,110,138,.1);
}
@media(max-width: 640px) { .gallery-title { font-size: clamp(1.6rem, 8vw, 2.4rem); } }
.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: #e8eff5;
  touch-action: pan-y;
  box-shadow:
    0 2px 0 rgba(61,110,138,.07),
    0 6px 20px rgba(61,110,138,.16),
    0 20px 56px rgba(61,110,138,.22),
    0 40px 90px rgba(20,42,56,.18);
  border: 1.5px solid rgba(180,212,228,.4);
}
@media(max-width: 576px) { .gallery-stage { aspect-ratio: 3/4; } }
.gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .65s ease, transform .65s cubic-bezier(.4,0,.2,1); transform: scale(1.04); will-change: transform, opacity; }
.gallery-slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.gallery-slide.exit-left { opacity: 0; transform: translateX(-3%) scale(.97); z-index: 1; }
.gallery-slide.exit-right { opacity: 0; transform: translateX(3%) scale(.97); z-index: 1; }
.gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-ribbon {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(20,42,56,.75), transparent);
  z-index: 5;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.gallery-counter {
  font-family: var(--body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em;
  color: rgba(192,217,232,.9);
}
.gallery-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 6;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(192,217,232,.6);
  background: rgba(20,42,56,.55);
  backdrop-filter: blur(8px);
  color: rgba(192,217,232,.9);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s;
  line-height: 1;
}
.gallery-arrow:hover { background: rgba(61,110,138,.7); border-color: var(--dusty-blue-soft); color: #fff; }
.gallery-arrow.left { left: 14px; }
.gallery-arrow.right { right: 14px; }
@media(max-width: 480px) { .gallery-arrow { width: 40px; height: 40px; font-size: .95rem; } .gallery-arrow.left { left: 8px; } .gallery-arrow.right { right: 8px; } }
.gallery-pips { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1.4rem; }
.gallery-pip {
  height: 3px; border-radius: 3px;
  background: var(--border);
  border: none; padding: 0;
  cursor: pointer;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.gallery-pip.active { background: var(--dusty-blue-deep); width: 32px; }
.gallery-pip:not(.active) { width: 8px; }

/* MEMORIES section – content-visibility auto */
.memories-section {
  background: linear-gradient(180deg, var(--rose-soft) 0%, #f5eef3 40%, var(--off-white) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
  overflow: hidden;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}
.memories-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(197,93,120,.25) 40%, transparent);
}
.memories-heading { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); padding: 0 1.5rem; }
.memories-heading h2 {
  font-family: var(--head);
  font-size: clamp(2rem, 7vw, 5rem);
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(197,93,120,.14), 0 6px 28px rgba(197,93,120,.07);
}
@media(max-width: 640px) { .memories-heading h2 { font-size: clamp(1.6rem, 8vw, 2.4rem); } }
.pol-viewport { width: 100%; overflow: hidden; padding: 20px 0 36px; cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.pol-viewport:active { cursor: grabbing; }
.pol-track { display: flex; gap: clamp(16px, 3vw, 28px); padding: 10px clamp(24px, 8vw, 80px) 20px; align-items: flex-end; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; }
.polaroid {
  flex: 0 0 clamp(150px, 28vw, 200px);
  background: #fff;
  padding: clamp(9px, 2vw, 13px);
  box-shadow: 0 2px 6px rgba(44,40,40,.1), 0 8px 24px rgba(44,40,40,.13), 0 1px 0 rgba(255,255,255,.8) inset;
  position: relative;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  border-radius: 2px;
  user-select: none; -webkit-user-select: none;
}
/* individual rotations kept as in original */
.polaroid:nth-child(1) { transform: rotate(-3.2deg) translateY(6px); }
.polaroid:nth-child(2) { transform: rotate(2.1deg) translateY(0px); }
.polaroid:nth-child(3) { transform: rotate(-1.6deg) translateY(8px); }
.polaroid:nth-child(4) { transform: rotate(3deg) translateY(2px); }
.polaroid:nth-child(5) { transform: rotate(-2.4deg) translateY(5px); }
.polaroid:nth-child(6) { transform: rotate(1.8deg) translateY(10px); }
.polaroid:nth-child(7) { transform: rotate(-1deg) translateY(3px); }
.polaroid:nth-child(8) { transform: rotate(2.6deg) translateY(7px); }
.polaroid:hover { transform: rotate(0deg) scale(1.06) translateY(-7px) !important; box-shadow: 0 6px 20px rgba(44,40,40,.14), 0 20px 52px rgba(44,40,40,.2); z-index: 20; }
.pol-img { width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.pol-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.polaroid:nth-child(1) .pol-img { background: var(--rose-pale); }
.polaroid:nth-child(2) .pol-img { background: var(--dusty-blue-soft); }
.polaroid:nth-child(3) .pol-img { background: var(--lavender); }
.polaroid:nth-child(4) .pol-img { background: var(--peach); }
.polaroid:nth-child(5) .pol-img { background: var(--lemon); }
.polaroid:nth-child(6) .pol-img { background: var(--sage); }
.polaroid:nth-child(7) .pol-img { background: var(--dusty-blue-pale); }
.polaroid:nth-child(8) .pol-img { background: var(--lavender-soft); }
.pol-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.pol-placeholder svg { opacity: .2; }
.pol-tape {
  position: absolute;
  width: clamp(32px, 7vw, 44px);
  height: clamp(12px, 2.5vw, 16px);
  background: rgba(255,244,196,.75);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07); z-index: 2;
}
.pol-tape.top-center { top: clamp(-8px,-2vw,-6px); left: 50%; transform: translateX(-50%) rotate(-1deg); }
.pol-tape.top-left { top: clamp(-8px,-2vw,-6px); left: 18%; transform: rotate(-3deg); }
.pol-tape.top-right { top: clamp(-9px,-2vw,-7px); right: 14%; transform: rotate(2.5deg); }
.pol-tape.diag-left { top: clamp(-7px,-1.5vw,-5px); left: 10%; transform: rotate(-8deg); }
.pol-tape.diag-right { top: clamp(-8px,-2vw,-6px); right: 8%; transform: rotate(6deg); }
.pol-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 4px; padding: 0 1.5rem; }
.pol-btn {
  background: transparent;
  border: 1.5px solid var(--rose-light);
  color: var(--rose);
  font-family: var(--body);
  font-size: 10px; font-weight: 900;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 100px;
  cursor: pointer; transition: all .2s; line-height: 1;
}
.pol-btn:hover { background: var(--rose-soft); }
.pol-btn:disabled { border-color: var(--border); color: var(--border); pointer-events: none; }
.pol-pips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pol-pip { width: 8px; height: 3px; border-radius: 3px; background: var(--rose-pale); border: none; padding: 0; cursor: pointer; transition: all .28s cubic-bezier(.34,1.56,.64,1); }
.pol-pip.active { width: 24px; background: var(--rose); }
.pol-swipe-hint { display: none; text-align: center; margin-top: 12px; font-family: var(--body); font-size: 9px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; color: var(--rose-light); opacity: .65; }
@media(pointer: coarse) { .pol-swipe-hint { display: block; } }

/* GUESTBOOK – content-visibility auto */
#guestbook {
  background: linear-gradient(180deg, var(--dusty-blue-soft) 0%, var(--dusty-blue-pale) 20%, var(--peach-soft) 55%, var(--white) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 680px;
}
#guestbook::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dusty-blue-mid) 40%, transparent);
}
.gb-form {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(192,217,232,.55);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 5vw, 3rem);
  box-shadow: var(--shadow);
  max-width: 700px;
  margin: 0 auto 3.5rem;
}
.gb-messages-widget { max-width: 700px; margin: 0 auto; }
.gb-card-stage { position: relative; overflow: hidden; }
.gb-card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; will-change: transform, opacity; }
.entry-card {
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 4px 20px rgba(61,110,138,.1);
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.entry-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(61,110,138,.16); }
.entry-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
.entry-card.ec-lavender::before { background: linear-gradient(90deg, var(--lavender), var(--lavender-deep)); }
.entry-card.ec-peach::before { background: linear-gradient(90deg, var(--peach), var(--peach-deep)); }
.entry-card.ec-lemon::before { background: linear-gradient(90deg, var(--lemon), var(--lemon-deep)); }
.entry-card.ec-rose::before { background: linear-gradient(90deg, var(--rose-pale), var(--rose-light)); }
.entry-card.ec-blue::before { background: linear-gradient(90deg, var(--dusty-blue-soft), var(--dusty-blue-deep)); }
.entry-qmark { font-family: var(--title); font-size: 3rem; color: var(--dusty-blue-mid); line-height: 1; margin-bottom: .25rem; }
.entry-card p { font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--mid); line-height: 1.78; margin-bottom: 1rem; }
.entry-author {
  font-family: var(--body); font-size: 10px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dusty-blue-deep);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.entry-author::before { content: ''; display: block; width: 14px; height: 1.5px; background: var(--dusty-blue-mid); border-radius: 1px; }
.gb-nav-area { width: 100%; margin: 22px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gb-nav-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.gb-nav-btn {
  font-family: var(--body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  border: 1.5px solid rgba(61,110,138,.3); background: white; color: var(--dusty-blue-deep);
  min-height: 46px; padding: 0 clamp(14px, 3vw, 22px); border-radius: 40px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; font-weight: 700;
}
.gb-nav-btn:hover:not(:disabled) { background: var(--dusty-blue-pale); border-color: var(--dusty-blue-mid); }
.gb-nav-btn:disabled { border-color: #d8e5ec; color: #b0c8d8; pointer-events: none; }
.gb-nav-pips { display: flex; align-items: center; gap: 6px; justify-content: center; flex: 1; }
.gb-pip { height: 4px; border-radius: 4px; cursor: pointer; min-height: 46px; display: flex; align-items: center; background: transparent; position: relative; }
.gb-pip::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 4px; border-radius: 4px; background: #c0d5e0; transition: width .28s cubic-bezier(.34,1.56,.64,1), background .2s; }
.gb-pip.active::before { background: var(--dusty-blue-deep); width: 28px; }
.gb-nav-counter { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--dusty-blue-mid); opacity: .75; text-align: center; }
.gb-nav-counter strong { font-weight: 900; color: var(--dusty-blue-deep); opacity: 1; }
.gb-swipe-hint { font-family: var(--body); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #b0c8d8; display: none; }
@media(pointer: coarse) { .gb-swipe-hint { display: block; } }
@media(max-width: 640px) { .gb-card-pair { grid-template-columns: 1fr; gap: 1rem; } }
.gb-card-pair.single-card { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }

/* FAQ – content-visibility auto */
#faq {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--dusty-blue-pale) 50%, #c8dae6 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  content-visibility: auto;
  contain-intrinsic-size: 540px;
}
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:first-child { border-top: 1px solid var(--border-soft); }
.faq-trigger {
  width: 100%; background: none; border: none;
  padding: 1.5rem 0;
  display: flex; align-items: flex-start;
  gap: .9rem; cursor: pointer; text-align: left;
  transition: background .15s;
}
.faq-badge {
  flex-shrink: 0;
  background: var(--dusty-blue-pale);
  color: var(--dusty-blue-deep);
  font-family: var(--body);
  font-size: 9px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px; margin-top: 3px;
  border: 1px solid rgba(61,110,138,.2);
}
.faq-q-text { font-family: var(--head); font-size: clamp(.95rem, 2.5vw, 1.1rem); font-weight: 700; color: var(--charcoal); flex: 1; line-height: 1.4; }
.faq-chevron { flex-shrink: 0; color: var(--dusty-blue-deep); transition: transform .3s ease; padding-left: 8px; padding-top: 3px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .38s ease, padding .3s ease; padding-left: calc(.9rem + 10px + 16px); }
.faq-item.open .faq-body { max-height: 200px; padding-bottom: 1.4rem; }
.faq-a { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--mid); line-height: 1.85; }

/* FOOTER */
.site-footer {
  background: linear-gradient(160deg, var(--dusty-blue-xdark) 0%, var(--dusty-blue-dark) 60%, #0e2030 100%);
  color: rgba(192,217,232,.65);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2.5rem;
  text-align: center;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--dusty-blue-mid) 30%, var(--dusty-blue-soft) 70%, transparent);
}
.footer-title { font-family: var(--title); font-size: clamp(2.8rem, 9vw, 5rem); color: var(--dusty-blue-soft); margin-bottom: .3rem; }
.footer-tagline { font-family: var(--head); font-size: 1rem; font-style: italic; font-weight: 400; color: rgba(192,217,232,.48); margin-bottom: 2rem; }
.footer-hr { height: 1px; background: rgba(122,163,188,.25); max-width: 200px; margin: 2rem auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; list-style: none; margin-bottom: 2rem; }
.footer-links a { font-family: var(--body); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; color: rgba(122,163,188,.55); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--dusty-blue-soft); }
.footer-copy { font-family: var(--body); font-size: 12px; font-weight: 700; color: rgba(122,163,188,.35); letter-spacing: .06em; }

/* SCROLL REVEAL */
.fi { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.fi.in { opacity: 1; transform: none; }
.toast-pop {
  display: block;
  width: fit-content;
  margin: 0.75rem auto 0;        /* centres horizontally */
  padding: 0.55rem 1.5rem;
  background: #fff;
  border: 1px solid var(--dusty-blue-soft);
  border-radius: 50px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dusty-blue-deep);
  box-shadow: 0 4px 14px rgba(61, 110, 138, 0.1), 0 1px 3px rgba(61, 110, 138, 0.08);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.4s forwards;
  
  /* Safety nets */
  position: relative;            /* ensures normal flow */
  left: auto; right: auto;       /* override any inherited positioning */
  float: none;                   /* prevent floats from breaking centering */
  clear: both;                   /* in case floating siblings interfere */
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}
/* MOBILE OVERRIDES */
@media(max-width: 640px) {
  #hero { padding: 4.5rem 1.5rem 2.5rem !important; }
  .hero-eyebrow { font-size: 9px; letter-spacing: .22em; margin-bottom: .65rem !important; }
  .hero-title { font-size: clamp(3.5rem, 10.5vw, 3rem); white-space: nowrap; margin-bottom: .1rem !important; }
  .hero-sub { font-size: clamp(1rem, 6vw, 1rem) !important; margin-bottom: .9rem !important; }
  .hero-date-simple { margin-bottom: 1rem !important; font-size: clamp(2rem, 6vw, 2.6rem) !important; }
  .countdown-box { margin-bottom: 1.25rem !important; }
  .cd-cell { padding: .75rem .4rem !important; }
  .hero-music-spacer { height: 14px !important; }
  .music-player { max-width: 260px !important; padding: 7px 12px !important; gap: 8px !important; }
  .mp-play { width: 34px !important; height: 34px !important; }
  .mp-play svg { width: 15px !important; height: 15px !important; }
  .mp-mute { width: 28px !important; height: 28px !important; }
  .mp-mute svg { width: 15px !important; height: 15px !important; }
  .mp-seek::-webkit-slider-thumb { width: 12px !important; height: 12px !important; }
  .debutante-banner { margin-bottom: 1.25rem !important; }
  #details, #rsvp, #gallery, #guestbook, #faq { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  #about { padding-bottom: 2.5rem !important; }
  .section-header { margin-bottom: 1.5rem !important; }
  .tag-label { font-size: 9px; }
  .section-title { font-size: clamp(2rem, 7vw, 3.5rem); }
  .section-sub { font-size: clamp(.8rem, 3vw, 1rem); }
  .debut-facts-widget .masthead-over { font-size: 8px; letter-spacing: 3px; }
  .debut-facts-widget .masthead-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .debut-facts-widget .masthead-sub { font-size: clamp(12px, 3vw, 14px); }
  .field-label { font-size: 9px; }
  .entry-card { padding: 1.1rem; }
  .memories-section { padding: 2.5rem 0 2rem !important; }
/* ── Toast notification (RSVP / Guestbook) ── */
/* ── Toast notification (RSVP / Guestbook) ── */
}