.artist-site {
  --bg: #171410;
  --panel: #211b15;
  --line: #4f4337;
  --ink: #f2e5ce;
  --muted: #cbbca5;
  --accent: #e8a17b;
  --solid: #e8a17b;
  background: var(--bg);
  color: var(--ink);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
}
.site-logo-lettering { height: auto; }
.mobile-tagline,.menu-toggle { display: none; }
.artist-site .button.primary:hover { background: #f4be9d; }
.artist-site .videos,.artist-site .about { background: #201a14; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #131313;
}

.hero-visual,.hero-visual::after,.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-visual { z-index: -1; overflow: hidden; }

.hero-visual::after {
  content: '';
  background: linear-gradient(90deg,#131313 9%,#131313f5 25%,#1313138c 43%,#13131300 63%),
    linear-gradient(0deg,#131313ad,transparent 24%);
}

.hero-covers {
  position: absolute;
  inset: 0 0 0 31%;
}

.hero-cover {
  position: absolute;
  pointer-events: auto;
  left: var(--piece-left);
  top: var(--piece-top);
  width: var(--piece-width);
  height: var(--piece-height);
  overflow: hidden;
  clip-path: var(--cut);
  background: #292929;
}

.hero-cover:nth-child(1) {
  --piece-left: -6%;
  --piece-top: 0%;
  --piece-width: 78%;
  --piece-height: 78%;
  --cut: polygon(0 0,100% 0,84% 73%,43% 100%,9% 82%);
  --crop: 50% 0%;
  --preview-x: 54%;
  --preview-y: 29%;
}

.hero-cover:nth-child(2) {
  --piece-left: 69%;
  --piece-top: -9%;
  --piece-width: 37%;
  --piece-height: 64%;
  --cut: polygon(19% 0,100% 0,100% 92%,0 100%,10% 63%);
  --crop: 56% 47%;
  --preview-x: 51%;
  --preview-y: 49%;
}

.hero-cover:nth-child(3) {
  --piece-left: -2%;
  --piece-top: 47%;
  --piece-width: 59%;
  --piece-height: 62%;
  --cut: polygon(0 18%,27% 5%,86% 0,100% 78%,58% 100%,0 100%);
  --crop: 50% 0%;
  --preview-x: 53%;
  --preview-y: 53%;
}

.hero-cover:nth-child(4) {
  --piece-left: 51%;
  --piece-top: 44%;
  --piece-width: 57%;
  --piece-height: 66%;
  --cut: polygon(8% 16%,100% 0,100% 100%,15% 100%,0 48%);
  --crop: 48% 76%;
  --preview-x: 48%;
  --preview-y: 46%;
}

.hero-cover-art { position: absolute; inset: 0; overflow: hidden; }

.hero-cover-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle,#000 0 25%,transparent 50%) 0 0 / 3px 3px;
  opacity: .24;
  pointer-events: none;
}

.hero-cover img {
  --cover-overscan: clamp(26px, 5.8vmin, 58px);
  position: absolute;
  inset: calc(-1 * var(--cover-overscan));
  width: calc(100% + 2 * var(--cover-overscan));
  height: calc(100% + 2 * var(--cover-overscan));
  max-width: none;
  object-fit: cover;
  object-position: var(--crop);
  filter: grayscale(1) contrast(1.7) brightness(.91);
}

.hero-cover-trigger { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; }
.hero-cover-trigger:focus-visible { outline-offset: -5px; }
.hero-cover-art:has(.hero-cover-trigger:focus-visible)::after { box-shadow: inset 0 0 0 4px var(--accent); opacity: 1; }

.hero-cover.is-previewing img,
.hero-covers:not(:has(.is-previewing,.has-options)) .hero-cover:is(:active,:has(:focus-visible)) img,
.hero-covers:not(:has(.is-previewing)) .hero-cover.has-options img { filter: none; }

.hero-cover-options {
  position: absolute;
  z-index: 1;
  left: var(--preview-x);
  top: var(--preview-y);
  translate: -50% -50%;
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.hero-listen {
  pointer-events: auto;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  width: 74px;
  text-align: center;
}

.hero-play-icon {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #171410f5;
  box-shadow: 0 2px 12px #000b;
  font-size: 1.38rem;
}

.hero-listen > :last-child { background: #171410f5; padding: 3px 5px; }
.hero-listen-album .hero-play-icon,
.hero-listen:is(:hover,:focus-visible) .hero-play-icon,
.hero-cover.is-previewing .hero-preview .hero-play-icon { background: var(--accent); color: var(--bg); }
.hero-cover.is-previewing .hero-listen-album { display: none; }
.hero-preview-status { position: absolute; z-index: 1; bottom: 18px; left: 24px; background: var(--bg); color: var(--ink); font-size: .8rem; }
.hero-preview-status:not(:empty) { padding: 5px 8px; }

@media (hover: hover) and (pointer: fine) {
  .hero-covers:not(:has(.is-previewing,.has-options)) .hero-cover:hover img { filter: none; }
}

@media (width > 640px) {
  .hero-cover-options {
    display: grid;
    justify-items: center;
    gap: 5px;
    width: max-content;
  }
  .hero-listen { width: auto; min-width: 120px; gap: 7px; }
  .hero-play-icon { width: clamp(50px,5vw,72px); font-size: 1.75rem; }
  .hero-listen > :last-child { padding: 4px 8px; }
  .hero-cover:not(.is-previewing) .hero-preview .hero-play-icon,
  .hero-preview-track .hero-play-icon { display: none; }
  .hero-cover:not(.is-previewing) .hero-preview,
  .hero-preview-track { min-height: 32px; }
  .hero-cover:not(.is-previewing) .hero-preview > :last-child,
  .hero-preview-track > :last-child {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
  }
  .hero-cover:not(.is-previewing) .hero-preview:is(:hover,:focus-visible) > :last-child,
  .hero-preview-track:is(:hover,:focus-visible) > :last-child { color: var(--accent); }
}

.hero-grain {
  inset: -10%;
  background: url('/assets/gren.png') repeat;
  opacity: .34;
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative;
  pointer-events: none;
  min-height: min(665px,calc(100svh - 72px));
  display: flex;
  align-items: center;
  padding-block: clamp(54px,8vw,102px) 94px;
}

.hero-inner :is(a,button) { pointer-events: auto; }

.hero h1 { width: clamp(235px,30vw,376px); margin-left: -.2em; pointer-events: auto; }
.hero h1 img { width: 100%; height: auto; }
.hero-copy { max-width: 34ch; color: var(--ink); font-size: clamp(1rem,1.6vw,1.3rem); line-height: 1.45; margin-top: 19px; }

.hero-actions,.release-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

.motion-button {
  position: absolute;
  right: 0;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #211a13e0;
  border: 1px solid #e4cfb378;
  color: var(--ink);
  font-size: 1.05rem;
}

.motion-button:hover { border-color: var(--accent); color: var(--accent); }
.motion-icon { display: flex; }
.motion-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  visibility: hidden;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .74rem;
}
.motion-button:is(:hover,:focus-visible) .motion-tooltip { visibility: visible; }

.news { padding-block: 32px 38px; }
.news h2,.contact h2 { font-size: clamp(36px,5vw,54px); }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.contact-links,.contact-check { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.contact-dialog-content { padding: 22px; }
.newsletter-bar { margin-top: 20px; padding: 13px 0; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.newsletter-bar p, .legal-reading h3 { margin: 0; }
#newsletter-form { display: grid; gap: 12px; justify-items: start; }
#newsletter-form > label:first-child { width: 100%; }
#newsletter-form label.newsletter-consent { display: flex; align-items: baseline; gap: 8px; }
#newsletter-form input[type="checkbox"] { width: auto; margin: 0; }
.legal-reading { display: flex; flex-direction: column; max-height: min(82dvh, 780px); }
#legal-content { overflow: auto; white-space: pre-line; }
#legal-content h3 { margin-top: 18px; }
.about-quote { margin: 0 0 24px; }
.about-quote blockquote, .about-quote blockquote p { margin: 0; }
.about-quote figcaption { margin-top: 5px; color: var(--muted); }
.legal-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 7px 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.legal-links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .77rem; cursor: pointer; }
.legal-links a:hover, .legal-links button:hover { text-decoration: underline; }
.footer-inner:has(.legal-links) { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
.footer-inner .footer-top { justify-self: end; }
.contact-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#contact-form { display: grid; gap: 12px; margin-top: 18px; }
#contact-form label { display: grid; gap: 5px; }
#contact-form :is(input,textarea) { width: 100%; padding: 9px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
#contact-form textarea { resize: vertical; }
#contact-form [type="submit"] { justify-self: start; }
#contact-status:not(:empty) { margin-top: 12px; }
.contact-check input { max-width: 110px; }

.reactions { position: relative; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.reaction-like,.reaction-views { display: inline-flex; align-items: center; gap: 5px; }
.reaction-like { padding: 4px; border: 1px solid transparent; background: transparent; color: inherit; }
.reaction-like:is(:hover,[aria-pressed="true"]) { color: var(--accent); }
.reaction-like[aria-pressed="true"] { opacity: 1; }
.reaction-like[aria-pressed="true"] svg { fill: currentColor; }
.reaction-status:not(:empty) { position: absolute; z-index: 1; top: 100%; right: 0; width: max-content; padding: 6px; background: var(--panel); }
.media-card .reactions { margin-top: 8px; }
.track-row { grid-template-columns: minmax(0,1fr) auto auto; }
.track-name { min-width: 0; overflow-wrap: anywhere; }
.track-album { display: block; margin-top: 5px; color: var(--muted); font-size: .76rem; }
.track-duration { margin-inline-start: auto; padding-inline: 4px; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

.footer-inner { padding-block: 22px; }
.footer-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.footer-inner .footer-top { flex: none; }

@media (max-width: 640px) {
  .site-header { position: relative; z-index: 5; }
  .masthead {
    position: relative;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(8px,2.5vw,16px);
    min-height: 60px;
    padding-block: 8px;
  }
  .masthead .site-logo { gap: 4px; }
  .masthead .site-logo img:first-child { width: clamp(32px,9vw,45px); height: auto; }
  .masthead .site-logo-lettering { width: clamp(57px,17vw,80px); }
  .mobile-tagline {
    display: block;
    color: var(--muted);
    font-size: clamp(.66rem,3.25vw,.88rem);
    line-height: 1.35;
  }
  .mobile-tagline span { display: block; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 1.15rem;
  }
  .menu-toggle:is(:hover,[aria-expanded="true"]) { border-color: var(--accent); color: var(--accent); }
  .masthead nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto auto;
    min-width: min(250px,100%);
    padding: 5px 12px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 12px 24px #0008;
  }
  .menu-toggle[aria-expanded="true"] + nav { display: grid; }
  .masthead nav a { display: flex; align-items: center; min-height: 44px; padding-inline: 6px; }
  .masthead nav a + a { border-top: 1px solid var(--line); }

  .hero-visual { position: relative; z-index: auto; }
  .hero-visual:has(.hero-covers:empty) { display: none; }
  .hero-covers { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 4px; padding: 4px 4px 0; }
  .hero-cover {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    clip-path: none;
    background: transparent;
  }
  .hero-cover-art { position: relative; aspect-ratio: 1; background: #292929; }
  .hero-cover img { --cover-overscan: 0px; object-fit: contain; object-position: center; }
  .hero-cover-options { position: static; translate: none; justify-content: center; gap: 8px; padding: 8px 4px; background: #211a13; }
  .hero-listen { width: min(70px,calc(50% - 4px)); font-size: .66rem; }
  .hero-play-icon { width: 42px; }
  .hero-visual::after { display: none; }
  .hero-inner { min-height: 0; justify-content: space-between; gap: 12px; padding-block: 12px 16px; }
  .hero h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
  .hero-copy { display: none; }
  .hero-actions { margin-top: 0; }
  .motion-button { position: relative; right: auto; bottom: auto; }
  .hero-preview-status { bottom: 62px; left: 16px; }
  .track-row { grid-template-columns: minmax(0,1fr) auto; }
  .track-row .track-links { grid-row: 2; }
  .track-row .reactions { grid-column: 2; grid-row: 1 / span 2; }
}

.catalog { padding-top: clamp(26px,4vw,55px); border-top: 1px solid var(--line); }
.catalog-heading { margin-bottom: 17px; }
.catalog h2 { font: 680 clamp(38px,6vw,81px)/.9 Geist, system-ui, sans-serif; letter-spacing: -.085em; }
.release-index { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-block: 5px 21px; }
.release-index a { color: var(--muted); font-size: .81rem; text-underline-offset: 4px; }
.release-index a:hover { color: var(--accent); text-decoration: underline; }
.track-catalog { border-top: 1px solid var(--line); padding-bottom: 48px; }
.catalog #music-grid > p { padding-bottom: 32px; }
.release {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid #ffffff32;
  background: #181820;
}
.release::before,.release::after,.release-backdrop { position: absolute; inset: 0; pointer-events: none; }
.release-backdrop { z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; filter: grayscale(1) contrast(1.14); }
.release::before { content: ''; z-index: -2; background: url('/assets/gren.png') repeat; opacity: .44; }
.release::after {
  content: '';
  z-index: -1;
  background: linear-gradient(90deg,#101010ed 0%,#101010aa 39%,#10101035 83%),linear-gradient(0deg,#101010b0,transparent 58%);
}
.album-play-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.album-repeat { display: inline-flex; align-items: center; gap: 6px; padding: 8px; font-size: .84rem; }
.album-repeat input { accent-color: var(--accent); }
.music-dialog-content { padding: 22px; }
#song-content > .text-link { margin-top: 15px; }
.share-address { display: grid; margin-block: 14px; gap: 6px; }
.share-address input { width: 100%; padding: 9px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
#share-status:not(:empty) { margin-top: 10px; }
.share-button { height: 34px; }
.player-actions .icon-button[aria-pressed="true"] { color: var(--accent); border-color: currentColor; }
#player-ended { padding-block: 12px; }
.release-inner {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
  align-items: center;
  gap: clamp(22px,6vw,85px);
  min-height: 100svh;
  padding-block: 52px;
}
.release-meta { color: var(--accent); font-size: .82rem; font-weight: 700; }
.release h3 {
  font: 740 clamp(42px,7vw,106px)/.94 Geist, system-ui, sans-serif;
  letter-spacing: -.085em;
  overflow-wrap: anywhere;
  margin-top: 10px;
}
.release-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.release-platforms .platform { color: var(--ink); background: #0a0b14ae; border-color: #ffffff58; }
.release-platforms .platform:hover { border-color: var(--accent); color: var(--accent); }
.release-art {
  position: relative;
  display: block;
  justify-self: end;
  width: min(360px,100%);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  isolation: isolate;
  container-type: inline-size;
  --pocket: translate(-24cqw,-22cqw);
  --sleeve-angle: rotate(-7deg);
  --platter-plane: scale(.66,.245);
  --record-seated-x: -5.1cqw;
  --record-seated-y: 14.3cqw;
  --record-duration: 5.6s;
  --record-seated: calc(var(--record-duration) * .84);
  --record-volume-duration: .68s;
  --record-arm-start: calc(var(--record-seated) + var(--record-volume-duration));
  --record-arm-duration: .94s;
  --record-contact: calc(var(--record-arm-start) + var(--record-arm-duration));
}
.release-art > span { position: absolute; pointer-events: none; }
.release.is-listening .release-inner { min-height: var(--album-space, 0px); padding-block: 18px; gap: clamp(20px,4vw,58px); }
.release.is-listening .release-art { width: min(360px,100%,max(80px,calc(var(--album-space, 360px) - 54px))); }
.release.is-listening h3 { font-size: clamp(32px,min(7vw,15dvh),106px); }
.record-sleeve,.record-disc {
  left: 49%;
  top: 49%;
  translate: -50% -50%;
  aspect-ratio: 1;
}
.record-sleeve {
  z-index: 5;
  width: 98%;
  border: 1px solid #ffffff78;
  background: #26201b;
  box-shadow: -2px 2px #9a8a76, -4px 4px #3a332b, -6px 6px #1d1814, 0 17px 45px #080609a3;
}
.record-sleeve img,.record-label img { width: 100%; height: 100%; }
.animated-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.08,.92) skewY(-4deg);
  clip-path: polygon(14% 5%,81% 0,98% 82%,55% 100%,0 92%,4% 30%);
  filter: blur(2px) saturate(.85);
  transition: opacity .62s ease, transform .72s cubic-bezier(.25,.75,.25,1),
    clip-path .72s ease, filter .66s ease;
}
.animated-cover.is-animated {
  opacity: 1;
  transform: none;
  clip-path: polygon(0 0,100% 0,100% 100%,55% 100%,0 100%,0 30%);
  filter: none;
}
.record-sleeve:has(.animated-cover) {
  overflow: hidden;
}
.record-sleeve:has(.animated-cover) > img {
  transition: transform .72s cubic-bezier(.25,.75,.25,1), filter .62s ease;
}
.record-sleeve:has(.animated-cover.is-animated) > img {
  transform: scale(1.06,1.12) skewY(3deg);
  filter: blur(2px);
}
.record-loading .record-sleeve:has(.animated-cover) :is(img,canvas) {
  transition: none;
}
.record-sleeve::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#ffe8c239 0%,#150f0d75 1.2%,transparent 3.5% 96%,#ffebd034 100%);
  box-shadow: inset 0 1px #fff5de70, inset -2px 0 #261910c2;
}
.release-art:is(:hover,:focus-visible) .record-sleeve { border-color: var(--accent); }
.record-turntable {
  top: 53%;
  left: 9%;
  width: 90%;
  opacity: 0;
  filter: drop-shadow(0 .9cqw 1.6cqw #000a);
}
.record-body { width: 100%; height: auto; }
.record-front {
  position: absolute;
  inset: 52% 6% 2% 6%;
}
.record-meter,.record-knob,.record-led { position: absolute; }
.record-meter {
  top: 19.6%;
  left: 8%;
  width: 29.6%;
  height: 60.8%;
  overflow: hidden;
  border: max(1px,.55cqw) solid #1b1a18;
  border-bottom-color: #53504c;
  border-radius: .65cqw;
  background: radial-gradient(ellipse at 50% 72%,#fff,#f2f2f0 70%,#c9c9c6);
  color: #252525;
  box-shadow: 0 1px #b0aaa338;
}
.record-meter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(162deg,#ffffff24,transparent 43%);
  box-shadow: inset 0 .9cqw 1.15cqw -.28cqw #14151583, inset 0 0 .5cqw #2225;
}
.record-meter::before {
  content: '';
  position: absolute;
  inset: 17% 4% 14%;
  background:
    conic-gradient(from 302deg at 50% 100%,#2d251e 0 80deg,#9a3326 80deg 116deg,transparent 116deg);
  mask:
    radial-gradient(ellipse at 50% 100%,transparent 0 53%,#000 54% 56%,transparent 57%),
    radial-gradient(ellipse at 50% 100%,transparent 0 54%,#000 55% 64%,transparent 65%) intersect,
    repeating-conic-gradient(from 302deg at 50% 100%,#000 0 2deg,transparent 2deg 10deg);
}
.record-meter-scale {
  position: absolute;
  inset: 8% 12% auto;
  display: flex;
  justify-content: space-between;
  font: 700 1.55cqw/1 Geist,sans-serif;
  font-variant-numeric: tabular-nums;
}
.record-meter-scale span:first-child,.record-meter-scale span:last-child { translate: 0 .72cqw; }
.record-meter-scale span:nth-last-child(-n+2) { color: #8e3025; }
.record-meter-unit {
  position: absolute;
  top: 59%;
  left: 50%;
  translate: -50% 0;
  font: 800 2.08cqw/1 Geist,sans-serif;
  letter-spacing: .12em;
}
.record-needle {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: max(1px,.34cqw);
  height: 66%;
  background: #862e24;
  transform-origin: 50% 100%;
  transform: rotate(-48deg);
}
.record-needle::after {
  content: '';
  position: absolute;
  bottom: -.65cqw;
  left: 50%;
  translate: -50% 0;
  width: 1.65cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 26%,#dcbb86,#583a26 70%);
}
.record-knob {
  top: 50%;
  width: 7%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid #241d17;
  border-radius: 50%;
  background: #1d1a17;
  box-shadow: 0 .7cqw 0 #161412, 0 1.35cqw 1.7cqw #000b;
}
.record-bass { left: 49%; }
.record-treble { left: 63%; }
.record-volume { left: 82%; width: 11.5%; }
.record-knob-label {
  position: absolute;
  top: calc(100% + 1.2cqw);
  left: 50%;
  translate: -50% 0;
  color: #dddbd6;
  font: 650 max(4px,1.65cqw)/1 Geist,sans-serif;
  letter-spacing: .06em;
}
.record-knob-cap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-radial-gradient(circle,#f2e5d319 0 .3px,#0b090817 .6px .8px),
    conic-gradient(from 18deg,#675e53,#c2b5a4 71deg,#49443f 148deg,#9d8f7d 211deg,#ded1bf 288deg,#675e53);
  box-shadow: inset 0 0 0 1px #e0d0b378;
}
.record-volume .record-knob-cap { transform: rotate(-38deg); }
.record-knob-cap::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: max(1px,.55cqw);
  height: 22%;
  border-radius: 2px;
  background: #221b16;
  box-shadow: 0 1px #e8dbc36a;
}
.record-led {
  top: 27%;
  left: 92%;
  width: 2.4cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: max(1px,.25cqw) solid #201914;
  border-radius: 50%;
  background: #bd332b;
  box-shadow: inset 0 .5px 1px #fff8, 0 0 .9cqw #df312788;
}
.record-disc {
  z-index: 1;
  width: 78%;
  opacity: 0;
}
.record-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #101012 url('/assets/pikap-plak.jpg') center / cover no-repeat;
  box-shadow: 0 2px 1px #080707b3, 0 5px 10px #0008;
}
.record-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.record-label {
  display: block;
  position: relative;
  overflow: hidden;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #a1937d55, inset 0 1px #f8eddf3c;
  filter: brightness(.91) saturate(.86);
}
.record-label::after {
  content: '';
  position: absolute;
  inset: 46%;
  border-radius: 50%;
  background: #201d1c;
}
.record-spindle {
  z-index: 2;
  left: calc(49% + var(--record-seated-x));
  top: calc(49% + var(--record-seated-y));
  translate: -50% -90%;
  width: 1.45cqw;
  height: 2.35cqw;
  border-radius: 48% 48% 28% 28% / 32% 32% 15% 15%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 45% 9%,#fff8ec 4%,#e6ddd2aa 25%,transparent 46%),
    linear-gradient(90deg,#413c39,#d9d3cc 33%,#a59a91 54%,#413d39 93%);
  box-shadow: 0 .45cqw .65cqw #000b;
}
.record-tonearm {
  z-index: 3;
  top: 52.5%;
  left: 81%;
  width: 13%;
  height: 29%;
  opacity: 0;
}
.record-tonearm::before {
  content: '';
  position: absolute;
  left: 24%;
  top: 18%;
  width: 44%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%,#b8aaa1 0 14%,#4f4944 34%,#171413 62%,#776b61 69%,#211e1b 74%);
  box-shadow: 0 .65cqw .9cqw #000a;
}
.record-arm-rest {
  position: absolute;
  left: 70%;
  top: 54%;
  translate: -50% 0;
  width: 3.5cqw;
  height: 4cqw;
  border-radius: 20% 20% 50% 50% / 12% 12% 40% 40%;
  background:
    linear-gradient(90deg,#282522,#a39a91 39%,#5b5550 66%,#262321) center top / 43% 82% no-repeat,
    radial-gradient(ellipse at 48% 75%,#615951 14%,#282421 44%,transparent 52%) center bottom / 100% 72% no-repeat;
}
.record-arm-rest::before {
  content: '';
  position: absolute;
  inset: 0 4% auto;
  height: 39%;
  border: .5cqw solid #292522;
  border-top: 0;
  border-radius: 0 0 48% 48%;
  box-shadow: 0 .25cqw .25cqw #0008, inset 0 -.36cqw #a3988d;
}
.record-arm-plane {
  position: absolute;
  inset: 0;
  transform: scaleY(.57);
  transform-origin: 24% 18%;
}
.record-arm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: rotate(-14deg);
  transform-origin: 24% 18%;
}
.record-loading .record-sleeve { animation: stow-sleeve var(--record-duration) both; }
.record-loading .record-turntable { animation: reveal-deck var(--record-duration) both; }
.record-loading .record-disc {
  animation: load-record var(--record-duration) both,
    seat-record-layer 1ms var(--record-seated) step-end both;
}
.record-loading .record-face { animation: spin-record 1.6s var(--record-seated) linear infinite; }
.record-loading .record-spindle { animation: reveal-spindle 1ms var(--record-seated) step-end forwards; }
.record-loading .record-tonearm { animation: reveal-tonearm var(--record-duration) both; }
.record-loading .record-arm { animation: lower-arm var(--record-arm-duration) var(--record-arm-start) both; }
.record-loading .record-led { animation: light-led .18s calc(var(--record-seated) + .34s) both; }
.record-loading .record-volume .record-knob-cap { animation: raise-volume var(--record-volume-duration) var(--record-seated) ease-in-out both; }
.record-loading .record-needle { animation: meter-pulse 1.57s calc(var(--record-contact) + 1s) ease-in-out infinite; }

@keyframes stow-sleeve {
  0%,5% { transform: none; }
  22%,51% { transform: var(--pocket) var(--sleeve-angle) scale(.49); }
  69%,100% { transform: var(--pocket) translateY(-6cqw) var(--sleeve-angle) scale(.49); }
}
@keyframes reveal-deck {
  0%,19% { opacity: 0; transform: translateY(9%); }
  43%,100% { opacity: 1; transform: translateY(0); }
}
@keyframes load-record {
  0%,22% { opacity: 0; transform: var(--pocket) var(--sleeve-angle) translateX(0) scale(.55); }
  23% {
    opacity: 1;
    transform: var(--pocket) var(--sleeve-angle) translateX(0) scale(.55);
    animation-timing-function: ease-in-out;
  }
  51% { opacity: 1; transform: var(--pocket) var(--sleeve-angle) translateX(47cqw) scale(.55); }
  60% { opacity: 1; transform: translate(21cqw,5cqw) var(--platter-plane); }
  72% {
    opacity: 1;
    transform: translate(var(--record-seated-x),7cqw) var(--platter-plane);
    animation-timing-function: ease-out;
  }
  84%,100% {
    opacity: 1;
    transform: translate(var(--record-seated-x),var(--record-seated-y)) var(--platter-plane);
  }
}
@keyframes seat-record-layer {
  from { z-index: 4; }
  to { z-index: 1; }
}
@keyframes lower-arm {
  0% { transform: rotate(-14deg) rotateX(0deg); }
  18% { transform: rotate(-14deg) rotateX(-18deg); }
  75% { transform: rotate(60deg) rotateX(-18deg); }
  100% { transform: rotate(61deg) rotateX(0deg); }
}
@keyframes reveal-tonearm {
  0%,19% { opacity: 0; transform: translateY(3.5cqw); }
  43%,100% { opacity: 1; transform: translateY(0); }
}
@keyframes spin-record { to { rotate: 360deg; } }
@keyframes reveal-spindle { to { opacity: 1; } }
@keyframes light-led {
  to { background: #7bd778; box-shadow: inset 0 .5px 1px #fff8, 0 0 .9cqw #83d978a0; }
}
@keyframes raise-volume {
  from { transform: rotate(-38deg); }
  to { transform: rotate(19deg); }
}
@keyframes meter-pulse {
  0%,100% { transform: rotate(-48deg); }
  12% { transform: rotate(30deg); }
  28% { transform: rotate(-18deg); }
  41% { transform: rotate(44deg); }
  59% { transform: rotate(-8deg); }
  67% { transform: rotate(19deg); }
  80% { transform: rotate(-29deg); }
  89% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .record-loading :is(.record-sleeve,.record-turntable,.record-disc,.record-face,.record-spindle,.record-tonearm,.record-arm,.record-led,.record-needle),
  .record-loading .record-volume .record-knob-cap {
    animation: none;
  }
}

@media (max-width: 640px) {
  .release-inner { grid-template-columns: minmax(0,1fr); align-content: center; gap: 22px; padding-block: 35px; }
  .release-copy { grid-row: 2; }
  .release-art { grid-row: 1; justify-self: start; width: min(190px,52vw); }
  .release::after { background: linear-gradient(0deg,#101010ec 2%,#101010cb 36%,#10101044 100%); }
  .release h3 { font-size: clamp(41px,12vw,65px); }
  .footer-platforms { order: 3; width: 100%; }
  .footer-inner:has(.legal-links) { grid-template-columns: 1fr auto; }
  .footer-platforms, .legal-links { grid-column: 1 / -1; }
  .legal-links { order: 4; }
  .release.is-listening .release-inner { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-content: center; gap: 8px 12px; padding-block: 10px; }
  .release.is-listening .release-copy { display: contents; }
  .release.is-listening .release-heading { grid-area: 1 / 1; }
  .release.is-listening .release-art { grid-area: 1 / 2; justify-self: end; width: min(100%,180px,max(80px,calc(var(--album-space, 220px) - 120px))); }
  .release.is-listening :is(.release-actions,.release-platforms) { grid-column: 1 / -1; }
  .release.is-listening h3 { font-size: clamp(28px,7vw,46px); margin-top: 5px; }
  .release.is-listening :is(.release-actions,.release-platforms) { gap: 4px; margin-top: 0; }
  .release.is-listening .release-actions .button { min-height: 30px; padding: 4px 7px; font-size: .75rem; }
  .release.is-listening .release-platforms .platform { min-height: 25px; padding: 3px 6px; font-size: .68rem; }
}
@media (480px <= width <= 640px) and (max-height:450px){
  .release.is-listening .release-copy { display: block; grid-area: 1 / 1; }
  .release.is-listening .release-art { width: min(100%,calc(var(--album-space, 185px) - 36px)); }
  .release.is-listening :is(.release-actions,.release-platforms) { margin-top: 6px; }
}