@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

:root {
  --desk: #242422;
  --paper: #d9d7d0;
  --ink: #151515;
  --soft-ink: #777670;
  --mono: 'DM Mono', 'Courier New', monospace;
  --sans: 'Manrope', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--desk); color: var(--ink); font-family: var(--mono); }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; cursor: pointer; }
[hidden] { display: none !important; }

.site-shell { min-height: 100svh; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 48%, #3a3937 0, #252523 70%); }
.paper-stage { --sheet-width: min(calc(100vw - 32px), calc((100svh - 32px) * .76)); width: 100%; min-height: calc(100svh - 32px); display: grid; place-items: center; }
.paper-sheet {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: var(--sheet-width);
  aspect-ratio: 210 / 297;
  display: flex;
  flex-direction: column;
  padding: 7.2% 7.4% 5.5%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 20px 70px rgba(0,0,0,.52), 0 2px 5px rgba(0,0,0,.32), inset 0 0 0 1px rgba(30,28,24,.16), inset 7px 0 15px rgba(30,28,24,.08), inset -5px 0 13px rgba(30,28,24,.06);
  transform: rotate(-.18deg);
}
.paper-sheet::before { position: absolute; z-index: 0; inset: 0; content: ''; pointer-events: none; background: url('assets/paper-grain.svg') repeat; opacity: .5; mix-blend-mode: multiply; }
.paper-sheet::after, .about-panel::after { position: absolute; z-index: 0; inset: 0; content: ''; pointer-events: none; background: linear-gradient(90deg, rgba(36,34,29,.2), transparent 2.4%, transparent 97.2%, rgba(36,34,29,.18)), linear-gradient(0deg, rgba(36,34,29,.14), transparent 2.6%, transparent 97.6%, rgba(36,34,29,.12)), radial-gradient(ellipse at 1% 49%, rgba(22,21,18,.18) 0 .35%, transparent 1.25%), radial-gradient(ellipse at 99% 82%, rgba(22,21,18,.16) 0 .4%, transparent 1.4%), radial-gradient(circle at 13% 23%, rgba(22,21,18,.34) 0 .13%, transparent .35%), radial-gradient(circle at 86% 67%, rgba(22,21,18,.3) 0 .11%, transparent .32%), radial-gradient(circle at 75% 13%, rgba(22,21,18,.24) 0 .1%, transparent .29%); opacity: .82; mix-blend-mode: multiply; }
.paper-sheet > *, .about-panel > * { position: relative; z-index: 1; }
.paper-header { display: grid; grid-template-columns: 31% 31% 20% 18%; align-items: start; gap: 0; }
.paper-brand { display: block; width: 17cqw; height: auto; }
.paper-brand img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.paper-heading { margin: .2cqw 0 0; font: 800 3.2cqw/.98 var(--sans); letter-spacing: -.055em; text-transform: uppercase; }
.paper-year { margin: .2cqw 0 0; font: 700 3.2cqw/1 var(--sans); letter-spacing: -.04em; }
.about-trigger { justify-self: end; padding: .3cqw 0; background: transparent; color: var(--ink); font: 500 1.3cqw/1.15 var(--mono); letter-spacing: .06em; }
.about-trigger:hover, .close-about:hover { opacity: .55; }
.archive-stamp { position: absolute; z-index: 1; top: 26%; right: 11%; width: 12cqw; height: 12cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; border: .38cqw double rgba(39,84,181,.58); border-radius: 50%; color: rgba(39,84,181,.72); text-align: center; transform: rotate(9deg); }
.archive-stamp span, .archive-stamp small { font: 500 1.05cqw/1 var(--mono); letter-spacing: .04em; }
.archive-stamp strong { margin: .45cqw 0; font: 800 1.65cqw/.9 var(--sans); letter-spacing: -.05em; }

.catalog-list { display: flex; flex-direction: column; gap: 1cqw; margin-top: 43cqw; }
.catalog-row { display: grid; grid-template-columns: 19% 17% 23% 22% 19%; align-items: start; margin: 0; font: 600 2.1cqw/1.45 var(--sans); letter-spacing: -.025em; text-transform: uppercase; }
.catalog-artist, .catalog-date, .catalog-release { margin: 0; font: inherit; }
.catalog-artist-long { font-size: 1.4cqw; line-height: 1.25; letter-spacing: -.045em; overflow-wrap: anywhere; }
.catalog-artist-edphorix { display: flex; align-items: center; gap: .8cqw; white-space: nowrap; }
.catalog-artist-edphorix > span:last-child { font: 700 1.95cqw/1.15 var(--sans); letter-spacing: -.04em; }
.catalog-signature { position: relative; display: inline-block; color: #2754b5; font: 600 2.8cqw/.8 'Caveat', 'Segoe Print', cursive; letter-spacing: -.08em; text-transform: lowercase; transform: rotate(-11deg); }
.catalog-signature::after { position: absolute; right: 4%; bottom: -.45cqw; left: 8%; height: .4cqw; content: ''; border-top: max(.14cqw, 1px) solid #2754b5; border-radius: 50%; transform: rotate(-5deg); }
.catalog-date { font-weight: 700; }
.hand-note { display: block; margin: .25cqw 0 0 1cqw; color: #2754b5; font: 600 2.5cqw/1 'Caveat', 'Segoe Print', cursive; letter-spacing: -.04em; text-transform: lowercase; transform: rotate(-7deg); }
.hand-note-red { color: #f04432; }
.hand-note-blue { color: #1748c5; text-shadow: .055cqw .04cqw rgba(23,72,197,.34), -.025cqw 0 rgba(23,72,197,.18); }
.artist-note { width: max-content; max-width: 100%; margin: .5cqw 0 0 .15cqw; font-size: 2.15cqw; transform: rotate(-5deg); }
.artist-circle { position: relative; display: inline-block; padding: 0 .35cqw; }
.artist-circle::after { position: absolute; inset: -.35cqw -.55cqw; content: ''; border: max(.16cqw, 1px) solid #f04432; border-radius: 50%; transform: rotate(-8deg); pointer-events: none; }
.catalog-date-unknown { color: #85847e; }
.catalog-release { display: flex; flex-direction: column; gap: .7cqw; }
.catalog-release strong { font: 700 2.1cqw/1.25 var(--sans); }
.catalog-release-long strong { font-size: 1.6cqw; line-height: 1.2; }
.catalog-release span { font: 500 1.55cqw/1.3 var(--mono); letter-spacing: .04em; }
.catalog-release .release-note { width: max-content; max-width: 150%; margin: -.15cqw 0 0 -.2cqw; font-size: 2.1cqw; line-height: .9; letter-spacing: -.04em; transform: rotate(-4deg); }
.hand-annotation { display: inline-block; color: #2754b5; font: 600 2.25cqw/.85 'Caveat', 'Segoe Print', cursive; letter-spacing: -.06em; text-transform: lowercase; transform: rotate(-7deg); vertical-align: .03em; white-space: nowrap; }
.hand-annotation.hand-note-red { color: #f04432; }
.hand-annotation.hand-note-blue { color: #1748c5; text-shadow: .055cqw .04cqw rgba(23,72,197,.34), -.025cqw 0 rgba(23,72,197,.18); }
.catalog-link { display: flex; flex-direction: column; align-items: flex-start; gap: .7cqw; font: 700 1.75cqw/1.2 var(--sans); letter-spacing: -.02em; }
.listen-circle { position: relative; display: inline-block; padding: .25cqw .6cqw; }
.listen-circle::before, .listen-circle::after { position: absolute; content: ''; pointer-events: none; border-radius: 48% 52% 46% 54% / 53% 45% 55% 47%; }
.listen-circle::before { inset: -.35cqw -.8cqw; border: max(.19cqw, 1px) solid #171717; transform: rotate(-6deg); }
.listen-circle::after { inset: -.47cqw -.56cqw; border: max(.1cqw, .7px) solid rgba(20,20,20,.63); transform: rotate(3deg); }
.catalog-link small { font: 500 1.25cqw/1.3 var(--mono); letter-spacing: .025em; }
.catalog-link:hover { opacity: .55; }
.catalog-artwork { justify-self: start; padding: 0; background: transparent; color: #2754b5; font: 600 2.35cqw/1 'Caveat', 'Segoe Print', cursive; letter-spacing: -.045em; text-transform: lowercase; transform: rotate(-7deg); }
.catalog-artwork::after { display: block; height: .28cqw; margin-top: .08cqw; content: ''; border-top: max(.13cqw, 1px) solid currentColor; border-radius: 50%; transform: rotate(-2deg); }
.catalog-artwork:hover, .catalog-artwork:focus-visible { color: #a33b2a; }
.cover-peek { position: fixed; z-index: 20; width: clamp(160px, 19vw, 255px); padding: 7px 7px 8px; background: #e8e5dc; box-shadow: 0 12px 32px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.3); transform: rotate(-2deg); pointer-events: none; }
.cover-peek img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cover-peek span { display: block; padding: 7px 3px 0; color: #272722; font: 500 9px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.cover-peek.is-placeholder { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cover-peek.is-placeholder span { color: #2754b5; font: 600 18px/1.15 'Caveat', 'Segoe Print', cursive; }
.catalog-row-archive:nth-of-type(3n) { opacity: .72; }
.catalog-row-archive:nth-of-type(4n) { opacity: .86; }
.catalog-row-sudakov .catalog-artist, .catalog-row-sudakov .catalog-release { text-shadow: .18cqw .08cqw rgba(39,84,181,.32), -.08cqw 0 rgba(153,82,68,.14); }
.catalog-row-archive:nth-of-type(3n) .catalog-release strong { text-shadow: .12cqw .04cqw rgba(39,84,181,.25); }

.paper-footer { display: flex; justify-content: space-between; gap: 2cqw; margin-top: auto; font: 500 1.2cqw/1.3 var(--mono); letter-spacing: .035em; }

.overlay { position: fixed; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; padding: 16px; background: var(--desk); }
.overlay-scrim { display: none; }
.about-panel { position: relative; isolation: isolate; container-type: inline-size; flex: 0 0 auto; margin-block: auto; width: min(calc(100vw - 32px), calc((100svh - 32px) * .76)); min-height: 0; aspect-ratio: 210 / 297; display: flex; flex-direction: column; padding: 7.2% 7.4% 5.5%; overflow: hidden; background: var(--paper) url('assets/paper-grain.svg') repeat; box-shadow: 0 20px 70px rgba(0,0,0,.52), inset 0 0 0 1px rgba(30,28,24,.16), inset 7px 0 15px rgba(30,28,24,.08); transform: rotate(.18deg); }
.about-panel-top { display: flex; justify-content: space-between; align-items: flex-start; }
.about-panel-top img { width: 17cqw; height: auto; mix-blend-mode: multiply; }
.about-side-label { margin: .3cqw auto 0; font: 500 1.3cqw/1.15 var(--mono); letter-spacing: .06em; }
.close-about { padding: .3cqw 0; background: transparent; color: var(--ink); font: 500 1.3cqw/1.15 var(--mono); letter-spacing: .06em; }
.about-copy { width: 74cqw; margin: auto; color: #282722; font: 500 1.9cqw/1.75 var(--sans); }
.about-copy::before { display: block; margin-bottom: 2.4cqw; color: var(--soft-ink); content: 'ABOUT THE LABEL / 01'; font: 500 1.25cqw/1.2 var(--mono); letter-spacing: .08em; }
.about-copy p { margin: 0 0 3cqw; }
.about-copy .manifesto { margin-bottom: 4cqw; color: #111; font: 800 3.2cqw/1.4 var(--sans); letter-spacing: -.04em; }
.about-panel-bottom { display: flex; justify-content: space-between; gap: 2cqw; margin-top: auto; font: 500 1.2cqw/1.3 var(--mono); letter-spacing: .035em; }
button:focus-visible, a:focus-visible { outline: .3cqw solid #111; outline-offset: .5cqw; }

@media (max-width: 700px) {
  .site-shell { min-height: 100svh; padding: 0; }
  .paper-stage { --sheet-width: 100vw; min-height: 100svh; }
  .paper-sheet { width: 100%; min-height: 100svh; aspect-ratio: auto; overflow: visible; padding: 34px 25px 24px; transform: none; }
  .paper-header { grid-template-columns: 29% 32% 17% 22%; }
  .paper-brand { width: 77px; }
  .paper-brand img { width: 100%; height: auto; }
  .archive-stamp { top: 135px; right: 8%; width: 42px; height: 42px; border-width: 1.5px; }
  .archive-stamp span, .archive-stamp small { font-size: 4px; }
  .archive-stamp strong { margin: 2px 0; font-size: 7px; }
  .paper-heading, .paper-year { font-size: clamp(11px, 3.3vw, 15px); }
  .about-trigger { font-size: 7px; }
  .catalog-list { gap: 11px; margin-top: 39vw; }
  .catalog-row { grid-template-columns: 22% 15% 25% 19% 19%; font-size: clamp(9px, 2.45vw, 12px); line-height: 1.45; }
  .catalog-artist-edphorix { gap: 3px; }
  .catalog-artist-edphorix > span:last-child { font-size: 8px; }
  .catalog-artist-long { font-size: clamp(6px, 1.65vw, 8px); line-height: 1.25; }
  .catalog-signature { font-size: 8px; }
  .hand-note { margin: 2px 0 0 3px; font-size: 8px; }
  .artist-note { margin: 2px 0 0 1px; font-size: 7px; }
  .artist-circle { padding: 0 2px; }
  .artist-circle::after { inset: -2px -4px; border-width: 1px; }
  .catalog-release { gap: 4px; }
  .catalog-release strong { font-size: inherit; }
  .catalog-release-long strong { font-size: 7px; line-height: 1.2; }
  .catalog-release span { font-size: 7px; }
  .catalog-release .release-note { margin: -1px 0 0 -1px; font-size: 7px; }
  .hand-annotation { font-size: 8px; }
  .catalog-link { gap: 4px; font-size: 9px; }
  .listen-circle { padding: 2px 4px; }
  .catalog-link small { font-size: 6px; overflow-wrap: anywhere; }
  .catalog-artwork { font-size: 10px; }
  .catalog-artwork::after { height: 1px; margin-top: 1px; }
  .cover-peek { width: min(48vw, 190px); padding: 5px 5px 6px; }
  .cover-peek span { padding: 5px 2px 0; font-size: 7px; }
  .paper-footer { gap: 12px; font-size: 6px; }
  .about-panel { width: 100%; min-height: calc(100svh - 32px); aspect-ratio: auto; padding: 34px 25px 24px; }
  .about-panel-top img { width: 77px; height: auto; }
  .about-side-label { font-size: 7px; }
  .close-about { font-size: 7px; }
  .about-copy { width: 100%; font-size: 12px; }
  .about-copy .manifesto { font-size: 21px; }
  .about-panel-bottom { gap: 12px; font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }