/* Calendars: one long page in charcoal and chalk, a day picker that stays put, and a drawing beside each count */
.cals {
  --ring: color-mix(in srgb, var(--ink) 42%, transparent);
  --glass: color-mix(in srgb, var(--bg) 88%, transparent);
  --faint: color-mix(in srgb, var(--ink) 30%, var(--bg));
}
.cals * { box-sizing: border-box }
:where(.cals) :where(button, input, select) { font: inherit; color: inherit }
.cals [hidden] { display: none !important }

.cal-main { max-width: 1160px; margin: 0 auto; padding: 0 24px 60px }
.intro { padding: 44px 0 22px; max-width: 760px }
.intro h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -.035em }
.intro .sub { margin: 14px 0 0; font-size: 18px; line-height: 1.45; color: var(--soft); text-wrap: pretty }

/* the day picker: stays just under the bar, over its fade, while the counts scroll under it */
.when { position: sticky; top: var(--bar); z-index: 31; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 0 -24px; padding: 12px 24px; background: var(--glass); border-bottom: 1px dotted var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.when label { display: flex; flex-direction: column; gap: 5px }
.when label span { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
.when input, .when select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); font-weight: 600; font-size: 15px }
.when input:focus-visible, .when select:focus-visible, .when button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px }
.when select { max-width: 230px }
.pick { display: flex; align-items: flex-end; gap: 6px }
.step, .today { min-height: 38px; border: 1px solid var(--ring); border-radius: 999px; background: none; cursor: pointer }
.step { width: 38px; font-size: 20px; line-height: 1 }
.today { padding: 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase }
.step:hover, .today:hover { background: var(--wash2) }
.day { margin: 0 0 9px auto; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--soft); text-align: right }

/* each count: the drawing on one side, the reading on the other */
.cal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 48px 0; border-bottom: 1px dotted var(--ring) }
.cal:nth-of-type(even) .vis { order: 2 }
.vis { position: sticky; top: calc(var(--bar) + 90px) }
.vis svg { display: block; width: 100%; height: auto; overflow: visible }
/* the Haab' wheel runs off the right edge on purpose; keep it out of the reading */
#maya-vis { overflow: hidden }
.vis.two { display: grid; gap: 18px }
.text { display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.kicker { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }
.text h2 { margin: -8px 0 0; font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance }
.text h2 small { display: block; margin-top: 8px; font: 500 15px/1.3 var(--mono); letter-spacing: .02em; color: var(--soft) }
.lede { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty }
.lede b { font-weight: 700 }
.soft { color: var(--soft) }

.rows { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--line) }
.rows dt, .rows dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line) }
.rows dt { padding-right: 18px; font: 500 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
.rows dd { font-size: 15px; line-height: 1.45 }
.rows dd b { font-weight: 700 }
.rows dd .w { display: block; font-size: 14px; color: var(--soft) }
.rows dd time { font: 500 13px/1 var(--mono); color: var(--soft); white-space: nowrap }

.stela { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap }
.stela figure { margin: 0; flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: 12px }
.stela svg { width: 40px; height: 40px; fill: var(--ink); stroke: var(--ink) }
.stela figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 10px/1.2 var(--mono); letter-spacing: .06em; color: var(--soft); text-align: center }
.stela figcaption b { font-size: 15px; color: var(--ink); letter-spacing: 0 }

.card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 10px }
.card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em }
.card h3 span { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-left: 6px }
.card p { margin: 0; font-size: 15px; line-height: 1.5 }
.doshas { display: flex; flex-wrap: wrap; gap: 6px }
.dosha { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft) }
.dosha b { color: var(--ink) }
.dosha.flares { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.dosha.flares b { color: var(--bg) }
details.how { border-top: 1px solid var(--line); padding-top: 12px }
details.how summary { cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
details.how summary:hover { color: var(--ink) }
details.how p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--soft); text-wrap: pretty }

/* the drawings: lines in the ink, labels in mono */
.vis text { font-family: var(--mono); fill: var(--soft); font-size: 10px }
.vis .on { fill: var(--ink); font-weight: 500 }
#maya-vis .on { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round }
.vis .big { font-family: var(--sans); font-weight: 800; fill: var(--ink) }
.vis .ln { fill: none; stroke: var(--ink); stroke-width: 1 }
.vis .lt { fill: none; stroke: var(--ring); stroke-width: .8 }
.vis .tk { stroke: var(--faint); stroke-width: .8 }
.vis .ink { fill: var(--ink); stroke: none }
.vis .bg { fill: var(--bg) }
.vis .f1 { fill: color-mix(in srgb, var(--ink) 22%, transparent); stroke: var(--ink); stroke-width: .8 }
.vis .f2 { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--ink); stroke-width: .8 }
.vis .f3 { fill: url(#dots); stroke: var(--ink); stroke-width: .8 }
.vis .f0 { fill: none; stroke: var(--ink); stroke-width: .8 }
.vis .hand { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round }
.vis .night { fill: color-mix(in srgb, var(--ink) 6%, transparent) }
.vis .lit { fill: var(--ink) }
.vis .dark { fill: color-mix(in srgb, var(--ink) 12%, var(--bg)); stroke: var(--ring); stroke-width: .8 }
.vis .msg { font-family: var(--sans); font-size: 14px; fill: var(--soft) }

.notes { padding: 32px 0 0; max-width: 720px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--soft) }
.notes p { margin: 0 }
.notes a { text-underline-offset: 3px }

@media (max-width: 860px) {
  .cal { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0 }
  .cal:nth-of-type(even) .vis { order: 0 }
  .vis { position: static; max-width: 520px; width: 100%; margin: 0 auto }
  .vis.two { grid-template-columns: 1fr 1fr; max-width: none }
  .day { margin: 0; text-align: left; width: 100% }
}
@media (max-width: 640px) {
  .cal-main { padding: 0 16px 48px }
  .intro { padding: 28px 0 16px }
  .intro .sub { font-size: 16px }
  .when { margin: 0 -16px; padding: 10px 16px; gap: 8px 12px }
  .when select { max-width: none; width: 100% }
  .place { flex: 1 1 100% }
  .vis.two { grid-template-columns: 1fr }
  .rows { grid-template-columns: minmax(0, 1fr) }
  .rows dt { padding: 10px 0 0; border-bottom: 0 }
  .rows dd { padding-top: 4px }
  .stela figure { min-width: 54px }
}