/* ===========================================================================
   DISCORDEDJOKER — "Unemployed cat shaped sleep paralysis demon // Artist"

   The page is a tape. His own Alley banner is a camcorder frame, so the top
   is the viewfinder (REC, battery, a timecode stuck at 3:33am), everything
   under it sits behind scanlines and a little grain, and the colours come
   out of his art: the blood red behind his self-portrait, the lilac of his
   hair, Guromi's toxic pink and teal, and the green-white of a VHS display.

   Fonts already on the shop: Rubik Glitch for his name, Share Tech Mono for
   the camcorder, Courier Prime for the night log, Rubik Wet Paint for the
   headings that drip.
   =========================================================================== */

@font-face { font-family: 'Share Tech Mono'; src: url('/assets/fonts/share-tech-mono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/courier-prime-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/courier-prime-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Rubik Glitch'; src: url('/assets/fonts/kloudi-rubikglitch-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rubik Wet Paint'; src: url('/assets/fonts/rubik-wet-paint-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

body.cp-theme-discordedjoker {
  --jk-void:  #050507;   /* the room, after the light goes */
  --jk-tape:  #0D0F0E;   /* raised: the cassette body */
  --jk-line:  #262A27;
  --jk-osd:   #DCE8D2;   /* the camcorder's green-white */
  --jk-dim:   #9AA597;
  --jk-mute:  #6E766C;
  --jk-blood: #D9262F;   /* the red behind his self-portrait */
  --jk-lilac: #C9A6F2;   /* his hair */
  --jk-pink:  #FF4FB8;   /* Guromi's splats */
  --jk-teal:  #3FD6B4;   /* Guromi's hair */

  --jk-glitch: 'Rubik Glitch', 'Anton', Impact, sans-serif;
  --jk-cam:    'Share Tech Mono', ui-monospace, monospace;
  --jk-type:   'Courier Prime', 'Courier New', monospace;
  --jk-drip:   'Rubik Wet Paint', 'Anton', Impact, sans-serif;

  background: var(--jk-void);
  color: var(--jk-osd);
}

.jk {
  position: relative; z-index: 1; overflow-x: clip;
  font-family: var(--jk-type); color: var(--jk-osd);
}
.jk a { color: var(--jk-lilac); }
.jk a:hover { color: var(--jk-pink); }
.jk-wrap { width: min(1130px, calc(100% - 32px)); margin-inline: auto; }
.jk-sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }

/* The grain over everything: a turbulence pattern drawn as a data URI, so
   there is no image file to fetch. It sits still; the scanlines carry the
   movement, and only in the hero. */
.jk-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* His faces. Screen blend, so the black ink drops out and only the pale
   skin shows through the dark; the script sets where, how big, and when. */
.jk-faces { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.jk-faces img {
  position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: var(--fs, 300px); height: auto;
  transform: translate(-50%, -50%) rotate(var(--fr, 0deg)); opacity: 0; mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.25) blur(.4px);
  transition: opacity var(--fin, 60ms) linear;
}
.jk-faces img.is-on { opacity: var(--fo, .14); }

.jk::before {   /* scanlines, faint, page-wide */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .0) 0 2px, rgba(0, 0, 0, .22) 2px 3px);
}

/* ------------------------------------------------------------ type */
.jk-kick { margin: 0 0 10px; font-family: var(--jk-cam); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--jk-blood); }
.jk-h { margin: 0 0 22px; font-family: var(--jk-drip); font-weight: 400; font-size: clamp(40px, 6vw, 76px); line-height: .95; color: var(--jk-osd); letter-spacing: .01em; }
.jk-h em { font-style: normal; color: var(--jk-blood); }
.jk-lede { max-width: 62ch; margin: 0 0 16px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: var(--jk-dim); }
.jk-note { margin-top: 18px; font-size: 14px; color: var(--jk-mute); }

/* ------------------------------------------------------------ buttons */
.jk-do { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.jk-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 2px solid var(--jk-blood); background: var(--jk-blood); color: #fff !important;
  font-family: var(--jk-cam); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.jk-btn:hover { background: #ff2f3a; box-shadow: 3px 0 0 var(--jk-teal), -3px 0 0 var(--jk-pink); transform: translateY(-2px); }
.jk-btn--ghost { background: transparent; border-color: var(--jk-osd); color: var(--jk-osd) !important; }
.jk-btn--ghost:hover { background: rgba(220, 232, 210, .08); }
.jk-btn:focus-visible { outline: 3px solid var(--jk-lilac); outline-offset: 3px; }

/* ================================================================ the viewfinder */
.jk-hero {
  position: relative; min-height: min(100svh, 920px); display: grid; place-items: center;
  padding: 120px 16px 80px; overflow: hidden; isolation: isolate;
}
.jk-hero-tape { position: absolute; inset: 0; z-index: -2; }
.jk-hero-tape img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: contrast(1.15) brightness(.62) saturate(.8); transform: scale(1.04); }
.jk-hero::after {   /* the dark closing in from the edges */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(5, 5, 7, .78) 72%, var(--jk-void) 100%);
}
.jk-scan {   /* the bright band a tape rolls down */
  position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(220, 232, 210, .07) 45%, rgba(220, 232, 210, .12) 50%, transparent);
  animation: jk-roll 7s linear infinite;
}
@keyframes jk-roll { to { top: 110%; } }

.jk-osd { position: absolute; inset: clamp(76px, 9vw, 104px) clamp(14px, 4vw, 48px) clamp(18px, 4vw, 40px); pointer-events: none; font-family: var(--jk-cam); font-size: clamp(14px, 1.5vw, 20px); letter-spacing: .1em; color: var(--jk-osd); text-shadow: 0 0 6px rgba(220, 232, 210, .5); }
.jk-osd > span { position: absolute; }
.jk-osd-rec { top: 14px; left: 18px; display: flex; align-items: center; gap: 10px; }
.jk-osd-rec i { width: 14px; height: 14px; border-radius: 50%; background: var(--jk-blood); box-shadow: 0 0 10px var(--jk-blood); animation: jk-blink 1.2s steps(1) infinite; }
@keyframes jk-blink { 50% { opacity: 0; } }
.jk-osd-bat { top: 16px; right: 18px; display: flex; gap: 3px; padding: 3px; border: 2px solid var(--jk-osd); }
.jk-osd-bat::after { content: ""; position: absolute; right: -6px; top: 5px; width: 3px; height: 8px; background: var(--jk-osd); }
.jk-osd-bat i { width: 8px; height: 12px; background: var(--jk-osd); }
.jk-osd-bat i.is-low { background: var(--jk-blood); animation: jk-blink 2s steps(1) infinite; }
.jk-osd-ch { bottom: 16px; right: 18px; }
.jk-osd-time { bottom: 16px; left: 18px; }
.jk-corner { width: 34px; height: 34px; border: 2px solid var(--jk-osd); opacity: .8; }
.jk-corner.is-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.jk-corner.is-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.jk-corner.is-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.jk-corner.is-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.jk-hero-mid { position: relative; text-align: center; max-width: 980px; }
.jk-hero-mid .jk-do { justify-content: center; }
.jk-hero-mid .jk-kick { color: var(--jk-osd); text-shadow: 0 0 8px rgba(5, 5, 7, .9), 0 0 2px #000; }
.jk-hero-mid .jk-kick::before { content: "B6  "; color: var(--jk-blood); }

/* His name, with the signal split: two offset copies in pink and teal drawn
   from data-text, which the script jolts now and then (.is-glitch). */
.jk-name {
  position: relative; margin: 0; font-family: var(--jk-glitch); font-weight: 400;
  font-size: clamp(44px, 10vw, 136px); line-height: .9; color: var(--jk-osd); text-transform: uppercase;
  text-shadow: 0 0 18px rgba(220, 232, 210, .25);
}
.jk-name::before, .jk-name::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; white-space: pre-line;
}
.jk-name::before { color: var(--jk-pink); transform: translate(-3px, 0); opacity: .7; }
.jk-name::after { color: var(--jk-teal); transform: translate(3px, 0); opacity: .7; }
.jk-name.is-glitch::before { transform: translate(-10px, -2px); clip-path: inset(18% 0 52% 0); }
.jk-name.is-glitch::after { transform: translate(9px, 2px); clip-path: inset(58% 0 12% 0); }
.jk-tag { margin: 18px 0 0; font-family: var(--jk-cam); font-size: clamp(15px, 1.8vw, 21px); letter-spacing: .14em; text-transform: uppercase; color: var(--jk-osd); }
.jk-tag span { color: var(--jk-blood); }

.jk-socials { display: flex; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.jk-socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(220, 232, 210, .35); color: var(--jk-osd); background: rgba(5, 5, 7, .5); transition: border-color .15s, color .15s; }
.jk-socials a:hover { border-color: var(--jk-blood); color: var(--jk-blood); }
.jk-socials svg { width: 20px; height: 20px; fill: currentColor; }

/* ================================================================ the night log */
.jk-log { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.jk-evidence { position: relative; justify-self: center; transform: rotate(-3deg); }
.jk-polaroid { margin: 0; padding: 14px 14px 52px; background: #E9E6DC; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.jk-polaroid img { display: block; width: min(380px, 70vw); height: auto; filter: contrast(1.05) saturate(.9); }
.jk-polaroid figcaption { position: absolute; left: 14px; right: 14px; bottom: 16px; font-family: var(--jk-type); font-weight: 700; font-size: 13px; color: #2A2622; }
.jk-tape { position: absolute; width: 110px; height: 30px; background: rgba(220, 210, 170, .55); }
.jk-tape.is-a { top: -12px; left: -26px; transform: rotate(-28deg); }
.jk-tape.is-b { bottom: 30px; right: -30px; transform: rotate(-24deg); }

.jk-times { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.jk-times li { font-size: clamp(17px, 1.6vw, 21px); color: var(--jk-osd); }
.jk-times time { display: inline-block; min-width: 72px; font-family: var(--jk-cam); color: var(--jk-blood); }

.jk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }
.jk-facts > div { padding: 14px 16px; border: 1px solid var(--jk-line); background: rgba(13, 15, 14, .8); }
.jk-facts dt { font-family: var(--jk-cam); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--jk-mute); }
.jk-facts dd { margin: 6px 0 0; font-family: var(--jk-drip); font-size: 30px; color: var(--jk-lilac); }

/* ================================================================ the cast */
.jk-cast-sec { padding-bottom: clamp(40px, 6vw, 80px); }
.jk-stage {
  position: relative; margin-top: 28px; overflow: hidden;
  border-top: 1px solid var(--jk-line); border-bottom: 1px solid var(--jk-line);
  background: radial-gradient(70% 90% at 50% 100%, #14101a, var(--jk-void));
  --x: 50%; --y: 50%; --r: 170px;
}
.jk-cast {
  list-style: none; margin: 0 auto; padding: 40px 16px 56px; max-width: 1320px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px clamp(4px, 1.6vw, 22px);
}
.jk-cast li { position: relative; flex: 0 0 auto; width: clamp(120px, 15vw, 200px); }
.jk-cast li:nth-child(3n+2) { transform: translateY(14px); }
.jk-cast li:nth-child(3n) { transform: translateY(28px); }
.jk-cast img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .8)); }
.jk-cast-name {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--jk-cam); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--jk-osd);
  background: rgba(5, 5, 7, .8); padding: 3px 8px; border: 1px solid var(--jk-line);
}
.jk-cast-name small { display: block; font-size: 10px; color: var(--jk-mute); text-align: center; }

/* The dark, with the torch cut out of it. The mask moves with --x/--y. */
.jk-dark {
  position: absolute; inset: 0; pointer-events: none; background: rgba(3, 3, 5, .965);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
  transition: opacity .4s ease;
}
.jk-stage-hint { position: absolute; left: 18px; bottom: 12px; margin: 0; font-family: var(--jk-cam); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--jk-mute); pointer-events: none; }
.jk-stage.is-found .jk-stage-hint { opacity: 0; transition: opacity .4s; }
/* No script, or less motion: thin dark, no torch. */
.jk-stage:not(.is-live) .jk-dark { -webkit-mask-image: none; mask-image: none; background: rgba(3, 3, 5, .35); }
.jk-stage:not(.is-live) .jk-stage-hint { display: none; }

/* ================================================================ the tapes */
.jk-shelf { margin-top: 44px; }
.jk-shelf-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--jk-line); font-family: var(--jk-cam); font-weight: 400; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--jk-osd); }
.jk-shelf-h small { font-family: var(--jk-type); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--jk-mute); }
.jk-tapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.jk-shelf--renders .jk-tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jk-tape-card { display: block; text-decoration: none; color: var(--jk-osd) !important; background: var(--jk-tape); border: 1px solid var(--jk-line); padding: 10px 10px 0; transition: transform .2s ease, border-color .2s ease; }
.jk-tape-card:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--jk-blood); }
.jk-tape-card:focus-visible { outline: 3px solid var(--jk-lilac); outline-offset: 3px; }
.jk-tape-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #000; }
.jk-shelf--renders .jk-tape-frame { aspect-ratio: 16 / 9; }
.jk-tape-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05); transition: filter .25s ease, transform .4s ease; }
.jk-tape-frame::after {   /* the tape's own scanlines, which clear when you look closer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px);
  transition: opacity .25s ease;
}
.jk-tape-card:hover .jk-tape-frame img { filter: none; transform: scale(1.03); }
.jk-tape-card:hover .jk-tape-frame::after { opacity: .25; }
.jk-tape-label {
  display: flex; align-items: baseline; gap: 10px; margin: 10px -10px 0; padding: 9px 12px;
  background: #E9E6DC; color: #1E1B18; font-family: var(--mark, 'Permanent Marker'), cursive; font-size: 17px;
}
.jk-tape-label b { font-family: var(--jk-cam); font-weight: 400; font-size: 12px; letter-spacing: .12em; color: var(--jk-blood); }
.jk-more { margin-top: 26px; font-family: var(--jk-cam); letter-spacing: .08em; text-transform: uppercase; }

/* ---------------- the tape player (lightbox) ---------------- */
/* A <dialog>, so the page behind it is inert and Esc closes it. Full
   screen, near black, the camcorder's readout in the corners. */
.jk-lb {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: #050507; color: var(--jk-osd); overflow: hidden;
  font-family: var(--jk-cam);
}
.jk-lb::backdrop { background: #000; }
.jk-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; justify-items: center; gap: 12px; padding: 18px 16px 22px; box-sizing: border-box; }
.jk-lb::before {   /* the screen's own scanlines, over everything */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px);
}
.jk-lb-osd { grid-row: 1; justify-self: stretch; display: flex; justify-content: space-between; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .14em; text-shadow: 0 0 6px rgba(220, 232, 210, .5); }
.jk-lb-play { color: var(--jk-osd); animation: jk-blink 1.6s steps(1) infinite; }
.jk-lb-screen { grid-row: 2; position: relative; display: grid; place-items: center; width: 100%; min-height: 0; }
.jk-lb-img {
  /* Room kept for the readout above and the label and deck below, so the
     picture never pushes them off the screen. */
  max-width: min(100%, 1400px); max-height: calc(100dvh - 200px); width: auto; height: auto; object-fit: contain;
  border: 1px solid rgba(220, 232, 210, .18); box-shadow: 0 30px 80px -20px #000, 0 0 0 1px rgba(217, 38, 47, .25);
  background: #000;
}
.jk-lb-lines { position: absolute; inset: 0; pointer-events: none; }
/* Changing tapes: a few frames of the signal tearing. */
.jk-lb-screen.is-tear .jk-lb-img { animation: jk-tear .26s steps(3) 1; }
@keyframes jk-tear {
  0%   { transform: translateX(-10px); filter: drop-shadow(6px 0 0 rgba(255, 79, 184, .7)) drop-shadow(-6px 0 0 rgba(63, 214, 180, .7)); clip-path: inset(0 0 55% 0); }
  50%  { transform: translateX(8px); clip-path: inset(40% 0 0 0); }
  100% { transform: none; filter: none; clip-path: none; }
}
.jk-lb-label { grid-row: 3; margin: 0; text-align: center; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .1em; }
.jk-lb-label b { color: var(--jk-blood); font-weight: 400; margin-right: 10px; }
.jk-lb-label span { font-family: var(--mark, 'Permanent Marker'), cursive; letter-spacing: 0; font-size: 1.15em; }
.jk-lb-deck { grid-row: 4; display: flex; gap: 8px; z-index: 3; }
.jk-lb-btn {
  min-width: 64px; min-height: 46px; padding: 0 16px; border: 1px solid rgba(220, 232, 210, .4); background: rgba(13, 15, 14, .9);
  color: var(--jk-osd); font-family: var(--jk-cam); font-size: 16px; letter-spacing: .1em; cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.jk-lb-btn:hover { border-color: var(--jk-blood); color: #fff; background: rgba(217, 38, 47, .25); }
.jk-lb-btn:focus-visible { outline: 2px solid var(--jk-lilac); outline-offset: 3px; }
.jk-lb-stop { border-color: var(--jk-blood); color: #fff; background: var(--jk-blood); }
.jk-lb-stop:hover { background: #ff2f3a; }
.jk-lb-full { position: absolute; right: 18px; bottom: 26px; z-index: 3; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jk-dim) !important; text-decoration: none; }
.jk-lb-full:hover { color: var(--jk-lilac) !important; }
@media (max-width: 700px) { .jk-lb-full { position: static; grid-row: 5; } .jk-lb[open] { grid-template-rows: auto minmax(0, 1fr) auto auto auto; } }
@media (prefers-reduced-motion: reduce) { .jk-lb-play { animation: none; } .jk-lb-screen.is-tear .jk-lb-img { animation: none; } }
body:has(.jk-lb[open]) { overflow: hidden; }

/* ================================================================ the summoning */
.jk-summon { display: grid; place-items: center; text-align: center; }
.jk-circle {
  position: relative; width: min(760px, 100%); padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px);
  border: 1px solid rgba(217, 38, 47, .55);
  background: radial-gradient(60% 70% at 50% 40%, rgba(217, 38, 47, .14), transparent 70%), rgba(13, 15, 14, .7);
}
.jk-circle::before {   /* a chalk ring behind the words */
  content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 90%); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px dashed rgba(217, 38, 47, .22); border-radius: 50%; pointer-events: none;
  animation: jk-turn 60s linear infinite;
}
@keyframes jk-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.jk-circle > * { position: relative; }
.jk-circle .jk-lede { margin-inline: auto; }
.jk-status { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 18px; font-family: var(--jk-cam); letter-spacing: .1em; text-transform: uppercase; }
.jk-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--jk-teal); box-shadow: 0 0 10px var(--jk-teal); }
.jk-status i.is-waitlist, .jk-status i.is-full { background: #F5C451; box-shadow: 0 0 10px #F5C451; }
.jk-status i.is-closed { background: var(--jk-mute); box-shadow: none; }
.jk-services { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 520px; display: grid; gap: 8px; text-align: left; }
.jk-services a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--jk-line); background: rgba(5, 5, 7, .6); text-decoration: none; color: var(--jk-osd) !important; }
.jk-services a:hover { border-color: var(--jk-blood); }
.jk-services span { font-family: var(--jk-cam); color: var(--jk-lilac); white-space: nowrap; }

/* ================================================================ streams */
.jk-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; }
.jk-media-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--jk-line); }
.jk-media-thumb a { display: block; height: 100%; }
.jk-media-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.jk-media-chip, .jk-media-len { position: absolute; bottom: 8px; padding: 2px 7px; font-family: var(--jk-cam); font-size: 12px; background: rgba(5, 5, 7, .85); color: var(--jk-osd); }
.jk-media-chip { left: 8px; color: var(--jk-blood); text-transform: uppercase; }
.jk-media-len { right: 8px; }
.jk-media-title {
  margin: 10px 0 0; font-family: var(--jk-type); font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--jk-osd);
  letter-spacing: 0; text-transform: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* TikToks stand up: a narrower card, 9:16. */
/* Four TikToks, filling the row edge to edge; two across on a phone. */
.jk-media-grid--tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .jk-media-grid--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jk-media--tall .jk-media-thumb { aspect-ratio: 9 / 16; }
.jk-media-static {
  display: grid; place-items: center; height: 100%; font-family: var(--jk-cam); letter-spacing: .2em; color: var(--jk-dim);
  background:
    repeating-linear-gradient(180deg, rgba(220, 232, 210, .06) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 50%, #1a1d1b, #050507);
}

/* ================================================================ shop + join */
.jk-shop { margin-top: 16px; }
.jk-join { padding: 30px 0 60px; }
.jk-join-card { padding: clamp(28px, 5vw, 52px); border: 1px solid var(--jk-line); background: var(--jk-tape); }
.jk-join-card h2 { margin: 0 0 14px; font-family: var(--jk-drip); font-weight: 400; font-size: clamp(32px, 4.4vw, 54px); line-height: 1; color: var(--jk-osd); }
.jk-join-card h2 em { font-style: normal; color: var(--jk-blood); }
.jk-join-card p { max-width: 64ch; line-height: 1.7; color: var(--jk-dim); }
.jk-end { padding: 10px 0 70px; text-align: center; font-family: var(--jk-cam); letter-spacing: .14em; text-transform: uppercase; color: var(--jk-mute); }

/* reveal: the shared [data-reveal] contract (creator-media.js adds .is-in) */
.jk [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.jk [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------- header: the camcorder's black ---------------- */
body.cp-theme-discordedjoker .cpnav { font-family: 'Share Tech Mono', 'Nunito', ui-monospace, monospace; }
body.cp-theme-discordedjoker .cpnav-in { background: rgba(5, 5, 7, .72); border-color: rgba(220, 232, 210, .14); box-shadow: 0 14px 34px -20px rgba(217, 38, 47, .55), inset 0 1px 0 rgba(220, 232, 210, .06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-discordedjoker .cpnav-in { background: rgba(5, 5, 7, .96); } }
.perf-lite body.cp-theme-discordedjoker .cpnav-in { background: rgba(5, 5, 7, .97); }
body.cp-theme-discordedjoker .cpnav-who { color: #DCE8D2; font-weight: 400; letter-spacing: .06em; border-left-color: rgba(220, 232, 210, .14); }
body.cp-theme-discordedjoker .cpnav-av { border-color: #D9262F; box-shadow: 0 4px 12px -6px #D9262F; }
body.cp-theme-discordedjoker .cpnav-av img { object-position: 50% 32%; transform-origin: 50% 32%; transform: scale(1.35); }   /* the cat-demon's face */
body.cp-theme-discordedjoker .cpnav-links a { color: #9AA597; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
body.cp-theme-discordedjoker .cpnav-links a:hover { color: #DCE8D2; background: rgba(220, 232, 210, .07); }
body.cp-theme-discordedjoker .cpnav-links a[aria-current="true"] { background: #D9262F; color: #fff; box-shadow: 0 6px 16px -8px #D9262F; }
body.cp-theme-discordedjoker .cpnav-cart { background: #D9262F; color: #fff; box-shadow: 0 8px 18px -10px #D9262F; }
body.cp-theme-discordedjoker .cpnav-cart:hover { background: #C9A6F2; color: #050507; }
body.cp-theme-discordedjoker .cpnav-account { background: rgba(220, 232, 210, .08); color: #DCE8D2; }
body.cp-theme-discordedjoker .cpnav-account:hover { background: #D9262F; color: #fff; }
body.cp-theme-discordedjoker .cpnav-burger { background: rgba(220, 232, 210, .08); }
body.cp-theme-discordedjoker .cpnav-burger span { background: #DCE8D2; }

/* ---------------- narrower ---------------- */
@media (max-width: 900px) {
  .jk-log { grid-template-columns: minmax(0, 1fr); }
  .jk-evidence { margin-bottom: 18px; }
}
@media (max-width: 600px) {
  .jk-facts { grid-template-columns: minmax(0, 1fr); }
  .jk-osd { font-size: 12px; top: 128px; }   /* below the two-row header */
  .jk-osd-ch { display: none; }
  .jk-corner { width: 22px; height: 22px; }
  .jk-cast li { width: 40vw; }
  .jk-tapes, .jk-shelf--renders .jk-tapes { grid-template-columns: minmax(0, 1fr); }
}

/* Less motion, or a machine that cannot keep up: the tape stops rolling,
   REC stops blinking, the ring stops turning, and nothing jolts. */
@media (prefers-reduced-motion: reduce) {
  .jk-scan, .jk-osd-rec i, .jk-osd-bat i.is-low, .jk-circle::before { animation: none; }
  .jk-tape-card:hover, .jk-btn:hover { transform: none; }
  .jk [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.perf-lite .jk-scan, .perf-lite .jk-circle::before { animation: none; }
.perf-lite .jk-grain { display: none; }
.perf-lite .jk-faces { display: none; }
@media (prefers-reduced-motion: reduce) { .jk-faces { display: none; } }

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-discordedjoker) { --scroll-acc: #D9262F; }