/* ==========================================================================
   RUG PATROL — dispatch.css
   A broadsheet printed on a dark screen.

   The Dispatch is a record, so it is set like one: a fixed masthead, hairline
   rules instead of boxes, a real table for the register, and colour spent only
   where it means something — green for born, red for signed, amber for the ones
   the office is still waiting on. The site's palette, unchanged, so an issue
   and the street are plainly the same place.
   ========================================================================== */

:root {
  --bg:        #070B10;
  --bg-1:      #0B1119;
  --bg-2:      #111A25;
  --line:      #1E2C3A;
  --line-soft: #16212C;
  --txt:       #E8EEF5;
  --txt-dim:   #8496A9;
  --txt-faint: #55677A;
  --green:     #00E05A;
  --amber:     #FFB454;
  --red:       #FF4D5E;
  --violet:    #A78BE8;
  --ice:       #6FD3FF;
  --f-pixel: "Silkscreen", "Courier New", monospace;
  --f-head:  "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono:  "IBM Plex Mono", Consolas, monospace;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.65 var(--f-mono);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--ice); }
a:hover { color: var(--txt); }

.wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 44px) 72px;
}

/* ------------------------------------------------------------- masthead */

.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 0 16px;
  border-bottom: 3px double var(--line);
}
.mast__mid { text-align: center; flex: 1 1 auto; min-width: 0; }
.mast__name {
  margin: 0;
  font-family: var(--f-pixel);
  font-size: clamp(18px, 4.4vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.mast__sub {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.mast__back {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--txt-dim);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.mast__back:hover { border-bottom-color: var(--txt-dim); }

/* ---------------------------------------------------------------- lede */

.dateline {
  margin: 26px 0 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.open {
  color: var(--amber);
  border: 1px solid currentColor;
  padding: 1px 6px;
  margin-left: 8px;
  letter-spacing: 0.14em;
}

.head {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(27px, 5.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
}

.stand {
  margin: 16px 0 0;
  max-width: 68ch;
  color: var(--txt-dim);
}
.stand:first-of-type { color: var(--txt); }

/* --------------------------------------------------------------- tally */

.tally {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 30px 0 0;
  padding: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.tally li { background: var(--bg-1); padding: 14px 16px; }
.tally b {
  display: block;
  font-family: var(--f-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tally li:nth-child(1) b { color: var(--green); }
.tally li:nth-child(2) b { color: var(--red); }
.tally li:nth-child(3) b { color: var(--amber); }
.tally span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-faint);
}

.fine { margin: 12px 0 0; font-size: 12px; color: var(--txt-faint); max-width: 74ch; }

/* -------------------------------------------------------------- section */

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.rule::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

.panel { background: var(--bg-1); border: 1px solid var(--line-soft); padding: clamp(14px, 3vw, 24px); }
.panel--flush { padding: 0; overflow-x: auto; }

/* ----------------------------------------------------------------- bars */

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bars li { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 44px; align-items: center; gap: 14px; }
.bar__label { font-size: 13px; }
.bar__track { height: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.bar__track i { display: block; height: 100%; background: var(--red); }
.bar__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--txt-dim); }

/* ---------------------------------------------------------------- notes */

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.note { background: var(--bg-1); border: 1px solid var(--line-soft); border-top: 2px solid var(--line); padding: 16px; }
.note__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-faint); }
.note__t { display: block; margin: 6px 0 8px; font-family: var(--f-head); font-size: 22px; }
.note p { margin: 0; font-size: 13px; color: var(--txt-dim); }
.note code { display: block; margin-top: 12px; font-size: 10px; color: var(--txt-faint); word-break: break-all; }

/* ------------------------------------------------------------- register */

.reg { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg th {
  position: sticky; top: 0;
  background: var(--bg-2);
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-faint);
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.reg td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.reg tr:last-child td { border-bottom: 0; }
.reg tbody tr:hover td { background: var(--bg-2); }
.reg .tick { font-family: var(--f-head); font-weight: 500; }
.reg .num { font-variant-numeric: tabular-nums; color: var(--txt-dim); text-align: right; }
.reg .addr code { font-size: 11px; color: var(--txt-faint); }
.reg .cause { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.c-the-plug { color: var(--red); }
.c-sold-back { color: var(--amber); }
.c-never-bought { color: var(--txt-dim); }
.c-went-quiet { color: var(--violet); }

/* --------------------------------------------------------------- method */

.method { margin: 0; padding-left: 22px; display: grid; gap: 9px; color: var(--txt-dim); }
.method li { padding-left: 4px; }
.method b { color: var(--txt); }

/* ------------------------------------------------------ issues and nav */

.issues { list-style: none; margin: 0; padding: 0; }
.issues li { border-bottom: 1px solid var(--line-soft); }
.issues a {
  display: grid;
  grid-template-columns: 74px 190px 1fr auto;
  gap: 6px 20px;
  align-items: baseline;
  padding: 16px 4px;
  text-decoration: none;
  color: inherit;
}
.issues a:hover { background: var(--bg-1); }
.issue__no { font-family: var(--f-pixel); font-size: 12px; color: var(--txt-faint); }
.issue__date { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-dim); }
.issue__head { font-family: var(--f-head); font-size: 17px; }
.issue__fig { font-size: 12px; color: var(--txt-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.issues .empty { padding: 18px 4px; color: var(--txt-faint); }

.issnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.issnav a { text-decoration: none; }
.issnav a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- footer */

.foot {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px clamp(16px, 5vw, 44px) 72px;
  border-top: 3px double var(--line);
  font-size: 12px;
  color: var(--txt-faint);
}
.foot p { margin: 0 0 10px; max-width: 80ch; }

@media (max-width: 760px) {
  .issues a { grid-template-columns: 1fr; gap: 2px; padding: 14px 4px; }
  .bars li { grid-template-columns: 1fr 44px; }
  .bars .bar__track { grid-column: 1 / -1; }
  .mast__back { display: none; }
}