/* ==========================================================================
   ULEMANA — LUXURY WEDDING INVITATION DESIGN SYSTEM
   Theme: Royal Champagne & Olive Ivory Editorial
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colors */
  --bg-ivory: #faf7f0;
  --bg-surface: #fdfbf7;
  --bg-card: rgba(255, 253, 248, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.98);

  --ink-primary: #28261e;
  --ink-secondary: #575243;
  --ink-muted: #857e6c;

  --gold-primary: #b8934a;
  --gold-dark: #8c6a28;
  --gold-light: #dfc585;
  --gold-shimmer: linear-gradient(135deg, #e8d39c 0%, #caa156 50%, #9c752c 100%);
  --gold-glow: rgba(184, 147, 74, 0.28);
  --gold-hairline: rgba(184, 147, 74, 0.35);

  --olive-deep: #252a1c;
  --olive-muted: #4e553c;

  /* Typography */
  --font-serif-display: "Rosemartin", Georgia, serif;
  --font-serif-body: "Rosemartin", Georgia, serif;
  --font-script: "Great Vibes", "Brush Script MT", cursive;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Elevation */
  --shadow-sm: 0 4px 12px rgba(40, 38, 30, 0.06);
  --shadow-md: 0 10px 28px rgba(40, 38, 30, 0.1);
  --shadow-lg: 0 20px 48px rgba(35, 30, 20, 0.16);
  --shadow-gold: 0 8px 24px rgba(184, 147, 74, 0.25);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   RESET & GLOBAL BASICS
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background-color: var(--bg-ivory);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background-color: var(--bg-ivory);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.7) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 50%, rgba(223, 197, 133, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(78, 85, 60, 0.05) 0%, transparent 50%);
  color: var(--ink-primary);
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   PETALS CANVAS (Atmospheric particle background)
   -------------------------------------------------------------------------- */
.petals-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   FLOATING BGM VINYL DISC BUTTON
   -------------------------------------------------------------------------- */
.bgm-disc-btn {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(253, 251, 247, 0.9);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.bgm-disc-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.bgm-disc-btn:active {
  transform: scale(0.95);
}

.vinyl-record {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, #2d2a23 0%, #171612 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease;
}

.vinyl-center {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-shimmer);
  color: #171612;
}

.bgm-disc-btn.is-playing .vinyl-record {
  animation: spinVinyl 6s linear infinite;
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sound-wave {
  position: absolute;
  bottom: 4px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 8px;
}

.sound-wave span {
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--gold-primary);
  opacity: 0.3;
  transition: height 0.2s ease, opacity 0.2s ease;
}

.bgm-disc-btn.is-playing .sound-wave span {
  opacity: 1;
  animation: waveAnim 1s ease-in-out infinite alternate;
}

.bgm-disc-btn.is-playing .sound-wave span:nth-child(1) { animation-delay: 0s; }
.bgm-disc-btn.is-playing .sound-wave span:nth-child(2) { animation-delay: 0.25s; }
.bgm-disc-btn.is-playing .sound-wave span:nth-child(3) { animation-delay: 0.5s; }
.bgm-disc-btn.is-playing .sound-wave span:nth-child(4) { animation-delay: 0.75s; }

@keyframes waveAnim {
  0% { height: 2px; }
  100% { height: 9px; }
}

/* --------------------------------------------------------------------------
   COVER SCREEN (The Envelope Experience)
   -------------------------------------------------------------------------- */
.cover-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.7) 0%, transparent 68%),
    radial-gradient(circle at 10% 20%, rgba(212, 185, 116, 0.15) 0%, transparent 45%),
    #ede6d6;
  overflow-y: auto;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.85s;
}

.cover-screen.is-opened {
  opacity: 0;
  transform: scale(1.04) translateY(-30px);
  pointer-events: none;
  visibility: hidden;
}

.envelope-showcase {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  margin: auto;
  text-align: center;
}

.cover-header {
  margin-bottom: 20px;
}

.cover-eyebrow {
  margin: 0 0 6px;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.cover-title {
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(38px, 10vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.cover-title .ampersand {
  display: inline-block;
  color: var(--gold-primary);
  font-family: var(--font-script);
  font-size: 0.95em;
  font-style: normal;
  padding: 0 4px;
}

.cover-date-pill {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 16px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink-secondary);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 3D Envelope Presentation */
.envelope-card-box {
  position: relative;
  width: 250px;
  max-width: 70vw;
  aspect-ratio: 941 / 1420;
  margin: 0 auto 24px;
  perspective: 1200px;
}

.envelope-scene-3d {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 36px rgba(45, 38, 22, 0.28));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.envelope-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.env-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: opacity 0.5s ease;
}

.env-img--open {
  opacity: 0;
}

.cover-screen.is-opening .env-img--closed {
  opacity: 0;
}

.cover-screen.is-opening .env-img--open {
  opacity: 1;
}

/* Golden Wax Seal */
.wax-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8c878 0%, #aa8033 65%, #6d4e17 100%);
  box-shadow:
    0 4px 12px rgba(45, 30, 8, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.wax-seal-inner {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px dashed rgba(255, 245, 215, 0.65);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #c49942 0%, #875e1b 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.wax-initials {
  color: #fff6db;
  font-family: var(--font-serif-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cover-screen.is-opening .wax-seal {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 0;
}

/* Sliding Letter Slip on Opening */
.letter-slip {
  position: absolute;
  top: 15%;
  left: 8%;
  right: 8%;
  height: 70%;
  z-index: 4;
  border: 1px solid var(--gold-hairline);
  border-radius: 4px;
  background: #fbf7ee;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.cover-screen.is-opening .letter-slip {
  opacity: 1;
  transform: translateY(-50px);
}

.letter-slip-overline {
  margin: 0 0 4px;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.letter-slip-names {
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 18px;
}

.letter-slip-line {
  width: 32px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--gold-primary);
}

/* Guest Salutation Card */
.guest-salutation {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-sm);
}

.salutation-label {
  margin: 0 0 6px;
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.salutation-name {
  margin: 0 0 6px;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(22px, 5.5vw, 28px);
  font-weight: 600;
  line-height: 1.2;
}

.salutation-note {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 1.5;
}

/* Open Invitation Button */
.open-invitation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  background: var(--gold-shimmer);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md), 0 0 24px var(--gold-glow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulseGlow 2.8s infinite alternate;
}

@keyframes pulseGlow {
  0% { box-shadow: var(--shadow-md), 0 0 12px rgba(184, 147, 74, 0.3); }
  100% { box-shadow: var(--shadow-lg), 0 0 28px rgba(184, 147, 74, 0.65); transform: translateY(-2px); }
}

.open-invitation-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 32px var(--gold-glow);
}

.open-invitation-btn:active {
  transform: translateY(1px);
}

.btn-sparkle {
  font-size: 16px;
}

.btn-arrow {
  transition: transform 0.25s ease;
}

.open-invitation-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   MAIN INVITATION CONTAINER & COMMON SECTION STYLES
   -------------------------------------------------------------------------- */
.main-invitation {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 90px;
  background-color: var(--bg-surface);
  box-shadow: 0 0 50px rgba(40, 35, 25, 0.08);
}

.section {
  position: relative;
  padding: clamp(56px, 12vw, 96px) 20px;
  border-bottom: 1px solid rgba(184, 147, 74, 0.18);
}

.section-container {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.section-kicker {
  margin: 0 0 8px;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.section-heading {
  margin: 0 0 16px;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 400;
  line-height: 1.15;
}

.gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 32px;
  color: var(--gold-primary);
  font-size: 14px;
}

.gold-divider::before,
.gold-divider::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

/* --------------------------------------------------------------------------
   1. HERO INVITATION SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 40px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    linear-gradient(180deg, #f9f4e8 0%, var(--bg-surface) 100%);
}

.hero-crest {
  margin-bottom: 24px;
}

.crest-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.crest-ornament span {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.crest-circle {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold-hairline);
  border-radius: 50%;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-sm), inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.hero-subheading {
  margin: 0 0 14px;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(48px, 14vw, 84px);
  font-weight: 400;
  line-height: 0.95;
}

.hero-amp {
  color: var(--gold-primary);
  font-family: var(--font-script);
  font-size: 0.65em;
  margin: -10px 0;
}

.hero-date {
  margin: 28px 0 0;
  color: var(--ink-secondary);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-guest-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 36px;
  padding: 12px 28px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
}

.hero-guest-badge span {
  color: var(--ink-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-guest-badge strong {
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 18px;
  font-weight: 600;
}

.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  color: var(--ink-muted);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cue-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, var(--gold-primary), transparent);
  animation: scrollCue 2s infinite ease-in-out;
}

@keyframes scrollCue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------------------------
   2. AYAT & GREETING
   -------------------------------------------------------------------------- */
.arabic-basmalah {
  margin: 0 0 16px;
  color: var(--gold-dark);
  font-size: clamp(24px, 6vw, 32px);
  font-family: "Traditional Arabic", "Amiri", "Scheherazade New", serif;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.greeting-lead {
  max-width: 52ch;
  margin: 0 auto 28px;
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.8;
}

.holy-quote {
  position: relative;
  max-width: 54ch;
  margin: 0 auto;
  padding: 24px 28px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(17px, 4vw, 20px);
  font-style: italic;
  line-height: 1.65;
}

.holy-quote p {
  margin: 0 0 14px;
}

.quote-mark {
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 0;
  vertical-align: -12px;
}

.quote-cite {
  display: block;
  color: var(--gold-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. MEMPELAI (THE COUPLE)
   -------------------------------------------------------------------------- */
.couple-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}

.couple-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.couple-avatar-wrap {
  position: relative;
  width: min(100%, 200px);
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
}

.couple-avatar-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--gold-hairline);
  border-radius: 4px;
  background: #fbf8f0;
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.couple-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: contrast(0.96) brightness(1.02);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.couple-avatar-wrap:hover .couple-avatar-img {
  transform: scale(1.04);
}

.corner-flourish {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold-primary);
  border-style: solid;
  pointer-events: none;
}

.corner-tl {
  top: -4px;
  left: -4px;
  border-width: 2px 0 0 2px;
}

.corner-br {
  bottom: -4px;
  right: -4px;
  border-width: 0 2px 2px 0;
}

.couple-role {
  margin: 0 0 4px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.couple-fullname {
  margin: 0 0 8px;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 600;
  line-height: 1.1;
}

.couple-parents {
  max-width: 26ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.couple-emblem {
  display: grid;
  place-items: center;
}

.emblem-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-hairline);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--gold-primary);
  font-family: var(--font-script);
  font-size: 26px;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   4. COUNTDOWN TIMER & CALENDAR
   -------------------------------------------------------------------------- */
.countdown-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 36px;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 14px 10px 10px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}

.time-digit {
  color: var(--olive-deep);
  font-family: var(--font-serif-display);
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.time-unit {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.time-colon {
  color: var(--gold-primary);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.calendar-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--olive-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.calendar-cta-btn:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-md);
}

.calendar-cta-btn svg {
  color: var(--gold-dark);
}

.calendar-cta-btn--secondary {
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   5. RANGKAIAN ACARA (EVENTS)
   -------------------------------------------------------------------------- */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  text-align: left;
}

.event-card {
  padding: 28px 24px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-sm);
}

.event-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 147, 74, 0.2);
}

.event-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold-hairline);
  border-radius: 50%;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 600;
}

.event-title {
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 22px;
  font-weight: 600;
}

.event-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.event-detail-item svg {
  color: var(--gold-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.event-detail-text {
  margin: 0;
  color: var(--ink-primary);
  font-size: 14px;
  line-height: 1.5;
}

.event-venue-title {
  display: block;
  color: var(--olive-deep);
  font-size: 14px;
  font-weight: 600;
}

.event-address-text {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.maps-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.maps-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-full);
  background: var(--olive-deep);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.maps-action-btn:hover {
  transform: translateY(-2px);
  background: #333a27;
  box-shadow: var(--shadow-lg);
}

.maps-action-btn svg {
  color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   6. KISAH KAMI (STORY)
   -------------------------------------------------------------------------- */
.story-content-box {
  max-width: 52ch;
  margin: 0 auto;
  padding: 36px 32px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
}

.story-lead {
  margin: 0 0 24px;
  color: var(--ink-secondary);
  font-family: var(--font-serif-body);
  font-size: clamp(17px, 4vw, 20px);
  font-style: italic;
  line-height: 1.8;
}

.story-seal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border: 1px solid var(--gold-hairline);
  border-radius: 50%;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 16px;
  letter-spacing: 0.1em;
}

.story-signature {
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 26px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   7. GALERI KENANGAN
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 540px;
  margin: 0 auto;
}

.gallery-polaroid {
  margin: 0;
  padding: 10px 10px 24px;
  border: 1px solid rgba(184, 147, 74, 0.28);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.polaroid-tilt-left {
  transform: rotate(-3deg);
}

.polaroid-tilt-right {
  transform: rotate(3deg);
}

.gallery-polaroid:hover {
  transform: scale(1.05) rotate(0deg);
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

.polaroid-inner {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eee8d8;
}

.polaroid-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-polaroid:hover .polaroid-inner img {
  transform: scale(1.06);
}

.gallery-polaroid figcaption {
  margin-top: 10px;
  color: var(--ink-secondary);
  font-family: var(--font-serif-body);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. RSVP & BUKU TAMU (WISHES BOARD)
   -------------------------------------------------------------------------- */
.rsvp-intro {
  max-width: 48ch;
  margin: 0 auto 30px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.rsvp-card {
  max-width: 480px;
  margin: 0 auto 40px;
  padding: 32px 28px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-md);
  text-align: left;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--olive-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(184, 147, 74, 0.35);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink-primary);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea {
  min-height: 96px;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(184, 147, 74, 0.2);
}

/* Attendance Pills */
.attendance-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.attendance-pill {
  cursor: pointer;
}

.attendance-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid rgba(184, 147, 74, 0.35);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.attendance-pill input:checked + .pill-card {
  border-color: var(--olive-deep);
  background: var(--olive-deep);
  color: #ffffff;
}

.pill-icon {
  font-size: 14px;
}

.rsvp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gold-shimmer);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md), 0 4px 16px var(--gold-glow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rsvp-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 6px 20px var(--gold-glow);
}

.rsvp-submit-btn:active {
  transform: translateY(1px);
}

.form-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #3b5f25;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Wishes Board */
.wishes-board {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.wishes-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wishes-title {
  margin: 0;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 22px;
  font-weight: 600;
}

.wishes-count-pill {
  padding: 4px 12px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 600;
}

.wishes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) transparent;
}

.wishes-list::-webkit-scrollbar {
  width: 5px;
}

.wishes-list::-webkit-scrollbar-thumb {
  background: var(--gold-light);
  border-radius: 4px;
}

.wish-item-card {
  padding: 16px;
  border: 1px solid rgba(184, 147, 74, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  animation: fadeInWish 0.3s ease-out;
}

@keyframes fadeInWish {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wish-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.wish-item-author {
  color: var(--olive-deep);
  font-size: 14px;
  font-weight: 600;
}

.wish-item-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wish-item-badge--hadir {
  background: #e6f3dc;
  color: #3b5f25;
}

.wish-item-badge--tidak-hadir {
  background: #f0ece3;
  color: #7a705e;
}

.wish-item-text {
  margin: 0 0 8px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.wish-item-date {
  color: var(--ink-muted);
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   9. TANDA KASIH (DIGITAL GIFTS)
   -------------------------------------------------------------------------- */
.gift-intro {
  max-width: 48ch;
  margin: 0 auto 32px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.gift-cards-grid {
  display: grid;
  gap: 18px;
  max-width: 440px;
  margin: 0 auto;
}

.luxury-bank-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
    linear-gradient(135deg, #fdfbf7 0%, #f4edd9 100%);
  box-shadow: var(--shadow-md);
  text-align: left;
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bank-brand-title {
  color: var(--olive-deep);
  font-family: var(--font-serif-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.emv-chip {
  width: 36px;
  height: 26px;
  border: 1px solid rgba(184, 147, 74, 0.45);
  border-radius: 4px;
  background: linear-gradient(135deg, #eed89e, #cba250);
}

.account-digits {
  margin: 0 0 6px;
  color: var(--olive-deep);
  font-family: "Courier New", Courier, monospace;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cardholder-name {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.copy-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--olive-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.copy-pill-btn:hover {
  background: #faf7ee;
  border-color: var(--gold-primary);
}

.copy-pill-btn.is-copied {
  background: #eaf5df;
  border-color: #5b8e3e;
  color: #3b5f25;
}

.gift-physical-card {
  padding: 24px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.gift-physical-title {
  margin: 0 0 6px;
  color: var(--olive-deep);
  font-size: 16px;
  font-weight: 600;
}

.gift-physical-addr {
  margin: 0 0 16px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.footer-section {
  padding: 60px 20px 40px;
  text-align: center;
}

.footer-crest {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 20px;
  border: 1px solid var(--gold-hairline);
  border-radius: 50%;
  color: var(--gold-dark);
  font-family: var(--font-serif-display);
  font-size: 15px;
}

.footer-thankyou {
  max-width: 42ch;
  margin: 0 auto 20px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.footer-signature {
  margin: 0 0 8px;
  color: var(--olive-deep);
  font-family: var(--font-serif-body);
  font-size: 28px;
  font-weight: 400;
}

.footer-date {
  margin: 0;
  color: var(--gold-dark);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FLOATING BOTTOM NAVIGATION DOCK
   -------------------------------------------------------------------------- */
.bottom-dock {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(253, 251, 247, 0.92);
  box-shadow: var(--shadow-lg), 0 0 16px rgba(0, 0, 0, 0.08);
  animation: slideUpDock 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpDock {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 54px;
  padding: 6px 8px;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dock-item svg {
  color: var(--ink-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.dock-item:hover,
.dock-item.active {
  color: var(--olive-deep);
}

.dock-item:hover svg,
.dock-item.active svg {
  color: var(--gold-primary);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   TOAST POPUP
   -------------------------------------------------------------------------- */
.toast-popup {
  position: fixed;
  bottom: max(74px, calc(env(safe-area-inset-bottom) + 64px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  max-width: 90vw;
  padding: 10px 24px;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-full);
  background: rgba(37, 42, 28, 0.94);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  animation: toastFadeIn 0.25s ease-out;
  pointer-events: none;
}

@keyframes toastFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --------------------------------------------------------------------------
   LIGHTBOX DIALOG
   -------------------------------------------------------------------------- */
.lightbox-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox-dialog::backdrop {
  background: rgba(18, 16, 12, 0.85);
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

.lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN (TABLET & DESKTOP)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .couple-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .couple-emblem {
    display: none;
  }
  .events-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .main-invitation {
    margin: 40px auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-hairline);
    overflow: hidden;
  }
  .time-box {
    min-width: 80px;
    padding: 16px 14px 12px;
  }
  .time-digit {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Cover: 4 tahap (amplop tutup -> amplop terbuka -> kartu ditarik -> fullscreen)
   Everything inside .opening-composition is authored at 808 x 580 px (the envelope body)
   and scaled as one piece by the scroll timeline.
   ========================================================================== */
:root {
  --stage-bg: #272621;
  --page-paper: radial-gradient(ellipse at 50% 20%, rgb(255 255 245 / 35%), rgb(255 255 245 / 0) 70%), linear-gradient(rgb(246 246 224 / 80%), rgb(246 246 224 / 80%)), url("assets/tex-paper.webp") 0 0 / 360px auto;
  --olive: #53532a;
  --cream: #f4f4dc;
  --gold: #b9893a;
  --foil: linear-gradient(135deg, #f1dc9d 0%, #c79d49 40%, #8f6a26 66%, #e3c577 100%);
}
html { scroll-behavior: auto; }
.opening-journey { position: relative; height: 600svh; min-height: 3300px; background: var(--stage-bg); }
.opening-stage { position: sticky; top: 0; height: var(--vh, 100svh); min-height: 520px; overflow: hidden; isolation: isolate; background: var(--stage-bg); --caption-opacity: 1; --gold-line: 0; }
.opening-composition {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 808px;
  height: 580px;
  margin: -290px 0 0 -404px;
  transform-origin: 404px 290px;
}
.opening-composition > *, .t2-back > * { position: absolute; }
.op-shadow, .op-interior, .op-front { transform: translateY(var(--esh, 0px)); }
.op-shadow { inset: 0; z-index: 0; box-shadow: 0 40px 80px rgb(0 0 0 / 55%), 0 0 0 1px rgb(0 0 0 / 40%); }
.op-interior {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(8 10 3 / 10%), rgb(8 10 3 / 22%) 40%, rgb(8 10 3 / 30%) 100%),
    url("assets/lining.webp") 30px -440px / 748px 689px no-repeat,
    #2a3a14;
  box-shadow: inset 0 0 40px rgb(8 10 3 / 35%);
}
.op-flap { left: 0; top: 0; width: 808px; height: 470px; z-index: 9; transform-origin: 50% 0; transform-style: preserve-3d; }
.op-flap-face, .op-flap-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.op-flap-back { transform: rotateX(180deg); }
.op-flap svg { display: block; overflow: visible; }
.op-flap-face svg { filter: drop-shadow(0 4px 6px rgb(0 0 0 / 40%)); }
.op-front { inset: 0; z-index: 5; filter: drop-shadow(0 -3px 5px rgb(0 0 0 / 55%)) drop-shadow(0 -10px 16px rgb(0 0 0 / 30%)); }
.op-front svg { display: block; overflow: visible; }
.op-front-gold { opacity: var(--gold-line); }
.op-btn { filter: none; }
.op-card-window { inset: 0; z-index: 4; pointer-events: none; }

/* Card: header (scalloped) + lower panel + cover that swings up around the hinge */
.opening-card { position: absolute; left: 0; top: 0; width: 808px; height: calc(64px + var(--ph, 580px)); transform-origin: 0 0; color: #b4893a; }
.oc-header { position: absolute; left: 0; top: 0; display: block; filter: drop-shadow(0 -2px 3px rgb(0 0 0 / 25%)); }
.oc-panel {
  position: absolute;
  left: 0;
  top: 64px;
  width: 808px;
  height: var(--ph, 580px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(255 255 245 / 55%), rgb(255 255 245 / 0) 70%),
    linear-gradient(rgb(246 246 224 / 80%), rgb(246 246 224 / 80%)),
    url("assets/tex-paper.webp") 0 0 / 360px auto;
}
.oc-panel:not(.oc-front-face) { box-shadow: none; }
.oc-cover { position: absolute; left: 0; top: 64px; width: 808px; height: var(--ph, 580px); transform-origin: 50% 0; transform-style: preserve-3d; }
.oc-cover .oc-panel { top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.oc-back-face { transform: rotateX(180deg); }
.oc-front-face { box-shadow: none; }
.oc-shade { position: absolute; inset: 0; background: #1b1607; pointer-events: none; opacity: 0; }
.oc-front-face .oc-shade { opacity: var(--sf, 0); }
.oc-back-face .oc-shade { opacity: var(--sb, 0); }
.oc-base::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; background: linear-gradient(rgb(60 42 8 / 28%), rgb(60 42 8 / 0)); z-index: 3; }
.oc-frame { position: absolute; inset: 26px; border: 2px solid #c19a4e; }
.oc-frame::before { content: ""; position: absolute; inset: 6px; border: 2px dotted rgb(193 154 78 / 75%); }
.oc-c { position: absolute; width: 48px; height: 48px; }
.oc-c svg { width: 100%; height: 100%; display: block; }
.oc-c-tl { top: -10px; left: -10px; }
.oc-c-tr { top: -10px; right: -10px; transform: scaleX(-1); }
.oc-c-bl { bottom: -10px; left: -10px; transform: scaleY(-1); }
.oc-c-br { bottom: -10px; right: -10px; transform: scale(-1); }
.oc-shield-wrap { position: absolute; left: 50%; filter: drop-shadow(0 1px 0 rgb(255 250 225 / 80%)); }
.oc-shield-wrap .oc-shield { display: block; width: 100%; height: auto; }
.oc-shield-mono { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-family: "Great Vibes", cursive; line-height: 1; white-space: nowrap; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; padding: 0 .08em; }
.oc-back-face .oc-shield-wrap { top: 50%; width: 170px; transform: translate(-50%, -52%); }
.oc-back-face .oc-shield-mono { font-size: 66px; }
.oc-vert { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: center; align-items: baseline; gap: 22px; transform: translateY(-50%); }
.oc-vert span { font-family: "Rosemartin", serif; font-size: 44px; font-weight: 700; letter-spacing: .18em; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgb(255 248 224 / 85%)); }
.oc-back-face .oc-frame, .oc-base .oc-frame { color: #b4893a; }
.oc-amp { position: absolute; left: 50%; top: calc(var(--ph, 580px) * .43); transform: translateX(-50%); font-family: "Great Vibes", cursive; font-size: 54px; line-height: 1; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; }
.oc-garland { position: absolute; left: 50%; top: calc(var(--ph, 580px) * .03); width: 330px; transform: translateX(-50%); }
.oc-lab { display: block; font-family: "Rosemartin", serif; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: #c2a15f; text-shadow: 0 1px 0 rgb(255 248 224 / 85%); }
.oc-side, .oc-name { position: absolute; font-family: "Rosemartin", serif; text-shadow: 0 1px 0 rgb(255 248 224 / 90%), 0 -1px 0 rgb(110 76 20 / 25%); }
.oc-side strong, .oc-name strong { display: block; font-weight: 700; color: #b4893a; line-height: 1.25; }
.oc-side { top: calc(var(--ph, 580px) * .11); width: 186px; }
.oc-side strong { font-size: 19px; margin-top: 6px; }
.oc-side-l { left: 46px; text-align: center; }
.oc-side-r { right: 46px; text-align: center; }
.oc-para { position: absolute; left: 50%; top: calc(var(--ph, 580px) * .165); width: 296px; margin: 0; transform: translateX(-50%); font-family: "Rosemartin", serif; font-size: 17px; font-weight: 600; line-height: 1.42; text-align: center; color: #b99350; text-shadow: 0 1px 0 rgb(255 248 224 / 90%); }
.oc-name { top: calc(var(--ph, 580px) * .46); width: 190px; text-align: center; }
.oc-name strong { font-size: 40px; margin-top: 4px; font-family: "Great Vibes", cursive; font-weight: 400; }
.oc-name-l { left: 44px; }
.oc-name-r { right: 44px; }
.oc-when { position: absolute; left: 0; right: 0; top: calc(var(--ph, 580px) * .65); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font-family: "Rosemartin", serif; text-shadow: 0 1px 0 rgb(255 248 224 / 90%); }
.oc-when strong { font-size: 26px; font-weight: 700; color: #b4893a; }
.oc-when span { font-size: 19px; font-weight: 600; color: #b99350; }
.oc-when em { font-size: 17px; font-style: normal; font-weight: 500; color: #b99350; }
.oc-guest { position: absolute; left: 0; right: 0; bottom: calc(var(--ph, 580px) * .075); margin: 0; text-align: center; font-family: "Rosemartin", serif; font-size: 16px; color: #a88a52; }
.oc-guest strong { margin-left: 4px; font-size: 18px; color: #8d6b27; }
.opening-caption { display: none; position: absolute; z-index: 9; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); left: 16px; color: #d8d2b0; text-align: center; opacity: var(--caption-opacity); pointer-events: none; }
.opening-caption-title { margin: 0 0 5px; font-family: var(--font-serif-display); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.opening-caption-hint { margin: 0; font-family: var(--font-serif-body); font-size: 14px; opacity: .8; }

/* ==========================================================================
   Page 1: scrapbook collage gallery
   ========================================================================== */
.main-invitation { margin-top: 0; background: var(--page-paper); }
.collage-page { padding: clamp(28px, 7vw, 72px) clamp(10px, 4vw, 40px) clamp(40px, 9vw, 90px); background: transparent; }
.collage { position: relative; width: min(100%, 680px); margin: 0 auto; aspect-ratio: 1222 / 1470; font-size: min(1.45vw, 9.4px); }
.cl {
  position: absolute;
  margin: 0;
  opacity: 0;
  transform: translateY(4%) rotate(calc(var(--r, 0deg) + 3deg)) scale(.97);
  transition: opacity .9s ease var(--d, 0ms), transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms);
}
.cl.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.cl-photo { cursor: zoom-in; }
.cl-photo::after { content: ""; position: absolute; inset: 8px; z-index: -1; box-shadow: 0 .5em .9em rgb(70 50 20 / 32%), 0 .1em .25em rgb(70 50 20 / 25%); }
.cl-frame { position: absolute; inset: 0; border: 14px solid transparent; border-image: url("assets/deckle.webp") 34 fill / 14px stretch; }
.cl-photo img { position: absolute; inset: var(--pad, 5.5% 4.5%); width: calc(100% - 2 * 4.5%); height: calc(100% - 11%); object-fit: cover; object-position: 50% 36%; filter: sepia(.16) saturate(.9) contrast(.97) brightness(1.02); box-shadow: inset 0 0 1.2em rgb(60 40 10 / 28%); }
.cl-p-a { left: 6.4%; top: 7.1%; width: 43.7%; height: 25.9%; z-index: 3; --pad: 9% 7%; }
.cl-p-a img { inset: 10% 6.5% 12% 6.5%; width: 87%; height: 78%; }
.cl-p-b { left: 44.4%; top: 3.3%; width: 51.7%; height: 32.1%; z-index: 2; }
.cl-p-c { left: 55.8%; top: 25.3%; width: 36.5%; height: 19.6%; z-index: 4; }
.cl-p-g { left: 7.8%; top: 74.5%; width: 40.3%; height: 20.1%; z-index: 4; }
.cl-p-f { left: 41.9%; top: 62.9%; width: 37.3%; height: 19.4%; z-index: 6; }
.cl-hand { position: absolute; left: 8%; top: 1.5%; color: #3b3326; font-family: var(--font-script); font-size: 2.6em; line-height: 1; opacity: .85; transform: rotate(-1deg); }
.cl-paper { box-shadow: 0 .35em .8em rgb(70 50 20 / 22%); z-index: 1; }
.cl-paper-a { left: 5.3%; top: 35.9%; width: 42.6%; height: 49.9%; }
.cl-paper-b { left: 47.9%; top: 41.2%; width: 48.5%; height: 54.4%; z-index: 0; }
.cl-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8a7a62;
  background:
    linear-gradient(90deg, transparent 49.6%, rgb(120 100 70 / 14%) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 33%, rgb(120 100 70 / 12%) 33.3%, transparent 34%, transparent 66%, rgb(120 100 70 / 12%) 66.4%, transparent 67%),
    linear-gradient(135deg, rgb(255 255 255 / 55%), rgb(0 0 0 / 6%)),
    #eceae4 url("assets/tex-paper.webp") 0 0 / 240px auto;
  background-blend-mode: normal, normal, normal, multiply;
}
.cl-sheet-top, .cl-sheet-bottom { margin: 0; font-family: var(--font-serif-display); font-size: 1.75em; letter-spacing: .14em; text-transform: uppercase; color: #9a8466; }
.cl-sheet-bottom { margin-top: 1.6em; }
.cl-crest { display: grid; place-items: center; width: 14em; height: 14em; margin: 2em 0; border-radius: 50%; border: 2px solid #c0a05a; box-shadow: 0 0 0 .8em #eceae4, 0 0 0 calc(.8em + 2px) rgb(192 160 90 / 55%); }
.cl-crest span { font-family: var(--font-script); font-size: 7em; line-height: 1; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; padding: 0 .08em; }
.cl-sheet-names { margin: 0; font-family: var(--font-serif-body); font-size: 3.4em; color: #4b4a3a; }
.cl-sheet-names em { color: #b08a42; }
.cl-sheet-b { align-items: stretch; padding: 12% 9% 8% 12%; justify-content: flex-start; text-align: left; color: #5a5a50; }
.cl-cal-month { margin: 1em 0 .6em; font-family: var(--font-serif-body); font-size: 3.6em; font-weight: 600; }
.cl-cal-month b { color: #b08a42; font-weight: 600; }
.cl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .9em .2em; font-family: var(--font-serif-body); font-size: 2.3em; text-align: center; }
.cl-cal span:nth-child(-n+7) { color: #b08a42; font-family: var(--font-serif-display); font-size: .6em; letter-spacing: .1em; }
.cl-cal .cl-day { color: #fff; background: #4e553c; border-radius: 50%; box-shadow: 0 0 0 .22em #4e553c; font-weight: 700; }
.cl-sheet-date { margin: auto 0 0; font-family: var(--font-serif-body); font-size: 2.6em; font-style: italic; color: #7d6a42; }
.cl-box {
  left: 39%;
  top: 27.3%;
  width: 21.7%;
  height: 32.2%;
  z-index: 5;
  border-radius: 1.2em;
  background: linear-gradient(120deg, rgb(255 255 255 / 12%), rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 35%)), #3d4630 url("assets/tex-leather.webp") 0 0 / 70% auto;
  box-shadow: inset 0 0 0 .35em rgb(0 0 0 / 14%), inset 0 .15em .3em rgb(255 255 255 / 18%), 0 1.2em 1.6em -.4em rgb(30 22 6 / 55%), 0 .2em .5em rgb(30 22 6 / 40%);
}
.cl-box-lid { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; }
.cl-box-lid::before { content: ""; position: absolute; inset: 1.6em; border: 1px solid rgb(215 182 106 / 50%); }
.cl-box-mono { font-family: var(--font-script); font-size: 9em; line-height: 1; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 .06em .04em rgb(0 0 0 / 55%)); padding: 0 .1em; }
.cl-lily { left: 13%; top: 26.7%; width: 15.5%; height: auto; z-index: 7; }

/* ==========================================================================
   Page 2: event details on stacked letterpress cards
   ========================================================================== */
.events-page { padding: clamp(36px, 9vw, 84px) 18px clamp(44px, 10vw, 96px); background: radial-gradient(ellipse at 50% 30%, #5a4230 0%, #35261a 70%, #271b11 100%); }
.ev-stack { position: relative; max-width: 500px; margin: 0 auto; }
.ev-sheet { background: linear-gradient(rgb(245 241 222 / 80%), rgb(245 241 222 / 80%)), url("assets/tex-paper.webp") 0 0 / 280px auto; }
.ev-sheet-back { position: absolute; left: 12%; right: -7%; top: 8%; bottom: -5.5%; background: linear-gradient(rgb(236 231 204 / 85%), rgb(236 231 204 / 85%)), url("assets/tex-paper.webp") 0 0 / 280px auto; box-shadow: 0 1em 2em rgb(0 0 0 / 35%); }
.ev-sheet-front { position: relative; padding: clamp(28px, 9vw, 52px) clamp(18px, 6vw, 38px) clamp(86px, 24vw, 120px); box-shadow: 0 1.2em 2.4em rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(255 255 255 / 50%); }
.ev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 5vw, 36px); }
.ev-col { text-align: left; }
.ev-title, .ev-date, .ev-time, .ev-place, .ev-map { color: #ad8537; text-shadow: 0 1px 0 rgb(255 247 214 / 95%), 0 -1px 0 rgb(110 76 20 / 28%); }
.ev-title { margin: 0 0 .9em; font-family: var(--font-serif-body); font-size: clamp(28px, 8.4vw, 42px); font-weight: 700; line-height: 1.02; }
.ev-date { margin: 0 0 1.1em; font-family: var(--font-serif-body); font-size: clamp(13px, 3.6vw, 17px); font-weight: 700; line-height: 1.3; }
.ev-time { margin: 0 0 .7em; font-family: var(--font-serif-body); font-size: clamp(14px, 4vw, 19px); font-weight: 700; }
.ev-place { display: flex; flex-direction: column; gap: .15em; margin: 0 0 1.2em; font-family: var(--font-serif-body); font-size: clamp(13px, 3.6vw, 17px); line-height: 1.35; }
.ev-place strong { font-weight: 700; }
.ev-place span { font-weight: 500; opacity: .9; }
.ev-rule { display: block; width: 6.5em; height: 1px; background: #c3a45c; box-shadow: 0 1px 0 rgb(255 247 214 / 90%); }
.ev-flower { position: absolute; left: clamp(20px, 8vw, 50px); bottom: clamp(26px, 8vw, 40px); width: clamp(34px, 9vw, 48px); aspect-ratio: 1; filter: drop-shadow(0 .12em .15em rgb(60 40 8 / 45%)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fff0b4'/%3E%3Cstop offset='.5' stop-color='%23d4a840'/%3E%3Cstop offset='1' stop-color='%238c6618'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='24' cy='11' r='9.5'/%3E%3Ccircle cx='37' cy='24' r='9.5'/%3E%3Ccircle cx='24' cy='37' r='9.5'/%3E%3Ccircle cx='11' cy='24' r='9.5'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='4.6' fill='%23f4dc92'/%3E%3C/svg%3E") center / contain no-repeat; }
.ev-map { position: absolute; right: clamp(18px, 6vw, 38px); bottom: clamp(20px, 6vw, 34px); padding-bottom: 2px; border-bottom: 1px solid #c3a45c; font-family: var(--font-serif-body); font-size: clamp(13px, 3.6vw, 16px); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }

/* Reservasi & kado sit on the same warm paper as the collage */
.rsvp-section, .gift-section { background: transparent; }
.rsvp-section .section-heading, .gift-section .section-heading { margin-bottom: 28px; }

.petals-canvas { display: none; }
@media (max-width: 600px) {
  .petals-canvas { opacity: .2; }
  .bgm-disc-btn { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-journey { height: 300svh; min-height: 1500px; }
}

/* The invitation is one continuous sheet: no boxed or rounded main column */
.main-invitation { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
@media (min-width: 768px) {
  .main-invitation { margin: 0; border: 0; border-radius: 0; overflow: visible; }
}

/* Persistent page frame: olive rim + gold lines. It first hugs the revealed gallery page, then follows it while zooming
   and ends up on the screen edges, where it stays on every page. */
:root { --fi: 36px; }
.page-frame {
  position: fixed;
  inset: var(--ft, 0px) var(--fr, 0px) var(--fb, 0px) var(--fl, 0px);
  z-index: 40;
  pointer-events: none;
  opacity: var(--frame, 0);
  box-shadow:
    inset 0 0 0 calc(13px * var(--u, 1)) #f4f4dc,
    inset 0 0 0 calc(26px * var(--u, 1)) #f4f4dc,
    inset 0 0 0 calc(28px * var(--u, 1)) #c19a4e;
}
.page-frame::before { content: ""; position: absolute; inset: calc(34px * var(--u, 1)); border: 2px dotted rgb(193 154 78 / 75%); }
.pf-c { position: absolute; width: calc(48px * var(--u, 1)); height: calc(48px * var(--u, 1)); }
.pf-c svg { display: block; width: 100%; height: 100%; }
.pf-tl { top: calc(18px * var(--u, 1)); left: calc(18px * var(--u, 1)); }
.pf-tr { top: calc(18px * var(--u, 1)); right: calc(18px * var(--u, 1)); transform: scaleX(-1); }
.pf-bl { bottom: calc(18px * var(--u, 1)); left: calc(18px * var(--u, 1)); transform: scaleY(-1); }
.pf-br { bottom: calc(18px * var(--u, 1)); right: calc(18px * var(--u, 1)); transform: scale(-1); }
.main-invitation > section, .main-invitation > footer { padding-left: calc(var(--fi) + 8px); padding-right: calc(var(--fi) + 8px); }
.main-invitation > section:last-of-type, .main-invitation > footer { padding-bottom: calc(var(--fi) + 56px); }

/* Second fold: the lower panel is hinged at its bottom edge; the centre line lifts toward the viewer and flips down, uncovering the next page */
.oc-next { z-index: 0; background: var(--page-paper); }
.np-cap { position: absolute; left: 0; right: 0; text-align: center; font-family: "Rosemartin", serif; color: #b4893a; text-shadow: 0 1px 0 rgb(255 248 224 / 90%); pointer-events: none; }
.np-cap-top { top: 96px; }
.np-cap-bottom { bottom: 96px; display: flex; flex-direction: column; gap: 6px; }
.np-eyebrow { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; letter-spacing: .34em; text-transform: uppercase; color: #a88642; }
.np-names { display: block; margin-top: 4px; font-family: "Great Vibes", cursive; font-weight: 400; font-size: 76px; line-height: 1.1; }
.np-names em { font-style: normal; font-size: .7em; color: #c9a85b; }
.np-date { font-size: 28px; font-weight: 700; letter-spacing: .04em; }
.np-venue { font-size: 22px; font-weight: 500; opacity: .85; }
.oc-lower-persp { position: absolute; left: 0; top: 64px; width: 808px; height: var(--ph, 580px); z-index: 1; perspective: 2000px; perspective-origin: 50% 0; }
.oc-lower { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
.oc-cover { z-index: 2; }
.oc-lower .oc-panel { top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.oc-lower-back { transform: rotateX(180deg); }
.oc-shade-lower { opacity: var(--sl, 0); }
.oc-lower-back .oc-shade { opacity: var(--sl2, .5); }

/* The gallery lives behind the V·E page: it is revealed when the lower panel flips away */
.oc-next { overflow: hidden; }
.oc-next .collage { position: absolute; left: 50%; top: 50%; width: 680px; margin: 0; font-size: 9.4px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(.6); }
.oc-next .collage .cl { opacity: 1; transition: none; }
.oc-next .collage .cl { transform: rotate(var(--r, 0deg)); }
.oc-next .cl-photo { cursor: default; }

/* Smoothness: promote the moving layers, shade the flap with a cheap opacity overlay instead of per-frame filters */
.op-shade { position: absolute; inset: 0; z-index: 2; background: #0c0d05; pointer-events: none; opacity: 0; }
.op-shade-face { opacity: var(--fs, 0); }
.op-shade-back { opacity: var(--bs, 0); }

/* Performance: no runtime filters inside the scaled cover (they were re-rasterised on every camera move and froze scrolling) */
.op-flap-face svg, .op-front, .oc-header, .oc-shield-wrap, .oc-vert span, .oc-mono span, .oc-shield-mono,
.op-monogram, .cl-box-mono, .cl-crest span, .cl-photo img, .oc-face, .oc-panel { filter: none; }
.op-shadow { box-shadow: 0 22px 34px rgb(0 0 0 / 42%), 0 0 0 1px rgb(0 0 0 / 40%); }

/* Envelope paper texture as plain CSS backgrounds clipped to each shape (SVG pattern fills were far too slow to repaint) */
.op-tex { position: absolute; inset: 0; background: url("assets/tex-olive-soft.webp?v=4") 0 0 / 512px 512px; }
.op-tex-front { background: linear-gradient(rgb(255 255 255 / 5%), rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 16%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 512px 512px; }
.op-liner { position: absolute; inset: 0; background: url("assets/lining.webp") 30px 30px / 748px 689px no-repeat; }
.op-flap-face, .op-flap-back { overflow: visible; }
.op-flap svg { position: absolute; left: 0; top: 0; }
.op-front svg { position: absolute; left: 0; top: 0; }


/* The page scrolls inside #scroller (not the window): fixed/sticky layers stay put on mobile viewports that mis-paint them during window scroll */
html, body { height: 100%; overflow: hidden; }
.scroller { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-behavior: auto; }

.oc-header { display: none; }

.op-lining-shield { position: absolute; left: 340px; top: 200px; width: 128px; height: 145px; }
.op-lining-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.op-lining-shield img { position: absolute; left: 50%; top: 53%; width: 76px; height: 76px; transform: translate(-50%, -50%); object-fit: contain; filter: brightness(1.55) sepia(.4) saturate(1.5); }

/* Closed envelope: couple initials on the flap, addressee on the pocket */
.op-names { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.op-name { position: absolute; font-family: "Great Vibes", cursive; font-size: 240px; line-height: 1; white-space: nowrap; left: 0; right: 0; text-align: center; padding: 0 .1em; color: #c4a15a; text-shadow: -1px -2px 1px rgb(20 16 2 / 70%), 1px 2px 1px rgb(255 238 170 / 28%); }
.op-name-1 { top: -8px; transform: translateX(-40px); }
.op-name-2 { top: 156px; transform: translateX(-6px); }
.op-for { z-index: 3; position: absolute; left: 120px; right: 120px; top: 458px; text-align: center; color: #d8c48a; }
.op-for-label { display: block; font-family: "Rosemartin", serif; font-size: 22px; letter-spacing: .05em; opacity: .95; }
.op-for-name { display: block; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid rgb(210 176 104 / 70%); font-family: "Rosemartin", serif; font-weight: 600; font-size: 34px; color: #ecd9a0; }

.op-flap .op-seal3d { position: absolute; left: 334px; top: 284px; width: 140px; height: 150px; transform-style: preserve-3d; transform: translateZ(1px); pointer-events: none; }
.op-flap .op-seal3d .op-s3-layer { position: absolute; left: 0; top: 0; }
.op-flap .op-seal3d .op-s3-rear { transform: translateZ(2px) rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.op-tab { display: none; }
.op-title, .op-small, .op-mid { position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; }
.op-title { top: 22px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 300; font-size: 118px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.op-title i { font-style: normal; }
.op-small { top: 160px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 300; font-size: 12.5px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.op-mid { top: 234px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; font-size: 17px; line-height: 1.32; letter-spacing: .08em; text-transform: uppercase; }
.op-tab { position: absolute; left: 384px; top: 332px; width: 40px; height: 108px; background: #e6dfc0; box-shadow: 0 2px 4px rgb(0 0 0 / 35%); display: flex; align-items: center; justify-content: center; }
.op-tab span { writing-mode: vertical-rl; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #4a4a22; }

/* ===== Noir adaptation: hairline frames, light tracked caps, big script accents, pressed (deboss) type ===== */
:root { --noir-sans: "Plus Jakarta Sans", system-ui, sans-serif; --noir-gold: #a88642; --noir-ink: #3a3a1d; }
.rsvp-section .section-heading, .gift-section .section-heading { margin: 0 0 22px; text-align: center; font-family: "Great Vibes", cursive; font-size: clamp(54px, 17vw, 76px); font-weight: 400; line-height: 1; color: var(--noir-gold); text-shadow: 0 1px 0 rgb(255 248 220 / 90%), 0 -1px 0 rgb(90 62 14 / 30%); }
.rsvp-section .section-heading::before, .gift-section .section-heading::before { display: block; margin: 0 0 14px; font-family: var(--noir-sans); font-size: 10.5px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--noir-ink); text-shadow: none; }
.rsvp-section .section-heading::before { content: "Konfirmasi Kehadiran"; }
.gift-section .section-heading::before { content: "Tanda Kasih"; }
.rsvp-section .section-heading::after, .gift-section .section-heading::after { content: ""; display: block; width: 1px; height: 34px; margin: 18px auto 0; background: linear-gradient(var(--noir-gold), transparent); }

/* events sheet: hairline inset frame + light caps */
.ev-sheet-front::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(168 134 66 / 55%); pointer-events: none; }
.ev-sheet-front::after { content: "Detail Acara"; position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-family: var(--noir-sans); font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--noir-gold); }
.ev-sheet-front { padding-top: clamp(46px, 12vw, 64px); }
.ev-title { font-family: var(--noir-sans); font-weight: 300; font-size: clamp(15px, 4.4vw, 22px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.ev-date, .ev-time, .ev-place, .ev-map { font-family: var(--noir-sans); font-weight: 400; letter-spacing: .06em; }
.ev-date { font-size: clamp(10px, 2.8vw, 12px); text-transform: uppercase; }
.ev-time { font-size: clamp(11px, 3.2vw, 14px); font-weight: 600; }
.ev-place { font-size: clamp(10.5px, 3vw, 13px); }
.ev-place strong { font-weight: 600; }
.ev-map { font-size: clamp(9.5px, 2.6vw, 11px); letter-spacing: .22em; }

/* RSVP: sharp paper card with a hairline inset, underline inputs */
.rsvp-card { max-width: 460px; padding: 40px 30px 34px; border: 1px solid rgb(168 134 66 / 55%); border-radius: 0; background: linear-gradient(rgb(247 243 226 / 70%), rgb(247 243 226 / 70%)), url("assets/tex-paper.webp") 0 0 / 280px auto; box-shadow: inset 0 0 0 8px rgb(247 243 226 / 100%), inset 0 0 0 9px rgb(168 134 66 / 40%), 0 1.2em 2.4em rgb(0 0 0 / 18%); }
.form-group label { font-family: var(--noir-sans); font-size: 9.5px; font-weight: 400; letter-spacing: .26em; color: var(--noir-ink); }
.form-group input[type="text"], .form-group select, .form-group textarea { padding: 10px 2px; border: 0; border-bottom: 1px solid rgb(168 134 66 / 60%); border-radius: 0; background: transparent; font-family: var(--noir-sans); font-size: 14px; font-weight: 300; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: none; border-bottom-color: var(--noir-ink); }
.pill-card { border-radius: 0; background: transparent; font-family: var(--noir-sans); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.attendance-pill input:checked + .pill-card { background: var(--noir-ink); border-color: var(--noir-ink); color: #ecd9a0; }
.rsvp-submit-btn { border-radius: 0; background: var(--noir-ink); color: #ecd9a0; box-shadow: none; font-family: var(--noir-sans); font-size: 10.5px; font-weight: 400; letter-spacing: .26em; outline: 1px solid rgb(168 134 66 / 70%); outline-offset: -5px; }
.rsvp-submit-btn:hover, .rsvp-submit-btn:active { transform: none; box-shadow: none; }

/* gift cards */
.luxury-bank-card, .gift-physical-card { border-radius: 0; border-color: rgb(168 134 66 / 55%); background: linear-gradient(rgb(247 243 226 / 70%), rgb(247 243 226 / 70%)), url("assets/tex-paper.webp") 0 0 / 280px auto; box-shadow: inset 0 0 0 7px rgb(247 243 226 / 100%), inset 0 0 0 8px rgb(168 134 66 / 40%), 0 1em 2em rgb(0 0 0 / 14%); }

/* ===== Section identities: each page has its own surface ===== */
/* Behind the story: deep olive night, vertical timeline */
.story-page { position: relative; padding: clamp(64px, 16vw, 110px) 22px clamp(64px, 16vw, 110px); color: #e9e2c4; background: linear-gradient(rgb(24 27 14 / 78%), rgb(24 27 14 / 78%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; }
.story-inner { max-width: 460px; margin: 0 auto; }
.story-eyebrow { margin: 0 0 14px; text-align: center; font-family: var(--noir-sans); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #cdb06a; }
.story-title { margin: 0; text-align: center; font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(56px, 18vw, 80px); line-height: 1; color: #e6c883; }
.story-intro { margin: 14px 0 44px; text-align: center; font-family: var(--noir-sans); font-weight: 300; font-size: 13px; letter-spacing: .04em; color: rgb(233 226 196 / 75%); }
.story-list { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.story-list::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(#cdb06a, rgb(205 176 106 / 15%)); }
.story-item { position: relative; margin: 0 0 40px; }
.story-item:last-child { margin-bottom: 0; }
.story-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 13px; height: 13px; border: 1px solid #cdb06a; background: #23261a; transform: rotate(45deg) scale(.7); }
.story-label { display: block; margin-bottom: 8px; font-family: var(--noir-sans); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #cdb06a; }
.story-item-title { margin: 0 0 10px; font-family: var(--font-serif-body); font-style: italic; font-weight: 400; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.1; color: #f1ead0; }
.story-item-text { margin: 0; font-family: var(--noir-sans); font-weight: 300; font-size: 13.5px; line-height: 1.75; color: rgb(233 226 196 / 82%); }

/* Reservasi: pale sage with a ticket */
.rsvp-section { background: linear-gradient(rgb(226 230 205 / 88%), rgb(226 230 205 / 88%)), url("assets/tex-paper.webp") 0 0 / 280px auto; }
.form-hint { display: block; margin-top: 8px; font-family: var(--noir-sans); font-size: 11px; font-weight: 300; line-height: 1.5; color: var(--noir-ink); opacity: .75; }
.honeypot { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
.ticket { margin: 34px auto 0; padding: 30px 22px 24px; max-width: 360px; text-align: center; background: #fffdf4; border: 1px solid rgb(168 134 66 / 55%); box-shadow: inset 0 0 0 6px #fffdf4, inset 0 0 0 7px rgb(168 134 66 / 40%), 0 1em 2em rgb(0 0 0 / 14%); position: relative; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 76px; width: 18px; height: 18px; border-radius: 50%; background: #e0e4c9; border: 1px solid rgb(168 134 66 / 55%); }
.ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket-eyebrow { margin: 0 0 4px; font-family: var(--noir-sans); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--noir-ink); }
.ticket-mono { margin: 0 0 18px; font-family: "Great Vibes", cursive; font-size: 54px; line-height: 1; color: var(--noir-gold); }
.ticket-qr { display: block; width: 190px; height: 190px; margin: 0 auto 14px; image-rendering: pixelated; }
.ticket-code { margin: 0 0 4px; font-family: var(--noir-sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--noir-ink); }
.ticket-name { margin: 0 0 4px; font-family: var(--noir-sans); font-weight: 300; font-size: 20px; color: var(--noir-ink); }
.ticket-meta { margin: 0 0 20px; font-family: var(--noir-sans); font-weight: 300; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--noir-ink); opacity: .75; }
.ticket-dl { min-height: 44px; padding: 10px 24px; border: 0; background: var(--noir-ink); color: #ecd9a0; font-family: var(--noir-sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; outline: 1px solid rgb(168 134 66 / 70%); outline-offset: -5px; cursor: pointer; }
.ticket-note { margin: 14px 0 0; font-family: var(--noir-sans); font-weight: 300; font-size: 11px; color: var(--noir-ink); opacity: .7; }

/* Kado: dark ink with gold hairlines */
.gift-section { background: linear-gradient(rgb(30 31 20 / 92%), rgb(30 31 20 / 92%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; color: #e9e2c4; }
.gift-section .section-heading { color: #e6c883; text-shadow: none; }
.gift-section .section-heading::before { color: #cdb06a; }
.gift-section .section-heading::after { background: linear-gradient(#cdb06a, transparent); }
.gift-intro { color: rgb(233 226 196 / 78%); }

/* Countdown: bright ivory page, oversized thin numerals */
.countdown-page { padding: clamp(60px, 15vw, 100px) 18px; text-align: center; color: var(--noir-ink); background: linear-gradient(rgb(250 247 232 / 90%), rgb(250 247 232 / 90%)), url("assets/tex-paper.webp") 0 0 / 280px auto; }
.cd-eyebrow { margin: 0 0 14px; font-family: var(--noir-sans); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; }
.cd-date { margin: 0 0 40px; font-family: "Great Vibes", cursive; font-size: clamp(34px, 10vw, 48px); line-height: 1.1; color: var(--noir-gold); text-shadow: 0 1px 0 rgb(255 248 220 / 90%), 0 -1px 0 rgb(90 62 14 / 25%); }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 440px; margin: 0 auto; border-top: 1px solid rgb(168 134 66 / 55%); border-bottom: 1px solid rgb(168 134 66 / 55%); }
.cd-cell { padding: 26px 0 20px; border-left: 1px solid rgb(168 134 66 / 35%); }
.cd-cell:first-child { border-left: 0; }
.cd-num { display: block; font-family: var(--noir-sans); font-weight: 200; font-size: clamp(34px, 11vw, 56px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--noir-ink); }
.cd-unit { display: block; margin-top: 12px; font-family: var(--noir-sans); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--noir-gold); }
.cd-note { margin: 28px 0 0; font-family: var(--noir-sans); font-weight: 300; font-size: 12px; letter-spacing: .06em; opacity: .75; }

/* Story doodles: chalk strokes on olive, a dashed hand-drawn line threading the nodes */
.story-list { padding-left: 76px; }
.story-list::before { display: none; }
.story-item::before { display: none; }
.story-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.story-path path { stroke: #cdb06a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .8; }
.story-item { margin-bottom: 44px; }
.story-bubble { position: absolute; left: -76px; top: 0; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid #e9e2c4; border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%; background: #262a18; color: #f1ead0; transform: rotate(-4deg); }
.story-item:nth-child(even) .story-bubble { transform: rotate(5deg); border-radius: 45% 55% 48% 52% / 55% 45% 52% 48%; }
.story-bubble svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.story-when { display: inline-block; margin-bottom: 4px; font-family: "Caveat", cursive; font-weight: 700; font-size: 28px; line-height: 1; color: #e6c883; background: linear-gradient(transparent 82%, rgb(230 200 131 / 55%) 82%, rgb(230 200 131 / 55%) 90%, transparent 90%); transform: rotate(-1.5deg); transform-origin: left; }
.story-item-title { font-size: clamp(22px, 6.4vw, 28px); }
.story-item-text { max-width: 30ch; }
.story-body { padding-top: 2px; }

/* Story, compact: three doodle scenes per row, reading left to right */
.story-inner { max-width: 480px; }
.story-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 10px; padding: 0; counter-reset: none; }
.story-list::before, .story-item::before, .story-path { display: none; }
.story-item { position: relative; margin: 0; text-align: center; }
.story-item:not(:nth-child(3n))::after { content: ""; position: absolute; right: -11px; top: 38px; width: 12px; border-top: 2px dotted #cdb06a; opacity: .85; }
.story-scene { display: block; width: 100%; height: auto; margin: 0 auto 8px; color: #f1ead0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.story-scene .acc { stroke: #e6c883; }
.story-when { display: block; margin: 0 0 2px; font-size: 21px; transform: none; background: none; }
.story-item-title { margin: 0 0 4px; font-size: clamp(15px, 4.4vw, 19px); line-height: 1.12; }
.story-item-text { max-width: none; margin: 0 auto; font-size: 11px; line-height: 1.5; }

/* Dock: docked inside the page frame, flush with the bottom edge; the scroller stops above it so it never covers content */
.page-frame { inset: 0 0 var(--dockd, 52px) 0; opacity: 0; }
.bottom-dock { left: 0; right: 0; bottom: 0; width: auto; box-sizing: border-box; height: calc(52px + env(safe-area-inset-bottom, 0px)); min-height: 0; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); transform: translate3d(0, 100%, 0); justify-content: space-around; gap: 0; padding: 4px 0 5px; border: 0; border-top: 1px solid rgb(168 134 66 / 55%); border-radius: 0; background: #fbf9ee; box-shadow: none;animation: none; z-index: 45; }
.dock-item { flex: 1; min-width: 0; padding: 4px 4px; border-radius: 0; }
.dock-item:hover svg, .dock-item.active svg { transform: none; }
.scroller.has-dock { bottom: var(--dockd, 52px); }

/* Cover stage: tone-on-tone botanical corners behind the envelope (static SVG, no filters) */
.opening-stage { background: var(--stage-bg); }

/* Revealed page = two fixed-size zones (gallery on top, calendar below). Nothing inside is scaled while the page zooms: it is just laid out at its final size. */
.pz { position: absolute; left: 0; right: 0; height: var(--ph, 580px); }
.pz-top { top: 0; }
.pz-bottom { top: var(--ph, 580px); }
.np-cap-mid { top: 96px; }
.pz-divider { position: absolute; left: 60px; right: 60px; top: var(--ph, 580px); height: 1px; background: linear-gradient(90deg, transparent, #c19a4e 14%, #c19a4e 86%, transparent); opacity: .85; }
.pz-divider::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border: 1px solid #c19a4e; background: var(--page-paper); transform: translateX(-50%) rotate(45deg); }
.pz-art { position: absolute; left: 60px; width: 688px; top: 250px; height: calc(var(--ph, 580px) - 330px); font-size: 9.4px; }
.pz-art .cl { opacity: 1; transition: none; transform: rotate(var(--r, 0deg)); }
.pz-art .cl-photo { cursor: default; }
.pz-b { left: 250px; top: 0; width: 420px; aspect-ratio: 1.34; z-index: 2; }
.pz-a { left: 4px; top: 10%; width: 320px; aspect-ratio: 1.4; z-index: 3; --pad: 9% 7%; }
.pz-a img { inset: 10% 6.5% 12% 6.5%; width: 87%; height: 78%; }
.pz-c { left: 386px; top: 38%; width: 290px; aspect-ratio: 1.55; z-index: 4; }
.pz-f { left: 196px; top: 56%; width: 320px; aspect-ratio: 1.6; z-index: 6; }
.pz-g { left: 8px; top: 62%; width: 310px; aspect-ratio: 1.67; z-index: 4; }
.pz-box { left: 294px; top: 20%; width: 104px; height: 186px; z-index: 5; }
.pz-box .cl-box-mono { font-size: 6.4em; }
.pz-lily { left: 40px; top: 24%; width: 110px; height: auto; z-index: 7; }
.pz-names { left: 4px; top: 34px; width: 306px; height: 416px; z-index: 1; }
.pz-cal { left: 292px; top: 0; width: 396px; height: 450px; z-index: 0; font-size: 10.2px; }
.pz-calendar { height: calc(var(--ph, 580px) - 360px); }

/* Phone column: on tablets and desktops the invitation stays phone-sized and centred; only the backdrop is wider. */
:root { --col: 430px; --side: max(0px, calc((100vw - var(--col)) / 2)); }
html, body { background-color: var(--stage-bg); }
.main-invitation { max-width: var(--col); margin-left: auto; margin-right: auto; }
.page-frame { left: var(--side); right: var(--side); }
.bottom-dock { left: var(--side); right: var(--side); }
.bgm-disc-btn { right: max(20px, calc(var(--side) + 16px)); }

/* Doodle styling: thin line, solid tops (cream), gold hijab */
.story-scene { stroke-width: 1.35; }
.story-scene .f { fill: currentColor; stroke: none; }
.story-scene .fg { fill: #e6c883; stroke: none; }
.story-scene .bg { fill: #262a18; stroke: currentColor; stroke-width: 1; }
.story-scene .acc { stroke-width: 1.5; }
.story-scene .ft { stroke-width: .8; }

/* blind emboss (deboss) pada amplop, seperti kertas yang ditekan */
.op-title, .op-small, .op-mid { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #566329; font-family: "Rosemartin", serif; font-weight: 600; letter-spacing: .1em; text-shadow: -1.6px -1.8px 0 rgb(18 22 6 / 38%), 1.8px 2px 0 rgb(214 224 150 / 22%), 0 0 1.5px rgb(0 0 0 / 14%); }
.op-title { top: 18px; font-size: 124px; }
.op-title, .op-small, .op-mid { color: #505a29; text-shadow: -1.8px -2px 0 rgb(14 18 4 / 45%), 2px 2.2px 0 rgb(206 218 140 / 26%), 0 0 2px rgb(0 0 0 / 18%); }

/* amplop polos: hanya stempel */
.op-names, .op-for { display: none; }


/* ===== layar awal: sisi depan amplop (flip atas-bawah ke sisi belakang) ===== */
.scroller.is-locked { overflow: hidden; }
.t2-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(2600px) rotateX(0deg); transition: transform 1s cubic-bezier(.5, .05, .2, 1); }
.t2-flip.is-flipped { transform: perspective(2600px) rotateX(180deg); }
.t2-front, .t2-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.t2-back { transform: rotateX(180deg); }
.t2-flip.is-done { transition: none; transform: none; }
.t2-flip.is-done .t2-back { transform: none; }
.t2-flip.is-done .t2-front { display: none; }
.t2-front { overflow: hidden; background: #4f5a28; box-shadow: 0 26px 60px rgb(0 0 0 / 45%); }
.t2f-tex { position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 5%), rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 14%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 512px 512px; }
.t2-front > * { position: absolute; margin: 0; }
.t2f-names { left: 56px; top: 64px; display: flex; align-items: baseline; gap: 10px; font: 500 68px/1 "Rosemartin", serif; letter-spacing: .02em; color: #e3c47c; text-shadow: 0 -1px 0 rgb(255 244 200 / 80%), 0 2px 0 #6e4c18, 0 7px 12px rgb(0 0 0 / 45%); }
.t2f-names i { font-size: 46px; font-style: italic; font-weight: 500; }
.t2f-wave { left: 462px; top: 78px; opacity: .9; }
.t2f-pm { left: 556px; top: 60px; width: 130px; height: 130px; border: 2px solid rgb(242 241 225 / 85%); border-radius: 50%; color: #f2f1e1; text-align: center; }
.t2f-pm i { position: absolute; inset: 17px; border: 1.5px solid rgb(242 241 225 / 85%); border-radius: 50%; }
.t2f-pm b { position: absolute; left: 0; right: 0; top: 36px; font: 700 52px/1 "Rosemartin", serif; }
.t2f-pm em { position: absolute; left: 0; right: 0; top: 4px; font: normal 600 10px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .18em; }
.t2f-pm em.b { top: 112px; }
.t2f-stamp { display: block; background: #f1ead2; padding: 8px; box-shadow: 0 3px 8px rgb(0 0 0 / 40%); }
.t2f-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.t2f-stamp .perf { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; }
.t2f-stamp.s1 { left: 704px; top: 56px; width: 92px; height: 116px; }
.t2f-stamp.s2 { left: 598px; top: 206px; width: 92px; height: 116px; }
.t2f-info { right: 48px; bottom: 56px; text-align: right; font: 500 14px/2.1 "Plus Jakarta Sans", sans-serif; letter-spacing: .27em; color: #f2f1e1; }
.t2-open { position: absolute; z-index: 20; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); width: min(88vw, 360px); height: 52px; transform: translateX(-50%); border: 1.5px solid #e8dcc0; border-radius: 26px; background: transparent; color: #e8dcc0; font: 500 15px/1 "Plus Jakarta Sans", sans-serif; cursor: pointer; transition: opacity .4s ease, transform .16s ease-out; }
.t2-open:active { transform: translateX(-50%) scale(.97); }
.t2-open.is-hidden { opacity: 0; pointer-events: none; }
.t2f-names { font-size: 54px; left: 52px; top: 70px; gap: 8px; }
.t2f-names i { font-size: 38px; }
.t2f-wave { left: 392px; top: 86px; }
.t2f-pm { left: 500px; top: 62px; }
.t2f-stamp.s1 { left: 668px; top: 50px; width: 118px; height: 148px; }
.t2f-stamp.s2 { left: 548px; top: 214px; width: 118px; height: 148px; }
.t2-flip.no-tr { transition: none !important; }
.t2-hint { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 52px + 14px); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 10.5px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; color: #cfc8a8; pointer-events: none; transition: opacity .4s ease; }
.t2-hint i { width: 8px; height: 8px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(45deg); animation: t2Nudge 1.6s ease-in-out infinite; }
.t2-hint.is-hidden { opacity: 0; }
@keyframes t2Nudge { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(5px) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .t2-hint i { animation: none; } }

/* pilihan bahasa di bawah tombol */
.t2-open { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 40px); }
.t2-hint { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 40px + 52px + 14px); }
.t2-lang { position: absolute; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; transition: opacity .4s ease; }
.t2-lang button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #bdb690; font: 400 12px/1 "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.t2-lang button[aria-pressed="true"] { color: #f2eed6; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.t2-lang.is-hidden { opacity: 0; pointer-events: none; }

/* nama di sisi depan amplop: Aurelia Diamond */
@font-face { font-family: "Rosemartin", serif; src: url("assets/fonts/aurelia-diamond.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
.t2f-names { font-family: "Rosemartin", serif; font-weight: 400; font-size: 78px; letter-spacing: .01em; gap: 10px; align-items: center; font-feature-settings: "liga" 1, "calt" 1, "dlig" 1; }
.t2f-names i { font-family: "Rosemartin", serif; font-style: normal; font-size: 54px; }
.t2f-names { font-size: 72px; top: 66px; }
.t2f-names i { font-size: 50px; }
.t2f-names { font-size: 88px; top: 58px; gap: 12px; letter-spacing: 0; align-items: baseline; }
.t2f-names i { font-size: 88px; font-style: normal; }
.t2f-lock { left: 18px; top: 14px; width: 372px; height: auto; margin: 0; font-size: 0; }
.t2f-lock img { display: block; width: 100%; height: auto; }
.t2f-lock { left: 34px; top: 26px; width: 430px; }
.t2f-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0; right: 48px; bottom: 54px; width: 440px; text-align: left; line-height: 1; }
.t2f-info > span { display: block; }
.t2f-inv { font: 500 13px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .3em; color: #e3c47c; }
.t2f-to { margin-top: 18px; font: 400 14px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .24em; color: #f2f1e1; }
.t2f-guest { width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 0 8px; border-bottom: 1.5px solid rgb(242 241 225 / 75%); font: 500 28px/1.1 "Rosemartin", serif; letter-spacing: .02em; color: #f7f2da; }

/* prangko: tepi bergerigi tembus (mask), kertas putih, bayangan lembut */
.t2f-stamp { background: none; padding: 14px; box-shadow: none; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 38%)); }
.t2f-stamp .perf { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.t2f-stamp img { position: relative; z-index: 1; }

/* tata letak: info tamu kiri atas, logotype kiri bawah (rata kiri) */
.t2f-info { left: 52px; right: auto; top: 54px; bottom: auto; width: 340px; }
.t2f-lock { left: 37px; top: auto; bottom: 26px; width: 380px; }
/* dekorasi bunga di sekitar prangko */
.t2f-deco { display: block; height: auto; pointer-events: none; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 35%)); }
.t2f-deco.d-iris { left: 626px; top: 2px; width: 104px; z-index: 0; }
.t2f-stamp { z-index: 1; }
.t2f-deco.d-cloud { z-index: 0; opacity: .95; }
.t2f-deco.c1 { left: 500px; top: 176px; width: 96px; }
.t2f-deco.c2 { left: 690px; top: 196px; width: 80px; z-index: 2; }
.t2f-deco.d-sun { left: 744px; top: 22px; width: 58px; z-index: 2; }
.t2f-deco.d-tulip { left: 716px; top: 138px; width: 52px; z-index: 2; }
.t2f-deco.d-orchid { left: 516px; top: 298px; width: 88px; z-index: 2; }
.t2f-deco.d-bird { left: 626px; top: 326px; width: 84px; z-index: 2; }
.t2f-inv { left: 52px; top: 196px; margin: 0; }
.t2f-to { margin-top: 0; }

/* prangko di kanan bawah, dekorasi elegan: edelweis kecil + bunga emas */
.t2f-stamp.s1 { left: 638px; top: 218px; width: 118px; height: 148px; }
.t2f-stamp.s2 { left: 520px; top: 396px; width: 118px; height: 148px; }
.t2f-deco { filter: drop-shadow(0 3px 4px rgb(0 0 0 / 30%)); }
.t2f-deco.d-gold { z-index: 3; width: 44px; }
.t2f-deco.g1 { left: 618px; top: 198px; }
.t2f-deco.g2 { left: 612px; top: 520px; width: 38px; }
.t2f-deco.d-edel { z-index: 3; width: 74px; }
.t2f-deco.e1 { left: 724px; top: 320px; transform: rotate(18deg); }
.t2f-deco.e2 { left: 478px; top: 484px; transform: rotate(-24deg); }

/* susunan kiri: UNDANGAN PERNIKAHAN di atas, logotype, lalu KEPADA YTH di bawah logotype */
.t2f-inv { left: 52px; top: 54px; }
.t2f-lock { bottom: 128px; }
.t2f-info { left: 52px; right: auto; top: auto; bottom: 30px; width: 340px; }

/* prangko sejajar di atas (kanan), hanya bunga emas */
.t2f-stamp.s1 { left: 638px; top: 44px; }
.t2f-stamp.s2 { left: 508px; top: 44px; }
.t2f-deco.g1 { left: 488px; top: 26px; width: 44px; }
.t2f-deco.g2 { left: 732px; top: 168px; width: 40px; }
.t2f-lock { bottom: 168px; }
.t2f-stamp img { border: 1.5px solid #2c43cf; object-position: 50% 50%; }
.t2f-postmark { z-index: 4; left: 352px; top: 22px; width: 375px; height: auto; opacity: .92; pointer-events: none; }

/* prangko lebih besar bergaya referensi; cap pos bulat di bawah prangko (sedikit menimpa) */
.t2f-stamp { padding: 12px; }
.t2f-stamp.s1 { left: 606px; top: 34px; width: 150px; height: 174px; }
.t2f-stamp.s2 { left: 444px; top: 34px; width: 150px; height: 174px; }
.t2f-stamp img { border: 0; width: 100%; height: 100%; object-fit: fill; }
.t2f-postmark { left: 526px; top: 194px; width: 148px; opacity: .95; }
.t2f-deco.g1 { left: 424px; top: 16px; }
.t2f-deco.g2 { left: 730px; top: 186px; }
.t2f-postmark { left: 287px; top: 145px; width: 710px; opacity: .38; z-index: 4; }
.t2f-postmark { opacity: .2; }
.t2f-postmark { opacity: .04; }
.t2f-stamp.s1 { left: 641px; top: 34px; width: 115px; height: 133px; padding: 9px; }
.t2f-stamp.s2 { left: 517px; top: 34px; width: 115px; height: 133px; padding: 9px; }
.t2f-deco.g1 { left: 497px; top: 16px; width: 38px; }
.t2f-deco.g2 { left: 736px; top: 148px; width: 34px; }
.t2-edel { position: absolute; z-index: 0; top: 50%; width: min(24vw, 120px); height: auto; opacity: .9; pointer-events: none; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 45%)); }
.t2-edel.l { left: max(8px, calc(50% - 400px)); transform: translateY(-50%) rotate(-10deg); }
.t2-edel.r { right: max(8px, calc(50% - 400px)); transform: translateY(-50%) scaleX(-1) rotate(-10deg); }
.opening-composition { z-index: 1; }
.t2-open { width: min(62vw, 230px); height: 42px; font-size: 13.5px; border-radius: 21px; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 40px); }
.t2-hint { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 40px + 42px + 12px); }
.t2-hint span { display: block; min-height: 11px; }
.t2-edel { top: var(--t); width: min(20vw, 96px); transform: translate(0,-50%) rotate(var(--r)) scale(var(--s)); }
.t2-edel.l { left: calc(max(0px, calc(50% - 420px)) + var(--o)); right: auto; }
.t2-edel.r { right: calc(max(0px, calc(50% - 420px)) + var(--o)); left: auto; transform: translate(0,-50%) scaleX(-1) rotate(var(--r)) scale(var(--s)); }
.t2-edel-field { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.t2-edel-field .t2-edel { position: absolute; width: 84px; height: auto; top: auto; left: auto; right: auto; margin: -58px 0 0 -42px; transform: scaleX(var(--f)) rotate(var(--r)) scale(var(--s)); filter: drop-shadow(0 3px 5px rgb(0 0 0 / 40%)); }
.t2-edel-field { -webkit-mask-image: linear-gradient(#000 0, #000 62%, rgb(0 0 0 / 38%) 80%, rgb(0 0 0 / 22%) 100%); mask-image: linear-gradient(#000 0, #000 62%, rgb(0 0 0 / 38%) 80%, rgb(0 0 0 / 22%) 100%); }
.t2-edel-field .t2-edel { filter: brightness(.82) drop-shadow(0 3px 5px rgb(0 0 0 / 45%)); }
.t2-open { background: #272621; }
.t2-hint span { text-shadow: 0 0 6px #272621, 0 0 10px #272621; }
.t2-lang button { text-shadow: 0 0 6px #272621, 0 0 10px #272621; }
.t2-edel-field { inset: 0 auto 0 50%; width: min(100%, 430px); transform: translateX(-50%); -webkit-mask-image: none; mask-image: none; }
.t2-edel-field .t2-edel { margin: -58px -42px 0 -42px; }
.t2-edel-field .t2-edel[style*="bottom"] { margin: 0 -42px -58px -42px; }
.t2-vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 85% 70% at 50% 50%, rgb(39 38 33 / 0%) 55%, rgb(39 38 33 / 55%) 100%), linear-gradient(rgb(39 38 33 / 35%), rgb(39 38 33 / 0%) 24%, rgb(39 38 33 / 0%) 76%, rgb(39 38 33 / 35%)); }
.opening-composition { z-index: 1; }
.t2-edel-field, .t2-vignette { transition: opacity .6s ease; }
.t2-edel-field.is-faded, .t2-vignette.is-faded { opacity: 0; }

/* latar hitam elegan + bunga gelap di pojok (hitam hilang lewat blend screen) */
:root { --stage-bg: #060606; }
.t2-edel-field { inset: 0 auto 0 50%; width: min(100%, 430px); }
.t2-fl { position: absolute; width: 62%; height: auto; mix-blend-mode: screen; opacity: .95; filter: saturate(1.05); }
.t2-fl.a { bottom: -2%; }
.t2-fl.b { top: -2%; }
.t2-fl.l { left: -8%; }
.t2-fl.r { right: -8%; transform: scaleX(-1); }
.t2-vignette { background: radial-gradient(ellipse 90% 75% at 50% 50%, rgb(6 6 6 / 0%) 55%, rgb(6 6 6 / 50%) 100%); }
.t2-open { background: #060606; }
.t2-hint span, .t2-lang button { text-shadow: 0 0 6px #060606, 0 0 10px #060606; }
.t2-fl { width: 66%; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.t2-fl.a { bottom: -14%; }
.t2-fl.b { top: -14%; }
.t2-fl.l { left: -26%; }
.t2-fl.r { right: -26%; }
.t2-fl { width: 84%; -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); }
.t2-fl.a { bottom: -22%; }
.t2-fl.b { top: -24%; }
.t2-fl.l { left: -30%; }
.t2-fl.r { right: -30%; }
.t2-fl { width: 96%; -webkit-mask-image: none; mask-image: none; }
.t2-fl.a { bottom: -6%; top: auto; }
.t2-fl.b { top: -4%; bottom: auto; }
.t2-fl.a.l { left: -3%; right: auto; }
.t2-fl.a.r { right: -3%; left: auto; }
.t2-fl.b.r { right: -3%; left: auto; }
.t2-fl.b.l { left: -3%; right: auto; transform: scaleX(-1); }
.t2-fl.a.r { transform: scaleX(-1); }
.t2-fl.a.l { transform: none; }
.t2-fl.b.r { transform: none; }
.t2-fl { width: 82%; }
.t2-fl.a { -webkit-mask-image: radial-gradient(circle farthest-corner at 0% 78%, #000 26%, transparent 66%); mask-image: radial-gradient(circle farthest-corner at 0% 78%, #000 26%, transparent 66%); }
.t2-fl.b { -webkit-mask-image: radial-gradient(circle farthest-corner at 100% 12%, #000 26%, transparent 66%); mask-image: radial-gradient(circle farthest-corner at 100% 12%, #000 26%, transparent 66%); }
.t2-fl.a { bottom: -10%; }
.t2-fl.b { top: -8%; }
/* lebih sedikit: hanya dua kelompok kecil di pojok diagonal */
.t2-fl.a.r, .t2-fl.b.l { display: none; }
.t2-fl { width: 56%; opacity: .78; }
.t2-fl.a { -webkit-mask-image: radial-gradient(circle farthest-corner at 0% 80%, #000 18%, transparent 52%); mask-image: radial-gradient(circle farthest-corner at 0% 80%, #000 18%, transparent 52%); bottom: -4%; left: -6%; }
.t2-fl.b { -webkit-mask-image: radial-gradient(circle farthest-corner at 100% 10%, #000 18%, transparent 52%); mask-image: radial-gradient(circle farthest-corner at 100% 10%, #000 18%, transparent 52%); top: -2%; right: -6%; }
.t2-fl.b { display: none; }
.t2-fl.a.r { display: block; right: -6%; left: auto; bottom: -4%; }
:root { --stage-bg: #151513; }
.t2-open { background: #151513; }
.t2-hint span, .t2-lang button { text-shadow: 0 0 6px #151513, 0 0 10px #151513; }
.t2-vignette { background: radial-gradient(ellipse 90% 75% at 50% 50%, rgb(21 21 19 / 0%) 55%, rgb(21 21 19 / 45%) 100%); }
:root { --stage-bg: #060606; }
.t2-open { background: #060606; }
.t2-hint span, .t2-lang button { text-shadow: 0 0 6px #060606, 0 0 10px #060606; }
.t2-vignette { background: radial-gradient(ellipse 90% 75% at 50% 50%, rgb(6 6 6 / 0%) 55%, rgb(6 6 6 / 50%) 100%); }

/* bunga dari tiga referensi: dua kelompok kecil di bawah, tepi memudar */
.t2-fl { display: block !important; mix-blend-mode: screen; opacity: .9; transform: none !important; }
.t2-fl.fl-left { width: 62%; left: -10%; right: auto; bottom: -3%; top: auto; -webkit-mask-image: radial-gradient(ellipse 62% 62% at 38% 56%, #000 38%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 38% 56%, #000 38%, transparent 100%); }
.t2-fl.fl-right { width: 58%; right: -12%; left: auto; bottom: -2%; top: auto; transform: scaleX(-1) !important; -webkit-mask-image: radial-gradient(ellipse 62% 62% at 45% 58%, #000 36%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 45% 58%, #000 36%, transparent 100%); }
.t2-fl.fl-left { width: 70%; left: -14%; bottom: 0; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, transparent 100%); }
.t2-fl.fl-right { width: 62%; right: -14%; bottom: 0; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, transparent 100%); }

/* anthurium marun, dua tangkai dari bawah */
.t2-an { position: absolute; display: block; height: auto; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 55%)); pointer-events: none; }
.t2-an.an-a { width: 30%; right: 6%; bottom: -9%; transform: rotate(7deg); transform-origin: 50% 100%; }
.t2-an.an-b { width: 28%; left: -3%; bottom: -5%; transform: rotate(-5deg); transform-origin: 50% 100%; }
.t2-edel-field { overflow: visible; }
.t2-an.an-a { bottom: -10%; }
.t2-an.an-a { width: 32%; right: -2%; bottom: -3%; transform: rotate(12deg); transform-origin: 50% 50%; }
.t2-an.an-b { width: 34%; left: -6%; bottom: -5%; transform: rotate(-8deg); transform-origin: 50% 50%; }

/* pita bunga kering selebar bawah layar, memudar ke hitam di atas */
.t2-edel-field { inset: auto 0 0 0; width: 100%; height: 42%; transform: none; overflow: hidden; left: 0; }
.t2-band { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; opacity: .85;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, rgb(0 0 0 / 55%) 62%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, rgb(0 0 0 / 55%) 62%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.t2-edel-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(6 6 6 / 35%), rgb(6 6 6 / 0%) 70%); }

@font-face { font-family: "Rosemartin"; src: url("assets/fonts/rosemartin.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
.page-frame { display: none !important; }
.pf-c { display: none !important; }
.oc-frame { border: 0 !important; }
.oc-frame::before, .oc-frame > .oc-c { display: none !important; }
html, body { background-image: none !important; background-color: #060606 !important; }

.op-front-gold { opacity: 1; stroke: #d6b66e; stroke-width: 2.4; }
.t2-back .op-flap-face svg path[stroke="#d4b46c"] { stroke: #d6b66e; }

/* rapikan: tanpa celah antar halaman, navbar sejajar kolom */
.scroller { scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.opening-journey { margin-bottom: calc(-1 * var(--dockd, 52px)); }
.main-invitation { position: relative; z-index: 2; }

/* halaman pertama (panel atas setelah kartu terbuka): foto penuh + logotype */
.oc-back-face { background: #111; }
.oc-back-face .oc-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; display: block; }
.oc-back-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 62%), rgb(0 0 0 / 0) 46%); }
.oc-back-face .oc-cover-logo { position: absolute; z-index: 2; left: 50%; bottom: 3%; width: 70%; height: auto; transform: translateX(-50%); display: block; }
.oc-back-face .oc-shield-wrap, .oc-back-face .oc-frame { display: none !important; }
.oc-back-face .oc-shade { z-index: 3; }
.oc-back-face .oc-cover-photo { object-position: 50% 58%; transform: scale(1.02); }
.oc-back-face .oc-cover-logo { width: 54%; bottom: -9%; }
.oc-back-face::after { background: linear-gradient(to top, rgb(0 0 0 / 70%), rgb(0 0 0 / 0) 52%); }
.oc-back-face .oc-cover-logo { bottom: auto; top: -9%; width: 56%; }
.oc-back-face::after { background: linear-gradient(to bottom, rgb(0 0 0 / 55%), rgb(0 0 0 / 0) 45%); }
.oc-back-face .oc-cover-photo { object-position: 50% 72%; }
.oc-back-face .oc-cover-logo { top: -1%; width: 52%; }
.oc-back-face .oc-cover-photo { object-position: 50% 100%; transform: none; }
.oc-back-face .oc-cover-logo { top: 5%; width: 50%; }
.oc-back-face .oc-cover-photo { object-position: 50% 45%; }

/* halaman kedua: hanya sambutan + logomark timbul */
.oc-base .oc-side, .oc-base .oc-amp, .oc-base .oc-name, .oc-base .oc-when, .oc-base .oc-guest, .oc-base .oc-frame > .oc-c { display: none !important; }
.oc-base .oc-para { top: 24%; width: 480px; font-size: 25px; line-height: 1.55; }
.oc-emboss-mark { position: absolute; left: 50%; top: 53%; width: 250px; height: auto; transform: translateX(-50%); opacity: .95; pointer-events: none; }
.oc-garland, .oc-base .oc-garland { display: none !important; }
.t2f-postmark { left: 292px; top: 248px; width: 250px; opacity: .06; }
.oc-emboss-mark { width: 400px; top: 50%; }
.oc-base .oc-para { top: 13%; } .oc-emboss-mark { top: 43%; }

/* tombol musik minimalis, di bawah (di atas navbar) */
.bgm-disc-btn { top: auto; bottom: calc(var(--dockd, 52px) + 14px + env(safe-area-inset-bottom, 0px)); right: max(16px, calc(var(--side) + 16px)); width: 38px; height: 38px; border: 1px solid rgb(58 47 28 / 28%); background: rgb(253 252 248 / 82%); color: #3a2f1c; box-shadow: none;}
.bgm-disc-btn:hover { box-shadow: none; transform: none; background: #fdfcf8; }
.bgm-disc-btn .bgm-eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.bgm-disc-btn .bgm-eq i { display: block; width: 2px; background: currentColor; border-radius: 1px; height: 4px; animation: bgmEq 900ms ease-in-out infinite; }
.bgm-disc-btn .bgm-eq i:nth-child(2) { animation-delay: .2s; }
.bgm-disc-btn .bgm-eq i:nth-child(3) { animation-delay: .4s; }
.bgm-disc-btn.is-playing .bgm-play { display: none; }
.bgm-disc-btn.is-playing .bgm-eq { display: flex; }
@keyframes bgmEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .bgm-disc-btn .bgm-eq i { animation: none; height: 9px; } }

/* galeri bertumpuk */
.oc-next .pz-stackwrap { position: absolute; inset: 0; display: block; }
.gs-stack { position: absolute; left: 50%; top: 47%; width: 420px; height: 600px; margin: -300px 0 0 -210px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gs-card { position: absolute; inset: 0; padding: 14px; background: #faf7ee; box-shadow: 0 14px 30px rgb(0 0 0 / 28%), 0 2px 5px rgb(0 0 0 / 20%); transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; cursor: grab; }
.gs-card.is-drag { transition: none; cursor: grabbing; }
.gs-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.gs-dots { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; gap: 10px; }
.gs-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: #b4893a; opacity: .35; transition: width .25s ease, opacity .25s ease; }
.gs-dots i.on { width: 24px; opacity: 1; }

/* ===== halaman Save the Date (halaman berikutnya) ===== */
.sv-page { position: relative; width: 100%; background: #f4f3e4; overflow: hidden; z-index: 2; }
.sv-scale { --ph: 780px; position: absolute; left: 50%; top: 50%; width: 808px; height: 780px; transform: translate(-50%, -50%) scale(var(--svk, .5)); transform-origin: 50% 50%; }
.sv-scale .np-cap-mid { top: 70px; }
.sv-scale .pz-art { top: 220px; }
.gs-slide .fr-seal { width: 82px; height: auto; top: -38px; object-fit: contain; }

/* halaman 3: foto bertumpuk (geser) */
.gs-pile { position: relative; flex: 1; width: 100%; max-width: var(--col, 430px); margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gs-card { position: absolute; left: 50%; top: 50%; width: min(74%, 310px); aspect-ratio: .68; margin: calc(min(74vw, 310px) * -.735) 0 0 calc(min(74%, 310px) / -2); padding: 12px; background: #faf7ee; box-shadow: 0 14px 28px rgb(0 0 0 / 40%), 0 2px 5px rgb(0 0 0 / 25%); transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; cursor: grab; box-sizing: border-box; }
.gs-card.is-drag { transition: none; cursor: grabbing; }
.gs-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }

/* halaman 4: bingkai kecil, bisa diklik */
.fm-page { position: relative; z-index: 2; width: 100%; min-height: calc(var(--vh, 100svh) - 52px); box-sizing: border-box; padding: 34px 20px 36px; background: #3a4628 url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; display: flex; align-items: center; justify-content: center; }
.fm-grid { width: 100%; max-width: 390px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 14px; align-items: center; }
.fm-item { position: relative; display: block; width: 100%; aspect-ratio: .74; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s ease-out; -webkit-tap-highlight-color: transparent; }
.fm-item:active { transform: scale(.96); }
.fm-item:focus-visible { outline: 2px solid #e8c97c; outline-offset: 3px; }
.fm-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fm-oval { border-radius: 50%; padding: 6px; background: linear-gradient(135deg, #f1dc9d, #a07a32 40%, #e8c97c 65%, #6e4c18); box-shadow: 0 6px 12px rgb(0 0 0 / 45%); aspect-ratio: .74; }
.fm-oval i { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 2px #5a3d12; }
.fm-perf { padding: 14px 12px; box-sizing: border-box; }
.fm-perf > img { position: relative; z-index: 1; }
.fm-lace { padding: 15px 13px; }
.fm-plate { padding: 7px 7px 20px; background: #efe8d4; box-shadow: 0 6px 12px rgb(0 0 0 / 40%); }
.fm-plate span { display: block; width: 100%; height: 100%; }
.fm-clip { position: absolute; left: 50%; top: -9px; width: 26px; height: 14px; transform: translateX(-50%); border-radius: 3px 3px 2px 2px; background: linear-gradient(#f1dc9d, #b8903f 55%, #8a6a24); box-shadow: 0 2px 3px rgb(0 0 0 / 40%); z-index: 2; }

/* gambar tumpukan: ukuran pasti */
.gs-card { width: 280px; height: 410px; aspect-ratio: auto; margin: -215px 0 0 -140px; }

/* Save the Date minimalis */
.sv-page { height: auto !important; min-height: calc(var(--vh, 100svh) - 52px); display: flex; align-items: center; justify-content: center; background: #f4f3e4; }
.sv-min { width: 100%; max-width: 360px; padding: 56px 28px; text-align: center; color: #3a2f1c; }
.sv-eyebrow { margin: 0 0 6px; font: 400 11px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .3em; color: #8a7340; }
.sv-title { margin: 0 0 44px; font: 400 52px/1.05 "Great Vibes", cursive; color: #b4893a; }
.sv-month { margin: 0 0 22px; font: 500 20px/1 "Rosemartin", serif; letter-spacing: .04em; }
.sv-month b { font-weight: 500; color: #b4893a; }
.sv-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 14px; justify-items: center; font: 400 15px/1 "Rosemartin", serif; }
.sv-cal span:nth-child(-n+7) { font: 500 10px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; color: #8a7340; }
.sv-cal .sv-day { display: grid; place-items: center; width: 32px; height: 32px; margin: -8px 0; border-radius: 50%; background: #3a4628; color: #f4f3e4; }
.sv-date { margin: 40px 0 0; font: 400 15px/1.4 "Rosemartin", serif; letter-spacing: .06em; color: #8a7340; }

/* halaman lokasi: lembar site plan */
.ev-site { position: relative; z-index: 2; box-sizing: border-box; min-height: calc(var(--vh, 100svh) - 52px); padding: 28px 18px 32px; background: #fdfcf8; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ev-site::before, .ev-site::after { display: none !important; }
.ev-site .sheet { position: relative; padding: 14px 12px 12px; border: 1px solid #171814; background: #f4f3ef; }
.ev-site .sheet-title { margin: 0 0 6px; font: 400 10px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; color: #171814; }
.ev-site .sheet-plan { display: block; width: 100%; max-height: 300px; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.ev-site .tblock { display: grid; grid-template-columns: 38% 1fr 84px; margin-top: 12px; border: 1px solid #171814; }
.ev-site .tblock small { display: block; font: 400 9px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .1em; color: #171814; }
.ev-site .tb-no { grid-column: 1; padding: 9px; border-right: 1px solid #171814; border-bottom: 1px solid #171814; }
.ev-site .tb-no strong { display: block; margin: 4px 0 18px; font: 600 40px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.04em; }
.ev-site .tb-no b { display: block; margin-top: 4px; font: 600 12px/1.2 "Plus Jakarta Sans", sans-serif; }
.ev-site .tb-title { grid-column: 2 / 4; padding: 9px; border-bottom: 1px solid #171814; }
.ev-site .tb-title strong { display: block; margin: 4px 0 10px; font: 600 16px/1.1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; }
.ev-site .tb-title p { margin: 0; font: 400 10px/1.55 "Plus Jakarta Sans", sans-serif; letter-spacing: .05em; color: #171814; }
.ev-site .tb-addr { grid-column: 1 / 3; position: relative; min-height: 88px; padding: 9px; font: 400 10px/1.5 "Plus Jakarta Sans", sans-serif; color: #171814; }
.ev-site .tb-addr p { margin: 0; }
.ev-site .tb-mark { position: absolute; right: 10px; bottom: 4px; font: 500 30px/1 "Plus Jakarta Sans", sans-serif; font-style: normal; letter-spacing: -.05em; }
.ev-site .tb-qr { grid-column: 3; padding: 7px; border-left: 1px solid #171814; }
.ev-site .tb-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ev-site .pill-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; border: 1.5px solid #171814; border-radius: 24px; color: #171814; font: 500 13px/1 "Plus Jakarta Sans", sans-serif; text-decoration: none; }

/* ===== galeri di dalam kartu (koordinat 808 px) ===== */
.oc-panel .gs-pile { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; flex: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; z-index: 2; }
.oc-panel .gs-card { position: absolute; left: 50%; top: 50%; width: 400px; height: 580px; aspect-ratio: auto; margin: -290px 0 0 -200px; padding: 18px; box-sizing: border-box; background: #fbf8ef; box-shadow: 0 22px 44px rgb(0 0 0 / 30%), 0 3px 8px rgb(0 0 0 / 22%); transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; cursor: grab; }
.oc-panel .gs-card.is-drag { transition: none; cursor: grabbing; }
.oc-panel .gs-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.oc-panel .gs-dots { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 10px; pointer-events: none; z-index: 3; }
.oc-panel .gs-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: #b4893a; opacity: .3; transition: width .25s ease, opacity .25s ease; }
.oc-panel .gs-dots i.on { width: 26px; opacity: 1; }

.oc-panel .fm-grid { position: absolute; left: 50%; top: 50%; width: 700px; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 34px; z-index: 2; }
.oc-panel .fm-item { position: relative; display: block; width: 100%; aspect-ratio: .74; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s ease-out; -webkit-tap-highlight-color: transparent; }
.oc-panel .fm-item:active { transform: scale(.96); }
.oc-panel .fm-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.oc-panel .fm-oval { border-radius: 50%; padding: 10px; background: linear-gradient(135deg, #f1dc9d, #a07a32 40%, #e8c97c 65%, #6e4c18); box-shadow: 0 10px 18px rgb(0 0 0 / 28%); }
.oc-panel .fm-oval i { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 3px #5a3d12; }
.oc-panel .fm-perf { padding: 26px 22px; box-sizing: border-box; }
.oc-panel .fm-perf > img { position: relative; z-index: 1; }
.oc-panel .fm-lace { padding: 28px 24px; }
.oc-panel .fm-plate { padding: 12px 12px 36px; background: #efe8d4; box-shadow: 0 10px 18px rgb(0 0 0 / 26%); }
.oc-panel .fm-plate span { display: block; width: 100%; height: 100%; }
.oc-panel .fm-clip { position: absolute; left: 50%; top: -16px; width: 46px; height: 24px; transform: translateX(-50%); border-radius: 4px 4px 3px 3px; background: linear-gradient(#f1dc9d, #b8903f 55%, #8a6a24); box-shadow: 0 3px 5px rgb(0 0 0 / 38%); z-index: 2; }
.oc-panel .fr-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 30%)); }
.oc-panel .fm-item:focus-visible { outline: 3px solid #b4893a; outline-offset: 4px; }
.op-card-window .gs-pile, .op-card-window .fm-item { pointer-events: auto; }

/* halaman 4: satu bingkai per slide */
.oc-panel .fm-track { position: absolute; inset: 0; width: auto; transform: none; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; z-index: 2; }
.oc-panel .fm-track::-webkit-scrollbar { display: none; }
.oc-panel .fm-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; }
.oc-panel .fm-item { width: 340px; flex: none; }
.oc-panel .fm-oval { padding: 14px; }
.oc-panel .fm-perf { padding: 40px 34px; }
.oc-panel .fm-lace { padding: 42px 36px; }
.oc-panel .fm-plate { padding: 18px 18px 56px; }
.oc-panel .fm-clip { top: -22px; width: 64px; height: 34px; }
.oc-panel .fm-dots { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 10px; pointer-events: none; z-index: 3; }
.oc-panel .fm-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: #b4893a; opacity: .3; transition: width .25s ease, opacity .25s ease; }
.oc-panel .fm-dots i.on { width: 26px; opacity: 1; }
.op-card-window .fm-track { pointer-events: auto; }

/* tombol kiri-kanan galeri */
.gnav { position: absolute; z-index: 4; top: 50%; width: 76px; height: 76px; margin-top: -38px; padding: 0; display: grid; place-items: center; border: 1px solid rgb(58 47 28 / 30%); border-radius: 50%; background: rgb(253 252 248 / 80%); color: #3a2f1c; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.gnav svg { width: 34px; height: 34px; }
.gnav-l { left: 16px; }
.gnav-r { right: 16px; }
.gnav:active { transform: scale(.94); }
.oc-panel .gnav, .oc-panel .gnav { top: 46%; }

/* tombol panah minimalis */
.gnav { width: 56px; height: 56px; margin-top: -28px; border: 0; border-radius: 0; background: none; color: rgb(58 47 28 / 70%); }
.gnav svg { width: 30px; height: 30px; stroke-width: 1.2; }
.gnav-l { left: 8px; }
.gnav-r { right: 8px; }
.gnav:hover { color: #3a2f1c; }
/* info slide */
.g-info { position: absolute; left: 0; right: 0; bottom: 10%; margin: 0; text-align: center; font: 400 15px/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; color: #7a6a44; pointer-events: none; z-index: 3; }
.g-info b { font-weight: 600; color: #3a2f1c; letter-spacing: .12em; }
.oc-panel .gs-dots, .oc-panel .fm-dots { bottom: 14%; }
/* nomor halaman */
.pgno { position: absolute; top: 16px; right: 18px; z-index: 6; font: 500 11px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; color: #8a7340; pointer-events: none; }
.oc-panel .pgno { top: 30px; right: 36px; font-size: 22px; letter-spacing: .22em; }
.story-page .pgno, .gift-section .pgno, footer .pgno, .footer-section .pgno { color: rgb(242 241 225 / 70%); }
.oc-back-face .pgno { color: rgb(255 255 255 / 80%); }
.t2f-postmark { left: 287px; top: 145px; width: 710px; opacity: .05; }
.fm-item, .oc-panel .fm-item { pointer-events: none !important; cursor: default; }

/* awal: foto rapi di bingkai sudut, lalu menyebar berantakan saat halaman terbuka */
.gs-corners { position: absolute; left: 50%; top: 50%; width: 400px; height: 580px; margin: -290px 0 0 -200px; z-index: 40; pointer-events: none; opacity: 1; transition: opacity .4s ease; }
.gs-corners i { position: absolute; width: 58px; height: 58px; border: 0 solid #b4893a; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%)); }
.gs-corners i:nth-child(1) { left: -10px; top: -10px; border-left-width: 5px; border-top-width: 5px; }
.gs-corners i:nth-child(2) { right: -10px; top: -10px; border-right-width: 5px; border-top-width: 5px; }
.gs-corners i:nth-child(3) { left: -10px; bottom: -10px; border-left-width: 5px; border-bottom-width: 5px; }
.gs-corners i:nth-child(4) { right: -10px; bottom: -10px; border-right-width: 5px; border-bottom-width: 5px; }
.oc-panel .gs-card { transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; }
.oc-panel .gs-pile { pointer-events: auto; }
.oc-panel .g-info { bottom: 6%; }
.oc-panel .gs-dots { bottom: 10.5%; }
.oc-panel .gs-card { margin-top: -310px; }
.oc-panel .gs-corners { margin-top: -310px; }
.sv-count { margin-top: 28px; }
.sv-cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(180 137 58 / 45%); border-bottom: 1px solid rgb(180 137 58 / 45%); }
.sv-cd-cell { padding: 14px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-right: 1px solid rgb(180 137 58 / 30%); }
.sv-cd-cell:last-child { border-right: 0; }
.sv-cd-num { font: 400 30px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; color: #3a4628; font-variant-numeric: tabular-nums; }
.sv-cd-unit { font: 400 9px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #8a7340; }

.oc-panel .gs-pile { pointer-events: none; }
.oc-panel .gs-opened .gs-pile, .gs-opened .gs-pile { pointer-events: auto; }
.oc-lower-back:not(.gs-opened) .gnav, .oc-lower-back:not(.gs-opened) .g-info, .oc-lower-back:not(.gs-opened) .gs-dots { opacity: 0; pointer-events: none; }
.gs-opened .gs-corners { opacity: 0; }
.gs-open { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 50; padding: 12px 26px; border: 1px solid #b4893a; background: rgb(250 247 238 / 92%); color: #3a4628; font: 400 11px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.gs-ready:not(.gs-opened) .gs-open { opacity: 1; pointer-events: auto; }
/* layar pendek (iPhone mini): isi halaman sambutan ikut tinggi panel */
.oc-base .oc-para { top: 10%; width: 560px; font-size: 24px; line-height: 1.5; }
.oc-emboss-mark { width: min(400px, calc(var(--ph, 580px) * .5)); top: 47%; }
/* sisi depan harus benar-benar hilang setelah flip (stempel samar tembus di Safari) */
.t2-front { visibility: visible; }
.t2-flip.is-flipped .t2-front { visibility: hidden; transition: visibility 0s .5s; }
/* scrub lebih panjang agar gulir di HP tidak terlalu cepat */
.opening-journey { height: 950svh; min-height: 5600px; }

/* gulir pembukaan lebih panjang + sisi depan disembunyikan setelah flip */
.opening-journey { height: 1600svh; min-height: 9000px; }

/* iPhone: pakai tinggi layar penuh (lvh), bukan area di atas toolbar Safari */
.scroller { bottom: auto; height: var(--vh, 100%); }
/* foto sampul utuh (tidak terpotong): tinggi panel penuh, sisi kiri-kanan memudar ke gelap */
.oc-back-face { background: #0b0d07; }
.oc-back-face .oc-cover-photo { object-fit: contain; object-position: 50% 50%; transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(404px - var(--ph, 580px) / 3), #000 calc(404px - var(--ph, 580px) / 3 + 110px), #000 calc(404px + var(--ph, 580px) / 3 - 110px), transparent calc(404px + var(--ph, 580px) / 3));
  mask-image: linear-gradient(90deg, transparent calc(404px - var(--ph, 580px) / 3), #000 calc(404px - var(--ph, 580px) / 3 + 110px), #000 calc(404px + var(--ph, 580px) / 3 - 110px), transparent calc(404px + var(--ph, 580px) / 3)); }
.oc-back-face::before { content: ""; position: absolute; inset: -30px; background: url("assets/gallery/cover-photo.webp") 50% 40% / cover; filter: blur(22px) brightness(.55) saturate(1.1); }
/* tanpa vinyet: foto penuh selebar layar, dipotong dari bawah (jalan) agar pasangan utuh */
.oc-back-face::before { display: none; }
.oc-back-face .oc-cover-photo { object-fit: cover; object-position: 50% 4%; -webkit-mask-image: none; mask-image: none; }
.oc-back-face .oc-cover-photo { object-position: 50% 16%; }
/* HP kecil: foto sampul diposisikan agar pasangan terlihat full body, logotype diperkecil */
@media (max-width: 430px) {
  .oc-back-face .oc-cover-photo { object-position: 50% 68%; }
  .oc-back-face .oc-cover-logo { width: 42%; top: 2%; }
}

/* ===== halaman 3: bingkai di atas latar merah marun (seperti referensi) ===== */
.oc-panel.oc-next { background: #5d1110 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 240px 240px; }
.oc-next .oc-frame, .oc-next .pgno { color: #e9d3a0; }
.oc-next .oc-frame .oc-c svg g { stroke: #d9b35f; }
.oc-next .gnav { color: #f1dfae; border-color: rgb(241 223 174 / 35%); }
.oc-next .g-info { color: #e6d3a6; }
.oc-next .g-info b { color: #fff3cf; }
.oc-next .fm-dots i { background: #f1dfae; }
.oc-panel .fm-item { width: 392px; }
.oc-panel .fm-oval { padding: 0; background: none; box-shadow: none; overflow: visible; }
.oc-panel .fm-oval > i { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 3px #5a3d12; }
.oc-panel .fr-orn { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 12px 14px rgb(0 0 0 / 45%)); overflow: visible; }
.oc-panel .fm-perf { padding: 34px 30px; }
.oc-panel .fm-lace { padding: 52px 44px; }
.oc-panel .fm-seal { position: absolute; z-index: 4; left: 50%; top: -66px; width: 116px; height: auto; margin-left: -58px; pointer-events: none; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 40%)); }
.oc-panel .fm-duo { display: flex; gap: 26px; align-items: center; justify-content: center; }
.oc-panel .fm-duo .fm-item { width: 216px; }
.oc-panel .fm-mini { padding: 22px 19px; }
.oc-panel .fm-plate { width: 420px; aspect-ratio: .78; padding: 30px 30px 108px; background: #f1ead8; box-shadow: 0 14px 22px rgb(0 0 0 / 40%); }
.oc-panel .fm-plate::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(120 96 48 / 40%); pointer-events: none; }
.oc-panel .fm-clip { top: -58px; width: 96px; height: 76px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 35%)); z-index: 3; }
.oc-panel .fm-clip svg { display: block; width: 100%; height: 100%; }
.oc-panel .fm-cap { position: absolute; left: 30px; right: 30px; bottom: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font: 500 11px/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; color: #5d4a22; text-align: left; border-top: 1px solid rgb(93 74 34 / 45%); padding-top: 10px; }
.oc-panel .fm-cap u { text-decoration: none; }
.oc-panel .fm-item { width: 372px; }
.oc-panel .fm-seal { top: -52px; width: 96px; margin-left: -48px; }
.oc-panel .fm-oval { width: 410px; }
.oc-panel .fm-item img.fm-seal { position: absolute; width: 96px; height: auto; left: 50%; top: -52px; margin-left: -48px; object-fit: contain; }
.oc-panel .fm-clip { top: -50px; width: 110px; height: 88px; margin-left: 0; }
/* siku emas lebih besar membingkai kartu teratas */
.gs-corners i { width: 104px; height: 104px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 30%)); }
.gs-corners i:nth-child(1) { left: -24px; top: -24px; border-left-width: 8px; border-top-width: 8px; }
.gs-corners i:nth-child(2) { right: -24px; top: -24px; border-right-width: 8px; border-top-width: 8px; }
.gs-corners i:nth-child(3) { left: -24px; bottom: -24px; border-left-width: 8px; border-bottom-width: 8px; }
.gs-corners i:nth-child(4) { right: -24px; bottom: -24px; border-right-width: 8px; border-bottom-width: 8px; }

/* Save the Date: kalender hijau zaitun */
.sv-page { background: #3a4628 url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; }
.sv-min { color: #f1ead0; }
.sv-eyebrow { color: #cdb878; }
.sv-title { color: #e6c883; text-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.sv-month { color: #f1ead0; }
.sv-month b { color: #e6c883; }
.sv-cal span:nth-child(-n+7) { color: #cdb878; }
.sv-cal .sv-day { background: #e6c883; color: #2b3419; font-weight: 600; }
.sv-date { color: #e6c883; }
.sv-cd-grid { border-color: rgb(230 200 131 / 55%); }
.sv-cd-cell { border-color: rgb(230 200 131 / 35%); }
.sv-cd-num { color: #f1ead0; }
.sv-cd-unit { color: #cdb878; }
.sv-page .pgno { color: rgb(241 234 208 / 75%); }

/* Cerita Kami: 2 kolom, doodle besar, teks singkat */
.story-list { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
.story-item::after { display: none !important; }
.story-item:last-child { grid-column: 1 / -1; max-width: 62%; margin: 0 auto; }
.story-scene { width: 100%; margin: 0 auto 6px; stroke-width: 1.5; }
.story-when { font-size: 24px; }
.story-item-title { font-size: clamp(17px, 5vw, 21px); line-height: 1.12; margin-bottom: 6px; }
.story-item-text { font-size: 12.5px; line-height: 1.55; }

/* Lokasi: peta + tombol, lalu detail acara */
.lc-loc { position: relative; z-index: 2; box-sizing: border-box; padding: 64px 22px 72px; background: #fdfcf8; text-align: center; color: #3a4628; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lc-eyebrow { margin: 0; font: 400 11px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .3em; color: #8a7340; text-transform: uppercase; }
.lc-venue { margin: 6px 0 0; font: 500 26px/1.15 "Rosemartin", serif; color: #3a4628; }
.lc-addr { margin: 0; font: 400 13px/1.55 "Plus Jakarta Sans", sans-serif; color: #6d6a4f; max-width: 30ch; }
.lc-map { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; margin-top: 10px; border: 1px solid rgb(180 137 58 / 55%); background: #ece8d6; overflow: hidden; }
.lc-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.lc-btn { margin-top: 4px; min-height: 46px; display: inline-flex; align-items: center; padding: 0 30px; border: 1.5px solid #3a4628; border-radius: 24px; color: #3a4628; font: 500 13px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; text-decoration: none; background: transparent; }
.lc-btn:active { background: #3a4628; color: #fdfcf8; }
.lc-detail { width: 100%; max-width: 360px; margin-top: 34px; padding-top: 30px; border-top: 1px solid rgb(180 137 58 / 45%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lc-date { margin: 0; font: 500 20px/1.2 "Rosemartin", serif; color: #3a4628; }
.lc-times { margin: 4px 0 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgb(180 137 58 / 45%); }
.lc-times > div { padding: 16px 8px; }
.lc-times > div + div { border-left: 1px solid rgb(180 137 58 / 45%); }
.lc-times dt { margin: 0 0 8px; font: 400 10px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #8a7340; }
.lc-times dd { margin: 0; font: 400 24px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; color: #3a4628; }
.lc-dress { margin: 0; font: 400 13px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; color: #6d6a4f; }
.lc-loc .pgno { color: #8a7340; }
.lc-map iframe { pointer-events: none; }
.lc-map.is-on iframe { pointer-events: auto; }

/* RSVP ringkas */
.rsvp-need { margin: 0 auto 18px; max-width: 34ch; text-align: center; font: 400 13px/1.5 "Plus Jakarta Sans", sans-serif; color: #6d5a2a; padding: 10px 14px; border: 1px solid rgb(180 137 58 / 55%); background: rgb(255 250 232 / 55%); }
.rsvp-need b { font-weight: 600; color: #3a4628; }
#guestCountGroup[data-single="1"] { display: none !important; }
.form-group input[type="email"] { width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 2px; border: 0; border-bottom: 1px solid rgb(168 134 66 / 60%); border-radius: 0; background: transparent; color: var(--ink-primary); font-family: var(--noir-sans); font-size: 14px; font-weight: 300; }
.form-group input[type="email"]:focus { outline: 0; box-shadow: none; border-bottom-color: var(--noir-ink); }

/* kartu QRIS */
.gift-qris-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 18px; border: 1px solid rgb(168 134 66 / 55%); background: linear-gradient(rgb(247 243 226 / 92%), rgb(247 243 226 / 92%)); text-align: center; color: #3a4628; }
.gift-qris-card .card-top-row { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.gift-qris-card .qris-merchant { font: 500 12px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .18em; color: #8a7340; }
.gift-qris-card .qris-img { display: block; width: min(100%, 260px); height: auto; border: 1px solid rgb(168 134 66 / 35%); background: #fff; }
.gift-qris-card .qris-note { margin: 0; font: 400 12px/1.4 "Plus Jakarta Sans", sans-serif; color: #6d6a4f; }
.gift-qris-card .copy-pill-btn { text-decoration: none; }

/* ===== galeri: siku foto bervolume, tumpukan terlihat, dan pintu penutup ===== */
.gs-corners { filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%)); }
.gs-corners i { border: 0 !important; width: 108px; height: 108px; filter: none; }
.gs-corners i::before, .gs-corners i::after { content: ""; position: absolute; inset: 0; }
.gs-corners i:nth-child(1) { left: -22px; top: -22px; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(135deg, #fff1bf 0%, #d9ac4c 38%, #8a6420 78%, #b88a36 100%); }
.gs-corners i:nth-child(2) { right: -22px; top: -22px; left: auto; clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(225deg, #fff1bf 0%, #d9ac4c 38%, #8a6420 78%, #b88a36 100%); }
.gs-corners i:nth-child(3) { left: -22px; bottom: -22px; top: auto; clip-path: polygon(0 0, 0 100%, 100% 100%); background: linear-gradient(45deg, #fff1bf 0%, #d9ac4c 38%, #8a6420 78%, #b88a36 100%); }
.gs-corners i:nth-child(4) { right: -22px; bottom: -22px; left: auto; top: auto; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(315deg, #fff1bf 0%, #d9ac4c 38%, #8a6420 78%, #b88a36 100%); }
/* lipatan dalam: sisi miring lebih terang + saku gelap tempat sudut foto masuk */
.gs-corners i::before { background: linear-gradient(135deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 42%); }
.gs-corners i:nth-child(2)::before { background: linear-gradient(225deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 42%); }
.gs-corners i:nth-child(3)::before { background: linear-gradient(45deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 42%); }
.gs-corners i:nth-child(4)::before { background: linear-gradient(315deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 42%); }
.gs-corners i::after { inset: 14px; background: rgb(60 40 8 / 28%); }
.gs-corners i:nth-child(1)::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
.gs-corners i:nth-child(2)::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.gs-corners i:nth-child(3)::after { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.gs-corners i:nth-child(4)::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.oc-panel .gs-card { box-shadow: 0 6px 12px rgb(0 0 0 / 28%), 0 1px 2px rgb(0 0 0 / 30%); }
.gs-doors { position: absolute; left: 50%; top: 50%; width: 424px; height: 604px; margin: -312px 0 0 -212px; perspective: 1600px; z-index: 45; pointer-events: none; }
.oc-panel .gs-doors { margin-top: -312px; }
.gs-door { position: absolute; top: 0; width: 50%; height: 100%; display: block; backface-visibility: hidden;
  background: linear-gradient(90deg, rgb(0 0 0 / 22%), rgb(0 0 0 / 0) 14%, rgb(0 0 0 / 0) 86%, rgb(0 0 0 / 30%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 300px auto, #3f4b27;
  box-shadow: inset 0 0 0 9px #364223, inset 0 0 0 10px rgb(214 176 90 / 85%), 0 10px 22px rgb(0 0 0 / 40%);
  transition: transform 1.1s cubic-bezier(.55, .05, .25, 1); }
.gs-door::before { content: ""; position: absolute; inset: 34px 30px; border: 1px solid rgb(214 176 90 / 70%); box-shadow: inset 0 0 0 5px rgb(0 0 0 / 14%), inset 0 0 0 6px rgb(214 176 90 / 40%); }
.gs-door::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2c4, #d3a548 45%, #6e4e16); box-shadow: 0 3px 5px rgb(0 0 0 / 45%); }
.gs-door-l { left: 0; transform-origin: 0 50%; border-radius: 3px 0 0 3px; }
.gs-door-r { right: 0; transform-origin: 100% 50%; border-radius: 0 3px 3px 0; }
.gs-door-l::after { right: 16px; }
.gs-door-r::after { left: 16px; }
.gs-doors-open .gs-door-l { transform: rotateY(-108deg); }
.gs-doors-open .gs-door-r { transform: rotateY(108deg); }
.gs-opened .gs-doors { visibility: hidden; }
.gs-open { top: 50%; bottom: auto; margin-top: -22px; z-index: 60; }
.gs-doors-open .gs-open { opacity: 0 !important; pointer-events: none !important; }
.oc-panel .gs-open { padding: 20px 46px; font-size: 22px; letter-spacing: .24em; margin-top: -34px; border: 2px solid #d6b05a; background: linear-gradient(#f9eecb, #ead7a0); color: #3a4628; box-shadow: 0 8px 18px rgb(0 0 0 / 45%); }

/* doodle gaya naif (garis tipis tangan, isi krem, tepi stiker) */
.story-scene { color: #2b2a1c; stroke: #2b2a1c; stroke-width: 1.5; filter: url(#stkHalo); overflow: visible; }
.story-scene path { fill: #f6efdc; }
.story-scene .f { fill: #7b2d2d; stroke: #2b2a1c; stroke-width: 1.3; }
.story-scene .h { fill: #3a2a22; stroke: #2b2a1c; stroke-width: 1; }
.story-scene .fg { fill: #8d3a38; stroke: #2b2a1c; stroke-width: 1.3; }
.story-scene .bg { fill: #f6efdc; stroke: #2b2a1c; stroke-width: 1.2; }
.story-scene .sk { fill: #ead2a2; stroke: #2b2a1c; }
.story-scene .acc { fill: none; stroke: #c4503a; stroke-width: 1.5; }
.story-scene .acc.fx { stroke: #c4503a; }
.story-scene .ft { fill: none; stroke: #2b2a1c; stroke-width: .9; }
/* versi garis tipis di atas kertas krem (mirip referensi) */
.story-scene { filter: none; background: #f3eddc; border-radius: 14px; padding: 8px 4px 4px; box-sizing: border-box; stroke-width: 1.1; }
.story-scene path { fill: none; }
.story-scene .f { fill: #7b2d2d; stroke-width: 1.1; }
.story-scene .h { fill: #3a2a22; stroke-width: .9; }
.story-scene .fg { fill: #8d3a38; stroke-width: 1.1; }
.story-scene .bg { fill: #f3eddc; stroke-width: 1; }
.story-scene .sk { fill: #ecd5a6; stroke-width: 1.1; }
.story-scene .acc { stroke-width: 1.25; }
.story-scene { background: #f3efe2 radial-gradient(rgb(0 0 0 / 7%) 1px, transparent 1.2px) 0 0 / 22px 22px; stroke-width: 1.15; }
.story-scene path { fill: none; }

/* penutup kotak: satu tutup berengsel di atas, terangkat ke belakang */
.gs-lid { position: absolute; inset: 0; display: block; transform-origin: 50% 0; backface-visibility: hidden; border-radius: 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(0 0 0 / 16%)), url("assets/tex-olive-soft.webp?v=4") 0 0 / 300px auto, #3f4b27;
  box-shadow: inset 0 0 0 11px #364223, inset 0 0 0 12px rgb(214 176 90 / 85%), inset 0 0 0 44px rgb(0 0 0 / 5%), inset 0 0 0 45px rgb(214 176 90 / 45%), 0 9px 0 -1px #29331a, 0 16px 26px rgb(0 0 0 / 42%);
  transition: transform 1.2s cubic-bezier(.5, .05, .25, 1); }
.gs-lid::before { content: ""; position: absolute; left: 50%; bottom: -12px; width: 76px; height: 30px; margin-left: -38px; border-radius: 6px 6px 10px 10px; background: linear-gradient(#fbeab4, #d3a548 45%, #7d5a1b); box-shadow: 0 4px 6px rgb(0 0 0 / 45%); }
.gs-lid::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 9px; height: 14px; margin-left: -4.5px; border-radius: 5px 5px 2px 2px; background: #4a3410; opacity: .8; }
.gs-doors-open .gs-lid { transform: rotateX(-112deg); }

/* ===== album: halaman berlubang, tumpukan foto hanya terlihat ujung atasnya ===== */
.gs-doors, .gs-corners { display: none !important; }
.oc-panel .gs-pile { --sink: calc(var(--ph, 580px) * .1 + 250px); clip-path: inset(0 -260px 40% -260px); }
.oc-panel .gs-opened .gs-pile, .oc-lower-back.gs-opened .gs-pile { clip-path: none; }
.oc-lower-back.gs-doors-open .gs-card { transition: transform 1s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; }
.gs-slot, .gs-slot-lip { position: absolute; left: 50%; display: block; width: 512px; margin-left: -256px; pointer-events: none; transition: opacity .5s ease; }
.gs-slot { top: 60%; height: 40px; margin-top: -20px; z-index: 1; border-radius: 20px; background: linear-gradient(#0c0905, #2d2616 60%, #1b150b);
  box-shadow: 0 0 0 4px #ebe3c8, 0 0 0 5px rgb(118 92 40 / 55%), inset 0 5px 8px rgb(0 0 0 / 70%); }
.gs-slot-lip { top: 60%; height: 20px; z-index: 3; border-radius: 0 0 20px 20px; background: linear-gradient(#17120a, #2b2415 70%, #3b3220); box-shadow: 0 0 0 4px #ebe3c8, 0 0 0 5px rgb(118 92 40 / 55%); clip-path: inset(0 -6px -6px -6px); }
.oc-lower-back.gs-opened .gs-slot, .oc-lower-back.gs-opened .gs-slot-lip { opacity: 0; }
.oc-panel .gs-open { top: calc(60% + 64px); bottom: auto; margin-top: 0; }

/* kantong kertas yang ditempel dan dijahit di halaman */
.gs-slot { display: none !important; }
.oc-lower-back .gs-slot-lip { top: calc(60% - 3px); height: 190px; width: 540px; margin-left: -270px; z-index: 3; border-radius: 6px 6px 30px 30px; clip-path: none;
  background: #e8dab9 url("assets/tex-paper.webp") 0 0 / 360px auto; background-blend-mode: multiply;
  box-shadow: 0 -3px 6px rgb(60 40 10 / 22%), 0 10px 16px rgb(60 40 10 / 22%), inset 0 0 0 1px rgb(120 92 40 / 25%), inset 0 10px 14px -10px rgb(255 255 255 / 80%); }
.oc-lower-back .gs-slot-lip::before { content: ""; position: absolute; left: 14px; right: 14px; top: 16px; bottom: 14px; border: 2.5px dashed #9a4a3a; border-top: 0; border-radius: 0 0 22px 22px; opacity: .85; }
.oc-lower-back .gs-slot-lip::after { content: ""; position: absolute; left: 14px; right: 14px; top: 16px; height: 0; border-top: 2.5px dashed #9a4a3a; opacity: .85; }
.oc-panel .gs-open { top: calc(60% + 70px); }
/* kantong putih seukuran foto */
.oc-lower-back .gs-slot-lip { width: 400px; margin-left: -200px; height: auto; bottom: 4%; border-radius: 6px 6px 14px 14px;
  background: #fffdf6 url("assets/tex-paper.webp") 0 0 / 360px auto; background-blend-mode: soft-light; }
.oc-lower-back .gs-slot-lip::before { border-radius: 0 0 8px 8px; bottom: 16px; }
/* saku: kertas sewarna halaman, pendek, hanya jahitan + bayangan tipis yang membedakannya */
.oc-lower-back .gs-slot-lip { height: 176px; bottom: auto; width: 408px; margin-left: -204px; border-radius: 4px 4px 12px 12px;
  background: #f5f4de url("assets/tex-paper.webp") 0 0 / 360px auto; background-blend-mode: soft-light;
  box-shadow: 0 -2px 4px rgb(70 55 20 / 18%), 0 3px 7px rgb(70 55 20 / 20%), inset 0 0 0 1px rgb(120 100 50 / 14%), inset 0 7px 9px -7px rgb(70 55 20 / 28%); }
.oc-lower-back .gs-slot-lip::before { left: 12px; right: 12px; top: 14px; bottom: 12px; border: 2px dashed #a8604a; border-top: 0; border-radius: 0 0 8px 8px; opacity: .8; }
.oc-lower-back .gs-slot-lip::after { left: 12px; right: 12px; top: 14px; border-top: 2px dashed #a8604a; opacity: .8; }
.oc-panel .gs-open { top: calc(60% + 62px); }
/* saku gemuk: menggembung, warna & jahitan senada dengan halaman */
.oc-lower-back .gs-slot-lip { height: 214px; width: 416px; margin-left: -208px; border-radius: 12px 12px 44px 44px / 10px 10px 36px 36px;
  background: radial-gradient(ellipse at 50% 18%, rgb(255 255 248 / 70%), rgb(255 255 248 / 0) 70%), #f4f2dc url("assets/tex-paper.webp") 0 0 / 360px auto; background-blend-mode: normal, soft-light;
  box-shadow: 0 -3px 6px rgb(70 55 20 / 14%), 0 10px 16px -4px rgb(70 55 20 / 30%), inset 0 10px 12px -8px rgb(255 255 255 / 90%), inset 0 -16px 20px -12px rgb(120 96 40 / 34%), inset 6px 0 10px -8px rgb(120 96 40 / 18%), inset -6px 0 10px -8px rgb(120 96 40 / 18%); }
.oc-lower-back .gs-slot-lip::before { left: 16px; right: 16px; top: 18px; bottom: 16px; border: 2px dashed #b4893a; border-top: 0; border-radius: 0 0 32px 32px; opacity: .75; }
.oc-lower-back .gs-slot-lip::after { left: 16px; right: 16px; top: 18px; border-top: 2px dashed #b4893a; opacity: .75; }
.oc-panel .gs-open { top: calc(60% + 82px); }

/* kantong kertas seukuran foto: lebar 400px, memanjang ke bawah halaman */
.oc-lower-back { --pk: max(calc(var(--ph, 580px) * .5), calc(var(--ph, 580px) * .96 - 580px)); }
.oc-panel .gs-pile { --sink: calc(var(--pk) - var(--ph, 580px) * .5 + 250px); clip-path: inset(0 -260px calc(100% - var(--pk)) -260px); }
.oc-panel .oc-lower-back.gs-opened .gs-pile, .oc-lower-back.gs-opened .gs-pile { clip-path: none; }
.oc-lower-back .gs-slot-lip { top: calc(var(--pk) - 3px); bottom: 4%; height: auto; width: 408px; margin-left: -204px; border-radius: 10px 10px 30px 30px / 8px 8px 26px 26px;
  background: linear-gradient(rgb(120 96 40 / 24%), rgb(120 96 40 / 24%)) 0 40px / 100% 1.5px no-repeat, radial-gradient(ellipse at 50% 12%, rgb(255 255 248 / 70%), rgb(255 255 248 / 0) 65%), #f4f2dc url("assets/tex-paper.webp") 0 0 / 360px auto;
  background-blend-mode: normal, normal, soft-light; }
.oc-lower-back .gs-slot-lip::before { top: 54px; bottom: 18px; border-radius: 0 0 24px 24px; }
.oc-lower-back .gs-slot-lip::after { top: 54px; }
.oc-panel .gs-open { top: calc(var(--pk) + 84px); }
.oc-lower-back .gs-slot-lip { width: 468px; margin-left: -234px; }
.oc-lower-back .gs-slot-lip::before, .oc-lower-back .gs-slot-lip::after { left: 20px; right: 20px; }
/* kantong lebih lebar (menutup tumpukan yang miring) dan terlihat gemuk */
.oc-lower-back .gs-slot-lip { width: 524px; margin-left: -262px; border-radius: 14px 14px 58px 58px / 12px 12px 50px 50px;
  box-shadow: 0 -4px 8px rgb(70 55 20 / 16%), 0 16px 22px -4px rgb(70 55 20 / 36%), inset 0 14px 16px -10px rgb(255 255 255 / 95%), inset 0 -26px 30px -16px rgb(120 96 40 / 40%), inset 14px 0 18px -12px rgb(120 96 40 / 26%), inset -14px 0 18px -12px rgb(120 96 40 / 26%); }
.oc-lower-back .gs-slot-lip::before, .oc-lower-back .gs-slot-lip::after { left: 26px; right: 26px; }
.oc-lower-back .gs-slot-lip::before { border-radius: 0 0 44px 44px; bottom: 24px; }

/* tata letak halaman 4: grup (foto mengintip + kantong + tombol) berada di tengah vertikal, tidak menempel ke bagian berikutnya */
.oc-lower-back { --pk: max(calc(var(--ph, 580px) * .5 - 250px), 72px); }
.oc-lower-back .gs-slot-lip { bottom: auto; height: min(560px, calc(var(--ph, 580px) * .94 - var(--pk))); }
.oc-panel .gs-open { top: calc(var(--pk) + 76px); }
.oc-panel .g-info, .oc-panel .gs-dots { bottom: 6%; }
.oc-panel .gs-dots { bottom: 10%; }

/* gerak buka/tutup album */
.oc-panel .gs-pile { clip-path: inset(0 -260px calc(100% - var(--pk)) -260px); transition: clip-path .7s cubic-bezier(.4, 0, .2, 1); }
.oc-lower-back.gs-reveal .gs-pile, .oc-lower-back.gs-opened .gs-pile { clip-path: inset(-300px -420px -300px -420px); }
.oc-lower-back .gs-slot-lip { opacity: 1; transition: opacity .5s ease .1s; }
.oc-lower-back.gs-reveal .gs-slot-lip, .oc-lower-back.gs-opened .gs-slot-lip { opacity: 0; transition: opacity .6s ease; }
.gs-close { position: absolute; left: 34px; top: 30px; z-index: 6; padding: 12px 22px; border: 1px solid #b4893a; border-radius: 22px; background: rgb(250 247 238 / 90%); color: #6d5a2a; font: 400 15px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.oc-lower-back.gs-opened .gs-close { opacity: 1; pointer-events: auto; }
.oc-panel .gs-card { transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease; }
.oc-lower-back.gs-closing .gs-open { opacity: 0; }

/* ===== album: foto keluar dari saku (layar tinggi / HP) ===== */
.oc-panel .gs-pile { --cdy: calc(var(--pk) - var(--ph, 580px) * .5 + 250px); --ody: 0px; --os: 1; }
.oc-lower-back.gs-tall { --pk: calc(var(--ph, 580px) * .62); }
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk) - var(--ph, 580px) * .5 - 270px); --os: .86; }
.oc-lower-back.gs-tall .gs-slot-lip { height: calc(var(--ph, 580px) * .94 - var(--pk)); }
.oc-lower-back.gs-tall.gs-reveal .gs-slot-lip, .oc-lower-back.gs-tall.gs-opened .gs-slot-lip { opacity: 1; }
.oc-lower-back.gs-tall.gs-reveal .gs-pile, .oc-lower-back.gs-tall.gs-opened .gs-pile { clip-path: inset(-300px -420px calc(100% - var(--pk)) -420px); }
.oc-lower-back.gs-tall .gs-close { left: 50%; top: calc(var(--pk) + 76px); transform: translateX(-50%); padding: 20px 46px; border: 2px solid #d6b05a; border-radius: 0; background: linear-gradient(#f9eecb, #ead7a0); color: #3a4628; font-size: 22px; letter-spacing: .2em; box-shadow: 0 8px 18px rgb(0 0 0 / 30%); z-index: 6; }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 190px); bottom: auto; z-index: 6; }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 226px); bottom: auto; z-index: 6; }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 290px); }

/* ===== saku: lebar sama dengan foto, foto di atas lapisan saku saat terbuka ===== */
.oc-lower-back .gs-slot-lip { width: 412px; margin-left: -206px; }
.oc-lower-back .gs-slot-lip::before, .oc-lower-back .gs-slot-lip::after { left: 16px; right: 16px; }
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk) - var(--ph, 580px) * .5 - 190px); --os: 1; }
.oc-lower-back.gs-tall.gs-reveal .gs-pile, .oc-lower-back.gs-tall.gs-opened .gs-pile { clip-path: inset(-300px -420px -300px -420px); z-index: 4; }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 150px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 250px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 284px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 210px); z-index: 7; }

/* ===== aksesibilitas ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gs-open:focus-visible, .gs-close:focus-visible, .gnav:focus-visible, .fm-pause:focus-visible, .fm-track:focus-visible { outline: 3px solid #2b3519; outline-offset: 4px; box-shadow: 0 0 0 7px #f7f3dd; }
.fm-track:focus-visible { outline-offset: -6px; box-shadow: none; }
/* target sentuh ≥ 44px (komposisi diskalakan ±0.46 di HP) */
.oc-panel .gs-open, .oc-lower-back.gs-tall .gs-close { padding: 38px 52px; font-size: 24px; }
.oc-panel .gnav { width: 100px; height: 100px; margin-top: -50px; }
.fm-pause { position: absolute; left: 30px; top: 30px; z-index: 7; width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid rgb(241 223 174 / 55%); border-radius: 50%; background: rgb(0 0 0 / 18%); color: #f1dfae; cursor: pointer; }
.fm-pause svg { width: 40px; height: 40px; }
/* kontrol yang disembunyikan tidak boleh bisa difokus */
.oc-lower-back:not(.gs-opened) .gnav, .oc-lower-back:not(.gs-opened) .g-info, .oc-lower-back:not(.gs-opened) .gs-dots, .oc-lower-back:not(.gs-opened) .gs-close { visibility: hidden; }
.oc-lower-back.gs-doors-open .gs-open { visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
@media (prefers-reduced-motion: reduce) {
  .gs-card, .oc-panel .gs-card, .oc-lower-back .gs-slot-lip, .oc-panel .gs-pile { transition: none !important; }
}
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk) - var(--ph, 580px) * .5 - 235px); }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 128px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 252px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 286px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 255px); }

/* ===== halaman 4: saku di tengah saat tertutup, turun saat foto keluar ===== */
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .5 - 150px); --pk1: calc(var(--ph, 580px) * .62); --pk: var(--pk0); }
.oc-lower-back.gs-tall.gs-doors-open { --pk: var(--pk1); }
.oc-lower-back.gs-tall .gs-pile { --cdy: calc(var(--pk0) - var(--ph, 580px) * .5 + 250px); --ody: calc(var(--pk1) - var(--ph, 580px) * .5 - 235px); transition: clip-path .9s cubic-bezier(.45, .05, .25, 1); }
.oc-lower-back.gs-tall .gs-slot-lip { height: min(330px, calc(var(--ph, 580px) * .94 - var(--pk))); transition: top .9s cubic-bezier(.45, .05, .25, 1), opacity .5s ease; }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { transition: top .9s cubic-bezier(.45, .05, .25, 1), opacity .4s ease, visibility 0s; }
.oc-lower-back.gs-tall .gs-dots, .oc-lower-back.gs-tall .g-info { transition: top .9s cubic-bezier(.45, .05, .25, 1), opacity .4s ease; }
/* scroll pembukaan lebih pendek */
.opening-journey { height: 1000svh; min-height: 5600px; }

/* saku tetap di tempat; foto naik keluar dan berhenti di atasnya */
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .58); --pk1: calc(var(--ph, 580px) * .58); }
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk1) - var(--ph, 580px) * .5 - 201px); --os: .9; }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 221px); }

/* saku lebih besar */
.oc-lower-back .gs-slot-lip { width: 472px; margin-left: -236px; }
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .52); --pk1: calc(var(--ph, 580px) * .52); }
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk1) - var(--ph, 580px) * .5 - 184px); --os: .84; }
.oc-lower-back.gs-tall .gs-slot-lip { height: min(430px, calc(var(--ph, 580px) * .95 - var(--pk))); }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 150px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 290px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 326px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 204px); }

/* saku di tengah halaman (vertikal); foto terbuka berada di lapisan atas saku */
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .5 - 190px); --pk1: calc(var(--ph, 580px) * .5 - 190px); }
.oc-lower-back.gs-tall .gs-pile { --ody: 10px; --os: .86; }
.oc-lower-back.gs-tall .gs-slot-lip { height: 430px; }
.oc-lower-back.gs-tall .gs-open { top: calc(var(--pk) + 150px); }
.oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 470px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 586px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 622px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) + 185px); }
.oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 506px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 636px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 672px); }
.oc-lower-back.gs-lift .gs-card { box-shadow: 0 22px 34px rgb(0 0 0 / 30%), 0 3px 6px rgb(0 0 0 / 26%); }
.oc-panel .gs-card { transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease, box-shadow .5s ease; }

/* ===== album: gerak ala amplop (dua lapisan saku: belakang & depan, foto di antaranya) ===== */
.gs-slot-lip.is-back { z-index: 1; }
.gs-slot-lip.is-front { z-index: 3; }
.oc-lower-back.gs-tall .gs-pile { --cdy: 31px; --cs: .9; --ody: -130px; --os: 1; clip-path: none !important; z-index: 2 !important; transition: none; }
.oc-lower-back.gs-tall .gs-slot-lip { height: 560px; transition: none; }
.oc-lower-back.gs-tall.gs-front-off .gs-slot-lip.is-front { opacity: 0; }
.oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 404px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 516px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 548px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) + 40px); }
.oc-lower-back.gs-tall .gs-pile { --ody: -150px; }
.oc-lower-back.gs-tall .gs-slot-lip { height: 600px; }
.oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 444px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 548px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 580px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) + 20px); }
/* info wajib RSVP diperbesar */
.rsvp-need { max-width: 38ch; margin-bottom: 24px; padding: 16px 20px; font-size: 17px; line-height: 1.5; border-width: 1.5px; }
.rsvp-need b { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #8a5a1a; }
.gift-qris-card .qris-img { width: min(100%, 300px); aspect-ratio: 1; object-fit: contain; }

/* ===== Cerita Kami: satu kartu per bab (slate zaitun), judul tulisan tangan, teks mesin ketik; poster penutup ===== */
section#storySection.story-page { background: #46524a url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; background-blend-mode: soft-light; padding: 76px 22px 0; color: #f3efe0; }
#storySection .story-inner { max-width: 430px; margin: 0 auto; padding: 0; }
#storySection .story-eyebrow { margin: 0 0 8px; text-align: center; font: 300 11px/1 "Jost", sans-serif; letter-spacing: .42em; text-transform: uppercase; color: rgb(243 239 224 / 72%); }
#storySection .story-title { margin: 0; text-align: center; font: 400 44px/1.1 "Gaegu", cursive; letter-spacing: .28em; text-transform: uppercase; color: #f3efe0; }
#storySection .story-intro { margin: 18px auto 0; max-width: 30ch; text-align: center; font: 400 14px/1.7 "Special Elite", monospace; color: rgb(243 239 224 / 82%); }
.st-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 74px; }
.st-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-when { margin: 0 0 8px; font: 300 11px/1 "Jost", sans-serif; letter-spacing: .38em; text-transform: uppercase; color: rgb(243 239 224 / 70%); }
.st-ctitle { margin: 0; font: 400 26px/1.25 "Gaegu", cursive; letter-spacing: .24em; text-transform: uppercase; color: #f3efe0; }
.st-img { display: block; width: min(100%, 330px); height: auto; margin: 26px auto 24px; }
.st-text { margin: 0; max-width: 33ch; text-align: justify; text-align-last: center; hyphens: auto; font: 400 15px/1.75 "Special Elite", "Courier Prime", monospace; color: #f3efe0; }
.st-poster { margin: 96px -22px 0; padding: 54px 22px 28px; background: #f4eee0 url("assets/tex-paper.webp") 0 0 / 360px auto; background-blend-mode: multiply; color: #b8321a; overflow: hidden; }
.st-pq { margin: 0; text-align: justify; text-align-last: justify; text-transform: uppercase; font: 500 19px/1.12 "Cormorant Garamond", serif; letter-spacing: .02em; }
.st-by { margin: 14px 0 0; display: flex; justify-content: center; align-items: baseline; gap: 14px; font: italic 500 22px/1 "Cormorant Garamond", serif; }
.st-by span { font-size: 18px; }
.st-pimg { position: relative; z-index: 2; display: block; width: 62%; max-width: 270px; height: auto; margin: 12px auto -30px; }
.st-big { margin: 0; display: flex; flex-direction: column; text-align: center; font: 900 clamp(88px, 31vw, 138px)/.8 "Inter Tight", "Helvetica Neue", sans-serif; letter-spacing: -.045em; color: #b8321a; }
.st-big span { display: block; }
#storySection .pgno { color: rgb(243 239 224 / 75%); }
.st-big { font-size: clamp(72px, 25vw, 124px); }

/* ===== album: saku tetap (tidak memudar); foto keluar dari mulut saku lalu bertumpuk di atasnya ===== */
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .54); --pk1: calc(var(--ph, 580px) * .54); }
.oc-lower-back.gs-tall .gs-pile { --cdy: calc(var(--pk0) - var(--ph, 580px) * .5 + 134px); --ody: calc(var(--pk1) - var(--ph, 580px) * .5 - 230px); --cs: .6; --os: .78; }
.oc-lower-back.gs-tall .gs-slot-lip { height: 300px; opacity: 1 !important; }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 100px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 218px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 252px); }
.oc-lower-back.gs-tall .gnav { top: calc(var(--pk) - 250px); }
.gs-heading { display: none; }
.oc-lower-back.gs-tall .gs-heading { display: flex; position: absolute; left: 0; right: 0; top: calc(var(--pk) - 250px); z-index: 2; margin: 0; flex-direction: column; align-items: center; gap: 14px; text-align: center; transition: opacity .5s ease; }
.gs-heading span { font: 400 40px/1.1 "Gaegu", cursive; letter-spacing: .3em; text-transform: uppercase; color: #3a4628; padding-left: .3em; }
.gs-heading small { font: 300 17px/1 "Jost", sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #8a7340; padding-left: .34em; }
.oc-lower-back.gs-tall.gs-doors-open .gs-heading { opacity: 0; }
.opening-journey { height: 1200svh; min-height: 6400px; }

/* album: bagian lebih tinggi, kontrol lega di dalam saku */
.oc-lower-back.gs-tall .gs-slot-lip { height: 420px; }
.oc-lower-back.gs-tall .gs-open, .oc-lower-back.gs-tall .gs-close { top: calc(var(--pk) + 76px); }
.oc-lower-back.gs-tall .gs-dots { top: calc(var(--pk) + 262px); }
.oc-lower-back.gs-tall .g-info { top: calc(var(--pk) + 312px); }

/* Save the Date: kartu kanvas */
section.sv-page { background: #2e3921 url("assets/tex-olive-soft.webp?v=4") 0 0 / 420px auto; background-blend-mode: soft-light; }
.sv-min { position: relative; width: calc(100% - 28px); max-width: 360px; margin: 28px auto; padding: 48px 24px 40px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 7%) 0 1px, transparent 1px 3px),
    linear-gradient(rgb(255 255 255 / 5%), rgb(0 0 0 / 8%)), #55633b;
  box-shadow: 0 26px 44px rgb(0 0 0 / 45%), 0 3px 8px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(255 255 255 / 10%), inset 0 0 0 9px #55633b, inset 0 0 0 10px rgb(230 200 131 / 45%); }
.opening-journey { height: 700svh; min-height: 4400px; }
/* selama pembukaan, gulir bawaan dimatikan; posisi digerakkan kode (initScrollDamping) */
.scroller.is-steered { overflow-y: hidden; touch-action: none; }
.opening-journey { height: 480svh; min-height: 3800px; }

/* layar sentuh: kurangi efek filter berat yang digambar ulang tiap frame (cegah kehabisan memori di iPhone) */
@media (hover: none) {
  .op-front, .op-flap-face svg, .oc-header, .oc-shield-wrap, .oc-panel .fr-bg, .oc-panel .fr-orn, .oc-panel .fm-seal, .oc-panel .fm-clip,
  .gs-corners, .gs-corners i, .t2-an { filter: none !important; }
  .oc-panel .fr-orn { opacity: .98; }
  .oc-panel .gs-card { box-shadow: 0 4px 10px rgb(0 0 0 / 26%); }
}

/* layar awal: kontrol di atas area toolbar Safari; petunjuk gulir besar & jelas, tombol kecil */
.t2-lang { bottom: calc(var(--tb, 0px) + max(10px, env(safe-area-inset-bottom))); }
.t2-open { width: min(50vw, 190px); height: 38px; font-size: 12.5px; border-radius: 19px; bottom: calc(var(--tb, 0px) + max(10px, env(safe-area-inset-bottom)) + 52px); }
.t2-hint { bottom: calc(var(--tb, 0px) + max(10px, env(safe-area-inset-bottom)) + 52px + 38px + 30px); gap: 12px; font: 600 17px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .2em; color: #f6f0d4; text-align: center; }
.t2-hint span { min-height: 20px; }
.t2-hint i { width: 18px; height: 18px; border-right-width: 2.4px; border-bottom-width: 2.4px; }

/* tampilan hanya memakai area yang terlihat di atas toolbar Safari (--tb) */
.bottom-dock { bottom: var(--tb, 0px) !important; }
.bgm-disc-btn { bottom: calc(var(--tb, 0px) + var(--dockd, 52px) + 14px) !important; }
.page-frame { inset: 0 0 calc(var(--dockd, 52px) + var(--tb, 0px)) 0; }
.t2-lang { bottom: max(10px, env(safe-area-inset-bottom)); }
.t2-open { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 52px); }
.t2-hint { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 52px + 38px + 30px); }
body { background: #000; }
/* saku lebih ke atas: ada ruang lega di bawahnya sebelum bagian berikutnya */
.oc-lower-back.gs-tall { --pk0: calc(var(--ph, 580px) * .49); --pk1: calc(var(--ph, 580px) * .49); }
.oc-lower-back.gs-tall .gs-slot-lip { height: 400px; }

/* tombol buka dihapus: petunjuk gulir + ID/EN saja */
.t2-hint { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 56px); }
/* simpan ke kalender */
.sv-addcal { margin-top: 26px; text-align: center; }
.sv-addcal-t { margin: 0 0 12px; font: 300 11px/1 "Jost", "Plus Jakarta Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #cdb878; }
.sv-addcal-row { display: flex; gap: 10px; justify-content: center; }
.sv-calbtn { flex: 1 1 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid rgb(230 200 131 / 70%); border-radius: 24px; background: transparent; color: #f1ead0; font: 500 12.5px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.sv-calbtn:active { background: rgb(230 200 131 / 22%); }
.sv-calbtn:focus-visible { outline: 3px solid #f6e3a4; outline-offset: 3px; }

/* ===== mode ringan (setelah crash): tanpa animasi pembukaan; langsung halaman akhir ===== */
.is-lite .opening-journey { height: var(--vh, 100svh); min-height: 0; }
.is-lite .opening-journey { margin-bottom: 0; }
.is-lite .opening-stage { position: relative; min-height: 0; }
.is-lite .opening-caption { display: none !important; }
.is-lite:not(.is-play) .t2-hint, .is-lite:not(.is-play) .t2-lang { display: none !important; }
.is-lite .oc-panel, .is-lite .gs-card { box-shadow: none; }
/* geser foto album butuh transisi transform (inline dari JS menang); hanya bayangan/opacity yang dimatikan agar ringan */
.is-lite .gs-card, .is-lite .oc-panel .gs-card { transition: transform .38s cubic-bezier(.22, .9, .3, 1), opacity .25s ease; will-change: auto; }
.is-lite .gs-card.is-drag, .is-lite .oc-panel .gs-card.is-drag { transition: none; }

@media (pointer: coarse) {
  .petals-canvas { display: none !important; }
  .is-lite .opening-composition, .is-lite #openingComposition { filter: none !important; }
  .is-lite .fm-slide:not(:first-child) img { content-visibility: auto; }
}

/* Galeri merah: komposisi editorial mengikuti referensi tanpa UI Instagram. */
.oc-panel.oc-next,
.oc-next .fm-slide { background: #5d1110; }
.oc-next .fm-slide:nth-child(4n + 2) .fm-item,
.oc-next .fm-slide:nth-child(4n + 3) .fm-item { filter: none; }
.oc-next .fm-slide .fm-item { max-width: min(75vw, 410px); max-height: min(68svh, 560px); }
.oc-next .fm-slide .fm-duo { gap: clamp(12px, 3vw, 26px); }
.oc-next .fm-slide .fm-duo .fm-item { width: min(38vw, 216px); }
.oc-next .fm-slide .fm-perf > img:not(.fm-seal),
.oc-next .fm-slide .fm-plate img { object-position: center; }
@media (max-width: 600px) {
  .oc-next .fm-slide .fm-item { width: min(74vw, 360px); }
  .oc-next .fm-slide .fm-oval { width: min(76vw, 370px); }
  .oc-next .fm-slide .fm-duo .fm-item { width: min(37vw, 170px); }
  .oc-next .fm-slide .fm-plate { width: min(78vw, 380px); }
}

.oc-next .fm-square { width: min(78vw, 390px); aspect-ratio: .83; padding: 12px; border: 2px solid #d3aa58; border-radius: 2px; background: linear-gradient(135deg,#f6dda0,#9e702b 30%,#e6c374 62%,#78511e); box-shadow: 0 12px 26px rgb(0 0 0 / 35%); }
.oc-next .fm-square i { display:block; width:100%; height:100%; overflow:hidden; border:3px solid #65431d; border-radius:0; }
.oc-next .fm-square img { width:100%; height:100%; object-fit:cover; object-position:center; }

/* Album terbuka: foto menjadi lapisan utama, kantong bersembunyi di belakangnya. */
.oc-lower-back.gs-opened .gs-pile,
.oc-lower-back.gs-tall.gs-opened .gs-pile {
  z-index: 8 !important;
  clip-path: none !important;
  overflow: visible;
}
.oc-lower-back.gs-tall .gs-pile { --ody: calc(var(--pk1) - var(--ph, 580px) * .5 - 10px); --os: .95; }
.oc-lower-back.gs-opened .gs-slot-lip,
.oc-lower-back.gs-opened .gs-open { opacity: 0 !important; pointer-events: none !important; }
.oc-lower-back.gs-opened .gs-close,
.oc-lower-back.gs-tall.gs-opened .gs-close {
  position: absolute;
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
  transform: none !important;
  z-index: 12 !important;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border: 1px solid rgb(67 68 53 / 35%) !important;
  border-radius: 50% !important;
  background: rgb(250 248 239 / 94%) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%) !important;
  color: #38422d !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  display: grid;
  place-items: center;
}
.oc-lower-back.gs-opened .gs-close::after {
  content: "×";
  font: 300 29px/1 Arial, sans-serif;
  margin-top: -2px;
}

/* Scroll pembukaan lebih singkat; seluruh fase tetap memakai progres 0–1. */
html:not(.is-lite) .opening-journey { height: 360svh; min-height: 2500px; }

/* Kantong album mengikuti ukuran kartu; kartu tampak terselip sebelum dibuka. */
.oc-lower-back.gs-tall .gs-pile { --cdy: calc(var(--pk0) - var(--ph, 580px) * .5 + 64px); }
.oc-lower-back .gs-slot-lip.is-front,
.oc-lower-back.gs-tall .gs-slot-lip.is-front {
  width: 420px;
  height: 245px;
  margin-left: -210px;
  top: var(--pk);
  bottom: auto;
  border-radius: 8px 8px 20px 20px;
  background: linear-gradient(160deg, #fffdf5, #e8e2cf);
  border: 1px solid #d4c9aa;
  box-shadow: 0 8px 18px rgb(42 33 13 / 15%);
}
.oc-lower-back .gs-slot-lip.is-front::before,
.oc-lower-back .gs-slot-lip.is-front::after { display: none; }
.oc-lower-back .gs-slot-lip.is-back { display: none; }
.oc-lower-back .gs-open,
.oc-lower-back.gs-tall .gs-open {
  top: calc(var(--pk) + 74px);
  padding: 14px 24px;
  font-size: 16px;
  letter-spacing: .12em;
  box-shadow: 0 3px 8px rgb(42 33 13 / 12%);
}
.oc-lower-back.gs-doors-open .gs-slot-lip.is-front {
  opacity: 0;
  transition: opacity .65s ease 1.0s;
}

/* Album kain: sisi saku menggembung, jahitan manual, lebar mengikuti foto. */
.oc-panel.oc-lower-back {
  background: #f3f0e5;
}
.oc-lower-back .gs-heading span { color: #3b4a36; }
.oc-lower-back .gs-heading small,
.oc-lower-back .pgno,
.oc-lower-back .g-info { color: #837552; }
.oc-lower-back .gs-dots i { background: #b79354; }
.oc-lower-back .gs-slot-lip.is-front,
.oc-lower-back.gs-tall .gs-slot-lip.is-front {
  width: 414px;
  height: 238px;
  margin-left: -207px;
  top: var(--pk);
  bottom: auto;
  border: 1px solid #d4c8aa;
  border-top: 8px solid #e1d9c4;
  border-radius: 8px 8px 30px 30px / 8px 8px 38px 38px;
  clip-path: none;
  background: linear-gradient(100deg, #ddd5c0 0%, #f6f1e3 9%, #eee7d5 50%, #f6f1e3 91%, #d8cfb9 100%);
  box-shadow: inset 0 12px 12px rgb(82 70 47 / 12%), inset 15px 0 18px rgb(82 70 47 / 7%), inset -15px 0 18px rgb(82 70 47 / 7%), 0 12px 22px rgb(65 52 26 / 18%);
}
.oc-lower-back .gs-slot-lip.is-front::before {
  content: "";
  display: block;
  position: absolute;
  inset: 17px 14px 14px;
  border: 2px dashed #b49868;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  opacity: .8;
}
.oc-lower-back .gs-slot-lip.is-front::after {
  content: "";
  display: block;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  border-top: 2px dashed #b49868;
  opacity: .8;
}
.oc-lower-back .gs-slot-lip.is-back { display: none; }
.oc-lower-back .gs-open,
.oc-lower-back.gs-tall .gs-open {
  top: calc(var(--pk) + 70px);
  padding: 13px 22px;
  border: 1px solid #baa36f;
  border-radius: 4px;
  background: #f4e9c9;
  color: #394a35;
  font-size: 15px;
  letter-spacing: .12em;
  box-shadow: 0 3px 8px rgb(65 52 26 / 13%);
}
.oc-lower-back.gs-doors-open .gs-slot-lip.is-front {
  opacity: 0;
  transition: opacity .9s ease 1.15s;
}
.oc-lower-back.gs-doors-open .gs-slot-lip.is-front,
.oc-lower-back.gs-tall.gs-doors-open .gs-slot-lip.is-front {
  opacity: 0 !important;
  transition: opacity .9s ease 1.15s;
}
.oc-lower-back.gs-closing .gs-slot-lip.is-front,
.oc-lower-back.gs-tall.gs-closing .gs-slot-lip.is-front {
  opacity: 1 !important;
  transition: opacity .8s ease 1s;
}

/* Hanya celah saku: bidang penutup menyatu dengan halaman dan membuka bertahap. */
.oc-panel.oc-lower-back { background: #f3f0e5; }
.oc-lower-back .gs-pile,
.oc-lower-back.gs-tall .gs-pile,
.oc-lower-back.gs-doors-open .gs-pile,
.oc-lower-back.gs-opened .gs-pile { clip-path: none !important; }
.oc-lower-back .gs-slot-lip.is-front,
.oc-lower-back.gs-tall .gs-slot-lip.is-front {
  left: 0;
  top: var(--pk);
  width: 100%;
  height: calc(var(--ph, 580px) - var(--pk) + 160px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #f3f0e5;
  box-shadow: none;
  opacity: 1 !important;
  transform: translateY(0);
  transition: transform 2.6s cubic-bezier(.45, 0, .2, 1) !important;
  will-change: transform;
}
.oc-lower-back .gs-slot-lip.is-front::before,
.oc-lower-back .gs-slot-lip.is-front::after { display: none; }
.oc-lower-back.gs-doors-open:not(.gs-closing) .gs-slot-lip.is-front,
.oc-lower-back.gs-tall.gs-doors-open:not(.gs-closing) .gs-slot-lip.is-front {
  opacity: 1 !important;
  transform: translateY(calc(var(--ph, 580px) - var(--pk) + 180px));
}
.oc-lower-back.gs-closing .gs-slot-lip.is-front,
.oc-lower-back.gs-tall.gs-closing .gs-slot-lip.is-front {
  opacity: 1 !important;
  transform: translateY(0);
}
.oc-lower-back.gs-opened .gs-slot-lip.is-front,
.oc-lower-back.gs-tall.gs-opened .gs-slot-lip.is-front { opacity: 1 !important; }
.oc-lower-back::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--pk) - 3px);
  width: 350px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(#97866d, #ddd4bd 45%, #faf7ed);
  box-shadow: 0 2px 3px rgb(57 48 31 / 15%);
  pointer-events: none;
  transition: opacity .45s ease;
}
.oc-lower-back.gs-opened::after { opacity: 0; }
.oc-lower-back .gs-open,
.oc-lower-back.gs-tall .gs-open { top: calc(var(--pk) + 38px); }

.oc-lower-back .gs-pile,
.oc-lower-back.gs-tall .gs-pile {
  --cdy: calc(var(--pk) - var(--ph, 580px) * .5 + 195px);
  --ody: calc(var(--pk) - var(--ph, 580px) * .5 - 10px);
  --cs: .6;
  --os: .95;
}
.oc-lower-back .gs-slot-lip.is-front,
.oc-lower-back.gs-tall .gs-slot-lip.is-front,
.oc-lower-back.gs-doors-open .gs-slot-lip.is-front,
.oc-lower-back.gs-closing .gs-slot-lip.is-front {
  opacity: 1 !important;
  transition: none !important;
}
.oc-lower-back.gs-opened::after { opacity: 1; }
.sv-addcal .sv-calbtn {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  background: #f1d28a;
  border: 2px solid #f8e6b7;
  border-radius: 10px;
  color: #263217;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgb(0 0 0 / 20%);
}
.sv-addcal .sv-calbtn:active { background: #e3bd6f; }
#storySection .st-when {
  max-width: 100%;
  font: 700 clamp(17px, 4.4vw, 22px)/1.3 "Jost", sans-serif;
  letter-spacing: .08em;
  color: #f8e6b7;
}
.oc-lower-back.gs-doors-open::after,
.oc-lower-back.gs-opened::after { opacity: 0; transition: none; }
.oc-lower-back.gs-opened .gnav,
.oc-lower-back.gs-tall.gs-opened .gnav {
  top: 50% !important;
  margin-top: 0;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 48px;
  border-radius: 24px;
  background: rgb(248 246 238 / 94%);
  color: #293323;
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  pointer-events: auto;
}
.oc-lower-back.gs-opened .gnav-l { left: 10px; }
.oc-lower-back.gs-opened .gnav-r { right: 10px; }
.oc-lower-back.gs-opened .gs-dots,
.oc-lower-back.gs-tall.gs-opened .gs-dots {
  top: auto;
  bottom: 118px;
  z-index: 20;
  gap: 5px;
  overflow: hidden;
}
.oc-lower-back.gs-opened .gs-dots i { width: 5px; height: 5px; flex: 0 0 5px; }
.oc-lower-back.gs-opened .gs-dots i.on { width: 18px; flex-basis: 18px; }
.oc-lower-back.gs-opened .g-info,
.oc-lower-back.gs-tall.gs-opened .g-info {
  top: auto;
  bottom: 76px;
  z-index: 20;
  padding: 0 18px;
  color: #3b4632;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  text-shadow: 0 1px #f3f0e5;
}
.oc-lower-back.gs-opened .gs-close,
.oc-lower-back.gs-tall.gs-opened .gs-close {
  top: auto !important;
  right: auto !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 21 !important;
  width: 46px;
  height: 46px;
}
.sv-detail { display: grid; gap: 10px; margin: 26px 0 18px; }
.sv-detail-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 10px 16px; border: 1px solid #dbc489; border-radius: 12px; background: rgb(24 37 15 / 32%); }
.sv-detail-card span { color: #f1d28a; font: 600 12px/1.2 "Plus Jakarta Sans", sans-serif; text-transform: uppercase; letter-spacing: .18em; }
.sv-detail-card strong { color: #fff5d9; font: 600 23px/1 "Cormorant Garamond", serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-detail + .sv-addcal { margin-top: 18px; }
.st-poster { position: relative; display: flex; flex-direction: column; align-items: center; margin: 80px -6px 42px; padding: 36px 24px 30px; border: 2px solid #a52b27; border-radius: 26px; background: #f7e9d9; box-shadow: 7px 8px 0 #d6a989; overflow: visible; }
.st-poster::before { content: "♡"; position: absolute; top: 10px; right: 18px; color: #bb4139; font: 700 44px/1 "Gaegu", cursive; transform: rotate(15deg); }
.st-big { order: -1; display: block; margin: 0 0 18px; color: #a52b27; font: 700 clamp(42px, 11vw, 62px)/.95 "Gaegu", cursive; letter-spacing: -.05em; text-align: center; transform: rotate(-3deg); }
.st-pq { max-width: 18ch; margin: 0 auto; color: #513c35; text-align: center; text-align-last: center; text-transform: none; font: 600 clamp(23px, 6vw, 31px)/1.16 "Gaegu", cursive; letter-spacing: 0; text-wrap: balance; }
.st-pimg { width: min(80%, 300px); max-width: 300px; margin: 20px auto 4px; }
.st-by { align-self: flex-end; margin: 6px 0 0; color: #a52b27; font: 600 21px/1 "Gaegu", cursive; }

/* RSVP: one clear task, large choices, then only the fields needed for a ticket. */
#rsvpSection { padding: 54px 18px 76px; background: #f4f1e6; }
#rsvpSection .section-container { max-width: 440px; }
#rsvpSection .rsvp-kicker { margin: 0 0 8px; color: #745626; font: 700 13px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; }
#rsvpSection .section-heading { margin: 0 0 12px; color: #28351f; font: 700 clamp(33px, 9vw, 42px)/1.08 "Plus Jakarta Sans", sans-serif; letter-spacing: -.045em; text-shadow: none; }
#rsvpSection .section-heading::before, #rsvpSection .section-heading::after { display: none; }
#rsvpSection .rsvp-need { max-width: none; margin: 0 0 20px; padding: 16px 18px; border: 0; border-left: 5px solid #b0812e; border-radius: 10px; background: #e7e0c9; color: #26341e; text-align: left; font: 500 16px/1.5 "Plus Jakarta Sans", sans-serif; }
#rsvpSection .rsvp-need b { display: inline; margin: 0; color: #26341e; font: 800 17px/1.5 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; }
#rsvpSection .rsvp-card { max-width: none; margin: 0; padding: 22px 18px 24px; border: 1px solid #d3c8a9; border-radius: 18px; background: #fffdf7; box-shadow: 0 10px 26px rgb(40 53 31 / 12%); }
#rsvpSection .form-group { margin-bottom: 22px; }
#rsvpSection .form-group > label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #26341e; font: 700 17px/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; }
#rsvpSection .rsvp-step { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #28351f; color: white; font: 700 15px/1 "Plus Jakarta Sans", sans-serif; }
#rsvpSection .form-group input[type="text"], #rsvpSection .form-group input[type="email"], #rsvpSection .form-group select, #rsvpSection .form-group textarea { box-sizing: border-box; width: 100%; min-height: 54px; padding: 13px 14px; border: 2px solid #9d9e87; border-radius: 10px; background: #fff; color: #1e281a; font: 500 17px/1.35 "Plus Jakarta Sans", sans-serif; }
#rsvpSection .form-group input:focus, #rsvpSection .form-group select:focus, #rsvpSection .form-group textarea:focus { outline: 3px solid #d7b45f; outline-offset: 2px; box-shadow: none; border-color: #28351f; }
#rsvpSection .attendance-pills { gap: 10px; }
#rsvpSection .pill-card { box-sizing: border-box; min-height: 62px; padding: 10px 7px; border: 2px solid #9d9e87; border-radius: 10px; background: #fff; color: #26341e; font: 700 14px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; }
#rsvpSection .attendance-pill input:checked + .pill-card { border-color: #28351f; background: #28351f; color: #fff; }
#rsvpSection .attendance-pill input:focus-visible + .pill-card { outline: 3px solid #b0812e; outline-offset: 2px; }
#rsvpSection .pill-icon { font-size: 20px; }
#rsvpSection .rsvp-help { margin: 8px 0 0; color: #4f5b46; text-align: left; font: 500 12px/1.4 "Plus Jakarta Sans", sans-serif; }
#rsvpSection .rsvp-optional { margin: 2px 0 20px; text-align: left; }
#rsvpSection .rsvp-optional summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; color: #3c4c31; font: 600 14px/1.3 "Plus Jakarta Sans", sans-serif; cursor: pointer; }
#rsvpSection .rsvp-optional summary span { color: #69725c; font-size: 12px; }
#rsvpSection .rsvp-optional .form-group { margin: 10px 0 0; }
#rsvpSection .rsvp-submit-btn { min-height: 60px; border: 0; border-radius: 10px; background: #a87823; color: #fff; box-shadow: 0 5px 0 #735117; outline: 0; font: 800 17px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; }
#rsvpSection .rsvp-submit-btn:focus-visible { outline: 3px solid #28351f; outline-offset: 3px; }
#rsvpSection .form-status { margin-top: 16px; color: #26341e; font: 700 15px/1.5 "Plus Jakarta Sans", sans-serif; }

/* The pocket seam sits behind the opaque prints; the cloth still masks their lower edge. */
.oc-lower-back::after,
.oc-lower-back.gs-doors-open::after,
.oc-lower-back.gs-opened::after { z-index: 1; opacity: 1; transition: none; }
.oc-lower-back .gs-slot-lip.is-front,
.oc-lower-back.gs-tall .gs-slot-lip.is-front { top: calc(var(--pk) + 5px); }
.oc-panel .gs-card.is-landscape { height: 290px; margin-top: -145px; }
.oc-panel .gs-card.is-landscape img { object-fit: contain; background: #f6f2e9; }

/* A deliberate ending to the story before the light venue page begins. */
section#storySection.story-page { padding-top: 82px; padding-bottom: 54px; }
#storySection .story-eyebrow { margin-bottom: 12px; color: #e4d8b7; font: 700 12px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: .22em; }
#storySection .story-title { max-width: 9ch; margin: 0 auto; color: #fff8e6; font: 700 clamp(48px, 13vw, 60px)/.95 "Gaegu", cursive; letter-spacing: .035em; text-wrap: balance; }
#storySection .story-intro { max-width: 29ch; margin-top: 22px; padding-bottom: 24px; border-bottom: 1px solid rgb(245 226 178 / 60%); color: #f6efdb; font: 500 16px/1.6 "Plus Jakarta Sans", sans-serif; text-wrap: balance; }
#storySection .st-list { margin-top: 42px; }
#storySection .st-poster { margin-bottom: 0; }
#eventsSection.events-page { border-top: 5px solid #d2b670; }

/* Venue and gift pages share the RSVP palette and keep actions legible. */
#eventsSection.lc-loc { background: #28351f; color: #fff9e9; gap: 16px; }
#eventsSection .lc-eyebrow { color: #ecd39b; font-weight: 700; font-size: 13px; }
#eventsSection .lc-venue { color: #fff9e9; font-size: clamp(31px, 8vw, 39px); font-weight: 600; }
#eventsSection .lc-addr { color: #eee5cb; font-size: 16px; font-weight: 600; }
#eventsSection .pgno { color: #e9d6a8; }
#eventsSection .lc-map { max-width: 390px; margin-top: 14px; border: 2px solid #d6bd80; border-radius: 16px; background: #f4f0e3; box-shadow: 0 10px 24px rgb(8 16 6 / 25%); }
#eventsSection .lc-map-load { display: flex; width: 100%; height: 100%; min-height: 250px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border: 0; background: #f4f0e3; color: #28351f; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; }
#eventsSection .lc-map-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #e5d5a9; font-size: 42px; line-height: 1; }
#eventsSection .lc-map-load strong { font-size: 20px; }
#eventsSection .lc-map-load small { color: #526046; font-size: 13px; }
#eventsSection .lc-map-load:focus-visible, #eventsSection .lc-btn:focus-visible { outline: 3px solid #f2cf77; outline-offset: 3px; }
#eventsSection .lc-btn { box-sizing: border-box; width: min(100%, 390px); justify-content: center; min-height: 56px; border: 0; border-radius: 11px; background: #e8c674; color: #213018; font-size: 16px; font-weight: 800; letter-spacing: 0; box-shadow: 0 4px 0 #927038; }
#eventsSection .lc-btn:active { background: #f1d895; color: #213018; }
#giftSection.gift-section { background: #28351f; color: #fff9e9; border-top: 5px solid #d2b670; }
#giftSection .section-heading { color: #f3d68e; }
#giftSection .section-heading::before { color: #e2ca91; }
#giftSection .gift-qris-card { gap: 16px; padding: 22px 18px 24px; border: 2px solid #d6bd80; border-radius: 18px; background: #fffdf7; color: #28351f; box-shadow: 0 12px 26px rgb(8 16 6 / 26%); }
#giftSection .gift-qris-card .bank-brand-title { color: #28351f; font-weight: 700; }
#giftSection .gift-qris-card .qris-merchant { color: #665025; font-weight: 700; }
#giftSection .gift-qris-card .qris-note { color: #3d4b33; font-size: 14px; font-weight: 600; }
#giftSection .gift-qris-card .copy-pill-btn { box-sizing: border-box; display: inline-flex; width: 100%; min-height: 52px; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: #d9b35e; color: #223019; font: 800 15px/1.2 "Plus Jakarta Sans", sans-serif; }

/* Echo the envelope cover at the end of the invitation. */
.footer-section { padding: 48px 24px max(88px, calc(72px + env(safe-area-inset-bottom))); border-top: 5px solid #d2b670; background: linear-gradient(rgb(32 43 21 / 78%), rgb(32 43 21 / 88%)), url("assets/tex-olive-soft.webp?v=4") center / 420px auto; }
.footer-section .section-container { display: flex; flex-direction: column; align-items: center; }
.footer-crest { width: 94px; height: 100px; margin: 0 auto 20px; border: 0; border-radius: 0; }
.footer-crest img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 7px rgb(0 0 0 / 35%)); }
.footer-thankyou { max-width: 30ch; margin: 0 auto 10px; color: #f7efda; font: 500 15px/1.6 "Plus Jakarta Sans", sans-serif; }
.footer-logotype { display: block; width: min(58vw, 224px); height: auto; margin: 0 auto 0; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 25%)); }
.footer-date { color: #efd49a; font: 700 11px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .17em; }

.t2f-deco.d-gold.g3 {
  left: auto;
  top: auto;
  right: 34px;
  bottom: 28px;
  width: 78px;
  transform: rotate(-18deg);
  z-index: 3;
}

/* Audit: minimum readable text (12px) and 44px touch targets */
.sv-cd-unit, .ticket-eyebrow, .ticket-dl, .ticket-note, .footer-date, .pgno, .sv-eyebrow, .opening-caption-title { font-size: max(12px, 1em); }
.sv-cd-unit { font-size: 12px; letter-spacing: .16em; }
.ticket-eyebrow, .ticket-dl, .ticket-note, .footer-date, .pgno, .sv-eyebrow, .opening-caption-title { font-size: 12px; }
.oc-panel .fm-cap { font-size: 12px; letter-spacing: .1em; }
.gs-open { min-height: 44px; padding-inline: 18px; }
.bgm-disc-btn { min-width: 44px; min-height: 44px; }
.dock-item { min-height: 48px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
.dock-item span, .sv-cal span { font-size: 11px; }
#giftSection .gift-qris-card .copy-pill-btn, .copy-pill-btn { min-height: 44px; }

.is-played .t2-lang { display: none !important; }

.is-played .t2-hint:not(.t2-cont) { display: none !important; }
.t2-cont { z-index: 30; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 24px); }
.t2-cont.is-hidden { opacity: 0; pointer-events: none !important; }
.t2-cont span { color: #fff; text-shadow: 0 0 6px #000, 0 0 12px #000; }
.t2-cont { pointer-events: none; }
.t2-cont span { padding: 9px 16px; border-radius: 999px; background: rgb(18 18 12 / 62%); text-shadow: none; }
#rsvpSection .rsvp-for { margin: 0 0 18px; text-align: center; font: 500 12px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4f5b46; }
#rsvpSection .rsvp-for b { display: block; margin-top: 4px; font: 400 26px/1.15 "Great Vibes", cursive; letter-spacing: 0; text-transform: none; color: #2d3a22; }

.ticket .ticket-mono { display: block; width: 170px; height: auto; margin: 6px auto 16px; }

/* Tiket: hijau zaitun, tulisan dan tombol putih; QR di atas ubin krem agar tetap terbaca */
.ticket { background: #3f4a22; color: #fff; border-color: rgb(255 255 255 / 45%); box-shadow: inset 0 0 0 6px #3f4a22, inset 0 0 0 7px rgb(255 255 255 / 40%), 0 1em 2em rgb(0 0 0 / 22%); }
.ticket-eyebrow, .ticket-code, .ticket-name, .ticket-meta, .ticket-note { color: #fff; opacity: 1; }
.ticket-meta, .ticket-note { opacity: .85; }
.ticket .ticket-mono { width: 240px; height: auto; margin: 8px auto 18px; }
.ticket-qr { padding: 10px; background: #fffdf4; box-sizing: content-box; width: 170px; height: 170px; border-radius: 6px; }
.ticket-dl { background: #fff; color: #2f3a18; outline: 1px solid rgb(47 58 24 / 55%); font-weight: 700; }
.ticket-save { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: rgb(255 255 255 / 14%); color: #fff; font: 500 12px/1.5 "Plus Jakarta Sans", sans-serif; text-align: left; }
.ticket-save b { display: block; margin-bottom: 2px; font-size: 13px; }
.rsvp-submit-btn[disabled] { opacity: .7; cursor: progress; }