/* A season in one scroll (assets/season.js). Without script, or with reduced motion,
   the chapter is an ordinary section: heading, the five stages and the closing note. */
.season { --season-p: 0; --season-top: 74px; position: relative; background: #fff; padding-block: clamp(4rem, 8vw, 7rem) 0; }
.season-stage { position: relative; }
.season-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.season-copy h2 { font-size: clamp(2.4rem, 4.3vw, 4.6rem); line-height: 1.04; max-width: 12ch; }
.season-scene { display: none; }

/* The five stages, on a rail that fills with lime as the season advances. */
.season-steps { position: relative; list-style: none; margin: clamp(1.8rem, 3.5vh, 2.8rem) 0 0; padding: 0; display: grid; gap: clamp(.7rem, 1.9vh, 1.2rem); }
.season-steps::before,
.season-steps::after { content: ""; position: absolute; inset-inline-start: .43rem; top: .6rem; bottom: .6rem; width: 2px; background: #dce6d6; }
.season-steps::after { background: #8ac148; bottom: auto; height: calc((100% - 1.2rem) * var(--season-p)); }
.season-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; padding-inline-start: 1.9rem; }
.season-steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: .42rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #c9d8c1; z-index: 1; transition: background-color .3s ease, box-shadow .3s ease, transform .4s var(--brand-ease, ease); }
.season-num { font: 500 .78rem/1.9 "Jost", sans-serif; letter-spacing: .08em; color: #7d8c82; font-variant-numeric: tabular-nums; }
.season-name { font: 600 clamp(1.15rem, 1.6vw, 1.45rem)/1.3 "Outfit", "Jost", sans-serif; letter-spacing: -.01em; color: #0e2216; }
.season-steps p { grid-column: 2; margin: .1rem 0 0; color: #58665d; font-size: .98rem; line-height: 1.45; max-width: 34ch; }
.season-outro { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); display: grid; gap: 1.4rem; justify-items: start; }
.season-outro p { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; color: #0e2216; }

/* With script, the scene draws itself. Still (reduced motion): the grown field, beside the words. */
.season-live .season-scene,
.season-still .season-scene { display: block; }
.season-scene svg { display: block; width: 100%; height: 100%; }
/* The scene is a window cut in the brand's leaf corner. */
.season-live .season-scene,
.season-still .season-scene {
  position: relative; overflow: hidden; isolation: isolate; background: #e2eed6;
  border-radius: 0; border-start-end-radius: clamp(2.2rem, 6vw, 5.5rem); border-end-start-radius: clamp(2.2rem, 6vw, 5.5rem);
  box-shadow: 0 40px 80px -50px rgb(12 58 32 / .55), 0 0 0 1px rgb(12 58 32 / .06);
}
.season-still .season-scene { aspect-ratio: 3 / 4; max-height: 80vh; }
.season-still .season-steps::after { height: calc(100% - 1.2rem); }
.season-still .season-steps li::before { background: #8ac148; box-shadow: none; }

/* Live: the section is a long scroll and the stage holds still inside it. */
.season-live { padding-top: 0; }
.season-live .season-track { height: 400vh; height: 400svh; }
.season-live .season-stage { position: sticky; top: var(--season-top); height: calc(100vh - var(--season-top)); height: calc(100svh - var(--season-top)); display: grid; align-items: center; overflow: clip; }
.season-live .season-grid { height: 100%; grid-template-rows: minmax(0, 1fr); padding-block: clamp(1rem, 3vh, 2.5rem); }
.season-live .season-scene { height: calc(100vh - var(--season-top) - 4rem); height: calc(100svh - var(--season-top) - 4rem); min-height: 0; }
.season-live .season-steps li { transition: opacity .4s ease; }
.season-live .season-steps li:not([aria-current]):not(.is-past) { opacity: .42; }
.season-live .season-steps li.is-past { opacity: .62; }
.season-live .season-steps li.is-past::before { background: #8ac148; box-shadow: none; }
.season-live .season-steps li[aria-current]::before { background: #8ac148; box-shadow: 0 0 0 5px rgb(138 193 72 / .22); transform: scale(1.15); }
.season-live .season-steps li[aria-current] .season-name { color: #0c3a20; }

/* Phones and narrow tablets: heading on top, the plant in the middle, one stage at a time below. */
@media (max-width: 860px) {
  .season-grid { grid-template-columns: 1fr; }
  .season-copy h2 br { display: none; }
  .season-copy h2 { max-width: 16ch; font-size: clamp(2rem, 8vw, 2.8rem); }
  .season-still .season-scene { max-height: 70vh; margin-inline: auto; width: min(100%, 30rem); }
  .season-live .season-grid { grid-template-rows: auto auto auto; align-content: center; gap: .9rem; padding-block: .6rem 1rem; height: calc(100vh - var(--season-top)); height: calc(100svh - var(--season-top)); }
  .season-live .season-scene { height: auto; width: 100%; aspect-ratio: 3 / 4; max-height: calc(100vh - var(--season-top) - 13rem); max-height: calc(100svh - var(--season-top) - 13rem); justify-self: center; }
  .season-live .season-copy { display: contents; }
  .season-live .season-copy h2 { grid-row: 1; }
  .season-live .season-scene { grid-row: 2; }
  /* A row of five stages; the current stage's line shows underneath. */
  .season-live .season-steps { grid-row: 3; position: relative; margin: 0 0 2.6rem; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 .2rem; }
  .season-live .season-steps::before,
  .season-live .season-steps::after { top: .44rem; bottom: auto; inset-inline: 10%; width: auto; height: 2px; }
  .season-live .season-steps::after { inset-inline-end: auto; width: calc(80% * var(--season-p)); }
  .season-live .season-steps li { position: static; display: grid; grid-template-columns: 1fr; justify-items: center; gap: .35rem; padding: 0; }
  .season-live .season-steps li::before { position: relative; inset: auto; top: 0; }
  .season-live .season-num { display: none; }
  .season-live .season-name { font-size: .9rem; text-align: center; }
  .season-live .season-steps p { position: absolute; inset-inline: 0; top: 100%; margin: 0; padding-top: .45rem; max-width: none; text-align: center; font-size: .95rem; opacity: 0; transition: opacity .35s ease; }
  .season-live .season-steps li[aria-current] p { opacity: 1; }
}

[lang="ar"] .season-num { letter-spacing: normal; }
[lang="ar"] .season-name { letter-spacing: normal; }

@media (prefers-reduced-motion: reduce) {
  .season-steps li,
  .season-steps li::before { transition: none; }
}