@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --font-mono: "SFMono-Regular", "Source Code Pro", Menlo, Monaco, Consolas, monospace;

  --bg: #ffffff;
  --text: #24292f;
  --heading: #0d1117;
  --muted: #59636e;
  --border: #e4e7eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --code-bg: #f2f4f7;
}

/* ---- Base ---------------------------------------------------------- */
body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
}

#wrapper { max-width: 720px; padding: 60px 24px 120px; }
#wrapper.home { max-width: 720px; padding: 0 24px 48px; }

/* ---- Headings: modern sans, high contrast ------------------------- */
h1, h2, h3, h4, h5, h6,
.home h1, .post h1, #title {
  font-family: var(--font-sans);
  color: var(--heading);
  letter-spacing: -0.015em;
}
.post h1 { font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -0.021em; }
.home h1, h1 { font-weight: 700; color: var(--heading); }
h2 { font-weight: 600; }
h3 { font-size: 21px; font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; }
h5 { font-size: 15px; font-weight: 600; }

/* Breathing room + offset so anchor jumps don't hide under the top */
#post-body h2, #post-body h3, #post-body h4, #post-body h5 {
  margin-top: 1.7em;
  scroll-margin-top: 24px;
}

/* ---- Body text ---------------------------------------------------- */
#post-body, p { line-height: 1.8; }
p { margin-bottom: 24px; }
b, strong { font-weight: 600; color: var(--heading); }

/* ---- Links -------------------------------------------------------- */
a, #title:hover { color: var(--accent); }
p a, #post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.35);
  text-underline-offset: 2px;
}
p a:hover, #post-body a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* ---- Nav / profile ------------------------------------------------ */
nav.main-nav { font-family: var(--font-sans); padding: 24px 24px 0; }
nav.main-nav a { color: var(--accent); font-size: 14px; font-weight: 500; }
nav.main-nav a.cta { background: var(--accent); color: #fff; }
.profile h1 { font-family: var(--font-sans); color: var(--heading); font-weight: 600; }
.profile h2 { font-family: var(--font-sans); color: var(--muted); }

/* ---- Homepage post list ------------------------------------------- */
#post-list { margin-top: 72px; }
#post-list li { margin-bottom: 28px; }
#post-list li + li { padding-top: 28px; border-top: 1px solid var(--border); }
#post-list a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.45;
  color: var(--heading);
}
#post-list a:hover, #post-list li:hover .dates { color: var(--accent); }
#post-list .dates {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  top: 3px;
}
#post-list h2 {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
  margin-top: 6px;
  max-width: 520px;
}

/* ---- Blockquote / rules ------------------------------------------- */
blockquote {
  margin: 32px 0;
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 22px;
  color: var(--muted);
  font-style: italic;
}
blockquote p { margin-bottom: 16px; }
blockquote p:last-child { margin-bottom: 0; }
hr { background: var(--border); margin: 48px auto; }

/* ---- Code --------------------------------------------------------- */
code {
  font-family: var(--font-mono);
  background-color: var(--code-bg);
  color: #1f2937;
  font-size: 0.86em;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}
span.code { font-family: var(--font-mono); background-color: var(--code-bg); }
pre {
  font-family: var(--font-mono);
  border-radius: 8px;
  padding: 20px 22px;
  line-height: 1.6em;
}
pre code { background: none; color: inherit; padding: 0; font-size: 13px; font-weight: 500; }

/* ---- Heading anchor links (render-heading hook) ------------------- */
.heading-anchor {
  font-family: var(--font-sans);
  margin-left: 0.4rem;
  color: var(--border);
  text-decoration: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
h1:hover > .heading-anchor, h2:hover > .heading-anchor,
h3:hover > .heading-anchor, h4:hover > .heading-anchor,
h5:hover > .heading-anchor, h6:hover > .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }

::selection { background: rgba(37, 99, 235, 0.18); }

/* ---- Responsive --------------------------------------------------- */
@media screen and (max-width: 540px) {
  body { font-size: 17px; }
  #wrapper, #wrapper.home { padding-left: 20px; padding-right: 20px; }
  .post h1 { font-size: 27px; }
  .heading-anchor { opacity: 1; }
}