/* longlivethemixtape.net

   Three things fused:
   - then: the 2011 Blogger site. Vollkorn, black, and the grey of its content panel (#7f7f7f).
   - now:  Toby's Wrapped-era taste. Anybody, set wide and heavy, extruded numerals, colour fields.
   - the object: every station is a disc, every series a spindle; discs spin while they play.

   Rules of thumb: Vollkorn is the voice (everything you read) and the past (the masthead, the
   time capsule). Anybody is the numbers and the present. Colour is earned by data: a station's
   accent comes from its cover, language colours from the Artist sheet. */

/* ------------------------------------------------------------------ type */
@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/vollkorn-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/vollkorn-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Vollkorn";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/vollkorn-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Vollkorn";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/vollkorn-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("/fonts/anybody-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("/fonts/anybody-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Silver paint pen: only where a pen would write. Disc labels, one correction, the footer mark. */
@font-face {
  font-family: "Paint Pen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/covered-by-your-grace-latin.woff2") format("woff2");
}

:root {
  --black: #000;
  --paper: #f2f3f5;
  --silver: #c9ccd1;
  --gray: #7f7f7f;       /* the 2011 content panel */
  --rule: #2b2c30;
  --ink: #e4e7eb;        /* paint pen */
  --accent: #f2f3f5;     /* each station overrides this with its cover's colour */
  --on-accent: #000;
  --serif: "Vollkorn", Georgia, "Times New Roman", serif;
  --wide: "Anybody", "Arial Black", system-ui, sans-serif;
  --hand: "Paint Pen", "Segoe Print", "Bradley Hand", cursive;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --page: 76rem;
  --measure: 36rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

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

html {
  background: var(--black);
  color: var(--silver);
  font-family: var(--serif);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  font-size: 1.1875rem;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  color: var(--paper);
  font-family: var(--wide);
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 820; font-stretch: 112%; letter-spacing: -.012em; overflow-wrap: break-word; }
h1.is-long { font-stretch: 80%; }
h2 { font-size: 1.7rem; font-weight: 760; font-stretch: 108%; }
h3 { font-size: 1.2rem; font-weight: 720; font-stretch: 104%; }
/* The past speaks Vollkorn. */
.era-then h1, .era-then h2, .era-then h3 { font-family: var(--serif); font-stretch: normal; letter-spacing: -.01em; }
.era-then h1 { color: var(--gray); font-weight: 860; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

a {
  color: var(--paper);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(127, 127, 127, .75);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: var(--paper); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--paper); color: #000; padding: .5rem .9rem; z-index: 10; }
.skip:focus { top: 1rem; }
.muted { color: var(--gray); }

/* ------------------------------------------------------------------ numerals (the Wrapped voice) */
.numeral {
  font-family: var(--wide);
  font-weight: 900;
  font-stretch: 130%;
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--paper);
  /* Declared here, not on :root, so var(--accent) is the record's colour and not the page default. */
  text-shadow:
    .02em .02em 0 color-mix(in oklab, var(--accent) 95%, #000),
    .04em .04em 0 color-mix(in oklab, var(--accent) 74%, #000),
    .06em .06em 0 color-mix(in oklab, var(--accent) 54%, #000),
    .08em .08em 0 color-mix(in oklab, var(--accent) 34%, #000);
  font-variant-numeric: lining-nums;
}

/* ------------------------------------------------------------------ frame */
.masthead, main, .colophon {
  width: min(var(--page), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
main { flex: 1; padding-bottom: 5rem; }

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.3rem;
}
.wordmark {
  margin: 0;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 820;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.masthead__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem; }
.nav a { color: var(--silver); text-decoration: none; font-size: 1.0625rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--gray); }

/* The shuffle control appears in the masthead and on records. */
.shuffle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 1rem 0 .55rem;
  border: 1px solid var(--gray);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: 680 1rem/1 var(--wide);
  font-stretch: 108%;
  text-decoration: none;
  cursor: pointer;
}
.shuffle:hover { border-color: var(--paper); }
.shuffle svg { width: 1.5rem; height: 1.5rem; flex: none; }
.shuffle.is-spinning svg { animation: spin .6s linear infinite; }

/* The front page wears the 2011 masthead: Vollkorn, big, in the old grey. */
.home .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 1.5rem; }
.home .masthead__tools { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
.home .wordmark {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 3.5vw, 2.75rem);
  color: var(--gray);
  font-size: clamp(3rem, 8.6vw, 7.25rem);
  font-weight: 860;
  line-height: .9;
  letter-spacing: -.025em;
  max-width: 11ch;
}
/* The old tagline, corrected by hand: these are stations now. */
.tagline {
  grid-column: 1 / -1;
  margin-top: 1.1rem;
  max-width: 36rem;
  color: var(--silver);
  font-style: italic;
  font-size: 1.125rem;
}
.tagline del {
  color: var(--gray);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}
.tagline ins {
  display: inline-block;
  margin-left: .1em;
  color: var(--ink);
  font-family: var(--hand);
  font-style: normal;
  font-size: 1.45em;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-4deg) translateY(-.08em);
}

.page-head { margin: 3rem 0 2.25rem; max-width: 50rem; }
.page-head__lede { margin-top: .9rem; max-width: var(--measure); font-size: 1.1875rem; }
.page-head__count { margin-top: .4rem; color: var(--gray); }
.crumb { display: flex; flex-wrap: wrap; gap: 0 .75rem; margin-bottom: .7rem; color: var(--gray); font-size: 1rem; }
.crumb a { color: var(--silver); }
.section-title { margin: 0 0 1.1rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid var(--paper);
  border-radius: 999px;
  background: var(--paper);
  color: #000;
  font: 680 1.0625rem/1 var(--wide);
  font-stretch: 106%;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: #fff; }
.button--quiet { background: transparent; color: var(--paper); border-color: var(--gray); }
.button--quiet:hover { background: transparent; border-color: var(--paper); }
.button--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button--accent:hover { background: var(--accent); filter: brightness(1.08); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* ------------------------------------------------------------------ the disc
   Anatomy, as fractions of the radius: centre hole 12.5%, clear hub to 27%, dark mirror band
   to 33%, then the data area out to the rim. The sheen is two opposed diffraction bands where
   the light hits; --turn says where. The label (art, print, ink) is a separate layer, so when
   a disc plays only the label turns and the sheen stays put, as it does on a real one. */
.disc {
  --turn: 0deg;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  container-type: inline-size;
  isolation: isolate;
  background:
    radial-gradient(circle closest-side, transparent 97.4%, rgba(255, 255, 255, .28) 98.1%, rgba(255, 255, 255, .06) 99.2%, transparent 100%),
    radial-gradient(circle closest-side, #0b0a10 30%, #000 70%, #06050a 96%);
}
.disc__sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from var(--turn),
    transparent 0deg, rgba(124, 77, 255, 0) 6deg, rgba(124, 77, 255, .55) 20deg, rgba(64, 150, 255, .55) 31deg,
    rgba(40, 220, 190, .45) 41deg, rgba(235, 205, 90, .38) 51deg, rgba(255, 80, 150, .32) 61deg, transparent 76deg,
    transparent 180deg, rgba(124, 77, 255, .55) 200deg, rgba(64, 150, 255, .55) 211deg, rgba(40, 220, 190, .45) 221deg,
    rgba(235, 205, 90, .38) 231deg, rgba(255, 80, 150, .32) 241deg, transparent 256deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 33%, #000 40%, #000 95%, transparent 97.4%);
  mask: radial-gradient(circle closest-side, transparent 33%, #000 40%, #000 95%, transparent 97.4%);
  mix-blend-mode: screen;
  opacity: .5;
  filter: blur(1.5cqi);
  pointer-events: none;
}
.disc__label { position: absolute; inset: 0; z-index: 0; border-radius: 50%; }
.disc__hub {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    #000 0 12.4%, rgba(255, 255, 255, .38) 12.6% 13.1%,
    rgba(200, 212, 230, .11) 13.2% 18.8%, rgba(255, 255, 255, .26) 19% 19.5%,
    rgba(200, 212, 230, .08) 19.7% 26.8%, rgba(255, 255, 255, .16) 27% 27.4%,
    #040406 27.6% 32.6%, transparent 33%);
}

/* Printed: the cover art is the label, leaving a black rim where the sheen still shows. */
.disc__art, .disc__lq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side, transparent 30.5%, #000 31%, #000 94.6%, transparent 95.1%);
  mask: radial-gradient(circle closest-side, transparent 30.5%, #000 31%, #000 94.6%, transparent 95.1%);
}
.disc__lq { background-size: cover; background-position: center; filter: blur(2cqi) saturate(1.2); }
.disc__art { z-index: 1; }
/* What a printed disc shows until (or unless) its art loads: its numbers, printed on black. */
.disc__print {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  padding-top: 9%;
  color: var(--gray);
  font-family: var(--wide);
  font-weight: 860;
  font-stretch: 110%;
  font-size: 12cqi;
  line-height: 1;
  white-space: nowrap;
}
.disc__print.is-long { font-stretch: 70%; font-size: 10cqi; }

/* Hand-labelled: silver paint pen on black. */
.disc__ink {
  position: absolute;
  left: 0;
  right: 0;
  color: var(--ink);
  font-family: var(--hand);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 .3cqi rgba(255, 255, 255, .35);
}
.disc__ink--id { top: 12%; font-size: 15cqi; transform: rotate(-7deg); }
.disc__ink--sub { bottom: 15%; font-size: 9cqi; transform: rotate(-4deg); }

/* Not burned yet. */
.disc--blank .disc__sheen { opacity: .14; }
.disc--blank .disc__hub { opacity: .55; }

.disc--xs { width: 2.9rem; flex: none; }
.disc--xs .disc__ink, .disc--xs .disc__print, .disc--sm .disc__print { display: none; }

/* A shuffled disc arrives spinning. */
.arrived-by-shuffle .record__art .disc__label { animation: spin-in 1.5s var(--ease) both; }
@keyframes spin-in { from { rotate: -720deg; } }
@keyframes spin { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ sleeve and disc */
.lead__art, .record__art { position: relative; display: block; margin: 0; text-decoration: none; }
.has-sleeve { aspect-ratio: 1.42 / 1; }
.sleeve {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 70.4%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  background: #0c0c0e center / cover;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .09), 1.4rem 0 2.6rem -1rem rgba(0, 0, 0, .9);
}
.sleeve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sleeve__title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  color: var(--gray);
  font-family: var(--wide);
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 860;
  font-stretch: 105%;
  line-height: .95;
}
.has-sleeve .disc { position: absolute; right: 0; top: 0; width: 70.4%; z-index: 0; }
/* The page's one entrance: the disc slides out of its sleeve. */
@media (prefers-reduced-motion: no-preference) {
  .has-sleeve .disc { animation: slide-out 1.15s var(--ease) .2s both; }
}
@keyframes slide-out {
  from { transform: translateX(-42%) rotate(-50deg); }
  to { transform: none; }
}

/* ------------------------------------------------------------------ front page */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.lead__art { width: 100%; max-width: 40rem; }
.lead__art:not(.has-sleeve) { max-width: 30rem; }
.lead__facts { margin-top: 1rem; max-width: var(--measure); }
.lead__excerpt { margin-top: .9rem; max-width: var(--measure); font-style: italic; }

/* Title made of a name and a big extruded numeral, on records and the front page. */
.titling { display: block; container-type: inline-size; }
.titling__name {
  display: block;
  color: var(--paper);
  font-family: var(--wide);
  font-weight: 760;
  font-stretch: 112%;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.05;
}
.titling__name a { color: inherit; text-decoration: none; }
.titling__numeral {
  display: block;
  margin-top: .12em;
  padding-bottom: .1em;
  font-size: min(27cqi, 11.5rem);
}
.titling__numeral.is-long { font-stretch: 72%; font-size: min(15.5cqi, 6.5rem); }

/* A row per series: the burned discs. */
.shelf { display: grid; gap: clamp(2.75rem, 6vw, 4rem); }
.family + .family { margin-top: clamp(3rem, 7vw, 5rem); }
.family__head { margin-bottom: 1.6rem; max-width: 46rem; }
.family__head p { margin-top: .6rem; }
.row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-bottom: 1.1rem; }
.row__title { font-size: 1.35rem; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a:hover { text-decoration: underline; text-decoration-color: var(--gray); }
.row__count { color: var(--gray); }
.row__about { max-width: var(--measure); margin: -.4rem 0 1.3rem; }
.row__discs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 1.4rem 1.1rem;
}
.row__discs a { display: block; text-decoration: none; color: var(--silver); }
.row__id { display: block; margin-top: .45rem; text-align: center; font-family: var(--wide); font-weight: 650; font-stretch: 100%; font-size: .9375rem; font-variant-numeric: lining-nums tabular-nums; }
.row__id.is-long { font-stretch: 75%; }
.row__discs a:hover .row__id { color: var(--paper); }

.latest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2.5rem 4rem;
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
}
.latest h2 a { color: inherit; text-decoration: none; }
.entries { list-style: none; margin-top: .9rem; }
.entries li { padding: .6rem 0; border-top: 1px solid var(--rule); }
.entries time, .entries .entries__meta { display: block; color: var(--gray); font-size: 1rem; }
.entries--wide { max-width: 46rem; }

/* The time capsule's door on the front page. */
.capsule-door {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: center;
  margin-top: clamp(4rem, 9vw, 6.5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.capsule-door__discs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.capsule-door h2 { font-family: var(--serif); color: var(--gray); font-size: 2rem; font-stretch: normal; }
.capsule-door p { margin-top: .7rem; max-width: var(--measure); }

/* ------------------------------------------------------------------ spindle */
.spindle {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1.1rem .9rem;
  max-width: 64rem;
}
.spindle__slot a { display: block; text-decoration: none; color: var(--silver); }
.spindle__id { display: block; margin-top: .35rem; text-align: center; font-family: var(--wide); font-weight: 600; font-size: .8125rem; font-variant-numeric: lining-nums tabular-nums; }
.spindle__slot a:hover .spindle__id { color: var(--paper); }
@media (max-width: 720px) { .spindle { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ a record's page */
.record__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin: clamp(2rem, 5vw, 3.5rem) 0 3rem;
}
.record__art:not(.has-sleeve) { max-width: 28rem; width: 100%; justify-self: center; }
.record__facts { margin-top: 1rem; max-width: var(--measure); }

.filing { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: 1.4rem 0 0; }
.filing div { display: contents; }
.filing dt { color: var(--gray); }
.filing dd { margin: 0; color: var(--paper); }

.langs { margin: 1.4rem 0 0; max-width: 28rem; }
.langs__bar { display: flex; gap: 2px; height: 6px; }
.langs__bar i { display: block; min-width: 3px; border-radius: 1px; }
.langs__key { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .6rem; font-size: .9375rem; color: var(--silver); }
.langs__key i { display: inline-block; width: .6rem; height: .6rem; border-radius: 1px; margin-right: .4rem; }

/* The deck: a Winamp-style visualizer over the Spotify player. */
.deck { margin-top: 1.3rem; }
.viz {
  all: unset;
  display: block;
  width: 100%;
  height: 4.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px 6px 0 0;
  background: #030304;
  cursor: pointer;
}
.viz:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.viz canvas { display: block; width: 100%; height: 100%; }
.player iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 0 0 12px 12px; background: #000; }
.deck__note { margin-top: .5rem; font-size: .9375rem; color: var(--gray); }

/* While a record plays, its disc throws a little of its colour. */
.record .record__art .disc { transition: filter .8s ease; }
.record.is-playing .record__art .disc { filter: drop-shadow(0 0 2.2rem color-mix(in oklab, var(--accent) 38%, transparent)); }
.lead__link { display: block; color: inherit; text-decoration: none; }
.lead__link:hover .titling__name { text-decoration: underline; text-decoration-color: var(--gray); }

.pending { margin-top: 1.4rem; padding: .9rem 1.1rem; border: 1px dashed var(--gray); border-radius: 6px; color: var(--silver); max-width: var(--measure); }

/* The year in numbers: one colour field, numbers set large around it. */
.numbers { margin: 0 0 4rem; }
.field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem 3.5rem;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
}
.field__h { margin-bottom: .6rem; color: inherit; font-size: 1.05rem; font-weight: 700; font-stretch: 106%; opacity: .78; }
.ranks { list-style: none; }
.ranks li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: .4rem;
  padding: .45rem 0;
  border-top: 1px solid color-mix(in oklab, var(--on-accent) 22%, transparent);
}
.ranks__n { font: 900 1.45rem/1 var(--wide); font-stretch: 125%; }
.ranks__name {
  min-width: 0;
  overflow-wrap: break-word;
  color: inherit;
  font: 820 clamp(1.35rem, 2.6vw, 2.05rem)/1.04 var(--wide);
  font-stretch: 108%;
  text-decoration: none;
}
a.ranks__name:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ranks__meta { grid-column: 2; margin-top: .15rem; font-style: italic; font-size: 1rem; opacity: .82; }
.tally { display: flex; flex-wrap: wrap; gap: 1.75rem 3.5rem; margin: 2.4rem 0 0; }
.tally div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.tally dd { margin: 0; font-size: clamp(3rem, 7.5vw, 5.75rem); }
.tally dt { margin-top: .8rem; max-width: 13ch; color: var(--silver); font-size: 1rem; line-height: 1.35; }
.climb { margin-top: 2rem; max-width: 44rem; font-size: 1.25rem; }
.climb strong { color: var(--paper); font-family: var(--wide); font-weight: 760; font-stretch: 106%; }

.liner { margin: 0 0 3.5rem; max-width: 44rem; }
.liner h2 { margin-bottom: 1rem; }
.liner__posted { margin-top: 1rem; color: var(--gray); font-size: 1rem; }

.prose { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.66; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2rem; font-size: 1.5rem; }
.prose blockquote { margin: 1.2em 0; padding-left: 1.1rem; border-left: 2px solid var(--gray); font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3rem; }

.tracklist h2 { margin-bottom: .5rem; }
.tier { margin: 2.4rem 0 1rem; font-size: 1.45rem; font-weight: 820; }
.tier__artists {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.3rem 2.5rem;
}
.act { border-top: 1px solid var(--rule); padding-top: .55rem; }
.act__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.act__name { font-family: var(--wide); font-weight: 700; font-stretch: 102%; font-size: 1.05rem; text-decoration: none; }
.act__name:hover { text-decoration: underline; text-decoration-color: var(--gray); }
.act__songs { list-style: none; margin-top: .3rem; font-size: 1.0625rem; line-height: 1.45; }
.act__songs li { display: flex; justify-content: space-between; gap: 1rem; padding: .08rem 0; }
.plays { color: var(--gray); font-variant-numeric: lining-nums tabular-nums; font-size: .9375rem; }

/* A mixtape is a running order, so it keeps its numbers. */
.sides { list-style: none; max-width: 44rem; margin-top: 1rem; }
.sides li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, .8fr);
  gap: 0 1rem;
  align-items: baseline;
  padding: .45rem 0;
  border-top: 1px solid var(--rule);
}
.sides__n { color: var(--gray); font-variant-numeric: lining-nums tabular-nums; }
.sides__song { color: var(--paper); }
.sides__artist { color: var(--silver); text-decoration-color: rgba(127, 127, 127, .5); }
@media (max-width: 560px) {
  .sides li { grid-template-columns: 2rem minmax(0, 1fr); }
  .sides__artist { grid-column: 2; font-size: 1rem; }
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; text-decoration-color: var(--gray); }
.pager a[rel="next"] { text-align: right; margin-left: auto; }
.pager__dir { display: block; color: var(--gray); font-size: 1rem; }

/* ------------------------------------------------------------------ career strips */
.strip { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.05rem; flex: none; }
.strip i { display: block; width: 3px; height: calc(var(--h) * 100%); min-height: 1px; background: var(--gray); border-radius: 1px 1px 0 0; }
.strip i.is-off { background: #34363a; }
.strip i.is-now { background: var(--paper); }
.strip--song i { height: 100%; }
.strip--song i.is-off { height: 2px; }

.career { margin: 0 0 3rem; max-width: 52rem; }
.career__bars { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .4rem; align-items: end; }
.career__bars li { display: flex; flex-direction: column; align-items: stretch; }
.career__bars a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.career__bar { display: block; height: calc(.4rem + var(--h) * 6rem); background: var(--silver); border-radius: 2px 2px 0 0; margin-top: auto; }
.career__bars a:hover .career__bar { background: var(--paper); }
.career__bar.is-empty { height: 2px; background: #34363a; }
.career__year { margin-top: .4rem; color: var(--gray); font-family: var(--wide); font-size: .75rem; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 560px) { .career__bars li:nth-child(even) .career__year { visibility: hidden; } }
.career figcaption { margin-top: .9rem; color: var(--gray); font-size: 1rem; }

.artist section { margin-top: 3rem; }
.artist section h2 { margin-bottom: 1rem; }
.artist .tally { margin: 0 0 2.75rem; }
.appearances { list-style: none; display: grid; gap: .9rem; max-width: 50rem; }
.appearances li { display: flex; gap: 1rem; align-items: center; }
.appearances__disc { flex: none; text-decoration: none; }
.appearances__songs { color: var(--gray); font-size: 1rem; }

.songs { border-collapse: collapse; width: 100%; max-width: 50rem; font-size: 1.0625rem; }
.songs th, .songs td { text-align: left; padding: .45rem 1rem .45rem 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.songs thead th { border-top: 0; color: var(--gray); font-weight: 400; font-size: 1rem; }
.songs tbody th { color: var(--paper); font-weight: 400; }
.songs td { color: var(--silver); font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------------ artists index */
.ranked { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 2.5rem; margin: 1rem 0 3rem; }
.ranked li { display: flex; align-items: center; gap: .9rem; padding: .5rem 0; border-top: 1px solid var(--rule); }
.ranked a { flex: 1; min-width: 0; text-decoration: none; font-family: var(--wide); font-weight: 700; font-stretch: 102%; }
.ranked a:hover { text-decoration: underline; text-decoration-color: var(--gray); }
.ranked__n { color: var(--gray); font-size: .9375rem; font-variant-numeric: lining-nums tabular-nums; min-width: 5.5rem; text-align: right; }

.letters { display: flex; flex-wrap: wrap; gap: .2rem .3rem; margin: 0 0 2rem; }
.letters a { display: inline-grid; place-items: center; min-width: 2.1rem; min-height: 2.1rem; text-decoration: none; color: var(--silver); border: 1px solid var(--rule); border-radius: 2px; font-family: var(--wide); font-weight: 650; }
.letters a:hover { color: var(--paper); border-color: var(--gray); }
.letter { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.letter__h { font-size: 2rem; font-weight: 900; color: var(--gray); margin-bottom: .6rem; }
.names { list-style: none; columns: 15rem; column-gap: 2.5rem; }
.names li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .22rem 0; break-inside: avoid; }
.names a { text-decoration: none; }
.names a:hover { text-decoration: underline; text-decoration-color: var(--gray); }

/* ------------------------------------------------------------------ albums: a wall of cases */
.decade { margin-top: 3rem; }
.decade__h { font-size: 2.2rem; font-weight: 900; font-stretch: 120%; color: var(--gray); margin-bottom: 1.2rem; }
.wall { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 2rem 1.3rem; }
.wall li { min-width: 0; }
.case {
  --lang: var(--gray);
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 30px -18px rgba(0, 0, 0, .9);
}
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 7%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 60%, rgba(0, 0, 0, .3));
}
.case::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5px; background: var(--lang); }
.case__title {
  position: absolute;
  inset: 10% 9% 14% 14%;
  overflow: hidden;
  color: var(--silver);
  font-family: var(--wide);
  font-weight: 800;
  font-stretch: 86%;
  font-size: clamp(.92rem, 1.3vw, 1.08rem);
  line-height: 1.08;
  overflow-wrap: break-word;
  hyphens: auto;
}
.wall__year { display: block; margin-top: .7rem; font-size: 2rem; --accent: var(--lang); }
.wall__album { display: block; margin-top: .35rem; color: var(--paper); font-style: italic; line-height: 1.3; }
.wall__artist { display: block; font-size: 1rem; }
.lang-key { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: 1rem; font-size: .9375rem; }
.lang-key i { display: inline-block; width: .9rem; height: 5px; margin-right: .45rem; vertical-align: middle; }

/* ------------------------------------------------------------------ shows */
.year { margin-top: 2.6rem; }
.year__h { font-size: 2rem; font-weight: 900; font-stretch: 120%; color: var(--gray); margin-bottom: .6rem; }
.gigs { list-style: none; max-width: 56rem; }
.gigs li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .1rem 1rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.gigs time { color: var(--gray); font-variant-numeric: lining-nums tabular-nums; }
.gigs__title { font-family: var(--wide); font-weight: 700; font-stretch: 102%; }
.gigs__meta { grid-column: 2; font-size: 1rem; color: var(--gray); }
.bill { list-style: none; max-width: 44rem; margin-top: 1rem; }
.bill li { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--rule); }
.bill li > a { flex: 1; font-family: var(--wide); font-weight: 700; text-decoration: none; }
.bill .muted { font-size: .9375rem; }
.gig section { margin-top: 2.75rem; }
.setlists { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2.5rem 4rem; }
.setlist h3 { margin-bottom: .4rem; }
.setlist__set { margin-top: .9rem; color: var(--gray); font-size: 1rem; }
.setlist ol { margin-top: .3rem; padding-left: 1.8rem; color: var(--gray); }
.setlist li { padding: .2rem 0; }
.setlist__song { color: var(--gray); }
.setlist li.is-on .setlist__song { color: var(--paper); }
.setlist__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.setlist__note { display: block; color: var(--gray); font-size: .9375rem; font-style: italic; }
.setlist__tape { color: var(--gray); font-style: italic; }
.source { margin-top: 2rem; color: var(--gray); font-size: 1rem; }

/* ------------------------------------------------------------------ blog */
.post-head { margin: 3rem 0 2rem; max-width: 46rem; }
.video { margin: 1.6em 0; max-width: 44rem; }
.video__lite, .video iframe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  background: #111 center / cover;
}
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .78);
  color: var(--paper);
  font: 700 1rem/1 var(--wide);
}
.video__lite:hover .video__play { background: #000; }
.video figcaption { margin-top: .5rem; color: var(--gray); font-size: 1rem; }

/* ------------------------------------------------------------------ time capsule */
.relic {
  margin: 0 0 3rem;
  max-width: 54rem;
  padding: .7rem;
  background: var(--gray);
}
.relic__panel { padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem); background: #000; text-align: center; }
.relic__title { display: block; color: var(--gray); font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1; }
.relic__tag { display: block; margin-top: clamp(1rem, 3vw, 2rem); color: var(--gray); font-size: clamp(.95rem, 1.6vw, 1.1rem); }
.relic + figcaption, .relic-caption { margin: -2.2rem 0 3rem; color: var(--gray); font-size: 1rem; }
.capsule section { margin-top: 3rem; max-width: 44rem; }
.capsule section h2 { margin-bottom: .9rem; }
.capsule .row { margin-top: 1.6rem; }
.capsule .row__discs { max-width: 30rem; }

/* ------------------------------------------------------------------ 404 */
.missing { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 3rem; align-items: center; margin: 4rem 0; }
@media (max-width: 640px) { .missing { grid-template-columns: 1fr; } .missing__disc { max-width: 12rem; } }

/* ------------------------------------------------------------------ footer */
.colophon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 4rem;
  align-items: end;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--gray);
  font-size: 1rem;
}
.mark { display: flex; align-items: center; gap: 1.1rem; justify-self: end; text-align: right; }
.mark svg { width: 5.5rem; height: 5.5rem; flex: none; }
.mark a { color: var(--silver); }
.mark__ink { fill: var(--ink); font-family: var(--hand); }
.scrobble h2 { font-size: 1.1rem; color: var(--silver); font-weight: 700; margin-bottom: .5rem; }
.scrobble__list { list-style: none; }
.scrobble__list li { padding: .12rem 0; }
.scrobble__song { color: var(--paper); }
.scrobble__now { color: var(--paper); font-style: italic; }
@media (max-width: 640px) {
  .colophon { grid-template-columns: 1fr; }
  .mark { justify-self: start; text-align: left; flex-direction: row-reverse; }
}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 820px) {
  .lead, .record__top { grid-template-columns: 1fr; }
  .lead__art.has-sleeve, .record__art.has-sleeve { max-width: 34rem; }
  .capsule-door { grid-template-columns: 1fr; }
  .capsule-door__discs { max-width: 15rem; }
}
@media (max-width: 560px) {
  body { font-size: 1.125rem; }
  .home .masthead__tools { justify-self: start; }
  .row__discs { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 1rem .7rem; }
  .row__id { font-size: .8125rem; }
  .tally { gap: 1.5rem 2.25rem; }
  .field { padding: 1.1rem 1.1rem 1.3rem; }
  .ranks li { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .ranks__name { font-size: 1.22rem; font-stretch: 92%; }
  h1.is-long { font-size: 1.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arrived-by-shuffle .record__art .disc__label { animation: none; }
  .shuffle.is-spinning svg { animation: none; }
}