.season-section {
  position: relative;
  padding: clamp(84px, 10vw, 144px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(42, 126, 196, .12), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(216, 162, 63, .1), transparent 32%),
    #0c120e;
}

.season-section__head,
.season-compare,
.season-paths {
  width: min(calc(100% - 40px), 1240px);
  margin-inline: auto;
}

.season-section__head {
  margin-bottom: clamp(34px, 5vw, 62px);
}

.season-section__head h2 {
  max-width: 11ch;
  font-size: clamp(3.2rem, 7.5vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.045em;
}

.season-section__head p {
  max-width: 40ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
}

.season-compare {
  --split: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  border: 1px solid rgba(238, 244, 243, .18);
  border-radius: 24px;
  background: #101713;
  box-shadow: 0 42px 100px -44px rgba(0, 0, 0, .9);
}

.season-compare::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 7;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  pointer-events: none;
}

.season-compare__summer,
.season-compare__winter,
.season-compare__winter img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.season-compare__summer,
.season-compare__winter img {
  object-fit: cover;
  object-position: 54% center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.season-compare__winter {
  z-index: 2;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.season-compare__winter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 12, 20, .14), transparent 68%);
  pointer-events: none;
}

.season-compare__range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.season-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 5;
  width: 64px;
  background: linear-gradient(
    90deg,
    transparent calc(50% - 1.5px),
    rgba(255, 255, 255, .92) calc(50% - 1.5px),
    rgba(255, 255, 255, .92) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.season-compare__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  background: rgba(12, 18, 14, .88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 30px rgba(0, 0, 0, .34);
  transform: translate(-50%, -50%);
}

.season-compare__handle::after {
  content: "‹  ›";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #f0c97e;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
  transform: translate(-46%, -54%);
}

.season-compare__range:focus-visible + .season-compare__handle::before {
  outline: 3px solid #f0c97e;
  outline-offset: 5px;
}

.season-compare__label {
  position: absolute;
  bottom: clamp(18px, 3vw, 38px);
  z-index: 4;
  color: #f5f5ef;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.season-compare__label--winter { left: clamp(18px, 3vw, 38px); }
.season-compare__label--summer { right: clamp(18px, 3vw, 38px); }

.season-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.season-path {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(238, 244, 243, .15);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: 0 22px 50px -38px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.season-path::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, var(--gold2), var(--gold), transparent);
  opacity: .58;
  transition: width .3s ease, opacity .3s ease;
}

.season-path--winter { background-color: rgba(122, 151, 164, .045); }
.season-path--summer { background-color: rgba(230, 177, 94, .035); }

.season-path:hover,
.season-path:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(230, 177, 94, .48);
  background-color: rgba(230, 177, 94, .065);
  box-shadow: 0 30px 64px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(230, 177, 94, .08);
  outline: none;
}

.season-path:hover::before,
.season-path:focus-visible::before { width: 7px; opacity: 1; }

.season-path__eyebrow {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.season-path__title {
  max-width: 24ch;
  margin-top: 10px;
  color: var(--cream);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.45rem, 2.5vw, 2.4rem);
  font-weight: 500;
  line-height: 1.08;
}

.season-path__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: .78em 1.15em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #23180a;
  box-shadow: 0 14px 32px -16px rgba(230, 177, 94, .9), inset 0 0 0 1px rgba(255, 255, 255, .25);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
}

.season-path__arrow {
  font-size: 1.12em;
  line-height: 1;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.season-path:hover .season-path__arrow,
.season-path:focus-visible .season-path__arrow { transform: translateX(4px); }

@media (max-width: 767px) {
  .season-section { padding-block: 76px; }

  .season-section__head,
  .season-compare,
  .season-paths { width: min(calc(100% - 28px), 1240px); }

  .season-section__head h2 {
    max-width: 9ch;
    font-size: clamp(3.25rem, 16vw, 5rem);
  }

  .season-compare {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
  }

  .season-compare::after { border-radius: 16px; }

  .season-compare__summer,
  .season-compare__winter img { object-position: 58% center; }

  .season-compare__handle::before { width: 52px; height: 52px; }
  .season-compare__label { font-size: 1.55rem; }

  .season-paths { grid-template-columns: 1fr; gap: 14px; }
  .season-path { min-height: 170px; padding: 30px 20px; }
}

@media (prefers-reduced-transparency: reduce) {
  .season-compare__handle::before { background: #0c120e; }
}

@media (prefers-reduced-motion: reduce) {
  .season-path,
  .season-path::before,
  .season-path__arrow { transition: none; }
  .season-path:hover,
  .season-path:focus-visible { transform: none; }
}