.year-wheel-section {
  margin: 2rem 0 5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--moss) 34%, transparent);
  background: color-mix(in srgb, var(--paper) 88%, white);
}
.folklore-year-page .pagehead { min-height: 430px; }
.folklore-year-page .year-wheel-section { margin-top: 0; }

.wheel-introduction {
  max-width: 740px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.wheel-introduction h2,
.seasonal-phase-group h3 { margin: .25rem 0 .75rem; }

.wheel-workspace {
  display: grid;
  place-items: center;
  gap: 1.4rem;
}

.wildwood-wheel {
  position: relative;
  width: min(680px, 88vw);
  aspect-ratio: 1;
  margin: 2rem auto;
  border: 1px solid color-mix(in srgb, var(--moss) 48%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 27%, color-mix(in srgb, var(--moss) 12%, transparent) 27.3% 27.7%, transparent 28%),
    radial-gradient(circle, transparent 0 46%, color-mix(in srgb, var(--moss) 26%, transparent) 46.3% 46.7%, transparent 47%);
}

.wildwood-wheel::before,
.wildwood-wheel::after {
  content: "";
  position: absolute;
  inset: 50% 8%;
  border-top: 1px solid color-mix(in srgb, var(--moss) 17%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

.wildwood-wheel::after { transform: rotate(-45deg); }

.wheel-phase,
.wheel-centre,
.archive-controls button,
.place-archive-toggle {
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.wheel-phase {
  position: absolute;
  z-index: 2;
  width: clamp(112px, 20vw, 158px);
  min-height: 68px;
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, var(--moss) 45%, transparent);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 8px 24px rgb(43 49 38 / 8%);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.wheel-phase:hover,
.wheel-phase:focus-visible,
.wheel-phase.is-selected {
  border-color: var(--moss);
  background: color-mix(in srgb, var(--paper) 82%, var(--moss));
  transform: translate(-50%, -50%) scale(1.04);
}

.wheel-phase.is-present::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
}

.wheel-phase span,
.wheel-phase small,
.wheel-centre span,
.wheel-centre strong,
.wheel-centre small { display: block; }

.wheel-phase span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.05;
}

.wheel-phase small,
.wheel-centre small {
  margin-top: .25rem;
  color: var(--moss);
  font-size: .74rem;
  letter-spacing: .03em;
}

.phase-imbolc { left: 50%; top: 5%; }
.phase-spring { left: 82%; top: 18%; }
.phase-beltane { left: 95%; top: 50%; }
.phase-summer { left: 82%; top: 82%; }
.phase-lughnasadh { left: 50%; top: 95%; }
.phase-autumn { left: 18%; top: 82%; }
.phase-samhain { left: 5%; top: 50%; }
.phase-winter { left: 18%; top: 18%; }

.wheel-centre {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  padding: 1rem;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--moss) 48%, transparent);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 10px 35px rgb(43 49 38 / 10%);
}

.wheel-centre.is-selected { background: color-mix(in srgb, var(--paper) 86%, var(--moss)); }
.wheel-centre span { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.wheel-centre strong { margin-top: .35rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; }

.wheel-key {
  max-width: 600px;
  text-align: center;
  color: var(--moss);
}

.wheel-key p { margin: .3rem 0; }
.current-phase-mark { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; background: var(--moss); vertical-align: middle; }

.archive-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 3.25rem 0 2.5rem;
  padding: 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--moss) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--moss) 25%, transparent);
}

.archive-controls div { text-align: center; }
.archive-controls span { display: block; color: var(--moss); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.archive-controls strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; font-weight: 500; }
.archive-controls button,
.place-archive-toggle { border: 0; background: transparent; }
.archive-controls button:first-child { justify-self: start; }
.archive-controls button:last-child { justify-self: end; }
.archive-controls button:disabled { opacity: .3; cursor: default; }

.seasonal-phase-group { padding: 2.25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--moss) 20%, transparent); }
.seasonal-phase-group > header { margin-bottom: 1.4rem; text-align: center; }
.seasonal-phase-group h3 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; }
.seasonal-entry-list { display: grid; gap: 1.25rem; }
.seasonal-entry { position: relative; }
.seasonal-entry .entry-place { margin: 0 0 .45rem; color: var(--moss); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.seasonal-entry > time { display: block; margin-bottom: .55rem; }
.seasonal-empty { padding: 2.5rem; text-align: center; color: var(--moss); font-style: italic; }
.place-archive-toggle { display: block; width: max-content; max-width: 100%; margin: 2.5rem auto 0; padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--moss); color: var(--moss); text-decoration: none; }

@media (max-width: 700px) {
  .year-wheel-section { padding: 1.25rem .8rem 2rem; }
  .wildwood-wheel { width: min(560px, 96vw); margin: 2.5rem auto; }
  .wheel-phase { width: 104px; min-height: 58px; padding: .45rem .35rem; }
  .wheel-phase small { display: none; }
  .wheel-phase span { font-size: .92rem; }
  .phase-imbolc { top: 4%; }
  .phase-beltane { left: 94%; }
  .phase-lughnasadh { top: 96%; }
  .phase-samhain { left: 6%; }
  .wheel-centre { width: 43%; }
  .wheel-centre span { font-size: .64rem; }
  .wheel-centre small { display: none; }
  .archive-controls { gap: .4rem; }
  .archive-controls button { max-width: 92px; font-size: .82rem; }
}