/* ==========================================================================
   /day — "Eleven o'clock at alphabet CRÈCHE". Cinematic: near-dark, one
   real film per screen, and a clock that moves to each film's real time.
   The films come from four different days; each shows its own date.
   ========================================================================== */

:root:has(body.day-page) { scroll-snap-type: y proximity; }
.day-page { background: var(--ink); color: #fff; }
.day-page main.dy { padding-top: 0; }
.dy .folio { color: rgba(255, 255, 255, .85); }
.dy .folio b { background: var(--yellow); color: var(--ink); }
.dy .folio::after { background: rgba(255, 255, 255, .25); }

.dy-intro { min-height: 88svh; display: flex; align-items: flex-end; padding: 140px 0 var(--s8); scroll-snap-align: start;
  background: radial-gradient(80% 60% at 70% 20%, rgba(255, 222, 89, .18), transparent 70%); }
.dy-intro__title { margin-top: var(--s5); font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem); letter-spacing: -.05em; line-height: .98; color: #fff; }
.dy-intro__lead { margin-top: var(--s5); max-width: 44ch; font-size: 1.12rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }

/* ---- The clock: fixed, moves with the films ---- */
.dy-clock {
  position: fixed; right: max(14px, var(--gutter)); top: 92px; z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: rgba(27, 26, 51, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0; translate: 0 -10px; transition: opacity .4s var(--ease-out), translate .4s var(--ease-out);
}
.dy-clock.is-on { opacity: 1; translate: 0 0; }
.dy-clock svg { width: 44px; height: 44px; }
.dy-clock circle { fill: #fff; }
.dy-clock__ticks line { stroke: rgba(27, 26, 51, .45); stroke-width: 2; stroke-linecap: round; }
.dy-clock__h, .dy-clock__m { stroke: var(--ink); stroke-linecap: round; transform-origin: 50px 50px; transition: rotate .9s cubic-bezier(.34, 1.56, .64, 1); }
.dy-clock__h { stroke-width: 5; }
.dy-clock__m { stroke-width: 3.5; stroke: var(--red); }
.dy-clock .dy-clock__pin { fill: var(--ink); }
.dy-clock__time { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---- A film per screen ---- */
.dy-film { position: relative; min-height: 100svh; scroll-snap-align: start; overflow: hidden; display: flex; align-items: flex-end; }
.dy-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.dy-film::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(12, 11, 26, .88)); pointer-events: none; }
.dy-film__text { position: relative; z-index: 1; padding: 0 var(--gutter) calc(var(--s8) + 70px); max-width: 560px; }
.dy-film__clock { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 2.4rem + 6vw, 7rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--yellow); }
.dy-film__clock small { font-size: .3em; letter-spacing: .04em; margin-left: .3em; color: #fff; }
.dy-film__date { margin-top: 10px; font: 800 .75rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.dy-film__title { margin-top: var(--s3); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.035em; color: #fff; }
.dy-film__line { margin-top: 6px; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 40ch; }

/* Desktop: the portrait film stands in a frame beside its time */
@media (min-width: 1024px) {
  .dy-film { align-items: center; justify-content: center; gap: clamp(3rem, 6vw, 7rem); padding-inline: var(--gutter); }
  .dy-film::after { display: none; }
  .dy-video { position: relative; inset: auto; order: 2; width: auto; height: 84svh; aspect-ratio: 9 / 16; border-radius: 32px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 40px 90px -30px rgba(0, 0, 0, .8); }
  .dy-film__text { padding: 0; order: 1; }
  .dy-clock { top: 104px; }
}

.dy-end { padding: var(--s9) 0 var(--s6); scroll-snap-align: start; }
.dy-end__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.035em; line-height: 1.15; max-width: 22ch; margin-bottom: var(--s6); color: #fff; }

/* The "where next" strip sits on the dark ground here */
.day-page .xp-next__title { color: #fff; }
.day-page .footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  :root:has(body.day-page) { scroll-snap-type: none; }
  .dy-clock__h, .dy-clock__m, .dy-clock { transition: none; }
}