@charset "UTF-8";

:root {
  --pink: #ff4fc3;
  --pink-hot: #ff149d;
  --pink-pale: #ffd4ef;
  --green: #83ff00;
  --green-dark: #2a8f00;
  --yellow: #fff34a;
  --purple: #7b2cff;
  --ink: #120012;
  --cream: #fff8d7;
  --paper: #fffdf4;
  --line: 4px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --radius: 26px;
  --comic: "Comic Sans MS", "Comic Neue", "Comic Sans", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.35) 0 3px, transparent 4px) 0 0 / 30px 30px,
    linear-gradient(135deg, #ff8bd7 0 25%, #ff6acb 25% 50%, #ff98df 50% 75%, #ff78d1 75%) 0 0 / 76px 76px;
  color: var(--ink);
  font-family: var(--comic);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .25;
  background: repeating-linear-gradient(12deg, transparent 0 18px, rgba(255,255,255,.8) 19px 21px, transparent 22px 38px);
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }

.skip-link {
  position: fixed;
  left: 14px;
  top: -80px;
  z-index: 1000;
  padding: 12px 18px;
  border: var(--line);
  background: var(--yellow);
  font-weight: 900;
}
.skip-link:focus { top: 14px; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wallpaper-splats { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wallpaper-splats span {
  position: absolute;
  width: 110px;
  aspect-ratio: 1;
  border-radius: 42% 58% 61% 39% / 43% 39% 61% 57%;
  background: var(--green);
  border: 4px solid var(--ink);
  opacity: .32;
  transform: rotate(18deg);
}
.wallpaper-splats span::before,
.wallpaper-splats span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
  border: inherit;
}
.wallpaper-splats span::before { width: 32px; height: 32px; right: -28px; top: 4px; }
.wallpaper-splats span::after { width: 17px; height: 17px; left: -30px; bottom: 12px; }
.wallpaper-splats span:nth-child(1) { left: 2vw; top: 32vh; }
.wallpaper-splats span:nth-child(2) { right: 1vw; top: 17vh; transform: rotate(-31deg) scale(.72); }
.wallpaper-splats span:nth-child(3) { left: 10vw; bottom: 5vh; transform: rotate(77deg) scale(.5); }
.wallpaper-splats span:nth-child(4) { right: 12vw; bottom: 16vh; transform: rotate(10deg) scale(1.2); }
.wallpaper-splats span:nth-child(5) { left: 48vw; top: 62vh; transform: rotate(-12deg) scale(.45); }

.site-header {
  position: relative;
  z-index: 20;
  padding: 78px 18px 34px;
  background: var(--pink-hot);
  border-bottom: 0;
  box-shadow: none;
}
.slime-cap {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -6px;
  height: 68px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M-8 6H1208V27C1168 25 1150 36 1122 35C1090 34 1080 25 1048 29C1018 33 1023 65 993 70C962 75 953 32 916 31C880 30 867 39 839 42C804 45 789 29 754 29C719 29 712 56 681 60C648 64 641 31 607 31C573 31 559 44 531 43C497 42 487 28 451 29C416 30 407 62 377 67C344 72 335 32 299 32C266 32 249 42 221 42C187 42 176 29 142 30C109 31 100 57 72 61C40 66 33 32-8 33Z' fill='%2383ff00' stroke='%23120012' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.header-inner {
  position: relative;
  z-index: 2;
  width: min(1160px, 100%);
  margin: 0 auto;
  text-align: center;
}
.site-logo {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transform: translateY(-8px) rotate(-1.2deg);
  filter: drop-shadow(7px 8px 0 var(--ink));
}
.logo-metal,
.logo-cumblast {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--comic);
  font-weight: 900;
  line-height: .74;
  letter-spacing: .02em;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.logo-metal {
  margin-left: -110px;
  color: var(--yellow);
  font-size: clamp(42px, 8vw, 92px);
  transform: rotate(-5deg);
}
.logo-cumblast {
  color: var(--green);
  font-size: clamp(64px, 13vw, 150px);
  text-shadow: 0 8px 0 var(--purple);
}
.logo-burst {
  position: absolute;
  z-index: 1;
  right: -28px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  background: var(--yellow);
  border: 0;
  clip-path: polygon(50% 0,61% 27%,85% 9%,75% 36%,100% 38%,78% 53%,96% 73%,69% 69%,68% 100%,49% 76%,30% 98%,31% 69%,3% 76%,22% 54%,0 38%,27% 35%,15% 10%,40% 27%);
  color: var(--ink);
  font-family: var(--comic);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  transform: rotate(12deg);
  filter:
    drop-shadow(3px 0 0 var(--ink))
    drop-shadow(-3px 0 0 var(--ink))
    drop-shadow(0 3px 0 var(--ink))
    drop-shadow(0 -3px 0 var(--ink));
}
.site-tagline {
  display: inline-block;
  margin: 18px 0 20px;
  padding: 7px 15px;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--comic);
  font-size: clamp(11px, 2vw, 15px);
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(.5deg);
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--comic);
  font-size: 14px;
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .12s ease, background .12s ease;
}
.main-nav a:nth-child(2) { transform: rotate(-2deg); }
.main-nav a:nth-child(3) { transform: rotate(2deg); }
.main-nav a:nth-child(4) { transform: rotate(-1deg); }
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active {
  background: var(--green);
  transform: translate(-2px,-2px) rotate(0);
  box-shadow: 7px 7px 0 var(--ink);
  outline: 0;
}
.drip-row {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -72px;
  height: 88px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V20C1160 20 1155 36 1128 36C1104 36 1096 22 1073 22C1038 22 1042 82 1012 94C979 107 971 31 936 31C903 31 898 56 870 56C837 56 838 23 802 23C765 23 768 97 735 108C702 119 696 40 658 40C621 40 616 66 586 66C553 66 548 23 511 23C474 23 478 82 446 94C413 106 405 39 369 39C334 39 328 59 299 59C264 59 262 23 225 23C188 23 188 74 157 85C124 96 118 30 82 30C47 30 38 53 0 53Z' fill='%23ff149d'/%3E%3Cpath d='M0 53C38 53 47 30 82 30C118 30 124 96 157 85C188 74 188 23 225 23C262 23 264 59 299 59C328 59 334 39 369 39C405 39 413 106 446 94C478 82 474 23 511 23C548 23 553 66 586 66C616 66 621 40 658 40C696 40 702 119 735 108C768 97 765 23 802 23C838 23 837 56 870 56C898 56 903 31 936 31C971 31 979 107 1012 94C1042 82 1038 22 1073 22C1096 22 1104 36 1128 36C1155 36 1160 20 1200 20' fill='none' stroke='%23120012' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.drip-row i { display: none; }

.scream-strip {
  overflow: hidden;
  border-bottom: 4px solid var(--ink);
  background: #fff34a;
  background-image: none;
  box-shadow: none !important;
  filter: none;
  white-space: nowrap;
}
.scream-strip div {
  width: max-content;
  padding: 24px 0 6px;
  font-family: var(--comic);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
  text-shadow: none;
  filter: none;
  animation: scream-scroll 24s linear infinite;
}
@keyframes scream-scroll { to { transform: translateX(-50%); } }
.scream-track {
  display: flex;
  width: max-content;
  padding: 0;
  animation-duration: 28s;
}
.scream-track span {
  display: block;
  flex: 0 0 auto;
  min-width: max-content;
  padding: 20px 0 10px;
  white-space: nowrap;
}

.site-main {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 58px 0 80px;
}
.feed-warning {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 900;
  text-align: center;
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  overflow: hidden;
  margin-bottom: 34px;
  border: 5px solid var(--ink);
  border-radius: 36px 18px 42px 22px;
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--ink);
  transform: rotate(-.35deg);
}
.hero-art { position: relative; min-height: 470px; background: var(--purple); border-right: 5px solid var(--ink); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art::after {
  content: "HOT GOO";
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 9px 13px;
  background: var(--green);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--comic);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .03em;
  -webkit-text-stroke: .45px currentColor;
  transform: rotate(-5deg);
}
.hero-copy { position: relative; padding: clamp(28px, 5vw, 58px); background: radial-gradient(circle at 90% 10%, #fff 0 7%, transparent 8%), var(--paper); }
.hero-copy::before {
  content: "CUM!";
  position: absolute;
  right: -22px;
  top: -18px;
  display: grid;
  width: 130px;
  height: 70px;
  place-items: center;
  background: var(--green);
  border: 4px solid var(--ink);
  border-radius: 55% 45% 62% 38%;
  color: var(--ink);
  font-family: var(--comic);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(14deg);
}
.hero-kicker { display: inline-block; margin-bottom: 16px; padding: 7px 12px; border: 3px solid var(--ink); background: var(--pink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--comic); font-weight: 900; letter-spacing: .03em; -webkit-text-stroke: .45px currentColor; text-transform: uppercase; transform: rotate(2deg); }
.hero-copy h1 { margin: 0 0 14px; font-family: var(--comic); font-size: clamp(29px, 4.1vw, 54px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.hero-copy .review-name {
  margin: 0 0 7px;
  color: var(--purple);
  font-family: var(--comic);
  font-size: clamp(29px, 4.1vw, 54px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}
.hero-copy .review-album {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(23px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}
.hero-copy p { font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.goo-button {
  display: inline-block;
  padding: 13px 20px;
  border: 4px solid var(--ink);
  border-radius: 18px 28px 16px 24px;
  background: var(--green);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--comic);
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .12s ease, box-shadow .12s ease;
}
.goo-button:hover,
.goo-button:focus-visible { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); outline: 0; }
.hero-score,
.score-blob {
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 43% 57% 65% 35% / 52% 35% 65% 48%;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--comic);
  line-height: .8;
  transform: rotate(8deg);
}
.hero-score { width: 86px; height: 78px; font-size: 38px; }
.hero-score--cum {
  background: var(--green);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(8deg);
}
.hero-score small,
.score-blob small { display: block; font: 11px/1 var(--comic); font-weight: 900; }

.control-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 32px;
  padding: 18px;
  border: 4px solid var(--ink);
  border-radius: 22px;
  background: var(--purple);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(.2deg);
}
.search-form { display: flex; gap: 10px; }
.search-form input {
  width: 100%;
  min-width: 0;
  padding: 13px 15px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: inset 0 -5px 0 var(--pink-pale);
  font-weight: 800;
}
.search-form button {
  padding: 11px 16px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--comic);
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
  cursor: pointer;
}
.result-count { padding: 10px 13px; border: 3px solid var(--ink); border-radius: 999px; background: var(--green); font-family: var(--comic); white-space: nowrap; }

.section-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.section-heading h2 { margin: 0; padding: 9px 15px; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); font-family: var(--comic); font-size: clamp(26px, 4vw, 44px); letter-spacing: .03em; text-transform: uppercase; transform: rotate(-1deg); }
.section-heading::after { content: ""; height: 12px; flex: 1; border: 3px solid var(--ink); background: repeating-linear-gradient(90deg, var(--green) 0 18px, var(--pink-hot) 18px 36px); }

.article-grid,
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 24px 13px 28px 18px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.article-card:nth-child(3n+1) { transform: rotate(-.7deg); }
.article-card:nth-child(3n+2) { transform: rotate(.55deg); }
.article-card:nth-child(3n) { transform: rotate(-.25deg); }
.article-card:hover { transform: translate(-4px,-5px) rotate(0); box-shadow: 12px 13px 0 var(--ink); }
.article-card a.card-link { position: absolute; inset: 0; z-index: 4; text-indent: -9999px; }
.card-art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--purple); }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.article-card:hover .card-art img { transform: scale(1.045) rotate(.4deg); }
.card-art::after { content: ""; position: absolute; inset: auto -15px -18px auto; width: 96px; height: 55px; border: 3px solid var(--ink); border-radius: 50%; background: var(--green); transform: rotate(-16deg); }
.type-pill { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 7px 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--pink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--comic); font-size: 12px; text-transform: uppercase; transform: rotate(-3deg); }
.score-blob { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 72px; height: 66px; font-size: 31px; }
.score-great { background: var(--green); }
.score-good { background: var(--yellow); }
.score-meh { background: #ff9e44; }
.score-bad { background: #ff5d64; }
.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.card-body .card-band {
  margin: 0 0 2px;
  color: var(--purple);
  font-family: var(--comic);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.card-body h3 { margin: 0 0 10px; font-family: var(--comic); font-size: clamp(22px, 2.4vw, 32px); line-height: 1; text-transform: uppercase; }
.card-body h3.card-album {
  color: var(--ink);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 800;
  line-height: 1.08;
}
.card-body p { margin: 0 0 15px; line-height: 1.48; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 3px dashed var(--ink); font-size: 12px; font-weight: 900; text-transform: uppercase; }

.empty-goo {
  grid-column: 1 / -1;
  padding: 50px 22px;
  border: 5px solid var(--ink);
  border-radius: 45% 55% 42% 58% / 58% 35% 65% 42%;
  background: var(--green);
  box-shadow: 10px 10px 0 var(--ink);
  text-align: center;
  font-family: var(--comic);
  font-size: clamp(30px, 7vw, 64px);
  transform: rotate(-1deg);
}

.article-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}
.pagination-link {
  min-width: 190px;
  text-align: center;
}
.pagination-prev {
  display: inline-block;
  padding: 13px 20px;
  border: 4px solid var(--ink);
  border-radius: 18px 28px 16px 24px;
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--comic);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}
.pagination-prev:hover,
.pagination-prev:focus-visible {
  transform: translate(-3px,-3px) rotate(1deg);
  box-shadow: 9px 9px 0 var(--ink);
  outline: 0;
}
.pagination-next[aria-busy="true"] {
  cursor: wait;
  opacity: .78;
}
.infinite-scroll-status {
  min-height: 1.5em;
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.about-page .site-main { width: min(1040px, calc(100% - 28px)); }
.cum-about-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  padding: clamp(34px, 7vw, 76px);
  padding-right: clamp(34px, 24vw, 280px);
  border: 5px solid var(--ink);
  border-radius: 38px 18px 46px 22px;
  background: var(--yellow);
  box-shadow: 12px 12px 0 var(--ink);
  transform: rotate(-.35deg);
}
.cum-about-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 13px;
  border: 3px solid var(--ink);
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.cum-about-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: var(--purple);
  font-size: clamp(42px, 8vw, 92px);
  font-weight: 900;
  line-height: .88;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.cum-about-hero p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 900;
  line-height: 1.4;
}
.cum-about-splat {
  position: absolute;
  right: -35px;
  bottom: -30px;
  display: grid;
  width: clamp(210px, 28vw, 310px);
  aspect-ratio: 1;
  place-items: center;
  border: 5px solid var(--ink);
  border-radius: 42% 58% 63% 37% / 54% 39% 61% 46%;
  background: var(--green);
  box-shadow: inset 0 0 0 12px var(--pink);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(13deg);
}
.cum-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 34px;
}
.cum-about-card,
.cum-manifesto {
  border: 5px solid var(--ink);
  border-radius: 26px 15px 34px 18px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
}
.cum-about-card {
  padding: clamp(24px, 4vw, 38px);
}
.cum-about-card:nth-child(2) { background: var(--green); transform: rotate(.55deg); }
.cum-about-card:nth-child(3) { background: var(--pink-pale); transform: rotate(-.45deg); }
.cum-about-card:nth-child(4) { background: var(--purple); color: white; transform: rotate(.35deg); }
.cum-about-card h2,
.cum-manifesto h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}
.cum-about-card p {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}
.cum-about-card p:last-child { margin-bottom: 0; }
.cum-about-contact .goo-button {
  margin-top: 8px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
}
.cum-manifesto {
  padding: clamp(28px, 5vw, 50px);
  background: var(--pink);
  transform: rotate(-.25deg);
}
.cum-manifesto ol {
  margin: 0 0 26px;
  padding-left: 1.5em;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 900;
  line-height: 1.6;
}
.cum-manifesto li::marker { color: var(--purple); font-weight: 900; }

.article-page .site-main { width: min(1120px, calc(100% - 28px)); }
.article-head {
  position: relative;
  margin-bottom: 24px;
  padding: clamp(24px, 4vw, 42px);
  padding-right: clamp(108px, 13vw, 145px);
  border: 5px solid var(--ink);
  border-radius: 34px 20px 42px 16px;
  background: var(--yellow);
  box-shadow: 12px 12px 0 var(--ink);
  overflow: hidden;
}
.article-head::after {
  content: "CUM!";
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  display: grid;
  width: clamp(72px, 8vw, 92px);
  aspect-ratio: 1;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 46% 54% 61% 39% / 55% 42% 58% 45%;
  background: var(--green);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(20px, 2.5vw, 29px);
  font-weight: 900;
  line-height: 1;
  transform: rotate(9deg);
}
.article-head-meta-blob {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  width: fit-content;
  margin-left: auto;
  min-height: 0;
  padding: 10px 15px;
  border: 4px solid var(--ink);
  border-radius: 18px 24px 16px 22px;
  background: var(--green);
  color: var(--ink);
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.article-head-meta-blob span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .28em;
}
.article-head-meta-blob a,
.article-head-meta-blob time {
  display: inline;
  transform: none;
}
.article-head-meta-blob a {
  overflow-wrap: anywhere;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-transform: none;
}
.article-head .type-pill { position: relative; display: inline-block; left: auto; top: auto; margin-bottom: 12px; }
.article-head h1 { position: relative; z-index: 1; max-width: 960px; margin: 0 0 12px; font-family: var(--comic); font-size: clamp(38px, 7vw, 82px); line-height: .9; text-transform: uppercase; }
.article-head h1.review-article-title {
  display: grid;
  gap: 5px;
}
.review-article-band,
.review-article-album {
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 rgba(18, 0, 18, .18);
  -webkit-text-stroke: 1.5px var(--ink);
}
.review-article-band {
  color: var(--purple);
  font-size: 1em;
  font-weight: 900;
  line-height: .92;
}
.review-article-album {
  color: var(--pink-hot);
  font-size: .64em;
  font-weight: 900;
  line-height: 1;
}
.article-head .deck { position: relative; z-index: 1; max-width: 820px; margin: 0 0 14px; font-size: clamp(17px, 2.2vw, 22px); font-weight: 700; line-height: 1.38; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.article-main { min-width: 0; }
.article-hero {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 26px;
  border: 5px solid var(--ink);
  border-radius: 20px 38px 18px 30px;
  background: var(--purple);
  box-shadow: 10px 10px 0 var(--ink);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-hero figcaption { padding: 9px 13px; border-top: 3px solid var(--ink); background: var(--cream); font-size: 12px; font-weight: 700; }
.article-prose {
  padding: clamp(24px, 5vw, 52px);
  border: 5px solid var(--ink);
  border-radius: 30px 18px 38px 16px;
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  font-family: var(--comic);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.72;
}
.article-prose p { margin: 0 0 1.35em; }
.article-prose p:last-child { margin-bottom: 0; }
.article-prose p:first-child::first-letter { float: left; margin: .08em .08em 0 0; padding: .05em .12em; border: 3px solid var(--ink); background: var(--pink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--comic); font-size: 3.2em; line-height: .74; }
.article-prose p.article-opening:first-child::first-letter {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
}
.article-opening-phrase {
  color: var(--pink-hot);
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
  -webkit-text-stroke: .8px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    1px 0 0 var(--ink),
    -1px 0 0 var(--ink),
    0 1px 0 var(--ink),
    0 -1px 0 var(--ink);
}
.article-opening-dropcap {
  float: left;
  margin: .08em .12em 0 0;
  padding: .05em .12em;
  border: 3px solid var(--ink);
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--comic);
  font-size: 3.2em;
  font-weight: 900;
  line-height: .74;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.pullquote { margin: 34px -18px; padding: 24px 30px; border: 5px solid var(--ink); border-radius: 48% 52% 42% 58% / 53% 40% 60% 47%; background: var(--green); box-shadow: 8px 8px 0 var(--ink); color: var(--yellow); font-family: var(--comic); font-size: clamp(28px, 5vw, 50px); font-weight: 900; line-height: 1.02; text-align: center; text-transform: uppercase; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transform: rotate(-1.3deg); }
.inline-image { margin: 30px 0; border: 4px solid var(--ink); background: var(--cream); box-shadow: 7px 7px 0 var(--ink); }
.inline-image img { width: 100%; }
.inline-image figcaption { padding: 8px 12px; border-top: 3px solid var(--ink); font: 13px var(--comic); }
.media-embed { margin: 28px 0; overflow: hidden; border: 5px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); background: #000; aspect-ratio: 16 / 9; }
.media-embed iframe { width: 100%; height: 100%; border: 0; }
.article-sidebar { display: grid; gap: 20px; position: sticky; top: 18px; }
.meta-card {
  padding: 20px;
  border: 4px solid var(--ink);
  border-radius: 22px 13px 28px 17px;
  background: var(--pink-pale);
  box-shadow: 7px 7px 0 var(--ink);
}
.meta-card:nth-child(2n) { background: var(--green); transform: rotate(.7deg); }
.meta-card h2 { margin: 0 0 14px; font-family: var(--comic); font-size: 32px; text-transform: uppercase; }
.meta-list { display: grid; gap: 10px; margin: 0; }
.meta-row { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 2px dashed var(--ink); }
.meta-row:last-child { padding-bottom: 0; border-bottom: 0; }
.meta-row dt { font-size: 11px; font-weight: 900; text-transform: uppercase; }
.meta-row dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.big-score { display: grid; place-items: center; width: 150px; height: 140px; margin: 0 auto 18px; border: 5px solid var(--ink); border-radius: 44% 56% 62% 38% / 51% 36% 64% 49%; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); font-family: var(--comic); font-size: 74px; line-height: .8; transform: rotate(-6deg); }
.big-score small { display: block; font: 13px/1 var(--comic); font-weight: 900; }
.tracklist { margin: 0; padding-left: 23px; }
.tracklist li { margin: 0 0 8px; font-weight: 800; }
.external-links { display: grid; gap: 10px; }
.external-links a { display: block; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--cream); box-shadow: 3px 3px 0 var(--ink); font-weight: 900; text-align: center; text-decoration: none; text-transform: uppercase; }
.external-links a:hover { background: var(--yellow); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 6px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.back-link { display: inline-block; margin: 0 0 22px; padding: 9px 13px; border: 3px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; text-decoration: none; transform: rotate(-1deg); }
.related-section { margin-top: 54px; }
.related-grid .article-card { min-width: 0; }

.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 56px;
  padding: 34px 18px 38px;
  background: var(--purple);
  color: white;
  text-align: center;
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -50px;
  height: 62px;
  background: var(--purple);
}
.footer-goo {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -56px;
  height: 68px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M-8 6H1208V27C1168 25 1150 36 1122 35C1090 34 1080 25 1048 29C1018 33 1023 65 993 70C962 75 953 32 916 31C880 30 867 39 839 42C804 45 789 29 754 29C719 29 712 56 681 60C648 64 641 31 607 31C573 31 559 44 531 43C497 42 487 28 451 29C416 30 407 62 377 67C344 72 335 32 299 32C266 32 249 42 221 42C187 42 176 29 142 30C109 31 100 57 72 61C40 66 33 32-8 33Z' fill='%2383ff00' stroke='%23120012' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.footer-inner { position: relative; z-index: 2; width: min(780px, 100%); margin: 0 auto; }
.footer-logo { font-family: var(--comic); font-size: clamp(38px, 8vw, 76px); text-transform: uppercase; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.footer-logo strong { color: var(--green); }
.site-footer p { margin: 12px auto 0; max-width: 660px; font-weight: 700; }
.footer-small { opacity: .74; font-size: 12px; }

.error-page { display: grid; place-items: center; min-height: 55vh; text-align: center; }
.error-blob { max-width: 720px; padding: 60px 30px; border: 6px solid var(--ink); border-radius: 42% 58% 54% 46% / 57% 43% 57% 43%; background: var(--green); box-shadow: 14px 14px 0 var(--ink); transform: rotate(-1deg); }
.error-blob h1 { margin: 0; font-family: var(--comic); font-size: clamp(70px, 16vw, 170px); line-height: .75; }
.error-blob p { font-size: 20px; font-weight: 900; }

@media (max-width: 900px) {
  .hero-card { grid-template-columns: 1fr; }
  .hero-art { min-height: 340px; border-right: 0; border-bottom: 5px solid var(--ink); }
  .article-grid, .related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .cum-about-hero {
    padding: 30px 22px 205px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .cum-about-hero h1 { font-size: clamp(40px, 13vw, 64px); }
  .cum-about-splat {
    right: -28px;
    bottom: -42px;
    width: 230px;
  }
  .cum-about-grid { grid-template-columns: 1fr; }
  .cum-about-card:nth-child(n) { transform: none; }
  .site-header { padding-inline: 10px; }
  .logo-metal { margin-left: -60px; -webkit-text-stroke-width: 3px; }
  .logo-cumblast { -webkit-text-stroke-width: 3px; }
  .logo-burst { right: -8px; top: 4px; width: 76px; font-size: 13px; }
  .main-nav { gap: 7px; }
  .main-nav a { padding: 8px 11px; font-size: 11px; box-shadow: 3px 3px 0 var(--ink); }
  .site-main { width: min(100% - 18px, 1180px); padding-top: 48px; }
  .hero-card { border-radius: 24px 14px 28px 16px; box-shadow: 8px 8px 0 var(--ink); }
  .hero-art { min-height: 250px; }
  .hero-copy { padding: 28px 22px; }
  .hero-copy h1 { font-size: clamp(29px, 9.35vw, 46px); }
  .control-panel { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
  .result-count { justify-self: start; }
  .article-grid, .related-grid { grid-template-columns: 1fr; }
  .article-card:nth-child(n) { transform: none; }
  .section-heading h2 { font-size: 28px; }
  .article-head { padding: 24px 82px 24px 20px; box-shadow: 8px 8px 0 var(--ink); }
  .article-head::after {
    top: 12px;
    right: 12px;
    width: 58px;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--ink);
    font-size: 17px;
  }
  .article-head-meta-blob {
    width: 100%;
    margin-left: 0;
    padding: 9px 12px;
    font-size: 12px;
    transform: none;
  }
  .article-head h1 { font-size: clamp(38px, 11vw, 62px); }
  .article-prose { padding: 28px 20px; box-shadow: 7px 7px 0 var(--ink); }
  .pullquote { margin-inline: -8px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .article-hero { box-shadow: 7px 7px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}