/* Rituals and holidays: the turning year. Everything is scoped to this page. */
body[data-page="holidays"] {
  --ink: #0c171c;
  --paper: #13211f;
  --bone-2: #f3ead6;
  --winter: #2f63a6;
  --spring: #56a56f;
  --gold: #ecc54f;
  --russet: #a3412e;
  --season: #7a9aa8;
  --season-ink: color-mix(in oklab, var(--season) 58%, #fff6e6);
}

/* ---------- layout: the head and the list beside the wheel ---------- */
body[data-page="holidays"] main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "head wheel" "soon wheel" "ctrl wheel" "year year";
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
body[data-page="holidays"] #app { display: contents; }
body[data-page="holidays"] .hol-head { grid-area: head; padding-bottom: 8px; }
body[data-page="holidays"] .hol-head h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
body[data-page="holidays"] .hol-head .lede { font-size: 1.08rem; }
body[data-page="holidays"] .wheel-sec { grid-area: wheel; padding-top: 84px; }
body[data-page="holidays"] .soon { grid-area: soon; }
body[data-page="holidays"] .controls { grid-area: ctrl; }
body[data-page="holidays"] .river-sec { grid-area: year; }

body[data-page="holidays"] .hol-h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 1.8rem 0 0.7rem;
  color: var(--bone-2);
}

/* ---------- the wheel ---------- */
body[data-page="holidays"] .wheel-box { position: relative; container-type: inline-size; width: 100%; max-width: 620px; margin: 0 auto; }
body[data-page="holidays"] .year-wheel { display: block; width: 100%; height: auto; overflow: visible; }
body[data-page="holidays"] .year-wheel .rim { fill: none; stroke: rgba(233, 224, 204, 0.16); stroke-width: 1.5; }
body[data-page="holidays"] .year-wheel .inner-rim { fill: #0b1519; stroke: rgba(233, 224, 204, 0.14); stroke-width: 1.5; }
body[data-page="holidays"] .year-wheel .tick { stroke: rgba(233, 224, 204, 0.45); stroke-width: 2; }
body[data-page="holidays"] .year-wheel .week { stroke: rgba(12, 23, 28, 0.55); stroke-width: 2; }
body[data-page="holidays"] .year-wheel .mname { font-family: var(--display); font-size: 25px; fill: #d9d0bb; letter-spacing: 0.02em; }
body[data-page="holidays"] .year-wheel .mname .short { display: none; }
body[data-page="holidays"] .year-wheel .span { fill: none; stroke: rgba(243, 234, 214, 0.75); stroke-width: 5; stroke-linecap: round; transition: opacity 0.3s; }
body[data-page="holidays"] .year-wheel .moon-track { fill: none; stroke: rgba(160, 168, 205, 0.22); stroke-width: 1.5; }
body[data-page="holidays"] .year-wheel .moon-dot { stroke-width: 2; }
body[data-page="holidays"] .year-wheel .moon-dot.dark { fill: #0b1519; stroke: #a8aed0; }
body[data-page="holidays"] .year-wheel .moon-dot.crescent { fill: #c9cde6; stroke: none; }
body[data-page="holidays"] .year-wheel .moons { transition: opacity 0.3s; }
body[data-page="holidays"] .year-wheel .moons.off { opacity: 0.15; }
body[data-page="holidays"] .year-wheel .today line { stroke: var(--neon); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }
body[data-page="holidays"] .year-wheel .today-dot { fill: var(--neon); stroke: #e6fbff; stroke-width: 2; }

body[data-page="holidays"] .mark { cursor: pointer; outline: none; transition: opacity 0.3s; }
body[data-page="holidays"] .mark .hit { fill: transparent; }
body[data-page="holidays"] .mark .shape { fill: var(--bone-2); stroke: #0c171c; stroke-width: 3; stroke-linejoin: round; transition: transform 0.2s, fill 0.2s; transform-box: fill-box; transform-origin: center; }
body[data-page="holidays"] .mark .shape .cut { fill: none; stroke: #0c171c; stroke-width: 2.5; }
body[data-page="holidays"] .mark.moon .shape { fill: #d6d9ee; }
body[data-page="holidays"] .mark.moon .darkmoon { fill: #0b1519; stroke: #d6d9ee; stroke-width: 3; }
body[data-page="holidays"] .mark .ring { fill: none; stroke: var(--neon); stroke-width: 3.5; opacity: 0; transition: opacity 0.2s; }
body[data-page="holidays"] .mark:hover .shape, body[data-page="holidays"] .mark:focus-visible .shape { transform: scale(1.25); fill: #fff; }
body[data-page="holidays"] .mark:hover .ring { opacity: 0.7; }
body[data-page="holidays"] .mark:focus-visible .ring { opacity: 1; filter: url(#hol-glow); }
body[data-page="holidays"] .mark.off, body[data-page="holidays"] .span.off { opacity: 0.16; pointer-events: none; }
body[data-page="holidays"] .mark.gone, body[data-page="holidays"] .span.gone { opacity: 0; pointer-events: none; visibility: hidden; }

body[data-page="holidays"] .hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--bone-2);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 3cqw;
  cursor: pointer;
}
body[data-page="holidays"] .hub:disabled { cursor: default; }
body[data-page="holidays"] .hub:focus-visible { outline: 2px solid var(--neon); outline-offset: -6px; }
body[data-page="holidays"] .hub-label { font-style: italic; color: var(--season-ink); font-size: max(13px, 2.5cqw); line-height: 1.2; }
body[data-page="holidays"] .hub-name { font-family: var(--display); font-size: max(17px, 4.3cqw); line-height: 1.08; margin: 0.25em 0 0.2em; text-wrap: balance; }
body[data-page="holidays"] .hub-count { line-height: 1; }
body[data-page="holidays"] .hub-count b { font-family: var(--display); font-weight: 400; font-size: max(26px, 7.4cqw); color: var(--season-ink); }
body[data-page="holidays"] .hub-count small { font-size: max(13px, 2.6cqw); color: #cfd8d2; }
body[data-page="holidays"] .hub-date { margin-top: 0.4em; font-size: max(12px, 2.3cqw); color: var(--lichen); line-height: 1.2; }

body[data-page="holidays"] .wheel-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 18px));
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.92rem;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  color: var(--bone-2);
  background: #0b1519;
  border: 1px solid var(--neon-soft);
  border-radius: 6px;
}
body[data-page="holidays"] .wheel-tip.below { transform: translate(-50%, 18px); }
body[data-page="holidays"] .wheel-cap { display: flex; gap: 0.6rem; align-items: baseline; max-width: 520px; margin: 14px auto 0; font-size: 0.92rem; color: var(--lichen); font-style: italic; line-height: 1.45; }
body[data-page="holidays"] .now-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--neon); box-shadow: var(--neon-glow); transform: translateY(-1px); }

@container (max-width: 470px) {
  body[data-page="holidays"] .year-wheel .mname { font-size: 34px; }
  body[data-page="holidays"] .year-wheel .mname .full { display: none; }
  body[data-page="holidays"] .year-wheel .mname .short { display: inline; }
  body[data-page="holidays"] .mark .shape { transform: scale(1.2); }
  body[data-page="holidays"] .hub-date { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="holidays"] .year-wheel .band { animation: hol-turn 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: 500px 500px; }
  body[data-page="holidays"] .year-wheel .today-dot { animation: hol-pulse 3.2s ease-in-out infinite; }
}
@keyframes hol-turn { from { transform: rotate(-40deg); opacity: 0; } }
@keyframes hol-pulse { 50% { opacity: 0.55; } }

/* ---------- coming up ---------- */
body[data-page="holidays"] .soon-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(233, 224, 204, 0.12); }
body[data-page="holidays"] .soon-list > li { border-bottom: 1px solid rgba(233, 224, 204, 0.12); }
body[data-page="holidays"] .soon-row {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 6px 10px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body[data-page="holidays"] .soon-row:hover .soon-name { color: #fff; text-decoration: underline; text-decoration-color: var(--season); text-underline-offset: 4px; }
body[data-page="holidays"] .soon-row:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 4px; }
body[data-page="holidays"] .soon-n { display: flex; align-items: baseline; gap: 0.3rem; padding-left: 12px; border-left: 4px solid var(--season); line-height: 1; }
body[data-page="holidays"] .soon-n b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--season-ink); }
body[data-page="holidays"] .soon-n small { font-size: 0.85rem; color: var(--lichen); }
body[data-page="holidays"] .soon-list > li:first-child .soon-n b { font-size: 2.1rem; }
body[data-page="holidays"] .soon-txt { display: flex; flex-direction: column; min-width: 0; }
body[data-page="holidays"] .soon-name { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
body[data-page="holidays"] .soon-date { display: flex; align-items: center; gap: 0.4rem; color: var(--lichen); font-size: 0.92rem; font-style: italic; }

body[data-page="holidays"] .glyph { width: 0.95em; height: 0.95em; flex: none; fill: var(--bone-2); stroke: none; }
body[data-page="holidays"] .glyph .cut { fill: none; stroke: #0c171c; stroke-width: 2; }

/* ---------- filters ---------- */
body[data-page="holidays"] .trad-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
body[data-page="holidays"] .tchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.1;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(233, 224, 204, 0.22);
  border-radius: 4px;
  cursor: pointer;
}
body[data-page="holidays"] .tchip:hover { border-color: rgba(233, 224, 204, 0.5); }
body[data-page="holidays"] .tchip[aria-pressed="true"] { background: var(--bone-2); color: #10191d; border-color: var(--bone-2); }
body[data-page="holidays"] .tchip[aria-pressed="true"] .glyph { fill: #10191d; }
body[data-page="holidays"] .tchip[aria-pressed="true"] .glyph .cut { stroke: var(--bone-2); }
body[data-page="holidays"] .tchip:focus-visible, body[data-page="holidays"] .wtoggle:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

body[data-page="holidays"] .wtoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 16px;
  padding: 6px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--bone);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
body[data-page="holidays"] .wtoggle .sw { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: #24343b; border: 1px solid rgba(233, 224, 204, 0.3); transition: background 0.2s; }
body[data-page="holidays"] .wtoggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone); transition: transform 0.2s; }
body[data-page="holidays"] .wtoggle[aria-checked="true"] .sw { background: #1c6477; border-color: var(--neon); }
body[data-page="holidays"] .wtoggle[aria-checked="true"] .sw::after { transform: translateX(20px); background: #fff; }
body[data-page="holidays"] .wheel-note { margin: 6px 0 0; padding-left: calc(44px + 0.7rem); font-size: 0.9rem; line-height: 1.5; color: var(--lichen); max-width: 56ch; }

/* ---------- the river of months ---------- */
body[data-page="holidays"] .river-sec { margin-top: clamp(40px, 7vw, 80px); }
body[data-page="holidays"] .river-title { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 0.2rem; }
body[data-page="holidays"] .river-lede { margin: 0 0 28px; color: var(--lichen); font-style: italic; }
body[data-page="holidays"] .river { --lane: 210px; }
body[data-page="holidays"] .month {
  position: relative;
  display: grid;
  grid-template-columns: var(--lane) minmax(0, 1fr);
  column-gap: 36px;
  padding: 0 0 34px;
}
/* the river itself: each month carries the colour from its first day to its last */
body[data-page="holidays"] .month::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lane) + 16px);
  width: 4px;
  background: linear-gradient(180deg, var(--from), var(--to));
  border-radius: 2px;
}
body[data-page="holidays"] .moonmonth .entry { --season: #9096bd; }
body[data-page="holidays"] .moonmonth::before { background: repeating-linear-gradient(180deg, #8a8fb0 0 6px, transparent 6px 12px); }
body[data-page="holidays"] .month-head { position: sticky; top: 70px; align-self: start; text-align: right; padding-top: 2px; }
body[data-page="holidays"] .month-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; color: var(--bone-2); }
body[data-page="holidays"] .this-month .month-name { color: #fff; }
body[data-page="holidays"] .bede { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.35; color: var(--lichen); font-style: italic; }
body[data-page="holidays"] .bede span { font-style: normal; color: #cfd8d2; }
body[data-page="holidays"] .season-name { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--season-ink); }
body[data-page="holidays"] .fests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body[data-page="holidays"] .entry { position: relative; }
body[data-page="holidays"] .entry::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--season);
  border: 3px solid var(--night);
}
body[data-page="holidays"] .entry-btn {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 820px;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}
body[data-page="holidays"] .entry-btn:hover .entry-name { color: #fff; text-decoration: underline; text-decoration-color: var(--season); text-decoration-thickness: 2px; text-underline-offset: 5px; }
body[data-page="holidays"] .entry-btn:hover .entry-date { background: color-mix(in srgb, var(--season) 45%, #0f1d24); }
body[data-page="holidays"] .entry-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 2px; }
/* each festival's date is a torn-off almanac leaf in its season's colour */
body[data-page="holidays"] .entry-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  min-height: 4.6rem;
  padding: 8px 4px 9px;
  line-height: 1;
  background: color-mix(in srgb, var(--season) 30%, #0f1d24);
  border-top: 4px solid var(--season);
  border-radius: 0 0 4px 4px;
  transition: background 0.2s;
}
body[data-page="holidays"] .entry-date .d { font-family: var(--display); font-size: 2.2rem; color: var(--season-ink); }
body[data-page="holidays"] .entry-date .dm { margin-top: 0.3rem; font-size: 0.78rem; color: #cfd8d2; text-align: center; line-height: 1.2; }
body[data-page="holidays"] .entry-main { padding: 6px 0 14px; border-bottom: 1px solid rgba(233, 224, 204, 0.1); }
body[data-page="holidays"] .entry:last-child .entry-main { border-bottom: 0; }
body[data-page="holidays"] .entry-main { display: flex; flex-direction: column; min-width: 0; }
body[data-page="holidays"] .entry-name { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; color: var(--bone-2); }
body[data-page="holidays"] .entry-trad { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; font-size: 0.9rem; color: #cfd8d2; }
body[data-page="holidays"] .entry-when { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.45; color: var(--lichen); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 70ch; }
body[data-page="holidays"] .quiet { color: var(--lichen); font-style: italic; font-size: 0.95rem; padding: 6px 0; }
body[data-page="holidays"] .now-row { position: relative; display: flex; align-items: center; gap: 12px; color: var(--neon); font-style: italic; font-size: 0.95rem; padding: 2px 0; }
body[data-page="holidays"] .now-row::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--neon-soft), transparent); }
body[data-page="holidays"] .now-mark { position: absolute; left: -29px; width: 18px; height: 18px; border-radius: 50%; background: var(--neon); border: 3px solid var(--night); box-shadow: var(--neon-glow); }

/* ---------- the detail: an almanac page ---------- */
body[data-page="holidays"] .almanac {
  width: min(780px, 100vw - 24px);
  border: 0;
  border-top: 8px solid var(--season);
  border-radius: 4px 4px 10px 10px;
  background: #121d21;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}
body[data-page="holidays"] .almanac .sheet-body { padding: 26px clamp(18px, 4vw, 44px) 34px; }
body[data-page="holidays"] .almanac .close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -12px -18px 0 8px;
  font: 400 1.9rem/1 var(--serif);
  color: var(--bone);
  background: #121d21;
  border: 1px solid rgba(233, 224, 204, 0.25);
  border-radius: 50%;
  cursor: pointer;
}
body[data-page="holidays"] .almanac .close:hover { border-color: var(--neon); color: var(--neon); }
body[data-page="holidays"] .almanac .close:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
body[data-page="holidays"] .alm-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px;
  gap: 22px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(233, 224, 204, 0.16);
}
body[data-page="holidays"] .alm-date { display: flex; flex-direction: column; align-items: center; min-width: 6.5rem; padding-right: 22px; border-right: 1px solid rgba(233, 224, 204, 0.16); line-height: 1; }
body[data-page="holidays"] .alm-day { font-family: var(--display); font-size: 4.6rem; color: var(--season-ink); line-height: 0.95; }
body[data-page="holidays"] .alm-day.moonday { font-family: var(--serif); font-size: 3.6rem; color: #d6d9ee; }
body[data-page="holidays"] .alm-month { margin-top: 0.4rem; font-family: var(--display); font-size: 1.15rem; text-align: center; }
body[data-page="holidays"] .alm-len { margin-top: 0.4rem; font-size: 0.82rem; color: var(--lichen); font-style: italic; text-align: center; line-height: 1.25; }
body[data-page="holidays"] .alm-trad { display: flex; align-items: center; gap: 0.45rem; margin: 0; color: #cfd8d2; font-size: 0.95rem; }
body[data-page="holidays"] .almanac h2 { margin: 0.1rem 0 0.2rem; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.02; }
body[data-page="holidays"] .alm-season { margin: 0; color: var(--lichen); font-size: 1rem; }
body[data-page="holidays"] .season-word { color: var(--season-ink); font-style: italic; }
body[data-page="holidays"] .mini-wheel { width: 96px; height: 96px; }
body[data-page="holidays"] .mini-wheel .mw-dot { fill: #fff; stroke: #0c171c; stroke-width: 14; }
body[data-page="holidays"] .mini-wheel .mw-span { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: round; }
body[data-page="holidays"] .mini-wheel .mw-today { stroke: var(--neon); stroke-width: 22; stroke-linecap: round; }
body[data-page="holidays"] .alm-when { margin: 18px 0 0; font-style: italic; color: #cfd8d2; }
body[data-page="holidays"] .alm-about { margin: 14px 0 0; font-size: 1.06rem; }
body[data-page="holidays"] .alm-about .drop { color: var(--bone-2); }
body[data-page="holidays"] .alm-about .drop::first-letter { float: left; font-family: var(--display); font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--season-ink); }
body[data-page="holidays"] .almanac h3 { margin: 1.6rem 0 0.5rem; font-family: var(--display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0; color: var(--bone-2); }
body[data-page="holidays"] .alm-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 36px; }
body[data-page="holidays"] .alm-cols ul { padding-left: 1.1em; }
body[data-page="holidays"] .alm-cols li::marker { color: var(--season-ink); }
body[data-page="holidays"] .recipes { margin: 0.6rem 0 0; }
body[data-page="holidays"] .almanac a { color: #9fe6f8; }
body[data-page="holidays"] .almanac a:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 2px; }
body[data-page="holidays"] .god-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
body[data-page="holidays"] .god-list a { font-family: var(--display); font-size: 1.1rem; }

body[data-page="holidays"] .alm-rite { margin-top: 1.8rem; padding: 4px 0 6px; border-top: 1px solid rgba(233, 224, 204, 0.16); }
body[data-page="holidays"] .rite { list-style: none; counter-reset: step; margin: 0.4rem 0 0; padding: 0; }
body[data-page="holidays"] .rite li { counter-increment: step; position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 14px; padding: 0 0 18px; margin: 0; }
body[data-page="holidays"] .rite li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: #10191d;
  background: var(--season-ink);
  position: relative;
  z-index: 1;
}
body[data-page="holidays"] .rite li::after { content: ''; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0; width: 2px; background: color-mix(in srgb, var(--season) 55%, transparent); }
body[data-page="holidays"] .rite li:last-child::after { display: none; }
body[data-page="holidays"] .rite li span { padding-top: 0.55rem; font-size: 1.04rem; line-height: 1.5; }

body[data-page="holidays"] .candle { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; font-size: 0.94rem; color: #e9d7c5; background: rgba(227, 138, 109, 0.1); border-left: 3px solid var(--ember); }
body[data-page="holidays"] .flame { flex: none; width: 12px; height: 18px; margin-top: 3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff4c8 0 25%, #f2b24b 45%, var(--ember) 80%); }
body[data-page="holidays"] .journal-add { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
body[data-page="holidays"] .journal-msg { margin: 0; color: var(--lichen); font-size: 0.95rem; }

/* ---------- smaller screens ---------- */
@media (max-width: 920px) {
  body[data-page="holidays"] main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "wheel" "soon" "ctrl" "year";
  }
  body[data-page="holidays"] .wheel-sec { position: static; padding-top: 8px; }
  body[data-page="holidays"] .wheel-box { max-width: 560px; }
}
@media (max-width: 700px) {
  body[data-page="holidays"] .river { --lane: 0px; }
  body[data-page="holidays"] .month { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  body[data-page="holidays"] .month::before { left: 6px; }
  body[data-page="holidays"] .month-head { position: static; text-align: left; margin-bottom: 12px; }
  body[data-page="holidays"] .month-name { font-size: 1.75rem; }
  body[data-page="holidays"] .entry::before { left: -30px; }
  body[data-page="holidays"] .now-mark { left: -33px; }
  body[data-page="holidays"] .entry-btn { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 12px; }
  body[data-page="holidays"] .entry-date { min-height: 3.8rem; }
  body[data-page="holidays"] .entry-date .d { font-size: 1.9rem; }
  body[data-page="holidays"] .entry-name { font-size: 1.2rem; }
  body[data-page="holidays"] .alm-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body[data-page="holidays"] .mini-wheel { display: none; }
  body[data-page="holidays"] .alm-date { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; min-width: 0; padding: 0 44px 0 0; border-right: 0; }
  body[data-page="holidays"] .alm-day { font-size: 3.4rem; }
  body[data-page="holidays"] .alm-day.moonday { font-size: 2.6rem; }
  body[data-page="holidays"] .alm-month, body[data-page="holidays"] .alm-len { margin-top: 0; text-align: left; }
  body[data-page="holidays"] .alm-cols { grid-template-columns: 1fr; }
  body[data-page="holidays"] .almanac { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: 10px 10px 0 0; }
  body[data-page="holidays"] .almanac .sheet-body { max-height: calc(100dvh - 8px); }
  body[data-page="holidays"] .wheel-note { padding-left: 0; }
}