/* Paper-collage look: kraft paper page, ripped-magazine cut-out letters,
   taped-down photos and scraps. No external assets at runtime (see CLAUDE.md
   rules) — the two handwriting fonts are self-hosted woff2 files in
   /fonts/ (SIL OFL, see fonts/LICENSE.txt). */

/* Caveat: bigger handwritten titles. Reenie Beanie: messy ballpoint scrawl
   for the small annotations. Both run small for their em size, so uses
   below bump font-size vs the old typewriter values. */
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Reenie Beanie";
  src: url("/fonts/reenie-beanie-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #d9c9a8;
  --ink: #2c2418;
  --ink-soft: #6a5c44;
  --scrap: #f5efdf;
  --red: #bc3f2b;
  --tape: rgba(228, 213, 168, 0.82);
  --maxw: 480px;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --scrawl: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    radial-gradient(ellipse 90% 55% at 25% 5%, rgba(120, 95, 55, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 45% at 80% 90%, rgba(110, 85, 50, 0.2), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family: "American Typewriter", "Courier New", Courier, monospace;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* film grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 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='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: multiply;
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 18px 90px;
}

a:focus-visible {
  outline: 2px dashed var(--red);
  outline-offset: 3px;
}

.hidden { display: none; }

.icon { width: 22px; height: 22px; flex: none; }

/* ── Artist name: ripped magazine cut-out letters ──
   app.js splits artist.name into .word > .ltr.vN spans (N cycles 0-9).
   Outer .ltr is the white torn-paper rim, inner i is the printed scrap. */
.artist { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.cutout { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; }
.word { display: inline-flex; align-items: center; gap: 0; }
.ltr {
  position: relative;
  display: inline-block;
  background: var(--scrap);
  filter: drop-shadow(3px 4px 3px rgba(44, 36, 24, 0.4));
}
.ltr i { display: block; font-style: normal; line-height: 1; }

/* Each scrap is cut like it was scissored out of a magazine in a hurry:
   slanted silhouettes (not squares), uneven white rims, varied crop
   tightness, slight overlaps and big baseline wobble. */
.ltr.v0 { padding: 3px 5px 6px 4px; clip-path: polygon(16% 3%, 52% 0, 90% 6%, 100% 34%, 94% 68%, 99% 96%, 62% 100%, 24% 94%, 0 100%, 3% 60%, 8% 30%); transform: rotate(-9deg); z-index: 2; }
.ltr.v1 { padding: 5px 3px 2px 6px; margin-left: -5px; clip-path: polygon(0 26%, 12% 4%, 46% 8%, 78% 0, 100% 12%, 92% 46%, 100% 82%, 74% 96%, 40% 100%, 8% 92%, 4% 58%); transform: rotate(6deg) translateY(5px); }
.ltr.v2 { padding: 7px 4px 3px 5px; clip-path: polygon(6% 12%, 30% 0, 66% 8%, 94% 2%, 100% 40%, 90% 70%, 96% 100%, 58% 94%, 22% 100%, 0 88%, 5% 46%); transform: rotate(-4deg) translateY(-5px); }
.ltr.v3 { padding: 2px 6px 5px 3px; margin-left: -4px; clip-path: polygon(10% 0, 50% 6%, 88% 0, 96% 28%, 100% 62%, 90% 94%, 54% 100%, 18% 96%, 0 78%, 6% 38%); transform: rotate(8deg) translateY(2px); }
.ltr.v4 { padding: 4px 7px 2px 4px; clip-path: polygon(0 18%, 20% 2%, 58% 6%, 96% 0, 100% 44%, 92% 78%, 98% 100%, 50% 95%, 12% 100%, 2% 70%); transform: rotate(5deg); }
.ltr.v5 { padding: 6px 3px 5px 4px; clip-path: polygon(8% 8%, 44% 0, 80% 10%, 100% 4%, 94% 40%, 100% 74%, 86% 100%, 48% 92%, 14% 98%, 0 76%, 4% 34%); transform: rotate(-7deg) translateY(6px); z-index: 3; }
.ltr.v6 { padding: 3px 4px 6px 5px; margin-left: -6px; clip-path: polygon(4% 0, 40% 8%, 76% 2%, 100% 16%, 92% 52%, 98% 88%, 64% 100%, 28% 92%, 0 96%, 6% 52%); transform: rotate(4deg) translateY(-5px); }
.ltr.v7 { padding: 5px 6px 3px 2px; clip-path: polygon(14% 6%, 56% 0, 92% 8%, 100% 42%, 90% 72%, 94% 100%, 52% 96%, 10% 100%, 0 64%, 8% 26%); transform: rotate(-5deg); }
.ltr.v8 { padding: 4px 2px 6px 5px; clip-path: polygon(0 14%, 26% 0, 62% 8%, 100% 2%, 94% 38%, 100% 70%, 88% 96%, 46% 100%, 10% 94%, 4% 52%); transform: rotate(7deg) translateY(4px); }
.ltr.v9 { padding: 2px 5px 4px 6px; margin-left: -4px; clip-path: polygon(8% 4%, 46% 10%, 84% 0, 100% 24%, 92% 58%, 100% 92%, 60% 100%, 20% 96%, 0 82%, 5% 40%); transform: rotate(-6deg) translateY(2px); z-index: 2; }

.ltr.v0 i { padding: 6px 9px 8px; background: #b8452c; color: #f7ead0; font-family: "Arial Black", "Helvetica Neue", sans-serif; font-size: 2.1rem; text-transform: uppercase; clip-path: polygon(8% 4%, 94% 0, 100% 90%, 2% 100%, 0 30%); }
.ltr.v1 i { padding: 4px 7px 6px; background: #22303c; color: #e9e2cf; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.8rem; text-transform: lowercase; clip-path: polygon(0 8%, 96% 0, 100% 96%, 6% 100%); }
.ltr.v2 i { padding: 6px 8px 7px; background: #dda93f; color: #2c2418; font-family: Courier, monospace; font-weight: 700; font-size: 2rem; text-transform: uppercase; clip-path: polygon(4% 6%, 100% 0, 94% 100%, 0 94%); }
.ltr.v3 i { padding: 7px 8px 9px; background: #f2ecdb; color: #b8452c; font-family: "Times New Roman", serif; font-weight: 700; font-size: 2.25rem; text-transform: lowercase; clip-path: polygon(0 2%, 92% 0, 100% 94%, 6% 100%); }
.ltr.v4 i { padding: 5px 12px 6px; background: #4c5a38; color: #eee7d2; font-family: Verdana, sans-serif; font-weight: 700; font-size: 1.65rem; text-transform: uppercase; clip-path: polygon(2% 0, 100% 8%, 96% 100%, 0 92%); }
.ltr.v5 i { padding: 6px 9px 8px; background: #211d17; color: #f5efdf; font-family: Georgia, serif; font-size: 2.3rem; text-transform: uppercase; clip-path: polygon(6% 0, 100% 4%, 92% 98%, 0 92%); }
.ltr.v6 i { padding: 5px 8px 6px; background: radial-gradient(circle 1.6px, #22303c 1.3px, transparent 1.6px) 0 0/6px 6px, #e8e0ca; color: #22303c; font-family: "Arial Black", "Helvetica Neue", sans-serif; font-size: 1.7rem; text-transform: uppercase; clip-path: polygon(0 10%, 94% 0, 100% 92%, 8% 100%); }
.ltr.v7 i { padding: 5px 8px 7px; background: #b8452c; color: #f7ead0; font-family: Courier, monospace; font-weight: 700; font-size: 1.95rem; text-transform: lowercase; clip-path: polygon(4% 0, 100% 6%, 96% 100%, 0 96%); }
.ltr.v8 i { padding: 6px 8px 8px; background: #f2ecdb; color: #2c2418; font-family: "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 2.05rem; text-transform: lowercase; clip-path: polygon(0 6%, 96% 0, 100% 90%, 4% 100%); }
.ltr.v9 i { padding: 5px 8px 6px; background: #cdb68c; color: #33291d; font-family: Georgia, serif; font-weight: 700; font-size: 1.85rem; text-transform: uppercase; clip-path: polygon(6% 2%, 100% 0, 94% 96%, 0 100%); }

/* a few letters are taped down */
.ltr.v2::after, .ltr.v5::after, .ltr.v8::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 16px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(44, 36, 24, 0.25);
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  clip-path: polygon(2% 0, 98% 0, 94% 16%, 100% 34%, 95% 52%, 100% 70%, 94% 88%, 98% 100%, 3% 100%, 7% 82%, 0 62%, 6% 44%, 1% 26%, 5% 10%);
  filter: url(#rip1);
}
.ltr.v5::after { transform: translateX(-50%) rotate(5deg); clip-path: polygon(5% 0, 95% 0, 100% 10%, 96% 26%, 100% 44%, 94% 60%, 99% 76%, 95% 100%, 4% 100%, 0 90%, 6% 72%, 0 54%, 4% 38%, 0 20%); }
.ltr.v8::after { clip-path: polygon(4% 0, 96% 0, 100% 14%, 94% 30%, 99% 48%, 95% 64%, 100% 82%, 96% 100%, 6% 100%, 0 84%, 5% 66%, 1% 48%, 6% 30%, 0 14%); width: 42px; }

/* tagline on a typed paper slip, taped */
.tagline {
  position: relative;
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.8rem;
  padding: 6px 16px;
  margin-top: 20px;
  transform: rotate(-1.5deg);
}
.tagline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap);
  clip-path: polygon(0 15%, 2% 0, 98% 4%, 100% 20%, 99% 85%, 96% 100%, 3% 96%, 0 80%);
  filter: url(#rip3) drop-shadow(2px 3px 4px rgba(44, 36, 24, 0.3));
}
.tagline::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 14px;
  background: var(--tape);
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 96% 26%, 100% 44%, 94% 60%, 99% 76%, 95% 100%, 4% 100%, 0 90%, 6% 72%, 0 54%, 4% 38%, 0 20%);
}
.tagline:empty { display: none; }

/* ── "I listen on" platform picker: small icon scraps under the hero ── */
.platform-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: -14px 0 44px;
}
.platform-picker.hidden { display: none; }
.picker-label {
  font-family: var(--scrawl);
  color: var(--ink-soft);
  font-size: 1rem;
  margin-right: 5px;
}
.platform-picker button {
  position: relative;
  appearance: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  background: none;
  padding: 7px 8px 5px;
  transition: transform 0.12s;
}
.platform-picker button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap);
  clip-path: polygon(6% 10%, 30% 0, 68% 6%, 96% 0, 100% 34%, 92% 66%, 98% 94%, 60% 100%, 22% 93%, 0 98%, 4% 58%, 0 26%);
  filter: url(#rip2) drop-shadow(1.5px 2px 2px rgba(44, 36, 24, 0.3));
}
.platform-picker button:nth-child(3n)::before { clip-path: polygon(0 20%, 10% 2%, 44% 6%, 76% 0, 100% 10%, 94% 44%, 100% 80%, 78% 100%, 40% 92%, 8% 98%, 2% 62%, 0 30%); filter: url(#rip1) drop-shadow(1.5px 2px 2px rgba(44, 36, 24, 0.3)); }
.platform-picker button:nth-child(3n+1)::before { clip-path: polygon(4% 4%, 36% 8%, 70% 0, 98% 6%, 100% 38%, 92% 70%, 96% 100%, 56% 94%, 24% 100%, 0 90%, 5% 52%, 0 22%); filter: url(#rip3) drop-shadow(1.5px 2px 2px rgba(44, 36, 24, 0.3)); }
.platform-picker button .icon { width: 15px; height: 15px; display: block; }
.platform-picker button:nth-child(odd) { transform: rotate(-3deg); }
.platform-picker button:nth-child(even) { transform: rotate(3deg) translateY(2px); }
.platform-picker button:hover { transform: rotate(0deg) translateY(-1px); }
.platform-picker button.active {
  color: #f7ead0;
  transform: rotate(-2deg) scale(1.08);
}
.platform-picker button.active::before { background: var(--red); }
.platform-picker button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* hero when a platform is picked: one big red button to their platform */
.platform-links a.primary, .platform-links a.preferred { color: #f7ead0; }
.platform-links a.primary::before, .platform-links a.preferred::before { background: var(--red); }
.platform-links a.primary .arrow, .platform-links a.primary .fyi { color: #f2d9c4; }
.platform-links a.preferred .arrow, .platform-links a.preferred .fyi { color: #f2d9c4; }
.pref-note {
  font-family: var(--scrawl);
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.release .arrow .icon { width: 17px; height: 17px; vertical-align: -3px; }

/* ── Latest release hero ── */
.latest { margin: 0 0 46px; text-align: center; }
.latest .badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 3px;
  padding: 3px 8px;
  transform: rotate(-2deg);
  opacity: 0.9;
  margin-bottom: 18px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -0.8'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -0.8'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23r)'/%3E%3C/svg%3E");
}
/* whole hero (photo + title) links to the release's own page */
.hero-link { display: block; color: inherit; text-decoration: none; }
.hero-link:hover .photo { transform: rotate(-0.4deg); }
.hero-link:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.latest .hero-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }

/* photo print taped down at the corners — fills the page width */
.photo {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px); /* leave room for the rotation + tape corners */
  background: #fbf7ea;
  padding: 12px;
  box-shadow: 4px 6px 16px rgba(44, 36, 24, 0.35);
  transform: rotate(-1.2deg);
  margin: 6px 0 20px;
}
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(0.9); }
/* Tape: factory-straight long edges, ripped ends. Three tear patterns
   (A/B/C below) are cycled across every piece of tape on the site so no
   two pieces look identical. */
.tape {
  position: absolute;
  width: 52px;
  height: 17px;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(44, 36, 24, 0.25);
  clip-path: polygon(4% 0, 96% 0, 100% 14%, 94% 30%, 99% 48%, 95% 64%, 100% 82%, 96% 100%, 6% 100%, 0 84%, 5% 66%, 1% 48%, 6% 30%, 0 14%);
  filter: url(#rip2);
}
.tape.tl { top: -7px; left: -17px; transform: rotate(-42deg); }
.tape.tr { top: -7px; right: -17px; transform: rotate(42deg); clip-path: polygon(2% 0, 98% 0, 94% 16%, 100% 34%, 95% 52%, 100% 70%, 94% 88%, 98% 100%, 3% 100%, 7% 82%, 0 62%, 6% 44%, 1% 26%, 5% 10%); }
.tape.bl { bottom: -7px; left: -17px; transform: rotate(42deg); clip-path: polygon(5% 0, 95% 0, 100% 10%, 96% 26%, 100% 44%, 94% 60%, 99% 76%, 95% 100%, 4% 100%, 0 90%, 6% 72%, 0 54%, 4% 38%, 0 20%); }
.tape.br { bottom: -7px; right: -17px; transform: rotate(-42deg); opacity: 0.92; }

.latest .hero-meta h2 { font-family: var(--hand); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.latest .hero-meta .sub { font-family: var(--scrawl); color: var(--ink-soft); font-size: 1.1rem; margin: 4px 0 20px; }

/* ── Platform links: white paper scraps hung from tape at the top ──
   The paper is a ::before layer run through the rip filters so its edges
   go fibrous while the text above stays crisp; ::after is the tape. */
.platform-links { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.platform-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 15px 16px;
  transform-origin: 50% 0;
  transition: transform 0.12s;
}
.platform-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap);
  clip-path: polygon(0 12%, 1% 2%, 7% 0, 32% 4%, 57% 0, 80% 5%, 97% 1%, 100% 16%, 99% 48%, 100% 80%, 98% 96%, 86% 100%, 58% 95%, 32% 100%, 9% 96%, 2% 100%, 0 82%);
  filter: drop-shadow(3px 4px 6px rgba(44, 36, 24, 0.3));
}
/* every scrap ripped its own way — tear shapes and noise seeds cycled so
   neighbours never match */
.platform-links a:nth-of-type(3n)::before {
  clip-path: polygon(0 22%, 3% 6%, 20% 0, 46% 6%, 70% 0, 92% 4%, 100% 24%, 98% 56%, 100% 88%, 94% 100%, 66% 94%, 40% 100%, 15% 93%, 3% 98%, 0 68%);
  filter: drop-shadow(3px 4px 6px rgba(44, 36, 24, 0.3));
  background:
    linear-gradient(97deg, transparent 60%, rgba(44, 36, 24, 0.05) 62.7%, rgba(44, 36, 24, 0.1) 63%, rgba(255, 255, 255, 0.28) 63.4%, transparent 66%),
    var(--scrap);
}
.platform-links a:nth-of-type(3n+1)::before {
  clip-path: polygon(2% 10%, 11% 0, 36% 5%, 60% 0, 84% 6%, 99% 2%, 100% 34%, 98% 66%, 100% 94%, 88% 99%, 62% 100%, 34% 94%, 10% 100%, 0 90%, 2% 56%, 0 24%);
  filter: drop-shadow(3px 4px 6px rgba(44, 36, 24, 0.3));
}
.platform-links a:nth-child(odd) { transform: rotate(0.8deg); }
.platform-links a:nth-child(even) { transform: rotate(-0.8deg); }
.platform-links a:hover { transform: rotate(0deg) translateY(-1px); }
.platform-links a::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 15px;
  background: var(--tape);
  top: -8px;
  left: 48%;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 2px rgba(44, 36, 24, 0.2);
  clip-path: polygon(4% 0, 96% 0, 100% 14%, 94% 30%, 99% 48%, 95% 64%, 100% 82%, 96% 100%, 6% 100%, 0 84%, 5% 66%, 1% 48%, 6% 30%, 0 14%);
  filter: url(#rip2);
}
.platform-links a:nth-child(even)::after {
  left: 53%;
  transform: translateX(-50%) rotate(4deg);
  clip-path: polygon(2% 0, 98% 0, 94% 16%, 100% 34%, 95% 52%, 100% 70%, 94% 88%, 98% 100%, 3% 100%, 7% 82%, 0 62%, 6% 44%, 1% 26%, 5% 10%);
  filter: url(#rip3);
}
.platform-links a .icon { width: 26px; height: 26px; }
.platform-links a .arrow { margin-left: auto; color: var(--ink-soft); font-family: Georgia, serif; }
.platform-links a.all { color: var(--scrap); }
.platform-links a.all::before { background: var(--ink); }
.platform-links a.all .arrow { color: var(--paper); }
.fyi {
  display: block;
  font-family: var(--scrawl);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 400;
}

/* ── Catalog: taped scraps ── */
.catalog { margin-top: 48px; display: flex; flex-direction: column; }
.catalog h3 {
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
}
.catalog h3::before, .catalog h3::after { content: " ~ "; }
.release {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s;
}
.release::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(245, 239, 223, 0.55);
  clip-path: polygon(0 14%, 2% 2%, 12% 0, 40% 5%, 66% 0, 90% 4%, 100% 12%, 98% 46%, 100% 82%, 97% 98%, 78% 100%, 50% 94%, 22% 100%, 4% 95%, 0 74%, 2% 42%);
  filter: drop-shadow(2px 3px 6px rgba(44, 36, 24, 0.22));
}
/* the 3n rows are also wormholed near the top-right corner: punched-out
   dots that show the desk through, with a shaded rim for depth */
.release:nth-of-type(3n)::before {
  clip-path: polygon(2% 6%, 16% 0, 44% 6%, 72% 0, 95% 5%, 100% 22%, 98% 58%, 100% 90%, 90% 100%, 60% 95%, 30% 100%, 6% 94%, 0 78%, 2% 40%, 0 16%);
  filter: drop-shadow(2px 3px 6px rgba(44, 36, 24, 0.22));
  background:
    radial-gradient(circle at 92% 22%, rgba(44, 36, 24, 0.3) 0 2px, rgba(44, 36, 24, 0.12) 3.5px, transparent 6px),
    radial-gradient(circle at 88% 60%, rgba(44, 36, 24, 0.22) 0 1.6px, transparent 4.5px),
    rgba(245, 239, 223, 0.55);
  -webkit-mask: radial-gradient(circle 3px at 92% 22%, transparent 97%, #000),
    radial-gradient(circle 2.2px at 88% 60%, transparent 97%, #000),
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 3px at 92% 22%, transparent 97%, #000),
    radial-gradient(circle 2.2px at 88% 60%, transparent 97%, #000),
    linear-gradient(#000 0 0);
  mask-composite: intersect;
}
.release:nth-of-type(3n+1)::before {
  clip-path: polygon(0 20%, 4% 4%, 26% 0, 54% 6%, 80% 0, 98% 6%, 100% 36%, 97% 70%, 100% 96%, 82% 100%, 52% 96%, 24% 100%, 5% 97%, 0 66%);
  filter: drop-shadow(2px 3px 6px rgba(44, 36, 24, 0.22));
}
.release:nth-child(odd) { transform: rotate(0.5deg); }
.release:nth-child(even) { transform: rotate(-0.5deg); }
.release:hover { transform: rotate(0deg) translateY(-1px); }
.release img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  padding: 3px;
  background: #fbf7ea;
  box-shadow: 1px 2px 5px rgba(44, 36, 24, 0.3);
  transform: rotate(-2deg);
}
.release:nth-child(even) img { transform: rotate(2deg); }
.release .info { flex: 1; min-width: 0; }
.release .title { font-family: var(--hand); font-weight: 600; font-size: 1.4rem; line-height: 1.1; }
.release .meta { font-family: var(--scrawl); color: var(--ink-soft); font-size: 1rem; }
.release .arrow { margin-left: auto; color: var(--ink-soft); font-family: Georgia, serif; }

/* ── Notify signup (bottom of the homepage + release pages) ──
   The biggest piece of paper on the page, so it wears the most damage:
   fibrous ripped edges, a diagonal fold crease, and a few wormholes
   punched clean through (desk shows in the holes; shaded rims for depth). */
.notify {
  position: relative;
  margin-top: 56px;
  text-align: left;
  padding: 20px 18px 22px;
  transform: rotate(-0.4deg);
}
.notify::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 5% 16%, rgba(44, 36, 24, 0.3) 0 2.4px, rgba(44, 36, 24, 0.12) 4px, transparent 7px),
    radial-gradient(circle at 95% 68%, rgba(44, 36, 24, 0.26) 0 2px, rgba(44, 36, 24, 0.1) 3.4px, transparent 6px),
    radial-gradient(circle at 88% 12%, rgba(44, 36, 24, 0.2) 0 1.6px, transparent 4.5px),
    linear-gradient(104deg, transparent 44%, rgba(44, 36, 24, 0.05) 47.6%, rgba(44, 36, 24, 0.11) 48%, rgba(255, 255, 255, 0.3) 48.5%, transparent 52%),
    var(--scrap);
  clip-path: polygon(0 10%, 1.5% 2%, 9% 0, 34% 4%, 58% 0, 82% 5%, 98% 1%, 100% 14%, 99% 50%, 100% 84%, 97% 97%, 84% 100%, 56% 95%, 28% 100%, 7% 96%, 1% 100%, 0 80%);
  filter: drop-shadow(2px 4px 8px rgba(44, 36, 24, 0.28));
  -webkit-mask: radial-gradient(circle 3.4px at 5% 16%, transparent 97%, #000),
    radial-gradient(circle 2.8px at 95% 68%, transparent 97%, #000),
    radial-gradient(circle 2.2px at 88% 12%, transparent 97%, #000),
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 3.4px at 5% 16%, transparent 97%, #000),
    radial-gradient(circle 2.8px at 95% 68%, transparent 97%, #000),
    radial-gradient(circle 2.2px at 88% 12%, transparent 97%, #000),
    linear-gradient(#000 0 0);
  mask-composite: intersect;
}
.notify::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 15px;
  background: var(--tape);
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  box-shadow: 0 1px 2px rgba(44, 36, 24, 0.2);
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 96% 26%, 100% 44%, 94% 60%, 99% 76%, 95% 100%, 4% 100%, 0 90%, 6% 72%, 0 54%, 4% 38%, 0 20%);
  filter: url(#rip3);
}
.notify.hidden { display: none; }
.notify-heading { font-family: var(--hand); font-weight: 600; font-size: 1.55rem; }
.notify-sub { font-family: var(--scrawl); color: var(--ink-soft); font-size: 1.1rem; margin-top: 4px; }
.notify-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Form controls cut out like the name letters: a white torn-paper rim
   (.slip wrapper) around a printed inner slip (the control itself, on a
   slightly darker paper with slanted print edges). Focus is an inset red
   ring because outlines would be sliced off by the torn clip. */
.notify-form .slip {
  position: relative;
  display: block;
}
.notify-form .slip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f9f5ea;
  filter: drop-shadow(2px 3px 3px rgba(44, 36, 24, 0.3));
}
.slip-email {
  flex: 1 1 200px;
  min-width: 0;
  transform: rotate(-0.4deg);
}
.slip-email::before {
  clip-path: polygon(1% 14%, 4% 0, 36% 6%, 68% 0, 97% 5%, 100% 26%, 99% 78%, 96% 100%, 62% 94%, 26% 100%, 2% 93%, 0 68%);
}
.slip-btn {
  flex: 0 0 auto;
  transform: rotate(-1.2deg);
  transition: transform 0.12s;
}
.slip-btn::before {
  clip-path: polygon(3% 10%, 0 0, 40% 4%, 75% 0, 100% 8%, 97% 50%, 100% 88%, 68% 100%, 30% 95%, 2% 100%, 0 60%);
  filter: drop-shadow(2px 3px 3px rgba(44, 36, 24, 0.3));
}
.slip-btn:hover { transform: rotate(0deg) translateY(-1px); }
.slip-select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  transform: rotate(0.5deg);
}
.slip-select::before {
  clip-path: polygon(0 22%, 3% 0, 34% 5%, 72% 0, 98% 6%, 100% 30%, 99% 74%, 97% 100%, 58% 95%, 20% 100%, 1% 92%, 0 64%);
  filter: drop-shadow(2px 3px 3px rgba(44, 36, 24, 0.3));
}
.slip input,
.slip select,
.slip button {
  display: block;
  width: calc(100% - 9px);
  margin: 4px 5px 5px 4px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background-color: #eee6d0;
  padding: 12px 14px;
}
.slip input { clip-path: polygon(0 8%, 98% 0, 100% 92%, 2% 100%); }
.slip input::placeholder { color: var(--ink-soft); opacity: 0.75; font-style: italic; }
.slip select {
  font-size: 0.92rem;
  padding: 10px 42px 10px 13px;
  clip-path: polygon(2% 0, 100% 6%, 98% 100%, 0 94%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2418' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  cursor: pointer;
}
.slip button {
  background-color: var(--ink);
  color: var(--scrap);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 20px;
  cursor: pointer;
  clip-path: polygon(4% 3%, 100% 0, 96% 97%, 0 100%);
}
.slip button:hover { background-color: #46392a; }
.slip button:disabled { opacity: 0.6; cursor: wait; }
/* helper text sitting beside the optional platform dropdown */
.notify-note {
  flex: 1 1 160px;
  min-width: 150px;
  align-self: center;
  font-family: var(--scrawl);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.2;
}
.notify-status {
  flex-basis: 100%;
  margin: 0;
  min-height: 1.2em;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-style: italic;
}
.slip input:focus-visible,
.slip select:focus-visible,
.slip button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2.5px var(--red);
}

/* ── Footer profiles: taped pills ── */
.profiles { margin-top: 54px; text-align: center; }
.profiles h3 {
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-weight: 700;
}
.profiles .row { display: flex; flex-wrap: wrap; gap: 12px 10px; justify-content: center; }
.profiles .row a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 13px;
}
.profiles .row a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap);
  clip-path: polygon(0 16%, 4% 0, 30% 6%, 62% 0, 94% 5%, 100% 20%, 97% 58%, 100% 88%, 88% 100%, 54% 94%, 20% 100%, 2% 95%, 0 62%);
  filter: drop-shadow(2px 3px 4px rgba(44, 36, 24, 0.28));
}
.profiles .row a:nth-child(3n)::before {
  clip-path: polygon(2% 8%, 20% 0, 50% 7%, 82% 0, 100% 10%, 98% 44%, 100% 80%, 92% 100%, 58% 93%, 26% 100%, 4% 96%, 0 70%, 2% 34%);
  filter: drop-shadow(2px 3px 4px rgba(44, 36, 24, 0.28));
}
.profiles .row a:nth-child(odd) { transform: rotate(-1.5deg); }
.profiles .row a:nth-child(even) { transform: rotate(1.5deg); }
.profiles .row a::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 11px;
  background: var(--tape);
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  clip-path: polygon(2% 0, 98% 0, 94% 16%, 100% 34%, 95% 52%, 100% 70%, 94% 88%, 98% 100%, 3% 100%, 7% 82%, 0 62%, 6% 44%, 1% 26%, 5% 10%);
  filter: url(#rip2);
}
.profiles .row a:nth-child(even)::after {
  transform: translateX(-50%) rotate(5deg);
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 96% 26%, 100% 44%, 94% 60%, 99% 76%, 95% 100%, 4% 100%, 0 90%, 6% 72%, 0 54%, 4% 38%, 0 20%);
  filter: url(#rip1);
}
.profiles .row .icon { width: 15px; height: 15px; }
.profiles .row .fyi { display: inline; margin-left: 4px; }

/* ── Release smart-link page (/single/<slug> etc.) ── */
.release-page { max-width: 460px; text-align: center; padding-top: 30px; }
/* back link: a little taped paper scrap, pinned top-left */
.release-page .back {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto 30px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  transform: rotate(-2deg);
  transition: transform 0.12s;
}
.release-page .back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap);
  clip-path: polygon(0 18%, 3% 0, 97% 5%, 100% 22%, 98% 86%, 94% 100%, 4% 95%, 1% 80%);
  filter: drop-shadow(2px 3px 4px rgba(44, 36, 24, 0.28));
}
.release-page .back::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 12px;
  background: var(--tape);
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 1px 2px rgba(44, 36, 24, 0.2);
  clip-path: polygon(4% 0, 96% 0, 100% 14%, 94% 30%, 99% 48%, 95% 64%, 100% 82%, 96% 100%, 6% 100%, 0 84%, 5% 66%, 1% 48%, 6% 30%, 0 14%);
}
.release-page .back:hover { transform: rotate(0deg) translateY(-1px); }
.release-page h1 { font-family: var(--hand); font-size: 2.2rem; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.release-page .sub { font-family: var(--scrawl); color: var(--ink-soft); font-size: 1.15rem; margin: 6px 0 24px; }
.release-page .hint { font-family: var(--scrawl); color: var(--ink-soft); font-size: 1.05rem; margin-top: 22px; }

/* ── On-site player: a taped paper slip with a wax-red play button, an
   ink-line scrubber and handwritten labels (see player.js) ── */
.player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: calc(100% - 16px);
  margin: 0 auto 26px;
  background: #fbf7ea;
  padding: 12px 16px 9px;
  box-shadow: 3px 5px 14px rgba(44, 36, 24, 0.32);
  transform: rotate(-0.7deg);
  text-align: left;
}
.player .pp {
  flex: none;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--red);
  color: #f7ead0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 2px 3px 8px rgba(44, 36, 24, 0.35), inset 0 0 0 2px rgba(247, 234, 208, 0.35);
  transform: rotate(-3deg);
  transition: transform 0.12s;
}
.player .pp:hover { transform: rotate(-3deg) scale(1.07); }
.player .pp svg { width: 21px; height: 21px; }
.player .mid { flex: 1; min-width: 0; }
.player .seek {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.player .seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--red) calc(var(--p, 0) * 1%), rgba(44, 36, 24, 0.22) 0);
}
.player .seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fbf7ea;
  border: 2px solid var(--ink);
  box-shadow: 1px 2px 4px rgba(44, 36, 24, 0.3);
}
.player .seek::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(44, 36, 24, 0.22); }
.player .seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--red); }
.player .seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fbf7ea;
  border: 2px solid var(--ink);
  box-shadow: 1px 2px 4px rgba(44, 36, 24, 0.3);
}
.player .under {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--scrawl);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--ink-soft);
}
.player .extras { display: flex; gap: 14px; }
.player .extras .dl,
.player .extras .share {
  font-family: var(--scrawl);
  font-size: 1.05rem;
  line-height: 1.1;
  background: none;
  border: none;
  padding: 0;
  color: var(--red);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.player .fallback { font-family: var(--scrawl); font-size: 1.1rem; color: var(--red); }
/* compact homepage version under the New Release hero */
.player.compact { gap: 10px; padding: 9px 13px 6px; margin-bottom: 22px; }
.player.compact .pp { width: 36px; height: 36px; }
.player.compact .pp svg { width: 16px; height: 16px; }
.player.compact .under { font-size: 0.95rem; }
.player .tape.tl { left: 24px; }
.player .tape.br { right: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}