/* ============================================================
   Minh Ngọc & Chung Mỹ — wedding invitation
   Palette: deep wine, antique gold, warm ivory
   ============================================================ */

:root {
  --wine-deep: #2c0206;
  --wine: #4b050c;
  --wine-soft: #5a0710;
  --red: #6a0a12;
  --red-bright: #91141f;
  --gold: #d6ad64;
  --gold-light: #f1dfb4;
  --gold-dark: #a77a2c;
  --cream: #f5ecdd;
  --cream-deep: #ecdfca;
  --paper: #fbf4e8;
  --ink: #2b1114;
  --muted: #7b5c52;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--wine-deep);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--wine-deep); }

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, rgba(214,173,100,.35), var(--gold-light), var(--gold));
  box-shadow: 0 0 12px rgba(214,173,100,.5);
  pointer-events: none;
}

.wrap {
  width: min(1200px, 90%);
  margin-inline: auto;
}
.wrap.narrow { max-width: 920px; }
.center { text-align: center; }

/* ─── Typography ─────────────────────────────────────────────── */

.eyebrow {
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.35rem;
}
.eyebrow.gold { color: var(--gold); }

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.45rem, 4.8vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
}
.display em {
  font-style: italic;
  color: var(--red);
}
.display.light { color: var(--cream); }
.display.light em { color: var(--gold-light); }

.lede {
  margin-top: 1.35rem;
  max-width: 570px;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.9;
}
.center .lede { margin-inline: auto; }

.section-head { max-width: 780px; margin-bottom: clamp(2.8rem, 5vw, 5.2rem); }
.section-head.center { margin-inline: auto; }

.section-ivory {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 6%, rgba(255,255,255,.72), transparent 38%),
    radial-gradient(circle at 88% 90%, rgba(214,173,100,.09), transparent 45%),
    var(--cream);
}
.section-red {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(144,20,31,.38), transparent 48%),
    radial-gradient(circle at 85% 92%, rgba(214,173,100,.08), transparent 42%),
    repeating-linear-gradient(45deg, rgba(214,173,100,.028) 0 1px, transparent 1px 18px),
    var(--wine);
}
.section-red::before,
.section-ivory::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,173,100,.55), transparent);
  pointer-events: none;
}

/* ─── Cửa đỏ ─────────────────────────────────────────────────── */

.door-stage {
  --p: 0;
  position: relative;
  height: 200svh;
  background: var(--wine-deep);
}
.door-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1750px;
  perspective-origin: 50% 50%;
  background: var(--wine-deep);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(calc(1.075 - var(--p) * .075));
  transform-origin: center;
  filter: saturate(.94) contrast(1.02);
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(31, 2, 5, .95) 0%,
      rgba(31, 2, 5, .6) 27%,
      rgba(31, 2, 5, .12) 58%,
      rgba(31, 2, 5, .36) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 38%, rgba(22, 1, 3, .55) 100%);
  pointer-events: none;
}
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 160px rgba(22, 1, 3, .55);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(8vh, 10vh, 130px);
  width: min(92%, 1060px);
  transform: translateX(-50%) translateY(26px);
  text-align: center;
  color: var(--cream);
  opacity: 0;
  transition: opacity 1.1s var(--ease) .15s, transform 1.1s var(--ease) .15s;
  pointer-events: none;
}
.door-stage.is-open .hero-copy {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hero-names {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .12em .22em;
  margin-top: .55rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 6.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: .005em;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
.hero-names .amp {
  font-style: italic;
  font-weight: 400;
  font-size: .72em;
  color: var(--gold-light);
}
.hero-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  margin-top: 1.25rem;
  font-size: clamp(.78rem, .95vw, .95rem);
  letter-spacing: .4em;
  color: var(--gold-light);
}
.hero-date::before,
.hero-date::after {
  content: "";
  width: clamp(28px, 5vw, 66px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-date::after { transform: scaleX(-1); }

.hero-place {
  margin-top: .45rem;
  font-size: .69rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245,236,221,.64);
}

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin-top: clamp(1.4rem, 4vh, 3rem);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245,236,221,.56);
}
.hero-scroll .line {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(214,173,100,.25);
}
.hero-scroll .line::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 55%;
  background: var(--gold-light);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* Cánh cửa */
.doors {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-style: preserve-3d;
  pointer-events: none;
}
.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.06%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055), transparent 17%, transparent 83%, rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 68px),
    radial-gradient(circle at 50% 16%, #8b111c 0%, #650a13 46%, #42060c 100%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.46);
}
.door-left {
  left: 0;
  transform-origin: left center;
  transform: rotateY(calc(var(--p) * -103deg));
  border-right: 1px solid rgba(214,173,100,.38);
}
.door-right {
  right: 0;
  transform-origin: right center;
  transform: rotateY(calc(var(--p) * 103deg));
  border-left: 1px solid rgba(214,173,100,.38);
}
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px rgba(20,1,3,.48);
  pointer-events: none;
}
.door-inner {
  position: absolute;
  inset: clamp(14px, 2.2vh, 28px) clamp(14px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6.5vh 1.5vw 5.5vh;
  border: 1px solid rgba(214,173,100,.56);
  border-radius: 48% 48% 0 0 / 15% 15% 0 0;
}
.door-inner::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(214,173,100,.26);
  border-radius: inherit;
  pointer-events: none;
}
.door-inner::after {
  content: "";
  position: absolute;
  top: 30%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(214,173,100,.28), transparent);
  pointer-events: none;
}
.door-fan {
  width: min(68%, 300px);
  height: auto;
  color: var(--gold);
  opacity: .58;
  filter: drop-shadow(0 0 8px rgba(214,173,100,.12));
}
.door-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  transform: translateY(-1.5vh);
}
.door-role {
  font-size: clamp(.52rem, .78vw, .68rem);
  font-weight: 500;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: rgba(242,223,178,.78);
}
.door-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.55rem, 3.7vw, 3.5rem);
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  white-space: nowrap;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .door-name {
    background: linear-gradient(180deg, #f8e8c2 0%, #d6ad64 52%, #a77a2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.door-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.door-rule {
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.door-date {
  font-family: var(--serif);
  font-size: clamp(.8rem, 1.15vw, 1.15rem);
  letter-spacing: .32em;
  color: var(--gold);
}
.door-handle {
  position: absolute;
  top: 53%;
  width: clamp(22px, 2.4vw, 34px);
  height: clamp(22px, 2.4vw, 34px);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  box-shadow:
    0 3px 12px rgba(0,0,0,.45),
    inset 0 0 0 4px rgba(90,7,16,.2);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 55%);
}
.door-left .door-handle { right: 12px; }
.door-right .door-handle { left: 12px; }
.door-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 1.5px;
  height: 11px;
  background: var(--gold);
  transform: translateX(-50%);
}

/* Con dấu giữa cửa */
.seal {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: clamp(146px, 18vw, 218px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(calc(1 - var(--p) * .22));
  opacity: calc(1 - var(--p) * 1.65);
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 26%, #8c121d, #56070e 66%, #3d0509 100%);
  border: 1px solid rgba(214,173,100,.7);
  box-shadow:
    0 24px 70px rgba(0,0,0,.52),
    inset 0 0 0 6px rgba(60,4,8,.7),
    inset 0 0 0 7px rgba(214,173,100,.28);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(214,173,100,.45);
  border-radius: 50%;
  animation: sealSpin 42s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }

.seal-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-align: center;
}
.seal-kicker {
  font-size: clamp(.42rem, .55vw, .56rem);
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(241,223,180,.72);
}
.seal-mono {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1;
  color: var(--gold-light);
}
.seal-mono span {
  display: inline-block;
  margin: 0 .06em;
  font-style: italic;
  font-size: .64em;
  color: var(--gold);
  transform: translateY(-.08em);
}
.seal-date {
  font-size: clamp(.48rem, .62vw, .62rem);
  letter-spacing: .26em;
  color: rgba(245,236,221,.72);
}

.door-hint {
  position: absolute;
  z-index: 8;
  bottom: clamp(18px, 4vh, 42px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  transform: translateX(-50%);
  opacity: calc(1 - var(--p) * 3.2);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245,236,221,.64);
  pointer-events: none;
  white-space: nowrap;
}
.mouse {
  position: relative;
  width: 19px;
  height: 30px;
  border: 1px solid rgba(214,173,100,.7);
  border-radius: 12px;
}
.mouse i {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold-light);
  transform: translateX(-50%);
  animation: mouseWheel 1.8s ease-in-out infinite;
}
@keyframes mouseWheel {
  0% { transform: translate(-50%, 0); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(-50%, 8px); opacity: 0; }
  100% { opacity: 0; }
}

.fireworks {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── Story ──────────────────────────────────────────────────── */

.story, .venues { padding: clamp(84px, 11vw, 170px) 0; }
.invite { padding: clamp(84px, 11vw, 158px) 0; }

.story-spread {
  display: grid;
  grid-template-columns: 1fr .88fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(52px, 8vw, 112px);
}
.story-spread .photo:first-child { transform: translateY(-3.4vh); }
.story-quote {
  padding: 0 1vw 6vh;
  text-align: center;
  align-self: center;
}
.quote-mark {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--serif);
  font-size: clamp(4rem, 7vw, 6.6rem);
  line-height: .55;
  color: var(--gold);
}
.story-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: 1.22;
  color: var(--red);
}
.story-quote cite {
  display: block;
  margin-top: 1.5rem;
  font-size: .64rem;
  font-style: normal;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

.photo { margin: 0; }
.photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 20px 55px rgba(64, 18, 22, .13);
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 250, 240, .32);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.photo img {
  width: 100%;
  height: auto;
  transition: transform 1.5s var(--ease);
}
.photo:hover img { transform: scale(1.035); }
.photo-arch .photo-frame { border-radius: 999px 999px 10px 10px; }
.photo-arch .photo-frame::after { border-radius: inherit; }

.photo figcaption {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: .85rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.photo figcaption span {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--gold-dark);
}
.masonry .photo figcaption::before {
  content: "◆";
  font-size: .42rem;
  color: var(--gold-dark);
  transform: translateY(-.12em);
}

.masonry {
  columns: 3;
  column-gap: clamp(16px, 2.4vw, 32px);
}
.masonry .photo {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(26px, 4vw, 54px);
  break-inside: avoid;
}

/* ─── Invitation ─────────────────────────────────────────────── */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 1.5rem;
}
.ornament span {
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.ornament i {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.ornament.left { justify-content: flex-start; }

.invite-text {
  max-width: 640px;
  margin: 1.5rem auto 0;
  font-size: .98rem;
  line-height: 1.95;
  color: rgba(245, 236, 221, .76);
}

.couple-names {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 58px);
  margin: clamp(2.2rem, 5vw, 4rem) 0;
}
.person {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.person .role {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
}
.person .name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 4.2vw, 4.2rem);
  line-height: 1;
  color: var(--cream);
}
.couple-amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  color: var(--gold);
  transform: translateY(.08em);
}

.date-card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.7rem, 3.5vw, 3rem) 0;
  border-top: 1px solid rgba(214,173,100,.28);
  border-bottom: 1px solid rgba(214,173,100,.28);
}
.date-weekday {
  font-size: .68rem;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--gold);
}
.date-main {
  margin: .35rem 0 .55rem;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  font-weight: 500;
  line-height: .98;
  color: var(--gold-light);
  font-variant-numeric: lining-nums tabular-nums;
}
.date-main .dot {
  display: inline-block;
  margin: 0 .04em;
  font-size: .53em;
  color: var(--gold);
  transform: translateY(-.18em);
}
.date-lunar {
  font-size: .8rem;
  letter-spacing: .1em;
  color: rgba(245,236,221,.68);
}

.countdown-wrap { margin-top: clamp(2rem, 4vw, 3.3rem); }
.countdown-label {
  margin-bottom: 1.1rem;
  font-size: .58rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(245,236,221,.5);
}
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(9px, 2.2vw, 24px);
}
.count-unit {
  min-width: 78px;
  padding: .9rem .55rem .75rem;
  border: 1px solid rgba(214,173,100,.25);
  background: rgba(0,0,0,.13);
}
.count-unit strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.count-unit span {
  display: block;
  margin-top: .4rem;
  font-size: .53rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245,236,221,.5);
}

/* ─── Venues ─────────────────────────────────────────────────── */

.venue-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
.venue-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(25px, 4vw, 54px);
  background: linear-gradient(135deg, #fffaf2, #f9efdf);
  border: 1px solid rgba(167,122,44,.26);
  box-shadow: 0 22px 60px rgba(70,25,25,.065);
}
.venue-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(214,173,100,.32);
  pointer-events: none;
}
.venue-featured { background: linear-gradient(135deg, #fffaf2, #f7ebd8); }
.venue-main { position: relative; z-index: 1; }
.venue-tag {
  display: inline-block;
  margin-bottom: .95rem;
  padding: .32rem .85rem;
  border: 1px solid rgba(167,122,44,.55);
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
}
.venue-kicker {
  margin-bottom: .35rem;
  font-size: .59rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.venue-name {
  margin-bottom: .7rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.05;
  color: var(--red);
}
.venue-address {
  font-size: .94rem;
  line-height: 1.8;
  color: var(--ink);
}
.nowrap { white-space: nowrap; }
.venue-date {
  margin-top: .55rem;
  font-size: .76rem;
  letter-spacing: .07em;
  color: var(--red);
}
.venue-date.muted {
  color: var(--muted);
  font-style: italic;
  letter-spacing: .02em;
}
.map-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
  padding-bottom: .32rem;
  border-bottom: 1px solid rgba(90,7,16,.3);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: color .35s ease, border-color .35s ease, gap .35s ease;
}
.map-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
}
.map-link:hover {
  gap: .8rem;
  color: var(--red-bright);
  border-color: var(--red-bright);
}
.map-link.light { color: var(--gold); border-color: rgba(214,173,100,.4); }
.map-link.light:hover { color: var(--gold-light); border-color: var(--gold-light); }

.qr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.qr img {
  width: clamp(112px, 12vw, 158px);
  height: auto;
  padding: 6px;
  border: 1px solid rgba(167,122,44,.3);
  background: #fffaf0;
}
.qr span {
  font-size: .5rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.venue-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}

/* ─── Closing ────────────────────────────────────────────────── */

.closing { padding: clamp(84px, 10vw, 140px) 0 0; }
.closing-grid {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
}
.closing-copy .display { margin-bottom: 1.25rem; }
.closing-text {
  font-size: .98rem;
  color: rgba(245,236,221,.72);
}
.signature {
  margin-top: 1.8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  line-height: 1.25;
  color: var(--gold-light);
}
.signature span {
  margin: 0 .1em;
  color: var(--gold);
}
.closing-photo { margin: 0; }
.closing-photo .photo-frame { border-radius: 999px 999px 12px 12px; }
.closing-photo .photo-frame::after { border-radius: inherit; }

.footer {
  margin-top: clamp(64px, 9vw, 118px);
  padding: 2rem 0 2.2rem;
  border-top: 1px solid rgba(214,173,100,.18);
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.footer-names {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--gold-light);
}
.footer-names span { color: var(--gold); }
.footer-date {
  font-size: .62rem;
  letter-spacing: .35em;
  color: rgba(245,236,221,.58);
}
.footer-note {
  margin-top: .55rem;
  font-size: .58rem;
  letter-spacing: .12em;
  color: rgba(245,236,221,.36);
}
.footer-note a {
  text-decoration: none;
  border-bottom: 1px solid rgba(214,173,100,.22);
}
.footer-note a:hover { color: var(--gold); }

/* ─── Reveal ─────────────────────────────────────────────────── */

.js .reveal,
.js .reveal-img {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.05s var(--ease),
    transform 1.05s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal-img { transform: translateY(34px) scale(.988); }
.js .reveal.is-visible,
.js .reveal-img.is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .story-spread { grid-template-columns: 1fr 1fr; }
  .story-quote {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 8vw 2.2rem;
  }
  .story-spread .photo:first-child { transform: none; }
  .venue-pair { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .closing-grid { grid-template-columns: 1fr; }
  .closing-photo { max-width: 430px; margin-inline: auto; }
  .closing-copy { text-align: center; }
  .closing-copy .ornament { justify-content: center; }
  .closing-copy .map-link { margin-inline: auto; }
}

@media (max-width: 760px) {
  .door-stage { height: 200svh; }
  .door-inner {
    inset: 11px;
    padding: 5.5vh 6px 4.5vh;
  }
  .door-fan { width: 74%; opacity: .46; }
  .door-name { font-size: clamp(1.45rem, 5.4vw, 2.1rem); letter-spacing: .05em; }
  .door-role { font-size: .48rem; letter-spacing: .36em; }
  .door-date { font-size: .72rem; letter-spacing: .2em; }
  .door-handle { width: 22px; height: 22px; top: 54%; }
  .door-left .door-handle { right: 8px; }
  .door-right .door-handle { left: 8px; }
  .seal { top: 70%; width: 126px; }
  .seal-mono { font-size: 2.15rem; }
  .seal-kicker { font-size: .38rem; }
  .seal-date { font-size: .44rem; }
  .hero-names { font-size: clamp(2.35rem, 8.6vw, 3.8rem); }
  .hero-copy { bottom: 9vh; }
  .hero-date { font-size: .72rem; letter-spacing: .3em; }
  .hero-place { font-size: .6rem; }
  .hero-scroll { font-size: .52rem; margin-top: 1.4rem; }
  .hero-scroll .line { height: 36px; }
  .door-hint { font-size: .5rem; letter-spacing: .22em; }

  .story-spread { grid-template-columns: 1fr; gap: 34px; }
  .story-quote { padding: 0 3vw 1rem; }
  .masonry { columns: 2; }
  .venue-card { grid-template-columns: 1fr; gap: 22px; }
  .qr { align-items: center; }
  .qr img { width: 128px; }
  .count-unit { min-width: 64px; padding: .75rem .4rem .6rem; }
  .count-unit strong { font-size: 1.65rem; }
  .count-unit span { font-size: .48rem; letter-spacing: .18em; }
  .date-lunar { font-size: .72rem; }
}

@media (max-width: 480px) {
  .wrap { width: min(1200px, 88%); }
  .masonry { columns: 1; }
  .hero-names { gap: .1em .18em; }
  .date-main { font-size: 3.1rem; }
  .couple-names { gap: 14px; }
  .couple-amp { font-size: 1.6rem; }
  .countdown { gap: 6px; }
  .count-unit { min-width: 57px; padding: .65rem .3rem .55rem; }
  .count-unit strong { font-size: 1.45rem; }
  .count-unit span { font-size: .43rem; letter-spacing: .12em; }
}

@media (max-height: 700px) {
  .door-fan { display: none; }
  .door-inner { justify-content: center; gap: 7vh; }
  .seal { width: 136px; }
  .seal-mono { font-size: 2.3rem; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .reveal-img {
    opacity: 1;
    transform: none;
  }
}