/*! RelaxingJazz.com · home.css · the Listening Hub (HOME page builder)
 *
 * Every rule is scoped under .page--home (the router loads the next page's stylesheet a moment before it
 * swaps <main>). Colours come only from rj.css tokens; the few custom properties below are strengths and
 * sizes, set per theme so Night and Day both read well.
 *
 *   1 the stage (hero photo, aura, intro, play button, listeners)
 *   2 the now-playing card (art + glow, text, progress, actions, visualiser, crossfade)
 *   3 just played (rail)
 *   4 the hub row (RJ 20, Song of the Week, news)
 *   5 twenty years on air (the record)
 *   6 listen anywhere
 *   7 what we play + the Saint Lucia clock
 */

.page--home {
  --hub-wide: 1260px;
  /* How strongly the night colour veils the hero photo. Stacked (below 1080 px) the words sit over the
     photo, so a, b and c run top → bottom. Checked by simulating the filter + grade + veil over the real
     hero pixels: every hero text pair passes AA on its worst pixel (see _reports/fix-PA.md). */
  --hub-veil-a: 92%;
  --hub-veil-b: 74%;
  --hub-veil-c: 46%;
  /* Two columns (1080 px and wider): the veil is strong only behind the words, then clears, so the sky and
     Gros Piton read above the now-playing card. */
  --hub-veil-text: 82%;
  --hub-veil-mid: 50%;
  --hub-veil-photo: 16%;
  --hub-photo-filter: saturate(0.72) brightness(0.72) contrast(1.06);
  --hub-grade: 0.58;          /* the colour-grade layer (hue of --bg-raised) */
  --hub-glow: 0.52;           /* the album-art glow behind the cover */
  --hub-aura: 0.16;           /* the wide glow across the stage */
  --hub-now-pad: clamp(1rem, 2.2vw, 1.75rem);
}
:root[data-theme="light"] .page--home {
  /* computed against the real photo: the worst pixel behind the gold eyebrow stays ≥ 4.5:1 */
  --hub-veil-a: 95%;
  --hub-veil-b: 92%;
  --hub-veil-c: 70%;
  --hub-veil-text: 93%;
  --hub-veil-mid: 66%;
  --hub-veil-photo: 30%;
  --hub-photo-filter: saturate(0.8) brightness(1.04) contrast(0.96);
  --hub-grade: 0.5;
  --hub-glow: 0.4;
  --hub-aura: 0.14;
}
@media (min-width: 1080px) {
  /* the photo itself is treated more lightly where it sits beside the words rather than under them */
  .page--home { --hub-photo-filter: saturate(0.86) brightness(0.86); --hub-grade: 0.4; }
  :root[data-theme="light"] .page--home { --hub-photo-filter: saturate(0.9) brightness(1.02); --hub-grade: 0.32; }
}

/* no-JS fallbacks styled as buttons/cards must still hide when JS runs (.btn's display would win otherwise) */
html.js .page--home .no-js-only { display: none; }

/* ============================================================== 1. The stage ======================== */
.page--home .hub-stage {
  position: relative;
  isolation: isolate;
  overflow-x: clip;           /* the aura may spill sideways, never into a page scroll (vertical stays open for the find menu) */
  padding: clamp(var(--space-4), 4.5svh, var(--space-8)) 0 clamp(var(--space-6), 7svh, var(--space-9));
}
/* the sea horizon under the stage */
.page--home .hub-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.32;
}

/* The photo: dimmed, graded into the night colour (Day: into warm sand), faded into the page. */
.page--home .hub-stage__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.page--home .hub-stage__bg picture,
.page--home .hub-stage__photo {
  width: 100%;
  height: 100%;
}
.page--home .hub-stage__photo {
  object-fit: cover;
  object-position: 50% 58%;
  filter: var(--hub-photo-filter);
}
.page--home .hub-stage__bg::before {
  /* colour grade: keeps the photo's light, takes the hue of the night (or the sand) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-raised);
  mix-blend-mode: color;
  opacity: var(--hub-grade);
}
.page--home .hub-stage__bg::after {
  /* the veil. Stacked: the words sit over the photo's busiest part (the foliage), so it is even and firmer. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) var(--hub-veil-b), transparent) 0%, color-mix(in srgb, var(--bg) var(--hub-veil-b), transparent) 30%, color-mix(in srgb, var(--bg) var(--hub-veil-c), transparent) 58%, color-mix(in srgb, var(--bg) var(--hub-veil-a), transparent) 80%, var(--bg) 100%);
}
@media (max-width: 1079px) {
  .page--home .hub-stage__photo { object-position: 50% 70%; }
}
@media (min-width: 1080px) {
  /* Two columns. Gros Piton rises in the open sky between the words and the card, which sits low on the
     sea (see .hub-now below). The photo fills the width, so it is 0.667 × the width tall and the summit sits
     32% down it (0.213 × the width): offset the photo so the summit lands about 3.5-6rem below the top of
     the stage, at any width. clamp() keeps it covering the stage (100% = flush bottom, 0px = flush top). */
  .page--home .hub-stage__photo { object-position: 50% clamp(100%, clamp(3.5rem, 8svh, 6rem) - 21.3vw, 0px); }
  /* The veil is strong only as far as the words reach (--hub-text-edge: the right edge of the text column,
     40% of the stage, or the centred 1260 px column's edge on wide screens), then eases off over ~360 px. */
  .page--home .hub-stage__bg::after {
    --hub-text-edge: max(40%, calc(50% - 148px));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, transparent 14%, transparent 62%, color-mix(in srgb, var(--bg) 80%, transparent) 88%, var(--bg) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--bg) var(--hub-veil-text), transparent) 0%,
        color-mix(in srgb, var(--bg) var(--hub-veil-text), transparent) calc(var(--hub-text-edge) - 40px),
        color-mix(in srgb, var(--bg) var(--hub-veil-mid), transparent) calc(var(--hub-text-edge) + 120px),
        color-mix(in srgb, var(--bg) var(--hub-veil-photo), transparent) calc(var(--hub-text-edge) + 320px),
        color-mix(in srgb, var(--bg) var(--hub-veil-photo), transparent) 100%);
  }
}

/* A wide, soft wash of the album colour behind the card. */
.page--home .hub-stage__aura {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -6%;
  width: min(62vw, 900px);
  aspect-ratio: 1.4;
  border-radius: 50%;
  background-color: var(--glow);
  opacity: var(--hub-aura);
  filter: blur(110px);
  pointer-events: none;
  transition: background-color 1.6s var(--ease);
}
@media (max-width: 1079px) {
  /* stacked: the wash stays behind the card (the lower half) and fades out before the words, so a dark
     or bright album colour can't eat into the hero text's contrast */
  .page--home .hub-stage__aura {
    top: auto;
    bottom: 0;
    right: -20%;
    width: 120vw;
    height: 55%;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
    mask-image: linear-gradient(to bottom, transparent, #000 45%);
  }
}

.page--home .hub-stage__inner {
  width: min(100% - 2 * var(--gutter), var(--hub-wide));
  margin-inline: auto;
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
}
@media (min-width: 1080px) {
  /* The eyebrow starts where every inner page's does (C2), capped on short screens so the card still fits. */
  .page--home .hub-stage { padding-top: min(var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem)), 11svh); }
  .page--home .hub-stage__inner {
    --hub-col-gap: clamp(var(--space-6), 4vw, var(--space-8));
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
    gap: var(--hub-col-gap);
  }
  /* the words at the top left; the card low on the right, leaving the sky above it to the Piton */
  .page--home .hub-intro { align-self: start; }
  .page--home .hub-now { margin-top: clamp(var(--space-7), 30svh - 7.5rem, 14rem); }
  /* "all day, all night." may run into the column gap (the card sits lower), so it stays on one line */
  .page--home .hub-intro__title { margin-right: calc(-1 * var(--hub-col-gap)); }
}

/* ---- intro: eyebrow, the big line, the play button ---- */
.page--home .hub-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
/* two deliberate lines, the second tucked under the first after the gold rule */
.page--home .hub-intro__eyebrow {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 0.8em;
  row-gap: 0.2em;
}
.page--home .hub-intro__eyebrow::before { grid-row: 1; grid-column: 1; }
.page--home .hub-intro__eyebrow > span:not(.visually-hidden) { grid-column: 2; }
.page--home .hub-intro__eyebrow > span:last-child { color: var(--text-2); }
.page--home .hub-intro__title {
  margin-top: var(--space-4);
  /* never smaller than the inner pages' H1 (C2); the markup's non-breaking spaces keep "all day" and
     "all night" whole, and balance evens the two lines */
  font-size: max(var(--page-hero-title, var(--step-6)), clamp(2.35rem, 1.45rem + 3vw, 4.4rem));
  line-height: 1.02;
  text-wrap: balance;
}
.page--home .hub-intro__title em { white-space: nowrap; }
.page--home .hub-intro__lede {
  margin-top: var(--space-4);
  max-width: 34ch;
  color: var(--text-2);
}
.page--home .hub-intro__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: clamp(var(--space-5), 3.5svh, var(--space-7));
}
@media (max-width: 599px) {
  .page--home .hub-intro__lede { font-size: var(--step-0); max-width: none; }
  .page--home .hub-intro__eyebrow { font-size: var(--step--2); letter-spacing: 0.14em; }
}

/* The big play button: a gold disc with words beside it. Wired by rj.js (data-player-action="toggle"). */
.page--home .hub-play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: 6px var(--space-6) 6px 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-2);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.page--home .hub-play:hover { border-color: var(--gold); background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.page--home .hub-play:active { transform: scale(0.985); }
.page--home .hub-play:focus-visible { outline-offset: 4px; }
.page--home .hub-play__disc {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--gold) 80%, transparent);
  transition: background-color var(--dur-1) var(--ease);
}
.page--home .hub-play:hover .hub-play__disc { background: var(--gold-2); }
.page--home .hub-play__disc .icon { width: 30px; height: 30px; }
.page--home .hub-play__disc .play-btn__play { transform: translateX(2px); }
/* connecting: a slow ring turns; playing: the disc breathes a soft halo */
.page--home .hub-play__disc::before,
.page--home .hub-play__disc::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
html[data-player-state="connecting"] .page--home .hub-play__disc::after,
html[data-player-state="reconnecting"] .page--home .hub-play__disc::after {
  opacity: 1;
  border-top-color: var(--gold);
  border-right-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
html[data-player-state="playing"] .page--home .hub-play__disc::before {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-player-state="connecting"] .page--home .hub-play__disc::after,
  html[data-player-state="reconnecting"] .page--home .hub-play__disc::after { animation: hub-spin 1.2s linear infinite; }
  html[data-player-state="playing"] .page--home .hub-play__disc::before { animation: hub-breathe 3.2s var(--ease-in-out) infinite; }
}
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.14); opacity: 0; } }
.page--home .hub-play__text { display: grid; gap: 2px; }
.page--home .hub-play__label {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
}
.page--home .hub-play__sub { color: var(--text-2); font-size: var(--step--1); line-height: 1.3; }
html[data-player-state="error"] .page--home .hub-play__sub { color: var(--danger); }
@media (max-width: 599px) {
  .page--home .hub-play { min-height: 58px; padding-right: var(--space-5); }
  .page--home .hub-play__disc { width: 58px; height: 58px; }
  .page--home .hub-play__disc .icon { width: 26px; height: 26px; }
}

/* "Listening with 329 others right now" */
.page--home .hub-listeners {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
  min-height: 1.4em;
  font-size: var(--step--1);
  line-height: 1.4;
}
/* Reserved from the first paint and revealed once the count is known, so nothing below it moves (CLS). */
.page--home .hub-listeners.is-pending { visibility: hidden; }
.page--home .hub-listeners strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================== 2. The now-playing card ============= */
.page--home .hub-now {
  --art: clamp(7.25rem, 36vw, 12rem);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--art) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto auto;
  grid-template-areas:
    "art head"
    "art text"
    "progress progress"
    "actions actions"
    "viz viz";
  gap: var(--space-3) var(--space-4);
  min-width: 0;
  padding: var(--hub-now-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-solid) 84%, transparent), color-mix(in srgb, var(--bg-sunken) 82%, transparent));
  box-shadow: var(--shadow-3);
}
@media (min-width: 600px) {
  .page--home .hub-now {
    --art: clamp(12rem, 30vw, 15rem);
    grid-template-areas:
      "art head"
      "art text"
      "art progress"
      "art actions"
      "viz viz";
    gap: var(--space-3) clamp(var(--space-5), 2.6vw, var(--space-6));
  }
}
@media (min-width: 1080px) {
  .page--home .hub-now { --art: clamp(13rem, min(22.5vw, 41svh), 21.25rem); }
}
.page--home .hub-now__swap { display: contents; }

/* cover + its glow */
.page--home .hub-now__glow {
  grid-area: art;
  align-self: start;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--glow);
  opacity: var(--hub-glow);
  filter: blur(46px);
  transform: scale(1.18) translateY(4%);
  transition: background-color 1.4s var(--ease);
  pointer-events: none;
}
.page--home .hub-now__art {
  grid-area: art;
  align-self: start;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-3);
}
.page--home .hub-now__art > .art,
.page--home .hub-now__cover-skel {
  position: absolute;
  inset: 0;
  --art-size: 100%;
  width: 100%;
  border-radius: var(--radius-m);
}
.page--home .hub-now__art > .art { transition: opacity 900ms var(--ease); }
.page--home .hub-now__art > .art + .art { background: transparent; }
.page--home .hub-now__art > .art.is-entering { opacity: 0; }
.page--home .hub-now__art .art img { transition-duration: 450ms; }
.page--home .hub-now__art .art__ph { font-size: clamp(1.6rem, 30cqi, 6rem); }

/* head: "Now playing" + On air */
.page--home .hub-now__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.page--home .hub-now__eyebrow { font-size: var(--step--2); letter-spacing: 0.18em; }
.page--home .hub-now__onair { font-size: 0.68rem; }
@media (max-width: 599px) {
  .page--home .hub-now__onair { display: none; }
}

/* title / artist / album */
.page--home .hub-now__text { grid-area: text; align-self: start; min-width: 0; }
.page--home .hub-now__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 0.95rem + 1.5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.page--home .hub-now__artist {
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--step-1);
  line-height: 1.35;
  display: -webkit-box;          /* wrap long credits ("Rick Braun & Brian Culbertson") onto a second line */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.page--home .hub-now__artist a { color: inherit; text-decoration-color: transparent; }
.page--home .hub-now__artist a:hover { color: var(--gold); text-decoration-color: currentColor; }
.page--home .hub-now__album {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--step--1);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.page--home .hub-now__title .skeleton__line { height: 0.9em; width: 86%; }
.page--home .hub-now__artist .skeleton__line { height: 0.8em; width: 52%; margin-top: 0.4em; }
@media (max-width: 599px) {
  .page--home .hub-now__artist { font-size: var(--step-0); }
  .page--home .hub-now__title { -webkit-line-clamp: 3; }
}

/* progress: elapsed / remaining, or "Live" */
.page--home .hub-now__progress { grid-area: progress; align-self: end; min-width: 0; }
.page--home .hub-now__bar { height: 3px; }
.page--home .hub-now__bar.is-reset .progress__bar { transition: none; }
.page--home .hub-now__times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-3);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.page--home .hub-now__time--end { margin-left: auto; }
.page--home .hub-now__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--live);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page--home .hub-now__live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* love + not for me · share · find */
.page--home .hub-now__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
}
.page--home .hub-now__love:empty { display: none; }
.page--home .hub-now__more { display: flex; align-items: center; gap: var(--space-2); }
.page--home .hub-now__find .find-menu__toggle {
  width: auto;
  min-width: 36px;
  height: auto;
  min-height: 36px;
  padding: 0 0.95em;
  gap: 0.45em;
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
}
.page--home .hub-now__find .find-menu__toggle:hover { border-color: var(--gold); }
.page--home .hub-now__find .find-menu__toggle .icon { width: 1.05em; height: 1.05em; }
@media (pointer: coarse) {
  .page--home .hub-now__find .find-menu__toggle { min-height: 44px; }
}

/* the spectrum along the foot of the card, sitting on its own horizon */
.page--home .hub-now__viz {
  grid-area: viz;
  display: block;
  width: calc(100% + 2 * var(--hub-now-pad));
  max-width: none;
  height: clamp(44px, 6.5svh, 64px);
  margin: var(--space-1) calc(-1 * var(--hub-now-pad)) calc(-1 * var(--hub-now-pad));
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}
@media (max-width: 599px) {
  .page--home .hub-now__viz { height: 40px; }
}

/* crossfade on track changes (the cover crossfades on its own layer; the words dip and return) */
.page--home .hub-now__text,
.page--home .hub-now__progress,
.page--home .hub-now__actions {
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.page--home .hub-now.is-swapping .hub-now__text,
.page--home .hub-now.is-swapping .hub-now__progress,
.page--home .hub-now.is-swapping .hub-now__actions {
  opacity: 0;
  transform: translateY(5px);
}
.page--home .hub-now:not(.is-swapping) .hub-now__text { transition-duration: var(--dur-3); }
.page--home .hub-now.is-loading .hub-now__actions { visibility: hidden; }

/* ============================================================== 3. Just played ====================== */
.page--home .hub-recent__tools { display: flex; align-items: center; gap: var(--space-3); }
.page--home .hub-rail__nav { display: flex; gap: var(--space-2); }
.page--home .hub-rail__btn { border: 1px solid var(--border-strong); color: var(--text); }
.page--home .hub-rail__btn:hover { border-color: var(--gold); }
.page--home .hub-rail__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.page--home .hub-rail__btn[aria-disabled="true"]:hover { border-color: var(--border-strong); background: transparent; }
@media (max-width: 719px), (hover: none) {
  .page--home .hub-rail__nav { display: none; }
}

.page--home .hub-rail {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: var(--space-2) 4px var(--space-4);
  margin-inline: -4px;
  border-radius: var(--radius-m);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.page--home .hub-rail:focus-visible { outline-offset: 2px; }
@media (max-width: 719px) {
  .page--home .hub-rail {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    border-radius: 0;
  }
}
.page--home .hub-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(9.25rem, 40vw, 12rem);
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  width: max-content;
  min-width: 100%;
}
.page--home .hub-rail__item { display: flex; min-width: 0; scroll-snap-align: start; }
.page--home .hub-rail__item > .track-card { flex: 1 1 auto; }
.page--home .hub-rail .track-card__foot { margin-top: auto; }
.page--home .hub-rail__item.is-new { animation: hub-arrive var(--dur-3) var(--ease) both; }
@keyframes hub-arrive { from { opacity: 0; transform: translateX(-18px); } }
.page--home .hub-rail .track-card .art { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .page--home .hub-rail .track-card:hover .art { transform: translateY(-3px); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border); }
}
.page--home .hub-rail .track-card__title { font-size: var(--step-0); }
.page--home .hub-rail__skel { display: grid; gap: var(--space-2); align-content: start; }
.page--home .hub-rail__skel .skeleton--art { width: 100%; aspect-ratio: 1; border-radius: var(--radius-m); margin-bottom: var(--space-2); }
.page--home .hub-rail .empty-state { min-width: min(100%, 36rem); }
.page--home .hub-recent__nojs { color: var(--text-2); }

/* ============================================================== 4. The hub row ====================== */
.page--home .hub-week__paused {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 60ch;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  color: var(--text-2);
}
.page--home .hub-week__paused .icon { color: var(--gold); margin-top: 0.15em; }
/* One column on phones; two from 700 px, where the news card takes a full row of its own (its items side by
   side) while the poll is on; three from 1080 px. Without a poll (home.js drops .has-poll), the chart and
   the news simply share the row. Cards keep their own height, so no card is stretched into an empty band. */
.page--home .hub-week__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(var(--space-4), 2.4vw, var(--space-6));
}
@media (min-width: 700px) {
  .page--home .hub-week__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--home .hub-week__grid.has-poll .hub-news { grid-column: 1 / -1; }
  .page--home .hub-week__grid.has-poll .hub-news .hub-card__body { min-height: 8rem; }
  .page--home .hub-week__grid.has-poll .hub-news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
  .page--home .hub-week__grid.has-poll .hub-news__item + .hub-news__item { padding-left: var(--space-5); border-top: 0; border-left: 1px solid var(--border); }
}
@media (min-width: 1080px) {
  .page--home .hub-week__grid.has-poll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--home .hub-week__grid.has-poll .hub-news { grid-column: auto; }
  .page--home .hub-week__grid.has-poll .hub-news .hub-card__body { min-height: 12rem; }
  .page--home .hub-week__grid.has-poll .hub-news__list { grid-template-columns: minmax(0, 1fr); }
  .page--home .hub-week__grid.has-poll .hub-news__item + .hub-news__item { padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }
  /* beside the (taller) poll card the chart rows breathe a little more, and the news shows a fourth item */
  .page--home .hub-week__grid.has-poll .hub-chart__row { padding-block: calc(var(--space-3) + 0.3rem); }
}
/* The fourth headline only shows in the three-card row, where there's room for it. */
.page--home .hub-news__item.hub-news__item--extra { display: none; }
@media (min-width: 1080px) {
  .page--home .hub-week__grid.has-poll .hub-news__item--extra { display: grid; }
}
.page--home .hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  background: linear-gradient(180deg, var(--surface-solid), color-mix(in srgb, var(--surface-solid) 70%, var(--bg-sunken)));
}
.page--home .hub-card__head { display: grid; gap: var(--space-1); }
.page--home .hub-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--gold);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page--home .hub-poll .hub-card__kicker { color: var(--coral); }
.page--home .hub-news .hub-card__kicker { color: var(--lagoon); }
.page--home .hub-card__title { font-size: var(--step-3); margin-top: var(--space-1); }
.page--home .hub-card__meta { color: var(--text-3); font-size: var(--step--1); }
.page--home .hub-card__body { flex: 1 1 auto; min-width: 0; min-height: 12rem; border-top: 1px solid var(--border); }
.page--home .hub-card__body:focus { outline: none; }
.page--home .hub-card__body .skeleton-row { grid-template-columns: 48px minmax(0, 1fr) 2.5rem; padding-inline: 0; }
.page--home .hub-card__body .skeleton-row .skeleton--art { width: 48px; }
.page--home .hub-card__body > .empty-state,
.page--home .hub-card__body > .error-state { margin-top: var(--space-4); padding: var(--space-6) var(--space-4); }
.page--home .hub-card__body > .empty-state .empty-state__msg,
.page--home .hub-card__body > .error-state .error-state__msg { font-size: var(--step-0); }
.page--home .hub-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.page--home .hub-card__note { flex: 1 1 12rem; color: var(--text-3); font-size: var(--step--2); line-height: 1.5; }

/* (a) the RJ 20 top five */
.page--home .hub-chart__list { display: grid; }
.page--home .hub-chart__row {
  display: grid;
  grid-template-columns: 2.1rem 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.page--home .hub-chart__row:last-child { border-bottom: 0; }
.page--home .hub-chart__rank { font-size: var(--step-3); }
.page--home .hub-chart__row .art { --art-size: 48px; }
.page--home .hub-chart__main { display: grid; min-width: 0; line-height: 1.35; }
.page--home .hub-chart__title { overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-chart__row:first-child .hub-chart__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.page--home .hub-chart__artist { overflow: hidden; color: var(--text-2); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-chart__artist a { color: inherit; text-decoration-color: transparent; }
.page--home .hub-chart__artist a:hover { color: var(--gold); text-decoration-color: currentColor; }
.page--home .hub-chart__side { display: grid; justify-items: end; gap: 2px; }
.page--home .hub-chart__loves {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--text-2);
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.page--home .hub-chart__loves .icon { width: 1em; height: 1em; color: var(--love); }
.page--home .hub-chart__warm { margin-top: var(--space-3); color: var(--text-3); font-size: var(--step--1); font-style: italic; }

/* (b) Song of the Week */
.page--home .hub-poll__intro { margin: var(--space-4) 0 var(--space-4); color: var(--text-2); font-size: var(--step--1); line-height: 1.55; }
.page--home .hub-poll__question { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--step-1); }
.page--home .hub-poll__question + .hub-poll__intro { margin-top: var(--space-2); }
.page--home .hub-poll__options { display: grid; gap: var(--space-2); }
.page--home .hub-poll__opt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: 6px var(--space-3) 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-hover) 45%, transparent);
  color: var(--text);
  text-align: left;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.page--home .hub-poll__opt:hover { border-color: var(--coral); background: var(--surface-hover); }
.page--home .hub-poll__opt[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
.page--home .hub-poll__opt.is-busy { opacity: 1; border-color: var(--coral); }
.page--home .hub-poll__opt.is-mine { border-color: color-mix(in srgb, var(--coral) 55%, transparent); }
.page--home .hub-poll__opt .art { --art-size: 48px; border-radius: 6px; }
.page--home .hub-poll__opt-text { display: grid; min-width: 0; line-height: 1.3; }
.page--home .hub-poll__opt-title { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-poll__opt-artist { overflow: hidden; color: var(--text-2); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-poll__cta {
  color: var(--coral);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.page--home .hub-poll__results { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.page--home .hub-poll__result-head { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.page--home .hub-poll__result-name { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.page--home .hub-poll__result-title { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-poll__result-artist { display: block; overflow: hidden; color: var(--text-3); font-size: var(--step--2); text-overflow: ellipsis; white-space: nowrap; }
.page--home .hub-poll__pct { flex: none; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.page--home .hub-poll__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 4px; }
.page--home .hub-poll__bar {
  display: block;
  height: 6px;
  margin-top: var(--space-2);
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-3) 22%, transparent);
}
.page--home .hub-poll__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--text-2) 75%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease);
}
.page--home .hub-poll__results.is-ready .hub-poll__fill { transform: scaleX(var(--v, 0)); }
.page--home .hub-poll__result.is-mine .hub-poll__fill { background: var(--coral); }
.page--home .hub-poll__result.is-winner .hub-poll__fill { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.page--home .hub-poll__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  color: var(--text-3);
  font-size: var(--step--1);
}
.page--home .hub-poll__thanks { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--text); }
.page--home .hub-poll__closes { margin-top: var(--space-3); color: var(--text-3); font-size: var(--step--2); }

/* (c) latest news */
.page--home .hub-news__list { display: grid; }
.page--home .hub-news__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.page--home .hub-news__item + .hub-news__item { border-top: 1px solid var(--border); }
.page--home .hub-news__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--text-3);
  font-size: var(--step--2);
}
.page--home .hub-news__source { color: var(--text-2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.page--home .hub-news__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
}
.page--home .hub-news__link {
  color: var(--text);
  text-decoration-color: transparent;
}
.page--home .hub-news__link:hover { color: var(--gold); text-decoration-color: currentColor; }
.page--home .hub-news__sub { margin-top: 2px; color: var(--text-2); font-size: var(--step--1); }
.page--home .hub-news__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-s);
  object-fit: cover;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ============================================================== 5. Twenty years on air ============== */
.page--home .hub-twenty {
  position: relative;
  margin-block: clamp(var(--space-4), 3vw, var(--space-6));
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 12% 50%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
    var(--bg-sunken);
}
.page--home .hub-twenty::before,
.page--home .hub-twenty::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.5;
}
.page--home .hub-twenty::before { top: 0; }
.page--home .hub-twenty::after { bottom: 0; }
.page--home .hub-twenty__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 860px) {
  .page--home .hub-twenty__inner { grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--space-7), 7vw, var(--space-10)); }
}
.page--home .hub-twenty__copy h2 { margin-top: var(--space-3); font-size: var(--step-5); }
.page--home .hub-twenty__text {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.65;
}
.page--home .hub-twenty__copy h2 + .hub-twenty__text::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.3em;
  font-style: italic;
  line-height: 0.82;
  color: var(--gold);
}
.page--home .hub-twenty__actions { margin-top: var(--space-6); }

/* the record: grooves, a moving sheen, a gold label. It turns, slowly, while the station plays. */
.page--home .hub-record {
  position: relative;
  justify-self: center;
  width: clamp(15rem, 30vw, 20rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--shadow-3);
}
.page--home .hub-record::after {
  /* light on the vinyl (it stays put while the disc turns underneath, like the real thing) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0deg, color-mix(in srgb, var(--text) 9%, transparent) 30deg, transparent 62deg, transparent 180deg, color-mix(in srgb, var(--text) 7%, transparent) 212deg, transparent 245deg);
  pointer-events: none;
}
.page--home .hub-record__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, color-mix(in srgb, var(--text) 10%, transparent) 31.5% 32%, transparent 33%),
    repeating-radial-gradient(circle, color-mix(in srgb, var(--text) 6%, var(--bg)) 0 1px, var(--bg) 1px 3px);
  box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 10px color-mix(in srgb, var(--bg) 70%, transparent);
}
:root[data-theme="light"] .page--home .hub-record__disc {
  background:
    radial-gradient(circle, transparent 0 31%, color-mix(in srgb, var(--text) 18%, transparent) 31.5% 32%, transparent 33%),
    repeating-radial-gradient(circle, color-mix(in srgb, var(--text) 12%, var(--bg-sunken)) 0 1px, var(--bg-sunken) 1px 3px);
}
.page--home .hub-record__label {
  position: absolute;
  inset: 30%;
  container-type: inline-size;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 70%);
  color: var(--on-gold);
  text-align: center;
}
.page--home .hub-record__label::after {
  /* the spindle hole */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-sunken);
  transform: translate(-50%, -50%);
}
.page--home .hub-record__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.3rem);
  font-size: 38cqi;   /* scale with the label itself, so it fits at any record size */
  font-style: italic;
  line-height: 0.9;
  padding-bottom: 0.2em;
}
.page--home .hub-record__arc {
  font-size: clamp(0.5rem, 0.9vw, 0.62rem);
  font-size: 7cqi;
  font-weight: 600;
  letter-spacing: 0.22em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .page--home .hub-record__disc { animation: hub-spin 14s linear infinite; animation-play-state: paused; }
  html[data-playing="true"] .page--home .hub-record__disc { animation-play-state: running; }
}

/* ============================================================== 6. Listen anywhere ================== */
.page--home .hub-listen__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(var(--space-3), 1.6vw, var(--space-4));
}
@media (min-width: 1000px) {
  .page--home .hub-listen__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page--home .hub-listen__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: var(--space-1) var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.page--home .hub-listen__item:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: var(--surface-hover); }
@media (prefers-reduced-motion: no-preference) {
  .page--home .hub-listen__item:hover { transform: translateY(-2px); }
}
.page--home .hub-listen__item:has(.hub-listen__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--home .hub-listen__item > :not(.hub-listen__icon) { grid-column: 2; }
.page--home .hub-listen__icon {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 50%;
  color: var(--gold);
}
.page--home .hub-listen__icon .icon { width: 20px; height: 20px; }
.page--home .hub-listen__name { font-size: var(--step-1); }
.page--home .hub-listen__desc { flex: 1 1 auto; color: var(--text-2); font-size: var(--step--1); line-height: 1.5; }
.page--home .hub-listen__say { color: var(--text); font-family: var(--font-display); font-style: italic; font-size: var(--step-0); line-height: 1.4; }
.page--home .hub-listen__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}
.page--home .hub-listen__link::after {
  /* the whole tile is the link */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.page--home .hub-listen__link:focus-visible { outline: none; }
.page--home .hub-listen__item:hover .hub-listen__link { color: var(--gold-2); text-decoration: underline; }
.page--home .hub-listen__install { position: relative; z-index: 1; margin-top: var(--space-1); }

/* ============================================================== 7. What we play + the clock ======== */
.page--home .hub-what__inner { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  .page--home .hub-what__inner { grid-template-columns: minmax(0, 1.75fr) minmax(17rem, 1fr); align-items: center; gap: clamp(var(--space-7), 6vw, var(--space-9)); }
}
.page--home .hub-what__main h2 { margin-top: var(--space-3); }
.page--home .hub-what__lede { max-width: 58ch; margin-top: var(--space-4); color: var(--text-2); font-size: var(--step-1); font-weight: 400; line-height: 1.6; }
.page--home .hub-what__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.page--home .hub-what__chips .chip { min-height: 40px; color: var(--text); }
.page--home .hub-what__chips .chip:hover { font-style: italic; }
.page--home .hub-what__chips .hub-what__all { color: var(--gold); }
.page--home .hub-what__all .icon { width: 1em; height: 1em; }

.page--home .hub-clock {
  position: relative;
  overflow: hidden;
  padding: 0 var(--space-6) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.page--home .hub-clock__scene {
  --orb-x: 0.5;
  --orb-y: 0.6;
  position: relative;
  height: 8.5rem;
  margin: 0 calc(-1 * var(--space-6)) var(--space-5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lagoon) 16%, var(--surface-solid)), color-mix(in srgb, var(--gold) 20%, var(--surface-solid)));
  transition: background-color var(--dur-3) var(--ease);
}
.page--home .hub-clock[data-phase="sunset"] .hub-clock__scene {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 70%, var(--bg-sunken)), color-mix(in srgb, var(--coral) 28%, var(--surface-solid)));
}
.page--home .hub-clock.is-night .hub-clock__scene {
  background:
    radial-gradient(1px 1px at 18% 24%, var(--text-2), transparent 100%),
    radial-gradient(1px 1px at 37% 52%, var(--text-3), transparent 100%),
    radial-gradient(1.4px 1.4px at 66% 18%, var(--text-2), transparent 100%),
    radial-gradient(1px 1px at 84% 44%, var(--text-3), transparent 100%),
    linear-gradient(180deg, var(--bg-sunken), color-mix(in srgb, var(--bg-raised) 80%, var(--surface-solid)));
}
.page--home .hub-clock__orb {
  position: absolute;
  left: calc(8% + var(--orb-x) * 84%);
  bottom: calc(22% + var(--orb-y) * 60%);
  width: 1.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 26px 8px color-mix(in srgb, var(--gold) 40%, transparent);
  transform: translate(-50%, 50%);
  transition: left 2s var(--ease), bottom 2s var(--ease);
}
.page--home .hub-clock.is-night .hub-clock__orb {
  /* a crescent moon */
  background: transparent;
  box-shadow: inset -0.45rem -0.1rem 0 0 var(--gold-2), 0 0 22px 2px color-mix(in srgb, var(--gold-2) 18%, transparent);
  transform: translate(-50%, 50%) rotate(-18deg);
}
.page--home .hub-clock__pitons { position: absolute; left: 0; right: 0; bottom: 0; color: var(--pitons-ink); }
.page--home .hub-clock__scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.6;
}
.page--home .hub-clock__line { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; color: var(--text-2); }
.page--home .hub-clock__time {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--gold);
  font-size: var(--step-5);
  font-style: italic;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}
.page--home .hub-clock__label { margin-top: var(--space-3); color: var(--text); font-weight: 500; }
.page--home .hub-clock__diff { margin-top: var(--space-1); color: var(--text-3); font-size: var(--step--1); }
.page--home .hub-clock__diff:empty { display: none; }