/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  /* Color — light theme */
  --color-bg:           #ffffff;
  --color-bg-elevated:  #fafafa;
  --color-bg-sunken:    #f5f5f7;
  --color-fg:           #18181b;
  --color-fg-muted:     #52525b;
  --color-fg-subtle:    #71717a;
  --color-border:       #e4e4e7;
  --color-border-strong:#d4d4d8;
  --color-accent:       #b82417;
  --color-accent-hover: #9b1d12;
  --color-accent-soft:  rgba(184, 36, 23, 0.08);
  --color-accent-fg:    #ffffff;
  --color-code-bg:      #f4f4f5;
  --color-code-border:  #e4e4e7;
  /* Translucent header/menu surfaces layered over content. */
  --color-header-bg:      rgba(255, 255, 255, 0.85);
  --color-header-bg-open: rgba(255, 255, 255, 0.92);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.0625rem; /* 17 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  2.75rem;   /* 44 */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.65;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 200ms;

  /* Layout */
  --layout-max:  920px;
  --layout-read: 720px;
  --header-height: 76px;

  /* Side rails (recent-posts sidebar + post TOC) shown on wide viewports.
     A rail keeps --rail-gap to the centered column and never less than
     --rail-gutter to the viewport edge, so it can't be clipped. Width fills
     whatever is left, between --rail-min and --rail-max. The breakpoint that
     reveals the rails is layout-max + 2 × (rail-min + rail-gap + rail-gutter)
     = 1360px — the narrowest viewport where a rail fits with both gutters. */
  --rail-gap:    var(--space-4);
  --rail-gutter: var(--space-5);
  --rail-min:    180px;
  --rail-max:    240px;
  --rail-width:  clamp(var(--rail-min),
                       calc((100vw - var(--layout-max)) / 2 - var(--rail-gap) - var(--rail-gutter)),
                       var(--rail-max));
}

:root[data-theme="dark"] {
  --color-bg:           #0b0c0f;
  --color-bg-elevated:  #131418;
  --color-bg-sunken:    #16181d;
  --color-fg:           #d4d4d8;
  --color-fg-muted:     #8e8e96;
  --color-fg-subtle:    #65656c;
  --color-border:       #26282f;
  --color-border-strong:#3f3f46;
  --color-accent:       #f06b5d;
  --color-accent-hover: #ff8a7e;
  --color-accent-soft:  rgba(240, 107, 93, 0.14);
  --color-accent-fg:    #18181b;
  --color-code-bg:      #15171c;
  --color-code-border:  #26282f;
  --color-header-bg:      rgba(11, 12, 15, 0.8);
  --color-header-bg-open: rgba(11, 12, 15, 0.92);
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-base);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--duration-base) ease,
              color var(--duration-base) ease;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-fg);
}

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

a:hover { color: var(--color-accent-hover); text-decoration: underline; }

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   Layout primitives
   ========================================================================= */
.container {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.site-main {
  padding-top: calc(var(--header-height) * 0.22);
  padding-bottom: var(--space-9);
  min-height: 70vh;
}

/* Skip link — visible only when focused */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-weight: 600;
  border-radius: var(--radius-md);
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
  z-index: 200;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
  text-decoration: none;
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-header-bg);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-4);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-fg);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
}

.site-brand:hover { text-decoration: none; color: var(--color-fg); }

/* Brand is a wordmark-only lockup on desktop; the avatar returns on mobile
   (see the responsive section). */
.site-logo {
  width: clamp(40px, 12vw, 48px);
  height: clamp(40px, 12vw, 48px);
  display: none;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.site-title {
  font-size: 1.75em;            /* 75% larger than the brand base size */
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.site-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav a {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) ease,
              background-color var(--duration-fast) ease;
}

.site-nav a:hover {
  color: var(--color-fg);
  background: var(--color-bg-sunken);
  text-decoration: none;
}

/* Recent posts inside the menu. Hidden on desktop (the fixed rail covers wide
   viewports); revealed inside the open mobile menu — see the responsive block. */
.nav-recent { display: none; }

.nav-recent-heading {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Pad each post card so the grey hover fill (from .site-nav a:hover) reads as a
   rounded card with breathing room instead of a full-width band. */
.nav-recent .recent-post-list a {
  padding: 5%;
  border-radius: var(--radius-md);
}

/* Icon buttons */
.icon-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font: inherit;
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.icon-btn:hover {
  background: var(--color-bg-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-accent);
}

.theme-toggle { font-size: var(--text-base); line-height: 1; }
.theme-icon-light, .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-icon-dark { display: inline; }
:root[data-theme="dark"]  .theme-icon-light { display: inline; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 320ms var(--ease-out),
              opacity 180ms ease;
}

.nav-toggle-bar:nth-child(1) { transition-delay: 60ms; }
.nav-toggle-bar:nth-child(2) { transition-delay: 0ms; }
.nav-toggle-bar:nth-child(3) { transition-delay: 60ms; }

.site-header.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  transition-delay: 0ms;
}
.site-header.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
  transition-delay: 0ms;
}
.site-header.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  transition-delay: 0ms;
}

.site-header.is-open .nav-toggle { color: var(--color-accent); }

/* =========================================================================
   Home page
   ========================================================================= */
.intro {
  text-align: center;
  padding: 0;
}

.intro-logo {
  width: clamp(112px, 20vw, 144px);
  height: clamp(112px, 20vw, 144px);
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.home-layout { margin-top: 0; }

.home-section {
  margin-top: var(--space-7);
}

.home-section:first-child {
  margin-top: var(--space-3);
}

.home-section > h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.about-body {
  font-size: var(--text-lg);
  color: var(--color-fg);
  line-height: 1.7;
}

.about-body p { margin: 0 0 var(--space-3); }
.about-body p:last-child { margin-bottom: 0; }

/* Social pills */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.social-list a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.social-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* PGP block */
.pgp-block {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  max-height: 360px;
  overflow: auto;
}

/* =========================================================================
   Sidebar (recent posts) — fixed on wide viewports
   ========================================================================= */
/* Hidden by default; the wide-viewport rule below promotes it into a fixed
   left-rail. Showing it inline below 1440px lands it under the footer at
   awkward sizes, so we keep it as a wide-screen-only feature. */
.sidebar-posts {
  display: none;
  max-width: var(--layout-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
}

.sidebar-posts-logo {
  display: block;
  text-align: center;
  margin-bottom: var(--space-3);
}

.sidebar-posts-logo img {
  width: 96px;
  height: 96px;
  display: inline-block;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* The recent-posts rail appears once the side margin can hold it at minimum
   width plus the inner gap and outer gutter (see the --rail-* tokens). Below
   that it would be clipped, so it stays a wide-viewport feature. */
@media (min-width: 1360px) {
  .sidebar-posts {
    display: block;
    position: fixed;
    top: calc(var(--header-height) + var(--space-6));
    width: var(--rail-width);
    /* Sit one --rail-gap to the left of the centered main column; --rail-width
       reserves --rail-gutter on the far side so the rail never clips. */
    right: calc((100vw + var(--layout-max)) / 2 + var(--rail-gap));
    max-height: calc(100vh - var(--header-height) - var(--space-7));
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }

  .sidebar-posts-logo { margin-bottom: var(--space-2); }
  .sidebar-posts-logo img { width: 88px; height: 88px; }

  /* The fixed rail now shows recent posts; hide the inline home version. */
  .home-latest { display: none; }
}

@media (min-width: 1480px) {
  .sidebar-posts-logo img { width: 108px; height: 108px; }
}

.sidebar-posts-details { width: 100%; }

.sidebar-posts-summary,
.post-toc-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
  transition: color var(--duration-fast) ease;
}

.sidebar-posts-summary::-webkit-details-marker,
.post-toc-summary::-webkit-details-marker { display: none; }

.sidebar-posts-summary::after,
.post-toc-summary::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform 360ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.sidebar-posts-details[open] .sidebar-posts-summary::after,
.post-toc-details[open] .post-toc-summary::after { transform: rotate(-180deg); }

.sidebar-posts-summary:hover,
.post-toc-summary:hover { color: var(--color-fg); }

.recent-post-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.recent-post-list li + li {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.recent-post-list a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-fg);
  border-radius: var(--radius-sm);
}

.recent-post-list a:hover { color: var(--color-accent); text-decoration: none; }

.recent-post-list time {
  display: block;
  color: var(--color-fg-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.recent-post-title {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}

.sidebar-posts {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-posts::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* =========================================================================
   Posts page (full list as cards)
   ========================================================================= */
.posts-page { max-width: var(--layout-read); margin: 0 auto; }

.post-list-full {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list-full li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.post-list-full li:last-child { border-bottom: none; }

.post-list-full a {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) ease;
}

.post-list-full a:hover { color: var(--color-accent); text-decoration: none; }

.post-list-full time {
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* =========================================================================
   Post (article)
   ========================================================================= */
.post {
  max-width: var(--layout-read);
  margin: 0 auto;
}

.post-header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.post-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  font-weight: 800;
}

.post-meta {
  color: var(--color-fg-subtle);
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.post-content {
  font-size: var(--text-md);
  line-height: 1.75;
  /* Long code lines must scroll inside their own block, never widen the page.
     `clip` caps the column without making it a scroll container, so heading
     anchors, the sticky-header offset, and vertical flow are all unaffected
     (unlike `hidden`, which would force overflow-y to auto here). */
  overflow-x: clip;
}

/* Keep each code block within the reading column so its overflow-x: auto
   engages and the block — not the page — is what scrolls sideways. */
.post-content pre { max-width: 100%; }

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.post-content h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.post-content h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.post-content p { margin: 0 0 var(--space-4); }

.post-content ul,
.post-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.post-content li { margin-bottom: var(--space-2); }
.post-content li::marker { color: var(--color-accent); }

.post-content img {
  display: block;
  margin: var(--space-5) auto;
  height: auto;
  border: 1px solid var(--color-border);
}

.post-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-accent-soft);
  transition: text-decoration-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.post-content a:hover {
  text-decoration-color: var(--color-accent);
}

/* Share row */
.post-share {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.post-share-label {
  color: var(--color-fg-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-share-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.post-share-btn:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.post-share-icon-only {
  padding: var(--space-2);
  width: 2.25rem;
  height: 2.25rem;
  justify-content: center;
}

.post-share-icon-copied { display: none; }

.post-share-copy.is-copied {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.post-share-copy.is-copied .post-share-icon-default { display: none; }
.post-share-copy.is-copied .post-share-icon-copied { display: inline-flex; }

/* =========================================================================
   Post TOC (right rail on wide viewports)
   ========================================================================= */
.post-toc { display: none; }

/* Mirrors the recent-posts rail on the opposite margin with the same --rail-*
   sizing, so both rails reveal and scale identically. */
@media (min-width: 1360px) {
  .post-toc[hidden] { display: none; }
  .post-toc {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--header-height) + var(--space-6));
    bottom: var(--space-6);
    /* Sit one --rail-gap to the right of the centered main column. */
    left: calc((100vw + var(--layout-max)) / 2 + var(--rail-gap));
    width: var(--rail-width);
    overflow: hidden;
  }
}

.post-toc-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.post-toc-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.post-toc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-toc-nav > ul { margin-top: var(--space-3); }

.post-toc-nav li { padding: var(--space-1) 0; }

.post-toc-nav ul ul {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}

.post-toc-nav a {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  display: block;
  padding: 2px 0;
  transition: color var(--duration-fast) ease;
}

.post-toc-nav a:hover { color: var(--color-accent); text-decoration: none; }

.post-toc-nav a.is-active {
  color: var(--color-accent);
  font-weight: 600;
}

.post-toc-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.post-toc-nav::-webkit-scrollbar { width: 6px; }
.post-toc-nav::-webkit-scrollbar-track { background: transparent; }
.post-toc-nav::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.post-toc-nav::-webkit-scrollbar-thumb:hover { background: var(--color-fg-muted); }

/* =========================================================================
   Long-form content elements
   ========================================================================= */
blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-5) 0;
  padding: var(--space-2) var(--space-5);
  color: var(--color-fg-muted);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

code {
  background: var(--color-code-bg);
  padding: 0.15em 0.4em;
  font-size: 0.88em;
  font-family: var(--font-mono);
  color: var(--color-fg);
  font-weight: 500;
}

pre {
  background: var(--color-code-bg);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--color-code-border);
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--color-fg);
}

pre {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

/* =========================================================================
   Syntax highlighting (Rouge tokens)
   ========================================================================= */
:root {
  --syn-comment:  #6a737d;
  --syn-keyword:  #b82417;
  --syn-string:   #0a7d3a;
  --syn-number:   #b15c00;
  --syn-function: #5d35b8;
  --syn-type:     #0a6191;
  --syn-tag:      #b82417;
  --syn-attr:     #5d35b8;
  --syn-operator: #6a737d;
  --syn-constant: #b15c00;
}

:root[data-theme="dark"] {
  --syn-comment:  #8b949e;
  --syn-keyword:  #ff7b72;
  --syn-string:   #7ee787;
  --syn-number:   #ffa657;
  --syn-function: #d2a8ff;
  --syn-type:     #79c0ff;
  --syn-tag:      #7ee787;
  --syn-attr:     #d2a8ff;
  --syn-operator: #8b949e;
  --syn-constant: #ffa657;
}

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs,
.highlight .ch, .highlight .cd { color: var(--syn-comment); font-style: italic; }

.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt, .highlight .kv { color: var(--syn-keyword); font-weight: 600; }

.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx,
.highlight .sr, .highlight .ss, .highlight .dl { color: var(--syn-string); }

.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi,
.highlight .il, .highlight .mo, .highlight .mx { color: var(--syn-number); }

.highlight .nf, .highlight .fm { color: var(--syn-function); font-weight: 500; }
.highlight .nc, .highlight .nn, .highlight .ne, .highlight .nl { color: var(--syn-type); font-weight: 500; }
.highlight .nb, .highlight .bp { color: var(--syn-type); }
.highlight .na, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: var(--syn-attr); }
.highlight .nt { color: var(--syn-tag); }
.highlight .o, .highlight .ow, .highlight .p { color: var(--syn-operator); }
.highlight .no, .highlight .kc { color: var(--syn-constant); }

.highlight .err {
  color: inherit;
  background: transparent;
}

.highlight .gh, .highlight .gu { color: var(--syn-keyword); font-weight: 600; }
.highlight .gd { color: #b82417; background: rgba(184, 36, 23, 0.08); }
.highlight .gi { color: #0a7d3a; background: rgba(10, 125, 58, 0.08); }
:root[data-theme="dark"] .highlight .gd { color: #ff7b72; background: rgba(255, 123, 114, 0.12); }
:root[data-theme="dark"] .highlight .gi { color: #7ee787; background: rgba(126, 231, 135, 0.12); }

/* Rouge wraps fenced code in <div class="language-x highlighter-rouge">
   <div class="highlight"><pre class="highlight">...</pre></div></div>.
   The inline-code variant just puts .highlighter-rouge on a bare <code>, so we
   only target the block wrappers here (div, not code). */
div.highlighter-rouge {
  background: transparent;
  margin: var(--space-5) 0;
}

div.highlighter-rouge > .highlight { background: transparent; margin: 0; }
div.highlighter-rouge > .highlight > pre { margin: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
}

th, td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

th {
  font-weight: 600;
  color: var(--color-fg);
  background: var(--color-bg-sunken);
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-fg-subtle);
  font-size: var(--text-sm);
  padding: var(--space-5) 0;
  margin-top: var(--space-9);
}

.site-footer p { margin: 0; text-align: center; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 720px) {
  :root { --header-height: 83px; }

  /* Avatar returns as the brand mark; the wordmark sits 50% above base size. */
  .site-logo { display: block; }
  .site-title { font-size: 1.5em; letter-spacing: -0.015em; }

  body { font-size: var(--text-base); }

  .site-main { padding-bottom: var(--space-7); }

  .intro { padding: 0; }

  .home-section { margin-top: var(--space-6); }

  .post-content { font-size: var(--text-base); line-height: 1.7; }

  .post-list-full li { padding: var(--space-4) 0; }
  .post-list-full a { font-size: var(--text-xl); }

  .nav-toggle { display: inline-flex; }

  /* Swap the lone "Blog Posts" link for the inline recent-posts list, so a post
     is two taps away: open the menu, tap the post. */
  .nav-posts-link { display: none; }
  .nav-recent { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Match the header's translucent bar so the menu reads as the header
       extending downward, not a separate panel. */
    background: var(--color-header-bg-open);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-5);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 280ms var(--ease-out),
                opacity 200ms ease,
                transform 280ms var(--ease-out),
                padding 200ms ease;
  }

  .site-header.is-open .site-nav {
    max-height: calc(100vh - var(--header-height));
    opacity: 1;
    transform: translateY(0);
    padding: var(--space-2) var(--space-5) var(--space-4);
    overflow-y: auto;
  }

  .site-nav > a {
    padding: var(--space-3) 0;
    color: var(--color-fg);
    font-size: var(--text-base);
    font-weight: 500;
    border-radius: 0;
    background: transparent;
    transition: color var(--duration-fast) ease;
  }

  .site-nav > a:hover {
    color: var(--color-accent);
    background: transparent;
  }
}