/* ============================================================
   MAI LAN TRẮNG — EXACT CLONE from chungdoi.com
   All values extracted from React source (module 39241)
   
   Font vars:
     x = "Baskerville", "Times New Roman", serif
     p = { color:#404A1D, fontFamily:x, fontSize:20px, letterSpacing:0.05em }
   Colors:
     primary/secondary = #404A1D
     background = #FFFAF7
     lightBg = rgba(64, 74, 29, 0.04)
   ============================================================ */
:root {
  --font-serif: "Baskerville", "Playfair Display", "Lora", "Times New Roman", serif;
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-serif);
  color:#404A1D;
  background:#FFFAF7;
  min-height:100vh;min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== PETALS ===== */
.petals-container{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.petal{position:absolute;top:-30px;width:12px;height:12px;border-radius:50% 0 50% 50%;opacity:.7;animation:ambient-fall linear infinite}
.petal:nth-child(3n){background:radial-gradient(ellipse at 30% 30%,#eef4d0,#d4e4a0)}
.petal:nth-child(3n+1){background:radial-gradient(ellipse at 30% 30%,#c8d88a,#9eb05b)}
.petal:nth-child(3n+2){background:radial-gradient(ellipse at 30% 30%,#ffffff,#f5f3ee)}
@keyframes ambient-fall{
  0%{transform:translateY(-10px) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.7}90%{opacity:.5}
  100%{transform:translateY(100vh) translateX(var(--drift,40px)) rotate(var(--spin,360deg));opacity:0}
}

/* ===== COVER (envelope card) ===== */
/* Original: fixed inset-0 z-50, gradient bg, card inside */
.cover-section{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;position:relative;z-index:50;
  background:linear-gradient(to bottom right,#404A1D,#5a6628,#404A1D);
}
/* Card: w-[310px] sm:w-[340px] md:w-[520px] lg:w-[600px] rounded-lg */
.cover-card{
  background:rgba(255,250,247,.98);
  border:1px solid rgba(64,74,29,.15);
  border-radius:8px;
  width:310px;
  padding:112px 24px 56px;
  position:relative;overflow:hidden;
  text-align:center;
  box-shadow:0 25px 60px -12px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.2),0 0 40px rgba(64,74,29,.15);
  animation:cardFadeIn 1s ease-out;
}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Cover flowers: w-[48%] opacity-25 */
.flower-top-left{
  position:absolute;top:0;left:0;
  width:48%;height:auto;
  pointer-events:none;z-index:2;
  opacity:.25;
  transform:scaleX(-1) scaleY(-1);
}
.flower-bottom-right{
  position:absolute;bottom:0;right:0;
  width:48%;height:auto;
  pointer-events:none;z-index:2;
  opacity:.25;
}

/* Seal: 56x56, top:50px, translate(-50%,-50%) */
.seal-heart{
  width:56px;height:56px;
  position:absolute;top:50px;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 30% 30%,#404A1D,rgb(34,44,0));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(64,74,29,.5),inset 0 2px 4px rgba(255,255,255,.3);
  animation:seal-pulse 2s ease-in-out infinite;
  z-index:30;
}
@keyframes seal-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}

/* Cover names: Fz Qellia, text-3xl(30px) sm:text-4xl(36px) leading-tight */
.couple-name{
  font-family:'Fz Qellia',serif;
  font-weight:400;
  display:flex;flex-direction:column;align-items:center;
  line-height:1.25;
  margin-bottom:8px;
  position:relative;z-index:10;
  color:#404A1D;
  font-size:1.875rem; /* text-3xl = 30px */
}
.groom-name,.bride-name{
  display:block;width:100%;text-align:center;
  font-family:'Fz Qellia',serif;
}
/* ampersand: text-lg(18px) leading-none */
.ampersand{
  display:block;width:100%;text-align:center;
  font-family:'Fz Qellia',serif;
  font-size:1.125rem; /* 18px */
  line-height:1;
}

/* Divider line with gradient */
.divider-line{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-bottom:8px;position:relative;z-index:10;
}
.divider-line .line{width:40px;height:1px;background:linear-gradient(to right,transparent,#404A1D)}
.divider-line .line:last-child{background:linear-gradient(to left,transparent,#404A1D)}
.divider-icon{font-size:.875rem;color:#404A1D;opacity:.7}

/* Date: Lora font, text-[18px], color secondary 75% */
.wedding-date-cover{
  font-family:'Lora','Times New Roman',serif;
  font-size:18px;
  color:rgba(64,74,29,.75);
  margin-bottom:20px;
  position:relative;z-index:10;
}
/* Invite: Lora, text-[18px] font-light */
.invite-text{
  font-family:'Lora','Times New Roman',serif;
  font-size:18px;font-weight:300;
  color:rgba(64,74,29,.75);
  margin-bottom:24px;
  position:relative;z-index:10;
}
/* Button: Lora, text-lg(18px), px-8 py-2.5, rounded-full */
.open-btn{
  background:#404A1D;color:#fff;
  border:none;border-radius:9999px;
  padding:10px 32px;font-size:18px;
  font-family:'Lora','Times New Roman',serif;font-weight:600;
  cursor:pointer;position:relative;z-index:10;
  overflow:hidden;transition:transform .2s;
  box-shadow:0 4px 14px rgba(64,74,29,.35);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.open-btn:hover{transform:scale(1.03)}
.open-btn:active{transform:scale(.95)}
.shine-effect{
  position:absolute;top:0;height:100%;width:32px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shine 3s ease-in-out infinite;pointer-events:none;
}
@keyframes shine{0%{left:-32px}50%{left:100%}100%{left:100%}}

/* ===== MAIN CONTENT ===== */
/* Outer: flex w-full justify-center overflow-clip */
.main-content{
  position:relative;z-index:10;
  display:flex;justify-content:center;width:100%;
  background:#FFFAF7;
  overflow:clip;
}
.main-content.hidden{display:none}

/* Inner: relative w-full max-w-[480px] md:max-w-[900px] md:border md:border-[#404A1D22] */
.template-wrapper{
  position:relative;
  width:100%;
  max-width:480px;
  background:#FFFAF7;
  color:#404A1D;
}

/* ===== BACKGROUND FLOWER DECORATIONS ===== */
.bg-flower{
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:260px;
  will-change:transform;
}
.bg-flower img{width:100%;height:auto;display:block}

/* #1 Header: top:0, right:50%, overflow:hidden. img opacity:.3 scaleX(-1) scaleY(-1) */
.bg-flower-header{top:0;right:50%;overflow:hidden}
.bg-flower-header img{opacity:.3;transform:scaleX(-1) scaleY(-1)}

/* #2 Intro: -top-[50px], left:50%, overflow:hidden. img opacity:.3 scaleY(-1) */
.bg-flower-intro{top:-50px;left:50%;overflow:hidden}
.bg-flower-intro img{opacity:.3;transform:scaleY(-1)}

/* #3 Ceremony: top:22%, right:42%, opacity:.35 */
.bg-flower-ceremony{top:22%;right:42%;opacity:.35}

/* #4 Timeline: bottom:0, left:50%, opacity:.35 */
.bg-flower-timeline{bottom:0;left:50%;opacity:.35}

/* #5 Reception: top:50%, right:42%, opacity:.35 */
.bg-flower-reception{top:50%;right:42%;opacity:.35}

/* #6 Guestbook: top:50%, left:50%, opacity:.35 */
.bg-flower-guestbook{top:50%;left:50%;opacity:.35}

/* #7 Footer: bottom:0, right:50%, overflow:hidden. img opacity:.3 scaleX(-1) */
.bg-flower-footer{bottom:0;right:50%;overflow:hidden}
.bg-flower-footer img{opacity:.3;transform:scaleX(-1)}

/* ===== INTRO / HEADER ===== */
/* header: pt-16(64px) pb-8(32px) md:pt-24(96px) md:pb-12(48px) */
.intro-section{
  position:relative;width:100%;
  display:flex;justify-content:center;
  padding-top:64px;padding-bottom:32px;
}
.intro-inner{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 20px;
}
/* frame: w-[70%] ml-[2vw] */
.intro-frame{position:relative;width:70%;margin-left:2vw}
.intro-frame-img{width:100%;height:auto;display:block}
/* text overlay: absolute, top:12%, translateX(-2vw) */
.intro-frame-content{
  position:absolute;left:0;right:0;
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  width:100%;top:12%;
  color:#404A1D;
  transform:translateX(-2vw);
}
/* THE WEDDING OF: Baskerville, clamp(9px,2.4vw,15px), ls:0.25em, lh:1.6, opacity:.75 */
.intro-label{
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-family:var(--font-serif);
  font-size:clamp(9px,2.4vw,15px);
  letter-spacing:.25em;line-height:1.6;
  opacity:.75;text-transform:uppercase;
}
/* Names: The Nautigal, mt-[4%] */
.intro-names-wrapper{
  font-family:'The Nautigal',cursive;
  margin-top:4%;width:100%;text-align:center;
}
/* clamp(50px,13vw,120px) lh:1.45 */
.intro-name{font-size:clamp(50px,13vw,120px);line-height:1.45;color:#404A1D}
/* & : clamp(36px,9.4vw,86px) lh:1.3 */
.intro-amp{font-size:clamp(36px,9.4vw,86px);line-height:1.3;color:#404A1D;font-family:'The Nautigal',cursive}

/* ===== CONTENT SECTION ===== */
/* section: relative flex flex-col gap-16(64px) md:gap-20(80px)
   px-3(12px) md:px-6(24px) pt-20(80px) md:pt-28(112px) pb-14(56px) md:pb-20(80px) z-10 */
.content-section{
  position:relative;
  display:flex;flex-direction:column;
  gap:64px;
  padding:80px 12px 56px;
  z-index:10;
}

/* .relative-wrapper = "relative w-full" in original */
.relative-wrapper{position:relative;width:100%}

/* ===== SECTION TITLE ===== */
/* uppercase font-normal text-[20px] md:text-[26px] text-center
   style p = { color:#404A1D, fontFamily:x, fontSize:20px, letterSpacing:0.05em } */
.section-title{
  font-family:var(--font-serif);
  font-size:20px;font-weight:normal;
  letter-spacing:.05em;text-align:center;
  color:#404A1D;text-transform:uppercase;
}

/* ===== FAMILIES (grid cols 2 with divider) ===== */
/* FamilyInfo: style={color:d.secondary, fontFamily:x} */
.families-container{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:8px;text-align:center;
  font-family:var(--font-serif);
  font-size:14px;letter-spacing:.05em;
  color:#404A1D;
}
.family-card{text-align:center}
.family-label{
  font-family:var(--font-serif);
  font-size:14px;letter-spacing:.05em;
  color:#404A1D;text-transform:uppercase;margin-bottom:6px;
}
.parent-names{font-size:14px;color:#404A1D;margin-bottom:3px;font-family:'Baskerville','Times New Roman',serif}
.parent-name-main{font-family:var(--font-serif);font-size:14px;line-height:1.4;color:#404A1D;margin-bottom:6px}
.address{font-size:14px;color:#404A1D;line-height:1.4;font-family:'Baskerville','Times New Roman',serif}
.family-divider{display:flex;align-items:center;justify-content:center;padding-top:10px}
.vertical-line{width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(64,74,29,.33),transparent)}

/* ===== ANNOUNCEMENT ===== */
/* text-[14px] md:text-[26px] text-center, fontFamily:x, color:d.secondary */
.announcement-text{
  text-align:center;font-size:14px;
  letter-spacing:.05em;color:#404A1D;
  line-height:1.6;
  font-family:var(--font-serif);
}

/* ===== COUPLE NAMES ===== */
/* nameStyle={fontFamily:"Fz Qellia",serif}, baseSizeMobile:40, baseSizeTablet:64
   leading-[55px] md:leading-[80px]
   separator: text-[45px] md:text-[52px], Baskerville */
.couple-info{display:flex;align-items:center;justify-content:center;gap:14px}
.person-info{text-align:center}
.person-name{
  font-family:'Fz Qellia',serif;
  font-size:40px;line-height:55px;
  color:#404A1D;font-weight:normal;
}
.person-role{
  font-family:var(--font-serif);
  font-size:14px;letter-spacing:.05em;
  color:#404A1D;margin-top:3px;
}
/* separator & : text-[45px] */
.heart-divider{
  font-size:45px;color:#404A1D;
  font-family:var(--font-serif);
}

/* ===== CEREMONY DETAILS ===== */
.ceremony-details{text-align:center;position:relative;z-index:10}
.ceremony-label {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #404A1D;
  margin-bottom: 20px;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1.8;
  width: 100%;
}

/* ===== DATE STACK (horizontal layout) ===== */
.date-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:'Lora','Times New Roman',serif;
  color:#404A1D;
}
.date-time{
  font-size:2.4rem;
  font-weight:normal;
  letter-spacing:.05em;
  line-height:1.2;
  margin-bottom:24px;
  font-family:'Lora','Times New Roman',serif;
}
.date-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:12px;
}
.date-day-name, .date-month{
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.4;
}
.date-divider-line{
  width:1px;
  height:24px;
  background-color:#404A1D;
  opacity:0.5;
}
.date-number{
  font-size:2.8rem;
  font-weight:normal;
  line-height:1;
  letter-spacing:.02em;
}
.date-year{
  font-size:14px;
  letter-spacing:.1em;
  line-height:1.4;
  margin-bottom:16px;
}
.date-lunar{
  font-size:12px;
  letter-spacing:.1em;
  color:#404A1D;
  text-transform:uppercase;
  opacity:0.8;
}

/* ===== PHOTO ALBUM ===== */
/* cardClassName: rounded-xl border border-[#404A1D22] bg-[#404A1D08] aspect-square */
.album-block{margin-top:32px;position:relative;z-index:10}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-item{
  border-radius:16px;overflow:hidden;
  cursor:pointer;position:relative;
  aspect-ratio:1/1;transition:transform .3s;
  border:1px solid rgba(64,74,29,.13);
  background:rgba(64,74,29,.03);
}
.photo-item:hover{transform:scale(1.02)}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.more-photos{position:relative}
.more-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;
}
 
/* ===== RECEPTION ===== */
.reception-intro{
  text-align:center;font-size:14px;
  color:#404A1D;font-family:var(--font-serif);
}
.reception-datetime{text-align:center}

.reception-schedule {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
  margin-bottom: 24px;
  text-align: center;
}
.schedule-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.schedule-label {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(64, 74, 29, 0.7);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.schedule-time {
  font-family: var(--font-serif);
  font-size: 20px;
  color: #404A1D;
  font-weight: 500;
}

.rsvp-container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 24px;
}
/* RSVP: text-sm(14px) md:text-base(16px) tracking-wider rounded-full px-6 py-2 font-semibold */
.rsvp-btn {
  background: #404A1D;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 12px 36px;
  font-size: 14px;
  font-family: var(--font-serif);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(64, 74, 29, 0.2);
}
.rsvp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 74, 29, 0.3);
  opacity: 0.95;
}
.rsvp-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ===== MAP SECTION ===== */
/* Original: pt-10(40px) md:pt-12(48px) */
.map-section{padding:40px 24px;position:relative;z-index:10}

.calendar-widget {
  background: #FFF;
  border: 1px solid rgba(64, 74, 29, 0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 32px auto 20px;
  max-width: 290px;
  box-shadow: 0 4px 12px rgba(64, 74, 29, 0.04);
}
.calendar-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #404A1D;
  margin-top: 4px;
  margin-bottom: 12px;
}
.calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
}
.calendar-table thead {
  border-bottom: 1px solid rgba(64, 74, 29, 0.2);
}
.calendar-table th {
  padding: 8px 0;
  color: rgba(64, 74, 29, 0.7);
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: center;
}
.calendar-table td {
  padding: 8px 0;
  text-align: center;
  color: #404A1D;
  font-size: 13px;
  font-weight: normal;
}
.highlight-day {
  position: relative;
  color: #fff !important;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.highlight-day span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23404A1D'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 2px;
}
.heart-icon {
  display: none;
}

.map-container{text-align:center}
.map-title{font-family:var(--font-serif);font-size:14px;letter-spacing:.05em;color:#404A1D;margin-bottom:6px}
.venue-name{font-family:var(--font-serif);font-size:14px;color:#404A1D;margin-bottom:2px}
/* address: text-sm(14px) md:text-base(16px) tracking-wide, pb-3 border-b border-[#404A1D20] */
.venue-address{
  font-size:14px;color:#404A1D;margin-bottom:10px;
  font-family:var(--font-serif);
  letter-spacing:.05em;
  padding-bottom:12px;border-bottom:1px solid rgba(64,74,29,.2);
}
/* map: h-[280px] md:h-[380px] max-w-[340px] md:max-w-[560px] rounded-2xl */
.map-iframe-wrapper{width:100%;max-width:340px;height:280px;border-radius:16px;overflow:hidden;margin:0 auto 14px}
.map-iframe-wrapper iframe{width:100%;height:100%;border:none}

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 12px;
}
/* calendar link: text-sm tracking-wider underline underline-offset-4 decoration-1 */
.calendar-link{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);
  font-size:13px;color:#404A1D;letter-spacing:.05em;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;transition:opacity .2s;
}
.calendar-link:hover{opacity:.7}

/* ===== TIMELINE ===== */
.timeline-block {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 32px; /* gap-8 = 32px */
  padding: 48px 12px 0; /* pt-12 (48px) px-3 (12px) pb-0 */
}
.timeline-list {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 460px;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px; /* gap-x-6 = 24px */
  row-gap: 32px;    /* gap-y-8 = 32px */
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline-item {
  display: contents;
}
.timeline-time {
  padding-top: 2px;
  text-align: right;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
  line-height: 1.375;
  font-family: var(--font-serif);
  color: #404A1D;
}
.timeline-line-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: rgba(64, 74, 29, 0.4); /* color-mix 40% primary */
  top: -32px;
  bottom: -32px;
}
.timeline-item:first-child .timeline-line {
  top: 50%;
}
.timeline-item:last-child .timeline-line {
  bottom: 50%;
}
.timeline-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #404A1D;
  box-shadow: 0 0 0 2px rgba(64, 74, 29, 0.13);
}
.timeline-label {
  padding-top: 2px;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.375;
  font-family: var(--font-serif);
  color: #404A1D;
}

/* ===== GUESTBOOK ===== */
/* className: relative px-6(24px) md:px-10(40px) pt-10(40px) md:pt-12(48px) pb-8(32px) md:pb-10(40px) z-10
   style: {backgroundColor: lightBg, color: secondary, fontFamily: x}
   formContainer: rounded-2xl border p-6 shadow-sm, borderColor:#404A1D33, bg:#fff
   input: borderColor:#404A1D66
   commentCard: rounded-xl border p-4 text-sm, borderColor:#404A1D33, bg:#fff */
.guestbook-section{
  background:rgba(64,74,29,.04);
  color:#404A1D;
  font-family:var(--font-serif);
  padding:40px 24px 32px;
  position:relative;z-index:10;
}
.guestbook-form{
  display:flex;flex-direction:column;gap:10px;margin-bottom:20px;
  background:#fff;border-radius:16px;
  border:1px solid rgba(64,74,29,.2);
  padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.guestbook-form input,.guestbook-form textarea{
  width:100%;padding:12px 14px;
  border:1px solid rgba(64,74,29,.4);border-radius:10px;
  font-family:var(--font-serif);
  font-size:14px;color:#404A1D;background:#fff;outline:none;
  transition:border-color .2s;
}
.guestbook-form input:focus,.guestbook-form textarea:focus{border-color:#404A1D}
.guestbook-form textarea{resize:vertical;min-height:70px}
.submit-btn{
  background:#404A1D;color:#fff;
  border:none;border-radius:25px;
  padding:12px 28px;font-size:14px;
  font-family:var(--font-serif);
  letter-spacing:.05em;cursor:pointer;transition:transform .2s;
  align-self:center;margin-top:5px;
}
.submit-btn:hover{transform:scale(1.03)}
.submit-btn:active{transform:scale(.97)}

.wishes-list{display:flex;flex-direction:column;gap:12px;max-height:500px;overflow-y:auto;padding-right:4px}
.wish-item{
  background:#fff;border-radius:12px;padding:16px;
  animation:wishFadeIn .4s ease-out;
  border:1px solid rgba(64,74,29,.2);
}
@keyframes wishFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wish-author{font-family:var(--font-serif);font-size:14px;font-weight:600;color:#404A1D;margin-bottom:4px}
.wish-text{font-size:14px;color:#404A1D;line-height:1.5;margin-bottom:6px;font-family:'Baskerville','Times New Roman',serif}
.wish-time{font-size:12px;color:rgba(64,74,29,.5);font-family:var(--font-serif);font-style:italic}

/* ===== GIFT BOX ===== */
/* className: relative z-10 px-6(24px) md:px-10(40px) pb-10(40px) md:pb-14(56px) */
.gift-block{position:relative;z-index:10;padding:0 24px 40px}
.gift-cards{display:flex;flex-direction:column;gap:16px}
.gift-card{padding:20px 16px;text-align:center}
.gift-role{font-family:var(--font-serif);font-size:14px;letter-spacing:.05em;color:#404A1D;text-transform:uppercase}
.gift-name{font-family:'Fz Qellia',serif;font-size:1.7rem;color:#404A1D;margin:3px 0 10px}
.bank-info{margin-bottom:14px}
.bank-name{font-family:var(--font-serif);font-size:14px;color:#404A1D}
.account-number{font-family:var(--font-serif);font-size:1.1rem;color:#404A1D;letter-spacing:2px;margin:3px 0}
.account-holder{font-size:14px;color:#404A1D;font-family:'Baskerville','Times New Roman',serif}
.qr-code{display:flex;justify-content:center;padding:12px;border-radius:12px;margin-bottom:12px}
.qr-code img{width:140px;height:140px;border-radius:6px;background:#fff}
.save-qr-btn{
  background:transparent;color:#404A1D;
  border:1px solid rgba(64,74,29,.4);border-radius:20px;
  padding:8px 24px;font-family:var(--font-serif);
  font-size:14px;cursor:pointer;transition:all .2s;
}
.save-qr-btn:hover{background:#404A1D;color:#fff}

/* ===== FOOTER ===== */
/* footer: relative flex-col items-center px-6(24px) md:px-10(40px) pb-16(64px) md:pb-20(80px) text-center z-10
   text: text-sm(14px) md:text-lg(18px), color:d.secondary, fontFamily:x */
.footer-section{
  text-align:center;position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  padding:0 24px 64px;
}
.footer-text{font-family:var(--font-serif);font-size:14px;color:#404A1D;line-height:1.6}
.footer-heart{font-size:1.3rem;color:#404A1D;margin:10px 0;opacity:.5}
.footer-brand{font-family:var(--font-serif);font-size:12px;color:#404A1D;letter-spacing:.05em;opacity:.35}

/* ===== MUSIC PLAYER ===== */
.music-player{position:fixed;bottom:20px;right:20px;width:48px;height:48px;background:#404A1D;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:200;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:transform .2s}
.music-player:hover{transform:scale(1.1)}
.music-player:active{transform:scale(.95)}
.cd-disc{width:28px;height:28px;background:conic-gradient(#333,#555,#333,#555,#333);border-radius:50%;position:absolute;display:flex;align-items:center;justify-content:center}
.cd-disc.spinning{animation:spin-cd 3s linear infinite}
@keyframes spin-cd{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.cd-inner{width:8px;height:8px;background:#404A1D;border-radius:50%}
.music-bars{position:absolute;display:none;gap:2px;align-items:flex-end;height:16px}
.music-bars.active{display:flex}
.music-bars span{width:3px;background:#fff;border-radius:1px;animation:dance .4s ease-in-out infinite alternate}
.music-bars span:nth-child(1){animation-delay:0s;height:6px}
.music-bars span:nth-child(2){animation-delay:.1s;height:12px}
.music-bars span:nth-child(3){animation-delay:.2s;height:8px}
.music-bars span:nth-child(4){animation-delay:.3s;height:14px}
@keyframes dance{from{height:4px}to{height:16px}}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:300}
.lightbox.active{display:flex}
.lightbox img{max-width:90%;max-height:85vh;border-radius:6px;object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer;z-index:301;line-height:1}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.3rem;padding:10px 14px;cursor:pointer;border-radius:6px;transition:background .2s}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25)}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}

/* ===== SCROLL ANIMATIONS ===== */
[data-animate]{opacity:0;transform:translateY(30px);transition:opacity .7s ease-out,transform .7s ease-out}
[data-animate].animate-in{opacity:1;transform:translateY(0)}
.cover-section.closing{animation:coverSlideUp .8s ease-in-out forwards}
@keyframes coverSlideUp{to{opacity:0;transform:translateY(-60px) scale(.95)}}

/* ============================================================
   BREAKPOINTS — exact Tailwind values
   sm: 640px  |  md: 768px  |  lg: 1024px
   ============================================================ */

@media(min-width:640px){
  .cover-card{width:340px}
  .couple-name{font-size:2.25rem} /* sm:text-4xl = 36px */
  .ampersand{font-size:1.25rem}   /* sm:text-xl = 20px */
}

@media(min-width:768px){
  /* Cover */
  .cover-card{width:520px;padding:96px 24px 32px}

  /* Template wrapper border */
  .template-wrapper{max-width:900px;border:1px solid rgba(64,74,29,.13)}

  /* Flower sizes */
  .bg-flower{width:520px}
  .bg-flower-intro{top:-100px}

  /* Intro header */
  .intro-section{padding-top:96px;padding-bottom:48px}
  .intro-frame{margin-left:1vw}
  .intro-frame-content{transform:translateX(-1vw)}

  /* Content section: md:gap-20(80px) md:px-6(24px) md:pt-28(112px) md:pb-20(80px) */
  .content-section{gap:80px;padding:112px 24px 80px}

  /* Section title: md:text-[26px] */
  .section-title{font-size:26px}

  /* Families: md:text-[18px] */
  .families-container{gap:12px;font-size:18px}
  .family-label{font-size:18px}
  .parent-names{font-size:18px}
  .parent-name-main{font-size:18px}
  .address{font-size:16px}

  /* Announcement: md:text-[26px] */
  .announcement-text{font-size:26px}

  /* Couple names: baseSizeTablet:64, md:leading-[80px] */
  .person-name{font-size:64px;line-height:80px}
  /* separator: md:text-[52px] */
  .heart-divider{font-size:52px}

  /* Date stack responsive */
  .date-time{font-size:2.8rem;margin-bottom:32px}
  .date-row{gap:24px;margin-bottom:16px}
  .date-day-name, .date-month{font-size:16px}
  .date-divider-line{height:32px}
  .date-number{font-size:3.6rem}
  .date-year{font-size:16px;margin-bottom:20px}
  .date-lunar{font-size:13px}
  .ceremony-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 28px;
    line-height: 2.0;
  }

  /* Album */
  .photo-grid{gap:16px}

  /* Map: md:pt-12(48px) */
  .map-section{padding:48px 40px}
  .calendar-widget{max-width:310px;padding:20px}
  .calendar-table{font-size:16px}
  .calendar-table th{font-size:14px}
  .map-iframe-wrapper{height:380px;max-width:560px}
  .venue-name{font-size:16px}
  .venue-address{font-size:16px}

  /* Timeline Grid Centered */
  .timeline-block {
    gap: 40px; /* gap-10 = 40px */
    padding: 64px 24px 0; /* pt-16 (64px) px-6 (24px) */
    margin: 40px 0;
  }
  .timeline-list {
    column-gap: 32px;
    row-gap: 40px;
  }
  .timeline-time {
    font-size: 17px;
  }
  .timeline-line {
    top: -40px;
    bottom: -40px;
  }
  .timeline-label {
    font-size: 19px;
  }

  /* Guestbook: md:px-10(40px) md:pt-12(48px) md:pb-10(40px) */
  .guestbook-section{padding:48px 40px 40px}
  .guestbook-form{max-width:600px;margin:0 auto 24px}
  .wishes-list{max-width:600px;margin:0 auto}

  /* Gift: md:px-10(40px) md:pb-14(56px) */
  .gift-block{padding:0 40px 56px}
  .gift-cards{flex-direction:row;gap:20px}
  .gift-card{flex:1}
  .qr-code img{width:160px;height:160px}

  /* Footer: md:px-10(40px) md:pb-20(80px) */
  .footer-section{padding:0 40px 80px}
  .footer-text{font-size:18px}

  /* Reception overrides */
  .reception-schedule {
    gap: 60px;
    margin-top: 40px;
    margin-bottom: 32px;
  }
  .schedule-label {
    font-size: 13px;
  }
  .schedule-time {
    font-size: 24px;
  }
  .calendar-widget {
    max-width: 320px;
    padding: 20px 24px;
    margin: 40px auto 24px;
  }
  .calendar-title {
    font-size: 15px;
    margin-bottom: 16px;
  }
  .calendar-table th {
    font-size: 12px;
  }
  .calendar-table td {
    font-size: 15px;
  }
  .highlight-day span:first-child {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .calendar-link {
    font-size: 15px;
    margin-top: 12px;
    margin-bottom: 20px;
  }
  .rsvp-container {
    margin-top: 16px;
    margin-bottom: 32px;
  }
  .rsvp-btn {
    font-size: 15px;
    padding: 14px 44px;
  }
}

@media(min-width:1024px){
  .cover-card{width:600px;padding:96px 32px 32px}
  .bg-flower{width:585px}
  .bg-flower-intro{top:-113px}
}