/* ---------- error page: a broken CRT in the site's three colours ---------- */
body.err { background: var(--red); color: #0B0B0B; }
.err__stage { position: fixed; inset: 0 0 var(--bar) 0; overflow: hidden; background: var(--red); animation: errjit 5s steps(1) infinite; }
/* the whole picture slips sideways now and then */
@keyframes errjit { 0%, 100% { transform: none; } 61% { transform: translateX(-6px) skewX(-.6deg); } 62% { transform: translateX(9px); } 63% { transform: none; } 88% { transform: translateY(3px); } 89% { transform: none; } }

.err__logo { position: absolute; left: 50%; top: 34%; width: min(46vh, 60vw); height: min(46vh, 60vw); transform: translate(-50%, -50%); fill: #0B0B0B; filter: blur(.6px); }
.err__num { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font: 700 min(30vw, 46vh)/.8 var(--sans); letter-spacing: -.06em; color: #F2EFE8; }
/* two sliced copies of the number, pushed out of register */
.err__num::before, .err__num::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 0; }
.err__num::before { color: #0B0B0B; clip-path: inset(18% 0 58% 0); animation: slice 2.4s steps(1) infinite; }
.err__num::after { color: #0B0B0B; clip-path: inset(64% 0 22% 0); animation: slice 3.1s steps(1) infinite reverse; }
@keyframes slice { 0%, 100% { transform: translateX(0); } 12% { transform: translateX(-3vw); } 14% { transform: translateX(2vw); } 40% { transform: translateX(0); } 71% { transform: translateX(4vw); } 73% { transform: translateX(-1vw); } 76% { transform: translateX(0); } }

/* the bone bar that sweeps the screen and carries the way out */
.err__bar { position: absolute; left: 0; right: 0; top: 46%; height: 18px; background: #F2EFE8; display: flex; justify-content: center; animation: sweep 9s linear infinite; }
@keyframes sweep { 0% { top: 46%; } 45% { top: 46%; } 50% { top: 8%; } 55% { top: 82%; } 60% { top: 46%; } 100% { top: 46%; } }
.err__go { background: #0B0B0B; color: #F2EFE8; padding: 0 12px; line-height: 18px; font-size: 10px; white-space: nowrap; }
.err__go:hover { background: var(--red); }

.err__log { position: absolute; left: 30%; bottom: 4vh; font: inherit; line-height: 1.7; color: #0B0B0B; white-space: pre-wrap; }
.err__log::after { content: "_"; animation: blink 1s steps(2) infinite; }
.err__tl, .err__tr { position: absolute; top: var(--pad); } .err__tl { left: var(--pad); } .err__tr { right: var(--pad); text-align: right; }
.err__slab { position: absolute; background: #0B0B0B; filter: blur(3px); }
.err__slab--a { left: -4vw; bottom: -6vh; width: 20vw; height: 26vh; transform: skewX(6deg); }
.err__slab--b { right: 14vw; bottom: -8vh; width: 5vw; height: 30vh; transform: skewX(-8deg); }

/* scanlines, vignette and flicker over everything */
.err__crt { position: fixed; inset: 0 0 var(--bar) 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(11, 11, 11, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(11, 11, 11, .55) 100%);
  animation: flick 3.7s steps(1) infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 48% { opacity: 1; } 79% { opacity: .9; } 80% { opacity: 1; } }

.bar a.bar__cta { display: flex; align-items: center; }
@media (max-width: 760px) { .err__log { left: var(--pad); } .err__go { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .err__stage, .err__num::before, .err__num::after, .err__bar, .err__crt { animation: none; } }