.calendar-section {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), transparent 58%),
    linear-gradient(180deg, #f8f4ee, #eee7de 50%, #f7f3ec);
}
.calendar-lace {
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  height: clamp(82px, 14vw, 145px);
  background: url("../img/lace-theme/lace-border.jpg") center 45% / min(760px, 92%) auto no-repeat;
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.calendar-lace-top { top: -28px; transform: rotate(90deg) scaleX(1.8); }
.calendar-lace-bottom { bottom: -28px; transform: rotate(-90deg) scaleX(1.8); }
.calendar-card {
  position: relative;
  width: min(100%, 820px);
  margin: auto;
  padding: clamp(2.8rem, 7vw, 4.5rem) clamp(.7rem, 5vw, 3.2rem);
  overflow: hidden;
  text-align: center;
  background: rgba(255,253,249,.78);
  border: 1px solid rgba(122,103,84,.16);
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(84,70,58,.07);
  backdrop-filter: blur(8px);
}
.calendar-card::before {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(181,155,117,.16);
  border-radius: 20px;
  content: "";
  pointer-events: none;
}
.calendar-heading { margin-bottom: 2.2rem; }
.calendar-heading h2 {
  font-family: "Mina Miremad", Tahoma, sans-serif;
  font-size: clamp(2.35rem, 6.5vw, 4rem);
  font-weight: 400;
  line-height: 1.8;
}
.simple-countdown {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  width: min(100%, 640px);
  margin: 0 auto;
}
.countdown-unit {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: .8rem .3rem;
}
.countdown-unit + .countdown-unit::before {
  position: absolute;
  top: 18%;
  left: 0;
  width: 1px;
  height: 64%;
  background: linear-gradient(transparent, rgba(181,155,117,.55), transparent);
  content: "";
}
.simple-countdown strong {
  display: block;
  color: #6a5d56;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 4.1rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.3;
  white-space: nowrap;
}
.simple-countdown .long-days strong { font-size: clamp(1.65rem, 5.3vw, 3.2rem); }
.calendar-label {
  direction: rtl;
  display: block;
  margin-top: .35rem;
  color: #8d7d74;
  font-family: Tahoma, Arial, sans-serif;
  font-size: clamp(.68rem, 1.7vw, .83rem);
  line-height: 2;
}
.calendar-ornament {
  direction: ltr;
  display: flex;
  width: min(68%, 360px);
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 1.7rem auto .75rem;
  color: #b59b75;
}
.calendar-ornament span { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,155,117,.68)); }
.calendar-ornament span:last-child { transform: scaleX(-1); }
.calendar-ornament b { flex: 0 0 auto; font-size: .75rem; font-weight: 400; animation: ornamentBreathe 3s ease-in-out infinite; }
.calendar-date {
  position: relative;
  z-index: 2;
  display: block;
  color: #71655e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.78rem, 2vw, .95rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  line-height: 2;
}
.countdown-flower {
  position: absolute;
  width: clamp(115px, 20vw, 190px);
  aspect-ratio: 1;
  opacity: 0;
  background: url("../img/lace-theme/floral-sprigs.jpg") 8% 24% / 330% auto no-repeat;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: saturate(.7) contrast(.95);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle, #000 42%, transparent 72%);
  pointer-events: none;
}
.countdown-flower-left { top: -28px; left: -30px; transform-origin: 15% 90%; }
.countdown-flower-right { right: -34px; bottom: -30px; background-position: 88% 76%; transform-origin: 85% 90%; }
.calendar-card.visible .countdown-flower-left { animation: countdownFlowerLeft 1.4s .25s cubic-bezier(.2,.75,.2,1) both, countdownSway 8s 1.8s ease-in-out infinite; }
.calendar-card.visible .countdown-flower-right { animation: countdownFlowerRight 1.4s .45s cubic-bezier(.2,.75,.2,1) both, countdownSwayReverse 9s 2s ease-in-out infinite; }

@keyframes ornamentBreathe { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes countdownFlowerLeft { from { opacity: 0; transform: translate(-24px,-18px) rotate(-11deg) scale(.72); } to { opacity: .68; transform: rotate(-2deg) scale(1); } }
@keyframes countdownFlowerRight { from { opacity: 0; transform: translate(24px,18px) rotate(12deg) scale(.72); } to { opacity: .68; transform: rotate(3deg) scale(1); } }
@keyframes countdownSway { 0%,100% { rotate: -1deg; } 50% { rotate: 1.4deg; } }
@keyframes countdownSwayReverse { 0%,100% { rotate: 1.2deg; } 50% { rotate: -1.2deg; } }

@media (max-width: 600px) {
  .calendar-section { padding-inline: .75rem; }
  .calendar-card { padding: 3rem .55rem; border-radius: 24px; }
  .calendar-card::before { inset: 7px; border-radius: 17px; }
  .calendar-heading { margin-bottom: 1.5rem; padding-inline: .5rem; }
  .countdown-unit { padding-inline: .12rem; }
  .simple-countdown strong { font-size: clamp(1.65rem, 10vw, 3rem); }
  .simple-countdown .long-days strong { font-size: clamp(1.35rem, 8vw, 2.35rem); }
  .calendar-label { font-size: .64rem; }
  .countdown-flower { width: 108px; }
  .calendar-ornament { width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-flower { opacity: .68; transform: none; }
}