/* ===========================================================================
   pablo.fail — terminal theme ported from services.pablomurad.com
   Dark monospace, bright 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;
  --lit: orange;
  --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: 700px;
  margin: 8px auto;
  padding: 0 10px;
}

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

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

/* links — accent color, underlined, INVERT on hover (the signature move).
   :visited is pinned to the same color so the browser's default purple never
   shows through. */
a,
a:visited {
  color: var(--lit);
  text-decoration: underline;
}

a:hover,
a:hover:visited {
  background: var(--lit);
  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(--lit);
  color: var(--bg);
}

header nav a {
  color: var(--lit);
}

/* 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 -------------------------------------------- */
/* transparent right border on every post link, recolored on :visited to mark
   read posts with a small vertical green tick. Width/style live here rather than
   on :visited, which can only change color. */
#blog main a {
  border-left: 2px solid var(--bg);
  padding-right: 4px;
}

#blog main a:visited {
  border-left-color: olivedrab;
}

#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;
}

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