/* ==========================================================================
   base.css — tokens, reset, and the chrome shared by every page.

   Deliberately contains NO layout mode. The one-screen, non-scrolling
   treatment lives in screen.css (loaded by the landing and 404 pages); the
   scrolling document treatment lives in report.css. Keeping those out of here
   is what lets long reports scroll at all.
   ========================================================================== */

:root {
  /* Text tokens are solid values with measured contrast against --bg, so a
     colour's legibility doesn't depend on whatever it happens to sit on:

       --fg      16.8:1  wordmark, headings, emphasis
       --dim      9.8:1  report body copy            (WCAG AAA is 7:1)
       --faint    6.3:1  nav, domain, small labels   (WCAG AA is 4.5:1)
       --accent  11.2:1  rules, links, eyebrows

     They were previously translucent tints — --dim at 3.09:1 and --faint at
     1.36:1 — which is fine for a landing page that is one wordmark and two
     corner marks, and unreadable for the report pages, which are dense body
     copy in --dim. */
  --bg: #12121b;
  --fg: #f2f3f8;
  --dim: #b9bcc9;
  --faint: #9296a6;
  --accent: #7dd3fc;

  /* Deliberately below any contrast floor: the only things wearing this are
     the "EST. MMIV" and copyright marks in the bottom corners of the landing,
     which are decoration rather than information. Everything that has to be
     read — including the section nav in the top corner — uses --faint. */
  --whisper: rgba(242, 243, 248, 0.20);

  --rule: rgba(242, 243, 248, 0.14);
  --panel: rgba(242, 243, 248, 0.05);
  --warn: #fbbf24;
  --good: #6ee7b7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- backdrop (partials/backdrop.njk + assets/js/aurora.js) -------------- */

canvas#aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(80px) saturate(130%);
  transform: scale(1.2);
  opacity: 0.85;
}

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); }
  30% { transform: translate(3%, -4%); }
  50% { transform: translate(-7%, 6%); }
  70% { transform: translate(6%, 2%); }
  90% { transform: translate(-3%, 7%); }
}

/* --- corner labels ------------------------------------------------------- */

.corner {
  position: fixed;
  z-index: 3;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--whisper);
  opacity: 0;
  animation: fade 2s 1.8s ease forwards;
}
.corner.bl { left: 2rem; bottom: 1.8rem; }
.corner.br { right: 2rem; bottom: 1.8rem; }
.corner.tl { left: 2rem; top: 1.8rem; display: flex; gap: 1.4rem; }

.corner.tl a {
  color: var(--faint);
  text-decoration: none;
  transition: color 0.3s;
}
.corner.tl a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .corner.bl { left: 1.2rem; }
  .corner.br { right: 1.2rem; }
  .corner.tl { left: 1.2rem; top: 1.2rem; }
}

/* Shared keyframe — home.css relies on this too, so it stays in base. */
@keyframes fade { to { opacity: 1; } }

/* Present to assistive technology, absent from the page. Used where a visual
   element already says the thing — a scoreboard standing in for a heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .corner { animation-duration: 0.01s; animation-delay: 0s; }
}