/* ==========================================================================
   "phosphor" theme: a green-screen CRT terminal.
   Loaded after hud's style.css, so this file only holds the differences.
   ========================================================================== */

@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-400-normal.woff2) format("woff2"); }

:root {
  --bg: #020702;
  --bg-2: #031003;
  --surface: #061206;
  --surface-2: #0a1c0b;
  --line: #133a19;
  --line-2: #1f5a28;
  --text: #a8f0b4;
  --text-strong: #d6ffdc;
  --muted: #5c9a66;
  --accent: #39ff6a;
  --accent-2: #ffb000;
  --accent-2-text: #ffc94d;
  --accent-3: #7dffa0;
  --warn: #ffb000;
  --on-accent: #021405;
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
  --backdrop: rgba(1, 5, 1, .92);
  --stripe: rgba(57, 255, 106, .025);
  --radius: 0;

  --code-bg: #010501;
  --code-text: #a8f0b4;
  --code-inline: #ffc94d;
  --syn-comment: #3f7a4a;
  --syn-escape: #d6ffdc;
  --syn-number: #ffd27a;
  --syn-builtin: #b4ffc4;
  --syn-op: #7fd08e;
  --syn-punct: #5c9a66;

  --font-display: "VT323", var(--font-mono);
  --font-body: var(--font-mono);
}

body {
  font-size: 1rem;
  line-height: 1.75;
  text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  background-image:   /* scanlines live in the background, so photos are never covered */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, rgba(57, 255, 106, .07), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%);
  background-size: auto;
}
@media (min-width: 900px) { body { font-size: 1.04rem; } }
::selection { background: var(--accent); color: var(--on-accent); }

a:hover { color: var(--text-strong); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }

/* header: a status line */
.site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line-2); }
.site-header::after { background: var(--accent); opacity: .25; }
.brand__chip { color: var(--on-accent); background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 0; }
.brand__name { font: 400 1.7rem/1 var(--font-display); letter-spacing: .03em; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.brand { padding: .3rem .45rem; margin-left: -.45rem; border: 1px solid transparent; }
.brand:hover { border-color: var(--accent); }
.nav a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: none; }
.nav a[aria-current="page"] { color: var(--accent); border-color: var(--accent); background: none; }
.nav__dot { color: inherit; opacity: .6; }

/* type */
.section-label { color: var(--accent-2); }
.post__title { font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.post__meta, .card__meta, .listing time { color: var(--accent-2); }
.prose h2, .prose h3 { font-weight: 400; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.prose h2 { font-size: clamp(1.9rem, 4.6vw, 2.5rem); border-top: 1px dashed var(--line-2); }
.prose h3 { font-size: clamp(1.55rem, 3.6vw, 1.85rem); }
.prose h2::before { content: "## "; color: var(--muted); }
.prose h3::before { content: "### "; color: var(--muted); }
.h-anchor { display: none; }
.prose ul > li::before { content: "*"; color: var(--accent-2); }
.prose blockquote { border-left: 0; background: none; padding: 0 0 0 1.6em; position: relative; color: var(--text); }
.prose blockquote::before { content: ">"; position: absolute; left: 0; color: var(--accent-2); }
.prose hr { background: none; border-top: 1px dashed var(--line-2); }

/* cards: plain terminal panes */
.card { background: var(--surface); border-color: var(--line-2); }
.card::before, .card::after { display: none; }
.card:hover { transform: none; border-color: var(--accent); }
.card__title { font-weight: 400; font-size: 1.85rem; line-height: 1.05; }
.card__title a:hover { background: none; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.card__title a::before { content: "> "; color: var(--accent-2); }
.card__media img, .card:hover .card__media img { filter: none; }   /* photos keep their true colours */
.card__media:not(.card__media--glyph)::after { display: none; }
.card__glyph { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; letter-spacing: .12em; color: var(--accent); border-color: var(--accent); }
.tag { color: var(--accent-2-text); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); background: none; }
.tag:hover { color: var(--on-accent); background: var(--accent-2); border-color: var(--accent-2); }

/* figures and code */
.fig__link::before, .fig__link::after { border-color: var(--accent-2); }
.fig figcaption::before { color: var(--accent-2); }
.code { border-color: var(--line-2); box-shadow: none; }
.code__bar { background: var(--accent); border-bottom: 0; }
.code__lang { color: var(--on-accent); font-weight: 700; }
.code__copy { color: var(--on-accent); border-color: var(--on-accent); }
.code__copy:hover { background: var(--on-accent); color: var(--accent); }
.prose th, .prose tr:first-child td strong { color: var(--accent-2); }

/* end-of-article, post nav, comments */
.post-nav__link { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.post-nav__link:hover { color: var(--accent); background: var(--surface-2); }
.comment--owner > .comment__head, .comment--owner > .comment__body { border-left-color: var(--accent-2); }

/* listings */
.archive__title { font: 400 1.9rem/1 var(--font-display); }
.archive__title a { color: var(--accent-2); }
.listing a:hover { color: var(--accent); }

/* 404 */
.gameover__code { font-weight: 400; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.gameover__title { color: var(--accent-2); }
.btn { color: var(--accent); border-color: var(--accent); }
.btn:hover { background: var(--accent); color: var(--on-accent); }

.site-footer { background: none; }
.site-footer__links a::before { color: var(--accent-2); }
.site-footer__links a:hover { color: var(--accent); }

@media print { body { text-shadow: none; } }