/* ============================================================================
   uncommonground.pics — TRANSMITTER

   The show is a broadcast and the site is its station. Navy is the ground, red
   is the on-air colour: it marks what is live, what is selected, and what
   matched. Nothing is red that is not one of those three things.

   The library is a log you can also read as a sheet, and it never covers
   itself — results on the left, a permanent inspector docked on the right,
   with the words found inside the picture drawn on the picture.
   ========================================================================= */

:root {
  --navy-950: #040a14;
  --navy-900: #07162a;
  --navy-850: #0a1e39;
  --navy-800: #0e2745;
  --navy-700: #153a63;
  --navy-600: #1d4d80;

  --line: rgba(143, 168, 200, 0.22);
  --line-soft: rgba(143, 168, 200, 0.12);

  --paper: #eaf1fa;
  --steel: #8fa8c8;
  --steel-dim: #6d87a8;

  --sky: #29abe2;
  --sky-hi: #6fd2ff;

  --red: #e5242b;
  --red-hi: #ff3b32;
  --red-wash: rgba(229, 36, 43, 0.14);
  --red-line: rgba(229, 36, 43, 0.45);

  --sign: 'Archivo', system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(16px, 2.4vw, 30px);
  --head-h: 72px;
  --panel-w: 430px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--paper);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--navy-950); }
::-webkit-scrollbar-thumb { background: var(--navy-700); border: 3px solid var(--navy-950); }
::-webkit-scrollbar-thumb:hover { background: var(--navy-600); }
* { scrollbar-color: var(--navy-700) var(--navy-950); scrollbar-width: thin; }

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Small caps label — the station's own voice for anything that is not content. */
.tag {
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin: 0;
}
.tag--red { color: var(--red-hi); }

/* ============================ station head ============================== */

.st {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--head-h);
  padding: 0 var(--pad);
  background: var(--navy-900);
  border-bottom: 1px solid var(--line);
}

.st__sign { display: flex; align-items: center; flex: none; }
.st__sign img { height: 34px; width: auto; }

.st__air {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--red-line);
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.st__air i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 36, 43, 0.22);
}

.st__nav { margin-left: auto; display: flex; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.st__nav::-webkit-scrollbar { display: none; }

.chan {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-family: var(--sign);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.chan:hover { color: var(--paper); }
.chan[aria-current='true'] { color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.chan__n { margin-left: 7px; color: var(--red-hi); font-variant-numeric: tabular-nums; }

/* ================================ hero ================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 34px;
  align-items: end;
  padding: clamp(26px, 4vw, 46px) var(--pad) 22px;
}

.hero__line {
  margin: 0;
  font-family: var(--sign);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: clamp(27px, 5.6vw, 76px);
  line-height: 0.86;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

/* One authored line each. The headline breaks where it was written to break, so
   nothing else in it may break. */
.hero__row { display: block; white-space: nowrap; }
.hero__line { color: var(--paper); }
.hero__sky { font-weight: inherit; color: var(--sky); }
.hero__line em { font-style: normal; color: var(--red); }

.hero__sub { margin: 15px 0 0; max-width: 58ch; font-size: 17px; color: var(--steel); }
.hero__sub b { color: var(--paper); font-weight: 600; }

/* Carrier meters. They read the shape of the library: one bar per topic, tall
   where the show has argued most. Decoration would be a lie; this is data. */
.meters { display: flex; gap: 3px; align-items: flex-end; height: 70px; }
.meters i {
  flex: 1;
  height: 100%;
  background: var(--navy-700);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
}
.meters i[data-on] { background: var(--red); }

/* Once you start working the hero gets out of the way. */
.hero.is-tight { padding-bottom: 10px; grid-template-columns: minmax(0, 1fr); }
.hero.is-tight .hero__line { font-size: clamp(21px, 2.4vw, 30px); }
.hero.is-tight .hero__row { display: inline; }
.hero.is-tight .hero__row + .hero__row::before { content: ' '; }
.hero.is-tight .hero__sub,
.hero.is-tight .meters { display: none; }

/* =============================== omnibox ================================ */

/* Search and topics ride together and stay put: on a page whose whole job is
   finding something, the field may never scroll out of reach. */
.controls {
  position: sticky;
  top: var(--head-h);
  z-index: 50;
  background: var(--navy-950);
  box-shadow: 0 14px 16px -16px rgba(0, 0, 0, 0.9);
}

.omni-bar { padding: 10px var(--pad) 12px; }

.omni {
  display: flex;
  align-items: stretch;
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  transition: border-color 0.16s ease;
}
.omni:focus-within { border-color: var(--red); }

.omni__glass { display: grid; place-items: center; width: 52px; color: var(--steel-dim); font-size: 20px; }

.omni input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 14px 0;
  color: var(--paper);
  font-family: var(--cond);
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: 0.01em;
}
.omni input::placeholder { color: var(--steel-dim); }

.omni__clear { padding: 0 14px; color: var(--steel-dim); }
.omni__clear:hover { color: var(--red-hi); }

.omni select {
  background: var(--navy-800);
  border: none;
  border-left: 1px solid var(--navy-700);
  padding: 0 14px;
  font-family: var(--text);
  font-size: 13px;
  font-weight: 600;
  color: var(--steel);
  outline: none;
  cursor: pointer;
}
.omni select:focus { color: var(--paper); }

.omni__go {
  padding: 0 24px;
  background: var(--red);
  color: #fff;
  font-family: var(--sign);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}
.omni__go:hover { background: var(--red-hi); }

.trend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.trend__key {
  padding: 3px 11px;
  border: 1px solid var(--navy-700);
  font-size: 13px;
  color: var(--steel);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.trend__key:hover { border-color: var(--red); color: var(--paper); }

/* ============================ topic ribbon ============================== */

.ribbon {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px var(--pad);
  background: var(--navy-900);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.ribbon::-webkit-scrollbar { display: none; }

.topic {
  flex: none;
  padding: 5px 13px;
  border: 1px solid var(--navy-700);
  font-family: var(--sign);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}
.topic:hover { border-color: var(--red-line); color: var(--paper); }
.topic[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: #fff; }
.topic--sub { font-size: 10px; opacity: 0.86; }
.topic__n { margin-left: 6px; opacity: 0.7; font-variant-numeric: tabular-nums; }

.ribbon__count {
  margin-left: auto;
  flex: none;
  padding-left: 14px;
  font-family: var(--sign);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--steel-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ================================ stage ================================= */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  align-items: start;
}

.results { padding: 16px var(--pad) 40px; min-width: 0; }

/* A channel with nothing to inspect gets the whole width. */
.stage--wide { grid-template-columns: minmax(0, 1fr); }

/* --- log rows ----------------------------------------------------------- */

.log { border-top: 1px solid var(--line-soft); }

.row {
  display: grid;
  grid-template-columns: 84px 74px minmax(0, 1fr) 216px 66px 34px;
  gap: 15px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}
.row:hover { background: var(--navy-900); }
.row[data-on] { background: var(--navy-900); }
.row[data-on] .row__cut { background: var(--red); color: #fff; padding: 3px 6px; margin: -3px -6px; }

.row__cut {
  font-family: var(--sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red-hi);
  font-variant-numeric: tabular-nums;
}
.row__thumb { height: 54px; background: #000; overflow: hidden; border: 1px solid var(--line-soft); }
.row__thumb img { height: 100%; width: 100%; object-fit: cover; }

.row__name {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.14s ease;
}
.row__name:hover { color: var(--red-hi); }
.row__snip { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--steel-dim); }
.row__refs { font-size: 13.5px; color: var(--steel); }
.row__ep { font-family: var(--sign); font-size: 10.5px; letter-spacing: 0.12em; color: var(--steel-dim); text-align: right; }

/* --- the shelf: where the log stops and the thumbnails start ------------ */

.shelf__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 26px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.shelf__name {
  margin: 0;
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.shelf__n {
  margin-left: auto;
  font-family: var(--sign);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
  font-variant-numeric: tabular-nums;
}

/* --- sheet (grid) ------------------------------------------------------- */
/*
   A cell carries what a row carries, stacked: the picture square, a badge saying
   whether the search found words inside it, the line it found, the words posted
   with it, and the references. Everything on it is read off the record.
*/

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cell:hover { border-color: var(--red-line); transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(0, 0, 0, 0.9); }
.cell[data-on] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

.cell__shot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-700);
}
.cell__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cell:hover .cell__shot img { transform: scale(1.03); }

/* The badge row that sits over the picture. */
.cell__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  /* clear of the bookmark, which sits in the same corner */
  padding-right: 32px;
  pointer-events: none;
}
.badge {
  padding: 3px 8px;
  background: rgba(4, 10, 20, 0.86);
  border: 1px solid var(--navy-700);
  font-family: var(--sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The topic gives way; whether the search found words in the picture never does. */
.badge--topic { flex: 0 1 auto; min-width: 0; color: var(--paper); }
.badge--state { flex: none; }
.badge--hit { background: var(--red); border-color: var(--red); color: #fff; }
.badge--none { color: var(--steel-dim); }

/* What clicking does, said once, on hover. */
.cell__peek {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: linear-gradient(to top, rgba(4, 10, 20, 0.92), rgba(4, 10, 20, 0.2) 42%, transparent 70%);
  opacity: 0;
  transition: opacity 0.18s ease;
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-hi);
  pointer-events: none;
}
.cell:hover .cell__peek, .cell:focus-within .cell__peek { opacity: 1; }

.cell__body { display: flex; flex-direction: column; gap: 10px; padding: 13px 13px 14px; flex: 1; }

.cell__name {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.14s ease;
}
.cell__name::after { content: ''; position: absolute; inset: 0; }
.cell:hover .cell__name { color: var(--red-hi); }
.cell__name:focus-visible { outline: none; }

/* What the picture says, and what was posted with it. Two lines each. */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cell__read { padding: 8px 9px; background: var(--navy-950); border: 1px solid var(--line-soft); }
.cell__read .tag { display: block; margin-bottom: 3px; font-size: 9px; }
.cell__read p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--steel); }

.cell__said { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--steel-dim); }

.cell__foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cell__refs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ref {
  padding: 2px 7px;
  border: 1px solid var(--red-line);
  background: var(--red-wash);
  font-size: 11.5px;
  color: #ffb3b0;
  white-space: nowrap;
}
.ref--more { border-color: transparent; background: none; color: var(--steel-dim); }

.cell__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--sign);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.cell__meta b { color: var(--red-hi); font-weight: 700; }

/* Kept: the bookmark, on both row and cell. */
.keep {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--steel-dim);
  transition: color 0.14s ease;
}
.keep .icon { width: 15px; height: 18px; }
.keep:hover { color: var(--red-hi); }
.keep[aria-pressed='true'] { color: var(--red); }
.keep[aria-pressed='true'] .icon { fill: var(--red); }
.cell .keep { position: absolute; top: 4px; right: 4px; z-index: 3; background: rgba(4, 10, 20, 0.8); }

/* The matched words, wherever they are quoted. */
.hit { background: var(--red); color: #fff; padding: 0 3px; font-weight: 600; }

/* ============================== inspector =============================== */

.inspector {
  position: sticky;
  top: calc(var(--head-h) + var(--controls-h, 118px));
  max-height: calc(100vh - var(--head-h) - var(--controls-h, 118px));
  overflow-y: auto;
  padding: 16px var(--pad) 34px;
  background: var(--navy-900);
  border-left: 1px solid var(--line);
}

.insp__close { display: none; }

.insp__cut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.insp__title {
  margin: 6px 0 12px;
  font-family: var(--cond);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --- the picture, with what was read out of it drawn on it -------------- */

.shot { position: relative; display: inline-block; max-width: 100%; background: #000; border: 1px solid var(--line-soft); }
.shot img { max-width: 100%; max-height: 46vh; width: auto; height: auto; }

.box {
  position: absolute;
  border: 1.5px solid rgba(143, 168, 200, 0.45);
  background: rgba(143, 168, 200, 0.07);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.box[data-hit] {
  border-color: var(--red);
  background: rgba(229, 36, 43, 0.24);
  box-shadow: 0 0 0 1px rgba(229, 36, 43, 0.5), 0 0 16px rgba(229, 36, 43, 0.32);
}
.box[data-active] { background: rgba(229, 36, 43, 0.42); border-width: 2px; }
.box__n {
  position: absolute;
  top: -9px;
  left: -1px;
  padding: 1px 6px;
  background: var(--red);
  color: #fff;
  font-family: var(--sign);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.shot.is-off .box { display: none; }

.insp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 10px;
  padding: 8px 11px;
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  font-size: 12.5px;
  color: var(--steel);
}
.insp__bar button { color: var(--steel); white-space: nowrap; transition: color 0.14s ease; }
.insp__bar button:hover { color: var(--red-hi); }

.switch { display: inline-flex; align-items: center; gap: 8px; }
.switch i {
  position: relative;
  width: 32px;
  height: 17px;
  background: var(--navy-700);
  transition: background-color 0.16s ease;
}
.switch i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: var(--steel);
  transition: transform 0.16s ease, background-color 0.16s ease;
}
.switch[aria-pressed='true'] i { background: var(--red); }
.switch[aria-pressed='true'] i::after { transform: translateX(15px); background: #fff; }

.insp__sec { margin-top: 15px; }

.quote {
  margin: 7px 0 0;
  padding: 10px 13px;
  background: var(--navy-950);
  border-left: 1px solid var(--red);
  font-size: 14px;
  line-height: 1.6;
  color: #c6d6ea;
}

.step { display: flex; align-items: center; gap: 8px; }
.step button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border: 1px solid var(--navy-700);
  color: var(--steel);
}
.step button:hover { border-color: var(--red); color: var(--paper); }
.step button[disabled] { opacity: 0.35; cursor: default; }
.step button[disabled]:hover { border-color: var(--navy-700); color: var(--steel); }
.step .icon { width: 12px; height: 12px; }

.pill {
  display: inline-block;
  padding: 3px 11px;
  margin: 0 5px 5px 0;
  border: 1px solid var(--red-line);
  background: var(--red-wash);
  font-size: 13px;
  color: #ffb3b0;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.pill:hover { background: var(--red); color: #fff; }

.teaching {
  margin: 7px 0 0;
  padding: 13px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  font-size: 14.5px;
  line-height: 1.68;
  color: #c6d6ea;
  white-space: pre-line;
}

.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--navy-700);
  font-family: var(--sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--red); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hi); border-color: var(--red-hi); }
.btn--on { background: var(--navy-700); border-color: var(--red); color: #fff; }

/* --- the thread --------------------------------------------------------- */

.thread { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.said { margin: 0 0 13px; }
.said__who {
  margin: 0;
  font-family: var(--sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.said__who span { margin-left: 8px; letter-spacing: 0.16em; color: var(--red-hi); font-weight: 600; }
.said p { margin: 1px 0 0; font-size: 14.5px; color: var(--steel); }
.thread__none { margin: 0; font-size: 14px; color: var(--steel-dim); }
.thread__none button { color: var(--red-hi); border-bottom: 1px solid currentColor; }

.write { display: grid; gap: 9px; margin-top: 12px; }
.write textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  padding: 9px 11px;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  color: var(--paper);
  font-family: var(--text);
  font-size: 15px;
}
.write textarea:focus { outline: none; border-color: var(--red); }
.write .btn { justify-self: start; }

/* ============================== notices ================================= */

.note {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 var(--pad) 14px;
  padding: 11px 15px;
  background: var(--navy-900);
  border: 1px solid var(--red-line);
  font-size: 14px;
  color: var(--steel);
}
.note b { color: var(--paper); }

.blank { max-width: 46ch; padding: 54px 0 30px; }
.blank__line {
  margin: 0 0 8px;
  font-family: var(--cond);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
}
.blank p { margin: 0; color: var(--steel); }
.blank button { color: var(--red-hi); border-bottom: 1px solid currentColor; }

.dead { aspect-ratio: 3 / 2; border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--navy-900) 34%, var(--navy-800) 50%, var(--navy-900) 66%) 0 0 / 300% 100%;
  animation: carrier 1.4s linear infinite; }
@keyframes carrier { to { background-position: -300% 0; } }

/* =========================== episodes & stack =========================== */

.part { padding: 6px 0 0; }
.part__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.part__name {
  margin: 0;
  font-family: var(--sign);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.part__aside { margin: 0 0 0 auto; max-width: 40ch; font-size: 14px; color: var(--steel-dim); }

/* --- the episodes: the show's own records, with its own stills --- */

.seasons { display: flex; flex-wrap: wrap; gap: 7px; padding: 22px 0 0; }

.shows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
  padding-top: 22px;
}

.show {
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.show:hover { border-color: var(--red-line); transform: translateY(-2px); }

.show__still {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-700);
}
.show__still img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.show:hover .show__still img { transform: scale(1.03); }

.show__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 38px;
  background: rgba(4, 10, 20, 0.72);
  border: 1px solid var(--red);
  color: var(--red-hi);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.show__play .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.show:hover .show__play { background: var(--red); color: #fff; }

.show__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 16px; flex: 1; }

.show__no {
  margin: 0;
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.show__name { margin: 0; font-family: var(--cond); font-size: 24px; font-weight: 600; line-height: 1.04; text-transform: uppercase; }
.show__name a:hover { color: var(--sky-hi); }
.show__blurb {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--steel);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }

/* --- the downloads --- */

.shelf { padding-top: 30px; }
.shelf__note { margin: -6px 0 0; font-size: 14.5px; color: var(--steel-dim); }

.files {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 8px;
}

.file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.file:hover { border-color: var(--red); background: var(--navy-850); }
.file__icon { display: grid; place-items: center; color: var(--steel-dim); }
.file__icon .icon { width: 17px; height: 17px; }
.file:hover .file__icon { color: var(--red-hi); }
.file__name { min-width: 0; font-family: var(--cond); font-size: 19px; font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.file__name i {
  display: block;
  font-family: var(--text);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  color: var(--steel-dim);
}
.file__size {
  margin-left: auto;
  flex: none;
  font-family: var(--sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--steel-dim);
  font-variant-numeric: tabular-nums;
}
.file:hover .file__size { color: var(--paper); }

.deck { display: grid; justify-items: center; gap: 22px; padding: 26px 0 0; }
.deck__stage { position: relative; width: min(360px, 100%); aspect-ratio: 3 / 4; }
.deck__stage::before, .deck__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
}
.deck__stage::before { transform: rotate(-1.6deg) translateY(5px); }
.deck__stage::after { transform: rotate(1deg) translateY(2px); }
.deck__card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: #000;
  border: 1px solid var(--navy-600);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.32s ease;
}
.deck__card img { max-height: 100%; width: auto; object-fit: contain; }
.deck__card--pass { transform: translateX(-46%) rotate(-8deg); opacity: 0; }
.deck__card--keep { transform: translateX(46%) rotate(8deg); opacity: 0; }
.deck__cap { text-align: center; max-width: 46ch; }
.deck__cap h3 { margin: 0; font-family: var(--cond); font-size: 24px; font-weight: 600; text-transform: uppercase; }
.deck__keys { font-family: var(--sign); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-dim); }
.deck__keys b { color: var(--red-hi); font-weight: 700; }

/* =============================== sign in ================================ */

.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 12, 0.88);
  animation: dim 0.18s ease-out;
}
@keyframes dim { from { opacity: 0; } }

.panel {
  position: relative;
  width: min(420px, 100%);
  padding: 26px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-top: 3px solid var(--red);
}
.panel__title { margin: 6px 0 16px; font-family: var(--cond); font-size: 30px; font-weight: 600; text-transform: uppercase; line-height: 1; }
.panel__close { position: absolute; top: 12px; right: 12px; color: var(--steel-dim); }
.panel__close:hover { color: var(--red-hi); }
.panel__close .icon { width: 16px; height: 16px; }

.field { display: grid; gap: 5px; margin-bottom: 12px; }
.field label { font-family: var(--sign); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); }
.field input {
  padding: 10px 12px;
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  color: var(--paper);
  font-family: var(--text);
  font-size: 16px;
}
.field input:focus { outline: none; border-color: var(--red); }
.bad { margin: 0 0 10px; color: var(--red-hi); font-size: 14px; }
.fine { margin: 14px 0 0; font-size: 13.5px; color: var(--steel-dim); }

/* ======================= station identification ========================= */
/*
   What the station says about itself, on air. It sits at the top of the sign-off
   on every page, at reading size rather than as fine print, next to the same
   lamp the head carries — because a station ID is something that goes out, not
   something filed in a footer.
*/

.ident {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  align-items: start;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.ident__lamp {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 36, 43, 0.18), 0 0 16px rgba(229, 36, 43, 0.55);
}

.ident__words {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.36;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-wrap: pretty;
}

.ident__sign {
  margin: 0;
  font-family: var(--sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-hi);
}

@media (max-width: 620px) {
  .ident { gap: 6px 13px; }
  .ident__lamp { margin-top: 9px; }
}

/* =============================== sign-off =============================== */

.signoff {
  padding: 30px var(--pad) 48px;
  background: var(--navy-900);
  border-top: 1px solid var(--line);
}
.signoff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.signoff h3 { margin: 0 0 8px; font-family: var(--sign); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-hi); }
.signoff ul { margin: 0; padding: 0; list-style: none; }
.signoff li { padding: 3px 0; font-size: 15px; color: var(--steel); }
.signoff li a:hover, .signoff li button:hover { color: var(--paper); }
.signoff li i { font-style: italic; font-size: 13px; color: var(--steel-dim); }
.signoff__note { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); max-width: 74ch; font-size: 13.5px; color: var(--steel-dim); }

/* ============================== responsive ============================== */

@media (max-width: 1240px) { :root { --panel-w: 370px; } .row { grid-template-columns: 74px 64px minmax(0, 1fr) 60px 32px; } .row__refs { display: none; } }

@media (max-width: 1080px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .meters { height: 46px; }

  /* The inspector becomes a sheet that comes up over the results. */
  .inspector {
    position: fixed;
    inset: 0;
    z-index: 80;
    max-height: none;
    border-left: none;
    border-top: 3px solid var(--red);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 52px;
  }
  .inspector.is-open { transform: translateY(0); }
  .insp__close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--navy-700);
    color: var(--steel);
  }
  .insp__close .icon { width: 15px; height: 15px; }
  .shot img { max-height: 42vh; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .st { gap: 8px; padding: 0 14px; }
  .st__sign img { height: 26px; }
  .st__air { display: none; }
  .controls { position: static; }
  .ribbon { position: sticky; top: var(--head-h); z-index: 50; background: var(--navy-900); }
  .omni { flex-wrap: wrap; }
  .omni input { flex-basis: 60%; }
  .omni select { flex: 1; border-left: none; border-top: 1px solid var(--navy-700); padding: 9px 12px; }
  .omni__go { flex: 1; padding: 11px; border-top: 1px solid var(--red); }
  .row { grid-template-columns: 58px 52px minmax(0, 1fr) 30px; gap: 10px; }
  .row__ep { display: none; }
  .row__name { font-size: 18px; }
  .sheet { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .cell__name { font-size: 16px; }
  .cell__read, .cell__said { display: none; }
}

/* =============================== arrival ================================ */

.up { animation: up 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes up { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================ one cut, its own page ===================== */
/*
   The log's inspector is for looking while you keep searching. This is the page
   you send someone: the picture gets the column, the argument gets reading size,
   and the thread runs full width under both.
*/

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px var(--pad) 60px;
}

.trail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.trail__back { display: inline-flex; align-items: center; gap: 7px; color: var(--steel); }
.trail__back:hover { color: var(--red-hi); }
.trail__back .icon { width: 13px; height: 13px; }
.trail__cut { color: var(--red-hi); font-variant-numeric: tabular-nums; }
.trail__date { margin-left: auto; }

.page__body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: start;
  padding: 26px 0 0;
}

/* The frame shrink-wraps the picture. It has to: the OCR boxes are positioned in
   fractions of the frame, so any letterboxing inside it would slide them off the
   words they mark. */
.page__picture { position: sticky; top: calc(var(--head-h) + 16px); text-align: center; }
.page__picture .shot { max-width: 100%; }
.page__picture .shot img { max-width: 100%; max-height: 74vh; width: auto; height: auto; }
.page__picture .insp__bar, .page__picture .insp__sec { text-align: left; }

.page__title {
  margin: 0;
  font-family: var(--sign);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page__topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.page__topic {
  padding: 4px 11px;
  border: 1px solid var(--navy-700);
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.page__topic:hover { border-color: var(--red); color: var(--paper); }

.page__refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.page__refs .pill { margin: 0; font-size: 15px; padding: 5px 13px; }

.page__words {
  margin-top: 8px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.72;
  color: #c6d6ea;
  white-space: pre-line;
}

.page__thread { padding: 34px 0 0; margin-top: 34px; border-top: 1px solid var(--line); }
.page__said { max-width: 62ch; }

.page__near { padding-top: 12px; }

@media (max-width: 1000px) {
  .page__body { grid-template-columns: minmax(0, 1fr); }
  .page__picture { position: static; }
  .page__picture .shot img { max-height: 58vh; }
}

@media (max-width: 620px) {
  .trail__date { display: none; }
  .page__words { font-size: 16px; }
}

/* ============================== the store =============================== */

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
  padding-top: 26px;
}

.good {
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.good:hover { border-color: var(--red-line); transform: translateY(-2px); }

.good__shot { display: block; aspect-ratio: 4 / 3; background: #000; overflow: hidden; border-bottom: 1px solid var(--navy-700); }
.good__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.good:hover .good__shot img { transform: scale(1.03); }

.good__body { display: flex; flex-direction: column; gap: 10px; padding: 15px; flex: 1; }

.good__name {
  margin: 0;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
}
.good__name a:hover { color: var(--red-hi); }

.good__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin: 0; }
.good__price b { font-family: var(--sign); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--paper); }
.good__price s { font-family: var(--sign); font-size: 14px; color: var(--steel-dim); }
.good__price i {
  font-style: normal;
  font-family: var(--sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.good__body .btn { margin-top: auto; align-self: flex-start; }

/* ============================= the support ============================== */

.support__said {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.42;
  color: var(--paper);
  text-wrap: pretty;
}

.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  padding-top: 26px;
}

.way {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
}
.way__name { margin: 2px 0 0; font-family: var(--cond); font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1.04; }
.way__body { margin: 0; font-size: 15px; color: var(--steel); }
.way .btns { margin-top: auto; padding-top: 12px; }

@media (max-width: 620px) {
  .goods, .ways, .shows, .files { grid-template-columns: minmax(0, 1fr); }
}

/* ========================= a picture that isn't there ==================== */
/*
   Set by `picture()` when a load fails. Facebook links expire, hosts move,
   records outlive their files — a grid of broken-image glyphs reads as a broken
   site, so the frame says what happened instead.
*/

[data-missing] {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, var(--navy-900) 0 9px, var(--navy-850) 9px 18px);
}
[data-missing]::after {
  content: 'No signal';
  font-family: var(--sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-dim);
  text-align: center;
  padding: 0 8px;
}
.row__thumb[data-missing]::after { font-size: 0; }
.row__thumb[data-missing] { background-size: 8px 8px; }

/* ========================== the library, standing by ==================== */
/*
   Not an empty grid. Memes reach the library from the Facebook page through the
   app, so an empty library names which link is missing and points at the four
   channels that never depended on it.
*/

.offair {
  max-width: 60ch;
  padding: 46px 0 34px;
}
.offair__line {
  margin: 8px 0 14px;
  font-family: var(--sign);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--paper);
}
.offair__body { margin: 0 0 12px; font-size: 16.5px; color: var(--steel); }
.offair__body b { color: var(--paper); font-weight: 600; }
.offair .btns { margin-top: 16px; }

/* The show's own sentence, quoted under the headline. */
.hero__quote { display: block; }
.hero__from {
  display: block;
  margin-top: 9px;
  font-family: var(--sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-hi);
}

/* ============================== coming soon ============================= */
/*
   The store's own state while its products have nowhere to be bought. The lamp
   is the same one the head carries, so the page reads as off air rather than
   unfinished.
*/

.soon { max-width: 54ch; padding: 52px 0 40px; }

.soon__lamp {
  width: 11px;
  height: 11px;
  margin: 0 0 20px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(229, 36, 43, 0.18), 0 0 22px rgba(229, 36, 43, 0.6);
}

.soon__line {
  margin: 0 0 18px;
  font-family: var(--sign);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: var(--paper);
}

.soon__body { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--steel); }
.soon .btns { margin-top: 18px; }