/* jazgarewal.com
   A 2006 profile belonging to someone hustling — a band, a comedian working
   clubs. Not a portfolio. Skinned like an edit suite because that's what he'd
   have skinned it like: SMPTE bars where the glitter goes, timecode where the
   hit counter goes. No webfonts, no framework, no dependencies. Nothing has to
   run for the page to be readable -- the ~2KB inline script only reads the lens
   off the URL, restores the motion preference, drives the timecode, and swaps a
   poster for a YouTube frame when you ask for one. Motion is opt-out. */

:root {
  --b1:#C0C0C0; --b2:#C0C000; --b3:#00C0C0; --b4:#00C000;
  --b5:#C000C0; --b6:#C00000; --b7:#0000C0;

  --box:   #0C0C12;
  --box2:  #14141D;
  --edge:  #2A2A3A;
  --ink:   #E9E9F0;   /* 17.3:1 on --box */
  --dim:   #A9A9B4;   /*  8.5:1 */
  --link:  #6FE3FF;   /* 13.2:1 */
  --gold:  #FFDD55;   /* 15.0:1 */
  --hot:   #FF4D9E;   /*  6.3:1 */
  --lime:  #9BFF3D;
  --media: #FF7A18;
  --soft:  #35C8FF;
  --track: #1A1A24;
  --sound: #FFB000;
  --impact: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;

  /* The SMPTE strip under every module header, held in a variable so each
     theme can swap the whole graphic without restating the seven stops.
     It is a background layer rather than a border-image because
     border-image cannot be animated, and this one crawls. */
  --h2bg: var(--box2);
  --stripw: 182px;
  --strip: repeating-linear-gradient(90deg,
    var(--b1) 0 26px, var(--b2) 26px 52px, var(--b3) 52px 78px,
    var(--b4) 78px 104px, var(--b5) 104px 130px, var(--b6) 130px 156px,
    var(--b7) 156px 182px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 8px 0 28px;
  font: 11px/1.45 Verdana, Geneva, Tahoma, sans-serif;
  color: var(--ink);
  background-color: #05050A;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(192,192,192,.12) 0 26px, rgba(192,192,0,.12) 26px 52px,
      rgba(0,192,192,.12) 52px 78px, rgba(0,192,0,.12) 78px 104px,
      rgba(192,0,192,.12) 104px 130px, rgba(192,0,0,.12) 130px 156px,
      rgba(0,0,192,.12) 156px 182px);
  background-attachment: fixed;
}

a { color: var(--link); text-decoration: underline; }
a:hover, a:focus-visible { color: var(--gold); background: #2A1E00; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.skip { position:absolute; left:-9999px; background:var(--gold); color:#000; padding:4px 8px; z-index:9; }
.skip:focus { left:4px; top:4px; }

.wrap { max-width: 812px; margin: 0 auto; padding: 0 6px; }

.bars {
  height: 8px;
  background: linear-gradient(90deg,
    var(--b1) 0 14.28%, var(--b2) 14.28% 28.56%, var(--b3) 28.56% 42.84%,
    var(--b4) 42.84% 57.12%, var(--b5) 57.12% 71.4%, var(--b6) 71.4% 85.68%,
    var(--b7) 85.68% 100%);
}

/* ---- banner -------------------------------------------------------- */

.banner {
  background: var(--box);
  border: 2px solid var(--edge);
  border-bottom: 0;
  padding: 16px 12px 12px;
  text-align: center;
}
h1 {
  margin: 0;
  font-family: var(--impact);
  font-size: clamp(38px, 11vw, 76px);
  font-weight: normal; line-height: .92;
  letter-spacing: .01em; text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 var(--hot), 6px 6px 0 #000, 0 0 26px rgba(255,77,158,.6);
}
.banner .sub {
  margin: 10px 0 0;
  font-family: var(--impact);
  font-size: clamp(11px, 2.6vw, 15px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--b3);
}
.banner .aka { margin: 7px 0 0; font-size: 10px; color: var(--dim); }
.banner .aka b { color: var(--gold); }

.topbar {
  background: #000;
  border: 2px solid var(--edge);
  border-top: 0; border-bottom: 0;
  padding: 6px 8px; font-size: 10px; color: var(--dim);
  text-align: center;
}
.topbar a { text-decoration: none; font-weight: bold; }
.topbar .sep { color: var(--edge); padding: 0 5px; }

/* ---- the ask ------------------------------------------------------- */

.shout {
  background: #2A0016;
  border: 3px dashed var(--hot);
  padding: 12px;
  margin: 8px 0;
  text-align: center;
}
.shout h2 {
  margin: 0 0 6px;
  font-family: var(--impact); font-weight: normal;
  font-size: clamp(19px, 5vw, 27px);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); text-shadow: 2px 2px 0 #000;
}
.shout p { margin: 0 0 8px; font-size: 11px; }
.shout p:last-of-type { margin-bottom: 10px; }
.cta {
  display: inline-block;
  background: var(--gold); color: #000;
  border: 3px outset var(--gold);
  padding: 7px 16px;
  font-family: var(--impact); font-size: 18px; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none;
}
.cta:hover, .cta:focus-visible { background: var(--lime); border-color: var(--lime); color: #000; }

/* ---- layout -------------------------------------------------------- */

.cols { display: grid; grid-template-columns: 214px 1fr; gap: 8px; align-items: start; }
@media (max-width: 660px) { .cols { grid-template-columns: 1fr; } }

/* ---- modules ------------------------------------------------------- */

.mod {
  position: relative;          /* stickers anchor here */
  background: var(--box);
  border: 2px solid var(--edge);
  margin-bottom: 8px;
  box-shadow: 0 0 0 1px #000, 0 3px 14px rgba(0,0,0,.75);
}
.mod > h2 {
  margin: 0; padding: 6px 8px 8px;
  color: var(--gold);
  font-family: var(--impact); font-size: 17px; font-weight: normal;
  letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  background-image: linear-gradient(var(--h2bg), var(--h2bg)), var(--strip);
  background-size: 100% 100%, var(--stripw) 3px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat, repeat-x;
}
.mod .body { padding: 8px; }

/* ---- profile card -------------------------------------------------- */

.idcard { padding: 12px 8px 8px; text-align: center; }
.shot {
  display: block; width: 92%; height: auto; margin: 0 auto;
  border: 6px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.9);
  transform: rotate(-2.2deg);
}
.online {
  margin: 14px 0 0; font-size: 12px; font-weight: bold; color: var(--lime);
  text-shadow: 0 0 10px rgba(155,255,61,.85);
}
@keyframes blink { 0%,62%{opacity:1} 63%,100%{opacity:.25} }

.note {
  margin: 8px 0 0; padding: 7px 6px;
  background: #241A00; border: 2px dashed var(--gold);
  color: var(--gold);
  font-family: 'Comic Sans MS', 'Comic Neue', cursive;
  font-size: 12px;
}
.counter {
  margin: 8px 0 0; font-size: 9px; color: var(--b4);
  font-family: 'Courier New', monospace; letter-spacing: .08em;
}

/* ---- tables -------------------------------------------------------- */

.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { text-align:left; vertical-align:top; padding:4px 5px; font-size:10px; border:1px solid var(--edge); }
.tbl th { background:var(--box2); color:var(--b3); font-weight:bold; white-space:nowrap; width:36%; }

.actions { margin:0; padding:0; list-style:none; font-size:11px; }
.actions li { border-bottom:1px solid var(--edge); }
.actions li:last-child { border-bottom:0; }
.actions a { display:block; padding:7px 6px; text-decoration:none; font-weight:bold; }
.actions a:hover, .actions a:focus-visible { background:var(--box2); text-decoration:underline; }
.actions .ico { display:inline-block; width:16px; color:var(--hot); }

/* ---- prose --------------------------------------------------------- */

.prose p { margin:0 0 9px; }
.prose p:last-child { margin-bottom:0; }
.prose b { color:var(--gold); }
.prose .kicker {
  font-family:var(--impact); font-size:15px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--hot);
}

/* ---- bulletin ------------------------------------------------------ */

.bulletin { border-left:4px solid var(--b2); padding-left:9px; }
.bulletin .stamp { display:block; font-family:'Courier New',monospace; font-size:9px; color:var(--b2); margin-bottom:4px; }

/* ---- dates --------------------------------------------------------- */

.dates { list-style:none; margin:0; padding:0; font-size:10px; }
.dates li { display:grid; grid-template-columns:4.6em 1fr; gap:8px; padding:6px 3px; border-bottom:1px dashed var(--edge); }
.dates li:last-child { border-bottom:0; }
.dates .yr { font-family:var(--impact); font-size:16px; color:var(--gold); letter-spacing:.03em; }
.dates b { color:var(--ink); }

/* ---- friend space -------------------------------------------------- */

.friendcount { margin:0 0 8px; font-size:11px; color:var(--dim); text-align:center; }
.friendcount b { color:var(--gold); font-family:var(--impact); font-size:17px; }

.top8 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
@media (max-width:700px){ .top8{grid-template-columns:repeat(2,1fr);} }
@media (max-width:340px){ .top8{grid-template-columns:1fr;} }
.top8 li { border:2px solid #000; background:#10101A; font-size:10px; line-height:1.35; text-align:center; }
.top8 .tile {
  display:block; padding:14px 2px;
  font-family:var(--impact); font-size:30px; font-weight:normal; color:#000;
  background:var(--b3);
}
/* The number is the rank in the lens that is on. Three ranks travel on the
   tile as data-r / data-rf / data-rs; the lens picks which one shows and
   which custom property sorts the grid. */
.top8 .tile::before { content:attr(data-r); }
[data-theme="bay"] .top8 .tile::before { content:attr(data-rf); }
[data-theme="matrix"] .top8 .tile::before { content:attr(data-rs); }
[data-theme="bay"] .top8 li { order:var(--rf); }
[data-theme="matrix"] .top8 li { order:var(--rs); }
.top8 li:nth-child(2n) .tile { background:var(--b5); color:#fff; }
.top8 li:nth-child(3n) .tile { background:var(--b2); color:#000; }
.top8 li:nth-child(5n) .tile { background:var(--b4); color:#000; }
.top8 .meta { display:block; padding:5px 4px; color:var(--dim); }
.top8 .t { display:block; font-weight:bold; color:var(--ink); }
.top8 .yr { color:var(--b2); }

/* ---- timeline ------------------------------------------------------ */

.lane-key { margin:0 0 8px; font-size:10px; color:var(--dim); }
.swatch { display:inline-block; width:9px; height:9px; border:1px solid #000; vertical-align:-1px; }
.swatch.m { background:var(--media); } .swatch.s { background:var(--soft); }

.lane-title {
  margin:0 0 5px; padding:4px 7px;
  background:var(--box2); border-left:5px solid var(--media);
  font-family:var(--impact); font-size:16px; font-weight:normal;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.lane { margin:0 0 9px; }
.lane-title.s { border-left-color:var(--soft); }

.tl { list-style:none; margin:0; padding:0; }
.tl li { display:grid; grid-template-columns:5.6em 1fr; gap:0 7px; padding:5px 3px; border-bottom:1px solid #15151E; font-size:10px; color:var(--dim); }
.tl li:nth-child(odd) { background:#0E0E16; }
.tl li:last-child { border-bottom:0; }
.tl .when { color:var(--b2); white-space:nowrap; font-family:'Courier New',monospace; }
.tl .what b { color:var(--ink); }

/* Duration bar. --s = start offset, --w = length, as a percentage of the
   1998-2027 span.  s = (startYear-1998)/29*100,  w = years/29*100 */
.bar { grid-column:2; position:relative; height:8px; margin-top:4px; background:var(--track); border:1px solid #000; }
.bar i { position:absolute; top:0; bottom:0; left:var(--s); width:var(--w); min-width:3px; overflow:hidden; background:var(--media); box-shadow:0 0 7px rgba(255,122,24,.7); }
.tl.sw .bar i { background:var(--soft); box-shadow:0 0 7px rgba(53,200,255,.7); }

/* The label column has to match .tl li's 5.6em -- but that em resolves against
   .tl li's 10px, not the 9px here, so the same string means 50.4px in this rule
   and 56px in that one. Same trap the bay playhead comment below describes.
   Stated in px so the two cannot drift apart again. */
.axis { display:grid; grid-template-columns:56px 1fr; gap:7px; font-size:9px; color:var(--dim); margin:5px 0 0; font-family:'Courier New',monospace; }

/* Ticks sit at their true place on the 1998-2027 span, by the same
   (year-1998)/29*100 the bars use, carried in --x. justify-content:space-between
   was pinning 2026 to the right edge -- about nine months late, on the one
   graphic whose whole claim is that distance is real elapsed time. */
.axis .ticks { position:relative; height:1.6em; }
.axis .ticks span { position:absolute; left:var(--x); transform:translateX(-50%); padding-top:5px; }
.axis .ticks span::before { content:""; position:absolute; top:0; left:50%; width:1px; height:3px; background:currentColor; }
.axis .ticks span:first-child { transform:translateX(0); }
.axis .ticks span:first-child::before { left:0; }
.axis .ticks span:last-child { transform:translateX(-100%); }
.axis .ticks span:last-child::before { left:calc(100% - 1px); }

/* ---- twirl-downs --------------------------------------------------- */

details { border:2px solid var(--edge); background:#10101A; margin-top:8px; }
details > summary { cursor:pointer; padding:6px 8px; font-size:11px; font-weight:bold; color:var(--b3); list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:"\25B8"; display:inline-block; margin-right:6px; color:var(--hot); transition:transform .12s ease; }
details[open] > summary::before { transform:rotate(90deg); }
details > .inner { padding:7px 8px 8px; background:var(--box); border-top:2px solid var(--edge); font-size:10px; color:var(--dim); }
details > .inner p { margin:0 0 6px; }
details > .inner p:last-child { margin-bottom:0; }

/* ---- press --------------------------------------------------------- */

.press { list-style:none; margin:0; padding:0; font-size:10px; }
.press > li { padding:7px 4px; border-bottom:1px solid #15151E; color:var(--dim); }
.press > li:nth-child(odd) { background:#0E0E16; }
.press > li:last-child { border-bottom:0; }
.press a { font-family:var(--impact); font-size:15px; letter-spacing:.03em; }
.press blockquote { margin:5px 0 0; padding:5px 8px; background:var(--box2); border-left:4px solid var(--b2); color:var(--ink); font-style:italic; }

/* ---- footer -------------------------------------------------------- */

.foot { margin-top:8px; padding:9px; background:var(--box); border:2px solid var(--edge); color:var(--dim); font-size:10px; text-align:center; }

/* Unconditional backstop. The Motion control below is the WCAG 2.2.2
   mechanism; this is the belt to its braces, and it wins over everything. */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* ---- theme control ------------------------------------------------- */

.themebar {
  background:#000; border:2px solid var(--edge); border-top:0;
  padding:5px 8px; font-size:10px; color:var(--dim); text-align:center;
}
.themebar label { color:var(--b3); font-weight:bold; margin-right:5px; }
.themebar select {
  font:inherit; font-weight:bold;
  background:var(--box2); color:var(--gold);
  border:2px solid var(--edge); padding:3px 5px;
}

/* heading variants: one per theme, the other removed from the a11y tree */
.t-plain { display:none; }
[data-theme="bay"] .t-loud { display:none; }
[data-theme="bay"] .t-plain { display:inline; }

/* =====================================================================
   THEME: BAY — the edit suite.
   An 18% photographic grey card, because you cannot judge an image
   against black or white. Track colours are SMPTE bar hues darkened
   until each clears WCAG AA on that ground. The timeline becomes the
   hero; the profile furniture goes quiet.
   ===================================================================== */

[data-theme="bay"] {
  --box:   #C3C1BB;   /* the grey card */
  --box2:  #B4B2AC;
  --edge:  #63615C;
  --ink:   #17191B;   /* 10.1:1 on the card */
  --dim:   #4A4D50;   /*  4.7:1 */
  --link:  #14515B;   /*  5.0:1  — SMPTE cyan, darkened */
  --gold:  #7E2A4C;   /*  5.0:1  — SMPTE magenta, darkened */
  --hot:   #7E2A4C;
  --lime:  #14515B;
  --media: #7E2A4C;
  --soft:  #14515B;
  --track: #AEACA6;
  --sound: #6B4A12;   /*  4.5:1 on the card */
  --impact: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="bay"] body {
  background-color: #B4B2AC;
  background-image: none;
  font-size: 12px;
  line-height: 1.55;
}
[data-theme="bay"] a { color: var(--link); }
[data-theme="bay"] a:hover,
[data-theme="bay"] a:focus-visible { color: var(--gold); background: transparent; }
[data-theme="bay"] :focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }

/* The ornament stays. Bay was originally the sober skin with all of this
   stripped; the owner asked for full chaos here too (2026-08-04), and the
   animated layer needs furniture to attach to. Reverting is restoring the
   display:none block that used to live here. */
[data-theme="bay"] .online { text-shadow: none; color: var(--gold); font-weight: bold; font-size: 11px; }
[data-theme="bay"] .note {
  background: transparent; border: 2px dashed var(--gold); color: var(--gold);
}
[data-theme="bay"] .counter { color: var(--dim); }
[data-theme="bay"] .friendcount { color: var(--dim); }
[data-theme="bay"] .friendcount b { font-family: var(--impact); font-weight: 800; color: var(--gold); }

[data-theme="bay"] .banner {
  background: var(--box); border: 1px solid var(--edge); border-bottom: 0;
  text-align: left; padding: 22px 16px 16px;
}
[data-theme="bay"] h1 {
  font-family: var(--impact);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800; letter-spacing: -.015em; text-transform: none;
  color: var(--ink); text-shadow: none;
}
[data-theme="bay"] .banner .sub {
  font-family: var(--impact); font-weight: 600;
  letter-spacing: .14em; color: var(--dim); font-size: 11px;
}
[data-theme="bay"] .banner .aka { color: var(--ink); }
[data-theme="bay"] .banner .aka b { color: var(--gold); }

[data-theme="bay"] .topbar,
[data-theme="bay"] .themebar {
  background: var(--box2); border-color: var(--edge); color: var(--dim);
}
[data-theme="bay"] .themebar label { color: var(--dim); }
[data-theme="bay"] .themebar select { background: var(--box); color: var(--ink); border-color: var(--edge); }

[data-theme="bay"] .shout {
  background: var(--box); border: 1px solid var(--edge); border-left: 5px solid var(--gold);
  text-align: left; padding: 14px 16px;
}
[data-theme="bay"] .shout h2 {
  font-family: var(--impact); font-weight: 700; text-transform: none;
  letter-spacing: -.01em; color: var(--ink); text-shadow: none;
  font-size: clamp(17px, 3.4vw, 22px);
}
[data-theme="bay"] .cta {
  background: var(--gold); color: #fff; border: 1px solid var(--gold);
  font-family: var(--impact); font-weight: 700; font-size: 12px;
  letter-spacing: .02em; text-transform: none; padding: 7px 14px;
}
[data-theme="bay"] .cta:hover,
[data-theme="bay"] .cta:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }

[data-theme="bay"] .mod {
  background: var(--box); border: 1px solid var(--edge); box-shadow: none;
}
[data-theme="bay"] .mod > h2 {
  --h2bg: transparent;         /* keeps the SMPTE strip — colour bars are
                                  the edit suite's own reference signal */
  color: var(--ink);
  font-family: var(--impact); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-shadow: none;
  padding: 8px 10px 9px;
}
[data-theme="bay"] .mod .body { padding: 10px; }

[data-theme="bay"] .shot { border: 1px solid var(--edge); box-shadow: none; transform: none; width: 100%; }
[data-theme="bay"] .idcard { padding: 10px; text-align: left; }

[data-theme="bay"] .tbl th { background: var(--box2); color: var(--dim); }
[data-theme="bay"] .tbl th, [data-theme="bay"] .tbl td { border-color: var(--edge); }
[data-theme="bay"] .actions a { font-weight: normal; }
[data-theme="bay"] .actions a:hover, [data-theme="bay"] .actions a:focus-visible { background: var(--box2); }
[data-theme="bay"] .actions .ico { color: var(--gold); }

[data-theme="bay"] .prose b { color: var(--ink); }
[data-theme="bay"] .prose .kicker {
  font-family: var(--impact); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; color: var(--dim);
}
[data-theme="bay"] .bulletin { border-left: 3px solid var(--edge); }
[data-theme="bay"] .bulletin .stamp { color: var(--dim); }

[data-theme="bay"] .dates .yr { font-family: var(--impact); font-weight: 700; font-size: 12px; color: var(--gold); }
[data-theme="bay"] .dates li { border-bottom: 1px solid var(--edge); }

[data-theme="bay"] .top8 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 520px) { [data-theme="bay"] .top8 { grid-template-columns: 1fr; } }
[data-theme="bay"] .top8 li { border: 1px solid var(--edge); background: transparent; text-align: left; display: grid; grid-template-columns: 26px 1fr; }
[data-theme="bay"] .top8 .tile {
  background: var(--box2); color: var(--dim);
  font-family: var(--impact); font-weight: 700; font-size: 11px;
  padding: 6px 0; text-align: center;
  border-right: 1px solid var(--edge);
}
[data-theme="bay"] .top8 li:nth-child(2n) .tile,
[data-theme="bay"] .top8 li:nth-child(3n) .tile,
[data-theme="bay"] .top8 li:nth-child(5n) .tile { background: var(--box2); color: var(--dim); }
[data-theme="bay"] .top8 .meta { padding: 6px 8px; color: var(--dim); }
[data-theme="bay"] .top8 .yr { color: var(--gold); }

[data-theme="bay"] .lane-title {
  background: transparent; border-left: 4px solid var(--media);
  font-family: var(--impact); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; color: var(--ink); padding: 3px 8px;
}
[data-theme="bay"] .lane-title.s { border-left-color: var(--soft); }
[data-theme="bay"] .tl li { color: var(--ink); border-bottom: 1px solid #B8B6B0; }
[data-theme="bay"] .tl li:nth-child(odd) { background: transparent; }
[data-theme="bay"] .tl .when { color: var(--dim); font-family: var(--impact); }
[data-theme="bay"] .bar { background: var(--track); border: 0; }
[data-theme="bay"] .bar i { box-shadow: none; }
[data-theme="bay"] .axis { font-family: var(--impact); color: var(--dim); }

[data-theme="bay"] details { border: 1px solid var(--edge); background: var(--box2); }
[data-theme="bay"] details > summary { color: var(--link); }
[data-theme="bay"] summary::before { color: var(--edge); }
[data-theme="bay"] details > .inner { background: var(--box); border-top: 1px solid var(--edge); color: var(--ink); }

[data-theme="bay"] .press > li { color: var(--ink); border-bottom: 1px solid var(--edge); }
[data-theme="bay"] .press > li:nth-child(odd) { background: transparent; }
[data-theme="bay"] .press a { font-family: var(--impact); font-weight: 700; font-size: 12px; }
[data-theme="bay"] .press blockquote { background: transparent; border-left: 3px solid var(--gold); color: var(--dim); }

[data-theme="bay"] .foot { background: var(--box); border: 1px solid var(--edge); color: var(--dim); }

/* the restructure: in the film lens the work leads -- watch it, then the
   timeline, then the laurels. Profile keeps source order. */
.col-right { display: flex; flex-direction: column; }
[data-theme="bay"] #screen    { order: 1; }
[data-theme="bay"] #tracks    { order: 2; }
[data-theme="bay"] #dates     { order: 3; }
[data-theme="bay"] #press     { order: 4; }
[data-theme="bay"] #about     { order: 5; }
[data-theme="bay"] #top8      { order: 6; }
[data-theme="bay"] #bulletin  { order: 7; }

/* also show the plain headings in any non-profile skin */
[data-theme="matrix"] .t-loud  { display: none; }
[data-theme="matrix"] .t-plain { display: inline; }

/* =====================================================================
   THEME: MATRIX — phosphor terminal.
   Courier on black, green on green, scanlines and rain. Every colour
   still clears AA on black by a wide margin, which is the one mercy
   of building the loud version.
   ===================================================================== */

[data-theme="matrix"] {
  --box:   #000000;
  --box2:  #04140A;
  --edge:  #00A32B;   /*  6.3:1 on black */
  --ink:   #00FF41;   /* 15.4:1 */
  --dim:   #00A32B;   /*  6.3:1 */
  --link:  #00E5FF;   /* 13.6:1 */
  --gold:  #FFB000;   /* 11.5:1 — the old amber terminal */
  --hot:   #FF00A0;   /*  5.8:1 — the Snow Crash half */
  --lime:  #00FF41;
  --media: #FF00A0;
  --soft:  #00E5FF;
  --track: #062012;
  --sound: #FFB000;
  --impact: 'Courier New', Courier, monospace;
}

[data-theme="matrix"] body {
  background-color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; line-height: 1.5;
  color: var(--ink);
  /* falling rain + CRT scanlines */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,65,.055) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0,255,65,.05) 0 1px, rgba(0,0,0,0) 1px 15px),
    linear-gradient(180deg, rgba(0,255,65,.10), rgba(0,0,0,0) 45%);
  background-size: auto, auto, 100% 420px;
  background-attachment: fixed, fixed, scroll;
}
@keyframes rain { from { background-position: 0 0, 0 0, 0 -420px; }
                  to   { background-position: 0 0, 0 0, 0  420px; } }

[data-theme="matrix"] * { text-shadow: 0 0 6px currentColor; }
[data-theme="matrix"] a { color: var(--link); }
[data-theme="matrix"] a:hover,
[data-theme="matrix"] a:focus-visible { color: var(--gold); background: #1A1200; }
[data-theme="matrix"] :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

[data-theme="matrix"] .wrap::before {
  content: "> connection established :: 1998 — present :: 2 identities resolved";
  display: block; padding: 4px 2px 8px;
  font-size: 10px; color: var(--dim); letter-spacing: .04em;
}

[data-theme="matrix"] .bars {
  height: 3px;
  background: linear-gradient(90deg, #000, var(--ink) 45%, #fff 50%, var(--ink) 55%, #000);
}

[data-theme="matrix"] .banner {
  background: var(--box); border: 1px solid var(--edge); border-bottom: 0;
  padding: 20px 12px 14px;
}
[data-theme="matrix"] h1 {
  font-family: var(--impact); font-weight: bold;
  font-size: clamp(28px, 8vw, 58px);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 14px rgba(0,255,65,.9), 2px 0 0 rgba(255,0,160,.55), -2px 0 0 rgba(0,229,255,.55);
}
[data-theme="matrix"] .banner .sub { font-family: var(--impact); color: var(--dim); letter-spacing: .22em; }
[data-theme="matrix"] .banner .aka { color: var(--dim); }
[data-theme="matrix"] .banner .aka b { color: var(--gold); }

[data-theme="matrix"] .topbar,
[data-theme="matrix"] .themebar {
  background: var(--box2); border: 1px solid var(--edge); border-top: 0;
  color: var(--dim); letter-spacing: .04em;
}
[data-theme="matrix"] .themebar label { color: var(--ink); }
[data-theme="matrix"] .themebar select {
  background: #000; color: var(--ink); border: 1px solid var(--edge); font-family: var(--impact);
}
[data-theme="matrix"] .topbar .sep { color: var(--edge); }

[data-theme="matrix"] .shout {
  background: var(--box2); border: 1px solid var(--hot);
  box-shadow: 0 0 22px rgba(255,0,160,.28) inset;
  text-align: left; padding: 14px;
}
[data-theme="matrix"] .shout h2 {
  font-family: var(--impact); font-weight: bold; color: var(--hot);
  letter-spacing: .06em; text-shadow: 0 0 10px rgba(255,0,160,.8);
}
[data-theme="matrix"] .shout h2::before { content: "[ ! ] "; }
[data-theme="matrix"] .cta {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); font-family: var(--impact);
  font-size: 13px; letter-spacing: .1em; padding: 8px 14px;
}
[data-theme="matrix"] .cta::before { content: "> "; }
[data-theme="matrix"] .cta:hover,
[data-theme="matrix"] .cta:focus-visible { background: var(--ink); color: #000; border-color: var(--ink); }

[data-theme="matrix"] .mod {
  background: var(--box); border: 1px solid var(--edge);
  box-shadow: 0 0 16px rgba(0,255,65,.10);
}
[data-theme="matrix"] .mod > h2 {
  --h2bg: transparent;
  --stripw: 120px;
  --strip: linear-gradient(90deg, transparent, var(--ink) 42%, #fff 50%, var(--ink) 58%, transparent);
  color: var(--ink);
  font-family: var(--impact); font-weight: bold; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 9px 9px;
}
[data-theme="matrix"] .mod > h2::before { content: "> "; color: var(--hot); }
[data-theme="matrix"] .mod > h2::after { content: "_"; color: var(--ink); }
@keyframes caret { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* the photo, run through a phosphor tube */
[data-theme="matrix"] .shot {
  width: 100%; transform: none;
  border: 1px solid var(--edge);
  box-shadow: 0 0 18px rgba(0,255,65,.35);
  filter: grayscale(1) contrast(1.25) sepia(1) hue-rotate(65deg) saturate(4.5) brightness(.82);
}
[data-theme="matrix"] .idcard { text-align: left; }
[data-theme="matrix"] .online { color: var(--ink); }
[data-theme="matrix"] .online::before { content: "[ok] "; color: var(--dim); }
[data-theme="matrix"] .note {
  background: transparent; border: 1px dashed var(--gold); color: var(--gold);
  font-family: var(--impact);
}
[data-theme="matrix"] .counter { color: var(--dim); }

[data-theme="matrix"] .tbl th { background: var(--box2); color: var(--dim); }
[data-theme="matrix"] .tbl th, [data-theme="matrix"] .tbl td { border-color: var(--edge); }
[data-theme="matrix"] .actions a::before { content: "> "; color: var(--hot); }
[data-theme="matrix"] .actions .ico { display: none; }
[data-theme="matrix"] .actions a:hover, [data-theme="matrix"] .actions a:focus-visible { background: var(--box2); }

[data-theme="matrix"] .prose b { color: var(--gold); }
[data-theme="matrix"] .prose .kicker { font-family: var(--impact); color: var(--hot); letter-spacing: .14em; }
[data-theme="matrix"] .bulletin { border-left: 1px solid var(--edge); }
[data-theme="matrix"] .bulletin .stamp { color: var(--gold); }

[data-theme="matrix"] .dates li { border-bottom: 1px dashed var(--edge); }
[data-theme="matrix"] .dates .yr { font-family: var(--impact); font-weight: bold; color: var(--gold); font-size: 13px; }
[data-theme="matrix"] .dates b { color: var(--ink); }

[data-theme="matrix"] .friendcount b { font-family: var(--impact); color: var(--gold); }
[data-theme="matrix"] .top8 li { border: 1px solid var(--edge); background: var(--box); }
[data-theme="matrix"] .top8 .tile,
[data-theme="matrix"] .top8 li:nth-child(2n) .tile,
[data-theme="matrix"] .top8 li:nth-child(3n) .tile,
[data-theme="matrix"] .top8 li:nth-child(5n) .tile {
  background: var(--box2); color: var(--ink);
  font-family: var(--impact); font-weight: bold; font-size: 22px;
  border-bottom: 1px solid var(--edge);
}
[data-theme="matrix"] .top8 .meta { color: var(--dim); }
[data-theme="matrix"] .top8 .t { color: var(--ink); }
[data-theme="matrix"] .top8 .yr { color: var(--gold); }

[data-theme="matrix"] .lane-title {
  background: transparent; border-left: 3px solid var(--media);
  font-family: var(--impact); font-weight: bold; font-size: 12px;
  letter-spacing: .16em; color: var(--ink);
}
[data-theme="matrix"] .lane-title.s { border-left-color: var(--soft); }
[data-theme="matrix"] .tl li { color: var(--dim); border-bottom: 1px solid #062012; }
[data-theme="matrix"] .tl li:nth-child(odd) { background: #030B06; }
[data-theme="matrix"] .tl .when { color: var(--gold); }
[data-theme="matrix"] .tl .what b { color: var(--ink); }
[data-theme="matrix"] .bar { background: var(--track); border: 1px solid #062012; }
[data-theme="matrix"] .axis { color: var(--dim); }

[data-theme="matrix"] details { background: var(--box2); border: 1px solid var(--edge); }
[data-theme="matrix"] details > summary { color: var(--link); font-family: var(--impact); }
[data-theme="matrix"] summary::before { color: var(--hot); }
[data-theme="matrix"] details > .inner { background: var(--box); border-top: 1px solid var(--edge); color: var(--dim); }

[data-theme="matrix"] .press > li { color: var(--dim); border-bottom: 1px solid #062012; }
[data-theme="matrix"] .press > li:nth-child(odd) { background: #030B06; }
[data-theme="matrix"] .press a { font-family: var(--impact); font-weight: bold; font-size: 13px; letter-spacing: .06em; }
[data-theme="matrix"] .press blockquote { background: transparent; border-left: 1px solid var(--gold); color: var(--ink); }

[data-theme="matrix"] .foot { background: var(--box); border: 1px solid var(--edge); color: var(--dim); }

/* restructure: the terminal reads identity first, then the log */
[data-theme="matrix"] #about    { order: 1; }
[data-theme="matrix"] #tracks   { order: 2; }
[data-theme="matrix"] #screen   { order: 3; }
[data-theme="matrix"] #press    { order: 4; }
[data-theme="matrix"] #top8     { order: 5; }
[data-theme="matrix"] #dates    { order: 6; }
[data-theme="matrix"] #bulletin { order: 7; }

/* ---- the sound lane ------------------------------------------------
   It sits under both career lanes because in a timeline the audio
   tracks sit under the video tracks. Sound is not a third career —
   it is the substrate the other two run on top of. */

.lane-title.snd { border-left-color: var(--sound); }
.tl.snd .bar i { background: var(--sound); box-shadow: 0 0 7px rgba(255,176,0,.55); }
[data-theme="bay"] .tl.snd .bar i { box-shadow: none; }
.tl.snd .when { color: var(--sound); }
[data-theme="bay"] .tl.snd .when { color: var(--sound); }
.lane-note { margin: 4px 0 0; font-size: 9px; color: var(--dim); font-style: italic; }
.swatch.snd { background: var(--sound); }
.tl li.noyear .bar { display: none; }

/* ---- screening room ------------------------------------------------
   Six posters, each a plain link to YouTube. The script swaps a poster for
   the player on click; until then nothing is requested from YouTube, and the
   posters are served from here. */
.reel-note { margin:0 0 8px; font-size:10px; color:var(--dim); font-style:italic; }
.reel { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (max-width:520px) { .reel { grid-template-columns:1fr; } }
.vid { min-width:0; }
.poster {
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:#000; border:2px solid #000; box-shadow:0 0 0 1px var(--edge);
}
.poster:hover, .poster:focus-visible { background:#000; }
.poster img { display:block; width:100%; height:100%; object-fit:cover; }
.poster .play {
  position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; background:rgba(0,0,0,.72); border:2px solid var(--gold);
}
.poster .play::before {
  content:""; position:absolute; left:15px; top:12px;
  border-style:solid; border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent var(--gold);
}
.poster:hover .play, .poster:focus-visible .play { background:var(--gold); }
.poster:hover .play::before, .poster:focus-visible .play::before { border-left-color:#000; }
.vid iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }
.cap { margin:5px 0 0; font-size:10px; color:var(--dim); }
.cap b { display:block; color:var(--ink); font-family:var(--impact); font-size:14px; letter-spacing:.03em; font-weight:normal; }

[data-theme="bay"] .poster { border:1px solid var(--edge); box-shadow:none; }
[data-theme="bay"] .poster .play { background:rgba(23,25,27,.7); border-color:#fff; }
[data-theme="bay"] .poster .play::before { border-left-color:#fff; }
[data-theme="bay"] .cap b { font-weight:700; font-size:12px; letter-spacing:0; }
[data-theme="matrix"] .poster { border:1px solid var(--edge); box-shadow:0 0 12px rgba(0,255,65,.15); }
[data-theme="matrix"] .poster img { filter:grayscale(1) contrast(1.2) sepia(1) hue-rotate(65deg) saturate(3.5) brightness(.85); }
[data-theme="matrix"] .poster .play { border-color:var(--ink); background:#000; }
[data-theme="matrix"] .poster .play::before { border-left-color:var(--ink); }
[data-theme="matrix"] .poster:hover .play, [data-theme="matrix"] .poster:focus-visible .play { background:var(--ink); }
[data-theme="matrix"] .cap b { font-weight:bold; font-size:12px; letter-spacing:.06em; }
[data-theme="matrix"] .cap b::before { content:"> "; color:var(--hot); }

/* =====================================================================
   LENSES
   The Lens control picks a skin and, with it, which track leads. Nothing is
   hidden in any lens. An item tagged data-lane="m" or "s" that belongs to
   the other track sinks to the end of its list, drops to --dim a size down,
   and is labelled as the other track's. Untagged items belong to both and
   keep full weight everywhere; sound is never tagged, because it runs under
   both. The lens lives in the URL (?lens=film, ?lens=software) and nowhere
   else. Text is never made translucent -- bay's --dim is 4.7:1 and would
   not survive it -- only bars and posters are.
   ===================================================================== */

[data-theme="bay"]    { --off:"Software track \2014  "; }
[data-theme="matrix"] { --off:"Film track \2014  "; }

/* lists that re-rank. Top 8 and the reel are grids already; order works there too. */
#tracks .body, .dates, .press { display:flex; flex-direction:column; }
#tracks .axis { order:2; }
#tracks details { order:3; }

[data-theme="bay"]    [data-lane="s"],
[data-theme="matrix"] [data-lane="m"] { order:1; }

/* the label, on whatever the item calls its title */
[data-theme="bay"]    .lane[data-lane="s"] .lane-title::before,
[data-theme="matrix"] .lane[data-lane="m"] .lane-title::before,
[data-theme="bay"]    .dates li[data-lane="s"] > span:last-child::before,
[data-theme="matrix"] .dates li[data-lane="m"] > span:last-child::before,
[data-theme="bay"]    .top8 li[data-lane="s"] .t::before,
[data-theme="matrix"] .top8 li[data-lane="m"] .t::before,
[data-theme="bay"]    .press > li[data-lane="s"]::before,
[data-theme="matrix"] .press > li[data-lane="m"]::before,
[data-theme="bay"]    .vid[data-lane="s"] .cap::before,
[data-theme="matrix"] .vid[data-lane="m"] .cap::before {
  content:var(--off); display:block; color:var(--dim);
  font-family:'Courier New',monospace; font-size:9px; font-weight:normal;
  letter-spacing:.08em; text-transform:uppercase; text-shadow:none;
}

/* the demotion: --dim, a size down, nothing highlighted */
[data-theme="bay"]    .lane[data-lane="s"] .lane-title,
[data-theme="matrix"] .lane[data-lane="m"] .lane-title { color:var(--dim); border-left-color:var(--edge); font-size:12px; }
[data-theme="bay"]    .lane[data-lane="s"] .tl li,
[data-theme="matrix"] .lane[data-lane="m"] .tl li,
[data-theme="bay"]    .lane[data-lane="s"] .tl .what b,
[data-theme="matrix"] .lane[data-lane="m"] .tl .what b,
[data-theme="bay"]    .lane[data-lane="s"] .tl .when,
[data-theme="matrix"] .lane[data-lane="m"] .tl .when { color:var(--dim); font-size:9px; }
[data-theme="bay"]    .lane[data-lane="s"] .bar i,
[data-theme="matrix"] .lane[data-lane="m"] .bar i,
[data-theme="bay"]    .vid[data-lane="s"] .poster img,
[data-theme="matrix"] .vid[data-lane="m"] .poster img { filter:grayscale(.7) opacity(.55); box-shadow:none; }

[data-theme="bay"]    .dates li[data-lane="s"] .yr,
[data-theme="matrix"] .dates li[data-lane="m"] .yr,
[data-theme="bay"]    .dates li[data-lane="s"] b,
[data-theme="matrix"] .dates li[data-lane="m"] b,
[data-theme="bay"]    .top8 li[data-lane="s"] .t,
[data-theme="matrix"] .top8 li[data-lane="m"] .t,
[data-theme="bay"]    .top8 li[data-lane="s"] .yr,
[data-theme="matrix"] .top8 li[data-lane="m"] .yr,
[data-theme="bay"]    .press > li[data-lane="s"] blockquote,
[data-theme="matrix"] .press > li[data-lane="m"] blockquote,
[data-theme="bay"]    .vid[data-lane="s"] .cap b,
[data-theme="matrix"] .vid[data-lane="m"] .cap b { color:var(--dim); }
[data-theme="bay"]    .dates li[data-lane="s"],
[data-theme="matrix"] .dates li[data-lane="m"],
[data-theme="bay"]    .press > li[data-lane="s"],
[data-theme="matrix"] .press > li[data-lane="m"] { font-size:9px; }
[data-theme="bay"]    .dates li[data-lane="s"] .yr,
[data-theme="matrix"] .dates li[data-lane="m"] .yr { font-size:12px; }
[data-theme="bay"]    .press > li[data-lane="s"] a,
[data-theme="matrix"] .press > li[data-lane="m"] a { font-size:11px; }
[data-theme="bay"]    .top8 li[data-lane="s"] .tile,
[data-theme="matrix"] .top8 li[data-lane="m"] .tile { color:var(--dim); }
[data-theme="bay"]    .vid[data-lane="s"] .cap b,
[data-theme="matrix"] .vid[data-lane="m"] .cap b { font-size:11px; }


/* =====================================================================
   THE CHAOS LAYER
   ---------------------------------------------------------------------
   What made a 2006 profile feel the way it felt was a dozen unrelated
   animated GIFs looping at durations that never lined up. This is that,
   done in CSS: no images, no requests, ~8KB.

   Everything that moves is gated on [data-motion="chaos"]. The Motion
   select is the WCAG 2.2.2 mechanism; the prefers-reduced-motion block
   further up is the unconditional backstop. Nothing here animates a
   property that affects layout, and nothing alters a text/background
   pair, so contrast and CLS are untouched.
   ===================================================================== */

/* ---- shared keyframes ---------------------------------------------- */

@keyframes sweep    { to { transform: translateX(320%) } }
@keyframes crawl    { to { background-position: 0 0, var(--stripw) 100% } }
@keyframes slide    { to { transform: translateX(-50%) } }
@keyframes hazard   { to { background-position: 33.94px 0 } }
@keyframes eqbar    { from { transform: scaleY(.12) } to { transform: scaleY(1) } }
@keyframes twinkle  { 0%,100% { opacity:.15; transform:scale(.6) rotate(0deg) }
                      50%     { opacity:1;   transform:scale(1.15) rotate(25deg) } }
@keyframes bounce   { 0%,100% { transform: rotate(6deg)  translateY(0) }
                      50%     { transform: rotate(6deg)  translateY(-4px) } }
@keyframes wobble   { 0%,100% { transform: rotate(-11deg) } 50% { transform: rotate(-3deg) } }
@keyframes pulse    { 0%,100% { transform: rotate(-5deg) scale(1) }
                      50%     { transform: rotate(-5deg) scale(1.09) } }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes glitter  {
  0%,100% { text-shadow: 3px 3px 0 var(--hot),  6px 6px 0 #000, 0 0 26px rgba(255,77,158,.6) }
  33%     { text-shadow: 3px 3px 0 var(--b3),   6px 6px 0 #000, 0 0 26px rgba(0,192,192,.6) }
  66%     { text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 #000, 0 0 26px rgba(255,221,85,.6) }
}
@keyframes rainbow-edge {
  0%,100% { border-color: var(--hot) }
  25%     { border-color: var(--gold) }
  50%     { border-color: var(--lime) }
  75%     { border-color: var(--b3) }
}
@keyframes flicker  { 0%,96%,100% { opacity:1 } 97%,99% { opacity:.93 } }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes playhead { from { --p: 0 } to { --p: 1 } }

/* ---- the desync buckets --------------------------------------------
   Randomness is what sells it, and it can be had deterministically.
   Seven mutually-prime-ish durations with negative delays, so no two
   elements ever start together and the set never resyncs. */

.tl li:nth-child(7n+1) .bar i::after, .eq i:nth-child(7n+1) { --d:3.7s; --dl:-0.4s }
.tl li:nth-child(7n+2) .bar i::after, .eq i:nth-child(7n+2) { --d:5.9s; --dl:-2.1s }
.tl li:nth-child(7n+3) .bar i::after, .eq i:nth-child(7n+3) { --d:4.3s; --dl:-3.3s }
.tl li:nth-child(7n+4) .bar i::after, .eq i:nth-child(7n+4) { --d:8.1s; --dl:-1.2s }
.tl li:nth-child(7n+5) .bar i::after, .eq i:nth-child(7n+5) { --d:6.7s; --dl:-4.8s }
.tl li:nth-child(7n+6) .bar i::after, .eq i:nth-child(7n+6) { --d:5.1s; --dl:-0.9s }
.tl li:nth-child(7n+7) .bar i::after, .eq i:nth-child(7n+7) { --d:7.3s; --dl:-2.7s }
.eq i:nth-child(7n+1), .eq i:nth-child(7n+4) { --d:1.1s }
.eq i:nth-child(7n+2), .eq i:nth-child(7n+5) { --d:0.8s }
.eq i:nth-child(7n+3), .eq i:nth-child(7n+6) { --d:1.4s }
.eq i:nth-child(7n+7) { --d:0.6s }

/* ---- furniture (present under calm, it just doesn't move) ----------- */

/* the marquee */
.ticker {
  overflow: hidden;
  background: #000;
  border: 2px solid var(--edge); border-top: 0;
  padding: 4px 0;
}
.ticker-t { display: flex; width: max-content; }
.ticker-t span {
  font-family: 'Courier New', monospace; font-size: 10px;
  letter-spacing: .04em; color: var(--b2); white-space: nowrap;
}

/* UNDER CONSTRUCTION, which is at this moment literally true */
.tape {
  margin: 0 0 9px; border: 2px solid #000;
  background-image: repeating-linear-gradient(45deg, var(--gold) 0 12px, #000 12px 24px);
}
.tape span {
  display: block; margin: 3px; padding: 3px 0;
  background: rgba(0,0,0,.8); color: var(--gold);
  font-family: var(--impact); font-size: 11px; letter-spacing: .14em;
  text-align: center;
}

/* the music player: the one piece of period furniture still missing,
   and the only place the sound through-line reaches the left column */
.nowplaying { padding: 8px; }
.np-label { margin: 0; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.np-title { margin: 2px 0 0; font-family: var(--impact); font-size: 15px; letter-spacing: .02em; color: var(--sound); }
.np-sub   { margin: 2px 0 0; font-size: 9px; color: var(--dim); }
.np-note  { margin: 5px 0 0; font-size: 9px; font-style: italic; color: var(--dim); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 32px; margin: 8px 0 0; }
.eq i { flex: 1; background: var(--sound); transform-origin: bottom; transform: scaleY(.4); }

/* the photo, with something stuck to it */
.framed { position: relative; display: block; width: 92%; margin: 0 auto; }
.shot { width: 100%; }
.tw { position: absolute; color: #fff; font-size: 15px; text-shadow: 0 0 9px var(--gold); opacity: .8; }
.tw1 { top: -7px; left: 4%;  --d: 2.3s; --dl: -0.3s }
.tw2 { top: 34%;  right: -7px; --d: 3.1s; --dl: -1.7s }
.tw3 { bottom: 6%; left: -7px; --d: 2.7s; --dl: -2.2s }

/* stickers. Two AA-cleared colourways per skin, alternated, so the set
   reads as scavenged from four different sites. Every one is
   aria-hidden and every one repeats a fact stated in real copy. */
:root         { --stk-a-bg: var(--hot);  --stk-a-ink: #000;
                --stk-b-bg: var(--gold); --stk-b-ink: #000; }
[data-theme="bay"]    { --stk-a-bg: #7E2A4C; --stk-a-ink: #fff;   /* 9.0:1 */
                        --stk-b-bg: #14515B; --stk-b-ink: #fff; } /* 8.9:1 */
[data-theme="matrix"] { --stk-a-bg: #FFB000; --stk-a-ink: #000;   /* 11.5:1 */
                        --stk-b-bg: #FF00A0; --stk-b-ink: #000; } /*  5.8:1 */

.stk {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--impact); font-weight: normal;
  line-height: 1.05; text-align: center;
  text-shadow: none;
}
.stk-new {
  top: 3px; right: 7px; padding: 3px 7px 4px;
  background: var(--stk-a-bg); color: var(--stk-a-ink);
  border: 2px solid #000; font-size: 15px; letter-spacing: .06em;
  transform: rotate(6deg);
}
.stk-badge {
  top: 5px; right: 8px; width: 74px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stk-b-bg); color: var(--stk-b-ink);
  border: 2px solid #000; border-radius: 50%;
  font-size: 9px; letter-spacing: .04em;
  transform: rotate(-11deg);
}
.stk-pin {
  top: 4px; right: 9px; padding: 4px 8px;
  background: var(--stk-a-bg); color: var(--stk-a-ink);
  border: 2px solid #000;
  font-size: 11px; letter-spacing: .08em;
  transform: rotate(-5deg);
}
/* sized to clear the first row of Top 8 tiles, which starts ~63px down */
.stk-burst { top: 2px; right: 4px; width: 62px; height: 62px; }
.stk-burst i {
  position: absolute; inset: 0; background: var(--stk-b-bg);
  clip-path: polygon(50% 0%,55.3% 23.5%,69.1% 3.8%,65% 27.5%,85.4% 14.6%,72.4% 35%,
    96.2% 30.9%,76.5% 44.7%,100% 50%,76.5% 55.3%,96.2% 69.1%,72.4% 65%,85.4% 85.4%,
    65% 72.5%,69.1% 96.2%,55.3% 76.5%,50% 100%,44.7% 76.5%,30.9% 96.2%,35% 72.4%,
    14.6% 85.4%,27.5% 65%,3.8% 69.1%,23.5% 55.3%,0% 50%,23.5% 44.7%,3.8% 30.9%,
    27.5% 35%,14.6% 14.6%,35% 27.6%,30.9% 3.8%,44.7% 23.5%);
}
.stk-burst b {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: var(--stk-b-ink); font-weight: normal; font-size: 8px; letter-spacing: .02em;
}

@media (max-width: 480px) {
  .stk-badge, .stk-pin, .stk-burst { display: none; }
}

/* ---- and now, the motion -------------------------------------------- */

[data-motion="chaos"] .online              { animation: blink 1.3s steps(1,end) infinite; }
[data-motion="chaos"] h1                   { animation: glitter 11s linear infinite; }
[data-motion="chaos"] .shout               { animation: rainbow-edge 9s linear infinite; }
[data-motion="chaos"] .mod > h2            { animation: crawl 6s linear infinite; }
[data-motion="chaos"] .tape                { animation: hazard 3s linear infinite; }
[data-motion="chaos"] .ticker-t            { animation: slide 46s linear infinite; }
[data-motion="chaos"] .ticker:hover .ticker-t,
[data-motion="chaos"] .ticker:focus-within .ticker-t { animation-play-state: paused; }
[data-motion="chaos"] .eq i                { animation: eqbar var(--d,1s) ease-in-out var(--dl,0s) infinite alternate; }
[data-motion="chaos"] .tw                  { animation: twinkle var(--d,2.5s) ease-in-out var(--dl,0s) infinite; }
[data-motion="chaos"] .stk-new             { animation: bounce .8s steps(2,end) infinite; }
[data-motion="chaos"] .stk-badge           { animation: wobble 5.5s ease-in-out infinite; }
[data-motion="chaos"] .stk-pin             { animation: pulse 7s ease-in-out infinite; }
[data-motion="chaos"] .stk-burst i         { animation: spin 14s linear infinite; }
[data-motion="chaos"] .counter .rec        { animation: blink 1.1s steps(1,end) infinite; }

/* the specular band on every duration bar — the stretched-GIF loading
   bar, which is what these were in 2006 anyway. transform only. */
[data-motion="chaos"] .bar i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translateX(-120%);
  animation: sweep var(--d,5s) linear var(--dl,0s) infinite;
}

.counter .rec { color: var(--b6); font-weight: bold; }
[data-theme="matrix"] .counter .rec { color: var(--hot); }
[data-theme="bay"] .counter .rec { color: var(--gold); }

/* ---- per-skin adjustments ------------------------------------------- */

/* BAY. Full chaos here is the owner's call (2026-08-04); it was the sober
   skin. Everything above applies in bay tokens, plus one thing only bay
   gets: a playhead, because in the edit suite that reads as a scrub head
   rather than as ornament. Deleting this block reverts bay alone. */
[data-theme="bay"] .framed { width: 100%; }
[data-theme="bay"] .tw { color: var(--gold); text-shadow: none; opacity: .55; }
[data-theme="bay"] .ticker { background: var(--box); border: 1px solid var(--edge); border-top: 0; }
[data-theme="bay"] .ticker-t span { font-family: var(--impact); color: var(--dim); }
[data-theme="bay"] .tape { border: 1px solid var(--edge); }
[data-theme="bay"] .tape span { background: rgba(195,193,187,.86); color: var(--ink); }
[data-theme="bay"] .stk { border-radius: 0; }
[data-theme="bay"] .bar i::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }

[data-theme="bay"] #tracks .body { position: relative; overflow: hidden; }
[data-motion="chaos"][data-theme="bay"] #tracks .body::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  /* Pinned to the bar column, which starts one 5.6em label plus the 7px gap
     in. The em must resolve against .tl li's 10px, not .body's, or the head
     lands 11px off the axis. */
  font-size: 10px;
  /* 10px is bay's .body padding; absolute offsets resolve against the
     padding box, the grid against the content box. */
  left: calc(10px + 5.6em + 7px + (100% - 20px - 5.6em - 7px) * var(--p));
  background: var(--ink); opacity: .45;
  animation: playhead 20s linear infinite;
}

/* MATRIX. Same layer, terminal idiom: the specular band becomes a scan
   line, the stickers become bracket tags, the tube flickers. */
[data-theme="matrix"] .framed { width: 100%; }
[data-theme="matrix"] .tw { color: var(--ink); text-shadow: 0 0 9px var(--ink); }
[data-theme="matrix"] .ticker { background: var(--box2); border: 1px solid var(--edge); border-top: 0; }
[data-theme="matrix"] .ticker-t span { color: var(--dim); }
[data-theme="matrix"] .ticker-t span::before { content: "> "; color: var(--hot); }
[data-theme="matrix"] .tape { border: 1px solid var(--edge); background-image: repeating-linear-gradient(45deg, var(--gold) 0 12px, #000 12px 24px); }
[data-theme="matrix"] .tape span { background: #000; color: var(--gold); }
[data-theme="matrix"] .bar i::after { width: 2px; background: var(--ink); box-shadow: 0 0 6px var(--ink); }
[data-theme="matrix"] .np-title { color: var(--gold); }

[data-theme="matrix"] .stk {
  background: #000 !important; border: 1px solid var(--edge);
  color: var(--gold); transform: none !important;
}
[data-theme="matrix"] .stk-burst { width: auto; height: auto; padding: 4px 7px; font-size: 10px; }
[data-theme="matrix"] .stk-burst i { display: none; }
[data-theme="matrix"] .stk-burst b { position: static; display: inline; color: var(--gold); }
[data-theme="matrix"] .stk br { display: none; }
[data-theme="matrix"] .stk::before { content: "[ "; }
[data-theme="matrix"] .stk::after  { content: " ]"; }

[data-motion="chaos"][data-theme="matrix"] body { animation: rain 7s linear infinite; }
[data-motion="chaos"][data-theme="matrix"] .mod > h2::after { animation: caret 1.1s steps(1,end) infinite; }
[data-motion="chaos"][data-theme="matrix"] .wrap { animation: flicker 11s steps(1,end) infinite; }
/* No !important: this selector already outranks [data-motion="chaos"] .stk-new,
   the only rule it needs to beat. With it, the rule also outranked the
   prefers-reduced-motion backstop at the top of the file, which is a guarantee
   the spec makes and so has to hold. */
[data-motion="chaos"][data-theme="matrix"] .stk {
  animation: blink 1.7s steps(1,end) infinite;
}