/* =============================================================================
   AUTHENTICITY CRISIS — visual system
   -----------------------------------------------------------------------------
   One stylesheet for the whole archive. It replaces the per-page <style> blocks
   so that every page is demonstrably the same document, and so that a returning
   reader downloads it once.

   DESIGN THESIS

   This site is a paper of record for a concept, not a product page. So it is
   built from the vernacular of the thing it studies: provenance manifests,
   evidence labels, case files, citation blocks. Three devices carry that:

     1. THE RECORD PLATE    a bordered block with a monospace header strip.
                            Used for the definition, the abstract, references,
                            citations. It makes a claim look like an entry in
                            a register, because that is what it is.
     2. THE FORENSIC LAYER  monospace, letter-spaced, small. Every id, date,
                            source, tag and section number lives in this layer.
                            Prose lives in the reading layer. The two never mix.
     3. THE PROVENANCE MARK a warm seal colour for anything human-origin and
                            attributable; a cold signal colour for anything
                            synthetic or unverified. The palette states the
                            site's argument instead of decorating it.

   No external requests. No web fonts, no icon sets, no third-party CSS. The
   About page promises a site with no opaque dependencies, and a stylesheet
   that phoned home would contradict it.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* The room. Black, because a dark grey is a lit room with the lamp off and
     black is a room with no lamp in it. */
  --void:        #000000;
  --ash:         #060709;
  --slate:       #0B0D10;   /* the only raised surface, barely raised */
  --slate-2:     #101318;
  --graphite:    #1B1F26;   /* hairlines */
  --graphite-2:  #2B313A;

  /* What a human wrote. */
  --ink:         #EDEBE6;
  --ink-2:       #B4B9C1;
  --mute:        #7B818B;
  --faint:       #555B65;

  /* What a machine made, or what cannot be verified. */
  --signal:      #7FD0E6;
  --signal-soft: rgba(127,208,230,.10);
  --signal-line: rgba(127,208,230,.34);

  /* What has already been lost. Used six times on the whole site. */
  --alarm:       #FF3B30;
  --alarm-soft:  rgba(255,59,48,.10);
  --alarm-line:  rgba(255,59,48,.40);

  /* Structural marks: rules, borders, focus. Cold and neutral, so that the
     two coloured notes above keep all of their force. */
  --seal:        #C3C9D2;
  --seal-soft:   rgba(195,201,210,.07);
  --seal-line:   rgba(195,201,210,.26);

  /* THE VOICE OF THE PAGE.

     Heavy condensed sans for anything that has to hit: the title, the three
     losses, the sums. Set in capitals, tight, at sizes that leave no room for
     comfort. It is the typography of a hazard notice, not of a journal.

     The serif survives in exactly one place, the formal definition, because
     after the shouting the reader needs one calm, precise, quotable object.
     That contrast is the point; using either face everywhere would waste it. */
  --display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --formal: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --shell: 1020px;
  --measure: 68ch;
  --rail: 216px;
  --gap: 48px;
  --radius: 2px;

  --bar-h: 58px;
  --head-h: 92px;
}

/* ------------------------------------------------------------- 2. baseline */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  /* The gutter is always reserved, so a short page and a long page put the
     fixed bar in exactly the same place. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 24px);
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  /* The ground is painted on the root element. If the body paints it too, the
     fixed layers behind the content (the watcher, the ambient ground) sit
     under it and never appear. */
  background: transparent;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* The ambient ground. The photograph used to sit here, full bleed, with the
   text laid straight on top of it: unreadable at the edges and impossible to
   compose against. It now appears once, framed and labelled, on the home page.
   What is left here is atmosphere only, drawn in CSS, so it costs no request
   and never competes with a paragraph. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 72% -14%, rgba(127,208,230,.07), transparent 58%),
    var(--void);
}
/* A single hairline grid, barely visible, so the dark field has a surface
   instead of being a void. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 70%);
}

/* Base for every anchor on the site, before any component touches it. */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--graphite-2);
  transition: color .16s ease, border-color .16s ease;
}
a:hover { color: var(--alarm); border-color: var(--alarm-line); }
a:visited { color: inherit; }

/* Structural links carry no rule under them. */
.nav-links a, .footer-nav a, .wordmark, .skip-link, .back, .hero-actions a,
.ledger-row, .toc a, .incident-toc a, .lib-toc a, .signal-toc a, .essay-toc a, .explore-grid a, .ref-title a,
.status-inner .dot { border-bottom: 0; }

/* Base for every anchor on the site, before any component touches it. */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--graphite-2);
  transition: color .16s ease, border-color .16s ease;
}
a:hover { color: var(--alarm); border-color: var(--alarm-line); }
a:visited { color: inherit; }

/* Structural links carry no rule under them. */
.nav-links a, .footer-nav a, .wordmark, .skip-link, .back, .hero-actions a,
.ledger-row, .toc a, .incident-toc a, .lib-toc a, .explore-grid a, .ref-title a,
.status-inner .dot { border-bottom: 0; }

::selection { background: var(--alarm); color: #FFFFFF; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Odnosnik pomijania nawigacji. Wzorzec z wypychaniem na minus dziewiec
   tysiecy pikseli dziala, ale tworzy element o wspolrzednych daleko poza
   dokumentem, co niektore czytniki ekranu obsluguja gorzej, a przy okazji
   wymaga ukrywania przepelnienia w poziomie. Przesuniecie transformacja nie
   ma tych wad: element zostaje na swoim miejscu i tylko zjezdza nad krawedz. */
.skip-link {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--alarm);
  color: #FFFFFF;
  font: 600 .85rem/1 var(--body);
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(-130%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------------ 3. bar */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: rgba(11,13,16,.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--graphite);
}

/* The wordmark. A site that wants its name to become the name of a concept
   has to put that name in front of the reader on every page, not only on the
   home page. The dot is the seal mark: present, small, deliberate. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* The recording indicator. It is the only red on most pages, and it is the
   first thing a reader sees. */
.wordmark::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--alarm);
  box-shadow: 0 0 0 3px var(--alarm-soft);
  transform: translateY(-1px);
  animation: rec 3.4s ease-in-out infinite;
}
@keyframes rec {
  0%, 42%, 100% { opacity: 1; }
  50%, 92%      { opacity: .25; }
}
.wordmark:hover { color: #fff; }
.wordmark em {
  font-family: var(--mono);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 7px 10px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color .16s ease, background-color .16s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: var(--alarm);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  padding: 9px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink-2);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle span + span { margin-top: 4.5px; }

@media (max-width: 860px) {
  .menu-toggle { display: block; }

  /* Filtr tla na pasku tworzy uklad odniesienia dla potomkow z position: fixed,
     przez co pelnoekranowe menu przyklejalo sie do paska zamiast do okna.
     Na czas otwarcia filtr znika, bo plansza menu i tak zaslania cala szerokosc
     i nikt tej szklanki wtedy nie oglada. */
  .site-nav:has(.nav-links.open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links {
    position: fixed;
    inset: 0;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding-inline: clamp(24px, 8vw, 64px);
    background: rgba(11,13,16,.985);
    /* Wlasna warstwa. Bez niej menu bylo malowane w kolejnosci dokumentu
       i tresc strony kladla sie na nim. */
    z-index: 205;
    /* Zapas na wypadek, gdyby pozycji kiedys przybylo albo ktos powiekszyl
       tekst w systemie. Lepiej przewijac niz chowac. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 96px;
    padding-bottom: 32px;
    opacity: 0;
    visibility: hidden;
  }
  html:has(.nav-links.open), body:has(.nav-links.open) {
    overflow: hidden;
    /* Widocznosc przelacza sie skokowo, wiec w przejsciu dostaje zerowy czas
       i opoznienie rowne czasowi zanikania. Przy otwieraniu element staje sie
       widoczny natychmiast, dzieki czemu skrypt moze od razu ustawic na nim
       ognisko klawiatury; przy zamykaniu znika dopiero po wygaszeniu.
       Wczesniej widocznosc byla animowana razem z kryciem i zmieniala sie w
       polowie animacji, a wtedy pierwszy odnosnik menu byl jeszcze niewidoczny
       i nie przyjmowal ogniska. Osoba poruszajaca sie klawiatura otwierala menu
       i zostawala na przycisku. */
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility 0s linear 0s;
  }
  .nav-links a {
    font-family: var(--display);
    /* Bylo 1.5rem. Przy osmiu pozycjach i kroju Arial Black na ekranie
       szerokim na 390 pikseli to bylo za duzo i wygladalo jak usterka. */
    font-size: 1.12rem;
    letter-spacing: .01em;
    color: var(--ink-2);
    padding: 9px 0;
    width: 100%;
  }
  .nav-links a[aria-current="page"]::after { width: 2ch; }
  .menu-toggle[aria-expanded="true"] { position: relative; z-index: 210; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --------------------------------------------------------------- 4. layout */

/* The home page opens with a status band flush under the bar, so it carries no
   extra top padding of its own. */
.wrap.wrap--home { padding-top: 0; }

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--head-h) + 48px) clamp(18px, 4vw, 28px) 0;
}

/* Back to the index. Reads as a breadcrumb, not as a button. */
.back {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  transition: color .16s ease;
}
.back::before { content: "\2190"; }
.back:hover { color: var(--seal); }

/* ------------------------------------------------------------------ 5. hero */

/* Titles on every page except the home page. */
.wrap > .hero h1, .wrap > .report-hero h1 {
  font-family: var(--formal);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  line-height: 1.03;
  letter-spacing: -.022em;
  text-transform: none;
}

.wrap > .hero, .wrap > .report-hero {
  position: relative;
  min-height: 42svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: -56px calc(-50vw + 50%) 54px;
  padding: 56px clamp(18px, 4vw, 28px) 34px calc(50vw - 50% );
  border-bottom: 1px solid var(--graphite);
  background:
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.45) 88%, rgba(0,0,0,.85) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.93) 42%,
      rgba(0,0,0,.62) 68%,
      rgba(0,0,0,.12) 88%,
      transparent 100%);
}
/* The plate has to reach past the reading column, not stop at it. */
@media (min-width: 1100px) {
  .wrap > .hero, .wrap > .report-hero {
    padding-right: calc(50vw - 50% - 120px);
  }
}
.wrap > .hero > *, .wrap > .report-hero > * { max-width: var(--measure); }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.tagline, .report-subtitle {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.6;
  color: var(--mute);
}

/* The eyebrow above a page title. Says what kind of document this is before
   it says what it is about, the way a standard or a case file does. */
.doc-kind {
  display: block;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--seal);
}

/* ---------------------------------------------------------- 6. the watcher

   SHE DOES NOT GO AWAY.

   In the first pass the photograph was an element on the first screen: you
   scrolled, it left, you read a page about deepfakes. That is the difference
   between an illustration and a presence.

   The photograph is now fixed behind the entire document. It fills the first
   screen at full strength, recedes into the dark as the reader goes down, and
   comes back up behind the last screen. Nothing is hidden by it: every layer
   of scrim sits between the image and the text, never over the text.

   The effect is not a trick. It is the argument stated in the layout: the
   thing you cannot verify is still there when you stop looking at it.
   ========================================================================== */

.watcher {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
.watcher img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 18%;
  filter: saturate(.5) contrast(1.16) brightness(.92);
  transform-origin: 58% 26%;
  animation: breath 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes breath {
  from { transform: scale(1.02); }
  to   { transform: scale(1.075); }
}

/* Scrims. Horizontal first so the words always land on black, then vertical
   so the header and the foot of the screen close down. */
.watcher::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.985) 0%,
      rgba(0,0,0,.92) 22%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,.16) 60%,
      rgba(0,0,0,.14) 78%,
      rgba(0,0,0,.68) 100%),
    radial-gradient(135% 105% at 62% 26%, transparent 30%, rgba(0,0,0,.9) 100%);
}
.watcher::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 15%, transparent 38%,
                    rgba(0,0,0,.72) 72%, rgba(0,0,0,.97) 100%);
}

/* The pass of cold light. Idle for most of its cycle, so it is caught rather
   than watched. */
.watcher .sweep {
  position: absolute;
  left: 0; right: 0;
  height: 30%;
  /* Smuga ma dwie barwy, a nie jedna. Przod zimny, blekitny, bo to jest
     przejscie skanujace. Ogon czerwony, bo to jest slad, ktory zostaje.
     Te same dwa kolory znacza to samo w calym serwisie: blekit maszyne,
     czerwien strate. Krycie czerwieni jest nizsze od blekitu, bo w trybie
     screen czerwien na ciemnym zdjeciu wybija mocniej niz blekit i przy
     rownych wartosciach przeciagnelaby cala smuge w roz. */
  /* Dwie warstwy. Miekka smuga daje przejscie z zimnego przodu w cieply ogon,
     a ostra kreska na jej koncu jest tym, co oko faktycznie lapie. Sam gradient
     na ciemnym zdjeciu zawsze bedzie ledwo widoczny, bo rozklada sie na 250
     pikseli wysokosci. Kreska ma dwa piksele i dlatego widac ja od razu. */
  background:
    linear-gradient(180deg,
      transparent calc(74% - 1px),
      rgba(255,59,48,.62) 74%,
      transparent calc(74% + 2px)),
    linear-gradient(180deg,
      transparent 0%,
      rgba(200,232,242,.16) 30%,
      rgba(255,59,48,.24) 58%,
      rgba(255,59,48,.09) 78%,
      transparent 100%);
  mix-blend-mode: screen;
  /* Bylo 6,4 sekundy. Sama droga zajmowala z tego 4,5 sekundy i to bylo za
     szybko, zeby kreske dalo sie sledzic wzrokiem. Teraz caly cykl trwa 8,6
     sekundy, a udzial drogi w cyklu jest wiekszy, wiec spadanie zwolnilo
     o okolo polowe, a przerwa miedzy przejsciami wydluzyla sie tylko nieznacznie. */
  /* Ujemne opoznienie znaczy: zacznij tak, jakby animacja trwala juz od 2,4
     sekundy. Bez tego czytelnik czekal na pierwsza kreske prawie trzy sekundy,
     bo najpierw byla przerwa, a potem kreska jechala jeszcze nad kadrem, zanim
     w niego weszla. Rytm kolejnych przejsc zostaje bez zmian, skraca sie
     wylacznie czekanie po wejsciu na strone. Wartosc dobrana pomiarem:
     przy -3,4 s kreska wchodzila po 2,7 s, przy -5,0 s byla juz w dwoch
     trzecich ekranu i pol drogi przepadalo. */
  animation: sweep 8.6s cubic-bezier(.35,0,.25,1) -4.2s infinite;
}
@keyframes sweep {
  0%, 16%  { top: -32%; opacity: 0; }
  21%      { opacity: 1; }
  94%      { top: 112%; opacity: .85; }
  100%     { top: 112%; opacity: 0; }
}

/* She recedes as the document is read, and returns behind its last screen. */
/* Resting value when no script runs: present, but never in the way. */
.watcher { opacity: .5; }
.watcher--index { opacity: 1; }

/* A pulse in the dark, slower than a resting heart and shallower than the eye
   can isolate. It is what stops the black from reading as a switched-off
   screen. */


/* Each page keeps watch with its own image, so no two tabs feel the same.
   The crop is set here rather than inline because presentation belongs in one
   file and because an inline block would need an exception in any future
   content security policy. */
.watcher--index img      { object-position: 58% 18%; }
.watcher--definition img { object-position: 50% 34%; }
.watcher--report img     { object-position: 46% 40%; }
.watcher--incidents img  { object-position: 44% 52%; }
.watcher--essays img     { object-position: 50% 40%; }
.watcher--library img    { object-position: 50% 40%; }
.watcher--signal img     { object-position: 50% 40%; }
.watcher--about img      { object-position: 50% 36%; }

/* Away from the home page the image is a presence, not the subject, so it
   sits further back from the start. */
.watcher:not(.watcher--index) img { filter: saturate(.38) contrast(1.1) brightness(.86); }
/* The vignette only. No vertical ramp here, or the two would cross. */
.watcher:not(.watcher--index)::before {
  background: radial-gradient(130% 96% at 64% 18%, transparent 30%, rgba(0,0,0,.72) 100%);
}
/* The comb, and the single ramp. Every stop is darker than the one above it,
   so the image can never come back once it has started to go. */
.watcher:not(.watcher--index)::after {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.36) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.18) 16%,
      rgba(0,0,0,.44) 30%,
      rgba(0,0,0,.78) 42%,
      rgba(0,0,0,.94) 52%,
      #000 60%);
}

/* ----------------------------------------------------------- 6a. the stage */

.stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100svh;
  display: grid;
  align-content: end;
  border-bottom: 1px solid var(--graphite);
}

.stage-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--head-h) + 40px) clamp(18px, 4vw, 28px) clamp(34px, 7vh, 74px);
}

.stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
}

.stage-copy { max-width: 660px; }

/* THE TITLE ARRIVES BROKEN AND SETTLES.

   Two ghost copies of the word, one cold and one alarm, offset by a couple of
   pixels, sliding into register over the first second. It is what a frame
   looks like when the codec has not finished deciding what it is. It happens
   once, on arrival, and never again while the page is being read. */
.stage-copy h1 {
  position: relative;
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.9rem, 10.2vw, 7.4rem);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 12ch;
}
/* The ghosts are real elements, hidden from assistive technology, so the title
   is announced once and seen three times for three seconds. */
.glitch { position: relative; display: block; }
.glitch-word { color: var(--ink); }
.glitch-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* Set once, never animated: the compositor keeps the rasterised layer and
     only changes how much of it is shown. */
  will-change: opacity, transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .glitch-word {
    animation: settle var(--settle, 2.9s) linear both;
  }
  .glitch-ghost {
    color: var(--signal);
    filter: blur(.03em);
    animation: ghost-a var(--ghost-a-dur, 2.6s) linear both;
  }
  .glitch-ghost--b {
    color: var(--alarm);
    filter: blur(.04em);
    text-shadow: 0 0 .34em rgba(255,59,48,.55), 0 0 1.1em rgba(255,59,48,.3);
    animation: ghost-b var(--ghost-b-dur, 3.1s) linear both;
  }

  /* ---- focus: the word is there from the start, but not yet legible ------ */
  .glitch--focus { --settle: 2.7s; --ghost-a-dur: 2.4s; --ghost-b-dur: 2.9s; }
  .glitch--focus .glitch-ghost { filter: blur(.075em); animation-name: ghost-focus-a; }
  .glitch--focus .glitch-ghost--b { filter: blur(.095em); animation-name: ghost-focus-b; }

  /* ---- rise: the red sinks out from under the word ----------------------- */
  .glitch--rise { --settle: 3s; --ghost-a-dur: 2.7s; --ghost-b-dur: 3.3s; }
  .glitch--rise .glitch-ghost { animation-name: ghost-rise-a; }
  .glitch--rise .glitch-ghost--b { animation-name: ghost-rise-b; }

  /* ---- flash: lit hard once, then decaying ------------------------------- */
  .glitch--flash { --settle: 2.6s; --ghost-a-dur: 1.9s; --ghost-b-dur: 3.4s; }
  .glitch--flash .glitch-ghost { filter: blur(.09em); animation-name: ghost-flash-a; }
  .glitch--flash .glitch-ghost--b {
    filter: blur(.11em);
    text-shadow: 0 0 .5em rgba(255,59,48,.7), 0 0 1.5em rgba(255,59,48,.4);
    animation-name: ghost-flash-b;
  }

  /* ---- trail: the red is behind and catches up --------------------------- */
  .glitch--trail { --settle: 2.9s; --ghost-a-dur: 2.5s; --ghost-b-dur: 3.5s; }
  .glitch--trail .glitch-ghost { animation-name: ghost-trail-a; }
  .glitch--trail .glitch-ghost--b { animation-name: ghost-trail-b; }
}

/* The base word only moves. It never changes colour, because a colour change
   on text this size is a repaint of every glyph. */
@keyframes settle {
  0%   { opacity: 0; transform: translateY(.05em); }
  9%   { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Both copies fade on straight lines: a fade is perceived linearly, and a
   straight line is the one curve that cannot look like a stall. */
@keyframes ghost-a {
  0%   { opacity: .62; transform: translate(-.075em, .024em); }
  100% { opacity: 0;   transform: translate(0, 0); }
}
@keyframes ghost-b {
  0%   { opacity: 1;   transform: translate(.085em, -.026em); }
  62%  { opacity: .42; transform: translate(.032em, -.01em); }
  100% { opacity: 0;   transform: translate(0, 0); }
}

@keyframes ghost-focus-a {
  0%   { opacity: .7; transform: scale(1.012); }
  100% { opacity: 0;  transform: scale(1); }
}
@keyframes ghost-focus-b {
  0%   { opacity: 1;   transform: scale(.986); }
  58%  { opacity: .46; transform: scale(.995); }
  100% { opacity: 0;   transform: scale(1); }
}

@keyframes ghost-rise-a {
  0%   { opacity: .64; transform: translateY(.1em); }
  100% { opacity: 0;   transform: translateY(0); }
}
@keyframes ghost-rise-b {
  0%   { opacity: 1;   transform: translateY(-.09em); }
  60%  { opacity: .44; transform: translateY(-.034em); }
  100% { opacity: 0;   transform: translateY(0); }
}

@keyframes ghost-flash-a {
  0%   { opacity: .85; transform: scale(1.02); }
  100% { opacity: 0;   transform: scale(1); }
}
@keyframes ghost-flash-b {
  0%   { opacity: 1;   transform: scale(1.03); }
  22%  { opacity: .74; transform: scale(1.014); }
  100% { opacity: 0;   transform: scale(1); }
}

@keyframes ghost-trail-a {
  0%   { opacity: .6;  transform: translateX(.115em); }
  100% { opacity: 0;   transform: translateX(0); }
}
@keyframes ghost-trail-b {
  0%   { opacity: 1;   transform: translateX(-.15em); }
  56%  { opacity: .48; transform: translateX(-.06em); }
  100% { opacity: 0;   transform: translateX(0); }
}

.stage-copy .tagline {
  margin: 22px 0 0;
  max-width: 32ch;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--ink-2);
}

/* What can be established about the photograph. */
.provenance {
  max-width: 30ch;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--signal-line);
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--mute);
}
.provenance b {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
}

/* Routes, printed under the title like the contents of a case file. */
.hero-actions {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-actions a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 2px 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease, border-color .18s ease;
}
.hero-actions a::after {
  content: "\2192";
  margin-left: auto;
  color: var(--faint);
  transition: color .18s ease, transform .18s ease;
}
.hero-actions a:hover {
  color: var(--ink);
  padding-left: 10px;
  border-color: var(--alarm-line);
}
.hero-actions a:hover::after { color: var(--alarm); transform: translateX(4px); }
.hero-actions a:first-child { color: var(--ink); border-top: 2px solid var(--alarm); margin-top: -1px; }
.hero-actions a span {
  order: 2;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .watcher img { object-position: 56% 14%; }
  .watcher::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.97) 100%),
      radial-gradient(140% 70% at 58% 22%, transparent 20%, rgba(0,0,0,.75) 100%);
  }
  .provenance { max-width: none; }
}

/* ------------------------------------------------------- 6b. the three losses

   One sentence per screen, in capitals, at a size that cannot be taken in at
   a glance. Each arrives out of focus and resolves as it enters the viewport,
   because resolution is the subject. Between them there is nothing but black,
   and the reader falls through it.
   ------------------------------------------------------------------------- */

.loss {
  min-height: 88svh;
  display: grid;
  align-content: center;
  gap: 22px;
  padding: clamp(48px, 10vh, 120px) 0;
}
.loss + .loss { border-top: 1px solid var(--graphite); }

.loss-tag {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--signal);
}
.loss p:not(.loss-tag) {
  margin: 0;
  max-width: 16ch;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 7.4vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Touching the sentence splits it, the way a compressed frame splits. */
.loss p:not(.loss-tag):hover {
  text-shadow: -2px 0 var(--signal), 2px 0 var(--alarm);
}

.loss-after {
  max-width: var(--measure);
  margin: 0;
  padding: clamp(48px, 9vh, 100px) 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--mute);
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .loss p, .loss-tag {
      animation: resolve linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 36%;
    }
  }
}
@keyframes resolve {
  from { opacity: 0; filter: blur(18px); transform: translateY(18px); }
  62%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ------------------------------------------------------------- 6c. the ledger

   Documented, not predicted. The sums are set in the alarm colour and run to
   the edge of the measure, because that is what they did to the people who
   paid them.
   ------------------------------------------------------------------------- */

.ledger {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-bottom: 1px solid var(--graphite);
  background: rgba(0,0,0,.62);
}
.ledger-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) clamp(18px, 4vw, 28px);
}
.ledger-label {
  margin: 0 0 34px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--alarm);
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 30px;
  padding: 26px 0;
  border-top: 1px solid var(--graphite);
  text-decoration: none;
  transition: background-color .2s ease, padding-left .2s ease;
}
.ledger-row:last-of-type { border-bottom: 1px solid var(--graphite); }
.ledger-row:hover { background: var(--alarm-soft); padding-left: 14px; }
@media (min-width: 760px) {
  /* Tor kwoty musi byc liczony w skali kroju, ktorym kwota jest zlozona, a nie
     w skali tekstu podstawowego. Jednostka ch odnosi sie do rozmiaru czcionki
     elementu, ktory ustawia siatke, czyli do siedemnastu pikseli, podczas gdy
     kwota ma pieciedziesiat osiem. Tor wychodzil szeroki na 57 pikseli, a napis
     $243K potrzebuje ich blisko dwustu, wiec czerwien wchodzila na bialy opis.
     Szerokosc rosnie teraz ta sama krzywa co rozmiar kwoty. */
  .ledger-row { grid-template-columns: clamp(6.8rem, 18vw, 12.6rem) 1fr auto; align-items: baseline; }
}
.ledger-sum {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--alarm);
  white-space: nowrap;
}
.ledger-what {
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.ledger-what small {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ledger-when {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

/* THE FIGURE THAT MOVES WHILE YOU READ.

   It is not a live feed and it does not pretend to be one. It is the
   documented 2025 estimate divided by the seconds in a year and multiplied by
   the time this page has been open. The label says exactly that, because a
   number that frightens a reader has to survive the reader checking it. */
.ledger-live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 34px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--alarm-line);
}
.ledger-live-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}
.ledger-live-sum {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: -.03em;
  color: var(--alarm);
  font-variant-numeric: tabular-nums;
}
.ledger-note {
  margin: 16px 0 0;
  max-width: var(--measure);
  font-size: .92rem;
  color: var(--mute);
}
.ledger-note a { color: var(--ink-2); border-bottom-color: var(--graphite-2); }
.ledger-note a:hover { color: var(--alarm); border-color: var(--alarm-line); }
.ledger-note a { color: var(--ink-2); border-bottom-color: var(--graphite-2); }
.ledger-note a:hover { color: var(--alarm); border-color: var(--alarm-line); }

/* Sections on the home page, below the opening. */
.home-section {
  max-width: var(--measure);
  padding-top: clamp(48px, 8vh, 84px);
}

/* --------------------------------------------------------------- 7. prose */

.copy, .article, .report, .intro-block { max-width: var(--measure); }

/* Everything below the title band reads on the ground, never on the image.
   The plate is nearly opaque rather than opaque so that the photograph is
   still felt at the edges of the column. */
.wrap > .article, .wrap > .report, .wrap > .copy,
.wrap > .home-section, .wrap > .site-footer {
  position: relative;
}

.article p, .copy p, .report p, .intro-block p {
  margin: 0 0 1.05em;
  color: var(--ink-2);
}

/* Section heads sit above prose, so they belong to the reading layer rather
   than to the poster. Sentence case, bold, in the body face. */
.article h2, .copy h2, .report h2, .lib-section h2 {
  margin: 2.7em 0 .7em;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.22rem, 2.1vw, 1.48rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
/* A short seal rule instead of a full-width divider. A full rule cuts the
   page in two; this one marks a beginning. */
.article h2::before, .copy h2::before, .report h2::before, .lib-section h2::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-bottom: 15px;
  background: var(--faint);
}

.article h3, .copy h3, .report h3 {
  margin: 2em 0 .5em;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .002em;
  color: var(--ink);
}

.article ul, .copy ul, .report ul,
.article ol, .copy ol, .report ol {
  margin: 0 0 1.2em;
  padding-left: 1.15em;
  color: var(--ink-2);
}
.article li, .copy li, .report li { margin: 0 0 .55em; }
.article li::marker, .copy li::marker, .report li::marker { color: var(--faint); }

strong { color: var(--ink); font-weight: 600; }
em { color: var(--ink-2); }

/* Links inside prose. Underline offset far enough to stay legible, and the
   seal colour on hover so that following a reference feels like following a
   citation. */
.article a, .copy a, .report a, .intro-block a, .archive-note a, .contact-block a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--graphite-2);
  transition: color .16s ease, border-color .16s ease;
}
.article a:hover, .copy a:hover, .report a:hover,
.intro-block a:hover, .archive-note a:hover, .contact-block a:hover {
  color: var(--alarm);
  border-color: var(--alarm-line);
}

/* ------------------------------------------------- 8. documentation layout */

/* Pages that carry a table of contents become two-column documents on a wide
   screen: a sticky index on the left, the argument on the right. The markup
   already had these navs as direct children of the article, so this costs no
   change to the HTML at all. Browsers without :has() keep the single column,
   which is exactly what they had before. */
@media (min-width: 1040px) {
  article:has(> .toc),
  article:has(> .incident-toc),
  article:has(> .lib-toc),
  article:has(> .signal-toc),
  article:has(> .essay-toc) {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--gap);
    max-width: none;
    align-items: start;
  }
  article:has(> .toc) > *,
  article:has(> .incident-toc) > *,
  article:has(> .lib-toc) > *,
  article:has(> .signal-toc) > *,
  article:has(> .essay-toc) > * { grid-column: 2; }

  article > .toc,
  article > .incident-toc,
  article > .lib-toc,
  article > .signal-toc,
  article > .essay-toc {
    grid-column: 1;
    grid-row: 1 / span 999;
    position: sticky;
    top: calc(var(--head-h) + 24px);
    max-height: calc(100vh - var(--head-h) - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.toc, .incident-toc, .lib-toc, .signal-toc, .essay-toc {
  margin: 0 0 2.4em;
  padding: 18px 18px 20px;
  background: rgba(0,0,0,.88);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
}
@media (min-width: 1040px) {
  .toc, .incident-toc, .lib-toc, .signal-toc, .essay-toc {
    margin-right: 8px;
    padding: 20px 20px 24px;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 0;
    border-right: 1px solid var(--graphite);
    border-radius: 0;
  }
}
.toc-label, .incident-toc-label, .lib-toc-label, .signal-toc-label, .essay-toc-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.toc ol, .incident-toc ol, .lib-toc ol, .signal-toc ol, .essay-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li, .incident-toc li, .lib-toc li, .signal-toc li, .essay-toc li {
  margin: 0 0 2px;
  counter-increment: toc;
}
.toc ol ol { margin: 4px 0 8px 0; }
.toc a, .incident-toc a, .lib-toc a, .signal-toc a, .essay-toc a {
  display: block;
  padding: 3px 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--mute);
  text-decoration: none;
  border: 0;
  transition: color .16s ease;
}
.toc a:hover, .incident-toc a:hover, .lib-toc a:hover, .signal-toc a:hover, .essay-toc a:hover { color: var(--alarm); }
.toc ol ol a { font-size: .78rem; color: var(--faint); padding-left: 12px; }

.toc-date, .toc-count {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--faint);
}

/* --------------------------------------------------------- 9. record plate */

/* The recurring device. A block that presents a statement as an entry in a
   register: seal-marked edge, raised surface, room to breathe. */
.def-block, .abstract, .contact-block, .archive-note, .intro-block, #sec-cite {
  border: 1px solid var(--graphite);
  border-left: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--slate);
  padding: clamp(20px, 3vw, 28px);
}

.def-block {
  margin: 8px 0 2.4em;
}
/* The canonical definition is the single most important sentence on the site.
   It gets display type, not body type. */
.def-block p {
  margin: 0;
  font-family: var(--formal);
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink);
}
.def-block p a { border-bottom-color: var(--seal-line); }

.intro-block {
  margin: 0 0 2.6em;
  max-width: var(--measure);
}
.intro-block p:last-child { margin-bottom: 0; }

.abstract { margin: 0 0 2.6em; }
.abstract p { margin: 0; }
.abstract-label,
.report-footer-note strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}

/* The strip of document metadata under a report title: author, version, date.
   Monospace, because this is evidence about the document rather than prose. */
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0 0 2.6em;
  padding: 14px 16px;
  background: rgba(0,0,0,.88);
  border: 1px solid var(--graphite);
  border-left: 2px solid var(--alarm);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--mute);
}
.report-meta strong {
  color: var(--faint);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.report-meta time { color: var(--mute); }

/* How to cite. Presented as something to copy, because that is its only use. */
#sec-cite {
  margin-top: 3em;
}
#sec-cite h2 { margin-top: 0; }
#sec-cite p {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--ink-2);
}

/* The citation, on the page that will be cited. A definition that cannot be
   quoted precisely will be quoted imprecisely, and then it belongs to whoever
   quoted it. */
.cite-plate {
  margin: 3em 0 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--graphite);
  border-left: 2px solid var(--alarm);
  border-radius: var(--radius);
  background: rgba(0,0,0,.86);
}
.cite-plate h2 { margin-top: 0; }
.cite-plate h2::before { background: var(--alarm); }
.cite-line {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--ink);
  word-break: break-word;
}

/* --------------------------------------------------------- 10. home routes */

.explore { margin: 2.4em 0 0; padding: 0; border: 0; }
.explore-heading {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.explore-heading::before { display: none; }

.explore-grid {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  max-width: var(--measure);
}
@media (min-width: 620px) {
  .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.explore-grid a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  background: var(--slate);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.explore-grid a:hover {
  border-color: var(--seal-line);
  background: var(--slate-2);
  transform: translateY(-1px);
}
.explore-grid a small {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The list of sections on the home page. Each item is a route, so the label
   leads and the description follows underneath it. */
.copy ul[aria-label="Site sections by purpose"] {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 1.6em;
  border-top: 1px solid var(--graphite);
}
.copy ul[aria-label="Site sections by purpose"] li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--graphite);
  font-size: .95rem;
  color: var(--mute);
}
.copy ul[aria-label="Site sections by purpose"] li a {
  border: 0;
  margin-right: 10px;
}
.copy ul[aria-label="Site sections by purpose"] li a strong { color: var(--ink); }
.copy ul[aria-label="Site sections by purpose"] li a:hover strong { color: var(--seal); }

/* ------------------------------------------------------------ 11. incidents */

/* The incident archive is a chronology, so it is drawn as one: a spine down
   the left with a year at every entry. The numbering is not decoration, it is
   the order in which these things happened. */
.incident, .signal-entry, .essay {
  position: relative;
  margin: 0 0 8px;
  padding: 26px 0 26px 0;
  border-top: 1px solid var(--graphite);
}
.incident h2, .signal-entry h2, .essay h2 { margin-top: 0; }

@media (min-width: 720px) {
  .incident, .signal-entry {
    padding-left: 92px;
  }
  .incident::before, .signal-entry::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 34px;
    bottom: -8px;
    width: 1px;
    background: var(--graphite);
  }
  .incident::after, .signal-entry::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 30px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--void);
    border: 1px solid var(--alarm);
  }
  .incident:last-of-type::before, .signal-entry:last-of-type::before { display: none; }
}

.incident-date, .signal-date, .essay-date {
  display: block;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.incident-type {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 9px;
  border: 1px solid var(--signal);
  border-radius: 2px;
  background: var(--signal-soft);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}

.incident-tags {
  display: block;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--faint);
}

/* Why an entry is in the archive at all. This is the editorial judgement, so
   it is marked as one. */
.relevance {
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  border-left: 2px solid var(--alarm);
  background: var(--alarm-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem;
  color: var(--ink-2);
}

.source, .signal-sources {
  margin: 12px 0 0 !important;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--faint);
}
.source a, .signal-sources a { color: var(--mute); border-bottom-color: var(--graphite); }
.source a:hover, .signal-sources a:hover { color: var(--alarm); }

.timeline-section { margin-top: 3em; }
.archive-note { margin: 3em 0 0; }
.archive-note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 12. essays */

.essay { padding-top: 34px; }
.essay h3 { margin-top: 1.6em; }

/* ------------------------------------------------------------- 13. library */

.lib-section { margin: 0 0 2.6em; }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-entry {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--graphite);
}
.ref-entry:hover .ref-title a { color: var(--alarm); }
.ref-title {
  margin: 0 0 4px !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.ref-title a { border: 0; color: var(--ink); }
.ref-meta {
  margin: 0 0 8px !important;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.ref-desc {
  margin: 0 !important;
  font-size: .93rem;
  color: var(--mute);
}

/* -------------------------------------------------------------- 14. report */

.framework-item {
  margin: 0 0 10px;
  padding: 18px 20px;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  background: var(--slate);
}
.framework-item strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}
.framework-item p:last-child { margin-bottom: 0; }

figure {
  margin: 2em 0;
  padding: 18px;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  background: var(--slate);
}
figure img, figure svg, figure object {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--faint);
}

/* Arkusz jednostronicowy do pobrania. Plik, ktory czytelnik zabiera ze soba,
   wiec strzalka mowi, ze odnosnik wyprowadza poza strone, a nie przenosi w jej
   obrebie. Kolory brał wczesniej z atrybutu style i byly to barwy dawnej,
   fioletowej palety, wiec byl to jedyny element serwisu, ktory nie zareagowal
   na zmiane szaty. */
.download {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.download a {
  color: var(--mute);
  border-bottom: 1px solid var(--graphite-2);
}
.download a::after { content: " \2197"; color: var(--faint); }
.download a:hover { color: var(--alarm); border-color: var(--alarm-line); }
.download a:hover::after { color: var(--alarm); }

.references ol { padding-left: 1.4em; }
.references li {
  margin-bottom: .8em;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--mute);
}
.references li:target {
  background: var(--alarm-soft);
  border-radius: 2px;
}

.report-footer-note {
  margin: 3em 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--graphite);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--faint);
}

/* --------------------------------------------------- diagram viewer ------
   The figure carries the report's only argument in pictures, so it opens into
   a reader of its own: a bar with the controls, the drawing on a scrolling
   canvas, and one line telling you how to work it. The drawing is resized by
   width rather than by transform, so the vector is redrawn at every step and
   stays sharp however far it is pushed.
   ------------------------------------------------------------------------ */

.js-zoomable-diagram { cursor: zoom-in; }

html.popup-otwarte,
html.popup-otwarte body { overflow: hidden; }

#img-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  flex-direction: column;
  background: var(--void);
}
#img-popup.open { display: flex; }

.popup-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  padding: 14px clamp(14px, 3vw, 30px);
  border-bottom: 1px solid rgba(237,235,230,.12);
  background: rgba(0,0,0,.5);
}
.popup-title {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.popup-tools button {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(237,235,230,.2);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.popup-tools button:hover {
  border-color: var(--signal);
  color: var(--signal);
}
.popup-tools button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.popup-tools .popup-close {
  border-color: rgba(255,59,48,.45);
  color: var(--alarm);
}
.popup-tools .popup-close:hover {
  border-color: var(--alarm);
  background: rgba(255,59,48,.1);
  color: var(--alarm);
}
.popup-zoom-value {
  min-width: 4.6ch;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.popup-canvas {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  place-content: center;
  padding: 16px;
  cursor: zoom-in;
  /* Wlasna obsluga dwoch palcow, zeby powiekszenie przerysowywalo wektor. */
  touch-action: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(237,235,230,.25) transparent;
  /* Miejsce na pasek zarezerwowane po obu stronach, inaczej pojawienie sie
     paska przy powiekszeniu zwezaloby plotno i dopasowanie wracaloby do innej
     szerokosci, niz zaczynalo. */
  scrollbar-gutter: stable both-edges;
}
#img-popup.is-zoomed .popup-canvas { cursor: grab; }
#img-popup.is-grabbing .popup-canvas { cursor: grabbing; }

.popup-canvas img {
  display: block;
  height: auto;
  background: var(--void);
  /* Bez wygladzania przy skalowaniu w gore: rysunek i tak jest wektorem. */
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.popup-hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px clamp(14px, 3vw, 30px) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(237,235,230,.08);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--faint);
  text-align: center;
}

@media (max-width: 620px) {
  .popup-title { display: none; }
  .popup-bar { justify-content: center; }
  .popup-hint { font-size: .6rem; letter-spacing: .05em; }
}

/* --------------------------------------------------------------- 15. about */

.contact-block { margin: 2.6em 0 0; }
.contact-block p:first-child strong {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 400;
}
.contact-block p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 16. footer */

.email, .footer-email {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--mute);
}

.site-footer {
  margin-top: clamp(64px, 10vh, 110px);
  padding: 32px 0 44px;
  border-top: 1px solid var(--graphite);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.footer-nav a {
  font-size: .84rem;
  color: var(--mute);
  text-decoration: none;
  transition: color .16s ease;
}
.footer-nav a:hover { color: var(--alarm); }

/* The standing attribution. Every page states who maintains the archive and
   since when, because a reference work is only citable if its author is
   unambiguous. Facts here are the ones the About page already states. */
.imprint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.imprint b { color: var(--mute); font-weight: 400; }
.imprint span::after { content: " ·"; color: var(--graphite-2); }
.imprint span:last-child::after { content: ""; }

/* Home page sign-off block, same role as the footer on inner pages. */
.email { padding-top: 18px; border-top: 1px solid var(--graphite); margin-top: 40px; }

/* ---------------------------------------------------- 17. floating contact */

.fb-link {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--slate);
  border: 1px solid var(--graphite-2);
  color: var(--mute);
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.fb-link:hover { color: var(--alarm); border-color: var(--alarm-line); }
.fb-link svg { width: 17px; height: 17px; }

/* -------------------------------------------------- 17b. atmosphere layer

   The site argues that you are looking at something you cannot verify. The
   page should feel that way before the reader has finished the first line.
   Every device below works below the level of conscious attention and none of
   them hides content or degrades legibility, because a page that hides text
   from a reader also hides it from a search engine, and this archive lives on
   being found.

     GRAIN     a single generated noise field over everything. Photographic
               grain is read as "recorded", and recorded material is material
               that can be doctored.
     VIGNETTE  the edges of the screen close in. Attention narrows to the
               centre; a narrowed field reads as being watched.
     BREATH    the portrait scales by four percent over forty seconds. Too
               slow to see, fast enough to register as alive.
     SCAN      a soft band crosses the portrait once every eleven seconds, the
               way an image looks while it is being examined.
     FOCUS     the three losses arrive out of blur. Resolution is the subject
               of the site, so resolution is how its central claim appears.
   ------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: drift 7s steps(6) infinite;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* The edges close in. */
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 85% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* The room closes in, and breathes. Slower than a resting heart, shallower
   than the eye can isolate, and the reason the black does not read as a
   switched-off screen. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(120% 88% at 52% 40%, transparent 34%, rgba(0,0,0,.72) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .vignette { animation: heart 5.2s ease-in-out infinite; }
}
@keyframes heart {
  0%, 100% { opacity: 1; }
  46%      { opacity: .82; }
  54%      { opacity: .9; }
}

/* A hairline at the very top that fills as the document is read. It is the
   only progress indicator on the site and it is the colour of the machine. */
.readline {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  height: 1px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--signal), var(--alarm));
}
@supports (animation-timeline: scroll()) {
  .readline {
    animation: fill linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes fill { to { transform: scaleX(1); } }

/* The portrait breathes and is scanned. */
.evidence img {
  animation: breath 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes breath {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

.evidence::before,
.evidence::after { z-index: 3; }

/* Interlace: a fixed 3px comb over the image only. */
.evidence {
  isolation: isolate;
  overflow: clip;
}
.evidence .veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  opacity: .55;
}
/* The sweep. Idle for most of the cycle, so it is noticed without being
   watched for. */
.evidence .veil::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(95,182,198,.16), transparent);
  mix-blend-mode: screen;
  animation: sweep 11s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes sweep {
  0%, 62%  { top: -25%; opacity: 0; }
  66%      { opacity: 1; }
  92%      { top: 105%; opacity: .9; }
  100%     { top: 105%; opacity: 0; }
}

/* Signal corruption, on demand only. Hovering the title splits it the way a
   compressed frame splits. It never moves and never becomes unreadable. */
.wordmark:hover, h1:hover {
  text-shadow: -1px 0 rgba(95,182,198,.55), 1px 0 rgba(217,164,65,.45);
}
h1 { transition: text-shadow .18s ease; }

/* The three losses resolve out of blur as they enter the screen. Without
   JavaScript they are simply legible from the start, which is the correct
   fallback for a sentence that carries the argument. */
.js-focus .assert p {
  filter: blur(9px);
  opacity: 0;
  transform: translateY(6px);
  transition: filter .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.js-focus .assert p.seen {
  filter: blur(0);
  opacity: 1;
  transform: none;
}
.js-focus .assert p:nth-child(2) { transition-delay: .12s; }
.js-focus .assert p:nth-child(3) { transition-delay: .24s; }
.js-focus .assert p.assert-tail { transition-delay: .34s; }

/* Status strip: a live statement of where the timeline stands. Dates are
   facts, so this device carries no invented urgency, only real dates. */
.status {
  position: fixed;
  top: var(--bar-h);
  left: 0; right: 0;
  z-index: 99;
  border-bottom: 1px solid var(--alarm-line);
  background: rgba(255,59,48,.055);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.status-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 9px clamp(18px, 4vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.status-inner b {
  color: var(--alarm);
  font-weight: 400;
}
.status-inner .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--alarm);
  box-shadow: 0 0 0 0 rgba(255,59,48,.55);
  animation: pulse 2.6s ease-out infinite;
  transform: translateY(-1px);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.status-inner a { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--graphite-2); }
.status-inner a:hover { color: var(--alarm); border-color: var(--alarm-line); }

/* The milestone line on the home page. */
.milestone {
  margin: 1.6em 0 0;
  padding: 14px 16px;
  border: 1px solid var(--graphite);
  border-left: 2px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal-soft);
  font-size: .95rem;
  color: var(--ink-2);
}
.milestone strong {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 400;
  margin-right: 8px;
}

.counts {
  margin-top: 1.4em;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--faint);
}
.counts a { border-bottom-color: var(--graphite); }

/* ------------------------------------------------------------- 18. motion */

/* One orchestrated arrival, then nothing. The page settles once; it does not
   perform while it is being read. */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero > *, .report-hero > *, .hero-copy > *, .evidence, .assert p {
  animation: rise .6s cubic-bezier(.2,.7,.3,1) backwards;
}
.hero > *:nth-child(2), .report-hero > *:nth-child(2), .hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero > *:nth-child(3), .hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-copy > *:nth-child(4) { animation-delay: .21s; }
.evidence { animation-delay: .12s; }
.assert p:nth-child(1) { animation-delay: .30s; }
.assert p:nth-child(2) { animation-delay: .40s; }
.assert p:nth-child(3) { animation-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .watcher .sweep, .status-inner .dot, .vignette { animation: none; }
  .watcher img { animation: none; transform: none; }
  .watcher { opacity: .5; }
  .js-focus .assert p { filter: none; opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- 18b. platform behaviour

   Everything below is progressive. Each feature is asked for with @supports or
   is inert where it is unknown, so a browser that has none of it still gets the
   complete site: all of the text, all of the links, all of the structure.

     VIEW TRANSITIONS   moving between pages resolves the way the sentences do,
                        out of blur. The archive stops feeling like eight
                        separate documents and starts feeling like one.
     SCROLL TIMELINE    the ground darkens as the reader goes deeper. Nothing
                        is hidden by it; the page simply loses light.
     CONTENT VISIBILITY the long pages hold seventeen cases and thirty sources.
                        Off-screen entries are not laid out until they are
                        needed, which is what keeps those pages quick.
   ------------------------------------------------------------------------- */

/* No cross-document view transition here, deliberately: see the note in the
   revision history above. The arrival of the title is the transition. */

/* The ground loses light as the document is read. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bg {
      animation: deepen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 55%;
    }
  }
}
@keyframes deepen { to { filter: brightness(.5) saturate(.7); } }

/* USUNIETA OPTYMALIZACJA content-visibility.

   Wpisy archiwum mialy pomijac uklad, dopoki sa poza ekranem, z zastepcza
   wysokoscia 420 pikseli. Zmierzone skutki na stronie biblioteki: dokument
   przed wyrenderowaniem wpisow ma 18404 piksele wysokosci, po wyrenderowaniu
   17013. Roznica to 1390 pikseli.

   Klikniecie pozycji w spisie tresci na swiezo wczytanej stronie skakalo pod
   pozycje policzona z wysokosci zastepczych, a chwile pozniej cala tresc
   powyzej zapadala sie o te 1390 pikseli i czytelnik ladowal poltora ekranu
   za daleko, przy ostatnich sekcjach na samym koncu strony. Po odswiezeniu
   z kotwica w adresie przegladarka przelicza pozycje po ulozeniu tresci i
   dlatego wtedy dzialalo poprawnie.

   Zysk z tej optymalizacji byl tu niemierzalny: najwieksze malowanie miescilo
   sie i tak w okolo 750 milisekundach, a strony maja po piecdziesiat kilka
   kilobajtow kodu. Koszt byl konkretny: zepsuty spis tresci na trzech
   stronach, ktore spis tresci maja. */

/* Paragraph rag, where the browser can do it. */
.article p, .copy p, .report p, .intro-block p, .loss-after, .ledger-note {
  text-wrap: pretty;
}

/* Readers who ask for more contrast get it. */
@media (prefers-contrast: more) {
  :root {
    --ink: #FFFFFF;
    --ink-2: #E4E6E9;
    --mute: #B9BEC6;
    --faint: #9AA1AB;
    --graphite: #3A424E;
    --graphite-2: #4A5462;
  }
  .watcher::before { background: rgba(0,0,0,.9); }
  .grain { display: none; }
}

/* -------------------------------------------------------------- 19. mobile */

@media (max-width: 860px) {
  :root { --head-h: 84px; }
  .status-inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 7px clamp(14px, 4vw, 28px);
    font-size: .62rem;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
  }
  .status-inner span:nth-of-type(3) { display: none; }
  .status-inner a { margin-left: auto; }
}

/* On the narrowest screens the strip keeps the fact and drops the route:
   Signal is one tap away in the menu. */
@media (max-width: 620px) {
  .status-inner a { display: none; }
  .stage-copy .tagline { max-width: 26ch; }
  .provenance { font-size: .68rem; }
}

@media (max-width: 719px) {
  body { font-size: 1rem; line-height: 1.65; }
  .wrap { padding-top: calc(var(--head-h) + 26px); }
  .hero, .report-hero { margin-bottom: 30px; }
  .report-meta { flex-direction: column; gap: 4px; }
  .toc, .incident-toc, .lib-toc, .signal-toc, .essay-toc { margin-bottom: 2em; }
}

@media print {
  /* Everything that only exists on a screen. */
  .site-nav, .status, .fb-link, .toc, .incident-toc, .lib-toc, .signal-toc, .essay-toc,
  .bg, .watcher, .grain, .vignette, .readline, .back,
  .hero-actions, .site-footer nav, .skip-link, .js-only,
  #img-popup,
  .glitch-ghost { display: none !important; }

  @page { margin: 20mm 18mm; }

  html, body {
    background: #fff !important;
    color: #111 !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* The title band is a screen device: a dark plate over a photograph. On
     paper it would print as a black rectangle above the title. */
  .wrap > .hero, .wrap > .report-hero, .hero, .report-hero,
  .wrap, .wrap > .article, .wrap > .report, .article, .report, .copy {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: none !important;
    border: 0 !important;
    min-height: 0 !important;
  }

  h1, h2, h3, .doc-kind, strong, b, .glitch-word {
    color: #000 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  h1 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    font-size: 22pt !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    font-size: 13pt !important;
    text-transform: none !important;
    margin-top: 18pt !important;
  }
  h2::before { display: none !important; }
  h3 { font-size: 11pt !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  p, li { color: #111 !important; orphans: 3; widows: 3; }
  .tagline, .report-subtitle { color: #333 !important; font-size: 11pt !important; }

  /* Plates become framed blocks rather than dark cards. */
  .def-block, .abstract, .intro-block, .framework-item, .contact-block,
  .archive-note, .cite-plate, .report-meta, .relevance, figure {
    background: none !important;
    border: 1px solid #999 !important;
    border-left-width: 3px !important;
    border-radius: 0 !important;
    color: #111 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .report-meta, .abstract-label, .source, .signal-sources,
  .incident-date, .signal-date, .essay-date, .ref-meta, .doc-kind {
    font-family: "Courier New", Courier, monospace;
    color: #333 !important;
  }

  .incident, .signal-entry, .essay, .ref-entry, .lib-section {
    break-inside: avoid;
    page-break-inside: avoid;
    padding-left: 0 !important;
    border-color: #ccc !important;
  }
  .incident::before, .incident::after,
  .signal-entry::before, .signal-entry::after { display: none !important; }

  /* A printed reader cannot follow a link, so the link is written out. */
  a { color: #000 !important; text-decoration: underline; border: 0 !important; }
  /* Adres wypisany wprost, a nie sklejony z atrybutu, z dwoch powodow.
     Otoczenie ma text-transform: uppercase, ktore objeloby takze adres,
     a sciezki w adresach rozrozniaja wielkosc liter, wiec przepisany
     z kartki nie zadzialalby. Drugi powod to odcisk tresci doklejany do
     nazwy pliku: potrzebny przegladarce, a dla czlowieka czytajacego
     wydruk to szum, ktory latwo przepisac z bledem. */
  .download a::after {
    content: " <https://authenticitycrisis.com/assets/authenticity-inversion-model.pdf>";
    font-family: "Courier New", Courier, monospace;
    font-size: 8pt;
    text-transform: none;
    word-break: break-all;
  }

  /* text-transform: none dotyczy kazdego dopisanego adresu, bo czesc miejsc,
     w ktorych stoja odnosniki, podnosi tekst do wielkich liter, a sciezka
     w adresie rozroznia wielkosc liter i przepisana z kartki nie zadzialalaby. */
  /* W bloku cytowania kazdy odnosnik pokazuje juz swoj pelny adres, wiec
     dopisek powtarzalby ten sam ciag drugi raz obok siebie. */
  #sec-cite a::after,
  .cite-plate a::after { content: "" !important; }

  .article a[href^="http"]::after,
  .report a[href^="http"]::after,
  .references a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: "Courier New", Courier, monospace;
    font-size: 8pt;
    text-transform: none;
    word-break: break-all;
  }

  .references li { font-size: 9pt; }
  .references { break-before: page; page-break-before: always; }
}