/* ==========================================================================
   Editor's Broadsheet — Blog Redesign CSS
   Replaces: tachyons, story.css, descartes.css, retro-cards.css, toc.css, custom.css
   ========================================================================== */

/* --- Custom Properties --- */
:root {
  --color-bg: #FAF8F5;
  --color-text: #2D2926;
  --color-text-muted: #6B6560;
  --color-accent: #E8421E;
  --color-link: #3730A3;
  --color-link-hover: #E8421E;
  --color-border: #E0DCD7;
  --color-border-light: #EDEAE6;
  --color-surface: #FFFFFF;
  --color-code-bg: #F3F1EE;
  --color-pill-bg: #EDEAE6;

  /* Colours that were hardcoded in rules below; routed through variables so
     the dark theme can override them. Light values are unchanged. */
  --color-rule: #000;                          /* heavy h2 / section underlines */
  --color-link-underline: rgba(55, 48, 163, 0.3);
  --color-on-accent: #fff;                     /* text/glyphs on accent-filled shapes */
  --color-hover-tint: rgba(0, 0, 0, 0.015);    /* row hover wash */
  --color-inverse-muted: rgba(255, 255, 255, 0.7); /* muted text on --color-text fill */
  --color-mark-bg: #FFF3CD;
  --color-mark-text: #000;                     /* UA default MarkText */
  --color-il-fire-bg: #FFF8F0;
  --color-banner-stripe: #fff6f2;
  --color-img-backing: transparent;            /* behind transparent content images */
  --color-adm-bg: #F5F3F0;
  --color-adm-note-bg: #F0F3F5;
  --color-adm-tip-bg: #F2F7ED;
  --color-adm-warning-bg: #FFF3E0;
  --color-adm-caution-bg: #FBE9E7;
  --color-adm-important-bg: #FDE8E4;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' fill-opacity='0.02'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' fill-opacity='0.015'/%3E%3Crect width='1' height='1' x='3' y='0' fill='%23000' fill-opacity='0.01'/%3E%3Crect width='1' height='1' x='1' y='3' fill='%23000' fill-opacity='0.025'/%3E%3C/svg%3E");

  /* Syntax highlighting for Markdown code fences (Chroma, class-based output;
     see markup.highlight.noClasses in config.yaml). Light values are Chroma's
     "pygments" style, i.e. exactly what the inline styles used to produce. */
  --hl-keyword: #008000;
  --hl-type: #b00040;
  --hl-attr: #7d9029;
  --hl-name: #00f;            /* classes, functions, namespaces */
  --hl-constant: #800;
  --hl-decorator: #a2f;       /* decorators, operator words */
  --hl-entity: #999;
  --hl-exception: #d2413a;
  --hl-label: #a0a000;
  --hl-variable: #19177c;
  --hl-string: #ba2121;
  --hl-escape: #b62;
  --hl-interpol: #b68;        /* interpolation, regex */
  --hl-number: #666;          /* numbers, operators */
  --hl-comment: #408080;
  --hl-preproc: #bc7a00;
  --hl-deleted: #a00000;
  --hl-inserted: #00a000;
  --hl-error: #f00;
  --hl-heading: #000080;      /* headings, prompts */
  --hl-subheading: #800080;
  --hl-traceback: #04d;
  --hl-output: #888;
  --hl-whitespace: #bbb;
  --hl-line-number: #7f7f7f;
  --hl-line-highlight: #e5e5e5;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Libre Baskerville', Georgia, serif;
  --font-ui: 'Outfit', sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  --max-width: 1200px;
  --article-width: 700px;
  --sidebar-width: 280px;
  --header-height: 60px;
  --thumb-size: 60px;
}

/* --- Dark theme ---
   Applied when <html data-theme="dark">. An inline script in baseof.html sets
   data-theme before first paint from the visitor's choice in the header
   switch (light / dark / system), where "system" follows the OS setting.
   Only variables are overridden here; rules below read them. `screen` keeps
   print output on the light palette. The critical CSS in baseof.html carries
   copies of --color-bg / --color-text / --color-accent — keep them in sync. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #1C1917;
    --color-text: #EDE7E0;
    --color-text-muted: #A89F97;
    --color-accent: #F0643C;
    --color-link: #A8A4F5;
    --color-link-hover: #F0643C;
    --color-border: #3D3632;
    --color-border-light: #2B2623;
    --color-surface: #24201D;
    --color-code-bg: #262220;
    --color-pill-bg: #2E2926;

    --color-rule: #CFC7BF;
    --color-link-underline: rgba(168, 164, 245, 0.35);
    --color-on-accent: #1C1917;
    --color-hover-tint: rgba(255, 255, 255, 0.03);
    --color-inverse-muted: rgba(28, 25, 23, 0.7);
    --color-mark-bg: #4D3F1A;
    --color-mark-text: #EDE7E0;
    --color-il-fire-bg: #2E221B;
    --color-banner-stripe: #2E2420;
    /* Transparent PNG/SVG diagrams are drawn for a light page; give them the
       light theme's background so dark lines stay legible. Opaque images are
       unaffected. */
    --color-img-backing: #FAF8F5;
    --color-adm-bg: #26221F;
    --color-adm-note-bg: #212629;
    --color-adm-tip-bg: #222720;
    --color-adm-warning-bg: #2E241B;
    --color-adm-caution-bg: #2E1E1C;
    --color-adm-important-bg: #30201B;
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23fff' fill-opacity='0.015'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23fff' fill-opacity='0.01'/%3E%3Crect width='1' height='1' x='3' y='0' fill='%23fff' fill-opacity='0.008'/%3E%3Crect width='1' height='1' x='1' y='3' fill='%23fff' fill-opacity='0.02'/%3E%3C/svg%3E");

    --hl-keyword: #8FC77A;
    --hl-type: #F28DA6;
    --hl-attr: #BCCB6A;
    --hl-name: #8AB4F8;
    --hl-constant: #EE9A8F;
    --hl-decorator: #D0A2F2;
    --hl-entity: #A8A29E;
    --hl-exception: #F28B82;
    --hl-label: #D6D26A;
    --hl-variable: #B8B0F5;
    --hl-string: #F0A08A;
    --hl-escape: #E6A45E;
    --hl-interpol: #E6A0C8;
    --hl-number: #C2BAB2;
    --hl-comment: #82B8AE;
    --hl-preproc: #E0B35A;
    --hl-deleted: #F28B82;
    --hl-inserted: #86D686;
    --hl-error: #FF7B72;
    --hl-heading: #A3AEF7;
    --hl-subheading: #D9A0E0;
    --hl-traceback: #82AAFF;
    --hl-output: #A8A29E;
    --hl-whitespace: #6B635C;
    --hl-line-number: #9A928A;
    --hl-line-highlight: #3A3430;
  }
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important; /* Sharp corners everywhere */
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  /* Paper grain texture */
  background-image: var(--paper-grain);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
}

img:not([height]) {
  height: auto;
}

.imageblock.text-center {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.docs-content .article .quoteblock blockquote {
  margin-bottom: 0;
}

.quoteblock .attribution {
  text-align: right;
  margin-bottom: 1.5rem;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

/* --- Site Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-accent);
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  max-width: 100%;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-title:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.site-nav a.nav-il {
  font-weight: 600;
}

.nav-sep {
  width: 1px;
  height: 1.2em;
  background: var(--color-border);
  display: inline-block;
  vertical-align: middle;
}

.site-nav .nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-nav .nav-icon svg {
  width: 14px;
  height: 14px;
}

/* Keyboard shortcut hint in nav */
.nav-kbd {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  margin-left: 0.2rem;
  vertical-align: middle;
  line-height: 1;
}

/* Social links in nav */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.nav-social a {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.nav-social a:hover {
  color: var(--color-accent);
}

.nav-social svg {
  width: 18px;
  height: 18px;
}

/* Theme control (light / dark / system). Desktop header: one icon button
   (.theme-menu) that opens a small menu; mobile nav drawer: a labelled
   segmented row (.theme-switch). Wired up by js/theme-switch.js. Hidden when
   JS hasn't run, since the inline head script is what sets data-theme. */
html:not([data-theme]) .theme-menu,
html:not([data-theme]) .mobile-nav-theme {
  display: none;
}

.theme-menu {
  position: relative;
  display: inline-flex;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.theme-menu-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.theme-menu-button:hover,
.theme-menu-button[aria-expanded="true"] {
  color: var(--color-accent);
}

.theme-menu-button:focus-visible,
.theme-menu-list button:focus-visible,
.theme-switch button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-menu-button svg {
  width: 18px;
  height: 18px;
}

/* The button shows the current choice */
.theme-menu-icon {
  display: none;
}

html[data-theme-pref="light"] .theme-menu-icon[data-theme-icon="light"],
html[data-theme-pref="dark"] .theme-menu-icon[data-theme-icon="dark"],
html[data-theme-pref="system"] .theme-menu-icon[data-theme-icon="system"] {
  display: inline-flex;
}

.theme-menu-list {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  z-index: 200;
  min-width: 9rem;
  padding: 0.25rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.theme-menu-list[hidden] {
  display: none;
}

.theme-menu-list button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.theme-menu-list button:hover,
.theme-menu-list button:focus-visible {
  background: var(--color-pill-bg);
}

.theme-menu-list button[aria-checked="true"] {
  color: var(--color-accent);
  font-weight: 600;
}

.theme-menu-list svg,
.theme-switch svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Mobile nav drawer: a "Theme" section after "Follow", options spread
   across the drawer's width */
.theme-switch {
  display: flex;
  margin: 0.25rem 1.5rem 0;
  border: 1px solid var(--color-border);
}

.theme-switch button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.45rem;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.theme-switch button + button {
  border-left: 1px solid var(--color-border);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--color-pill-bg);
  color: var(--color-text);
}


/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-text);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Hamburger turns into a close (×) icon while the drawer is open */
.nav-toggle .nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-close {
  display: block;
}

/* Mobile nav drawer (<=1024px, opened by js/mobile-nav.js): a panel under
   the hamburger on tablets, full width on phones. */
.mobile-nav {
  display: none;
  position: absolute;
  top: var(--header-height);
  right: 0;
  width: min(22rem, 100%);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  z-index: 99;
}

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

.mobile-nav-primary a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-left: 3px solid transparent;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.mobile-nav-primary a svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}

.mobile-nav-primary a:hover {
  background: var(--color-pill-bg);
  color: var(--color-text);
}

.mobile-nav-primary a[aria-current="page"],
.mobile-nav-primary a[aria-current="page"] svg {
  color: var(--color-accent);
}

.mobile-nav-primary a[aria-current="page"] {
  border-left-color: var(--color-accent);
}

.mobile-nav-heading {
  margin: 0.75rem 1.5rem 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mobile-nav .mobile-nav-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  padding: 0 1rem;
}

.mobile-nav-social a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.mobile-nav-social a:hover {
  color: var(--color-accent);
}

.mobile-nav-social svg {
  width: 16px;
  height: 16px;
}

/* Tighter desktop widths (down to 1025px, where the hamburger menu takes
   over): keep every nav item on one line. Links never wrap (which used to
   stack the icon above a two-line label); instead the ⌘K hint goes and the
   gaps tighten. Icons are centred on the label (they used to sit above
   the text baseline). */
.site-nav > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .site-nav {
    gap: 1rem;
  }

  .nav-kbd {
    display: none;
  }

  .nav-social {
    gap: 0.6rem;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
  }
}

/* --- Layout Containers --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* --- Homepage Hero Banner --- */
.homepage-hero {
  width: 100%;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 70%,
    var(--color-bg) 100%
  );
  display: flex;
  align-items: flex-end;
}

.homepage-hero-title {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.homepage-hero-subtitle {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  margin-top: 0.35rem;
}

/* --- Hero band — full-width dark strip at bottom of hero images --- */
.hero-band {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
  padding: 0.5rem 2rem;
}

.hero-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* --- Featured Post --- */
.featured-post {
  margin-bottom: 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
}

.featured-post-thumb-link {
  flex-shrink: 0;
  display: flex;
}

.featured-post-thumb {
  width: 160px;
  object-fit: cover;
  display: block;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.featured-post-body {
  flex: 1;
  min-width: 0;
}

.featured-post-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.featured-post-title a {
  color: var(--color-text);
  text-decoration: none;
}

.featured-post-title a:hover {
  color: var(--color-accent);
}

.featured-post-meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.featured-post-excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Post List Rows --- */
.post-list {
  list-style: none;
}

.post-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.1s ease;
  position: relative;
}

.post-row:hover {
  background-color: var(--color-hover-tint);
  cursor: pointer;
}

.post-row:first-child {
  border-top: 1px solid var(--color-border);
}

.post-thumb-link {
  flex-shrink: 0;
  display: flex;
  position: relative;
  z-index: 1;
}

.post-thumb {
  width: 90px;
  height: 60px;
  min-width: 90px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.post-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.post-date {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.post-title-link {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.35;
}

.post-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.post-title-link:hover {
  color: var(--color-link);
}

.post-category {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-pill-bg);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Hide category pill on term (single-category) pages — it's redundant */
.page-kind-term .post-category {
  display: none;
}

/* --- Year-grouped post sections (term pages) --- */
.year-group {
  margin-bottom: 1rem;
}

.year-group .post-list {
  margin: 0;
}

details.year-group > summary.year-group-header {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details.year-group > summary.year-group-header::-webkit-details-marker {
  display: none;
}

details.year-group > summary.year-group-header::after {
  content: "+";
  font-family: var(--font-code);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-accent);
}

details.year-group > summary.year-group-header:hover::after {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

details.year-group[open] > summary.year-group-header {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

details.year-group[open] > summary.year-group-header::after {
  content: "\2212";
}

.year-activity {
  display: inline-flex;
  gap: 3px;
  margin-left: 0.75rem;
  vertical-align: middle;
}

.year-activity-block {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-accent);
}

.year-activity-block.future {
  background: none;
  border: 1px solid var(--color-border);
}

.year-activity-block.level-0 {
  background: var(--color-border);
  opacity: 0.4;
}

.year-activity-block.level-1 {
  opacity: 0.35;
}

.year-activity-block.level-2 {
  opacity: 0.55;
}

.year-activity-block.level-3 {
  opacity: 0.75;
}

.year-activity-block.level-4 {
  opacity: 1;
}

/* --- Sidebar --- */
.sidebar {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
}

.sidebar-section {
  margin-bottom: 2rem;
}

.sidebar-section-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-border-light);
  border-left: 3px solid var(--color-accent);
}

/* Author card */
.author-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.author-avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.author-role {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.author-bio-text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.author-tagline {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-accent);
  font-style: italic;
  margin-top: 0.35rem;
}

/* Category list */
.category-list {
  list-style: none;
}

.category-list li {
  margin-bottom: 0.35rem;
}

.category-list a {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.category-list a:hover {
  color: var(--color-link);
}

.category-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.sidebar-view-all {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  display: inline-block;
  margin-top: 0.5rem;
}

/* --- Category Search Strip --- */
.cat-search-strip {
  background: var(--color-border-light);
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.cat-search-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.cat-search-input {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.cat-search-input:focus {
  border-color: var(--color-accent);
}

.cat-search-input::placeholder {
  color: var(--color-text-muted);
}

.cat-search-clear {
  position: absolute;
  left: 370px;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 0.25rem;
}

.cat-search-clear:hover {
  color: var(--color-text);
}

.cat-search-no-results {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 2rem 0;
}

.cat-search-count {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.cat-description {
  margin-bottom: 2rem;
}

/* --- Article Page --- */

/* Article hero: photo with title overlaid, fading into background */
.article-hero {
  position: relative;
  width: 100%;
  min-height: 340px;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.65) 75%,
    rgba(0, 0, 0, 0.8) 100%
  );
  display: flex;
  align-items: flex-end;
}

/* Fade bottom edge into page background */
.article-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 1;
  pointer-events: none;
}

.article-hero-content {
  background: none;
  width: 100%;
  padding: 2rem 2rem 1.75rem;
}

.article-hero-content-inner {
  max-width: 900px;
}

.article-hero-content h1 {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  margin: 0 0 0.5rem 0;
}

.article-hero-meta {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.article-hero-meta a {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.article-hero-meta a:hover {
  color: #fff;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 3rem;
  max-width: calc(var(--article-width) + 220px + 3rem);
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.article-main {
  max-width: var(--article-width);
}

.article-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.article-meta {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.article-meta a {
  color: var(--color-text-muted);
}

.article-meta a:hover {
  color: var(--color-link);
}

.article-meta .meta-sep {
  margin: 0 0.4rem;
}

/* Article body content */
.article-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.article-body p {
  margin-bottom: 1.25rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--color-rule);
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.article-body h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.article-body a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 2px;
}

.article-body a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

.article-body ul,
.article-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.35rem;
}

.article-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-code-bg);
  font-style: italic;
}

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

.article-body img {
  margin: 1.5rem 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid var(--color-border);
  background-color: var(--color-img-backing);
}

.article-body figure {
  margin: 1.5rem 0;
}

.article-body figcaption,
.article-body .figcaption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.article-body th,
.article-body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.article-body th {
  background: var(--color-code-bg);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
}

.article-body caption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  text-align: left;
  font-style: italic;
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Code blocks */
.article-body code,
code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--color-code-bg);
  padding: 0.15em 0.35em;
}

.article-body pre,
pre {
  background: var(--color-code-bg);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.5;
}

.article-body pre code,
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Rouge syntax highlighting */
.rouge.highlight {
  position: relative;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.rouge.highlight pre {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Chroma syntax highlighting (Markdown code fences). Generated from
   `hugo gen chromastyles --style=pygments` with colours swapped for the
   --hl-* variables defined in :root, so both themes share one rule set. */
/* PreWrapper */ .chroma { -moz-tab-size:4; tab-size:4; -webkit-text-size-adjust:none; }
/* LineLink */ .chroma .lnlinks { outline:none; text-decoration:none; color:inherit; }
/* LineTableTD */ .chroma .lntd { vertical-align:top; padding:0; margin:0; border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0; padding:0; margin:0; border:0; }
/* LineHighlight */ .chroma .hl { background-color:var(--hl-line-highlight); }
/* LineNumbersTable */ .chroma .lnt { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em 0 0.4em; color:var(--hl-line-number); }
/* LineNumbers */ .chroma .ln { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em 0 0.4em; color:var(--hl-line-number); }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:var(--hl-keyword); font-weight:bold; }
/* KeywordConstant */ .chroma .kc { color:var(--hl-keyword); font-weight:bold; }
/* KeywordDeclaration */ .chroma .kd { color:var(--hl-keyword); font-weight:bold; }
/* KeywordNamespace */ .chroma .kn { color:var(--hl-keyword); font-weight:bold; }
/* KeywordPseudo */ .chroma .kp { color:var(--hl-keyword); }
/* KeywordReserved */ .chroma .kr { color:var(--hl-keyword); font-weight:bold; }
/* KeywordType */ .chroma .kt { color:var(--hl-type); }
/* NameAttribute */ .chroma .na { color:var(--hl-attr); }
/* NameClass */ .chroma .nc { color:var(--hl-name); font-weight:bold; }
/* NameConstant */ .chroma .no { color:var(--hl-constant); }
/* NameDecorator */ .chroma .nd { color:var(--hl-decorator); }
/* NameEntity */ .chroma .ni { color:var(--hl-entity); font-weight:bold; }
/* NameException */ .chroma .ne { color:var(--hl-exception); font-weight:bold; }
/* NameLabel */ .chroma .nl { color:var(--hl-label); }
/* NameNamespace */ .chroma .nn { color:var(--hl-name); font-weight:bold; }
/* NameTag */ .chroma .nt { color:var(--hl-keyword); font-weight:bold; }
/* NameBuiltin */ .chroma .nb { color:var(--hl-keyword); }
/* NameBuiltinPseudo */ .chroma .bp { color:var(--hl-keyword); }
/* NameVariable */ .chroma .nv { color:var(--hl-variable); }
/* NameVariableClass */ .chroma .vc { color:var(--hl-variable); }
/* NameVariableGlobal */ .chroma .vg { color:var(--hl-variable); }
/* NameVariableInstance */ .chroma .vi { color:var(--hl-variable); }
/* NameVariableMagic */ .chroma .vm { color:var(--hl-variable); }
/* NameFunction */ .chroma .nf { color:var(--hl-name); }
/* NameFunctionMagic */ .chroma .fm { color:var(--hl-name); }
/* LiteralString */ .chroma .s { color:var(--hl-string); }
/* LiteralStringAffix */ .chroma .sa { color:var(--hl-string); }
/* LiteralStringBacktick */ .chroma .sb { color:var(--hl-string); }
/* LiteralStringChar */ .chroma .sc { color:var(--hl-string); }
/* LiteralStringDelimiter */ .chroma .dl { color:var(--hl-string); }
/* LiteralStringDoc */ .chroma .sd { color:var(--hl-string); font-style:italic; }
/* LiteralStringDouble */ .chroma .s2 { color:var(--hl-string); }
/* LiteralStringEscape */ .chroma .se { color:var(--hl-escape); font-weight:bold; }
/* LiteralStringHeredoc */ .chroma .sh { color:var(--hl-string); }
/* LiteralStringInterpol */ .chroma .si { color:var(--hl-interpol); font-weight:bold; }
/* LiteralStringOther */ .chroma .sx { color:var(--hl-keyword); }
/* LiteralStringRegex */ .chroma .sr { color:var(--hl-interpol); }
/* LiteralStringSingle */ .chroma .s1 { color:var(--hl-string); }
/* LiteralStringSymbol */ .chroma .ss { color:var(--hl-variable); }
/* LiteralNumber */ .chroma .m { color:var(--hl-number); }
/* LiteralNumberBin */ .chroma .mb { color:var(--hl-number); }
/* LiteralNumberFloat */ .chroma .mf { color:var(--hl-number); }
/* LiteralNumberHex */ .chroma .mh { color:var(--hl-number); }
/* LiteralNumberInteger */ .chroma .mi { color:var(--hl-number); }
/* LiteralNumberIntegerLong */ .chroma .il { color:var(--hl-number); }
/* LiteralNumberOct */ .chroma .mo { color:var(--hl-number); }
/* Operator */ .chroma .o { color:var(--hl-number); }
/* OperatorWord */ .chroma .ow { color:var(--hl-decorator); font-weight:bold; }
/* Comment */ .chroma .c { color:var(--hl-comment); font-style:italic; }
/* CommentHashbang */ .chroma .ch { color:var(--hl-comment); font-style:italic; }
/* CommentMultiline */ .chroma .cm { color:var(--hl-comment); font-style:italic; }
/* CommentSingle */ .chroma .c1 { color:var(--hl-comment); font-style:italic; }
/* CommentSpecial */ .chroma .cs { color:var(--hl-comment); font-style:italic; }
/* CommentPreproc */ .chroma .cp { color:var(--hl-preproc); }
/* CommentPreprocFile */ .chroma .cpf { color:var(--hl-preproc); }
/* GenericDeleted */ .chroma .gd { color:var(--hl-deleted); }
/* GenericEmph */ .chroma .ge { font-style:italic; }
/* GenericError */ .chroma .gr { color:var(--hl-error); }
/* GenericHeading */ .chroma .gh { color:var(--hl-heading); font-weight:bold; }
/* GenericInserted */ .chroma .gi { color:var(--hl-inserted); }
/* GenericOutput */ .chroma .go { color:var(--hl-output); }
/* GenericPrompt */ .chroma .gp { color:var(--hl-heading); font-weight:bold; }
/* GenericStrong */ .chroma .gs { font-weight:bold; }
/* GenericSubheading */ .chroma .gu { color:var(--hl-subheading); font-weight:bold; }
/* GenericTraceback */ .chroma .gt { color:var(--hl-traceback); }
/* GenericUnderline */ .chroma .gl { text-decoration:underline; }
/* TextWhitespace */ .chroma .w { color:var(--hl-whitespace); }

/* Copy button */
.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  z-index: 10;
}

.copy-button:hover {
  background: var(--color-border-light);
  color: var(--color-text);
}

/* Headline anchors */
.headline-hash {
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 0.75em;
  user-select: none;
  -webkit-user-select: none;
}

h2:hover .headline-hash,
h3:hover .headline-hash,
h4:hover .headline-hash {
  opacity: 0.4;
}

.headline-hash:hover {
  opacity: 1 !important;
}

/* --- Admonition Blocks (AsciiDoc NOTE, TIP, WARNING, etc.) --- */
.admonitionblock {
  margin: 1.5rem 0;
  border: none;
  overflow: visible;
}

.admonitionblock > table,
.docs-content .article .admonitionblock > table {
  border-collapse: separate;
  border: none;
  background: none;
  width: 100%;
  border-left: 4px solid var(--color-text-muted);
  background: var(--color-adm-bg);
  margin: 0;
}

.admonitionblock > table td,
.docs-content .article .admonitionblock > table td {
  border: none;
}

.admonitionblock > table td.icon {
  text-align: center;
  width: 3rem;
  vertical-align: top;
  padding: 0.75rem 0 0.75rem 0.75rem;
}

.admonitionblock > table td.icon [class^="fa icon-"] {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}

.admonitionblock > table td.icon [class^="fa icon-"]::before {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  text-shadow: none;
}

.admonitionblock > table td.icon .icon-note    { background: #546E7A; }
.admonitionblock > table td.icon .icon-tip     { background: #558B2F; }
.admonitionblock > table td.icon .icon-warning { background: #E65100; }
.admonitionblock > table td.icon .icon-caution { background: #C62828; }
.admonitionblock > table td.icon .icon-important { background: var(--color-accent); }

.admonitionblock > table td.icon .icon-note::before    { content: "i"; color: #fff; }
.admonitionblock > table td.icon .icon-tip::before     { content: "✦"; color: #fff; }
.admonitionblock > table td.icon .icon-warning::before { content: "!"; color: #fff; }
.admonitionblock > table td.icon .icon-caution::before { content: "!!"; color: #fff; font-size: 0.7rem; }
.admonitionblock > table td.icon .icon-important::before { content: "!"; color: #fff; }

.admonitionblock > table td.content {
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  border-left: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

.admonitionblock > table td.content > :last-child > :last-child {
  margin-bottom: 0;
}

/* Type-specific border + background colors (needs .docs-content .article prefix to beat base rule) */
.docs-content .article .admonitionblock.note > table,
.admonitionblock.note > table  { border-left-color: #546E7A; background: var(--color-adm-note-bg); }
.docs-content .article .admonitionblock.tip > table,
.admonitionblock.tip > table   { border-left-color: #558B2F; background: var(--color-adm-tip-bg); }
.docs-content .article .admonitionblock.warning > table,
.admonitionblock.warning > table  { border-left-color: #E65100; background: var(--color-adm-warning-bg); }
.docs-content .article .admonitionblock.caution > table,
.admonitionblock.caution > table  { border-left-color: #C62828; background: var(--color-adm-caution-bg); }
.docs-content .article .admonitionblock.important > table,
.admonitionblock.important > table { border-left-color: var(--color-accent); background: var(--color-adm-important-bg); }

.admonitionblock > table td.content .title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
}

/* --- Code Callout Lists --- */
/* Circular number badges - editorial style using brand accent */
.conum[data-value] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 50% !important;
  background: var(--color-accent);  /* Brand red for editorial feel */
  color: var(--color-on-accent);
  text-align: center;
  font-size: 0.65rem;
  font-style: normal;
  font-family: var(--font-ui);
  font-weight: 600;
  vertical-align: baseline;
  margin-left: 0.25rem;
}

/* Display the number inside the circle from data-value attribute */
.conum[data-value]::before {
  content: attr(data-value);
}

/* Hide the redundant <b> sibling that AsciiDoc outputs next to conum icons */
.conum[data-value] + b {
  display: none;
}

/* Colist table styling moved after general table rules for proper cascade */

/* --- Listing Block Titles --- */
.docs-content .article .listingblock > .title {
  text-align: right;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0;              /* Tight to code block */
  padding: 0.2rem 0.5rem;
  background: var(--color-code-bg);
  border-right: 3px solid var(--color-accent);
}

.docs-content .article .listingblock > .title a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.docs-content .article .listingblock > .title a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* When title is present, remove top border-radius and gap from code block */
.docs-content .article .listingblock > .title + .content {
  margin-top: 0;
}

.docs-content .article .listingblock > .title + .content pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* --- Table of Contents (Right Sidebar) --- */
.toc-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 4rem);
  overflow-y: auto;
}

.toc-sidebar-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

/* Target Hugo-generated TOC structure */
.toc-sidebar nav#TableOfContents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-sidebar nav#TableOfContents ul ul {
  padding-left: 0.75rem;
}

.toc-sidebar nav#TableOfContents a {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.toc-sidebar nav#TableOfContents a:hover {
  color: var(--color-text);
}

.toc-sidebar nav#TableOfContents a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 500;
}

/* Also style the existing theme TOC classes for compatibility */
.docs-toc {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 4rem);
  overflow-y: auto;
  padding: 0;
  background: none;
  border: none;
  width: 220px;
  flex-shrink: 0;
}

.docs-toc .toc-top {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-toc .docs-toc-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  margin-bottom: 0.75rem;
}

.docs-toc #TableOfContents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-toc #TableOfContents ul ul {
  padding-left: 0.75rem;
}

.docs-toc #TableOfContents a {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-toc #TableOfContents a:hover {
  color: var(--color-text);
}

.docs-toc #TableOfContents a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 500;
}

/* Mobile TOC label (reuse from old theme) */
.toc-mobile-label {
  display: none;
}

/* Mobile TOC as <details> */
.toc-mobile {
  display: none;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-code-bg);
}

.toc-mobile summary {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.toc-mobile nav ul {
  list-style: none;
  padding: 0 1rem 0.75rem;
}

.toc-mobile nav ul ul {
  padding-left: 0.75rem;
}

.toc-mobile nav a {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.2rem 0;
  display: block;
  text-decoration: none;
}

.toc-mobile nav a:hover {
  color: var(--color-link);
}

/* --- Article content container matching old theme structure --- */
.container-fluid.docs {
  max-width: calc(var(--article-width) + 220px + 3rem + 4rem);
  margin: 0 auto;
  padding: 0 2rem;
  overflow-x: clip;
}

.container-fluid.docs:not(:has(.docs-toc)) {
  max-width: calc(var(--article-width) + 4rem);
}

.container-fluid.docs > .row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.container-fluid.docs > .row:not(:has(.docs-toc)) {
  grid-template-columns: 1fr;
}

.docs-content {
  max-width: var(--article-width);
  width: 100%;
  min-width: 0;
}

/* Article within the docs layout */
.docs-content .article {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
}

.docs-content .article p {
  margin-bottom: 1.25rem;
}

.docs-content .article h2,
.docs-content .article h3,
.docs-content .article h4 {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.docs-content .article h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--color-rule);
}

.docs-content .article h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.docs-content .article h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.docs-content .article a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 2px;
}

.docs-content .article a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

.docs-content .article ul,
.docs-content .article ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.docs-content .article li {
  margin-bottom: 0.35rem;
}

.docs-content .article blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-code-bg);
  font-style: italic;
}

.docs-content .article blockquote p:last-child {
  margin-bottom: 0;
}

.docs-content .article img {
  margin: 1.5rem 0;
  display: block;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid var(--color-border);
  background-color: var(--color-img-backing);
}

/* Width and height come from layouts/partials/post-images.html. This keeps the
   image in proportion when max-width shrinks it */
.docs-content .article img[width][height] {
  height: auto;
}

/* Exclude hidden pagefind meta images from shadow treatment */
.docs-content .article img[style*="display:none"],
.article-body img[style*="display:none"] {
  box-shadow: none;
  border: none;
}

.docs-content .article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.docs-content .article th,
.docs-content .article td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.docs-content .article th {
  background: var(--color-code-bg);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
}

.docs-content .article hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* --- Callout List Tables (placed after general table rules for cascade) --- */
/* Callout list - scholarly marginalia style */
.docs-content .article .colist {
  margin-top: 0;                 /* Flush against code block */
  margin-bottom: 1.5rem;         /* Paragraph break after */
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid var(--color-border);
  background: linear-gradient(to right, var(--color-code-bg) 0%, transparent 100%);
}

/* Only remove bottom margin from listingblock when followed by a colist */
.docs-content .article .listingblock:has(+ .colist) {
  margin-bottom: 0;
}

/* Remove bottom margin from pre only when listingblock is followed by colist */
.docs-content .article .listingblock:has(+ .colist) .content pre {
  margin-bottom: 0;
}

/* SQL query + results: query block flush against results */
.docs-content .article .listingblock:has(+ .listingblock.results) {
  margin-bottom: 0;
}

.docs-content .article .listingblock:has(+ .listingblock.results) .content pre {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Results block: darker bg, brighter text, flush against query */
.docs-content .article .listingblock.results {
  margin-top: 0;
}

.docs-content .article .listingblock.results .content pre {
  background-color: #282820 !important;
  color: #e8e0b0 !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  padding-top: 0.5rem;
}

.docs-content .article .listingblock.results .content {
  margin-top: 0;
}

/* Override Rouge inline styles inside results blocks */
.docs-content .article .listingblock.results .content pre code span {
  color: #e8e0b0 !important;
  background-color: transparent !important;
}

.docs-content .article .colist > table {
  border: none !important;
  border-collapse: collapse;
  background: none !important;
  margin: 0;
  padding: 0;
  width: auto !important;
}

.docs-content .article .colist > table td,
.docs-content .article .colist > table th,
.docs-content .article .colist > table tr {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  background: none !important;
  margin: 0;
  padding: 0;
}

/* Annotation text - UI font, compact, muted */
.docs-content .article .colist > table td {
  padding: 0.1rem 0.5rem 0.1rem 0 !important;
  vertical-align: top;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.docs-content .article .colist > table td:first-child {
  white-space: nowrap;
  width: 1.5rem;
  padding-top: 0.15rem !important;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 2rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2rem;
}

.site-footer a {
  color: var(--color-text-muted);
}

.site-footer a:hover {
  color: var(--color-link);
}

.footer-sep {
  margin: 0 0.5rem;
  color: var(--color-border);
}

/* --- About the Author section (in articles) --- */
.about-the-author {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: var(--article-width);
  margin: 0;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.about-the-author a {
  color: var(--color-link);
}

.about-the-author img {
  max-width: 200px;
}

/* --- Giscus comments --- */
.giscus-container {
  max-width: var(--article-width);
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
}

.pagination a:hover {
  background: var(--color-border-light);
  color: var(--color-text);
}

.pagination .active span {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* Hugo internal pagination template compatibility */
.page-item .page-link {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.page-item .page-link:hover {
  background: var(--color-border-light);
  color: var(--color-text);
}

.page-item.active .page-link {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.page-item.disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Pagefind Search --- */
.pagefind-ui {
  --pagefind-ui-primary: var(--color-link);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-surface);
  --pagefind-ui-border: var(--color-border);
  --pagefind-ui-tag: var(--color-pill-bg);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: var(--font-ui);
}

/* --- Category pages --- */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.category-pill {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  background: var(--color-pill-bg);
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
}

.category-pill:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* --- Compact cards (category term pages) --- */
.compact-card {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: var(--color-text);
}

.compact-card:hover {
  background-color: var(--color-hover-tint);
}

.compact-card-thumb {
  width: 120px;
  height: 80px;
  min-width: 120px;
  object-fit: cover;
}

.compact-card-content h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.compact-card-content p {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* --- Article header on single pages (title box area) --- */
.article-header {
  max-width: calc(var(--article-width) + 220px + 3rem);
  margin: 0 auto;
  padding: 2rem 2rem 0;
}

.article-header.article-header--no-toc {
  max-width: calc(var(--article-width) + 4rem);
}

/* Styles for title box used by the existing theme */
.title-box {
  padding: 1.5rem 0 0;
}

.title-box h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.title-subtitle {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.title-subtitle a {
  color: var(--color-text-muted);
}

.title-subtitle a:hover {
  color: var(--color-link);
}

/* --- Page hero (categories, search, etc.) --- */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.1) 60%,
    var(--color-bg) 100%
  );
  display: flex;
  align-items: flex-end;
}

.page-hero-content {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
  padding: 0.5rem 2rem;
}

.page-hero-content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.page-hero-content h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  margin: 0;
  display: inline;
}

.page-hero-content p {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  display: inline;
  margin-left: 0.75rem;
}

/* --- Page heading (fallback for pages without hero) --- */
.page-heading {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.25rem 0;
}

.page-heading-sub {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 2rem 0;
}

/* --- Categories page --- */
.cat-section {
  margin-bottom: 2rem;
}

.cat-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--color-rule);
}

.cat-popular-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-popular-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.cat-popular-item:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.cat-count {
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cat-popular-item:hover .cat-count,
.cat-item:hover .cat-count {
  color: var(--color-inverse-muted);
}

.cat-az-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.cat-jump-link {
  font-family: var(--font-code);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  transition: all 0.15s ease;
}

.cat-jump-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.cat-filter-container {
  display: flex;
  align-items: center;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}

.cat-filter-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
}

.cat-filter-input::placeholder {
  color: var(--color-text-muted);
}

.cat-filter-clear {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  display: none;
}

.cat-by-letter {
  margin-top: 1rem;
}

.cat-letter-section {
  margin-bottom: 1.5rem;
  scroll-margin-top: 80px;
}

.cat-letter-header {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem;
}

.cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.cat-item:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

@media (max-width: 640px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Print --- */
@media print {
  .site-header,
  .toc-sidebar,
  .docs-toc,
  .toc-mobile,
  .toc-mobile-label,
  .sidebar,
  .nav-social,
  .site-footer,
  .copy-button,
  .giscus-container,
  .hide-print {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .article-layout,
  .container-fluid.docs > .row {
    grid-template-columns: 1fr;
  }

  a { color: inherit; text-decoration: underline; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --- Responsive: Tablet --- */
@media (max-width: 1024px) {
  /* minmax(0, 1fr) (not plain 1fr) so the single column can shrink below its
     content's min-content width. The stacked .sidebar contains nowrap Popular
     posts titles; with a plain 1fr track those would force the whole grid wider
     than the viewport instead of being truncated with an ellipsis. */
  .layout-with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stack the sidebar below the post list rather than hiding it, so the
     Popular posts + Hit counter widgets stay visible on tablet/mobile. */
  .sidebar {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
  }

  .article-layout,
  .container-fluid.docs > .row {
    grid-template-columns: 1fr;
  }

  .docs-content {
    max-width: 100%;
  }

  .article-main {
    max-width: 100%;
  }

  .docs-toc {
    display: none;
  }

  .toc-mobile {
    display: block;
  }

  .nav-social {
    display: none;
  }

  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav.open {
    display: block;
  }
}

/* --- Responsive: Mobile --- */
@media (max-width: 640px) {
  :root {
    --thumb-size: 48px;
    --header-height: 52px;
  }

  html, body {
    overflow-x: hidden;
  }

  /* Hide the decorative home banner on phones so the latest post's
     headline sits near the top. The LCP preload in baseof.html is
     media-qualified to match (min-width: 641px) — keep them in sync. */
  .homepage-hero {
    display: none;
  }

  .homepage-hero-title {
    font-size: 1.75rem;
  }

  .homepage-hero-subtitle {
    font-size: 0.8rem;
  }

  .hero-band {
    padding: 0.4rem 1.25rem;
  }

  .article-hero {
    min-height: 230px;
    /* Smaller copy from layouts/partials/hero-image.html, when there is one */
    background-image: var(--hero-img-phone, var(--hero-img));
  }

  .article-hero-content h1 {
    font-size: 1.75rem;
  }

  .article-hero-content {
    padding: 1.25rem 1rem 1rem;
  }

  .article-hero-meta {
    font-size: 0.75rem;
  }

  .site-header {
    padding: 0 1rem;
  }

  .site-title {
    font-size: 1.1rem;
  }

  .container {
    padding: 0 1rem;
  }

  /* Featured post: stack vertically on mobile */
  .featured-post {
    flex-direction: column;
  }

  .featured-post-thumb {
    width: 100%;
    max-height: 200px;
  }

  .featured-post-title {
    font-size: 1.5rem;
  }

  .featured-post-excerpt {
    font-size: 0.9rem;
  }

  .post-thumb {
    width: 72px;
    height: 48px;
    min-width: 72px;
  }

  .post-row {
    gap: 0.5rem;
  }

  .post-title-link {
    font-size: 0.9rem;
  }

  .post-date {
    font-size: 0.7rem;
  }

  .post-category {
    display: none;
  }

  .article-title,
  .title-box h1 {
    font-size: 2rem;
  }

  /* Article content container on mobile */
  .article-layout,
  .container-fluid.docs {
    padding: 1rem;
    max-width: 100%;
  }

  .container-fluid.docs > .row {
    gap: 0;
  }

  .docs-content {
    max-width: 100%;
  }

  .article-main {
    max-width: 100%;
  }

  /* Article header on mobile */
  .article-header {
    padding: 1rem 1rem 0;
    max-width: 100%;
  }

  /* Code blocks: prevent overflow */
  .article-body pre,
  .docs-content .article pre,
  pre {
    max-width: calc(100vw - 2rem);
    overflow-x: auto;
  }

  /* Inline code: allow wrapping */
  .article-body code,
  .docs-content .article code,
  code {
    word-break: break-all;
  }

  /* Don't break code inside pre blocks */
  pre code {
    word-break: normal;
  }

  /* Tables: wrap in scrollable container */
  .article-body table,
  .docs-content .article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 2rem);
  }

  /* Listing blocks (AsciiDoc code blocks) */
  .docs-content .article .listingblock .content {
    overflow-x: auto;
    max-width: calc(100vw - 2rem);
  }

  /* Rouge highlight blocks */
  .rouge.highlight {
    max-width: calc(100vw - 2rem);
    overflow-x: auto;
  }

  /* Images: constrain to viewport */
  .article-body img,
  .docs-content .article img {
    max-width: 100%;
  }

  /* Page hero on mobile */
  .page-hero-content h1 {
    font-size: 1.35rem;
  }

  .page-hero-content p {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  /* Giscus container on mobile */
  .giscus-container {
    padding: 0.75rem;
    max-width: 100%;
  }

  /* About author on mobile */
  .about-the-author {
    max-width: 100%;
  }

  /* Mobile nav drawer goes full width on phones */
  .mobile-nav {
    width: 100%;
    border-left: none;
    border-right: none;
  }

  /* Pagination: wrap on mobile */
  .pagination {
    flex-wrap: wrap;
  }

  .page-item .page-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
  }

}

/* --- Responsive: Small Mobile (≤400px) --- */
@media (max-width: 400px) {
  .post-thumb {
    width: 60px;
    height: 40px;
    min-width: 60px;
  }

  .post-date {
    display: none;
  }
}

/* --- Utility classes used by inherited theme templates --- */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.db { display: block; }
.dib { display: inline-block; }
.dn { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }
.fr { float: right; }
.fl { float: left; }
.cf::after { content: ""; display: table; clear: both; }
.pa2 { padding: 0.5rem; }
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.ph3 { padding-left: 1rem; padding-right: 1rem; }
.ph4 { padding-left: 2rem; padding-right: 2rem; }
.ph5-l { padding-left: 4rem; padding-right: 4rem; }
.pv2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb6 { padding-bottom: 8rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5-l { padding-top: 4rem; }
.mt0 { margin-top: 0; }
.mt3 { margin-top: 1rem; }
.mt5 { margin-top: 4rem; }
.mb0 { margin-bottom: 0; }
.mb2 { margin-bottom: 0.5rem; }
.mb4 { margin-bottom: 2rem; }
.mr2 { margin-right: 0.5rem; }
.ma0 { margin: 0; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: 0.875rem; }
.f7 { font-size: 0.75rem; }
.fw1 { font-weight: 100; }
.fw3 { font-weight: 300; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.6; }
.no-underline { text-decoration: none; }
.b { font-weight: bold; }
.i { font-style: italic; }
.sans-serif { font-family: var(--font-ui); }
.near-white { color: rgba(255,255,255,0.9); }
.white { color: white; }
.white-50 { color: rgba(255,255,255,0.5); }
.gray { color: #777; }
.bg-white { background-color: var(--color-surface); }
.bg-black { background-color: #000; }
.bg-black-30 { background-color: rgba(0,0,0,0.3); }
.bg-black-60 { background-color: rgba(0,0,0,0.6); }
.bg-mid-gray { background-color: #555; }
.ba { border: 1px solid; }
.bb { border-bottom: 1px solid; }
.bt { border-top: 1px solid; }
.b--silver { border-color: silver; }
.br2 { /* sharp corners override */ }
.br3 { /* sharp corners override */ }
.br-100 { /* sharp corners override - except for avatars */ }
.dim { opacity: 1; transition: opacity 0.15s ease-in; }
.dim:hover { opacity: 0.5; }
.cover { background-size: cover; }
.bg-top { background-position: top; }
.center { margin-left: auto; margin-right: auto; }
.mw-100 { max-width: 100%; }
.measure-wide { max-width: 34em; }
.nested-copy-line-height p { line-height: 1.6; }
.nested-links a { color: var(--color-link); }
.nested-links a:hover { color: var(--color-link-hover); }
.ttu { text-transform: uppercase; }
.display-print { display: none; }

@media (min-width: 30em) {
  .flex-row-ns { flex-direction: row; }
  .items-start { align-items: flex-start; }
  .w4-m { width: 8rem; }
  .h4-m { height: 8rem; }
  .mb0-ns { margin-bottom: 0; }
  .pl3-ns { padding-left: 1rem; }
  .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (min-width: 60em) {
  .w5-ns { width: 16rem; }
  .h5-ns { height: 16rem; }
  .w-third-l { width: 33.33%; }
  .pv4-l { padding-top: 2rem; padding-bottom: 2rem; }
  .tc-l { text-align: center; }
  .mt5-l { margin-top: 4rem; }
  .pt5-l { padding-top: 4rem; }
  .f5-l { font-size: 1rem; }
}

/* Border-box utility */
.border-box { box-sizing: border-box; }

/* W6 - used by retro cards */
.w6 { max-width: 32rem; }

/* Header wrapper */
.header-wrapper {
  position: relative;
  overflow: hidden;
}

/* Glass header - simplified for redesign (used by inherited pages) */
.glass-header {
  display: none; /* Hidden in the new design — replaced by site-header */
}

.glass-nav {
  display: none; /* Hidden in the new design — replaced by site-header */
}

/* Retro card - simplified fallback for any inherited pages */
.retro-card-container {
  margin-bottom: 1rem;
}

.retro-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 1rem;
  position: relative;
}

.retro-card-inner {
  position: relative;
  z-index: 1;
}

.retro-card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
}

.retro-card-content { }

.retro-card-meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.retro-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.retro-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.retro-card-title a:hover {
  color: var(--color-link);
}

.retro-card-summary {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.retro-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.retro-card-date {
  display: none; /* Date shown in meta instead */
}

.retro-card-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.retro-card-clickable:hover {
  border-color: var(--color-text-muted);
}

@media (min-width: 30em) {
  .retro-card-image {
    width: 8rem;
    height: 8rem;
    min-width: 8rem;
    margin-bottom: 0;
  }
}

/* Flex column override */
.flex-column { flex-direction: column; }

/* ==========================================================================
   Conversation Blocks — .human, .assistant, .thinking roles
   Used in chat-log style blog posts with AsciiDoc sidebar/example blocks
   ========================================================================== */

/* --- Conversation Variables --- */
:root {
  --color-human-bg: #F5F0EB;
  --color-human-border: var(--color-accent);
  --color-assistant-bg: #EEF1F5;
  --color-assistant-border: #546E7A;
  --color-thinking-bg: #EAEFF5;
  --color-thinking-border: var(--color-assistant-border);
  --color-tool-bg: #F0F0F0;
  --color-tool-border: #999;
  --color-tool-error-bg: #FFF3F0;
  --color-tool-error-border: #D32F2F;

}

@media screen {
  :root[data-theme="dark"] {
    --color-human-bg: #2A2420;
    --color-assistant-bg: #22262A;
    --color-assistant-border: #8FA4AE;
    --color-thinking-bg: #21252A;
    --color-tool-bg: #262320;
    --color-tool-border: #8A837D;
    --color-tool-error-bg: #2E1E1C;
    --color-tool-error-border: #F07A72;
  }
}

/* --- Shared conversation block base --- */
.sidebarblock.human,
.sidebarblock.assistant {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border: none;
  background: none;
  font-size: 0.9rem;
}

/* Reset any default sidebarblock styling from the theme */
.sidebarblock.human > .content,
.sidebarblock.assistant > .content {
  background: none;
  border: none;
  padding: 0;
}

/* --- Human messages (anchored left) --- */
.sidebarblock.human {
  background: var(--color-human-bg);
  border-left: 3px solid var(--color-human-border);
  padding-right: 1.5rem;
}

.sidebarblock.human::before {
  content: "\201C";
  position: absolute;
  bottom: 0.25rem;
  right: 0.4rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.06;
  pointer-events: none;
}

.sidebarblock.human::after {
  content: "Human";
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-human-border);
  opacity: 0.45;
}

/* --- Assistant messages (anchored right) --- */
.sidebarblock.assistant {
  background: var(--color-assistant-bg);
  border-left: none;
  border-right: 3px solid var(--color-assistant-border);
  padding-left: 1.5rem;
  padding-right: 1.75rem;
  font-family: var(--font-ui);
  line-height: 1.55;
}

.sidebarblock.assistant::before {
  content: "\2726";
  position: absolute;
  bottom: 0.25rem;
  left: 0.4rem;
  right: auto;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.06;
  pointer-events: none;
}

.sidebarblock.assistant::after {
  content: "Claude";
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  left: auto;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-assistant-border);
  opacity: 0.5;
}

/* --- Thinking blocks (inside collapsible <details>) — anchored right like assistant --- */
details:has(.thinking) {
  position: relative;
  margin: 1.5rem 0;
  background: var(--color-thinking-bg);
  border-left: none;
  border-right: 2px dashed var(--color-thinking-border);
  opacity: 0.8;
}

details:has(.thinking) > summary {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-style: italic;
}

details:has(.thinking) > summary::marker {
  color: var(--color-text-muted);
}

details:has(.thinking) > .content {
  padding: 0 1.25rem 1rem 1.25rem;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

details:has(.thinking)::after {
  content: "thinking\2026";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* --- Tool action blocks (centered, subtle) --- */
.sidebarblock.tool-action {
  position: relative;
  margin: 0.75rem 0;
  background: var(--color-tool-bg);
  border-left: none;
  border-right: 3px solid var(--color-tool-border);
  border-top: none;
  border-bottom: none;
  padding: 0.75rem 1.25rem 0.5rem 1.75rem;
  text-align: left;
}

.sidebarblock.tool-action::before {
  content: "\2699";
  position: absolute;
  bottom: 0.25rem;
  left: 0.4rem;
  right: auto;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.06;
  pointer-events: none;
}

.sidebarblock.tool-action > .content {
  background: none;
  border: none;
  padding: 0;
}

.sidebarblock.tool-action > .content p {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin: 0;
  color: var(--color-text-muted);
}

.sidebarblock.tool-action::after {
  content: "Tool use";
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tool-border);
  opacity: 0.45;
}

/* --- Tool result blocks (inside collapsible <details>) --- */
details:has(.tool-result) {
  position: relative;
  margin: 0.25rem 0 1rem 0;
  background: transparent;
  border: none;
}

details:has(.tool-result) > summary {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.25rem 1.25rem;
  cursor: pointer;
  font-style: italic;
}

details:has(.tool-result) > .content {
  padding: 0.25rem 1.25rem 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Tool error blocks (inside collapsible <details>) --- */
details:has(.tool-error) {
  position: relative;
  margin: 0.25rem 0 1rem 0;
  background: var(--color-tool-error-bg);
  border-left: 2px solid var(--color-tool-error-border);
}

details:has(.tool-error) > summary {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-tool-error-border);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-style: italic;
}

details:has(.tool-error) > .content {
  padding: 0.25rem 1.25rem 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* --- Conversation block mobile adjustments --- */
@media (max-width: 640px) {
  .sidebarblock.human {
    margin: 1rem 0;
    padding: 1rem 1rem 1rem 1.25rem;
  }

  .sidebarblock.assistant {
    margin: 1rem 0;
    padding: 1rem 1.25rem 1rem 1rem;
  }

  .sidebarblock.human::after {
    font-size: 0.6rem;
    top: 0.5rem;
    left: 0.5rem;
  }

  .sidebarblock.assistant::after {
    font-size: 0.6rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  .sidebarblock.human::before {
    font-size: 3rem;
    top: 0.25rem;
    left: 0.4rem;
  }

  .sidebarblock.assistant::before {
    font-size: 2rem;
    top: 0.35rem;
    right: 0.4rem;
  }

  details:has(.thinking) > summary {
    font-size: 0.75rem;
  }

  .sidebarblock.tool-action {
    max-width: 100%;
    margin: 0.5rem 0;
  }
}

/* ==========================================================================
   Log Event Blocks — .ev-* roles for compact log-style session excerpts
   Mirrors the dashboard's flat log view: single-line rows, colored borders.
   Used in blog posts with AsciiDoc paragraphs: [.ev-text], [.ev-tool], etc.
   ========================================================================== */

/* --- Shared base for all ev-* blocks --- */
.ev-text,
.ev-user,
.ev-tool,
.ev-result,
.ev-error,
.ev-thinking,
.ev-system {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.82rem;
  line-height: 1.6;
  padding: 0.15rem 0.75rem;
  margin: 0;
  border-left: 3px solid transparent;
  background: #1a1d23;
  color: #c8c8c8;
}

/* --- Per-type overrides --- */
.ev-text {
  border-left-color: #8bc38b;
  color: #8bc38b;
}

.ev-user {
  border-left-color: #b8a0d8;
  color: #b8a0d8;
}

.ev-tool {
  border-left-color: #5cbcbc;
  color: #c8c8c8;
}

.ev-tool strong {
  color: #5cbcbc;
}

.ev-result {
  border-left-color: #c8b860;
  color: #909090;
}

.ev-error {
  border-left-color: #e05050;
  color: #e05050;
}

.ev-thinking {
  border-left-color: #7890a0;
  font-style: italic;
  color: #7890a0;
}

.ev-system {
  border-left-color: #d0a050;
  color: #d0a050;
  font-style: italic;
}

/* Link color inside ev blocks */
[class*="ev-"] a {
  color: inherit;
}

/* Override inline code styling inside ev blocks */
[class*="ev-"] code {
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border: none;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* Kill inner <p> margin so rows stack tight */
[class*="ev-"] > p {
  margin: 0 !important;
  padding: 0;
}

/* Listing/literal/example blocks with ev-* classes: reset inner pre/code */
/* !important needed to override default pre{} and Rouge inline styles */
.listingblock[class*="ev-"] pre,
.literalblock[class*="ev-"] pre,
.exampleblock[class*="ev-"] pre {
  background: inherit !important;
  color: inherit !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
}

.listingblock[class*="ev-"] > .content,
.literalblock[class*="ev-"] > .content,
.exampleblock[class*="ev-"] > .content {
  padding: 0;
  margin: 0;
}

/* Reset Rouge syntax spans inside ev-* blocks */
.listingblock[class*="ev-"] pre span,
.exampleblock[class*="ev-"] pre span {
  background: none !important;
  color: inherit !important;
}

/* ev-detail on non-<details> blocks (listingblock, exampleblock) */
.listingblock.ev-detail,
.exampleblock.ev-detail {
  background: #12141a;
  border-left: 3px solid #3a5555;
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.2rem 0.75rem;
  color: #a0a8b0;
}

/* --- Dark collapsible detail blocks (file contents, diffs) --- */
details.ev-detail {
  margin: 0;
  background: #12141a;
  border-left: 3px solid #3a5555;
}

details.ev-detail > summary {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  color: #5cbcbc;
  padding: 0.1rem 0.75rem;
  cursor: pointer;
}

details.ev-detail > .content {
  padding: 0 0.5rem 0.2rem;
}

details.ev-detail .listingblock {
  margin: 0;
}

details.ev-detail pre {
  background: #12141a !important;
  color: #a0a8b0 !important;
  font-size: 0.75rem !important;
  padding: 0.2rem 0.75rem !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
}

details.ev-detail pre code,
details.ev-detail pre span {
  background: none !important;
  border: none;
  padding: 0;
}


/* ==========================================================================
   Interesting Links — Filter & Collapse UI
   ========================================================================== */

/* Sticky toolbar covers anchored headings; offset them by its height */
body:has(.il-toolbar) :is(.article-body, .docs-content .article) :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--header-height) + 4.5rem);
}

/* --- Toolbar --- */
.il-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  background: var(--color-border-light);
  border-bottom: 2px solid var(--color-border);
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.il-toolbar.il-fire-active {
  background: var(--color-il-fire-bg);
  border-bottom-color: var(--color-accent);
}

.il-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- Toggle switch --- */
.il-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.il-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.il-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--color-border);
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.il-toggle input:checked + .il-toggle-track {
  background: var(--color-accent);
}

.il-toggle-knob {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.il-toggle input:checked + .il-toggle-track .il-toggle-knob {
  transform: translateX(16px);
}

.il-toggle-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

/* --- Count badge --- */
.il-count {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

.il-count-active {
  color: var(--color-accent);
  font-weight: 500;
}

/* --- Hidden items --- */
li.il-hidden {
  display: none !important;
}

/* --- Empty sections (all items filtered out) --- */
.il-section-empty {
  display: none !important;
}

/* --- Mobile adjustments --- */
@media (max-width: 640px) {
  .il-toolbar-inner {
    gap: 0.5rem;
  }

  .il-toggle-label {
    font-size: 0.8rem;
  }

  .il-count {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox-zoom {
  cursor: zoom-in;
}

.lightbox-zoom:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

html.lightbox-open {
  overflow: hidden; /* no background scrolling while the viewer is open */
}

/* A <dialog>, so the browser's own sizing is reset to fill the screen */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox-overlay::backdrop {
  background: transparent; /* the dialog is the backdrop, and it fades */
}

.lightbox-img {
  margin: auto; /* centres, and unlike align-items keeps the top and left reachable when panning */
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  background-color: #FAF8F5; /* same as --color-img-backing in dark mode: this viewer is always dark */
}

/* Fitted to the screen, a phone shows a diagram no bigger than the article does.
   So open it at natural size and let the browser's own scrolling pan it. The
   reader has just seen the whole image in the article, so nothing is lost by
   opening zoomed in. Capped so a huge screenshot or photo isn't a tiny fragment. */
@media (pointer: coarse), (max-width: 640px) {
  .lightbox-overlay {
    cursor: auto;
  }

  .lightbox-img {
    flex: none;
    max-width: 1600px;
    max-height: none;
  }
}

/* White on near-black, so it shows over both the dark backdrop and a white diagram */
.lightbox-close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transform-origin: top right; /* lightbox.js scales it during pinch zoom */
}

.lightbox-close:hover {
  background: #000;
}

.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 4px #000;
}

/* AsciiDoc strikethrough: [line-through]##text## */
.line-through {
  text-decoration: line-through;
}

/* ==========================================================================
   Popular links widget (most-clicked outbound links from Interesting Links)
   ========================================================================== */

.popular-links {
  display: block;
  margin: 2rem 0;
  font-family: var(--font-ui);
}

.popular-links-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
}

.popular-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popular-links-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

/* Proportional click bar behind each row (width set inline, relative to #1) */
.popular-links-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--color-accent);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.popular-links-rank,
.popular-links-link,
.popular-links-clicks {
  position: relative;
  z-index: 1;
}

.popular-links-rank {
  flex: 0 0 auto;
  min-width: 1.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.popular-links-link {
  flex: 1 1 auto;
  text-decoration: none;
}

.popular-links-link:hover {
  text-decoration: underline;
}

.popular-links-domain {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.popular-links-clicks {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.popular-links-clicks b {
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .popular-links-domain {
    display: none;
  }
}

/* Compact variant for the per-post widget in the TOC sidebar (~220px wide) */
.popular-links--sidebar {
  margin: 1.75rem 0 0;
}

.popular-links--sidebar .popular-links-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.4rem;
}

.popular-links--sidebar .popular-links-item {
  display: block;
  padding: 0.35rem 0;
  border-bottom: none;
}

.popular-links--sidebar .popular-links-rank,
.popular-links--sidebar .popular-links-domain {
  display: none;
}

.popular-links--sidebar .popular-links-link {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
}

.popular-links--sidebar .popular-links-clicks {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
}

/* ==========================================================================
   Interesting Links landing band (category page)
   ========================================================================== */

/* Two-column landing: main column (latest + archive) beside a sticky rail */
.il-page-grid {
  display: grid;
  /* Archive rows are short, so let the most-clicked rail claim the slack */
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, 460px);
  grid-template-areas:
    "latest  rail"
    "archive rail";
  gap: 1.5rem 2.5rem;
  align-items: start;
  margin: 1.5rem 0 2.5rem;
}

.il-page-grid-latest  { grid-area: latest; }
.il-page-grid-archive { grid-area: archive; min-width: 0; }

.il-page-grid-rail {
  grid-area: rail;
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .il-page-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "latest"
      "rail"
      "archive";
  }
  .il-page-grid-rail {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.il-landing-card {
  font-family: var(--font-ui);
  background: var(--color-border-light);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.4rem;
}

/* Match the "Latest issue" eyebrow label exactly (see .il-landing-label) */
.il-previous-heading {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

/* Latest-issue card: horizontal (image left, details right) on wide screens */
.il-landing-card.il-landing-latest {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  padding: 0;
  overflow: hidden;
}

.il-landing-latest-thumb {
  display: block;
  height: 100%;
}

.il-landing-latest-thumb img,
.il-landing-latest-thumb .featured-post-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.il-landing-latest-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.4rem;
}

@media (max-width: 560px) {
  .il-landing-card.il-landing-latest {
    grid-template-columns: 1fr;
  }
  .il-landing-latest-thumb img,
  .il-landing-latest-thumb .featured-post-image {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.il-landing-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.il-landing-latest-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.il-landing-latest-link:hover .il-landing-latest-title {
  text-decoration: underline;
}

.il-landing-arrow {
  color: var(--color-accent);
  font-weight: 700;
}

.il-landing-date {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.il-landing-subscribe {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.il-landing-subscribe p {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
}

.il-landing-sub-btn {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-on-accent);
  background: var(--color-accent);
  padding: 0.45rem 0.95rem;
}

.il-landing-sub-btn:hover {
  opacity: 0.9;
}

/* Top-10 widget styled to sit inside a landing card */
.popular-links--landing {
  margin: 0;
}

.popular-links--landing .popular-links-heading {
  margin-top: 0;
}

.popular-links--landing .popular-links-domain {
  display: none;
}

.popular-links--landing .popular-links-item:last-child {
  border-bottom: none;
}

.popular-links-heading-note {
  font-weight: 400;
  font-style: italic;
  font-size: 0.82em;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Old-school hit counter (footer; a random retro style per page load)
   ========================================================================== */

.hit-counter {
  margin: 1.25rem auto 0;
  min-height: 3.2rem;           /* reserve space so the async render doesn't shift the footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  line-height: 1;
}

.hit-counter .hc-cap {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* 1 — 7-segment LED */
.hc-led-screen { position: relative; display: inline-block; background: #0a0f0a; border: 2px solid #1c241c; border-radius: 3px; padding: 0.32rem 0.6rem; box-shadow: inset 0 0 12px rgba(0,0,0,.85); }
.hc-led-ghost, .hc-led-num { font-family: var(--font-code); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1; }
.hc-led-ghost { color: #10330f; }
.hc-led-num { position: absolute; left: 0.6rem; top: 0.32rem; color: #3dff63; text-shadow: 0 0 5px #3dff63, 0 0 12px rgba(61,255,99,.6); }

/* 2 — Odometer */
.hc-odo { display: inline-flex; gap: 2px; padding: 3px; background: #222; border-radius: 4px; }
.hc-odo span { font-family: var(--font-code); font-weight: 700; font-size: 1.3rem; line-height: 1; width: 1.2ch; text-align: center; color: #fafafa; padding: 0.24rem 0.12rem; border-radius: 2px; background: linear-gradient(#454545,#1d1d1d 44%,#000 50%,#1d1d1d 56%,#454545); box-shadow: inset 0 5px 6px -5px rgba(255,255,255,.35), inset 0 -5px 6px -5px rgba(255,255,255,.2); }

/* 3 — Nixie tube: lit digit (::after) glows over the dim "unlit cathode" 8 */
.hc-nixie { display: inline-flex; gap: 3px; padding: 4px 4px 5px; background: radial-gradient(120% 90% at 50% 115%, #2a1a0d, #0c0805 72%); border-radius: 6px; box-shadow: inset 0 0 14px rgba(0,0,0,.85); }
.hc-nixie span { position: relative; font-family: var(--font-code); font-weight: 600; font-size: 1.45rem; line-height: 1; width: 1.15ch; text-align: center; padding: 0.3rem 0.16rem 0.34rem; border-radius: 5px 5px 6px 6px; color: rgba(255,120,40,.13); background: radial-gradient(ellipse at 50% 42%, rgba(255,110,20,.16), rgba(255,80,0,.03) 58%, transparent 74%); box-shadow: inset 0 2px 5px -2px rgba(255,200,150,.15); }
.hc-nixie span::after { content: attr(data-d); position: absolute; left: 0; right: 0; top: 0.3rem; text-align: center; color: #ff7616; text-shadow: 0 0 4px #ff8a2a, 0 0 9px #ff6a00, 0 0 17px rgba(255,90,0,.7), 0 0 30px rgba(255,60,0,.4); }
.hc-nixie span::before { content: ""; position: absolute; left: 14%; right: 14%; top: 8%; height: 26%; border-radius: 50%; background: linear-gradient(rgba(255,235,210,.14), transparent); pointer-events: none; }

/* 4 — 90s Web-Counter GIF cells */
.hc-gif { display: inline-flex; gap: 2px; }
.hc-gif span { font-family: var(--font-code); font-weight: 700; font-size: 1.25rem; line-height: 1; color: #ffd23f; background: #000; border: 2px ridge #8a8a8a; padding: 0.14rem 0.3rem; }

/* 5 — "You are visitor #N" banner */
.hc-banner { display: inline-block; font-family: var(--font-ui); text-align: center; color: var(--color-accent); font-weight: 700; font-size: 0.92rem; border: 2px dashed var(--color-accent); border-radius: 5px; padding: 0.4rem 0.9rem; background: repeating-linear-gradient(45deg,var(--color-surface),var(--color-surface) 9px,var(--color-banner-stripe) 9px,var(--color-banner-stripe) 18px); }
.hc-banner b { font-family: var(--font-code); }
.hc-banner small { display: block; margin-top: 0.2rem; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--color-text-muted); }

/* Popular posts (sidebar) — small, restrained, one line each; styled like the
   recent-article titles (dark, not hyperlink-blue), just smaller. */
.top-posts-list { list-style: none; margin: 0; padding: 0; }
.top-posts-list a {
  display: block;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-posts-list li:last-child a { border-bottom: none; }
.top-posts-list a:hover { color: var(--color-link); }

/* ==========================================================================
   Reduced motion (prefers-reduced-motion: reduce)
   Targeted: switches off the transitions that move or fade elements in/out.
   Short colour/border/background hover transitions are intentionally kept —
   they don't move anything. Page scrolling is already instant
   (html { scroll-behavior: auto }) and no JS uses smooth scrolling.
   Related rules live next to their inline styles:
     - body FOUC fade-in: layouts/_default/baseof.html (critical <style>)
     - blinking cursor:   layouts/404.html
   lightbox.js also skips its 200ms removal delay under this preference.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .il-toggle-knob,        /* IL "fire" toggle knob slide */
  .lightbox-overlay,      /* lightbox fade in/out */
  .headline-hash {        /* heading 🔗 anchor fade on hover */
    transition: none;
  }
}