/* bandcamp brown + plz listen cover colors */
:root {
  --bg: #9f8989; --bg2: #817474; --dirt: #574133; --ink: #150f09;
  --link: #4a2c17; --b1: #1f130a; --b2: #5a3a22; --b3: #6e4a2e; --b4: #8a5d3b; --hi: #fff300; --red: #e3140f; --blue: #1c1fb0;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 14px;
  margin: 0;
  padding: 0 16px 80px;
  text-align: center;
  overflow-x: hidden;
}
a { color: var(--link); }
a:hover { background: var(--hi); color: var(--ink); }
img { max-width: 100%; height: auto; }
.scrawl { font-family: "Special Elite", "Courier New", monospace; }

/* header strip: top of the cover, like the bandcamp banner */
.strip {
  display: block; height: 130px; margin: 0 -16px 28px;
  background: url(/img/plz-cover.jpg) center 4% / 1200px auto;
  border-bottom: 3px solid var(--ink);
}
@media (max-width: 700px) { .strip { background-size: 800px auto; height: 90px; } }

/* home */
.home { max-width: 520px; margin: 0 auto; }
.hero { width: min(460px, 88vw); margin: 40px auto 6px; }
.hero .mosh { --fit: contain; }
.hero img { display: block; width: 100%; }
.home .sub { margin: 0 0 50px; font-size: 13px; }
.cover { display: block; width: min(300px, 76vw); margin: 90px auto 14px; position: relative; transform: rotate(3deg); box-shadow: 5px 6px 0 var(--ink); }
.cover:hover { background: none; }
.cover img { display: block; width: 100%; }
.tape { position: absolute; width: 90px; height: 24px; background: rgba(240, 235, 200, .7); top: -10px; left: 36%; transform: rotate(-6deg); z-index: 2; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 48px; align-items: center; }
.grid a { font-size: 22px; color: var(--ink); display: inline-block; text-decoration: none; }
.icons { display: flex; justify-content: center; gap: 40px; margin: 56px 10px 0; }
.icons + .icons { margin-top: 22px; }
.icons a { color: var(--b2); }
.icons a:hover { background: none; color: var(--b1); }
.icons svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* inner pages */
nav { font: 400 20px/2.2 "Special Elite", "Courier New", monospace; margin-bottom: 30px; }
nav a { margin: 0 10px; text-decoration: none; }
nav a.here { text-decoration: underline wavy var(--b2) 1px; text-underline-offset: 6px; }
.page { max-width: 580px; margin: 0 auto; line-height: 1.6; }
.scrap { background: var(--bg2); padding: 18px; margin: 0 auto 26px; box-shadow: 3px 3px 0 var(--dirt); }
.scrap:nth-child(odd) { transform: rotate(-.8deg); }
.scrap:nth-child(even) { transform: rotate(.6deg); }

.covers { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 26px; }
.covers a { width: 64px; font-size: 10px; line-height: 1.25; text-decoration: none; }
.covers img { width: 64px; height: 64px; display: block; margin-bottom: 4px; border: 1px solid var(--ink); }
.bc iframe { border: 0; width: 100%; max-width: 400px; height: 480px; }
.bc p { font-size: 12px; }

.vids a { display: inline-block; width: 160px; margin: 8px; font-size: 12px; vertical-align: top; text-decoration: none; }
.vids img { display: block; margin-bottom: 4px; border: 1px solid var(--ink); }

.about { text-align: left; }
.about .sticker { width: 150px; float: right; margin: 0 0 10px 14px; transform: rotate(5deg); background: #e9e4d6; padding: 6px; box-shadow: 3px 3px 0 var(--ink); }
.about p { margin: 0 0 12px; }
.foot { margin-top: 60px; font-size: 12px; letter-spacing: .15em; color: var(--ink); }
.foot img { width: 56px; opacity: .85; transform: rotate(-3deg); margin-bottom: 6px; }

/* ---------- datamosh on scroll (CSS scroll-driven animations) ----------
   .mosh wraps an image and sets --img. Two copies of the image smear,
   slice and color-bleed as the element scrolls into and out of view.
   Browsers without animation-timeline just show the clean image. */
.mosh { position: relative; display: block; overflow: hidden; isolation: isolate; }
.mosh::before, .mosh::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--img) center / var(--fit, cover) no-repeat;
  opacity: 0;
}
@supports (animation-timeline: view()) {
  .mosh::before {
    mix-blend-mode: hard-light;
    animation: smear linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  .mosh::after {
    mix-blend-mode: difference;
    animation: slice steps(7) both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  .mosh img { animation: bleed linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .strip { animation: bleed linear both; animation-timeline: scroll(root); }
  /* home hero: page is short, so it corrupts more the further you scroll */
  .hero .mosh::before { animation-name: smear-down; animation-timeline: scroll(root); animation-range: normal; }
  .hero .mosh::after { animation-name: slice-down; animation-timeline: scroll(root); animation-range: normal; }
  .hero .mosh img { animation-name: bleed-down; animation-timeline: scroll(root); animation-range: normal; }
}
@keyframes smear-down {
  0%, 8% { opacity: 0; transform: none; clip-path: inset(50% 0 50% 0); }
  40%  { opacity: .75; transform: translateY(5%) scaleY(1.25); filter: saturate(3) hue-rotate(-40deg); clip-path: inset(35% 0 30% 0); }
  100% { opacity: .95; transform: translateY(24%) scaleY(2.3); filter: blur(1.5px) saturate(4) hue-rotate(-100deg); clip-path: inset(48% 0 0 0); }
}
@keyframes slice-down {
  0%, 8% { opacity: 0; }
  30%  { opacity: .8; transform: translateX(12%);  clip-path: inset(15% 0 70% 0); }
  60%  { opacity: .8; transform: translateX(-10%); clip-path: inset(55% 0 28% 0); }
  100% { opacity: .9; transform: translateX(18%);  clip-path: inset(72% 0 8% 0); }
}
@keyframes bleed-down {
  0%, 8% { filter: none; }
  100% { filter: contrast(1.9) saturate(3.2) hue-rotate(40deg); }
}
@keyframes smear {
  0%   { opacity: .95; transform: translateY(-18%) scaleY(1.9); filter: blur(1px) saturate(3) hue-rotate(40deg); clip-path: inset(0 0 55% 0); }
  18%  { opacity: .6;  transform: translateY(-4%) scaleY(1.2); clip-path: inset(30% 0 40% 0); }
  30%, 70% { opacity: 0; transform: none; clip-path: inset(50% 0 50% 0); }
  82%  { opacity: .6;  transform: translateY(6%) scaleY(1.3); filter: saturate(4) hue-rotate(-60deg); clip-path: inset(45% 0 20% 0); }
  100% { opacity: .95; transform: translateY(22%) scaleY(2.2); filter: blur(2px) saturate(4) hue-rotate(-90deg); clip-path: inset(60% 0 0 0); }
}
@keyframes slice {
  0%   { opacity: .9; transform: translateX(14%);  clip-path: inset(8% 0 78% 0); }
  15%  { opacity: .7; transform: translateX(-9%);  clip-path: inset(52% 0 33% 0); }
  28%, 72% { opacity: 0; transform: none; }
  85%  { opacity: .7; transform: translateX(11%);  clip-path: inset(22% 0 61% 0); }
  100% { opacity: .9; transform: translateX(-16%); clip-path: inset(70% 0 12% 0); }
}
@keyframes bleed {
  0%   { filter: contrast(1.6) saturate(2.5) hue-rotate(-25deg); }
  30%, 70% { filter: none; }
  100% { filter: contrast(1.8) saturate(3) hue-rotate(35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mosh::before, .mosh::after, .mosh img, .strip { animation: none !important; opacity: 0; }
  .mosh img, .strip { opacity: 1; filter: none; }
}

/* brown gradient links (nav + home grid) */
.grid a, nav a {
  background: linear-gradient(100deg, var(--b1), var(--b2) 35%, var(--b3) 70%, var(--b4)) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  transition: background-position .4s;
}
.grid div:nth-child(even) a { background-image: linear-gradient(100deg, var(--b4), var(--b3) 30%, var(--b2) 65%, var(--b1)); }
.grid a:hover, nav a:hover { background-position: 100% 0; text-decoration: none; }