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

/* ── Root Variables ─────────────────────────────────── */
:root {
  --bg:        #0d0d0d;
  --bg-card:   #141414;
  --green:     #39ff14;
  --green-dim: #1a7a08;
  --amber:     #ffb000;
  --text:      #c8c8c8;
  --muted:     #909090;
  --border:    #2a2a2a;
  --accent:    #00d4ff;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'IBM Plex Mono', 'Courier New', monospace;
  --font-mark: 'VT323', 'Courier New', monospace;
  --max-width: 860px;
  --radius:    2px;
}

/* ── Base ───────────────────────────────────────────── */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* CRT scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

a {
  color: var(--green);
  text-decoration: none;
  transition: color 0.15s;
}
/* Links inside prose signal hover with an underline, since colour alone is a
   weak cue in a paragraph. Chrome links — brackets, arrows, titles — signal
   with colour instead: they are already set apart by font and colour, and an
   underline would run through the gaps their brackets, icons, and arrows sit
   in, breaking into disconnected segments. */
a:hover { color: var(--amber); text-decoration: underline; }

.home-links a:hover,
.section-link:hover,
.project-links a:hover,
.arrow-link:hover,
.site-footer a:hover,
.post-list-item .post-link:hover,
.project-title a:hover {
  text-decoration: none;
}

/* Vendored Font Awesome artwork, inlined rather than loaded as an icon font so
   it inherits currentColor and costs no extra request. See
   _includes/icons/LICENSE.md. Width is left to the viewBox — none of these
   icons are square, and forcing one letterboxes the artwork, padding the gap
   to the label with dead space. The gap is one monospace cell, so the icon
   sits on the same rhythm as the surrounding characters. */
.icon {
  height: 1.1em;
  width: auto;
  vertical-align: -0.18em;
  margin-right: 0.6em;
}

/* Bracketed link chrome. white-space: pre stops the padding space inside the
   pseudo-element from collapsing against the label. */
.home-links a::before,
.home-links a::after,
.section-link::before,
.section-link::after,
.project-links a::before,
.project-links a::after {
  white-space: pre;
  color: var(--muted);
}

.home-links a:hover,
.section-link:hover,
.project-links a:hover,
.arrow-link:hover {
  color: var(--green);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 1.5em 0 0.5em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1rem; }

ul, ol { margin: 0 0 1rem 1.5rem; }
li { margin-bottom: 0.25rem; }

blockquote {
  border-left: 3px solid var(--green-dim);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  color: var(--muted);
  font-style: italic;
  background: var(--bg-card);
}

blockquote strong { color: var(--green); }
blockquote p:last-child { margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── Code ───────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  background: #1e1e1e;
  color: var(--amber);
  padding: 0.1em 0.4em;
  border-radius: var(--radius);
  font-size: 0.92em;
}

pre {
  font-family: var(--font-mono);
  background: #111;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: var(--radius);
}

pre code {
  background: transparent;
  color: var(--text);
  padding: 0;
  font-size: 0.9rem;
}

/* Rouge syntax highlight tweaks */
.highlight .k, .highlight .kd, .highlight .kn { color: #c792ea; }
.highlight .s, .highlight .s1, .highlight .s2 { color: #c3e88d; }
.highlight .c, .highlight .c1, .highlight .cm  { color: #546e7a; font-style: italic; }
.highlight .n  { color: var(--text); }
.highlight .o  { color: var(--amber); }
.highlight .mi { color: #f78c6c; }
.highlight .nb { color: var(--accent); }

/* ── Layout ─────────────────────────────────────────── */
.wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { flex: 1; }

/* ── Header / Nav ───────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-title {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--green) !important;
  letter-spacing: 0.06em;
  text-decoration: none !important;
}

.site-title::before { content: '> '; color: var(--amber); }

/* ── Hero / Page header ─────────────────────────────── */
.page-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.page-hero .page-title {
  font-family: var(--font-mark);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 3.2rem;
  margin: 0;
}

/* ── Home — intro ───────────────────────────────────── */
.home-intro {
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--green-dim);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.home-intro-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.home-intro p:last-of-type { margin-bottom: 0.75rem; }

/* Structured `whoami` output — scoped so the post glossary keeps its own dl styling. */
.home-intro dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
}

.home-intro dt {
  color: var(--green);
  font-weight: normal;
  margin-top: 0;
}

.home-intro dd {
  margin: 0;
  padding-left: 0;
  border-left: none;
  color: var(--text);
}

.home-links {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin: 1rem 0 0;
}

.home-links a { color: var(--amber); margin-right: 1.25rem; }
.home-links a::before { content: '[ '; }
.home-links a::after  { content: ' ]'; }

/* ── Home — two-column body ─────────────────────────── */
.home-columns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 800px) {
  .home-columns { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Section headings ───────────────────────────────── */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.section-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--amber);
}

.section-link::before { content: '[ '; }
.section-link::after  { content: ' ]'; }

/* ── Home — post list ───────────────────────────────── */
.post-list { list-style: none; margin: 0; padding: 0; }

.post-list-item,
.project-item {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.post-list-item:first-child,
.project-item:first-child { padding-top: 0.35rem; }

.post-list-item:last-child,
.project-item:last-child { border-bottom: none; }

.post-list-item .post-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text);
  display: block;
  margin-bottom: 0.35rem;
}

.post-list-item .post-link:hover { color: var(--green); }

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.tag-row .tag { margin-right: 0; }

.post-excerpt { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }

.tag {
  font-family: var(--font-mono);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 0.1em 0.5em;
  border-radius: var(--radius);
  font-size: 0.78rem;
  margin-right: 0.3rem;
}

/* Action links. The arrow is pinned to the body font so it renders identically
   everywhere, regardless of the label's typeface. */
.arrow-link {
  font-family: var(--font-mono);
  display: inline-block;
  margin-top: 0;
  font-size: 0.82rem;
  color: var(--amber);
}

.arrow-link::before,
.arrow-link::after {
  font-family: var(--font-body);
}

.arrow-link--next::after { content: '→'; margin-left: 0.4em; }
.arrow-link--prev::before { content: '←'; margin-right: 0.4em; }

/* ── Single Post ────────────────────────────────────── */
.post-header {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.post-header .tag-row { margin-bottom: 0; }

.post-title {
  font-size: 2.1rem;
  margin: 0 0 0.6rem;
  color: var(--green);
}

.post-content {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  position: relative;
  z-index: 2;
}

.post-content h2, .post-content h3 { color: var(--amber); }

.post-content img {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── About / Static pages ───────────────────────────── */
.page-content {
  padding: 2.5rem 0;
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  position: relative;
  z-index: 2;
}

/* ── Terminal prompt decoration ─────────────────────── */
.prompt::before {
  font-family: var(--font-mono);
  content: '$ ';
  color: var(--green);
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.site-footer a { color: var(--green); }
.site-footer a:hover { color: var(--amber); }

/* ── Blinking cursor ────────────────────────────────── */
.cursor::after {
  content: '█';
  animation: blink 1s step-end infinite;
  color: var(--green);
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Utility ─────────────────────────────────────────── */
.text-muted { color: var(--muted); }
.text-green  { color: var(--green); }
.text-amber  { color: var(--amber); }
.text-accent { color: var(--accent); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  h1 { font-size: 2.2rem; }
  .post-title { font-size: 1.7rem; }
  .page-hero .page-title { font-size: 2.4rem; }

  .home-intro dl { grid-template-columns: 1fr; gap: 0; }
  .home-intro dd { margin-bottom: 0.85rem; }
  .home-intro dd:last-of-type { margin-bottom: 0; }
}

/* ── Projects ───────────────────────────────────────── */
.project-list { list-style: none; margin: 0; padding: 0; }

.project-thumb {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}

.project-title {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.project-title a { color: var(--text); }
.project-title a:hover { color: var(--green); }

.project-description { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }

.project-links { font-family: var(--font-mono); margin: 0; font-size: 0.82rem; }
.project-links a { color: var(--amber); margin-right: 1.25rem; }
.project-links a::before { content: '[ '; }
.project-links a::after  { content: ' ]'; }

/* ── Definition lists (glossaries) ──────────────────── */
dl { margin: 1.5rem 0; }

dt {
  color: var(--amber);
  font-weight: bold;
  margin-top: 1rem;
}

dd {
  margin: 0.15rem 0 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
  color: var(--text);
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .cursor::after { animation: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}