/* The season wrap-up pages (/season/YEAR/). The site's tokens and fonts come from ../../style.css. */

/* The page runs gutter to gutter like every home section; its seams are the site's section scale
   (main.wrap-main > section outranks style.css's main > section:not(.hero), which used to win here)
   and its end clears the dock by the home page's margin, not a section's. */
.wrap-main { padding: 0 var(--gutter) clamp(16px, 2vw, 24px); }
main.wrap-main > section { padding: var(--sp-section) 0 0; }
.wrap-main > .wrap-head { padding-top: var(--sp-top); }

.wrap-title {
  font-family: var(--display); font-size: clamp(3.2rem, 11vw, 9.5rem); font-weight: 800; font-stretch: 140%;
  line-height: .86; letter-spacing: -0.045em; margin: 0;
}
/* under 360 px the 3.2rem floor runs "Season" to the screen's edge */
@media (max-width: 359px) { .wrap-title { font-size: clamp(2.6rem, 14vw, 3.2rem); } }
.wrap-title [data-w="season"] { color: var(--bulb); text-shadow: 0 0 40px color-mix(in oklab, var(--bulb) 45%, transparent); }
.wrap-dates { font-family: var(--display); font-stretch: 115%; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--frost); margin: .8em 0 0; min-height: 1.6em; }

/* ---- Every night: icicles off a roofline ---- */
.icicles {
  --h: clamp(160px, 26vw, 300px);
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(3px, .7vw, 10px);
  height: var(--h); align-items: start;
  border-top: 3px solid color-mix(in oklab, var(--frost) 55%, transparent);
}
.icicles li {
  position: relative; height: calc(var(--v) * 100%); min-height: 6px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--pixel) 70%, var(--ice)), var(--ice));
  box-shadow: 0 0 calc(6px + var(--v) * 14px) color-mix(in oklab, var(--pixel) 85%, transparent);
  transform-origin: top;
}
.icicles li[data-busiest] {
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bulb) 75%, var(--ice)), #fff);
  box-shadow: 0 0 22px color-mix(in oklab, var(--bulb) 80%, transparent), 0 0 60px color-mix(in oklab, var(--bulb) 40%, transparent);
}
.icicle-ends { display: flex; justify-content: space-between; color: var(--frost); font-size: .9rem; margin-top: 10px; font-variant-numeric: tabular-nums; }
.busiest { margin: 22px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.busiest strong { color: var(--bulb); font-weight: 600; }

/* The one moment of motion: the icicles drop from the roofline once the numbers land. */
@media (prefers-reduced-motion: no-preference) {
  .wrap-ready .icicles li { animation: drip .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 22ms); }
}
@keyframes drip { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- The numbers ---- */
.stats { margin: 0; display: grid; gap: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 72px); grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; }
.stat { display: flex; flex-direction: column-reverse; gap: 4px; }
.stat dt { color: var(--frost); font-weight: 600; }
.stat dd {
  margin: 0; font-family: var(--display); font-weight: 780; font-stretch: 125%; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .95; font-variant-numeric: tabular-nums;
}
.stat--lead { grid-column: 1 / -1; }
.stat--lead dd { font-size: clamp(4rem, 15vw, 11rem); font-stretch: 140%; color: var(--bulb); text-shadow: 0 0 50px color-mix(in oklab, var(--bulb) 35%, transparent); }
.stat--lead dt { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--ice); }
/* Under 360 px the lead number's 4rem floor is wider than the screen ("34,433" is about five of its
   em): there only, it sizes to the room between the gutters. */
@media (max-width: 359px) { .stat--lead dd { font-size: min(4rem, calc((100vw - 2 * var(--gutter)) / 5)); } }
@media (max-width: 719px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Tuned in from ---- */
.from-cols { display: grid; gap: 40px clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 859px) { .from-cols { grid-template-columns: minmax(0, 1fr); } }
.from-h { font-family: var(--text); font-size: 1rem; font-weight: 600; color: var(--frost); margin: 0 0 12px; }
/* the state and country chips are the home page's Tuned In From chips (.tuned-list, style.css) */

/* ---- Most requested (its own name: .req-list is the home page's song pop-out) ---- */
.wrap-req-list { margin: 0; padding: 0 0 0 1.6em; max-width: 46rem; }
.wrap-req-list li { padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--pixel) 20%, transparent); }
.wrap-req-list .t { font-weight: 600; }
.wrap-req-list .a { color: var(--frost); margin-left: .6em; }
.wrap-req-list .n { float: right; color: var(--frost); font-variant-numeric: tabular-nums; }

.wrap-error { margin-top: 48px; color: var(--frost); }