:root {
  scrollbar-gutter: stable;
  --cover-iridescence: .15;
  --bloom: 1;
  --backglow: 0;
  color-scheme: light;
  --background: #f5f4f0;
  --text: #30322f;
  --muted: #70736b;
  --accent: #859079;
  --rule: #393e3024;
  --wash-one: #dfdbe02b;
  --wash-two: #e6ddca38;
  --grain-opacity: .09;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #080909;
  --text: #e2e3dc;
  --muted: #a4a79d;
  --accent: #a4af98;
  --rule: #d6dcc624;
  --wash-one: #46404b0c;
  --wash-two: #53533c08;
  --grain-opacity: .085;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 14% 43%, var(--wash-one), transparent 55%), radial-gradient(ellipse at 85% 65%, var(--wash-two), transparent 55%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: var(--grain-opacity);
  pointer-events: none;
  background-image: url("grain.svg");
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 7px; }
svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1; flex-shrink: 0; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { position: relative; z-index: 1; max-width: 1352px; min-height: 100svh; margin: auto; padding: 0 76px; display: flex; flex-direction: column; overflow-x: clip; }
.header { display: flex; justify-content: space-between; align-items: center; padding-top: 43px; }
.identity { font-size: 17px; letter-spacing: -.6px; font-weight: 500; }
.identity-dot { color: var(--accent); }
nav { display: flex; align-items: center; gap: 29px; font-size: 12px; color: var(--muted); }
nav a, .listening-links a, footer a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
nav a:hover, .listening-links a:hover, footer a:hover { color: var(--text); }
nav .current { color: var(--text); position: relative; }
nav .current::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); bottom: -2px; left: 50%; }
main { padding: 94px 0 76px; }
.intro { text-align: center; margin-bottom: 65px; }
h1 { margin: 0; font-size: clamp(54px, 6vw, 76px); line-height: 1; font-weight: 400; letter-spacing: -.065em; }
.intro-aside { margin-top: 22px; }
.listening-links { display: flex; justify-content: center; color: var(--muted); gap: 23px; font-size: 11px; }
h2 { font: inherit; margin: 0; }
.release-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 48px; max-width: 1120px; margin: auto; }
.release { min-width: 0; }
.effect-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; margin: -20px 0 36px; }
.effect-controls[hidden] { display: none; }
.effect-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.effect-control input { width: 96px; accent-color: var(--accent); cursor: pointer; }
.effect-control input:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.effect-control output { width: 4ch; font-variant-numeric: tabular-nums; }
.surface-bloom { position: absolute; left: -12.5%; top: -12.5%; width: 125%; height: 125%; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--hover-glow, 0) * var(--bloom)); z-index: 2; }
.artwork::before { content: ""; position: absolute; inset: 3%; background: var(--glow-color, transparent); filter: blur(30px); transform: scale(1.07); opacity: calc(var(--hover-glow, 0) * var(--backglow)); pointer-events: none; }
.material-control { display: flex; justify-content: center; align-items: center; gap: 12px; margin: -20px 0 36px; color: var(--muted); font-size: 11px; }
.material-control[hidden] { display: none; }
.material-control input { width: 140px; accent-color: var(--accent); cursor: pointer; }
.material-control input:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.material-control output { min-width: 4ch; font-variant-numeric: tabular-nums; }
.material-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.has-material .cover-iridescence, .has-material .sheen, .has-material .release-year { visibility: hidden; }
/* The stable link is the hit area; only its inner sleeve rotates. */
.artwork { position: relative; display: block; perspective: 1400px; aspect-ratio: 1; -webkit-tap-highlight-color: transparent; }
.sleeve {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  --light-x: 50%;
  --light-y: 50%;
  --shine: 0;
  --year-opacity: 0;
  --foil-position: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 2px 3px #25221e0a, 0 10px 20px -10px #25221e26;
  transition: box-shadow 350ms ease;
}
.sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.sleeve::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.sheen { position: absolute; inset: 0; pointer-events: none; opacity: var(--shine); background: radial-gradient(ellipse 110% 95% at var(--light-x) var(--light-y), #ffffff85 0%, #ffffff4d 28%, #ffffff1a 58%, transparent 88%); mix-blend-mode: screen; }
/* SVG masks avoid Firefox's transformed background-clip:text clipping and paint differences. */
.release-year {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  font-size: 0;
  color: transparent;
  -webkit-mask: var(--year-mask) center / 100% 100% no-repeat;
  mask: var(--year-mask) center / 100% 100% no-repeat;
}
.release-year[data-year="2020"] { --year-mask: url("images/masks/year-2020.svg"); }
.release-year[data-year="2021"] { --year-mask: url("images/masks/year-2021.svg"); }
.release-year[data-year="2023"] { --year-mask: url("images/masks/year-2023.svg"); }
.release-year[data-year="2025"] { --year-mask: url("images/masks/year-2025.svg"); }
.cover-iridescence, .year-iridescence {
  background-image: linear-gradient(115deg, #79a8d4 5%, #dda1d0 23%, #8cd9d0 39%, #e8d49c 52%, #afa1d5 67%, #8bd1c8 83%, #cf9abe 97%);
  background-size: 180% 100%;
  background-position: var(--foil-position) 50%;
  mix-blend-mode: hard-light;
}
.cover-iridescence {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--shine) / .9 * var(--cover-iridescence));
}
.year-iridescence { opacity: calc(var(--year-opacity) * .64); }
.year-specular {
  background-image: radial-gradient(ellipse 65% 170% at var(--light-x) var(--light-y), #ffffffd9 0%, #ffffff73 23%, #ffffff14 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: calc(var(--year-opacity) * .42);
}
.artwork.is-active .sleeve { will-change: transform; box-shadow: 0 5px 10px -4px #00000026, 0 24px 38px -14px #00000040; }
:root[data-theme="dark"] .artwork.is-active .sleeve { box-shadow: 0 5px 12px -4px #00000066, 0 26px 42px -12px #00000099; }
.registration { position: absolute; font: 300 12px/1 monospace; color: var(--muted); pointer-events: none; transition: color 250ms, transform 250ms; }
.registration-start { top: -17px; left: -17px; }
.registration-end { bottom: -17px; right: -17px; }
.artwork:is(:hover, :focus-visible) .registration { color: var(--text); transform: translateY(-1px); }
.caption { margin-top: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; }
.caption h3 { min-width: 0; }
.streaming-links { display: flex; flex: none; align-self: flex-start; gap: 2px; color: var(--muted); }
.streaming-links a { display: grid; place-items: center; width: 32px; min-height: 32px; margin-top: -5px; }
.streaming-links a:hover { color: var(--text); }
.streaming-links svg { width: 16px; height: 16px; }
.streaming-links a[href^="https://soundcloud.com/"] svg { width: 20px; height: 20px; transform: translateY(1px); }
h3 { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: -.15px; line-height: 1.5; overflow-wrap: anywhere; }
h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
footer { margin-top: auto; padding: 0 0 30px; display: flex; justify-content: center; color: var(--muted); font-size: 11px; }
@media (min-width: 1600px) { .page { max-width: 1432px; } }
@media (max-width: 900px) {
  .page { padding: 0 36px; }
  .release-grid { gap: 24px; }
  .intro { margin-bottom: 55px; }
}
@media (max-width: 620px) {
  .page { padding: 0 26px; }
  .header { padding-top: 25px; gap: 12px; flex-wrap: wrap; }
  nav { gap: 17px; font-size: 11px; }
  nav a svg { display: none; }
  main { padding-top: 76px; padding-bottom: 60px; }
  .intro { display: block; margin-bottom: 42px; }
  .intro-aside { margin-top: 28px; }
  .release-grid { grid-template-columns: 1fr; gap: 42px; }
  .caption { margin-top: 19px; }
  footer { align-items: flex-start; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sleeve { transform: none; transition: none; }
  .sheen { display: none; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle[hidden] { display: inline-grid; }
:root:not([data-theme]) .theme-toggle[hidden] { visibility: hidden; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 19px; height: 19px; }

/* Content passes over the fading title layer; navigation scrolls normally. */
.scroll-layers .intro { position: sticky; top: calc(var(--menu-height, 100px) + 40px); z-index: 0; }
.scroll-layers .releases, .scroll-layers .article-index { position: relative; z-index: 1; }

.page-entering main { opacity: 0; }
.transition-source { opacity: 0 !important; }
.page-transcription { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.sleeve[role="button"] { cursor: pointer; }
.sleeve[role="button"]:focus-visible { outline: 1px solid var(--text); outline-offset: 5px; }
.artwork-transcribing > :not(.artwork-transcription),
.artwork-transcribing::after { opacity: var(--artwork-solid, 1) !important; }
.artwork-transcription { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .page-entering main, .transition-source { opacity: 1 !important; }
  .page-transcription { display: none; }
}