#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}


/* ── Iframe Skeleton Placeholder ────────────────────────────────── */
/* Visible placeholder shown while the real iframe is deferred      */
/* inside a <template> element. Removed when the iframe loads.      */
.lazy-iframe-ph {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border-radius: 12px;
    background: linear-gradient(
        110deg,
        rgba(31, 41, 55, 1) 30%,
        rgba(55, 65, 81, 0.7) 50%,
        rgba(31, 41, 55, 1) 70%
    );
    background-size: 200% 100%;
    animation: iframe-shimmer 1.8s ease-in-out infinite;
}

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

.lazy-iframe-ph.lazy-iframe-ph--spotify {
    aspect-ratio: auto;
    height: 152px;
    border-radius: 14px;
}

/* Spotify players are fixed-height widgets (track 152px, artist 352px,
   playlist/album 380px, show/episode 232px), so the shimmer placeholder
   must match or the layout jumps when the iframe swaps in. (Two classes
   keep the selector at least as specific as .lazy-iframe-ph--spotify.) */
.lazy-iframe-ph.lazy-iframe-ph--spotify-artist,
.lazy-iframe-ph.lazy-iframe-ph--spotify-album,
.lazy-iframe-ph.lazy-iframe-ph--spotify-playlist {
    height: 450px;
}

.lazy-iframe-ph.lazy-iframe-ph--spotify-show,
.lazy-iframe-ph.lazy-iframe-ph--spotify-episode {
    height: 232px;
}

/* ── Copy Link Button — Copied State ────────────────────────────── */
#copy-link-btn.copied {
    background: rgba(20, 83, 45, 0.5);
    border-color: var(--ok);
    color: var(--ok);
}

/* Rich media sizing (figures, YouTube/Spotify iframes) now lives in
   base.css under ".blog-content", so blog posts and the About bio share
   one set of rules. Only the JS-generated social embeds below are
   specific to this page. */

/* ── Social Media Embed Iframes (responsive) ──────────────────── */
/* All sizing lives in CSS so embeds scale to every viewport.      */
/* Twitter/X, Instagram and LinkedIn draw their own cards inside   */
/* the iframe, and being cross-origin their internals can't be     */
/* restyled — so corners are rounded with clip-path to match the   */
/* site, and the radius must sit on the iframe itself.             */
.blog-content .embed-responsive {
    display: block;
    width: 100%;
    border: none;
    margin: 1.5rem auto;
    /* Transparent while the embed loads, so a slow or failed load
       shows the dark page instead of a white box. */
    background-color: transparent;
    /* Keep the generic .blog-content iframe radius (14px in base.css)
       from double-rounding — corners are handled by the per-provider
       clip-path below. */
    border-radius: 0;
}

/* ── Twitter / X ─────────────────────────────────────────────── */
.blog-content blockquote.twitter-tweet,
.blog-content .twitter-tweet-rendered {
    margin: 1.5rem auto !important;
}

/* ── Instagram ───────────────────────────────────────────────── */
.blog-content .embed-responsive--instagram {
    display: block;
    margin: 1.5rem auto;
    max-width: 450px;
    min-height: 400px;
    transition: height 0.3s ease-out;
    clip-path: inset(0 0 0 0 round 12px);
}

/* ── LinkedIn ────────────────────────────────────────────────── */
.blog-content .embed-responsive--linkedin {
    max-width: 100%;
    height: 600px;
    min-height: 550px;
    clip-path: inset(0 0 0 0 round 12px);
}

/* ── Mobile: shorter heights to avoid excess empty space ──────── */
@media (max-width: 640px) {
    .blog-content .embed-responsive--linkedin {
        height: 550px;
    }
}

/* ── Very small phones ───────────────────────────────────────── */
@media (max-width: 380px) {
    .blog-content .embed-responsive--linkedin {
        height: 500px;
    }
}