/* calendar.html: dates that move. */

.cal__wrap { overflow-x: auto; margin-top: 2.2rem; -webkit-overflow-scrolling: touch; }
.cal { width: 100%; border-collapse: collapse; min-width: 560px; }
.cal thead th {
  text-align: left; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); font-weight: 600; padding: 0 1rem .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.cal tbody tr { border-bottom: 1px solid var(--rule-soft); scroll-margin-top: 5rem; }
.cal th[scope="row"] { text-align: left; padding: 1.1rem 1.4rem 1.1rem 0; vertical-align: top; font-weight: 400; }
.cal__name { display: block; font-family: var(--f-display); font-size: 1.1rem; color: var(--tx); }
.cal__alt { display: block; font-size: .8rem; color: var(--tx-faint); font-style: italic; margin-top: .1rem; }
.cal__lunar {
  display: inline-block; margin-top: .45rem; font-size: .72rem; letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--maroon); background: rgba(163,32,15,.07);
  border: 1px solid rgba(163,32,15,.15); border-radius: 4px; padding: .1rem .35rem;
}
.cal__great {
  display: inline-block; margin-top: .45rem; margin-left: .3rem;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); background: rgba(207,148,38,.13);
  border-radius: 4px; padding: .18rem .4rem;
}
.cal__d { padding: 1.1rem 1rem 1.1rem 0; vertical-align: top; }
.cal__d time { display: block; font-size: 1rem; color: var(--tx); }
.cal__wd { display: block; font-size: .76rem; color: var(--tx-faint); margin-top: .1rem; }
.cal__d.is-past { opacity: .42; }
.cal__d--none { font-size: .84rem; color: var(--tx-faint); font-style: italic; }

.cal__notes {
  display: grid; gap: 1.4rem; margin-top: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.cal__note {
  padding: 1.2rem 1.3rem; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--rule-soft);
}
.cal__note h3 { font-size: 1.02rem; margin: 0 0 .5em; }
.cal__note p { font-size: .89rem; line-height: 1.6; margin: 0; color: var(--tx-soft); }

.cal__fixed, .cal__spans { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.cal__fixed li { display: grid; gap: .15rem; }
.cal__fixed time { font-size: .76rem; letter-spacing: .06em; color: var(--red); text-transform: uppercase; }
.cal__fixed strong { font-family: var(--f-display); font-weight: 500; font-size: 1.02rem; }
.cal__fixed span { font-size: .88rem; line-height: 1.6; color: var(--tx-soft); max-width: 60ch; }
.cal__spans li { font-size: .9rem; line-height: 1.65; color: var(--tx-soft); max-width: 66ch; }
.cal__spans strong { color: var(--tx); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 560px) { .cal { min-width: 480px; } }

/* ---- Classic month grids ------------------------------------------------ */

.cal2s {
  display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem); margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cal2 {
  margin: 0; padding: 1.1rem 1.1rem 1.2rem;
  background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: var(--r);
}
.cal2__cap {
  font-family: var(--f-display); font-size: 1.1rem; margin-bottom: .8rem;
  display: flex; align-items: baseline; gap: .45rem;
}
.cal2__cap span { font-size: .8rem; color: var(--tx-faint); letter-spacing: .06em; }

.cal2__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal2__wd {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-faint); text-align: center; padding-bottom: .4rem; font-weight: 600;
}

.cell {
  position: relative; aspect-ratio: 1 / 1;
  border: 1px solid var(--rule-soft); border-radius: 5px;
  padding: .28rem .3rem; background: rgba(255, 255, 255, .5);
  display: flex; flex-direction: column;
}
.cell__n { font-size: .82rem; line-height: 1; color: var(--tx); }
.cell__tib {
  position: absolute; right: .28rem; top: .26rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem; color: var(--tx-faint); letter-spacing: -.02em;
}
.cell__tib em { font-style: normal; color: var(--turquoise); font-weight: 700; }
.cell--out { background: transparent; border-color: transparent; }
.cell--out .cell__n { color: rgba(42, 18, 13, .2); }
.cell--today { box-shadow: inset 0 0 0 2px var(--turquoise); }

.cell--fest { background: rgba(163, 32, 15, .09); border-color: rgba(163, 32, 15, .3); }
.cell--fest .cell__n { font-weight: 700; color: var(--red); }
.cell--great { background: rgba(207, 148, 38, .18); border-color: rgba(207, 148, 38, .5); }
.cell--great .cell__n { color: var(--maroon); }
.cell__f {
  margin-top: auto; font-size: .5rem; line-height: 1.15; color: var(--maroon);
  text-decoration: none; font-weight: 600; letter-spacing: .01em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.cell__f:hover { text-decoration: underline; }

.cal2__leap {
  margin-top: 1.2rem; padding: .8rem 1rem; border-radius: 8px;
  background: rgba(28, 111, 102, .08); border-left: 3px solid var(--turquoise);
  font-size: .89rem; line-height: 1.6; max-width: 64ch;
}
.cal2__leap em { font-style: normal; color: var(--turquoise); font-weight: 700; }

.cal__note__alt { font-size: .8rem; color: var(--tx-faint); font-style: italic; margin: -.2rem 0 .6rem; }
.cal__note__when {
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft);
  font-size: .82rem; color: var(--tx-soft);
}
.cal__note__when strong { color: var(--red); }
.cal th[scope="row"] a { color: var(--tx); text-decoration: none; font-family: var(--f-display); font-size: 1.05rem; }
.cal th[scope="row"] a:hover { color: var(--red); }
.cal th[scope="row"] .cal__lunar { display: inline-block; margin-top: .3rem; }

.dark .cal2 { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
@media (max-width: 400px) { .cell__tib { display: none; } }

/* ---- holydays.html ------------------------------------------------------ */
.hds { display: grid; gap: clamp(2rem, 4vw, 3.2rem); margin-top: 2.4rem; }
.hd {
  display: grid; gap: clamp(1.1rem, 2.4vw, 2.2rem);
  grid-template-columns: minmax(0, 1fr);
  padding-top: 2rem; border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}
.hd:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 800px) { .hd { grid-template-columns: 260px 1fr; align-items: start; } }

.hd__head { position: sticky; top: 5rem; }
@media (max-width: 799px) { .hd__head { position: static; } }
.hd__head h2 { margin: 0 0 .1em; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); }
.hd__alt { margin: 0 0 .7rem; font-size: .84rem; color: var(--tx-faint); font-style: italic; }
.hd__lunar {
  display: inline-block; margin: 0 0 .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
  color: var(--maroon); background: rgba(163,32,15,.07);
  border: 1px solid rgba(163,32,15,.15); border-radius: 4px; padding: .15rem .4rem;
}
.hd__dates {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule-soft);
  font-size: .86rem; line-height: 1.6; color: var(--tx-soft);
}
.hd__dates span {
  display: block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-faint); margin-top: .35rem;
}
.hd__dates strong { color: var(--red); font-size: 1rem; }
.hd__body h3 { margin: 1.6em 0 .5em; font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); }
.hd__body p { max-width: 62ch; }
.hd__does {
  margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 10px;
  background: rgba(255,255,255,.5); border: 1px solid var(--rule-soft);
}
.hd__does h4 {
  margin: 0 0 .5rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); font-weight: 600;
}
.hd__does ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.hd__does li { font-size: .89rem; line-height: 1.55; padding-left: .95rem; position: relative; }
.hd__does li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.cal__note h3 a { color: inherit; text-decoration: none; }
.cal__note h3 a:hover { color: var(--red); }
.cal__note__more { margin: .7rem 0 0; font-size: .82rem; }
.cal__note__more a { color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.cal__note__more a:hover { text-decoration: underline; }

.hd__tib {
  margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.9;
  color: var(--maroon); opacity: .85;
}