/* Circled month (core/date/006) — inv01_v2 w1 (A1394, D-043): a calendar page for the main day's month, hung on a
   twine loop, with the day circled by a pen loop that ends in a small heart. A light part over the skin's light ground.
   Still states: the base is the finished page (ring drawn, heart shown); the start state lives under
   html.kjy-fx:not(.kjy-lite), so reduced motion, no JavaScript and lite devices all show the drawn ring. */
.dt006 { background: var(--k-light-ground); color: var(--k-ink); }
.dt006__inner {
  position: relative; z-index: 1;
  max-width: calc(var(--k-measure) + 2 * var(--k-gutter)); margin: 0 auto;
  padding: var(--k-section-pad) var(--k-gutter) 0; text-align: center;
}
.dt006 .k-kicker + .k-title { margin-top: var(--k-s-2); }

/* The page */
.dt006__page {
  position: relative; width: min(100%, 420px); margin: var(--k-s-8) auto 0;
  padding: var(--k-s-7) var(--k-s-5) var(--k-s-5);
  background: var(--k-card); border: 1px solid rgb(var(--c-primary-rgb) / .14); border-radius: 6px;
  box-shadow: 0 1px 0 rgb(var(--c-primary-rgb) / .05), 0 24px 48px -30px rgb(var(--c-primary-rgb) / .55);
}
@media (min-width: 768px) { .dt006__page { width: 460px; } }
@media (min-width: 1200px) { .dt006__page { width: 500px; } }
.dt006__twine { position: absolute; left: 50%; top: -30px; width: 120px; height: 50px; margin-left: -60px; overflow: visible; }
.dt006__twine path { fill: none; stroke: var(--c-secondary); stroke-width: 1.5; stroke-linecap: round; }
.dt006__twine circle { fill: var(--c-secondary-dark); }
.dt006__hole {
  position: absolute; top: 14px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--k-paper); box-shadow: inset 0 1px 2px rgb(0 0 0 / .22);
}
.dt006__hole--l { left: calc(50% - 53px); }
.dt006__hole--r { left: calc(50% + 43px); }
.dt006__month { margin: 0; font: 400 clamp(2.75rem, 12vw, 3.5rem)/1.05 var(--k-font-script); color: var(--c-primary-deep); }
.dt006__year {
  margin: var(--k-s-1) 0 var(--k-s-5);
  font: 600 .8125rem/1.4 var(--k-font-display); letter-spacing: .32em; text-transform: uppercase; color: var(--k-ink-soft);
}

/* The grid */
.dt006__wd, .dt006__grid { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0; padding: 0; list-style: none; }
.dt006__wd {
  padding-bottom: var(--k-s-2); margin-bottom: var(--k-s-2); border-bottom: 1px solid rgb(var(--c-secondary-rgb) / .3);
  font: 600 .75rem/1 var(--k-font-display); letter-spacing: .14em; color: var(--c-secondary-dark);
}
@media (min-width: 768px) { .dt006__wd { font-size: .8125rem; } }
.dt006__d {
  position: relative; display: grid; place-items: center; height: clamp(38px, 10.5vw, 48px);
  font: 500 clamp(1.0625rem, 4.6vw, 1.375rem)/1 var(--k-font-body); color: var(--k-ink); font-variant-numeric: lining-nums;
}
.dt006__n { position: relative; z-index: 1; }
.dt006__d--main { color: var(--c-primary-deep); font-weight: 600; }
.dt006__d--ev::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--c-secondary);
}
.dt006__ring {
  /* the skin caps svg at max-width 100%; the loop keeps the drawing's 6:5 shape at every cell size */
  position: absolute; left: 50%; top: 50%; height: 140%; width: auto; max-width: none; aspect-ratio: 6 / 5;
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
}
.dt006__loop {
  fill: none; stroke: var(--c-primary); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.dt006__heart { fill: var(--c-primary); }
html.kjy-fx:not(.kjy-lite) .dt006__loop { stroke-dashoffset: 1; }
html.kjy-fx:not(.kjy-lite) .dt006__heart { opacity: 0; }

/* Under the page */
.dt006__long { margin: var(--k-s-7) 0 0; font: 600 clamp(1.1875rem, 5vw, 1.375rem)/1.3 var(--k-font-display); color: var(--k-ink); }
.dt006__time { margin: var(--k-s-1) 0 0; font: italic 500 1.125rem/1.4 var(--k-font-body); color: var(--k-ink-soft); }
.dt006__cal { margin-top: var(--k-s-5); }
.dt006 .kjy-cal { display: inline-block; width: min(100%, 260px); }
.dt006 .kjy-cal__toggle { width: 100%; list-style: none; }
.dt006 .kjy-cal__toggle::-webkit-details-marker { display: none; }
.dt006 .kjy-cal__toggle::after {
  content: ""; width: 7px; height: 7px; margin-left: var(--k-s-1);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.dt006 .kjy-cal[open] .kjy-cal__toggle::after { transform: translateY(2px) rotate(225deg); }
.dt006 .kjy-cal__menu {
  margin-top: var(--k-s-2); padding: var(--k-s-1) 0; background: var(--k-paper);
  border: 1px solid rgb(var(--c-secondary-rgb) / .35); border-radius: 12px;
}
.dt006 .kjy-cal__opt {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--k-s-4);
  font-size: 1.0625rem; color: var(--c-primary); text-decoration: none;
}
.dt006 .kjy-cal__opt + .kjy-cal__opt { border-top: 1px solid rgb(var(--c-secondary-rgb) / .25); }
.dt006__key {
  display: inline-grid; gap: var(--k-s-2); margin: var(--k-s-6) auto 0; padding: 0; list-style: none; text-align: left;
  font: 500 1rem/1.4 var(--k-font-body); color: var(--k-ink-soft);
}
.dt006__dot {
  display: inline-block; width: 6px; height: 6px; margin: 0 var(--k-s-2) 2px 0;
  border-radius: 50%; background: var(--c-secondary); vertical-align: middle;
}