/* ==========================================================================
   FAJAR & SALSA · THE WEDDING OF M. FAJAR ARDI ALHARI & SALSABILA RAHAYU
   Sabtu, 07 November 2026 · Aula Universitas KH. Ruhiat, Tasikmalaya
   - Blended Fade-In / Fade-Out Background Transitions (Zero Hard Color Cuts)
   - Smooth Automatic Photo Crossfade & Ken Burns Drift Across All Frames
   - Neat Editorial Alignment & Justified Running Prose (Desktop & Mobile)
   ========================================================================== */

:root {
  /* Core Palette: Deep Obsidian Night + Warm Espresso Fade + Aged Brass Accent */
  --bg: #0c0a08;
  --surface: #1d1914;
  --surface-raised: #26201a;
  --ink: #eae9e6;
  --muted: #b3aa9c;
  --accent: #c9a45a;
  --accent-strong: #dfb96a;
  --accent-ink: #0c0a08;

  /* Crisp Scannable QR Frame */
  --qr-paper: #e6e4e0;
  --qr-ink: #12100e;

  /* Typefaces (Fontshare: Boska) */
  --font-display: 'Boska', Georgia, serif;
  --font-sans: 'Boska', Georgia, serif;

  /* Strict 5-Step Type Scale: small, body, lead, head, display */
  --step-small: 0.9375rem;                                     /* 15px */
  --step-body: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);    /* 18px -> 19px */
  --step-lead: clamp(1.375rem, 1.2rem + 0.65vw, 1.5625rem);    /* 22px -> 25px */
  --step-head: clamp(2.125rem, 1.5rem + 2.5vw, 3.625rem);      /* 34px -> 58px */
  --step-display: clamp(3.1rem, 1.6rem + 6.4vw, 7.6rem);       /* 50px -> 122px */

  /* Layout & Grid */
  --max: 86rem;
  --margin: clamp(1.25rem, 4vw, 3.5rem);
  --gutter: clamp(1.25rem, 2.2vw, 2.25rem);

  /* Motion Tokens */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 850ms;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden],
.btn-outline[hidden] {
  display: none;
}

html {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
  position: relative;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.07em;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

address {
  font-style: normal;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Ambient Golden Brass Dust Motes Canvas ---------- */
.ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

header,
main,
footer {
  position: relative;
  z-index: 2;
}

/* ---------- Blended Section Grounds (Fade-In / Fade-Out) ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section {
  padding-block: clamp(4.25rem, 7.5vw, 6.75rem);
  position: relative;
}

/* Smooth fade from #0c0a08 -> warm dark espresso -> #0c0a08 so zero hard line is ever visible */
.blend-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.88) 0%, rgba(25, 20, 14, 0.78) 35%, rgba(25, 20, 14, 0.78) 65%, rgba(12, 10, 8, 0.88) 100%); /* taste-skill-ignore */
}

.blend-section-alt {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.88) 0%, rgba(20, 17, 13, 0.76) 35%, rgba(20, 17, 13, 0.76) 65%, rgba(12, 10, 8, 0.88) 100%); /* taste-skill-ignore */
}

/* ---------- Typography Helpers ---------- */
h1,
h2,
h3,
blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.head {
  font-size: var(--step-head);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.45;
  max-width: 58ch;
}

.small {
  font-size: var(--step-small);
  line-height: 1.55;
}

.muted {
  color: var(--muted);
}

p {
  max-width: 62ch;
}

/* Justified long paragraphs for clean, even editorial columns */
.prose-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ---------- Smooth Automatic Photo Crossfade Slideshow Engine ---------- */
.auto-frame {
  position: relative;
  overflow: clip;
  background: var(--surface);
}

.auto-frame .slide-photo:first-of-type {
  position: relative;
  z-index: 1;
}

.auto-frame .slide-photo:not(:first-of-type) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.slide-photo {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1900ms var(--ease-soft), transform 5600ms var(--ease-soft);
  will-change: opacity, transform;
}

.slide-photo.is-visible {
  opacity: 1;
  transform: scale(1);
}

.slide-dots {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: rgba(12, 10, 8, 0.65);
}

.slide-dot {
  width: 0.45rem;
  height: 0.45rem;
  background: rgba(234, 233, 230, 0.35);
  transition: width 400ms var(--ease-out), background-color 400ms ease;
}

.slide-dot.is-active {
  width: 1.35rem;
  background: var(--accent);
}

/* ---------- Interactive Controls ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.8rem 1.65rem;
  background-color: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.8rem 1.55rem;
  background-color: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.btn-outline:active {
  transform: scale(0.97);
}

.btn-outline.is-copied {
  background-color: var(--accent);
  color: var(--accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background-color: var(--accent-strong);
  }
  .btn-outline:hover {
    background-color: var(--accent);
    color: var(--accent-ink);
  }
}

.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.07em;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .link:hover {
    text-decoration-color: currentColor;
    color: var(--accent);
  }
}

/* ---------- SECTION 0: SAMPUL PEMBUKA UNDANGAN (GOTHIC & ROCK DARK ROMANCE) ---------- */
.cover-gate {
  position: relative;
  z-index: 3;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.88) 0%, rgba(26, 20, 15, 0.78) 55%, rgba(12, 10, 8, 0.92) 100%); /* taste-skill-ignore */
  overflow: clip;
  will-change: transform, opacity;
  transition: transform 820ms var(--ease-in-out), opacity 620ms var(--ease-out);
}

.cover-gate.is-opening {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: none;
}

/* Atmospheric Gothic Cathedral Rose Window Watermark Backdrop */
.cover-rose-backdrop {
  position: absolute;
  top: 52%;
  left: 22%;
  transform: translate(-50%, -50%);
  width: min(52rem, 95vw);
  height: auto;
  pointer-events: none;
  z-index: 1;
  color: var(--accent);
}

.cover-wrap {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding-block: 1.35rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cover-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 500;
  color: var(--ink);
}

.cover-ring-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.cover-top-badge {
  color: var(--accent);
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border-left: 2px solid var(--accent);
  font-weight: 500;
}

.cover-main-grid {
  flex: 1;
  align-items: center;
  row-gap: 1.75rem;
}

.cover-editorial-col {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
  padding-right: 0.75rem;
}

.cover-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cover-divider-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 29rem;
  color: var(--accent);
  opacity: 0.88;
  margin-block: 0.15rem;
}

.cover-gothic-divider {
  display: block;
  width: 100%;
  height: 1.35rem;
}

.cover-support {
  font-size: var(--step-body);
  line-height: 1.55;
  max-width: 48ch;
}

/* Gothic Rock Guest Seal Card */
.cover-guest-seal {
  position: relative;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 1.45rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 44ch;
}

.gothic-corner-filigree {
  position: absolute;
  color: var(--accent);
  opacity: 0.75;
  pointer-events: none;
}

.gothic-corner-tl { top: 6px; left: 6px; }
.gothic-corner-tr { top: 6px; right: 6px; }
.gothic-corner-bl { bottom: 6px; left: 6px; }
.gothic-corner-br { bottom: 6px; right: 6px; }

.cover-seal-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.seal-rose-mini {
  color: var(--accent);
  flex-shrink: 0;
}

.cover-guest-greeting {
  color: var(--muted);
}

.cover-guest-name {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 500;
  color: var(--accent-strong);
  line-height: 1.25;
}

.cover-guest-org {
  color: var(--ink);
}

.cover-action-row {
  padding-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cover-open-btn {
  gap: 0.6rem;
}

.btn-icon-svg {
  flex-shrink: 0;
}

/* Right Column: Gothic Cathedral Arch Frame + Crossfade Portrait Slideshow */
.cover-aperture-col {
  grid-column: 7 / 13;
  display: flex;
  align-items: center;
}

.cover-aperture {
  position: relative;
  width: 100%;
  height: 74svh;
  min-height: 27rem;
  max-height: 43rem;
  overflow: clip;
  background: var(--surface);
  transform-style: preserve-3d;
  will-change: transform;
}

.cover-arch-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  color: var(--accent);
}

.aperture-corner {
  position: absolute;
  color: var(--accent);
  z-index: 4;
  pointer-events: none;
  opacity: 0.85;
}

.aperture-corner-tl { top: 10px; left: 10px; }
.aperture-corner-tr { top: 10px; right: 10px; }
.aperture-corner-bl { bottom: 10px; left: 10px; }
.aperture-corner-br { bottom: 10px; right: 10px; }

.cover-aperture .slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* ---------- SHARED GOTHIC & ROCK ORNAMENTAL SYSTEM FOR MAIN INVITATION ---------- */
.section-rose-watermark {
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translate(-50%, -50%);
  width: min(48rem, 90vw);
  height: auto;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
}

.section > .wrap {
  position: relative;
  z-index: 2;
}

.gothic-heading-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 22rem;
  color: var(--accent);
  opacity: 0.88;
  margin-top: 0.5rem;
}

.gothic-ornate-card {
  position: relative;
  border-left: 3px solid var(--accent);
}

.schedule-venue-box.gothic-ornate-card {
  background: var(--surface);
  padding: 1.25rem 1.5rem;
}

.footer-monument-wrap .cover-divider-wrap {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: 0.35rem;
}

/* ---------- SECTION 1: HERO PEMBUKA (Unobstructed Split / Stacked) ---------- */
.hero-section {
  position: relative;
  overflow: clip;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.85) 0%, rgba(22, 18, 13, 0.75) 60%, rgba(12, 10, 8, 0.85) 100%); /* taste-skill-ignore */
}

.hero-wrap {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding-block: 1.35rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.wordmark-top {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.85rem);
  flex-wrap: wrap;
}

.nav-links a {
  font-size: var(--step-small);
  text-decoration: none;
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.audio-btn:hover,
.audio-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.hero-main-grid {
  flex: 1;
  align-items: center;
  row-gap: 1.75rem;
}

.hero-editorial-col {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding-right: 0.75rem;
}

.hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.hero-monument {
  font-size: var(--step-display);
  line-height: 0.88;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.hero-support {
  font-size: var(--step-body);
  line-height: 1.55;
  max-width: 48ch;
}

.hero-guest-strip {
  background: var(--surface);
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 44ch;
}

.guest-strip-name {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  color: var(--ink);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Right Column: Unobstructed Portrait Stage */
.hero-aperture-col {
  grid-column: 7 / 13;
  display: flex;
  align-items: center;
}

.hero-aperture {
  position: relative;
  width: 100%;
  height: 76svh;
  min-height: 29rem;
  max-height: 45rem;
  overflow: clip;
  background: var(--surface);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

.hero-video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.02;
  pointer-events: none;
}

.hero-aperture .slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* ---------- SECTION 2: SALAM & UNDANGAN ---------- */
.intro-grid {
  align-items: start;
  row-gap: 2.5rem;
}

.intro-left {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.intro-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
}

.intro-right {
  grid-column: 6 / 13;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.statement-quote {
  font-size: var(--step-lead);
  line-height: 1.42;
  max-width: 48ch;
  color: var(--ink);
  text-align: justify;
  text-justify: inter-word;
}

.intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.intro-facts-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  padding-top: 0.25rem;
}

.fact-box {
  background: var(--surface);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
}

.fact-value {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  color: var(--ink);
}

/* ---------- SECTION 3: KEDUA MEMPELAI ---------- */
.couple-grid {
  align-items: center;
  row-gap: 2.75rem;
}

.couple-info {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.couple-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.person-block {
  background: var(--surface);
  padding: 1.5rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.person-name {
  font-size: var(--step-lead);
  line-height: 1.2;
  color: var(--accent);
}

.person-parents {
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--ink);
}

.couple-portraits {
  grid-column: 6 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.couple-fig img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* ---------- SECTION: KISAH CINTA / LOVE STORY (Gothic Rock Editorial Narrative Split) ---------- */
.story-split-grid {
  align-items: start;
  row-gap: 3rem;
}

.story-editorial-col {
  grid-column: 1 / 6;
}

.story-chronicle-col {
  grid-column: 6 / 13;
}

.story-sticky-pane {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
}

.story-quote {
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* Gothic Arch-Framed Couple Portrait */
.story-portrait {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: clip;
  background: var(--surface);
  margin: 0.5rem 0 0;
}

.story-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0) 62%, rgba(12, 10, 8, 0.76) 100%); /* taste-skill-ignore */
}

.story-portrait .slide-photo,
.story-portrait.auto-frame .slide-photo:first-of-type,
.story-portrait.auto-frame .slide-photo:not(:first-of-type) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-portrait .story-photo-1 {
  object-position: center 26%;
}

.story-portrait .story-photo-2 {
  object-position: center 55%;
}

.story-portrait .cover-arch-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  pointer-events: none;
  z-index: 6;
}

.story-portrait .aperture-corner {
  position: absolute;
  color: var(--accent);
  pointer-events: none;
  z-index: 7;
}

.story-portrait .aperture-corner-tl { top: 0.85rem; left: 0.85rem; }
.story-portrait .aperture-corner-tr { top: 0.85rem; right: 0.85rem; }
.story-portrait .aperture-corner-bl { bottom: 0.85rem; left: 0.85rem; }
.story-portrait .aperture-corner-br { bottom: 0.85rem; right: 0.85rem; }

.story-portrait-caption {
  position: absolute;
  bottom: 0.85rem;
  left: 0;
  right: 0;
  padding-inline: 2.25rem;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.8125rem;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.35;
  white-space: normal;
  z-index: 8;
  font-family: var(--font-display);
}

/* Right Column: Editorial Timeline Chronicle */
.story-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 4vw, 3.25rem);
}

.story-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.story-milestone-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.story-milestone-phase {
  font-size: var(--step-small);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-milestone-bullet {
  color: var(--accent);
  font-weight: 700;
  opacity: 0.6;
}

.story-milestone-date {
  font-size: var(--step-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.story-milestone-title {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  color: var(--accent-strong);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.story-milestone-desc {
  font-size: var(--step-body);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* ---------- SECTION 4: WAKTU & TEMPAT ACARA ---------- */
.schedule-header {
  align-items: end;
  margin-bottom: 2.5rem;
  row-gap: 1.25rem;
}

.schedule-title-col {
  grid-column: 1 / 6;
}

.schedule-lead-col {
  grid-column: 6 / 13;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.countdown-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.countdown-cell {
  background: var(--surface);
  padding: 0.7rem 1.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.countdown-val {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.poster-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poster-row {
  background: var(--surface);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  align-items: center;
  row-gap: 0.5rem;
  transition: transform var(--t-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .poster-row:hover {
    transform: translateX(8px);
  }
}

.poster-item-name {
  grid-column: 1 / 5;
  font-size: var(--step-head);
  line-height: 1;
}

.poster-item-meta {
  grid-column: 5 / 9;
  font-size: var(--step-small);
}

.poster-item-time {
  grid-column: 9 / 13;
  font-size: var(--step-lead);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.schedule-footer {
  margin-top: 2.25rem;
  align-items: center;
  row-gap: 1.5rem;
}

.schedule-venue-box {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.venue-title {
  font-family: var(--font-display);
  font-size: var(--step-lead);
}

.schedule-actions {
  grid-column: 7 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-end;
}

/* ---------- SECTION 5: GALERI POTRET (6-Photo Auto-Crossfade Grid) ---------- */
.gallery-header {
  align-items: end;
  margin-bottom: 2.5rem;
  row-gap: 1.25rem;
}

.gallery-title-col {
  grid-column: 1 / 6;
}

.gallery-lead-col {
  grid-column: 6 / 13;
}

.gallery-bento {
  row-gap: var(--gutter);
  align-items: start;
}

.gallery-card {
  grid-column: span 4;
  cursor: pointer;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center 25%;
}

/* ---------- SECTION 6: KEHADIRAN & DOA RESTU (Local CRUD) ---------- */
.rsvp-grid {
  align-items: start;
  row-gap: 2.75rem;
}

.rsvp-form-col {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rsvp-form {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field-label {
  font-size: var(--step-small);
}

.field-input,
.field-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step-small);
}

.field-input:focus,
.field-textarea:focus {
  outline: 2px solid var(--accent);
}

.field-textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.rsvp-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rsvp-feedback {
  font-size: var(--step-small);
  color: var(--accent);
  min-height: 1.4rem;
}

.rsvp-live-col {
  grid-column: 7 / 13;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.live-pass-box {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.live-pass-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.live-pass-guest {
  font-family: var(--font-display);
  font-size: var(--step-lead);
}

.live-pass-tag {
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-small);
  font-weight: 600;
}

.wishes-feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 29rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
}

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

.wishes-feed::-webkit-scrollbar-track {
  background: var(--surface);
}

.wishes-feed::-webkit-scrollbar-thumb {
  background: var(--accent);
}

.wish-item {
  padding-block: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.wish-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: var(--step-small);
}

.wish-author {
  font-weight: 600;
}

.wish-badge {
  color: var(--accent);
}

.wish-text {
  font-size: var(--step-small);
  color: var(--muted);
}

.wish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 0.2rem;
}

.wish-action-btn {
  font-size: var(--step-small);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- SECTION 7: TANDA KASIH DIGITAL & QRIS ---------- */
.gift-grid {
  align-items: start;
  row-gap: 2.75rem;
}

.gift-left {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
}

.bank-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bank-card {
  padding-block: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bank-number {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.gift-right {
  grid-column: 6 / 13;
}

.qris-monument-card {
  background: var(--surface);
  color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: center;
}

.qris-visual-col {
  grid-column: 1 / 7;
  background: var(--qr-paper);
  color: var(--qr-ink);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.qris-canvas-wrap {
  width: 100%;
  max-width: 13.5rem;
  aspect-ratio: 1 / 1;
}

.qris-canvas-wrap canvas,
.qris-canvas-wrap img {
  object-fit: contain;
  display: block;
  width: 100%;
  height: 100%;
}

.qris-details-col {
  grid-column: 7 / 13;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qris-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--bg);
  color: var(--ink);
  padding-top: 4rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
}

.footer-cols {
  row-gap: 2rem;
}

.footer-col-1 { grid-column: 1 / 4; }
.footer-col-2 { grid-column: 4 / 7; }
.footer-col-3 { grid-column: 7 / 10; }
.footer-col-4 { grid-column: 10 / 13; }

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: var(--step-small);
}

.footer-monument-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-svg-wordmark {
  width: 100%;
  height: auto;
  display: block;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--step-small);
}

/* ---------- MODALS (QRIS Zoom & Photo Lightbox) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 10, 8, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card,
.lightbox-card {
  background: var(--surface);
  color: var(--ink);
  padding: 2rem;
  max-width: 34rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}

.modal-card .qris-canvas-wrap {
  max-width: min(22rem, 85vw);
  margin: 0.5rem auto;
}

.lightbox-card {
  max-width: 44rem;
}

.lightbox-img {
  max-height: 70svh;
  width: auto;
  object-fit: contain;
}

.lightbox-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---------- MOTION LAYER ---------- */
.lines .line,
[data-lines] .line {
  display: block;
  overflow: clip;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.lines [data-line],
[data-lines] .line > span {
  display: block;
}

.shutter {
  overflow: clip;
}

.section,
.site-footer {
  overflow-x: clip;
}

.mobile-cap-only {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: ad-rise var(--t-reveal) var(--ease-expo) forwards;
    animation-delay: calc(var(--i, 0) * 80ms + 40ms);
  }
  .js .lines [data-line] {
    transform: translate3d(0, 105%, 0);
    animation: ad-line 850ms var(--ease-expo) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 60ms);
  }
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 540ms var(--ease-out), transform 760ms var(--ease-expo);
    transition-delay: calc(var(--stagger, var(--d, 0)) * 65ms);
    will-change: transform, opacity;
  }
  .js [data-anim="fade-up"] {
    transform: translate3d(0, 32px, 0);
  }
  .js [data-anim="scale-in"] {
    transform: translate3d(0, 24px, 0) scale(0.95);
  }
  .js [data-anim="slide-left"] {
    transform: translate3d(-32px, 0, 0);
  }
  .js [data-anim="slide-right"] {
    transform: translate3d(32px, 0, 0);
  }
  .js [data-anim="tilt-up"] {
    transform: perspective(900px) rotateX(9deg) translate3d(0, 28px, 0);
  }
  .js [data-reveal].is-in,
  .js [data-anim].is-in {
    opacity: 1;
    transform: none;
  }
}

@keyframes ad-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ad-line {
  to {
    transform: none;
  }
}

/* ---------- TABLET & MOBILE RESPONSIVE OPTIMIZATION ---------- */
@media (max-width: 64em) {
  .section {
    padding-block: 3.75rem;
  }
  .cover-main-grid {
    align-content: space-between;
    row-gap: 1.15rem;
  }
  .cover-editorial-col,
  .cover-aperture-col {
    grid-column: 1 / 13;
  }
  .cover-aperture-col {
    order: 1;
  }
  .cover-editorial-col {
    order: 2;
    gap: 0.95rem;
    padding-right: 0;
  }
  .cover-aperture {
    height: 36svh;
    min-height: 14rem;
    max-height: 19rem;
  }
  .cover-guest-seal {
    max-width: 100%;
  }
  .hero-main-grid {
    align-content: space-between;
    row-gap: 1.25rem;
  }
  .hero-editorial-col,
  .hero-aperture-col {
    grid-column: 1 / 13;
  }
  .hero-aperture-col {
    order: 1;
  }
  .hero-editorial-col {
    order: 2;
    gap: 1rem;
    padding-right: 0;
  }
  .hero-aperture {
    height: 46svh;
    min-height: 17.5rem;
  }
  .hero-guest-strip {
    display: none;
  }
  .gallery-card {
    grid-column: span 6;
  }
  .gift-left,
  .gift-right,
  .qris-visual-col,
  .qris-details-col {
    grid-column: 1 / 13;
  }
}

@media (max-width: 48em) {
  .section {
    padding-block: 3rem;
  }
  .hero-wrap {
    padding-block: 0.9rem 1.35rem;
    gap: 0.85rem;
  }
  .nav-links a {
    display: none;
  }
  .hero-aperture {
    height: 43svh;
    min-height: 16rem;
  }
  .hero-title-group {
    gap: 0.65rem;
  }
  .intro-left,
  .intro-right,
  .couple-info,
  .couple-portraits,
  .story-editorial-col,
  .story-chronicle-col,
  .schedule-title-col,
  .schedule-lead-col,
  .poster-item-name,
  .poster-item-meta,
  .poster-item-time,
  .schedule-venue-box,
  .schedule-actions,
  .gallery-title-col,
  .gallery-lead-col,
  .rsvp-form-col,
  .rsvp-live-col {
    grid-column: 1 / 13;
  }
  .schedule-actions {
    justify-content: flex-start;
  }
  .couple-portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-card {
    grid-column: span 6;
  }
  .intro-facts-row {
    grid-template-columns: 1fr;
  }
  .footer-col-1,
  .footer-col-2 {
    grid-column: span 6;
  }
  .footer-col-3,
  .footer-col-4 {
    grid-column: span 6;
  }
}

/* ==========================================================================
   BESPOKE MOBILE UI/UX SYSTEM (<= 680px / 42.5em)
   Desktop (1440px) & Tablet (768px) remain 100% untouched.
   ========================================================================== */
@media (max-width: 42.5em) {
  :root {
    --margin: 1.125rem; /* 18px: yields 354px content width on 390px phone */
    --gutter: 0.85rem;
    --step-small: 1rem;        /* 16px (was 15px) */
    --step-body: 1.0625rem;    /* 17px (was 16px) */
    --step-lead: 1.1875rem;    /* 19px (was 18px) */
    --step-head: 1.875rem;     /* 30px */
    --step-display: 2.95rem;   /* 47px */
    --muted: #cbc2b4;          /* brighter muted ink for small screens */
  }

  /* Mobile legibility: Boska's hairline strokes get too thin at small sizes,
     so running text uses the 500 cut and slightly brighter ink. Display sizes untouched. */
  body {
    font-weight: 500;
    color: #eeeeec;
    text-rendering: optimizeLegibility;
  }

  p,
  li,
  address,
  label,
  .small,
  .field-label,
  .field-input,
  .field-textarea,
  .wish-text,
  .person-parents,
  .footer-list,
  .footer-bottom-bar {
    font-weight: 500;
  }

  .small {
    line-height: 1.5;
  }

  .field-input::placeholder,
  .field-textarea::placeholder {
    color: #9d9486;
  }

  .btn-primary,
  .btn-outline,
  .audio-btn,
  .wish-author,
  .live-pass-tag {
    font-weight: 700;
  }

  .wish-text {
    color: var(--muted);
    line-height: 1.6;
  }

  .desktop-only-copy {
    display: none;
  }

  .mobile-cap-only {
    display: inline;
  }

  .section {
    padding-block: 2.5rem;
  }

  .prose-justify {
    line-height: 1.65;
    word-spacing: 0;
  }

  /* 0. Mobile Cover Gate ("Buka Undangan") Gothic Composition */
  .cover-wrap {
    min-height: 100svh;
    padding-block: 0.85rem 1.15rem;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .cover-rose-backdrop {
    width: 110vw;
    left: 50%;
    opacity: 0.65;
  }

  .cover-top {
    gap: 0.5rem;
  }

  .cover-top-badge {
    display: none;
  }

  .cover-main-grid {
    align-content: start;
    row-gap: 0.75rem;
  }

  .cover-aperture {
    height: 14.5rem;
    min-height: 14.5rem;
    max-height: 14.5rem;
  }

  .cover-aperture::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(12, 10, 8, 0) 58%, rgba(12, 10, 8, 0.72) 100%); /* taste-skill-ignore */
  }

  .cover-aperture .slide-photo {
    object-position: center 50%;
  }

  .cover-editorial-col {
    gap: 0.55rem;
  }

  .cover-title-group {
    gap: 0.25rem;
  }

  .cover-divider-wrap {
    max-width: 100%;
    margin-block: 0.15rem;
  }

  .cover-support {
    font-size: var(--step-lead);
    line-height: 1.42;
    text-align: left;
    max-width: 100%;
  }

  .cover-guest-seal {
    padding: 0.85rem 1rem;
    gap: 0.25rem;
    max-width: 100%;
  }

  .gothic-corner-filigree {
    width: 18px;
    height: 18px;
  }

  .aperture-corner {
    width: 20px;
    height: 20px;
  }

  .section-rose-watermark {
    width: 110vw;
    left: 50%;
    opacity: 0.65;
  }

  .gothic-heading-divider {
    max-width: 100%;
    margin-top: 0.35rem;
  }

  .cover-action-row {
    padding-top: 0.35rem;
    width: 100%;
  }

  .cover-open-btn {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.6rem 1rem;
  }

  /* 1. Clean Minimal Mobile Header (Only Brand Wordmark + Audio Button) */
  .hero-top {
    position: relative;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .wordmark-top {
    font-size: var(--step-lead);
    line-height: 1.2;
  }

  .nav-links {
    display: flex;
    align-items: center;
    width: auto;
  }

  .nav-links a {
    display: none;
  }

  .audio-btn {
    position: static;
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    font-size: var(--step-small);
  }

  /* 2. Mobile Hero First-Screen Poster Composition */
  .hero-wrap {
    min-height: 100svh;
    padding-block: 0.95rem 1.35rem;
    justify-content: flex-start;
    gap: 0.95rem;
  }

  .hero-main-grid {
    align-content: start;
    row-gap: 1.1rem;
  }

  .hero-aperture {
    height: 22rem;
    min-height: 22rem;
    max-height: 22rem;
  }

  .hero-aperture::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(12, 10, 8, 0) 58%, rgba(12, 10, 8, 0.72) 100%); /* taste-skill-ignore */
  }

  .hero-aperture .slide-photo {
    object-position: center 48%;
  }

  .slide-dots {
    bottom: 0.65rem;
    right: 0.65rem;
    padding: 0.35rem 0.55rem;
  }

  .hero-editorial-col {
    gap: 0.7rem;
  }

  .hero-title-group {
    gap: 0.35rem;
  }

  .hero-monument {
    font-size: var(--step-display);
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .hero-support {
    font-size: var(--step-lead);
    line-height: 1.42;
    text-align: left;
    max-width: 100%;
  }

  .hero-guest-strip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    max-width: 100%;
  }

  .guest-strip-name {
    font-size: var(--step-lead);
    color: var(--accent-strong);
  }

  .hero-cta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
  }

  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.6rem 0.45rem;
    font-size: var(--step-small);
    text-align: center;
  }

  /* 3. Section 2: Salam Kehormatan */
  .intro-grid {
    row-gap: 1.35rem;
  }

  .intro-left {
    gap: 1rem;
  }

  .intro-portrait img {
    aspect-ratio: 4 / 4.5;
    object-position: center 22%;
  }

  .intro-right {
    gap: 1.15rem;
  }

  .statement-quote {
    background: var(--surface);
    padding: 1.1rem 1.2rem;
    border-left: 3px solid var(--accent);
    font-size: var(--step-lead);
    line-height: 1.5;
    text-align: left;
    max-width: 100%;
  }

  .intro-facts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .fact-box {
    padding: 0.95rem 0.9rem;
    border-top: 2px solid var(--accent);
    justify-content: flex-start;
    gap: 0.3rem;
  }

  .fact-value {
    font-size: var(--step-lead);
    line-height: 1.25;
    color: var(--accent-strong);
  }

  /* 3.5 Section: Kisah Cinta / Love Story */
  .story-split-grid {
    row-gap: 2rem;
  }

  .story-timeline-list {
    gap: 2rem;
  }

  .story-milestone-title {
    font-size: var(--step-lead);
    line-height: 1.25;
    color: var(--accent-strong);
  }

  .story-milestone-desc {
    font-size: var(--step-body);
    line-height: 1.65;
    font-weight: 500;
    color: #eeeeec;
  }

  .story-portrait {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .story-portrait-caption {
    font-size: 0.8125rem;
    padding-inline: 2.25rem;
    bottom: 0.85rem;
    background: transparent;
  }

  /* 4. Section 3: Kedua Mempelai */
  .couple-grid {
    row-gap: 1.5rem;
  }

  .couple-info {
    gap: 1.15rem;
  }

  .couple-cards {
    gap: 0.85rem;
  }

  .person-block {
    padding: 1.15rem 1.2rem;
    border-left: 3px solid var(--accent);
    gap: 0.35rem;
  }

  .person-name {
    font-size: var(--step-lead);
    color: var(--accent-strong);
  }

  .person-parents {
    font-size: var(--step-body);
    line-height: 1.5;
  }

  .couple-portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
  }

  .couple-fig img {
    aspect-ratio: 3 / 4.2;
  }

  .couple-fig:nth-child(2) {
    margin-top: 1.25rem;
  }

  /* 5. Section 4: Waktu & Tempat + 4-Column Symmetrical Countdown */
  .schedule-header {
    margin-bottom: 1.35rem;
    row-gap: 0.85rem;
  }

  .schedule-lead-col {
    gap: 1rem;
  }

  .countdown-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
  }

  .countdown-cell {
    padding: 0.7rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border-top: 2px solid var(--accent);
    text-align: center;
  }

  .countdown-val {
    font-size: var(--step-lead);
    line-height: 1.1;
    color: var(--accent-strong);
  }

  .poster-list {
    gap: 0.85rem;
  }

  .poster-row {
    padding: 1.2rem 1.15rem;
    border-left: 3px solid var(--accent);
    row-gap: 0.35rem;
  }

  .poster-item-name {
    font-size: var(--step-head);
  }

  .poster-item-time {
    font-size: var(--step-lead);
    color: var(--accent-strong);
  }

  .schedule-footer {
    margin-top: 1.25rem;
    row-gap: 1rem;
  }

  .schedule-venue-box {
    background: var(--surface);
    padding: 1.05rem 1.15rem;
    width: 100%;
  }

  .venue-title {
    color: var(--accent-strong);
  }

  .schedule-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    width: 100%;
  }

  .schedule-actions .btn-primary,
  .schedule-actions .btn-outline {
    width: 100%;
  }

  /* 6. Section 5: Galeri Bahagia (Asymmetric Magazine Lookbook Rhythm) */
  .gallery-header {
    margin-bottom: 1.35rem;
    row-gap: 0.75rem;
  }

  .gallery-bento {
    gap: 0.75rem;
  }

  .gallery-card:nth-child(1),
  .gallery-card:nth-child(4) {
    grid-column: 1 / 13;
  }

  .gallery-card:nth-child(1) img,
  .gallery-card:nth-child(4) img {
    aspect-ratio: 4 / 4.2;
  }

  .gallery-card:nth-child(2),
  .gallery-card:nth-child(3),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(6) {
    grid-column: span 6;
  }

  .gallery-card:nth-child(2) img,
  .gallery-card:nth-child(3) img,
  .gallery-card:nth-child(5) img,
  .gallery-card:nth-child(6) img {
    aspect-ratio: 3 / 4.1;
  }

  /* 7. Section 6: Kehadiran & Doa Restu (CRUD) */
  .rsvp-grid {
    row-gap: 1.75rem;
  }

  .rsvp-form-col,
  .rsvp-live-col {
    gap: 1.15rem;
  }

  .rsvp-form {
    padding: 1.25rem 1.15rem;
    gap: 1rem;
  }

  .rsvp-submit-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    width: 100%;
  }

  .rsvp-submit-row .btn-primary,
  .rsvp-submit-row .btn-outline {
    width: 100%;
  }

  .live-pass-box {
    padding: 1.1rem 1.15rem;
    border-left: 3px solid var(--accent);
  }

  .wishes-feed {
    gap: 0.85rem;
    max-height: 23rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
  }

  .wish-item {
    background: var(--surface);
    padding: 1rem 1.15rem;
    gap: 0.45rem;
  }

  /* 8. Section 7: Tanda Kasih Digital & QRIS */
  .gift-grid {
    row-gap: 1.75rem;
  }

  .gift-left {
    gap: 1.25rem;
  }

  .bank-stack {
    gap: 0.85rem;
  }

  .bank-card {
    background: var(--surface);
    padding: 1.1rem 1.15rem;
    border-left: 3px solid var(--accent);
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .bank-card .btn-outline {
    width: 100%;
  }

  .qris-monument-card {
    padding: 1.25rem 1.15rem;
    gap: 1.2rem;
  }

  .qris-visual-col {
    padding: 1.2rem 1rem;
  }

  .qris-canvas-wrap {
    max-width: 14.5rem;
  }

  .qris-details-col {
    gap: 0.85rem;
  }

  .qris-actions .btn-primary,
  .qris-actions .btn-outline {
    width: 100%;
  }

  /* 9. Footer & Modals on Mobile */
  .site-footer {
    padding-top: 2.5rem;
    padding-bottom: 1.75rem;
    gap: 2.25rem;
  }

  .footer-cols {
    row-gap: 1.35rem;
  }

  .footer-list p:first-child {
    color: var(--accent-strong);
    font-weight: 600;
  }

  .modal-backdrop {
    padding: 1rem;
  }

  .modal-card,
  .lightbox-card {
    padding: 1.25rem 1.1rem;
    gap: 0.9rem;
  }

  .modal-card .btn-primary {
    width: 100%;
  }

  .lightbox-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
  }

  .lightbox-controls #lightbox-close {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
  }

  .lightbox-controls .btn-outline {
    width: 100%;
    padding-inline: 0.5rem;
  }
}