/* ===================================================================
   THE INDICTMENT — V1
   Brutalist / editorial legal-document. Black, white, gray. One typeface.
   One motion: redaction. Works fully without JavaScript.
   =================================================================== */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper:      #0b0b0c;   /* the page */
  --paper-sunk: #070708;   /* recessed fields: mounts */
  --ink:        #ededec;   /* primary text */
  --ink-dim:    #8b8b88;   /* labels, kickers */
  --ink-faint:  #5a5a58;   /* annotations, fine print */
  --rule:       #2a2a2b;   /* hairlines */
  --rule-lit:   rgba(237,237,236,0.20); /* lit edges: image, frame */
  --redact:     #000000;   /* redaction ink */

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
          "Liberation Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.4rem, 5.5vw, 4rem);
  --measure: 40rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---- accessibility helpers ---------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -130%);
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.25rem;
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline-offset: -4px;
}

/* ---- static atmosphere -------------------------------------------- */
.chrome { position: fixed; pointer-events: none; z-index: 40; }

.chrome--frame {
  inset: clamp(8px, 1.6vw, 16px);
  border: 1px solid var(--rule);
}
.chrome--vignette {
  inset: 0;
  background: radial-gradient(125% 90% at 50% 38%,
              transparent 52%, rgba(0,0,0,0.62) 100%);
}
.chrome--grain {
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================================================================== */
/*  MASTHEAD                                                            */
/* =================================================================== */
.masthead {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 12vh, 9rem) var(--gutter);
  position: relative;
}

.masthead__caption { width: min(60rem, 100%); }

.hair { height: 1px; background: var(--rule); }

.title {
  margin: clamp(1.4rem, 4.5vh, 2.8rem) 0;
  font-weight: 700;
  font-size: clamp(2.2rem, 12vw, 8.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.subline {
  margin: clamp(1.6rem, 5vh, 2.8rem) 0 0;
  max-width: 30rem;
  font-size: clamp(0.62rem, 1.7vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 2.1;
}

.index {
  margin-top: clamp(2rem, 6.5vh, 3.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.95rem, 2.8vh, 1.5rem);
  max-width: 100%;
}
.index__head {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 2vh, 0.95rem) clamp(1.3rem, 4.5vw, 2.7rem);
}
.index__item {
  font-size: clamp(0.6rem, 1.5vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s linear;
}
.index__item:hover,
.index__item:focus-visible { color: var(--ink); }
.index__num { color: var(--ink); }
.index__sep { margin: 0 0.42em; color: var(--rule); }

/* =================================================================== */
/*  EXHIBITS                                                            */
/* =================================================================== */
.exhibit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6.5vh, 4.5rem) var(--gutter);
}

.mount {
  margin: 0;
  width: min(27rem, 100%);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
}

.well { padding: clamp(1.25rem, 3.5vw, 2.1rem); }

.well__img {
  width: auto;
  max-width: 100%;
  max-height: 56svh;
  margin-inline: auto;
  border: 1px solid var(--rule-lit);
}

.plate {
  border-top: 1px solid var(--rule);
  padding: clamp(1rem, 3.6vw, 1.6rem) clamp(1.1rem, 4.2vw, 1.9rem)
           clamp(1.1rem, 3.8vw, 1.7rem);
}

.plate__kicker {
  margin: 0;
  font-size: clamp(0.6rem, 1.6vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.65;
}
.plate__dot { margin: 0 0.34em; color: var(--rule); }
.plate__name { color: var(--ink); }

.plate__finding {
  margin: clamp(0.8rem, 2.6vw, 1.1rem) 0 0;
  font-size: clamp(1rem, 2.7vw, 1.32rem);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}

.plate__annot {
  margin: clamp(0.85rem, 2.6vw, 1.15rem) 0 0;
  padding-top: clamp(0.7rem, 2.2vw, 0.95rem);
  border-top: 1px solid var(--rule);
  font-size: clamp(0.62rem, 1.5vw, 0.71rem);
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

/* =================================================================== */
/*  STATEMENT — the charge                                              */
/* =================================================================== */
.statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter);
}

.statement__lead {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.statement__lead:first-of-type { color: var(--ink); }

.findings {
  margin-top: clamp(2rem, 7vh, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3.4vh, 1.9rem);
}

.finding {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  font-size: clamp(1.35rem, 5.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* redaction: drawn only when JS confirms motion is wanted (.is-redacted
   on <html>). Without it, the text simply shows. */
.is-redacted .finding::after {
  content: "";
  position: absolute;
  left: -0.28em; right: -0.28em; top: -0.1em; bottom: -0.04em;
  background: var(--redact);
  box-shadow: inset 0 0 0 1px rgba(237,237,236,0.16);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.62s cubic-bezier(0.66, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.13s);
}
.is-redacted .finding.revealed::after { clip-path: inset(0 0 0 100%); }

/* =================================================================== */
/*  VERDICT                                                             */
/* =================================================================== */
.verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 9vh, 6.5rem) var(--gutter) clamp(1.75rem, 4.5vh, 2.75rem);
}

.verdict__word {
  margin: 0;
  font-weight: 700;
  font-size: clamp(5rem, 27vw, 19rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* =================================================================== */
/*  RESOURCES                                                           */
/* =================================================================== */
.resources {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(1.25rem, 3.5vh, 2.25rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

.resources__kicker {
  margin: 0 0 clamp(1.4rem, 4vh, 2.2rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(0.6rem, 1.6vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.resources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(0.72rem, 1.9vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper-sunk);
  transition: background-color 0.14s linear, color 0.14s linear,
              border-color 0.14s linear;
}
.res__mark { font-size: 1.1em; color: var(--ink-dim); transition: color 0.14s linear; }

.res:hover,
.res:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.res:hover .res__mark,
.res:focus-visible .res__mark { color: var(--paper); }
.res:focus-visible { outline-offset: -5px; }

/* =================================================================== */
/*  FOOTER                                                              */
/* =================================================================== */
.footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(4rem, 12vh, 7rem);
  border-top: 1px solid var(--rule);
}

.footer__note {
  margin: 0;
  font-size: clamp(0.66rem, 1.6vw, 0.76rem);
  line-height: 1.85;
  color: var(--ink-faint);
}

.footer__colophon {
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer__dot { color: var(--rule); }

/* =================================================================== */
/*  MOTION                                                              */
/* =================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* redaction is suppressed by script.js; text shows revealed. */
}