/* ANTI-AESTHETIC MODE — Y2K *style*, not literal Y2K artifacts.
   Style cues from late-1990s / early-2000s personal homepages: tiled
   starfield background, neon-on-black, Comic Sans for body, WordArt-style
   titles, ridge bevels, playful chaotic headings, clashing colors. No
   marquees, no MIDI, no hit counters, no guestbook, no "best viewed in
   IE5.5" — just the aesthetic. Same content as the polished page.
*/

@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Press+Start+2P&family=VT323&display=swap");

:root {
  --hot-pink:   #ff00aa;
  --acid-green: #00ff41;
  --cyber-cyan: #00ffff;
  --laser-blue: #1e90ff;
  --neon-yellow:#ffea00;
  --warning:    #ff4d00;
  --magenta:    #ff00ff;
  --bg-deep:    #000022;
  --bg-mid:     #001f3f;
  --hyperlink:  #0000ee;
  --visited:    #800080;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background-color: #000033;
  /* tiled starfield + neon grid */
  background-image:
    radial-gradient(white 1px, transparent 1.4px),
    radial-gradient(#ff00ff 0.5px, transparent 1px),
    linear-gradient(135deg, #220033 0%, #002244 50%, #003322 100%);
  background-size: 24px 24px, 48px 48px, auto;
  background-attachment: fixed;
  color: #ffff99;
  font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

a {
  color: var(--cyber-cyan);
  text-decoration: underline;
  font-weight: 700;
}
a:visited { color: var(--magenta); }
a:hover {
  background: var(--neon-yellow);
  color: #000;
  text-decoration: none;
}
a:active { color: red; }

img { max-width: 100%; display: block; image-rendering: pixelated; }

/* ====================================================================== */
/* TOP NOTICE BAR */
.notice {
  background: black;
  border-bottom: 4px ridge var(--hot-pink);
  padding: 6px 0;
  position: relative;
}
.notice .notice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 0 14px;
  font-family: "VT323", "Courier New", monospace;
  font-size: 18px;
  color: var(--neon-yellow);
}
.notice .notice-pill {
  background: var(--hot-pink);
  color: #000;
  padding: 2px 10px;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #fff;
  letter-spacing: 0.03em;
}
.notice .notice-tag {
  color: var(--neon-yellow);
  letter-spacing: 0.02em;
}
.notice .notice-tag b { color: #fff; }
.notice .blink {
  color: #000;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .notice .blink { animation: none; }
}

/* ====================================================================== */
/* NAV — "buttons" with bevel, classic Win98 feel */
.tabs {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-bottom: 4px solid #404040;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-family: "VT323", monospace;
  font-size: 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.tabs-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tabs-left::before {
  content: "› NAVIGATION:";
  color: #000;
  font-weight: 700;
  margin-right: 4px;
}
.tabs a {
  background: linear-gradient(180deg, #ffffaa 0%, #ffcc00 100%);
  color: #000080;
  padding: 5px 12px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #404040;
  text-decoration: none;
  font-weight: 700;
}
.tabs a:hover {
  background: linear-gradient(180deg, #ff66cc 0%, #cc0066 100%);
  color: #fff;
}
.tabs a:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}
.tabs-toggle {
  background: linear-gradient(180deg, var(--acid-green) 0%, #008822 100%) !important;
  color: #000 !important;
  font-family: "Impact", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.06em;
  padding: 6px 14px !important;
  border-top: 3px solid #ccffcc !important;
  border-left: 3px solid #ccffcc !important;
  border-right: 3px solid #003300 !important;
  border-bottom: 3px solid #003300 !important;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(-0.5deg);
}
.tabs-toggle:hover {
  background: linear-gradient(180deg, var(--neon-yellow) 0%, var(--warning) 100%) !important;
  color: #000 !important;
  text-shadow: 1px 1px 0 #fff;
}

/* ====================================================================== */
.container {
  max-width: 1100px;
  margin: 16px auto;
  padding: 0 24px;
  background: rgba(0, 0, 64, 0.35);
  border: 6px ridge var(--magenta);
}

/* ====================================================================== */
/* HERO — WordArt title */
header.head {
  padding: 36px 0 28px;
  border-bottom: 4px double var(--acid-green);
  text-align: center;
  position: relative;
}

.file-label {
  display: inline-block;
  background: linear-gradient(90deg, var(--hot-pink), var(--neon-yellow), var(--acid-green));
  color: black;
  font-family: "VT323", monospace;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 14px;
  border: 3px outset var(--magenta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.file-label .spot {
  background: #000;
  color: var(--neon-yellow);
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 700;
  border: 1px solid var(--neon-yellow);
}

/* WordArt: outline + shadow + gradient + skew. Tasteless on purpose. */
h1.massive {
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}
h1.massive .small {
  display: block;
  font-family: "VT323", monospace;
  font-size: 22px;
  color: var(--neon-yellow);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
h1.massive .big {
  display: inline-block;
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--neon-yellow) 0%, var(--warning) 45%, var(--hot-pink) 75%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* WordArt outline + shadow */
  -webkit-text-stroke: 2px black;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 var(--cyber-cyan),
    9px 9px 0 var(--magenta);
  transform: skewY(-2deg) rotate(-2deg);
  padding: 6px 14px;
  filter: drop-shadow(0 0 6px var(--magenta));
}
h1.massive .medium {
  display: block;
  margin-top: 22px;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 44px);
  color: var(--cyber-cyan);
  text-shadow: 2px 2px 0 #000, -1px -1px 0 var(--hot-pink);
}
h1.massive .strike {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 4px;
  opacity: 0.7;
  color: #888;
  -webkit-text-fill-color: #888;
}
h1.massive .red {
  display: inline-block;
  background: red;
  color: #ffff00;
  padding: 2px 12px;
  border: 4px dashed var(--neon-yellow);
  transform: rotate(-3deg);
  -webkit-text-fill-color: #ffff00;
  text-shadow: 2px 2px 0 #000;
  font-family: "Impact", sans-serif;
  margin-left: 6px;
}

.subhead {
  font-family: "Comic Neue", cursive;
  font-size: 17px;
  color: var(--neon-yellow);
  max-width: 800px;
  margin: 22px auto 8px;
  line-height: 1.45;
  text-align: left;
  background: rgba(0, 0, 0, 0.55);
  padding: 12px 16px;
  border: 2px dashed var(--acid-green);
}
.subhead .cat-badge {
  background: var(--hot-pink);
  color: #000;
  padding: 1px 6px;
  font-family: "VT323", monospace;
  font-size: 14px;
  margin: 0 2px;
  display: inline-block;
  border: 1px solid #000;
  font-weight: 700;
  text-transform: uppercase;
}
.subhead .cat-badge.blur     { background: var(--cyber-cyan); }
.subhead .cat-badge.decay    { background: #8b4513; color: #ffff99; }
.subhead .cat-badge.muted    { background: #888; color: #fff; }
.subhead .cat-badge.exposure { background: #fff; color: #000; }
.subhead .cat-badge.surreal  { background: var(--acid-green); }
.subhead .cat-badge.stamp    { background: red; color: #ffff99; }

.fineprint {
  font-family: "VT323", monospace;
  font-size: 17px;
  color: var(--cyber-cyan);
  max-width: 720px;
  margin: 18px auto 0;
  text-align: center;
}

.byline {
  margin: 22px auto 0;
  font-family: "Comic Neue", cursive;
  font-size: 15px;
  border: 3px double var(--neon-yellow);
  background: #000;
  padding: 10px;
  display: flex; gap: 18px;
  flex-wrap: wrap; justify-content: center;
  text-align: center;
  color: #fff;
}
.byline b { color: var(--cyber-cyan); }
.byline .role { color: var(--hot-pink); font-size: 12px; font-family: "VT323", monospace; }

.toolbar {
  margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(180deg, #ff66cc 0%, #cc0099 100%);
  color: #fff;
  padding: 7px 14px;
  border-top: 3px solid #ffaaff;
  border-left: 3px solid #ffaaff;
  border-right: 3px solid #660066;
  border-bottom: 3px solid #660066;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
}
.button:nth-child(even) {
  background: linear-gradient(180deg, var(--acid-green) 0%, #008822 100%);
  border-top-color: #aaff99;
  border-left-color: #aaff99;
  border-right-color: #003300;
  border-bottom-color: #003300;
}
.button:nth-child(3n) {
  background: linear-gradient(180deg, var(--cyber-cyan) 0%, #0066aa 100%);
  color: #000;
  border-top-color: #ccffff;
  border-left-color: #ccffff;
  border-right-color: #003366;
  border-bottom-color: #003366;
  text-shadow: 1px 1px 0 #fff;
}
.button:hover {
  background: var(--neon-yellow) !important;
  color: #000 !important;
  text-shadow: none !important;
}
.button:active {
  border-top: 3px solid #660066;
  border-left: 3px solid #660066;
  border-right: 3px solid #ffaaff;
  border-bottom: 3px solid #ffaaff;
}

/* ====================================================================== */
/* Status chips — replaces the old construction/MIDI rail */
.status-rail {
  text-align: center;
  margin: 22px 0 0;
  padding: 14px 8px;
  background: black;
  border: 3px dashed var(--neon-yellow);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.status-chip {
  display: inline-block;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: 3px solid #000;
  color: #000;
  text-shadow: 1px 1px 0 #fff;
  transform: rotate(-1.5deg);
}
.status-chip.pink  { background: var(--hot-pink);   }
.status-chip.cyan  { background: var(--cyber-cyan); }
.status-chip.green { background: var(--acid-green); transform: rotate(2deg); }
.status-chip:nth-child(even) { transform: rotate(1.5deg); }

/* ====================================================================== */
/* SECTIONS */
section {
  padding: 28px 0;
  position: relative;
}
section + section { border-top: 0; }

/* Bad PowerPoint slide counter */
.slide-counter {
  position: absolute;
  top: 6px; right: 16px;
  background: black;
  color: var(--neon-yellow);
  font-family: "VT323", monospace;
  font-size: 16px;
  padding: 3px 9px;
  border: 1px solid var(--neon-yellow);
  z-index: 5;
}

section h2.h {
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--neon-yellow);
  text-shadow:
    2px 2px 0 #000,
    4px 4px 0 var(--hot-pink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}
section h2.h .num {
  display: inline-block;
  background: var(--acid-green);
  color: #000;
  padding: 0 12px;
  margin-right: 8px;
  border: 3px outset var(--acid-green);
  transform: rotate(-3deg);
  text-shadow: none;
}

.cat-badge {
  display: inline-block;
  background: var(--hot-pink);
  color: #fff;
  font-family: "Comic Neue", cursive;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  margin: 0 auto 10px;
  border: 2px solid #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #000;
}
.cat-badge.decay    { background: #8b4513; }
.cat-badge.blur     { background: var(--cyber-cyan); color: #000; text-shadow: none; }
.cat-badge.stamp    { background: red; }
.cat-badge.surreal  { background: var(--acid-green); color: #000; text-shadow: none; }
.cat-badge.muted    { background: #777; color: #fff; }
.cat-badge.exposure { background: var(--neon-yellow); color: #000; text-shadow: none; }

section .lead {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 17px;
  line-height: 1.55;
  max-width: 820px;
  margin: 0 0 22px;
  color: #ffff99;
  background: rgba(0,0,0,0.45);
  padding: 12px 16px;
  border-left: 6px solid var(--hot-pink);
  border-right: 6px solid var(--cyber-cyan);
}
section p {
  font-size: 15.5px;
  color: #ffffcc;
  font-family: "Comic Neue", cursive;
}

/* ====================================================================== */
/* MEMO — looks like a bad email forward from 2001 */
.memo {
  background: #ffff99;
  color: #000;
  border: 4px ridge red;
  padding: 22px 26px;
  font-family: "Courier New", monospace;
  font-size: 14.5px;
  line-height: 1.65;
  position: relative;
  box-shadow: 8px 8px 0 #000;
}
.memo::before {
  content: "Fwd: Fwd: Fwd: RE: REVERSED ALIGNMENT (READ!!! IMPORTANT)";
  position: absolute;
  top: -14px; left: 14px;
  background: red;
  color: #ffff00;
  padding: 3px 10px;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
  border: 2px solid #ffff00;
}
.memo b {
  background: yellow;
  color: red;
  padding: 0 3px;
  font-weight: 700;
}

/* Pull-quote scrawl: looks like a "share this with all your friends" forward */
blockquote.scrawl {
  margin: 26px 0;
  padding: 18px 22px;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.3;
  border: 5px ridge var(--magenta);
  background: linear-gradient(135deg, #000044 0%, #440044 100%);
  color: var(--neon-yellow);
  text-shadow: 2px 2px 0 #000;
}
blockquote.scrawl cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: "VT323", monospace;
  font-size: 14px;
  color: var(--cyber-cyan);
}

/* Receipt → looks like an Outlook signature */
.receipt {
  background: #fff;
  color: #000;
  border: 3px solid #000;
  padding: 18px 22px;
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: 14.5px;
  margin: 24px auto;
  max-width: 640px;
  box-shadow: 6px 6px 0 var(--hot-pink);
  position: relative;
}
.receipt::before {
  content: "★ ★ ★  WHAT'S IN THE BOX!!  ★ ★ ★";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--neon-yellow);
  color: red;
  padding: 3px 12px;
  font-family: "Impact", sans-serif;
  border: 2px solid red;
  white-space: nowrap;
}
.receipt h4 {
  margin: 4px 0 8px;
  color: red;
  text-transform: uppercase;
  text-align: center;
}
.receipt ul { margin: 6px 0 0; padding-left: 22px; }
.receipt li { margin-bottom: 6px; }
.receipt b {
  background: var(--neon-yellow);
  padding: 0 3px;
  color: red;
}

/* ====================================================================== */
/* SIX RISKS — each is a "slide" in a bad PowerPoint deck */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 760px) { .evidence-grid { grid-template-columns: 1fr; } }
.evidence {
  background: #fff;
  color: #000;
  padding: 18px 20px 22px;
  font-family: "Comic Neue", cursive;
  font-size: 14.5px;
  line-height: 1.55;
  position: relative;
  border: 4px ridge;
}
.evidence p,
.evidence .demo-note { color: #000; }
/* Each slide has a different garish "template" */
.evidence:nth-child(1) {
  background:
    radial-gradient(circle at 90% 10%, #ffff66 0 60px, transparent 61px),
    linear-gradient(180deg, #fff 0%, #fff4cc 100%);
  border-color: var(--hot-pink);
}
.evidence:nth-child(2) {
  background:
    linear-gradient(135deg, #00ff00 0%, #ffff00 50%, #ff00ff 100%);
  border-color: red;
  color: #000;
}
.evidence:nth-child(3) {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffcccc 100%);
  border-color: var(--cyber-cyan);
}
.evidence:nth-child(4) {
  background:
    repeating-linear-gradient(45deg, #fff 0 16px, #ffcc99 16px 32px);
  border-color: #8b4513;
}
.evidence:nth-child(5) {
  background: #c0c0c0;
  color: #000;
  border-color: var(--warning);
}
.evidence:nth-child(6) {
  background: #000;
  color: var(--acid-green);
  border-color: var(--neon-yellow);
}
.evidence:nth-child(6) p,
.evidence:nth-child(6) .demo-note { color: var(--acid-green); }
.evidence h4 {
  margin: 4px 0 8px;
  font-family: "Impact", sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  color: red;
  text-shadow: 2px 2px 0 #ffff00;
}
.evidence:nth-child(6) h4 { color: var(--neon-yellow); text-shadow: 2px 2px 0 #000; }
.evidence .tag {
  display: inline-block;
  background: red;
  color: #ffff00;
  padding: 2px 8px;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  border: 1px solid #000;
  text-shadow: 1px 1px 0 #000;
}
.evidence .demo-note {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px dotted currentColor;
  font-size: 12px;
  font-family: "VT323", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ====================================================================== */
/* TABLES — like a 90s sortable HTML table from an Excel export */
.table-shell {
  background: #c0c0c0;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #404040;
  border-bottom: 3px solid #404040;
  overflow: hidden;
  margin: 16px 0;
}
.table-shell .heading {
  background: linear-gradient(180deg, #000080 0%, #0000ff 100%);
  color: #fff;
  padding: 6px 12px;
  font-family: "VT323", monospace;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.table-wrap { overflow-x: auto; background: #fff; }
table.report {
  border-collapse: collapse;
  width: 100%;
  font-family: "Verdana", "Geneva", sans-serif;
  font-size: 13px;
  color: #000;
}
table.report th, table.report td {
  padding: 7px 11px;
  text-align: right;
  border: 1px solid #000;
}
table.report th {
  background: #ffff99;
  font-weight: 700;
  letter-spacing: 0.02em;
}
table.report tr:nth-child(2n) td { background: #eef; }
table.report tr:hover td { background: var(--neon-yellow); }
table.report td:first-child,
table.report th:first-child { text-align: left; }
table.report .bad  { background: #ffcccc !important; font-weight: 700; color: red; }
table.report .good { background: #ccffcc !important; font-weight: 700; color: #008000; }
table.report tr.pending td {
  background: #f0f0f0 !important;
  color: #888 !important;
  font-style: italic;
}
table.report tr.pending:hover td { background: var(--neon-yellow) !important; color: #000 !important; font-style: normal; }
.captionish {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 13px;
  color: var(--neon-yellow);
  padding: 6px 4px;
  background: rgba(0,0,0,0.4);
  margin-top: 4px;
}

/* ====================================================================== */
/* EXHIBITS / paper figures */
.fragments {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  background: rgba(0,0,0,0.4);
  padding: 12px;
  border: 3px ridge var(--cyber-cyan);
}
.fragment {
  background: #fff;
  border: 4px ridge var(--neon-yellow);
  position: relative;
  display: flex;
  flex-direction: column;
}
.fragment img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.fragment.col-12 img { aspect-ratio: auto; }
.fragment .stamp-mini {
  position: absolute; top: 8px; left: 8px;
  background: red;
  color: #ffff00;
  padding: 2px 9px;
  font-family: "Impact", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  transform: rotate(-3deg);
  z-index: 2;
  border: 2px solid #ffff00;
  text-shadow: 1px 1px 0 #000;
}
.fragment .stamp-mini.good { background: var(--acid-green); color: #000; text-shadow: none; }
.fragment .stamp-mini.warn { background: var(--neon-yellow); color: #000; text-shadow: none; }
.fragment.col-5  { grid-column: span 5; }
.fragment.col-6  { grid-column: span 6; }
.fragment.col-7  { grid-column: span 7; }
.fragment.col-12 { grid-column: span 12; }
@media (max-width: 760px) { .fragments > * { grid-column: span 12 !important; } }
.frag-meta {
  font-family: "Comic Neue", cursive;
  font-size: 13px;
  border-top: 3px solid #000;
  padding: 9px 11px;
  background: #ffffaa;
  color: #000;
}
.frag-meta b { color: red; }
.frag-meta .dim {
  display: inline-block;
  background: red; color: #ffff00;
  padding: 1px 6px;
  margin-right: 3px;
  font-size: 11px;
  font-family: "Impact", sans-serif;
  letter-spacing: 0.06em;
  border: 1px solid #000;
}

/* ====================================================================== */
/* GALLERY — pair-as-unit, but with bad-PowerPoint slide framing */
.dossier {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
  margin-top: 12px;
}
@media (max-width: 760px) { .dossier { grid-template-columns: 1fr; } }
.dossier-file {
  background: #fff;
  border: 5px ridge;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 6px 0 #000;
}
/* Each card uses a different garish slide template */
.dossier-file:nth-child(7n+1) { border-color: var(--hot-pink);   background: linear-gradient(135deg, #fff, #ffe0f0); }
.dossier-file:nth-child(7n+2) { border-color: var(--cyber-cyan); background: linear-gradient(135deg, #e0ffff, #fff); }
.dossier-file:nth-child(7n+3) { border-color: var(--acid-green); background: linear-gradient(135deg, #fff, #e0ffe0); }
.dossier-file:nth-child(7n+4) { border-color: var(--neon-yellow);background: linear-gradient(135deg, #fffce0, #fff); }
.dossier-file:nth-child(7n+5) { border-color: var(--magenta);    background: linear-gradient(135deg, #ffe0ff, #fff); }
.dossier-file:nth-child(7n+6) { border-color: var(--warning);    background: linear-gradient(135deg, #ffe5cc, #fff); }
.dossier-file:nth-child(7n+7) { border-color: var(--laser-blue); background: linear-gradient(135deg, #e0eaff, #fff); }
.dossier-file::before {
  content: attr(data-tag);
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: black;
  color: var(--neon-yellow);
  padding: 3px 14px;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  border: 2px solid var(--neon-yellow);
  z-index: 3;
  text-shadow: 1px 1px 0 red;
}
.dossier-file .pair-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: #000;
}
.dossier.real.solo .pair-imgs {
  grid-template-columns: 1fr;
}
.dossier-file .cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.dossier-file .cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.dossier-file .stamp-mini {
  position: absolute; top: 8px; left: 8px;
  background: red; color: #ffff00;
  padding: 2px 8px;
  font-family: "Impact", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
  z-index: 2;
  border: 2px solid #ffff00;
  text-shadow: 1px 1px 0 #000;
}
.dossier-file .stamp-mini.bad   { background: red; }
.dossier-file .stamp-mini.clean { background: var(--cyber-cyan); color: #000; text-shadow: none; border-color: #000; }
.dossier-file .score {
  position: absolute; bottom: 8px; right: 8px;
  padding: 3px 10px;
  font-family: "Impact", sans-serif;
  font-size: 14px;
  z-index: 2;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #000;
}
.dossier-file .score.win  { background: var(--acid-green); color: #000; text-shadow: none; }
.dossier-file .score.lose { background: red; color: #ffff00; }
.dossier-file .frag-meta {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 14px;
  background: #ffffaa;
  flex: 1;
  border-top: 3px solid #000;
  color: #000;
}
.dossier-file .frag-meta .dim {
  display: inline-block;
  background: red; color: #ffff00;
  padding: 1px 6px;
  margin: 0 3px 3px 0;
  font-size: 11px;
  font-family: "Impact", sans-serif;
  letter-spacing: 0.05em;
  border: 1px solid #000;
}
.dossier-file .frag-meta .dim.primary {
  background: var(--magenta);
}
.dossier-file .frag-meta .verdict {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px dotted #000;
  font-weight: 700;
  font-family: "Impact", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dossier-file .frag-meta .verdict.bias  { color: red; }
.dossier-file .frag-meta .verdict.right { color: #008000; }

/* ====================================================================== */
/* REAL ART GALLERY — LAPIS dataset, low-score real paintings */
.art-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 14px;
}
@media (max-width: 900px) { .art-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .art-gallery { grid-template-columns: 1fr; } }
.art-card {
  background: #fff;
  border: 5px ridge;
  box-shadow: 6px 6px 0 #000;
  display: flex;
  flex-direction: column;
  position: relative;
}
.art-card:nth-child(7n+1) { border-color: var(--hot-pink); }
.art-card:nth-child(7n+2) { border-color: var(--cyber-cyan); }
.art-card:nth-child(7n+3) { border-color: var(--acid-green); }
.art-card:nth-child(7n+4) { border-color: var(--neon-yellow); }
.art-card:nth-child(7n+5) { border-color: var(--magenta); }
.art-card:nth-child(7n+6) { border-color: var(--warning); }
.art-card:nth-child(7n+7) { border-color: var(--laser-blue); }
.art-card::before {
  content: "★ REAL ART ★";
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: black;
  color: var(--neon-yellow);
  padding: 3px 14px;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  border: 2px solid var(--neon-yellow);
  z-index: 3;
  text-shadow: 1px 1px 0 red;
}
.art-card .art-frame {
  background: #000;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border-bottom: 3px solid #000;
}
.art-card .art-frame img {
  max-width: 100%;
  max-height: 360px;
  height: auto;
  width: auto;
  display: block;
  box-shadow: 0 0 12px rgba(255, 234, 0, 0.35);
}
.art-card .meta {
  padding: 14px 14px 16px;
  background: #ffff99;
  color: #000;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 13px;
  line-height: 1.5;
  flex: 1;
}
.art-card .score-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.art-card .score-badge {
  background: red;
  color: #ffff00;
  font-family: "Impact", sans-serif;
  font-size: 14px;
  padding: 3px 9px;
  letter-spacing: 0.05em;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #000;
}
.art-card .score-badge.aux {
  background: var(--cyber-cyan);
  color: #000;
  text-shadow: none;
}

/* ====================================================================== */
/* STRIP — paper figures stacked */
.strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}
.strip figure {
  margin: 0;
  border: 4px ridge var(--cyber-cyan);
  background: #fff;
  box-shadow: 6px 6px 0 #000;
}
.strip figure img {
  width: 100%; height: auto; display: block;
}
.strip figure figcaption {
  font-family: "Comic Neue", cursive;
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 14px;
  background: #ffff99;
  border-top: 3px solid #000;
  color: #000;
}
.strip figure figcaption b { color: red; }

/* ====================================================================== */
/* Marginalia: "personal note from the webmaster" */
.marginalia {
  position: relative;
  padding: 10px 14px;
  background: #ffffcc;
  border: 3px dashed red;
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: 14px;
  margin: 14px 0;
  color: #000;
}
.marginalia::before {
  content: "✿ WEBMASTER'S NOTE ✿";
  display: block;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: red;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Readable callout: still highly legible despite the chaos */
.readable {
  background: #000;
  color: #ffff99;
  border-left: 8px solid var(--neon-yellow);
  border-right: 8px solid var(--hot-pink);
  padding: 14px 18px;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 15.5px;
  line-height: 1.7;
}
.readable b {
  background: var(--neon-yellow);
  color: red;
  padding: 0 4px;
}

hr.fold {
  border: 0;
  height: 30px;
  background:
    linear-gradient(90deg, transparent 0%, var(--cyber-cyan) 30%, var(--hot-pink) 50%, var(--cyber-cyan) 70%, transparent 100%) center/100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 18px, var(--neon-yellow) 18px 22px);
  margin: 24px 0;
}

pre.bibtex {
  background: #000;
  color: var(--acid-green);
  border: 4px ridge var(--cyber-cyan);
  padding: 36px 18px 20px;
  margin-top: 26px;
  font-family: "VT323", "Courier New", monospace;
  font-size: 16px;
  overflow-x: auto;
  position: relative;
}
pre.bibtex::before {
  content: "★ ★ ★  COPY/PASTE TO CITE!  ★ ★ ★";
  position: absolute;
  top: -16px;
  left: 18px;
  background: var(--neon-yellow);
  color: red;
  padding: 3px 12px;
  font-family: "Impact", sans-serif;
  border: 2px solid red;
}

.section-anchor { display: block; height: 0; padding-top: 80px; margin-top: -80px; }

/* Footer — keeps Y2K styling without the Y2K artifacts */
.footplate {
  background: #000;
  color: #ffff99;
  padding: 36px 0 50px;
  font-family: "Comic Neue", cursive;
  font-size: 14px;
  border-top: 6px ridge var(--hot-pink);
  text-align: center;
}
.footplate a { color: var(--cyber-cyan); }
.footplate a:hover { background: var(--neon-yellow); color: #000; }
.footplate .link-rail {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 22px;
}
.footplate .link-rail a {
  background: linear-gradient(180deg, var(--hot-pink) 0%, var(--magenta) 100%);
  color: #fff;
  padding: 4px 12px;
  font-family: "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-top: 2px solid #ffaaff;
  border-left: 2px solid #ffaaff;
  border-right: 2px solid #660066;
  border-bottom: 2px solid #660066;
  text-shadow: 1px 1px 0 #000;
}
.footplate .link-rail a:hover { background: var(--neon-yellow); color: #000; text-shadow: none; }
.footplate .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 22px; margin-top: 14px; text-align: left; max-width: 1000px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .footplate .cols { grid-template-columns: 1fr; } }
.footplate h5 {
  margin: 0 0 8px;
  font-family: "Impact", sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-yellow);
  text-shadow: 1px 1px 0 red;
}
.footplate ul { padding-left: 18px; margin: 0; }
.footplate li { margin-bottom: 3px; }

/* ====================================================================== */
/* DANCEFLUX failure showcase — single-image dossier cards */
.df-gallery-anti {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 1100px) { .df-gallery-anti { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .df-gallery-anti { grid-template-columns: 1fr; } }

.df-file .df-imgwrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
  border-bottom: 3px solid #000;
}
.df-file .df-imgwrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}
.df-file .stamp-mini {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  font-family: "VT323", "Courier New", monospace;
  font-size: 13px;
  padding: 2px 7px;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.04em;
}
.df-file .score {
  position: absolute;
  bottom: 8px; right: 8px;
  z-index: 3;
  font-family: "VT323", monospace;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 8px;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #000;
}
.df-file .score.lose { background: red; color: #ffff00; }

.df-file .df-banner {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 3;
  background: var(--neon-yellow);
  color: #000;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border: 2px solid #000;
  transform: rotate(-2deg);
  text-shadow: none;
  box-shadow: 3px 3px 0 #000;
}

/* ====================================================================== */
/* IMAGE NEW SPEAK — paired DanceFlux vs Krea on critical prompts */
.newspeak-gallery-anti {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}
.ns-file {
  padding: 16px;
}
.ns-topic-anti {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 3px dashed #000;
}
.ns-tag-anti {
  display: inline-block;
  background: red;
  color: var(--neon-yellow);
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  margin-right: 10px;
  border: 2px solid #000;
  transform: rotate(-1deg);
  text-shadow: 2px 2px 0 #000;
  box-shadow: 3px 3px 0 #000;
}
.ns-prompt-anti {
  font-family: "VT323", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  text-shadow: none;
}
.ns-prompt-anti b {
  color: red;
  font-family: "Impact", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.ns-imgs-anti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px) { .ns-imgs-anti { grid-template-columns: 1fr; } }

.ns-imgs-anti .cell {
  position: relative;
  background: #000;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  display: flex;
  flex-direction: column;
}
.ns-imgs-anti .cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.ns-imgs-anti .stamp-mini {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  font-family: "VT323", monospace;
  font-size: 13px;
  padding: 2px 7px;
  border: 2px solid #000;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.04em;
}
.ns-caption-anti {
  display: block;
  padding: 10px 12px;
  background: var(--neon-yellow);
  color: #000;
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  border-top: 3px solid #000;
  text-shadow: none;
}

/* ====================================================================== */
/* Flux Dev + VSF — 3-up placeholder dossier */
.vsf-gallery-anti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 820px) { .vsf-gallery-anti { grid-template-columns: 1fr; } }

.vsf-file {
  padding: 0;
}
.vsf-imgwrap-anti {
  position: relative;
  aspect-ratio: 1 / 1;
  border-bottom: 3px solid #000;
  background:
    repeating-linear-gradient(
      45deg,
      var(--neon-yellow) 0 18px,
      #000 18px 22px
    );
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsf-imgwrap-anti::before {
  content: "AWAITING IMAGE";
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  background: #000;
  color: var(--neon-yellow);
  padding: 6px 14px;
  border: 3px solid var(--neon-yellow);
  text-shadow: 2px 2px 0 red;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 red;
}
.vsf-file.has-image .vsf-imgwrap-anti { background: #000; }
.vsf-file.has-image .vsf-imgwrap-anti::before { content: none; }
.vsf-file img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}