/* Through the number (core/countdown/001) — sage_light_core w1 (INV-05, D-031), from hero inspiration 19.
   The day count, huge and thin, with the couple's photo seen through it (or the faceless default detail), "days to go"
   in script, and small hours, minutes and seconds. CSS version: an inline SVG mask — the Gilda glyphs dilated by 4% of
   the em so the photo reads through them, the photo darkened to .82 so it always stands clear of the cream (review D).
   live.js die-cuts the same number out of cotton paper (same mask, same photo crop and parallax). */
.cd001 {
  --cd001-fs: min(calc((100vw - 2 * var(--k-gutter)) / (var(--cd001-digits, 2) * .62 + .3)), 36svh, 26rem);
  position: relative; padding: var(--k-section-pad) var(--k-gutter); text-align: center; touch-action: pan-y;
  background: var(--k-light-ground); color: var(--k-ink);
}
.cd001-figure { position: relative; width: 100%; max-width: 1000px; height: calc(var(--cd001-fs) * .96); margin: 18px auto 0; }
.cd001__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cd001__num { font: 400 var(--cd001-fs)/1 var(--k-font-display); stroke-width: calc(var(--cd001-fs) * .04); stroke-linejoin: round; paint-order: stroke; }
.cd001__photo { transform-box: fill-box; transform: translateY(calc((var(--cd001-p, .5) - .5) * 6%)); }
.cd001__stage { position: absolute; inset: 0; pointer-events: none; }
.cd001__togo { margin-top: 2px; font: 400 clamp(1.9rem, 7vw, 2.6rem)/1 var(--k-font-script); color: var(--k-ink-soft); }
.cd001__count { margin-top: 20px; }
.cd001 .kjy-countdown__label { font: 400 .9rem/1.5 var(--k-font-body); color: var(--k-ink-soft); }
.cd001 .kjy-countdown__units { display: flex; justify-content: center; gap: 26px; margin-top: 12px; }
/* the big number above already shows the days; the unit stays for screen readers and as the ticking source */
.cd001 .kjy-unit:first-child { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd001 .kjy-unit { display: grid; row-gap: 6px; min-width: 48px; }
.cd001 .kjy-unit__n { font: 400 1.75rem/1 var(--k-font-display); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.cd001 .kjy-unit__l { font: 500 .62rem/1 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink-soft); }
.cd001 .kjy-countdown__done { font: 400 clamp(2rem, 8vw, 3rem)/1.2 var(--k-font-script); color: var(--c-primary); }
@media (min-width: 768px) { .cd001 .kjy-countdown__units { gap: 40px; } .cd001 .kjy-unit__n { font-size: 2.1rem; } }
/* live (Tier 3): the canvas is the figure from its first frame */
.cd001.is-live .cd001__svg { opacity: 0; }