/* ============================================================
   blog.jcardena.com — Editorial Heritage
   Reading-first. Brand parity with jcardena.com (Inter + Caveat,
   slate primary, gold accent, era color system).
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.skip-link {
    position: absolute; left: -9999px; top: auto;
    background: var(--color-primary); color: var(--text-inverse);
    padding: var(--space-2) var(--space-4); z-index: 1000; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 52px; top: 0; }

/* ============================================================
   APP SHELL — fixed 52px left nav + content (Apps Portal style)
   Window scrolls (long-form reading), so left-nav is fixed and
   the header is sticky — not an internal-scroll dashboard.
   ============================================================ */
.app-shell { min-height: 100vh; }

.left-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 52px;
    background: #f5f5f7;
    border-right: 1px solid #e5e5e7;
    display: flex; flex-direction: column; align-items: center;
    padding: 4px 0; z-index: 100;
}
.app-name-top {
    font-size: 8px; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.5px; text-align: center;
    margin-bottom: 8px; padding: 4px 2px 0; text-transform: uppercase;
}
.left-nav-items {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; width: 100%; padding: 0 4px;
}
.left-nav-item {
    width: 100%; padding: 7px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 8px; cursor: pointer; text-decoration: none;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.left-nav-item:hover { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
.left-nav-item.active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.left-nav-item svg { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; }
.nav-label { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; }

.menu-bottom {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding-bottom: 6px;
}
.app-switcher-btn {
    width: 32px; height: 32px; background: #fff; border: 1px solid #e5e5e7;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all var(--transition-fast);
}
.app-switcher-btn:hover { border-color: var(--accent-base); color: var(--accent-dark); box-shadow: 0 2px 8px rgba(201,162,39,0.15); }
.app-switcher-btn svg { width: 16px; height: 16px; }
.jc-logo {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--accent-dark); letter-spacing: -0.5px;
    background: var(--accent-bg, #fdf8eb); border-radius: 8px; text-decoration: none;
    transition: all var(--transition-fast);
}
.jc-logo:hover { background: var(--accent-base); color: #fff; transform: scale(1.05); }

/* ============================================================
   Column 2: persistent blog-titles navigator (fixed, scrolls independently)
   Layout: [52px rail] [240px titles] [body] [TOC]
   ============================================================ */
:root { --rail-w: 52px; --nav-w: 100px; }

.post-nav {
    position: fixed; top: 0; left: var(--rail-w); bottom: 0;
    width: var(--nav-w);
    background: var(--bg-card);
    border-right: 1px solid var(--border-light);
    display: flex; flex-direction: column;
    z-index: 80;
}
/* Drag-to-resize handle on the right edge of the titles column */
.post-nav-resizer {
    position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 81;
    background: transparent; transition: background var(--transition-fast);
}
.post-nav-resizer:hover, .post-nav-resizer:active { background: var(--accent-base); opacity: 0.4; }
.post-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 12px; border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.post-nav-all {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    text-decoration: none; letter-spacing: -0.01em;
}
.post-nav-all:hover, .post-nav-all.active { color: var(--accent-dark); }
.post-nav-count {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    background: var(--slate-100); border-radius: 10px; padding: 2px 8px;
}
.post-nav-list { list-style: none; margin: 0; padding: 6px 0 24px; overflow-y: auto; flex: 1; }
/* Sticky year separators between groups */
.post-nav-year {
    position: sticky; top: 0; z-index: 2;
    padding: 5px 8px 4px 14px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
    color: var(--accent-dark); background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    text-transform: none;
}
.post-nav-year span { opacity: 0.85; }

/* Narrow 100px column: small font, tight wrap, era dot on its own line */
.post-nav-item {
    display: block; position: relative;
    padding: 7px 8px 7px 14px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 10.5px; line-height: 1.3;
    border-left: 2px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.post-nav-item:hover { background: var(--slate-50); color: var(--text-primary); }
.post-nav-item.active {
    background: var(--accent-bg, #fdf8eb); color: var(--accent-dark);
    border-left-color: var(--era-color, var(--accent-base));
    font-weight: 600;
}
.post-nav-dot {
    position: absolute; left: 6px; top: 11px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--era-color, var(--accent-base)); opacity: 0.65;
}
.post-nav-item.active .post-nav-dot { opacity: 1; }
.post-nav-body { display: block; }
.post-nav-title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.post-nav-date {
    display: block; margin-top: 2px;
    font-size: 9px; font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.2px;
}
.post-nav-head { padding: 12px 8px 10px; gap: 4px; align-items: center; }
.post-nav-all { font-size: 11px; flex: 1; }
.post-nav-count { font-size: 10px; padding: 1px 6px; }
.post-nav-collapse {
    border: none; background: none; cursor: pointer; padding: 2px;
    color: var(--text-muted); display: flex; align-items: center; border-radius: 4px;
}
.post-nav-collapse:hover { color: var(--accent-dark); background: var(--slate-100); }
.post-nav-collapse svg { width: 15px; height: 15px; }

/* Collapsed: column hidden, content reclaims its space, floating tab shows */
html.nav-collapsed { --nav-w: 0px; }
html.nav-collapsed .post-nav { display: none; }
.post-nav-reopen {
    display: none;
    position: fixed; left: var(--rail-w); top: 14px; z-index: 95;
    align-items: center; gap: 4px;
    background: var(--accent-base); color: #fff; border: none; cursor: pointer;
    padding: 7px 10px 7px 8px; border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.post-nav-reopen svg { width: 14px; height: 14px; }
.post-nav-reopen:hover { background: var(--accent-dark); }
html.nav-collapsed .post-nav-reopen { display: flex; }

/* Search + era filter at top of the titles column */
.post-nav-tools { padding: 0 8px 8px; border-bottom: 1px solid var(--border-light); }
.post-nav-search input {
    width: 100%; box-sizing: border-box;
    padding: 6px 8px; font-size: 11px; font-family: inherit;
    border: 1px solid var(--border-light); border-radius: var(--radius-md);
    background: var(--bg-page); color: var(--text-primary); outline: none;
}
.post-nav-search input:focus { border-color: var(--accent-base); box-shadow: 0 0 0 2px rgba(201,162,39,0.12); }
.post-nav-filters { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.nav-chip {
    flex: 1 1 auto; min-width: 22px;
    padding: 3px 4px; font-size: 9.5px; font-weight: 700;
    border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text-muted);
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.2px;
    transition: all var(--transition-fast);
}
.nav-chip:hover { color: var(--text-primary); border-color: var(--era-color, var(--accent-base)); }
.nav-chip.active {
    color: #fff; background: var(--era-color, var(--accent-base));
    border-color: var(--era-color, var(--accent-base));
}
.post-nav-empty { padding: 16px 12px; font-size: 11px; color: var(--text-muted); text-align: center; }

/* Content sits to the right of the rail + titles nav */
.main-content { margin-left: calc(var(--rail-w) + var(--nav-w)); min-height: 100vh; display: flex; flex-direction: column; }

/* Body + right TOC wrapper */
.content-wrap { flex: 1; display: flex; }
.content-wrap .content { flex: 1; min-width: 0; }
.content-wrap.has-toc .toc-rail {
    width: 250px; flex-shrink: 0;
    margin: 16px 20px 28px 8px;
    padding: 14px 14px 14px;
    position: sticky; top: 16px; align-self: flex-start;
    max-height: calc(100vh - 36px); overflow-y: auto;
    background: #faf9f7;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.toc-rail-label {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--accent-dark); font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3); padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}
.toc-rail-label svg { width: 14px; height: 14px; stroke: var(--accent-base); stroke-width: 2; fill: none; flex-shrink: 0; }
.toc-rail ul { list-style: none; padding: 0; margin: 0; }
.toc-rail li { margin: 0; }
.toc-rail a {
    display: block; padding: 6px 0 6px var(--space-3); font-size: var(--text-sm);
    color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid transparent; line-height: 1.35;
    transition: all var(--transition-fast);
}
.toc-rail a:hover, .toc-rail a.is-active {
    color: var(--accent-dark); border-left-color: var(--accent-base);
    background: rgba(201,162,39,0.04);
}
.toc-rail li.toc-h3 a { padding-left: var(--space-5); font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================================
   HEADER (sticky) — breadcrumb + stats
   ============================================================ */
.header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; min-height: 60px;
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; z-index: 90;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-nav-link {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: var(--text-primary); text-decoration: none;
    transition: color var(--transition-fast);
}
.header-nav-link:hover { color: var(--accent-dark); }
.header-nav-link .gold { color: var(--accent-dark); }
.nav-icon { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.breadcrumb-sep { color: var(--text-muted); font-size: 18px; font-weight: 300; }
.header-current {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: #fff;
    background: var(--accent-base); padding: 6px 14px; border-radius: 8px;
    text-decoration: none;
}
.header-current .nav-icon { stroke: #fff; }
.header-current-link:hover { background: var(--accent-dark); }
.header-leaf {
    font-size: 14px; color: var(--text-secondary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;
}
.header-right { display: flex; align-items: center; gap: 20px; }
.header-stat { display: flex; align-items: baseline; gap: 6px; }
.header-stat .count { font-weight: 700; color: var(--text-primary); font-size: 18px; }
.header-stat .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.header-lang { display: flex; gap: 2px; padding-left: var(--space-3); border-left: 1px solid var(--border-light); }
.header-lang-link {
    font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none;
    padding: 4px 7px; border-radius: var(--radius-sm); transition: all var(--transition-fast);
}
.header-lang-link:hover { color: var(--accent-dark); background: var(--slate-100); }
.header-lang-link.active { color: var(--accent-dark); background: rgba(201,162,39,0.12); }

/* ============================================================
   CONTENT area
   ============================================================ */
.content { flex: 1; padding: 16px 32px 28px; background: var(--bg-page); }

/* ============================================================
   BLOG HOME — slim hero + filter tabs + post card grid
   ============================================================ */
.blog-home { max-width: 1320px; }
.home-hero { margin-bottom: var(--space-8); }
.home-hero .home-tagline {
    font-family: 'Caveat', cursive; font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--accent-dark); font-weight: 500; line-height: 1; margin-bottom: var(--space-2);
}
.home-hero .home-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: var(--font-weight-semibold);
    color: var(--text-primary); line-height: 1.15; letter-spacing: -0.02em;
    max-width: 820px; margin-bottom: var(--space-3);
}
.home-hero .home-lead { font-size: var(--text-md); color: var(--text-secondary); max-width: 720px; }
.home-hero .home-lead strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

/* Toolbar: search + sort (top of all-posts) */
.home-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.home-search {
    position: relative; flex: 1; min-width: 220px; max-width: 460px;
    display: flex; align-items: center;
}
.home-search svg { position: absolute; left: 12px; width: 16px; height: 16px; stroke: var(--text-muted); pointer-events: none; }
.home-search input {
    width: 100%; padding: 10px 32px 10px 36px;
    border: 1px solid var(--border-light); border-radius: var(--radius-full);
    background: var(--bg-card); color: var(--text-primary); font-size: 14px;
    font-family: inherit; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.home-search input:focus { border-color: var(--accent-base); box-shadow: 0 0 0 3px rgba(201,162,39,0.12); }
.home-search-clear {
    position: absolute; right: 10px; border: none; background: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--text-muted); padding: 2px 6px;
}
.home-search-clear:hover { color: var(--text-primary); }
.home-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.home-sort-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-right: 2px; }
.sort-btn {
    padding: 7px 14px; border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: var(--text-secondary); background: var(--bg-card);
    border: 1px solid var(--border-light); cursor: pointer;
    transition: all var(--transition-fast);
}
.sort-btn:hover { border-color: var(--accent-base); color: var(--accent-dark); }
.sort-btn.active { background: var(--accent-base); color: #fff; border-color: var(--accent-base); font-weight: 600; }

.category-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
.cat-tab-count { font-size: 10px; opacity: 0.7; margin-left: 2px; }
.home-result-count { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.cat-tab {
    padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
    color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-light);
    cursor: pointer; transition: all var(--transition-fast);
}
.cat-tab:hover { border-color: var(--accent-base); color: var(--accent-dark); }
.cat-tab.active { background: var(--accent-base); color: #fff; border-color: var(--accent-base); font-weight: 600; }

.post-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.post-card-portal {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 16px;
    padding: 24px; text-decoration: none; color: inherit;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    transition: all var(--transition-fast);
}
.post-card-portal.has-banner { padding: 0; }
.post-card-portal::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--card-accent, var(--accent-base)); opacity: 0; transition: opacity var(--transition-fast); z-index: 2;
}
.post-card-portal:hover { border-color: var(--accent-base); box-shadow: 0 8px 24px rgba(201,162,39,0.12); transform: translateY(-3px); }
.post-card-portal:hover::before { opacity: 1; }

/* Card banner (feature image) */
.post-card-banner { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--slate-100); }
.post-card-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.post-card-portal:hover .post-card-banner img { transform: scale(1.04); }
.post-card-banner-tag {
    position: absolute; top: 12px; left: 12px;
    font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: var(--radius-full);
}
.post-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

.post-card-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.post-card-portal.has-banner .post-card-top { margin-bottom: 10px; }
.post-card-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #fff;
}
.post-card-info { flex: 1; min-width: 0; }
.post-card-name { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; line-height: 1.25; }
.post-card-category { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.post-card-date { font-size: 12px; color: var(--accent-dark); font-weight: 600; margin-top: 2px; }
.post-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; flex: 1; }
.post-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border-light); }
.post-card-port { font-size: 12px; color: var(--text-muted); }
.post-card-readtime { font-size: 11px; font-weight: 600; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.4px; }

.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.empty-state svg { width: 56px; height: 56px; stroke: var(--text-muted); margin-bottom: 16px; }
.empty-state p { font-size: 15px; }

a { color: var(--color-primary); text-decoration: underline;
    text-decoration-color: var(--accent-base); text-decoration-thickness: 1.5px;
    text-underline-offset: 3px; transition: color var(--transition-fast); }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; height: auto; }

/* ============================================================
   Reading progress bar (top of viewport, gold)
   ============================================================ */
.reading-progress {
    position: fixed; top: 0; left: 52px; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--accent-base), var(--accent-light));
    z-index: 200; transition: width 0.1s linear;
    box-shadow: 0 1px 4px rgba(201, 162, 39, 0.4);
}

/* ============================================================
   Container widths — left-aligned (read left-to-right, not centered)
   reading column = 760, page max = 1180
   ============================================================ */
.container          { max-width: 1180px; margin: 0; padding: 0; }
.container-narrow   { max-width: 760px;  margin: 0; padding: 0; }

/* ============================================================
   Topbar (zone1) — sticky
   ============================================================ */
.zone1-topbar {
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid var(--border-light);
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-6);
    position: sticky; top: 0; z-index: 90;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-3); }
.topbar-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}
.topbar-back:hover { color: var(--color-primary); }
.topbar-divider { color: var(--text-muted); font-weight: 300; }
.topbar-brand {
    font-size: var(--text-md); font-weight: var(--font-weight-semibold);
    color: var(--text-primary); text-decoration: none;
    letter-spacing: -0.01em;
}
.topbar-nav { display: flex; align-items: center; gap: var(--space-2); }
.topbar-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-secondary); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--font-weight-medium);
    padding: 6px 10px; border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.topbar-link:hover, .topbar-link.active {
    color: var(--color-primary); background: var(--slate-100);
}
.lang-switcher {
    display: flex; gap: 2px; margin-left: var(--space-2);
    padding-left: var(--space-2); border-left: 1px solid var(--border-light);
}

/* ============================================================
   Main content
   ============================================================ */
.zone2-content { min-height: calc(100vh - 56px - 200px); }

/* ============================================================
   HOME — Editorial header
   ============================================================ */
.home-header {
    padding: var(--space-20) 0 var(--space-12);
    position: relative;
}
.home-header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(201,162,39,0.06), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(99,102,241,0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.home-header > * { position: relative; z-index: 1; }
.home-eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 2px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}
.home-eyebrow::before {
    content: ''; display: inline-block; width: 24px; height: 1px;
    background: var(--accent-base);
}
.home-tagline {
    font-family: 'Caveat', cursive;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--accent-dark);
    font-weight: 500;
    line-height: 1; margin-bottom: var(--space-6);
    letter-spacing: -0.005em;
}
.home-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary); line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 720px; margin-bottom: var(--space-5);
}
.home-title em {
    font-style: normal; color: var(--accent-dark);
}
.home-lead {
    font-size: var(--text-xl); color: var(--text-secondary);
    max-width: 640px; font-weight: var(--font-weight-normal);
}
.home-lead strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

/* Gold rule under hero */
.gold-rule {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-base) 0%, transparent 60%);
    margin: var(--space-12) 0;
    max-width: 120px;
}

/* ============================================================
   Section labels
   ============================================================ */
.section-label {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 2px;
    color: var(--text-muted); font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-6);
    display: flex; align-items: center; gap: var(--space-3);
}
.section-label::after {
    content: ''; flex: 1; height: 1px; background: var(--border-light);
}

/* ============================================================
   Featured card (hero-card)
   ============================================================ */
.home-featured { margin-bottom: var(--space-16); }
.featured-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    box-shadow: var(--shadow-md);
}
.featured-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.featured-card-image {
    aspect-ratio: 21 / 9; background: var(--slate-100); overflow: hidden;
}
.featured-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.featured-card-placeholder {
    width: 100%; height: 100%;
    background:
        linear-gradient(135deg, var(--era-color, var(--accent-base)) 0%, var(--slate-900) 100%);
    position: relative;
}
.featured-card-placeholder::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 60%);
}
.featured-card-body { padding: var(--space-8); position: relative; }
.featured-card-body::before {
    content: ''; position: absolute; top: 0; left: var(--space-8); right: var(--space-8);
    height: 3px; background: var(--era-color, var(--accent-base));
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.featured-card-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.featured-card-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
.featured-card-deck {
    font-size: var(--text-lg); color: var(--text-secondary);
    margin-bottom: var(--space-5);
}
.featured-card-meta {
    font-size: var(--text-sm); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-2);
}
.featured-card-meta strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

/* ============================================================
   Post grid (3 columns desktop, 1 mobile)
   ============================================================ */
.home-list { margin-bottom: var(--space-16); }
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
}

.post-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: transform var(--transition-fast);
}
.post-card-image {
    aspect-ratio: 4/3; background: var(--slate-100);
    border-radius: var(--radius-lg); overflow: hidden;
    margin-bottom: var(--space-4);
    position: relative;
}
.post-card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition-slow);
}
.post-card:hover .post-card-image img { transform: scale(1.04); }
.post-card-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--era-color, var(--slate-300)) 0%, var(--slate-100) 100%);
}
.post-card-era-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--era-color, var(--accent-base));
}
.post-card-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.post-card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25; letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}
.post-card:hover .post-card-title {
    color: var(--accent-dark);
}
.post-card-excerpt {
    font-size: var(--text-md); color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.post-card-meta {
    font-size: var(--text-sm); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-2);
    margin-top: auto;
}
.dot { color: var(--text-muted); }

/* ============================================================
   Era-colored tags
   ============================================================ */
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: lowercase; letter-spacing: 0.3px;
    transition: all var(--transition-fast);
    background: var(--slate-100); color: var(--text-secondary);
    border: 1px solid transparent;
}
.tag:hover { transform: translateY(-1px); }

.tag-ai, .tag-mlops, .tag-agentic-ai {
    background: rgba(201, 162, 39, 0.1); color: var(--accent-dark);
    border-color: rgba(201, 162, 39, 0.2);
}
.tag-data, .tag-sql, .tag-data-engineering {
    background: rgba(8, 145, 178, 0.1); color: #0e7490;
    border-color: rgba(8, 145, 178, 0.2);
}
.tag-software, .tag-architecture, .tag-kubernetes {
    background: rgba(16, 185, 129, 0.1); color: #047857;
    border-color: rgba(16, 185, 129, 0.2);
}
.tag-web, .tag-frontend, .tag-seo {
    background: rgba(99, 102, 241, 0.1); color: #4f46e5;
    border-color: rgba(99, 102, 241, 0.2);
}
.tag-count { font-size: 10px; opacity: 0.6; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ============================================================
   Browse by era (home bottom)
   ============================================================ */
.home-eras { margin-bottom: var(--space-16); }
.era-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.era-button {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-5) var(--space-4);
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none; color: var(--text-primary);
    transition: all var(--transition-fast);
    position: relative; overflow: hidden;
}
.era-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.era-button::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--era-color);
}
.era-button-label {
    font-size: var(--text-md); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.era-button-count {
    font-size: var(--text-sm); color: var(--text-muted);
}

/* ============================================================
   SINGLE POST — layout with sticky TOC
   ============================================================ */
.post { padding: 0 0 var(--space-16); }
.post-layout {
    /* TOC now lives in the layout's right rail; post body is a single readable column */
    max-width: 760px;
    margin: 0;
    padding: 0;
}
.post-toc {
    position: sticky; top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: var(--space-4);
}
.post-toc-label {
    font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: 2px; color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}
.post-toc ul { list-style: none; padding: 0; margin: 0; }
.post-toc li { margin: 0; }
.post-toc a {
    display: block;
    padding: 6px 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--space-3);
    transition: all var(--transition-fast);
    line-height: 1.35;
}
.post-toc a:hover, .post-toc a.is-active {
    color: var(--accent-dark);
    border-left-color: var(--accent-base);
    background: rgba(201,162,39,0.04);
}
.post-toc li.toc-h3 a { padding-left: var(--space-5); font-size: var(--text-xs); color: var(--text-muted); }

.post-main { max-width: 720px; }
.post-era-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--era-color, var(--accent-dark));
    margin-bottom: var(--space-4);
}
.post-era-badge::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--era-color, var(--accent-base));
}

.post-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.1; letter-spacing: -0.025em;
    margin-bottom: var(--space-4);
}
.post-deck {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-6);
    line-height: 1.45;
}

.post-byline {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-10);
}
.post-byline-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-base), var(--accent-dark));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-weight-semibold); font-size: var(--text-lg);
    flex-shrink: 0;
}
.post-byline-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.post-byline-info { flex: 1; min-width: 0; }
.post-byline-name {
    font-size: var(--text-md); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.post-byline-meta {
    font-size: var(--text-sm); color: var(--text-muted);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}

.post-feature {
    margin: 0 0 var(--space-10);
}
.post-feature img {
    width: 100%; max-height: 480px; object-fit: cover;
    border-radius: var(--radius-xl);
}
.post-feature figcaption {
    text-align: center;
    font-size: var(--text-sm); color: var(--text-muted);
    margin-top: var(--space-3);
    font-style: italic;
}
.post-video {
    margin: 0 0 var(--space-10);
}
.post-video video {
    width: 100%; max-height: 520px;
    border-radius: var(--radius-xl);
    background: #000; display: block;
}
.yt-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl); overflow: hidden; background: #000;
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 8-second hover-play motion still — companion to the narrated video */
.post-loop {
    position: relative; margin: 0 0 var(--space-10);
    border-radius: var(--radius-xl); overflow: hidden; background: #000;
    cursor: pointer; line-height: 0;
    box-shadow: 0 6px 24px rgba(15,23,42,0.16);
}
.post-loop video {
    width: 100%; max-height: 420px; object-fit: cover; display: block;
    aspect-ratio: 16 / 9;
}
.post-loop-hint {
    position: absolute; bottom: 12px; right: 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
    color: #fff; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px);
    padding: 5px 10px; border-radius: 999px;
    transition: opacity var(--transition-fast); pointer-events: none;
}
.post-loop:hover .post-loop-hint, .post-loop:focus-within .post-loop-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .post-loop video { /* stays paused; tap to play */ } }

/* Combined media viewer — stage (left) + thumbnail strip (right) in one bounded space.
   FLEX (not grid) with min-width:0 on the stage so the YouTube iframe can't push under the
   thumbs. The thumb rail matches the stage height and scrolls internally if it has many items. */
.post-media {
    display: flex; align-items: stretch; gap: 12px; margin: 0 0 var(--space-10);
}
.media-stage {
    flex: 1 1 0; min-width: 0;            /* min-width:0 = the key fix vs. iframe blowout */
    position: relative; aspect-ratio: 16 / 9; max-height: 460px;
    border-radius: var(--radius-xl); overflow: hidden; background: #000;
    box-shadow: 0 6px 24px rgba(15,23,42,0.16);
}
.post-media.solo .media-stage { aspect-ratio: 16 / 9; }
.media-stage .yt-embed { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.media-stage .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-stage > video, .media-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-stage-img { cursor: zoom-in; }
.media-thumbs {
    flex: 0 0 116px; align-self: stretch;       /* match stage height */
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 1px 4px 1px 1px;
    scrollbar-width: thin;
}
.media-thumb {
    position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 10;
    border: 2px solid transparent; border-radius: 9px; overflow: hidden;
    padding: 0; cursor: pointer; background: var(--slate-100);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.media-thumb:hover { border-color: rgba(201,162,39,0.5); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb.active { border-color: var(--accent-base); box-shadow: 0 0 0 2px rgba(201,162,39,0.3); }
.media-thumb.is-video::before {
    content: ''; position: absolute; inset: 0; background: rgba(15,23,42,0.30); z-index: 1;
}
.media-thumb-play {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
    color: #fff; font-size: 11px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(201,162,39,0.95); display: flex; align-items: center; justify-content: center;
    padding-left: 2px;
}
.media-thumb-label {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    font-size: 8px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase;
    color: #fff; background: rgba(15,23,42,0.62); padding: 2px 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
@media (max-width: 760px) {
    .post-media { flex-direction: column; }
    /* flex:0 0 auto so aspect-ratio defines the height — base flex:1 1 0 collapses it in a
       column flex (the iframe then has no tappable area on iPhone). */
    .media-stage { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; max-height: none; }
    .media-stage .yt-embed, .media-stage > video, .media-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .media-thumbs { flex: 0 0 auto; align-self: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .media-thumb { flex: 0 0 96px; width: 96px; }
}
.post-video figcaption {
    text-align: center;
    font-size: var(--text-sm); color: var(--text-muted);
    margin-top: var(--space-3);
    font-style: italic;
}

/* TL;DR "main juice" box — top of post, for skimmers */
.post-tldr {
    margin: 0 0 var(--space-8);
    padding: var(--space-5) var(--space-6);
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--accent-base, #c9a227);
    border-radius: var(--radius-lg, 12px);
}
.post-tldr-label {
    display: block;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted, #94a3b8); font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-2);
}
.post-tldr p {
    margin: 0; font-size: 16px; line-height: 1.65; color: var(--slate-700, #334155);
}

/* Inline images placed at section breaks inside the body */
.post-inline {
    margin: var(--space-8) 0;
}
.post-inline img {
    width: 100%; max-height: 420px; object-fit: cover;
    border-radius: var(--radius-xl, 16px); display: block;
}
.post-inline figcaption {
    text-align: center; font-size: var(--text-sm, 14px);
    color: var(--text-muted, #94a3b8); margin-top: var(--space-3); font-style: italic;
}

/* Deterministic SVG flow diagrams (top + end of post) */
.post-diagram {
    position: relative;
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-4);
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    overflow-x: auto;
    scroll-margin-top: 80px;
}
.post-diagram svg { max-width: 100%; }
.post-diagram figcaption {
    text-align: center; font-size: var(--text-sm, 14px);
    color: var(--text-muted, #94a3b8); margin-top: var(--space-3);
    font-weight: var(--font-weight-medium, 500);
}
.post-diagram.is-zoomable { cursor: zoom-in; }
/* per-diagram expand button (top-right, appears on hover; always visible on touch) */
.diagram-expand {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.9); border: 1px solid var(--border-color,#e2e8f0);
    color: var(--text-secondary,#475569); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--transition-fast,.15s), background .15s, color .15s;
    box-shadow: 0 1px 4px rgba(15,23,42,.12);
}
.diagram-expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.post-diagram:hover .diagram-expand, .diagram-expand:focus { opacity: 1; }
.diagram-expand:hover { background: var(--accent-base,#c9a227); color: #fff; border-color: var(--accent-base,#c9a227); }
@media (hover: none) { .diagram-expand { opacity: .85; } }
/* highlight pulse when jumped to from the rail */
@keyframes diagramFlash { 0%{ box-shadow: 0 0 0 0 rgba(201,162,39,.55);} 100%{ box-shadow: 0 0 0 14px rgba(201,162,39,0);} }
.post-diagram.diagram-flash { animation: diagramFlash 1s ease-out; border-color: var(--accent-base,#c9a227); }

/* Rail "Diagrams" index (under the TOC) */
.diagram-rail { margin-top: var(--space-6); }
.diagram-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; counter-reset: none; }
.diagram-list li { margin: 0; }
.diagram-list a {
    display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 6px;
    font-size: var(--text-sm,13px); color: var(--text-secondary,#475569); text-decoration: none;
    line-height: 1.35; transition: background .12s, color .12s;
}
.diagram-list a:hover { background: var(--slate-50,#f8fafc); color: var(--text-primary,#0f172a); }
.diagram-num {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
    background: var(--accent-base,#c9a227); color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.diagram-title { min-width: 0; }

/* Vector pan/zoom diagram lightbox */
.diagram-lightbox {
    position: fixed; inset: 0; z-index: 1000; display: none;
    background: rgba(15,23,42,.92); flex-direction: column;
}
.diagram-lightbox.open { display: flex; }
.diagram-lightbox .dlb-stage {
    flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none;
}
.diagram-lightbox .dlb-stage:active { cursor: grabbing; }
.diagram-lightbox .dlb-inner { transform-origin: center center; will-change: transform; }
.diagram-lightbox .dlb-inner svg { background: var(--cream,#faf7f0); border-radius: 12px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.diagram-lightbox .dlb-cap { color: #fff; text-align: center; font-size: 14px; font-weight: 600; padding: 16px 56px 6px; }
.diagram-lightbox .dlb-close { position: absolute; top: 16px; right: 24px; z-index: 2; color: #fff; font-size: 38px; line-height: 1; background: none; border: 0; cursor: pointer; }
.diagram-lightbox .dlb-controls { display: flex; gap: 8px; justify-content: center; padding: 12px 0 20px; }
.diagram-lightbox .dlb-controls button {
    min-width: 42px; height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
    font-size: 16px; font-weight: 600;
}
.diagram-lightbox .dlb-controls button:hover { background: var(--accent-base,#c9a227); border-color: var(--accent-base,#c9a227); }

/* Right-rail byline (compact) */
.rail-byline { display: flex; gap: 9px; align-items: center; margin-bottom: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light, #e2e8f0); }
.rail-byline-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-base,#c9a227), var(--accent-dark,#a68519));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-weight-semibold,600); font-size: 12px; }
.rail-byline-info { line-height: 1.3; min-width: 0; }
.rail-byline-name { font-weight: var(--font-weight-semibold,600); color: var(--text-primary,#0f172a); font-size: 13px; }
.rail-byline-meta { font-size: 11px; color: var(--text-muted,#94a3b8); }
/* Right-rail gallery (below the TOC) */
.rail-gallery-label { margin-top: var(--space-6); }
.rail-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--space-3); }
.rail-gallery-grid .gallery-thumb { aspect-ratio: 1/1; }

/* Image gallery (post page) + lightbox */
.post-gallery { margin: var(--space-12) 0 var(--space-8); }
.post-gallery-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted, #94a3b8); font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-4);
}
.post-gallery-label svg { stroke: var(--accent-base, #c9a227); fill: none; stroke-width: 2; }
.post-gallery-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.gallery-thumb {
    padding: 0; border: 1px solid var(--border-color, #e2e8f0); background: none;
    border-radius: var(--radius-lg, 12px); overflow: hidden; cursor: zoom-in;
    aspect-ratio: 16/10; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,0.12); }
@media (max-width: 720px) { .post-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.lightbox {
    position: fixed; inset: 0; background: rgba(15,23,42,0.92); z-index: 1000;
    display: none; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 40px; line-height: 1; background: none; border: 0; cursor: pointer; }

/* ============================================================
   Post body — reading typography
   ============================================================ */
.post-body {
    font-size: 18px; line-height: 1.75; color: var(--slate-700);
    font-weight: var(--font-weight-normal);
}
.post-body > * + * { margin-top: var(--space-5); }

/* Drop cap on first paragraph */
.post-body > p:first-of-type::first-letter {
    font-family: var(--font-family);
    float: left;
    font-size: 4.5em;
    line-height: 0.85;
    margin: 6px 10px -2px 0;
    font-weight: var(--font-weight-semibold);
    color: var(--accent-dark);
}

.post-body h2 {
    font-size: var(--text-3xl); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: var(--space-12); margin-bottom: var(--space-3);
    letter-spacing: -0.015em; line-height: 1.25;
    scroll-margin-top: 80px;
}
.post-body h3 {
    font-size: var(--text-2xl); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: var(--space-8); margin-bottom: var(--space-2);
    scroll-margin-top: 80px;
}
.post-body h4 {
    font-size: var(--text-xl); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: var(--space-6); margin-bottom: var(--space-2);
}
.post-body p { color: var(--slate-700); }
.post-body strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.post-body em { color: var(--slate-700); font-style: italic; }
.post-body ul, .post-body ol { padding-left: var(--space-6); }
.post-body li { margin: var(--space-2) 0; }
.post-body li::marker { color: var(--accent-base); }

/* Block quote = pull quote (Caveat, gold accent) */
.post-body blockquote {
    font-family: 'Caveat', cursive;
    font-size: 1.8em;
    line-height: 1.3;
    color: var(--accent-dark);
    font-weight: 500;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    margin: var(--space-10) 0;
    border: none; background: none;
    position: relative;
}
.post-body blockquote::before, .post-body blockquote::after {
    content: ''; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-base), transparent);
    margin: var(--space-4) auto;
    max-width: 120px;
}
.post-body blockquote p { color: inherit; font-family: inherit; }

/* Inline code */
.post-body code:not(pre code) {
    background: var(--slate-100); padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.88em; color: var(--accent-dark);
    border: 1px solid var(--border-light);
}

/* Code blocks (Ghost-inspired dark with gold accent stripe) */
.post-body pre {
    background: var(--slate-900); color: #e5e7eb;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-size: 14px; line-height: 1.6;
    margin: var(--space-6) 0;
    border-left: 3px solid var(--accent-base);
    box-shadow: var(--shadow-md);
    position: relative;
}
.post-body pre code {
    background: transparent; color: inherit; padding: 0; font-size: inherit;
    border: none;
}

/* Images */
.post-body img {
    max-width: 100%; height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
    box-shadow: var(--shadow-md);
}

/* Tables */
.post-body table {
    width: 100%; border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-base);
}
.post-body th {
    background: var(--slate-100);
    padding: var(--space-3); text-align: left;
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--border-medium);
}
.post-body td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}
.post-body tr:hover td { background: var(--slate-50); }

.post-body hr {
    border: none; height: 1px;
    background: var(--border-light);
    margin: var(--space-12) auto;
    max-width: 80px;
}

/* Heading anchor links */
.post-body .hash-link {
    opacity: 0; color: var(--accent-base);
    text-decoration: none; margin-right: 6px;
    transition: opacity var(--transition-fast);
}
.post-body h2:hover .hash-link,
.post-body h3:hover .hash-link,
.post-body h4:hover .hash-link { opacity: 1; }

/* ============================================================
   Post footer — author bio + translations + related
   ============================================================ */
.post-footer {
    margin-top: var(--space-16);
    padding-top: var(--space-10);
    border-top: 1px solid var(--border-light);
    display: grid; gap: var(--space-10);
}
.author-module {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
    padding: var(--space-6) var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    border-left: 3px solid var(--accent-base);
}
.author-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-base), var(--accent-dark));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-weight-semibold); font-size: var(--text-3xl);
}
.author-info > * + * { margin-top: 2px; }
.author-name {
    font-size: var(--text-xl); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.author-role {
    font-size: var(--text-sm); color: var(--accent-dark);
    font-weight: var(--font-weight-medium);
}
.author-bio-text {
    font-size: var(--text-md); color: var(--text-secondary);
    margin-top: var(--space-3);
}
.author-link {
    font-size: var(--text-sm);
    color: var(--accent-dark);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-3);
    display: inline-block;
}

.post-translations, .post-related {
    padding-top: var(--space-6);
}
.post-translations ul, .post-related ul { list-style: none; padding: 0; margin-top: var(--space-3); }
.post-translations li, .post-related li { padding: var(--space-2) 0; }
.post-translations a, .post-related a { font-weight: var(--font-weight-medium); }

/* ============================================================
   Footer
   ============================================================ */
.zone3-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    padding: var(--space-12) 0 var(--space-8);
    margin-top: var(--space-20);
    position: relative;
}
.zone3-footer::before {
    content: ''; position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 3px;
    background: var(--accent-base);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.footer-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 var(--space-8);
    display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: var(--space-10); align-items: start;
}
.footer-brand {
    font-size: var(--text-lg); font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.footer-bio { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-2) 0; max-width: 320px; }
.footer-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-4); }
.footer-label {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { padding: 3px 0; }
.footer-links a {
    font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--accent-dark); }

/* ============================================================
   Tag archive header — same eyebrow + title pattern
   ============================================================ */
.tag-archive-header { padding: var(--space-12) 0 var(--space-8); }

/* ============================================================
   Errors
   ============================================================ */
.error-container { text-align: center; padding: var(--space-20) var(--space-6); }
.error-code { font-size: 6rem; color: var(--accent-base); font-weight: var(--font-weight-semibold); font-family: 'Caveat', cursive; }
.error-title { font-size: var(--text-3xl); margin: var(--space-3) 0; }
.error-text { color: var(--text-secondary); margin-bottom: var(--space-6); }
.error-stack {
    text-align: left; background: var(--slate-900); color: #e5e7eb;
    padding: var(--space-5); border-radius: var(--radius-md);
    overflow-x: auto; font-size: var(--text-sm);
    margin: var(--space-6) 0;
}

.btn-primary {
    display: inline-block; padding: 10px 20px;
    background: var(--color-primary); color: var(--text-inverse);
    text-decoration: none; font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.btn-primary:hover { background: var(--slate-800); color: var(--text-inverse); transform: translateY(-1px); }

.empty { color: var(--text-muted); padding: var(--space-8); text-align: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
    .post-layout { grid-template-columns: 1fr; }
    .post-toc { position: static; max-height: none; padding-right: 0; margin-bottom: var(--space-6);
        background: var(--bg-card); border: 1px solid var(--border-light);
        border-radius: var(--radius-lg); padding: var(--space-5); }
    .post-toc a.is-active { background: transparent; }
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .era-buttons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .zone1-topbar { padding: 0 var(--space-4); height: 52px; }
    .topbar-back span { display: none; }
    .container, .container-narrow { padding: 0 var(--space-4); }
    .post-grid { grid-template-columns: 1fr; }
    .home-header { padding: var(--space-12) 0 var(--space-8); }
    .post { padding: var(--space-6) 0 var(--space-16); }
    .post-layout { padding: 0 var(--space-4); }
    .post-body { font-size: 17px; }
    /* wide tables scroll horizontally instead of being clipped by overflow-x:hidden (audit P1-5) */
    .post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .post-body > p:first-of-type::first-letter { font-size: 3.5em; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .featured-card-body { padding: var(--space-6); }
    .author-module { grid-template-columns: 1fr; text-align: center; }
    .author-avatar { margin: 0 auto; }
}
@media (max-width: 460px) {
    .footer-inner { grid-template-columns: 1fr; }
}

/* Phone header compaction: icon-only home + drop the posts counter so the row never crowds.
   Result: [burger]  home-icon > Blog  ............  EN ES   (2026-06-02) */
@media (max-width: 600px) {
    .header-left { gap: 6px; }
    .header-nav-link span { display: none; }   /* keep the home icon, drop the "jcardena.com" wordmark */
    .header-stat { display: none; }            /* drop "310 posts" on phones */
    .header-right { gap: 10px; }
    .header-current span { font-size: var(--text-sm, 14px); }
}

/* MOBILE: the right rail (byline + TOC + Diagrams) must NOT sit beside the article on small
   screens — .content-wrap is a flex row with a fixed 250px rail, so on a phone it would crush
   the article. Stack the rail BELOW the content, full-width. (iPhone-friendly fix, 2026-06-02) */
@media (max-width: 900px) {
    .content-wrap { flex-direction: column; }
    .content-wrap.has-toc .toc-rail {
        width: auto; flex-shrink: 1;
        position: static; max-height: none; overflow: visible;
        margin: var(--space-2) var(--space-4) var(--space-8);
    }
    /* the in-article media + diagrams already have their own ≤760px handling */
}

/* ============================================================
   MOBILE SHELL — off-canvas drawer (same concept/interaction as jcardena.com)
   ≤900px: the era rail + all-posts navigator slide away behind a hamburger in
   the sticky header; content goes full-width. Desktop ≥901px is unchanged.
   ============================================================ */
.mobile-burger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
    html, body { overflow-x: hidden; }

    /* Content reclaims the full width (the two left columns become a drawer) */
    .main-content { margin-left: 0; }

    /* Hamburger lives at the start of the sticky header */
    .mobile-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex-shrink: 0; padding: 0;
        border: 1px solid var(--border-light); border-radius: 9px;
        background: var(--bg-card); color: var(--text-primary); cursor: pointer;
    }
    .mobile-burger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

    /* The era rail + all-posts navigator slide off-canvas together (one drawer) */
    .left-nav, .post-nav { transition: transform 0.28s ease; will-change: transform; }
    .left-nav { transform: translateX(-100%); z-index: 300; }
    .post-nav {
        transform: translateX(calc(-100% - var(--rail-w)));  /* fully clears the 52px rail offset */
        z-index: 299;
        left: var(--rail-w);
        width: min(72vw, 300px);   /* wide enough that titles are readable */
    }
    body.drawer-open .left-nav,
    body.drawer-open .post-nav { transform: translateX(0); }
    body.drawer-open .post-nav { box-shadow: 0 0 44px rgba(0,0,0,0.28); }

    /* Drawer (not the desktop collapse toggle) controls nav visibility on mobile */
    html.nav-collapsed { --nav-w: 100px; }
    html.nav-collapsed .post-nav { display: flex; }
    .post-nav-reopen { display: none !important; }
    .post-nav-resizer { display: none; }   /* no drag-resize on touch */

    /* Dark scrim behind the open drawer */
    .nav-scrim {
        display: block; position: fixed; inset: 0;
        background: rgba(15,23,42,0.5);
        opacity: 0; pointer-events: none;
        transition: opacity 0.28s ease; z-index: 250;
    }
    body.drawer-open .nav-scrim { opacity: 1; pointer-events: auto; }

    /* Header full-width with room for the hamburger; respect the notch */
    .header { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
    .header-right { gap: 12px; }
    /* Drop the long post title from the breadcrumb on mobile — the H1 is right below it. */
    .header-leaf { display: none; }
    .header-left .breadcrumb-sep:last-of-type { display: none; }

    /* Bigger touch targets inside the drawer */
    .left-nav-item { padding: 10px 0; }
    .post-nav-item { padding: 10px 8px 10px 14px; font-size: 12px; }
    .left-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}