/* =============================================================================
   t41m.co  —  "PHOSPHOR" : an 8-bit CRT terminal / TUI dialog aesthetic
   -----------------------------------------------------------------------------
   Design language: ncurses-style dialog panels glowing on a CRT tube.
   Two display fonts only (Press Start 2P + VT323), one dominant color story
   (phosphor on near-black), green by default with an amber alt-mode.
   Everything snaps to an 8px pixel grid. No rounded corners anywhere.
   ============================================================================= */

/* ---- THEME TOKENS -------------------------------------------------------- */
:root {
  /* green phosphor (P1) — the default tube */
  --bg:        #06080a;   /* CRT black, faint cyan-green cast            */
  --bg-soft:   rgba(52, 255, 122, 0.045); /* barely-lifted panel fill   */
  --text:      #7df29b;   /* body phosphor                              */
  --bright:    #d6ffe2;   /* near-white phosphor (headings / hover)     */
  --accent:    #34ff7a;   /* live phosphor (links, prompts, carets)     */
  --dim:       #2f9d5a;   /* burned-in phosphor (meta, captions)        */
  --line:      #173a27;   /* panel borders / rules                      */
  --glow:      rgba(52, 255, 122, 0.55);  /* halo color for text-shadow */
  --img-tint:  #34ff7a;   /* portrait duotone hue                       */

  /* pixel grid + rhythm (multiples of 8) */
  --u: 8px;

  /* fonts */
  --display: "Press Start 2P", monospace;
  --term: "VT323", "Courier New", monospace;
}

/* amber phosphor (P3) — swapped via the [P1]/[P3] toggle */
:root[data-phos="amber"] {
  --bg:       #0a0806;
  --bg-soft:  rgba(255, 180, 61, 0.05);
  --text:     #f2c87d;
  --bright:   #ffe9c2;
  --accent:   #ffb43d;
  --dim:      #9d6b2f;
  --line:     #3a2a13;
  --glow:     rgba(255, 180, 61, 0.5);
  --img-tint: #ffb43d;
}

/* ---- RESET --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--term);
  font-size: 22px;          /* VT323 reads small; size it up */
  line-height: 1.45;
  letter-spacing: .3px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: none;     /* keep the pixels crunchy */
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

img { display: block; max-width: 100%; image-rendering: pixelated; }

a {
  color: var(--accent);
  text-decoration: none;
  text-shadow: 0 0 6px var(--glow);
}
a:hover { color: var(--bright); }

::selection { background: var(--accent); color: var(--bg); text-shadow: none; }

/* ---- CRT SCREEN EFFECTS -------------------------------------------------- */
/* Static scanlines + a soft tube vignette, painted over everything.         */
.crt::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background:
    /* horizontal scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0)   0,
      rgba(0,0,0,0)   2px,
      rgba(0,0,0,.22) 3px,
      rgba(0,0,0,.22) 3px),
    /* faint vertical phosphor stripe (aperture grille) */
    repeating-linear-gradient(
      to right,
      rgba(255,0,80,.03), rgba(0,255,120,.02) 1px,
      rgba(0,80,255,.03) 2px, rgba(0,0,0,0) 3px);
}
/* tube vignette + slow rolling refresh bar */
.crt::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9001;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* the rolling refresh line lives on its own element so it can animate */
.crt-roll {
  position: fixed; left: 0; right: 0; height: 28vh;
  top: -28vh; z-index: 8999; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.025) 50%,
    rgba(255,255,255,0) 100%);
  animation: roll 7s linear infinite;
}
@keyframes roll { to { transform: translateY(160vh); } }

/* whole-screen flicker — extremely subtle, just enough to feel "alive" */
.crt { animation: flicker 6s infinite steps(1); }
@keyframes flicker {
  0%,19%,21%,55%,57%,100% { opacity: 1; }
  20%   { opacity: .96; }
  56%   { opacity: .98; }
}

/* ---- LAYOUT -------------------------------------------------------------- */
/* full-bleed terminal: fill the whole screen, with proportional side gutters
   that grow on very wide monitors. Inner text keeps its own readable caps. */
.wrap {
  max-width: none;
  margin: 0;
  padding: calc(var(--u) * 4) clamp(16px, 5vw, 140px) calc(var(--u) * 8);
}

/* prompt-style site bar at the very top */
.statusbar {
  display: flex; flex-wrap: wrap; gap: var(--u);
  align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--line);
  padding-bottom: var(--u);
  margin-bottom: calc(var(--u) * 4);
  font-size: 20px; color: var(--dim);
}
.statusbar .path { color: var(--text); }
.statusbar .path b { color: var(--accent); }

/* ---- TYPOGRAPHY ---------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.5; color: var(--bright); }

.display {
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 56px);
  color: var(--bright);
  text-shadow: 0 0 12px var(--glow), 0 0 2px var(--accent);
  letter-spacing: 1px;
}

.lede { font-size: 24px; color: var(--text); }
.muted { color: var(--dim); }
.accent { color: var(--accent); }

/* blinking block cursor */
.cursor {
  display: inline-block;
  width: .6em; height: 1.05em;
  background: var(--accent);
  margin-left: 2px; vertical-align: -2px;
  box-shadow: 0 0 8px var(--glow);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- TUI PANELS (the ncurses dialog box look) --------------------------- */
/* A bordered region whose title is notched into the top edge, like a
   dialog(1) / fieldset legend. This is the site's signature component.      */
.panel {
  position: relative;
  border: 2px solid var(--line);
  background: var(--bg-soft);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.5);
  margin: calc(var(--u) * 4) 0;
}
.panel__title {
  position: absolute; top: 0; left: var(--u);
  transform: translateY(-55%);
  background: var(--bg);          /* cuts the border behind the label */
  padding: 0 var(--u);
  font-family: var(--display);
  font-size: 13px;
  color: var(--accent);
  text-shadow: 0 0 8px var(--glow);
  letter-spacing: 1px;
}

/* ---- HERO / WHOAMI ------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 168px 1fr; gap: calc(var(--u) * 4); align-items: center; }

.portrait {
  position: relative; width: 168px; height: 168px;
  /* stacked pixel matte frame */
  box-shadow:
    0 0 0 2px var(--bg), 0 0 0 4px var(--line),
    0 0 0 6px var(--bg), 0 0 0 8px var(--accent),
    0 0 22px var(--glow);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
/* phosphor duotone: tint the grayscale portrait to the live tube color */
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background: var(--img-tint); mix-blend-mode: color; opacity: .55;
}
/* per-image scanlines, denser than the global ones */
.portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 2; 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,.35) 2px);
}

.whoami h1 { margin-bottom: var(--u); }
.whoami .handle { color: var(--dim); font-size: 22px; }
.whoami .handle b { color: var(--accent); }
.whoami .bio { margin-top: calc(var(--u) * 1.5); max-width: 44ch; }
.whoami .tags { margin-top: calc(var(--u) * 1.5); color: var(--dim); font-size: 19px; }
.whoami .tags span { color: var(--accent); }

/* ---- CREDENTIALS : primary professional links --------------------------- */
.cred-list { list-style: none; display: grid; gap: var(--u); }
.cred {
  display: grid;
  grid-template-columns: 1.5em minmax(9.5em, auto) 1fr auto;
  align-items: baseline; gap: var(--u);
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  border: 2px solid var(--line);
  color: var(--text);
  text-shadow: none;
  transition: background .12s steps(2), border-color .12s steps(2), color .12s steps(2);
}
.cred .caret { color: var(--dim); }
.cred .key   { color: var(--bright); font-family: var(--display); font-size: 12px; letter-spacing: .5px; }
.cred .val   { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred .go    { color: var(--dim); font-size: 18px; }

.cred:hover, .cred:focus-visible {
  outline: none;
  background: var(--bg-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 18px var(--glow), 0 0 14px var(--glow);
}
.cred:hover .caret, .cred:focus-visible .caret { color: var(--accent); animation: blink 1s steps(1) infinite; }
.cred:hover .key,   .cred:focus-visible .key   { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.cred:hover .val,   .cred:focus-visible .val   { color: var(--text); }
.cred:hover .go,    .cred:focus-visible .go    { color: var(--accent); }

/* ---- ELSEWHERE : secondary socials (icon row) --------------------------- */
.socials { display: flex; flex-wrap: wrap; gap: var(--u); }
.social {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .75);
  padding: var(--u) calc(var(--u) * 1.25);
  border: 2px solid var(--line);
  color: var(--dim); text-shadow: none;
  font-size: 18px; text-transform: lowercase;
  transition: color .12s steps(2), border-color .12s steps(2), background .12s steps(2);
}
.social svg { width: 22px; height: 22px; }
.social:hover, .social:focus-visible {
  outline: none; color: var(--accent); border-color: var(--accent);
  background: var(--bg-soft); box-shadow: 0 0 12px var(--glow);
}

/* ---- BLOG LIST ----------------------------------------------------------- */
.posts { list-style: none; display: grid; gap: var(--u); }
.post-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--u) calc(var(--u) * 2);
  align-items: baseline;
  padding: calc(var(--u) * 1.5);
  border-left: 3px solid var(--line);
  transition: border-color .12s steps(2), background .12s steps(2);
}
.post-row:hover, .post-row:focus-within { border-left-color: var(--accent); background: var(--bg-soft); }
.post-row time { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.post-row .title { font-size: 24px; color: var(--bright); }
.post-row:hover .title { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.post-row .meta { grid-column: 2; color: var(--dim); font-size: 17px; margin-top: 2px; }

.tag {
  display: inline-block; padding: 0 6px; margin-right: 4px;
  border: 1px solid var(--dim); color: var(--accent);
  font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
}

/* ---- FOOTER -------------------------------------------------------------- */
.foot {
  margin-top: calc(var(--u) * 6);
  border-top: 2px solid var(--line);
  padding-top: calc(var(--u) * 2);
  display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 3);
  align-items: center; justify-content: space-between;
  color: var(--dim); font-size: 18px;
}
/* 90s hit counter — odometer digits */
.counter { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.counter .digit {
  background: #000; color: var(--accent);
  border: 1px solid var(--line);
  padding: 0 5px; font-family: var(--term); font-size: 20px;
  text-shadow: 0 0 6px var(--glow); font-variant-numeric: tabular-nums;
}

/* ---- THEME TOGGLE -------------------------------------------------------- */
.phos-toggle {
  display: inline-flex; border: 2px solid var(--line); text-shadow: none;
}
.phos-toggle button {
  font-family: var(--display); font-size: 11px;
  background: transparent; color: var(--dim);
  border: 0; padding: 6px 9px; cursor: pointer;
}
.phos-toggle button[aria-pressed="true"] {
  background: var(--accent); color: var(--bg); text-shadow: none;
}

/* ---- BOOT SEQUENCE OVERLAY ---------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--bg); color: var(--accent);
  font-family: var(--term); font-size: 20px; line-height: 1.4;
  padding: calc(var(--u) * 4) calc(var(--u) * 4);
  white-space: pre-wrap; overflow: hidden;
  text-shadow: 0 0 6px var(--glow);
}
#boot .skip {
  position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3);
  color: var(--dim); font-size: 16px;
}
#boot.done { animation: bootOut .45s ease forwards; }
@keyframes bootOut {
  0%   { opacity: 1; transform: scaleY(1); }
  60%  { opacity: 1; transform: scaleY(.6); filter: brightness(2.5); }
  100% { opacity: 0; transform: scaleY(.002); filter: brightness(6); visibility: hidden; }
}

/* ---- BLOG POST (long-form prose) ---------------------------------------- */
.post-head { margin-bottom: calc(var(--u) * 4); }
.post-head h1 { font-size: clamp(20px, 4.5vw, 30px); line-height: 1.55; margin-bottom: var(--u); }
.post-head .post-meta { color: var(--dim); font-size: 19px; }

.prose { font-size: 22px; line-height: 1.6; }   /* full-width terminal text */
.prose h2 {
  font-family: var(--display); font-size: 16px; color: var(--accent);
  text-shadow: 0 0 8px var(--glow);
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 1.5);
  padding-left: calc(var(--u) * 1.5); border-left: 4px solid var(--accent);
}
.prose h2::before { content: "## "; color: var(--dim); }
.prose p { margin: calc(var(--u) * 1.5) 0; }
.prose a { word-break: break-word; }
.prose ul, .prose ol { margin: var(--u) 0 var(--u) calc(var(--u) * 3); }
.prose code {
  font-family: var(--term); font-size: .95em;
  background: #000; color: var(--accent);
  border: 1px solid var(--line); padding: 0 5px;
}
.prose img {
  border: 2px solid var(--line);
  margin: calc(var(--u) * 2) 0;
  width: auto; max-width: 100%;   /* native size, capped to container (stays crisp) */
  filter: grayscale(.15) contrast(1.04);
}
.prose figure { margin: calc(var(--u) * 2) 0; }
.prose figcaption { color: var(--dim); font-size: 16px; margin-top: 4px; }

/* extra Markdown blocks (rendered by marked) */
.prose h3 {
  font-family: var(--display); font-size: 13px; color: var(--bright);
  margin: calc(var(--u) * 3) 0 var(--u);
}
.prose h3::before { content: "### "; color: var(--dim); }
.prose pre {
  background: #000; border: 2px solid var(--line);
  padding: calc(var(--u) * 2); margin: calc(var(--u) * 2) 0; overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text); font-size: 19px; }
.prose blockquote {
  border-left: 4px solid var(--accent); color: var(--dim);
  margin: calc(var(--u) * 2) 0; padding: 2px 0 2px calc(var(--u) * 2);
}
.prose hr { border: 0; border-top: 2px dashed var(--line); margin: calc(var(--u) * 3) 0; }
.prose table { border-collapse: collapse; width: 100%; margin: calc(var(--u) * 2) 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.prose th { color: var(--bright); }

/* async states for the client-rendered blog */
.loading, .empty, .error-box { color: var(--dim); padding: calc(var(--u) * 1.5) 0; }
.error-box { color: var(--accent); }
.loading::after { content: "_"; animation: blink 1s steps(1) infinite; }

.backlink {
  display: inline-block; margin-bottom: calc(var(--u) * 3);
  color: var(--accent);
}
.backlink::before { content: "[ "; color: var(--dim); }
.backlink::after  { content: " ]"; color: var(--dim); }

/* ---- RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 620px) {
  body { font-size: 20px; }
  .wrap { padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 6); }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .whoami .bio { margin-inline: auto; }
  .cred { grid-template-columns: 1em 1fr auto; }
  .cred .val { display: none; }            /* drop URLs on small screens */
  .post-row { grid-template-columns: 1fr; }
  .post-row .meta { grid-column: 1; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ---- ACCESSIBILITY : honour reduced-motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .crt, .crt-roll, .cursor, .cred .caret { animation: none !important; }
  .crt-roll { display: none; }
  html { scroll-behavior: auto; }
  #boot.done { animation: none; opacity: 0; visibility: hidden; }
}

/* visible keyboard focus everywhere that isn't custom-styled above */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* no-JS fallback: never trap the page behind the boot overlay */
.no-js #boot { display: none; }