/* DAJAI.IO — Basquiat layer
   layered ON TOP of styles.css. graffiti overlays for the control room. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Permanent+Marker&family=Special+Elite&display=swap');

:root {
  --hand: 'Caveat', cursive;
  --marker: 'Permanent Marker', cursive;
  --typewriter: 'Special Elite', monospace;

  /* basquiat palette layered over the existing one */
  --b-yellow: #ffd400;
  --b-red:    #e1261c;
  --b-blue:   #0046ff;
  --b-green:  #1aa64a;
  --b-cream:  #f3e9d2;
  --b-black:  #0a0708;
  --b-rust:   #b04a2a;
}

/* ============================================================
   PAINT-SPLATTER + XEROX-NOISE field — drawn behind everything
   via SVG data URIs. cheap, immediate, gritty.
   ============================================================ */
.paint-field {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
  background-image:
    /* yellow splatter top-right */
    radial-gradient(circle at 88% 12%, rgba(255,212,0,0.16) 0%, rgba(255,212,0,0) 22%),
    /* blue splatter bottom-left */
    radial-gradient(circle at 8% 86%, rgba(0,70,255,0.12) 0%, rgba(0,70,255,0) 28%),
    /* red drip mid-right */
    radial-gradient(circle at 96% 52%, rgba(225,38,28,0.10) 0%, rgba(225,38,28,0) 18%),
    /* green smudge top-left */
    radial-gradient(circle at 4% 8%, rgba(26,166,74,0.08) 0%, rgba(26,166,74,0) 26%);
}

.xerox-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ============================================================
   HAND TYPE
   ============================================================ */
.hand        { font-family: var(--hand); font-weight: 700; letter-spacing: 0; }
.marker      { font-family: var(--marker); font-weight: 400; letter-spacing: 0; }
.typewriter  { font-family: var(--typewriter); font-weight: 400; }

.scribble    { font-family: var(--hand); font-weight: 700; transform: rotate(-3deg); display: inline-block; }
.scribble-2  { font-family: var(--hand); font-weight: 700; transform: rotate(2deg); display: inline-block; }

/* slash strikethrough that looks hand-drawn */
.strike {
  position: relative; display: inline-block;
}
.strike::after {
  content: ''; position: absolute; left: -4%; right: -4%; top: 52%;
  height: 2px;
  background: currentColor;
  transform: rotate(-2deg);
  opacity: 0.85;
}
.strike-thick::after { height: 4px; }
.strike-red::after { background: var(--b-red); height: 3px; }
.strike-yellow::after { background: var(--b-yellow); height: 3px; }

/* "double underline" Basquiat treatment */
.dunder {
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 100% 2px;
  background-position: 0 100%, 0 calc(100% - 5px);
  background-repeat: no-repeat;
  padding-bottom: 8px;
}

/* ============================================================
   COPYRIGHT STAMP — appears next to proper nouns
   ============================================================ */
.cr {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55em;
  vertical-align: super;
  color: var(--b-yellow);
  margin-left: 4px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.cr::before { content: '©'; }
.cr-r { color: var(--b-red); }
.cr-b { color: var(--b-blue); }

/* SAMO-style stamp, larger */
.samo {
  display: inline-block;
  font-family: var(--marker);
  font-size: 14px;
  letter-spacing: 0.12em;
  padding: 4px 10px 2px;
  border: 1.5px solid currentColor;
  transform: rotate(-2deg);
  color: var(--b-yellow);
}

/* ============================================================
   TAPED / TORN PAPER label — used on annotations
   ============================================================ */
.tape {
  position: relative;
  background: var(--b-cream);
  color: var(--b-black);
  padding: 8px 14px;
  font-family: var(--typewriter);
  font-size: 11px;
  line-height: 1.4;
  display: inline-block;
  transform: rotate(-1.2deg);
  box-shadow: 2px 4px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
  letter-spacing: 0.02em;
}
.tape::before {
  content: ''; position: absolute; top: -10px; left: 50%;
  width: 60px; height: 18px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(255,212,0,0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.tape-2 { transform: rotate(1.5deg); background: #fff8e0; }
.tape-blue { background: #d8e1ff; color: var(--b-black); }

/* ============================================================
   CROWN — pure CSS, sized to host, in :before
   ============================================================ */
.crowned { position: relative; display: inline-block; padding-top: 0.4em; }
.crowned::before {
  content: '';
  position: absolute;
  top: -0.18em; left: 50%;
  width: 1.4em; height: 0.7em;
  transform: translateX(-50%);
  background:
    /* three triangular points */
    radial-gradient(circle at 50% 100%, var(--b-yellow) 6px, transparent 6.5px),
    linear-gradient(135deg, transparent 48%, var(--b-yellow) 48% 52%, transparent 52%) no-repeat,
    var(--b-yellow);
  -webkit-mask:
    polygon(0% 100%, 8% 30%, 20% 70%, 32% 10%, 50% 70%, 68% 10%, 80% 70%, 92% 30%, 100% 100%);
          mask: polygon(0% 100%, 8% 30%, 20% 70%, 32% 10%, 50% 70%, 68% 10%, 80% 70%, 92% 30%, 100% 100%);
  filter: drop-shadow(0 0 4px rgba(255,212,0,0.4));
}

/* alt crown via SVG when we want it inline */
.svg-crown { display: inline-block; vertical-align: middle; }

/* ============================================================
   MARGINALIA — absolutely positioned hand-drawn notes
   ============================================================ */
.marg {
  position: absolute;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 22px;
  color: var(--b-yellow);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  z-index: 4;
}
.marg-r { color: var(--b-red); }
.marg-b { color: var(--b-blue); }
.marg-g { color: var(--b-green); }
.marg-cream { color: var(--b-cream); }
.marg-arrow::before {
  content: '→ '; font-family: var(--marker);
}

/* ============================================================
   LIST PAINTING — stacked names with strikes/repeats
   ============================================================ */
.list-painting {
  font-family: var(--marker);
  font-size: 32px;
  line-height: 1.05;
  color: var(--b-cream);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.list-painting > div { padding: 2px 0; }
.list-painting .repeat { opacity: 0.55; font-size: 0.7em; }

/* ============================================================
   ANATOMY DIAGRAM frame — used on hero portrait & elsewhere
   ============================================================ */
.anatomy-label {
  font-family: var(--typewriter);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-cream);
}
.anatomy-leader {
  stroke: var(--b-cream);
  stroke-width: 1;
  fill: none;
}

/* ============================================================
   PRICE TAG — Basquiat loved to scrawl prices/numbers
   ============================================================ */
.price {
  display: inline-block;
  font-family: var(--marker);
  font-size: 18px;
  color: var(--b-yellow);
  transform: rotate(-3deg);
  border: 2px solid var(--b-yellow);
  padding: 2px 8px;
  background: rgba(0,0,0,0.5);
}

/* ============================================================
   JAGGED OILSTICK BORDER — for callouts
   ============================================================ */
.oilstick {
  position: relative;
  padding: 14px 18px;
}
.oilstick::before {
  content: '';
  position: absolute; inset: -3px;
  border: 3px solid var(--b-yellow);
  clip-path: polygon(
    0% 4%, 3% 0%, 8% 6%, 14% 0%, 22% 5%, 30% 1%, 38% 6%, 46% 0%,
    54% 5%, 62% 1%, 70% 6%, 78% 0%, 86% 5%, 94% 1%, 100% 4%,
    98% 12%, 100% 22%, 96% 30%, 100% 40%, 97% 50%, 100% 60%,
    96% 70%, 100% 80%, 97% 90%, 100% 100%,
    92% 96%, 84% 100%, 76% 95%, 68% 100%, 60% 96%, 52% 100%,
    44% 95%, 36% 100%, 28% 96%, 20% 100%, 12% 95%, 4% 100%, 0% 96%,
    3% 88%, 0% 78%, 4% 68%, 0% 58%, 3% 48%, 0% 38%, 4% 28%, 0% 18%
  );
  pointer-events: none;
}
.oilstick-red::before { border-color: var(--b-red); }
.oilstick-blue::before { border-color: var(--b-blue); }

/* ============================================================
   GRID OVERRIDES — make modules look painted-over
   ============================================================ */
.module.painted {
  background: rgba(8,5,7,0.6);
  border-color: var(--b-yellow);
  box-shadow:
    -3px 3px 0 rgba(0,70,255,0.45),
    3px -3px 0 rgba(225,38,28,0.35);
}
.module.painted .module-hd {
  border-bottom: 2px solid var(--b-yellow);
  color: var(--b-yellow);
}

/* visible word-revisions: "tracks" striked, replaced with "songs" */
.revision {
  position: relative; display: inline-block;
}
.revision-old {
  position: relative; opacity: 0.6;
}
.revision-old::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 50%;
  height: 2px; background: var(--b-red);
  transform: rotate(-3deg);
}
.revision-new {
  font-family: var(--hand); color: var(--b-yellow);
  margin-left: 8px;
  transform: rotate(-2deg) translateY(-4px);
  display: inline-block;
}

/* small caret/arrow for marginalia */
.caret-down::after { content: ' ↓'; }
.caret-right::after { content: ' →'; }
.caret-left::before { content: '← '; }