@property --river-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #a8b78c;
}

@property --river-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #c5c487;
}

@property --river-shadow {
  syntax: "<color>";
  inherits: true;
  initial-value: #4b5a57;
}

@property --dial-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #a8b78c;
}

@property --dial-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --curtain-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #a8b78c;
}

@property --curtain-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: #e1e6d7;
}

@property --curtain-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.seasons-page {
  --season-bg: #eef1e7;
  --season-accent: #a8b78c;
  --season-text: #242723;
  --season-muted: rgba(36, 39, 35, 0.62);
  --season-line: rgba(36, 39, 35, 0.16);
  background: var(--season-bg);
  color: var(--season-text);
  transition: background-color 280ms linear, color 280ms linear;
}

.seasons-page.is-season-dark {
  --season-muted: rgba(238, 233, 221, 0.68);
  --season-line: rgba(238, 233, 221, 0.18);
}

.seasons-main {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 58% 18% at 82% 7%, color-mix(in srgb, var(--season-accent) 15%, transparent), transparent 72%),
    radial-gradient(ellipse 44% 16% at 18% 24%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(to bottom, rgba(255,255,255,.08), transparent 22%),
    var(--season-bg);
  transition: background 320ms linear;
}

.seasons-header .season-status {
  position: absolute;
  left: 50%;
  color: currentColor;
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.seasons-header.is-timeline .season-status {
  opacity: 0.66;
  transform: translateX(-50%) translateY(0);
}

.seasons-hero {
  --river-primary: #a8b78c;
  --river-secondary: #c5c487;
  --river-shadow: #4b5a57;
  --river-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(120px, 0.28fr);
  gap: 9vw;
  align-items: center;
  min-height: 100svh;
  min-height: 780px;
  padding: 132px 9vw 120px 5vw;
  overflow: hidden;
  background:
    radial-gradient(ellipse 56% 38% at 76% 50%, rgba(168, 183, 140, 0.2), transparent 72%),
    radial-gradient(ellipse 44% 30% at 18% 68%, rgba(130, 155, 151, 0.14), transparent 72%),
    #e7e8df;
}

.year-axis {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(36, 39, 35, 0.13);
  transform: scaleY(0);
  transform-origin: top;
  animation: axisGrow 1400ms var(--ease-out) 300ms forwards;
}

.year-axis::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(36, 39, 35, 0.18);
  border-radius: 50%;
  background: #e7e8df;
}

.seasons-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.scroll-cue {
  position: relative;
  z-index: 2;
}

.hall-mark {
  display: grid;
  gap: 4px;
  margin-bottom: 42px;
  color: var(--season-muted);
  font-size: 13px;
  letter-spacing: 0.22em;
  opacity: 0;
  animation: fadeUp 760ms var(--ease-out) 600ms both;
}

.hall-mark span {
  font-size: 10px;
  letter-spacing: 0.28em;
}

.seasons-hero h1 {
  display: grid;
  gap: 6px;
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: 0.04em;
}

.seasons-hero h1 span,
.seasons-hero__line,
.seasons-hero__text {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 920ms var(--ease-out) both;
}

.seasons-hero h1 span:first-child { animation-delay: 800ms; }
.seasons-hero h1 span:last-child { animation-delay: 1000ms; }

.seasons-hero__line {
  margin-top: 38px;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 28px);
  animation-delay: 1300ms;
}

.seasons-hero__text {
  max-width: 500px;
  margin-top: 28px;
  color: var(--season-muted);
  font-size: 17px;
  line-height: 2.05;
  animation-delay: 1500ms;
}

.time-river {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(66vw, 920px);
  height: min(74vh, 720px);
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(36px, 20px, 0);
  animation: riverEnter 1100ms var(--ease-out) 1160ms both;
  transition: --river-primary 900ms ease, --river-secondary 900ms ease, --river-shadow 900ms ease;
}

.time-river::before,
.time-river::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.time-river::before {
  z-index: -3;
  inset: 10% -6% 1% 0;
  opacity: .8;
  background:
    radial-gradient(ellipse 48% 22% at 78% 20%, color-mix(in srgb, var(--river-primary) 36%, transparent), transparent 72%),
    radial-gradient(ellipse 44% 26% at 48% 80%, color-mix(in srgb, var(--river-secondary) 36%, transparent), transparent 72%),
    linear-gradient(155deg, transparent 5%, rgba(255,255,255,.42) 44%, transparent 70%);
  filter: blur(18px);
}

.time-river::after {
  z-index: 3;
  inset: auto 0 3% 0;
  height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(231,232,223,.68) 78%);
}

.time-river__mist,
.time-river__horizon,
.time-river__ribbons,
.time-river__ribbon,
.time-river__canvas {
  position: absolute;
}

.time-river__canvas {
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.time-river__mist {
  z-index: -2;
  inset: 4% -10% 0 -16%;
  opacity: .62;
  background:
    radial-gradient(ellipse 38% 14% at 46% 31%, rgba(255,255,255,.86), transparent 72%),
    radial-gradient(ellipse 42% 16% at 22% 66%, rgba(255,255,255,.62), transparent 74%),
    linear-gradient(160deg, transparent 28%, rgba(111,130,114,.11) 58%, transparent 70%);
  filter: blur(10px);
  animation: riverMist 18s ease-in-out infinite alternate;
}

.time-river__horizon {
  z-index: -1;
  right: -11%;
  top: 10%;
  width: 86%;
  height: 45%;
  opacity: .44;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(85,105,89,.17) 0 2%, transparent 2.5%),
    linear-gradient(170deg, transparent 36%, rgba(85,105,89,.14) 37% 39%, transparent 40% 52%, rgba(85,105,89,.11) 53% 55%, transparent 56%);
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent 96%);
}

.time-river__ribbons {
  z-index: 1;
  inset: 2% -22% -8% -20%;
  transform: rotate(-8deg) scale(1.08);
  transform-origin: 58% 55%;
  display: none;
}

.time-river__ribbon {
  width: 120%;
  height: 42%;
  left: -10%;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 48% 52% 44% 56% / 58% 36% 64% 42%;
  mix-blend-mode: multiply;
  box-shadow: 0 22px 42px rgba(73, 79, 65, .1), inset 0 1px rgba(255,255,255,.78);
  animation: riverFlow 16s ease-in-out infinite alternate;
}

.time-river__ribbon::before,
.time-river__ribbon::after {
  content: "";
  position: absolute;
  inset: 8% 3%;
  border-radius: inherit;
}

.time-river__ribbon::before {
  border: 1px solid rgba(255,255,255,.62);
  transform: scale(.9) translateX(4%);
}

.time-river__ribbon::after {
  inset: 18% 8%;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.62) 46%, transparent 68%);
  filter: blur(4px);
  animation: riverShimmer 10s linear infinite;
}

.time-river__ribbon--spring {
  top: 4%;
  background: linear-gradient(100deg, color-mix(in srgb, var(--river-primary) 15%, transparent), color-mix(in srgb, var(--river-primary) 68%, white), color-mix(in srgb, var(--river-secondary) 46%, white));
  animation-delay: -4s;
}

.time-river__ribbon--summer {
  top: 23%;
  left: -2%;
  background: linear-gradient(100deg, color-mix(in srgb, var(--river-secondary) 56%, white), color-mix(in srgb, var(--river-primary) 74%, #c15a4f), rgba(204,118,93,.53));
  animation-duration: 18s;
  animation-delay: -10s;
}

.time-river__ribbon--autumn {
  top: 43%;
  left: -15%;
  background: linear-gradient(106deg, color-mix(in srgb, var(--river-primary) 38%, #c9a559), color-mix(in srgb, var(--river-secondary) 72%, #c78c51), rgba(189,104,75,.44));
  animation-duration: 20s;
  animation-delay: -7s;
}

.time-river__ribbon--winter {
  top: 62%;
  left: -7%;
  background: linear-gradient(104deg, color-mix(in srgb, var(--river-shadow) 88%, #162226), color-mix(in srgb, var(--river-primary) 36%, #6f9eaa), rgba(236,240,237,.58));
  animation-duration: 22s;
  animation-delay: -15s;
}

.time-river__ribbon--glass {
  top: 10%;
  left: -4%;
  height: 76%;
  opacity: .76;
  background: linear-gradient(106deg, rgba(255,255,255,.14), rgba(255,255,255,.48) 48%, rgba(255,255,255,.1));
  mix-blend-mode: screen;
  animation-duration: 24s;
  animation-delay: -3s;
}

.time-river__current {
  position: absolute;
  z-index: 4;
  top: 40%;
  left: 46%;
  display: grid;
  grid-template-columns: 30px auto;
  column-gap: 12px;
  align-items: center;
  min-width: 212px;
  padding: 14px 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 10px;
  color: #30332e;
  background: rgba(247,246,239,.72);
  box-shadow: 0 18px 40px rgba(61,68,52,.15);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px);
  animation: riverLabelIn 560ms var(--ease-out) 1780ms forwards;
}

.time-river__orb {
  grid-row: 1 / span 2;
  width: 30px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 28%, rgba(255,255,255,.88) 0 8%, transparent 9%), radial-gradient(circle at 46% 44%, var(--river-primary), color-mix(in srgb, var(--river-primary) 52%, #fff) 68%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--river-primary) 34%, transparent);
}

.time-river__term,
.time-river__color {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.time-river__term::after { content: "　"; }

.time-river__hex {
  grid-column: 2;
  margin-top: 5px;
  color: rgba(48,51,46,.68);
  font-size: 11px;
  letter-spacing: .12em;
}

.time-river.is-paused .time-river__mist,
.time-river.is-paused .time-river__ribbon,
.time-river.is-paused .time-river__ribbon::after {
  animation-play-state: paused;
}

.season-dial {
  --dial-color: #a8b78c;
  --dial-angle: 0deg;
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(46vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(20px, 14px, 0) scale(.96);
  animation: dialEnter 900ms var(--ease-out) 1160ms both;
  transition: --dial-color 700ms ease, --dial-angle 820ms var(--ease-out);
}

.season-dial::before,
.season-dial::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.season-dial::before {
  inset: 8%;
  background:
    radial-gradient(circle at 48% 46%, rgba(255,255,255,.86) 0 12%, transparent 13%),
    radial-gradient(circle at 54% 51%, color-mix(in srgb, var(--dial-color) 18%, transparent), transparent 57%),
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.02));
  box-shadow: 0 44px 100px rgba(61,68,52,.1), inset 0 0 0 1px rgba(255,255,255,.54);
}

.season-dial::after {
  inset: 17%;
  border: 1px solid color-mix(in srgb, var(--dial-color) 32%, rgba(36,39,35,.12));
  opacity: .64;
}

.season-dial__halo {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--dial-color) 22%, transparent), transparent 66%);
  filter: blur(20px);
  animation: dialBreathe 6.5s ease-in-out infinite alternate;
}

.season-dial__orbit,
.season-dial__arc,
.season-dial__needle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.season-dial__orbit--outer {
  inset: 4%;
  border: 1px solid rgba(36,39,35,.13);
}

.season-dial__orbit--inner {
  inset: 25%;
  border: 1px solid rgba(36,39,35,.1);
}

.season-dial__arc {
  inset: 4%;
  background: conic-gradient(from -44deg, var(--dial-color), #bdc56c 20%, #c96f5b 43%, #bc9a60 65%, #758f99 82%, var(--dial-color));
  mask: radial-gradient(transparent 66%, #000 67% 69%, transparent 70%);
  opacity: .78;
  animation: dialDrift 26s linear infinite;
}

.season-dial__needle {
  inset: 12%;
  transform: rotate(var(--dial-angle));
  transition: transform 820ms var(--ease-out);
}

.season-dial__needle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 44%;
  transform: translate(-50%, -100%);
  transform-origin: bottom;
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--dial-color) 70%, #30332e));
}

.season-dial__needle i {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 16px;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: var(--dial-color);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--dial-color) 17%, transparent), 0 10px 22px color-mix(in srgb, var(--dial-color) 32%, transparent);
  transform: translateX(-50%);
  animation: dialPoint 3.4s ease-in-out infinite;
}

.season-dial__current {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 150px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.season-dial__index,
.season-dial__hex {
  color: var(--season-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
}

.season-dial__term {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: .9;
}

.season-dial__color {
  color: color-mix(in srgb, var(--dial-color) 72%, #30332e);
  font-size: 14px;
  letter-spacing: .14em;
}

@keyframes dialEnter {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes dialDrift {
  to { transform: rotate(360deg); }
}

@keyframes dialBreathe {
  from { opacity: .52; transform: scale(.96); }
  to { opacity: .9; transform: scale(1.05); }
}

@keyframes dialPoint {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.16); }
}

.season-curtain {
  --curtain-color: #a8b78c;
  --curtain-soft: #e1e6d7;
  --curtain-progress: 0;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: curtainEnter 900ms var(--ease-out) 1160ms both;
  transition: --curtain-color 760ms ease, --curtain-soft 760ms ease, --curtain-progress 820ms var(--ease-out);
}

.season-curtain::before,
.season-curtain::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.season-curtain::before {
  z-index: -2;
  inset: 4% -12% 0 8%;
  background:
    radial-gradient(ellipse 46% 30% at 62% 30%, color-mix(in srgb, var(--curtain-color) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 42% 28% at 34% 73%, color-mix(in srgb, var(--curtain-soft) 56%, transparent), transparent 72%);
  filter: blur(18px);
}

.season-curtain::after {
  z-index: 3;
  inset: 0;
  background: linear-gradient(90deg, rgba(231,232,223,.82), transparent 30% 70%, rgba(231,232,223,.42));
}

.season-curtain__sheet,
.season-curtain__line,
.season-curtain__beam {
  position: absolute;
  pointer-events: none;
}

.season-curtain__sheet {
  top: -8%;
  bottom: -8%;
  width: 42%;
  border-radius: 52% 48% 46% 54% / 16% 18% 15% 19%;
  background: linear-gradient(92deg, transparent 4%, color-mix(in srgb, var(--curtain-color) 14%, transparent) 34%, color-mix(in srgb, var(--curtain-color) 52%, transparent) 58%, rgba(255,255,255,.4) 78%, transparent 98%);
  box-shadow: inset 1px 0 rgba(255,255,255,.62), 24px 0 50px color-mix(in srgb, var(--curtain-color) 8%, transparent);
  transform-origin: 50% 50%;
}

.season-curtain__sheet--back {
  left: 28%;
  opacity: .56;
  filter: blur(2px);
  animation: curtainSwayBack 10s ease-in-out infinite alternate;
}

.season-curtain__sheet--middle {
  left: 45%;
  opacity: .72;
  animation: curtainSwayMiddle 8.5s ease-in-out infinite alternate;
}

.season-curtain__sheet--front {
  left: 62%;
  opacity: .82;
  background: linear-gradient(94deg, transparent 6%, rgba(255,255,255,.32) 24%, color-mix(in srgb, var(--curtain-color) 42%, transparent) 55%, rgba(255,255,255,.58) 76%, transparent 97%);
  animation: curtainSwayFront 7.5s ease-in-out infinite alternate;
}

.season-curtain__line {
  z-index: 2;
  top: -4%;
  bottom: -4%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.92) 24%, color-mix(in srgb, var(--curtain-color) 52%, white) 50%, rgba(255,255,255,.86) 78%, transparent);
  box-shadow: 0 0 12px rgba(255,255,255,.48);
}

.season-curtain__line--one {
  left: 56%;
  animation: curtainLineOne 9s ease-in-out infinite alternate;
}

.season-curtain__line--two {
  left: 76%;
  opacity: .6;
  animation: curtainLineTwo 11s ease-in-out infinite alternate;
}

.season-curtain__beam {
  z-index: 2;
  top: 11%;
  left: 34%;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), var(--curtain-color), rgba(255,255,255,.92), transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--curtain-color) 48%, transparent);
  transform: translateY(calc(var(--curtain-progress) * 420px));
  transition: transform 820ms var(--ease-out);
}

.season-curtain__current {
  position: absolute;
  z-index: 4;
  left: 17%;
  bottom: 14%;
  display: grid;
  gap: 5px;
  color: #30332e;
}

.season-curtain__index,
.season-curtain__hex {
  color: var(--season-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
}

.season-curtain__term {
  margin-top: 5px;
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 68px);
  line-height: .9;
}

.season-curtain__color {
  color: color-mix(in srgb, var(--curtain-color) 80%, #30332e);
  font-size: 14px;
  letter-spacing: .14em;
}

@keyframes curtainEnter {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes curtainSwayBack {
  from { transform: translateX(-8%) skewX(-3deg) scaleX(.94); }
  to { transform: translateX(6%) skewX(3deg) scaleX(1.06); }
}

@keyframes curtainSwayMiddle {
  from { transform: translateX(5%) skewX(3deg) scaleX(1.03); }
  to { transform: translateX(-7%) skewX(-3deg) scaleX(.95); }
}

@keyframes curtainSwayFront {
  from { transform: translateX(-5%) skewX(-2deg) scaleX(.97); }
  to { transform: translateX(8%) skewX(3deg) scaleX(1.05); }
}

@keyframes curtainLineOne {
  from { transform: translateX(-12px) skewX(-2deg); opacity: .36; }
  to { transform: translateX(18px) skewX(3deg); opacity: .9; }
}

@keyframes curtainLineTwo {
  from { transform: translateX(16px) skewX(3deg); opacity: .28; }
  to { transform: translateX(-18px) skewX(-2deg); opacity: .76; }
}

.four-seasons-overview {
  position: relative;
  min-height: 110vh;
  padding: 160px 5vw 200px;
}

.season-word-list {
  display: grid;
  gap: 32px;
  width: min(90vw, 1220px);
  margin: 90px auto 0;
}

.season-word {
  --season-word-color: #a8b78c;
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(220px, .45fr);
  gap: 7vw;
  align-items: center;
  min-height: 220px;
  padding-block: 18px;
  color: var(--season-text);
  text-align: left;
  transition: transform 420ms var(--ease-out);
}

.season-word:nth-child(even) {
  margin-left: min(18vw, 220px);
}

.season-word::before {
  content: "";
  position: absolute;
  inset: -12px -4vw;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(ellipse 46% 70% at 18% 50%, color-mix(in srgb, var(--season-word-color) 30%, transparent), transparent 72%);
  transition: opacity 420ms var(--ease-out);
}

.season-word:hover,
.season-word:focus-visible {
  transform: scale(1.04);
}

.season-word:hover::before,
.season-word:focus-visible::before {
  opacity: 1;
}

.season-word b {
  font-family: var(--serif);
  font-size: clamp(118px, 15vw, 220px);
  font-weight: 500;
  line-height: 0.9;
  color: color-mix(in srgb, var(--season-word-color) 76%, var(--season-text));
}

.season-word small {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.28em;
}

.season-word p {
  max-width: 340px;
  color: var(--season-muted);
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.6;
}

.season-word ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 10px 22px;
  color: var(--season-muted);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.season-word:hover ol,
.season-word:focus-visible ol {
  opacity: 1;
  transform: translateX(0);
}

.solar-timeline-section {
  position: relative;
  padding: 130px 5vw 80px;
}

.timeline-intro {
  width: min(90vw, 1220px);
  margin-inline: auto;
}

.curation-note {
  max-width: 620px;
  margin-top: 26px;
  color: var(--season-muted);
  font-size: 13px;
  line-height: 2;
}

.solar-timeline {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 440px;
  bottom: 120px;
  width: 1px;
  background: var(--season-line);
  transform: translateX(-50%);
}

.solar-timeline__progress {
  display: block;
  width: 1px;
  height: calc(var(--timeline-progress, 0) * 100%);
  background: var(--season-accent);
  transition: background-color 260ms linear;
}

.solar-terms {
  position: relative;
  width: min(90vw, 1220px);
  margin: 90px auto 0;
}

.solar-term {
  --term-color: #a8b78c;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 74vh;
  align-items: center;
  margin-block: 0;
  overflow: hidden;
  padding: clamp(38px, 5vw, 72px);
  scroll-margin-top: 110px;
  isolation: isolate;
}

.solar-term + .solar-term {
  margin-top: 0;
}

.solar-term.is-active {
  z-index: 4;
}

.solar-term::before {
  content: attr(data-season-mark);
  position: absolute;
  left: var(--mark-left, 0);
  top: -7vh;
  z-index: 2;
  color: var(--term-color);
  font-family: var(--serif);
  font-size: clamp(160px, 24vw, 360px);
  line-height: 0.8;
  opacity: 0;
  pointer-events: none;
  transform: translateY(80px);
  transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out);
}

.solar-term__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--term-color);
}

.solar-term__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .78;
  filter: saturate(.78) contrast(.92) brightness(.78);
  transform: scale(1.055);
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out), opacity 900ms var(--ease-out);
}

.solar-term::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244, 240, 232, .86) 0%, rgba(244, 240, 232, .68) 32%, rgba(244, 240, 232, .18) 58%, rgba(28, 29, 27, .22) 100%),
    radial-gradient(ellipse 78% 86% at 50% 50%, rgba(28, 29, 27, .08), rgba(28, 29, 27, .34));
}

.solar-term:nth-child(even)::after,
.solar-term.term-side-right::after {
  background:
    linear-gradient(270deg, rgba(244, 240, 232, .86) 0%, rgba(244, 240, 232, .68) 32%, rgba(244, 240, 232, .18) 58%, rgba(28, 29, 27, .22) 100%),
    radial-gradient(ellipse 78% 86% at 50% 50%, rgba(28, 29, 27, .08), rgba(28, 29, 27, .34));
}

.solar-term.term-side-left::after {
  background:
    linear-gradient(90deg, rgba(244, 240, 232, .86) 0%, rgba(244, 240, 232, .68) 32%, rgba(244, 240, 232, .18) 58%, rgba(28, 29, 27, .22) 100%),
    radial-gradient(ellipse 78% 86% at 50% 50%, rgba(28, 29, 27, .08), rgba(28, 29, 27, .34));
}

.solar-term.is-active .solar-term__background img {
  opacity: 1;
  filter: saturate(.94) contrast(1) brightness(.84);
  transform: scale(1);
}

.solar-term[data-term-id="dongzhi"]::after,
.solar-term[data-term-id="xiaohan"]::after,
.solar-term[data-term-id="dahan"]::after {
  background:
    linear-gradient(90deg, rgba(32, 35, 34, .82) 0%, rgba(32, 35, 34, .58) 36%, rgba(32, 35, 34, .18) 62%, rgba(32, 35, 34, .42) 100%),
    radial-gradient(ellipse 82% 88% at 50% 50%, rgba(238, 233, 221, .05), rgba(0, 0, 0, .34));
}

.solar-term[data-term-id="dongzhi"]:nth-child(even)::after,
.solar-term[data-term-id="xiaohan"]:nth-child(even)::after,
.solar-term[data-term-id="dahan"]:nth-child(even)::after,
.solar-term[data-term-id="dongzhi"].term-side-right::after,
.solar-term[data-term-id="xiaohan"].term-side-right::after,
.solar-term[data-term-id="dahan"].term-side-right::after {
  background:
    linear-gradient(270deg, rgba(32, 35, 34, .82) 0%, rgba(32, 35, 34, .58) 36%, rgba(32, 35, 34, .18) 62%, rgba(32, 35, 34, .42) 100%),
    radial-gradient(ellipse 82% 88% at 50% 50%, rgba(238, 233, 221, .05), rgba(0, 0, 0, .34));
}

.solar-term.is-season-start::before {
  opacity: 0.06;
}

.solar-term.is-active::before {
  transform: translateY(-20px);
}

.solar-term:nth-child(odd) .solar-term__content {
  grid-column: 1;
  justify-self: start;
}

.solar-term:nth-child(even) .solar-term__content,
.solar-term.term-side-right .solar-term__content {
  grid-column: 2;
  justify-self: end;
}

.solar-term.term-side-left .solar-term__content {
  grid-column: 1;
  justify-self: start;
}

.solar-term__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--term-color);
  transform: translate(-50%, -50%) scale(.58);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.solar-term.is-active .solar-term__marker {
  box-shadow: 0 0 0 15px color-mix(in srgb, var(--term-color) 20%, transparent);
  transform: translate(-50%, -50%) scale(1);
}

.solar-term__content {
  position: relative;
  z-index: 6;
  width: min(42vw, 540px);
  opacity: 0.16;
  transform: translateY(34px) scale(.9);
  transform-origin: center left;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out), filter 620ms var(--ease-out);
  filter: blur(2px);
}

.solar-term[data-term-id="dongzhi"] .solar-term__content,
.solar-term[data-term-id="xiaohan"] .solar-term__content,
.solar-term[data-term-id="dahan"] .solar-term__content {
  color: #eee9dd;
}

.solar-term[data-term-id="dongzhi"] .solar-term__index,
.solar-term[data-term-id="xiaohan"] .solar-term__index,
.solar-term[data-term-id="dahan"] .solar-term__index,
.solar-term[data-term-id="dongzhi"] .solar-term__english,
.solar-term[data-term-id="xiaohan"] .solar-term__english,
.solar-term[data-term-id="dahan"] .solar-term__english,
.solar-term[data-term-id="dongzhi"] .solar-term__description,
.solar-term[data-term-id="xiaohan"] .solar-term__description,
.solar-term[data-term-id="dahan"] .solar-term__description,
.solar-term[data-term-id="dongzhi"] .solar-term__color span,
.solar-term[data-term-id="xiaohan"] .solar-term__color span,
.solar-term[data-term-id="dahan"] .solar-term__color span,
.solar-term[data-term-id="dongzhi"] .solar-term__color small,
.solar-term[data-term-id="xiaohan"] .solar-term__color small,
.solar-term[data-term-id="dahan"] .solar-term__color small,
.solar-term[data-term-id="dongzhi"] .solar-term__keywords span,
.solar-term[data-term-id="xiaohan"] .solar-term__keywords span,
.solar-term[data-term-id="dahan"] .solar-term__keywords span {
  color: rgba(238, 233, 221, .74);
}

.solar-term.is-visible .solar-term__content {
  transform: translateY(10px) scale(.96);
  opacity: .42;
  filter: blur(.8px);
}

.solar-term.is-active .solar-term__content {
  opacity: 1;
  z-index: 12;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.solar-term__index {
  color: var(--season-muted);
  font-size: 13px;
  letter-spacing: 0.22em;
}

.solar-term h3 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(60px, 7vw, 106px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.06em;
}

.solar-term__english {
  display: block;
  margin-top: 12px;
  color: var(--season-muted);
  font-size: 11px;
  letter-spacing: 0.24em;
}

.solar-term__color {
  display: grid;
  gap: 10px;
  width: 130px;
  margin-top: 34px;
}

.solar-swatch-button {
  display: block;
  width: 130px;
  height: 72px;
  background: var(--term-color);
  transform: scaleX(.18) scaleY(.72);
  transform-origin: left center;
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out);
}

.solar-term.is-active .solar-swatch-button {
  transform: scaleX(1) scaleY(1);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--term-color) 18%, transparent);
}

.solar-swatch-button:hover,
.solar-swatch-button:focus-visible {
  transform: translateY(-2px) scaleX(1) scaleY(1.22);
}

.solar-term__color span,
.solar-term__color small {
  color: var(--season-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.solar-term__color small {
  display: block;
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

.solar-term__color:hover small,
.solar-term__color:focus-within small {
  opacity: 1;
}

.solar-term__phenology {
  margin-top: 30px;
  color: var(--season-text);
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.7;
}

.solar-term__description {
  max-width: 500px;
  margin-top: 16px;
  color: var(--season-muted);
  font-size: 16px;
  line-height: 2;
}

.solar-term__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.solar-term__keywords span {
  min-height: 32px;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--term-color) 42%, transparent);
  color: var(--season-muted);
  font-size: 12px;
}

.solar-term__emphasis {
  display: block;
  margin-top: 24px;
  color: color-mix(in srgb, var(--term-color) 72%, var(--season-text));
  font-family: var(--serif);
  font-size: 20px;
}

.sticky-season,
.sticky-term {
  position: sticky;
  z-index: 6;
  color: var(--season-text);
  pointer-events: none;
}

.sticky-season {
  top: 118px;
  left: 5vw;
  width: 120px;
  margin-left: 0;
}

.sticky-season b {
  display: block;
  font-family: var(--serif);
  font-size: 76px;
  font-weight: 500;
  line-height: .9;
}

.sticky-season span {
  color: var(--season-muted);
  font-size: 11px;
  letter-spacing: .22em;
}

.sticky-term {
  top: 112px;
  display: grid;
  justify-items: end;
  gap: 3px;
  width: min(90vw, 1220px);
  margin: -84px auto 0;
  text-align: right;
}

.sticky-term span,
.sticky-term small {
  color: var(--season-muted);
  font-size: 11px;
  letter-spacing: .18em;
}

.sticky-term b {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
}

.solar-side-nav {
  position: fixed;
  z-index: 86;
  right: 30px;
  top: 50%;
  display: grid;
  gap: 3px;
  width: 34px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 240ms var(--ease-out);
}

.solar-side-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.solar-side-nav button {
  position: relative;
  width: 34px;
  height: 10px;
}

.solar-side-nav button::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--season-muted);
  transform: translateY(-50%) scaleX(.38);
  transform-origin: right center;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}

.solar-side-nav button.is-active::before,
.solar-side-nav button:hover::before,
.solar-side-nav button:focus-visible::before {
  background: var(--term-color);
  transform: translateY(-50%) scaleX(1);
}

.solar-side-nav button span {
  position: absolute;
  right: 34px;
  top: 50%;
  width: max-content;
  color: var(--season-text);
  font-size: 12px;
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.solar-side-nav button:hover span,
.solar-side-nav button:focus-visible span,
.solar-side-nav button.is-active span {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.solar-color-spectrum,
.seasons-closing,
.next-archive {
  position: relative;
  padding: 150px 5vw;
}

.solar-color-spectrum {
  min-height: 92vh;
  color: var(--warm-white);
  margin-top: -1px;
  background:
    radial-gradient(ellipse 62% 34% at 18% 32%, rgba(168, 183, 140, .18), transparent 68%),
    radial-gradient(ellipse 48% 32% at 78% 62%, rgba(182, 83, 67, .13), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--season-bg) 86%, #4f544d) 0%, rgba(79,84,77,.96) 18%, #424941 63%, color-mix(in srgb, var(--season-bg) 48%, #4f544d) 100%);
  overflow: hidden;
}

.solar-color-spectrum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .11;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / 10vw 100%,
    linear-gradient(0deg, currentColor 1px, transparent 1px) 0 0 / 100% 96px;
}

.solar-color-spectrum::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 30%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--season-bg) 62%, transparent)),
    radial-gradient(ellipse 72% 48% at 50% 100%, color-mix(in srgb, var(--season-accent) 14%, transparent), transparent 72%);
}

.solar-color-spectrum .section-title {
  position: relative;
  z-index: 1;
  width: min(90vw, 1320px);
  margin-inline: auto;
}

.solar-color-spectrum .section-title__index,
.solar-color-spectrum .section-title p {
  color: rgba(238, 233, 221, .58);
}

.spectrum-wall {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(90vw, 1320px);
  height: clamp(460px, 44vw, 560px);
  margin: 38px auto 0;
  overflow: hidden;
  border: 1px solid rgba(238, 233, 221, .2);
  background:
    linear-gradient(180deg, rgba(238, 233, 221, .08), rgba(238, 233, 221, .035));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 36px 120px rgba(12, 14, 13, .3);
  isolation: isolate;
}

.spectrum-wall::before,
.spectrum-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.spectrum-wall::before {
  background:
    linear-gradient(180deg, rgba(238, 233, 221, .28), transparent 28%, transparent 70%, rgba(0, 0, 0, .22)),
    radial-gradient(ellipse 80% 90% at 50% 100%, rgba(0, 0, 0, .2), transparent 64%);
  mix-blend-mode: soft-light;
}

.spectrum-wall::after {
  inset: 18px;
  border: 1px solid rgba(238, 233, 221, .2);
  opacity: .74;
}

.spectrum-wall button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  color: var(--spectrum-ink);
  background: var(--term-color);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.13),
    inset -1px 0 rgba(0,0,0,.12),
    inset 0 -90px 90px rgba(28, 29, 27, .16);
  transform: translateY(0);
  transition:
    filter 420ms var(--ease-out),
    transform 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}

.spectrum-wall button::before,
.spectrum-wall button::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.spectrum-wall button::before {
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 36%),
    radial-gradient(ellipse 70% 54% at 50% 28%, color-mix(in srgb, var(--term-color) 56%, rgba(255,255,255,.38)), transparent 72%);
  transform: translateY(22%);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}

.spectrum-wall button::after {
  left: 50%;
  bottom: 94px;
  z-index: 3;
  width: 1px;
  height: 42px;
  background: color-mix(in srgb, var(--spectrum-ink) 38%, transparent);
  opacity: .34;
  transform: translateX(-50%) scaleY(.58);
  transform-origin: bottom;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}

.spectrum-wall:hover button {
  filter: saturate(.78) brightness(.92);
}

.spectrum-wall button:hover,
.spectrum-wall button:focus-visible {
  z-index: 5;
  filter: saturate(1.08) brightness(1.08);
  transform: translateY(-18px);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.2),
    inset -1px 0 rgba(0,0,0,.12),
    inset 0 -120px 110px rgba(28, 29, 27, .04),
    0 28px 54px color-mix(in srgb, var(--term-color) 30%, rgba(12, 14, 13, .36));
}

.spectrum-wall button:hover::before,
.spectrum-wall button:focus-visible::before {
  opacity: .86;
  transform: translateY(0);
}

.spectrum-wall button:hover::after,
.spectrum-wall button:focus-visible::after {
  opacity: .82;
  transform: translateX(-50%) scaleY(1);
}

.spectrum-wall__index {
  position: absolute;
  left: 50%;
  bottom: 122px;
  z-index: 3;
  display: block;
  min-width: 2ch;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .12em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .82;
  text-align: center;
  transform: translateX(-50%);
  text-shadow: 0 1px 18px rgba(0,0,0,.22);
}

.spectrum-wall__detail {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 4;
  display: grid;
  gap: 5px;
  width: max-content;
  max-width: 132px;
  padding: 12px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--spectrum-ink) 24%, transparent);
  background: color-mix(in srgb, var(--term-color) 76%, rgba(28, 29, 27, .26));
  box-shadow: 0 14px 34px rgba(12, 14, 13, .16);
  opacity: 0;
  text-align: left;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.spectrum-wall b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .08em;
}

.spectrum-wall small {
  font-size: 11px;
  letter-spacing: .08em;
}

.spectrum-wall button:hover b,
.spectrum-wall button:hover small,
.spectrum-wall button:focus-visible b,
.spectrum-wall button:focus-visible small {
  opacity: 1;
}

.spectrum-wall button:hover .spectrum-wall__detail,
.spectrum-wall button:focus-visible .spectrum-wall__detail {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

.seasons-closing {
  display: grid;
  grid-template-columns: minmax(500px, .52fr) minmax(340px, .48fr);
  gap: 4vw;
  align-items: center;
  min-height: 90vh;
  background:
    radial-gradient(circle at 25% 50%, color-mix(in srgb, var(--season-accent) 12%, transparent), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 44%),
    var(--season-bg);
}

.year-ring {
  --ring-radius: min(23vw, 282px);
  position: relative;
  width: min(50vw, 620px);
  min-width: 460px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--season-accent) 22%, var(--season-line));
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 28%, transparent 29%),
    radial-gradient(circle, color-mix(in srgb, var(--season-accent) 12%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 34px 100px rgba(28, 29, 27, .08);
  animation: yearRingRotate 26s linear infinite;
}

.year-ring::before,
.year-ring::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  pointer-events: none;
}

.year-ring::before {
  border: 1px solid color-mix(in srgb, var(--season-accent) 18%, transparent);
}

.year-ring::after {
  inset: 27%;
  border: 1px solid color-mix(in srgb, var(--season-text) 12%, transparent);
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%);
}

.year-ring i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--term-color);
  opacity: .72;
  transform: rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)) translate(-50%, -50%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--term-color) 15%, transparent),
    0 10px 24px rgba(28, 29, 27, .12);
  transition: opacity 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.year-ring.is-visible i {
  animation: ringDot 1200ms var(--ease-out) both;
  animation-delay: calc(var(--dot-index) * 42ms);
}

.year-ring.is-visible i:first-child {
  box-shadow:
    0 0 0 7px rgba(168, 183, 140, .18),
    0 16px 34px rgba(28, 29, 27, .14);
}

.seasons-closing__copy h2 {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 500;
  line-height: 1.35;
}

.seasons-closing__copy p {
  max-width: 620px;
  margin-top: 28px;
  color: var(--season-muted);
  font-size: 18px;
  line-height: 2;
}

.next-archive {
  min-height: 74vh;
  background:
    linear-gradient(90deg, rgba(28,29,27,.035) 1px, transparent 1px) 0 0 / 9vw 100%,
    linear-gradient(0deg, rgba(28,29,27,.03) 1px, transparent 1px) 0 0 / 100% 88px,
    #d8d4c9;
}

.next-archive a {
  display: grid;
  align-content: end;
  width: min(90vw, 860px);
  min-height: 420px;
  margin-inline: auto;
  color: #24231f;
}

.next-archive span,
.next-archive small {
  color: rgba(36, 35, 31, .62);
  font-size: 12px;
  letter-spacing: .2em;
}

.next-archive h2 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(60px, 8vw, 118px);
  font-weight: 500;
  line-height: 1;
}

.next-archive p {
  max-width: 520px;
  margin-top: 28px;
  color: rgba(36, 35, 31, .72);
  font-size: 17px;
}

.next-archive b {
  margin-top: 34px;
  font-weight: 400;
  letter-spacing: .12em;
}

.solar-color-drawer,
.solar-drawer-backdrop {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.solar-drawer-backdrop {
  inset: 0;
  z-index: 180;
  background: rgba(28, 29, 27, 0.46);
}

.solar-color-drawer {
  z-index: 181;
  right: 4vw;
  top: 12vh;
  display: grid;
  grid-template-columns: 120px minmax(240px, 1fr);
  gap: 24px;
  width: min(86vw, 560px);
  max-height: 76vh;
  overflow-y: auto;
  padding: 24px;
  background: #f3eee5;
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(28, 29, 27, .18);
  transform: translateY(14px);
  transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out);
}

.solar-color-drawer.is-open,
.solar-color-drawer.is-open + .solar-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.solar-color-drawer.is-open {
  transform: translateY(0);
}

.solar-drawer-close {
  position: absolute;
  right: 18px;
  top: 12px;
  min-height: 44px;
  padding-inline: 10px;
  letter-spacing: .12em;
}

.solar-drawer-swatch {
  min-height: 280px;
  background: var(--drawer-color, #a8b78c);
}

.solar-drawer-content {
  display: grid;
  align-content: end;
  gap: 14px;
  padding-top: 42px;
}

.solar-drawer-content h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
}

.solar-drawer-content p {
  color: var(--ink-soft);
}

.solar-drawer-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.solar-drawer-values button {
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid rgba(28,29,27,.18);
}

@keyframes axisGrow {
  to { transform: scaleY(1); }
}

@keyframes riverEnter {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(60px, 20px, 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes riverFlow {
  0% { transform: translate3d(-3%, -1.5%, 0) rotate(-2deg) scale(1); }
  100% { transform: translate3d(4%, 2.5%, 0) rotate(2deg) scale(1.035); }
}

@keyframes riverShimmer {
  0% { transform: translateX(-24%); opacity: .2; }
  48% { opacity: .72; }
  100% { transform: translateX(30%); opacity: .18; }
}

@keyframes riverMist {
  0% { transform: translate3d(-2%, 1%, 0) scale(1); opacity: .46; }
  100% { transform: translate3d(4%, -2%, 0) scale(1.08); opacity: .72; }
}

@keyframes riverLabelIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sphereDotIn {
  from {
    opacity: 0;
    transform:
      translate3d(calc(var(--sphere-x) * .7px), calc(var(--sphere-y) * .7px), 0)
      translate(-50%, -50%)
      scale(.28);
  }
}

@keyframes ringDot {
  0% { opacity: .2; }
  55% { opacity: 1; }
  100% { opacity: .72; }
}

@keyframes yearRingRotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .seasons-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    padding-right: 5vw;
  }

  .solar-term__content {
    width: min(42vw, 440px);
  }

}

@media (max-width: 768px) {
  .seasons-header .season-status,
  .sticky-season,
  .sticky-term,
  .solar-side-nav {
    display: none;
  }

  .seasons-hero {
    grid-template-columns: 1fr;
    min-height: 860px;
    padding: 106px 5vw 126px;
  }

  .year-axis {
    left: 28px;
  }

  .time-river {
    justify-self: start;
    width: min(108vw, 680px);
    height: 540px;
    margin-top: -48px;
    margin-left: -12vw;
  }

  .time-river__ribbons {
    inset: 0 -30% -4% -30%;
    transform: rotate(-28deg) scale(1.25);
  }

  .time-river__ribbon {
    height: 38%;
  }

  .time-river__current {
    top: 38%;
    left: 39%;
  }

  .season-dial {
    justify-self: center;
    width: min(88vw, 500px);
    margin-top: -18px;
  }

  .season-curtain {
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .season-curtain__beam {
    transform: translateY(calc(var(--curtain-progress) * 300px));
  }

  .four-seasons-overview,
  .solar-timeline-section,
  .solar-color-spectrum,
  .seasons-closing,
  .next-archive {
    padding: 100px 5vw;
  }

  .season-word-list {
    gap: 18px;
    margin-top: 58px;
  }

  .season-word,
  .season-word:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 190px;
    margin-left: 0;
  }

  .season-word ol {
    opacity: 1;
    transform: none;
  }

  .solar-timeline {
    left: 28px;
    top: 360px;
    bottom: 100px;
  }

  .solar-terms {
    width: 100%;
    margin-top: 68px;
  }

  .solar-term {
    display: block;
    min-height: 66vh;
    padding: 42px 22px 42px 72px;
    margin-block: 0;
  }

  .solar-term::after,
  .solar-term:nth-child(even)::after,
  .solar-term.term-side-right::after,
  .solar-term.term-side-left::after {
    background:
      linear-gradient(90deg, rgba(244, 240, 232, .9) 0%, rgba(244, 240, 232, .78) 52%, rgba(28, 29, 27, .22) 100%),
      radial-gradient(ellipse 82% 92% at 50% 50%, rgba(28, 29, 27, .08), rgba(28, 29, 27, .34));
  }

  .solar-term__marker {
    left: 23px;
  }

  .solar-term__content,
  .solar-term:nth-child(n) .solar-term__content {
    width: 100%;
    max-width: none;
  }

  .solar-term h3 {
    font-size: clamp(48px, 16vw, 64px);
  }

  .solar-term::before {
    left: 44px;
    font-size: clamp(130px, 42vw, 210px);
  }

  .spectrum-wall {
    height: 360px;
    overflow-x: auto;
  }

  .spectrum-wall button,
  .spectrum-wall button:hover,
  .spectrum-wall button:focus-visible {
    flex: 0 0 98px;
  }

  .seasons-closing {
    grid-template-columns: 1fr;
  }

  .year-ring {
    width: min(88vw, 460px);
    min-width: 0;
    --ring-radius: min(38vw, 218px);
  }

  .solar-color-drawer {
    inset: auto 0 0;
    grid-template-columns: 1fr;
    width: 100%;
    max-height: 82dvh;
  }

  .solar-drawer-swatch {
    min-height: 160px;
  }
}

@media (max-width: 480px) {
  .seasons-hero h1 {
    font-size: clamp(68px, 23vw, 104px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .year-axis,
  .hall-mark,
  .seasons-hero h1 span,
  .seasons-hero__line,
  .seasons-hero__text,
  .time-river,
  .time-river__mist,
  .time-river__ribbon,
  .time-river__ribbon::after,
  .time-river__current {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .season-dial,
  .season-dial__halo,
  .season-dial__arc,
  .season-dial__needle i {
    animation: none;
  }

  .season-dial {
    opacity: 1;
    transform: none;
  }

  .season-curtain,
  .season-curtain__sheet,
  .season-curtain__line {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .season-curtain__beam {
    transition: none;
  }

  .year-ring,
  .year-ring.is-visible i {
    animation: none;
    opacity: 1;
  }

  .solar-term__content,
  .solar-swatch-button,
  .season-word {
    animation: none;
    transition: none;
  }
}