/* Brutalist CSS for Jacko Luciano - Vibrant & Professional */
:root {
  --bg: #fff;
  --fg: #0a0a0a;

  /* Palette (from your image 2) */
  --riot-rose: #FC359C;
  --voltage-blue: #029CF0;
  --radioactive-lime: #6DC896;
  --eclipsed-violet: #AE3CE8;
  --fever-glow: #EFB04E;

  /* Map palette into your system tokens */
  --muted: var(--eclipsed-violet);
  --accent: var(--riot-rose);
  --accent-2: var(--voltage-blue);
  --accent-3: var(--fever-glow);
  --border: var(--eclipsed-violet);
  --surface: var(--radioactive-lime);

  --maxw: 1800px;
  --gap: 1.5rem;
  --pad: 2rem;
  --radius: 0;
  --border-width: 4px;
}

* { box-sizing: border-box; }

html {
  /* base backdrop */
  background: var(--eclipsed-violet);
  font-size: 1.4rem;
}

/* --- Blob gradient background (static-ish, but you can keep the subtle drift) --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  background: none;
  margin: 0;
  padding: 2rem;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  line-height: 1.6;
  font-size: 20px;
  position: relative;
  overflow-x: hidden;
}
body::before{
  content:"";
  position: fixed;
  inset: -24vmax;
  z-index: -2;
  pointer-events: none;

  background:
    /* AMOEBA DISTORTION (subtle) */
    repeating-conic-gradient(from 210deg at 52% 48%,
      rgba(255,255,255,0.10) 0deg 9deg,
      rgba(0,0,0,0.00) 9deg 22deg,
      rgba(255,255,255,0.07) 22deg 31deg,
      rgba(0,0,0,0.00) 31deg 52deg),

    /* MANY SMALL BLOBS */
    radial-gradient(22% 18% at 12% 18%, rgba(252,53,156,.85) 0 62%, transparent 72%),
    radial-gradient(20% 26% at 18% 56%, rgba(109,200,150,.60) 0 58%, transparent 74%),
    radial-gradient(26% 22% at 30% 74%, rgba(174,60,232,.72) 0 60%, transparent 76%),
    radial-gradient(24% 18% at 44% 20%, rgba(239,176,78,.68) 0 58%, transparent 74%),
    radial-gradient(22% 30% at 46% 58%, rgba(2,156,240,.62) 0 58%, transparent 75%),
    radial-gradient(26% 18% at 58% 74%, rgba(109,200,150,.52) 0 60%, transparent 76%),
    radial-gradient(28% 22% at 78% 34%, rgba(239,176,78,.62) 0 58%, transparent 76%),
    radial-gradient(20% 24% at 86% 52%, rgba(252,53,156,.62) 0 58%, transparent 75%),
    radial-gradient(30% 20% at 74% 68%, rgba(2,156,240,.55) 0 60%, transparent 76%),
    radial-gradient(22% 18% at 10% 86%, rgba(239,176,78,.58) 0 60%, transparent 76%),

    /* extra micro-blobs (adds "speckled" gradient feel) */
    radial-gradient(16% 14% at 36% 46%, rgba(252,53,156,.45) 0 62%, transparent 78%),
    radial-gradient(14% 18% at 62% 48%, rgba(2,156,240,.42) 0 62%, transparent 80%),
    radial-gradient(18% 14% at 40% 84%, rgba(109,200,150,.40) 0 62%, transparent 80%),
    radial-gradient(14% 16% at 92% 26%, rgba(174,60,232,.44) 0 62%, transparent 80%),
    radial-gradient(16% 14% at 8% 44%, rgba(239,176,78,.44) 0 62%, transparent 80%),

    /* subtle turbulence texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='10'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.22'/%3E%3C/svg%3E"),

    /* base wash */
    linear-gradient(135deg,
      rgba(252,53,156,.22) 0%,
      rgba(2,156,240,.12) 45%,
      rgba(174,60,232,.20) 100%);

  background-size:
    cover,
    cover, cover, cover, cover, cover, cover, cover, cover, cover, cover, cover, cover, cover, cover,
    cover, cover, cover, cover, cover,
    1200px 1200px,
    cover;

  background-repeat:
    no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat,
    no-repeat;

  background-blend-mode:
    soft-light,  /* conic distortion */
    normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal,
    normal, normal, normal, normal, normal,
    overlay,     /* turbulence */
    normal;

  /* smaller blobs look better with slightly less blur */
  filter: blur(40px) saturate(175%) contrast(135%);
  transform: scale(1.08);
}

/* Texture + streaks (sharper “print grain”, not foggy blur) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    /* soft streaks like the ref */
    linear-gradient(24deg,
      rgba(239, 176, 78, 0.00) 0%,
      rgba(239, 176, 78, 0.00) 40%,
      rgba(239, 176, 78, 0.32) 50%,
      rgba(239, 176, 78, 0.00) 62%,
      rgba(239, 176, 78, 0.00) 100%),
    linear-gradient(205deg,
      rgba(2, 156, 240, 0.00) 0%,
      rgba(2, 156, 240, 0.00) 48%,
      rgba(2, 156, 240, 0.22) 56%,
      rgba(2, 156, 240, 0.00) 64%,
      rgba(2, 156, 240, 0.00) 100%),

    /* crisp grain */
    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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"),

    /* vignette */
    radial-gradient(80% 70% at 50% 50%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 75%,
      rgba(0,0,0,0.30) 100%);

  background-size: cover, cover, 240px 240px, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;

  mix-blend-mode: overlay;
  opacity: 0.40;

  animation: grain-shift 6s steps(2) infinite;
}

@keyframes bg-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.08); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
}

@keyframes grain-shift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 120px 90px, 0 0; }
}

.container {
  max-width: var(--maxw);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.15);
  padding: var(--pad);
  position: relative;
  z-index: 1;
}

.container::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 60px;
  height: 60px;
  background: var(--accent);
  z-index: -1;
}

.header {
  border-bottom: var(--border-width) solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: var(--gap);
  position: relative;
}

.header::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 120px;
  height: 4px;
  background: var(--accent-2);
}

h1 {
  margin: 0 0 0.75rem 0;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 8px;
  height: 100%;
  background: var(--accent-3);
  z-index: -1;
}

h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  border-left: 6px solid var(--accent);
  padding-left: 1rem;
}

.lead {
  color: var(--fg);
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
  max-width: 1500px;
}

.lead strong {
  background: var(--accent-3);
  padding: 2px 6px;
  font-weight: 700;
}

.article p {
  line-height: 1.75;
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
}

.article strong {
  font-weight: 700;
  color: var(--accent);
}

.article img {
  border: var(--border-width) solid var(--border);
  box-shadow: 8px 8px 0 var(--accent-3);
  margin-bottom: 1rem;
}

.kv {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.kv .item {
  background: var(--accent-2);
  color: var(--fg);
  padding: 0.6rem 1rem;
  border: 3px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

a.button {
  display: inline-block;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--fg);
  border: 3px solid var(--border);
  background: var(--bg);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  position: relative;
}

a.button:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--border);
}

a.button:active {
  transform: translate(0, 0);
  box-shadow: none;
}

a.button:nth-child(3n + 1):hover {
  background: var(--accent-2);
  color: var(--fg);
}

a.button:nth-child(3n + 2):hover {
  background: var(--accent-3);
  color: var(--fg);
}

.footer {
  border-top: var(--border-width) solid var(--border);
  margin-top: calc(var(--gap) * 1.5);
  padding-top: 1.25rem;
  color: var(--muted);
  font-size: 1rem;
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 80px;
  height: 4px;
  background: var(--accent);
}

.footer strong {
  color: var(--accent);
  font-weight: 800;
}

.score {
  background: var(--accent-3);
  color: var(--fg);
  padding: 0.6rem 1rem;
  border: 3px solid var(--border);
  display: inline-block;
  font-weight: 700;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}

pre.lyrics {
  white-space: pre-wrap;
  background: var(--surface);
  padding: 1.5rem;
  border: 3px solid var(--border);
  color: var(--fg);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95rem;
  line-height: 1.65;
  box-shadow: 8px 8px 0 var(--accent-2);
  margin: 1.5rem 0;
}

/* Responsive */
@media (max-width: 600px) {
  body { padding: 1rem; }

  .container {
    padding: 1.25rem;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
  }

  .container::before {
    width: 40px;
    height: 40px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  a.button {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
  }

  .article img {
    box-shadow: 6px 6px 0 var(--accent-3);
  }
}

/* Extra brutalist touches */
::selection {
  background: var(--accent);
  color: var(--bg);
}
::-moz-selection {
  background: var(--accent);
  color: var(--bg);
}