/*
Theme Name: VirtualBytes
Theme URI: https://tools.virtualbytes.io
Author: VirtualBytes
Author URI: https://www.virtualbytes.io
Description: Official VirtualBytes theme — purpose-built for infrastructure engineering content. Matches the VirtualBytes tooling suite aesthetic with DM Sans, DM Mono, and Outfit typography, blue gradient navigation, dark/light mode support, and clean technical blog layouts.
Version: 2.13.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Copyright (c) 2026 VirtualBytes. All rights reserved.
License URI: https://www.virtualbytes.io
Text Domain: virtualbytes
Tags: blog, custom-colors, custom-logo, custom-menu, dark-mode, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, two-columns, wide-blocks
*/

/* =============================================================================
   DESIGN TOKENS
============================================================================= */
:root {
  --ff: 'DM Sans', sans-serif;
  --fm: 'DM Mono', monospace;
  --fd: 'Outfit', sans-serif;

  --ac: #2563eb;
  --ac2: #1d4ed8;
  --ac3: #388bfd;
  --ac-soft: rgba(31,111,235,.2);
  --ac-text: #79c0ff;

  --bg:  #0d1117;
  --bg2: #161b22;
  --bg3: #161b22;
  --bg4: #21262d;

  --text1: #e2e8f0;
  --text2: #8b949e;
  --text3: #6e7681;
  --text4: #484f58;

  --border:  #21262d;
  --border2: #30363d;

  --green:   #3fb950;
  --green-s: rgba(63,185,80,.12);
  --green-t: #56d364;

  --amber:   #f0883e;
  --amber-s: rgba(240,136,62,.12);
  --amber-t: #ffa657;

  --red:   #f85149;
  --red-s: rgba(248,81,73,.12);
  --red-t: #ff7b72;

  --blue-hl: #58a6ff;

  --radius:    10px;
  --radius-sm:  6px;
  --radius-lg: 14px;

  --shadow:    0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.5);

  --nav-h:     48px;
  --content-w: 780px;
  --wide-w:    1100px;
}


/* =============================================================================
   THEME RESET — suppress any conflicting admin/plugin headers
============================================================================= */

/* Hide WordPress admin bar offset on front end */
html.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  html.admin-bar .site-header {
    top: 46px;
  }
}

/* Suppress any legacy theme nav that may bleed through */
#wpadminbar ~ * .old-nav,
.wp-block-navigation:not(.site-header *),
header:not(.site-header) {
  display: none !important;
}

/* Nav rules handled in SITE HEADER section */

/* Prevent any theme injecting extra padding/margin on body */
body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =============================================================================
   ADMIN BAR — keep it above our sticky header
============================================================================= */
#wpadminbar {
  position: fixed !important;
  z-index: 99999 !important;
}

html.admin-bar body {
  font-family: var(--ff);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text1);
  background: #0d1117;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 782px) {
  html.admin-bar body {
    padding-top: 46px !important;
  }
}

/* =============================================================================
   RESET & BASE
============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text1);
  background: #0d1117;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #58a6ff;
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: #79c0ff; }

/* =============================================================================
   TICKER — scrolling news bar (above nav, matches tools landing page exactly)
============================================================================= */
.site-ticker {
  height: 34px;
  overflow: hidden;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  display: flex;
  align-items: center;
}
.ticker-label {
  font-family: var(--fm);
  font-size: 10px;
  color: #58a6ff;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 16px;
  border-right: 1px solid #30363d;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: #0d1117;
  flex-shrink: 0;
}
.ticker-outer {
  overflow: hidden;
  flex: 1;
}
.ticker-track {
  display: flex;
  align-items: center;
  animation: vb-ticker 40s linear infinite;
  white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  border-right: 1px solid #21262d;
  font-family: var(--fm);
  font-size: 11px;
  color: #8b949e;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s;
}
.ticker-item:hover { color: #e2e8f0; }
.ticker-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ticker-pill.new     { background: rgba(31,111,235,.25); color: #58a6ff; border: 1px solid rgba(31,111,235,.4); }
.ticker-pill.updated { background: rgba(63,185,80,.15);  color: #3fb950; border: 1px solid rgba(63,185,80,.3); }
.ticker-pill.recent  { background: rgba(139,148,158,.1); color: #6e7681; border: 1px solid #30363d; }
@keyframes vb-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================================================
   SITE HEADER — matches tools landing page nav exactly
============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, #0d2061, #1d4ed8);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.site-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  text-decoration: none !important;
  flex-shrink: 0;
}
.site-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-logo-icon img { width: 18px; height: 18px; object-fit: contain; }
.site-logo-icon .custom-logo-link { display: flex; align-items: center; justify-content: center; }
.site-logo-icon .custom-logo-link img,
.site-logo-icon .custom-logo { width: 18px !important; height: 18px !important; object-fit: contain; }
.site-name {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.site-name span { color: rgba(255,255,255,.35); }
.site-tagline {
  font-family: var(--fm);
  font-size: 9px;
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 1px;
  display: block;
}
.main-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}
.main-navigation > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.main-navigation ul li { position: relative; list-style: none; }
.main-navigation ul li a {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  display: block;
  white-space: nowrap;
  letter-spacing: .01em;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: #fff;
  background: rgba(255,255,255,.1);
}
/* Dropdowns */
.main-navigation ul .sub-menu,
.main-navigation ul ul {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 200px !important;
  background: #0d2061 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  padding: 6px !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity .18s, transform .18s, visibility .18s !important;
  display: block !important;
}
.main-navigation ul li:hover > .sub-menu,
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > .sub-menu,
.main-navigation ul li:focus-within > ul {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.main-navigation .sub-menu a,
.main-navigation ul ul a {
  display: block !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.75) !important;
  background: transparent !important;
  white-space: nowrap !important;
  transition: background .12s, color .12s !important;
}
.main-navigation .sub-menu a:hover,
.main-navigation ul ul a:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.main-navigation .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid rgba(255,255,255,.4);
  margin-left: 5px;
  vertical-align: middle;
  transition: transform .15s;
}
.main-navigation .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  border-top-color: rgba(255,255,255,.85);
}
.main-navigation ul ul .sub-menu,
.main-navigation ul ul ul {
  top: -6px !important;
  left: calc(100% + 4px) !important;
}
.nav-tools-btn {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: 6px;
}
.nav-tools-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.35);
}
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s;
}
.menu-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
/* Admin bar offsets */
html.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  html.admin-bar .site-header { top: 46px; }
}
/* Suppress WP block nav / legacy headers */
.wp-block-navigation:not(.site-header *),
header:not(.site-header) { display: none !important; }
body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; }
#wpadminbar { position: fixed !important; z-index: 99999 !important; }
html.admin-bar body { padding-top: 32px !important; }
@media screen and (max-width: 782px) {
  html.admin-bar body { padding-top: 46px !important; }
}

/* =============================================================================
   LAYOUT
============================================================================= */
.site-content {
  min-height: calc(100vh - var(--nav-h));
}

.container {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 24px;
}

.content-area {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================================================
   HERO (front page / archive)
============================================================================= */
.page-hero {
  background: linear-gradient(135deg,#0d2061,#1d4ed8 60%,#2563eb);
  padding: 48px 32px 40px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #21262d;
}

/* Subtle dot-grid texture */
.page-hero::before { display: none; }

/* Atmospheric glow orb */
.page-hero::after  { display: none; }

/* Second orb — add via JS or a wrapper div */
.hero-glow-orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(59, 130, 246, .1);
  bottom: -150px;
  left: -80px;
  filter: blur(70px);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 10px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .7);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(4px);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--fd);
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 0;
}

.hero-title em {
  font-style: normal;
  color: rgba(255, 255, 255, .7);
}

.hero-title-dim {
  color: rgba(255, 255, 255, .42);
}

/* Establishment line above title */
.hero-est {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, .6);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.65;
  font-weight: 300;
}

.hero-chips {
  display: none; /* Layout D — chips removed */
}

/* Stats strip below chips */
.hero-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 48px;
  padding-top: 36px;
  flex-wrap: wrap;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 32px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.hero-stat-item:last-child { border-right: none; }

/* Single stat — centre and remove border */
.hero-stats-strip .hero-stat-item:only-child { border-right: none; padding: 0; }

.hero-stat-number {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}

.hero-stat-number span { color: #60a5fa; }

.hero-stat-label {
  font-family: var(--fm);
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-chip {
  font-family: var(--fm);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .75);
  letter-spacing: .04em;
}

/* =============================================================================
   POSTS GRID (archive / home)
============================================================================= */
.posts-section {
  padding: 48px 0 64px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 24px;
}

.post-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  border-color: #388bfd;
}

.post-card-thumb {
  width: 100%;
  height: 200px;        /* Fixed height — every card identical */
  overflow: hidden;
  background: var(--bg3);
  flex-shrink: 0;
}

.post-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;    /* Crop to fill — no distortion, no letterboxing */
  object-position: center top; /* Favour top of image (titles/logos usually centred-top) */
  display: block;
  transition: transform .35s ease;
}

.post-card:hover .post-card-thumb img {
  transform: scale(1.04);
}

.post-card-thumb-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #1e3a5f, #1e40af);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-card-thumb-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: .3;
  color: #fff;
}

.post-card-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.post-cat {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(31, 111, 235, .2);
  color: #79c0ff;
  border: 1px solid var(--ac);
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .15s;
}

.post-cat:hover {
  background: var(--ac);
  color: #fff;
}

.post-date {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
}

.post-card-title {
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.post-card-title a:hover { color: var(--ac); }

.post-card-excerpt {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  gap: 8px;
}

.post-read-time {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
}

.read-more-btn {
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  color: var(--ac);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s, color .15s;
}

.read-more-btn:hover {
  color: var(--ac2);
  gap: 8px;
}

/* =============================================================================
   SINGLE POST
============================================================================= */
.single-post-hero {
  background: linear-gradient(135deg,#0d2061,#1d4ed8 60%,#2563eb);
  padding: 68px 24px 60px;
  position: relative;
  overflow: hidden;
}

.single-post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}

.single-post-hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(99, 102, 241, .12);
  top: -160px;
  right: -100px;
  filter: blur(80px);
  pointer-events: none;
}

.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.post-hero-cat {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.post-hero-date,
.post-hero-read-time {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
}

.post-hero-title {
  font-family: var(--fd);
  font-size: clamp(24px, 3.8vw, 42px);
  font-weight: 800;
  color: #fff;
  text-align: center;
  letter-spacing: -.03em;
  line-height: 1.1;
  max-width: 760px;
  margin: 0 auto 20px;
}

.post-hero-excerpt {
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Featured image below hero */
.post-featured-image {
  max-width: 100%;
  margin: 0 0 32px;  /* clean spacing — no hero overlap */
  position: relative;
}

.post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Post content */
.post-content-wrap {
  padding: 48px 0 64px;
}

.post-content {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--fd);
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: .6em;
}

.entry-content h2 { font-size: clamp(20px, 2.5vw, 26px); }
.entry-content h3 { font-size: clamp(17px, 2vw, 21px); }
.entry-content h4 { font-size: 17px; }

.entry-content p {
  color: var(--text2);
  margin-bottom: 1.4em;
  font-size: 16px;
  line-height: 1.75;
}

.entry-content a {
  color: var(--ac);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, .3);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}

.entry-content a:hover {
  text-decoration-color: var(--ac);
}

.entry-content strong {
  color: var(--text1);
  font-weight: 600;
}

/* =============================================================================
   GUTENBERG COLOR DEFEAT
   Single source of truth for entry/dc-entry text colors. The `.vb-theme` body
   class boosts specificity above Gutenberg's `(0,1,1)` block defaults so we
   don't need !important. `:where()` keeps the heading/p selectors at (0,2,1)
   without exploding specificity for descendant overrides. If a user explicitly
   sets a Gutenberg color class on a block, `[class*="-color"]` wins via
   `color: inherit` and stays out of our way.
============================================================================= */
.vb-theme .entry-content :where(h1, h2, h3, h4, h5, h6),
.vb-theme .dc-entry      :where(h1, h2, h3, h4, h5, h6) {
  color: var(--text1);
  background-color: transparent;
}

.vb-theme .entry-content :where(h3, h4),
.vb-theme .dc-entry      :where(h3, h4) {
  color: #c9d1d9;
}

.vb-theme .entry-content :where(p, li),
.vb-theme .dc-entry      :where(p, li) {
  color: var(--text2);
}

.vb-theme .entry-content :where(strong, b),
.vb-theme .dc-entry      :where(strong, b) {
  color: var(--text1);
}

/* If author opts into a Gutenberg color, honour it — but kill any
   surprise background-color that would clash with our dark theme. */
.vb-theme .entry-content [class*="has-"][class*="-color"],
.vb-theme .dc-entry      [class*="has-"][class*="-color"] {
  background-color: transparent;
}

.entry-content ul,
.entry-content ol {
  padding-left: 24px;
  margin-bottom: 1.4em;
  color: var(--text2);
}

.entry-content li {
  margin-bottom: .4em;
  line-height: 1.65;
}

.entry-content blockquote {
  border-left: 3px solid var(--ac);
  padding: 14px 20px;
  margin: 24px 0;
  background: var(--ac-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ac-text);
  font-style: italic;
}

.entry-content blockquote p { color: inherit; margin-bottom: 0; }

/* Code */
.entry-content code {
  font-family: var(--fm);
  font-size: 13px;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text1);
}

.entry-content pre {
  background: #0f172a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 1.4em;
}

.entry-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.75;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 1.4em;
  font-family: var(--fm);
}

.entry-content th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 2px solid var(--border);
  background: var(--bg3);
  font-family: var(--fd);
}

.entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}

.entry-content tr:hover td { background: var(--bg3); }

/* Images in content */
.entry-content img {
  border-radius: var(--radius);
  margin: 24px 0;
  max-width: 100%;
}

.entry-content figure { margin: 24px 0; }

.entry-content figcaption {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  font-family: var(--fm);
  margin-top: 8px;
}

/* Info / tip boxes (custom classes) */
.entry-content .tip-box,
.wp-block-vb-tip {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
}

.entry-content .tip-box { background: var(--ac-soft); border: 1px solid var(--ac); color: var(--ac-text); }

/* =============================================================================
   POST META / AUTHOR CARD
============================================================================= */
.post-author-card {
  max-width: var(--content-w);
  margin: 0 auto 48px;
  padding: 20px 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg3);
}

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

.author-info { flex: 1; }

.author-name {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 2px;
}

.author-bio {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

/* =============================================================================
   TAGS
============================================================================= */
.post-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: var(--content-w);
  margin: 0 auto 40px;
  padding: 0 24px;
}

.post-tags-label {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tag-pill {
  font-family: var(--fm);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  text-decoration: none;
  transition: all .15s;
}

.tag-pill:hover {
  border-color: var(--ac);
  color: var(--ac);
  background: var(--ac-soft);
}

/* =============================================================================
   RELATED POSTS
============================================================================= */
.related-posts {
  background: var(--bg3);
  border-top: 1px solid var(--border);
  padding: 48px 0 64px;
}

.related-posts .container {
  max-width: var(--wide-w);   /* match homepage/archive grid width */
  margin: 0 auto;
  padding: 0 24px;
}

.section-heading {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Fixed 3-column grid at desktop, 2 at tablet, 1 at mobile.
   We use fixed templates (not auto-fill) so 3 cards never collapse to a 2+1
   layout when there's only enough room for 2 fixed-width tracks. */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   PAGINATION
============================================================================= */
.posts-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 40px 0 64px;
  flex-wrap: wrap;
}

.page-numbers {
  font-family: var(--fm);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  text-decoration: none;
  transition: all .15s;
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
}



/* =============================================================================
   HERO H — Search-first layout
============================================================================= */
.hero-search {
  padding: 56px 24px 52px !important;
  text-align: center !important;
}

.hero-search-inner {
  max-width: 600px;
  margin: 0 auto;
}

.hero-search-meta {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Search box */
.hero-search-form { margin-bottom: 18px; }

.hero-search-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border-radius: 12px;
  padding: 4px 4px 4px 18px;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

.hero-search-icon {
  color: #94a3b8;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.hero-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--ff);
  font-size: 15px;
  color: #0f172a;
  padding: 10px 0;
  outline: none;
  min-width: 0;
}

.hero-search-input::placeholder { color: #94a3b8; }

.hero-search-btn {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  background: #1e40af;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-search-btn:hover { background: #1d4ed8; }

/* Topic pills */
.hero-search-topics {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-topic-pill {
  font-family: var(--fm);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: all .15s;
  letter-spacing: .03em;
}

.hero-topic-pill:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}


/* =============================================================================
   HERO M — Newspaper masthead (dark, matches tools landing page)
============================================================================= */
.hero-masthead {
  background: #161b22 !important;
  padding: 0 !important;
  text-align: center !important;
  border-bottom: 1px solid #21262d !important;
}

.hero-masthead .hero-glow-orb { display: none; }
.hero-masthead::before { display: none; }
.hero-masthead::after  { display: none; }

.masthead-top {
  padding: 28px 32px 20px;
  border-bottom: 1px solid #21262d;
}

.masthead-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  color: #3b82f6;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.masthead-wordmark {
  font-family: var(--fd);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin-bottom: 10px;
}

.masthead-wordmark span {
  color: rgba(241, 245, 249, .28);
}

.masthead-sub {
  font-size: 15px;
  color: #8b949e;
  font-weight: 300;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

.masthead-cats {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  border-top: 1px solid #21262d;
}

a.masthead-cat-pill,
.masthead-cats a,
.masthead-cat-pill {
  font-family: var(--fm) !important;
  font-size: 11px !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #30363d !important;
  background: #161b22 !important;
  color: #8b949e !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s, background .15s !important;
  white-space: nowrap !important;
  letter-spacing: .02em !important;
  user-select: none !important;
}

.masthead-cat-pill:hover {
  border-color: #388bfd;
  color: #58a6ff;
  background: rgba(31, 111, 235, .1);
}

/* =============================================================================
/* =============================================================================
   CATEGORY FILTER STRIP
============================================================================= */
.category-strip {
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.category-strip::-webkit-scrollbar { display: none; }

.cat-filter {
  font-family: var(--fm);
  font-size: 11px;
  color: #6e7681;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  letter-spacing: .03em;
  text-decoration: none;
}

.cat-filter:hover { color: #8b949e; }

.cat-filter.current-cat,
.cat-filter:focus {
  color: #58a6ff;
  border-bottom-color: #1f6feb;
}

/* =============================================================================
   SIDEBAR
============================================================================= */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.widget {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.widget-title {
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}

.widget-body { padding: 14px 16px; }

.widget ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.widget ul li a {
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}

.widget ul li:last-child a { border-bottom: none; }
.widget ul li a:hover { color: var(--ac); }

/* Tools widget */
.widget-tools-cta {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  border: none;
  text-align: center;
  padding: 20px 16px;
}

.widget-tools-cta .widget-title {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .8);
  padding-bottom: 8px;
}

.widget-tools-cta p {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
  line-height: 1.5;
}

.widget-tools-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  text-decoration: none;
  transition: all .15s;
}

.widget-tools-btn:hover {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}


/* =============================================================================
   SITE LAYOUT — 2 column with sidebar
============================================================================= */
.site-layout {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .site-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    order: -1; /* Move sidebar above posts on mobile */
  }
}

/* Override posts-grid inside the main-content to be 2-col max */
.main-content .posts-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding: 0;
  max-width: 100%;
}

.main-content .posts-pagination {
  padding: 24px 0 0;
}

/* =============================================================================
   SIDEBAR WIDGETS — enhanced
============================================================================= */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.widget {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.widget-title {
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  margin: 0;
}

.widget-body {
  padding: 14px 16px;
}

.widget ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.widget ul li a {
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
  line-height: 1.4;
}

.widget ul li:last-child a {
  border-bottom: none;
}

.widget ul li a:hover { color: var(--ac); }

/* Certification widget */
.widget-cert .widget-title {
  background: linear-gradient(135deg, #0d2061, #1e40af);
  color: rgba(255,255,255,.85);
  border-bottom-color: rgba(255,255,255,.1);
}

.widget-cert-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0; /* Let dynamic_sidebar handle padding via widget wrappers */
}

/* Images inside cert widget — clean sizing */
.widget-cert-body img,
.widget-certifications img,
.widget-cert .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
  object-fit: contain;
}

/* Remove default widget padding inside cert body */
.widget-cert-body .widget-body {
  padding: 0;
}

.widget-cert-hint {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
  font-style: italic;
}

/* Cert badge images — auto-style any images dropped into the cert widget */
.widget-cert img,
.widget-certifications img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

/* Tools CTA widget */
.widget-tools-cta {
  background: linear-gradient(135deg, #0d2061, #1e40af, #2563eb);
  border: none;
}

.widget-tools-cta .widget-title {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
}

.widget-tools-cta p {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  padding: 12px 16px 0;
}

.widget-tools-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 16px;
  margin: 12px 16px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  text-decoration: none;
  transition: all .15s;
  letter-spacing: .02em;
}

.widget-tools-btn:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Search form in sidebar */
.widget .search-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.widget .search-field {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
}

.widget .search-submit {
  padding: 8px 14px;
  font-size: 12px;
}

/* =============================================================================
   FOOTER
============================================================================= */
.site-footer {
  background: #161b22;
  border-top: 1px solid #21262d;
}

.footer-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.footer-copy {
  font-family: var(--fm);
  font-size: 11px;
  color: #484f58;
}

.footer-copy a {
  color: #58a6ff;
  text-decoration: none;
  transition: color .15s;
}

.footer-copy a:hover { color: #79c0ff; }

.footer-copy-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-copy-link {
  font-family: var(--fm);
  font-size: 11px;
  color: #484f58;
  text-decoration: none;
  transition: color .15s;
}

.footer-copy-link:hover { color: #58a6ff; }

.footer-copy-sep {
  font-size: 11px;
  color: var(--border2);
}

@media (max-width: 600px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 0;
  }
}

/* =============================================================================
   FORMS (search, comments)
============================================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--ff);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text1);
  outline: none;
  transition: all .15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--ac);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
/* Search input base — overridden by .search-form context */
input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--ff);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg3);
  color: var(--text1);
  outline: none;
  transition: all .15s;
}
input[type="search"]:focus {
  border-color: var(--ac);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px 4px 4px 12px;
  transition: border-color .2s;
}
.search-form:focus-within {
  border-color: #388bfd;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.search-form label {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.search-form .search-field {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 7px 0 !important;
  font-family: var(--fm) !important;
  font-size: 12px !important;
  color: #e2e8f0 !important;
  outline: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
.search-form .search-field::placeholder { color: #484f58 !important; }
.search-submit {
  padding: 6px 14px !important;
  font-family: var(--fm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  border-radius: 6px !important;
  border: none !important;
  background: #2563eb !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: auto !important;
}
.search-submit:hover { background: #388bfd !important; }

/* =============================================================================
   COMMENTS
============================================================================= */
.comments-area {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px 64px;
}

.comments-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 24px;
}

.comment-list { list-style: none; }

.comment {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-author-name {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
}

.comment-date {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
}

.comment-content { font-size: 14px; color: var(--text2); line-height: 1.65; }

.comment-reply-link {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--ac);
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
}

.comment-form { margin-top: 32px; }

.comment-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 5px;
  font-family: var(--fd);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.comment-form p { margin-bottom: 16px; }

/* =============================================================================
   PAGE — TOOLS EMBED
============================================================================= */
.tools-embed-wrap {
  padding: 0;
}

.tools-iframe {
  width: 100%;
  min-height: 90vh;
  border: none;
  display: block;
}



/* =============================================================================
   PAGE LAYOUT — structured content with sticky TOC sidebar
============================================================================= */

/* Two-col grid: content + sticky TOC */
.page-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

/* Two-column page layout when TOC is present and there's room */
@media (min-width: 1100px) {
  .page-layout.has-toc {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}
@media (max-width: 1099px) {
  .page-toc { display: none !important; }
}

/* Hero */
.page-post-hero {
  background: linear-gradient(135deg,#0d2061,#1d4ed8 60%,#2563eb);
  padding: 52px 24px 44px;
  border-bottom: 1px solid #21262d;
  position: relative;
  overflow: hidden;
}
.page-post-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.page-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-hero-cat-row {
  font-family: var(--fm);
  font-size: 10px;
  color: rgba(255,255,255,.5);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-hero-cat-row a { color: #79c0ff; text-decoration: none; }
.page-hero-cat-row .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); display: inline-block; }
.page-hero-title {
  font-family: var(--fd);
  font-size: clamp(26px,3.5vw,40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.page-hero-excerpt {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  font-weight: 300;
  max-width: 540px;
  margin: 0 auto 20px;
}
.page-hero-meta {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-block; }

/* Featured image */
.page-featured-img {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-bottom: 1px solid #21262d;
}
.page-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; margin: 0; }

/* Sticky TOC */
.page-toc {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.page-toc-hdr {
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 7px;
}
.page-toc-hdr svg { color: var(--ac); width: 11px; height: 11px; }
.page-toc-list { list-style: none; padding: 6px 0; margin: 0; max-height: 65vh; overflow-y: auto; }
.page-toc-list::-webkit-scrollbar { width: 3px; }
.page-toc-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.page-toc-link {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  text-decoration: none;
  padding: 5px 14px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.page-toc-link:hover { color: var(--text1); border-left-color: var(--ac); background: var(--bg4); }
.page-toc-link.active { color: #58a6ff; border-left-color: var(--ac); background: rgba(31,111,235,.08); }
.page-toc-link.toc-h3 { padding-left: 26px; font-size: 10px; }
.page-toc-link.toc-h4 { padding-left: 38px; font-size: 10px; opacity: .7; }

/* h2 accent — blue left bar */
.page-main .entry-content {
  font-size: 15px;
  line-height: 1.75;
}
.page-layout .entry-content h2,
.post-content-wrap .entry-content h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 2.5em !important;
}
.page-layout .entry-content h2::before,
.post-content-wrap .entry-content h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg,var(--ac),#7c3aed);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg,var(--ac),#7c3aed);
  z-index: 199;
  transition: width .08s linear;
}

@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px 48px;
  }
  .page-toc { position: static; order: -1; }
  .page-toc-list { max-height: 180px; }
}


/* Fix WordPress floating images in page content */
.page-main .entry-content .alignright,
.page-main .entry-content .alignleft {
  max-width: 280px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
}
.page-main .entry-content .alignright {
  float: right;
  margin: 0 0 20px 24px;
}
.page-main .entry-content .alignleft {
  float: left;
  margin: 0 24px 20px 0;
}
.page-main .entry-content::after {
  content: '';
  display: table;
  clear: both;
}
/* Style the about-page subtitle/tagline block */
.page-main .entry-content > p:first-of-type {
  font-size: 15px;
  color: var(--text1);
  padding: 14px 18px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--ac);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 28px;
}

/* =============================================================================
   ABOUT ME PAGE — Layout A (split hero, skill cards, timeline sidebar)
============================================================================= */

/* ── Hero ── */
.about-hero {
  background: linear-gradient(135deg, #0d2061, #1d4ed8 60%, #2563eb);
  padding: 52px 24px 44px;
  border-bottom: 1px solid #21262d;
  position: relative;
  overflow: hidden;
}
.about-hero::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  pointer-events: none;
}
.about-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Photo */
.about-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.about-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.about-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.about-badge {
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: .05em;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}
.about-badge-green { background: rgba(63,185,80,.2); color: #3fb950; border: 1px solid rgba(63,185,80,.35); }
.about-badge-blue  { background: rgba(59,130,246,.2); color: #79c0ff; border: 1px solid rgba(59,130,246,.35); }
.about-badge-muted { background: rgba(139,148,158,.1); color: #8b949e; border: 1px solid #30363d; }

/* Identity */
.about-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  color: rgba(255,255,255,.45);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.about-name {
  font-family: var(--fd);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.about-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin-bottom: 20px;
}
.about-tagline span { color: rgba(255,255,255,.4); }

/* Stat strip */
.about-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.about-stat { text-align: center; }
.about-stat-num {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 800;
  color: #58a6ff;
  letter-spacing: -.04em;
  display: block;
  line-height: 1;
}
.about-stat-lbl {
  font-family: var(--fm);
  font-size: 9px;
  color: rgba(255,255,255,.35);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 3px;
  display: block;
}
.about-stat-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.15);
}

/* Skill tags */
.about-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.about-skill-tag {
  font-family: var(--fm);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.about-skill-tag.blue   { background: rgba(59,130,246,.18); color: #79c0ff; border: 1px solid rgba(59,130,246,.35); }
.about-skill-tag.green  { background: rgba(63,185,80,.12); color: #3fb950; border: 1px solid rgba(63,185,80,.28); }
.about-skill-tag.amber  { background: rgba(240,136,62,.12); color: #f0883e; border: 1px solid rgba(240,136,62,.28); }
.about-skill-tag.purple { background: rgba(188,140,255,.12); color: #bc8cff; border: 1px solid rgba(188,140,255,.28); }
.about-skill-tag.muted  { background: rgba(139,148,158,.08); color: #6e7681; border: 1px solid #30363d; }

/* ── Domain cards ── */
.about-domains {
  background: #161b22;
  border-bottom: 1px solid #21262d;
  padding: 0 24px;
}
.about-domains-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.about-domain-card {
  padding: 20px 20px 20px 0;
  border-right: 1px solid #21262d;
  padding-left: 0;
}
.about-domain-card:first-child { padding-left: 0; }
.about-domain-card:not(:first-child) { padding-left: 20px; }
.about-domain-card:last-child { border-right: none; }
.about-domain-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.about-domain-icon.blue   { background: rgba(59,130,246,.12); }
.about-domain-icon.green  { background: rgba(63,185,80,.1); }
.about-domain-icon.purple { background: rgba(167,139,250,.1); }
.about-domain-title {
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.about-domain-items {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.65;
}

/* ── Body layout ── */
.about-body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
  align-items: start;
}

/* ── Main content sections ── */
.about-content-section {
  margin-bottom: 36px;
}
.about-content-section:last-child { margin-bottom: 0; }
.about-section-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.about-section-hdr svg { color: var(--ac); }

/* Entry content inside about page — no giant h2 accent (already sectioned) */
.about-entry h2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  margin-top: 1.8em !important;
}
.about-entry p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.75;
}
.about-entry ul, .about-entry ol {
  font-size: 14px;
  color: var(--text2);
}

/* Community cards */
.about-community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.about-community-card {
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.about-community-card.featured {
  border-color: rgba(63,185,80,.3);
  border-left: 3px solid #3fb950;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.about-community-pill {
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(59,130,246,.15);
  color: #79c0ff;
  border: 1px solid rgba(59,130,246,.3);
  display: inline-block;
  letter-spacing: .04em;
  margin-bottom: 7px;
}
.about-community-card.featured .about-community-pill {
  background: rgba(63,185,80,.15);
  color: #3fb950;
  border-color: rgba(63,185,80,.3);
}
.about-community-name {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 5px;
}
.about-community-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

/* ── Sidebar ── */
.about-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}

.about-sidebar-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-sidebar-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.about-sidebar-hdr svg { color: var(--ac); }

/* Timeline */
.about-timeline {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-tl-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  position: relative;
}
.about-tl-item:not(.last)::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 6px;
  width: 1px;
  bottom: 0;
  background: var(--border2);
}
.about-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.about-tl-dot.blue  { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.about-tl-dot.muted { background: var(--border2); }
.about-tl-content { padding-bottom: 14px; }
.about-tl-item.last .about-tl-content { padding-bottom: 4px; }
.about-tl-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.35;
  margin-bottom: 2px;
}
.about-tl-sub {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
}
.about-tl-year {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--ac-text);
  margin-top: 2px;
}

/* Cert list */
.about-cert-list {
  display: flex;
  flex-direction: column;
}
.about-cert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s;
}
.about-cert-item:last-child { border-bottom: none; }
.about-cert-item:hover { background: var(--bg4); }
.about-cert-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-cert-info { flex: 1; min-width: 0; }
.about-cert-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.3;
}
.about-cert-issuer {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

/* Tools CTA */
.about-tools-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(31,111,235,.15), rgba(124,58,237,.1));
  border: 1px solid rgba(59,130,246,.3);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.about-tools-cta:hover {
  border-color: rgba(59,130,246,.55);
  background: linear-gradient(135deg, rgba(31,111,235,.22), rgba(124,58,237,.15));
}
.about-tools-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-tools-title {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 2px;
}
.about-tools-sub {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-photo-wrap { align-items: center; }
  .about-photo { width: 120px; height: 120px; }
  .about-badges { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .about-badge { width: auto; }
  .about-stats { justify-content: center; }
  .about-skills { justify-content: center; }
  .about-domains-inner { grid-template-columns: 1fr; }
  .about-domain-card { border-right: none; border-bottom: 1px solid #21262d; padding: 16px 0 !important; }
  .about-domain-card:last-child { border-bottom: none; }
  .about-body { grid-template-columns: 1fr; }
  .about-sidebar { position: static; }
  .about-community-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .about-hero { padding: 32px 16px 28px; }
  .about-body { padding: 24px 16px 48px; }
  .about-domains { padding: 0 16px; }
}


/* =============================================================================
   HOME DATA CENTER PAGE — Layout A
   (hero + stat strip + spec cards + content + photo gallery)
============================================================================= */

/* ── Hero ── */
.dc-hero {
  background: linear-gradient(135deg, #0d2061, #1d4ed8 60%, #2563eb);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #21262d;
}
.dc-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dc-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .18;
  display: block;
  margin: 0;
  border-radius: 0;
}
.dc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 24px 44px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 40px;
  align-items: center;
}
.dc-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  color: rgba(255,255,255,.45);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dc-hero-title {
  font-family: var(--fd);
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1.08;
  margin-bottom: 14px;
}
.dc-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 20px;
  font-weight: 300;
}
.dc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dc-tag {
  font-family: var(--fm);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.dc-tag.blue   { background: rgba(59,130,246,.2);  color: #79c0ff; border: 1px solid rgba(59,130,246,.4); }
.dc-tag.green  { background: rgba(63,185,80,.15);  color: #3fb950; border: 1px solid rgba(63,185,80,.3); }
.dc-tag.purple { background: rgba(188,140,255,.15);color: #bc8cff; border: 1px solid rgba(188,140,255,.3); }
.dc-tag.amber  { background: rgba(240,136,62,.15); color: #f0883e; border: 1px solid rgba(240,136,62,.3); }
.dc-tag.muted  { background: rgba(139,148,158,.1); color: #8b949e; border: 1px solid #30363d; }

/* Rack SVG */
.dc-hero-rack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dc-hero-rack svg { opacity: .85; }
.dc-rack-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  width: 100%;
}
.dc-rack-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 9px;
  color: rgba(255,255,255,.45);
}
.dc-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dc-led.blue   { background: #58a6ff; }
.dc-led.green  { background: #3fb950; }
.dc-led.purple { background: #bc8cff; }
.dc-led.amber  { background: #f0883e; }

/* ── Stat strip ── */
.dc-stats-strip {
  background: #161b22;
  border-bottom: 1px solid #21262d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 24px;
}
.dc-stat {
  text-align: center;
  padding: 16px 28px;
}
.dc-stat-num {
  font-family: var(--fd);
  font-size: 26px;
  font-weight: 800;
  color: #58a6ff;
  letter-spacing: -.04em;
  display: block;
  line-height: 1;
}
.dc-stat-num.green  { color: #3fb950; }
.dc-stat-num.blue   { color: #58a6ff; }
.dc-stat-num.purple { color: #bc8cff; }
.dc-stat-num.amber  { color: #f0883e; }
.dc-stat-lbl {
  font-family: var(--fm);
  font-size: 9px;
  color: #484f58;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
  display: block;
}
.dc-stat-sep {
  width: 1px;
  height: 36px;
  background: #21262d;
  flex-shrink: 0;
}

/* ── Spec cards ── */
.dc-spec-section {
  background: #0d1117;
  padding: 36px 24px 40px;
  border-bottom: 1px solid #21262d;
}
.dc-spec-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dc-spec-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.dc-spec-card:hover {
  border-color: var(--card-color, #3b82f6);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.dc-spec-accent {
  height: 3px;
  background: var(--card-color, #3b82f6);
  opacity: .8;
}
.dc-spec-body {
  padding: 16px 18px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dc-spec-domain {
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 8px;
}
.dc-spec-domain.blue   { color: #58a6ff; }
.dc-spec-domain.green  { color: #3fb950; }
.dc-spec-domain.purple { color: #bc8cff; }
.dc-spec-domain.amber  { color: #f0883e; }
.dc-spec-domain.red    { color: #f85149; }
.dc-spec-model {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
  line-height: 1.3;
}
.dc-spec-role {
  font-family: var(--fm);
  font-size: 10px;
  color: #6e7681;
  margin-bottom: 12px;
}
.dc-spec-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #21262d;
  margin-bottom: 12px;
}
.dc-spec-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #21262d;
}
.dc-spec-row:last-child { border-bottom: none; }
.dc-sk {
  font-family: var(--fm);
  font-size: 9px;
  color: #484f58;
  flex-shrink: 0;
  width: 58px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dc-sv {
  font-family: var(--fm);
  font-size: 11px;
  color: #8b949e;
  line-height: 1.4;
}
.dc-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
}
.dc-pill {
  font-family: var(--fm);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #6e7681;
  letter-spacing: .03em;
}

/* ── Full write-up section ── */
.dc-content-section {
  background: #0d1117;
  padding: 40px 24px 56px;
  border-bottom: 1px solid #21262d;
}
.dc-content-inner {
  max-width: 860px;
  margin: 0 auto;
}
.dc-content-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.dc-content-hdr svg { color: var(--ac); }
.dc-entry p         { font-size: 15px; color: #8b949e; line-height: 1.75; margin-bottom: 1.3em; }
.dc-entry h2        { color: #e2e8f0 !important; font-size: clamp(18px,2.2vw,22px) !important; }
.dc-entry h3        { color: #e2e8f0 !important; font-size: 17px !important; }
.dc-entry ul,
.dc-entry ol        { color: #8b949e; padding-left: 22px; margin-bottom: 1.2em; }
.dc-entry li        { margin-bottom: .4em; line-height: 1.65; font-size: 14px; }
.dc-entry strong    { color: #e2e8f0; }
.dc-entry .alignright { float: right; max-width: 300px; margin: 0 0 20px 24px; border-radius: 8px; }
.dc-entry .alignleft  { float: left;  max-width: 300px; margin: 0 24px 20px 0; border-radius: 8px; }
.dc-entry::after    { content: ''; display: table; clear: both; }

/* ── Photo gallery ── */
.dc-gallery {
  background: #0d1117;
  padding: 0 0 60px;
}
.dc-gallery-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 24px 24px 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.dc-gallery-hdr svg { color: var(--ac); }
.dc-gallery-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dc-gallery-item {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  border: 1px solid #21262d;
  transition: border-color .2s, transform .2s;
}
.dc-gallery-item:hover {
  border-color: #388bfd;
  transform: scale(1.02);
}
.dc-gallery-item-lg {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}
.dc-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
  transition: opacity .2s;
}
.dc-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.dc-gallery-item:hover .dc-gallery-overlay { opacity: 1; }
.dc-gallery-item:hover img { opacity: .7; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dc-hero-inner     { grid-template-columns: 1fr; gap: 24px; padding: 36px 20px 28px; }
  .dc-hero-rack      { display: none; }
  .dc-spec-grid      { grid-template-columns: repeat(2, 1fr); }
  .dc-gallery-grid   { grid-template-columns: repeat(2, 1fr); }
  .dc-gallery-item-lg { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
  .dc-stat           { padding: 12px 16px; }
}
@media (max-width: 600px) {
  .dc-spec-grid      { grid-template-columns: 1fr; }
  .dc-stats-strip    { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .dc-stat-sep       { height: 28px; }
  .dc-gallery-grid   { grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px; }
  .dc-spec-section   { padding: 24px 16px 28px; }
  .dc-content-section { padding: 28px 16px 40px; }
}

/* =============================================================================
   RESPONSIVE — mobile, tablet, desktop breakpoints
============================================================================= */

/* ── Tablet: 768px – 1024px ── */
@media (max-width: 1024px) {
  :root {
    --wide-w: 100%;
    --content-w: 100%;
  }

  .site-layout {
    grid-template-columns: 1fr 260px;
    gap: 24px;
    padding: 32px 20px 48px;
  }

  .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    padding: 0 20px;
  }

  .page-hero,
  .single-post-hero,
  .hero-masthead {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .footer-grid {
    gap: 24px;
    padding: 0 20px;
  }

  .footer-nav-cols {
    gap: 24px;
  }

  .post-content {
    padding: 0 20px;
  }
}

/* ── Mobile: up to 768px ── */
@media (max-width: 768px) {

  /* Nav */
  .site-header { height: auto; min-height: 52px; }
  .site-header .container { padding: 0 16px; flex-wrap: wrap; height: auto; min-height: 52px; }
  .main-navigation {
    display: none;
    width: 100%;
    padding: 8px 0 14px;
    background: #0d1117;
    border-top: 1px solid #21262d;
  }
  .main-navigation.toggled { display: flex !important; flex-direction: column; align-items: flex-start; }
  .main-navigation ul { flex-direction: column !important; flex-wrap: wrap !important; gap: 2px !important; width: 100%; }
  .main-navigation ul li a { padding: 8px 16px !important; }
  .menu-toggle { display: flex; }
  .nav-tools-btn { font-size: 10px; padding: 5px 12px; }
  .site-ticker .ticker-label { display: none; }

    /* Hero */
  .page-hero,
  .hero-masthead,
  .single-post-hero {
    padding: 36px 16px !important;
    text-align: center !important;
  }

  .hero-title { font-size: clamp(28px, 8vw, 44px) !important; }
  .hero-sub { font-size: 15px; }
  .hero-stats-strip { gap: 0; padding-top: 24px; margin-top: 28px; }
  .hero-stat-item { padding: 0 16px; }
  .hero-stat-number { font-size: 22px; }

  /* Masthead */
  .masthead-top { padding: 14px 16px; }
  .masthead-cats { padding: 12px 16px; gap: 6px; justify-content: center; }
  .masthead-cat-pill { font-size: 10px; padding: 4px 10px; }

  /* Search hero */
  .hero-search-wrap { flex-wrap: wrap; padding: 8px 12px; gap: 8px; border-radius: 10px; }
  .hero-search-input { font-size: 14px; width: 100%; }
  .hero-search-btn { width: 100%; justify-content: center; border-radius: 6px; padding: 10px; }
  .hero-search-topics { gap: 6px; }
  .hero-topic-pill { font-size: 10px; padding: 4px 10px; }

  /* Layout — single column */
  .site-layout {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 40px;
    gap: 32px;
  }

  .sidebar {
    position: static !important; /* Un-sticky on mobile */
    order: 1; /* Below posts */
  }

  /* Posts grid — single column on small screens */
  .posts-grid {
    grid-template-columns: 1fr !important;
    padding: 0;
  }

  .main-content .posts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Post card */
  .post-card-thumb,
  .post-card-thumb-placeholder { height: 180px; }

  /* Category strip */
  .category-strip {
    padding: 0 16px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cat-filter { padding: 12px 14px; font-size: 11px; white-space: nowrap; }

  /* Single post */
  .post-content { padding: 0 16px; }
  .post-content h2 { font-size: 20px; }
  .post-content h3 { font-size: 17px; }
  .post-featured-image { padding: 0 16px; }

  .post-hero-title { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Author card */
  .post-author-card {
    flex-direction: column;
    text-align: center;
    padding: 16px;
    margin-left: 16px;
    margin-right: 16px;
  }

  /* Tags */
  .post-tags { padding: 0 16px; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
    gap: 28px;
  }

  .footer-nav-cols {
    flex-direction: column;
    gap: 20px;
  }

  .footer-nav-col ul { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .footer-nav-col a { font-size: 12px; }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 16px 0;
  }

  /* Widgets */
  .widget-tools-cta p { padding: 10px 14px 0; }

  /* Pagination */
  .posts-pagination { padding: 24px 16px 40px; gap: 6px; }
  .page-numbers { padding: 7px 11px; font-size: 12px; }

  /* Comments */
  .comments-area { padding: 0 16px 40px; }
}

/* ── Small mobile: up to 480px ── */
@media (max-width: 480px) {
  .site-branding .site-name { font-size: 14px; }

  .page-hero,
  .single-post-hero { padding: 28px 14px !important; }

  .hero-stat-item { padding: 0 12px; }

  .posts-grid { gap: 14px; }

  .post-card-body { padding: 14px 16px; }
  .post-card-title { font-size: 15px; }
  .post-card-excerpt { font-size: 13px; }

  .masthead-cat-pill { font-size: 10px; padding: 4px 8px; }

  .entry-content pre { padding: 14px; }
  .entry-content code { font-size: 12px; }

  .section-heading { font-size: 16px; }
}

/* ── Wide screens: 1280px+ ── */
@media (min-width: 1280px) {
  .site-layout {
    grid-template-columns: 1fr 320px;
  }

  .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* =============================================================================
   UTILITY
============================================================================= */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.alignleft { float: left; margin-right: 24px; margin-bottom: 16px; }
.alignright { float: right; margin-left: 24px; margin-bottom: 16px; }
.aligncenter { display: block; margin: 24px auto; }
.alignwide { max-width: min(100%, calc(var(--content-w) + 160px)); margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; margin-left: calc(-1 * 24px); margin-right: calc(-1 * 24px); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* =============================================================================
   READER UX — TOC, copy-code, reading progress, back-to-top, heading anchors
   Added in 2.1.0
============================================================================= */

/* ── Heading anchor links (hover-revealed #) ─────────────────────────────── */
.entry-content :where(h2, h3, h4) {
  position: relative;
  scroll-margin-top: 80px;
}
.vb-heading-anchor {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text3);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s, color .15s;
  border-radius: 4px;
}
.entry-content :where(h2, h3, h4):hover .vb-heading-anchor,
.vb-heading-anchor:focus-visible {
  opacity: 1;
  color: var(--ac-text);
}
@media (max-width: 700px) {
  .vb-heading-anchor { left: auto; right: 0; opacity: .35; }
}

/* ── Copy-code buttons on <pre> ──────────────────────────────────────────── */
.vb-pre-wrap {
  position: relative;
  margin-bottom: 1.4em;
}
.vb-pre-wrap pre {
  margin-bottom: 0;
  padding-top: 36px;  /* clear space for buttons */
}
.vb-pre-lang {
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.vb-copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.vb-pre-wrap:hover .vb-copy-btn,
.vb-copy-btn:focus-visible {
  opacity: 1;
}
.vb-copy-btn:hover {
  color: var(--text1);
  border-color: var(--ac3);
  background: rgba(31,111,235,.1);
}
.vb-copy-btn.copied {
  opacity: 1;
  color: var(--green-t);
  border-color: var(--green);
  background: var(--green-s);
}
.vb-copy-btn svg { flex-shrink: 0; }

@media (max-width: 700px) {
  .vb-copy-btn { opacity: 1; }  /* always visible on touch devices */
}

/* ── Tiny toast (link-copied notifications) ──────────────────────────────── */
.vb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text1);
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
}
.vb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Reading progress bar (consolidated single-source) ───────────────────── */
.vb-reading-progress {
  position: fixed;
  top: var(--nav-h, 48px);
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--ac), var(--ac-text));
  z-index: 199;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Back-to-top button ──────────────────────────────────────────────────── */
.vb-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, color .15s, border-color .15s, background .15s;
  z-index: 198;
  box-shadow: var(--shadow);
}
.vb-back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vb-back-to-top:hover {
  color: var(--ac-text);
  border-color: var(--ac3);
  background: rgba(31,111,235,.1);
}

/* ── Single-post layout: content + sticky TOC rail ─────────────────────────
   No traditional right sidebar on posts — the TOC IS the right column.
   Below 1200px the TOC hides and content goes full-width.
============================================================================= */
.single-layout {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: block;  /* default: stacked */
}
.single-main {
  min-width: 0;
  /* On mobile/tablet, center content to its natural reading width */
  max-width: var(--content-w);
  margin: 0 auto;
}
.post-article {
  padding: 8px 0 0;
}

/* Modern rail-style TOC — no card, just a subtle vertical indicator + clean type.
   Inspired by Stripe Docs / MDN / GitHub Docs layout. The sticky behaviour
   moved to .post-rail (the wrapper that holds TOC + related-tools). */
.post-toc {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
}
.post-toc-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 0 0 12px;
  margin: 0;
  border-bottom: none;
}
.post-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Vertical rail running down the left of the list */
  border-left: 1px solid var(--border);
}
.post-toc-list .page-toc-item {
  margin: 0;
  padding: 0;
}
.post-toc-list .page-toc-link {
  display: block;
  padding: 6px 12px;
  color: var(--text3);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.45;
  /* Negative left margin so the active indicator can sit on the rail */
  margin-left: -1px;
  border-left: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.post-toc-list .page-toc-link:hover {
  color: var(--text1);
}
.post-toc-list .page-toc-link.active {
  color: var(--ac-text);
  border-left-color: var(--ac);
  font-weight: 500;
}
.post-toc-list .page-toc-link.toc-h3 {
  padding-left: 24px;
  font-size: 12px;
}
.post-toc-list .page-toc-link.toc-h4 {
  padding-left: 36px;
  font-size: 11.5px;
  color: var(--text4);
}
.post-toc-list .page-toc-link.toc-h3.active,
.post-toc-list .page-toc-link.toc-h4.active {
  color: var(--ac-text);
}

/* Two-column layout that keeps content page-centered.
   Grid is 1fr | content | 1fr.

   Row 1: .single-top — featured image + series strip, spans columns 2..3
          (sits directly under the hero, full content width).
   Row 2: .single-main (column 2) + .post-toc (column 3)
          — article body and TOC sit side-by-side; TOC is sticky from here.

   This means the TOC starts level with the article body, not the hero —
   it reads as an article companion rather than a sibling of the title.

   Math for the breakpoint:
     content track  = 780px (var(--content-w))
     TOC needs      = 48px margin + 240px width = 288px
     Each 1fr col   = (viewport - 780) / 2
     Need 1fr >= 288 → viewport >= 1356px
   We set the breakpoint at 1360px for a small safety margin.
============================================================================= */
@media (min-width: 1360px) {
  .single-layout {
    max-width: 1360px;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      var(--content-w)
      minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
  }
  .single-layout .vb-breadcrumbs {
    grid-column: 2 / 4;       /* span content column + right gutter */
    grid-row: 1;
    max-width: var(--content-w);
    margin-bottom: 8px;
  }
  .single-top {
    grid-column: 2 / 4;       /* span content column + right gutter */
    grid-row: 2;
    /* Inside the spanned area, keep the featured image at content width */
    max-width: var(--content-w);
  }
  .single-main {
    max-width: none;
    margin: 0;
    grid-column: 2;
    grid-row: 3;
  }
  .post-rail {
    grid-column: 3;
    grid-row: 3;              /* align with article body, NOT the hero */
    width: 240px;
    margin-left: 48px;
    /* Sticky still works: the parent boundary is .single-layout, so the rail
       can scroll up to top:80px and stay there as the user reads. */
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }
  .post-rail::-webkit-scrollbar { width: 4px; }
  .post-rail::-webkit-scrollbar-track { background: transparent; }
  .post-rail::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
}

/* Below 1360px: TOC hidden, related-tools renders as block in post body */
@media (max-width: 1359px) {
  .post-rail { display: contents; }
  .post-toc { display: none !important; }
  /* Top stack inherits centering from .single-main on mobile/tablet */
  .single-top {
    max-width: var(--content-w);
    margin: 0 auto;
  }
}

/* =============================================================================
   POST SERIES STRIP — added 2.1.0
============================================================================= */
.post-series-strip {
  max-width: 100%;
  margin: 0 0 16px;
}
.series-strip-inner {
  background: linear-gradient(135deg, rgba(31,111,235,.08), rgba(31,111,235,.03));
  border: 1px solid rgba(31,111,235,.25);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.series-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.series-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  background: rgba(31,111,235,.15);
  border: 1px solid rgba(31,111,235,.3);
  border-radius: 4px;
  flex-shrink: 0;
}
.series-title {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -.01em;
}
.series-count {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
}
.series-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.series-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s;
}
.series-nav-btn:hover {
  color: var(--ac-text);
  border-color: var(--ac3);
  background: rgba(31,111,235,.1);
}

@media (max-width: 700px) {
  .series-strip-inner { flex-direction: column; align-items: flex-start; }
  .series-nav { width: 100%; justify-content: space-between; }
}

/* =============================================================================
   "LAST UPDATED" BADGE — added 2.1.0
============================================================================= */
.post-hero-updated {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--green-t);
  background: var(--green-s);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(63,185,80,.25);
  letter-spacing: .02em;
}
.post-hero-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
  display: inline-block;
}

/* =============================================================================
   ARCHIVE HERO — added 2.1.0
============================================================================= */
.archive-hero {
  background: linear-gradient(135deg, #0d2061 0%, #1d4ed8 100%);
  padding: 48px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.archive-hero-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  /* No border-bottom on the inner — the gradient itself provides the visual
     separation from the post grid below. */
}
.archive-hero .vb-breadcrumbs {
  justify-content: center;
  margin-bottom: 16px;
}
.archive-hero .vb-breadcrumb-item,
.archive-hero .vb-breadcrumb-sep {
  color: rgba(255, 255, 255, .75);
}
.archive-hero .vb-breadcrumb-item:hover { color: #fff; }
.archive-eyebrow {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 10px;
}
.archive-title {
  font-family: var(--fd);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 auto 14px;
  max-width: 820px;
}
.archive-description {
  font-size: 15px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.65;
  max-width: var(--content-w);
  margin: 0 auto 16px;
  text-align: center;
  /* Removed left-border editorial accent — doesn't fit a centered hero layout */
  padding-left: 0;
  border-left: none;
}
.archive-description p { margin: 0 0 .6em; }
.archive-description p:last-child { margin-bottom: 0; }
.archive-description a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.archive-count {
  font-family: var(--fm);
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .04em;
}
.archive-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text3);
  font-size: 15px;
}

/* =============================================================================
   SEARCH PAGE HERO — compact layout (rebuilt 2.8.1)
   Search results need a smaller, denser hero so results show above-the-fold.
   Inherits the navy gradient from .page-hero but caps the title size and
   tightens vertical spacing.
============================================================================= */
.search-hero {
  padding: 32px 24px 24px;
}
.search-hero .hero-title {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: var(--wide-w);
  margin: 0 auto;
  /* Allow long queries to wrap rather than overflow horizontally */
  word-break: break-word;
  overflow-wrap: break-word;
}
.search-hero .vb-breadcrumbs {
  max-width: var(--wide-w);
  margin: 0 auto 12px;
}

/* =============================================================================
   404 PAGE — centered hero with broken-cable illustration (rebuilt 2.5.1)
============================================================================= */
.error-404-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}
.error-404-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.error-404-status {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber-t);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.error-404-title {
  font-family: var(--fd);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.error-404-sub {
  font-size: 16px;
  color: var(--text3);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 32px;
}
.error-404-search {
  max-width: 460px;
  margin: 0 auto 36px;
}
.error-404-search .search-form {
  display: flex;
  gap: 8px;
}
.error-404-search .search-field {
  flex: 1;
  font-size: 14px;
  padding: 10px 14px;
}
.error-404-cats {
  margin-bottom: 32px;
}
.error-404-cats-label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  color: var(--text4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.error-404-cats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.error-404-back {
  margin-top: 24px;
}
.error-404-back .vb-back-home {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text3);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.error-404-back .vb-back-home:hover {
  color: var(--ac-text);
}

/* The illustration sits above everything in the centered column */
.vb-404-illustration {
  max-width: 360px;
  margin: 0 auto 24px;
}

/* On smaller screens, tighten everything */
@media (max-width: 600px) {
  .error-404-page { padding: 40px 16px; min-height: calc(100vh - 160px); }
  .error-404-search .search-form { flex-direction: column; }
  .vb-404-illustration { max-width: 280px; }
}
.search-hero .hero-title span {
  color: var(--ac-text);
}
.search-empty {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
}
.search-empty-icon {
  color: var(--text4);
  margin-bottom: 16px;
  display: inline-flex;
}
.search-empty-msg {
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 20px;
}
.search-empty-form {
  max-width: 420px;
  margin: 0 auto 32px;
}
.search-empty-block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.search-empty-block-title {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
}
.search-empty-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-pill-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 6px;
}
.search-empty-popular {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-empty-popular li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.search-empty-popular li:last-child { border-bottom: none; }
.search-empty-popular a {
  font-size: 14px;
  color: var(--text1);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.search-empty-popular a:hover {
  color: var(--ac-text);
}
.popular-meta {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
  flex-shrink: 0;
}
.vb-back-home {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--ac-text);
  text-decoration: none;
  letter-spacing: -.01em;
}
.vb-back-home:hover {
  color: var(--text1);
}

/* =============================================================================
   UTILITY CLASSES (replaces inline styles for CSP-compliance) — added 2.1.0
============================================================================= */
.vb-pb-0 { padding-bottom: 0 !important; }
.vb-mt-32 { margin-top: 32px; }
.vb-text-center { text-align: center; }

/* =============================================================================
   PERFORMANCE / PERCEPTION — added 2.1.0
============================================================================= */

/* Skip-to-content link — visible on focus only */
.vb-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  padding: 8px 14px;
  background: var(--ac);
  color: #fff;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: top .15s;
}
.vb-skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* View Transitions API — instant cross-fade on internal nav */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
}

/* Honour prefers-reduced-motion — disables view transitions and other animations */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track {
    animation: none !important;
  }
}

/* Image dimension fix — keep width/height for CLS, use aspect-ratio for cards */
.post-card-thumb {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-thumb-placeholder {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}

/* Search submit icon — replaces inline style for CSP compliance */
.search-submit-icon { vertical-align: middle; margin-right: 4px; }

/* Screen-reader-only utility (used by skip link, search label) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--ac);
  border-radius: 4px;
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 8px 14px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* =============================================================================
   POST BODY POLISH — added 2.2.0
============================================================================= */

/* ── Note / Warning / Tip / Important callout boxes ───────────────────────────
   Authors write a blockquote starting with the keyword:
       > Note: This requires VCF 9 or newer.
   Theme detects the prefix and styles the box with a matching color scheme.
   No Gutenberg block extension or shortcode needed. Falls back to default
   blockquote styling if no keyword prefix is found.
============================================================================= */
.entry-content blockquote {
  position: relative;
}
.entry-content blockquote.vb-callout {
  border-left-width: 4px;
  padding: 14px 18px 14px 48px;
  margin: 24px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: normal;
}
.entry-content blockquote.vb-callout::before {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.entry-content blockquote.vb-callout .vb-callout-label {
  display: block;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Note — blue */
.entry-content blockquote.vb-note {
  background: rgba(31,111,235,.08);
  border-left-color: var(--ac);
  color: #c9d1d9;
}
.entry-content blockquote.vb-note::before {
  content: 'i';
  background: rgba(31,111,235,.2);
  color: var(--ac-text);
  font-style: italic;
}
.entry-content blockquote.vb-note .vb-callout-label { color: var(--ac-text); }

/* Tip — green */
.entry-content blockquote.vb-tip {
  background: var(--green-s);
  border-left-color: var(--green);
  color: #c9d1d9;
}
.entry-content blockquote.vb-tip::before {
  content: '✓';
  background: rgba(63,185,80,.2);
  color: var(--green-t);
}
.entry-content blockquote.vb-tip .vb-callout-label { color: var(--green-t); }

/* Warning — amber */
.entry-content blockquote.vb-warning {
  background: rgba(240,136,62,.08);
  border-left-color: var(--amber);
  color: #c9d1d9;
}
.entry-content blockquote.vb-warning::before {
  content: '!';
  background: rgba(240,136,62,.2);
  color: var(--amber-t);
}
.entry-content blockquote.vb-warning .vb-callout-label { color: var(--amber-t); }

/* Important / Danger — red */
.entry-content blockquote.vb-important,
.entry-content blockquote.vb-danger {
  background: rgba(248,81,73,.08);
  border-left-color: var(--red);
  color: #c9d1d9;
}
.entry-content blockquote.vb-important::before,
.entry-content blockquote.vb-danger::before {
  content: '!';
  background: rgba(248,81,73,.2);
  color: var(--red);
}
.entry-content blockquote.vb-important .vb-callout-label,
.entry-content blockquote.vb-danger  .vb-callout-label { color: var(--red); }

/* ── <kbd> keyboard key styling ─────────────────────────────────────────────── */
.entry-content kbd,
.dc-entry kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text1);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
  vertical-align: 1px;
  white-space: nowrap;
}
.entry-content kbd kbd { /* nested kbd (Cmd+C → kbd>kbd) */
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  vertical-align: baseline;
}

/* ── Figure captions ────────────────────────────────────────────────────────── */
.entry-content figure,
.dc-entry figure {
  margin: 28px 0;
  padding: 0;
}
.entry-content figure img,
.dc-entry figure img {
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}
.entry-content figcaption,
.dc-entry figcaption {
  margin-top: 10px;
  padding: 0 8px;
  font-family: var(--ff);
  font-size: 13px;
  font-style: italic;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
}

/* ── External link indicator ────────────────────────────────────────────────── */
.entry-content a.vb-external::after,
.dc-entry a.vb-external::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 3px;
  vertical-align: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2379c0ff' stroke-width='1.5'><path d='M3 3h3M9 3v3M9 3L5 7'/><path d='M9 8v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h1'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .7;
}
.entry-content a.vb-external:hover::after,
.dc-entry a.vb-external:hover::after { opacity: 1; }

/* ── Image lightbox modal ──────────────────────────────────────────────────── */
.vb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  cursor: zoom-out;
}
.vb-lightbox.show {
  opacity: 1;
  pointer-events: auto;
}
.vb-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  cursor: zoom-out;
}
.vb-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vb-lightbox-close:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}

/* Hint that images are zoomable */
.entry-content img:not(.no-zoom):not([role="presentation"]),
.dc-entry img:not(.no-zoom):not([role="presentation"]) {
  cursor: zoom-in;
}

/* ── Footnotes ──────────────────────────────────────────────────────────────── */
.entry-content .vb-footnote-ref {
  display: inline-block;
  vertical-align: super;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--ac-text);
  text-decoration: none;
  margin: 0 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(31,111,235,.1);
  line-height: 1;
}
.entry-content .vb-footnote-ref:hover {
  background: rgba(31,111,235,.2);
}
.entry-content .vb-footnotes {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.entry-content .vb-footnotes-title {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
}
.entry-content .vb-footnotes ol {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
  padding-left: 24px;
}
.entry-content .vb-footnotes li {
  margin-bottom: 8px;
}
.entry-content .vb-footnote-back {
  margin-left: 6px;
  font-size: 0.8em;
  color: var(--text3);
  text-decoration: none;
}
.entry-content .vb-footnote-back:hover {
  color: var(--ac-text);
}

/* =============================================================================
   BREADCRUMBS — added 2.2.0
============================================================================= */
.vb-breadcrumbs {
  margin: 0 0 16px;
}
.vb-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
}
.vb-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.vb-breadcrumb-item a {
  color: var(--text2);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.vb-breadcrumb-item a:hover {
  color: var(--ac-text);
  background: rgba(31,111,235,.08);
}
.vb-breadcrumb-sep {
  color: var(--text4);
  margin: 0 2px;
  user-select: none;
}
.vb-breadcrumb-current {
  color: var(--text2);
  padding: 2px 8px;
  /* truncate very long current titles */
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =============================================================================
   PREV / NEXT POST NAVIGATION — added 2.2.0
============================================================================= */
.vb-prev-next {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* When only one card is rendered (post is at start or end of timeline),
   it stays in its natural grid column rather than stretching full-width.
   - Lone "prev" card sits in column 1 (left)
   - Lone "next" card sits in column 2 (right)
   This matches the convention used by most documentation sites and
   keeps the title from looking stretched out across the container. */
.vb-prev-next-card.prev:only-child {
  grid-column: 1;
}
.vb-prev-next-card.next:only-child {
  grid-column: 2;
}

.vb-prev-next-card {
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, transform .2s, box-shadow .2s;
  min-height: 90px;
}
.vb-prev-next-card:hover {
  border-color: var(--ac3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.vb-prev-next-card.next {
  flex-direction: row-reverse;
  text-align: right;
}
.vb-prev-next-thumb {
  flex: 0 0 90px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg3);
}
.vb-prev-next-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  min-width: 0;
}
.vb-prev-next-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.vb-prev-next-card.next .vb-prev-next-eyebrow {
  justify-content: flex-end;
}
.vb-prev-next-title {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.3;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 700px) {
  .vb-prev-next {
    grid-template-columns: 1fr;
  }
  .vb-prev-next-card.next {
    flex-direction: row;
    text-align: left;
  }
  .vb-prev-next-card.next .vb-prev-next-eyebrow {
    justify-content: flex-start;
  }
}

/* =============================================================================
   JUMP-TO-COMMENTS-TOP + ARCHIVE READING TIME — added 2.2.0
============================================================================= */
.vb-comments-top {
  margin: 24px 0 0;
  text-align: right;
}
.vb-comments-top a {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.vb-comments-top a:hover {
  color: var(--ac-text);
  background: rgba(31,111,235,.08);
}

.archive-count-sep {
  margin: 0 6px;
  color: var(--text4);
}
.archive-reading-time {
  color: var(--text3);
}

/* =============================================================================
   FEATURED / EDITOR'S PICK HERO ON HOMEPAGE — added 2.2.0
============================================================================= */
.vb-featured-hero {
  max-width: var(--wide-w);
  margin: 24px auto 32px;
  padding: 0 24px;
}
.vb-featured-card {
  display: block;
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--bg2);
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s, transform .2s, box-shadow .2s;
}
.vb-featured-card:hover {
  border-color: var(--ac3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.vb-featured-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vb-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,.7);
}
.vb-featured-pill {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: rgba(31,111,235,.25);
  border: 1px solid rgba(31,111,235,.4);
  border-radius: 4px;
  color: #79c0ff;
}
.vb-featured-cat {
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.vb-featured-date { color: rgba(255,255,255,.5); }
.vb-featured-title {
  font-family: var(--fd);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  max-width: 60ch;
}
.vb-featured-excerpt {
  font-size: 15px;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
}
@media (max-width: 700px) {
  .vb-featured-card { min-height: 260px; }
  .vb-featured-body { padding: 20px 22px; }
}

/* =============================================================================
   "MORE FROM THIS CATEGORY" — added 2.2.0
============================================================================= */
.vb-more-from-cat {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 48px 24px 0;
}
.vb-more-from-cat .cat-name {
  color: var(--ac-text);
}
.vb-more-from-cat-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.vb-more-row {
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.vb-more-row:hover {
  border-color: var(--ac3);
  transform: translateX(2px);
}
.vb-more-thumb {
  flex: 0 0 80px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg3);
}
.vb-more-thumb-placeholder {
  background: linear-gradient(135deg, var(--bg), var(--bg2));
}
.vb-more-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  min-width: 0;
}
.vb-more-title {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.35;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.vb-more-meta {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vb-more-meta-sep { color: var(--text4); }
@media (max-width: 700px) {
  .vb-more-from-cat-list { grid-template-columns: 1fr; }
}

/* =============================================================================
   POPULAR TAGS WIDGET — added 2.2.0
============================================================================= */
.vb-popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vb-popular-tags .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tag-pill-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 5px;
  line-height: 1.4;
}

/* =============================================================================
   SKILL LEVEL BADGE — added 2.2.0
============================================================================= */
.vb-skill-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.vb-skill-beginner {
  color: #56d364;
  background: rgba(63,185,80,.1);
  border-color: rgba(63,185,80,.3);
}
.vb-skill-intermediate {
  color: #79c0ff;
  background: rgba(31,111,235,.1);
  border-color: rgba(31,111,235,.3);
}
.vb-skill-advanced {
  color: #ffa657;
  background: rgba(240,136,62,.1);
  border-color: rgba(240,136,62,.3);
}
.vb-skill-expert {
  color: #ff7b72;
  background: rgba(248,81,73,.1);
  border-color: rgba(248,81,73,.3);
}

/* Hero variant — subtle white-on-color for the dark hero gradient */
.single-post-hero .vb-skill-badge {
  color: #fff;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
}

/* =============================================================================
   ACCESSIBILITY — added 2.2.0
============================================================================= */

/* Consistent focus indicator system-wide.
   Uses :focus-visible so mouse clicks don't get rings, only keyboard users do. */
:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--ac3, #388bfd);
  outline-offset: 2px;
  border-radius: 3px;
}
/* For inputs / buttons that have their own borders, use box-shadow instead so
   the focus indicator doesn't overlap the border awkwardly. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
.search-field:focus-visible,
.search-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, .4);
}

/* Pills, links, cards get a slightly tighter ring */
a:focus-visible,
.tag-pill:focus-visible,
.masthead-cat-pill:focus-visible,
.post-card:focus-visible,
.vb-prev-next-card:focus-visible,
.vb-more-row:focus-visible,
.vb-featured-card:focus-visible {
  outline: 2px solid var(--ac3, #388bfd);
  outline-offset: 2px;
}

/* Skip-link landing target — make it focusable so the skip link actually
   transfers focus, with a visible hint when focused. */
#main-content {
  scroll-margin-top: 60px;
}
#main-content:focus {
  outline: none;
}
#main-content:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 4px;
}

/* Comment form polish (a11y + readability) */
.comments-area .comment-form label {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text1);
  font-family: var(--ff);
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.comments-area .comment-form .submit {
  padding: 10px 18px;
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.comments-area .comment-form .submit:hover {
  background: var(--ac3);
}
.comments-area .comment-notes,
.comments-area .moderation-notice {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--bg2);
  border-left: 3px solid var(--ac);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.comments-area .form-submit {
  margin-top: 16px;
}

/* =============================================================================
   INSTANT SEARCH DROPDOWN — added 2.3.0
============================================================================= */
.search-form { position: relative; }

.vb-instant-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
}
.vb-instant-results[hidden] { display: none; }

.vb-instant-item {
  display: flex;
  align-items: stretch;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .12s;
  gap: 10px;
}
.vb-instant-item:hover,
.vb-instant-item.active,
.vb-instant-item:focus-visible {
  background: rgba(31,111,235,.08);
  outline: none;
}
.vb-instant-thumb {
  flex: 0 0 56px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg3);
  border-radius: 4px;
  align-self: center;
}
.vb-instant-thumb-blank {
  background-image: linear-gradient(135deg, var(--bg3), var(--bg));
}
.vb-instant-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.vb-instant-title {
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.35;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-instant-title mark {
  background: rgba(240,136,62,.18);
  color: var(--amber-t);
  padding: 0 2px;
  border-radius: 2px;
}
.vb-instant-meta {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.vb-instant-cat {
  color: var(--ac-text);
  font-weight: 600;
}
.vb-instant-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text3);
  text-align: center;
}
.vb-instant-all {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-text);
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: background .12s;
}
.vb-instant-all:hover {
  background: rgba(31,111,235,.08);
}

/* =============================================================================
   CODE BLOCK LINE NUMBERS + HIGHLIGHTING — added 2.3.0
============================================================================= */
pre.vb-numbered {
  counter-reset: vb-line;
  position: relative;
}
pre.vb-numbered code {
  display: block;
  padding-left: 56px;
}
pre.vb-numbered .vb-code-line {
  display: block;
  position: relative;
  padding: 0 8px;
  margin: 0 -8px;
  border-left: 3px solid transparent;
  counter-increment: vb-line;
}
pre.vb-numbered .vb-code-line::before {
  content: counter(vb-line);
  position: absolute;
  left: -56px;
  top: 0;
  width: 40px;
  text-align: right;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text4);
  user-select: none;
  pointer-events: none;
}
pre.vb-numbered .vb-code-line.highlight {
  background: rgba(240,136,62,.08);
  border-left-color: var(--amber);
  margin-left: -8px;
  padding-left: 8px;
}
pre.vb-numbered .vb-code-line.highlight::before {
  color: var(--amber-t);
  font-weight: 600;
}

/* The copy button + lang label already account for ~36px top padding;
   make sure we don't double-pad when both are present */
.vb-pre-wrap pre.vb-numbered {
  padding-top: 36px;
}

/* =============================================================================
   TOC READING TIME PER SECTION — added 2.3.0
============================================================================= */
.post-toc-list .page-toc-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.post-toc-list .page-toc-link-text {
  flex: 1;
  min-width: 0;
}
.post-toc-list .page-toc-link-mins {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text4);
  font-weight: 400;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: .02em;
}
.post-toc-list .page-toc-link.active .page-toc-link-mins {
  color: var(--ac-text);
}

/* =============================================================================
   RELATED TOOLS SIDEBAR — added 2.3.0
============================================================================= */
.vb-related-tools {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.vb-related-tools-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 12px;
}
.vb-related-tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vb-related-tool {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.vb-related-tool:hover {
  border-color: var(--ac3);
  background: rgba(31,111,235,.08);
  transform: translateX(2px);
}
.vb-related-tool-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--fd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.vb-related-tool-title svg {
  flex-shrink: 0;
  color: var(--text3);
  transition: color .15s;
}
.vb-related-tool:hover .vb-related-tool-title svg {
  color: var(--ac-text);
}
.vb-related-tool-desc {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}

/* On desktop (≥1360px), related-tools sits beneath the TOC inside .post-rail */
@media (min-width: 1360px) {
  .vb-related-tools {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
}

/* Below 1360px: related-tools renders as a normal block at end of post body */
@media (max-width: 1359px) {
  .vb-related-tools {
    max-width: var(--content-w);
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================================
   MASTHEAD SEARCH TOGGLE — added 2.3.1
============================================================================= */
.nav-search-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  margin-left: 8px;
}
.nav-search-toggle:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-search-toggle:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}

/* The slide-down panel hangs below the masthead */
.nav-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  /* Hidden by default — animate in by sliding down */
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-search-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-search-panel-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-search-panel-inner .search-form {
  flex: 1;
  margin: 0;
}
.nav-search-panel-inner .search-field {
  width: 100%;
  font-size: 15px;
  padding: 10px 14px;
}
.nav-search-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-search-close:hover {
  background: var(--bg3);
  color: var(--text1);
  border-color: var(--border2);
}

/* The masthead needs position:relative so the panel anchors to it */
.site-header {
  position: relative;
}

/* On mobile, the search panel takes the full viewport for a native-feeling
   search experience. Includes a backdrop, larger input, and the instant-search
   dropdown fills the rest of the screen below. */
@media (max-width: 768px) {
  .nav-search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--bg);
    transform: translateY(-100%);
    box-shadow: none;
    overflow-y: auto;
    border-bottom: none;
  }
  .nav-search-panel.open {
    transform: translateY(0);
  }
  .nav-search-panel-inner {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    /* Sticky search bar at top of full-screen panel */
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .nav-search-panel-inner .search-form {
    flex: 1;
  }
  .nav-search-panel-inner .search-field {
    font-size: 16px;  /* prevents iOS zoom-on-focus */
    padding: 11px 14px;
  }
  /* Close button slightly bigger and more tappable on mobile */
  .nav-search-close {
    width: 44px;
    height: 44px;
  }
  /* The instant-search dropdown should sit inline (full-width, no float) when in mobile panel */
  .nav-search-panel .vb-instant-results {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-height: none;
    background: var(--bg);
    margin: 0;
  }
  .nav-search-panel .vb-instant-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav-search-panel .vb-instant-item:last-child {
    border-bottom: none;
  }
  /* When the panel is open, prevent body scroll behind it */
  body.vb-search-open {
    overflow: hidden;
  }
}

/* =============================================================================
   COMMENT MARKDOWN RENDERING — added 2.4.0
   Authors and commenters can use markdown in comment bodies; the PHP filter
   `vb_comment_markdown` parses fenced code blocks, inline code, bold, italic,
   links, and blockquotes.
============================================================================= */
.comment-content,
.comment-text {
  /* Already styled in main; just override the new tags we now render */
}

/* Fenced code blocks in comments */
pre.vb-comment-code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
  font-family: var(--fm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text1);
  overflow-x: auto;
  position: relative;
}
pre.vb-comment-code code {
  font-family: var(--fm);
  background: transparent;
  padding: 0;
  color: inherit;
}
/* Lang label for fenced blocks with a language hint (```bash, ```python, etc.) */
pre.vb-comment-code[data-lang]:not([data-lang=""])::before {
  content: attr(data-lang);
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .08em;
  user-select: none;
}
/* When line numbers get added, give a bit of top padding so the lang label fits */
pre.vb-comment-code.vb-numbered {
  padding-top: 28px;
}
/* Adjust the line-number gutter to be tighter than post-body code */
pre.vb-comment-code.vb-numbered code {
  padding-left: 36px;
}
pre.vb-comment-code.vb-numbered .vb-code-line::before {
  left: -36px;
  width: 24px;
  font-size: 10px;
}

/* Inline code in comments */
code.vb-comment-inline-code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--fm);
  font-size: .92em;
  color: var(--text1);
}

/* Blockquotes in comments */
blockquote.vb-comment-quote {
  border-left: 3px solid var(--ac3);
  background: rgba(31,111,235,.06);
  padding: 8px 14px;
  margin: 10px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text2);
}
blockquote.vb-comment-quote p {
  margin: 0;
  font-style: normal;
}

/* Bold + italic + links inside comments */
.comment-content strong,
.comment-text strong {
  color: var(--text1);
  font-weight: 600;
}
.comment-content em,
.comment-text em {
  color: var(--text2);
}
.comment-content a,
.comment-text a {
  color: var(--ac-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comment-content a:hover,
.comment-text a:hover {
  text-decoration: none;
}

/* Hint for commenters: small text below the form letting them know markdown works */
.comment-form-comment::after {
  content: "Markdown supported: **bold**, *italic*, `code`, ```fenced blocks```, > quotes, [link](url)";
  display: block;
  margin-top: 6px;
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text4);
  letter-spacing: .02em;
}

/* =============================================================================
   COMMENTS — added 2.4.1
   Themed comment list + form. Markdown rendering already handled in earlier
   block; this is the structural styling for the list, individual comments,
   reply form, and threading.
============================================================================= */
.vb-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.vb-comments-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--text1);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vb-comments-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.vb-comments-list,
.vb-comments-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-comments-list .children {
  margin-left: 32px;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

.vb-comment {
  margin-bottom: 16px;
}
.vb-comment-inner {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.vb-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.vb-comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}
.vb-comment-meta {
  flex: 1;
  min-width: 0;
}
.vb-comment-author {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 600;
  color: var(--text1);
  letter-spacing: -.005em;
}
.vb-comment-author a {
  color: var(--text1);
  text-decoration: none;
}
.vb-comment-author a:hover {
  color: var(--ac-text);
}
.vb-comment-date {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}
.vb-comment-date a {
  color: var(--text3);
  text-decoration: none;
}
.vb-comment-date a:hover {
  color: var(--ac-text);
}
.vb-comment-awaiting {
  font-size: 12px;
  color: var(--amber-t);
  background: rgba(240,136,62,.08);
  border-left: 3px solid var(--amber);
  padding: 6px 10px;
  margin: 0 0 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.vb-comment-content {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
}
.vb-comment-content p {
  margin: 0 0 10px;
}
.vb-comment-content p:last-child {
  margin-bottom: 0;
}
.vb-comment-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.vb-comment-reply a {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s;
}
.vb-comment-reply a:hover {
  background: rgba(31,111,235,.08);
}

.vb-comments-closed-note {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  font-style: italic;
}

/* ── Comment form (extends earlier comment-form styling) ─────────────────── */
.comment-form {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.comment-reply-title {
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 700;
  color: var(--text1);
  margin: 0 0 14px;
}
.comment-reply-title small {
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
  color: var(--text3);
}
.comment-reply-title small a {
  color: var(--text3);
  text-decoration: none;
}
.comment-reply-title small a:hover {
  color: var(--text1);
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
  display: inline-block;
  width: calc(50% - 8px);
  margin-right: 8px;
  margin-bottom: 12px;
  vertical-align: top;
}
.comment-form-url {
  display: block;
  width: 100%;
  margin-right: 0;
}
@media (max-width: 600px) {
  .comment-form-author,
  .comment-form-email {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}
.required {
  color: var(--red);
  font-weight: 700;
}
.comment-form .submit:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 2px;
}

/* =============================================================================
   IMAGE LOADING SKELETONS — added 2.5.0 (#38)
   Show a subtle animated gradient placeholder where an image will be, before
   it's loaded. Hides itself once the image's load event fires. Pairs with a
   small fade-in animation on the image itself so the transition is smooth.
============================================================================= */
.vb-img-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg2);
}
/* The skeleton overlay — visible until JS removes the .loading class */
.vb-img-skeleton.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--bg2) 0%,
    var(--bg3) 50%,
    var(--bg2) 100%
  );
  background-size: 200% 100%;
  animation: vb-skeleton-shimmer 1.4s ease-in-out infinite;
  z-index: 1;
}
.vb-img-skeleton img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease;
}
.vb-img-skeleton.loaded img {
  opacity: 1;
}

@keyframes vb-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduce animation for users who request it */
@media (prefers-reduced-motion: reduce) {
  .vb-img-skeleton.loading::before {
    animation: none;
    background: var(--bg2);
  }
  .vb-img-skeleton img {
    transition: none;
  }
}

/* =============================================================================
   404 ILLUSTRATION ANIMATION — added 2.5.0 (#35)
   (Layout/sizing for .vb-404-illustration is in the 404 PAGE section earlier.)
============================================================================= */
.vb-404-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Spark animation — flickers in/out, offset between left and right */
@keyframes vb-404-spark {
  0%, 80%, 100% { opacity: 0; }
  40%           { opacity: 1; }
}
.vb-404-spark-left,
.vb-404-spark-right {
  animation: vb-404-spark 1.6s ease-in-out infinite;
}
.vb-404-spark-right { animation-delay: 0.4s; }

/* "LINK DOWN" indicator blinks slowly */
@keyframes vb-404-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0.25; }
}
.vb-404-link-status circle {
  animation: vb-404-blink 1.1s ease-in-out infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vb-404-spark-left,
  .vb-404-spark-right,
  .vb-404-link-status circle {
    animation: none;
  }
  .vb-404-spark-left,
  .vb-404-spark-right { opacity: 1; }
}

/* =============================================================================
   TERMINAL STRIP — added 2.5.0 (#37)
   Subtle decorative element on the homepage between featured hero and posts.
   One command types out on load, then settles. Doesn't loop.
============================================================================= */
.vb-terminal-strip {
  max-width: var(--wide-w);
  margin: 24px auto;
  padding: 0 24px;
}
.vb-terminal-strip-inner {
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--fm);
  font-size: 12.5px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  /* Just barely enough to feel "interactive" without being a banner */
  min-height: 36px;
}
.vb-terminal-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.vb-terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.vb-terminal-dot-r { background: #ff5f57; }
.vb-terminal-dot-y { background: #febc2e; }
.vb-terminal-dot-g { background: #28c840; }

.vb-terminal-host {
  color: #10b981;
  font-weight: 500;
  flex-shrink: 0;
}

.vb-terminal-cmd {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  /* The actual command text is injected by JS; CSS handles cursor */
}
.vb-terminal-cmd::after {
  content: "_";
  display: inline-block;
  margin-left: 2px;
  color: #10b981;
  font-weight: 700;
  animation: vb-terminal-cursor 1s steps(2) infinite;
}
.vb-terminal-cmd.vb-terminal-done::after {
  /* Once the command is done typing, the cursor goes away — settled state */
  animation: none;
  opacity: 0;
}
@keyframes vb-terminal-cursor {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.vb-terminal-output {
  color: var(--text3);
  margin-left: 8px;
  opacity: 0;
  transition: opacity .3s ease .1s;
}
.vb-terminal-output.vb-terminal-output-shown {
  opacity: 1;
}

/* Mobile: keep the strip but tighten */
@media (max-width: 600px) {
  .vb-terminal-strip { padding: 0 16px; }
  .vb-terminal-strip-inner {
    font-size: 11px;
    gap: 8px;
    padding: 8px 12px;
  }
  /* Hide host prefix on small screens to save room for command */
  .vb-terminal-host { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vb-terminal-cmd::after,
  .vb-terminal-cmd.vb-terminal-done::after {
    animation: none;
    opacity: 0;
  }
  .vb-terminal-output {
    transition: none;
  }
}

/* =============================================================================
   DIFF HIGHLIGHTING IN CODE BLOCKS — added 2.6.0 (#7)
   Author marks <pre data-diff>, prefixes lines with +, -, or space.
   JS strips the marker and adds .vb-diff-add / .vb-diff-remove classes.
   Diff blocks suppress line numbers — the +/- prefix IS the gutter.
============================================================================= */
pre.vb-diff.vb-numbered code {
  /* Reduce gutter from 56px (line numbers) to 36px (just +/- column) */
  padding-left: 36px;
}
pre.vb-diff .vb-code-line {
  position: relative;
  /* Suppress the counter ::before from the line-number rule */
  counter-increment: none;
}
pre.vb-diff .vb-code-line::before {
  /* Default gutter: blank single-space — gets overridden for +/- lines below */
  content: "";
  position: absolute;
  left: -32px;
  top: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text4);
}
pre.vb-diff .vb-code-line.vb-diff-add {
  background: rgba(46, 160, 67, .12);
  border-left: 3px solid #2ea043;
  margin-left: -8px;
  padding-left: 5px;
}
pre.vb-diff .vb-code-line.vb-diff-add::before {
  content: "+";
  color: #3fb950;
}
pre.vb-diff .vb-code-line.vb-diff-remove {
  background: rgba(248, 81, 73, .10);
  border-left: 3px solid #f85149;
  margin-left: -8px;
  padding-left: 5px;
}
pre.vb-diff .vb-code-line.vb-diff-remove::before {
  content: "−";  /* unicode minus, matches + width better than ASCII */
  color: #ff7b72;
}
pre.vb-diff .vb-code-line.vb-diff-hunk {
  color: var(--text4);
  font-style: italic;
  margin: 8px 0 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
pre.vb-diff .vb-code-line.vb-diff-hunk::before {
  content: "";
}

/* =============================================================================
   MERMAID DIAGRAMS — added 2.6.0 (#10)
============================================================================= */
.vb-mermaid {
  display: block;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 18px 0;
  text-align: center;
  overflow-x: auto;
}
.vb-mermaid svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
/* Diagrams that fail to parse — leave the source visible in a code-like box */
.vb-mermaid.vb-mermaid-error {
  background: var(--bg);
  border-left: 3px solid var(--amber);
  text-align: left;
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text2);
  white-space: pre-wrap;
  padding: 14px 16px;
}
.vb-mermaid.vb-mermaid-error::before {
  content: "Diagram parse error — source shown:";
  display: block;
  font-family: var(--fd);
  font-size: 11px;
  color: var(--amber-t);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Print: Don't show mermaid in print (SVGs may not render reliably) */
@media print {
  .vb-mermaid svg { filter: invert(0.92) hue-rotate(180deg); }
}

/* =============================================================================
   "VERIFIED ACCURATE" REVIEWED BADGE — added 2.6.0 (#17)
   Renders inline in the post-hero-meta row, after skill badge.
============================================================================= */
.vb-reviewed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: #4ade80;
  background: rgba(63, 185, 80, .12);
  border: 1px solid rgba(63, 185, 80, .35);
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: .02em;
  /* Drop shadow + text shadow give it a slight lift over any bg so it stays
     legible against the dark page background AND the blue hero gradient. */
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.vb-reviewed-badge svg {
  color: #4ade80;
  flex-shrink: 0;
}
.vb-reviewed-badge time {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}
/* On dark page backgrounds (single-post hero is a gradient; some pages use the
   dark base bg) the pill stays readable. On the dark base bg, tone down the
   background tint slightly so it doesn't look like a heavy chip. */
.vb-single .vb-reviewed-badge,
.vb-home .vb-reviewed-badge {
  background: rgba(63, 185, 80, .08);
}

/* =============================================================================
   "TESTED ON" CALLOUT — added 2.6.0 (#40)
   Sits above .entry-content, before any post body. Lists product/version pairs.
============================================================================= */
.vb-tested-on {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid #3fb950;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin: 0 0 24px;
  max-width: var(--content-w);
}
.vb-tested-on-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: #3fb950;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.vb-tested-on-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.vb-tested-on-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--fm);
  font-size: 12.5px;
  margin: 0;
}
.vb-tested-on-product {
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
}
.vb-tested-on-version {
  color: var(--text1);
  font-weight: 600;
}
/* Inside articles: don't let entry-content's first-child margin collapse with the callout */
.entry-content > :first-child { margin-top: 0; }

/* =============================================================================
   ANIMATED BACKGROUND GRID — added 2.7.0 (#46)
   Subtle drifting dot pattern overlaid on heroes. Uses radial-gradient so
   it's pure CSS — no extra HTTP request. Slow drift via `background-position`
   animation. Respects prefers-reduced-motion.
============================================================================= */
.vb-featured-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  /* Brighter emerald dots so they're visible against dark featured-image overlays.
     Removed mix-blend-mode: screen since it made dots invisible on already-dark
     backgrounds. */
  background-image: radial-gradient(rgba(16, 185, 129, .22) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 1;
  animation: vb-grid-drift 90s linear infinite;
  opacity: .9;
}
.vb-featured-body {
  /* Make sure body content stacks above the grid overlay */
  position: relative;
  z-index: 2;
}

@keyframes vb-grid-drift {
  0%   { background-position: 0   0; }
  100% { background-position: 240px 240px; }   /* 10× the cell so the loop is invisible */
}

/* Page hero (about / 404 / search results) — same pattern, navy variant */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  display: block;     /* override earlier `.page-hero::after { display: none }` */
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  animation: vb-grid-drift-slow 120s linear infinite;
  z-index: 1;
}
.page-hero > * { position: relative; z-index: 2; }

@keyframes vb-grid-drift-slow {
  0%   { background-position: 0    0; }
  100% { background-position: 260px 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .vb-featured-card::before,
  .page-hero::after {
    animation: none;
  }
}

/* =============================================================================
   FOOTER STATUS INDICATOR — added 2.7.0 (#47)
   Decorative "All systems operational" indicator. Pure cosmetic — adds
   personality without claiming uptime numbers we can't actually verify.
============================================================================= */
.vb-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .02em;
}
.vb-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb950;
  flex-shrink: 0;
  position: relative;
}
.vb-status-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(63, 185, 80, .35);
  animation: vb-status-pulse 2.4s ease-in-out infinite;
}
@keyframes vb-status-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0; }
  50%      { transform: scale(1.6); opacity: 1; }
}
.vb-status-text { color: var(--text3); }

@media (prefers-reduced-motion: reduce) {
  .vb-status-dot::before { animation: none; opacity: .35; transform: scale(1); }
}

/* Small screens: keep the status, drop the copy-links to its own line */
@media (max-width: 600px) {
  .footer-bottom { flex-wrap: wrap; gap: 8px; }
}

/* =============================================================================
   LINK HOVER PREVIEW — added 2.7.0 (#6)
   Floating card that appears when user hovers internal post links in article
   content. Mobile is excluded via @media (hover:hover) check in JS.
============================================================================= */
.vb-hover-preview {
  position: absolute;
  z-index: 1000;
  width: 320px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.vb-hover-preview.vb-hover-preview-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.vb-hover-thumb {
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg3);
}
.vb-hover-body {
  padding: 12px 14px;
}
.vb-hover-title {
  font-family: var(--fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-hover-excerpt {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-hover-date {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text4);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .vb-hover-preview {
    transition: opacity .1s ease;
    transform: none;
  }
}

/* =============================================================================
   COLLAPSIBLE CODE BLOCKS — added 2.7.0 (#7)
   Code blocks longer than 40 lines auto-collapse with a "Show all" toggle.
   Author opts out per-block via class="no-collapse" on the <pre>.
============================================================================= */
.vb-collapsible-wrap {
  position: relative;
  margin: 18px 0;
}
.vb-collapsible-wrap pre {
  margin: 0;       /* outer wrap takes the spacing */
}
pre.vb-collapsible.vb-collapsed {
  /* Show approximately COLLAPSED_HEIGHT_LINES lines.
     Each line ~22px (line-height 1.55 × 13px font + a bit). */
  max-height: calc(22px * var(--vb-collapsed-lines, 24) + 36px);
  overflow: hidden;
  position: relative;
}
pre.vb-collapsible.vb-collapsed::after {
  /* Fade-out gradient at the bottom of the collapsed block */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 90%);
  pointer-events: none;
}
pre.vb-collapsible.vb-expanded {
  max-height: none;
  overflow-x: auto;
}
.vb-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: -1px;  /* sit flush against the pre */
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vb-collapse-toggle:hover {
  background: var(--bg3);
  color: var(--text1);
}
.vb-collapse-toggle:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 2px;
}
/* When expanded, flip the chevron */
pre.vb-expanded + .vb-collapse-toggle svg {
  transform: rotate(180deg);
  transition: transform .2s ease;
}
.vb-collapse-toggle svg {
  transition: transform .2s ease;
}

/* Print: always show full content */
@media print {
  pre.vb-collapsible.vb-collapsed {
    max-height: none;
    overflow: visible;
  }
  pre.vb-collapsible.vb-collapsed::after { display: none; }
  .vb-collapse-toggle { display: none; }
}

/* =============================================================================
   CLI / OUTPUT TOGGLE — added 2.7.0 (#9)
   <pre data-cli> blocks: lines starting with $ or # are commands, others are output.
   A "Hide output" button toggles a class that hides output lines via CSS.
============================================================================= */
pre.vb-cli .vb-cli-output {
  color: var(--text3);
  opacity: .85;
}
pre.vb-cli .vb-cli-cmd {
  color: var(--text1);
}
/* Subtle prompt accent on commands — green dollar sign */
pre.vb-cli .vb-cli-cmd::first-letter {
  color: #3fb950;
}

/* Hide output mode: collapse output lines */
pre.vb-cli.vb-cli-cmds-only .vb-cli-output {
  display: none;
}
/* When hiding output, also tighten the line numbers (skip blank gaps) */
pre.vb-cli.vb-cli-cmds-only.vb-numbered .vb-code-line.vb-cli-output::before {
  display: none;
}

/* Toggle button — sits in the upper right corner like the copy button */
.vb-cli-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, color .12s, border-color .12s;
  /* Sit lower than the copy button if both exist */
  margin-right: 70px;
}
.vb-cli-toggle:hover {
  background: var(--bg3);
  color: var(--text1);
  border-color: var(--border2);
}
.vb-cli-toggle[aria-pressed="true"] {
  background: rgba(63, 185, 80, .12);
  border-color: #3fb950;
  color: #3fb950;
}
.vb-cli-toggle:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 2px;
}
/* When the copy-code button is also present, push the CLI toggle further left */
.vb-pre-wrap .vb-cli-toggle {
  /* The copy button is ~62px wide; sit 8px to its left */
  right: 78px;
  margin-right: 0;
}

/* Print: always show all lines */
@media print {
  pre.vb-cli.vb-cli-cmds-only .vb-cli-output {
    display: block;
  }
  .vb-cli-toggle { display: none; }
}

/* =============================================================================
   KB / DOCS LINK HELPER — added 2.8.0 (#10)
   Authors write [KB:12345] or [VMW:12345] inline; theme expands to a styled
   link with a colored badge ("KB" or "VMW") and the article ID + title.
============================================================================= */
.vb-kb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px 1px 1px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--fd);
  font-size: .92em;
  text-decoration: none;
  color: var(--text1);
  transition: border-color .15s, background .15s, transform .15s;
  vertical-align: baseline;
  /* Tighter line-height than surrounding text so it fits inline */
  line-height: 1.5;
}
.vb-kb-link:hover {
  border-color: var(--ac3);
  background: rgba(31,111,235,.08);
  transform: translateY(-1px);
}
.vb-kb-link:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 2px;
}
.vb-kb-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0d2061 0%, #1d4ed8 60%, #2563eb 100%);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px 0 0 3px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* VMware variant uses the legacy VMware blue */
.vb-kb-link-vmw .vb-kb-badge {
  background: linear-gradient(135deg, #1d4ed8 0%, #2178cf 100%);
}
.vb-kb-id {
  font-family: var(--fm);
  font-size: .9em;
  font-weight: 600;
  color: var(--ac-text);
  letter-spacing: -.01em;
}
.vb-kb-title {
  color: var(--text2);
  font-size: .95em;
}
.vb-kb-link svg {
  color: var(--text3);
  flex-shrink: 0;
  transition: color .15s;
}
.vb-kb-link:hover svg { color: var(--ac-text); }

/* In small/dense contexts, drop the title to save room */
@media (max-width: 480px) {
  .vb-kb-link .vb-kb-title { display: none; }
}

/* Print: just show the URL inline */
@media print {
  .vb-kb-link::after {
    content: " (" attr(href) ")";
    font-family: monospace;
    font-size: .85em;
    color: #555;
  }
}

/* =============================================================================
   ACRONYM TOOLTIPS (<abbr>) — added 2.8.0 (#9)
   First occurrence of each known acronym in a post body gets wrapped with
   <abbr title="..."> by the vb_auto_acronym_wrap filter. Browser shows the
   native title tooltip on hover; we add a subtle visual indicator (dotted
   underline) so readers know they can hover.
============================================================================= */
.entry-content abbr.vb-abbr,
.entry-content abbr[title],
.post-content abbr.vb-abbr,
.post-content abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--text4);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  cursor: help;
  border: none;
  /* Subtle hint color — shifts to accent on hover */
  color: inherit;
  transition: text-decoration-color .15s, color .15s;
}
.entry-content abbr.vb-abbr:hover,
.entry-content abbr[title]:hover,
.post-content abbr.vb-abbr:hover,
.post-content abbr[title]:hover {
  text-decoration-color: var(--ac-text);
  color: var(--text1);
}

/* Print: spell out the abbreviation in parentheses */
@media print {
  .entry-content abbr.vb-abbr::after,
  .entry-content abbr[title]::after {
    content: " (" attr(title) ")";
    font-size: .85em;
    color: #555;
    text-decoration: none;
  }
}


/* =============================================================================
   PHOTO GALLERIES — rebuilt 2.8.3
   The theme dequeues wp-block-library to keep payloads small, but that strips
   WP Gallery block styling. This section provides theme-native styling for:
   - <ul class="blocks-gallery-grid wp-block-gallery"> with <li class="blocks-gallery-item">
     (legacy WP gallery format — older posts and imports)
   - <figure class="wp-block-gallery"> with <figure class="wp-block-image"> children
     (modern Gutenberg Gallery block)
   - Consecutive standalone <figure class="wp-block-image"> wrapped in .vb-photo-strip
     by post-enhance.js

   Uses !important sparingly to defeat WP's inline width/flex styles on legacy
   markup. Same visual result regardless of format: clean grid with larger
   thumbnails (~260px+), consistent spacing, hover lift, lightbox-ready.
============================================================================= */

/* ── Grid container (legacy <ul> AND modern <figure> wrappers) ──────────── */
.entry-content .wp-block-gallery,
.entry-content ul.blocks-gallery-grid,
.entry-content figure.wp-block-gallery,
.post-content  .wp-block-gallery,
.post-content  ul.blocks-gallery-grid,
.post-content  figure.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px !important;
  margin: 28px 0 !important;
  list-style: none !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100%;
}
/* WP renders explicit column count as `columns-N` class — respect it */
.entry-content .wp-block-gallery.columns-2,
.entry-content ul.blocks-gallery-grid.columns-2,
.post-content  .wp-block-gallery.columns-2,
.post-content  ul.blocks-gallery-grid.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.entry-content .wp-block-gallery.columns-3,
.entry-content ul.blocks-gallery-grid.columns-3,
.post-content  .wp-block-gallery.columns-3,
.post-content  ul.blocks-gallery-grid.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.entry-content .wp-block-gallery.columns-4,
.entry-content ul.blocks-gallery-grid.columns-4,
.post-content  .wp-block-gallery.columns-4,
.post-content  ul.blocks-gallery-grid.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.entry-content .wp-block-gallery.columns-5,
.entry-content ul.blocks-gallery-grid.columns-5,
.post-content  .wp-block-gallery.columns-5,
.post-content  ul.blocks-gallery-grid.columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
.entry-content .wp-block-gallery.columns-6,
.entry-content ul.blocks-gallery-grid.columns-6,
.post-content  .wp-block-gallery.columns-6,
.post-content  ul.blocks-gallery-grid.columns-6 { grid-template-columns: repeat(6, 1fr) !important; }

/* ── Individual gallery item (both <li> and <figure> versions) ──────────── */
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery > figure,
.entry-content .wp-block-gallery > li,
.entry-content ul.blocks-gallery-grid .blocks-gallery-item,
.entry-content ul.blocks-gallery-grid > li,
.post-content  .wp-block-gallery .wp-block-image,
.post-content  .wp-block-gallery > figure,
.post-content  .wp-block-gallery > li,
.post-content  ul.blocks-gallery-grid .blocks-gallery-item,
.post-content  ul.blocks-gallery-grid > li {
  width: auto !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: zoom-in;
  aspect-ratio: 4/3;
  display: block;
  list-style: none;
}

.entry-content .wp-block-gallery .wp-block-image:hover,
.entry-content .wp-block-gallery > figure:hover,
.entry-content .wp-block-gallery > li:hover,
.entry-content ul.blocks-gallery-grid .blocks-gallery-item:hover,
.entry-content ul.blocks-gallery-grid > li:hover,
.post-content  .wp-block-gallery .wp-block-image:hover,
.post-content  .wp-block-gallery > figure:hover,
.post-content  .wp-block-gallery > li:hover,
.post-content  ul.blocks-gallery-grid .blocks-gallery-item:hover,
.post-content  ul.blocks-gallery-grid > li:hover {
  transform: translateY(-3px);
  border-color: var(--ac3);
  box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 0 1px var(--ac3);
  z-index: 2;
}

/* Inner <figure> inside legacy <li> wrappers */
.entry-content ul.blocks-gallery-grid > li > figure,
.post-content  ul.blocks-gallery-grid > li > figure {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Images fill the item completely */
.entry-content .wp-block-gallery img,
.entry-content ul.blocks-gallery-grid img,
.post-content  .wp-block-gallery img,
.post-content  ul.blocks-gallery-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* Figcaption: hidden by default, fades in on hover with gradient backdrop */
.entry-content .wp-block-gallery figcaption,
.entry-content ul.blocks-gallery-grid figcaption,
.entry-content .blocks-gallery-item__caption,
.post-content  .wp-block-gallery figcaption,
.post-content  ul.blocks-gallery-grid figcaption,
.post-content  .blocks-gallery-item__caption {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto !important;
  inset: auto 0 0 0 !important;
  background: linear-gradient(to top, rgba(13,17,23,.92) 0%, rgba(13,17,23,0) 100%) !important;
  color: rgba(255,255,255,.95) !important;
  font-family: var(--fd) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 28px 12px 10px !important;
  opacity: 0;
  transition: opacity .2s ease;
  text-align: left;
  margin: 0 !important;
  height: auto !important;
}
.entry-content .wp-block-gallery .wp-block-image:hover figcaption,
.entry-content .wp-block-gallery > figure:hover figcaption,
.entry-content .wp-block-gallery > li:hover figcaption,
.entry-content ul.blocks-gallery-grid > li:hover figcaption,
.entry-content ul.blocks-gallery-grid .blocks-gallery-item:hover .blocks-gallery-item__caption,
.post-content  .wp-block-gallery .wp-block-image:hover figcaption,
.post-content  .wp-block-gallery > figure:hover figcaption,
.post-content  .wp-block-gallery > li:hover figcaption,
.post-content  ul.blocks-gallery-grid > li:hover figcaption,
.post-content  ul.blocks-gallery-grid .blocks-gallery-item:hover .blocks-gallery-item__caption {
  opacity: 1;
}

/* ── Auto-grouped consecutive standalone images (.vb-photo-strip) ───────── */
.entry-content .vb-photo-strip,
.post-content  .vb-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.entry-content .vb-photo-strip .wp-block-image,
.entry-content .vb-photo-strip > figure,
.post-content  .vb-photo-strip .wp-block-image,
.post-content  .vb-photo-strip > figure {
  margin: 0 !important;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  aspect-ratio: 4/3;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  width: 100% !important;
  max-width: 100% !important;
}
.entry-content .vb-photo-strip .wp-block-image:hover,
.entry-content .vb-photo-strip > figure:hover,
.post-content  .vb-photo-strip .wp-block-image:hover,
.post-content  .vb-photo-strip > figure:hover {
  transform: translateY(-3px);
  border-color: var(--ac3);
  box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 0 1px var(--ac3);
  z-index: 2;
}
.entry-content .vb-photo-strip img,
.post-content  .vb-photo-strip img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* ── Responsive breakpoints ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .entry-content .wp-block-gallery,
  .entry-content ul.blocks-gallery-grid,
  .entry-content .vb-photo-strip,
  .post-content  .wp-block-gallery,
  .post-content  ul.blocks-gallery-grid,
  .post-content  .vb-photo-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 600px) {
  .entry-content .wp-block-gallery,
  .entry-content ul.blocks-gallery-grid,
  .entry-content .vb-photo-strip,
  .post-content  .wp-block-gallery,
  .post-content  ul.blocks-gallery-grid,
  .post-content  .vb-photo-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .entry-content .wp-block-gallery,
  .entry-content ul.blocks-gallery-grid,
  .entry-content .vb-photo-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4mm;
  }
  .entry-content .wp-block-gallery figcaption,
  .entry-content ul.blocks-gallery-grid figcaption {
    position: static !important;
    opacity: 1;
    color: #555 !important;
    background: none !important;
    padding: 4pt 0 0 !important;
  }
}

/* =============================================================================
   GALLERY-HEAVY PAGE LAYOUT — added 2.8.3
   When a page has 4+ galleries or a single gallery with 8+ images, the page
   content benefits from breaking out of the prose-width constraint. The
   .vb-gallery-page body class (added by post-enhance.js when detected) widens
   the .page-layout container and hides the TOC sidebar.
============================================================================= */
body.vb-gallery-page .page-layout {
  max-width: 1400px;
}
body.vb-gallery-page .page-layout.has-toc {
  /* On gallery pages, the TOC is less useful; let content take the full width */
  grid-template-columns: minmax(0, 1fr);
}
body.vb-gallery-page .page-toc { display: none !important; }
body.vb-gallery-page .entry-content {
  /* Override prose-narrow rule from .page-main .entry-content */
  font-size: 16px;
}
body.vb-gallery-page .entry-content > p {
  /* Keep prose paragraphs at readable width even on the wide gallery page */
  max-width: 780px;
}
/* But let galleries break out and use the full width */
body.vb-gallery-page .entry-content .wp-block-gallery,
body.vb-gallery-page .entry-content ul.blocks-gallery-grid,
body.vb-gallery-page .entry-content .vb-photo-strip {
  max-width: none;
  width: 100% !important;
}

/* =============================================================================
   READER ENGAGEMENT — added 2.9.0 (Set A: #1, #3, #4, #30, #33)
============================================================================= */

/* ── Resume-reading banner (#1) ─────────────────────────────────────────── */
.vb-resume-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  z-index: 9000;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--bg2);
  border: 1px solid var(--ac3);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  transition: transform .25s cubic-bezier(.25, .8, .25, 1);
}
.vb-resume-banner.vb-resume-visible {
  transform: translateX(-50%) translateY(0);
}
.vb-resume-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.vb-resume-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 13px;
  color: var(--text1);
}
.vb-resume-text svg { color: var(--ac-text); flex-shrink: 0; }
.vb-resume-text strong { color: var(--ac-text); font-weight: 600; }
.vb-resume-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vb-resume-btn {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vb-resume-btn:hover { background: var(--bg3); border-color: var(--ac3); }
.vb-resume-btn.vb-resume-go {
  background: var(--ac3);
  border-color: var(--ac3);
  color: #fff;
}
.vb-resume-btn.vb-resume-go:hover { background: #2f7ef2; }
.vb-resume-btn.vb-resume-dismiss {
  width: 28px;
  padding: 6px 0;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 600px) {
  .vb-resume-banner { bottom: 12px; }
  .vb-resume-inner { padding: 10px 12px; gap: 8px; }
  .vb-resume-btn { padding: 5px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-resume-banner { transition: opacity .15s; transform: translateX(-50%); opacity: 0; }
  .vb-resume-banner.vb-resume-visible { opacity: 1; }
}

/* ── "Up next" floating card (#4) ──────────────────────────────────────── */
.vb-upnext-card {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 8500;
  width: 280px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s, transform .25s, border-color .15s, box-shadow .15s;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.vb-upnext-card.vb-upnext-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vb-upnext-card:hover {
  border-color: var(--ac3);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
.vb-upnext-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.vb-upnext-eyebrow {
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  color: var(--ac-text);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.vb-upnext-close {
  background: transparent;
  border: 0;
  color: var(--text4);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.vb-upnext-close:hover { color: var(--text1); background: var(--bg3); }
.vb-upnext-title {
  font-family: var(--fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-upnext-arrow {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--ac-text);
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .vb-upnext-card { right: 12px; bottom: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-upnext-card { transition: opacity .15s; transform: none; }
}

/* ── Share row + Copy link button (#3) ─────────────────────────────────── */
.vb-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.vb-share-label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  color: var(--text4);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vb-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 500;
  color: var(--text1);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.vb-copy-link:hover { background: var(--bg3); border-color: var(--ac3); color: var(--ac-text); }
.vb-copy-link:focus-visible { outline: 2px solid var(--ac3); outline-offset: 2px; }
.vb-copy-link svg { color: var(--text3); transition: color .15s; }
.vb-copy-link:hover svg { color: var(--ac-text); }

/* ── Toast notification (used by copy + comment anchor) ─────────────────── */
.vb-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .15s, transform .2s;
}
.vb-toast.vb-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vb-toast.vb-toast-error { border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .vb-toast { transition: opacity .15s; transform: translateX(-50%); }
}

/* ── "Found this helpful?" rating widget (#30) ─────────────────────────── */
.vb-rating {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.vb-rating-prompt {
  font-family: var(--fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text1);
  flex: 1;
  min-width: 200px;
}
.vb-rating-buttons {
  display: flex;
  gap: 8px;
}
.vb-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.vb-rating-btn:hover {
  background: var(--bg3);
  border-color: var(--ac3);
  color: var(--text1);
  transform: translateY(-1px);
}
.vb-rating-btn:focus-visible { outline: 2px solid var(--ac3); outline-offset: 2px; }
.vb-rating-icon { font-size: 14px; line-height: 1; }
.vb-rating-thanks {
  font-family: var(--fd);
  font-size: 13.5px;
  color: #3fb950;
  font-weight: 500;
}

/* ── Comment anchor copy-link (#33) ─────────────────────────────────────── */
.vb-comment-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  margin-left: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--text4);
  cursor: pointer;
  vertical-align: baseline;
  transition: color .15s, background .15s;
  opacity: 0;
}
li.comment:hover .vb-comment-anchor,
.vb-comment-anchor:focus-visible {
  opacity: 1;
}
.vb-comment-anchor:hover { color: var(--ac-text); background: var(--bg2); }
.vb-comment-anchor:focus-visible { outline: 2px solid var(--ac3); outline-offset: 2px; }

/* Anchor target highlight: subtle pulse when navigating to #comment-N */
li.comment:target {
  animation: vb-comment-flash 1.8s ease-out;
}
@keyframes vb-comment-flash {
  0%   { background: rgba(31, 111, 235, .15); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  li.comment:target { animation: none; background: rgba(31, 111, 235, .08); }
}

/* =============================================================================
   TECHNICAL CONTENT POLISH — added 2.9.0 (Set C: #5, #6, #8, #9, #36)
============================================================================= */

/* ── Tabs (#5) ──────────────────────────────────────────────────────────── */
.vb-tabs {
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  overflow: hidden;
}
.vb-tabs-list {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: thin;
}
.vb-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.vb-tab:hover { color: var(--text1); background: var(--bg2); }
.vb-tab.vb-tab-active {
  color: var(--ac-text);
  border-bottom-color: var(--ac3);
  background: var(--bg2);
}
.vb-tab:focus-visible { outline: 2px solid var(--ac3); outline-offset: -2px; }
.vb-tab-panel {
  padding: 16px;
}
.vb-tab-panel[hidden] { display: none; }
.vb-tab-panel > :first-child { margin-top: 0; }
.vb-tab-panel > :last-child { margin-bottom: 0; }
/* Code blocks inside tabs sit flush with the tab body */
.vb-tab-panel pre { margin-left: -16px; margin-right: -16px; border-radius: 0; }

/* ── ASCII diagram (#6) ─────────────────────────────────────────────────── */
pre.vb-ascii {
  font-family: 'Cascadia Mono', 'JetBrains Mono', 'DM Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--text1);
  overflow-x: auto;
  text-align: left;
}
/* Bigger than normal code blocks because diagrams need readable spacing */
pre.vb-ascii::before { display: none !important; }
pre.vb-ascii code { font-family: inherit; }

/* ── Lab requirements callout (#8) ──────────────────────────────────────── */
.vb-callout-lab {
  background: rgba(31, 111, 235, .05);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ac3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 20px 0;
}
.vb-callout-lab .vb-callout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.vb-callout-lab .vb-callout-body { color: var(--text2); font-size: 14.5px; line-height: 1.6; }
.vb-callout-lab .vb-lab-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-callout-lab .vb-lab-checklist li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 14px;
}
.vb-callout-lab .vb-lab-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ac3);
  border-radius: 3px;
  background: var(--bg);
}

/* ── Caveat callout (#9) ────────────────────────────────────────────────── */
.vb-callout-caveat {
  background: rgba(240, 136, 62, .06);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 20px 0;
}
.vb-callout-caveat .vb-callout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber-t);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.vb-callout-caveat .vb-callout-body { color: var(--text2); font-size: 14.5px; line-height: 1.6; }
.vb-callout-caveat .vb-callout-body p { margin: 0; }

/* ── Print as runbook button (#36) ──────────────────────────────────────── */
.vb-print-runbook-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 500;
  color: var(--text1);
  cursor: pointer;
  margin: 0 0 16px;
  transition: background .15s, border-color .15s, color .15s;
}
.vb-print-runbook-btn:hover { background: var(--bg3); border-color: var(--ac3); color: var(--ac-text); }
.vb-print-runbook-btn:focus-visible { outline: 2px solid var(--ac3); outline-offset: 2px; }
.vb-print-runbook-btn svg { color: var(--text3); transition: color .15s; }
.vb-print-runbook-btn:hover svg { color: var(--ac-text); }

/* Print-runbook stylesheet: when html.vb-print-runbook is set + @media print,
   inject checkboxes next to numbered list items and tighten layout for paper.
   This is in addition to the existing assets/print.css. */
@media print {
  html.vb-print-runbook .entry-content ol > li {
    position: relative;
    padding-left: 28px !important;
    list-style: none !important;
    margin-bottom: 8px !important;
    page-break-inside: avoid;
  }
  html.vb-print-runbook .entry-content ol > li::before {
    content: "" !important;
    position: absolute;
    left: 4px;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 1.5px solid #333;
    border-radius: 2px;
    background: #fff;
  }
  /* Step number in the corner of the checkbox */
  html.vb-print-runbook .entry-content ol {
    counter-reset: vb-runbook-step;
  }
  html.vb-print-runbook .entry-content ol > li {
    counter-increment: vb-runbook-step;
  }
  html.vb-print-runbook .entry-content ol > li::after {
    content: counter(vb-runbook-step);
    position: absolute;
    left: -22px;
    top: 1px;
    font-family: Menlo, monospace;
    font-size: 10pt;
    font-weight: 700;
    color: #777;
    width: 18px;
    text-align: right;
  }
  /* Hide page chrome that isn't needed in a runbook */
  html.vb-print-runbook .post-rail,
  html.vb-print-runbook .post-toc,
  html.vb-print-runbook .vb-share-row,
  html.vb-print-runbook .vb-rating,
  html.vb-print-runbook .vb-print-runbook-btn,
  html.vb-print-runbook .post-author-card,
  html.vb-print-runbook .related-posts,
  html.vb-print-runbook .post-tags,
  html.vb-print-runbook .comments-area {
    display: none !important;
  }
  /* "Runbook" header indicator at the top of every printed page */
  html.vb-print-runbook body::before {
    content: "RUNBOOK — " attr(data-runbook-title);
    display: block;
    font-family: Menlo, monospace;
    font-size: 9pt;
    color: #666;
    border-bottom: 1px solid #999;
    padding-bottom: 4pt;
    margin-bottom: 12pt;
    letter-spacing: .1em;
  }
}

/* =============================================================================
   DISCOVERY & HISTORY — added 2.9.0 (Set D: #18, #19, #20, #22)
============================================================================= */

/* ── "On this day" widget (#18) ─────────────────────────────────────────── */
.vb-on-this-day {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ac3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 24px 0;
}
.vb-otd-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.vb-otd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-otd-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.vb-otd-item:last-child { border-bottom: none; }
.vb-otd-item a {
  color: var(--text1);
  text-decoration: none;
  flex: 1;
  font-weight: 500;
}
.vb-otd-item a:hover { color: var(--ac-text); }
.vb-otd-year {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text4);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Series landing pages (#20) ─────────────────────────────────────────── */
.vb-series-page-hero {
  padding: 32px 24px 28px;
}
.vb-series-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .15em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.vb-series-title {
  font-family: var(--fd);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 12px;
  max-width: var(--wide-w);
  margin-left: auto;
  margin-right: auto;
}
.vb-series-description {
  font-size: 15px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 12px;
}
.vb-series-meta {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: var(--wide-w);
  margin: 0 auto;
}
.vb-series-main { max-width: 920px; margin: 32px auto 60px; padding: 0 24px; }
.vb-series-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vb-series;
}
.vb-series-part {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  margin-bottom: 16px;
  position: relative;
}
.vb-series-part::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 50px;
  bottom: -16px;
  width: 2px;
  background: var(--border);
}
.vb-series-part:last-child::before { display: none; }
.vb-series-part-num {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--ac-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 12px;
  text-align: right;
}
.vb-series-part-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color .15s, transform .15s;
  position: relative;
}
.vb-series-part-card::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 22px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ac3);
  border-radius: 50%;
  background: var(--bg);
  z-index: 1;
}
.vb-series-part-card:hover {
  border-color: var(--ac3);
}
.vb-series-part-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.vb-series-part-title a {
  color: var(--text1);
  text-decoration: none;
}
.vb-series-part-title a:hover { color: var(--ac-text); }
.vb-series-part-meta {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text4);
  margin-bottom: 8px;
}
.vb-series-part-meta time { color: var(--text3); }
.vb-series-part-dot { margin: 0 4px; }
.vb-series-part-excerpt {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 600px) {
  .vb-series-part { grid-template-columns: 50px 1fr; gap: 12px; }
  .vb-series-part::before { left: 24px; }
  .vb-series-part-num { padding-top: 14px; font-size: 9px; }
  .vb-series-part-card::before { display: none; }
}

/* ── Weighted tag cloud (#22) ───────────────────────────────────────────── */
.vb-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 14px 0;
  line-height: 1.7;
}
.vb-tag-cloud-item {
  display: inline-block;
  color: var(--text2);
  text-decoration: none;
  font-family: var(--fd);
  font-weight: 500;
  transition: color .15s, transform .12s;
  padding: 2px 4px;
}
.vb-tag-cloud-item:hover {
  color: var(--ac-text);
  transform: translateY(-1px);
}
.vb-tag-cloud-item:focus-visible {
  outline: 2px solid var(--ac3);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =============================================================================
   PRINT — defensively hide all overlay/floating UI from 2.9.0
   This is belt-and-suspenders alongside assets/print.css. If the print
   stylesheet hasn't loaded for any reason, this still hides the floating UI
   so they don't overlap the printed content.
============================================================================= */
@media print {
  .vb-resume-banner,
  .vb-upnext-card,
  .vb-toast,
  .vb-hover-preview,
  .vb-share-row,
  .vb-rating,
  .vb-print-runbook-btn,
  .vb-status-indicator,
  .vb-reading-progress,
  .vb-back-to-top,
  .vb-lightbox,
  .nav-search-panel,
  .reading-progress,
  .back-to-top,
  .comments-area,
  .vb-related-tools,
  .post-rail,
  .post-toc,
  .post-tags,
  .post-author-card,
  .related-posts,
  .vb-prev-next,
  .vb-comments-top,
  .vb-featured-hero {
    display: none !important;
  }
}

/* =============================================================================
   LAZY-LOAD SIDEBAR WIDGETS — added 2.10.0 (#17)
   Widgets after the first are hidden until they're within 600px of viewport.
   Reserves min-height so the page doesn't jump when content fades in.
============================================================================= */
.vb-lazy-widget {
  opacity: 0;
  min-height: 80px;
  transition: opacity .25s ease;
}
.vb-lazy-widget.vb-lazy-widget-loaded {
  opacity: 1;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vb-lazy-widget { transition: none; }
}
/* If JS is disabled, show immediately — never leave content hidden */
.no-js .vb-lazy-widget { opacity: 1; min-height: 0; }

/* =============================================================================
   VCF VERSION COMPATIBILITY MATRIX — added 2.10.0 (#24)
   Renders a sortable matrix of all posts with _vb_tested_on metadata.
============================================================================= */
.vb-vcf-matrix {
  margin: 32px 0;
}
.vb-matrix-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.vb-matrix-title {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 700;
  color: var(--text1);
  margin: 0;
}
.vb-matrix-meta {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .04em;
}
.vb-matrix-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-bottom: 16px;
}
.vb-matrix-filter-label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  color: var(--text4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 4px;
}
.vb-matrix-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text2);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.vb-matrix-version-pill:hover {
  background: var(--bg3);
  border-color: var(--ac3);
  color: var(--text1);
}
.vb-matrix-version-pill.active {
  background: rgba(31, 111, 235, .15);
  border-color: var(--ac3);
  color: var(--ac-text);
}
.vb-matrix-pill-count {
  background: var(--bg);
  color: var(--text4);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}
.vb-matrix-version-pill.active .vb-matrix-pill-count {
  background: var(--ac3);
  color: #fff;
}
.vb-matrix-clear {
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vb-matrix-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.vb-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vb-matrix-table th,
.vb-matrix-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.vb-matrix-table th {
  background: var(--bg2);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.vb-matrix-table tbody tr:hover {
  background: var(--bg2);
}
.vb-matrix-table tbody tr:last-child td { border-bottom: none; }
.vb-matrix-cell-title a {
  color: var(--text1);
  text-decoration: none;
  font-weight: 500;
}
.vb-matrix-cell-title a:hover {
  color: var(--ac-text);
}
.vb-matrix-cell-date {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text4);
  white-space: nowrap;
}
.vb-matrix-version {
  display: inline-block;
  font-family: var(--fm);
  font-size: 11px;
  background: var(--bg);
  color: var(--text1);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-weight: 600;
}
.vb-matrix-empty {
  color: var(--text4);
  font-family: var(--fm);
  font-size: 12px;
}

@media (max-width: 700px) {
  .vb-matrix-table { font-size: 12px; }
  .vb-matrix-table th, .vb-matrix-table td { padding: 8px 10px; }
}

/* =============================================================================
   CROSS-REFERENCE TOOL LINKS — added 2.10.0 (#25)
============================================================================= */
.vb-tool-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ac-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted var(--ac3);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.vb-tool-link:hover {
  color: #fff;
  border-bottom-color: var(--ac-text);
}
.vb-tool-link svg {
  color: currentColor;
  opacity: .85;
  flex-shrink: 0;
}
@media print {
  .vb-tool-link::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    color: #666;
    font-family: monospace;
    border-bottom: none;
  }
}

/* =============================================================================
   PHOTO TIMELINE — added 2.10.0 (#26)
   Year headers between groups of gallery photos sorted by upload date.
============================================================================= */
.vb-photo-timeline {
  margin: 32px 0;
}
.vb-photo-timeline-year {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 28px 0 14px;
  padding-bottom: 0;
}
.vb-photo-timeline-year:first-child {
  margin-top: 8px;
}
.vb-photo-timeline-year-label {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.02em;
  line-height: 1;
  flex-shrink: 0;
}
.vb-photo-timeline-year-count {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--text4);
  letter-spacing: .12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.vb-photo-timeline-year-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border) 0%, transparent 100%);
  position: relative;
  top: -2px;
}
.vb-photo-timeline-undated .vb-photo-timeline-year-label {
  font-size: 18px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Each year group inherits the original gallery's grid class, so it lays
   out the same as the parent gallery — just chunked by year. */
.vb-photo-timeline-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {
  .vb-photo-timeline-year-label { font-size: 22px; }
  .vb-photo-timeline-year { gap: 10px; margin: 20px 0 10px; }
}

@media print {
  .vb-photo-timeline-year {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  .vb-photo-timeline-year-label { color: #000 !important; }
  .vb-photo-timeline-year-line {
    background: linear-gradient(to right, #aaa 0%, transparent 100%);
  }
}

/* =============================================================================
   SERIES STRIP — added 2.12.0 (#4)
   Small compact strip rendered at the top of single-post-hero when a post
   belongs to a series-* tag. Shows the series name, "Part N of M", and
   prev/next-in-series navigation.
============================================================================= */
.vb-series-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 16px;
  padding: 8px 14px;
  max-width: 760px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vb-series-strip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .95);
  text-decoration: none;
  font-family: var(--fd);
  font-size: 12.5px;
  font-weight: 500;
  min-width: 0;
  flex: 1;
}
.vb-series-strip-pill:hover { color: #fff; }
.vb-series-strip-pill svg { color: rgba(255, 255, 255, .65); flex-shrink: 0; }
.vb-series-strip-name {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-series-strip-pos {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  flex-shrink: 0;
}
.vb-series-strip-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.vb-series-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.vb-series-strip-link:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.vb-series-strip-link.vb-series-strip-disabled {
  opacity: .35;
  pointer-events: none;
}
.vb-series-strip-link svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .vb-series-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vb-series-strip-pos { padding-left: 0; border-left: 0; }
  .vb-series-strip-nav { justify-content: space-between; }
  .vb-series-strip-link-label { display: none; }
}

/* =============================================================================
   STALE CONTENT NOTICE — added 2.12.0 (#10)
   Soft amber notice rendered at the top of post body content when a post is
   older than 18 months without recent updates.
============================================================================= */
.vb-stale-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 24px;
  background: rgba(240, 136, 62, .07);
  border: 1px solid rgba(240, 136, 62, .25);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.vb-stale-notice-icon {
  flex-shrink: 0;
  color: var(--amber);
  padding-top: 1px;
}
.vb-stale-notice-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
}
.vb-stale-notice-headline {
  display: block;
  font-family: var(--fd);
  font-weight: 600;
  color: var(--amber-t);
  margin-bottom: 2px;
}
.vb-stale-notice-msg { color: var(--text2); }

/* =============================================================================
   SEARCH RESULTS — added 2.12.0 (#15)
   Custom layout for search.php — vertical list with snippet highlighting,
   category badges, reading-time chips, and SQLite FTS5 indicator.
============================================================================= */
.search-meta {
  margin: 8px auto 0;
  max-width: var(--wide-w);
  text-align: center;
}
.search-engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(31, 111, 235, .15);
  border: 1px solid rgba(31, 111, 235, .35);
  border-radius: 20px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--ac-text);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.search-engine-badge svg { color: currentColor; }

.vb-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vb-search-result;
  max-width: 820px;
}
.vb-search-result {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  counter-increment: vb-search-result;
}
.vb-search-result:last-child { border-bottom: none; }
.vb-search-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text4);
  flex-wrap: wrap;
}
.vb-search-result-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ac-text);
  text-decoration: none;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s;
}
.vb-search-result-cat:hover {
  background: var(--bg3);
  border-color: var(--ac3);
}
.vb-search-result-date { color: var(--text3); }
.vb-search-result-read { color: var(--text4); }

.vb-search-result-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.vb-search-result-title a {
  color: var(--text1);
  text-decoration: none;
}
.vb-search-result-title a:hover { color: var(--ac-text); }

.vb-search-result-snippet {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2);
  margin: 6px 0 4px;
}
.vb-search-result-snippet mark {
  background: rgba(31, 111, 235, .25);
  color: var(--text1);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.vb-search-result-permalink {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text4);
  text-decoration: none;
  margin-top: 4px;
  word-break: break-all;
}
.vb-search-result-permalink:hover { color: var(--ac-text); }

.vb-search-pagination {
  display: flex;
  gap: 4px;
  margin: 32px 0 0;
  flex-wrap: wrap;
}
.vb-search-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text1);
  text-decoration: none;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.vb-search-page:hover {
  background: var(--bg3);
  border-color: var(--ac3);
  color: var(--ac-text);
}
.vb-search-page-current {
  background: var(--ac3);
  border-color: var(--ac3);
  color: #fff;
  pointer-events: none;
}

/* =============================================================================
   LAZY COMMENTS RENDERING — added 2.13.0 (#18)
   content-visibility: auto tells the browser it can skip rendering work for
   this subtree until it scrolls into view. contain-intrinsic-size reserves
   layout space so the page scroll doesn't jump when the browser eventually
   does render the comments.
   Supported in all evergreen browsers; gracefully ignored elsewhere.
============================================================================= */
.comments-area {
  content-visibility: auto;
  /* Reserve ~800px for typical 3-5 comment threads. Tweakable via the
     intrinsic-size property if your audience comments more/less. */
  contain-intrinsic-size: 0 800px;
}