/* Nền tảng: biến màu/font, reset, khung thẻ và các thành phần dùng chung. */

/* Font do cô dâu chú rể cung cấp (tools/build_fonts.py chuyển sang WOFF2). */
@font-face { font-family: 'Graitel'; src: url(../fonts/graitel.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Feliz en Vista'; src: url(../fonts/feliz-en-vista.woff2) format('woff2'); font-display: swap; }

:root {
  --green: #054b26;
  --green-2: #0a6035;
  --green-soft: #dce5d8;
  --paper: #f7f5ef;
  --cream: #f3efe4;
  --ink: #1e2b23;
  --muted: #5f6b62;
  --line: rgba(5, 75, 38, .35);
  --error: #b3261e;
  --script: 'Graitel', 'Segoe Script', cursive;
  --serif: 'Feliz en Vista', 'Times New Roman', serif; /* chỉ có 1 độ đậm: luôn dùng 400 */
  --italic: 'Cormorant Garamond', 'Times New Roman', serif; /* chữ nghiêng (Feliz không có bản nghiêng) */
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: 24px;
  --card: 440px;
  --corner: clamp(96px, 30%, 150px); /* cỡ cụm lá góc: to theo phần thiệp nhưng có giới hạn để không đè lên chữ (% tính theo bề ngang phần thiệp) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 14px/1.7 var(--sans);
  color: var(--ink);
  background: #13241a;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none; /* không tự "giả" in đậm/nghiêng cho font chỉ có 1 kiểu */
}
img, svg { display: block; max-width: 100%; }
img { height: auto; } /* giữ đúng tỉ lệ ảnh có thuộc tính width/height */
p, h1, h2, h3, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Thẻ thiệp: toàn màn hình trên điện thoại, cột giữa trên máy tính bảng (desktop.css lo MacBook). */
.backdrop {
  position: fixed; inset: -40px; z-index: -1;
  background: #13241a url(../img/hero-blur.webp) center / cover no-repeat;
  filter: blur(22px) saturate(1.05);
}
.backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(8, 26, 15, .5); }
.stage { display: none; } /* nửa trái ảnh mở đầu: chỉ hiện trên MacBook (desktop.css). Ẩn ở đây để trang vẫn đúng nếu desktop.css không tải được */
.card {
  position: relative;
  max-width: var(--card);
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 0 80px rgba(0, 0, 0, .45);
}
@supports (overflow: clip) { .card { overflow: clip; } }
@media (max-width: 480px) {
  body { background: var(--paper); }
  .backdrop { display: none; }
  .card { box-shadow: none; }
}

section { position: relative; padding: 72px var(--pad); text-align: center; }

/* Tiêu đề */
.title { position: relative; margin-bottom: 36px; }
.script-title, .title__script { font: 400 52px/1.15 var(--script); color: var(--green); }
.title__script { font-size: 46px; }
.title__serif {
  margin-top: -2px;
  padding-left: .2em; /* bù letter-spacing để chữ cân giữa */
  font: 400 30px/1.15 var(--serif);
  letter-spacing: .2em;
  color: var(--green);
}
.title__serif--wide { font-size: 38px; letter-spacing: .32em; padding-left: .32em; }
/* Chữ viết tay bọc trong .ink để hiệu ứng "đang viết" chạy đúng bề rộng chữ */
.ink { display: inline-block; }

/* Ảnh trong khung: khung quyết định kích thước, ảnh phủ kín khung. */
.frame { position: relative; overflow: hidden; background: var(--green-soft); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .px { position: absolute; inset: -12% 0; }
.polaroid { border: 6px solid #fff; box-shadow: 0 10px 28px rgba(20, 40, 28, .22); }

/* Hoạ tiết lá: .deco (vị trí, hiệu ứng mọc) › .deco__sway (đung đưa) › img, hoặc svg.draw (nét mảnh tự vẽ khi cuộn tới) */
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco__sway { transform-origin: inherit; }
.deco img, .deco svg { width: 100%; height: auto; }
svg.draw { overflow: visible; stroke-dasharray: 1 1; stroke-dashoffset: 0; } /* nét có pathLength="1": offset 1 → chưa vẽ, 0 → vẽ xong */
/* Cụm lá góc dùng chung cỡ --corner (trước đây rộng 36–44% nên trên màn rộng/hẹp đè lên tên nhà trai và chữ "Timeline") */
.deco--tl { top: -6px; left: -8px; width: var(--corner); transform-origin: 0 0; }
.deco--tr { top: -6px; right: -8px; width: var(--corner); transform-origin: 100% 0; }
.deco--tr img, .deco--tr svg { transform: scaleX(-1); }
.deco--bl { bottom: -6px; left: -8px; width: var(--corner); transform-origin: 0 100%; }
.deco--bl img, .deco--bl svg { transform: scaleY(-1); }
.title__sprig { top: 50%; width: 26%; margin-top: -9%; }
.title__sprig--l { left: -10px; transform-origin: 0 50%; }
.title__sprig--r { right: -10px; transform-origin: 100% 50%; }
.title__sprig--r img, .title__sprig--r svg { transform: scaleX(-1); }
/* Gốc thân lá mờ dần thay vì bị mép thiệp cắt ngang. Mặt nạ đặt trên chính hình nên lật/quay cùng hình */
.deco--tl svg, .deco--tr svg, .deco--bl svg {
  -webkit-mask-image: radial-gradient(circle at 0 0, transparent 5%, #000 20%);
  mask-image: radial-gradient(circle at 0 0, transparent 5%, #000 20%);
}
.wide__sprig svg, .quote__sprig svg, .title__sprig img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 18%);
}
.darling__branch img {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 12%);
  mask-image: linear-gradient(to top, transparent, #000 12%);
}

/* Vạch dọc giữa các khối chữ */
.vline { display: block; width: 1px; height: 56px; margin: 20px auto; background: var(--green); opacity: .55; }