/* ============================================
   Attila WP — v2.6.0
   Complete CSS override for Apple-grade aesthetics
   ============================================ */

/* ============================================
   §0. TYPOGRAPHY — Inter + Literata
   Self-hosted variable fonts (WOFF2).
   Eliminates render-blocking Google Fonts requests.
   ============================================ */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/inter/inter-latin-ext-9d79fa3d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/inter/inter-latin-ac26d6d9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-81e8a7a5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../font/literata/literata-latin-f4cc8b2b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-81e8a7a5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../font/literata/literata-latin-f4cc8b2b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-81e8a7a5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../font/literata/literata-latin-f4cc8b2b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-8da6dbb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/literata/literata-latin-7961016c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-8da6dbb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/literata/literata-latin-7961016c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-8da6dbb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/literata/literata-latin-7961016c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-8da6dbb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../font/literata/literata-latin-7961016c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../font/literata/literata-latin-ext-8da6dbb4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../font/literata/literata-latin-7961016c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    --font-secondary: 'Literata', Georgia, 'Times New Roman', serif !important;
    --font-reading: 'Literata', Georgia, 'Times New Roman', serif;
}

/* Global base — Inter everywhere */
body {
    font-family: var(--font-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    text-rendering: optimizeLegibility;
}

/* ============================================
   §1. FOUNDATION — Color & Contrast Overrides
   ============================================ */

/* Boost dark-mode text contrast */
.theme-dark:root,
:root {
    --ghost-accent-color: #A1A1AA !important;
}

@media (prefers-color-scheme: dark) {
    html:not(.theme-light):root {
        --ghost-accent-color: #A1A1AA !important;
    }
}

.theme-dark:root {
    --color-content-main: #D4D4D8;
    --color-content-secondary: #A1A1AA;
    --color-content-lead: #FAFAFA;
    --color-background-main: #18181B;
    --color-background-secondary: #1E1E22;
    --color-background-contrast: #2E2E33;
}

@media (prefers-color-scheme: dark) {
    html:not(.theme-light):root {
        --color-content-main: #D4D4D8;
        --color-content-secondary: #A1A1AA;
        --color-content-lead: #FAFAFA;
        --color-background-main: #18181B;
        --color-background-secondary: #1E1E22;
        --color-background-contrast: #2E2E33;
    }
}

/* Kill all viewport-level glow/shadow */
.viewport,
.page-wrapper,
body,
html,
.post-header,
.post-header.has-cover,
.container,
.post-content {
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================
   §1B. GLOBAL SVG ICON FIX
   Force ALL SVG icons to be visible.
   Uses explicit color values, not currentColor.
   ============================================ */

/* Nuclear reset: ALL icon SVGs and their children */
.icon svg,
.icon svg path,
.icon svg polygon,
.icon svg rect,
.icon svg circle,
i.icon svg,
i.icon svg path {
    fill: var(--color-content-secondary) !important;
}

/* Desktop nav icons (above 640px) — on non-cover pages */
.nav-header a.nav-search .icon svg,
.nav-header a.nav-search .icon svg path,
.nav-header .nav-search .icon svg,
.nav-header .nav-search .icon svg path,
.nav-header .nav-search i svg,
.nav-header .nav-search i svg path {
    fill: var(--color-content-secondary) !important;
}

/* Desktop nav on cover images — white */
.cover-active .nav-header a.nav-search .icon svg,
.cover-active .nav-header a.nav-search .icon svg path,
.cover-active .nav-header .nav-search i svg,
.cover-active .nav-header .nav-search i svg path {
    fill: white !important;
}

/* Mobile hamburger + search on cover — white */
.cover-active .nav-wrapper-control a,
.cover-active .nav-wrapper-control .nav-menu {
    color: white !important;
}

.cover-active .nav-wrapper-control a .icon svg,
.cover-active .nav-wrapper-control a .icon svg path,
.cover-active .nav-wrapper-control a i.icon svg,
.cover-active .nav-wrapper-control a i.icon svg path {
    fill: white !important;
}

/* Mobile hamburger + search on dark (no cover) */
.nav-wrapper-control a .icon svg,
.nav-wrapper-control a .icon svg path,
.nav-wrapper-control a i.icon svg,
.nav-wrapper-control a i.icon svg path {
    fill: var(--color-content-secondary) !important;
}

.nav-wrapper-control a.nav-menu {
    color: var(--color-content-secondary) !important;
}

/* Post navigation arrows */
.post-nav i.icon svg,
.post-nav i.icon svg path,
.post-nav i svg,
.post-nav i svg path {
    fill: var(--color-content-secondary) !important;
}

/* Pagination arrow icons */
.pagination a i.icon svg,
.pagination a i.icon svg path,
.pagination a i svg,
.pagination a i svg path {
    fill: var(--color-content-secondary) !important;
}

/* ============================================
   §1C. NAV TYPOGRAPHY — Unified Inter
   Desktop nav links, mobile "Menu" text,
   all use the same font and weight.
   ============================================ */

/* All nav links — unified Inter */
.nav-header a,
.nav-header li a,
.nav-header .nav-wrapper a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.5em !important;
    letter-spacing: 0.01em;
}

/* Mobile "Menu" text — match desktop nav exactly */
.nav-wrapper-control a,
.nav-wrapper-control a.nav-menu,
.nav-wrapper-control .nav-menu {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.5em !important;
    letter-spacing: 0.01em;
}

/* Mobile Home link — centered blog title between Menu and Search */
.nav-wrapper-control .nav-home-link {
    display: none; /* hidden on desktop */
}

@media only screen and (max-width: 640px) {
    .nav-wrapper-control .inner {
        align-items: center;
    }

    .nav-wrapper-control .nav-home-link {
        display: block !important;
        flex: 1;
        text-align: center;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-weight: 600 !important;
        font-size: 1.5em !important;
        letter-spacing: -0.02em;
        color: var(--color-content-lead) !important;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 1rem;
    }

    .cover-active .nav-wrapper-control .nav-home-link {
        color: white !important;
    }

    .menu-active .nav-wrapper-control .nav-home-link {
        color: var(--color-content-main) !important;
    }
}

/* Mobile nav items inside dropdown */
@media only screen and (max-width: 640px) {
    .nav-header li a {
        font-size: 1.8em !important;
        font-weight: 500 !important;
    }
}

/* Footer icons */
.nav-footer .icon svg,
.nav-footer .icon svg path,
.nav-footer a .icon svg,
.nav-footer a .icon svg path {
    fill: var(--color-content-secondary) !important;
}

/* ============================================
   §2. PROGRESS BAR — Hairline
   ============================================ */

.progress-container {
    height: 2px !important;
}

.progress-bar,
.attila-progress-bar {
    height: 1.5px !important;
    background: var(--color-content-secondary) !important;
    opacity: 0.5;
}

/* ============================================
   §3. SEARCH OVERLAY — Clean
   ============================================ */

.attila-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.attila-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.attila-search-overlay-inner {
    width: 90%;
    max-width: 560px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Search form — clean single-line layout */
.attila-search-overlay .attila-search-form,
.attila-search-overlay form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.attila-search-overlay .attila-search-form label,
.attila-search-overlay form label {
    display: flex !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    gap: 1rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    cursor: text;
}

/* Search icon inside the input area */
.attila-search-overlay .attila-search-icon,
.attila-search-overlay label .attila-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    min-width: 2.4rem !important;
    flex-shrink: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    float: none !important;
}

.attila-search-overlay .attila-search-icon svg,
.attila-search-overlay .attila-search-icon svg path {
    width: 2rem !important;
    height: 2rem !important;
    fill: rgba(255, 255, 255, 0.5) !important;
}

.attila-search-overlay input,
.attila-search-overlay input[type="text"],
.attila-search-overlay input[type="search"],
.attila-search-overlay .attila-search-field {
    width: 100% !important;
    padding: 1rem 0 !important;
    font-size: 1.8rem !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: var(--font-primary) !important;
}

.attila-search-overlay input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.attila-search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 2rem 1.5rem;
}

.attila-search-results a {
    display: block;
    padding: 1.2rem 0;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.15s ease;
}

.attila-search-results a:hover {
    color: #fff;
}

.attila-search-close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 100000;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem;
    transition: color 0.2s ease;
}

.attila-search-close:hover {
    color: #fff;
}

/* ============================================
   §4. COVER IMAGE — Fix clipping
   ============================================ */

/* Ensure full image is visible, not clipped */
.blog-cover img,
.post-cover img {
    object-position: center center !important;
}

/* Fix for CompressX <picture> tags wrapping cover images.
   Without these rules, the <picture> element collapses to the
   image's natural height, causing black bars on resize. */
.blog-cover picture,
.post-cover picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 6;
}

.blog-cover picture img,
.post-cover picture img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 6;
    object-fit: cover;
    object-position: center center !important;
}

/* Tone down the parallax to prevent excessive clipping */
.blog-header.has-cover {
    overflow: visible !important;
}

/* Per-element text shadows for character-level readability */
.has-cover .post-info,
.has-cover .post-title,
.has-cover .post-meta {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(0, 0, 0, 0.5);
}

/* Per-line adaptive dark backdrop behind title text.
   display: inline makes the background paint per-line-fragment.
   box-decoration-break: clone applies padding/radius to each fragment.
   This is the same technique Medium, The Verge, and Vox use. */
.post-header.has-cover .post-title {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 0.15em 0.4em;
    line-height: 1.6em;
}

/* Dark backdrop behind meta — flex shrink-wraps to content.
   IMPORTANT: base style.css sets:
     .has-cover .post-meta { padding: 0 }
     .post-header .post-meta .post-meta-avatars { float: left }
     .post-header .post-meta:after { clear:both; display:table }
   All of which silently defeat non-!important overrides. */
.post-header.has-cover .post-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.2em 0.5em !important;
    width: fit-content !important;
    max-width: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    padding: 0.5em 1.2em 0.5em 0.8em !important;
    float: none !important;
}

/* Kill the clearfix pseudo-element that interferes with flex */
.post-header.has-cover .post-meta:after {
    display: none !important;
}

/* Override float: left from base CSS */
.post-header.has-cover .post-meta .post-meta-avatars {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 0 !important;
}

/* Reset h4 margins inside the flex container */
.post-header.has-cover .post-meta h4.post-meta-author {
    margin: 0 !important;
    padding: 0 !important;
}

/* Cover gradients — REMOVED, image stays 100% vivid.
   All text readability comes from per-element shadows. */
.blog-cover:after,
.post-cover:after {
    background: none !important;
}

/* RSS icon — always visible */
.icon-rss svg {
    fill: currentColor;
}

.nav-footer .icon-rss {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.nav-footer .icon-rss:hover {
    opacity: 1;
}

/* ============================================
   §5. MASTHEAD — Living Typography
   Animated gradient shimmer on the blog name,
   like light sweeping across brushed aluminium.
   A Jony Ive signature: alive, not static.
   ============================================ */

@keyframes textShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.blog-header {
    padding-top: calc(10rem + 3vw) !important;
}

.blog-header.has-cover {
    padding-top: calc(14rem + 5vw) !important;
}

.blog-header .blog-box {
    padding-bottom: calc(3rem + 2vw);
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-header.has-cover .blog-box {
    padding-bottom: calc(5rem + 3vw);
}

/* Blog name — Ultra-light with luminous shimmer */
.blog-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(3.2rem, 6vw, 5.4rem) !important;
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-transform: none;
    position: relative;
}

/* Shimmer effect — on cover images
   Uses filter: drop-shadow() because text-shadow is invisible
   on background-clip:text / -webkit-text-fill-color:transparent */
.has-cover .blog-name,
.has-cover .blog-name a {
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 1) 25%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 1) 75%,
            rgba(255, 255, 255, 0.9) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.4));
}

/* On non-cover pages — dark shimmer */
.blog-name a {
    background: linear-gradient(120deg,
            var(--color-content-lead) 0%,
            var(--color-content-main) 50%,
            var(--color-content-lead) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 8s ease-in-out infinite;
}

/* Hairline accent — between name and description */
.blog-name::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
    margin: 1.5rem auto 0;
}

.has-cover .blog-name::after {
    background: white;
    opacity: 0.35;
}

/* Tagline — maximum typographic contrast */
.blog-description {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.15em !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 1.5rem;
    line-height: 1.6;
}

.has-cover .blog-description {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(0, 0, 0, 0.3);
}

/* Mobile — scale gracefully */
@media only screen and (max-width: 640px) {
    .blog-name::after {
        width: 30px;
        margin-top: 1.2rem;
    }

    .blog-description {
        font-size: 1rem !important;
        letter-spacing: 0.15em;
    }
}

/* ============================================
   §6. JOURNAL FLOW — Curated, Personal
   Each post is a story, not an article.
   Single column, editorial typography,
   generous whitespace. Apple Newsroom feel.
   ============================================ */

/* Remove default card separators */
.container .post .post-box {
    border-bottom: none !important;
    border-top: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.container #results .post:first-child .post-box {
    border-top: none !important;
}

/* Single-column journal stream */
.container #content.content,
.container .content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: clamp(780px, 52vw, 1100px);
    margin: 0 auto;
    padding: 4rem 4rem 2rem;
    gap: 0;
}

/* Pagination — full width */
.container .content .pagination,
.container .content .extra-pagination {
    width: 100%;
}

/* Each post — full width within container */
.container .post {
    width: 100%;
    margin-bottom: 5rem !important;
}

.container .post .post-box {
    display: flex;
    flex-direction: column;
}

.container .post .inner {
    padding: 0 !important;
    max-width: none;
    margin: 0;
}

/* Featured post (first child) — hero treatment */
.container .post:first-child .post-image {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: auto;
    max-height: none;
}

.container .post:first-child .post-title {
    font-size: 3.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 2rem 0 0.75rem;
}

.container .post:first-child .post-excerpt {
    font-size: 1.8rem !important;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    line-height: 1.75;
}

/* Image — edge-to-edge, smooth vignette fade into background */
.container .post .post-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%),
        linear-gradient(to bottom,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%);
    mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%),
        linear-gradient(to bottom,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

.container .post .post-image {
    width: 100% !important;
    aspect-ratio: 2 / 1;
    height: auto !important;
    min-height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.container .post:hover .post-image {
    transform: scale(1.02);
}

/* ── Title — confident, personal, inviting ── */
.container .post .post-title {
    font-family: var(--font-primary) !important;
    font-size: 2.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 1.75rem 0 0.75rem;
    color: var(--color-content-lead);
}

.container .post .post-title a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.25s ease;
}

.container .post:hover .post-title a {
    opacity: 0.85;
}

/* ── Excerpt — story opening, invites you in ── */
.container .post .post-excerpt {
    font-family: var(--font-primary) !important;
    font-size: 1.7rem !important;
    line-height: 1.75;
    font-weight: 400;
    color: var(--color-content-main);
    margin: 0.5rem 0 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── "Continue reading →" — gentle invitation ── */
.container .post .post-excerpt p {
    margin-bottom: 0;
}

.container .post .post-excerpt::after {
    content: none;
}

.container .post .post-title a::after {
    content: none;
}

/* Continue reading link via the post-more-link if present */
.container .post .post-more-link {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 500;
    color: var(--color-content-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 0.5rem;
    transition: color 0.2s ease;
}

.container .post .post-more-link:hover {
    color: var(--color-content-lead);
}

/* ── Meta — quiet timestamp, doesn't compete ── */
.container .post .post-meta {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--color-content-secondary);
    opacity: 0.5;
    margin-top: 0.5rem;
}

/* ── Mobile adjustments ── */
@media only screen and (max-width: 640px) {
    .container .post .post-title {
        font-size: 2.4rem !important;
    }

    .container .post:first-child .post-title {
        font-size: 2.8rem !important;
    }

    .container .post .post-excerpt {
        font-size: 1.55rem !important;
    }

    .container .post {
        margin-bottom: 4rem !important;
    }
}

/* Hide the featured star from cards */
.container .post .post-feature {
    display: none;
}

/* Remove the featured highlight */
.container .post.featured .inner:after {
    display: none !important;
}

/* Mobile refinement */
@media only screen and (max-width: 640px) {

    .container #content.content,
    .container .content {
        padding: 2rem;
    }

    .container .post {
        margin-bottom: 4rem !important;
    }

    .container .post .post-image-link {
        border-radius: 10px;
    }

    .container .post:first-child .post-title {
        font-size: 2.4rem !important;
    }

    .container .post .post-title {
        font-size: 2rem !important;
    }
}

/* ============================================
   §7. HIDE TOC — Less Is More
   ============================================ */

.attila-toc {
    display: none !important;
}

/* ============================================
   §8. ARTICLE PAGE — Typography & Layout
   ============================================ */

/* Hide the "Article" type label */
.post-info .post-type {
    display: none !important;
}

.post-info .post-count:after {
    display: none;
}

.post-info .post-count {
    margin-left: 0;
}

/* Article header */
.post-header {
    padding-top: calc(12rem + 3vw) !important;
    padding-bottom: calc(2rem + 1vw) !important;
}

.post-header.has-cover {
    padding-top: calc(14rem + 6vw) !important;
    padding-bottom: calc(3rem + 4vw) !important;
    margin-bottom: calc(3rem + 1vw) !important;
}

.post-header .post-title {
    font-family: var(--font-primary) !important;
    font-size: 4rem !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 2rem !important;
}

@media only screen and (max-width: 640px) {
    .post-header .post-title {
        font-size: 2.8rem !important;
    }
}

/* Post meta — readable, not hidden */
.post-header .post-meta {
    font-family: var(--font-primary) !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    opacity: 0.9;
}

.post-header .post-meta:before {
    display: none !important;
}

.post-header .post-meta .post-meta-avatars .post-meta-avatar {
    width: 3.2rem;
    height: 3.2rem;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   §8. READING TYPOGRAPHY — Literata
   Designed by TypeTogether for Google Books.
   Optimized for extended on-screen reading:
   large x-height, open counters, variable opsz.
   Research: 19-21px body, 1.6-1.75 line-height.
   ============================================ */

/* Body text — Literata, the reading font */
.post-content {
    font-family: var(--font-reading) !important;
    font-size: 2.0rem !important;
    line-height: 1.75 !important;
    font-weight: 400;
    color: var(--color-content-main);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

.post-content p {
    font-family: var(--font-reading) !important;
    margin-bottom: 2.8rem;
    letter-spacing: 0.005em;
}

.post-content ol,
.post-content ul {
    font-family: var(--font-reading) !important;
}

.post-content blockquote {
    font-family: var(--font-reading) !important;
    font-weight: 400;
    font-style: italic;
    border-left-color: var(--color-background-contrast) !important;
    color: var(--color-content-secondary);
}

/* Heading ladder: descending weight for hierarchy */
.post-content h1 {
    font-family: var(--font-primary) !important;
    font-size: 3.2rem;
    font-weight: 700;
    text-indent: 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}

.post-content h2 {
    font-family: var(--font-primary) !important;
    font-size: 2.4rem;
    font-weight: 600;
    text-indent: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
}

.post-content h3 {
    font-family: var(--font-primary) !important;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: var(--font-primary) !important;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

/* List markers — Inter for contrast with Literata body */
.post-content ol>li:before,
.post-content ul>li:before {
    font-family: var(--font-primary) !important;
    font-weight: 500;
    color: var(--color-content-secondary) !important;
}

/* Links — subtle underline, no box-shadow */
.post-content a:not([class]) {
    box-shadow: inset 0 -1px 0 var(--color-background-contrast) !important;
    transition: box-shadow 0.15s ease;
}

.post-content a:not([class]):hover {
    box-shadow: inset 0 -2px 0 var(--color-content-secondary) !important;
}

/* Strong/bold text */
.post-content b,
.post-content strong {
    color: var(--color-content-lead);
    font-weight: 600;
}

/* Mobile text padding */
@media only screen and (max-width: 640px) {
    .post-content {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .post .inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .post-footer {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================================
   §9. SHARE BUTTONS — Whisper
   ============================================ */

section.post-footer {
    margin: 4rem 0 2rem !important;
}

/* Hide Twitter & Facebook — keep LinkedIn, Email, Copy */
section.post-footer .post-share a.twitter,
section.post-footer .post-share a.facebook,
.post-share a.twitter,
.post-share a.facebook {
    display: none !important;
}

/* Hide the "Copied!" tooltip */
.post-share .copy-link-tooltip,
section.post-footer .post-share .copy-link-tooltip,
.post-share a .copy-link-tooltip,
span.copy-link-tooltip {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Share icon SVGs — explicit fill */
section.post-footer .post-share a svg,
section.post-footer .post-share a svg path,
section.post-footer .post-share a .icon svg,
section.post-footer .post-share a .icon svg path,
section.post-footer .post-share a i.icon svg,
section.post-footer .post-share a i.icon svg path,
.post-share a svg,
.post-share a svg path,
.post-share a .icon svg,
.post-share a .icon svg path {
    fill: var(--color-content-secondary) !important;
}

section.post-footer .post-share a:hover svg,
section.post-footer .post-share a:hover svg path,
.post-share a:hover svg,
.post-share a:hover svg path,
.post-share a:hover .icon svg,
.post-share a:hover .icon svg path {
    fill: var(--color-content-lead) !important;
}

section.post-footer .post-share,
.post-share {
    max-width: 100% !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

section.post-footer .post-share .post-info-label,
.post-share .post-info-label,
section.post-footer .post-info-label {
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 0.75rem;
    margin-right: 0;
    font-size: 1.3rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

section.post-footer .post-share a,
.post-share a,
.post-share-button {
    width: 2.8rem !important;
    height: 2.8rem !important;
    font-size: 1.4rem !important;
    line-height: 2.8rem !important;
    background: transparent !important;
    border: 1px solid var(--color-background-contrast) !important;
    color: var(--color-content-secondary) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section.post-footer .post-share a:hover,
.post-share a:hover,
.post-share-button:hover {
    background: var(--color-background-contrast) !important;
    color: var(--color-content-lead) !important;
    border-color: var(--color-content-secondary) !important;
}

.post-tags {
    max-width: 100% !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem;
}

.post-tags a {
    font-size: 1.3rem !important;
    font-weight: 500;
    padding: 0 1.2rem;
    line-height: 2.6rem;
    background: var(--color-background-secondary) !important;
    border: 1px solid var(--color-background-contrast);
    color: var(--color-content-secondary) !important;
    border-radius: 2rem;
}

.post-tags a:hover {
    color: var(--color-content-lead) !important;
    border-color: var(--color-content-secondary);
}

/* ============================================
   §10. POST NAVIGATION — Clean
   ============================================ */

.post-nav {
    border-color: var(--color-background-contrast) !important;
}

.post-nav:after {
    background: var(--color-background-contrast) !important;
}

.post-nav-title {
    font-size: 1.7rem !important;
    font-weight: 600;
    line-height: 1.4;
}

.post-nav-excerpt {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem !important;
    line-height: 1.6;
    color: var(--color-content-secondary);
}

.post-nav-meta {
    font-size: 1.2rem !important;
    color: var(--color-content-secondary);
    opacity: 0.7;
}

/* ============================================
   §11. FOOTER — Minimal
   ============================================ */

.nav-footer {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
}

/* Hide "Back to Top" link if present */
.nav-footer .js-back-to-top {
    display: none !important;
}

/* ============================================
   §12. SCROLL-TO-TOP — Theme-adaptive
   ============================================ */

.attila-scroll-top {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9998;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-background-contrast);
    border-radius: 50%;
    background: var(--color-background-secondary);
    color: var(--color-content-secondary) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease,
        background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.attila-scroll-top svg,
.attila-scroll-top svg path {
    fill: var(--color-content-secondary) !important;
}

.attila-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.attila-scroll-top:hover {
    background: var(--color-background-contrast);
    border-color: var(--color-content-secondary);
    color: var(--color-content-lead) !important;
}

.attila-scroll-top:hover svg,
.attila-scroll-top:hover svg path {
    fill: var(--color-content-lead) !important;
}

/* ============================================
   §13. NAV READABILITY — Subtle top gradient
   Apple approach: no frosted glass blur (which
   distorts the cover image). Instead, a gentle
   dark-to-transparent gradient at the very top
   of cover images ensures nav text pops without
   cutting or blurring the hero image.
   ============================================ */

.nav-header {
    transition: all ease-out 0.3s;
}

/* REMOVE all blur from nav wrapper on cover images */
.nav-header .nav-wrapper {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.cover-active .nav-header .nav-wrapper {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
}

/* Also kill base theme's blur on mobile controls when on cover */
.cover-active .nav-header .nav-wrapper-control {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
}

/* Top-edge gradient on cover images for nav readability.
   A gentle 120px dark vignette at the top — like Apple's
   hero images — ensures white nav text always reads. */
.blog-cover::before,
.post-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 9;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.25) 40%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* ============================================
   §14. COMMENTS — Clean
   ============================================ */

.post-comments {
    background: transparent !important;
    border: 1px solid var(--color-background-contrast) !important;
    border-radius: 12px;
}

/* ============================================
   §15. ACCESSIBILITY — Focus States
   ============================================ */

a:focus-visible {
    outline: 2px solid var(--color-content-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================
   §16. PAGINATION — Aligned
   ============================================ */

.pagination a {
    border-color: var(--color-background-contrast);
    font-size: 1.4rem;
    border-radius: 3rem;
}

.pagination a:hover {
    border-color: var(--color-content-secondary);
    color: var(--color-content-lead);
}

.pagination .pagination-info {
    font-size: 1.3rem;
    color: var(--color-content-secondary);
    opacity: 0.7;
}

/* ============================================
   §17. BLOCKQUOTE — Refined
   ============================================ */

.post-content blockquote {
    border-left-width: 3px !important;
    border-left-color: var(--color-background-contrast) !important;
    padding: 0.5em 1.5em !important;
    font-style: normal !important;
    color: var(--color-content-secondary);
}

.post-content blockquote p {
    color: var(--color-content-secondary);
}

/* ============================================
   §18. DARK MODE SHADOWS — Softer
   ============================================ */

.theme-dark article.post:hover,
.theme-dark .container .post:hover {
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {

    html:not(.theme-light) article.post:hover,
    html:not(.theme-light) .container .post:hover {
        box-shadow: none;
    }
}

/* ============================================
   §18b. BREADCRUMBS — Subtle Navigation
   ============================================ */

.post-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.post-breadcrumbs:hover {
    opacity: 0.9;
}

.post-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: border-color 0.2s ease;
}

.post-breadcrumbs a:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.bc-sep {
    opacity: 0.4;
    font-size: 1.1em;
}

.bc-current {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   §19. BOOKMARK CARDS & EMBEDS — Refined
   ============================================ */

.post-content .kg-bookmark-card a.kg-bookmark-container {
    border-radius: 10px !important;
    border-color: var(--color-background-contrast) !important;
}

/* ============================================
   §20. PRINT — Clean
   ============================================ */

@media print {

    .attila-progress-bar,
    .progress-container,
    .attila-scroll-top,
    .nav-header,
    .nav-footer,
    .post-share,
    .post-nav,
    .highlight-share-tooltip,
    .heading-anchor,
    .code-copy-btn,
    .lightbox-overlay {
        display: none !important;
    }
}

/* ============================================
   PREMIUM FEATURES CSS
   ============================================ */

/* --- 1. Anchor Links on Headings --- */
.heading-anchor {
    position: absolute;
    left: -1.5em;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 0.2em;
    line-height: 1;
}

.post-content h2:hover .heading-anchor,
.post-content h3:hover .heading-anchor,
.post-content h4:hover .heading-anchor,
.post-content h5:hover .heading-anchor {
    opacity: 1;
}

.heading-anchor:hover {
    color: rgba(255, 255, 255, 0.8);
}

.heading-anchor.copied {
    color: #4ade80;
    opacity: 1;
}

.heading-anchor.copied::after {
    content: 'Copied!';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5em;
    font-size: 0.7em;
    color: #4ade80;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- 2. Highlight-to-Share (enhanced visibility) --- */
.highlight-share-tooltip {
    position: absolute;
    z-index: 9999;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}

.highlight-share-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Bottom arrow pointer */
.hst-arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 7px;
    overflow: hidden;
}

.hst-arrow::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.hst-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.15s ease;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hst-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.hst-btn svg {
    flex-shrink: 0;
}

/* Divider between buttons */
.hst-btn+.hst-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 7px 7px 0;
}

.hst-btn:first-of-type {
    border-radius: 7px 0 0 7px;
}

/* --- Nav header visibility on bright cover images --- */
.cover-active .nav-header a,
.cover-active .nav-header li a {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(0, 0, 0, 0.3);
}

.cover-active .nav-header .nav-search .icon,
.cover-active .nav-header .nav-search i {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

/* --- 6. Image Lightbox --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

.lightbox-overlay.active .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- 7. Code Block Copy Button --- */
.code-block-wrapper {
    position: relative;
}

.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.code-block-wrapper:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

.code-copy-btn.copied {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    opacity: 1;
}

/* --- 10. Keyboard Navigation Focus --- */
.container .post.keyboard-focus {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline 0.2s ease;
}

/* --- 14. Page Transition Animation --- */
body {
    opacity: 0;
    transition: opacity 0.25s ease;
}

body.page-loaded {
    opacity: 1;
}

body.page-exiting {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .heading-anchor {
        position: static;
        display: inline;
        opacity: 0.4;
        margin-left: 0.3em;
        transform: none;
    }

    .highlight-share-tooltip {
        left: 50% !important;
        transform: translateX(-50%);
    }

    .highlight-share-tooltip.visible {
        transform: translateX(-50%) translateY(0);
    }
}