/* ===========================================================================
   pablo.fail — terminal theme ported from services.pablomurad.com
   Dark monospace, bright-green accent, inverted-hover links.
   Tokens (colors/fonts/sizes) lifted 1:1; long-form line-height nudged up a
   touch for readability on actual blog posts.
   =========================================================================== */

:root {
  --bg:    #0a0a0a;
  --fg:    #c8c8c8;
  --dim:   #777;
  --green: #2fff4f;
  --rule:  #333;
  /* smol.css paints code blocks with `background: var(--pre) !important` and
     defaults --pre to a light gray in light-mode OS — redefine it dark so code
     is readable regardless of the visitor's OS theme. */
  --pre:   #111;
  --code:  #333;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: monospace;
  font-size: 15px;
  line-height: 1.5;
  max-width: 688px;
  margin: 8px auto;
  padding: 0 10px;
}

#blog, #post, main, article { background: var(--bg); color: var(--fg); }

::selection { background: var(--green); color: var(--bg); }

/* links — green, underlined, INVERT on hover (the signature move) */
a { color: var(--green); text-decoration: underline; }
a:hover { background: var(--green); color: var(--bg); text-decoration: none; }

/* headings — monospace, bold */
h1, h2, h3, h4, h5, h6 { font-family: monospace; font-weight: bold; line-height: 1.25; color: var(--fg); }
h1 { margin: 14px 0; }
h2 { margin: 18px 0 6px; }
h3 { margin: 14px 0 4px; }

p { margin: 0 0 10px; }

/* thin dark rules */
hr { border: none; border-top: 1px solid var(--rule); width: 100%; margin: 14px 0; }

/* lists — square bullets like the source */
ul { padding-left: 2em; }
ul > li { list-style-type: square; }
li { margin-bottom: 2px; }

/* ---- masthead ---------------------------------------------------------- */
header h1, header h1 a { color: var(--fg); }
header h1 a:hover { background: var(--green); color: var(--bg); }
header nav a { color: var(--green); }
/* nav links default to .text-lg (1.35rem) — shrink to the compact look.
   (.text-lg is more specific than `nav a`, so override it explicitly) */
nav a,
nav a.text-lg { font-size: 0.82rem; }
/* subtitle / description muted */
header h2, header .description, header > p:first-of-type { color: var(--dim); font-weight: normal; }

/* ---- blog index: post list -------------------------------------------- */
#blog main a { color: var(--green); }
#blog time, #blog main time, #blog .date { color: var(--dim); }

/* post titles default to .text-md (1.15rem) and look heavy — shrink them and
   drop the weight for a compact terminal `ls`-style listing */
#blog .text-md,
#blog .text-md a {
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
}

time, small, .dim { color: var(--dim); }

/* ---- code -------------------------------------------------------------- */
code {
  font-family: monospace;
  background: #111;
  border: 1px solid var(--rule);
  padding: 0 4px;
}
pre {
  background: #111;
  border: 1px solid var(--rule);
  padding: 10px 12px;
  overflow-x: auto;
  line-height: 1.4;
}
pre code { background: none; border: none; padding: 0; }

/* prose's syntax highlighting (.chroma) only flips to a dark palette inside
   @media (prefers-color-scheme: dark). Since this theme is dark regardless of
   the OS, force the code block dark + monochrome so it's always readable. */
.chroma { background: var(--pre); color: var(--fg); }
.chroma .cl span { color: var(--fg); }
.chroma .lnt, .chroma .ln { color: var(--dim); }

blockquote {
  margin: 14px 0;
  padding-left: 12px;
  border-left: 2px solid var(--green);
  color: var(--dim);
}

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

/* ---- footer ------------------------------------------------------------ */
footer {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
}
footer a { color: var(--green); }