:root {
  --neon: #39ff14;
  --neon-dim: #1c8a0a;
  --paper: #e8e2d0;
  --ink: #2a2a22;
  --stamp-red: #b3241f;
  --cyan-brite: #2ea7ff;
  --gold: #ffd23f;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  padding: 2rem 1.5rem 4rem;
  background: #050505;
  color: var(--neon);
  font-family: "Courier New", monospace;
  line-height: 1.6;
  text-shadow: 0 0 2px var(--neon-dim);
  overflow-x: hidden;
}

/* CRT scanlines + flicker, layered over everything but clicks pass through */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 15%) 0,
    rgb(0 0 0 / 15%) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: flicker 6s infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 70%) 100%);
}

@keyframes flicker {
  0%,
  96%,
  100% {
    opacity: 1;
  }

  97% {
    opacity: 0.85;
  }

  98% {
    opacity: 1;
  }

  99% {
    opacity: 0.9;
  }
}

main {
  position: relative;
  z-index: 1;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 rgb(255 255 255 / 12%),
    0 0 6px var(--neon-dim);
}

a {
  color: var(--neon);
}

a:hover,
a:focus {
  color: #fff;
}

/* terminal chrome shared by every page */
.terminal-header {
  max-width: 42rem;
  margin: 0 auto 2rem;
  border: 4px outset var(--neon-dim);
  padding: 1rem;
  box-shadow: inset 0 0 12px rgb(57 255 20 / 15%);
}

.banner {
  margin: 0.5rem 0;
  color: #ff2e2e;
  font-size: 2.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 rgb(255 255 255 / 25%),
    0 0 12px #ff2e2e;
}

.blink {
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

nav[aria-label="Primary"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin-top: 0.5rem;
}

nav[aria-label="Primary"] a[aria-current="page"] {
  color: #fff;
  text-decoration: none;
}

nav[aria-label="Primary"] a::before {
  content: "> ";
}

.slogan {
  font-size: 1.1rem;
  color: #fff;
  text-align: center;
}

/* "classified document" panel: a scanned paper look against the dark terminal */
.document {
  position: relative;
  margin: 2rem 0;
  border: 2px outset var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 3rem 1.5rem 1.5rem;
  font-family: "Courier New", monospace;
  text-shadow: none;
}

.doc-stamp {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  transform: rotate(-12deg);
  border: 3px solid var(--stamp-red);
  color: var(--stamp-red);
  padding: 0.15rem 0.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.redacted {
  background: #111;
  color: #111;
  user-select: none;
}

/* grainy evidence photo, built from SVG shapes + a turbulence filter — no image files */
.evidence-photo {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin: 1.5rem auto;
  border: 1px solid var(--neon-dim);
  filter: grayscale(1) contrast(1.1);
}

/* CSS-only pixel-art eye, drawn with one box-shadow per "pixel" */
.pixel-eye {
  width: 4px;
  height: 4px;
  margin: 0 auto 0.75rem;
  background: var(--neon);
  box-shadow:
    4px 0 var(--neon),
    8px 0 var(--neon),
    12px 0 var(--neon),
    -4px 4px var(--neon),
    16px 4px var(--neon),
    -8px 8px var(--neon),
    0 8px var(--neon),
    12px 8px var(--neon),
    20px 8px var(--neon),
    -8px 12px var(--neon),
    4px 12px var(--neon),
    8px 12px var(--neon),
    20px 12px var(--neon),
    -8px 16px var(--neon),
    4px 16px var(--neon),
    8px 16px var(--neon),
    20px 16px var(--neon),
    -8px 20px var(--neon),
    0 20px var(--neon),
    12px 20px var(--neon),
    20px 20px var(--neon),
    -4px 24px var(--neon),
    16px 24px var(--neon),
    0 28px var(--neon),
    4px 28px var(--neon),
    8px 28px var(--neon),
    12px 28px var(--neon);
}

.case-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.case-list li {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.case-list li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.75rem;
  margin-left: -1.5rem;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* homepage news ticker */
.transmissions {
  margin: 2rem 0;
  border: 1px dashed var(--neon-dim);
  padding: 1rem;
}

.transmissions h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.15em;
}

.transmissions ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.transmissions li {
  margin: 0.6rem 0;
}

.transmissions li::before {
  content: "> ";
  color: var(--neon-dim);
}

/* case-files: short fake-news blurbs, each optionally linking to a full dossier */
.case-blurb {
  margin: 1.5rem 0;
  border-bottom: 1px solid var(--neon-dim);
  padding-bottom: 1.5rem;
}

.case-blurb h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.case-blurb .dossier-link {
  display: inline-block;
  margin-top: 0.4rem;
}

/* evidence: a small gallery of exhibits */
.exhibit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.exhibit {
  margin: 0;
  border: 2px outset var(--neon-dim);
  padding: 0.75rem;
}

.exhibit figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #fff;
}

/* ufo sightings: an uneasy red-tinted variant of the terminal look */
.sighting {
  margin: 2rem 0;
  border-left: 3px solid #ff2e2e;
  padding-left: 1rem;
}

.sighting blockquote {
  margin: 0.5rem 0;
  color: #ffb3b3;
  font-style: italic;
}

.sighting cite {
  display: block;
  margin-top: 0.4rem;
  color: var(--neon-dim);
  font-style: normal;
  font-size: 0.85rem;
}

footer {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 3rem auto 0;
  border-top: 1px dashed var(--neon-dim);
  padding-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--neon-dim);
}

.counter {
  padding: 0.2rem 0.5rem;
  background: #001400;
  color: var(--neon);
  font-weight: bold;
  letter-spacing: 0.3em;
  border: 3px solid #0a5a0a;
  border-top-color: #062606;
  border-left-color: #062606;
  box-shadow: inset 0 0 6px #000;
}

/* ================================================================
   MAXIMALISM PASS — table-based page shell, sidebars, and widgets
   ================================================================ */

/* --- marquee strip, sits under the banner in every page's header --- */
.marquee-strip {
  overflow: hidden;
  width: 100%;
  margin: 0.5rem 0 0;
  border: 2px dashed var(--stamp-red);
  background: #100;
  padding: 0.3rem 0;
}

marquee {
  display: block;
  width: 100%;
  color: var(--gold);
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* --- badge stack: a nested table of "link exchange" badges, declared before
   the page-frame rules below so its lower-specificity `td`/`tr` selectors
   don't trip stylelint's descending-specificity check --- */
.badge-stack {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.badge-stack td {
  padding: 0.5rem 0;
  text-align: center;
}

.badge {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin: 0 auto;
}

.rail-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--gold);
}

/* --- page frame: a real nested table layout, left/right sidebars flank the reading column --- */
.page-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0.75rem;
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(45deg, rgb(57 255 20 / 6%) 0, rgb(57 255 20 / 6%) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(-45deg, rgb(57 255 20 / 6%) 0, rgb(57 255 20 / 6%) 1px, transparent 1px, transparent 12px);
}

.page-frame > tbody > tr > td {
  vertical-align: top;
}

.side-rail {
  width: 12rem;
  padding: 0.5rem;
  border: 3px outset var(--neon);
}

.side-rail-right {
  border-color: var(--cyan-brite);
}

.content-col {
  border: 3px ridge var(--stamp-red);
  background: rgb(0 0 0 / 70%);
  padding: 0.5rem 1rem;
}

.content-col main {
  max-width: 42rem;
  margin: 0 auto;
}

.content-col :is(h1, h2, h3, p, blockquote, figcaption) {
  text-align: center;
}

/* --- beveled 90s button, used for badges' link-exchange frame and the guestbook form --- */
.btn-3d {
  display: inline-block;
  border: 3px outset #9c9c8e;
  background: var(--paper);
  color: var(--ink);
  padding: 0.35rem 0.9rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}

.btn-3d:active {
  border-style: inset;
}

/* --- under construction widget: relocated to its own hero page, see .uc-hero --- */
.uc-widget {
  margin: 1rem 0;
  text-align: center;
}

.uc-icon {
  display: block;
  width: 100%;
  max-width: 4rem;
  height: auto;
  margin: 0 auto 0.4rem;
}

.uc-widget.uc-hero {
  margin: 2rem 0;
}

.uc-widget.uc-hero .uc-icon {
  max-width: 9rem;
}

.uc-widget.uc-hero p {
  font-size: 1.3rem;
}

/* --- sidebar clutter: news bulletins + ufo-sighting teasers --- */
.sidebar-news,
.sidebar-sightings {
  margin: 0 0 1rem;
  border: 2px outset var(--neon-dim);
  padding: 0.5rem 0.6rem;
  list-style: none;
  font-size: 0.78rem;
}

.sidebar-news li,
.sidebar-sightings li {
  margin: 0.6rem 0;
}

.sidebar-news li::before {
  content: "> ";
  color: var(--gold);
}

/* --- rainbow section divider --- */
.rainbow-divider {
  height: 6px;
  margin: 2rem auto;
  border: 0;
  background: linear-gradient(90deg, red, orange, #fe0, limegreen, dodgerblue, indigo, violet);
}

.content-col .rainbow-divider {
  max-width: 42rem;
}

/* --- small heading icons, pure generated content, decorative only --- */
.heading-icon::before {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--gold);
  text-shadow: none;
}

.heading-icon-star::before {
  content: "\2605";
}

.heading-icon-new::before {
  content: "\2726";
}

.heading-icon-eye::before {
  content: "\25C9";
}

/* --- scoped throwback utilities: not a global palette change --- */
.font-comic {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif;
}

.link-classic {
  color: #00e;
  text-decoration: underline;
  text-shadow: none;
}

.link-classic:visited {
  color: #518;
}

.link-classic:hover,
.link-classic:focus {
  color: #e00;
}

/* --- guestbook entries + inert sign-in form --- */
.guestbook-entry {
  margin: 1.5rem 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 1rem;
  text-shadow: none;
}

.guestbook-entry .entry-meta {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #555;
}

.guestbook-form {
  margin: 2rem 0;
  border: 3px outset #9c9c8e;
  background: var(--paper);
  color: var(--ink);
  padding: 1rem;
  text-shadow: none;
}

.guestbook-form legend {
  padding: 0 0.5rem;
  font-weight: bold;
}

.guestbook-form label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: bold;
  text-align: left;
}

.guestbook-form input,
.guestbook-form textarea {
  width: 100%;
  border: 2px inset #9c9c8e;
  padding: 0.4rem;
  font-family: inherit;
}

.guestbook-form .btn-3d {
  margin-top: 1rem;
}

/* --- collapse the table shell to a single legible column at phone width --- */
@media (width <= 640px) {
  .badge-stack,
  .badge-stack tbody,
  .badge-stack tr,
  .badge-stack td {
    display: block;
    width: auto;
  }

  .page-frame,
  .page-frame > tbody {
    display: block;
    width: 100%;
  }

  .page-frame > tbody > tr {
    display: flex;
    flex-direction: column;
  }

  .content-col {
    order: -1;
    width: 100%;
  }

  .side-rail {
    order: 0;
    width: 100%;
  }

  .banner {
    font-size: 1.6rem;
  }
}