/**
 * nes.css — NES/8-bit Design System
 * josephcharnin.com custom site
 * Aesthetic: NES console hardware + CRT phosphor + 2600 magazine cyberpunk
 * ADA: WCAG 2.1 AA compliant
 */

/* Google Fonts loaded via <link> in header.php — @import removed (render-blocking) */

/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* NES Console Hardware Colors */
  --nes-black:         #0A0A0A;
  --nes-bg:            #111111;
  --nes-surface:       #1C1C1C;
  --nes-surface-2:     #252525;
  --nes-surface-3:     #2E2E2E;
  --nes-casing:        #C0C0C0;   /* Original NES gray plastic */
  --nes-casing-dark:   #888888;
  --nes-casing-light:  #E0E0E0;
  --nes-red:           #E60012;   /* NES reset button */
  --nes-cartridge:     #C8960C;   /* Cartridge slot gold trim */

  /* CRT / Cyberpunk / 2600 Magazine */
  --phosphor-green:    #39FF14;   /* Primary accent — phosphor CRT green */
  --phosphor-dim:      #1A8507;   /* Dimmer green for large surfaces */
  --phosphor-bright:   #7FFF00;   /* Hover state — chartreuse */
  --phosphor-amber:    #FF8C00;   /* Amber terminal — 2600 era */
  --crt-white:         #E8E8D0;   /* Aged CRT off-white */
  --crt-blue:          #00BFFF;   /* Deep sky blue — link color */
  --crt-cyan:          #00FFFF;   /* Cyan accent */
  --scanline-alpha:    rgba(0, 0, 0, 0.10);

  /* Text */
  --text-primary:      #E8E8D0;
  --text-muted:        #9A9A8A;
  --text-green:        #39FF14;
  --text-amber:        #FF8C00;
  --text-link:         #7EB8FF;   /* Accessible blue — 5.5:1 on dark bg */
  --text-link-visited: #C78FFF;

  /* Semantic */
  --color-primary:     #39FF14;
  --color-danger:      #FF4444;
  --color-warning:     #FF8C00;
  --color-info:        #00BFFF;
  --color-success:     #39FF14;

  /* Spacing (8px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;

  /* Pixel borders */
  --border-px:         3px solid var(--phosphor-green);
  --border-dim:        3px solid var(--phosphor-dim);
  --border-amber:      3px solid var(--phosphor-amber);
  --border-red:        3px solid var(--nes-red);
  --shadow-px:         4px 4px 0 var(--nes-black);
  --shadow-glow:       0 0 12px rgba(57, 255, 20, 0.25),
                       0 0 24px rgba(57, 255, 20, 0.10);
  --shadow-glow-amber: 0 0 12px rgba(255, 140, 0, 0.30);

  /* Typography */
  --font-pixel:  'Press Start 2P', 'Courier New', monospace;
  --font-mono:   'Share Tech Mono', 'Courier New', monospace;

  /* Layout */
  --container-max:    1200px;
  --container-wide:   1400px;
  --radius-px:        0px;      /* Pure pixel aesthetic — no border-radius */

  /* Animation */
  --transition-px:    0.08s steps(2, end);
  --transition-std:   0.15s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--nes-bg);
  min-height: 100vh;
  overflow-x: hidden;
  /* Subtle phosphor screen noise */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(57, 255, 20, 0.04) 0%, transparent 60%);
}

/* CRT Scanline overlay — subtle, non-blocking */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--phosphor-green);
}

a:visited {
  color: var(--text-link-visited);
}

ul, ol {
  padding-left: var(--sp-4);
}

li {
  margin-bottom: var(--sp-1);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--phosphor-green);
  background: rgba(57, 255, 20, 0.08);
  padding: 2px 6px;
  border: 1px solid var(--phosphor-dim);
}

pre {
  font-family: var(--font-mono);
  background: var(--nes-black);
  border: var(--border-px);
  box-shadow: var(--shadow-px);
  padding: var(--sp-4);
  overflow-x: auto;
  margin: var(--sp-4) 0;
  color: var(--phosphor-green);
  font-size: 0.875rem;
  line-height: 1.6;
  position: relative;
}

/* Terminal prompt decoration on pre blocks */
pre::before {
  content: '> ';
  color: var(--phosphor-amber);
  font-family: var(--font-pixel);
  font-size: 0.625rem;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.toc-list li { counter-increment: toc; }
.toc-list a {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--nes-surface-3);
  transition: color var(--transition-std);
  line-height: 1.4;
}
.toc-list li:last-child a { border-bottom: none; }
.toc-list a::before {
  content: counter(toc, decimal-leading-zero) '. ';
  font-family: var(--font-pixel);
  font-size: 0.3125rem;
  color: var(--phosphor-amber);
  margin-right: 4px;
}
.toc-list a:hover,
.toc-list a.is-active { color: var(--phosphor-green); }
.toc-list a.is-active::before { color: var(--phosphor-green); }

.code-copy-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-family: var(--font-pixel);
  font-size: 0.3125rem;
  color: var(--text-muted);
  background: var(--nes-surface-2);
  border: 1px solid var(--nes-surface-3);
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-std), color var(--transition-std), border-color var(--transition-std);
  z-index: 1;
  line-height: 1.4;
}
pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { color: var(--phosphor-green); border-color: var(--phosphor-green); }
.code-copy-btn.copied { color: var(--phosphor-amber); border-color: var(--phosphor-amber); opacity: 1; }

/* Prism.js syntax highlighting — phosphor palette */
.token.comment,
.token.prolog,
.token.cdata          { color: var(--text-muted); font-style: italic; }
.token.punctuation    { color: var(--phosphor-dim); }
.token.property,
.token.number,
.token.boolean,
.token.null           { color: var(--phosphor-amber); }
.token.string,
.token.attr-value,
.token.char           { color: #7de87d; }
.token.keyword,
.token.atrule,
.token.function       { color: var(--phosphor-green); font-weight: 600; }
.token.operator,
.token.entity,
.token.url            { color: var(--text-primary); }
.token.important,
.token.bold           { font-weight: bold; }
.token.italic         { font-style: italic; }

#read-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--phosphor-green);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(57,255,20,0.5);
  pointer-events: none;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

blockquote {
  border-left: 4px solid var(--phosphor-amber);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  background: var(--nes-surface);
  color: var(--crt-white);
  font-style: italic;
}

hr {
  border: none;
  border-top: 3px solid var(--phosphor-dim);
  margin: var(--sp-6) 0;
  /* NES-style dashed line */
  background: repeating-linear-gradient(
    to right,
    var(--phosphor-dim) 0px,
    var(--phosphor-dim) 8px,
    transparent 8px,
    transparent 16px
  );
  border-top: 3px solid transparent;
  height: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: 0.9rem;
}

th {
  background: var(--nes-surface-2);
  color: var(--phosphor-green);
  font-family: var(--font-pixel);
  font-size: 0.625rem;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border: 2px solid var(--phosphor-dim);
}

td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nes-surface-3);
  color: var(--text-primary);
}

tr:nth-child(even) td {
  background: var(--nes-surface);
}

/* ============================================================
   4. ACCESSIBILITY
   ============================================================ */

/* Skip-to-content link — ADA requirement */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-3);
  background: var(--phosphor-green);
  color: var(--nes-black);
  font-family: var(--font-pixel);
  font-size: 0.625rem;
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  z-index: 99999;
  border: 3px solid var(--nes-black);
  box-shadow: var(--shadow-px);
  transition: top 0.1s;
}

.skip-link:focus {
  top: var(--sp-3);
}

/* Visible focus ring — all interactive elements */
:focus-visible {
  outline: 3px solid var(--phosphor-green);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(57, 255, 20, 0.20);
}

/* Remove default outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::after { display: none; }
}

/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-pixel);
  line-height: 1.4;
  color: var(--phosphor-green);
  letter-spacing: 0;
}

h1 { font-size: clamp(1rem, 3vw, 1.5rem);    margin-bottom: var(--sp-5); }
h2 { font-size: clamp(0.875rem, 2vw, 1.125rem); margin-bottom: var(--sp-4); }
h3 { font-size: clamp(0.75rem, 1.5vw, 0.9rem);  margin-bottom: var(--sp-3); }
h4 { font-size: 0.75rem;  margin-bottom: var(--sp-3); color: var(--phosphor-amber); }
h5 { font-size: 0.625rem; margin-bottom: var(--sp-2); color: var(--crt-white); }
h6 { font-size: 0.5625rem; margin-bottom: var(--sp-2); color: var(--text-muted); }

p {
  margin-bottom: var(--sp-4);
  font-size: 1rem;
  color: var(--text-primary);
}

p:last-child { margin-bottom: 0; }

strong, b {
  color: var(--crt-white);
  font-weight: normal; /* mono fonts don't really bold */
}

em, i {
  color: var(--phosphor-amber);
  font-style: normal;
}

/* Pixel cursor blink animation */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: var(--phosphor-green);
}

/* Boot sequence text animation */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

/* ============================================================
   6. LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: 800px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   7. NAVIGATION — NES console top panel inspired
   ============================================================ */
.site-header {
  background: var(--nes-surface);
  border-bottom: 4px solid var(--phosphor-green);
  box-shadow: 0 4px 0 var(--nes-black), var(--shadow-glow);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* The NES "label" area — logo strip */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  gap: var(--sp-4);
}

.site-logo {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.5vw, 0.75rem);
  color: var(--phosphor-green);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.site-logo:hover {
  color: var(--phosphor-bright);
}

/* NES power LED dot */
.logo-led {
  width: 8px;
  height: 8px;
  background: var(--nes-red);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--nes-red), 0 0 12px rgba(230, 0, 18, 0.4);
  animation: led-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Main navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.nav-list > li {
  position: relative;
  margin-bottom: 0;
  display: flex;
  align-items: stretch;
}

.nav-list > li > a,
.nav-list > li > button {
  display: flex;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--crt-white);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-std), background var(--transition-std);
  letter-spacing: 0.05em;
  line-height: 1;
}

.nav-list > li > a:hover,
.nav-list > li > button:hover,
.nav-list > li > a[aria-current="page"] {
  color: var(--phosphor-green);
  background: rgba(57, 255, 20, 0.08);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

/* Dropdown — sub-menu */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--nes-surface);
  border: 3px solid var(--phosphor-green);
  box-shadow: var(--shadow-px), var(--shadow-glow);
  list-style: none;
  padding: 0;
  min-width: 220px;
  z-index: 100;
  display: none;
}

.nav-list > li:hover .nav-dropdown,
.nav-list > li:focus-within .nav-dropdown {
  display: block;
}

.nav-dropdown li a {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--nes-surface-3);
  transition: background var(--transition-std);
}

.nav-dropdown li:last-child a {
  border-bottom: none;
}

.nav-dropdown li a::before {
  content: '► ';
  color: var(--phosphor-dim);
  font-size: 0.7em;
}

.nav-dropdown li a:hover {
  background: rgba(57, 255, 20, 0.12);
  color: var(--phosphor-green);
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 3px solid var(--phosphor-green);
  color: var(--phosphor-green);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  box-shadow: var(--shadow-px);
}

/* NES "START / SELECT" style badge */
.header-cta {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  background: var(--phosphor-green);
  color: var(--nes-black);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  border: 3px solid var(--nes-black);
  box-shadow: 3px 3px 0 var(--nes-black);
  white-space: nowrap;
  transition: transform var(--transition-px), box-shadow var(--transition-px);
}

.header-cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--nes-black);
  color: var(--nes-black);
}

/* ============================================================
   8. HERO — CRT Screen bezel
   ============================================================ */
.hero {
  padding: var(--sp-8) 0;
  position: relative;
  overflow: hidden;
}

/* Background grid lines — like a test pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* CRT screen container */
.hero-screen {
  display: inline-block;
  background: var(--nes-black);
  border: 10px solid var(--nes-casing);
  border-radius: 6px 6px 24px 24px;
  box-shadow:
    inset 0 0 80px rgba(57, 255, 20, 0.08),
    0 0 0 3px var(--nes-casing-dark),
    0 8px 0 var(--nes-casing-dark),
    12px 16px 0 rgba(0,0,0,0.6),
    var(--shadow-glow);
  padding: var(--sp-7) var(--sp-8);
  max-width: 900px;
  width: 100%;
  position: relative;
}

.hero-eyebrow {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--phosphor-amber);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  display: block;
}

.hero-title {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 3.5vw, 1.75rem);
  color: var(--phosphor-green);
  text-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.hero-title .highlight {
  color: var(--phosphor-amber);
}

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 2vw, 1.1rem);
  color: var(--text-primary);
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto var(--sp-6);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  margin: var(--sp-6) 0;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat-number {
  font-family: var(--font-pixel);
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--phosphor-green);
  display: block;
  text-shadow: var(--shadow-glow);
}

.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-1);
}

.hero-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.5625rem;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid;
  padding: var(--sp-3) var(--sp-5);
  transition: transform var(--transition-px), box-shadow var(--transition-px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* Primary — phosphor green (SELECT button) */
.btn--primary {
  background: var(--phosphor-green);
  color: var(--nes-black);
  border-color: var(--nes-black);
  box-shadow: 4px 4px 0 var(--nes-black), var(--shadow-glow);
}

.btn--primary:hover {
  background: var(--phosphor-bright);
  color: var(--nes-black);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--nes-black);
}

/* Secondary — amber (START button) */
.btn--secondary {
  background: transparent;
  color: var(--phosphor-green);
  border-color: var(--phosphor-green);
  box-shadow: 4px 4px 0 var(--phosphor-dim);
}

.btn--secondary:hover {
  background: rgba(57, 255, 20, 0.12);
  color: var(--phosphor-bright);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--phosphor-dim);
}

/* Danger / Reset button — NES red */
.btn--danger {
  background: var(--nes-red);
  color: var(--crt-white);
  border-color: var(--nes-black);
  box-shadow: 4px 4px 0 var(--nes-black);
}

.btn--sm {
  font-size: 0.4375rem;
  padding: var(--sp-2) var(--sp-3);
}

.btn--lg {
  font-size: 0.625rem;
  padding: var(--sp-4) var(--sp-6);
}

/* ============================================================
   10. PIXEL BOX / CARD COMPONENTS
   ============================================================ */
.pixel-box {
  background: var(--nes-surface);
  border: 3px solid var(--phosphor-green);
  box-shadow: var(--shadow-px), var(--shadow-glow);
  padding: var(--sp-4);
  position: relative;
}

/* Corner decoration — pixel art style */
.pixel-box--corners::before,
.pixel-box--corners::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--phosphor-green);
}

.pixel-box--corners::before { top: -3px; right: -3px; }
.pixel-box--corners::after  { bottom: -3px; left: -3px; }

.pixel-box--amber {
  border-color: var(--phosphor-amber);
  box-shadow: 4px 4px 0 var(--nes-black), var(--shadow-glow-amber);
}

.pixel-box--dim {
  border-color: var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
}

/* Card */
.card {
  background: var(--nes-surface);
  border: 3px solid var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
  transition: border-color var(--transition-std),
              box-shadow var(--transition-std),
              transform var(--transition-std);
  overflow: hidden;
}

.card:hover {
  border-color: var(--phosphor-green);
  box-shadow: 4px 4px 0 var(--nes-black), var(--shadow-glow);
  transform: translate(-2px, -2px);
}

.card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  /* Pixelate images slightly for aesthetic */
  image-rendering: crisp-edges;
  filter: contrast(1.05) saturate(0.85);
}

.card__image:hover {
  filter: contrast(1.1) saturate(1.0) brightness(1.05);
}

.card__body {
  padding: var(--sp-4);
}

.card__title {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--phosphor-green);
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--phosphor-bright);
  text-decoration: underline;
}

.card__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.card__excerpt {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--nes-surface-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   11. CATEGORY BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  padding: 3px var(--sp-2);
  border: 2px solid;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  transition: background var(--transition-std), color var(--transition-std);
}

.badge--green {
  color: var(--phosphor-green);
  border-color: var(--phosphor-dim);
  background: rgba(57, 255, 20, 0.06);
}

.badge--green:hover {
  background: rgba(57, 255, 20, 0.20);
  color: var(--phosphor-bright);
}

.badge--amber {
  color: var(--phosphor-amber);
  border-color: var(--phosphor-amber);
  background: rgba(255, 140, 0, 0.08);
}

.badge--amber:hover {
  background: rgba(255, 140, 0, 0.20);
}

.badge--red {
  color: var(--nes-red);
  border-color: var(--nes-red);
  background: rgba(230, 0, 18, 0.06);
}

.badge--gray {
  color: var(--text-muted);
  border-color: var(--nes-surface-3);
}

/* Tag list */
.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag-list li { margin-bottom: 0; }

/* ============================================================
   12. BLOG LISTING PAGE
   ============================================================ */
.page-hero {
  padding: var(--sp-7) 0 var(--sp-5);
  border-bottom: 3px solid var(--phosphor-dim);
  background: linear-gradient(
    to bottom,
    var(--nes-surface) 0%,
    var(--nes-bg) 100%
  );
}

.page-hero__label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--phosphor-amber);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: var(--sp-3);
}

.page-hero__label::before {
  content: '// ';
  color: var(--text-muted);
}

.page-hero__title {
  font-size: clamp(0.875rem, 2.5vw, 1.5rem);
  margin-bottom: var(--sp-3);
}

.page-hero__description {
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 640px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-7) 0;
}

/* Featured post — full-width first card */
.blog-grid .card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.blog-grid .card:first-child .card__image {
  aspect-ratio: auto;
  height: 100%;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
}

.pagination a,
.pagination span {
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--phosphor-dim);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-std);
}

.pagination a:hover,
.pagination .current {
  background: var(--phosphor-green);
  color: var(--nes-black);
  border-color: var(--nes-black);
}

/* ============================================================
   13. SINGLE POST
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
}

.post-layout > * {
  min-width: 0;
}

.post-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 3px solid var(--phosphor-dim);
}

.post-header__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.post-header__title {
  font-size: clamp(0.875rem, 2.5vw, 1.375rem);
  color: var(--phosphor-green);
  margin-bottom: var(--sp-4);
}

.post-header__meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.post-header__meta time::before { content: '📅 '; }
.post-header__meta .author::before { content: '👤 '; }

.post-featured-image {
  width: 100%;
  margin-bottom: var(--sp-6);
  border: 3px solid var(--nes-surface-3);
  box-shadow: var(--shadow-px);
}

/* Post content area */
.post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Tables inside posts scroll horizontally on narrow screens */
.post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.post-content h2 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--phosphor-dim);
}

.post-content h3 {
  margin-top: var(--sp-5);
  color: var(--phosphor-amber);
}

.post-content img {
  max-width: 100%;
  height: auto;
  border: 3px solid var(--nes-surface-3);
  box-shadow: var(--shadow-px);
  margin: var(--sp-4) auto;
}

.post-content ul { margin-bottom: var(--sp-4); }
.post-content ul li::marker { color: var(--phosphor-green); content: '► '; }
.post-content ol li::marker { color: var(--phosphor-green); }

/* Sidebar */
.sidebar {}

.sidebar-widget {
  background: var(--nes-surface);
  border: 3px solid var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
  margin-bottom: var(--sp-5);
}

.sidebar-widget__title {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--nes-black);
  background: var(--phosphor-green);
  padding: var(--sp-2) var(--sp-3);
  margin: 0;
  border-bottom: 3px solid var(--nes-black);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar-widget__title::before {
  content: '■';
  font-size: 0.4rem;
}

.sidebar-widget__body {
  padding: var(--sp-3);
}

.sidebar-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-posts li {
  border-bottom: 1px solid var(--nes-surface-3);
  margin-bottom: 0;
  padding: var(--sp-2) 0;
}

.sidebar-posts li:last-child { border-bottom: none; }

.sidebar-posts a {
  font-size: 0.75rem;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
  display: block;
}

.sidebar-posts a:hover {
  color: var(--phosphor-green);
}

.sidebar-posts time {
  display: block;
  font-size: 0.625rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Post footer nav */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 3px solid var(--phosphor-dim);
  margin-top: var(--sp-6);
}

.post-nav__item {
  padding: var(--sp-4);
  border: 3px solid var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
  text-decoration: none;
  transition: all var(--transition-std);
}

.post-nav__item:hover {
  border-color: var(--phosphor-green);
  background: var(--nes-surface);
}

.post-nav__label {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--sp-2);
}

.post-nav__title {
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.post-nav__item--next { text-align: right; }

/* ============================================================
   14. HOME PAGE SECTIONS
   ============================================================ */

/* Skills / Expertise grid */
.skills-section {
  padding: var(--sp-8) 0;
  position: relative;
}

.skills-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nes-surface);
  z-index: -1;
}

.section-header {
  text-align: center;
  margin-bottom: var(--sp-7);
}

.section-label {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--phosphor-amber);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: var(--sp-3);
}

.skill-card {
  background: var(--nes-surface-2);
  border: 3px solid var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
  padding: var(--sp-5);
  transition: all var(--transition-std);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.skill-card:hover {
  border-color: var(--phosphor-green);
  background: var(--nes-surface);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--nes-black), var(--shadow-glow);
}

.skill-card__icon {
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--phosphor-green);
  line-height: 1;
}

.skill-card__name {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--crt-white);
  margin-bottom: var(--sp-2);
}

.skill-card__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* About/Bio section */
.about-section {
  padding: var(--sp-8) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.about-image-wrap {
  width: 280px;
  flex-shrink: 0;
}

.about-image {
  width: 100%;
  border: 4px solid var(--phosphor-green);
  box-shadow: 8px 8px 0 var(--nes-black), var(--shadow-glow);
  /* Pixelate the image */
  image-rendering: auto;
  filter: contrast(1.05) saturate(0.9);
}

/* Terminal-style bio box */
.terminal-box {
  background: var(--nes-black);
  border: 3px solid var(--phosphor-green);
  box-shadow: var(--shadow-px), var(--shadow-glow);
  font-family: var(--font-mono);
  overflow: hidden;
}

.terminal-titlebar {
  background: var(--phosphor-green);
  color: var(--nes-black);
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.terminal-controls {
  display: flex;
  gap: 4px;
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nes-black);
  opacity: 0.5;
}

.terminal-body {
  padding: var(--sp-4);
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.terminal-body .prompt {
  color: var(--phosphor-green);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  margin-right: var(--sp-2);
}

.terminal-body .comment {
  color: var(--text-muted);
  font-style: normal;
}

.terminal-body .string {
  color: var(--phosphor-amber);
}

.terminal-body .keyword {
  color: var(--crt-cyan);
}

/* Certifications */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.cert-card {
  background: var(--nes-surface);
  border: 2px solid var(--nes-surface-3);
  box-shadow: 3px 3px 0 var(--nes-black);
  padding: var(--sp-4);
  text-align: center;
  text-decoration: none;
  display: block;
  transition: all var(--transition-std);
}

.cert-card:hover {
  border-color: var(--phosphor-amber);
  box-shadow: 3px 3px 0 var(--nes-black), var(--shadow-glow-amber);
}

.cert-card img {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto var(--sp-2);
  filter: grayscale(30%);
  transition: filter var(--transition-std);
}

.cert-card:hover img {
  filter: grayscale(0%);
}

.cert-card__name {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: var(--sp-2);
}

/* Projects section */
.projects-section {
  padding: var(--sp-8) 0;
  background: var(--nes-bg);
}

.project-card {
  background: var(--nes-surface);
  border: 3px solid var(--nes-surface-3);
  box-shadow: 4px 4px 0 var(--nes-black);
  padding: var(--sp-5);
  position: relative;
  transition: all var(--transition-std);
}

.project-card::before {
  content: attr(data-num);
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-family: var(--font-pixel);
  font-size: 2rem;
  color: var(--nes-surface-3);
  line-height: 1;
}

.project-card:hover {
  border-color: var(--phosphor-green);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--nes-black), var(--shadow-glow);
}

/* Reviews / Testimonials */
.reviews-section {
  padding: var(--sp-8) 0;
  background: var(--nes-surface);
}

.review-card {
  background: var(--nes-black);
  border: 2px solid var(--phosphor-dim);
  box-shadow: 4px 4px 0 var(--nes-black);
  padding: var(--sp-5);
  position: relative;
}

.review-card::before {
  content: '"';
  font-family: var(--font-pixel);
  font-size: 3rem;
  color: var(--phosphor-dim);
  line-height: 1;
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  opacity: 0.5;
}

.review-stars {
  color: var(--phosphor-amber);
  font-size: 0.875rem;
  letter-spacing: 2px;
  margin-bottom: var(--sp-3);
}

/* CTA section */
.cta-section {
  padding: var(--sp-8) 0;
  text-align: center;
  background: linear-gradient(
    to bottom,
    var(--nes-bg) 0%,
    var(--nes-surface) 100%
  );
}

/* ============================================================
   15. CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  align-items: start;
}

.contact-info__item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--nes-surface-3);
}

.contact-info__item:last-child { border-bottom: none; }

.contact-info__icon {
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--phosphor-amber);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.contact-info__label {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-1);
}

.contact-info__value {
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.contact-info__value a {
  color: var(--text-link);
}

/* Contact form — terminal input style */
.contact-form {
  background: var(--nes-black);
  border: 3px solid var(--phosphor-green);
  box-shadow: var(--shadow-px), var(--shadow-glow);
}

.form-group {
  margin-bottom: var(--sp-4);
}

.form-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--phosphor-green);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.form-label::before {
  content: '> ';
  color: var(--text-muted);
}

.form-input,
.form-textarea {
  width: 100%;
  background: var(--nes-surface);
  border: 2px solid var(--phosphor-dim);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: var(--sp-3);
  transition: border-color var(--transition-std), box-shadow var(--transition-std);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--phosphor-green);
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.20);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error {
  color: var(--nes-red);
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  margin-top: var(--sp-1);
  display: block;
}

.form-success {
  background: rgba(57, 255, 20, 0.12);
  border: 2px solid var(--phosphor-green);
  color: var(--phosphor-green);
  padding: var(--sp-4);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  text-align: center;
  margin-top: var(--sp-4);
}

/* Captcha display counter */
.form-count {
  font-size: 0.625rem;
  color: var(--text-muted);
  float: right;
  margin-top: var(--sp-1);
}

/* ============================================================
   16. BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--nes-surface-3);
  margin-bottom: var(--sp-5);
}

.breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  align-items: center;
}

.breadcrumb-list li {
  margin: 0;
  display: flex;
  align-items: center;
}

.breadcrumb-list li + li::before {
  content: ' > ';
  color: var(--text-muted);
  margin: 0 var(--sp-2);
}

.breadcrumb-list a {
  color: var(--text-link);
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--phosphor-green);
}

.breadcrumb-list [aria-current="page"] {
  color: var(--text-muted);
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
  background: var(--nes-surface);
  border-top: 4px solid var(--phosphor-green);
  box-shadow: 0 -4px 0 var(--nes-black);
  padding: var(--sp-7) 0 var(--sp-5);
  margin-top: var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.footer-brand {}

.footer-brand__logo {
  font-family: var(--font-pixel);
  font-size: 0.625rem;
  color: var(--phosphor-green);
  text-decoration: none;
  display: block;
  margin-bottom: var(--sp-3);
  text-shadow: var(--shadow-glow);
}

.footer-brand__tagline {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-col__title {
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  color: var(--phosphor-amber);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--nes-surface-3);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--sp-2);
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-std);
}

.footer-links a::before {
  content: '> ';
  color: var(--phosphor-dim);
  font-family: var(--font-pixel);
  font-size: 0.4rem;
}

.footer-links a:hover {
  color: var(--phosphor-green);
}

.footer-bottom {
  border-top: 2px solid var(--nes-surface-3);
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.footer-copyright {
  font-family: var(--font-pixel);
  font-size: 0.375rem;
  color: var(--text-muted);
}

.footer-badge {
  font-family: var(--font-pixel);
  font-size: 0.375rem;
  color: var(--phosphor-dim);
}

/* ============================================================
   18. UTILITY CLASSES
   ============================================================ */
.text-green    { color: var(--phosphor-green) !important; }
.text-amber    { color: var(--phosphor-amber) !important; }
.text-red      { color: var(--nes-red) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-white    { color: var(--crt-white) !important; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-pixel    { font-family: var(--font-pixel) !important; }
.text-mono     { font-family: var(--font-mono) !important; }
.text-sm       { font-size: 0.8125rem; }
.text-xs       { font-size: 0.625rem; }

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.py-7 { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

.glow-green { text-shadow: 0 0 12px rgba(57, 255, 20, 0.8); }
.glow-amber { text-shadow: 0 0 12px rgba(255, 140, 0, 0.8); }

.pixel-border { border: 3px solid var(--phosphor-green); box-shadow: 4px 4px 0 var(--nes-black); }
.pixel-border--amber { border: 3px solid var(--phosphor-amber); box-shadow: 4px 4px 0 var(--nes-black); }

.bg-surface  { background: var(--nes-surface); }
.bg-surface2 { background: var(--nes-surface-2); }
.bg-black    { background: var(--nes-black); }
.bg-dark     { background: var(--nes-bg); }

.hidden { display: none !important; }
.visually-hidden { @extend .sr-only; }

/* Loading / Placeholder */
.loading-bar {
  height: 4px;
  background: var(--nes-surface-3);
  position: relative;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  height: 100%;
  width: 60%;
  background: var(--phosphor-green);
  animation: load 1.4s ease infinite;
}

@keyframes load {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* Glitch effect for special headings */
@keyframes glitch {
  0%, 90%, 100% { clip-path: none; transform: none; }
  91% { clip-path: inset(10% 0 80% 0); transform: translateX(-4px); color: var(--nes-red); }
  92% { clip-path: inset(60% 0 30% 0); transform: translateX(4px); color: var(--crt-cyan); }
  94% { clip-path: none; transform: none; }
}

.glitch {
  position: relative;
}

.glitch:hover {
  animation: glitch 0.4s steps(1) forwards;
}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

@media (max-width: 900px) {
  :root { --sp-7: 48px; --sp-8: 64px; }

  .blog-grid .card:first-child {
    grid-template-columns: 1fr;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-image-wrap {
    width: 200px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .hero-screen {
    padding: var(--sp-5) var(--sp-4);
  }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-3); }

  /* Hero: fill the viewport below the nav (~80px) */
  .hero {
    min-height: calc(100svh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero .container {
    width: 100%;
  }

  /* Saas-products: override inline grid-template-columns so it collapses */
  .about-grid {
    grid-template-columns: 1fr !important;
  }

  /* Photo + contact column goes full width on phones (it is fixed at
     280px / 200px on larger screens) */
  .about-image-wrap {
    width: 100%;
    margin-bottom: var(--sp-6);   /* clears polaroid offsets on the homepage */
  }

  .nav-list { display: none; }
  .nav-list.is-open {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.97);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-7);
    overflow-y: auto;
  }
  .nav-list.is-open > li {
    width: 100%;
    text-align: center;
  }
  .nav-list.is-open > li > a,
  .nav-list.is-open > li > button {
    font-size: 0.625rem;
    padding: var(--sp-3) var(--sp-4);
    width: 100%;
    text-align: center;
  }
  .nav-toggle {
    display: flex;
    box-shadow: none; /* prevent shadow bleeding over header's green border */
  }
  .header-cta { display: none; }

  /* More vertical breathing room so button clears the green border */
  .header-inner {
    padding: var(--sp-4) var(--sp-4);
  }

  .hero-stats {
    gap: var(--sp-4);
  }

  .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--phosphor-dim);
    margin-left: var(--sp-4);
    margin-top: var(--sp-2);
    background: transparent;
  }

  .nav-dropdown.is-open {
    display: block;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .sidebar {
    grid-template-columns: 1fr;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --sp-6: 32px;
    --sp-7: 40px;
    --sp-8: 48px;
  }

  /* Pixel buttons may be wider than a phone container — let them wrap
     instead of overflowing (an off-center-looking overflow) */
  .btn {
    white-space: normal;
    text-align: center;
  }
  .btn--lg {
    font-size: 0.5625rem;
    padding: var(--sp-3) var(--sp-4);
  }

  .hero { padding: var(--sp-4) 0; }
  .hero-screen {
    border-width: 6px;
    padding: var(--sp-4) var(--sp-3);
  }
  .hero-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--sp-3);
  }
  /* Keep only the 3 most impactful stats on mobile */
  .hero-stat:nth-child(3),
  .hero-stat:nth-child(4) { display: none; }
  .hero-stats {
    gap: var(--sp-3);
    margin: var(--sp-3) 0;
  }
  .hero-actions { margin-top: var(--sp-3); gap: var(--sp-2); }
  .hero-stat-number { font-size: 1.5rem; }
  .blog-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .certs-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   20. 8-BIT ANIMATIONS — PIXEL SHINE & MOTION
   ============================================================ */

/* -- Pixel shine sweep — the 8-bit answer to the glassmorphism
      shine. A hard-stop gradient (crisp pixel columns, no smooth
      fade) marches across the surface in chunky steps() jumps,
      holds, then repeats. -- */

/* Hosts that need a positioning context for the overlay */
.card, .skill-card, .cert-card, .terminal-box,
.sidebar-widget, .contact-form, .btn, .header-cta {
  position: relative;
}

.card::after,
.skill-card::after,
.project-card::after,
.review-card::after,
.cert-card::after,
.terminal-box::after,
.sidebar-widget::after,
.contact-form::after,
.pixel-box:not(.pixel-box--corners)::after,
.hero-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(105deg,
    transparent 40%,
    rgba(57, 255, 20, 0.05)   40%, rgba(57, 255, 20, 0.05)   43%,
    rgba(232, 232, 208, 0.07) 43%, rgba(232, 232, 208, 0.07) 46%,
    rgba(232, 232, 208, 0.14) 46%, rgba(232, 232, 208, 0.14) 50%,
    rgba(232, 232, 208, 0.07) 50%, rgba(232, 232, 208, 0.07) 52%,
    rgba(57, 255, 20, 0.05)   52%, rgba(57, 255, 20, 0.05)   55%,
    transparent 55%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0; /* band parked off-canvas */
  animation: pixel-shine-sweep 9s steps(12, end) infinite;
}

@keyframes pixel-shine-sweep {
  0%   { background-position: 100% 0; }
  14%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

/* Hero CRT gets a slower, slightly greener sweep */
.hero-screen::after {
  background-image: linear-gradient(105deg,
    transparent 40%,
    rgba(57, 255, 20, 0.08)   40%, rgba(57, 255, 20, 0.08)   44%,
    rgba(232, 232, 208, 0.10) 44%, rgba(232, 232, 208, 0.10) 50%,
    rgba(57, 255, 20, 0.08)   50%, rgba(57, 255, 20, 0.08)   55%,
    transparent 55%);
  animation-duration: 13s;
  animation-delay: 1.2s;
}

/* Stagger grid neighbors so the whole page doesn't flash at once */
.grid-2 > :nth-child(2n)::after,
.grid-3 > :nth-child(3n-1)::after,
.grid-4 > :nth-child(4n-2)::after,
.blog-grid > :nth-child(2n)::after { animation-delay: 2.3s; }

.grid-3 > :nth-child(3n)::after,
.grid-4 > :nth-child(4n-1)::after,
.blog-grid > :nth-child(3n)::after { animation-delay: 4.6s; }

.grid-4 > :nth-child(4n)::after    { animation-delay: 6.4s; }

/* -- Button shine — quick stepped sweep on hover/focus -- */
.btn::after,
.header-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.12) 44%,
    rgba(255, 255, 255, 0.28) 44%, rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 54%,
    transparent 54%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
}

.btn:hover::after,
.btn:focus-visible::after,
.header-cta:hover::after,
.header-cta:focus-visible::after {
  animation: pixel-shine-hover 0.4s steps(7, end) forwards;
}

@keyframes pixel-shine-hover {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* -- Section shimmer — a slower, fainter sweep across whole section
      bands (the cards inside have their own brighter shine) -- */
.skills-section, .projects-section, .reviews-section,
.cta-section, .page-hero {
  position: relative;
}

.skills-section::after,
.projects-section::after,
.reviews-section::after,
.cta-section::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(110deg,
    transparent 44%,
    rgba(57, 255, 20, 0.020)   44%, rgba(57, 255, 20, 0.020)   47%,
    rgba(232, 232, 208, 0.045) 47%, rgba(232, 232, 208, 0.045) 50%,
    rgba(57, 255, 20, 0.020)   50%, rgba(57, 255, 20, 0.020)   53%,
    transparent 53%);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  animation: pixel-shine-sweep 17s steps(20, end) infinite;
  animation-delay: 3.5s;
}

/* -- FTL Runner — the 8-bit side-scroller frame -- */
.ftl-runner-section {
  padding: var(--sp-7) 0;
  background: var(--nes-black);
  border-top: 4px solid var(--phosphor-dim);
  border-bottom: 4px solid var(--phosphor-dim);
}

.ftl-runner-frame {
  position: relative;
  border: 4px solid var(--nes-casing);
  box-shadow:
    0 0 0 2px var(--nes-casing-dark),
    8px 8px 0 rgba(0, 0, 0, 0.6),
    var(--shadow-glow);
  background: #070710;
  line-height: 0;
}

#ftl-runner {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
  /* taps register instantly (no double-tap-zoom delay); swipes still scroll */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ftl-runner-toggle--sound {
  right: 96px;
}

.ftl-runner-toggle {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  font-family: var(--font-pixel);
  font-size: 0.4375rem;
  background: var(--nes-black);
  color: var(--phosphor-green);
  border: 2px solid var(--phosphor-dim);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  line-height: 1.5;
}

.ftl-runner-toggle:hover {
  border-color: var(--phosphor-green);
  color: var(--phosphor-bright);
}

/* Touch devices: controls drop below the game (overlay would cover it)
   and get bigger tap targets */
@media (max-width: 768px) {
  .ftl-runner-toggle {
    position: static;
    display: inline-block;
    margin: var(--sp-2) 0 var(--sp-2) var(--sp-2);
    font-size: 0.5rem;
    padding: var(--sp-2) var(--sp-3);
  }
}

/* ── Game over / leaderboard modal ──────────────────────────────────────── */
.ftl-go-modal[hidden] { display: none !important; }
.ftl-go-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(10, 0, 0, 0.95);
  padding: clamp(var(--sp-3), 4vw, var(--sp-6));
  font-family: var(--font-pixel);
}
.ftl-go-modal__inner {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.875rem);
}
.ftl-go-modal__title {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 5vw, 1.75rem);
  color: #E64A3C;
  margin: 0;
  letter-spacing: 0.06em;
}
.ftl-go-modal__score {
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 2.5vw, 0.75rem);
  color: var(--phosphor-green, #39FF14);
  margin: 0;
}
.ftl-go-modal__label {
  font-family: var(--font-pixel);
  font-size: clamp(0.4rem, 2vw, 0.6rem);
  color: #E8E8D0;
  margin: 0 0 0.3rem;
  text-align: center;
}
.ftl-go-modal__name-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.ftl-go-modal__input {
  background: #1A0A0A;
  border: 2px solid #E64A3C;
  color: #E8E8D0;
  font-family: var(--font-pixel);
  font-size: clamp(0.75rem, 3.5vw, 1.1rem);
  text-align: center;
  text-transform: uppercase;
  width: 4.5rem;
  padding: 0.4rem 0.2rem;
  letter-spacing: 0.25em;
  outline: none;
  -webkit-appearance: none;
}
.ftl-go-modal__input:focus { border-color: #FF8C00; }
.ftl-go-modal__btn {
  background: #1A0A0A;
  border: 2px solid #E64A3C;
  color: #E64A3C;
  font-family: var(--font-pixel);
  font-size: clamp(0.4rem, 2vw, 0.6rem);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}
.ftl-go-modal__btn:hover,
.ftl-go-modal__btn:focus { background: #E64A3C; color: #0A0A0A; }
.ftl-go-modal__btn--replay {
  border-color: var(--phosphor-green, #39FF14);
  color: var(--phosphor-green, #39FF14);
  margin-top: 0.25rem;
}
.ftl-go-modal__btn--replay:hover,
.ftl-go-modal__btn--replay:focus { background: var(--phosphor-green, #39FF14); color: #0A0A0A; }
.ftl-go-modal__board {
  width: 100%;
  font-family: var(--font-pixel);
  border: 2px solid #FF8C00;
  border-radius: 2px;
  background: #0D0006;
  padding: clamp(0.5rem, 2.5vw, 0.875rem);
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.18), inset 0 0 24px rgba(0,0,0,0.6);
}
.ftl-go-board__title {
  font-size: clamp(0.45rem, 2.5vw, 0.75rem);
  color: #FF8C00;
  text-align: center;
  margin: 0 0 clamp(0.4rem, 2vw, 0.75rem);
  letter-spacing: 0.08em;
}
.ftl-go-board__row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.25rem, 1vw, 0.4rem);
  font-size: clamp(0.38rem, 2vw, 0.58rem);
  color: #667;
  border-bottom: 1px solid #1E1428;
}
.ftl-go-board__row:last-child { border-bottom: none; }
.ftl-go-board__row span:last-child { text-align: right; color: #998; }
.ftl-go-board__row.is-new {
  color: var(--phosphor-green, #39FF14);
  background: rgba(57, 255, 20, 0.07);
}
.ftl-go-board__row.is-new span:last-child { color: var(--phosphor-green, #39FF14); }

/* -- Boss fight modal — position:fixed so it's full-screen on mobile -- */
.ftl-boss-modal[hidden] { display: none !important; }
.ftl-boss-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(4, 4, 12, 0.93);
  padding: clamp(var(--sp-3), 4vw, var(--sp-6));
  font-family: var(--font-pixel);
}

.ftl-boss-modal__inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 2vw, var(--sp-4));
}

.ftl-boss-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #E64A3C;
  padding-bottom: clamp(var(--sp-1), 1vw, var(--sp-2));
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.ftl-boss-modal__name {
  font-size: clamp(0.45rem, 2.5vw, 0.625rem);
  color: #E64A3C;
}

.ftl-boss-modal__lv {
  font-size: clamp(0.4rem, 2vw, 0.5625rem);
  color: #FF6644;
}

.ftl-boss-modal__q {
  font-size: clamp(0.55rem, 3vw, 0.8125rem);
  color: var(--nes-white, #E8E8D0);
  margin: 0;
  line-height: 1.7;
}

.ftl-boss-modal__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-1), 1.5vw, var(--sp-2));
}

.ftl-boss-modal__opt {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 2.5vw, 0.6875rem);
  color: var(--nes-white, #E8E8D0);
  background: rgba(10, 10, 20, 0.85);
  border: 2px solid #2A2A3A;
  padding: clamp(var(--sp-1), 1.5vw, var(--sp-2)) clamp(var(--sp-2), 2vw, var(--sp-3));
  cursor: pointer;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-align: left;
  word-break: break-word;
}

.ftl-boss-modal__opt:hover,
.ftl-boss-modal__opt:focus,
.ftl-boss-modal__opt.is-selected {
  background: rgba(57, 255, 20, 0.07);
  border-color: var(--phosphor-amber, #FF8C00);
  color: var(--phosphor-amber, #FF8C00);
  outline: none;
}

.ftl-boss-modal__opt.is-correct {
  background: rgba(57, 255, 20, 0.14);
  border-color: var(--phosphor-green, #39FF14);
  color: var(--phosphor-green, #39FF14);
  pointer-events: none;
}

.ftl-boss-modal__opt.is-wrong {
  background: rgba(230, 74, 60, 0.12);
  border-color: #E64A3C;
  color: #E64A3C;
  pointer-events: none;
}

.ftl-boss-modal__result {
  font-size: clamp(0.45rem, 2.5vw, 0.6875rem);
  text-align: center;
  margin: 0;
  min-height: 1.5em;
  color: var(--phosphor-green, #39FF14);
}

.ftl-boss-modal__hint {
  font-size: clamp(0.3rem, 1.5vw, 0.4375rem);
  color: #444455;
  text-align: center;
  margin: 0;
}

/* -- CRT phosphor flicker — occasional dips, like a tired tube -- */
@keyframes crt-flicker {
  0%, 90.9%, 92.6%, 95.9%, 96.6%, 100% { opacity: 1; }
  91%   { opacity: 0.82; }
  91.8% { opacity: 0.96; }
  96%   { opacity: 0.90; }
}

.hero-title {
  animation: crt-flicker 7s linear infinite;
}

/* -- "Insert coin" cursor on section labels -- */
.section-label::after {
  content: '▮';
  margin-left: var(--sp-2);
  color: var(--phosphor-green);
  animation: blink 1.2s step-end infinite;
}

/* -- Pixel pop-in — scroll reveal in chunky opacity steps.
      `.pixel-reveal` is added by main.js only, so content stays
      visible without JavaScript. -- */
.pixel-reveal {
  opacity: 0;
}

.pixel-reveal.is-visible {
  animation: pixel-pop-in 0.5s steps(6, end) both;
}

@keyframes pixel-pop-in {
  0%   { opacity: 0; transform: translateY(16px); }
  70%  { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; }
}

/* ============================================================
   21. PRINT STYLES
   ============================================================ */
@media print {
  body::after { display: none; }
  .site-header,
  .site-footer,
  .sidebar,
  .breadcrumb { display: none; }
  body {
    background: white;
    color: black;
    font-family: 'Courier New', monospace;
  }
  a::after { content: ' (' attr(href) ')'; }
}