:root {
  --black: #000;
  --white: #f3f3f1;
  --chrome: #b9bdc5;
  --smoke: #8b8e95;
  --line: #26262a;
  --ruby: #c20f2f;
  --ruby-hot: #ff3158;

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;

  --gutter: clamp(18px, 4vw, 64px);
  --rev: 3s; /* one turn of the record */
  --base: clamp(14px, min(1.2vw, 2vh), 20px);

  /* set by main.js from the window size */
  --R: 400px; --cx: 150px; --cy: 50vh; --px: 500px; --py: 60px;
  --arm: 0deg; --ui-left: 50vw; --ui-top: 0px;
}

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

html, body {
  height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--black);
}
body {
  color: var(--white);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ruby); color: var(--white); }
:focus-visible { outline: 2px solid var(--ruby-hot); outline-offset: 4px; }

.app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- the record ---------- */

.deck {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transform: scale(.97);
  transition: opacity 1.3s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.is-ready .deck { opacity: 1; transform: none; }

.record {
  position: absolute;
  left: calc(var(--cx) - var(--R)); top: calc(var(--cy) - var(--R));
  width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  border-radius: 50%;
}
.record-body {
  position: absolute; inset: 0; border-radius: 50%;
  background-color: #09090a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 120px 20px rgba(0, 0, 0, .9);
}
.record-spin {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; will-change: transform;
  animation: spin var(--rev) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* faint uneven shine that turns with the record, so you can see it spin */
.record-warp {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 255, 255, .05) 22deg, transparent 46deg,
    transparent 150deg, rgba(255, 255, 255, .03) 164deg, transparent 182deg,
    transparent 255deg, rgba(255, 255, 255, .04) 268deg, transparent 290deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 41.5%, #000 42.5%, #000 94.5%, transparent 95.5%);
  mask: radial-gradient(circle closest-side, transparent 41.5%, #000 42.5%, #000 94.5%, transparent 95.5%);
}

/* turning the record over: swing edge-on, swap sides, swing back */
.record.is-flipping { animation: flip .9s linear; }
@keyframes flip {
  0% { transform: perspective(1800px) rotateY(0deg); animation-timing-function: cubic-bezier(.55, 0, 1, .6); }
  49.9% { transform: perspective(1800px) rotateY(90deg); }
  50% { transform: perspective(1800px) rotateY(-90deg); animation-timing-function: cubic-bezier(0, .4, .45, 1); }
  100% { transform: perspective(1800px) rotateY(0deg); }
}

.label { position: absolute; inset: 33.35%; border-radius: 50%; }
.label.is-b .label-name { fill: #b40f2d; }
.label.is-b .label-arc, .label.is-b .label-small { fill: rgba(12, 12, 14, .82); }
.label svg { display: block; width: 100%; height: 100%; }
.label-name { font-family: var(--serif); font-style: italic; font-weight: 500; fill: #fbeef0; letter-spacing: -.04em; }
.label-arc { font-family: var(--sans); font-stretch: 80%; font-weight: 500; font-size: 7.4px; fill: rgba(20, 0, 5, .78); letter-spacing: .04em; }
.label-small { font-family: var(--sans); font-stretch: 80%; font-weight: 500; font-size: 7px; fill: rgba(20, 0, 5, .78); letter-spacing: .04em; }

.band {
  position: absolute; border-radius: 50%; cursor: pointer;
}
.band::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent calc(var(--hole) - .3%), rgba(255, 49, 88, .2) calc(var(--hole) + .3%), rgba(255, 49, 88, .11) 99.4%, transparent 100%);
  opacity: 0; transition: opacity .6s ease;
}
.band:hover::before, .band.is-under::before { opacity: .45; }
.band.is-active::before { opacity: 1; }
.band-stop::before { content: none; }

/* ---------- the tonearm ---------- */

.arm, .arm-shadow {
  position: absolute; left: var(--px); top: var(--py); width: 0; height: 0;
  pointer-events: none;
  transform: rotate(var(--arm));
  transition: transform .85s cubic-bezier(.5, 0, .15, 1), filter .4s, opacity .4s;
}
.arm svg, .arm-shadow svg { position: absolute; left: 0; top: 0; overflow: visible; }
.arm-shadow { transform: translate(7px, 10px) rotate(var(--arm)); filter: blur(5px); opacity: .6; }
.is-lifted .arm { transform: rotate(var(--arm)) scale(1.02); }
.is-lifted .arm-shadow { transform: translate(18px, 26px) rotate(var(--arm)); filter: blur(11px); opacity: .38; }
.is-dragging .arm, .is-dragging .arm-shadow { transition: filter .4s, opacity .4s; }

.arm-inner { transform-origin: 0 0; animation: wobble var(--rev) ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(.28deg); } }
.is-lifted .arm-inner { animation-play-state: paused; }

.arm-grab { pointer-events: auto; cursor: grab; touch-action: none; }
.is-dragging .arm-grab { cursor: grabbing; }

/* ---------- smoke + grain ---------- */

.haze {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; mix-blend-mode: screen;
}
.grain { position: absolute; inset: 0; overflow: hidden; z-index: 40; pointer-events: none; }
.grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .11;
  animation: grain .9s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-7%, 4%); }
  34% { transform: translate(5%, -9%); }
  51% { transform: translate(-3%, 11%); }
  68% { transform: translate(9%, 3%); }
  85% { transform: translate(-10%, -6%); }
}

/* ---------- sound switch ---------- */

.sound-box {
  position: absolute; z-index: 30; top: 18px; right: var(--gutter);
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .3s;
}
.sound-box:hover { border-color: var(--smoke); }
.sound-box.is-on { border-color: var(--ruby); }
.sound {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  background: none; border: 0; border-radius: 999px;
  font-stretch: 78%; font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  cursor: pointer;
}

/* the volume slider slides out of the switch while the sound is on */
.volume {
  -webkit-appearance: none; appearance: none;
  width: 0; height: 20px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: width .35s ease, margin .35s ease, opacity .3s ease, visibility 0s .35s;
}
.sound-box.is-on .volume { width: 84px; margin-right: 14px; opacity: 1; visibility: visible; transition-delay: 0s; }
.volume::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--white) var(--vol, 50%), #4a4a50 var(--vol, 50%));
}
.volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px;
  border-radius: 50%; background: var(--white);
}
.volume::-moz-range-track { height: 2px; border-radius: 2px; background: #4a4a50; }
.volume::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--white); }
.volume::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--white); }
.lamp {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b1a28, #2a060d 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background .3s, box-shadow .3s;
}
.sound[aria-pressed="true"] .lamp, .lamp.is-live {
  background: radial-gradient(circle at 35% 30%, #ffc2cd, var(--ruby-hot) 45%, var(--ruby));
  box-shadow: 0 0 10px 2px var(--ruby-hot), 0 0 34px 8px rgba(255, 49, 88, .45);
}

/* visitor count, top left */
.visits {
  position: absolute; z-index: 30; top: 18px; left: var(--gutter);
  padding: 9px 0; pointer-events: none;
  color: var(--smoke); font-stretch: 78%; font-weight: 500; font-size: .9rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- the reading side ---------- */

.ui {
  position: absolute; z-index: 3;
  left: var(--ui-left); top: var(--ui-top); right: var(--gutter); bottom: 0;
  max-width: 47rem;
  padding: 84px 0 clamp(18px, 3.4vh, 36px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(12px, 2.4vh, 28px);
}

.panels { position: relative; min-height: 0; }
.panel {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  font-size: calc(var(--fit, 1) * var(--base));
  opacity: 0; visibility: hidden; filter: blur(12px);
  transition: opacity .28s ease, filter .28s ease, visibility 0s .28s;
}
.panel.is-active {
  opacity: 1; visibility: visible; filter: none;
  transition: opacity .7s ease .42s, filter .8s ease .42s, visibility 0s;
}
.panel-in.is-fill { height: 100%; display: flex; flex-direction: column; }

.panel-title {
  color: var(--smoke);
  font-weight: 500; font-size: 1em; font-stretch: 78%; letter-spacing: .02em;
  margin-bottom: 1.3em;
}
.panel-title .no { color: var(--ruby-hot); margin-right: .7em; font-variant-numeric: tabular-nums; }

/* photo slots */
.slot { position: relative; background: #050506; overflow: hidden; }
.slot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(.96);
  opacity: 0;
  transition: filter .6s ease, opacity .6s ease;
}
.slot.is-loaded img { opacity: 1; }
.slot:hover img, a:hover .slot img, a:focus-visible .slot img { filter: none; }
/* small pictures that simply stay away when none is found */
.slot.is-quiet.is-empty { display: none; }
.slot .missing { display: none; }
.slot.is-empty { border: 1px dashed #3a3a40; }
.slot.is-empty img { display: none; }
.slot.is-empty .missing {
  display: grid; place-items: center; position: absolute; inset: 0;
  padding: .8em; text-align: center; overflow-wrap: anywhere;
  color: var(--smoke); font-stretch: 78%; font-size: .85em; letter-spacing: .02em;
}

/* 01 about */
.big-name {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  line-height: .86; letter-spacing: -.045em; white-space: nowrap;
  margin: 0 0 .16em -.03em;
}
.big-name span { display: inline-block; padding-right: .1em; }
.about-row { display: flex; align-items: flex-end; gap: 1.6em; }
.portrait { flex: none; width: 9.2em; aspect-ratio: 4 / 5; }
.portrait .slot { height: 100%; }
.bio { font-family: var(--serif); font-size: 1.42em; line-height: 1.24; letter-spacing: -.01em; max-width: 21em; }
.facts { margin-top: 1.1em; display: grid; grid-template-columns: max-content 1fr; gap: .15em 1.5em; }
.facts dt { color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; }

/* 02 loves */
.loves li {
  font-family: var(--serif); font-style: italic;
  font-size: 4.3em; line-height: 1.07; letter-spacing: -.03em;
}

/* 03 likes & don't likes */
.tier + .tier { margin-top: 2.2em; }
.tier h3 {
  color: var(--smoke); font-weight: 500; font-size: 1em; font-stretch: 78%; letter-spacing: .02em;
  margin-bottom: .5em;
}
.tier ul { display: flex; flex-wrap: wrap; }
.tier li::after { content: "/"; margin: 0 .38em; }
.tier li:last-child::after { content: none; }
.tier-likes ul { font-weight: 300; font-stretch: 88%; font-size: 2.05em; line-height: 1.3; color: var(--chrome); }
.tier-likes li::after { color: #4a4a50; }
.tier-dislikes ul { font-size: 1.3em; line-height: 1.7; color: var(--smoke); }
.tier-dislikes li span { text-decoration: line-through; text-decoration-color: var(--ruby-hot); text-decoration-thickness: 1.5px; }
.tier-dislikes li::after { color: #3a3a40; }

/* b1 artists: a festival bill, biggest names on top */
.bill a { transition: color .25s; }
.bill a:hover, .bill a:focus-visible { color: var(--ruby-hot); }
.bill-top li {
  font-family: var(--serif); font-style: italic;
  font-size: 4.9em; line-height: 1.04; letter-spacing: -.035em;
}
.bill-note {
  margin-left: 1em; vertical-align: middle;
  font-family: var(--sans); font-style: normal; font-size: .2em; font-stretch: 78%; letter-spacing: .02em;
  color: var(--smoke);
}
.bill-art {
  display: inline-block; vertical-align: middle; position: relative; top: -.07em;
  width: .8em; height: .8em; margin-right: .24em;
}
.bill-mid .bill-art, .bill-low .bill-art { width: 1.2em; height: 1.2em; margin-right: .36em; border-radius: 50%; top: -.08em; }
.bill-mid, .bill-low { display: flex; flex-wrap: wrap; }
.bill-mid li::after, .bill-low li::after { content: "/"; margin: 0 .38em; color: #4a4a50; }
.bill-mid li:last-child::after, .bill-low li:last-child::after { content: none; }
.bill-mid { margin-top: .75em; font-weight: 300; font-stretch: 88%; font-size: 2.05em; line-height: 1.3; color: var(--chrome); }
.bill-low { margin-top: .6em; font-size: 1.3em; line-height: 1.6; color: var(--smoke); }
.bill-mid .bill-note, .bill-low .bill-note { font-size: .55em; margin-left: .5em; }

/* b3 albums: sleeves with the record peeking out */
.albums { display: grid; grid-template-columns: repeat(3, minmax(0, 9.6em)); gap: 1.5em 2.3em; }
.album a { display: block; }
.album-art { position: relative; display: block; aspect-ratio: 1; margin-bottom: .6em; }
.album-art .slot { position: relative; display: block; height: 100%; box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .6); }
.slot.is-plain { border: 1px solid var(--line); background: linear-gradient(135deg, #131315, #050506 60%); }
.album-disc {
  position: absolute; top: 4%; bottom: 4%; right: -19%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #000 0 3%, var(--ruby) 3.5% 30%, #050506 31% 34%, transparent 35%),
    conic-gradient(from 60deg, transparent 0deg, rgba(255, 255, 255, .16) 30deg, transparent 62deg, transparent 180deg, rgba(255, 255, 255, .1) 212deg, transparent 245deg),
    repeating-radial-gradient(circle, #0c0c0d 0 1px, #1e1e21 1.6px, #0c0c0d 2.4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.album a:hover .album-disc, .album a:focus-visible .album-disc { transform: translateX(24%) rotate(40deg); }
.album-title {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 1.12em; line-height: 1.15; letter-spacing: -.01em;
  transition: color .25s;
}
.album-by { display: block; margin-top: .15em; color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; font-size: .88em; }
.album a:hover .album-title, .album a:focus-visible .album-title { color: var(--ruby-hot); }

/* b2 songs */
.song-tabs { display: flex; flex-wrap: wrap; gap: .15em 1.35em; margin-bottom: 1em; }
.song-tabs button {
  padding: .3em 0; background: none; border: 0; border-bottom: 1.5px solid transparent; cursor: pointer;
  color: var(--smoke);
  font-weight: 500; font-size: 1.08em; font-stretch: 78%; letter-spacing: .02em;
  transition: color .25s, border-color .25s;
}
.song-tabs button:hover { color: var(--chrome); }
.song-tabs button[aria-pressed="true"] { color: var(--white); border-color: var(--ruby-hot); }
/* every group sits in the same spot, so switching never moves the page */
.song-stage { display: grid; }
.song-list { grid-area: 1 / 1; border-top: 1px solid var(--line); transition: opacity .35s ease; }
.song-list.is-two { columns: 2; column-gap: 2.4em; }
.song-list.is-away { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.song { break-inside: avoid; }
.song a {
  display: flex; align-items: center; gap: .9em;
  padding: .5em 0; border-bottom: 1px solid var(--line);
  transition: border-color .25s;
}
.song-art { flex: none; width: 3.1em; height: 3.1em; }
.song-no { flex: none; width: 1.4em; color: var(--smoke); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.song-title {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 1.55em; line-height: 1.1; letter-spacing: -.015em;
  transition: color .25s;
}
.song-artist { display: block; color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; font-size: .92em; margin-top: .1em; }
.song a:hover, .song a:focus-visible { border-color: var(--ruby-hot); }
.song a:hover .song-title, .song a:focus-visible .song-title { color: var(--ruby-hot); }

/* b4 lately: what was actually played, from Last.fm */
.now { min-height: 3.3em; margin-bottom: .9em; }
.now a { display: flex; align-items: center; gap: .85em; }
.now .lamp { flex: none; }
.now-state { color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; white-space: nowrap; }
.now-art { flex: none; width: 3em; height: 3em; }
.now-song { min-width: 0; }
.now-title {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 1.5em; line-height: 1.1; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s;
}
.now-artist { display: block; color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; font-size: .92em; }
.now a:hover .now-title, .now a:focus-visible .now-title { color: var(--ruby-hot); }

.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4em; }
.chart h3 {
  display: flex; justify-content: space-between;
  color: var(--smoke); font-weight: 500; font-size: 1em; font-stretch: 78%; letter-spacing: .02em;
  padding-bottom: .5em; border-bottom: 1px solid var(--line);
}
.chart-row a {
  position: relative; display: flex; align-items: center; gap: .7em;
  min-height: 3.2em; padding: .35em 0; border-bottom: 1px solid var(--line);
}
.chart-row a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: calc(var(--share, 0) * 100%); background: var(--chrome);
  transition: background .25s;
}
.chart-row a:hover::after, .chart-row a:focus-visible::after { background: var(--ruby-hot); }
.chart-rank { flex: none; width: .9em; color: var(--smoke); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.chart-art { flex: none; width: 2.3em; height: 2.3em; }
.chart-art.is-round { border-radius: 50%; }
.chart-name {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-style: italic; font-size: 1.25em; line-height: 1.15; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s;
}
.chart-name small {
  display: block; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sans); font-style: normal; font-size: .7em; font-stretch: 78%; letter-spacing: .02em;
  color: var(--smoke);
}
.chart-row a:hover .chart-name, .chart-row a:focus-visible .chart-name { color: var(--ruby-hot); }
.chart-plays { flex: none; color: var(--chrome); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.lately-note:empty { display: none; }
.lately-note { margin-top: 1em; color: var(--smoke); }
.lately-foot { margin-top: 1.1em; color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; font-size: .95em; }
.lately-foot a { color: var(--chrome); border-bottom: 1px solid #4a4a50; transition: color .25s, border-color .25s; }
.lately-foot a:hover { color: var(--white); border-color: var(--ruby-hot); }

/* 05 photos: a stack of prints */
.stack-wrap { flex: 1; min-height: 0; padding: 1.2em 3.4em 1.6em 1.5em; }
/* the pile fills the space; each print is as big as its own shape allows (--ratio is width / height) */
.stack { position: relative; height: 100%; container-type: size; }
.print {
  position: absolute; inset: 0; margin: auto; padding: .42em;
  width: min(100cqw, calc(100cqh * var(--ratio, .8)));
  height: min(100cqh, calc(100cqw / var(--ratio, .8)));
  background: #e6e6e3; border: 0; cursor: pointer;
  box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .55);
  transform: translate(calc(var(--k) * .7em), calc(var(--k) * .3em)) rotate(calc(var(--tilt) * 1deg));
  filter: brightness(calc(1 - var(--k) * .17));
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .55s, opacity .3s;
}
.print .slot { height: 100%; }
.print.is-deep { opacity: 0; pointer-events: none; }
.print.is-leaving { transform: translate(78%, -5%) rotate(15deg); }
.stack-ctl {
  display: flex; align-items: center; gap: 1.4em;
  color: var(--smoke); font-stretch: 78%; letter-spacing: .02em;
}
.stack-ctl button { background: none; border: 0; padding: .3em 0; color: var(--chrome); cursor: pointer; }
.stack-ctl button:hover { color: var(--white); }
.stack-caption { font-family: var(--serif); font-style: italic; color: var(--white); }

/* 06 find me */
.links a { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em 1.1em; padding: .1em 0; }
.link-where {
  font-family: var(--serif); font-style: italic;
  font-size: 4em; line-height: 1.08; letter-spacing: -.035em;
  transition: color .25s;
}
.link-handle { color: var(--smoke); font-stretch: 78%; letter-spacing: .02em; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s; }
.links a:hover .link-where, .links a:focus-visible .link-where { color: var(--ruby-hot); }
.links a:hover .link-handle, .links a:focus-visible .link-handle { color: var(--white); transform: translateX(.4em); }

/* ---------- tracklist (the navigation) ---------- */

.tracklist ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 1.9vw, 30px); }
.tracklist .flip-item { margin-left: auto; }
.tracklist .flip {
  padding: 7px 15px; color: var(--white);
  border: 1px solid #3a3a40; border-radius: 999px;
  transition: border-color .3s, color .25s;
}
.tracklist .flip:hover { color: var(--white); border-color: var(--ruby-hot); }
.tracklist button {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: 6px 0; background: none; border: 0; cursor: pointer;
  color: var(--smoke);
  font-stretch: 78%; font-weight: 500; font-size: .98rem; letter-spacing: .02em;
  transition: color .25s;
}
.tracklist .no { font-variant-numeric: tabular-nums; transition: color .25s; }
.tracklist button:hover { color: var(--chrome); }
.tracklist button[aria-current="true"] { color: var(--white); }
.tracklist button[aria-current="true"] .no { color: var(--ruby-hot); }

/* ---------- tall screens (phones) ---------- */

.is-portrait { --base: clamp(13px, min(3.9vw, 1.9vh), 18px); }
.is-portrait .ui { left: var(--gutter); max-width: none; padding-top: 0; }
.is-portrait .panel { justify-content: flex-start; }
.is-portrait .portrait { width: 6.4em; }
.is-portrait .about-row { gap: 1.1em; }
.is-portrait .bio { font-size: 1.16em; }
.is-portrait .facts { margin-top: .7em; }
.is-portrait .panel-title { margin-bottom: .8em; }
.is-portrait .loves li { font-size: 3.05em; }
.is-portrait .tier-likes ul { font-size: 1.6em; }
.is-portrait .tier-dislikes ul { font-size: 1.15em; }
.is-portrait .tier + .tier { margin-top: 1.5em; }
.is-portrait .song-tabs { gap: 0 1.1em; margin-bottom: .7em; }
.is-portrait .charts { gap: 1.1em; }
.is-portrait .chart-row a { gap: .5em; min-height: 2.9em; }
.is-portrait .chart-art { width: 1.9em; height: 1.9em; }
.is-portrait .chart-name { font-size: 1.05em; }
.is-portrait .now { margin-bottom: .5em; }
.is-portrait .now-title { font-size: 1.25em; }
.is-portrait .song-art { width: 2.5em; height: 2.5em; }
.is-portrait .song a { padding: .34em 0; }
.is-portrait .song-title { font-size: 1.2em; }
.is-portrait .song-artist { font-size: .82em; }
.is-portrait .link-where { font-size: 2.9em; }
.is-portrait .tracklist ol { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 12px; }
.is-portrait .tracklist button { font-size: .92rem; padding: 5px 0; }
.is-portrait .tracklist .flip-item { grid-column: 1 / -1; margin: 6px 0 0; }
.is-portrait .tracklist .flip { padding: 6px 14px; }
.is-portrait .bill-top li { font-size: 3.3em; }
.is-portrait .bill-mid { font-size: 1.55em; }
.is-portrait .bill-low { font-size: 1.12em; }
.is-portrait .albums { gap: 1em 1.6em; padding-right: .8em; }
.is-portrait .album-title { font-size: 1em; }

@media (prefers-reduced-motion: reduce) {
  .record-spin, .arm-inner, .grain::before { animation: none; }
  .arm, .arm-shadow, .deck, .print { transition-duration: .01s; }
  .panel, .panel.is-active { transition: opacity .2s, visibility 0s; filter: none; }
}