:root {
  --rk-accent: #0d6efd;
  --rk-text: #1f2937;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--rk-text);
  background-color: #fafafa;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.navbar {
  border-bottom: 3px solid var(--rk-accent);
}

/* Hero on home / about */
.hero {
  text-align: center;
  margin-bottom: 2.5rem;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
}
.hero img {
  max-height: 320px;
  width: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* Post grid cards */
.post-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}
.post-card .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef2f5;
}
.post-card .card-title a {
  color: inherit;
  text-decoration: none;
}
.post-card .card-title a:hover {
  color: var(--rk-accent);
}

/* Post detail prose */
.prose {
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 65ch;
  color: var(--rk-text);
  /* Justify body copy for a clean right edge. `hyphens: auto` lets the
     browser break long words at syllable boundaries (the way print
     justifies) so you don't get awkward "rivers" of stretched word
     spacing. Both vendor prefixes still needed for older Safari/iOS. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;  /* don't hyphenate words shorter than 6 chars */
}
.prose p { margin-bottom: 1.25rem; }
.prose img { max-width: 100%; border-radius: 0.5rem; }

/* Anything inside .prose that would look odd justified — code blocks,
   blockquotes, list items, and headings — keeps left-alignment. */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose pre,
.prose code,
.prose blockquote,
.prose li {
  text-align: left;
  hyphens: manual;
}

/* Markdown-rendered elements */
.prose h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.prose h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose ul,
.prose ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: 0.35rem;
}
.prose a {
  color: var(--rk-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose code {
  background: rgba(13, 110, 253, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.92em;
  color: #b02a37;
}
.prose pre {
  background: #f6f8fa;
  border: 1px solid #e3e6ea;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  font-size: 0.92em;
  line-height: 1.55;
}
.prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.prose blockquote {
  border-left: 4px solid var(--rk-accent);
  padding: 0.25rem 1rem;
  margin: 0 0 1.25rem;
  color: #495057;
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr {
  border: 0;
  border-top: 1px solid #dee2e6;
  margin: 2rem 0;
}
.prose table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
}
.prose th,
.prose td {
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.prose th {
  background: #f8f9fa;
  font-weight: 600;
}

/*
 * Post-detail layout:
 *   - .post-article is centered on the page (mx auto, max-width 760px)
 *     regardless of whether the TOC is present
 *   - .post-toc-rail is absolutely positioned in the left gutter at xl+
 *     (>= 1200px viewport) so the article stays anchored to page center
 *   - At smaller widths the TOC rail is hidden via d-none d-xl-block
 */
.post-detail-layout {
  position: relative;
}
.post-article {
  /* `ch` unit (width of the "0" character at the current font size).
     Set wider than the about page (70ch) so the article uses more of
     the empty horizontal space when the TOC rail is present at xl+.
     80ch leaves a comfortable ~40px gap to the (170px) TOC rail at
     1200px viewport while keeping line-length inside the readable
     ~50-90ch range for technical prose. */
  max-width: 80ch;
  margin: 0 auto;
}
/* Override the global .prose max-width: 65ch when prose is inside
   .post-article. The article wrapper already constrains width to 70ch;
   without this override the body text would render even narrower than
   the title/hero/recommendations above it (asymmetric right padding). */
.post-article .prose {
  max-width: none;
}
.post-toc-rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 170px;
}

/* Active-section progress rail (Stripe / Linear / Vercel docs vibe).
   Vertical gray line by default; the active section's link gets a thick
   blue bar overlaying its segment + accent text color. JS in
   posts_detail.html updates the .active class on scroll. */
.post-toc {
  position: sticky;
  top: 6rem;
  font-size: 0.85rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}
.post-toc .toc {
  position: relative;
  border-left: 2px solid #e9ecef;
  padding-left: 0;
}
.post-toc .toc ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}
.post-toc .toc > ul {
  padding-left: 1rem;
}
.post-toc .toc li {
  margin: 0;
  line-height: 1.45;
  position: relative;
}
.post-toc .toc a {
  color: #6c757d;
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.18s ease;
}
.post-toc .toc a:hover {
  color: var(--rk-text);
}
.post-toc .toc a.active {
  color: var(--rk-accent);
  font-weight: 600;
}
/* Active rail: thick accent bar overlaying the gray border for the
   current section's link. Negative left positions it on top of the
   parent .toc's left border line. */
.post-toc .toc a.active::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rk-accent);
  border-radius: 2px;
}
/* Sub-list active link aligns its bar with its own (nested) parent border,
   not the root one. */
.post-toc .toc ul a.active::before {
  left: -1.05rem;
}

/* Smooth scroll when a TOC link or any in-page anchor is clicked. */
html { scroll-behavior: smooth; }

/* Anchor offset so the target heading isn't flush against the viewport top
   (and isn't hidden by any future sticky nav). */
.prose h2,
.prose h3,
.prose h4 { scroll-margin-top: 5rem; }

/* "More from the blog" recommendations section */
.more-posts h2 {
  font-weight: 600;
}

/* About page */
.about-page {
  max-width: 70ch;
}
.about-page .lead {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #343a40;
  margin-bottom: 2rem;
}
.about-page h2 {
  margin-top: 2.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e9ecef;
}
.about-page .topic {
  margin-bottom: 1.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--rk-accent);
}
.about-page .topic h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--rk-accent);
}
.about-page .topic p {
  margin-bottom: 0;
}
.about-page .cta {
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  background: rgba(13, 110, 253, 0.06);
  border-radius: 0.5rem;
  margin-top: 1.5rem;
}
.about-page hr {
  margin-top: 3rem;
}
.about-page .disclaimer {
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
  margin-bottom: 0;
}

.post-hero img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.post-meta {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* Pagination tweaks */
.pagination .page-link { color: var(--rk-accent); }
.pagination .page-item.active .page-link {
  background-color: var(--rk-accent);
  border-color: var(--rk-accent);
}