/* Calendar spiral presentation. Frozen geometry constants mirror the signed-off mock. */
:root {
  --spiral-tilt: 0.36;
  --spiral-drop: 46px;
  --spiral-shrink: 13.5px;
  --spiral-leap-bulge: 1.06;
  --cal-vellum: #F6EDD8;
  --cal-vellum-hi: #FCF7EA;
  --cal-vellum-deep: #EBDDBC;
  --cal-ink: #2A2419;
  --cal-ink-soft: #6A5B40;
  --cal-techelet: #4A6FBE;
  --cal-lapis: #24356E;
  --cal-vermilion: #C8401F;
  --cal-malachite: #1E7B4F;
  --cal-gold: #C9A227;
  --cal-gold-hi: #F0DD9A;
  --cal-gold-deep: #8C6E1D;
}

html {
  scroll-behavior: smooth;
}

.cal-page {
  background: var(--cal-vellum);
  color: var(--cal-ink);
}

.cal-page .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: linear-gradient(180deg, rgba(252, 247, 234, 0.9), rgba(252, 247, 234, 0));
  border-bottom: 0;
  color: var(--cal-ink);
}

.cal-page .topbar a,
.cal-page .site-tagline {
  color: var(--cal-ink);
}

.cal-spiral {
  position: relative;
  min-height: 100vh;
  height: 100svh;
  overflow: hidden;
  cursor: grab;
  isolation: isolate;
}

.cal-spiral.dragging {
  cursor: grabbing;
}

.cal-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 252, 240, 0.72), transparent 60%),
    linear-gradient(180deg, #FCF7EA, #F6EDD8 45%, #EFE2C2 100%);
}

.cal-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cal-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cal-wheel text {
  user-select: none;
}

.month-label {
  font-family: var(--utility);
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: var(--cal-ink-soft);
}

.greg-label {
  font-family: var(--utility);
  font-weight: 500;
  letter-spacing: 0.18em;
  fill: rgba(106, 91, 64, 0.38);
}

.agro-label {
  font-family: var(--body);
  font-style: italic;
  fill: rgba(30, 123, 85, 0.76);
}

.turn-label {
  font-family: var(--utility);
  letter-spacing: 0.14em;
  fill: rgba(106, 91, 64, 0.62);
}

.festival-lamp {
  cursor: pointer;
  outline: none;
}

.festival-lamp .lamp-core {
  animation: lampPulse 4.4s ease-in-out infinite;
}

.festival-lamp:focus .lamp-focus,
.festival-lamp:hover .lamp-focus {
  opacity: 1;
}

@keyframes lampPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.55)); }
  50% { filter: drop-shadow(0 0 11px rgba(201, 162, 39, 0.95)); }
}

.land-medallion {
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  overflow: hidden;
  cursor: default;
  background: #DCE8E2;
  box-shadow:
    0 10px 40px rgba(106, 80, 30, 0.35),
    inset 0 0 0 3px var(--cal-gold),
    inset 0 0 0 6px rgba(140, 110, 29, 0.4);
  transition: filter 1.2s ease;
}

.land-medallion svg {
  display: block;
  width: 100%;
  height: 100%;
}

.season-caption {
  position: absolute;
  z-index: 11;
  transform: translateX(-50%);
  max-width: min(340px, 72vw);
  text-align: center;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(0.82rem, 1.6vw, 0.94rem);
  line-height: 1.3;
  color: var(--cal-ink-soft);
  text-shadow: 0 0 8px rgba(252, 247, 234, 0.95), 0 0 16px rgba(252, 247, 234, 0.9);
}

.today-button {
  position: absolute;
  left: 50%;
  bottom: max(4.8rem, 7.6vh);
  z-index: 35;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1.5px solid rgba(140, 110, 29, 0.55);
  border-radius: 99px;
  padding: 0.45rem 1rem;
  background: rgba(252, 247, 234, 0.72);
  color: var(--cal-ink);
  font-family: var(--utility);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.today-button:hover,
.today-button:focus-visible {
  border-color: var(--cal-gold);
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.4);
  background: rgba(252, 247, 234, 0.9);
  outline: none;
}

.today-bead {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cal-gold-hi) 40%, var(--cal-gold) 80%);
  box-shadow: 0 0 8px rgba(240, 221, 154, 0.8);
}

.cal-rubric {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3.4rem);
  top: max(6.6rem, 11vh);
  z-index: 30;
  max-width: min(23rem, 42vw);
}

.rubric-kicker {
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cal-gold-deep);
}

.cal-rubric h1 {
  margin-top: 0.3rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.72rem, 3vw, 2.7rem);
  line-height: 1.06;
  color: var(--cal-ink);
}

.rubric-greg {
  margin-top: 0.25rem;
  font-family: var(--utility);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: rgba(106, 91, 64, 0.58);
  text-transform: uppercase;
}

.rubric-copy {
  margin-top: 0.65rem;
  font-style: italic;
  font-size: clamp(0.9rem, 1.55vw, 0.98rem);
  line-height: 1.45;
  color: var(--cal-ink-soft);
}

.rubric-copy b {
  font-style: normal;
  color: var(--cal-malachite);
  font-weight: 600;
}

.spiral-note {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3.4rem);
  top: max(6.6rem, 11vh);
  z-index: 30;
  max-width: min(19rem, 36vw);
  text-align: right;
}

.spiral-note .quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(0.92rem, 1.55vw, 1.06rem);
  line-height: 1.42;
  color: var(--cal-ink);
}

.spiral-note .attrib,
.spiral-note .read-link {
  margin-top: 0.5rem;
  font-family: var(--utility);
  font-size: 0.58rem;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cal-ink-soft);
}

.spiral-note a {
  color: var(--cal-gold-deep);
  text-decoration: none;
}

.spiral-note a:hover,
.spiral-note a:focus-visible {
  color: var(--cal-lapis);
}

.spiral-note .voice {
  margin-top: 0.8rem;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cal-gold-deep);
}

.rhythms {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.8rem);
  bottom: max(5.2rem, 6vh);
  z-index: 30;
  max-width: 236px;
  padding: 0.9rem 1.1rem 0.8rem;
  border: 1.5px solid rgba(138, 106, 59, 0.55);
  outline: 1px solid rgba(138, 106, 59, 0.3);
  outline-offset: 3px;
  background: rgba(252, 247, 234, 0.58);
  backdrop-filter: blur(2px);
}

.rhythms::before {
  content: "❧";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.5rem;
  background: var(--cal-vellum);
  color: var(--cal-gold-deep);
  font-size: 1rem;
}

.rhythms p {
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cal-ink-soft);
}

.rhythms b {
  font-style: normal;
  color: var(--cal-malachite);
}

.spiral-hint {
  position: absolute;
  left: 50%;
  bottom: max(2.2rem, 3.2vh);
  z-index: 30;
  transform: translateX(-50%);
  width: min(90vw, 44rem);
  text-align: center;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cal-ink-soft);
  opacity: 0.82;
}

.festival-scrap {
  position: absolute;
  z-index: 45;
  width: min(260px, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  background: linear-gradient(165deg, #FAF3E0, #EFE2C2);
  color: var(--cal-ink);
  font-family: var(--body);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
  clip-path: polygon(0 3%, 4% 0, 96% 1%, 100% 6%, 99% 95%, 95% 100%, 3% 99%, 0 94%);
  box-shadow: 4px 6px 20px rgba(74, 52, 30, 0.35);
  opacity: 0;
  transform: scale(0.92) translateY(4px);
  transform-origin: left center;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.festival-scrap.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.festival-scrap b {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--cal-lapis);
  font-family: var(--display);
  font-size: 1.02rem;
  font-style: normal;
}

.festival-scrap .g,
.festival-scrap .note {
  display: block;
}

.festival-scrap .g {
  margin-bottom: 0.3rem;
  color: rgba(106, 91, 64, 0.58);
  font-family: var(--utility);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.festival-scrap .link {
  margin-top: 0.42rem;
  color: var(--cal-gold-deep);
  font-family: var(--utility);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cal-education {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
  background:
    linear-gradient(180deg, rgba(239, 226, 194, 0.15), var(--cal-vellum) 7rem),
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12), transparent 42rem);
  color: var(--cal-ink);
}

.cal-education > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.cal-education .article-figure {
  margin-top: 0;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}

.cal-education .article-figure img {
  width: 100%;
  height: clamp(240px, 34vh, 360px);
  object-fit: cover;
  object-position: center 46%;
  border-radius: 0;
  filter: sepia(0.08) saturate(0.95) brightness(1.04);
}

.cal-section-head {
  margin-bottom: 1.45rem;
}

.cal-section-head .eyebrow {
  color: var(--cal-gold-deep);
}

.cal-section-head h2 {
  margin-top: 0.42rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  color: var(--cal-ink);
}

.cal-section-head p {
  margin-top: 0.65rem;
  max-width: 64ch;
  color: var(--cal-ink-soft);
}

.cal-today-panel,
.cal-cards-grid,
.cal-cycles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(140, 110, 29, 0.3);
  border-left: 1px solid rgba(140, 110, 29, 0.3);
}

.cal-today-item,
.cal-fest-card,
.cal-cycle-card {
  min-width: 0;
  padding: clamp(1.1rem, 2.2vw, 1.55rem);
  border-right: 1px solid rgba(140, 110, 29, 0.3);
  border-bottom: 1px solid rgba(140, 110, 29, 0.3);
  background: rgba(252, 247, 234, 0.42);
}

.cal-today-item .label,
.cal-fest-date,
.cal-fest-next,
.cycle-label,
.cal-fest-tag {
  font-family: var(--utility);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cal-gold-deep);
}

.cal-today-item .value,
.cal-fest-name,
.cycle-value {
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--cal-ink);
}

.cal-today-item .sub,
.cal-fest-desc,
.cycle-sub,
.cal-cycle-card p {
  margin-top: 0.45rem;
  color: var(--cal-ink-soft);
  line-height: 1.48;
}

.cal-fest-card.fast .cal-fest-name {
  color: #615D56;
}

.cal-fest-card.modern-day .cal-fest-name {
  color: var(--cal-lapis);
}

.cal-fest-next {
  margin-top: 0.45rem;
  color: rgba(106, 91, 64, 0.65);
}

.cal-fest-tag {
  display: inline-block;
  margin-top: 0.7rem;
  margin-right: 0.45rem;
  color: var(--cal-lapis);
}

.cal-cycle-card h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--cal-ink);
}

.cal-cycle-status {
  margin-top: 1rem;
}

.cal-cycle-progress {
  height: 4px;
  margin-top: 0.8rem;
  background: rgba(140, 110, 29, 0.18);
}

.cal-cycle-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cal-malachite), var(--cal-gold));
}

.ext-links {
  margin-top: 2rem;
  border-top: 1px solid rgba(140, 110, 29, 0.3);
  padding-top: 1.2rem;
}

.ext-links p {
  font-family: var(--utility);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cal-gold-deep);
}

.ext-links ul {
  margin-top: 0.8rem;
  columns: 2;
  gap: 2rem;
}

.ext-links li {
  break-inside: avoid;
  margin: 0 0 0.55rem 1.1rem;
}

.ext-links a {
  color: var(--cal-lapis);
}

.cal-page footer {
  background: var(--cal-vellum);
  color: var(--cal-ink-soft);
}

@media (max-width: 760px) {
  .cal-rubric {
    top: 5.8rem;
    max-width: calc(100vw - 2.4rem);
  }

  .spiral-note {
    top: auto;
    right: 1rem;
    bottom: 8.7rem;
    max-width: min(17rem, 48vw);
  }

  .spiral-note .quote {
    display: none;
  }

  .rhythms {
    display: none;
  }

  .spiral-hint {
    bottom: 1rem;
    font-size: 0.78rem;
  }

  .today-button {
    bottom: 3.2rem;
  }

  .ext-links ul {
    columns: 1;
  }
}

@media (max-width: 480px) {
  .cal-page .topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .cal-rubric {
    left: 1rem;
    top: 5.2rem;
  }

  .rubric-copy {
    max-width: 21rem;
  }

  .spiral-note {
    display: none;
  }

  .season-caption {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .festival-lamp .lamp-core {
    animation: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .festival-lamp .lamp-core {
    animation: none;
  }
}