/* =========================================================
   TOKENS — โทนสี ivory / champagne / warm brown / sage green
   ========================================================= */
:root{
  --ivory:      #faf5ec;
  --paper:      #f1e9da;
  --paper-deep: #e6d9bf;
  --champagne:  #d9c39c;
  --brown:      #7a6142;
  --brown-deep: #4a3a28;
  --sage:       #8da07e;
  --sage-deep:  #63735a;
  --ink:        #3a3025;
  --line:       rgba(74,58,40,0.18);
  --shadow:     0 18px 50px rgba(74,58,40,0.16);

  --serif-th: 'Noto Serif Thai', 'Cordia New', serif;
  --serif-en: 'Playfair Display', 'Noto Serif Thai', serif;
  --script: 'Great Vibes', 'Brush Script MT', cursive;

  --envelope-w: 783;
  --envelope-h: 615;
}

@font-face{
  font-family:'Cherolina';
  src:url('assets/Cherolina.otf') format('opentype');
  font-display:swap;
}

*{ box-sizing:border-box; }
/* กัน iOS Safari ขยายขนาดตัวอักษรอัตโนมัติ (text autosizing) ซึ่งทำให้ข้อความ
   ในซองเปิดการ์ดและเมนู 3 ปุ่มบนหน้าฮีโร่ ล้นพื้นที่ที่ออกแบบไว้บนเครื่องจริง
   ทั้งที่ตอนพรีวิวบนคอมพิวเตอร์ดูปกติ */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--serif-th);
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; height:100vh; }
html.hero-locked, body.hero-locked{ overflow:hidden; height:100%; overscroll-behavior:none; }

img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:500; }
p{ margin:0; }
a{ color:inherit; }
.container{ max-width:720px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:clamp(26px,4.4vw,38px);
  color:var(--sage-deep);
  letter-spacing:.02em;
}
.section-title{
  font-size:clamp(26px,4.4vw,38px);
  color:var(--brown-deep);
  line-height:1.25;
}
.section{
  padding:88px 0;
  position:relative;
  overflow:hidden;
}
.section + .section{ border-top:1px solid var(--line); }
.section::before{
  content:"⚜";
  position:absolute;
  top:30px;
  left:max(18px, calc((100vw - 900px) / 2));
  color:var(--sage);
  font-size:18px;
  opacity:.34;
  transform:rotate(-18deg);
}
.section:nth-of-type(even)::before{ left:auto; right:max(18px, calc((100vw - 900px) / 2)); transform:rotate(18deg); }
.section .container{ position:relative; z-index:1; }
.center{ text-align:center; }
.lede{
  max-width:56ch;
  margin:18px auto 0;
  font-size:17px;
  line-height:1.9;
  color:var(--ink);
}
.center .lede{ margin-left:auto; margin-right:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   OPENING SCREEN — ซองจดหมาย
   ========================================================= */
#opening-screen{
  position:fixed; inset:0; z-index:9999;
  box-sizing:border-box;
  /* กันชนเผื่อพื้นที่ด้านบน: ขยับชื่อลงมาแล้วต้องดันซองลงตามไปด้วย
     เพื่อไม่ให้เส้น+แหวนใต้ชื่อถูกซองบังในจอที่เตี้ยลง */
  padding-top:clamp(18px, 4vh, 36px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(222,205,175,.27), transparent 53%),
    radial-gradient(ellipse at 12% 82%, rgba(243,232,213,.7), transparent 34%),
    #fcf8f0;
  transition:opacity .6s ease, transform .6s ease;
}
#opening-screen::before{
  /* พื้นผิวกระดาษอ่อนๆ */
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(74,58,40,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.5; pointer-events:none;
}
#opening-screen.hide{
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}
.opening-florals{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:.58; }
.floral-cut{
  position:absolute;
  display:block;
  background-image:url('assets/floral-reference.png');
  background-repeat:no-repeat;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 48%, transparent 74%);
  mask-image:radial-gradient(ellipse at center, #000 48%, transparent 74%);
}
.opening-florals .floral-top-left{ top:-104px; left:-108px; width:245px; height:245px; background-size:auto 285px; background-position:left top; }
.opening-florals .floral-top-right{ top:-104px; right:-108px; width:245px; height:245px; background-size:auto 285px; background-position:right top; }
.opening-florals .floral-bottom-left{ bottom:-115px; left:-105px; width:350px; height:355px; background-size:auto 400px; background-position:left bottom; }
.opening-florals .floral-bottom-right{ bottom:-118px; right:-112px; width:390px; height:400px; background-size:auto 450px; background-position:right bottom; }

.envelope-stage{
  position:relative;
  width:min(86vw, 480px);
  aspect-ratio: var(--envelope-w) / var(--envelope-h);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:1;
  /* หมายเหตุ: ไม่ใส่ perspective ไว้ตรงนี้ (ตัวห่อหลัก) เพราะ perspective/transform บนตัวแม่
     จะกลายเป็น containing block ของลูกที่เป็น position:fixed ซึ่งจะทำให้การขยายการ์ดเต็มจอ
     (ดู goFullscreen ใน JS) คำนวณตำแหน่งผิดพลาด — จึงย้าย perspective ไปไว้ในทรานส์ฟอร์มของ
     .env-flap เองแทน (ดูด้านล่าง) */
}

/* ข้อความด้านหลังซอง: ชั้นซอง/การ์ด (z-index 1 ขึ้นไป) จะทับข้อความเมื่อเคลื่อนไหวผ่าน */
.opening-message{
  position:absolute; z-index:1; top:clamp(98px, 13vh, 144px); left:50%;
  width:min(82vw, 460px); transform:translateX(-50%); text-align:center;
  color:#9b783f; pointer-events:none;
  text-shadow:0 1px 10px rgba(255,255,255,.8);
}
.opening-message span{
  display:block; margin-bottom:16px; color:#8b7660;
  font:500 clamp(11px, 2.6vw, 14px)/1 'Cormorant Garamond', var(--serif-en);
  letter-spacing:.42em; text-transform:uppercase;
}
.opening-message strong{
  display:block; font-family:'Cherolina', 'Italianno', var(--script); font-size:clamp(56px, 12vw, 94px);
  font-weight:400; line-height:.68;
}
.opening-message i{ display:block; font-style:normal; }
.opening-message b{
  display:block; margin:10px 0 8px; color:#8b7660; font-family:'Cormorant Garamond', var(--serif-en);
  font-size:clamp(13px, 2.8vw, 17px); font-weight:500; letter-spacing:.22em; line-height:1;
}
.opening-message em{
  display:block; margin-top:27px; color:#8b7660; font:500 clamp(11px, 2.5vw, 14px)/1.85 'Cormorant Garamond', var(--serif-en);
  letter-spacing:.35em; text-transform:uppercase; font-style:normal;
}
/* บั๊กจริง: ".opening-message span" ด้านบนตั้งใจไว้สำหรับ span บรรทัด "THE WEDDING OF" เท่านั้น
   แต่ selector นี้ไปจับ span ของวันที่/สถานที่ (#openDay #openMonth #openYear #openVenue) ที่อยู่ใน
   <em> ด้วยโดยไม่ตั้งใจ ทำให้แต่ละคำ (28 / NOVEMBER / 2026 / CHANCHIVA) กลายเป็น display:block
   แยกคนละบรรทัดเต็มความกว้าง แทนที่จะเรียงในบรรทัดเดียวกันแบบ "28 • NOVEMBER • 2026"
   ทำให้บล็อกข้อความสูงเกินจนส่วนท้าย (2026, CHANCHIVA) ล้นไปโดนซองทับ — แก้โดยให้ span ที่อยู่ใน
   em กลับไปเป็น inline ตามปกติ (เฉพาะจุดนี้ specificity สูงกว่า ".opening-message span" จึงชนะ) */
.opening-message em span{
  display:inline; margin-bottom:0; font:inherit; letter-spacing:inherit;
  color:inherit; text-transform:inherit;
}
.opening-message::after{
  content:"○  ○"; display:block; width:150px; margin:17px auto 0; padding-top:12px;
  border-top:1px solid rgba(155,120,63,.65); color:#af8a52; font:400 24px/.55 'Cormorant Garamond', serif;
  letter-spacing:-.34em; text-indent:-.34em;
}

.env-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.env-back  { z-index:1; }
/* envelope-back/pocket.webp มีขนาดจริง 768x615 ส่วน envelope-flap/closed.webp เป็น 783x615
   (กว้างไม่เท่ากันแม้สูงเท่ากัน) พอใช้ object-fit:contain ร่วมกับกล่องที่สัดส่วน 783/615
   สองรูปแรกเลยเหลือช่องว่างริมซ้าย-ขวาเล็กน้อย ทำให้ฝาซองกับตัวซองไม่สนิทกันพอดี
   แก้โดยให้สองเลเยอร์นี้ยืดเต็มกล่อง (fill) แทน — ยืดแค่ ~2% แทบไม่เห็นความต่าง แต่ขอบจะชิดสนิทกับฝาซอง */
.env-back, .env-pocket{ object-fit:fill; }

/* การ์ด: สูงสุด 320px และรักษาสัดส่วนเดิมเสมอ
   บนหน้าจอแคบ ความสูงจะลดตามซอง จึงไม่ใหญ่กว่าตัวซอง */
.card-holder{
  position:absolute;
  left:50%; bottom:5%;
  width:auto;
  height:min(320px, 67.55vw);
  aspect-ratio: 1024/1536;

  opacity:0;
  visibility:visible;

  transform:translate(-50%, 30px);
  transform-origin:bottom center;
  z-index:2;

  transition:transform 4.35s cubic-bezier(.22,.84,.28,1), opacity .42s ease, z-index 0s linear .78s;

  will-change: transform, opacity;
}
.card-holder img{
  width:100%; height:100%; object-fit:cover;
  border-radius:3px;
  box-shadow:0 10px 30px rgba(58,48,37,0.25);
}
.card-copy{
  position:absolute; z-index:1; top:15%; left:7%; right:7%;
  text-align:center; color:var(--brown-deep);
  font-family:var(--serif-en); text-shadow:0 1px 10px rgba(255,255,255,.82);
  pointer-events:none;
}
.card-copy span{ display:block; font-size:clamp(6px, 1.35vw, 12px); letter-spacing:.16em; font-weight:600; }
.card-copy strong{ display:block; margin-top:.65em; font-size:clamp(10px, 2.3vw, 21px); font-weight:600; line-height:1.18; }
.card-copy b{ color:#c98a96; font-size:.86em; padding:0 .08em; }

.petal-shower{ position:fixed; inset:0; z-index:10001; overflow:hidden; pointer-events:none; }

/* ตัวห่อการเคลื่อนที่ของกลีบ: คุมตำแหน่งเริ่ม/หมุน/ระยะเวลาร่วง */
.petal-flight{
  position:absolute; top:-8vh; left:var(--petal-left);
  display:block;
  opacity:0;
  transform:translate3d(0,-20px,0) rotate(var(--petal-turn, 0deg));
  animation:petal-flight-fall var(--petal-duration) cubic-bezier(.45,0,.55,1) var(--petal-delay) forwards;
}
/* เส้นทางร่วงแบบซิกแซกซ้าย-ขวาหลายช่วง จำลองแรงลมพัดเป็นระลอก แทนการร่วงเป็นเส้นตรงเดิม */
@keyframes petal-flight-fall{
  0%{   opacity:0;  transform:translate3d(0, -20px, 0)                                 rotate(var(--petal-turn, 0deg)); }
  8%{   opacity:.9; }
  22%{  transform:translate3d(calc(var(--petal-drift, 40px) *  0.55), 22vh, 0) rotate(calc(var(--petal-turn, 0deg) +  70deg)); }
  40%{  transform:translate3d(calc(var(--petal-drift, 40px) * -0.35), 42vh, 0) rotate(calc(var(--petal-turn, 0deg) -  40deg)); }
  58%{  transform:translate3d(calc(var(--petal-drift, 40px) *  0.85), 62vh, 0) rotate(calc(var(--petal-turn, 0deg) + 160deg)); }
  76%{  transform:translate3d(calc(var(--petal-drift, 40px) * -0.15), 84vh, 0) rotate(calc(var(--petal-turn, 0deg) +  90deg)); }
  100%{ opacity:0;  transform:translate3d(var(--petal-drift, 40px), 115vh, 0) rotate(calc(var(--petal-turn, 0deg) + 280deg)); }
}
.petal{
  width:100%; height:auto;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(74,58,40,.18));
  /* เบลอขอบภาพดอกไม้ให้กลมกลืนกับพื้นหลัง แทนขอบสี่เหลี่ยม/พื้นหลังของรูปต้นฉบับ */
  -webkit-mask-image:radial-gradient(ellipse at center, #000 52%, transparent 76%);
  mask-image:radial-gradient(ellipse at center, #000 52%, transparent 76%);
  /* ระยะสั่นไหวเล็กน้อยระหว่างร่วง ให้ดูเป็นธรรมชาติมากขึ้น */
  animation:petal-sway var(--petal-flutter, 1800ms) ease-in-out var(--petal-phase, 0ms) infinite alternate;
}
@keyframes petal-sway{
  from{ transform:translateX(calc(var(--petal-sway, 20px) * -1)) rotate(-6deg); }
  to{ transform:translateX(var(--petal-sway, 20px)) rotate(6deg); }
}

.env-pocket{ z-index:3; }

.env-flap{
  z-index:4;
  /* จุดหมุนอยู่ที่ขอบบนของซองจริง (วัดจากภาพ: ราว 16.3% จากขอบบนของผืนภาพ) */
  transform-origin:50% 16.3%;
  transform-style:preserve-3d;
  backface-visibility:visible;
  /* perspective() ใส่ไว้ในทรานส์ฟอร์มของตัวเองแทนการใส่ perspective บนตัวแม่ (ดูหมายเหตุด้านบน) */
  transform:perspective(1400px) rotateX(0deg);
  transition: transform .75s cubic-bezier(.5,0,.3,1);
}

.env-closed{
  z-index:5;
  transition:opacity .55s ease;
}

.seal{
  position:absolute;
  /* ตำแหน่งอิงจากปลายแหลมของซองจริง (วัดจากภาพ: ราว 64% จากขอบบนของผืนภาพ) */
  left:50%; top:63.5%;
  width:17%;
  transform:translate(-50%,-50%) scale(1) rotate(-6deg);
  transform-origin:center;
  z-index:6;
  transition:opacity .5s ease, transform .5s ease;
  filter:drop-shadow(0 6px 10px rgba(58,48,37,.35));
}

/* ----- สถานะแอนิเมชัน (คลาสถูกเพิ่มเป็นลำดับด้วย JS) ----- */
/* 0.0–0.5s ตราครั่งจางและย่อ */
.envelope-stage.seal-open .seal{
  opacity:0;
  transform:translate(-50%,-70%) scale(.35) rotate(8deg);
}
/* 0.3–1.0s ซองปิดจางหาย + ฝาหมุนเปิด */
.envelope-stage.flap-open .env-closed{ opacity:0; }
.envelope-stage.flap-open .env-flap {
  transform:translate(2px, 4.3px) perspective(1400px) rotateX(-178deg);}
/* หลังฝาหมุนเปิดเสร็จ ย้ายไปไว้หลังสุด เพื่อไม่ให้ทับการ์ดที่กำลังเลื่อนออก */
.envelope-stage.flap-sent-back .env-flap{ z-index:0; }

/* 0.8–2.15s การ์ดเลื่อนขึ้นจนพ้นซอง โดยยังมีขนาดเท่าเดิม */
.envelope-stage.card-rise .card-holder{
  /* หลังกาเปิด: การ์ดค่อย ๆ ปรากฏและเลื่อนออกจากปากซอง */
  opacity:1;
  transform:translate(-50%, -108%);
  z-index:7; /* ขึ้นเหนือกาซองหลังเริ่มโผล่พ้นปาก */
}

/* หลังการ์ดพ้นซอง: ขยายแบบเด้ง — สลับไปใช้ position:fixed ที่คำนวณพิกัดจริงด้วย JS (ดูฟังก์ชัน goFullscreen)
   เพื่อความแม่นยำแบบพิกเซล แทนการคำนวณ scale/translate เป็นเปอร์เซ็นต์ */
.card-holder.fullscreen{
  transform:none !important;
  bottom:auto !important;
  transition:left .82s cubic-bezier(.34,1.56,.64,1),
             top .82s cubic-bezier(.34,1.56,.64,1),
             width .82s cubic-bezier(.34,1.56,.64,1),
             height .82s cubic-bezier(.34,1.56,.64,1);
}
.card-holder.fullscreen img{ border-radius:6px; }
#opening-screen::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, #eee5d6, #b9b1a2);
  opacity:0; transition:opacity .75s ease;
}
#opening-screen.card-focus::after{ opacity:1; }
.opening-message,.opening-motto,.opening-florals,.petal-shower{
  transition:filter .7s ease, opacity .7s ease;
}
#opening-screen.card-focus .opening-message,
#opening-screen.card-focus .opening-motto,
#opening-screen.card-focus .opening-florals,
#opening-screen.card-focus .env-layer,
#opening-screen.card-focus .seal,
#opening-screen.card-focus .petal-shower{
  filter:blur(3px); opacity:0; transition:filter .7s ease, opacity .7s ease;
}

.tap-hint{
  margin-top:34px;
  font-family:var(--serif-en);
  letter-spacing:.32em;
  font-size:13px;
  color:var(--brown);
  text-transform:uppercase;
  animation:pulse 2.4s ease-in-out infinite;
  z-index:1;
}
.tap-hint::after{ content:""; display:block; width:42px; height:1px; margin:14px auto 0; background:rgba(122,97,66,.6); }
.opening-motto{
  /* ส่งลงเลเยอร์ล่างสุดของหน้าซอง เพื่อไม่ให้ทับซอง/การ์ด/คำใบ้แตะเปิด */
  position:absolute; z-index:0; bottom:clamp(46px, 8vh, 92px); left:50%; transform:translateX(-50%);
  color:rgba(104,82,56,.7); text-align:center; font:500 12px/1.85 'Cormorant Garamond', var(--serif-en);
  letter-spacing:.35em; white-space:nowrap;
}
/* จอคอมที่มีความสูงจำกัด: จัดชุดเปิดการ์ดให้ครบในหนึ่งหน้าจอ โดยไม่กระทบมือถือ */
@media (min-width:481px){
  #opening-screen{ box-sizing:border-box; padding-top:clamp(80px, 11vh, 110px); }
  .opening-message strong{ font-size:clamp(56px, 8.8vw, 84px); }
}
@media (min-width:481px) and (max-height:900px){
  .opening-message{ top:clamp(52px, 7vh, 68px); }
  .envelope-stage{ width:min(72vw, 440px); }
  .tap-hint{ margin-top:22px; }
  .opening-motto{ bottom:clamp(24px, 4vh, 38px); }
}
@keyframes pulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
#opening-screen.opening-hide-hint .tap-hint{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s;
}

/* =========================================================
   MAIN SITE
   ========================================================= */
#site{
  overflow:clip;
  opacity:0;
  transform:scale(.97);
  transition:opacity .8s ease, transform .8s ease;
}
#site.show{ opacity:1; transform:scale(1); }

/* ---- Hero ---- */
.hero{
  --floral-overlap:16px;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px 24px 54px;
  background:
    radial-gradient(ellipse at 4% 30%, rgba(170,157,124,.07), transparent 34%),
    radial-gradient(ellipse at 96% 80%, rgba(157,160,129,.08), transparent 30%),
    radial-gradient(ellipse at 50% 45%, #faf7f0 0%, #f3eee5 100%);
  position:relative;
  overflow:visible;
  z-index:1;
  /* Keep the side edges tidy while letting flowers cross into Countdown. */
  clip-path:inset(0 0 -400px 0);
}
/* ภาพแอนิเมชัน ข้อความ และเส้นเลื่อนต้องวางแบบ absolute;
   จึงไม่ให้กฎเลเยอร์ทั่วไปทับตำแหน่งของทั้งสามส่วน */
.hero > :not(.hero-botanical):not(.hero-couple):not(.hero-copy):not(.scroll-cue):not(.hero-progress):not(.hero-actions){ position:relative; z-index:1; }
.hero-botanical{ position:absolute; inset:0; overflow:visible; pointer-events:none; opacity:0; transition:opacity .65s ease; }
.hero.is-framed .hero-botanical{ opacity:1; }
/* Reference artwork has its own desktop composition, preserving flower proportions. */
.hero-botanical.hero-reference-scene{
  --scene-image:url('assets/hero-reference-mobile.png');
  background:none;
}
.hero-reference-scene > :not(.hero-corner-note):not(.hero-side-note):not(.hero-edge-sprig):not(.hero-edge-petal){ display:none; }
.hero-edge-sprig{
  position:absolute; z-index:2; left:-8px; bottom:-40px;
  width:clamp(150px, 39vw, 270px); height:180px;
  background:url('assets/hero-flowers-bottom-left.png') left bottom/contain no-repeat;
  transform:rotate(-8deg); transform-origin:left bottom;
  filter:saturate(.65) brightness(1.08); opacity:.82;
  pointer-events:none;
}
.hero-edge-petal{
  position:absolute; left:32%; bottom:-26px; width:20px; height:24px;
  background:url('assets/ivory-petal.png') center/contain no-repeat;
  transform:rotate(35deg); opacity:.6; pointer-events:none;
}
@media(min-width:768px){
  .hero-edge-sprig{ left:1%; bottom:-42px; height:250px; }
  .hero-edge-petal{ left:27%; bottom:-32px; width:28px; height:30px; }
}
.hero-reference-scene::before,.hero-reference-scene::after{ display:none; }
.hero-botanical.hero-reference-scene::before{
  display:block; content:""; position:absolute; inset:0 0 -36px;
  background:var(--scene-image) center/100% 100% no-repeat; opacity:1;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 65px), transparent 100%);
  mask-image:linear-gradient(#000 calc(100% - 65px), transparent 100%);
}
@media(min-width:768px){
  .hero-botanical.hero-reference-scene{ --scene-image:url('assets/hero-reference-desktop.png'); }
}
.hero-wash{ display:none; }
.hero-wash-top{ top:0; left:0; }
.hero-wash-bottom{ bottom:0; right:0; }
.hero-corner-note{
  position:absolute; left:8%; top:9%; color:#887558;
  font:500 clamp(9px, 1.2vw, 17px)/1.9 'Cormorant Garamond', serif;
  letter-spacing:.23em; text-transform:uppercase; text-align:left;
}
.hero-corner-note span{ display:none; }
.hero-corner-note::after{ content:""; display:block; width:1px; height:22px; background:#ac9470; margin-top:10px; }
.hero-scatter{ position:absolute; width:clamp(15px, 2.8vw, 34px); aspect-ratio:1; background:center/contain no-repeat; opacity:.55; }
.scatter-leaf-one{ left:12%; top:39%; background-image:url('assets/petal-leaf-1.png'); transform:rotate(-28deg); }
.scatter-leaf-two{ right:15%; bottom:9%; background-image:url('assets/petal-leaf-1.png'); transform:rotate(45deg); }
.scatter-petal-one{ left:21%; top:46%; background-image:url('assets/ivory-petal.png'); transform:rotate(25deg); }
.scatter-petal-two{ right:23%; bottom:16%; background-image:url('assets/ivory-petal.png'); transform:rotate(-32deg); }
@media(max-width:480px){
  .hero-corner-note{ left:7%; top:6%; font-size:9px; }
  .hero-wash{ width:65vw; }
}
/* Paper and soft foliage shadows stay separate from the transparent flowers. */
.hero-botanical::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23877c60' opacity='.15' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-size:180px 180px; opacity:.26;
}
.hero-botanical::after{
  content:""; position:absolute; inset:-4%; opacity:.2; filter:blur(19px);
  background:
    radial-gradient(ellipse 5% 18% at 4% 13%, #777e63 15%, transparent 75%),
    radial-gradient(ellipse 12% 4% at 12% 5%, #777e63 15%, transparent 75%),
    radial-gradient(ellipse 5% 14% at 92% 85%, #777e63 15%, transparent 75%),
    radial-gradient(ellipse 13% 4% at 91% 93%, #777e63 15%, transparent 75%);
}
.hero-botanical .floral-cut{
  z-index:1; background-size:contain; background-repeat:no-repeat;
  filter:saturate(.68) sepia(.08) brightness(1.08); opacity:.88;
  -webkit-mask-image:none; mask-image:none;
}
.hero-botanical .floral-left{
  left:-2%; bottom:calc(-1 * var(--floral-overlap)); width:clamp(180px, 46vw, 360px); height:58%;
  background-image:url('assets/hero-flowers-bottom-left.png'); background-position:left bottom;
}
.hero-botanical .floral-bottom{
  right:-2%; top:-2%; width:clamp(170px, 43vw, 330px); height:52%;
  background-image:url('assets/hero-flowers-top-right.png'); background-position:right top;
}
@media(min-width:768px){
  .hero{ --floral-overlap:24px; }
  .hero-botanical .floral-left{ width:clamp(330px, 32vw, 660px); height:85%; left:-1%; }
  .hero-botanical .floral-bottom{ width:clamp(300px, 29vw, 600px); height:80%; right:-1%; top:-3%; }
}
/* Offset translucent branches create depth behind the crisp foreground. */
.hero-botanical .floral-left{ transform-origin:left bottom; }
.hero-botanical .floral-bottom{ transform-origin:right top; }
.hero-botanical .floral-veil{
  z-index:0; opacity:.17; filter:blur(1.6px) saturate(.55);
}
.hero-botanical .floral-left.floral-veil{
  transform:translate(8%, -5%) rotate(12deg) scale(1.24);
}
.hero-botanical .floral-bottom.floral-veil{
  transform:translate(-10%, 5%) rotate(13deg) scale(1.2);
}
.hero-botanical .floral-distant{
  z-index:0; opacity:.1; filter:blur(9px) saturate(.45);
}
.hero-scatter.scatter-petal-three{ left:17%; top:3%; transform:rotate(-35deg); }
.hero-scatter.scatter-petal-four{ right:20%; top:24%; transform:rotate(65deg); }
.hero-scatter.scatter-petal-five{ left:9%; top:60%; transform:rotate(-15deg); }
.hero-scatter.scatter-petal-six{ right:10%; bottom:24%; transform:rotate(28deg); }
.scatter-petal-three,.scatter-petal-four,.scatter-petal-five,.scatter-petal-six{
  background-image:url('assets/ivory-petal.png'); opacity:.6; width:clamp(22px, 3.5vw, 45px);
}
.hero-botanical .floral-left.floral-distant{
  transform:translate(-3%, 3%) rotate(22deg) scale(1.6);
}
.hero-botanical .floral-bottom.floral-distant{
  transform:translate(3%, -3%) rotate(24deg) scale(1.55);
}
@media(min-width:768px){
  .hero-botanical .floral-veil{ filter:blur(2.5px) saturate(.65); }
  .hero-botanical .floral-distant{ filter:blur(14px) saturate(.45); }
}
.hero-copy{ position:absolute; z-index:2; top:47%; left:50%; width:min(660px, 90vw); display:flex; flex-direction:column; align-items:center; opacity:0; transform:translate(-50%, 22px); }
.hero .kicker{
  font-family:var(--serif-en); font-style:italic;
  color:var(--sage-deep); font-size:15px; letter-spacing:.05em;
}
.hero h1{
  font-family:'Cherolina', var(--script);
  font-weight:400;
  font-size:clamp(56px, 12vw, 108px);
  color:var(--brown-deep);
  margin:7px 0 10px;
  line-height:1.15;
}
.hero h1 .amp{ color:var(--sage); padding:0 .1em; font-family:var(--serif-en); font-size:.5em; vertical-align:middle; }
.hero .venue{
  font-size:14px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brown); margin-top:6px;
}
.hero .date-row{
  margin-top:12px;
  font-family:var(--serif-en);
  font-size:clamp(18px,2.6vw,22px);
  color:var(--ink);
  display:flex; gap:14px; align-items:center;
}
.hero .date-row .dot{ width:5px;height:5px;border-radius:50%;background:var(--sage); }
.hero .tagline{
  margin-top:16px;
  font-style:italic;
  color:var(--brown);
  font-family:var(--serif-en);
  font-size:16px;
}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:1px; height:46px; background:linear-gradient(var(--brown), transparent);
}
.hero .scroll-cue{ display:none; }
.hero.is-copy-visible .hero-copy{ opacity:1; transform:translate(-50%, 0); transition:opacity .72s ease, transform .72s cubic-bezier(.22,.8,.25,1); }
.hero.is-copy-visible .hero-copy > *{ animation:hero-copy-in 1.1s cubic-bezier(.22,.8,.25,1) both; }
.hero.is-copy-visible .hero-copy .kicker{ animation-delay:.06s; }
.hero.is-copy-visible .hero-copy h1{ animation-delay:.22s; }
.hero.is-copy-visible .hero-copy .venue{ animation-delay:.44s; }
.hero.is-copy-visible .hero-copy .date-row{ animation-delay:.62s; }
.hero.is-copy-visible .hero-copy .tagline{ animation-delay:.8s; }
@keyframes hero-copy-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ---- Our story ---- */
.story-grid{
  display:grid; grid-template-columns: 1fr; gap:28px;
  margin-top:44px;
}
.story-card{
  background:var(--paper);
  border-radius:2px;
  padding:30px 28px;
  border-left:2px solid var(--sage);
  box-shadow:0 12px 28px rgba(74,58,40,.045);
  transition:transform .35s ease, box-shadow .35s ease;
}
.story-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.story-card h3{
  font-family:var(--serif-en); font-style:italic; font-weight:600;
  color:var(--brown-deep); font-size:20px; margin-bottom:10px;
}
.story-card p{ line-height:1.85; font-size:16px; color:var(--ink); }

/* ---- Timeline ---- */
.timeline{ position:relative; margin-top:50px; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px;
  background:var(--line);
}
.tl-item{ position:relative; padding-bottom:40px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-26px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--ivory); border:2px solid var(--sage);
}
.tl-item .tl-date{
  font-family:var(--serif-en); font-style:italic; color:var(--sage-deep); font-size:14px;
}
.tl-item h3{ margin-top:5px; font-size:19px; color:var(--brown-deep); }
.tl-item p{ margin-top:8px; font-size:15.5px; line-height:1.8; color:var(--ink); }

/* ---- Details / schedule ---- */
.detail-grid{
  display:grid; grid-template-columns:1fr; gap:18px; margin-top:44px;
}
@media(min-width:640px){ .detail-grid{ grid-template-columns:1fr 1fr; } }
.detail-card{
  background:var(--ivory);
  border:1px solid var(--line);
  padding:28px;
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.detail-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.detail-card .icon{ font-size:26px; color:var(--sage-deep); }
.detail-card h3{ margin-top:12px; font-size:19px; color:var(--brown-deep); }
.detail-card p{ margin-top:8px; font-size:15px; line-height:1.75; color:var(--brown); }

.schedule-list{ margin-top:44px; }
.sch-row{
  display:flex; gap:22px; padding:18px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.sch-row:last-child{ border-bottom:none; }
.sch-time{
  font-family:var(--serif-en); font-style:italic; color:var(--sage-deep);
  font-size:17px; min-width:96px;
}
.sch-what h3{ font-size:17px; color:var(--brown-deep); font-weight:500; }
.sch-what p{ font-size:14.5px; color:var(--brown); margin-top:3px; }

/* ---- Countdown ---- */
#countdown{ padding:94px 0 100px; background:#f8f5ee; color:#344638; }
#countdown::before{ display:none; }
#countdown .eyebrow{
  color:inherit; font-family:'Cormorant Garamond', var(--serif-en);
  font-size:clamp(44px, 7vw, 66px); font-weight:500; font-style:normal; letter-spacing:.01em;
}
.countdown-date{
  margin-top:16px; font:500 clamp(10px, 2.5vw, 14px)/1.7 'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:.28em;
}
.countdown-wrap{
  margin:42px auto 0; max-width:600px;
  display:flex; justify-content:center; gap:0;
  flex-wrap:nowrap;
}
.cd-box{
  min-width:0; flex:1 1 0; position:relative;
  background:transparent; color:inherit;
  padding:0 6px; text-align:center; border-radius:0;
}
.cd-box + .cd-box::before{
  content:""; position:absolute; left:0; top:7px; height:clamp(32px, 5vw, 48px);
  width:1px; background:rgba(74,58,40,.16);
}
.cd-num{ font-family:'Cormorant Garamond', var(--serif-en); font-size:clamp(38px,6vw,58px); line-height:1.1; font-weight:500; }
.cd-label{ font:500 clamp(9px,2.4vw,12px)/1.5 'Cormorant Garamond', serif; letter-spacing:.16em; text-transform:uppercase; margin-top:14px; opacity:.85; }

/* ---- Gallery ---- */
.gallery{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media(min-width:640px){ .gallery{ grid-template-columns:repeat(4,1fr); } }
.g-cell{
  aspect-ratio:3/4;
  background:linear-gradient(155deg, var(--paper) 0%, var(--paper-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--brown); font-size:12px; letter-spacing:.08em; text-align:center; padding:10px;
  border:1px dashed var(--champagne);
  transition:transform .35s ease, border-color .35s ease;
}
.g-cell:hover{ transform:rotate(-1.5deg) translateY(-4px); border-color:var(--sage-deep); }
.g-cell.g-photo{ object-fit:cover; width:100%; height:100%; padding:0; border-style:solid; }

/* ใช้ช่องดอกไม้จากภาพอ้างอิงเฉพาะสองตำแหน่ง เพื่อให้หน้าเนื้อหามีจังหวะแต่ไม่แน่นเกินไป */
#story::after, #rsvp::after{
  content:""; position:absolute; width:220px; height:250px;
  background-image:url('assets/floral-reference.png'); background-repeat:no-repeat;
  background-size:auto 250px; opacity:.23; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 46%, transparent 73%);
  mask-image:radial-gradient(ellipse at center, #000 46%, transparent 73%);
}
#story::after{ right:-65px; bottom:-70px; background-position:right bottom; }
#rsvp::after{ left:-65px; top:-60px; background-position:left center; }
.gallery .g-cell:nth-child(3n){ background:linear-gradient(155deg,#eef1e7,#dfe6d4); }

/* ---- Location ---- */
#location .container{ max-width:1000px; }
.venue-art{ margin:30px auto 0; max-width:900px; }
.venue-art img{
  width:100%; height:auto;
  filter:saturate(.78) sepia(.08);
  -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20714%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%2210%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22%20d%3D%22M35%2043%20Q120%2012%20208%2030%20T405%2023%20T609%2032%20T800%2022%20Q900%2017%20964%2046%20Q980%20135%20966%20217%20T976%20393%20T962%20565%20Q978%20645%20947%20675%20Q851%20692%20756%20679%20T560%20690%20T354%20675%20T170%20687%20Q86%20690%2035%20660%20Q14%20591%2030%20509%20T22%20334%20T34%20167%20Q19%2088%2035%2043Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20714%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%2210%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22%20d%3D%22M35%2043%20Q120%2012%20208%2030%20T405%2023%20T609%2032%20T800%2022%20Q900%2017%20964%2046%20Q980%20135%20966%20217%20T976%20393%20T962%20565%20Q978%20645%20947%20675%20Q851%20692%20756%20679%20T560%20690%20T354%20675%20T170%20687%20Q86%20690%2035%20660%20Q14%20591%2030%20509%20T22%20334%20T34%20167%20Q19%2088%2035%2043Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.loc-box{
  margin-top:14px;
  padding:0 12px;
  text-align:center;
}
.loc-box h3{ font-family:var(--serif-en); font-style:italic; font-size:24px; color:var(--brown-deep); }
.loc-box p{ margin-top:10px; color:var(--sage-deep); font-family:var(--serif-en); font-size:clamp(18px, 3vw, 23px); line-height:1.8; }
.btn{
  display:inline-block; margin-top:22px;
  padding:13px 30px;
  border:1px solid var(--brown-deep);
  color:var(--brown-deep);
  text-decoration:none;
  font-size:14px; letter-spacing:.08em;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--brown-deep); color:var(--ivory); }
.btn.solid{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--ivory); }
.btn.solid:hover{ background:var(--brown-deep); border-color:var(--brown-deep); }

/* ---- Hero action row (ร่วมแสดงความยินดี / ลงชื่อเข้าร่วมงาน / แกลเลอรี) — วางไว้ใต้ tagline ---- */
.hero-actions{
  position:relative; z-index:2;
  display:flex; align-items:stretch; justify-content:center;
  width:100%; margin-top:22px;
}
.hero-btn{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding:14px 6px 16px;
  color:var(--brown-deep);
  text-decoration:none;
  font:500 clamp(10px, 2.6vw, 12px)/1.2 'Cormorant Garamond', var(--serif-en);
  letter-spacing:.02em;
  text-align:center;
  border-left:1px solid rgba(90,74,54,.18);
  transition:opacity .2s ease, color .2s ease;
}
.hero-btn:first-child{ border-left:none; }
.hero-btn svg{ display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hero-btn-icon{ display:block; }
.hero-btn:hover{ opacity:.68; }
/* ปุ่มหลัก (RSVP) เน้นสีเข้มขึ้นเล็กน้อยให้เด่นกว่าอีกสองปุ่ม */
.hero-btn.hero-btn-primary{ color:var(--sage-deep); font-weight:600; }
@media (max-width:360px){
  .hero-btn{ padding:12px 4px 14px; }
  .hero-btn span{ font-size:10px; }
}

/* ---- Dress code ---- */
#dresscode .container{ max-width:960px; }
#dresscode::before{ display:none; }
#dresscode .eyebrow{
  font-family:'Cormorant Garamond', var(--serif-en); font-style:normal;
  font-size:clamp(44px, 7vw, 66px); color:#344638;
}
.dress-divider{ width:48px; height:1px; background:var(--champagne); margin:22px auto; }
#dresscode .lede{ max-width:36ch; font-size:clamp(13px, 2.8vw, 16px); color:var(--brown); }
#dresscode .dress-row{ max-width:510px; margin-left:auto; margin-right:auto; }
.dress-illustration{ margin:40px auto 0; max-width:820px; }
.dress-illustration img{ width:100%; height:auto; }
@media(max-width:480px){
  .dress-illustration{ margin:30px -10px 0; }
}
.dress-row{
  margin-top:40px;
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
}
.dress-swatch{ text-align:center; }
.dress-swatch .chip{
  width:52px; height:52px; border-radius:50%;
  margin:0 auto 10px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.5);
}
.dress-swatch span{ font-size:13px; color:var(--brown); }

/* ---- RSVP ---- */
.rsvp-panel{
  margin-top:44px;
  background:var(--ivory);
  border:1px solid var(--line);
  padding:36px 28px;
}
.f-row{ margin-bottom:20px; }
.f-row label{
  display:block; font-size:13px; letter-spacing:.05em; color:var(--brown-deep); margin-bottom:8px;
}
.f-row input[type=text], .f-row input[type=number], .f-row textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--line); background:#fff;
  font-family:var(--serif-th); font-size:15px; color:var(--ink);
  border-radius:1px;
}
.f-row textarea{ resize:vertical; min-height:90px; }
.radio-group{ display:flex; gap:22px; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink); }
.rsvp-panel .btn{ width:100%; text-align:center; cursor:pointer; background:var(--sage-deep); color:var(--ivory); border-color:var(--sage-deep); }
.rsvp-panel .btn:hover{ background:var(--brown-deep); border-color:var(--brown-deep); }
.rsvp-note{ margin-top:14px; font-size:13px; color:var(--brown); text-align:center; display:none; }
.rsvp-note.show{ display:block; }

/* ช่องจำนวนแขก: ปิด/เทา เมื่อเลือก "ไม่สะดวกเข้าร่วม" */
.f-row input[type=number]:disabled{
  background:var(--paper-deep); color:var(--brown); opacity:.65; cursor:not-allowed;
}

/* สถานะสำเร็จ: แทนที่ฟอร์มทั้งหมดหลังยืนยันคำตอบ */
.rsvp-success{ text-align:center; padding:6px 0 2px; }
.rsvp-success-text{
  font-family:var(--serif-en); font-style:italic; font-size:clamp(19px, 3vw, 22px);
  color:var(--sage-deep); margin-bottom:20px;
}
.rsvp-success .btn{ width:100%; text-align:center; cursor:pointer; }

/* ป็อปอัปยืนยันข้อมูลก่อนส่งจริง — Minimal Luxury: ivory/cream + warm brown + muted sage */
.rsvp-confirm-overlay{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(48,40,30,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:24px;
}
.rsvp-confirm-overlay[hidden]{ display:none; }
.rsvp-confirm-box{
  position:relative;
  width:100%; max-width:420px;
  background:var(--ivory);
  border:1px solid rgba(122,97,66,.35);
  border-radius:16px;
  padding:40px 34px 30px;
  text-align:center;
  box-shadow:0 24px 60px rgba(58,48,37,.28);
  overflow:hidden;
}
.rsvp-confirm-close{
  position:absolute; top:14px; right:16px; z-index:2;
  background:none; border:none; padding:4px;
  font-size:20px; line-height:1; color:var(--brown);
  cursor:pointer; transition:color .2s ease;
}
.rsvp-confirm-close:hover{ color:var(--brown-deep); }
.rsvp-confirm-corner{
  position:absolute; z-index:0;
  width:120px; height:120px;
  background-size:contain; background-repeat:no-repeat;
  opacity:.8; filter:saturate(.8); pointer-events:none;
}
.rsvp-confirm-corner-tl{ top:-18px; left:-18px; background-image:url('assets/hero-flowers-top-right.png'); transform:scaleX(-1); }
.rsvp-confirm-corner-br{ bottom:-18px; right:-18px; background-image:url('assets/hero-flowers-bottom-left.png'); transform:scaleX(-1); }
.rsvp-confirm-box > *{ position:relative; z-index:1; }
.rsvp-confirm-thankyou{
  font-family:'Cherolina', var(--script); font-size:clamp(30px, 6vw, 38px);
  font-weight:400; color:var(--brown-deep); margin-bottom:2px; line-height:1;
}
.rsvp-confirm-title{
  font-family:var(--serif-th); font-weight:600; font-size:19px; color:var(--ink); margin-bottom:14px;
}
.rsvp-confirm-divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--sage-deep); margin-bottom:20px;
}
.rsvp-confirm-divider::before, .rsvp-confirm-divider::after{
  content:''; width:44px; height:1px; background:rgba(185,167,125,.4);
}
.rsvp-confirm-divider-small{ margin:18px 0 8px; }
.rsvp-confirm-divider-small::before, .rsvp-confirm-divider-small::after{ width:30px; }
.rsvp-confirm-summary{
  background:var(--paper); border-radius:10px;
  padding:16px 20px; margin-bottom:24px; text-align:left;
}
.rsvp-confirm-row{ display:flex; gap:12px; padding:5px 0; font-size:14px; align-items:baseline; }
.rsvp-confirm-label{ flex:0 0 auto; min-width:96px; color:var(--brown-deep); font-weight:600; }
.rsvp-confirm-label::after{ content:':'; margin-left:2px; }
.rsvp-confirm-value{ color:var(--ink); font-weight:500; word-break:break-word; }
.rsvp-confirm-actions{ display:flex; gap:12px; }
.rsvp-confirm-btn{
  flex:1; padding:13px 14px; border-radius:30px;
  font-family:var(--serif-th); font-size:14px; letter-spacing:.02em;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:opacity .2s ease, background .2s ease;
}
.rsvp-confirm-btn-outline{ background:var(--ivory); border:1px solid var(--brown-deep); color:var(--brown-deep); }
.rsvp-confirm-btn-outline:hover{ background:var(--paper); }
.rsvp-confirm-btn-solid{ background:var(--sage-deep); border:1px solid var(--sage-deep); color:var(--ivory); }
.rsvp-confirm-btn-solid:hover{ background:var(--brown-deep); border-color:var(--brown-deep); }
.rsvp-confirm-footer{
  margin-top:2px; font-size:11px; letter-spacing:.35em; color:var(--brown); text-transform:uppercase;
}
@media(max-width:480px){
  .rsvp-confirm-box{ padding:34px 22px 24px; }
  .rsvp-confirm-corner{ width:90px; height:90px; }
  .rsvp-confirm-actions{ flex-direction:column; }
}

/* ---- Footer ---- */
footer{
  padding:40px 24px 30px;
  text-align:center;
  background:var(--brown-deep);
  color:var(--paper);
}
footer .f-names{
  font-family:'Cherolina', var(--script); font-size:42px;
}
footer .f-date{ margin-top:8px; font-size:14px; letter-spacing:.1em; opacity:.8; }
footer .f-note{ margin-top:16px; font-size:12px; opacity:.55; }

/* ---- Scroll reveal ---- */
.motion-ready .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.22,.8,.25,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.motion-ready .reveal.revealed{ opacity:1; transform:translateY(0); }
.motion-ready .eyebrow.reveal,
.motion-ready .lede.reveal,
.motion-ready .countdown-date.reveal{
  transform:translateY(22px); filter:blur(4px);
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.22,.8,.25,1), filter 1s ease;
  transition-delay:var(--reveal-delay, 0ms);
}
.motion-ready .eyebrow.reveal.revealed,
.motion-ready .lede.reveal.revealed,
.motion-ready .countdown-date.reveal.revealed{ transform:translateY(0); filter:blur(0); }
.motion-ready .story-card.reveal,
.motion-ready .detail-card.reveal,
.motion-ready .g-cell.reveal{ transform:translateY(20px) scale(.98); }
.motion-ready .story-card.reveal.revealed,
.motion-ready .detail-card.reveal.revealed,
.motion-ready .g-cell.reveal.revealed{ transform:translateY(0) scale(1); }
.motion-ready .story-card.reveal.revealed:hover,
.motion-ready .detail-card.reveal.revealed:hover{ transform:translateY(-5px) scale(1); }
.motion-ready .g-cell.reveal.revealed:hover{ transform:rotate(-1.5deg) translateY(-4px) scale(1); }

/* ---- Hero portrait ---- */
.hero-couple{
  position:absolute; z-index:1; left:50%; top:50%; width:68.9vw; height:59.7svh; margin:0;
  opacity:0; pointer-events:none; transform:translate(-50%, 34%);
  transition:top .3s cubic-bezier(.22,.8,.25,1), width .7s cubic-bezier(.22,.8,.25,1), height .7s cubic-bezier(.22,.8,.25,1), transform .7s cubic-bezier(.22,.8,.25,1), opacity .22s ease;
}
.hero.is-story-playing .hero-couple{ left:50% !important; top:50% !important; opacity:.96; transform:translate(-50%, -50%) !important; }
.hero.is-story-settled .hero-couple{ left:50% !important; top:6% !important; width:min(400px, 75vw); height:min(40svh, 400px); opacity:.84; transform:translateX(-50%) !important; }
.hero.is-story-settled .hero-couple{
  transition:top 1.8s cubic-bezier(.4,0,.2,1), width 1.8s cubic-bezier(.4,0,.2,1), height 1.8s cubic-bezier(.4,0,.2,1), transform 1.8s cubic-bezier(.4,0,.2,1), opacity .6s ease;
}
.hero.is-framed .hero-couple{ opacity:.9; }
.couple-story{
  width:100%; height:100%; display:block;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:opacity .24s ease, transform .24s ease;
}
.couple-story.is-changing{ opacity:.42; transform:scale(.99); }

/* ---- Hero progress / journey text ----
   .hero-progress--message = โหมดข้อความ (แสดง .journey-loading)
   ไม่มีคลาสนี้ = โหมดแถบบาร์เดิม (แสดง .progress-bar) — ลบคลาส hero-progress--message ออกเพื่อกลับไปใช้แถบบาร์ */
.hero-progress{
  position:absolute; z-index:2; left:50%; top:calc(50% + 39svh + 12px);
  opacity:0;
  transform:translate(-50%, 8px); transition:opacity .32s ease, transform .4s ease;
}
.hero-progress.is-active{ opacity:1; transform:translate(-50%, 0); }
.hero.is-story-settled .hero-progress{ opacity:0; transform:translate(-50%, -8px); }

/* โหมดแถบบาร์ (เมื่อไม่มีคลาส --message) */
.hero-progress .progress-bar{ display:none; }
.hero-progress:not(.hero-progress--message) .progress-bar{
  display:block; position:relative;
  width:clamp(90px, 17vw, 102px); height:20px; padding:3px;
  overflow:hidden; border-radius:999px; background:rgba(217,203,173,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
  box-sizing:border-box;
}
.hero-progress:not(.hero-progress--message) .progress-bar::after{
  content:""; display:block; width:100%; height:100%; border-radius:inherit; background:var(--sage-deep);
  transform:scaleX(0); transform-origin:left center;
}
.hero-progress:not(.hero-progress--message).is-active .progress-bar::after{
  animation:hero-progress-fill 3.75s linear forwards;
}
@keyframes hero-progress-fill{ to{ transform:scaleX(1); } }

/* โหมดข้อความ (เมื่อมีคลาส --message) */
.hero-progress .journey-loading{ display:none; }
.hero-progress--message .journey-loading{
  display:block;
  font-family:var(--serif-en); font-style:italic; font-size:13px;
  letter-spacing:.02em; white-space:nowrap;
  color:var(--sage-deep);
}
.hero-progress--message.is-active .journey-loading{ animation:hero-progress-pulse 1.3s ease-in-out infinite; }
.journey-dots::after{
  content:"..."; display:inline-block; width:1.2em; overflow:hidden;
  vertical-align:bottom; text-align:left;
  animation:journey-dots-anim 1.2s steps(4) infinite;
}
@keyframes journey-dots-anim{ 0%{ width:0; } 100%{ width:1.2em; } }
@keyframes hero-progress-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* ---- Schedule: portrait-style timeline ---- */
#schedule{ background:linear-gradient(135deg, rgba(241,233,218,.62), rgba(250,245,236,.92)); }
.schedule-list{ margin:48px auto 0; max-width:650px; position:relative; }
.schedule-list::before{
  /* จัดกึ่งกลางเส้นให้ตรงกับกึ่งกลางคอลัมน์ไอคอนเสมอ (24% + gap + ครึ่งความกว้างคอลัมน์ไอคอน 92px)
     เพื่อให้ไอคอนซึ่งทึบแสงทับเส้นไว้พอดี ไม่มีเส้นโผล่ข้างไอคอน */
  content:""; position:absolute; left:calc(24% + clamp(12px,3vw,28px) + 46px); top:34px; bottom:34px; width:1px; background:var(--champagne); z-index:0;
}
.sch-row{
  display:grid; grid-template-columns:24% 92px 1fr; gap:clamp(12px,3vw,28px);
  align-items:center; padding:22px 0; border:0; position:relative;
}
.sch-time{ min-width:0; font-size:clamp(24px,5vw,38px); text-align:right; letter-spacing:.04em; padding-right:clamp(14px,3vw,26px); }
.schedule-icon{
  width:76px; height:76px; border-radius:50%; position:relative; z-index:1;
  justify-self:center;
  background-color:rgba(250,245,236,.95); background-image:url('assets/schedule-icons.png');
  background-repeat:no-repeat; background-size:450% auto;
  box-shadow:0 0 0 8px rgba(241,233,218,.7);
}
.icon-rings{ background-position:34% 33.1%; }
.icon-water{ background-position:34% 33.1%; }
.icon-cheers{ background-position:66% 33.1%; }
.icon-party{ background-position:3% 33%; }
.sch-what span{ display:block; color:var(--sage-deep); font-family:var(--serif-en); font-weight:600; font-size:clamp(16px,3vw,20px); letter-spacing:.14em; }
.sch-what p{ max-width:29ch; margin-top:6px; }

/* ---- Keep compact groups on one phone row ---- */
.dress-row{ flex-wrap:nowrap; gap:clamp(6px,3vw,28px); }
.dress-swatch{ flex:1 1 0; min-width:0; }
.dress-swatch .chip{ width:clamp(38px,12vw,52px); height:clamp(38px,12vw,52px); }
.dress-swatch span{ font-size:clamp(10px,2.8vw,13px); overflow-wrap:anywhere; }

/* ---- Gift / congratulations ---- */
#gift{ background:linear-gradient(180deg, var(--ivory), var(--paper)); }
.gift-panel{
  margin-top:42px; padding:26px; display:grid; grid-template-columns:minmax(190px, 255px) 1fr;
  gap:clamp(22px,5vw,44px); align-items:center; background:rgba(255,255,255,.38); border:1px solid var(--line);
}
.payment-qr{ width:100%; max-width:255px; margin:auto; border-radius:10px; box-shadow:var(--shadow); }
.gift-fields .btn{ width:100%; cursor:pointer; }
.slip-input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.slip-label{ display:flex !important; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.slip-label span{ padding:8px 12px; border:1px solid var(--sage-deep); color:var(--sage-deep); font-size:12px; }
.slip-selected{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px; padding:9px 12px;
  background:var(--paper); border:1px solid var(--line); font-size:13px;
}
.slip-selected[hidden]{ display:none; }
.slip-filename{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--brown-deep); }
.slip-remove{
  flex:none; background:none; border:none; padding:0;
  color:var(--brown); font-size:12px; text-decoration:underline; cursor:pointer;
}
.slip-remove:hover{ color:var(--brown-deep); }

/* ---- Invitation exit ---- */
.card-holder.fullscreen.fly-away{
  opacity:0;
  transform:translate(72vw, -58vh) rotate(17deg) scale(.72) !important;
  transition:transform .7s cubic-bezier(.48,.02,.8,.4), opacity .62s ease !important;
}

@media(max-width:480px){
  .section{ padding:70px 0; }
  .hero{ min-height:100svh; padding:14px 14px 42px; }
  .hero-couple{ width:88vw; height:62svh; }
  .hero-progress{ top:calc(50% + 31svh + 24px); }
  .hero.is-story-settled .hero-couple{ top:5%; width:min(420px, 80vw); height:min(37svh, 420px); }
  .hero-copy{ top:45%; width:92vw; }
  .hero h1{ font-size:clamp(46px, 13vw, 62px); }
  .hero .date-row{ gap:9px; font-size:16px; }
  .hero .tagline{ margin-top:12px; font-size:14px; }
  .schedule-list::before{ left:calc(18% + 10px + 32px); }
  .sch-row{ grid-template-columns:18% 64px 1fr; gap:10px; padding:18px 0; }
  .schedule-icon{ width:58px; height:58px; box-shadow:0 0 0 5px rgba(241,233,218,.7); }
  .sch-time{ font-size:20px; }
  .gift-panel{ grid-template-columns:1fr; padding:22px; }
  .payment-qr{ max-width:235px; }
}

/* Smaller supporting illustrations, with more breathing room on large screens. */
@media(max-width:767px){
  .venue-art{ width:81%; margin-left:auto; margin-right:auto; }
  .dress-illustration{ width:81%; margin-left:auto; margin-right:auto; }
}
@media(min-width:768px){
  .venue-art{ width:49%; max-width:441px; }
  .dress-illustration{ width:49%; max-width:402px; }
}

/* Restrained editorial styling: only HERO decoration and typography. */
.hero{ background:#f8f5ee; }
.hero-botanical.hero-reference-scene::before{ display:none; }
.hero-reference-scene .hero-edge-sprig,
.hero-reference-scene .hero-edge-petal{ display:none; }
.hero-reference-scene > .floral-cut.floral-left:not(.floral-veil):not(.floral-distant),
.hero-reference-scene > .floral-cut.floral-bottom:not(.floral-veil):not(.floral-distant){
  display:block; opacity:.58; filter:saturate(.6);
}
.hero-reference-scene > .floral-cut.floral-left:not(.floral-veil):not(.floral-distant){
  width:clamp(110px, 24vw, 275px); height:34%; left:-4%; bottom:-12px;
}
.hero-reference-scene > .floral-cut.floral-bottom:not(.floral-veil):not(.floral-distant){
  width:clamp(110px, 24vw, 260px); height:33%; right:-4%; top:-3%;
}
.hero .hero-corner-note{
  left:7%; top:7%; font-size:clamp(8px, 1vw, 12px); line-height:1.9;
  letter-spacing:.22em; color:#89765b;
}
.hero .hero-corner-note::after{ display:none; }
.hero .kicker{ font-size:clamp(16px, 2vw, 21px); color:#657158; letter-spacing:.025em; }
.hero h1{
  font-size:clamp(50px, 6vw, 74px); line-height:.94;
  color:#654e35; margin:16px 0 18px; font-weight:400;
}
.hero h1 .hero-name{ display:block; }
.hero h1 .amp{
  display:block; margin:6px 0 7px; padding:0; font:italic 15px/1 'Cormorant Garamond', serif;
  color:#887657;
}
.hero .venue{
  font:500 clamp(11px, 1.3vw, 14px)/1.5 'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:.28em; margin-top:0; color:#806a4d;
}
.hero .date-row{
  margin-top:13px; font:500 clamp(14px, 1.7vw, 18px)/1.4 'Cormorant Garamond', serif;
  letter-spacing:.09em; gap:10px; color:#654e35;
}
.hero .date-row .dot{ width:3px; height:3px; opacity:.65; }
.hero .tagline{ margin-top:12px; font-size:clamp(11px, 1.3vw, 14px); color:#8b775c; }
.hero .hero-actions{
  width:min(100%, 440px); margin:22px auto 0; padding:0;
  background:none; box-shadow:none; border:0;
}
.hero .hero-btn{
  padding:8px 5px; color:#806d52; background:none; box-shadow:none;
  border-color:rgba(128,109,82,.15); gap:7px;
}
.hero .hero-btn svg{ width:16px; height:16px; stroke-width:1.3; }
.hero .hero-btn span{ font-size:10px; letter-spacing:0; }
@media(max-width:480px){
  .hero h1{ font-size:clamp(44px, 12vw, 58px); margin:13px 0 15px; }
  .hero .hero-actions{ margin-top:18px; }
  .hero .hero-btn span{ font-size:9px; }
}
@media(max-height:700px){
  .hero h1{ font-size:44px; margin:10px 0 12px; }
  .hero .hero-actions{ margin-top:12px; }
  .hero .tagline{ margin-top:8px; }
}

/* Match the supplied editorial reference; portrait and its animation are untouched. */
.hero-botanical.hero-reference-scene::before{
  display:block; inset:0;
  background:url('assets/hero-editorial-reference.png') center/100% 100% no-repeat;
  -webkit-mask-image:none; mask-image:none; opacity:1;
}
.hero-reference-scene > .floral-cut.floral-left:not(.floral-veil):not(.floral-distant),
.hero-reference-scene > .floral-cut.floral-bottom:not(.floral-veil):not(.floral-distant){ display:none; }
.hero .hero-corner-note{ left:8.6%; top:8.4%; font-size:clamp(8px, 1.05vw, 14px); color:#756547; }
.hero .hero-corner-note::after,
.hero .hero-side-note::after{ display:block; content:''; width:1px; height:30px; background:#a9997a; margin-top:15px; }
.hero-reference-scene > .hero-side-note{
  display:block; position:absolute; right:7%; top:23%; text-align:center;
  font:500 clamp(6px, .8vw, 10px)/2 'Cormorant Garamond', serif;
  letter-spacing:.18em; text-transform:uppercase; color:#756547;
}
.hero .hero-side-note::after{ margin-left:auto; margin-right:auto; height:20px; }
.hero .kicker{ color:#70613e; font-size:clamp(15px, 1.8vw, 22px); letter-spacing:.1em; }
.hero h1{ font-size:clamp(62px, 8vw, 100px); line-height:.82; margin:15px 0 12px; color:#6c5832; }
.hero h1 .amp{ font-size:25px; color:#788065; margin:8px 0 10px; }
.hero .venue::before{ content:''; display:block; width:23px; height:1px; margin:0 auto 15px; background:#b2a385; }
.hero .venue{ font-size:clamp(13px, 1.6vw, 18px); letter-spacing:.3em; color:#705d3d; }
.hero .date-row{ text-transform:uppercase; font-size:clamp(13px, 1.55vw, 18px); margin-top:17px; letter-spacing:.15em; }
.hero .tagline::before{ content:''; display:block; width:23px; height:1px; margin:0 auto 15px; background:#b2a385; }
.hero .tagline{ line-height:1.5; letter-spacing:.15em; margin-top:17px; font-size:clamp(12px, 1.4vw, 16px); }
.hero .hero-actions{ width:min(100%, 540px); margin-top:30px; }
.hero .hero-btn svg{ width:19px; height:19px; }
.hero .hero-btn small{ font:500 8px/1.3 'Cormorant Garamond', serif; letter-spacing:.17em; text-transform:uppercase; }
.hero .hero-btn span{ font-size:11px; }
@media(max-width:480px){
  .hero h1{ font-size:clamp(58px, 17vw, 78px); }
  .hero h1 .amp{ font-size:21px; margin:7px 0; }
  .hero .hero-actions{ margin-top:24px; }
  .hero .hero-btn span{ font-size:9px; }
  .hero .hero-btn small{ font-size:7px; }
}
@media(max-height:740px){
  .hero h1{ font-size:54px; margin:10px 0; }
  .hero .venue::before,.hero .tagline::before{ margin-bottom:9px; }
  .hero .date-row,.hero .tagline{ margin-top:10px; }
  .hero .hero-actions{ margin-top:14px; }
}
@media(min-width:768px) and (max-height:1000px){
  .hero h1{ font-size:76px; margin:12px 0 10px; }
  .hero .hero-actions{ margin-top:18px; }
  .hero .tagline{ margin-top:12px; }
  .hero .venue::before,.hero .tagline::before{ margin-bottom:10px; }
}

/* Small schedule ornaments, preserving the existing timeline layout. */
#schedule::before{ display:none; }
.schedule-heading-ornament,.schedule-footer-ornament{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#b9a77d; pointer-events:none;
}
.schedule-heading-ornament{ margin:0 auto 22px; }
.schedule-heading-ornament::before,.schedule-heading-ornament::after{
  content:''; width:clamp(48px, 14vw, 88px); height:1px; background:rgba(185,167,125,.32);
}
.schedule-heading-ornament span{ font-size:15px; line-height:1; opacity:.8; }
#schedule .lede::after{
  content:''; display:block; width:34px; height:1px;
  background:rgba(185,167,125,.55); margin:20px auto -20px;
}
#schedule .sch-row::before{
  content:''; position:absolute; left:calc(24% + clamp(12px,3vw,28px) + 46px);
  top:0; width:3px; height:3px; border-radius:50%; background:#b6a27a;
  transform:translateX(-1px); pointer-events:none;
}
.schedule-corner{
  position:absolute; z-index:0; left:-48px; bottom:-24px;
  width:clamp(145px, 22vw, 245px); height:clamp(180px, 28vw, 300px);
  background:url('assets/hero-flowers-bottom-left.png') left bottom/contain no-repeat;
  opacity:.48; filter:saturate(.55); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, #000 25%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 25%, transparent 100%);
}
.schedule-footer-ornament{ position:relative; margin:26px auto 0; gap:12px; color:#87916c; }
.schedule-footer-ornament svg{ width:38px; height:25px; }
.schedule-footer-ornament span{ width:46px; height:1px; background:rgba(185,167,125,.25); }
@media(max-width:480px){
  #schedule .sch-row::before{ left:calc(18% + 10px + 32px); }
  .schedule-corner{ left:-52px; width:150px; height:205px; opacity:.42; }
}

/* Both portraits share one moving frame, so the crossfade cannot shift position. */
.hero-couple{ mix-blend-mode:multiply; }
.hero-couple .couple-story,.hero-couple .couple-final{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  mix-blend-mode:normal; transition:opacity 1.8s cubic-bezier(.4,0,.2,1);
}
.hero-couple .couple-story{ opacity:1; }
.hero-couple .couple-final{ opacity:0; pointer-events:none; }
.hero.is-portrait-colored .couple-story{ opacity:0; }
.hero.is-portrait-colored .couple-final{ opacity:1; }

/* Countdown: content-sized editorial layout; timer logic and values are unchanged. */
#countdown{ padding:54px 0 50px; background:#f8f5ee; color:#35483d; }
#countdown .container{ max-width:820px; }
#countdown .eyebrow{ font-size:clamp(43px, 6vw, 64px); font-weight:500; line-height:1.15; letter-spacing:0; }
#countdown .countdown-date{ margin-top:13px; font-size:clamp(10px, 1.4vw, 13px); letter-spacing:.25em; color:#637062; }
#countdown .countdown-wrap{ max-width:620px; margin-top:30px; gap:0; }
#countdown .cd-num{ font-size:clamp(42px, 7vw, 66px); font-weight:400; font-variant-numeric:tabular-nums; line-height:1; }
#countdown .cd-label{ margin-top:12px; font-size:clamp(9px, 1.2vw, 12px); font-weight:500; letter-spacing:.18em; color:#737967; }
#countdown .cd-box + .cd-box::before{ top:3px; height:clamp(36px, 5vw, 54px); background:rgba(169,148,116,.3); }
.countdown-ornament{ display:flex; align-items:center; justify-content:center; gap:15px; pointer-events:none; }
.countdown-ornament span{ width:44px; height:1px; background:rgba(169,148,116,.36); }
.countdown-hourglass{ color:#a18b63; margin-bottom:19px; }
.countdown-hourglass svg{ width:18px; height:26px; }
.countdown-leaf{ color:#87916b; margin-top:28px; }
.countdown-leaf svg{ width:37px; height:24px; }
.countdown-quote{ margin:17px auto 0; color:#897358; font:italic 400 clamp(15px, 1.9vw, 19px)/1.55 'Cormorant Garamond', serif; letter-spacing:.04em; }
@media(max-width:480px){
  #countdown{ padding:44px 0 40px; }
  #countdown .container{ padding-left:20px; padding-right:20px; }
  #countdown .countdown-wrap{ margin-top:26px; }
  .countdown-leaf{ margin-top:24px; }
}

/* Reveal the original botanical artwork outward from its two corner roots. */
@property --botanical-growth {
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}
.hero-botanical.hero-reference-scene::before{
  --botanical-growth:0%;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, #000 max(0%, calc(var(--botanical-growth) - 9%)), transparent var(--botanical-growth)), radial-gradient(ellipse at 0% 100%, #000 0%, #000 max(0%, calc(var(--botanical-growth) - 9%)), transparent var(--botanical-growth));
  mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, #000 max(0%, calc(var(--botanical-growth) - 9%)), transparent var(--botanical-growth)), radial-gradient(ellipse at 0% 100%, #000 0%, #000 max(0%, calc(var(--botanical-growth) - 9%)), transparent var(--botanical-growth));
}
.hero.is-framed .hero-botanical.hero-reference-scene::before{
  animation:botanical-grow 4.2s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes botanical-grow{ from{ --botanical-growth:0%; } to{ --botanical-growth:110%; } }
@media(prefers-reduced-motion:reduce){
  .hero-botanical.hero-reference-scene::before{ -webkit-mask-image:none; mask-image:none; }
}

/* Keep the three hero links inside the clear area between the florals. */
.hero .hero-actions{ width:min(76%, 440px); margin-left:auto; margin-right:auto; }
.hero .hero-btn{ min-width:0; flex:1 1 0; padding-left:3px; padding-right:3px; }
@media(max-width:480px){
  .hero .hero-actions{ width:76%; }
  .hero .hero-btn span{ font-size:8px; line-height:1.6; }
  .hero .hero-btn small{ font-size:6px; letter-spacing:.12em; }
}

/* Dress code — restrained wedding editorial, using the existing palette and artwork. */
#dresscode{ background:#f8f5ee; padding:54px 0 48px; border-top-color:rgba(122,97,66,.1); }
#dresscode .container{ max-width:900px; }
.dress-heading-ornament{ display:flex; justify-content:center; align-items:center; gap:14px; color:#a79470; margin-bottom:18px; }
.dress-heading-ornament span{ width:40px; height:1px; background:rgba(167,148,112,.3); }
.dress-heading-ornament svg{ width:27px; height:24px; }
#dresscode .eyebrow{ font-size:clamp(42px, 5.5vw, 60px); line-height:1.15; color:#405642; font-weight:500; }
#dresscode .dress-divider{ display:none; }
#dresscode .lede{ margin-top:16px; max-width:38ch; font-size:14px; line-height:1.9; color:#8b785e; }
#dresscode .dress-row{ max-width:460px; margin-top:30px; gap:clamp(10px, 3vw, 30px); }
#dresscode .dress-swatch .chip{
  width:clamp(36px, 9vw, 47px); height:clamp(36px, 9vw, 47px);
  border:0; box-shadow:none; outline:1px solid rgba(139,120,94,.25); outline-offset:4px;
  margin-bottom:17px;
}
#dresscode .dress-swatch span{
  display:block; font:500 clamp(10px, 1.4vw, 12px)/1.6 'Cormorant Garamond', serif;
  letter-spacing:.085em; text-transform:uppercase; color:#79684e; overflow-wrap:normal;
}
#dresscode .dress-illustration{ margin-top:30px; margin-bottom:0; }
#dresscode .dress-illustration::after{ content:''; display:block; width:42px; height:1px; background:rgba(167,148,112,.4); margin:18px auto 0; }
@media(max-width:480px){
  #dresscode{ padding:42px 0 38px; }
  #dresscode .container{ padding-left:24px; padding-right:24px; }
  #dresscode .lede{ font-size:13px; }
  #dresscode .dress-row{ gap:12px; margin-top:28px; }
  #dresscode .dress-swatch span{ font-size:10px; letter-spacing:.025em; }
  #dresscode .dress-illustration{ margin-top:22px; }
}
/* Watercolor editorial palette, scoped to the dress-code section. */
#dresscode{padding:48px 0 36px}
#dresscode .dress-kicker{margin:0 0 14px;color:#90795e;font:500 10px/1.5 'Cormorant Garamond',serif;letter-spacing:.36em}
#dresscode h2.eyebrow{margin:0;font-size:clamp(48px,6vw,68px);font-weight:500;letter-spacing:-.025em;color:#394c40}
#dresscode .dress-divider{display:block;width:28px;height:1px;margin:17px auto 0;background:#c7b797}
#dresscode .lede{margin:16px auto 0;max-width:35ch;font-size:13px}
#dresscode .dress-row{max-width:570px;gap:14px;margin:28px auto 0}
#dresscode .dress-swatch .chip{position:relative;width:100%;max-width:120px;height:auto;aspect-ratio:1.4;border-radius:0;outline:0;border:0;box-shadow:none;margin:0 auto 10px;opacity:.85;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20100%22%3E%3Cfilter%20id%3D%22w%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.12%20.3%22%20numOctaves%3D%223%22%20seed%3D%228%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%229%22%2F%3E%3C%2Ffilter%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23w)%22%3E%3Cpath%20d%3D%22M12%2043%20111%2013%20124%2020%20112%2029%20130%2029%20123%2042%20132%2047%20119%2059%20125%2065%20108%2077%2027%2090%2017%2082%2025%2074%208%2075%2015%2062%207%2059Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
#dresscode .dress-swatch .chip::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22100%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.65%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20opacity%3D%22.3%22%20filter%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E");mix-blend-mode:screen;opacity:.8}
#dresscode .dress-swatch:first-child .chip{background:#ede2ce!important}
#dresscode .dress-swatch:nth-child(2) .chip{transform:rotate(-4deg)}
#dresscode .dress-swatch:nth-child(3) .chip{transform:rotate(3deg);opacity:.72}
#dresscode .dress-swatch:nth-child(4) .chip{transform:rotate(-3deg);opacity:.8}
#dresscode .dress-swatch span{font-size:12px;letter-spacing:.09em;white-space:nowrap;font-weight:500}
#dresscode .dress-illustration{width:100%;max-width:620px;margin:30px auto 0;background:#f8f5ee}
#dresscode .dress-illustration img{display:block;filter:saturate(.82);mix-blend-mode:multiply}
#dresscode .dress-illustration::after{margin-top:20px;width:30px}
@media(max-width:480px){
 #dresscode{padding:38px 0 30px}
 #dresscode .container{padding-left:22px;padding-right:22px}
 #dresscode .dress-kicker{font-size:9px;margin-bottom:12px;letter-spacing:.3em}
 #dresscode .dress-row{gap:9px;margin-top:25px}
 #dresscode .dress-swatch span{font-size:10px;letter-spacing:.035em}
 #dresscode .dress-illustration{width:calc(100% + 16px);max-width:none;margin:26px -8px 0}
}

/* Gentle continuous descent, with independent soft flutter and depth. */
.petal-flight{
  top:-40px;
  animation:petal-flight-fall var(--petal-duration) linear var(--petal-delay) both;
  will-change:transform;
}
@keyframes petal-flight-fall{
  0%{opacity:0;transform:translate3d(0,-20px,0)}
  8%{opacity:var(--petal-opacity,.65)}
  85%{opacity:var(--petal-opacity,.65)}
  100%{opacity:0;transform:translate3d(var(--petal-drift),calc(100dvh + 100px),0)}
}
.petal{
  display:block;
  filter:drop-shadow(0 1px 2px rgba(74,58,40,.08));
  animation:petal-sway var(--petal-flutter) ease-in-out var(--petal-phase) infinite alternate;
  transform-origin:48% 35%;
}
@keyframes petal-sway{
  0%{transform:translateX(calc(var(--petal-sway) * -1)) rotate(calc(var(--petal-turn) - 24deg)) scaleX(.7)}
  50%{transform:translateX(0) rotate(var(--petal-turn)) scaleX(1)}
  100%{transform:translateX(var(--petal-sway)) rotate(calc(var(--petal-turn) + 24deg)) scaleX(.55)}
}
@media(prefers-reduced-motion:reduce){.petal-shower{display:none}}

/* Opening stationery: mobile-first proportions, original envelope interaction. */
#opening-screen{padding:0;background:#f8f3e9;overflow:hidden}
#opening-screen::before{opacity:.16}
#opening-screen::after{background:#eee5d6}
#opening-screen .opening-message{top:10%;width:min(86vw,480px);text-shadow:none;color:#846647}
#opening-screen .opening-message>span{font-size:clamp(9px,1.5vh,13px);letter-spacing:.36em;margin-bottom:clamp(17px,3vh,28px)}
#opening-screen .opening-message strong{font-size:clamp(54px,9.5vh,88px);line-height:.72;font-weight:400}
#opening-screen .opening-message b{font-size:14px;line-height:1;margin:12px 0}
#opening-screen .opening-message::after{display:none}
.opening-rings{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px auto 7px;color:#9c815b}
.opening-rings::before,.opening-rings::after{content:'';width:42px;height:1px;background:#c5b59a}
#opening-screen .opening-message em{margin-top:7px;font-size:clamp(9px,1.35vh,12px);line-height:2.3;letter-spacing:.23em}
#opening-screen .envelope-stage{position:absolute;top:45%;width:min(85vw,43vh,440px);aspect-ratio:783/615}
#opening-screen .tap-hint{position:absolute;top:79%;margin:0;font:500 clamp(9px,1.4vh,12px)/1.5 'Cormorant Garamond',serif;letter-spacing:.36em;animation:none}
#opening-screen .tap-hint::after{width:1px;height:clamp(18px,3vh,28px);margin:14px auto 0;background:#b6a387}
#opening-screen .opening-motto{bottom:4%;font-size:clamp(8px,1.3vh,11px);line-height:2;letter-spacing:.3em;color:#837156}
#opening-screen .opening-florals{opacity:.7}
#opening-screen .floral-top-right,#opening-screen .floral-bottom-left{display:none}
#opening-screen .floral-top-left{top:-35px;left:-45px;width:clamp(150px,38vw,290px);height:clamp(210px,34vh,350px);background:url('assets/hero-flowers-bottom-left.png') left bottom/contain no-repeat;transform:rotate(180deg);mask-image:none;-webkit-mask-image:none}
#opening-screen .floral-bottom-right{bottom:-44px;right:-48px;width:clamp(150px,40vw,310px);height:clamp(200px,33vh,350px);background:url('assets/hero-flowers-bottom-left.png') left bottom/contain no-repeat;transform:scaleX(-1);mask-image:none;-webkit-mask-image:none}
.envelope-botanical{position:absolute;left:-3%;bottom:3%;width:28%;height:66%;z-index:5;background:url('assets/hero-flowers-bottom-left.png') left bottom/contain no-repeat;pointer-events:none;opacity:.85;transition:opacity .5s ease}
.envelope-stage.seal-open .envelope-botanical{opacity:0}
#opening-screen .seal{filter:saturate(.6);}
@media(max-height:650px){
 #opening-screen .opening-message{top:7%}
 #opening-screen .opening-message strong{font-size:54px}
 #opening-screen .opening-message>span{margin-bottom:17px}
 #opening-screen .opening-message b{margin:8px 0}
 .opening-rings{margin-top:12px}
 #opening-screen .opening-message em{font-size:8px;line-height:2}
 #opening-screen .envelope-stage{top:46%;width:min(76vw,40vh)}
}

/* Reference composition: explicitly center the envelope without transforming its fixed card. */
#opening-screen .envelope-stage{--opening-envelope-width:min(88vw,52dvh,510px);width:var(--opening-envelope-width);left:calc(50% - var(--opening-envelope-width)/2);top:37.5%;margin:0}
#opening-screen .opening-message{top:9%;width:min(82vw,480px)}
#opening-screen .opening-message strong{font-size:clamp(54px,8.8dvh,86px)}
#opening-screen .opening-message>span{margin-bottom:clamp(18px,2.8dvh,28px)}
#opening-screen .opening-message b{margin:10px 0}
#opening-screen .opening-rings{margin-top:16px}
#opening-screen .tap-hint{top:74%}
#opening-screen .opening-motto{bottom:9%}
@media(max-height:650px){
 #opening-screen .opening-message{top:7%}
 #opening-screen .opening-message strong{font-size:48px}
 #opening-screen .opening-message b{margin:6px 0}
 #opening-screen .opening-rings{margin-top:10px}
 #opening-screen .envelope-stage{top:39%}
}
#opening-screen{background:#f8f3e9 url('assets/opening-reference-paper.png') center/cover no-repeat}
#opening-screen .opening-florals{display:none}
#opening-screen::before{display:none}

/* Wide screens keep both botanical corners visible instead of cropping a portrait background. */
@media(min-aspect-ratio:1/1){
 #opening-screen{background-size:100% 100%}
 #opening-screen .envelope-stage{--opening-envelope-width:min(44vw,44dvh,440px);top:40%}
 #opening-screen .tap-hint{top:77%}
 #opening-screen .opening-motto{bottom:4%}
}
@media(min-aspect-ratio:1/1){
 #opening-screen{background:#f8f3e9 url('assets/opening-desktop-paper.png') center/cover no-repeat}
 #opening-screen .opening-florals{display:none}
 #opening-screen .floral-top-left,#opening-screen .floral-bottom-right{display:block;top:0;bottom:0;width:42%;height:100%;transform:none;background-image:url('assets/opening-reference-paper.png');background-size:auto 100%;background-repeat:no-repeat}
 #opening-screen .floral-top-left{left:0;background-position:left top;mask-image:linear-gradient(to right,#000 65%,transparent);-webkit-mask-image:linear-gradient(to right,#000 65%,transparent)}
 #opening-screen .floral-bottom-right{right:0;background-position:right bottom;mask-image:linear-gradient(to left,#000 65%,transparent);-webkit-mask-image:linear-gradient(to left,#000 65%,transparent)}
}

/* Use the landscape artwork at its natural proportions on desktop. */
@media(min-width:768px) and (min-aspect-ratio:1/1){
 .hero-botanical.hero-reference-scene::before{
  background-image:url('assets/hero-reference-desktop.png');
  background-size:cover;
  background-position:center;
 }
}
@media(min-width:768px) and (min-aspect-ratio:1/1){
 .hero-botanical.hero-reference-scene::before{
  background-image:url('assets/opening-desktop-paper.png');
  transform:scaleX(-1);
 }
}