/* renai.party — forensic graffiti dossier
   palette: ethereal-blue · typography: mono · layout: full-bleed
   motion: slide-reveal (only) · imagery: data-viz · motif: candle-atmospheric
*/

:root {
  --c-substrate: #0a0e1a;
  --c-wall: #141b2d;
  --c-ink: #5d7ea8;
  --c-cyan: #9ec5d8;
  --c-vapor: #cfe5ed;
  --c-paper: #f4f7fa;
  --c-flame: #e87a4c;

  --f-body: "JetBrains Mono", ui-monospace, monospace;
  --f-display: "Space Mono", ui-monospace, monospace;
  --f-graffiti: "Rubik Mono One", "Space Mono", monospace;
  --f-hand: "Caveat", cursive;

  --tilt: 0deg;
  --ease-slat: cubic-bezier(0.16, 1.0, 0.3, 1.0);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
html { background: var(--c-substrate); scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: 0.92rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--c-vapor);
  background: var(--c-substrate);
  position: relative;
  min-height: 100vh;
}

.defs-only { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Substrate — fixed dot-matrix */
.substrate {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.substrate svg { width: 100%; height: 100%; }

/* Conduit pipes */
.conduit {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.conduit-line {
  position: absolute;
  background: linear-gradient(180deg, transparent, rgba(93,126,168,0.18) 12%, rgba(93,126,168,0.18) 88%, transparent);
  width: 1px;
}
.conduit-1 { left: 8vw; top: 0; bottom: 0; }
.conduit-2 { left: 50vw; top: 0; bottom: 0; }
.conduit-3 { right: 14vw; top: 0; bottom: 0; }

/* WAREHOUSE WALL — main layout shell */
.warehouse-wall {
  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: none;
  padding-inline: 0;
  margin: 0;
}

/* All sections: full-bleed */
.warehouse-wall > * {
  width: 100vw;
  max-width: none;
  padding-inline: 0;
  margin: 0;
  position: relative;
}

/* =====================================================================
   HEADER BEAM
   ===================================================================== */
.beam {
  height: 38vh;
  min-height: 320px;
  background:
    linear-gradient(180deg, var(--c-substrate) 0%, #060a14 56%, var(--c-substrate) 100%);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto auto;
  overflow: hidden;
}

.beam-rail {
  position: absolute;
  left: 0; right: 0;
  top: 38%;
  height: 14px;
  background:
    linear-gradient(180deg, #20283c 0%, #0a0f1a 48%, #1a2238 100%);
  box-shadow:
    0 -1px 0 rgba(159,205,229,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 16px 22px rgba(0,0,0,0.55);
}
.beam-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(159,205,229,0.06) 78px 80px);
}

/* Tea-lights */
.tealights {
  position: absolute;
  top: calc(38% - 22px);
  left: 0;
  right: 0;
  height: 24px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.tealight {
  position: relative;
  width: 18px;
  height: 16px;
  background: linear-gradient(180deg, #2a2018 0%, #161116 100%);
  border-radius: 1px 1px 0 0;
  box-shadow: 0 -1px 0 rgba(232,122,76,0.18);
}
.tealight .flame {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 7px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 80%, #ffd5b3 0%, var(--c-flame) 38%, rgba(232,122,76,0) 76%);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  filter: blur(0.4px);
  box-shadow:
    0 0 18px var(--c-flame),
    0 0 36px rgba(232,122,76,0.55),
    0 0 64px rgba(232,122,76,0.22);
  transform-origin: bottom center;
}
.tealight.t1 .flame { animation: flicker-a 1.7s ease-in-out infinite; }
.tealight.t2 .flame { animation: flicker-b 2.3s ease-in-out infinite; }
.tealight.t3 .flame { animation: flicker-c 1.9s ease-in-out infinite; }
.tealight.t4 .flame { animation: flicker-a 2.1s ease-in-out infinite reverse; }
.tealight.t5 .flame { animation: flicker-b 1.3s ease-in-out infinite; }
.tealight.t6 .flame { animation: flicker-c 2.7s ease-in-out infinite reverse; }

@keyframes flicker-a {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: 1; }
  20% { transform: translateX(-50%) scale(0.94, 1.06); opacity: 0.88; }
  44% { transform: translateX(-52%) scale(1.06, 0.94); opacity: 1; }
  72% { transform: translateX(-49%) scale(0.98, 1.04); opacity: 0.94; }
}
@keyframes flicker-b {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: 0.96; }
  30% { transform: translateX(-48%) scale(1.04, 0.96); opacity: 1; }
  60% { transform: translateX(-51%) scale(0.92, 1.08); opacity: 0.84; }
  82% { transform: translateX(-50%) scale(1.02, 1.0); opacity: 0.98; }
}
@keyframes flicker-c {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: 1; }
  18% { transform: translateX(-51%) scale(1.02, 1.02); opacity: 0.92; }
  46% { transform: translateX(-50%) scale(0.96, 1.04); opacity: 1; }
  78% { transform: translateX(-49%) scale(1.04, 0.96); opacity: 0.88; }
}

/* Wordmark */
.wordmark {
  grid-column: 1 / span 9;
  grid-row: 3;
  width: 100%;
  height: clamp(110px, 18vh, 200px);
  margin-top: auto;
  margin-left: 0;
  overflow: visible;
}
.wordmark-text {
  font-family: var(--f-graffiti);
  font-size: 168px;
  fill: var(--c-cyan);
  letter-spacing: -0.02em;
  paint-order: stroke;
  stroke: rgba(159,205,229,0.18);
  stroke-width: 0.5;
}
.wordmark-ghost {
  font-family: var(--f-graffiti);
  font-size: 168px;
  fill: none;
  stroke: rgba(159,205,229,0.18);
  stroke-width: 1;
  letter-spacing: -0.02em;
  transform: translate(6px, 4px);
  mix-blend-mode: screen;
}

/* Beam meta */
.beam-meta {
  grid-column: 9 / span 4;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  padding: 0 4vw 2vh 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
  position: relative;
}
.beam-meta > * {
  font-family: var(--f-body);
  font-size: 0.82rem;
  color: var(--c-vapor);
  letter-spacing: 0.06em;
}
.case-no { color: var(--c-cyan); }
.case-classification { color: var(--c-vapor); opacity: 0.8; }
.redacted-stamp {
  display: inline-block;
  margin-top: 0.6rem;
  margin-left: auto;
  padding: 0.18rem 0.55rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--c-flame);
  border: 1.5px solid var(--c-flame);
  letter-spacing: 0.18em;
  transform: rotate(-3deg);
  text-shadow: 0 0 12px rgba(232,122,76,0.5);
}

.beam-strapline {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  padding: 0 0 0 4vw;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.strap-bracket { color: var(--c-cyan); margin: 0 0.4em; }

/* =====================================================================
   COMMON EXHIBIT SHELL
   ===================================================================== */
.exhibit, .heatmap-floor, .candle-spectrogram {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  background: var(--c-substrate);
  padding-block: 6vh;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.exhibit-label {
  grid-column: 1 / span 4;
  grid-row: 1;
  padding: 1.5rem 2vw 0 4vw;
  --tilt: -1.4deg;
}
.exhibit-label--right {
  grid-column: 9 / span 4;
  padding: 1.5rem 4vw 0 2vw;
  text-align: right;
  --tilt: 1.6deg;
}
.exhibit-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--c-ink);
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--c-ink);
}
.exhibit-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 3.6rem);
  letter-spacing: 0.06em;
  color: var(--c-paper);
  text-transform: uppercase;
  margin-top: 0.5rem;
  line-height: 1;
}
.exhibit-sub {
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--c-vapor);
  letter-spacing: 0.02em;
  margin-top: 0.4rem;
  max-width: 38ch;
}
.exhibit-label--right .exhibit-sub { margin-left: auto; }
.exhibit-meta {
  font-family: var(--f-body);
  font-size: 0.74rem;
  color: var(--c-cyan);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
}

/* Charts */
.chart {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100vw;
  max-width: none;
  height: clamp(360px, 56vh, 720px);
  display: block;
  background: var(--c-wall);
}
.exhibit--A .chart, .exhibit--B .chart, .candle-spectrogram .chart {
  margin-top: 1.5rem;
}

.chart .axis line { stroke: var(--c-ink); stroke-width: 1; opacity: 0.6; }
.chart .axis-ticks-x text,
.chart .axis-ticks-y text {
  font-family: var(--f-body);
  font-size: 11px;
  fill: var(--c-cyan);
  letter-spacing: 0.06em;
}
.chart .axis-ticks-x line,
.chart .axis-ticks-y line {
  stroke: var(--c-ink);
  stroke-width: 1;
  opacity: 0.5;
}
.chart .gridlines line {
  stroke: var(--c-ink);
  stroke-width: 0.5;
  opacity: 0.18;
  vector-effect: non-scaling-stroke;
}
.chart .chart-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  fill: var(--c-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chart .chart-title--inv { fill: var(--c-paper); }
.chart .chart-foot {
  font-family: var(--f-body);
  font-size: 10px;
  fill: var(--c-ink);
  letter-spacing: 0.08em;
}
.chart .chart-anno,
.chart .hand-anno {
  font-family: var(--f-hand);
  font-size: 22px;
  fill: var(--c-cyan);
}

.chart .series {
  vector-effect: non-scaling-stroke;
  stroke: var(--c-ink);
  stroke-width: 2;
}
.chart .series--main { stroke: var(--c-cyan); stroke-width: 2.4; }
.chart .series--regression { stroke: var(--c-cyan); stroke-width: 1.4; opacity: 0.8; }
.chart .series--waveform { stroke: var(--c-cyan); stroke-width: 1.6; }
.chart .series--envelope-top, .chart .series--envelope-bot {
  stroke: var(--c-ink);
  stroke-width: 1;
  opacity: 0.6;
}
.chart .datapoints circle {
  fill: var(--c-wall);
  stroke: var(--c-cyan);
  stroke-width: 1.6;
}
.chart .scatter-points circle {
  fill: var(--c-ink);
  fill-opacity: 0.7;
  stroke: var(--c-cyan);
  stroke-width: 0.6;
}
.chart .scatter-points circle.flame {
  fill: var(--c-flame);
  stroke: #ffd5b3;
  filter: drop-shadow(0 0 6px rgba(232,122,76,0.7));
}
.chart .dawn-line {
  stroke: var(--c-flame);
  stroke-width: 1.4;
  opacity: 0.85;
}

/* Graffiti tags wrapper (overlays) */
.graffiti-tags { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute;
  width: clamp(180px, 22vw, 380px);
  height: auto;
  pointer-events: none;
}
.tag-text {
  font-family: var(--f-graffiti);
  font-size: 64px;
  fill: var(--c-cyan);
  letter-spacing: 0.02em;
  mix-blend-mode: screen;
}
.tag-text--alt { fill: var(--c-flame); }
.tag-text--lg { font-size: 84px; }
.tag-text--xl { font-size: 110px; }
.tag-text--stamp { fill: var(--c-flame); letter-spacing: 0.12em; }

.tag--pos1 { top: 28%; left: 12vw; transform: rotate(-4deg); width: 18vw; }
.tag--pos2 { top: 56%; right: 18vw; transform: rotate(2deg); width: 14vw; }
.tag--pos3 { top: 12%; right: 6vw; transform: rotate(-6deg); width: 22vw; }
.tag--B1   { top: 14%; left: 6vw; transform: rotate(-3deg); width: 26vw; }
.tag--heat { top: 64%; right: 4vw; transform: rotate(-4deg); width: 26vw; }
.tag--spectro { top: 12%; right: 4vw; transform: rotate(-3deg); width: 28vw; }

/* Hand annotations */
.hand {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--f-hand);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  color: var(--c-cyan);
}
.hand svg { width: clamp(120px, 14vw, 220px); height: auto; display: block; }
.hand-label { padding-left: 0.4rem; white-space: nowrap; }
.hand--A1 { top: 30%; left: 28vw; transform: rotate(-2deg); }
.hand--A2 { top: 62%; left: 44vw; transform: rotate(1.5deg); }
.hand--B1 { top: 48%; left: 36vw; transform: rotate(-1deg); }
.hand--spectro { top: 22%; left: 20vw; transform: rotate(-1deg); }

/* Captions */
.case-caption {
  grid-column: 1 / span 5;
  grid-row: 3;
  padding: 1.4rem 2vw 0 4vw;
  font-size: 0.86rem;
  color: var(--c-vapor);
  border-left: 2px solid var(--c-cyan);
  margin-top: 1.4rem;
  max-width: 56ch;
  --tilt: -0.6deg;
}
.case-caption--right {
  grid-column: 8 / span 5;
  padding: 1.4rem 4vw 0 2vw;
  border-left: none;
  border-right: 2px solid var(--c-cyan);
  text-align: right;
  --tilt: 0.8deg;
}
.case-caption--left {
  grid-column: 1 / span 5;
  padding: 1.4rem 2vw 0 4vw;
}

/* =====================================================================
   POLAROID (Exhibit B)
   ===================================================================== */
.polaroid {
  position: absolute;
  bottom: 8%;
  right: 6vw;
  width: clamp(190px, 18vw, 280px);
  --tilt: 3deg;
  z-index: 4;
}
.polaroid-frame {
  background: var(--c-paper);
  padding: 12px 12px 56px 12px;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px) saturate(1.4);
}
.polaroid-image { aspect-ratio: 1; overflow: hidden; }
.polaroid-image svg { width: 100%; height: 100%; display: block; }
.polaroid-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  font-family: var(--f-hand);
  font-size: 1.1rem;
  color: #1a2236;
  text-align: center;
}
.tape {
  position: absolute;
  background: rgba(207,229,237,0.4);
  width: 64px;
  height: 18px;
  backdrop-filter: blur(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.tape--tl { top: -10px; left: -14px; transform: rotate(-12deg); }
.tape--br { bottom: 40px; right: -14px; transform: rotate(8deg); }

/* =====================================================================
   DOSSIER ROLL
   ===================================================================== */
.dossier-roll {
  background: linear-gradient(180deg, var(--c-substrate) 0%, #060a13 100%);
  padding-block: 6vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.roll-header {
  grid-column: 1 / span 6;
  padding: 0 2vw 2vh 4vw;
  --tilt: -1deg;
}
.roll-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--c-ink);
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--c-ink);
}
.roll-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 3.6rem);
  letter-spacing: 0.06em;
  color: var(--c-paper);
  text-transform: uppercase;
  margin-top: 0.5rem;
  line-height: 1;
}
.roll-sub {
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--c-vapor);
  margin-top: 0.4rem;
}
.dossier-cards {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 2rem;
}

.dossier-card {
  width: 100vw;
  height: 52vh;
  min-height: 320px;
  background: var(--c-wall);
  border-top: 1px solid rgba(159,205,229,0.18);
  border-bottom: 1px solid rgba(159,205,229,0.18);
  display: grid;
  grid-template-columns: 18vw 1fr 22vw 18vw;
  grid-template-rows: auto 1fr auto;
  gap: 0 2vw;
  padding: 2vh 4vw;
  position: relative;
  overflow: hidden;
}
.dossier-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(159,205,229,0.04) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(159,205,229,0.04) 23px 24px);
  pointer-events: none;
}

.dossier-card .doss-no {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-cyan);
  letter-spacing: 0.12em;
}
.dossier-card .doss-name {
  grid-column: 2 / span 2;
  grid-row: 1;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  text-transform: uppercase;
}
.dossier-card .doss-name .redact {
  background: var(--c-flame);
  color: var(--c-flame);
  padding: 0 0.4em;
  letter-spacing: 0;
  user-select: none;
  text-shadow: 0 0 14px rgba(232,122,76,0.6);
}
.dossier-card .doss-class {
  grid-column: 4;
  grid-row: 1;
  text-align: right;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--c-ink);
}

.dossier-card .doss-plate {
  grid-column: 1;
  grid-row: 2;
  background: var(--c-substrate);
  border: 1px solid rgba(159,205,229,0.2);
  position: relative;
  overflow: hidden;
}
.dossier-card .doss-plate svg { width: 100%; height: 100%; display: block; }

.dossier-card .doss-log {
  grid-column: 2 / span 2;
  grid-row: 2;
  padding-top: 1rem;
  font-size: 0.84rem;
  color: var(--c-vapor);
}
.dossier-card .doss-log li {
  list-style: none;
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 1.2rem;
  padding: 0.18rem 0;
  border-bottom: 1px dashed rgba(159,205,229,0.12);
}
.dossier-card .doss-log .k { color: var(--c-cyan); letter-spacing: 0.06em; }

.dossier-card .doss-iso {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}
.dossier-card .doss-iso svg {
  width: 100%;
  height: auto;
  display: block;
}
.dossier-card .iso-row {
  display: grid;
  grid-template-columns: 28px 1fr 64px;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--c-vapor);
}
.dossier-card .iso-row .iso-bar {
  height: 4px;
  background: rgba(93,126,168,0.3);
  position: relative;
}
.dossier-card .iso-row .iso-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-cyan);
  transform-origin: left;
  transform: scaleX(var(--v, 0.4));
}
.dossier-card .iso-row .iso-val { font-family: var(--f-body); color: var(--c-cyan); text-align: right; font-size: 0.72rem; }

.dossier-card .doss-footnote {
  grid-column: 1 / -1;
  grid-row: 3;
  font-family: var(--f-hand);
  font-size: 1.1rem;
  color: var(--c-cyan);
  padding-top: 1rem;
}

.dossier-card .doss-tag {
  position: absolute;
  top: -10px;
  right: 6vw;
  font-family: var(--f-graffiti);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  color: var(--c-cyan);
  opacity: 0.18;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* =====================================================================
   HEATMAP
   ===================================================================== */
.heatmap-floor .chart--heatmap {
  height: clamp(420px, 70vh, 820px);
}
.heat-cells rect {
  stroke: rgba(159,205,229,0.06);
  stroke-width: 0.5;
}

/* =====================================================================
   EVIDENCE TAG FOOTER
   ===================================================================== */
.evidence-tag {
  background: linear-gradient(180deg, #060a13 0%, var(--c-substrate) 100%);
  padding: 5vh 0 6vh 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2vh 0;
  position: relative;
  overflow: hidden;
}
.evid-grid {
  grid-column: 1 / span 8;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0 0 0 4vw;
  border-top: 1px solid var(--c-cyan);
  border-bottom: 1px solid var(--c-cyan);
}
.evid-block {
  padding: 1rem 1.2rem;
  border-right: 1px solid rgba(159,205,229,0.2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.evid-block:last-child { border-right: none; }
.evid-key {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.evid-val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-paper);
  letter-spacing: 0.04em;
}
.evid-stamp {
  grid-column: 7 / span 6;
  grid-row: 2;
  width: 100%;
  height: clamp(140px, 22vh, 240px);
  --tilt: -3deg;
}
.evid-fineprint {
  grid-column: 1 / span 12;
  grid-row: 3;
  padding: 1rem 4vw 0 4vw;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--c-ink);
  text-transform: uppercase;
  border-top: 1px dashed rgba(159,205,229,0.18);
  text-align: center;
}

/* =====================================================================
   SLIDE-REVEAL MOTION
   The only motion grammar. All directions slide horizontally except where noted.
   ===================================================================== */
[data-slide] {
  opacity: 1;
  transition:
    transform 880ms var(--ease-slat) calc(var(--idx, 0) * 120ms);
  will-change: transform;
}
[data-slide="left"]  { transform: translateX(-110%) rotate(var(--tilt, 0deg)); }
[data-slide="right"] { transform: translateX(110%)  rotate(var(--tilt, 0deg)); }
[data-slide="up"]    { transform: translateY(40%)   rotate(var(--tilt, 0deg)); }
[data-slide="down"]  { transform: translateY(-30%)  rotate(var(--tilt, 0deg)); }

[data-slide].is-revealed {
  transform: translate(0,0) rotate(var(--tilt, 0deg));
}

/* Dossier cards each slide from alternating sides */
.dossier-card[data-slide-dir="left"]  { transform: translateX(-110%) rotate(var(--tilt, -1.4deg)); }
.dossier-card[data-slide-dir="right"] { transform: translateX(110%)  rotate(var(--tilt, 1.4deg)); }
.dossier-card {
  transition: transform 940ms var(--ease-slat);
  will-change: transform;
}
.dossier-card.is-revealed { transform: translateX(0) rotate(var(--tilt, 0deg)); }

/* Charts slide in too */
.chart {
  transform: translateX(-6%) rotate(0deg);
  opacity: 0.001;
  transition: transform 1100ms var(--ease-slat), opacity 600ms ease;
}
.chart.is-revealed { transform: translateX(0); opacity: 1; }

/* Polaroid tilt preserved */
.polaroid[data-slide].is-revealed { transform: translateX(0) rotate(3deg); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px) {
  .beam { height: auto; min-height: 280px; padding-bottom: 3vh; }
  .wordmark { grid-column: 1 / -1; grid-row: 3; }
  .beam-meta { grid-column: 1 / -1; grid-row: 4; text-align: left; justify-self: start; padding: 1rem 4vw 0 4vw; }
  .redacted-stamp { margin-left: 0; }

  .exhibit, .heatmap-floor, .candle-spectrogram {
    grid-template-rows: auto auto auto auto;
  }
  .exhibit-label, .exhibit-label--right {
    grid-column: 1 / -1;
    text-align: left;
    padding: 1rem 4vw;
  }
  .case-caption, .case-caption--right, .case-caption--left {
    grid-column: 1 / -1;
    padding: 1rem 4vw;
    border-left: 2px solid var(--c-cyan);
    border-right: none;
    text-align: left;
    max-width: none;
  }

  .dossier-card {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 3vh 6vw;
  }
  .dossier-card .doss-no { grid-column: 1; grid-row: 1; }
  .dossier-card .doss-name { grid-column: 1 / -1; grid-row: 2; }
  .dossier-card .doss-class { grid-column: 2; grid-row: 1; }
  .dossier-card .doss-plate { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 16/9; }
  .dossier-card .doss-log { grid-column: 1 / -1; grid-row: 4; }
  .dossier-card .doss-iso { grid-column: 1 / -1; grid-row: 5; }
  .dossier-card .doss-footnote { grid-column: 1 / -1; grid-row: 6; }

  .polaroid { right: 4vw; bottom: 4%; width: 40vw; }
  .hand { display: none; }
  .tag-text { font-size: 42px; }
  .tag-text--lg { font-size: 56px; }
  .tag-text--xl { font-size: 72px; }

  .evid-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
  .evid-block:nth-child(2n) { border-right: none; }
  .evid-stamp { grid-column: 1 / -1; }
}