/* Heart-pin week (core/date/002) — sage_light_rest w1 (INV-05, A1319, D-031/D-032). Two watercolour leaf sprays that
   never move (ruling A), the month in spaced Gilda caps, a strip of seven days centred on the wedding day, the day
   ringed by a hand-dotted ink heart whose dotted line drops to "Save the date", then the long date, the time in words
   and Add to calendar. The heart and pin are one image (.dt002__mark); its interior centroid sits on the day's number
   (heartpin_metrics a: aspect 1.9563, cy .2197). live.js (2D) dots it in by hand, wet then drying. */
.dt002 {
  --dt002-ar: 1.9563; --dt002-cy: .2197;
  --dt002-wd-h: 14px; --dt002-gap: 6px; --dt002-n-h: 40px; --dt002-n-fs: 1.5rem; --dt002-mark-w: 66px; --dt002-ny: 0px;
  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);
}
.dt002__frame { position: relative; margin: 0 auto; }
.dt002__corner { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; }
.dt002__corner--tl { top: -96px; left: calc(-1 * var(--k-gutter) - 8px); width: min(44vw, 230px); }
.dt002__corner--br { bottom: -84px; right: calc(-1 * var(--k-gutter) - 8px); width: min(44vw, 230px); }
.dt002__inner { position: relative; z-index: 1; max-width: 360px; margin: 0 auto; }

.dt002__month { padding-left: .32em; font: 400 1.55rem/1.2 var(--k-font-display); letter-spacing: .32em; text-transform: uppercase; color: var(--k-ink); }

/* the week: seven equal columns, so the main day (always the 4th) is the centre and the mark sits at left: 50% */
.dt002__week { position: relative; margin-top: 22px; padding-bottom: calc(var(--dt002-mark-w) * var(--dt002-ar) * (1 - var(--dt002-cy)) - var(--dt002-n-h) / 2 + 6px); }
.dt002__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dt002__day { display: flex; flex-direction: column; align-items: center; gap: var(--dt002-gap); }
.dt002__wd { display: block; height: var(--dt002-wd-h); padding-left: .14em; font: 500 .64rem/var(--dt002-wd-h) var(--k-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-soft); white-space: nowrap; }
.dt002__n { position: relative; display: block; height: var(--dt002-n-h); font: 400 var(--dt002-n-fs)/var(--dt002-n-h) var(--k-font-display); color: var(--k-ink); white-space: nowrap; }
.dt002__day--out .dt002__wd, .dt002__day--out .dt002__n { color: var(--k-ink-soft); opacity: .5; }
.dt002__day--ev .dt002__n::after { content: ""; position: absolute; left: 50%; top: calc(100% + 1px); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c-secondary); }
.dt002__mark {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--dt002-wd-h) + var(--dt002-gap) + var(--dt002-n-h) / 2 + var(--dt002-ny));
  width: var(--dt002-mark-w); height: auto; max-width: none;
  transform: translate(-50%, calc(var(--dt002-cy) * -100%)); pointer-events: none; user-select: none;
}
/* the live canvas covers the week (a little wider), above the digits, so a dent shades them too; it never draws glyphs */
.dt002__stage { position: absolute; inset: -12px -8px; z-index: 3; pointer-events: none; }

.dt002__title { margin-top: 2px; }
.dt002__long, .dt002__time { font: 500 .76rem/1.6 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; text-wrap: balance; }
.dt002__long { margin-top: 16px; color: var(--k-ink); }
.dt002__time { margin-top: 4px; color: var(--k-ink-soft); }
.dt002__cal { margin-top: 30px; }
.dt002 .kjy-cal { display: inline-block; max-width: 100%; }
.dt002 .kjy-cal__toggle { list-style: none; min-height: 44px; padding: 0 26px; }
.dt002 .kjy-cal__toggle::-webkit-details-marker { display: none; }
.dt002 .kjy-cal__menu { display: grid; margin-top: 8px; background: var(--k-card); box-shadow: 0 0 0 1px rgb(var(--c-primary-rgb) / .3), 4px 10px 24px rgb(60 45 25 / .12); }
.dt002 .kjy-cal__opt { padding: 12px 16px; font: 500 1rem/1.3 var(--k-font-body); color: var(--c-primary); text-decoration: none; }
.dt002 .kjy-cal__opt + .kjy-cal__opt { border-top: 1px solid rgb(var(--c-primary-rgb) / .18); }

@media (min-width: 768px) {
  .dt002 { --dt002-wd-h: 16px; --dt002-gap: 8px; --dt002-n-h: 52px; --dt002-n-fs: 2.1rem; --dt002-mark-w: 88px; }
  .dt002__frame { max-width: 680px; }
  .dt002__corner--tl { top: -56px; left: -24px; width: min(30vw, 280px); }
  .dt002__corner--br { bottom: -64px; right: -24px; width: min(30vw, 280px); }
  .dt002__inner { max-width: 520px; }
  .dt002__month { font-size: 1.9rem; }
  .dt002__wd { font-size: .7rem; }
  .dt002__week { margin-top: 28px; }
  .dt002__long { margin-top: 20px; }
}
@media (min-width: 1200px) {
  .dt002 { --dt002-n-h: 56px; --dt002-n-fs: 2.3rem; --dt002-mark-w: 96px; }
  .dt002__frame { max-width: 760px; }
  .dt002__corner--tl, .dt002__corner--br { width: 300px; }
  .dt002__inner { max-width: 560px; }
  .dt002__month { font-size: 2rem; }
  .dt002__wd { font-size: .72rem; }
}

/* reveal: only once section.js runs (no JS / reduced motion: everything shows complete) */
.dt002.is-anim .dt002__mark { transition: opacity .9s ease .25s; }
html.kjy-fx .dt002.is-anim:not(.is-in) .dt002__mark { opacity: 0; }
/* live (Tier 3): the canvas is the mark from its first frame and dots it in */
.dt002.is-live .dt002__mark { opacity: 0; transition: none; }