.calendar-section {
  position: relative;
  isolation: isolate;
  margin: 22px 26px 36px;
  padding: 42px 28px 32px;
  background: #f4f2e7;
  border: 1px solid #bec69e80;
}
.calendar-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/envelope-dz.webp') center bottom / 400% auto;
  opacity: .06;
  pointer-events: none;
}
.calendar-section::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid #bcc39955;
  pointer-events: none;
}
.calendar-heading .small-script { font-size: 1.7rem; margin-bottom: 8px; }
.calendar-heading h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7.8vw, 2.65rem);
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--olive);
}
.calendar-flourish { display: block; color: var(--rust); font-size: .9rem; margin: 17px 0; }
.calendar-sheet { padding: 12px 0 14px; border-block: 1px solid #a9b28a80; }
.wedding-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wedding-calendar th {
  font-family: var(--serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #727953;
  height: 32px;
}
.wedding-calendar td { padding: 4px 0; height: 48px; font-size: 1.12rem; color: #554f3f; }
.wedding-calendar td > span { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; }
.wedding-calendar .wedding-day > span {
  border-radius: 50%;
  background: #b3654b;
  color: #fffaf1;
  font-weight: 600;
  box-shadow: 0 2px 8px #86523d26;
}
.wedding-calendar .wedding-day > span::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid #b3654b;
  border-radius: 50%;
}
.wedding-calendar .wedding-day > span::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px dashed #fff1dcbf;
  border-radius: 50%;
}
.calendar-date-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 15px;
  background: #dfe4c6;
  color: var(--olive);
}
.calendar-date-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.calendar-date-band time { font-size: 1.3rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.calendar-date-band time span { padding-inline: 3px; color: #a36a4c; }
.wedding-countdown { margin-top: 33px; }
.countdown-heading { color: var(--olive); font-size: .73rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 17px; padding-block: 15px 12px; border-block: 1px solid #a9b28a80; }
.countdown-grid > div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid #b9bf9c7a; }
.countdown-grid > div:last-child { border-right: 0; }
.countdown-number { font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 500; line-height: 1; color: #925a42; font-variant-numeric: lining-nums tabular-nums; }
.countdown-label { margin-top: 8px; color: #68704b; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.countdown-location { margin-top: 15px; font-size: .83rem; color: #787961; letter-spacing: .04em; }
@media (max-width: 480px) {
  .calendar-section { margin-inline: 20px; padding: 35px 22px 28px; }
  .calendar-date-band { padding-inline: 11px; gap: 7px; }
  .calendar-date-band time { font-size: 1.15rem; }
}
@media (max-width: 350px) {
  .calendar-section { margin-inline: 14px; padding-inline: 16px; }
  .calendar-date-band { flex-direction: column; gap: 2px; }
  .wedding-calendar td > span { width: 31px; height: 31px; }
}