/* disarm blog — self-contained stylesheet (independent of the landing page) */

/* Self-contained means this does not inherit styles.css, so it needs its own
   declaration. Without one the browser assumes light and paints scrollbars,
   selection and the caret from the light palette on a dark page. The blog is
   dark by design and offers no light theme. */
:root { color-scheme: dark; }

:root {
  --bg: #0b0e14;
  --panel: #11151f;
  --border: #1e2533;
  --fg: #e6e9ef;
  --muted: #9aa4b2;
  --accent: #6ea8fe;
  --accent-2: #7ee787;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* See styles.css: smooth scrolling is opt-out under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Flat, matching styles.css: the centred radial glow went with the navy. */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(820px, 92vw); margin-inline: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* header */
header { border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.brand { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; color: var(--fg); letter-spacing: .02em; }
.brand::before { content: "\203A  "; color: var(--accent-2); }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: var(--muted); font-size: .95rem; }
nav a:hover { color: var(--fg); text-decoration: none; }

/* main */
.blog-main { padding: 44px 0 72px; }
.sec-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--accent-2); margin-bottom: 10px; }
.blog-h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; margin-bottom: 12px; color: var(--fg); }
.lead { color: var(--muted); font-size: 1.02rem; max-width: 60ch; }
.blog-hero { padding-bottom: 24px; }

/* post list */
.post-list { list-style: none; }
.post-row { padding: 20px 0; border-top: 1px solid var(--border); }
.post-row:last-child { border-bottom: 1px solid var(--border); }
.post-row time { font-family: var(--mono); color: var(--muted); font-size: .82rem; margin-right: 14px; }
.post-row > a { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.post-row > a:hover { color: var(--accent); text-decoration: none; }
.post-desc { color: var(--muted); font-size: .92rem; margin-top: 6px; }

/* single post */
.post-meta { font-family: var(--mono); color: var(--muted); font-size: .82rem; margin-bottom: 30px; }
.post-back { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); }

/* prose */
.post-content { font-size: 1.02rem; line-height: 1.75; color: var(--fg); }
.post-content > * + * { margin-top: 20px; }
.post-content h2 { font-size: 1.3rem; margin-top: 38px; }
.post-content h3 { font-size: 1.1rem; margin-top: 28px; }
.post-content a { color: var(--accent); text-decoration: underline; }
.post-content em { color: var(--fg); }
.post-content strong { color: var(--fg); }
.post-content code {
  font-family: var(--mono); font-size: .88em; color: var(--accent-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.post-content pre {
  font-family: var(--mono); border: 1px solid #cbd3e1;
  border-radius: 10px; padding: 18px 20px; overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
/* The ground comes from giallo.css (.z-code), which the theme sets. A background
   here would win on specificity and put light text on a dark block. */
.post-content pre::selection, .post-content pre ::selection { background: #b9d2ff; }
.post-content pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.post-content blockquote { border-left: 3px solid var(--accent-2); padding: 4px 0 4px 18px; color: var(--muted); }
.post-content ul, .post-content ol { padding-left: 24px; }
.post-content li + li { margin-top: 6px; }
.muted { color: var(--muted); }

/* footer */
footer { border-top: 1px solid var(--border); padding: 28px 0; margin-top: 40px; color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--fg); text-decoration: none; }

/* Giallo syntax-highlight line layout (required, Zola >= 0.22) */
.giallo-l  { display: inline-block; min-height: 1lh; width: 100%; }
.giallo-ln { display: inline-block; user-select: none; margin-right: .4em; padding: .4em; min-width: 3ch; text-align: right; opacity: .8; }

@media (max-width: 640px) {
  .header-inner { height: auto; padding: 14px 0; flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}