/* =========================================================
   Undangan — editorial plum & gold, full-screen motion pages
   Type: Bodoni Moda (display) · Jost (text) · Pinyon Script (names)
   ========================================================= */
:root {
  /* v2: dusty rose plaster, fresh roses, cream & soft gold */
  --plum-950: #6a2636;
  --plum-900: #8f4152;
  --plum-800: #9f5262;
  --glass-strong: rgba(110, 38, 56, .8);

  --gold-hi: #fffaf4;
  --gold-1: #fbe7d4;
  --gold-2: #ecc9a8;
  --gold-3: #c9946f;
  --gold-line: linear-gradient(135deg, rgba(255,246,236,.95), rgba(236,201,168,.6) 35%, rgba(255,240,226,.9) 60%, rgba(214,170,136,.55));
  --gold-text: linear-gradient(180deg, #fffaf4 10%, #fbe7d4 45%, #f1d2b4 80%, #e4bb98 100%);
  --hair: rgba(255, 236, 222, .45);

  --text: #fffaf6;
  --text-soft: #fbe9e6;
  --text-dim: #f0cfd0;

  --col: 420px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-page: cubic-bezier(.76, 0, .18, 1);
  --page-dur: 1150ms;
  --base: 420ms;

  --f-display: "Bodoni Moda", "Didot", Georgia, serif;
  --f-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script: "Pinyon Script", cursive;
  --f-arabic: "Amiri", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* no double-tap zoom, no 300ms tap delay */
html, body, body * { touch-action: manipulation; }
body {
  margin: 0; min-height: 100vh; background: var(--plum-900); color: var(--text);
  font-family: var(--f-sans); font-weight: 300; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.deck-mode { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
figure { margin: 0; }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico--lg { width: 22px; height: 22px; }
.gold-text { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- shared background (also used by kirim.html) ---------- */
.bg, .page-bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(255,220,215,  .26), transparent 70%),
    url("../assets/v2/bg-plaster.webp") center / cover no-repeat, var(--plum-900);
}
.bg { position: fixed; inset: 0; z-index: -2; }
@media (min-aspect-ratio: 1/1) {
  .bg, .page-bg { background:
    radial-gradient(ellipse 45% 60% at 50% 50%, rgba(255,220,215,  .2), transparent 70%),
    url("../assets/v2/bg-plaster.webp") center / cover no-repeat, var(--plum-900); }
}

/* =========================================================
   TYPE SYSTEM
   ========================================================= */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px; font-family: var(--f-sans); font-weight: 400; font-size: 11.5px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold-1);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold-2); opacity: .7; }
.display {
  margin: 0 0 14px; font-family: var(--f-display); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(34px, 9.6vw, 46px); line-height: 1.04; letter-spacing: -.01em; color: var(--text);
}
.display em, .display .it { font-style: italic; color: var(--gold-1); }
.display .mask { display: block; }
.body-text { margin: 0 auto 18px; max-width: 31ch; font-size: 16.5px; line-height: 1.7; color: var(--text-soft); }
.body-text--tight { margin-bottom: 14px; }
.hair { display: block; width: 56px; height: 1px; margin: 4px auto 18px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.rule { display: flex; align-items: center; justify-content: center; gap: 8px; width: 130px; height: 10px; margin: 6px auto 14px; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); }
.rule::after { background: linear-gradient(270deg, transparent, var(--gold-2)); }
.rule i { width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-hi), var(--gold-3)); box-shadow: 0 0 10px rgba(246, 217, 194, .8); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 24px; border: 1px solid rgba(241, 211, 184, .55); border-radius: 999px;
  background: rgba(104,34,52,  .35);
  color: var(--text); font-family: var(--f-sans); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: transform .2s ease, background .3s ease, border-color .3s ease, color .3s ease;
  overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 220, .2) 50%, transparent 65%);
  transform: translateX(-120%); animation: sweep 5s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.btn .ico { color: var(--gold-1); width: 17px; height: 17px; }
.btn:hover { background: rgba(241, 211, 184, .1); border-color: var(--gold-1); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: 11.5px; }
.btn--center { display: flex; width: max-content; margin: 0 auto; }
.btn--block { display: flex; width: 100%; }
.btn--solid { background: linear-gradient(135deg, var(--gold-hi), var(--gold-2) 60%, var(--gold-3)); color: var(--plum-900); border-color: transparent; box-shadow: 0 10px 30px rgba(214, 168, 130, .25); }
.btn--solid .ico { color: var(--plum-900); }
.btn--solid:hover { background: linear-gradient(135deg, #fff, var(--gold-1) 60%, var(--gold-2)); }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* =========================================================
   LOADER / FX
   ========================================================= */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(ellipse 60% 45% at 50% 45%, #9c4c5d, var(--plum-950) 75%); transition: opacity .9s ease, visibility .9s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-mark { position: relative; width: 88px; aspect-ratio: 1217 / 1254; animation: breathe 2.2s ease-in-out infinite; }
.loader-mark img { width: 100%; filter: drop-shadow(0 0 16px rgba(246, 217, 194, .35)); }
.loader-mark i { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-display); font-style: italic; font-size: 27px; line-height: 1; color: var(--gold-1); }
.loader-mark i:first-of-type { left: 39%; top: 37%; }
.loader-mark i:last-of-type { left: 61%; top: 63%; }
.loader-bar { width: 120px; height: 1px; background: rgba(246, 217, 194, .18); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); animation: loadbar 1.3s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .65; transform: scale(.97); } }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.fx { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 80%), rgba(255, 244, 228, .95), rgba(246, 205, 170, .55) 20%, rgba(170, 90, 160, .2) 50%, transparent 75%); }
body.opening .flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================================
   DECK & PAGE TRANSITIONS
   ========================================================= */
.deck { position: fixed; inset: 0; overflow: hidden; background: var(--plum-950); }
.page { position: absolute; inset: 0; overflow: hidden; visibility: hidden; z-index: 1; }
.page.is-current { visibility: visible; z-index: 3; }
.page.leave-next, .page.leave-prev { visibility: visible; z-index: 2; }

.page-bg { position: absolute; inset: -6% -4%; z-index: -1; animation: drift 34s ease-in-out infinite alternate; }
.page-bg--flip { transform: scaleX(-1); }
.page-bg::after { /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 70% at 50% 50%, transparent 40%, rgba(92,28,44,  .55) 100%);
}
@keyframes drift { from { translate: 0 0; scale: 1; } to { translate: -1.5% 1.2%; scale: 1.06; } }

.page-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 64px) 24px calc(env(safe-area-inset-bottom) + 76px);
}
.page-scroll::-webkit-scrollbar { display: none; }
.page-body { width: 100%; max-width: var(--col); margin: auto; text-align: center; position: relative; }

/* gold light riding the leading edge of the incoming page */
.page::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 30; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 214, .95) 30%, #fff 50%, rgba(255, 236, 214, .95) 70%, transparent);
  box-shadow: 0 0 22px 6px rgba(246, 205, 170, .55);
}
.page.enter-next::before { animation: edge var(--page-dur) var(--ease-page); }
@keyframes edge { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

.page.enter-next { animation: pEnterNext var(--page-dur) var(--ease-page) both; }
.page.enter-next .page-bg { animation: bgEnterNext var(--page-dur) var(--ease-page) both; }
.page.leave-next { animation: pLeaveNext var(--page-dur) var(--ease-page) both; }
.page.enter-prev { animation: pEnterPrev var(--page-dur) var(--ease-page) both; }
.page.leave-prev { animation: pLeavePrev var(--page-dur) var(--ease-page) both; }
.page.leave-prev .page-bg { animation: bgLeavePrev var(--page-dur) var(--ease-page) both; }
@keyframes pEnterNext { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bgEnterNext { from { translate: 0 -48%; } to { translate: 0 0; } }
@keyframes pLeaveNext { to { transform: translateY(-18%) scale(.9); opacity: 0; filter: brightness(.45) blur(3px); border-radius: 36px; } }
@keyframes pEnterPrev { from { transform: translateY(-18%) scale(.9); opacity: 0; filter: brightness(.45) blur(3px); border-radius: 36px; } to { transform: none; opacity: 1; filter: none; } }
@keyframes pLeavePrev { to { transform: translateY(100%); } }
@keyframes bgLeavePrev { to { translate: 0 -48%; } }

/* =========================================================
   MOTION SYSTEM — [data-a] elements animate when their page is active
   ========================================================= */
.page [data-a] { opacity: 0; }
.page.is-active [data-a] {
  animation-duration: var(--dur, 1.1s); animation-timing-function: var(--ease); animation-fill-mode: both;
  animation-delay: calc(var(--base) + var(--d, 0ms));
}
.page.is-active [data-a="rise"]  { animation-name: aRise; }
.page.is-active [data-a="fade"]  { animation-name: aFade; }
.page.is-active [data-a="zoom"]  { animation-name: aZoom; }
.page.is-active [data-a="blur"]  { animation-name: aBlur; }
.page.is-active [data-a="left"]  { animation-name: aLeft; }
.page.is-active [data-a="right"] { animation-name: aRight; }
.page.is-active [data-a="pop"]   { animation-name: aPop; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.page.is-active [data-a="bloom"] { animation-name: aBloom; --dur: 1.6s; }
.page.is-active [data-a="wipe"]  { animation-name: aWipe; --dur: 1.8s; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
.page.is-active [data-a="line"]  { animation-name: aLine; --dur: 1.2s; }
.page.is-active [data-a="track"] { animation-name: aTrack; --dur: 1.6s; }
.page.is-active [data-a="ring"]  { animation-name: aRing; --dur: 1.8s; }
.page.is-active [data-a="iris"]  { animation-name: aIris; --dur: 1.6s; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
.page.is-active [data-a="flip"]  { animation-name: aFlip; --dur: .9s; }
.page.is-active [data-a="spin"]  { animation-name: aSpin; --dur: 1.8s; }
@keyframes aRise  { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes aFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes aZoom  { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes aBlur  { from { opacity: 0; filter: blur(12px); scale: 1.08; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes aLeft  { from { opacity: 0; translate: -60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes aRight { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes aPop   { 0% { opacity: 0; scale: .3; } 100% { opacity: 1; scale: 1; } }
@keyframes aBloom { from { opacity: 0; scale: .35; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes aWipe  { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes aLine  { from { opacity: 0; scale: 0 1; } to { opacity: 1; scale: 1 1; } }
@keyframes aTrack { from { opacity: 0; letter-spacing: 1em; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes aRing  { 0% { opacity: 0; scale: .55; rotate: -25deg; filter: blur(8px); } 60% { filter: blur(0); } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes aIris  { from { opacity: 1; clip-path: circle(0% at 50% 50%); } to { opacity: 1; clip-path: circle(75% at 50% 50%); } }
@keyframes aFlip  { from { opacity: 0; transform: perspective(400px) rotateX(-95deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
@keyframes aSpin  { from { opacity: 0; rotate: -180deg; scale: .2; } to { opacity: 1; rotate: 0deg; scale: 1; } }

/* letter-by-letter text */
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; opacity: 0; }
.page.is-active .split .ch { animation: aCh 1.2s var(--ease) both; animation-delay: calc(var(--base) + var(--d, 0ms) + var(--i) * 60ms); }
@keyframes aCh { from { opacity: 0; translate: 0 .45em; filter: blur(10px); scale: 1.3; } to { opacity: 1; translate: 0 0; filter: blur(0); scale: 1; } }
.gold-ch .ch { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em; margin: 0 -.06em; }

/* self-drawing lines */
.page .draw, .page .arch-frame path, .page .medallion circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.page.is-active .draw, .page.is-active .arch-frame path, .page.is-active .medallion circle { animation: draw 2.2s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--base) + var(--dd, 150ms)); }
.page.is-active .arch-frame path.inner, .page.is-active .medallion circle.inner { animation-delay: calc(var(--base) + var(--dd, 150ms) + 250ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* extra motion types for the editorial layer */
.page.is-active [data-a="mask"]    { animation-name: aMask; --dur: 1.2s; animation-timing-function: cubic-bezier(.2, .8, .1, 1); }
.page.is-active [data-a="curtain"] { animation-name: aCurtain; --dur: 1.7s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
.page.is-active [data-a="curtain"] img { animation: curtainImg 2.4s cubic-bezier(.3, 0, .2, 1) both; animation-delay: calc(var(--base) + var(--d, 0ms)); }
@keyframes aMask { from { opacity: 1; clip-path: inset(0 0 100% 0); translate: 0 .6em; } to { opacity: 1; clip-path: inset(0 0 -20% 0); translate: 0 0; } }
@keyframes aCurtain { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes curtainImg { from { transform: scale(1.35); } to { transform: scale(1); } }

/* arch frame (self-drawing, used on the portrait diptych) */
.arch-frame { position: absolute; pointer-events: none; z-index: 2; overflow: visible; }
.arch-frame--photo { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
.arch-frame path { fill: none; stroke: url(#goldGrad); stroke-width: 1.2; }
.arch-frame path.inner { stroke-width: .7; opacity: .55; }

/* blooming, swaying flowers */
.deco { position: absolute; z-index: 0; pointer-events: none; }
.deco img { width: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .4)); animation: sway 7s ease-in-out infinite alternate; }
.deco--tr { width: 40%; right: -26%; top: -30%; transform-origin: 100% 0; opacity: .85; }
.deco--tr img { transform: scale(-1, -1); }
.deco--tl2 { width: 40%; left: -28%; top: -26%; transform-origin: 0 0; opacity: .85; }
.deco--tl2 img { transform: scaleY(-1) rotate(8deg); }
@keyframes sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.page-body > :not(.deco):not(.cover-deco) { position: relative; z-index: 1; }

.monogram { position: relative; width: clamp(60px, 8.6svh, 86px); aspect-ratio: 1217 / 1254; margin: 0 auto; }
.monogram img { width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(246, 217, 194, .3)); }
.monogram span { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 2.9svh, 28px); line-height: 1; color: var(--gold-1); text-shadow: 0 0 10px rgba(246, 217, 194, .35); }
.mono-a { left: 39%; top: 37%; }
.mono-b { left: 61%; top: 63%; }

/* =========================================================
   01 · COVER
   ========================================================= */
.cover-body { display: flex; flex-direction: column; align-items: center; --ring-w: min(80vw, 350px, 33svh); }
.page--cover .page-scroll { padding-top: calc(env(safe-area-inset-top) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 56px); }
.cover-deco { position: fixed; z-index: -1; pointer-events: none; }
.cover-deco img { width: 100%; animation: sway 8s ease-in-out infinite alternate; }
.cover-deco--tl { width: min(38vw, 210px); left: -9%; top: -3%; transform-origin: 0 0; }
.cover-deco--tl img { transform: scaleY(-1) rotate(-8deg); opacity: .7; }
.cover-deco--br { width: min(40vw, 230px); right: -10%; bottom: -5%; transform-origin: 100% 100%; }
.cover-deco--br img { transform: scaleX(-1); }
.eyebrow--cover { margin: 14px 0 0; letter-spacing: .42em; font-size: 11px; }
.eyebrow--cover::before, .eyebrow--cover::after { display: none; }
.ring { position: relative; width: var(--ring-w); aspect-ratio: 1122 / 1402; margin-top: -2px; }
.ring-glow { position: absolute; left: 0; right: 0; top: 4%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 200, 170, .3), transparent 62%); animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .5; scale: .92; } to { opacity: 1; scale: 1.06; } }
.ring-photo { position: absolute; left: 8.95%; top: 12.14%; width: 83.8%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #7d3445; box-shadow: 0 0 40px rgba(255, 210, 190, .18); }
.ring-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 52% 38%; animation: kenburns 16s ease-in-out infinite alternate; }
.ring-photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 45% at 30% 20%, rgba(255, 230, 210, .2), transparent 70%); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.ring-frame { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(10, 0, 14, .45)); }
.names {
  margin: calc(var(--ring-w) * -0.22) 0 0; position: relative; z-index: 2;
  font-family: var(--f-script); font-weight: 400; font-size: clamp(46px, 7.8svh, 86px); line-height: 1.02;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 2px 6px rgba(70,18,32,  .65)) drop-shadow(0 0 18px rgba(246, 210, 180, .25));
}
/* name lockup: Musfira (left) · small serif & with hairlines · Rizal (right) */
.names-1, .names-2 { display: block; white-space: nowrap; }
.names-1 { transform: translateX(-11%); }
.names-2 { transform: translateX(13%); margin-top: 0; }
.names-amp {
  display: flex; align-items: center; justify-content: center; gap: .45em;
  margin: .12em 0 .06em; translate: 18% 0; font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: .34em; line-height: 1; color: var(--gold-1);
}
.names-amp::before, .names-amp::after { content: ""; width: 1.7em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); }
.names-amp::after { background: linear-gradient(270deg, transparent, var(--gold-2)); }
.amp-inline { font-family: var(--f-display); font-style: italic; font-size: .5em; vertical-align: .25em; color: var(--gold-2); }
.cover-body .rule { margin: 8px auto 8px; }
.cover-date { margin: 0; font-family: var(--f-display); font-size: clamp(15px, 2.2svh, 19px); letter-spacing: .3em; padding-left: .3em; }
.guest { margin: 14px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
.guest strong { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--text); }
.btn--open { position: relative; z-index: 10 !important; margin-top: clamp(12px, 2.2svh, 24px); min-height: 54px; padding: 12px 30px; font-size: 13px; background: rgba(104,34,52,  .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.page--cover.has-guest .cover-body { --ring-w: min(80vw, 350px, 27svh); }
body.opening .page--cover .ring { animation: ringOut 1.2s cubic-bezier(.6, 0, .3, 1) forwards !important; }
body.opening .page--cover .names .ch { animation: chOut .9s cubic-bezier(.5, 0, .5, 1) forwards !important; animation-delay: calc(var(--i) * 25ms) !important; }
body.opening .page--cover [data-a]:not(.ring) { animation: fadeUp .8s ease forwards !important; }
@keyframes ringOut { from { opacity: 1; } to { scale: 2.2; opacity: 0; filter: blur(6px) brightness(1.4); } }
@keyframes chOut { from { opacity: 1; } to { opacity: 0; translate: 0 -60px; filter: blur(8px); } }
@keyframes fadeUp { from { opacity: 1; } to { opacity: 0; translate: 0 -30px; } }

/* =========================================================
   HERO PAGES (photo bleeds off the top)  ·  PHOTO PAGES (full-bleed)
   ========================================================= */
.page--hero .page-scroll { padding-top: 0; }
.page--hero .page-body { margin-top: 0; }
.hero {
  position: relative; height: 44svh; margin: 0 -24px 0; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 52%, transparent 98%); mask: linear-gradient(180deg, #000 52%, transparent 98%);
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(92,28,44,  .35), transparent 30%); }
.hero--short { height: 34svh; }
.page--photo .page-scroll { padding-top: calc(env(safe-area-inset-top) + 70px); }
.page-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--plum-950); }
.page-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
.page-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(92,28,44,  .72), rgba(92,28,44,  .9)); }
.page.enter-next .page-photo { animation: bgEnterNext var(--page-dur) var(--ease-page) both; }

/* 02 · SALAM */
.bismillah { margin: -34px 0 8px; font-family: var(--f-arabic); font-size: 28px; color: var(--gold-1); line-height: 1.7; text-shadow: 0 2px 18px rgba(20, 6, 26, .9), 0 0 14px rgba(246, 217, 194, .35); }
.display--salam { font-size: clamp(30px, 8.4vw, 40px); }
.display--salam em { font-size: .62em; display: block; margin-top: 6px; line-height: 1.3; }

/* 03 · AYAT */
.ayat-body { padding: 0 4px; }
.star8 { position: relative; width: 44px; height: 44px; margin: 0 auto 18px; display: grid; place-items: center; }
.star8 i, .star8::before, .star8::after { position: absolute; width: 26px; height: 26px; border: 1px solid var(--gold-2); }
.star8::before { content: ""; rotate: 45deg; }
.star8::after { content: ""; width: 9px; height: 9px; rotate: 45deg; background: linear-gradient(135deg, var(--gold-hi), var(--gold-3)); border: 0; }
.ayat-ar { margin: 6px 0 8px; font-family: var(--f-arabic); font-size: 26px; line-height: 2.15; color: var(--gold-hi); text-shadow: 0 0 18px rgba(246, 217, 194, .25); }
.quote { margin: 0 auto; max-width: 30ch; font-family: var(--f-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text); }

/* 04 · MEMPELAI */
.diptych { --ry: 160px; position: relative; width: min(100%, 330px, 44svh); aspect-ratio: 1 / 1.1; margin: 10px auto 34px; }
.dip { position: absolute; inset: 0; overflow: hidden; background: #7d3445; border-radius: 50% 50% 20px 20px / var(--ry) var(--ry) 20px 20px; box-shadow: 0 24px 50px rgba(70,18,32,  .5); }
.dip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(92,28,44,  .5)); }
.page.is-active .dip img { animation: curtainImg 2.4s cubic-bezier(.3, 0, .2, 1) both, kenburns 18s ease-in-out 2.6s infinite alternate; animation-delay: calc(var(--base) + 350ms), calc(var(--base) + 2.8s); }
.dip-amp {
  position: absolute; z-index: 3; left: 50%; bottom: -24px; translate: -50% 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: 28px; color: var(--gold-1);
  background: var(--plum-900); box-shadow: 0 0 0 1px var(--gold-2), 0 0 0 5px var(--plum-900), 0 0 0 6px rgba(214, 168, 130, .4), 0 8px 24px rgba(0, 0, 0, .5);
}
.couple { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.person-role { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-1); }
.person-name { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(30px, 8vw, 38px); line-height: 1.1; }
.person-full { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }
.person-parents { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.person-ig { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--gold-1); }
.person-ig .ico { width: 15px; height: 15px; }

/* 05 · KISAH — chapters with big years */
.chapters { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; }
.chapters li { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 18px 0; }
.chapters li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--gold-2), rgba(214, 168, 130, .1)); transform-origin: left; scale: 0 1; }
.page.is-active .chapters li::before { animation: grow 1.4s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--base) + 300ms + var(--i) * 300ms); }
@keyframes grow { to { scale: 1 1; } }
.ch-year { font-family: var(--f-display); font-weight: 400; font-size: 46px; line-height: .95; letter-spacing: -.02em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-month { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); }
.chapters h3 { margin: 0 0 4px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--text); }
.chapters p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-soft); }

/* 06 · ACARA — save the date */
.bigdate { display: flex; flex-direction: column; align-items: center; margin: 4px 0 18px; }
.bd-day, .bd-month { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--text-soft); padding-left: .42em; }
.bd-day::before, .bd-day::after, .bd-month::before, .bd-month::after { content: ""; width: 34px; height: 1px; background: var(--hair); }
.bd-num { font-family: var(--f-display); font-weight: 400; font-size: clamp(110px, 18svh, 150px); line-height: .9; letter-spacing: -.04em; margin: 4px 0 6px; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(246, 205, 170, .22)); font-variant-numeric: lining-nums; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 22px; }
.countdown div { position: relative; padding: 2px 0; transform-origin: top; }
.countdown div + div::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--hair); }
.countdown b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.countdown b.tick { animation: tick .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes tick { from { opacity: .1; transform: translateY(-8px) rotateX(70deg); } }
.countdown span { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); }
.countdown-done { margin: 0 0 18px; font-family: var(--f-script); font-size: 44px; line-height: 1.2; color: var(--gold-1); }
.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 18px; }
.event { position: relative; padding: 18px 8px 16px; }
.event + .event::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--hair); }
.event .ico { width: 30px; height: 30px; color: var(--gold-1); margin: 0 auto 6px; stroke-width: 1.2; }
.event h3 { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.15; }
.ev-time { display: block; margin-top: 8px; font-family: var(--f-display); font-size: 21px; line-height: 1.2; color: var(--gold-1); font-variant-numeric: lining-nums; }
.ev-tz { display: block; font-size: 10.5px; letter-spacing: .3em; color: var(--text-dim); text-transform: uppercase; }
.venue-line { display: flex; justify-content: center; align-items: flex-start; gap: 10px; margin: 0 auto 16px; text-align: left; font-size: 15px; color: var(--text-soft); line-height: 1.45; }
.venue-line b { font-weight: 500; color: var(--text); }
.venue-line .ico { color: var(--gold-1); margin-top: 2px; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cal-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; animation: aRise .5s var(--ease) both; }
.cal-menu .btn { width: min(100%, 280px); }

/* 07 · LOKASI */
.map { position: relative; height: clamp(170px, 24svh, 240px); border-radius: 18px; overflow: hidden; margin: 6px 0 16px; background: #241328; box-shadow: 0 0 0 1px rgba(241, 211, 184, .35), 0 20px 50px rgba(70,18,32,  .45); }
.map iframe { width: 100%; height: calc(100% + 60px); margin-top: -30px; border: 0; filter: invert(.92) hue-rotate(195deg) saturate(.55) brightness(.82) contrast(1.05); }
.map::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(92,28,44,  .8); border-radius: inherit; }
.map-ping { position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none; }
.map-ping i { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid rgba(246, 217, 194, .8); opacity: 0; animation: ping 2.7s ease-out infinite; }
.map-ping i:nth-child(2) { animation-delay: .9s; }
.map-ping i:nth-child(3) { animation-delay: 1.8s; }
@keyframes ping { from { scale: .1; opacity: .9; } to { scale: 2.2; opacity: 0; } }

/* 08 · GALERI — one interlocking arch mosaic, tiles fill each other */
.collage {
  --ry: 150px; --gap: 5px;
  position: relative; margin: 8px auto 0; width: 100%;
  height: clamp(420px, calc(100svh - 270px), 640px);
}
.collage-grid {
  position: absolute; inset: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr);
  grid-template-areas: "a a a a a a" "a a a a a a" "e e e b b b" "e e e b b b" "e e e c c c" "e e e c c c" "d d d d d d" "d d d d d d";
  border-radius: 50% 50% 26px 26px / var(--ry) var(--ry) 26px 26px; overflow: hidden; isolation: isolate;
  box-shadow: 0 26px 60px rgba(70,18,32,  .55), 0 0 0 1px rgba(241, 211, 184, .4);
}
.collage .arch-frame--photo { z-index: 4; }
.tile { position: relative; padding: 0; border: 0; background: #7d3445; cursor: zoom-in; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(241, 211, 184, .22), inset 0 -40px 50px -30px rgba(92,28,44,  .5); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.07); }
.tile:focus-visible { outline: 2px solid var(--gold-1); outline-offset: -2px; }
.tile.flower { background: radial-gradient(circle at 50% 55%, #a2566a, #7d3445); }
.tile.flower img { object-fit: contain; padding: 6%; }
.tile--a { grid-area: a; }
.tile--b { grid-area: b; }
.tile--c { grid-area: c; }
.tile--d { grid-area: d; }
.tile--e { grid-area: e; }
.tile--x { display: none; }
/* the circle locks into the junction of three tiles */
.tile--circle {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 5px var(--plum-900), 0 0 0 6px rgba(241, 211, 184, .75), 0 14px 34px rgba(70,18,32,  .6);
}
.tile--circle::after { border-radius: 50%; }

/* staggered entrance: each piece opens in turn, the circle pops in last */
.page .tile { opacity: 0; }
.page.is-active .tile { animation: tileOpen 1.25s cubic-bezier(.65, 0, .2, 1) both; animation-delay: calc(var(--base) + 250ms + var(--i) * 150ms); }
.page.is-active .tile img { animation: tileImg 2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--base) + 250ms + var(--i) * 150ms); }
.page.is-active .tile--circle { animation: circleIn 1.1s cubic-bezier(.3, 1.5, .5, 1) both, circleFloat 6s ease-in-out 3s infinite alternate; animation-delay: calc(var(--base) + 1150ms), calc(var(--base) + 2.4s); }
@keyframes tileOpen { from { opacity: 1; clip-path: inset(50% 50% 50% 50% round 24px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes tileImg { from { transform: scale(1.4); } to { transform: scale(1); } }
@keyframes circleIn { from { opacity: 0; scale: .2; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes circleFloat { from { translate: -50% -52%; } to { translate: -50% -48%; } }
@media (max-height: 700px) { .collage { height: clamp(360px, calc(100svh - 210px), 520px); } }

/* 09 · RSVP + wishes */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 4px 0 16px; border-radius: 999px; border: 1px solid rgba(241, 211, 184, .35); background: rgba(20, 8, 26, .45); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 40px; padding: 4px 6px; border-radius: 999px; font-size: 13.5px; font-weight: 400; color: var(--text-soft); transition: all .35s var(--ease); text-align: center; line-height: 1.2; }
.seg input:checked + span { background: linear-gradient(135deg, var(--gold-hi), var(--gold-2)); color: var(--plum-900); font-weight: 500; box-shadow: 0 4px 16px rgba(214, 168, 130, .3); }
.seg input:focus-visible + span { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.guests { border: 0; margin: 0 0 14px; padding: 0; }
.guests legend { padding: 0; margin: 0 auto 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-1); }
.guests-opts { display: flex; justify-content: center; gap: 8px; }
.guests-opts label { cursor: pointer; }
.guests-opts input { position: absolute; opacity: 0; pointer-events: none; }
.guests-opts span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--f-display); font-size: 18px; color: var(--text-soft); border: 1px solid rgba(246, 217, 194, .3); transition: all .3s ease; }
.guests-opts input:checked + span { color: var(--plum-900); border-color: transparent; background: linear-gradient(135deg, var(--gold-hi), var(--gold-2)); }
.guests-opts input:focus-visible + span { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.field { display: block; margin: 0 0 14px; text-align: left; }
.field-label { display: block; margin-bottom: 2px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-1); }
.field input, .field textarea {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(241, 211, 184, .4); border-radius: 0; background: transparent;
  color: var(--text); font-family: var(--f-sans); font-weight: 300; font-size: 17px; line-height: 1.5; resize: none; transition: border-color .25s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(195, 174, 192, .7); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold-1); }
.field.invalid input { border-bottom-color: #ef9aab; animation: shake .4s; }
@keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.rsvp-form .btn--block { margin-top: 6px; }
.wall { margin-top: 34px; text-align: left; }
.wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.wall-head h3 { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 26px; }
.wall-stats { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); text-align: right; }
.wall-stats b { color: var(--gold-1); font-weight: 500; }
.wishes { list-style: none; margin: 0; padding: 0; }
.wishes li { padding: 16px 0; border-bottom: 1px solid rgba(241, 211, 184, .14); }
.page.is-active .wishes li { animation: aRise .8s var(--ease) both; animation-delay: calc(var(--base) + 300ms + var(--i, 0) * 90ms); }
.wish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wish-head b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 19px; color: var(--text); }
.wish-head small { flex: none; font-size: 11px; letter-spacing: .08em; color: var(--text-dim); }
.wishes p { margin: 6px 0 0; color: var(--text-soft); font-size: 15.5px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.wishes .tag { display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-1); }
.wall-empty { margin: 16px 0 0; font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--text-dim); text-align: center; }
.wishes:not(:empty) + .wall-empty { display: none; }

/* 10 · HADIAH */
.gifts { display: flex; flex-direction: column; gap: 22px; align-items: center; perspective: 900px; margin-top: 6px; }
.gift { width: min(100%, 340px); }
.page .gift { opacity: 0; }
.page.is-active .gift { animation: cardIn 1.4s var(--ease) both; animation-delay: calc(var(--base) + 450ms + var(--i, 0) * 200ms); }
@keyframes cardIn { from { opacity: 0; transform: perspective(900px) rotateX(55deg) translateY(60px); } to { opacity: 1; transform: none; } }
.bank-card {
  position: relative; aspect-ratio: 1.586; border-radius: 20px; padding: 20px 22px; text-align: left; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, rgba(246, 205, 170, .28), transparent 50%), radial-gradient(90% 80% at 0% 100%, rgba(160, 80, 170, .45), transparent 60%), linear-gradient(135deg, #4b2152, #261029 55%, #3d1a44);
  box-shadow: 0 30px 60px rgba(70,18,32,  .6), 0 0 0 1px rgba(241, 211, 184, .45);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .3s ease-out;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bank-card::after { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 225, .26) 48%, rgba(220, 170, 240, .16) 52%, transparent 60%); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 40% { transform: translateX(-60%); } 75%, 100% { transform: translateX(60%); } }
.bc-top { display: flex; justify-content: space-between; align-items: center; }
.bc-bank { font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: .06em; }
.bc-top .ico { color: var(--gold-1); width: 24px; height: 24px; }
.bc-chip { width: 44px; height: 33px; border-radius: 7px; background: linear-gradient(135deg, #f7dcc0, #c79670 45%, #f3d4b4 60%, #a8724f); position: relative; box-shadow: inset 0 0 0 1px rgba(80, 40, 20, .3); }
.bc-chip::before, .bc-chip::after { content: ""; position: absolute; border: 1px solid rgba(90, 50, 30, .35); }
.bc-chip::before { inset: 9px 0; border-left: 0; border-right: 0; }
.bc-chip::after { inset: 0 15px; border-top: 0; border-bottom: 0; }
.bc-num { font-family: var(--f-display); font-size: clamp(21px, 6.2vw, 25px); letter-spacing: .1em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums; }
.bc-holder { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); }
.bc-holder b { display: block; font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--text); }
.gift .btn { margin-top: 16px; }

/* 11 · PENUTUP */
.page--closing .page-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 70px); }
.closing-body { margin: auto auto 0; }
.page-photo--closing img { object-position: 65% 40%; }
.page-photo--closing::after { background: linear-gradient(180deg, rgba(92,28,44,  .25) 0%, rgba(92,28,44,  .05) 28%, rgba(92,28,44,  .78) 52%, rgba(92,28,44,  .97) 78%); }
.closing-thanks { font-family: var(--f-display); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--text); max-width: 30ch; }
.closing-names {
  display: flex; flex-direction: column; align-items: center; margin: 2px 0 4px;
  font-family: var(--f-script); font-weight: 400; font-size: clamp(50px, 8svh, 70px); line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(70,18,32,  .6)) drop-shadow(0 0 16px rgba(246, 210, 180, .25));
}
.page--closing .rule { margin: 10px auto 12px; }
.closing-salam { margin: 0 0 22px; font-family: var(--f-display); font-style: italic; font-size: 16px; line-height: 1.5; letter-spacing: .01em; color: var(--text-soft); }

/* =========================================================
   CHROME
   ========================================================= */
.chrome > * { position: fixed; z-index: 50; transition: opacity .6s ease, scale .6s var(--ease); }
body.locked .chrome .menu-btn, body.locked .chrome .dots, body.locked .chrome .hint { opacity: 0; pointer-events: none; scale: .8; }
.round-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--gold-1); background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246, 217, 194, .35); }
.menu-btn { top: calc(env(safe-area-inset-top) + 12px); left: 12px; }
.top-right { top: calc(env(safe-area-inset-top) + 12px); right: 12px; display: flex; gap: 8px; align-items: center; }
.lang { display: flex; padding: 3px; border-radius: 999px; background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246, 217, 194, .35); }
.lang button { border: 0; background: none; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--text-dim); transition: all .3s ease; }
.lang button[aria-pressed="true"] { background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); color: var(--plum-900); }
.music-btn.playing .ico { animation: spin 6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.dots { right: 2px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 9px; padding: 10px 6px; }
.dots button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 6px; background: rgba(246, 217, 194, .35); transition: all .5s var(--ease); position: relative; }
.dots button::after { content: ""; position: absolute; inset: -5px -10px; }
.dots button.on { height: 22px; background: var(--gold-1); box-shadow: 0 0 10px rgba(246, 217, 194, .6); }
.hint { left: 50%; bottom: calc(env(safe-area-inset-bottom) + 10px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 6px 12px; font-size: 10px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); }
.hint .ico { width: 20px; height: 20px; color: var(--gold-1); animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { translate: 0 4px; opacity: .5; } 50% { translate: 0 -4px; opacity: 1; } }
body.last-page .hint { opacity: 0; pointer-events: none; }

.menu { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(104,34,52,  .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: aFade .4s ease both; }
.menu.closing { animation: menuOut .35s ease both; }
@keyframes menuOut { to { opacity: 0; } }
.menu-inner { text-align: center; padding: 30px 20px; }
.menu-names { margin: 0 0 10px; font-family: var(--f-script); font-size: 46px; line-height: 1.1; color: var(--gold-1); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { animation: aRise .7s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 100ms); }
.menu-list button { border: 0; background: none; padding: 6px 14px; font-family: var(--f-display); font-size: clamp(22px, 3.3svh, 28px); color: var(--text-soft); display: flex; align-items: baseline; gap: 14px; margin: 0 auto; transition: color .3s; }
.menu-list button small { font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .2em; color: var(--text-dim); width: 22px; text-align: right; }
.menu-list button:hover, .menu-list button.on { color: var(--gold-1); }
.menu-list button.on { font-style: italic; }
.menu-close { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 12px; }

.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 64px 12px; background: rgba(92,28,44,  .95); animation: aFade .3s ease; }
.lb-figure { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.lb-figure img { max-width: 100%; max-height: 100%; border-radius: 6px; opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .35s ease; }
.lb-figure img.show { opacity: 1; transform: none; }
.lb-btn { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(246, 217, 194, .4); background: rgba(92,28,44,  .55); color: var(--gold-1); display: grid; place-items: center; }
.lb-close { top: calc(env(safe-area-inset-top) + 14px); right: 14px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 18px); left: 50%; transform: translateX(-50%); font-family: var(--f-display); font-size: 14px; letter-spacing: .12em; color: var(--text-dim); }
@media (hover: none) { .lb-prev, .lb-next { display: none; } }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 70px); z-index: 120; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 20px; border-radius: 999px; font-size: 14px; background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246, 217, 194, .45); transition: all .35s ease; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* card style used by kirim.html */
.card { position: relative; padding: 24px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(104,34,52,  .62), rgba(104,34,52,  .74)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(241, 211, 184, .3), 0 20px 50px rgba(70,18,32,  .45); }

/* small phones */
@media (max-height: 700px) {
  .page--cover.has-guest .cover-body { --ring-w: min(80vw, 350px, 26svh); }
  .page--cover .monogram { width: 54px; }
  .eyebrow--cover { margin-top: 8px; }
  .guest { margin-top: 8px; }
  .page-scroll { padding-top: calc(env(safe-area-inset-top) + 58px); }
  .hero { height: 38svh; }
  .hero--short { height: 28svh; }
  .ayat-ar { font-size: 22px; line-height: 2; }
  .quote { font-size: 17px; }
  .chapters li { padding: 12px 0; }
  .bd-num { font-size: 96px; }
}
@media (min-width: 760px) {
  .cover-deco--tl { left: calc(50% - 470px); width: 240px; }
  .cover-deco--br { right: calc(50% - 470px); width: 260px; }
  .dots { right: 22px; }
  .hero { margin: 0 auto; width: calc(100% + 48px); margin-left: -24px; border-radius: 0 0 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .page [data-a], .split .ch, .page .gift { opacity: 1 !important; }
  .page .draw, .page .arch-frame path { stroke-dashoffset: 0; }
  .chapters li::before { scale: 1 1; }
}

/* script names: give each animated letter room so the swashes aren't clipped */
.names .ch, .closing-names .ch { padding: .18em .32em; margin: -.18em -.32em; }
.closing-names .ch { padding: .22em .34em; margin: -.22em -.34em; }

/* very short screens (iPhone SE / mini with Safari bars): keep the open button clear of the toolbar */
@media (max-height: 620px) {
  .cover-body, .page--cover.has-guest .cover-body { --ring-w: min(70vw, 300px, 25svh); }
  .page--cover .page-scroll { padding-top: calc(env(safe-area-inset-top) + 10px); padding-bottom: calc(env(safe-area-inset-bottom) + 44px); }
  .page--cover .monogram { width: 46px; }
  .names { font-size: clamp(42px, 7.6svh, 60px); }
  .cover-body .rule { margin: 4px auto; }
  .cover-date { font-size: 14px; }
  .guest strong { font-size: 19px; }
  .btn--open { min-height: 48px; margin-top: 10px; }
}

/* =========================================================
   MUSIC — spinning record (bottom right)
   ========================================================= */
.disc {
  position: fixed; z-index: 56; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  display: flex; align-items: center; gap: 12px;
  transition: opacity .7s ease, translate .7s var(--ease);
}
body.locked .disc { opacity: 0; translate: 0 24px; pointer-events: none; }
body.lb-open .disc, .lightbox:not([hidden]) ~ .disc { opacity: 0; pointer-events: none; }
.disc-btn { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.disc-btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; }

.disc-vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 29%, rgba(255,255,255,.06) 29.5% 30%, transparent 30.5%),
    radial-gradient(circle, transparent 0 46%, rgba(255,255,255,.05) 46.5% 47%, transparent 47.5%),
    repeating-radial-gradient(circle, #120c15 0 1.1px, #22182a 1.1px 2.2px);
  box-shadow: 0 0 0 1.5px rgba(241, 211, 184, .75), 0 0 0 4px rgba(18, 7, 24, .9), 0 0 0 5px rgba(241, 211, 184, .28), 0 12px 28px rgba(0, 0, 0, .6);
  animation: spin 3.6s linear infinite; animation-play-state: paused;
}
.disc.playing .disc-vinyl { animation-play-state: running; }
.disc-btn::after { /* static light reflection over the turning record */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2;
  background: conic-gradient(from 20deg, transparent 0deg, rgba(255, 236, 222, .2) 30deg, transparent 70deg, transparent 180deg, rgba(255, 236, 222, .14) 210deg, transparent 250deg);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 32%); mask: radial-gradient(circle, transparent 0 31%, #000 32%);
}
.disc-label { position: absolute; inset: 30%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--gold-2), 0 0 10px rgba(246, 205, 170, .35); background: var(--plum-800); }
.disc-label img { width: 100%; height: 100%; object-fit: cover; scale: 1.38; }
.disc-hole { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: var(--plum-950); box-shadow: 0 0 0 1px var(--gold-1); }

/* tone arm swings onto the record while playing */
.disc-arm { position: absolute; z-index: 3; right: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4e8, var(--gold-2) 55%, var(--gold-3)); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.disc-arm i { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 36px; margin-left: -1.25px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-3)); transform-origin: 50% 0; rotate: 4deg; transition: rotate .9s cubic-bezier(.5, 0, .2, 1.3); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.disc-arm i::after { content: ""; position: absolute; left: -2.5px; bottom: -6px; width: 7.5px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.disc.playing .disc-arm i { rotate: 30deg; }

/* sound ripples */
.disc-waves { position: absolute; inset: 0; pointer-events: none; }
.disc-waves i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246, 217, 194, .7); opacity: 0; }
.disc.playing .disc-waves i { animation: ripple 2.7s ease-out infinite; }
.disc.playing .disc-waves i:nth-child(2) { animation-delay: .9s; }
.disc.playing .disc-waves i:nth-child(3) { animation-delay: 1.8s; }
@keyframes ripple { from { scale: 1; opacity: .7; } to { scale: 1.9; opacity: 0; } }

/* play / pause badge */
.disc-badge { position: absolute; z-index: 4; left: -5px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--plum-900); background: linear-gradient(135deg, var(--gold-hi), var(--gold-2)); box-shadow: 0 0 0 2px var(--plum-900), 0 4px 10px rgba(0,0,0,.45); }
.disc-badge .ico { width: 12px; height: 12px; grid-area: 1 / 1; transition: opacity .3s, scale .3s; }
.disc-badge .ico-play { fill: currentColor; stroke: none; margin-left: 1px; }
.disc-badge .ico-pause { stroke-width: 3; opacity: 0; scale: .5; }
.disc.playing .disc-badge .ico-play { opacity: 0; scale: .5; }
.disc.playing .disc-badge .ico-pause { opacity: 1; scale: 1; }
.disc.needs-tap .disc-btn { animation: discPulse 1.6s ease-in-out infinite; }
.disc.needs-tap .disc-badge { animation: badgeBounce 1.6s ease-in-out infinite; }
@keyframes discPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 217, 194, .55); } 50% { box-shadow: 0 0 0 12px rgba(246, 217, 194, 0); } }
@keyframes badgeBounce { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }

/* now-playing pill */
.disc-pill {
  position: absolute; right: 0; bottom: 78px; width: max-content;
  display: flex; align-items: center; gap: 10px; max-width: min(78vw, 280px); padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(246, 217, 194, .35); box-shadow: 0 10px 26px rgba(0,0,0,.4);
  opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .5s ease, translate .6s var(--ease);
}
.disc.show-pill .disc-pill { opacity: 1; translate: 0 0; }
.disc-pill-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.disc-pill-text b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-pill-text small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-pill-text small:empty { display: none; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--gold-1); }
.disc.playing .eq i { animation: eq .9s ease-in-out infinite alternate; }
.disc.playing .eq i:nth-child(2) { animation-delay: -.3s; }
.disc.playing .eq i:nth-child(3) { animation-delay: -.6s; }
.disc.playing .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.disc:not(.playing) .eq { display: none; }

/* fallback: real YouTube player for browsers that need a tap inside it */
.yt-card {
  position: absolute; right: 0; bottom: 82px; width: 236px; padding: 10px; border-radius: 18px; text-align: center;
  background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(246, 217, 194, .4);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; translate: 0 12px; scale: .96; transform-origin: 100% 100%; transition: opacity .4s ease, translate .5s var(--ease), scale .5s var(--ease);
}
.disc.show-card .yt-card { opacity: 1; pointer-events: auto; translate: 0 0; scale: 1; }
.disc.show-card .disc-pill { opacity: 0; }
.yt-card p { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; color: var(--gold-1); }
.yt-frame { width: 216px; height: 122px; border-radius: 12px; overflow: hidden; background: #000; }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .disc-vinyl { animation: none; } }

/* honeypot field: invisible to people, bots fill it */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* wishes wall: slides of 5 */
.wall-stage { position: relative; overflow: hidden; }
.wishes li { cursor: default; }
.wishes li .wish-head { gap: 12px; align-items: center; justify-content: flex-start; }
.wishes li .wish-head > div { display: flex; flex-direction: column; min-width: 0; }
.wish-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--plum-900); background: linear-gradient(135deg, var(--gold-hi), var(--gold-2)); }
.wishes li .wish-head small { letter-spacing: .04em; }
.wishes li p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wishes li.clamped { cursor: pointer; }
.wishes li.clamped p::after { content: ""; }
.wishes li.clamped:not(.open) p { -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
.wishes li.open p { -webkit-line-clamp: unset; display: block; }
.wishes .tag { display: none; }
.wish-loading { padding: 30px 0; text-align: center; font-family: var(--f-display); font-style: italic; color: var(--text-dim); border: 0 !important; }
.page.is-active .wishes li { animation: none; }
.wishes.out-next li { animation: wOutL .17s ease forwards !important; }
.wishes.out-prev li { animation: wOutR .17s ease forwards !important; }
.wishes.in-next li { animation: wInR .55s cubic-bezier(.2, .8, .2, 1) both !important; animation-delay: calc(var(--i) * 55ms) !important; }
.wishes.in-prev li { animation: wInL .55s cubic-bezier(.2, .8, .2, 1) both !important; animation-delay: calc(var(--i) * 55ms) !important; }
@keyframes wOutL { to { opacity: 0; translate: -40px 0; } }
@keyframes wOutR { to { opacity: 0; translate: 40px 0; } }
@keyframes wInR { from { opacity: 0; translate: 50px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes wInL { from { opacity: 0; translate: -50px 0; } to { opacity: 1; translate: 0 0; } }
.wall-pager { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; margin-top: 16px; }
.wp-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(241, 211, 184, .45); background: rgba(104,34,52,  .4); color: var(--gold-1); display: grid; place-items: center; cursor: pointer; transition: background .25s, opacity .25s; }
.wp-btn:hover:not(:disabled) { background: rgba(241, 211, 184, .12); }
.wp-btn:disabled { opacity: .28; cursor: default; }
.wp-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wp-dots { display: flex; gap: 7px; justify-content: center; }
.wp-dots:empty { display: none; }
.wp-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(246, 217, 194, .35); transition: all .4s var(--ease); position: relative; cursor: pointer; }
.wp-dots button::after { content: ""; position: absolute; inset: -8px -5px; }
.wp-dots button.on { width: 22px; background: var(--gold-1); }
.wp-count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .wishes li { animation: none !important; } }

/* two venues */
.venues { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.venue-label { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-1); }
.venue-label::before, .venue-label::after { content: ""; width: 22px; height: 1px; background: var(--gold-2); opacity: .7; }
.venue-block .events { margin-bottom: 6px; }
.events--1 .event { padding: 12px 8px 10px; }
.events .event { padding-top: 14px; padding-bottom: 12px; }
.venue-line { width: 100%; border: 0; background: none; cursor: pointer; margin: 0; padding: 6px 4px; border-radius: 12px; color: inherit; font: inherit; align-items: center; transition: background .25s; }
.venue-line:hover { background: rgba(241, 211, 184, .06); }
.venue-line > span { flex: 1; text-align: left; }
.venue-line .ico--go { color: var(--gold-2); width: 16px; height: 16px; margin-top: 0; }
.seg--venue { max-width: 330px; margin: 6px auto 16px; grid-template-columns: repeat(2, 1fr); }
.display--venue { font-size: clamp(28px, 7.6vw, 38px); }
.venue-panel.swap > * { animation: aRise .6s var(--ease) both; }
.venue-panel.swap > *:nth-child(2) { animation-delay: 60ms; }
.venue-panel.swap > *:nth-child(3) { animation-delay: 120ms; }
.venue-panel.swap > *:nth-child(4) { animation-delay: 180ms; }
.map-soon { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; color: var(--text-soft); font-family: var(--f-display); font-style: italic; font-size: 17px; background: radial-gradient(circle at 50% 40%, rgba(104,34,52,  .9), rgba(104,34,52,  .95)); }
.map-soon .ico { color: var(--gold-1); }
.map iframe[hidden] { display: none; }

/* =========================================================
   ACARA — one screen: date row, compact countdown, venue cards side by side
   ========================================================= */
#acara .eyebrow { margin-bottom: 4px; }
.daterow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 0 0 10px; }
.dr-side { font-size: 12px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--text-soft); text-align: right; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dr-right { text-align: left; line-height: 1.5; }
.dr-right b { display: block; font-weight: 400; color: var(--gold-1); letter-spacing: .3em; }
.daterow .bd-num { font-size: clamp(76px, 12svh, 108px); margin: 0; line-height: .9; }
#acara .countdown { margin: 0 0 14px; }
#acara .countdown b { font-size: clamp(24px, 3.6svh, 30px); }
.vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; text-align: left; }
.vcard { position: relative; display: flex; flex-direction: column; padding: 14px 12px 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(104,34,52,  .62), rgba(104,34,52,  .74)); box-shadow: 0 0 0 1px rgba(241, 211, 184, .3), 0 14px 30px rgba(70,18,32,  .35); }
.vc-label { margin: 0 0 8px; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-1); text-align: center; }
.vc-events { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.vc-events li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.vc-events .ico { width: 20px; height: 20px; color: var(--gold-1); margin-top: 3px; stroke-width: 1.3; }
.vc-events b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.15; }
.vc-events span { display: block; font-family: var(--f-display); font-size: 15px; color: var(--gold-1); font-variant-numeric: lining-nums; white-space: nowrap; }
.vc-events i { font-family: var(--f-sans); font-style: normal; font-size: 9.5px; letter-spacing: .16em; color: var(--text-dim); }
.vc-loc { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 2px 0; border: 0; border-top: 1px solid rgba(241, 211, 184, .2); background: none; color: var(--text-soft); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.vc-loc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-loc .ico { width: 15px; height: 15px; color: var(--gold-1); flex: none; }
.vc-loc .ico--go { color: var(--gold-2); width: 13px; height: 13px; }
#acara .btn-row .btn { min-height: 40px; }
/* keep content clear of the record player in the bottom-right corner */
.page-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 92px); }
@media (max-height: 700px) {
  .daterow .bd-num { font-size: 72px; }
  .dr-side { font-size: 11px; padding: 7px 0; }
  #acara .countdown b { font-size: 22px; }
  .vcard { padding: 12px 10px 8px; }
  .vc-events b { font-size: 16px; }
  .vc-events span { font-size: 14px; }
}

/* =========================================================
   ONE SCREEN PER PAGE — tightened sizes
   ========================================================= */
.page-scroll { padding-top: calc(env(safe-area-inset-top) + 60px); }
/* mempelai */
.diptych { width: min(100%, 320px, 39svh); margin: 6px auto 30px; }
/* lokasi */
.hero--short { height: 24svh; }
#lokasi .map { height: clamp(140px, 21svh, 220px); margin: 4px 0 12px; }
#lokasi .seg--venue { margin: 4px auto 10px; }
#lokasi .body-text--tight { margin-bottom: 8px; }
.display--venue { margin-bottom: 6px; }
/* galeri */
.collage { height: clamp(380px, calc(100svh - 300px), 620px); }
/* rsvp (form only) */
#rsvp .display { font-size: clamp(30px, 8vw, 40px); margin-bottom: 8px; }
#rsvp .body-text { margin-bottom: 12px; }
#rsvp .seg { margin: 2px 0 12px; }
#rsvp .guests { margin-bottom: 8px; }
#rsvp .field { margin-bottom: 10px; }
/* ucapan (wishes slider) */
.display--wall { font-size: clamp(30px, 8vw, 40px); margin-bottom: 6px; }
.wall { margin-top: 0; }
.wall-stats { display: block; text-align: center; margin: 0 0 6px; }
.wishes li { padding: 11px 0; }
.wishes li p { -webkit-line-clamp: 2; margin-top: 4px; font-size: 15px; line-height: 1.55; }
.wishes li .wish-head { gap: 10px; }
.wish-avatar { width: 30px; height: 30px; font-size: 15px; }
.wall-pager { margin-top: 10px; }
.wall-empty { text-align: center; }
.wall-empty p { margin: 10px auto 16px; max-width: 24ch; font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--text-dim); }

/* short phones (iPhone SE / mini with Safari bars) */
@media (max-height: 700px) {
  .page-scroll { padding-top: calc(env(safe-area-inset-top) + 54px); padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
  .display { font-size: clamp(28px, 8vw, 36px); margin-bottom: 8px; }
  .eyebrow { margin-bottom: 6px; }
  .body-text { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  .hero { height: 30svh; }
  .hero--short { height: 18svh; }
  .bismillah { font-size: 24px; margin-top: -26px; }
  .ayat-ar { font-size: 20px; line-height: 1.9; }
  .quote { font-size: 16px; }
  .star8 { margin-bottom: 10px; }
  .diptych { width: min(100%, 280px, 36svh); margin-bottom: 26px; }
  .person-name { font-size: 28px; }
  .daterow .bd-num { font-size: 64px; }
  #acara .countdown { margin-bottom: 10px; }
  .vc-events { gap: 5px; }
  #lokasi .map { height: 130px; }
  .collage { height: calc(100svh - 250px); }
  #rsvp .guests-opts span { width: 38px; height: 38px; }
  .gift .btn { margin-top: 10px; }
  .bank-card { padding: 16px 18px; }
  .closing-thanks { font-size: 16px; }
  .closing-names { font-size: 46px; }
}
/* smallest screens (iPhone SE with Safari bars) */
@media (max-height: 600px) {
  .page-scroll { padding-top: calc(env(safe-area-inset-top) + 50px); padding-bottom: calc(env(safe-area-inset-bottom) + 78px); }
  .daterow { margin-bottom: 6px; }
  .daterow .bd-num { font-size: 56px; }
  #acara .countdown b { font-size: 20px; }
  #acara .countdown span { font-size: 9px; }
  .vc-events b { font-size: 15px; }
  .vc-loc { margin-top: 6px; padding-top: 6px; }
  .hero--short { height: 14svh; }
  #lokasi .map { height: 118px; }
  #rsvp .display { font-size: 28px; }
  #rsvp .body-text { display: none; }
  #rsvp .seg span { min-height: 36px; }
  #rsvp .guests legend { margin-bottom: 4px; }
  #rsvp .guests-opts span { width: 34px; height: 34px; font-size: 16px; }
  .field input, .field textarea { padding: 7px 2px; font-size: 16px; }
  .gift { width: min(100%, 300px); }
  #hadiah .body-text { font-size: 14px; }
}

.display--wall { white-space: nowrap; }
#acara .btn-row { flex-wrap: nowrap; gap: 8px; }
#acara .btn-row .btn { padding: 8px 14px; font-size: 11px; letter-spacing: .12em; gap: 8px; white-space: nowrap; }

/* real photos */
.dip img { object-position: 50% 22%; }
.page-photo--closing img { object-position: 50% 12%; }
/* close the ring: the frame art's gold line fades out behind the flowers at the bottom,
   so the photo gets its own gold edge, sized to sit on the frame's ring */
.ring-photo {
  left: 8.79%; top: 12%; width: 84.14%;
  box-shadow: 0 0 0 1.5px #f3d6b6, 0 0 0 2.5px #c08a63, 0 0 0 3.5px rgba(255, 228, 200, .45), 0 0 26px rgba(255, 210, 190, .22);
}


/* =========================================================
   v2 — fresh roses on dusty rose plaster; no AI frame
   ========================================================= */
.bg, .page-bg { background-color: var(--plum-900); }
.page-bg::after { background: radial-gradient(ellipse 90% 75% at 50% 50%, rgba(80, 22, 38, .05) 40%, rgba(80, 22, 38, .35) 100%); }
.page-photo::after { background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(104, 34, 52, .72), rgba(80, 24, 40, .88)); }
.page-photo--closing::after { background: linear-gradient(180deg, rgba(92, 28, 44, .1) 0%, rgba(92, 28, 44, .05) 24%, rgba(104, 34, 52, .85) 46%, rgba(96, 30, 47, .97) 66%); }
.hero::after { background: linear-gradient(180deg, rgba(92, 28, 44, .3), transparent 30%); }
body { background: var(--plum-900); }

/* type monogram (replaces the gold badge image) */
.monogram { width: auto; aspect-ratio: auto; display: inline-flex; align-items: center; gap: .18em; padding: .32em .9em; border: 1px solid rgba(255, 236, 222, .7); border-radius: 999px; font-family: var(--f-display); font-style: italic; font-size: clamp(17px, 2.6svh, 22px); color: var(--gold-1); }
.monogram span { position: static; transform: none; font-size: inherit; text-shadow: none; }
.monogram span + span::before { content: "&"; margin: 0 .3em; font-size: .7em; color: var(--gold-2); }
.loader-mark { width: auto; aspect-ratio: auto; display: flex; gap: .3em; font-family: var(--f-display); font-style: italic; font-size: 34px; color: var(--gold-1); }
.loader-mark img { display: none; }
.loader-mark i { position: static; transform: none; font-size: inherit; }
.loader-mark i + i::before { content: "&"; margin-right: .3em; font-size: .6em; color: var(--gold-2); }
.loader { background: var(--plum-900) url("../assets/v2/bg-plaster.webp") center / cover; }

/* cover: the couple's photo, big, in a simple arch with a thin cream line */
.cover-body { --arch-w: min(74vw, 330px, 35svh); }
.page--cover.has-guest .cover-body { --arch-w: min(72vw, 320px, 31svh); }
.cover-arch {
  position: relative; width: var(--arch-w); aspect-ratio: 4 / 5; margin: 10px 0 0;
  border-radius: 999px 999px 18px 18px; overflow: hidden;
  box-shadow: 0 0 0 5px rgba(143, 65, 82, .9), 0 0 0 6px rgba(255, 236, 222, .75), 0 22px 46px rgba(70, 18, 32, .45);
}
.cover-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; animation: kenburns 18s ease-in-out infinite alternate; }
.cover-arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(92, 28, 44, .55)); }
.cover-body .names { margin-top: calc(var(--arch-w) * -0.18); }
.names { filter: drop-shadow(0 2px 8px rgba(70, 18, 32, .55)); }
.cover-deco { opacity: 1; }
.cover-deco img { animation: sway 9s ease-in-out infinite alternate; filter: drop-shadow(0 10px 18px rgba(70, 18, 32, .35)); }
.cover-deco--tl { width: min(46vw, 230px); left: -12%; top: -6%; }
.cover-deco--tl img { transform: rotate(180deg); opacity: 1; }
.cover-deco--br { width: min(48vw, 250px); right: -12%; bottom: -7%; }
.cover-deco--br img { transform: none; }
.deco img { filter: drop-shadow(0 8px 16px rgba(70, 18, 32, .3)); }
.deco--tr img { transform: rotate(180deg); }
.deco--tl2 img { transform: rotate(180deg) scaleX(-1); }
/* text on the plaster: a little more weight and shadow for legibility */
.body-text, .person-parents, .chapters p, .quote { text-shadow: 0 1px 2px rgba(70, 18, 32, .25); }
.map iframe { filter: saturate(.85) sepia(.1); }
.bank-card { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 236, 222, .25), transparent 50%), linear-gradient(135deg, #7d3445, #5e2132 60%, #74303f); box-shadow: 0 24px 50px rgba(60, 14, 28, .45), 0 0 0 1px rgba(255, 236, 222, .45); }
/* keep the arch outline visible after the curtain reveal (the reveal's clip would cut the outline) */
.page.is-active .cover-arch[data-a="curtain"] { animation-name: aCurtainArch; }
@keyframes aCurtainArch { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(-30px -30px -30px -30px); } }
@media (max-height: 620px) {
  .cover-body, .page--cover.has-guest .cover-body { --arch-w: min(60vw, 250px, 30svh); }
  .page--cover .monogram { font-size: 15px; }
}

/* side flowers */
.page-scroll { z-index: 1; }
.fdeco { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transform: rotate(var(--r)) scale(.4); transform-origin: center; }
.fdeco img { width: 100%; filter: drop-shadow(0 8px 14px rgba(70, 18, 32, .3)); animation: fsway var(--sw) ease-in-out var(--sd) infinite alternate; transform-origin: 50% 90%; }
.page.is-active .fdeco { animation: fbloom 1.6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--base) + var(--fd)); }
@keyframes fbloom { from { opacity: 0; transform: rotate(calc(var(--r) - 25deg)) scale(.35); filter: blur(4px); } to { opacity: 1; transform: rotate(var(--r)) scale(1); filter: none; } }
@keyframes fsway { from { rotate: -3.5deg; translate: 0 0; } to { rotate: 3.5deg; translate: 0 -4px; } }
.page.leave-next .fdeco, .page.leave-prev .fdeco { opacity: 1; transform: rotate(var(--r)) scale(1); }
@media (min-width: 760px) { .fdeco { width: calc(var(--w, 1) * 1.3); } }
@media (prefers-reduced-motion: reduce) { .fdeco { opacity: 1; transform: rotate(var(--r)); } }
@media (max-height: 700px) { .fdeco { scale: .72; transform-origin: 0 100%; } .fdeco[style*="right:"] { transform-origin: 100% 100%; } }
/* one venue: a single centred card */
.vcards:has(> .vcard:only-child) { grid-template-columns: minmax(0, 280px); justify-content: center; }
.vcard:only-child .vc-label { text-align: center; }
.vcard:only-child .vc-events li { justify-content: center; grid-template-columns: 22px auto; }

/* satellite location photo (no street labels) */
.map-sat { position: absolute; inset: 0; display: block; overflow: hidden; }
.map-sat img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.page.is-active .map-sat img { transform: scale(1.12); }
.map-sat::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(60, 14, 28, .55); pointer-events: none; }
.sat-pin { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -92%; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); animation: pinDrop .9s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--base) + 900ms); }
.sat-pin svg { width: 100%; height: 100%; fill: #b84a5f; stroke: #fff6f2; stroke-width: 1.3; }
.sat-pin svg circle { fill: #fff6f2; stroke: none; }
@keyframes pinDrop { from { opacity: 0; translate: -50% -260%; } to { opacity: 1; translate: -50% -92%; } }
.map-sat::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid rgba(255, 236, 222, .9); z-index: 1; animation: ping 2.4s ease-out infinite; }
.sat-label { position: absolute; left: 50%; top: calc(50% + 14px); translate: -50% 0; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; letter-spacing: .08em; color: #fff; background: rgba(110, 34, 52, .78); white-space: nowrap; }
.sat-label:empty { display: none; }
.sat-credit { position: absolute; right: 8px; bottom: 6px; z-index: 2; font-size: 9px; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }