/* ============================================================
   THRESHOLD — Immersive Rage Room
   ============================================================ */

:root {
  --bg:       #0a0a0a;
  --bg-soft:  #141414;
  --bg-card:  #1a1a1a;
  --fg:       #f4f4f4;
  --fg-dim:   rgba(244,244,244,0.6);
  --fg-mute:  rgba(244,244,244,0.35);
  --line:     rgba(244,244,244,0.1);
  --accent:   #04ff36;            /* explosive neon green — lead color (from the posters) */
  --accent-2: #0134ee;            /* suppressed neon blue */
  --accent-3: #04ff36;            /* explosive neon green */
  --accent-3-red: #ff0006;        /* internal neon red */

  --sans:     "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a       { color: inherit; text-decoration: none; }
img     { display: block; max-width: 100%; height: auto; }
button  { font-family: inherit; cursor: pointer; }

/* Subtle film-grain over everything */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(4,255,54,0.05), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(1,52,238,0.05), transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   NAV
   ============================================================ */

.th-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 64px;
  padding: 0 clamp(20px, 4vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(10,10,10,0.92), rgba(10,10,10,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.th-nav-mark {
  display: inline-flex; flex-direction: column; line-height: 1;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.th-nav-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 4px;
  font-weight: 400;
}

.th-nav-links {
  display: flex; align-items: center; gap: clamp(20px, 2.5vw, 48px);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.th-nav-links a {
  color: var(--fg-dim);
  transition: color 0.25s var(--ease);
}
.th-nav-links a:hover { color: var(--fg); }

/* back to the main site — echoes the {KIM/STARKMAN} mark, set apart on the right */
.th-nav-home {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(244,244,244,0.18);
  white-space: nowrap;
}
.th-nav-home b { color: var(--accent); font-weight: 600; }
.th-nav-home:hover b { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (max-width: 768px) {
  .th-nav-home { border-left: 0; padding-left: 0; font-size: 11px; }
}

@media (max-width: 768px) {
  .th-nav-sub { display: none; }
  .th-nav-links { gap: 14px; font-size: 13px; }
}

/* ============================================================
   BACK CHIP
   ============================================================ */

.back-chip {
  position: fixed; bottom: 24px; left: 24px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(244,244,244,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--fg);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.back-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.back-chip-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.back-chip:hover .back-chip-arrow { transform: translateX(-3px); }
.back-chip-text b { font-weight: 700; }

/* ============================================================
   HERO
   ============================================================ */

.th-hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  padding: 100px clamp(28px, 5vw, 96px) 80px;
  display: flex; flex-direction: column;
  z-index: 2;
  max-width: 1800px;
  margin: 0 auto;
}

.th-hero-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: clamp(24px, 4vh, 56px);
}
.th-tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(244,244,244,0.02);
}
.th-tag:first-child { border-color: rgba(255,0,6,0.4); color: var(--accent); }

.th-hero-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(72px, 14vw, 260px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin-bottom: clamp(40px, 6vh, 80px);
  color: var(--fg);
  animation: thHeroIn 1.4s var(--ease-out) both;
}
@keyframes thHeroIn {
  from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.th-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: center;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .th-hero-grid { grid-template-columns: 1fr; }
}

.th-hero-3d {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  /* no frame — the logo floats in space, only a soft glow bleeds behind it */
  background:
    radial-gradient(ellipse at 50% 45%, rgba(4,255,54,0.09) 0%, rgba(10,10,10,0) 60%);
  cursor: grab;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.th-hero-3d:active { cursor: grabbing; }

.th-hero-3d canvas {
  display: block;
  width: 100%; height: 100%;
}

/* Loader shown until STL has loaded */
.th-hero-3d-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.th-hero-3d-loader.is-hidden { opacity: 0; }
.th-hero-3d-loader-ring {
  width: 36px; height: 36px;
  border: 2px solid rgba(244,244,244,0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: thSpin 1.1s linear infinite;
}
.th-hero-3d-loader span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@keyframes thSpin { to { transform: rotate(360deg); } }

/* Hover hint — fades out after first interaction */
.th-hero-3d-hint {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20,20,20,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.5s var(--ease);
}
.th-hero-3d.has-interacted .th-hero-3d-hint { opacity: 0; }

.th-hero-card {
  display: flex; flex-direction: column; gap: 20px;
}
.th-hero-card-title {
  font-family: var(--mono);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.th-hero-card p {
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 50ch;
}
.th-hero-arrows {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-mute);
  line-height: 1.6;
  margin-top: 20px;
  animation: thArrowBob 2s ease-in-out infinite;
}
@keyframes thArrowBob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   RAGE BANNER BARS — sliced grid of "rage types"
   ============================================================ */

.th-rage {
  position: relative;
  z-index: 2;
  background: var(--fg);
  color: var(--bg);
  border-top: 1px solid var(--bg);
  border-bottom: 1px solid var(--bg);
  isolation: isolate;
}
.th-rage-intro {
  padding: clamp(60px, 9vh, 120px) clamp(28px, 5vw, 80px) clamp(40px, 6vh, 80px);
  max-width: 720px;
}
.th-rage-intro .th-section-label {
  color: rgba(10,10,10,0.55);
  margin-bottom: 16px;
}
.th-rage-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(10,10,10,0.75);
}
.th-rage-cinema {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #0a0a0a;
  border: 1px solid rgba(10,10,10,0.3); padding: 12px 18px;
  transition: 0.25s var(--ease);
}
.th-rage-cinema:hover { background: #0a0a0a; color: #f4f4f4; border-color: #0a0a0a; }

/* Each rage row is a <details> element. summary = the clickable bar. */
.th-rage-bar {
  border-top: 1px solid var(--bg);
  background: var(--fg);
  color: var(--bg);
  position: relative;
  isolation: isolate;
}
.th-rage-bar:last-child { border-bottom: 0; }
.th-rage-bar summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 5vh, 56px) clamp(28px, 5vw, 80px);
  list-style: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.25s var(--ease);
  isolation: isolate;
}
.th-rage-bar summary::-webkit-details-marker { display: none; }

.th-rage-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 140px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  mix-blend-mode: normal;
}

/* The symbol rides the closed bar too — dimmed, waking up on hover */
.th-rage-bar-symbol {
  height: clamp(40px, 5vw, 72px);
  width: auto;
  margin-left: auto;
  margin-right: clamp(14px, 2vw, 26px);
  position: relative;
  z-index: 2;
  opacity: 0.55;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rage-color) 45%, transparent));
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.th-rage-bar summary:hover .th-rage-bar-symbol,
.th-rage-bar[open] .th-rage-bar-symbol {
  opacity: 1;
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--rage-color) 80%, transparent));
}

.th-rage-arrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1;
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease);
}
.th-rage-bar[open] > summary .th-rage-arrow { transform: rotate(90deg); }
.th-rage-bar:not([open]) > summary:hover .th-rage-arrow {
  transform: translate(8px, -8px) rotate(5deg);
}

/* ===================== Rage panel (expanded content) =====================
 * Centered, minimal — only symbol + colored name + quote. No images. */
.th-rage-panel {
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vh, 40px);
  padding: clamp(56px, 9vh, 120px) clamp(28px, 5vw, 80px);
  border-top: 1px solid color-mix(in srgb, var(--rage-color) 50%, transparent);
}

.th-rage-panel-symbol {
  /* doubled — the symbol is the hero of the open panel (per Kimi, option 2) */
  width: clamp(220px, 26vw, 400px);
  height: auto;
  filter:
    drop-shadow(0 0 32px color-mix(in srgb, var(--rage-color) 60%, transparent));
}
@keyframes thSymPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--rage-color) 45%, transparent));
  }
  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 64px color-mix(in srgb, var(--rage-color) 90%, transparent));
  }
}

.th-rage-panel-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: 0.08em;
  color: var(--rage-color);
  text-shadow: 0 0 24px color-mix(in srgb, var(--rage-color) 50%, transparent);
}

.th-rage-panel-quote {
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--fg);
  max-width: 30ch;
}

/* Each piece inside the panel: pop in staggered when [open] is set */
.th-rage-bar[open] .th-rage-panel-symbol {
  animation:
    thRageIn 0.7s var(--ease) 0.05s both,
    thSymPulse 4.5s ease-in-out 0.85s infinite;
}
.th-rage-bar[open] .th-rage-panel-name   { animation: thRageIn 0.7s var(--ease) 0.18s both; }
.th-rage-bar[open] .th-rage-panel-quote  { animation: thRageIn 0.7s var(--ease) 0.30s both; }

@keyframes thRageIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* Smooth open/close — Chromium / Safari Tech Preview support interpolate-size */
@supports (interpolate-size: allow-keywords) {
  .th-rage-bar { interpolate-size: allow-keywords; }
  .th-rage-bar::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete;
  }
  .th-rage-bar[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .th-rage-bar[open] .th-rage-panel-symbol,
  .th-rage-bar[open] .th-rage-panel-name,
  .th-rage-bar[open] .th-rage-panel-quote { animation: none; }
}

/* ===================== IRIDESCENT HOVER =====================
 * One clean name, no echoes (per Kimi). On hover the bar goes dark,
 * the name fills with a drifting pearl gradient and a soft
 * iridescent sheen sweeps across the row. */
.th-rage-bar { transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.th-rage-bar:hover { background: #0b0b0c; color: var(--fg); }

.th-rage-fx {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 12%,
    rgba(183, 252, 228, 0.35) 32%,
    rgba(205, 184, 255, 0.45) 46%,
    rgba(255, 196, 236, 0.40) 58%,
    rgba(184, 241, 255, 0.35) 70%,
    transparent 88%);
  background-size: 250% 100%;
  background-position: 130% 0;
  filter: blur(22px) saturate(1.25);
  transition: opacity 0.35s var(--ease);
}
.th-rage-bar:hover .th-rage-fx {
  opacity: 0.55;
  animation: thFxSheen 3.2s var(--ease) infinite;
}
@keyframes thFxSheen {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

.th-rage-bar:hover .th-rage-name {
  background: linear-gradient(105deg,
    #b7fce4 0%, #cdb8ff 22%, #ffc4ec 45%, #b8f1ff 68%, #d9ffd0 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: thNameIri 3.6s linear infinite alternate;
}
@keyframes thNameIri {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

@media (max-width: 700px) {
  .th-rage-bar { padding: 18px 20px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .th-rage-bar:hover .th-rage-fx { animation: none; }
  .th-rage-bar:hover .th-rage-name { animation: none; }
}

/* ============================================================
   THE SPACE
   ============================================================ */

.th-space {
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 60px);
  position: relative; z-index: 2;
}
.th-space-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1400px; margin: 0 auto;
}
@media (max-width: 900px) {
  .th-space-grid { grid-template-columns: 1fr; }
}
.th-space-text {
  display: flex; flex-direction: column;
  gap: 28px;
}
.th-space-img {
  border-radius: 4px; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
}
.th-space-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
}

.th-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.th-section-label.center { text-align: center; }

.th-h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.th-h2.center { text-align: center; }
.th-h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.th-space-text p {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-dim);
  max-width: 52ch;
}

/* Space gallery — horizontally-scrollable strip */
.th-space-gallery {
  margin-top: clamp(60px, 9vh, 110px);
  position: relative;
}
.th-space-gallery .th-section-label { margin-bottom: 24px; }
.th-space-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 24px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}
.th-space-strip::-webkit-scrollbar { height: 6px; }
.th-space-strip::-webkit-scrollbar-track { background: rgba(244,244,244,0.05); }
.th-space-strip::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }

.th-space-tile {
  flex: 0 0 clamp(280px, 32vw, 480px);
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  position: relative;
}
.th-space-tile-wide {
  flex-basis: clamp(420px, 50vw, 720px);
  aspect-ratio: 16/9;
}
.th-space-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.th-space-tile:hover img { transform: scale(1.04); }

/* ============================================================
   THREE TYPES
   ============================================================ */

.th-types {
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--line);
  position: relative; z-index: 2;
}
.th-types-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 80px);
  display: flex; flex-direction: column; gap: 20px;
  align-items: center;
}
.th-types-lede {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg-dim);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(50px, 7vh, 90px);
}

/* Three symbols — floating freely with name + color + quote */
.th-symbols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 80px);
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px);
}
@media (max-width: 900px) {
  .th-symbols { grid-template-columns: 1fr; max-width: 520px; gap: 80px; }
}

.th-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.th-symbol-img-wrap {
  position: relative;
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  /* Different float for each — set in CSS below */
  animation: thSymFloat 6s ease-in-out infinite;
}
.th-symbol-internal   .th-symbol-img-wrap { animation-duration: 5.5s; animation-delay: 0s; }
.th-symbol-suppressed .th-symbol-img-wrap { animation-duration: 7s;   animation-delay: -1.5s; }
.th-symbol-explosive  .th-symbol-img-wrap { animation-duration: 6.2s; animation-delay: -3s; }

.th-symbol-img {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Recolor the white/black PNG to the symbol's hue */
  filter: drop-shadow(0 0 28px var(--sym-color))
          drop-shadow(0 0 60px color-mix(in srgb, var(--sym-color) 40%, transparent));
}
.th-symbol-aura {
  position: absolute; inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sym-color) 0%, transparent 55%);
  opacity: 0.22;
  filter: blur(28px);
  z-index: 1;
  animation: thSymPulse 4s ease-in-out infinite;
}

@keyframes thSymFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-22px) rotate(2deg); }
}
@keyframes thSymPulse {
  0%, 100% { opacity: 0.18; transform: scale(0.96); }
  50%      { opacity: 0.34; transform: scale(1.06); }
}

.th-symbol-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.04em;
  color: var(--sym-color);
  text-shadow: 0 0 24px color-mix(in srgb, var(--sym-color) 60%, transparent);
}

.th-symbol-quote {
  font-family: "Times New Roman", "EB Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 32ch;
  position: relative;
  padding: 0 12px;
}
.th-symbol-quote-mark {
  font-family: inherit;
  font-size: 1.6em;
  color: var(--sym-color);
  opacity: 0.8;
  vertical-align: -0.18em;
  margin: 0 2px;
}

@media (prefers-reduced-motion: reduce) {
  .th-symbol-img-wrap,
  .th-symbol-aura { animation: none; }
}

/* ============================================================
   GALLERY
   ============================================================ */

.th-gallery {
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 80px);
  border-top: 1px solid var(--line);
  position: relative; z-index: 2;
}
.th-gallery > .th-section-label,
.th-gallery > .th-h2 {
  margin-bottom: 20px;
}
.th-gallery > .th-h2 { margin-bottom: clamp(40px, 6vh, 80px); }

.th-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(180px, 22vh, 240px);
  gap: 18px;
  max-width: 1700px; margin: 0 auto;
}
@media (max-width: 900px) {
  .th-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}

.th-g {
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  position: relative;
}
.th-g img, .th-g video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.th-g:hover img,
.th-g:hover video { transform: scale(1.04); }

.th-g-large  { grid-column: span 4; grid-row: span 2; }
.th-g-wide   { grid-column: span 4; grid-row: span 1; }
.th-g-tall   { grid-column: span 2; grid-row: span 2; }
.th-g-square { grid-column: span 2; grid-row: span 1; }

@media (max-width: 900px) {
  .th-g-large, .th-g-wide, .th-g-tall, .th-g-square {
    grid-column: span 2; grid-row: span 1;
  }
  .th-g-large, .th-g-tall { grid-row: span 2; }
}

/* Float-in entrance animation — triggered by IntersectionObserver in scene-hero.js */
.th-g[data-fx="float-in"] {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.th-g.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   GET HELP — closing quote
   ============================================================ */

/* ===================== TICKETS — section 6 ===================== */
.th-tickets {
  position: relative;
  padding: clamp(80px, 14vh, 200px) clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(4,255,54,0.08), transparent 60%),
    var(--bg);
  z-index: 2;
  isolation: isolate;
}

.th-tickets-stickers {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.th-sticker {
  position: absolute;
  left: var(--x); top: var(--y);
  width: clamp(80px, 11vw, 160px);
  aspect-ratio: 1;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: thStickerFloat 6s ease-in-out infinite;
  will-change: transform;
}
.th-sticker:nth-child(2) { animation-delay: -1.5s; animation-duration: 7s; }
.th-sticker:nth-child(3) { animation-delay: -3s;   animation-duration: 5.5s; }
.th-sticker:nth-child(4) { animation-delay: -4.5s; animation-duration: 6.5s; }
.th-sticker:nth-child(5) { animation-delay: -2s;   animation-duration: 7.5s; }

.th-sticker img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}
.th-sticker.is-dragging {
  animation: none;
  cursor: grabbing;
  z-index: 5;
}

@keyframes thStickerFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0); }
  50%      { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 6deg)) translateY(-22px); }
}

.th-tickets-inner {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.th-tickets-inner .th-section-label { color: var(--accent); }
.th-tickets-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.th-tickets-title em {
  font-style: italic;
  color: var(--accent);
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 400;
}
.th-tickets-sub {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
  max-width: 46ch;
  margin-bottom: 8px;
}

/* Ticket form */
.th-tickets-form {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 4vw, 44px);
  background: rgba(244,244,244,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}
.th-tk-row { display: flex; flex-direction: column; gap: 6px; }
.th-tk-row-half {
  flex-direction: row;
  gap: 16px;
}
.th-tk-row-half > div {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
}
.th-tk-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.th-tk-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  transition: border-color 0.2s var(--ease);
}
.th-tk-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(4,255,54,0.18);
}
.th-tk-submit {
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 16px 32px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.th-tk-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(4,255,54,0.35);
}
.th-tk-submit-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.th-tk-submit:hover .th-tk-submit-arrow {
  transform: translate(4px, -4px) rotate(5deg);
}
.th-tk-disclaimer {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  text-align: center;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .th-sticker { animation: none; }
}

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

.th-footer {
  padding: 32px clamp(20px, 4vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--fg-mute);
  border-top: 1px solid var(--line);
  position: relative; z-index: 2;
}
.th-footer-left .th-bracket { color: var(--accent); }
.th-footer-center { color: var(--accent); }

@media (max-width: 700px) {
  .th-footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PART B — THE BREAKDOWN
   The house lights come up: the fiction above is black; the
   documentation below is PAPER — the brand book's clinical
   language. White stock, thin black rules, Helvetica Bold
   headlines, Andale Mono body, folio numbers.
   (Reveal state .in is added by page.js.)
   ============================================================ */

.th-bd, .th-bd-divider {
  --paper: #ececea;
  --paper-soft: #e2e2df;
  --ink: #0c0c0c;
  --ink-dim: rgba(12,12,12,0.62);
  --ink-mute: rgba(12,12,12,0.38);
  --rule: rgba(12,12,12,0.85);
  --rule-thin: rgba(12,12,12,0.22);
  --book-mono: "Andale Mono", "Courier New", monospace;
  --book-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Divider — the flip from exhibition to paper. Black text, white stock. */
.th-bd-divider {
  overflow: hidden;
  background: var(--paper);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 16px 0;
  position: relative; z-index: 2;
}
.th-bd-divider-track {
  display: flex; align-items: center; gap: 42px;
  white-space: nowrap;
  width: max-content;
  font-family: var(--book-mono);
  font-size: 13px; letter-spacing: 0.34em;
  color: var(--ink);
  animation: thBdMarquee 22s linear infinite;
}
.th-bd-divider-track i { font-style: normal; font-size: 8px; }
@keyframes thBdMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

.th-bd {
  position: relative; z-index: 2;
  background: var(--paper);
  /* bleed the paper past the centered column to the full viewport */
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  color: var(--ink);
  padding: clamp(70px, 9vw, 120px) clamp(24px, 6vw, 80px) clamp(80px, 10vw, 140px);
  display: flex; flex-direction: column;
  gap: clamp(80px, 11vw, 150px);
  max-width: 1500px; margin: 0 auto;
}

/* Reveal choreography — replays both directions */
[data-bd-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-bd-reveal].in { opacity: 1; transform: translateY(0); }
[data-bd-stagger] > * {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-bd-stagger].in > * { opacity: 1; transform: translateY(0); }
[data-bd-stagger].in > *:nth-child(1) { transition-delay: 0.05s; }
[data-bd-stagger].in > *:nth-child(2) { transition-delay: 0.15s; }
[data-bd-stagger].in > *:nth-child(3) { transition-delay: 0.25s; }
[data-bd-stagger].in > *:nth-child(4) { transition-delay: 0.35s; }
[data-bd-stagger].in > *:nth-child(5) { transition-delay: 0.45s; }
[data-bd-stagger].in > *:nth-child(6) { transition-delay: 0.55s; }

/* Head — spread 0100: running rule, mono kicker, Helvetica statement */
.th-bd-head {
  max-width: 900px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.th-bd-head .th-section-label {
  color: var(--ink-dim);
  font-family: var(--book-mono);
}
.th-bd-head .th-h2 { color: var(--ink); font-family: var(--book-sans); font-weight: 700; }
.th-bd-head .th-h2 em { font-style: normal; color: var(--ink); background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%); }
.th-bd-lede {
  color: var(--ink-dim); margin-top: 22px;
  font-family: var(--book-mono);
  font-size: 13px; line-height: 1.75; letter-spacing: 0.04em;
  max-width: 560px;
  text-align: justify;
}

/* Section head — book spread: folio + giant Helvetica title between rules */
.th-bd-sec-head {
  display: flex; align-items: baseline; gap: 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-thin);
  padding: 14px 0 16px;
  margin-bottom: clamp(34px, 5vw, 60px);
}
.th-bd-num {
  font-family: var(--book-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--ink);
}
.th-bd-title {
  font-family: var(--book-sans);
  font-size: clamp(34px, 5.2vw, 68px);
  font-weight: 700; letter-spacing: -0.01em; line-height: 0.95;
  color: var(--ink);
  text-transform: uppercase;
}
.th-bd-sec-head::after {
  content: 'THRESHOLD · BRAND BOOK';
  margin-left: auto;
  font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-mute);
  align-self: center;
}

/* 01 — brand */
.th-bd-grid-brand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 90px); align-items: start;
}
.th-bd-text p {
  font-family: var(--book-mono);
  font-size: 13px; line-height: 1.8; letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-align: justify;
  margin-bottom: 18px; max-width: 470px;
}
.th-bd-text em { color: var(--ink); font-style: normal; border-bottom: 2px solid var(--ink); }
.th-bd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.th-bd-chips span {
  font-family: var(--book-mono); font-size: 11px; letter-spacing: 0.22em;
  border: 1px solid var(--ink); padding: 7px 13px; color: var(--ink);
  background: var(--paper);
  transition: all 0.25s var(--ease);
}
.th-bd-chips span:hover { background: var(--ink); color: var(--paper); }
.th-bd-symbols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.th-bd-symbol {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: clamp(14px, 2vw, 24px) clamp(10px, 1.5vw, 18px) 12px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.th-bd-symbol img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.th-bd-symbol figcaption {
  width: 100%;
  font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.26em;
  color: var(--ink);
  border-top: 1px solid var(--rule-thin);
  padding-top: 9px;
  display: flex; justify-content: space-between; align-items: center;
}
.th-bd-symbol figcaption::after {
  content: '';
  width: 9px; height: 9px;
  background: var(--sym);
  border: 1px solid rgba(12,12,12,0.35);
}
.th-bd-symbol:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(12,12,12,0.14); }

/* 02 — graphic language */
.th-bd-grid-logo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.th-bd-grid-logo figure {
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.th-bd-grid-logo img {
  width: 100%; aspect-ratio: 16/10; object-fit: contain; padding: clamp(16px, 3vw, 40px);
}
/* the motion loop stays a black artifact from the world above */
.th-bd-logo-motion video {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  background: #0a0a0a;
}
.th-bd-grid-logo figcaption {
  font-family: var(--book-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule-thin);
  padding: 10px 14px;
}
.th-bd-colors {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 1px solid var(--rule);
  margin-bottom: clamp(26px, 4vw, 44px);
}
.th-bd-swatch {
  background: var(--sw); color: var(--swc);
  border: none;
  border-right: 1px solid var(--rule);
  aspect-ratio: 1 / 1.2;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 12px;
  font-family: var(--book-mono);
  transition: filter 0.25s var(--ease);
}
.th-bd-swatch:last-child { border-right: none; }
.th-bd-swatch b { font-size: 10px; letter-spacing: 0.22em; font-weight: 500; }
.th-bd-swatch span { font-size: 11px; letter-spacing: 0.08em; opacity: 0.85; }
.th-bd-swatch:hover { filter: brightness(1.06); }
.th-bd-swatch.copied span::after { content: ' ✓'; }
.th-bd-type { border: 1px solid var(--rule); background: var(--paper); padding: clamp(20px, 3.5vw, 44px); }
.th-bd-type-row { padding: 20px 0; border-bottom: 1px solid var(--rule-thin); }
.th-bd-type-row:last-of-type { border-bottom: none; }
.th-bd-type-label {
  display: block; font-family: var(--book-mono); font-size: 10px;
  letter-spacing: 0.26em; color: var(--ink-mute); margin-bottom: 12px;
}
.th-bd-type-display {
  font-family: var(--book-sans);
  font-size: clamp(34px, 6vw, 84px); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.02em; color: var(--ink);
  outline: none; caret-color: var(--ink);
}
.th-bd-type-display:focus { background: #fffef2; }
.th-bd-type-body {
  font-family: var(--book-sans);
  font-size: clamp(17px, 2vw, 24px); color: var(--ink-dim); max-width: 640px;
}
.th-bd-type-mono {
  font-family: var(--book-mono);
  font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 0.14em; color: var(--ink);
}
.th-bd-type-hint {
  font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-mute); margin-top: 14px;
}

/* 03 — print & merch */
.th-bd-grid-book { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.th-bd-book { border: 1px solid var(--rule); overflow: hidden; background: #fff; }
.th-bd-book img { width: 100%; transition: transform 0.7s var(--ease); }
.th-bd-book:hover img { transform: scale(1.02); }
.th-bd-merch { overflow: hidden; margin-top: clamp(20px, 3vw, 36px); }
.th-bd-merch-strip {
  display: flex; gap: 12px;
  width: max-content;
  transform: translateX(var(--drift, 0px));
  will-change: transform;
}
.th-bd-merch-strip figure {
  width: clamp(200px, 24vw, 330px);
  border: 1px solid var(--rule); background: #fff;
  flex: none; overflow: hidden;
}
.th-bd-merch-strip img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.th-bd-caption {
  font-family: var(--book-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-dim); margin-top: 14px;
}

/* 04 — in the wild */
.th-bd-billboard { border: 1px solid var(--rule); overflow: hidden; margin-bottom: 12px; }
.th-bd-billboard img { width: 100%; }
.th-bd-grid-wild { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.th-bd-grid-wild figure { border: 1px solid var(--rule); overflow: hidden; }
.th-bd-grid-wild img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.7s var(--ease); }
.th-bd-grid-wild figure:hover img { transform: scale(1.03); }
/* animated poster, in motion under the trio */
.th-bd-poster-motion { margin-top: 14px; }
.th-bd-poster-motion video {
  width: 100%; max-height: 70vh; object-fit: contain;
  border: 1px solid var(--rule); background: #0a0a0a; display: block;
}

/* 05 · the exhibition — real photos, click to open full */
.th-bd-exhibit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.th-bd-exhibit-tile { border: 1px solid var(--rule); overflow: hidden; cursor: zoom-in; position: relative; }
.th-bd-exhibit-tile.th-bd-exhibit-wide { grid-column: span 2; }
.th-bd-exhibit-tile img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 0.7s var(--ease); display: block; }
.th-bd-exhibit-tile:hover img { transform: scale(1.04); }
@media (max-width: 700px) {
  .th-bd-exhibit { grid-template-columns: repeat(2, 1fr); }
  .th-bd-exhibit-tile.th-bd-exhibit-wide { grid-column: span 2; }
}

/* lightbox */
.th-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,6,6,0.94); padding: 4vw;
  cursor: zoom-out; opacity: 0; transition: opacity 0.3s var(--ease);
}
.th-lightbox.open { display: flex; opacity: 1; }
.th-lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; border: 1px solid rgba(244,244,244,0.15); }
.th-lightbox-close {
  position: fixed; top: 20px; right: 24px; z-index: 201;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--fg); background: none; border: 1px solid rgba(244,244,244,0.3);
  padding: 8px 14px; cursor: pointer;
}
.th-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .th-lightbox { transition: none; } }

.th-bd-loops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.th-bd-loops video {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--rule); background: #0a0a0a;
}

/* Credits — colophon */
.th-bd-credits { border-top: 4px solid var(--ink); padding-top: clamp(26px, 4vw, 44px); }
.th-bd-credits dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); }
.th-bd-credits dt {
  font-family: var(--book-mono); font-size: 10px; letter-spacing: 0.26em;
  color: var(--ink-mute); margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-thin); padding-bottom: 6px;
}
.th-bd-credits dd { font-family: var(--book-mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.03em; color: var(--ink); }
.th-bd-next { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.th-bd-next-all {
  font-family: var(--book-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--ink-dim); transition: color 0.25s;
}
.th-bd-next-all:hover { color: var(--ink); }
.th-bd-next-link {
  font-family: var(--book-sans);
  font-size: clamp(20px, 3vw, 34px); font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.th-bd-next-link span { display: inline-block; transition: transform 0.3s var(--ease); }
.th-bd-next-link:hover span { transform: translate(4px, -4px); }

/* Fixed chrome inverts while reading the paper (body.on-paper via page.js) */
body.on-paper .th-nav {
  background: linear-gradient(to bottom, rgba(236,236,234,0.94), rgba(236,236,234,0));
}
body.on-paper .th-nav a { color: #0c0c0c; }
body.on-paper .th-nav .th-nav-sub { color: rgba(12,12,12,0.55); }
body.on-paper .back-chip {
  background: rgba(12,12,12,0.06);
  border-color: rgba(12,12,12,0.25);
  color: #0c0c0c;
}

/* Breakdown — responsive */
@media (max-width: 900px) {
  .th-bd-grid-brand { grid-template-columns: 1fr; }
  .th-bd-colors { grid-template-columns: repeat(5, 1fr); }
  .th-bd-credits dl { grid-template-columns: repeat(2, 1fr); }
  .th-bd-loops { grid-template-columns: repeat(2, 1fr); }
  .th-bd-sec-head::after { display: none; }
}
@media (max-width: 640px) {
  .th-bd-grid-logo, .th-bd-grid-book { grid-template-columns: 1fr; }
  .th-bd-grid-wild { grid-template-columns: 1fr; }
  .th-bd-colors { grid-template-columns: repeat(5, 1fr); }
  .th-bd-swatch b { font-size: 8px; }
  .th-bd-swatch span { font-size: 9px; }
  .th-bd-symbols { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* Breakdown — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .th-bd-divider-track { animation: none; }
  .th-bd-merch-strip { transform: none; }
  [data-bd-reveal], [data-bd-stagger] > * { opacity: 1; transform: none; }
}