/* Five Lazy — green-phosphor CRT terminal theme */
:root {
  --bg: #020a04;
  --green: #4dff70;        /* phosphor */
  --green-soft: #37c957;
  --green-dim: #1f7d3a;    /* prompts, secondary */
  --green-bright: #c9ffd6; /* emphasis */
  --glow: rgba(77, 255, 112, 0.45);
  --maxw: 46rem;
  --pixel: "VT323", ui-monospace, "Courier New", monospace;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--green);
  font: 400 17px/1.7 var(--mono);
  text-shadow: 0 0 4px var(--glow);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* CRT overlays — scanlines + vignette/flicker. Never block clicks. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.28) 2px, rgba(0, 0, 0, 0.28) 3px);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  animation: flicker 4s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.82; }
  98% { opacity: 1; }
  99% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .cursor { animation: none; opacity: 1; }
}

a { color: var(--green-bright); text-decoration: none; border-bottom: 1px solid var(--green-dim); }
a:hover { background: var(--green); color: var(--bg); text-shadow: none; border-bottom-color: var(--green); }

.cursor {
  display: inline-block;
  color: var(--green-bright);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.prompt { color: var(--green-dim); text-shadow: 0 0 4px rgba(31,125,58,0.5); }

/* Shared terminal column */
.terminal { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }

/* ---- Landing ---- */
.screen { flex: 1; display: flex; align-items: center; }
.boot { font-family: var(--mono); color: var(--green-soft); margin: 0 0 1.75rem; white-space: pre-wrap; font-size: 0.95rem; }
.wordmark {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(4rem, 16vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 1.75rem;
  color: var(--green-bright);
  text-shadow: 0 0 10px var(--glow), 0 0 24px rgba(77,255,112,0.25);
}
.lines p { margin: 0.35rem 0; }
.lines .out { color: var(--green); padding-left: 0; }
.lines .out.indent { padding-left: 1.5ch; }

/* ---- Content pages ---- */
.cmd { color: var(--green-dim); margin: 0 0 2rem; }
.cmd a { border-bottom-color: transparent; }
.page h1 {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
  color: var(--green-bright);
  text-shadow: 0 0 8px var(--glow);
}
.page .updated { color: var(--green-dim); font-size: 0.9rem; margin: 0 0 2.25rem; }
.page .lede { color: var(--green-bright); }
.page h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-bright); margin: 2.5rem 0 0.5rem; }
.page h2::before { content: "> "; color: var(--green-dim); }
.page p, .page li { color: var(--green); }
.page ul { list-style: none; padding-left: 0; }
.page li::before { content: "- "; color: var(--green-dim); }
.page strong { color: var(--green-bright); font-weight: 400; }
.back-cmd { margin-top: 3rem; color: var(--green-dim); }
.back-cmd a { border-bottom-color: transparent; }