/* ══════════════════════════════════════════════════
   Our dates, on a calendar — and the note each one opens.
   Uses the palette and type from style.css.
   ══════════════════════════════════════════════════ */

/* ══════════ the month ══════════ */

.cal {
  position: relative;
  margin: 30px auto 0;
  max-width: 400px;
  padding: 22px 18px 18px;
  border-radius: 6px;
  background: linear-gradient(170deg, #FFFCF8, #FDF2EC);
  box-shadow: 0 18px 40px rgba(90, 52, 58, .12);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cal-month {
  margin: 0;
  font: 400 26px/1 var(--hand);
  color: var(--wine);
}

.cal-nav {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 61, 81, .2);
  border-radius: 999px;
  background: transparent;
  color: var(--wine);
  font: 400 22px/1 var(--serif);
  cursor: pointer;
  transition: background .3s ease, opacity .3s ease;
}
.cal-nav:hover:not(:disabled) { background: rgba(248, 228, 229, .7); }
.cal-nav:disabled { opacity: .25; cursor: default; }

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-week {
  margin: 18px 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.cal-week span {
  text-align: center;
  font: 400 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dusty);
}

.cal-day {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font: 400 15px/1 var(--sans);
  color: var(--muted);
}
.cal-day.is-pad { visibility: hidden; }

.cal-day.is-today::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--blush);
  border-radius: 999px;
  pointer-events: none;
}

/* A day we went somewhere */
button.cal-day {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.cal-day.has-date .cal-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(30px, 10vw, 40px);
  line-height: 1;
  color: var(--petal);
  transition: transform .35s ease, color .35s ease;
  animation: breathe 3.6s ease-in-out infinite;
}
.cal-day.has-date:nth-child(odd) .cal-heart { animation-delay: .9s; }

.cal-day.has-date .cal-num {
  position: relative;
  margin-top: -2px;
  font: 600 14px/1 var(--sans);
  color: #fff;
}

/* The days that changed everything get a deeper heart. */
.cal-day.is-special .cal-heart { color: var(--rose); }

/* October 3rd: the rainbow outside his house, so its heart is one too. */
.cal-day.is-rainbow .cal-heart {
  background: linear-gradient(160deg, #E9727E 15%, #F0A35E 32%, #EDCB62 46%, #8CC08A 60%, #6FA6D6 74%, #A88BD0 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cal-day.has-date.is-rainbow:hover .cal-heart,
.cal-day.has-date.is-rainbow:focus-visible .cal-heart { color: transparent; }
.cal-day.is-rainbow .cal-num { text-shadow: 0 1px 2px rgba(74, 38, 48, .45); }

.cal-day.has-date:hover .cal-heart,
.cal-day.has-date:focus-visible .cal-heart {
  color: var(--rose);
  transform: scale(1.12) rotate(-6deg);
}

.cal-count {
  margin: 14px 0 0;
  text-align: center;
  font: 400 16px/1.2 var(--hand);
  color: var(--dusty);
}


/* ══════════ a date, opened ══════════ */

.scrim.date-scrim {
  align-items: flex-start;
  overflow-y: auto;
  padding: 56px 22px 32px;
}

.date-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: auto;
  padding: 0 26px 26px;
  border-radius: 6px;
  background: linear-gradient(170deg, #FFFCF8, #FDF2EC);
  box-shadow: 0 26px 60px rgba(60, 34, 38, .3);
  text-align: center;
}

/* The polaroid sits half off the top of the card, as if pinned there. */
.date-shots {
  position: relative;
  width: min(230px, 78%);
  margin: -34px auto 0;
}
/* A tall photo gets a slightly narrower polaroid so the card still fits;
   a wide one gets a little more room. */
.date-shots.is-tall { width: min(210px, 70%); }
.date-shots.is-wide { width: min(262px, 86%); }

.date-shot {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 10px 44px;
  cursor: default;
  box-shadow: 0 16px 34px rgba(90, 52, 58, .2);
}
.date-shot .frame { --ratio: 1/1; }
.date-shot.is-flippable { cursor: pointer; }

/* The one underneath: same size, tipped the other way, nudged out. */
.date-shot-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  translate: 16px 8px;
  box-shadow: 0 10px 24px rgba(90, 52, 58, .16);
  pointer-events: none;
}
.date-shot-back .frame img { filter: saturate(.85) brightness(.97); }

@keyframes shuffle {
  0%   { translate: 0 0; }
  40%  { translate: -22px -6px; }
  100% { translate: 0 0; }
}
.date-shot.shuffled { animation: shuffle .45s ease; }

.date-more {
  margin: 14px 0 0;
  font: 400 15px/1.2 var(--hand);
  color: var(--dusty);
}
.date-shot .cap { bottom: 14px; font-size: 18px; }
.date-shot .tape { width: 78px; height: 22px; top: -11px; }

.date-when {
  margin: 24px 0 0;
  font: 400 19px/1.2 var(--hand);
  color: var(--blush);
}

.date-title {
  margin: 6px 0 0;
  font: 500 26px/1.15 var(--serif);
  color: var(--plum);
  text-wrap: balance;
}

.date-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.date-note p {
  margin: 0 0 12px;
  font: 400 18px/1.5 var(--serif);
  color: var(--soft);
  text-wrap: pretty;
}
.date-note p:last-child { margin-bottom: 0; }

/* ══════════ a video, in a polaroid ══════════ */

.date-video {
  width: min(200px, 66%);
  margin: 30px auto 6px;
  padding: 9px 9px 42px;
  --tilt: 2deg;
  cursor: default;
}
.date-video .frame { --ratio: 9/16; background: #2B1E20; }
.date-video .frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.date-video .cap { bottom: 13px; font-size: 17px; }

.date-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 251, .9);
  box-shadow: 0 8px 22px rgba(40, 20, 24, .3);
  cursor: pointer;
  transition: opacity .3s ease, scale .3s ease;
}
.date-play:hover { scale: 1.06; }
.date-play span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--rose);
}
/* While it plays the button gets out of the way; tapping the video pauses. */
.date-video.playing .date-play { opacity: 0; pointer-events: none; }

.date-flip {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}

.date-step {
  padding: 8px 14px;
  border: 1px solid rgba(168, 61, 81, .22);
  border-radius: 999px;
  background: transparent;
  color: var(--wine);
  font: 400 12px/1 var(--sans);
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .3s ease, opacity .3s ease;
}
.date-step:hover:not(:disabled) { background: rgba(248, 228, 229, .7); }
.date-step:disabled { opacity: .3; cursor: default; }

.date-card .lightbox-close { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .cal-day.has-date .cal-heart { animation: none; }
}