/* ═══════════════════════════════════════════════════════════════════
   THE HUMAN SEXUAL REVOLUTION (ONGOING) — shared grammar
   revolution.css

   EMOTIONAL TARGET: walking into a 1978 record shop that is also
   a reliquary. Velvet dark, chrome light, nothing corporate.

   Membranes enforced here:
   · rejects extraction  → zero third-party CSS beyond fonts
   · protects contact    → [data-motion="stilled"] quiets EVERYTHING
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=DM+Serif+Display:ital@0;1&family=Josefin+Sans:ital,wght@0,300;0,400;0,600;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* the void underneath everything — Nexus base, non-negotiable */
  --void:        #020005;
  --void-warm:   #0d0410;          /* velvet layer over the void */

  /* the glam layer — 1970s over the Nexus grammar */
  --hotpink:     #ff2e88;          /* stripe one. the first color cut. */
  --tangerine:   #ff7a1a;
  --gold:        #f5c518;          /* harvest gold */
  --lavender:    #c9a0ff;
  --cyan:        #26e0e0;
  --avocado:     #9db02c;          /* used sparingly. it earned the 70s. */
  --rose:        #ff9ecb;

  /* the maximalist layer — xerox punk + disco poster + activist zine */
  --neon-green:  #39ff14;          /* Girl Bar's acid duotone */
  --shout-orange:#ff3d00;          /* the diagonal banner color, flat */
  --paper:       #f5ead9;          /* cream flyer stock, not void */

  /* chrome is a gradient, never a flat color — now holographic foil,
     not silver: the same mechanism, an oil-slick rainbow instead of
     a mirror. built from the existing palette, no new hues needed. */
  --chrome: linear-gradient(
    135deg,
    var(--hotpink) 0%, var(--gold) 14%, var(--rose) 28%,
    var(--lavender) 42%, var(--cyan) 56%, var(--hotpink) 70%,
    var(--gold) 84%, var(--lavender) 100%
  );

  /* ── GROUND: the site now lives on white, colored per container.
     --page is the ground; --ink is "readable foreground on the CURRENT
     ground." Default = light. Dark contexts flip these below via
     [data-ground="dark"], so contrast is guaranteed by construction and
     no text is ever left invisible on its own background. ──────────── */
  --page:        #f7f4ef;          /* warm white — the universal ground */
  --ink:         #1a0a14;          /* dark ink, readable on white */
  --ink-dim:     #6b5d72;          /* muted, still readable on white */
  --line:        rgba(20,4,12,.16);
  --link:        #b0176b;          /* deep pink — readable link on white */

  /* text-safe accents: vivid hues wash out on white, so emphasis TEXT
     uses darkened variants. The vivid tokens above stay for grounds,
     borders, glows, the flag, and the mirrorball. */
  --gold-t:      #9a6a00;          /* amber, for gold emphasis on white */
  --cyan-t:      #0b7d7d;          /* teal, for cyan emphasis on white */
  --rose-t:      #b0176b;          /* deep rose, for rose emphasis on white */

  --font-display: 'Bungee', 'Impact', sans-serif;         /* fat glam, now a shout */
  --font-serif:   'DM Serif Display', 'Playfair Display', Georgia, serif; /* the grief/tabloid voice */
  --font-geo:     'Josefin Sans', 'Avant Garde', sans-serif;
  --font-mono:    'Courier Prime', 'Courier New', monospace;

  --ease-needle: cubic-bezier(.22,.9,.32,1);   /* tonearm damping */
  --beat: 517ms;                                /* one beat @ 116 BPM */
}

/* DARK CONTEXT — three ways in, one set of tokens:
   · the carve-out rooms (theriot, the Living register) set data-ground
     ="dark" themselves — always dark, never disco;
   · the global light/dark switch sets html[data-theme="disco"] — the
     whole site goes dark AND gets the glow layer further down.
   Flips the ground tokens back to velvet-dark so light text stays read. */
[data-ground="dark"], .on-dark, html[data-theme="disco"] {
  --page:    var(--void);
  --ink:     #f4ecff;
  --ink-dim: #9d8fb0;
  --line:    rgba(201,160,255,.18);
  --link:    var(--cyan);
  --gold-t:  var(--gold);
  --cyan-t:  var(--cyan);
  --rose-t:  var(--rose);
}

/* ── RESET / BODY ───────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }
html[data-motion="stilled"] { scroll-behavior:auto; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-geo);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--hotpink); color: #fff; }

a { color: var(--link); text-decoration-color: rgba(176,23,107,.4); text-underline-offset: 3px; }
a:hover { color: var(--hotpink); }
[data-ground="dark"] a, .on-dark a, html[data-theme="disco"] a { text-decoration-color: rgba(38,224,224,.4); }
[data-ground="dark"] a:hover, .on-dark a:hover, html[data-theme="disco"] a:hover { color: var(--rose); }

:focus-visible {
  outline: 2px solid var(--hotpink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── ATMOSPHERE LAYERS (fixed, pointer-transparent) ─────────────── */

/* CRT scanlines — near-silent on the white ground; restored to full
   presence only inside the dark carve-out rooms. */
.scanlines {
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.16) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
  z-index: 40;
  opacity: .12;
  animation: scan-drift 9s linear infinite;
}
[data-ground="dark"] .scanlines, html[data-theme="disco"] .scanlines { opacity: .5; }
@keyframes scan-drift { to { transform: translateY(6px); } }

/* film grain via feTurbulence — real texture, no image request */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 41;
  animation: grain-shift .9s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1.2%, .8%); }
  50%  { transform: translate(.9%, -1.1%); }
  75%  { transform: translate(-.7%, -.6%); }
  100% { transform: translate(0,0); }
}

/* velvet vignette — on white it's the faintest warm edge-shade; inside
   the dark carve-out rooms it becomes the full center-pulling velvet. */
.velvet {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 96% 80% at 50% 42%,
              transparent 0%, rgba(120,60,20,.05) 82%, rgba(90,40,10,.10) 100%);
  pointer-events: none;
  z-index: 39;
}
[data-ground="dark"] .velvet, html[data-theme="disco"] .velvet {
  background: radial-gradient(ellipse 90% 70% at 50% 42%,
              transparent 0%, rgba(2,0,5,.55) 78%, rgba(2,0,5,.92) 100%);
}

/* ── TYPE TREATMENTS ────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.01em;    /* Bungee runs wide; Shrikhand didn't need this */
}

/* CHROME: the six-inch-date treatment — holographic foil, ALL CAPS,
   80s-signage energy. background-clip + a shimmer that travels on
   both axes, like foil catching light as you tilt it. */
.chrome-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--chrome);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.22);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.75))
          drop-shadow(0 0 26px rgba(255,46,136,.35));
  animation: chrome-shine 6s ease-in-out infinite;
}
@keyframes chrome-shine {
  0%,100% { background-position: 0% 30%; }
  50%     { background-position: 100% 70%; }
}

/* neon: for room names on hover — glow without blur soup */
.neon-pink {
  color: var(--hotpink);
  text-shadow: 0 0 8px rgba(255,46,136,.9), 0 0 28px rgba(255,46,136,.45);
}
.neon-cyan {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(38,224,224,.9), 0 0 28px rgba(38,224,224,.4);
}

/* the archive voice — everything quoted from the record speaks Courier */
.archive-voice {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.9;
  letter-spacing: .01em;
}
.archive-voice em { color: var(--gold-t); font-style: normal; }

/* eyebrow labels */
.eyebrow {
  font-family: var(--font-geo);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── HALFTONE / DUOTONE image treatment ─────────────────────────── */
.halftone {
  position: relative;
  filter: contrast(1.08) saturate(.92);
}
.halftone::after {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(2,0,5,.55) 1px, transparent 1.6px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  pointer-events:none;
}
.duotone-pink img, img.duotone-pink {
  filter: grayscale(1) contrast(1.1) sepia(1)
          hue-rotate(287deg) saturate(3.4) brightness(.92);
}
/* the Girl Bar mood: acid xerox-green instead of hot pink. same trick,
   different photocopier toner. */
.duotone-neon img, img.duotone-neon {
  filter: grayscale(1) contrast(1.25) sepia(1)
          hue-rotate(62deg) saturate(4.6) brightness(1.05);
}

/* ── SHOUT-BANNER — the "DIVAS FIGHT AIDS" device ────────────────
   A flat diagonal band that yells. Reusable wherever a room needs
   to raise its voice; leave it out entirely where the room needs
   to stay quiet (theriot, the Living register of ancestors). ──── */
.shout-banner {
  display: inline-block;
  position: relative;
  background: var(--shout-orange);
  color: var(--void);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  padding: .5em .9em;
  transform: rotate(-3deg);
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 18px 40px rgba(255,61,0,.35);
}
.shout-banner.pink { background: var(--hotpink); color: var(--void); }
.shout-banner.green { background: var(--neon-green); color: var(--void); }

/* ── BALLROOM CATEGORY PLACARDS — "the category is: REALNESS" ─────
   The caller's shout made typographic. Each placard is a saturated
   block with a hard offset shadow (a trophy card slammed on a table),
   the category name in the display face, huge and tight. Dark ink on
   bright grounds — readable by construction. ──────────────────────── */
.ball-floor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 2.6rem 0;
}
.ball-category {
  position: relative;
  background: var(--hotpink);
  color: #14040c;
  border: 3px solid #14040c;
  padding: 1.3rem 1.1rem 1.15rem;
  text-align: center;
  box-shadow: 7px 7px 0 rgba(20,4,12,.85);
}
.ball-category .cat-eyebrow {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  opacity: .85;
}
.ball-category .cat-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.6vw, 1.9rem);
  line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
  margin-top: .4rem;
}
.ball-category .cat-note {
  font-family: var(--font-mono);
  font-size: .64rem; line-height: 1.6; margin-top: .6rem;
}
/* cycle the palette so the floor reads as a full ball */
.ball-floor .ball-category:nth-child(5n+1) { background: var(--hotpink); }
.ball-floor .ball-category:nth-child(5n+2) { background: var(--cyan); }
.ball-floor .ball-category:nth-child(5n+3) { background: var(--gold); }
.ball-floor .ball-category:nth-child(5n+4) { background: var(--lavender); }
.ball-floor .ball-category:nth-child(5n)   { background: var(--neon-green); }

/* ── THE GRIEF / TABLOID LAYER ───────────────────────────────────
   High-contrast, pink-or-white grounds, a dramatic serif set TIGHT.
   The "RELAX. HOMOSEXUALS ARE EVERYWHERE!" register — where the
   camp headline and the real grief are the same size and the same
   font, because on this site they were never separate things.

   The KERNING is the instrument. Slammed shut for dread and force
   (a tabloid screaming), thrown wide for the neon-sign hush. ──── */

/* a section that inverts the void: paper or hot-pink ground, black
   ink, no velvet. Used sparingly — the light coming up hard. */
.contrast-panel {
  position: relative;
  z-index: 2;
  background: var(--paper);
  color: #14040c;
  padding: clamp(2.6rem, 8vw, 6rem) clamp(1.4rem, 6vw, 4rem);
  margin: 8vh 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 30px 80px rgba(0,0,0,.6);
}
.contrast-panel.pink { background: var(--hotpink); color: #14040c; }
.contrast-panel.pink a { color: #14040c; text-decoration-color: rgba(0,0,0,.4); }
.contrast-panel.ink  { background: #f4f0ea; color: #0a0a0a; }   /* newsprint white */
.contrast-panel a { color: #7a1340; }

/* the tabloid headline: heavy serif, negative leading, kerning shut.
   size it big; let it break where it wants. */
.tabloid-head {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 6rem);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 .4em;
}
.tabloid-head em { font-style: italic; }               /* DM Serif has a real italic */
.tabloid-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.tabloid-byline {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  line-height: 1.8;
  opacity: .8;
  margin-top: 1.4rem;
}

/* KERNING utilities — spacing as pure expression. */
.kern-tight { letter-spacing: -.04em; }
.kern-shut  { letter-spacing: -.07em; }               /* dread; letters colliding */
.kern-loose { letter-spacing: .18em; }
.kern-wild  { letter-spacing: .5em; }                 /* the neon-sign hush */

/* a serif display heading that stays ON the void (not inverted) —
   for grief beats that shouldn't flip the whole ground to paper. */
.serif-cry {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.serif-cry .hot { color: var(--hotpink); }
.serif-cry em { font-style: italic; color: var(--rose); }

/* ── LINE-ART FLOURISHES — small hand-drawn-feeling accents ──────
   Naive-flyer punctuation, in the palette. Sparse by design: a
   sprinkle near a headline, never a pattern that competes with it. */
.flourish {
  display: inline-block;
  width: 1.4em; height: 1.4em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.flourish-sparkle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L24 16 L38 20 L24 24 L20 38 L16 24 L2 20 L16 16 Z' fill='%23f5c518'/%3E%3C/svg%3E");
}
.flourish-squiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M2 12 Q10 2, 18 12 T34 12 T50 12 T58 12' fill='none' stroke='%23ff2e88' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 2.2em; height: .9em;
}
.flourish-burst {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%2326e0e0' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='12'/%3E%3Cline x1='20' y1='28' x2='20' y2='38'/%3E%3Cline x1='2' y1='20' x2='12' y2='20'/%3E%3Cline x1='28' y1='20' x2='38' y2='20'/%3E%3Cline x1='7' y1='7' x2='14' y2='14'/%3E%3Cline x1='26' y1='26' x2='33' y2='33'/%3E%3Cline x1='33' y1='7' x2='26' y2='14'/%3E%3Cline x1='14' y1='26' x2='7' y2='33'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── POLAROID pop-out (credit line baked in — it IS the artwork) ── */
.polaroid {
  background: #f5f0e6;
  color: #241a2e;
  padding: 12px 12px 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  transform: rotate(var(--tilt, -1.6deg));
  max-width: 380px;
  transition: transform .5s var(--ease-needle);
}
.polaroid:hover { transform: rotate(0deg) scale(1.015); }
.polaroid img { display:block; width:100%; }
.polaroid .caption {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.5;
  padding: 10px 4px 8px;
}
.polaroid .credit {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: #6f5f80;
  padding: 0 4px 12px;
}

/* ── FLYER-CARD — a Polaroid's punk cousin ───────────────────────
   Taped to a wall, not kept in a box: cream stock, a torn bottom
   edge, two rotated tape-strips at the top corners. Alternate to
   .polaroid where a room wants DIY-flyer texture instead of
   reliquary-glam. ──────────────────────────────────────────────── */
.flyer-card {
  position: relative;
  background: var(--paper);
  color: #241a2e;
  padding: 14px 14px 22px;
  max-width: 380px;
  transform: rotate(var(--tilt, 1.4deg));
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  clip-path: polygon(
    0 0, 100% 0, 100% 94%,
    92% 100%, 80% 93%, 68% 100%, 56% 94%, 44% 100%, 32% 93%, 20% 100%, 8% 94%, 0 100%
  );
  transition: transform .5s var(--ease-needle);
}
.flyer-card:hover { transform: rotate(0deg) scale(1.015); }
.flyer-card img { display:block; width:100%; }
.flyer-card::before, .flyer-card::after {
  content:'';
  position:absolute; top:-10px;
  width: 54px; height: 22px;
  background: rgba(245,197,24,.35);
  border: 1px solid rgba(245,197,24,.5);
}
.flyer-card::before { left: 10%; transform: rotate(-8deg); }
.flyer-card::after  { right: 10%; transform: rotate(6deg); }
.flyer-card .caption {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.5;
  padding: 10px 4px 0;
}
.flyer-card .credit {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: #6f5f80;
  padding: 4px 4px 0;
}

/* ── DIALS (the threshold controls — tuned, not checked) ────────── */
.dial-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.dial-row .dial-label { flex: 1; }
.dial-row .dial-label strong {
  display: block;
  font-family: var(--font-geo);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--ink);
}
.dial-row .dial-label span {
  font-size: .8rem; color: var(--ink-dim);
}

.dial {
  --on: 0;
  position: relative;
  flex: none;
  width: 74px; height: 34px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #17081f, #0b0310);
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.dial::after {
  content:'';
  position:absolute; top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #cfd9e6 45%, #6f8196);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  transition: transform .35s var(--ease-needle), background .35s;
}
.dial[aria-checked="true"] { border-color: var(--hotpink); box-shadow: 0 0 18px rgba(255,46,136,.35) inset, 0 0 14px rgba(255,46,136,.25); }
.dial[aria-checked="true"]::after {
  transform: translateX(40px);
  background: radial-gradient(circle at 34% 30%, #fff, var(--rose) 40%, var(--hotpink));
}

/* two-position selector (depth / motion) */
.selector {
  display:flex; gap:0; flex:none;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.selector button {
  font-family: var(--font-geo);
  font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: var(--ink-dim);
  border: 0; padding: .6rem .9rem; cursor: pointer;
  transition: background .25s, color .25s;
}
.selector button[aria-pressed="true"] {
  background: var(--hotpink); color: var(--void);
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn-needle {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--void);
  background: linear-gradient(135deg, var(--gold), var(--tangerine), var(--hotpink));
  padding: .8rem 2.6rem;
  border: 0; border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(255,46,136,.35);
  transition: transform .25s var(--ease-needle), box-shadow .25s;
}
.btn-needle:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,46,136,.5); }
.btn-needle:active { transform: translateY(1px); }
.btn-needle[aria-disabled="true"] { filter: grayscale(.8); opacity:.5; pointer-events:none; }

.btn-ghost {
  font-family: var(--font-geo); font-weight: 600;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose-t);                 /* deep rose on white; lavender on dark */
  background: transparent;
  border: 1px solid var(--rose-t);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.btn-ghost:hover { background: var(--hotpink); border-color: var(--hotpink); color: #fff; }
[data-ground="dark"] .btn-ghost, html[data-theme="disco"] .btn-ghost { color: var(--lavender); border-color: var(--line); }
[data-ground="dark"] .btn-ghost:hover, html[data-theme="disco"] .btn-ghost:hover { background: transparent; border-color: var(--lavender); color: var(--ink); }

/* ── FOURTH WALL (the page notices you — rare, earned) ──────────── */
.fourthwall {
  position: fixed;
  left: 50%; bottom: 12vh;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(80vw, 640px);
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  color: #f4ecff;                 /* stays light: this overlay is always dark */
  text-align: center;
  padding: 1rem 1.4rem;
  background: rgba(2,0,5,.92);
  border-top: 1px solid rgba(255,46,136,.5);
  border-bottom: 1px solid rgba(38,224,224,.4);
  opacity: 0;
  pointer-events: none;
}
.fourthwall.torn { animation: fw-appear 7.5s var(--ease-needle) forwards; }
@keyframes fw-appear {
  0%   { opacity:0; clip-path: inset(48% 0 48% 0); }
  6%   { opacity:1; clip-path: inset(0 0 0 0); transform: translateX(-50.4%) skewX(.6deg); }
  8%   { transform: translateX(-49.7%) skewX(-.4deg); }
  10%  { transform: translateX(-50%) skewX(0); }
  86%  { opacity:1; }
  100% { opacity:0; clip-path: inset(48% 0 48% 0); }
}

/* scanline tear that precedes the line */
.tear {
  position: fixed; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--hotpink), transparent);
  z-index: 59; opacity: 0; pointer-events:none;
}
.tear.go { animation: tear-sweep .5s linear forwards; }
@keyframes tear-sweep {
  0% { opacity:.9; transform: translateY(0) scaleY(1); }
  100% { opacity:0; transform: translateY(38vh) scaleY(6); }
}

/* ── TRACKLIST (the accessible nav — liner notes, not a fallback) ─ */
.tracklist {
  list-style: none;
  font-family: var(--font-mono);
  max-width: 560px;
}
.tracklist li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .55rem 0;
  border-bottom: 1px dotted var(--line);
}
.tracklist .tno { color: var(--ink-dim); font-size: .8rem; flex:none; width: 2.2em; }
.tracklist a {
  color: var(--ink); text-decoration: none;
  letter-spacing: .04em;
}
.tracklist a:hover { color: var(--hotpink); }
.tracklist .dur { margin-left:auto; color: var(--ink-dim); font-size:.8rem; }
.tracklist li.unreleased a { color: var(--ink-dim); pointer-events:none; }
.tracklist li.unreleased .dur::after { content:' · pressing soon'; }

/* ── AUDIO TOGGLE (opt-in, always visible, never nags) ──────────── */
.audio-toggle {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 70;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(20,4,12,.25);
  background: #14040c;              /* dark chip; icon stays light on it */
  color: #c9a0ff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.audio-toggle[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(245,197,24,.3);
}

/* ── THE LIGHT SWITCH (light ↔ disco-dark) ───────────────────────
   A real wall switch in the corner. Flip UP for light, DOWN for the
   disco dark — where even the dark glows. Persists on this device only,
   like every other dial. ─────────────────────────────────────────── */
.light-switch {
  position: fixed;
  top: 1.1rem; right: 1.1rem;
  z-index: 71;
  width: 44px; height: 72px;
  padding: 6px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(160deg, #efe9dc, #cfc6b4);
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.12);
  cursor: pointer;
}
.light-switch .ls-plate {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 5px;
  background: linear-gradient(160deg, #d8d0c0, #b7ad99);
  box-shadow: inset 0 0 6px rgba(0,0,0,.35);
  overflow: hidden;
}
.light-switch .ls-knob {
  position: absolute;
  left: 50%; width: 66%; height: 42%;
  transform: translateX(-50%);
  top: 6%;                                   /* UP = light (default) */
  border-radius: 4px;
  background: linear-gradient(180deg, #fdfdfb, #cbc7bd);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8);
  transition: top .26s var(--ease-needle), background .26s, box-shadow .26s;
}
.light-switch .ls-knob::after {           /* the little grip line */
  content:''; position:absolute; left:22%; right:22%; top: 44%; height:2px;
  background: rgba(0,0,0,.18); border-radius:2px;
}
/* thrown DOWN = disco dark */
html[data-theme="disco"] .light-switch .ls-knob {
  top: 52%;
  background: linear-gradient(180deg, #2a1030, #14040c);
}
/* even the dark glows: the switch itself catches the technicolor */
html[data-theme="disco"] .light-switch {
  background: linear-gradient(160deg, #1a0a20, #0a0410);
  animation: disco-glow 6s linear infinite;
}
html[data-theme="disco"] .light-switch .ls-plate {
  background: linear-gradient(160deg, #17081f, #0b0310);
}

/* ── DISCO GLOW — the RGB-cycling border/aura for dark mode ────────
   Rides on the card classes that already exist. Staggered so the room
   shimmers rather than strobes in unison. Sound ≠ motion: honored by
   the stilled membrane below (it resolves to a calm single hue). */
@keyframes disco-glow {
  0%   { border-color: var(--hotpink);    box-shadow: 0 0 18px -3px var(--hotpink),    0 0 40px -14px var(--hotpink); }
  20%  { border-color: var(--tangerine);  box-shadow: 0 0 18px -3px var(--tangerine),  0 0 40px -14px var(--tangerine); }
  40%  { border-color: var(--gold);       box-shadow: 0 0 18px -3px var(--gold),       0 0 40px -14px var(--gold); }
  60%  { border-color: var(--neon-green); box-shadow: 0 0 18px -3px var(--neon-green), 0 0 40px -14px var(--neon-green); }
  80%  { border-color: var(--cyan);       box-shadow: 0 0 18px -3px var(--cyan),       0 0 40px -14px var(--cyan); }
  100% { border-color: var(--hotpink);    box-shadow: 0 0 18px -3px var(--hotpink),    0 0 40px -14px var(--hotpink); }
}
html[data-theme="disco"] .polaroid,
html[data-theme="disco"] .flyer-card,
html[data-theme="disco"] .tablet,
html[data-theme="disco"] .film,
html[data-theme="disco"] .contrast-panel,
html[data-theme="disco"] .ball-category,
html[data-theme="disco"] .thing-embed,
html[data-theme="disco"] .tablet-img {
  border: 2px solid var(--hotpink);
  animation: disco-glow 6s linear infinite;
}
/* offset the phase so the wall shimmers like real mirrorball spill */
html[data-theme="disco"] .reliquary > *:nth-child(3n)   { animation-delay: -2s; }
html[data-theme="disco"] .reliquary > *:nth-child(3n+1) { animation-delay: -4s; }
html[data-theme="disco"] .ball-floor > *:nth-child(2n)  { animation-delay: -3s; }
html[data-theme="disco"] .kodachrome > *:nth-child(2n)  { animation-delay: -2.5s; }
/* the lit dancefloor tiles get the technicolor edge too */
html[data-theme="disco"] .tile.lit { animation: disco-glow 6s linear infinite; }
html[data-theme="disco"] .tile.lit:nth-child(3n) { animation-delay: -3s; }

/* NEVER disco — some grief a rainbow would desecrate. Opt any element
   out with .no-disco. The Nazi plunder of Hirschfeld's Institut is the
   first and clearest case: no technicolor around the people burning it. */
html[data-theme="disco"] .no-disco {
  animation: none !important;
  border-color: rgba(20,4,12,.2) !important;
}
html[data-theme="disco"] .polaroid.no-disco {
  border: 0 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.65) !important;
}

/* ── MOTION DISCIPLINE ──────────────────────────────────────────── */
/* Stilled = every animation resolves to its calmest frame.
   Nothing is lost. Only quieted. This is a membrane, not a fallback. */
html[data-motion="stilled"] *,
html[data-motion="stilled"] *::before,
html[data-motion="stilled"] *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ── UTILITIES ──────────────────────────────────────────────────── */
.center-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  padding: 6vh 1.5rem;
}
.stack { display:flex; flex-direction:column; }
.visually-hidden {
  position:absolute; width:1px; height:1px;
  clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}