/* ================= Preloader ================= */
/* No intro hold (Hayden, 14 Nov 2026): the curtain never covers the page, with or without JS. */
.preloader { display: none; }

/* ================= Header ================= */
.header__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: max(1.25rem, calc(46 * var(--u)));
}
.nav ul {
  display: flex;
  gap: max(0.75rem, calc(14 * var(--u)));
}
.nav a {
  position: relative;
  display: inline-block;
}
.nav a[aria-current='page']::before {
  content: '';
  position: absolute;
  right: calc(100% + 0.4em);
  top: 50%;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-40%);
}
@media (hover: hover) {
  .nav a { transition: opacity var(--dur-dim) var(--ease-standard); }
  .nav ul:hover a:not(:hover) { opacity: 0.4; }
}

.header__brand {
  margin-top: max(3rem, calc(152.5 * var(--u)));
  align-items: start;
}

.logo {
  grid-column: 1 / 9;
  position: relative;
  z-index: var(--z-logo);
  display: flex;
  align-items: flex-start;
  width: max-content;
  font-size: var(--fs-logo);
  line-height: var(--lh-logo);
  transform-origin: 50% 50%;
  will-change: transform;
}
.logo__mask {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.08em 0.04em 0;
  margin: -0.06em -0.08em -0.04em 0; /* negative tracking would clip the glyph's right edge */
}
.logo__char {
  display: block;
  letter-spacing: -0.07em; /* the logo is tracked tighter than body text (Figma: -7%) */
}
.logo__mask--reg {
  font-size: 0.895em;
  margin-left: 0.026em; /* clear space between Y and ® as in the Figma logo */
  margin-top: calc(-0.06em + 0.0095em); /* top of ® aligned to the cap height as in Figma */
}
.logo__reg { letter-spacing: 0; }

.tagline {
  grid-column: 10 / 13;
  padding-top: calc(4 * var(--u));
}

/* ================= Stage + About ================= */
.intro { margin-top: max(4rem, calc(159.5 * var(--u))); }

.stage {
  grid-template-rows: var(--span-2) var(--span-2) auto;
  row-gap: var(--gutter);
}
.stage__img { width: 100%; }
.stage__img--1 { grid-column: 5 / 8; grid-row: 1 / 3; }
.stage__img--2 { grid-column: 10 / 12; grid-row: 1; }
.stage__img--3 { grid-column: 8 / 10; grid-row: 2; }
.stage__img--4 {
  grid-column: 10 / 13;
  grid-row: 2 / 4;
  height: calc(2 * var(--span-2) + var(--gutter));
  align-self: start;
}

.about {
  grid-column: 1 / 7;
  grid-row: 3;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: max(2.5rem, calc(42.7 * var(--u)));
  margin-top: max(3rem, calc(152.5 * var(--u)));
  scroll-margin-top: 2rem;
}
.about__item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
.about__label { grid-column: 1; }
.about__text { grid-column: 2 / -1; }

/* ================= Stats ================= */
.stats { margin-top: max(5rem, calc(191 * var(--u))); }
.stats__list { row-gap: var(--sp-24); }
.stats__item { grid-column: span 3; }

/* ================= Roster / slider ================= */
.roster { margin-top: max(5rem, calc(191.5 * var(--u))); }
.roster__title { margin-bottom: max(1.25rem, calc(42.5 * var(--u))); }

/* the track runs edge to edge across the viewport; the cards keep their
   grid size and the resting/snap position stays on the page's left margin */
.slider {
  --slider-left: calc(var(--page-left) + var(--margin));
  --card-w: calc((100vw - var(--slider-left)) / var(--cards-visible));
  width: 100vw;
}
.slider__track {
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.slide {
  position: relative;
  left: var(--slider-left);
  flex-shrink: 0;
  width: var(--card-w);
  padding-right: var(--gutter); /* the slider doesn't support CSS gap */
}

.card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}
.card__media {
  display: block;
  aspect-ratio: var(--card-ratio);
  width: 100%;
}
.card__media .reveal-img__inner { overflow: hidden; }
.card__media img {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  max-width: none;
  height: 100%;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.card__name {
  display: block;
  margin-top: max(0.75rem, calc(16 * var(--u)));
}
.card__genres { display: block; margin-top: calc(2 * var(--u)); }
.card:focus-visible { outline-offset: -2px; }
.card.is-flipping .card__media { visibility: hidden; }

/* ================= Genre table ================= */
.genres {
  position: relative;
  margin-top: max(5rem, calc(196 * var(--u)));
}

.dash {
  height: 1.5px;
  background-image: linear-gradient(to right, var(--c-red) 0 55%, transparent 55% 100%);
  background-size: max(10px, calc(15 * var(--u))) 100%;
  background-repeat: repeat-x;
  transform-origin: left center;
}

.genre-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  min-height: calc(156 * var(--u));
}
.genre-row > .dash { grid-column: 1 / -1; }
.genre-row__head {
  grid-column: 1 / 9;
  display: flex;
  align-items: flex-end;
  gap: max(0.5rem, calc(18.5 * var(--u)));
  padding-top: calc(4.2 * var(--u));
}
.genre-row__num {
  flex-shrink: 0;
  font-size: var(--fs-heading-s);
  line-height: var(--lh-heading-s);
  padding-bottom: calc(6.9 * var(--u));
  font-variant-numeric: tabular-nums;
}
.genre-row__title { white-space: nowrap; }
.genre-row__names {
  grid-column: 9 / 13;
  position: relative;
  z-index: 2;
  padding-top: calc(10.5 * var(--u));
}

.genre-name {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: opacity var(--dur-dim) var(--ease-standard);
}
/* the hit area is slightly larger than the glyphs */
.genre-name::after {
  content: '';
  position: absolute;
  inset: -0.22em -0.18em;
}
.genre-sep { transition: opacity var(--dur-dim) var(--ease-standard); }

.genres__table.is-dimmed .genre-name,
.genres__table.is-dimmed .genre-sep { opacity: var(--dim, 0.3); }
.genres__table.is-dimmed[data-dim-scope='row'] .genre-row:not(.is-active) .genre-name,
.genres__table.is-dimmed[data-dim-scope='row'] .genre-row:not(.is-active) .genre-sep { opacity: 1; }
.genres__table.is-dimmed .genre-name.is-active { opacity: 1; }

/* positioned by JS: y follows the cursor height, x follows it slightly */
.genres__hover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(var(--margin) + 225 * var(--u));
  width: calc(320 * var(--u));
  aspect-ratio: 320 / 437;
  pointer-events: none;
  visibility: hidden;
}
.genres__hover.is-on { visibility: visible; }
.hover-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hover-layer__inner {
  position: absolute;
  inset: 0;
}
.hover-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mobile widths: the image sits behind the hovered name (names are z-index 2), 30% larger */
@media (max-width: 767px) {
  .genres__hover {
    left: 0;
    width: calc(320 * var(--u) * 1.3);
  }
}

@media (hover: none), (pointer: coarse) {
  .genres__hover { display: none; }
}

/* ================= Footer ================= */
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  margin-top: max(5rem, calc(195 * var(--u)));
  padding-bottom: max(4rem, calc(197 * var(--u)));
  text-transform: uppercase;
  font-size: max(0.75rem, calc(16 * var(--u)));
}
.footer, .footer * { letter-spacing: -0.03em; }
.footer p:nth-child(2) { text-align: center; }
.footer p:last-child { text-align: right; }
@media (hover: hover) {
  .footer a { transition: opacity var(--dur-dim) var(--ease-standard); }
  .footer a:hover { opacity: 0.5; }
}

/* ================= Tablet portrait ================= */
@media (max-width: 991px) {
  .header__brand { margin-top: 4.5rem; row-gap: 1.5rem; }
  .logo { grid-column: 1 / -1; }
  .tagline { grid-column: 8 / 13; padding-top: 0; }

  .intro { margin-top: 4.5rem; }
  .stage { grid-template-rows: auto auto auto; }
  /* one gutter (12px) between all images: the squares set the row heights and
     the large image stretches across both rows */
  .stage__img--1 { grid-column: 1 / 8; grid-row: 1 / 3; }
  .stage__img--2 { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 1; }
  .stage__img--3 { grid-column: 8 / 13; grid-row: 2; aspect-ratio: 1; }
  .stage__img--4 { grid-column: 6 / 13; grid-row: 3; height: auto; aspect-ratio: 4 / 5; }

  .about {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 5rem;
    row-gap: 3rem;
  }
  .about__label { grid-column: 1 / 3; padding-top: 0.3rem; }
  .about__text { grid-column: 3 / 12; }

  .genre-row { min-height: 0; padding-bottom: 1.5rem; }
  .genre-row__head { grid-column: 1 / -1; gap: 0.75rem; padding-top: 0.9rem; }
  .genre-row__num { padding-bottom: 0.5em; }
  .genre-row__names {
    grid-column: 1 / -1;
    padding-top: 1rem;
    padding-left: calc(var(--span-2) - var(--col) + var(--gutter));
    max-width: 38rem;
  }
}

/* ================= Mobile landscape ================= */
@media (max-width: 767px) {
  .header__bar { padding-top: 1.25rem; }
  .header__brand { margin-top: 3.5rem; }
  .tagline { grid-column: 7 / 13; }

  .stage__img--4 { grid-column: 5 / 13; aspect-ratio: 1; }

  .about { margin-top: 4rem; }
  .about__item { row-gap: 0.75rem; }
  .about__label { grid-column: 1 / -1; }
  .about__text { grid-column: 1 / -1; max-width: 34rem; }

  .footer {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.75rem;
  }
  .footer p:nth-child(2) { text-align: right; }
  .footer p:last-child { grid-column: 1 / -1; text-align: left; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; } /* finger-sized links */
  /* the legal line: its loose " · " text goes (font-size 0), each item keeps its own size and a gap, so no separator is left at a line end */
  .footer p:last-child { font-size: 0; }
  .footer p:last-child a, .footer__who { font-size: max(0.75rem, calc(16 * var(--u))); margin-right: 1.25rem; }
}

/* ================= Mobile portrait ================= */
@media (max-width: 479px) {
  .header__bar { gap: 1rem; }
  .nav ul { gap: 0.75rem; }
  .header__brand { margin-top: 3.5rem; row-gap: 1.25rem; }
  .tagline { grid-column: 1 / -1; }

  .intro { margin-top: 3rem; }
  .stage__img--4 { grid-column: 4 / 13; aspect-ratio: 3 / 4; }

  .about { margin-top: 3.5rem; row-gap: 2.5rem; }

  .stats__item { grid-column: span 6; }

  .genre-row__head { gap: 0.5rem; }
  .genre-row__names { padding-left: 0; }
}
.footer__email { text-transform: none; }