/* 1337 Software — shared site styles.
   Terminal palette + hero effects moved here from the old single-page index.html
   so every page renders as the same site. */

:root {
  color-scheme: dark;
  --bg:      #050806;
  --panel:   #08110d;
  --fg:      #c9ffe6;
  --body:    #a7d9c4;
  --green:   #00ff9c;
  --dim:     #1f7a58;
  --cyan:    #00e5ff;
  --magenta: #ff2e88;
  --amber:   #ffcc00;
  --line:    rgba(0,255,156,.14);
  --hue: 0deg;
  --nav-h: 3.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 15px/1.65 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--green); text-decoration: none; border-bottom: 1px dotted rgba(0,255,156,.4); }
a:hover, a:focus-visible { color: #eafff5; border-bottom-color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--green); color: #04150e; padding: .5rem .9rem; border: 0;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ── nav ──────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 clamp(.9rem, 3vw, 2rem);
  background: rgba(5,8,6,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(10px, 1.6vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
}
.nav .brand { color: var(--green); font-weight: 700; border: 0; letter-spacing: .1em; white-space: nowrap; }
.nav nav { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-left: auto; }
.nav nav a { color: var(--dim); border: 0; }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--green); }
.nav nav a[aria-current="page"] { color: var(--fg); }

/* ── page content ─────────────────────────────────────── */
.wrap { width: min(78ch, 92vw); margin: 0 auto; }
.page { padding: clamp(2rem, 6vw, 4rem) 0 1rem; }
.section { padding: clamp(1.75rem, 5vw, 3.25rem) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }

h1, h2, h3 { color: #eafff5; line-height: 1.2; }
.page h1 { font-size: clamp(1.5rem, 5vw, 2.4rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.1rem, 3.2vw, 1.5rem); margin: 0 0 .9rem; }
h3 { font-size: clamp(.95rem, 2.4vw, 1.1rem); margin: 1.6rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
li { margin: .35rem 0; }
strong { color: var(--fg); font-weight: 600; }

.kicker {
  font-size: clamp(10px, 1.7vw, 12px); letter-spacing: .28em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 .75rem;
}
.lede { color: var(--fg); font-size: clamp(15px, 2.2vw, 17px); }
.meta { color: var(--dim); font-size: 13px; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  padding: 1.1rem 1.15rem; border-radius: 3px;
}
.card h3 { margin: 0 0 .5rem; color: var(--green); font-size: 1rem; }
.card p:last-child { margin: 0; }

.facts { border-collapse: collapse; width: 100%; font-size: 14px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: .55rem .75rem; border: 1px solid var(--line); }
.facts th { color: var(--dim); font-weight: 500; white-space: nowrap; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

.btn {
  display: inline-block; border: 1px solid var(--green); border-radius: 2px;
  padding: .6rem 1.1rem; color: var(--green); background: rgba(0,255,156,.06);
  letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
}
.btn:hover, .btn:focus-visible { background: var(--green); color: #04150e; border-bottom-color: var(--green); }
.btn.ghost { border-color: var(--line); color: var(--dim); background: none; }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--green); border-color: var(--green); background: rgba(0,255,156,.06); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.note {
  border-left: 2px solid var(--amber); background: rgba(255,204,0,.05);
  padding: .8rem 1rem; margin: 0 0 1.25rem; color: var(--fg);
}

/* ── site footer ──────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  margin-top: clamp(2rem, 6vw, 4rem);
  color: var(--dim); font-size: 13px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-bottom: .9rem; }
.site-foot nav a { color: var(--dim); border: 0; }
.site-foot nav a:hover, .site-foot nav a:focus-visible { color: var(--green); }
.site-foot p { margin: .25rem 0; }

/* ── hero (index only) ────────────────────────────────── */
/* Deliberately SHORTER than the viewport. At a full 100svh the splash filled screen one and its
   own footer bar sat at the bottom of it, so the page read as "no content" — every word of the
   site is below this hero. Leaving ~9rem means the next section's heading is always visible above
   the fold, which is the only reliable cue that there is more. `max()` keeps it sane on short
   viewports. scripts/smoke.mjs asserts the above-the-fold text census that this guarantees. */
.hero {
  position: relative;
  min-height: max(28rem, calc(100svh - var(--nav-h) - 9rem));
  overflow: hidden;
  color: var(--fg);
  filter: hue-rotate(var(--hue));
  transition: filter .8s ease;
}

#rain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: .7; }

/* sits BETWEEN the rain and the content — darkens the rain behind the type
   instead of dimming the type itself */
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at center,
      rgba(5,8,6,.93) 0%, rgba(5,8,6,.78) 40%, rgba(5,8,6,.3) 72%, transparent 100%),
    radial-gradient(ellipse at center,
      transparent 25%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.9) 100%),
    radial-gradient(ellipse at center, rgba(0,255,156,.05), transparent 60%);
}

.scanlines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,.28) 4px
  );
  mix-blend-mode: multiply;
  animation: roll 9s linear infinite;
}
@keyframes roll { to { background-position-y: 100vh; } }

.flicker {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(0,255,156,.03);
  animation: flick 7s steps(1) infinite;
}
@keyframes flick {
  0%,96%,100% { opacity: 0; }
  97% { opacity: .5; }
  98% { opacity: 0; }
  99% { opacity: .8; }
}

.stage {
  position: relative; z-index: 2;
  min-height: max(28rem, calc(100svh - var(--nav-h) - 9rem));
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(.9rem, 3vw, 2rem);
  gap: 1rem;
}

.bar {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: .6rem;
}
.bar b { color: var(--green); font-weight: 500; }
.bar .sep { color: rgba(0,255,156,.25); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite; vertical-align: middle;
  margin-right: .45rem;
}
@keyframes pulse { 50% { opacity: .25; box-shadow: 0 0 2px var(--green); } }

.core {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 0;
  padding: 1.5rem 0;
}

.boot {
  width: min(560px, 92vw);
  text-align: left;
  font-size: clamp(10px, 1.9vw, 12.5px);
  color: var(--dim);
  margin-bottom: clamp(1.2rem, 4vh, 2.4rem);
  min-height: 7.2em;
}
.boot div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot .ok   { color: var(--green); }
.boot .warn { color: var(--amber); }

.hero h1 {
  margin: 0;
  font-size: clamp(1.55rem, 8.5vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: #eafff5;
  text-shadow:
    0 0 6px rgba(0,255,156,.55),
    0 0 26px rgba(0,255,156,.35),
    0 0 60px rgba(0,255,156,.18);
  position: relative;
  white-space: nowrap;
}
.hero h1 .g {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .55;                 /* reads as chromatic aberration, not a swapped letter */
}
.hero h1 .g1 { color: var(--magenta); mix-blend-mode: screen; animation: gl1 3.4s steps(1) infinite; }
.hero h1 .g2 { color: var(--cyan);    mix-blend-mode: screen; animation: gl2 2.7s steps(1) infinite; }
@keyframes gl1 {
  0%,88%,100% { transform: none; clip-path: none; opacity: 0; }
  89% { transform: translate(-3px,1px); clip-path: inset(12% 0 62% 0); opacity: .9; }
  92% { transform: translate(4px,-2px); clip-path: inset(58% 0 18% 0); opacity: .9; }
  95% { transform: translate(-2px,0);   clip-path: inset(35% 0 44% 0); opacity: .8; }
}
@keyframes gl2 {
  0%,84%,100% { transform: none; clip-path: none; opacity: 0; }
  86% { transform: translate(3px,-1px); clip-path: inset(70% 0 8% 0);  opacity: .85; }
  90% { transform: translate(-4px,2px); clip-path: inset(20% 0 55% 0); opacity: .85; }
}

.rule {
  width: min(640px, 90vw); height: 1px; margin: clamp(1rem,3.2vh,1.9rem) 0;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: .5;
  position: relative;
}
.rule::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 22%; height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(1px);
  animation: sweep 3.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes sweep { 0% { left: -25%; } 100% { left: 103%; } }

.tag {
  font-size: clamp(11px, 2.4vw, 15px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,255,156,.5);
  margin: 0;
}
.sub {
  margin: .85rem 0 0;
  font-size: clamp(10px, 2vw, 13px);
  color: var(--dim);
  letter-spacing: .05em;
  max-width: 44ch;
}
.cursor { animation: blink 1.05s steps(1) infinite; color: var(--green); }
@keyframes blink { 50% { opacity: 0; } }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .35rem 1.25rem;
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}
/* The one affordance that says the page continues. Sits with the hero CTAs, not in the footer bar,
   because the footer bar is what people read as the end of the document. */
.scroll-cue {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem;
  color: var(--dim); border: 0;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--green); }
.scroll-cue span { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.foot b { color: var(--green); font-weight: 500; }
.foot a { color: var(--dim); text-decoration: none; border-bottom: 1px dotted rgba(0,255,156,.3); }
.foot a:hover, .foot a:focus-visible { color: var(--green); }

#godmode {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  font-size: clamp(1.2rem, 7vw, 4rem); font-weight: 700; letter-spacing: .3em;
  color: var(--amber); text-shadow: 0 0 30px var(--amber);
  /* backdrop keeps the banner legible where it crosses the title */
  background: radial-gradient(ellipse 46% 22% at center,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 55%, transparent 100%);
}
#godmode.on { animation: god 2.4s ease-out forwards; }
@keyframes god {
  0%   { opacity: 0; transform: scale(.7); }
  12%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scanlines, .flicker, .rule::after, .hero h1 .g, .dot, .scroll-cue span { animation: none; }
  .scanlines, .flicker { opacity: .18; }
  #rain { opacity: .22; }
}

/* ---------- news (/news, served by api/news.js) ---------- */
.news-hero { display: block; max-width: 100%; height: auto; margin: 1.5rem 0 0; border: 1px solid rgba(0, 255, 156, 0.18); }
.news-body img { max-width: 100%; height: auto; }
.news-body pre { overflow-x: auto; padding: 1rem; border: 1px solid rgba(0, 255, 156, 0.18); background: rgba(0, 0, 0, 0.35); }
.news-body blockquote { margin: 1rem 0; padding: 0 1rem; border-left: 3px solid rgba(0, 255, 156, 0.45); opacity: 0.9; }
.news-body hr { border: 0; border-top: 1px solid rgba(0, 255, 156, 0.18); margin: 2rem 0; }
.card time { font-variant-numeric: tabular-nums; }