/* Nocturne: pratinjau katalog mengikuti warna undangan aslinya. */
.catalog-list-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.design-preview.design-nocturne,
.collection-design.collection-design-nocturne {
  background: #2d1d22;
  color: #f3eee4;
  border-color: #b39a72;
}
.design-nocturne .mini-invitation,
.collection-design-nocturne .collection-couple {
  color: #f3eee4;
}
.design-nocturne .mini-invitation {
  background: #39242a;
  box-shadow: 0 0 0 1px #b39a724d;
}
.design-nocturne .mini-names em,
.collection-design-nocturne .collection-couple em {
  color: #d1b791;
}
.design-nocturne .mini-invitation img,
.collection-design-nocturne img {
  object-position: center 70%;
  border-radius: 45% 45% 0 0;
}
.design-nocturne .preview-category,
.collection-design-nocturne .collection-category,
.collection-design-nocturne .collection-date {
  color: #dfc59f;
}
/* Shared brand baseline. Load after page styles so new sections inherit it. */
.home-page, .inner-page {
  --wine: var(--oxblood);
  --paper: var(--parchment-cream);
  --cream: var(--parchment-cream);
  --hero-burgundy: var(--oxblood);
  --hero-gold: var(--antique-gold);
  --hero-ivory: var(--parchment-cream);
  --frame-color: var(--antique-gold);
  --frame-outline: color-mix(in srgb, var(--antique-gold) 50%, var(--parchment-cream));
  color: var(--warm-ink);
  font-family: var(--sans);
  font-weight: 400;
  background-color: var(--parchment-cream);
}
h1, h2,
.home-page .hero-heading h1,
.home-page .letter-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--warm-ink);
}
h1 em, h2 em,
.home-page .hero-heading h1 em,
.home-page .letter-body h2 em {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  color: var(--oxblood);
}
h3, .home-page .story-caption > span:first-child {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--warm-ink);
}
.pricing-card.recommended h3 { color: var(--parchment-cream); }
.home-page .pricing-card.recommended {
  background: linear-gradient(145deg, #681f2bf0, #681f2bdf), url('/img/stationery/burgundy-paper-reference.webp') center/700px;
}
body p,
.home-page .hero-heading > p,
.home-page .journey-intro > p,
.home-page .journey-copy p,
.home-page .story-right > p,
.home-page .planning-intro > p,
.home-page .consultation-section > p {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
}
body .site-header :is(.desktop-nav, .mobile-nav, .header-cta),
.home-page .site-header :is(.desktop-nav, .mobile-nav, .header-cta) {
  font-family: var(--sans);
  font-weight: 500;
}
.eyebrow, .section-index, .section-topline, .small-note,
.hero-edition, .hero-tomorrow, .scroll-cue, .stationery-number,
.hero-side > span, .journey-benefits span, .paper-eyebrow, .paper-bottom,
.home-page .story-caption > span:last-child, .story-small figcaption,
.stories-edge, .stories-edge small, .popular-label, .field > label,
.loader-caption, .loader-edition {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.home-page .stories-section :is(.eyebrow, .small-note),
.home-page .journey-section .section-index,
.home-page .story-caption > span:last-child,
.home-page .story-small figcaption { color: var(--muted); }
.button, .header-cta, .text-link { font-family: var(--sans); font-weight: 500; }
.home-page .planning-faq summary { font-family: var(--sans); font-weight: 500; }
.brand-mark, .paper-logo, .loader-monogram { color: var(--oxblood); }
.home-page .story-feature { border-color: var(--antique-gold); outline-color: var(--frame-outline); }
.home-page .story-small { border-color: var(--frame-outline); outline-color: var(--frame-outline); }
.short-rule, .loader-rule, .loader-progress::after { background-color: var(--antique-gold); }
.button-dark:hover { background-color: color-mix(in srgb, var(--oxblood) 86%, var(--warm-ink)); }
.home-page .header-cta { color: var(--oxblood); border-color: var(--oxblood); }
.home-page .header-cta:hover, .home-page .header-cta:focus-visible { color: var(--parchment-cream); background-color: var(--oxblood); }
.loading-active .invitation-loader, .loading-exit .invitation-loader { background-color: var(--parchment-cream); color: var(--oxblood); }
.loader-name { color: var(--warm-ink); }
.loader-name em { color: var(--oxblood); }
.loader-caption, .loader-status, .loader-edition { color: var(--muted); }
.loader-status { font: 400 11px/1.6 var(--sans); letter-spacing: .02em; }
.home-page .stories-section .story-right h2 { letter-spacing: -.045em; }
/* Manrope is wider than the previous serif navigation. Keep compact controls
   and the complete hero sentence readable without changing the composition. */
.home-page .hero-heading > p { font-size: clamp(12px, 1.22vw, 21px); }
@media (min-width: 1101px) {
  .home-page .letter-navigation-slot .desktop-nav { font-size: 13px; gap: 28px; }
  .home-page .letter-navigation-slot .header-cta { font-size: 13px; }
}
@media (max-width: 767px) {
  .home-page .letter-navigation-slot .header-cta { font-size: 9px; letter-spacing: 0; }
  .home-page .story-right h2 { font-size: clamp(34px, 9.4vw, 60px); }
  .home-page .story-right > p { font-size: 13px; line-height: 1.8; }
  .home-page .hero-heading > p { font-size: clamp(10px, 2.7vw, 15px); }
}
.whatsapp-consultation {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 450px;
  min-height: 88px;
  padding: 18px 20px;
  margin-top: 28px;
  border: 1px solid var(--antique-gold);
  background: var(--parchment-cream);
  color: var(--warm-ink);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.whatsapp-consultation:hover {
  border-color: #18794e;
  background: #edf3eb;
}
.whatsapp-consultation-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: white;
  background: #18794e;
}
.whatsapp-consultation-icon svg { width: 27px; height: 27px; }
.whatsapp-consultation-copy { display: grid; gap: 5px; min-width: 0; }
.whatsapp-consultation-copy > span { font-size: 12px; color: var(--muted); }
.whatsapp-consultation-copy strong { font-size: 17px; font-weight: 500; line-height: 1.4; }
.whatsapp-consultation-arrow { margin-left: auto; font-size: 23px; color: #18794e; }
@media (max-width: 480px) {
  .whatsapp-consultation { padding: 16px 13px; gap: 11px; }
  .whatsapp-consultation-copy strong { font-size: 14px; }
  .whatsapp-consultation-copy > span { font-size: 10px; }
  .whatsapp-consultation-icon { flex-basis: 40px; width: 40px; height: 40px; }
}

/* Ikon kontak mengikuti warna tombol. */
.cta-whatsapp-icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; display: inline-block; }

/* Identitas September 2026: crop tampilan logo dari aset asli bertekstur. */
.brand-art { position: relative; display: block; width: 100%; aspect-ratio: 1.6; overflow: hidden; mix-blend-mode: multiply; }
.brand-art > img { position: absolute; display: block; width: 160%; max-width: none; height: auto; left: -30%; top: -73%; }
.footer-wordmark { display: block; width: 220px; }
.loader-logo { width: min(280px, 65vw); }
.home-page .wax-seal { background: none; border: 0; box-shadow: none; overflow: visible; }
.home-page .wax-seal::before, .home-page .wax-seal::after { content: none; }
.home-page .wax-seal > .brand-wax-seal { display: block; position: absolute; inset: -9%; width: 118%; height: 118%; max-width: none; object-fit: contain; margin: 0; transform: none; filter: drop-shadow(-3px 5px 3px #25120c55); }
@media (max-width: 767px) {
  .footer-wordmark { width: 180px; }
}

/* Latar kertas logo sudah dibuang di file WebP, jadi tidak ada kotak hitam saat gambar dimuat. */
.brand-art { aspect-ratio: 1.45; mix-blend-mode: normal; }
.brand-art > img { top: -64%; }
.home-page .wax-seal > .brand-wax-seal { rotate: 0deg; }

/* Panah vektor konsisten pada Android/iOS, tanpa font emoji. */
.ui-arrow { display: inline-block; width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -.15em; }
.arrow-up .ui-arrow { transform: rotate(-45deg); }
.arrow-left .ui-arrow { transform: rotate(-135deg); }
@media (max-width: 767px) {
  .home-page .hero-heading > p { font-size: 13px; line-height: 1.65; max-width: 310px; margin: 18px auto 0; padding: 0 8px; color: var(--warm-ink); white-space: normal; }
  .home-page .envelope-scene { top: max(480px, 56svh); }
}

/* Simbol asli tanpa lettering di gambar; nama brand tetap berupa teks web. */
.brand-art { aspect-ratio: 2.3; }
.brand-art > img { top: -105%; }
.brand-divider { height: 22px; width: 1px; background: var(--antique-gold); opacity: .65; }
.brand-wording { font: 400 23px/1.15 var(--serif); letter-spacing: -.6px; color: var(--warm-ink); white-space: nowrap; }
.footer-wordmark { width: auto; display: flex; align-items: center; gap: 18px; }
.footer-wordmark .brand-art { width: 80px; flex: 0 0 80px; }
.footer-wordmark .brand-wording { font-size: 28px; }
.loader-logo { width: min(180px, 50vw); margin-bottom: 22px; }
.home-page .wax-seal > .brand-wax-seal { filter: url(#antique-seal) drop-shadow(-2px 3px 1px #200d0ba6) drop-shadow(-5px 8px 5px #200d0b66); }
@media (max-width: 767px) {
  .brand-divider { height: 18px; }
  .brand-wording { font-size: 16px; letter-spacing: -.5px; }
  .footer-wordmark .brand-art { width: 56px; flex-basis: 56px; }
  .footer-wordmark .brand-wording { font-size: 24px; }
}

/* Proporsi versi before dipertahankan; hanya simbol logo yang diganti. */
.site-header .brand-mark { min-height: 1em; display: flex; align-items: center; }
.site-header .brand-mark > .brand-art { display: block; width: 1.1em; height: .48em; padding: 0; margin: 0; top: 0; font-size: inherit; letter-spacing: normal; }
.site-header .brand-mark .brand-art > img { top: -105%; }
.paper-logo { display: block; width: 1.6em; }
.paper-logo > .brand-art { width: 100%; height: 1em; clip-path: inset(0 0 28% 0); aspect-ratio: auto; margin: 0; font-size: inherit; letter-spacing: normal; }
.paper-logo > .brand-art > img { top: -72%; }

/* Jarak identitas dirapatkan; posisi navigasi dan tombol tetap stabil. */
body .site-header .wordmark { gap: 14px; }
body .site-header .brand-mark { padding-right: 13px; }
@media (min-width: 768px) {
  .home-page .hero-navigation-slot .wordmark { margin-left: -16px; }
}
@media (max-width: 767px) {
  body .site-header .wordmark { gap: 7px; }
  body .site-header .brand-mark { padding-right: 7px; }
}

/* Bingkai yang sama dari kartu kecil sampai halaman terbuka. */
.home-page { --invitation-frame-inset: 17px; --invitation-frame-gap: -5px; }
.home-page .invitation-paper { padding: var(--invitation-frame-inset); }
.home-page .paper-border:not(.paper-cover),
.home-page .letter-content::before,
.motion-ready .home-page .letter-content.is-unfolding::before {
  border: 1px solid var(--frame-color, #b29a74);
  outline: 1px solid var(--frame-outline, #c9b38a);
  outline-offset: var(--invitation-frame-gap);
}
.home-page .letter-content::before,
.motion-ready .home-page .letter-content.is-unfolding::before { inset: var(--invitation-frame-inset); }
.home-page .paper-cover { inset: var(--invitation-frame-inset); border: 0; outline: 0; }
@media (max-width: 767px) { .home-page { --invitation-frame-inset: 12px; } }

/* Ruang napas navbar di bawah bingkai atas kartu, termasuk saat sticky. */
.paper-navigation-ready .home-page .letter-navigation-slot {
  padding-top: 16px;
  height: 128px;
  box-sizing: border-box;
}
@media (min-width: 1101px) {
  .paper-navigation-ready .home-page .letter-navigation-slot { height: 104px; }
}
@media (max-width: 767px) {
  .paper-navigation-ready .home-page .letter-navigation-slot { padding-top: 12px; height: 90px; }
}