/* Archivo: temporadas con fotos que se amontonan */

.arch-intro {
  padding: calc(var(--header-h) + 14vh) var(--pad) 10vh;
  border-bottom: 1px solid var(--line);
}
.arch-intro__title { font-size: clamp(64px, 14vw, 260px); line-height: .95; }
.arch-intro__lead { margin-top: 3vh; font-size: clamp(18px, 1.8vw, 28px); color: var(--muted); max-width: 28em; }
.arch-index { margin-top: 9vh; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.arch-index a {
  display: flex; gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 2.4vw, 38px);
  transition: color .35s, padding-left .5s var(--ease);
}
.arch-index a span { color: var(--muted); font-size: .55em; min-width: 3em; }
.arch-index a em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .55em; }
.arch-index:hover a { color: #5d5d5d; }
.arch-index:hover a:hover { color: #fff; padding-left: 14px; }

/* Sin JavaScript: las fotos se ven en fila, una tras otra */
.season { border-bottom: 1px solid var(--line); padding: 10vh var(--pad); }
.season__stage { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 30px; }
.shot { margin: 0; flex: none; width: min(60vw, 320px); aspect-ratio: var(--r, .6667); overflow: hidden; border-radius: 6px; background: #0b0b0c; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.season__kicker, .season__count { color: var(--muted); font-size: 15px; }
.season__title { font-size: clamp(34px, 5.6vw, 100px); line-height: 1; margin: 10px 0 14px; }
.season__note { color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); max-width: 24em; }

/* Con JavaScript: escenario fijo, las fotos suben y se apilan a la izquierda */
.js .season {
  --ph: min(74svh, 56vw * 1.5);
  height: calc((var(--n, 6) + 1) * 70svh);
  padding: 0;
  position: relative;
}
.js .season__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: var(--header-h) var(--pad) var(--pad);
}
.js .season__stage {
  position: relative;
  height: 100%;
  display: block;
  overflow: visible;
  margin: 0;
}
.js .shot {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--ph) * var(--r, .6667)); height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--ph) * var(--r, .6667) / -2);
  transform-origin: 50% 60%;
  will-change: transform, filter;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.js .shot:not(:first-child) { transform: translateY(110vh); }
.js .season__text { align-self: end; padding-bottom: 4vh; }
.js .season__count { margin-top: 3vh; font-size: clamp(16px, 1.5vw, 24px); color: #fff; font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 899px) {
  .js .season { --ph: min(58svh, 70vw * 1.5); }
  .js .season__sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding-top: calc(var(--header-h) + 8px); }
  .js .season__text { grid-row: 1; align-self: start; padding: 0; }
  .js .season__stage { grid-row: 2; }
  .js .season__title { font-size: clamp(30px, 8.5vw, 50px); margin: 4px 0 6px; }
  .js .season__count { margin-top: 0; }
  .js .season__note { display: none; }
  .js .shot { margin-left: calc(var(--ph) * var(--r, .6667) / -2); }
}