@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.5;
  }

  img, svg {
    max-inline-size: 100%;
    display: block;
  }

  img {
    block-size: auto;
  }

  input, button, select, textarea {
    font: inherit;
  }

  ul[role="list"], ol[role="list"] {
    padding: 0;
    list-style: none;
  }

  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }
}

@layer tokens {
  :root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --font-base: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --step--1: clamp(.83rem, .79rem + .18vw, .94rem);
    --step-0: clamp(1rem, .95rem + .24vw, 1.13rem);
    --step-1: clamp(1.2rem, 1.12rem + .39vw, 1.41rem);
    --step-2: clamp(1.44rem, 1.31rem + .63vw, 1.76rem);
    --step-3: clamp(1.73rem, 1.53rem + .98vw, 2.2rem);
    --space-3xs: clamp(.25rem, .23rem + .12vw, .31rem);
    --space-2xs: clamp(.5rem, .48rem + .12vw, .56rem);
    --space-xs: clamp(.75rem, .71rem + .18vw, .88rem);
    --space-s: clamp(1rem, .95rem + .24vw, 1.13rem);
    --space-m: clamp(1.5rem, 1.43rem + .37vw, 1.69rem);
    --space-l: clamp(2rem, 1.9rem + .49vw, 2.25rem);
    --space-xl: clamp(3rem, 2.85rem + .73vw, 3.38rem);
    --space-section: clamp(3rem, 6vw, 5rem);
    --pad: clamp(1rem, 4vw, 4rem);
    --wrap: max(var(--pad), (100% - 75rem) / 2);
    --color-ink: #0c0014;
    --color-feature: #24003d;
    --color-ground: #ececec;
    --color-surface: #fff;
    --color-muted: #5f5f5f;
    --color-line: #c9c9c9;
    --color-placeholder: #dcdcdc;
    --color-numeral: #767676;
    --format-bg: #ebe8ee;
    --format-ink: #24003d;
    --jan: #00b8a8;
    --jan-dark: #00857a;
    --feb: #142b8f;
    --feb-dark: #0d1b59;
    --mar: #3b9fdd;
    --mar-dark: #1f7ab2;
    --apr: #44bd32;
    --apr-dark: #308523;
    --may: #eaa809;
    --may-dark: #976c07;
    --jun: #fa6400;
    --jun-dark: #b84900;
    --jul: #ff2400;
    --jul-dark: #cc1b00;
    --aug: #c3327a;
    --aug-dark: #9e2963;
    --sep: #7615a2;
    --sep-dark: #4e0e6c;
    --oct: maroon;
    --oct-dark: #520000;
    --nov: #7b781d;
    --nov-dark: #535113;
    --dec: #00663a;
    --dec-dark: #004225;
  }

  body {
    --page: var(--color-feature);
    --page-bright: var(--color-feature);
  }

  .month--jan {
    --page: var(--jan-dark);
    --page-bright: var(--jan);
  }

  .month--feb {
    --page: var(--feb-dark);
    --page-bright: var(--feb);
  }

  .month--mar {
    --page: var(--mar-dark);
    --page-bright: var(--mar);
  }

  .month--apr {
    --page: var(--apr-dark);
    --page-bright: var(--apr);
  }

  .month--may {
    --page: var(--may-dark);
    --page-bright: var(--may);
  }

  .month--jun {
    --page: var(--jun-dark);
    --page-bright: var(--jun);
  }

  .month--jul {
    --page: var(--jul-dark);
    --page-bright: var(--jul);
  }

  .month--aug {
    --page: var(--aug-dark);
    --page-bright: var(--aug);
  }

  .month--sep {
    --page: var(--sep-dark);
    --page-bright: var(--sep);
  }

  .month--oct {
    --page: var(--oct-dark);
    --page-bright: var(--oct);
  }

  .month--nov {
    --page: var(--nov-dark);
    --page-bright: var(--nov);
  }

  .month--dec {
    --page: var(--dec-dark);
    --page-bright: var(--dec);
  }
}

@layer base {
  body {
    font-family: var(--font-base);
    color: var(--color-ink);
    background: var(--color-ground);
    font-size: 1rem;
    line-height: 1.55;
  }

  h1, h2, h3 {
    text-wrap: balance;
    line-height: 1.15;
  }

  h1 {
    font-size: var(--step-3);
  }

  h2 {
    font-size: var(--step-2);
  }

  h3 {
    font-size: var(--step-1);
  }

  a {
    color: inherit;
    text-underline-offset: .2em;
  }

  button {
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    cursor: pointer;
    background: none;
    border-radius: 0;
    padding: .5em 1em;
    font-weight: 600;
  }

  button:hover {
    background: var(--color-ink);
    color: var(--color-surface);
  }

  :focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--page);
    color: #fff;
  }

  main:focus {
    outline: none;
  }

  summary {
    cursor: pointer;
  }

  [id^="group-"], [id^="year-"] {
    scroll-margin-block-start: var(--space-m);
  }
}

@layer compositions {
  .wrapper {
    padding-inline: var(--wrap);
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .cluster {
    align-items: center;
    gap: var(--gutter, var(--space-xs));
    flex-wrap: wrap;
    display: flex;
  }

  .auto-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 10rem), 100%), 1fr));
    gap: var(--gutter, var(--space-m));
    display: grid;
  }

  .with-sidebar {
    gap: var(--gutter, var(--space-m));
    flex-wrap: wrap;
    display: flex;
  }

  .with-sidebar > :first-child {
    flex-basis: var(--side, 16rem);
    flex-grow: 1;
  }

  .with-sidebar > :last-child {
    flex-grow: 999;
    flex-basis: 0;
    min-inline-size: 55%;
  }
}

@layer blocks {
  body {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    display: grid;
  }

  .skip-link {
    background: var(--color-surface);
    color: var(--color-ink);
    z-index: 10;
    padding: .5rem 1rem;
    position: absolute;
    inset: .5rem auto auto .5rem;
    translate: 0 -300%;
  }

  .skip-link:focus {
    translate: 0;
  }

  .rail {
    background: var(--color-ink);
    block-size: 100vh;
    position: sticky;
    inset-block-start: 0;
  }

  .rail__mark {
    color: #fff;
    justify-content: center;
    block-size: 100%;
    padding-block: 1.5rem;
    text-decoration: none;
    display: flex;
  }

  .rail__mark span {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    rotate: 180deg;
  }

  .page {
    min-inline-size: 0;
  }

  .topbar {
    background: var(--page);
    color: #fff;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 1.6rem 1.1rem;
    display: flex;
  }

  .mainnav {
    font-size: clamp(1rem, .8rem + 1.1vw, 1.25rem);
    font-weight: 600;
    line-height: 1;
  }

  .mainnav ul {
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: clamp(.85rem, 3.2vw, 2rem);
    display: flex;
  }

  .mainnav a {
    padding-block: .5rem;
    text-decoration: none;
    display: inline-block;
  }

  .mainnav a:hover, .mainnav [aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .site-search {
    align-items: stretch;
    gap: .5rem;
    display: flex;
  }

  .site-search__input {
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    inline-size: 15rem;
    min-inline-size: 0;
    color: var(--color-ink);
    border-radius: 0;
    padding: .55rem .75rem;
    line-height: 1;
  }

  .site-search__button {
    color: #fff;
    border-color: #fff;
    padding: .5rem 1.1rem;
    font-size: .95rem;
    line-height: 1;
  }

  .site-search__button:hover {
    color: var(--color-ink);
    background: #fff;
  }

  .topbar :focus-visible, .rail :focus-visible, .colophon :focus-visible {
    outline-color: #fff;
  }

  .colophon {
    background: var(--color-ink);
    color: #c9c9c9;
    text-align: center;
    margin-block-start: clamp(4rem, 8vw, 7rem);
    padding-block: 2.5rem;
    font-size: .85rem;
    line-height: 1.6;
  }

  .colophon__nav {
    color: #fff;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2.2rem;
    margin-block-end: 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    display: flex;
  }

  .colophon__nav a {
    text-decoration: none;
  }

  .colophon__nav a:hover {
    text-decoration: underline;
  }

  .colophon p {
    max-inline-size: 60ch;
    margin-inline: auto;
  }

  .colophon p + p {
    margin-block-start: .5rem;
  }

  .colophon a {
    color: #fff;
  }

  .section {
    padding-block-start: var(--space-section);
  }

  .section__body {
    margin-block-start: 1.4rem;
  }

  .section__more {
    margin-block-start: 1.5rem;
    font-weight: 600;
  }

  .section-title {
    letter-spacing: -.01em;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .label {
    font-variant-numeric: tabular-nums;
    color: var(--page);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .status {
    color: var(--color-muted);
  }

  .small {
    color: var(--color-muted);
    font-size: .85rem;
  }

  .icon {
    fill: currentColor;
    flex: none;
    block-size: 1.15em;
    inline-size: 1.15em;
  }

  @media (width <= 52rem) {
    body {
      grid-template-columns: 1fr;
    }

    .rail {
      block-size: auto;
      position: static;
    }

    .rail__mark {
      padding: .6rem var(--pad);
      justify-content: start;
    }

    .rail__mark span {
      writing-mode: horizontal-tb;
      font-size: 1.4rem;
      rotate: none;
    }

    .topbar {
      row-gap: 1rem;
    }

    .site-search {
      flex-basis: 100%;
      min-inline-size: 0;
    }

    .site-search__input {
      flex: 1;
      inline-size: 0;
    }
  }

  .field {
    isolation: isolate;
    grid-template: "name name"
                   "by by"
                   "img side"
                   "facts side" 1fr
                   / minmax(0, 1fr) minmax(15rem, 21rem);
    column-gap: clamp(1.5rem, 4vw, 4rem);
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    position: relative;
  }

  .field:before {
    content: "";
    block-size: var(--field-h, 62%);
    background: var(--page);
    z-index: -1;
    position: absolute;
    inset: 0 0 auto;
  }

  .field--plain {
    --field-h: 100%;
    grid-template: "name"
                   "by"
                   / minmax(0, 1fr);
    padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
  }

  .field__name {
    color: #fff;
    letter-spacing: -.015em;
    text-wrap: balance;
    grid-area: name;
    font-size: clamp(2.3rem, 6.2vw, 5.8rem);
    font-weight: 800;
    line-height: 1.05;
  }

  .field__by {
    color: #fff;
    grid-area: by;
    margin-block: .6rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .field--plain .field__by {
    margin-block-end: 0;
  }

  .field__img {
    grid-area: img;
    align-self: start;
  }

  .field__name + .field__img {
    margin-block-start: 2rem;
  }

  .field__img--sleeve {
    background: var(--color-surface);
    justify-self: start;
    max-inline-size: 34rem;
    padding: clamp(.6rem, 1.2vw, 1rem);
  }

  .field__img--photo img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 25%;
    inline-size: 100%;
  }

  .field__img figcaption {
    color: var(--color-muted);
    margin-block-start: .5rem;
    font-size: .8rem;
  }

  .artist-tile {
    --tile: #444;
    aspect-ratio: 3 / 2;
    background: var(--tile);
    color: #fff;
    border: 1px solid #0000;
    place-items: center;
    font-size: clamp(4rem, 3rem + 6vw, 8rem);
    font-weight: 800;
    line-height: 1;
    display: grid;
  }

  .artist-tile--jan {
    --tile: var(--jan-dark);
  }

  .artist-tile--feb {
    --tile: var(--feb-dark);
  }

  .artist-tile--mar {
    --tile: var(--mar-dark);
  }

  .artist-tile--apr {
    --tile: var(--apr-dark);
  }

  .artist-tile--may {
    --tile: var(--may-dark);
  }

  .artist-tile--jun {
    --tile: var(--jun-dark);
  }

  .artist-tile--jul {
    --tile: var(--jul-dark);
  }

  .artist-tile--aug {
    --tile: var(--aug-dark);
  }

  .artist-tile--sep {
    --tile: var(--sep-dark);
  }

  .artist-tile--oct {
    --tile: var(--oct-dark);
  }

  .artist-tile--nov {
    --tile: var(--nov-dark);
  }

  .artist-tile--dec {
    --tile: var(--dec-dark);
  }

  .field__side {
    flex-direction: column;
    grid-area: side;
    align-self: start;
    margin-block-start: clamp(1.5rem, 6vw, 5rem);
    display: flex;
  }

  .panel {
    background: var(--color-surface);
    padding: 1.4rem 1.5rem;
  }

  .panel--ink {
    background: var(--color-ink);
    color: #fff;
  }

  .panel--ink :focus-visible {
    outline-color: #fff;
  }

  .panel__title {
    margin-block-end: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .score-list {
    gap: .5rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    display: grid;
  }

  .score-list .playlist-link {
    margin: 0;
    font-size: 1rem;
    display: flex;
  }

  .score-list .playlist-link .icon {
    block-size: 1.75rem;
    inline-size: 1.6em;
  }

  .facts-box {
    grid-area: facts;
    align-self: start;
    margin-block-start: 1.75rem;
    container-type: inline-size;
  }

  .facts {
    border-block: 1px solid var(--color-line);
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: .9rem 1.1rem;
    display: flex;
  }

  .facts > div {
    flex: none;
  }

  .facts > .facts__middle {
    flex: 0 auto;
    min-inline-size: 0;
  }

  .facts > .facts__end {
    margin-inline-start: auto;
  }

  .facts dt {
    margin-block-end: .35rem;
  }

  .facts dd {
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
  }

  @container (width >= 28rem) {
    .facts:has( > .facts__middle + .facts__end) {
      grid-template-columns: 1fr auto 1fr;
      display: grid;
    }

    .facts > .facts__middle {
      justify-self: center;
    }

    .facts > .facts__end {
      justify-self: end;
    }
  }

  @media (width >= 52.01rem) {
    .field:has(.field__end, .field__start) {
      overflow: clip;
    }

    .field:has(.field__end, .field__start):before {
      content: none;
    }

    .field__end, .field__start {
      position: relative;
    }

    .field__end:before, .field__start:before {
      content: "";
      z-index: -1;
      box-shadow: 0 0 0 100vmax var(--page);
      clip-path: inset(-100vmax -100vmax 0);
      position: absolute;
      inset: 0;
    }

    .field__start:before {
      clip-path: inset(-100vmax -100vmax 100%);
    }

    .field__side--below {
      margin-block-start: calc(9.625rem + clamp(1.5rem, 6vw, 5rem));
    }
  }

  @media (width <= 52rem) {
    .field {
      grid-template-rows: none;
      grid-template-columns: 1fr;
      grid-template-areas: "name"
                           "by"
                           "img"
                           "facts"
                           "side";
    }

    .field:before {
      block-size: var(--field-h, 30%);
    }

    .field__side {
      margin-block-start: 1.5rem;
    }
  }

  .card-grid {
    --gap: clamp(1rem, 2.5vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(max(9.5rem, (100% - 3 * var(--gap)) / 4), 100%), 1fr));
    gap: 2.25rem var(--gap);
    display: grid;
  }

  .card {
    background: var(--color-surface);
    flex-direction: column;
    gap: .1rem;
    padding-block-end: .9rem;
    display: flex;
    position: relative;
  }

  .card > :not(.card__cover) {
    margin-inline: .75rem;
  }

  .card__cover {
    border-block-end: 1px solid var(--color-line);
    background: var(--color-placeholder);
    order: -1;
    margin-block-end: .8rem;
  }

  .card__cover img {
    aspect-ratio: 1;
    object-fit: cover;
    inline-size: 100%;
  }

  .card__title {
    overflow-wrap: anywhere;
    letter-spacing: -.005em;
    margin-block-end: .35rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .card__link {
    text-decoration: none;
  }

  .card__link:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .card:hover .card__link {
    text-decoration: underline;
  }

  .card__link:focus-visible {
    outline: none;
  }

  .card:has(.card__link:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
  }

  .card__artist {
    margin-block: -.2rem .35rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .card__meta {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    margin-block-start: auto;
    font-size: .95rem;
  }

  .card .pills {
    margin-block-start: .45rem;
  }

  .pills {
    flex-wrap: wrap;
    gap: .4rem;
    display: flex;
  }

  .pill {
    background: var(--format-bg);
    color: var(--format-ink);
    border: 2px solid #0000;
    align-items: center;
    gap: .4em;
    padding: .4em .75em .4em .6em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
  }

  .pill .icon {
    block-size: 1.25em;
    inline-size: 1.25em;
  }

  .pills--compact {
    gap: .3rem;
  }

  .pills--compact .pill {
    border-width: 1px;
    gap: .3em;
    padding: .15em .45em .15em .35em;
    font-size: .8rem;
  }

  .pills--compact .icon {
    block-size: 1.1em;
    inline-size: 1.1em;
  }

  .facts dd a {
    text-decoration-thickness: 1px;
  }

  .album-styles {
    margin-block-start: .75rem;
    font-size: .95rem;
  }

  .album-styles .label {
    margin-inline-end: .5rem;
  }

  .album-styles ul, .album-styles li {
    display: inline;
  }

  .album-styles li:not(:last-child):after {
    content: ", ";
  }

  .album-body {
    padding-block-start: var(--space-section);
  }

  .bio {
    gap: 1rem;
    font-size: 1.05rem;
    display: grid;
  }

  .bio > * {
    max-inline-size: 42rem;
  }

  .elsewhere__links {
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin-block-start: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
  }

  .versions {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    grid-template-areas: "head label"
                         "panels tabs";
    column-gap: clamp(2rem, 4vw, 4rem);
    display: grid;
  }

  .versions__head {
    grid-area: head;
    margin-block-end: .4rem;
  }

  .versions__label {
    grid-area: label;
    align-self: end;
    margin-block-end: .75rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .version-tabs {
    border-block-start: 1px solid var(--color-line);
    grid-area: tabs;
    align-self: start;
    padding: 0;
    list-style: none;
  }

  .version-tab {
    border-block-end: 1px solid var(--color-line);
    border-inline-start: 4px solid #0000;
    gap: .2rem;
    padding: .85rem 1rem .95rem 1.1rem;
    text-decoration: none;
    display: grid;
  }

  .version-tab__what {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .version-tab__what .icon {
    vertical-align: -.15em;
    block-size: 1.1em;
    inline-size: 1.1em;
    margin-inline-end: .4em;
    display: inline-block;
  }

  .version-tab:hover .version-tab__what {
    text-decoration: underline;
  }

  .version-tab:focus-visible {
    outline-offset: -3px;
  }

  .version-tab[aria-selected="true"] {
    background: var(--color-surface);
    border-inline-start-color: var(--page);
  }

  .version {
    grid-area: panels;
  }

  .version:focus-visible {
    outline-offset: 6px;
  }

  .versions:not(.is-tabs) .version + .version {
    margin-block-start: 3rem;
  }

  .versions:not(.is-tabs) .version > .visually-hidden {
    all: revert;
    font-size: var(--step-1);
  }

  .version__details {
    color: var(--color-muted);
    margin-block-start: .4rem;
    font-size: .9rem;
  }

  .tracklist__heading {
    margin-block: 1.8rem .4rem;
  }

  .tracklist {
    border-block-start: 1px solid var(--color-line);
  }

  .version > .tracklist:first-of-type, .version > .version__details + .tracklist {
    margin-block-start: 1.25rem;
  }

  .track {
    border-block-end: 1px solid var(--color-line);
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 3.5rem;
    align-items: center;
    gap: .5rem 1rem;
    padding-block: .75rem;
    display: grid;
  }

  .track__pos, .track__plays, .track__dur {
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
  }

  .track__pos {
    color: var(--page);
    font-weight: 600;
  }

  .track__plays {
    color: var(--color-muted);
    text-align: end;
  }

  .track__dur {
    text-align: end;
  }

  .track__title {
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: 1.05rem;
    display: flex;
  }

  .track__title .playlist-link {
    margin: 0;
  }

  .track__artists {
    color: var(--color-muted);
    flex-basis: 100%;
    font-size: .9rem;
  }

  @media (width <= 52rem) {
    .versions {
      grid-template-columns: 1fr;
      grid-template-areas: "head"
                           "label"
                           "tabs"
                           "panels";
    }

    .versions__label {
      margin-block: 1.25rem 0;
    }

    .version-tabs {
      margin-block: .75rem 1.5rem;
    }

    .track {
      grid-template-columns: 2.25rem 1fr 3rem;
    }

    .track__plays {
      text-align: start;
      grid-area: 2 / 2;
    }

    .track__plays:empty {
      display: none;
    }
  }

  .sort {
    margin-block-start: 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
  }

  .sort ul {
    --gutter: .5rem 1.75rem;
  }

  .sort a {
    color: #fff;
    padding-block: .25rem;
    text-decoration: none;
    display: inline-block;
  }

  .sort a:hover, .sort [aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .sort :focus-visible {
    outline-color: #fff;
  }

  .listing-body {
    padding-block-start: var(--space-l);
  }

  .listing-body > * + * {
    margin-block-start: var(--space-l);
  }

  .jump ul, .pagination ul {
    --gutter: .3rem;
  }

  .jump a, .jump span, .pagination a, .pagination li[aria-hidden] {
    font-variant-numeric: tabular-nums;
    place-items: center;
    min-block-size: 2.25rem;
    min-inline-size: 2.25rem;
    padding-inline: .4rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-grid;
  }

  .jump a, .pagination a {
    background: var(--color-surface);
  }

  .jump a:hover, .pagination a:hover {
    text-decoration: underline;
  }

  .jump span {
    color: var(--color-muted);
    font-weight: 400;
  }

  .pagination [aria-current] {
    background: var(--page);
    color: #fff;
  }

  .letter-heading {
    border-block-end: 1px solid var(--color-line);
    margin-block-end: .75rem;
    padding-block-start: var(--space-l);
    padding-block-end: .4rem;
  }

  .letter-heading .status {
    font-size: .6em;
    font-weight: 400;
  }

  .artist-list {
    columns: 16rem;
    column-gap: var(--space-l);
  }

  .artist-list li {
    break-inside: avoid;
    padding-block: .2rem;
  }

  .artist-list a {
    font-weight: 600;
    text-decoration: none;
  }

  .artist-list a:hover {
    text-decoration: underline;
  }

  .artist-list .status {
    margin-inline-start: .3rem;
    font-size: .9rem;
  }

  .style-list {
    --gutter: .4rem 1.25rem;
  }

  .style-list .status {
    font-size: .85rem;
  }

  .section-cards {
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    display: grid;
  }

  .section-card {
    border-block-start: 6px solid var(--page);
    background: var(--color-surface);
    flex-direction: column;
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    position: relative;
  }

  .section-card__title {
    letter-spacing: -.01em;
    order: 1;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
  }

  .section-card__count {
    letter-spacing: -.02em;
    color: var(--page);
    font-variant-numeric: tabular-nums;
    order: 0;
    margin-block-end: .5rem;
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 300;
    line-height: 1;
  }

  .section-card__text {
    color: var(--color-muted);
    order: 2;
    margin-block-start: .5rem;
    font-size: .95rem;
  }

  .section-card__title a {
    text-decoration: none;
  }

  .section-card__title a:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .section-card:hover {
    background: var(--page);
    color: #fff;
  }

  .section-card:hover .section-card__count, .section-card:hover .section-card__text {
    color: #fff;
  }

  .section-card:hover .section-card__title a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .section-card__title a:focus-visible {
    outline: none;
  }

  .section-card:has(a:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
  }

  .playlist-link {
    --month: #6b6b6b;
    --month-dark: #444;
    background: var(--month-dark);
    color: #fff;
    min-block-size: 24px;
    font-size: var(--step--1);
    vertical-align: middle;
    border: 1px solid #0000;
    margin-inline-end: .5em;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    overflow: hidden;
  }

  .playlist-link .icon {
    box-sizing: content-box;
    background: var(--month);
    align-self: stretch;
    block-size: 1.5rem;
    inline-size: 1.5em;
    padding-inline: .35em;
  }

  .playlist-link__label {
    align-self: center;
    padding: .15em .5em;
  }

  .playlist-link:hover .playlist-link__label {
    text-decoration: underline;
  }

  .playlist-link--jan {
    --month: var(--jan);
    --month-dark: var(--jan-dark);
  }

  .playlist-link--feb {
    --month: var(--feb);
    --month-dark: var(--feb-dark);
  }

  .playlist-link--mar {
    --month: var(--mar);
    --month-dark: var(--mar-dark);
  }

  .playlist-link--apr {
    --month: var(--apr);
    --month-dark: var(--apr-dark);
  }

  .playlist-link--may {
    --month: var(--may);
    --month-dark: var(--may-dark);
  }

  .playlist-link--jun {
    --month: var(--jun);
    --month-dark: var(--jun-dark);
  }

  .playlist-link--jul {
    --month: var(--jul);
    --month-dark: var(--jul-dark);
  }

  .playlist-link--aug {
    --month: var(--aug);
    --month-dark: var(--aug-dark);
  }

  .playlist-link--sep {
    --month: var(--sep);
    --month-dark: var(--sep-dark);
  }

  .playlist-link--oct {
    --month: var(--oct);
    --month-dark: var(--oct-dark);
  }

  .playlist-link--nov {
    --month: var(--nov);
    --month-dark: var(--nov-dark);
  }

  .playlist-link--dec {
    --month: var(--dec);
    --month-dark: var(--dec-dark);
  }

  .field--deck {
    grid-template: "name name"
                   "object tracks"
                   / minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .field--deck .field__name {
    margin-block-end: 2rem;
  }

  .deck__object {
    grid-area: object;
  }

  .deck__object .field__img--sleeve {
    max-inline-size: 100%;
  }

  .deck__tracks {
    grid-area: tracks;
  }

  .flip {
    --link-w: 11.25em;
    grid-template-columns: repeat(auto-fit, var(--link-w));
    font-size: var(--step--1);
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1.5rem;
    display: grid;
  }

  .flip__item {
    justify-items: start;
    gap: .3rem;
    display: grid;
  }

  .flip__item .playlist-link {
    inline-size: var(--link-w);
    margin: 0;
    font-size: 1em;
  }

  .flip__dir {
    color: var(--color-muted);
    font-size: .9em;
  }

  .flip__all {
    grid-column: 1 / -1;
    font-size: 1rem;
    font-weight: 600;
  }

  .pl-tracks {
    border-block-start: 1px solid var(--color-line);
    margin-block-start: 1rem;
  }

  .pl-track {
    border-block-end: 1px solid var(--color-line);
    grid-template-columns: 3.25rem 3.5rem minmax(0, 1fr) auto;
    grid-template-areas: "num thumb title dur"
                         "num thumb sub sub";
    align-items: center;
    column-gap: 1rem;
    padding-block: .75rem;
    display: grid;
  }

  .pl-track__num {
    color: var(--page);
    font-variant-numeric: tabular-nums;
    grid-area: num;
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1;
  }

  .pl-track__thumb {
    aspect-ratio: 1;
    background: var(--color-placeholder);
    grid-area: thumb;
    inline-size: 3.5rem;
  }

  .pl-track__thumb img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .pl-track__title {
    grid-area: title;
    align-self: end;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .pl-track__sub {
    color: var(--color-muted);
    grid-area: sub;
    align-self: start;
    font-size: .9rem;
  }

  .pl-track__sub a {
    color: var(--color-ink);
  }

  .pl-track__sep {
    color: #9a9a9a;
    margin-inline: .5em;
  }

  .pl-track__dur {
    font-variant-numeric: tabular-nums;
    grid-area: dur;
    align-self: end;
    font-size: .9rem;
  }

  @media (width >= 52.01rem) {
    .deck__tracks {
      margin-block-start: calc(clamp(1.5rem, 6vw, 5rem) + 7.625rem);
      padding-block-start: 2rem;
    }

    .deck__object {
      position: sticky;
      inset-block-start: 1.5rem;
    }
  }

  @media (width <= 52rem) {
    .field--deck {
      grid-template-columns: 1fr;
      grid-template-areas: "name"
                           "object"
                           "tracks";
      overflow: clip;
    }

    .field--deck:before {
      content: none;
    }

    .deck__object .field__img--sleeve {
      max-inline-size: 20rem;
    }

    .deck__object .facts-box {
      position: relative;
    }

    .deck__object .facts-box:before {
      content: "";
      z-index: -1;
      box-shadow: 0 0 0 100vmax var(--page);
      clip-path: inset(-100vmax -100vmax 100%);
      position: absolute;
      inset: 0;
    }

    .deck__tracks {
      margin-block-start: 3rem;
    }

    .pl-track {
      grid-template-columns: 2.25rem 3rem minmax(0, 1fr) auto;
      column-gap: .75rem;
    }

    .pl-track__num {
      font-size: 1.6rem;
    }

    .pl-track__thumb {
      inline-size: 3rem;
    }
  }

  .deck__summary {
    margin-block-start: 1rem;
    font-size: .95rem;
  }

  .score-banner {
    background: var(--page);
    color: #fff;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
    align-items: end;
    gap: 1.5rem clamp(2rem, 5vw, 5rem);
    margin-block-start: var(--space-l);
    padding-block: clamp(2rem, 4vw, 3.5rem);
    display: grid;
    position: relative;
  }

  .score-banner :focus-visible {
    outline-color: #fff;
  }

  .score-banner__text {
    flex-direction: column;
    align-self: stretch;
    display: flex;
    container-type: inline-size;
  }

  .score-banner__kicker {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .score-banner__title {
    letter-spacing: -.015em;
    text-wrap: balance;
    margin-block: auto 1.5rem;
    padding-block-start: 1rem;
    font-size: clamp(1.75rem, 8.62069cqi, 5.8rem);
    font-weight: 800;
    line-height: 1.05;
  }

  .score-banner__title a {
    text-decoration: none;
  }

  .score-banner__title a:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .score-banner:hover .score-banner__title a {
    text-underline-offset: .1em;
    text-decoration: underline;
    text-decoration-thickness: .06em;
  }

  .score-banner__title a:focus-visible {
    outline: none;
  }

  .score-banner:has(.score-banner__title a:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: -6px;
  }

  .score-banner__facts {
    border-block: 1px solid #ffffff8c;
    gap: .75rem clamp(1.5rem, 4vw, 3rem);
    padding-block: .9rem 1.1rem;
    display: flex;
  }

  .score-banner__end {
    margin-inline-start: auto;
  }

  .score-banner__facts dt {
    margin-block-end: .35rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .score-banner__facts dd {
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .score-banner__cover {
    justify-self: end;
  }

  @media (width <= 60rem) {
    .score-banner {
      grid-template-columns: 1fr;
    }

    .score-banner__cover {
      grid-row: 2;
      justify-self: start;
      max-inline-size: 18rem;
    }
  }

  .search-field {
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    display: flex;
  }

  .search-field label {
    flex-basis: 100%;
    font-weight: 600;
  }

  .search-field input {
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    min-inline-size: 0;
    color: inherit;
    border-radius: 0;
    flex: 16rem;
    padding: .6em .75em;
  }

  .search-layout {
    --side: 15rem;
    align-items: start;
    margin-block-start: var(--space-l);
  }

  .search-filters {
    background: var(--color-surface);
    padding: 1.25rem 1.4rem 1.4rem;
  }

  .search-filters h2 {
    font-size: 1.35rem;
  }

  .filter {
    border: 0;
    padding: 0;
  }

  .filter legend, .search-filters summary {
    margin-block-end: var(--space-3xs);
    padding: 0;
    font-weight: 600;
  }

  .filter__options {
    gap: .2rem;
    font-size: .95rem;
    display: grid;
  }

  .filter__options li {
    align-items: baseline;
    gap: .4em;
    display: flex;
  }

  .filter__options input {
    accent-color: var(--color-feature);
  }

  .filter__count {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }

  .filter__options .is-empty label {
    color: var(--color-muted);
  }

  .search-filters details .filter__options {
    max-block-size: 20rem;
    overflow-y: auto;
  }

  .results {
    gap: .5rem;
    display: grid;
  }

  .result {
    background: var(--color-surface);
    grid-template-columns: 4.5rem 1fr;
    grid-template-areas: "image title"
                         "image meta"
                         "image excerpt";
    align-items: start;
    column-gap: 1rem;
    padding: .75rem;
    display: grid;
  }

  .result__title {
    grid-area: title;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .result__meta {
    color: var(--color-muted);
    grid-area: meta;
    font-size: .9rem;
  }

  .result__excerpt {
    grid-area: excerpt;
    margin-block-start: .25rem;
    font-size: .9rem;
  }

  .result__image {
    object-fit: cover;
    background: var(--color-placeholder);
    grid-area: image;
    block-size: 4.5rem;
    inline-size: 4.5rem;
  }

  mark {
    background: var(--format-bg);
    color: inherit;
    font-weight: 600;
  }

  .stats {
    --heat-0: #f4f4f4;
    --heat-1: #e3dbea;
    --heat-2: #c2aed3;
    --heat-3: #6f4a8e;
    --heat-4: var(--color-feature);
    --bar-alt: #8e6fa8;
  }

  .stat-list {
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    display: grid;
  }

  .stat-list > div {
    border-block-start: 6px solid var(--page);
    background: var(--color-surface);
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
  }

  .stat-list dt {
    order: 1;
    margin-block-start: .4rem;
  }

  .stat-list dd {
    letter-spacing: -.02em;
    color: var(--page);
    font-variant-numeric: tabular-nums;
    order: 0;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 300;
    line-height: 1.05;
  }

  .stats-note {
    max-inline-size: 65ch;
    margin-block-start: var(--space-s);
  }

  .stats-credits {
    padding-block-start: var(--space-section);
  }

  .stats-credits > * + * {
    margin-block-start: .5rem;
  }

  .stats-grid {
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    align-items: start;
    margin-block-start: var(--space-l);
    display: grid;
  }

  .stats-block {
    background: var(--color-surface);
    padding: 1.25rem 1.4rem 1.4rem;
  }

  .stats-block--wide {
    margin-block-start: var(--space-l);
  }

  .stats-block__title {
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.2;
  }

  .stats-block caption {
    text-align: start;
    padding-block-end: .9rem;
  }

  .stats-block caption .small, .stats-block__title + * {
    margin-block-start: .3rem;
  }

  .stats-block__after {
    margin-block-start: .9rem;
  }

  .bar-chart {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
  }

  .bar-chart thead th {
    border-block-end: 1px solid var(--color-line);
    text-align: start;
    padding-block-end: .4rem;
  }

  .bar-chart thead th, .bar-chart tbody th {
    font-size: .8rem;
    font-weight: 600;
  }

  .bar-chart tbody th {
    text-align: start;
    inline-size: 38%;
    font-weight: 400;
    font-size: inherit;
    padding-block: .3rem;
    padding-inline-end: .75rem;
  }

  .bar-chart td {
    white-space: nowrap;
  }

  .bar-chart__value {
    text-align: end;
    min-inline-size: 6ch;
    display: inline-block;
  }

  .bar-chart__bar {
    inline-size: calc(var(--value) * .6);
    vertical-align: baseline;
    background: var(--page);
    block-size: .7rem;
    margin-inline-start: .6rem;
    display: inline-block;
  }

  .bar-chart--pair tbody th {
    inline-size: 34%;
  }

  .bar-chart--pair .bar-chart__bar {
    inline-size: calc(var(--value) * .3);
  }

  .bar-chart__alt .bar-chart__bar {
    background: var(--bar-alt);
  }

  .top-list {
    counter-reset: rank;
    margin-block-start: .9rem;
  }

  .top-list__item {
    counter-increment: rank;
    border-block-start: 1px solid var(--color-line);
    grid-template-columns: 1.6rem 3rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding-block: .45rem;
    display: grid;
  }

  .top-list__item:before {
    content: counter(rank);
    font-variant-numeric: tabular-nums;
    color: var(--color-numeral);
    font-weight: 600;
  }

  .top-list__text {
    min-inline-size: 0;
  }

  .top-list__name {
    font-weight: 600;
    text-decoration: none;
  }

  a.top-list__name:hover {
    text-decoration: underline;
  }

  .top-list__sub {
    color: var(--color-muted);
    font-size: .85rem;
    display: block;
  }

  .top-list__value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: .9rem;
  }

  .artist-thumb, .album-thumb {
    aspect-ratio: 1;
    background: var(--color-placeholder);
    inline-size: 3rem;
    display: block;
    overflow: hidden;
  }

  .artist-thumb img, .album-thumb img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .artist-thumb img {
    object-position: 50% 25%;
  }

  .artist-thumb.artist-tile {
    aspect-ratio: 1;
    font-size: 1rem;
  }

  .table-scroll {
    margin-block-start: .9rem;
    overflow-x: auto;
  }

  .table-scroll:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
  }

  .heatmap {
    border-collapse: separate;
    border-spacing: 2px;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
    font-size: .8rem;
  }

  .heatmap th {
    padding: .3rem .4rem;
    font-weight: 600;
  }

  .heatmap tbody th {
    background: var(--color-surface);
    text-align: start;
    position: sticky;
    inset-inline-start: 0;
  }

  .heatmap abbr {
    text-decoration: none;
  }

  .heat {
    text-align: end;
    min-inline-size: 3.25rem;
    color: var(--color-ink);
    padding: .35rem .4rem;
  }

  .heat--0 {
    background: var(--heat-0);
  }

  .heat--1 {
    background: var(--heat-1);
  }

  .heat--2 {
    background: var(--heat-2);
  }

  .heat--3 {
    background: var(--heat-3);
    color: #fff;
  }

  .heat--4 {
    background: var(--heat-4);
    color: #fff;
  }

  .heat--none {
    text-align: center;
    color: var(--color-muted);
  }
}

@layer utilities {
  .visually-hidden {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
  }
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Metropolis;
  src: url("/fonts/metropolis/Metropolis-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}