@font-face{font-family:"IBM Plex Mono";src:url(/assets/plex-mono-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/plex-mono-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Serif";src:url(/assets/plex-serif-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Serif";src:url(/assets/plex-serif-400i.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --ground:#0B0E0F; --ground-edge:#141A1C;
  --phosphor:#C8DDE8; --phosphor-dim:#6E838E; --glow:#6FA8D6;
  --signal:#9E4030; --seam:#6FA8D6; --seam-dim:#3E6382;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --serif:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --scan:0.236;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:#050708}
body{
  margin:0; background:var(--ground); color:var(--phosphor);
  font-family:var(--mono); font-size:0.9375rem; line-height:1.62;
  font-variant-ligatures:none;
  /* Phosphor persistence. Every lit pixel bleeds slightly into the glass. */
  text-shadow:0 0 1px rgba(200,221,232,.55), 0 0 5.0px rgba(111,168,214,0.10);
}

/* Content never moves. */
.sheet *,.sheet *::before,.sheet *::after{transition:none!important}

/* ── the tube ──────────────────────────────────────────────────────────────── */

/* Scanlines and shadow mask. Two separate gratings at different pitches, because a
   real tube has both and the moiré between them is most of what sells it. */
.tube{
  position:fixed; inset:0; pointer-events:none; z-index:80;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--scan)) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(to right,
      rgba(255,80,80,.045) 0 1px, rgba(80,255,120,.045) 1px 2px, rgba(90,140,255,.045) 2px 3px);
  mix-blend-mode:multiply;
}

/* Bloom and the corner falloff of a tube that is losing emission. */
.tube-bloom{
  position:fixed; inset:0; pointer-events:none; z-index:81;
  background:
    radial-gradient(ellipse 120% 100% at 50% 45%,
      rgba(111,168,214,0.017) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse 92% 88% at 50% 50%,
      rgba(0,0,0,0) 52%, rgba(0,0,0,0.39) 100%);
}

/* The hum bar. Mains ripple the power supply no longer smooths, drifting slowly up the
   screen because the display's vertical rate and the mains are not quite locked. This
   is the single most legible "failing" cue and it costs one element. */
.tube-hum{
  position:fixed; left:0; right:0; height:26vh; top:0; z-index:82;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(180,214,236,0.010) 45%,
    rgba(180,214,236,0.014) 52%,
    rgba(255,255,255,0) 100%);
  animation:roll 17.0s linear infinite;
}
@keyframes roll{from{transform:translateY(-30vh)}to{transform:translateY(105vh)}}

/* Flicker. Aperiodic on purpose — a regular pulse reads as a strobe, not a fault. */
.tube-bloom{animation:flick 7.3s steps(1,end) infinite}
@keyframes flick{
  0%,42%,44%,71%,72%,100%{opacity:1}
  43%{opacity:.86}
  71.5%{opacity:.93}
  88%{opacity:.9}
}

@media (prefers-reduced-motion:reduce){
  .tube-hum{display:none}
  .tube-bloom{animation:none}
}

/* ── layout ───────────────────────────────────────────────────────────────── */
.sheet{max-width:58rem; margin:0 auto; padding:3rem 1.75rem 5rem; position:relative; z-index:10}

a{color:var(--seam); text-decoration:none; border-bottom:1px solid rgba(111,168,214,.32)}
a:hover,a:focus{border-bottom-color:var(--seam)}
a:focus-visible{outline:1px solid var(--seam); outline-offset:3px}

/* ── masthead, with burn-in ───────────────────────────────────────────────── */
/* This block has been in the same place for years. Phosphor does not forget. */
.mast{border-bottom:1px solid rgba(200,221,232,.28); padding-bottom:.85rem; margin-bottom:2.5rem}
.mast .org{
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  font-size:0.8125rem; color:var(--phosphor);
  text-shadow:0 0 1px rgba(200,221,232,.7), 0 0 10px rgba(111,168,214,0.14),
              0 0 22px rgba(111,168,214,0.07);
}
.mast .sub{color:var(--phosphor-dim); font-size:0.8125rem; margin-top:.15rem}

/* ── docket blocks ────────────────────────────────────────────────────────── */
.docket{
  border:1px solid rgba(200,221,232,.2); border-left:2px solid var(--seam);
  padding:1.15rem 1.35rem; margin:0 0 2rem; background:var(--ground-edge);
}
.docket dl{display:grid; grid-template-columns:max-content 1fr; gap:.15rem .75rem; margin:0}
.docket dt{color:var(--phosphor-dim); white-space:nowrap}
.docket dt::after{content:" " attr(data-leader)}
.docket dd{margin:0; font-weight:500}
.obligation{
  margin:1.15rem 0 0; padding-top:.85rem; border-top:1px solid rgba(200,221,232,.16);
  color:var(--phosphor-dim); font-size:0.8125rem; max-width:46ch;
}

/* ── headings ─────────────────────────────────────────────────────────────── */
/* Convergence error: the guns are no longer aligned, and it is worse on larger type
   because the deflection angle is larger. Subtle enough to be felt, not read. */
h1{
  font-size:1.5rem; font-weight:500; margin:0 0 .35rem; letter-spacing:.01em;
  text-shadow:-0.20px 0 rgba(255,90,90,.34),
              0.20px 0 rgba(90,170,255,.34),
              0 0 12px rgba(111,168,214,0.12);
}
h2{
  font-size:0.6875rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--phosphor-dim);
  margin:2.75rem 0 .9rem; padding-bottom:.35rem;
  border-bottom:1px solid rgba(200,221,232,.16);
}

/* ── prose ────────────────────────────────────────────────────────────────── */
.prose,.notice{
  font-family:var(--serif); font-size:1.125rem; line-height:1.58;
  max-width:58ch; margin:0 0 1.1rem;
}
.notice.advisory{color:var(--phosphor-dim)}
.notice.determination{
  border-left:2px solid var(--signal); padding-left:.9rem;
  color:var(--phosphor-dim); font-size:0.9375rem;
  text-shadow:0 0 8px rgba(158,64,48,.35);
}

/* ── tables ───────────────────────────────────────────────────────────────── */
table{border-collapse:collapse; width:100%; font-size:0.8125rem; font-variant-numeric:tabular-nums}
caption{
  text-align:left; color:var(--phosphor-dim); font-size:0.6875rem;
  letter-spacing:.16em; text-transform:uppercase; padding-bottom:.5rem;
}
th{
  text-align:left; font-weight:500; color:var(--seam);
  border-bottom:1px solid rgba(111,168,214,.4); padding:.4rem .6rem .35rem 0;
  font-size:0.6875rem; letter-spacing:.12em; text-transform:uppercase;
}
td{padding:.34rem .6rem .34rem 0; border-bottom:1px solid rgba(200,221,232,.09)}
td.num,th.num{text-align:right; padding-right:1.4rem}
tr.closed td{color:var(--phosphor-dim)}
.scroll{overflow-x:auto}

/* ── the player: lab equipment, not a media player ────────────────────────── */
.rig{border:1px solid rgba(200,221,232,.22); background:var(--ground-edge); margin:0 0 2rem}
.rig-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.55rem .9rem; border-bottom:1px solid rgba(200,221,232,.14);
  font-size:0.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--phosphor-dim);
}
.rig-body{display:flex; align-items:center; gap:1rem; padding:.85rem .9rem}
.rig button{
  font-family:var(--mono); font-size:0.8125rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--seam); border:1px solid var(--seam-dim);
  padding:.45rem 1.1rem; cursor:pointer; min-width:6.5rem;
  text-shadow:0 0 8px rgba(111,168,214,.5);
}
.rig button:active{background:var(--seam-dim); color:var(--ground)}
.counter{
  font-size:1.125rem; font-weight:500; font-variant-numeric:tabular-nums;
  letter-spacing:.06em; color:var(--phosphor);
  text-shadow:0 0 2px rgba(200,221,232,.8), 0 0 14px rgba(111,168,214,.5);
}
.level{display:flex; gap:2px; align-items:flex-end; height:1.5rem; margin-left:auto}
.level i{width:3px; height:.4rem; background:rgba(200,221,232,.16); display:block}
.level i.lit{height:1.5rem; background:var(--seam); box-shadow:0 0 6px var(--seam)}

/* ── spectrogram ──────────────────────────────────────────────────────────── */
figure{margin:0 0 2rem}
figure img{
  display:block; width:100%; height:auto; image-rendering:pixelated;
  border:1px solid rgba(200,221,232,.18);
  /* The image is being displayed by the same failing tube as everything else. */
  filter:saturate(.85) contrast(1.06) brightness(.94);
}
figcaption{color:var(--phosphor-dim); font-size:0.6875rem; margin-top:.4rem}

/* ── withheld ─────────────────────────────────────────────────────────────── */
.withheld{color:var(--signal); text-shadow:0 0 9px rgba(158,64,48,.55)}
.redaction{background:rgba(200,221,232,.9); color:transparent; user-select:none; padding:0 .25em}
.seam{color:var(--seam); text-shadow:0 0 9px rgba(111,168,214,.5)}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{
  margin-top:4.5rem; padding-top:1.1rem; border-top:1px solid rgba(200,221,232,.16);
  color:var(--phosphor-dim); font-size:0.6875rem; display:flex;
  justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.standing{max-width:52ch}

@media (max-width:34rem){
  .sheet{padding:2rem 1.1rem 3.5rem}
  .rig-body{flex-wrap:wrap}
  .level{margin-left:0; width:100%}
}