/* Event layouts use each invitation's photography, type and ornament. */
.new-page-puspa { --event-photo: url('/photos/34932597.webp'); }
.new-page-janur { --event-photo: url('/photos/30700704.webp'); }
.new-page-wastra { --event-photo: url('/photos/8017669.webp'); }
.new-page-padma { --event-photo: url('/photos/34905651.webp'); }
.new-page-cempaka { --event-photo: url('/photos/30720681.webp'); }
.new-page-segara { --event-photo: url('/photos/10145598.webp'); }
.distinct-page-ratri { --event-photo: url('/photos/8629847.webp'); }
.distinct-page-kori { --event-photo: url('/photos/8584297.webp'); }
.distinct-page-candra { --event-photo: url('/photos/10145598.webp'); }
.distinct-page-wana { --event-photo: url('/photos/30700704.webp'); }

.event-countdown {
  max-width: 410px !important;
  margin: 34px auto 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.event-countdown > p {
  margin: 0 0 14px !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
}
.event-countdown > p::after {
  content: '';
  display: block;
  width: 27px;
  height: 1px;
  margin: 12px auto 0;
  background: currentColor;
  opacity: .5;
}
.countdown-units { gap: 0 !important; }
.countdown-units > div {
  min-height: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.countdown-units > div + div { border-left: 1px solid color-mix(in srgb, currentColor 27%, transparent) !important; }
.countdown-units strong {
  font: 400 clamp(29px, 7.5vw, 37px)/1 var(--font-cormorant), Georgia, serif !important;
  font-variant-numeric: tabular-nums;
}
.distinct-event .countdown-units strong,
.event-countdown-tirta .countdown-units strong { font-family: var(--font-marcellus), Georgia, serif !important; font-size: clamp(26px, 6.7vw, 34px) !important; }
.countdown-units span { font-size: 8px !important; letter-spacing: .13em !important; }

.new-date-display,
.distinct-date {
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  height: 390px !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 0 20px 28px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 190px 190px 8px 8px !important;
  color: #fff9f0 !important;
  background: linear-gradient(180deg, #14111108 22%, #16110fc4 100%), var(--event-photo) center 42% / cover no-repeat !important;
  box-shadow: none !important;
  text-align: center !important;
}
.new-date-display strong,
.distinct-date strong {
  font: 400 78px/.85 var(--font-cormorant), Georgia, serif !important;
  text-shadow: 0 1px 12px #16110f55;
}
.new-date-display > span,
.distinct-date > span {
  display: block !important;
  color: inherit !important;
  font: 400 27px/1.1 var(--font-cormorant), Georgia, serif !important;
  text-align: center !important;
  text-shadow: 0 1px 10px #16110f77;
}
.new-date-display small,
.distinct-date small {
  display: block;
  margin-top: 11px !important;
  color: inherit !important;
  font: 500 10px/1.4 var(--font-dm-sans), Arial, sans-serif !important;
  letter-spacing: .08em;
  text-shadow: 0 1px 7px #16110f99;
}
.new-page-janur .new-date-display { border-radius: 50% 50% 18px 18px !important; }
.new-page-wastra .new-date-display,
.new-page-segara .new-date-display,
.distinct-page-candra .distinct-date { border-radius: 3px !important; }
.new-page-padma .new-date-display { border-radius: 13px 13px 190px 190px !important; }
.new-page-janur .new-date-display strong,
.new-page-wastra .new-date-display strong,
.new-page-padma .new-date-display strong,
.new-page-segara .new-date-display strong,
.distinct-date strong { font-family: var(--font-marcellus), Georgia, serif !important; font-size: 66px !important; }

.new-event-details { margin-top: 0 !important; }
.new-event-details > div:first-child { display: none !important; }
.new-event-details > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  max-width: 390px;
  margin: auto;
  padding: 5px 0 0 !important;
  border: 0 !important;
  text-align: center !important;
}
.new-event-details dt { font-size: 9px !important; letter-spacing: .2em !important; }
.new-event-details dd { font: 400 23px/1.2 var(--font-cormorant), Georgia, serif !important; text-align: center !important; }
.distinct-event-place { margin: 0 auto 15px !important; font: 400 23px/1.2 var(--font-cormorant), Georgia, serif !important; }

.l-event-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  max-width: 390px !important;
  border: 0 !important;
  background: none !important;
}
.l-event-grid > div { min-height: 0 !important; padding: 22px 9px !important; border: 0 !important; }
.l-event-grid > div:first-child {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 390px;
  padding: 0 16px 30px !important;
  border-radius: 190px 190px 8px 8px;
  background: linear-gradient(180deg, #14111108 22%, #16110fc4 100%), url('/photos/34905643.webp') center 38% / cover no-repeat;
}
.l-event-grid > div:first-child .l-event-label { color: #fff9f0; }
.l-event-grid > div:first-child strong { font-size: 75px !important; }
.l-event-grid > div:first-child > span:last-child { color: #fff9f0; font-size: 13px; }
.l-event-grid > div:nth-child(2),
.l-event-grid > div:nth-child(3) { padding-top: 26px !important; }
.l-event-grid > div:nth-child(3) { border-left: 1px solid #fff6e871 !important; }
.l-event-grid .l-event-label { margin-bottom: 9px; }
.l-event-grid strong,
.l-event-grid .l-event-place { font-size: 32px !important; }
.l-event-grid div > span:last-child { margin-top: 8px !important; }

.t-event-detail { background: none !important; }
.t-event-detail strong { font-size: 24px !important; }

.distinct-cover-kori .distinct-cover-copy { top: calc(49% + clamp(16px, 3svh, 26px)); }

@media (max-width: 420px) {
  .new-date-display, .distinct-date, .l-event-grid > div:first-child { height: 350px !important; }
}