/* About: the moon slides away from the chosen raven, so the sun lights that bird. */
@keyframes hue { to { filter: hue-rotate(360deg); } }

.title { position: relative; z-index: 1; padding: clamp(4rem, 6vw, 5.5rem) 1rem 0; text-align: center; }
.title h1 { margin: 0; font: 800 clamp(2.5rem, 5vw, 4.5rem)/1 var(--display); letter-spacing: -0.04em; }
.title p { margin: 0.625rem 0 0; font-size: clamp(1rem, 1.4vw, 1.25rem); }

.clip { overflow: hidden; }
.stage { position: relative; width: min(100%, 112vh); margin-left: auto; margin-right: auto; aspect-ratio: 1440 / 860; margin-top: clamp(-40px, -2vw, -8px); overflow: hidden; }
.sun { position: absolute; inset: 0; animation: hue 70s linear infinite; }
.corona { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 190, 110, 0.75) 58%, rgba(255, 110, 120, 0.28) 76%, transparent 100%); }
.disc { position: absolute; left: 50%; top: 50%; width: 45.8%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, #fffaf0 0%, #ffe2b3 58%, #ffb05a 100%); }
.moon { position: absolute; width: 48.4%; aspect-ratio: 1; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); transform: translate(-50%, -50%); transition: left 1.6s cubic-bezier(0.45, 0.05, 0.2, 1), top 1.6s cubic-bezier(0.45, 0.05, 0.2, 1); }
.bough { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.34)); }

.bird { width: 7%; min-width: 44px; color: #000; }
.bird svg { fill: currentColor; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)); }
.bird:hover svg { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }

.detail { max-width: 760px; padding-top: 0.5rem; text-align: center; }
.panel { display: block; margin-top: 0; }
.panel .lede { margin-left: auto; margin-right: auto; max-width: 40ch; }
.panel-links { justify-content: center; margin-top: 1.375rem; }
.picks { justify-content: center; gap: 0.125rem 1.5rem; margin-top: 2.25rem; border: 0; }

.title .now { color: var(--muted); font-size: 0.9375rem; }
.title .now + p { color: var(--muted); }

.more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 2rem 4rem; max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter); border-top: 1px solid var(--line); }
.more h2 { margin: 0 0 1rem; font: 800 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--display); letter-spacing: -0.02em; }
.way { max-width: 60ch; margin: 0 0 1rem; }
.way strong { display: block; font-family: var(--display); font-size: 1.1875rem; }
.quiet { margin: 1.75rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.more ul { margin: 0; padding-left: 1.25rem; }
.more li { margin-bottom: 0.5rem; }
.dated { margin: 0; }
.dated div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.dated div:first-child { border-top: 0; padding-top: 0; }
.dated dt { color: var(--muted); font-size: 0.9375rem; padding-top: 0.15em; }
.dated dd { margin: 0; }

@media (max-width: 760px) {
  .stage { width: 200%; margin-left: -50%; }
  .dated div { grid-template-columns: minmax(0, 1fr); }
  .bird { width: 7.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .sun { animation: none; }
  .moon { transition: none; }
}