/* ====== RandomShit.art — paper-and-marker scrapbook ====== */

:root {
  --paper: #f4ead2;
  --paper-dark: #e6d8b1;
  --ink: #1b1610;
  --pencil: #4a4036;
  --red: #d8423b;
  --blue: #2f6fb5;
  --yellow: #f6c84a;
  --green: #4ea84e;
  --pink: #e88aa8;
  --orange: #e58a36;
  --tape: rgba(245, 232, 138, 0.62);
  --tape-edge: rgba(180, 160, 60, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Patrick Hand', 'Caveat', cursive;
  color: var(--ink);
  background: var(--paper);
  min-height: 100%;
  overflow-x: hidden;
}

/* Speckled craft-paper texture */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(80,50,20,.10) 1px, transparent 1.2px),
    radial-gradient(rgba(120,90,40,.08) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.2px),
    radial-gradient(ellipse at 18% 8%, rgba(255,240,200,.5) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(180,140,80,.18) 0%, transparent 60%);
  background-size: 14px 14px, 23px 23px, 31px 31px, 100% 100%, 100% 100%;
  background-position: 0 0, 7px 11px, 3px 9px, 0 0, 0 0;
}

body.bg-lined {
  background-color: #fbf6e6;
  background-image:
    repeating-linear-gradient(transparent 0 31px, rgba(80,130,200,.28) 31px 32px),
    linear-gradient(to right, transparent 78px, rgba(220,80,80,.45) 78px 79px, transparent 79px);
}

body.bg-grid {
  background-color: #f6f2dd;
  background-image:
    repeating-linear-gradient(transparent 0 23px, rgba(80,80,80,.16) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(80,80,80,.16) 23px 24px);
}

body.bg-cork {
  background-color: #c89a5a;
  background-image:
    radial-gradient(rgba(60,30,0,.35) 1px, transparent 1.4px),
    radial-gradient(rgba(255,220,160,.5) 1px, transparent 1.4px),
    radial-gradient(rgba(80,40,10,.25) 1px, transparent 1.6px);
  background-size: 9px 9px, 13px 13px, 17px 17px;
  --paper: #c89a5a;
}

/* ====== TITLE ====== */

.stage {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 120px;
  position: relative;
}

.masthead {
  position: relative;
  text-align: center;
  padding: 56px 0 24px;
}

.masthead .splat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.masthead h1 {
  font-family: 'Permanent Marker', 'Patrick Hand', cursive;
  font-size: clamp(64px, 11vw, 148px);
  line-height: .85;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--ink);
  position: relative;
  z-index: 1;
  text-shadow:
    2px 2px 0 rgba(0,0,0,.06),
    -1px 1px 0 rgba(216,66,59,.18);
  transform: rotate(-1.2deg);
}

.masthead h1 .word-1 { color: var(--red); display: inline-block; transform: rotate(-2deg); }
.masthead h1 .word-2 { color: var(--blue); display: inline-block; transform: rotate(1.5deg) translateY(6px); margin-left: .1em; }
.masthead h1 .word-3 { color: var(--ink); display: inline-block; }

.masthead .dotart {
  display: inline-block;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(28px, 4vw, 52px);
  background: var(--yellow);
  color: var(--ink);
  padding: 6px 16px 4px;
  margin-left: .2em;
  transform: rotate(4deg) translateY(-26px);
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
  position: relative;
  z-index: 2;
}

.masthead .tagline {
  font-family: 'Caveat', cursive;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--pencil);
  margin-top: 14px;
  transform: rotate(-.6deg);
  display: inline-block;
}

.masthead .tagline em {
  font-style: normal;
  background: var(--pink);
  padding: 0 6px;
  border-radius: 4px;
  transform: rotate(2deg);
  display: inline-block;
}

.masthead .arrow-doodle {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
}

/* ====== GRID ====== */

.scrapboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(60px, auto);
  gap: 24px 18px;
  margin-top: 40px;
  position: relative;
}

.scrapboard .card {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.4), filter .18s ease;
  will-change: transform;
}
.scrapboard .card:hover {
  transform: rotate(0deg) scale(1.025) translateY(-4px) !important;
  filter: drop-shadow(0 14px 0 rgba(0,0,0,.08));
  z-index: 5;
}
.scrapboard .card:active { transform: scale(.98) !important; }

.tidy .scrapboard { gap: 18px; }
.tidy .scrapboard .card { transform: rotate(0deg) !important; }

/* card grid placements */
.card.pos-bio       { grid-column: span 7; grid-row: span 2; transform: rotate(-2.2deg); }
.card.pos-podcast   { grid-column: span 5; grid-row: span 2; transform: rotate(2.4deg); }
.card.pos-callumku  { grid-column: span 4; grid-row: span 2; transform: rotate(-1.6deg); }
.card.pos-hooch     { grid-column: span 4; grid-row: span 2; transform: rotate(3.1deg); }
.card.pos-darts     { grid-column: span 4; grid-row: span 2; transform: rotate(-2.6deg); }

@media (max-width: 820px) {
  .card.pos-bio,
  .card.pos-podcast,
  .card.pos-callumku,
  .card.pos-hooch,
  .card.pos-darts { grid-column: span 12; }
}

/* ====== PAPER CARD CHROME ====== */

.paper {
  position: relative;
  padding: 22px 22px 22px;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 8px 14px rgba(0,0,0,.10),
    0 22px 40px -18px rgba(0,0,0,.22);
  background: #fffdf3;
  min-height: 220px;
}

/* torn paper edge bottom */
.paper.torn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 12px;
  background:
    radial-gradient(circle at 5px 0, #fffdf3 4.5px, transparent 5px) repeat-x;
  background-size: 10px 12px;
}

/* subtle paper grain */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 30%);
  background-size: 5px 5px, 100% 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

.paper.color-red    { background: #f9c5c0; }
.paper.color-blue   { background: #b8d4ec; }
.paper.color-yellow { background: #f4e08a; }
.paper.color-green  { background: #bfe1a6; }
.paper.color-pink   { background: #f4c0d4; }
.paper.color-cream  { background: #fffaea; }
.paper.color-mint   { background: #c6e8d6; }
.paper.color-lilac  { background: #d8c8ee; }

/* masking tape */
.tape {
  position: absolute;
  width: 88px;
  height: 26px;
  background: var(--tape);
  border-left: 1px dashed var(--tape-edge);
  border-right: 1px dashed var(--tape-edge);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  opacity: .85;
  transform: rotate(-18deg);
  z-index: 2;
}
.tape.tl { top: -14px; left: -18px; transform: rotate(-22deg); }
.tape.tr { top: -10px; right: -22px; transform: rotate(18deg); }
.tape.bl { bottom: -10px; left: -20px; transform: rotate(15deg); width: 70px; }
.tape.br { bottom: -12px; right: -16px; transform: rotate(-12deg); width: 64px; }

/* tags / chips */
.chip {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px 2px;
  border-radius: 2px;
  transform: rotate(-2deg);
}

.scribble-underline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M2 7 C 30 2, 60 11, 90 6 S 160 2, 198 7' fill='none' stroke='%23d8423b' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 8px;
  padding-bottom: 6px;
}

/* card titles */
.card h2 {
  font-family: 'Permanent Marker', cursive;
  font-size: 36px;
  line-height: 1;
  margin: 4px 0 6px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.card .sub {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--pencil);
  line-height: 1.1;
  margin: 0 0 12px;
}

.cta {
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(0,0,0,.2);
  transform: rotate(-1deg);
  transition: transform .15s;
}
.card:hover .cta { transform: rotate(1deg) translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,.25); }

/* ====== INDIVIDUAL CARD ARTWORK ====== */

/* BIO — Geocities printout */
.bio-screen {
  background: #c5c5c5;
  border: 2px solid #1b1610;
  border-radius: 4px 4px 0 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  font-family: 'Courier Prime', monospace;
  color: #fff;
  min-height: 150px;
}
.bio-titlebar {
  background: linear-gradient(180deg, #000080, #2a2aa0);
  color: #fff;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .04em;
}
.bio-titlebar .winbtns { display: flex; gap: 2px; }
.bio-titlebar .winbtn {
  width: 14px; height: 12px; background: #d0d0d0; border: 1px solid #fff;
  border-right-color: #555; border-bottom-color: #555;
  display: inline-block;
  font-size: 9px; color: #000; text-align: center; line-height: 10px;
}
.bio-body {
  background: #008080;
  padding: 14px 12px;
  font-size: 13px;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
  min-height: 100px;
  position: relative;
}
.bio-body .blink {
  animation: blink 1s steps(2) infinite;
  color: #ff00ff;
}
@keyframes blink { 50% { opacity: 0; } }
.bio-body .marquee-row {
  font-size: 11px;
  color: #00ffff;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 8px;
}
.bio-body .marquee-inner { display: inline-block; animation: marquee 14s linear infinite; padding-left: 100%; }
@keyframes marquee { to { transform: translateX(-100%); } }
.bio-construction {
  position: absolute;
  right: 8px;
  bottom: 6px;
  background: #ffcc00;
  color: #000;
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 5px;
  border: 2px dashed #000;
  transform: rotate(-6deg);
  letter-spacing: .04em;
}
.bio-hit {
  display: inline-block;
  background: #000;
  color: #00ff00;
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid #00ff00;
  margin-top: 6px;
}

/* PODCAST — cassette */
.cassette {
  background: #1b1610;
  border-radius: 6px;
  padding: 14px;
  position: relative;
  color: #f4ead2;
  min-height: 150px;
}
.cassette-label {
  background: #fffdf3;
  color: #1b1610;
  padding: 8px 10px 22px;
  border-radius: 2px;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  position: relative;
  border-top: 4px solid var(--red);
  border-bottom: 4px solid var(--blue);
}
.cassette-label .side {
  position: absolute;
  top: 4px; right: 8px;
  font-family: 'Permanent Marker', cursive;
  font-size: 22px;
  color: var(--red);
}
.cassette-label .title {
  font-family: 'Permanent Marker', cursive;
  font-size: 20px;
  letter-spacing: .01em;
  margin-bottom: 2px;
  color: var(--ink);
}
.cassette-label .tracklist {
  font-family: 'Caveat', cursive;
  font-size: 17px;
  line-height: 1.05;
}
.cassette-reels {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
}
.reel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #1b1610 0 9px, #6a5a45 9.5px 11px, #1b1610 11.5px);
  position: relative;
  animation: spin 4s linear infinite;
}
.reel::before, .reel::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.5px;
  height: 22px;
  background: #6a5a45;
}
.reel::after { transform: rotate(60deg); }
.reel-line {
  flex: 1;
  height: 2px;
  background: #6a5a45;
  margin: 0 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CALLUMKU — notebook page */
.notebook {
  background: #fffdf3;
  border-left: 4px double var(--red);
  padding: 10px 14px 14px 18px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  line-height: 32px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(80,130,200,.4) 31px 32px);
  color: var(--pencil);
  min-height: 150px;
  position: relative;
}
.notebook .ku-line { margin: 0; }
.notebook .ku-line.accent { color: var(--red); }
.notebook .holepunch {
  position: absolute;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 1px rgba(0,0,0,.18) inset;
}
.notebook .stamp {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: 'Permanent Marker', cursive;
  color: var(--red);
  font-size: 14px;
  border: 2px solid var(--red);
  padding: 2px 6px;
  transform: rotate(-8deg);
  opacity: .75;
  letter-spacing: .08em;
}

/* HOLD THE HOOCH — arcade flyer */
.arcade {
  background: linear-gradient(180deg, #1a0f2e 0%, #4a1a3a 100%);
  padding: 14px;
  position: relative;
  border-radius: 3px;
  min-height: 170px;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.arcade::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,200,80,.4) 0, transparent 22%),
    radial-gradient(circle at 80% 80%, rgba(80,200,255,.35) 0, transparent 26%);
  pointer-events: none;
}
.arcade .pixel-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 30px;
  line-height: .95;
  color: #ffd34a;
  text-shadow:
    3px 3px 0 #d8423b,
    6px 6px 0 #000;
  letter-spacing: .02em;
  margin: 6px 0 0;
  position: relative;
  z-index: 1;
}
.arcade .bottle {
  width: 56px;
  height: 84px;
  margin: 10px auto 0;
  position: relative;
  z-index: 1;
}
.arcade .bottle-neck {
  width: 16px; height: 16px;
  background: #4ea84e;
  margin: 0 auto;
  border-radius: 2px 2px 0 0;
}
.arcade .bottle-cap {
  width: 22px; height: 6px;
  background: #c0c0c0;
  margin: 0 auto;
  border-radius: 2px 2px 0 0;
}
.arcade .bottle-body {
  width: 50px;
  height: 60px;
  background: linear-gradient(180deg, #4ea84e, #2a6a2a);
  margin: 0 auto;
  border-radius: 8px 8px 6px 6px;
  position: relative;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.18), inset -4px 0 0 rgba(0,0,0,.15);
}
.arcade .bottle-body::after {
  content: "XXX";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fffdf3;
  color: var(--red);
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  width: 38px; height: 22px;
  top: 18px; left: 6px;
  border-radius: 2px;
}
.arcade .coin-row {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  color: #ffd34a;
  letter-spacing: .12em;
  margin-top: 8px;
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 0 #000;
}
.arcade .stars { position: absolute; inset: 0; pointer-events: none; }

/* DARTS — dartboard + scorebook */
.darts {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 4px;
  min-height: 150px;
}
.dartboard {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d8423b 0 8%, #1b1610 8% 14%, #f4e08a 14% 30%, #1b1610 30% 35%, #d8423b 35% 50%, #1b1610 50% 55%, #f4e08a 55% 70%, #1b1610 70% 75%, #fffdf3 75% 95%, #1b1610 95% 100%);
  position: relative;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.dartboard::after {
  /* spokes */
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 0deg,
      transparent 0 9deg, rgba(0,0,0,.18) 9deg 9.6deg,
      transparent 9.6deg 27deg, rgba(0,0,0,.18) 27deg 27.6deg,
      transparent 27.6deg 45deg, rgba(0,0,0,.18) 45deg 45.6deg,
      transparent 45.6deg 63deg, rgba(0,0,0,.18) 63deg 63.6deg,
      transparent 63.6deg 81deg, rgba(0,0,0,.18) 81deg 81.6deg,
      transparent 81.6deg 99deg, rgba(0,0,0,.18) 99deg 99.6deg,
      transparent 99.6deg 117deg, rgba(0,0,0,.18) 117deg 117.6deg,
      transparent 117.6deg 135deg, rgba(0,0,0,.18) 135deg 135.6deg,
      transparent 135.6deg 153deg, rgba(0,0,0,.18) 153deg 153.6deg,
      transparent 153.6deg 171deg, rgba(0,0,0,.18) 171deg 171.6deg,
      transparent 171.6deg 360deg);
  border-radius: 50%;
}
.dart {
  position: absolute;
  width: 30px;
  height: 4px;
  background: linear-gradient(90deg, #c0c0c0 0 40%, #d8423b 40% 100%);
  border-radius: 2px;
  z-index: 2;
  transform-origin: left center;
}
.dart::before {
  content: "";
  position: absolute;
  left: -7px; top: -2px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 8px 4px 0;
  border-color: transparent #c0c0c0 transparent transparent;
}
.dart::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #1b1610;
}
.dart-1 { top: 38%; left: 52%; transform: rotate(-18deg); }
.dart-2 { top: 48%; left: 36%; transform: rotate(22deg); }
.dart-3 { top: 62%; left: 50%; transform: rotate(-44deg); }

.scorebook {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.scorebook .row { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(0,0,0,.3); padding: 1px 0; }
.scorebook .row.win { color: var(--green); font-weight: 700; }
.scorebook .head { font-family: 'Permanent Marker', cursive; font-size: 16px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }

/* ====== STICKERS / FLOATERS ====== */

.sticker {
  position: absolute;
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  padding: 6px 10px 4px;
  background: var(--yellow);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
}
.sticker.star {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--red);
  font-size: 38px;
  text-shadow: 2px 2px 0 var(--ink);
}

/* doodled annotation arrow + text */
.doodle-annot {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--pencil);
  z-index: 3;
  pointer-events: none;
  line-height: 1.05;
}

/* ====== FOOTER ====== */

.footer {
  margin-top: 80px;
  text-align: center;
  font-family: 'Caveat', cursive;
  color: var(--pencil);
  font-size: 22px;
  position: relative;
}
.footer .row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fffdf3;
  padding: 10px 22px 8px;
  border: 2px dashed var(--ink);
  border-radius: 999px;
  transform: rotate(-1deg);
}
.footer .credit {
  margin-top: 14px;
  font-size: 18px;
  color: var(--pencil);
}
.footer .credit b {
  font-family: 'Permanent Marker', cursive;
  color: var(--ink);
}

/* tiny floating doodles in margins */
.margin-doodle {
  position: absolute;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}

/* visit counter old-school */
.visit-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  background: #000;
  color: #00ff00;
  padding: 4px 8px 3px;
  border: 1px solid #00ff00;
  letter-spacing: .04em;
}
.visit-counter .digit {
  background: #1b1610;
  padding: 1px 4px;
  border: 1px solid #555;
}

/* hover scribble */
.card .hover-scribble {
  position: absolute;
  top: -22px;
  right: -10px;
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: var(--red);
  transform: rotate(8deg);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 4;
}
.card:hover .hover-scribble {
  opacity: 1;
  transform: rotate(-4deg) translateY(-4px);
}

/* googly eye */
.googly {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1b1610;
  box-shadow: 1px 2px 0 rgba(0,0,0,.2);
  display: grid;
  place-items: center;
}
.googly::after {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #1b1610;
  transform: translate(2px, 3px);
}