/* Readable Vietnamese typography. Photographs and invitation copy have separate space. */
:root {
  --font-serif: 'Noto Serif', Georgia, serif;
  --font-script: 'Noto Serif', Georgia, serif;
  --font-sans: 'Be Vietnam Pro', Arial, sans-serif;
  --text-main: #3c292c;
  --text-muted: #66565a;
}
body { font-weight:400; }
button,input,textarea,select { font-family:var(--font-sans); }
.navbar { background:#fcf8f1f5; box-shadow:0 3px 22px #472a3010; }
.nav-brand { font-family:var(--font-serif); font-size:1.18rem; font-weight:500; letter-spacing:-.4px; }
.nav-brand span { font-family:var(--font-serif); font-size:1.1em; }
.nav-link { font-size:.85rem; color:#524147; }
.nav-cta-btn { font-size:.82rem; border-radius:24px; }
.hero-section {
  margin-top:76px; min-height:0; padding:36px max(28px,calc((100vw - 1320px)/2)) 48px;
  display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:34px;
  background:radial-gradient(ellipse at 12% 20%,#f8e7da,transparent 50%),linear-gradient(130deg,#fffaf2,#f5ebdf);
  isolation:isolate; overflow:hidden;
}
.hero-section::after { inset:17px; border:1px solid #c9aa7b66; z-index:-1; border-radius:6px; }
.hero-bg-wrapper {
  grid-column:2; grid-row:1; position:relative; inset:auto; width:100%; height:auto;
  aspect-ratio:3/4; margin:0; border-radius:160px 160px 12px 12px; overflow:hidden;
  outline:1px solid #b69a6b99; outline-offset:7px; box-shadow:0 24px 60px #62412f26;
  z-index:2; transform:translateZ(0);
}
.hero-bg-img { filter:none; object-fit:cover; object-position:center 38%; transform:scale(1.025); transition:transform 2.4s cubic-bezier(.16,1,.3,1); }
body.invitation-open .hero-bg-img { animation:portraitBreathe 18s ease-in-out 2s infinite alternate; }
.hero-bg-wrapper::after {
  content:''; position:absolute; inset:-30%; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,#fff3d932 49%,transparent 56%);
  transform:translateX(-110%); z-index:3;
}
body.invitation-open .hero-bg-wrapper::after { animation:portraitGloss 11s ease-in-out 1s infinite; }
.hero-overlay { display:none; }
.hero-light { z-index:-1; opacity:.6; background:radial-gradient(ellipse at 10% 90%,#d5a75825,transparent 55%); }
.hero-content { grid-column:1; grid-row:1; width:100%; max-width:none; padding:28px 10px; color:#3c292c; z-index:3; }
.hero-subtag { font-size:.75rem; line-height:1.8; color:#754234; font-weight:500; letter-spacing:1.6px; text-shadow:none; margin-bottom:18px; }
.hero-invitation-text { font-size:.78rem; color:#66565a; letter-spacing:1.6px; margin-bottom:18px; display:block; }
.hero-couple-names { font-family:var(--font-serif); font-weight:500; font-size:clamp(2.25rem,3.45vw,3.5rem); letter-spacing:-1.5px; line-height:1.35; color:#722e3e; text-shadow:none; margin-bottom:24px; }
.hero-couple-names .name-word { display:block; white-space:nowrap; }
.hero-couple-names .and-sign { font-family:var(--font-serif); display:block; font-size:1.55rem; font-style:italic; color:#a67e45; line-height:1.5; margin:2px 0; }
body.invitation-open .name-word { animation:readableNameIn 1.3s cubic-bezier(.16,1,.3,1) both; }
body.invitation-open .name-word:last-child { animation-delay:.16s; }
.hero-date-banner.celebration-dates { width:100%; max-width:540px; background:linear-gradient(145deg,#fffdf9,#f8f0e5); border:1px solid #d5bc94; border-radius:12px; padding:22px 5px; gap:0; margin:0 auto 24px; backdrop-filter:none; box-shadow:inset 0 1px #fff,0 12px 32px #76522e0a; text-shadow:none; }
.celebration-date { flex:1; min-width:0; padding:0 12px; }
.celebration-date + .celebration-date { border-color:#d8c4a5; }
.date-family { color:#74313e; font-size:.8rem; line-height:1.7; font-weight:500; margin-bottom:9px; }
.hero-date-banner .date-solar { font-family:var(--font-serif); color:#442f30; font-size:clamp(1.05rem,1.55vw,1.5rem); letter-spacing:.6px; font-weight:600; white-space:nowrap; }
.date-calendar { font-size:.66rem; letter-spacing:1px; color:#795735; margin:5px 0 9px; }
.hero-date-banner .date-lunar { color:#625051; font-size:.8rem; line-height:1.7; }
.hero-countdown-box { max-width:360px; border-color:#d6bea0; text-shadow:none; padding-top:18px; margin-bottom:24px; }
.countdown-title { font-size:.8rem; color:#695155; line-height:1.6; }
.countdown-number { color:#773643; font-size:1.9rem; font-weight:500; }
.countdown-label { font-size:.75rem; color:#6a5658; }
.hero-actions { gap:20px; }
.hero-actions .btn-primary { color:#fff9ee; border:1px solid #74313e; background:linear-gradient(135deg,#98515e,#6d2d3c); box-shadow:0 7px 20px #6d2d3c26,inset 0 1px #ffffff30; }
.hero-actions .btn-primary:hover { color:#fff; background:#632334; box-shadow:0 12px 30px #6d2d3c33; }
.hero-actions .btn-outline-gold,.hero-actions .btn-outline-gold:hover { color:#74313e; border-color:#b68b75; }
.hero-actions .btn { font-size:.86rem; }
.hero-scroll { display:none; }
.wedding-botanical { width:100px; bottom:22px; color:#b28a53; opacity:.34; z-index:0; }
.botanical-left { left:25px; }
.botanical-right { right:auto; left:42%; }
.reveal { filter:none; transition:opacity .85s,transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.active { filter:none; }
.section-subtitle { font-size:.78rem; letter-spacing:1.5px; line-height:1.7; }
.section-title { font-family:var(--font-serif); font-size:clamp(1.75rem,2.8vw,2.65rem); font-weight:500; line-height:1.5; letter-spacing:-.7px; }
.section-desc { font-size:.97rem; line-height:1.9; }
.couple-name { font-family:var(--font-serif); font-size:1.85rem; font-weight:500; text-transform:capitalize; line-height:1.6; }
.couple-role { font-size:.78rem; color:#805632; }
.couple-heart-circle { font-family:var(--font-serif); }
.event-title { font-size:1.38rem; font-weight:500; }
.event-info-item { font-size:.94rem; }
.event-badge { font-size:.76rem; }
.btn-sm { font-size:.84rem; padding:11px 12px; }
.gallery-filter-btn { font-size:.9rem; }
.gift-tab-btn { font-size:.88rem; }
.form-label,.form-control,.radio-pill-label { font-size:.94rem; line-height:1.7; }
.footer-logo { font-family:var(--font-serif); font-size:clamp(1.7rem,3.5vw,2.8rem); line-height:1.6; }
.footer-logo span { font-family:var(--font-serif); font-size:1em; }
.footer-quote { font-family:var(--font-sans); font-style:normal; font-size:.95rem; color:#f2dfd5; }
.footer-copyright { font-size:.84rem; color:#e6cfc7; }
.cover-heading { font-size:.78rem; }
.cover-heading span { font-family:var(--font-serif); font-size:clamp(1.5rem,4.5vw,2.2rem); letter-spacing:-.4px; margin:14px 20px 0; }
.cover-names { font-family:var(--font-serif); font-size:1.7rem; font-weight:500; line-height:1.35; }
.cover-names span { font-size:1.15rem; }
.cover-eyebrow { font-size:.68rem; letter-spacing:1.2px; }
.cover-date span { font-size:.72rem; }
.cover-instruction { font-size:.86rem; letter-spacing:0; }
.cover-skip { font-size:.8rem; }
.invitation-paper { padding-top:20px; }
.wax-open { font-family:var(--font-serif); }
.music-track { font-size:.75rem; }
.floating-rsvp-btn { font-size:.78rem; background:linear-gradient(135deg,#98515e,#6d2d3c); border:1px solid #ffffff33; box-shadow:0 8px 24px #52213033,inset 0 1px #ffffff22; }
#petals-canvas { opacity:1; z-index:100000; }
.hero-bg-wrapper { transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s; }
.event-card.active .event-img { animation:ceremonyReveal 1.7s cubic-bezier(.16,1,.3,1) both; }
@media(hover:hover) and (pointer:fine) {
 .hero-bg-wrapper:hover { transform:perspective(1300px) rotateY(-1.8deg) translateY(-4px); box-shadow:10px 30px 65px #62412f33; }
}
@keyframes ceremonyReveal { from { transform:scale(1.08); opacity:.65; } to { transform:scale(1); opacity:1; } }
.event-card,.gift-box-card { box-shadow:0 18px 44px #62412f12,inset 0 1px #fff; }
.gallery-item { box-shadow:0 8px 22px #62412f14; }
.gallery-item:hover { box-shadow:0 18px 34px #62412f28; }
@keyframes readableNameIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes portraitBreathe { from { transform:scale(1); } to { transform:scale(1.025); } }
@keyframes portraitGloss { 0%,65% { transform:translateX(-110%); } 90%,100% { transform:translateX(110%); } }
@media(min-width:1100px) { .hero-bg-wrapper { max-height:850px; } }
@media(min-width:769px) and (max-width:1100px) {
 .hero-section { gap:22px; padding-inline:25px; }
 .hero-content { padding-inline:0; }
 .hero-couple-names { font-size:2.3rem; }
 .celebration-date { padding-inline:6px; }
 .date-family { font-size:.75rem; }
 .hero-date-banner .date-lunar { font-size:.75rem; }
 .hero-actions { gap:12px; }
 .hero-actions .btn { font-size:.78rem; padding-inline:14px; }
 .nav-link { font-size:.75rem; }
}
@media(max-width:768px) {
 .hero-section { margin-top:64px; padding:24px 20px 64px; min-height:0; grid-template-columns:1fr; gap:36px; overflow:hidden; }
 .hero-section::after { inset:10px; }
 .hero-bg-wrapper { grid-column:1; grid-row:1; position:relative; width:100%; max-width:490px; height:auto; margin:0 auto; aspect-ratio:4/5; border-radius:120px 120px 10px 10px; }
 .hero-bg-img { object-position:50% 28%; }
 .hero-content { grid-column:1; grid-row:2; padding:0; width:100%; max-width:540px; margin:auto; }
 .hero-couple-names { font-size:clamp(2rem,8vw,3rem); letter-spacing:-.8px; }
 .hero-couple-names .name-word { display:block; }
 .hero-couple-names .and-sign { font-size:1.4rem; margin:5px 0; }
 .hero-subtag { font-size:.73rem; letter-spacing:1px; margin-bottom:15px; }
 .hero-invitation-text { font-size:.73rem; display:block; margin-bottom:16px; }
 .hero-date-banner.celebration-dates { padding:18px 3px; margin-bottom:23px; }
 .celebration-date { padding-inline:7px; }
 .date-family { font-size:.75rem; }
 .hero-date-banner .date-solar { font-size:1.12rem; letter-spacing:0; }
 .hero-date-banner .date-lunar { font-size:.78rem; }
 .date-calendar { font-size:.65rem; }
 .countdown-title { font-size:.8rem; }
 .countdown-number { font-size:1.8rem; }
 .hero-actions { gap:18px; padding-bottom:5px; }
 .hero-actions .btn { font-size:.84rem; padding-inline:17px; }
 .wedding-botanical { width:70px; }
 .botanical-right { left:auto; right:20px; }
 .nav-brand { font-size:1.05rem; }
 .section-subtitle { font-size:.75rem; }
 .section-desc { font-size:.94rem; }
 .couple-name { font-size:1.35rem; }
 .couple-role { font-size:.74rem; }
 .gift-tab-btn { font-size:.8rem; }
 .cover-names { font-size:1.6rem; margin:10px 0; }
 .cover-date span { font-size:.68rem; }
 .cover-heading span { font-size:1.6rem; }
 .floating-rsvp-btn { font-size:.73rem; }
 .footer-logo { font-size:1.7rem; }
}
@media(max-width:359px) {
 .hero-section { padding-inline:17px; }
 .hero-date-banner .date-solar { font-size:1rem; }
 .date-family { font-size:.7rem; }
 .hero-date-banner .date-lunar { font-size:.73rem; }
 .hero-actions { gap:12px; }
 .hero-actions .btn { font-size:.78rem; }
 .nav-brand { font-size:.95rem; }
}
.effects-toggle { position:fixed; left:20px; bottom:78px; z-index:1001; display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #d3b995; border-radius:25px; color:#6d2d3c; background:#fffcf5f5; font-size:.75rem; box-shadow:0 4px 18px #5b3c2112; cursor:pointer; }
.effects-toggle i { color:#aa8044; }
.effects-toggle:hover { background:#f8ead6; }
body.motion-reduced *,body.motion-reduced *::before,body.motion-reduced *::after { animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
body.motion-reduced .reveal,body.motion-reduced .name-word { opacity:1; filter:none; transform:none; }
body.motion-reduced .wedding-botanical path { stroke-dashoffset:0; }
@media(max-width:768px) { .effects-toggle { left:12px; bottom:75px; font-size:.72rem; } }


/* ========================================================
   ENHANCED VISUAL POLISH & FACE CLARITY OVERRIDES
   ======================================================== */
.wax-open {
  animation: waxPulse 2.6s infinite ease-in-out !important;
}
@keyframes waxPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(138, 38, 48, 0.45), 0 0 0 0 rgba(212, 175, 55, 0.45);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 10px 30px rgba(138, 38, 48, 0.65), 0 0 0 14px rgba(212, 175, 55, 0);
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.btn-primary, .wax-open, .nav-cta-btn, .floating-rsvp-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .nav-cta-btn::after, .floating-rsvp-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 50%;
  height: 200%;
  background: linear-gradient(60deg, transparent 20%, rgba(255, 255, 255, 0.4) 50%, transparent 80%);
  transform: rotate(25deg);
  animation: buttonLightSweep 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
@keyframes buttonLightSweep {
  0% { left: -120%; }
  32% { left: 180%; }
  100% { left: 180%; }
}

/* Perfect face positioning for Event Cards */
#event-card-groom .event-img {
  object-fit: cover !important;
  object-position: center 26% !important;
}
#event-card-bride .event-img {
  object-fit: cover !important;
  object-position: center 8% !important;
}

/* Cathedral arch for Couple spotlight portraits with perfect face framing */
.couple-avatar-wrap {
  width: 100%;
  max-width: 290px;
  aspect-ratio: 4/5;
  margin: 0 auto 20px;
  border-radius: 160px 160px 14px 14px !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(114, 46, 62, 0.16);
  border: 4px solid #fffdf9;
  outline: 1.5px solid #d4b584;
  outline-offset: 6px;
  background: #fdfbf7;
  position: relative;
}
.couple-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 18% !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.couple-card:hover .couple-avatar {
  transform: scale(1.06) !important;
}

/* Mobile celebration dates stacked cleanly without truncation */
@media(max-width: 600px) {
  .hero-date-banner.celebration-dates {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .celebration-date + .celebration-date {
    border-left: none !important;
    border-top: 1px dashed #d8c4a5 !important;
    padding-top: 14px !important;
    padding-left: 0 !important;
  }
}

/* Gallery image card refinements */
.gallery-item {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
}
.gallery-item.landscape {
  aspect-ratio: 16 / 10;
}
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}