/* In Vivo — dark, full-width. Black canvas, white text, retro yellow title. */
:root {
  --bg:      #0a0a0a;
  --ink:     #f4f4f2;
  --muted:   #8b8b88;
  --faint:   #6b6b68;
  --yellow:  #ffd23f;
  --line:    rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.07);
  /* Title face — swap this one line (and the <link> in build.py) to change it. */
  --title: "VT323", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Readable monospace for code (NOT the pixel title face). */
  --mono: ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Full-bleed: content spans the whole page width, with comfortable gutters. */
.wrap { width: 100%; max-width: 100%; margin: 0; padding: 0 clamp(20px, 4vw, 56px); }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--yellow); }

/* Masthead — the ONLY place the title appears */
.masthead { border-bottom: 1px solid var(--line-soft); }
.masthead .wrap { padding: 30px 0 26px; }
.brand {
  display: inline-block;
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(33px, 4.6vw, 42px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--yellow);
}
.brand:hover { text-decoration: none; color: #ffdd66; }
.subtitle { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; letter-spacing: 0.03em; }

/* Home */
.home { padding: 34px 0 40px; }
.empty { color: var(--faint); font-size: 15px; margin: 8px 0 70px; letter-spacing: 0.04em; }

/* Post list */
.post-list { list-style: none; margin: 0 0 76px; padding: 0; }
.post-item { border-top: 1px solid var(--line-soft); }
.post-item:last-child { border-bottom: 1px solid var(--line-soft); }
.post-link { display: block; padding: 28px 0; color: inherit; }
.post-link:hover { text-decoration: none; }
.post-link time { display: block; color: var(--faint); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 11px; }
.post-link h2 {
  font-family: var(--title); font-weight: 400; font-size: 31px; line-height: 1.08;
  letter-spacing: 0.01em; margin: 0 0 8px; color: var(--yellow);
}
.post-link:hover h2 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yellow); }
.post-link .summary { color: var(--muted); margin: 0; font-size: 16.5px; max-width: 62ch; }

/* Article */
.post { padding: 56px 0 40px; max-width: 68ch; }
.post-header { margin-bottom: 40px; }
.post-header time { color: var(--faint); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.post-header h1 {
  font-family: var(--title); font-weight: 400; font-size: clamp(36px, 5.2vw, 52px);
  line-height: 1.06; letter-spacing: 0.01em; margin: 14px 0 0; color: var(--yellow);
}
.prose { font-size: 18px; color: #e9e9e6; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35em; }
.prose h2 { font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 1.9em 0 0.5em; color: var(--ink); }
.prose h3 { font-weight: 600; font-size: 20px; margin: 1.6em 0 0.4em; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--yellow); }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--yellow); color: var(--muted); font-style: italic;
}
.prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 1.6em 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
.prose a:hover { text-decoration-color: var(--yellow); }
.prose code {
  font-family: var(--mono);
  font-size: 0.86em; background: rgba(255,255,255,0.08); padding: 0.12em 0.42em; border-radius: 5px;
}
.prose pre {
  background: #131313; border: 1px solid var(--line-soft); color: #e9e9e6;
  padding: 16px 18px; border-radius: 10px; overflow-x: auto; font-size: 15px; line-height: 1.55; margin: 1.6em 0;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.2em 0; }

.post-end { border: 0; border-top: 1px solid var(--line-soft); margin: 48px 0 22px; }
.back a { color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }
.back a:hover { color: var(--yellow); }

/* Footer */
.site-footer { border-top: 1px solid var(--line-soft); margin-top: 40px; }
.site-footer .wrap { padding-top: 26px; padding-bottom: 44px; }
.site-footer p { color: var(--faint); font-size: 13px; margin: 0; letter-spacing: 0.02em; }

::selection { background: rgba(255,210,63,0.25); }

@media (max-width: 600px) {
  body { font-size: 17px; }
}