/* Page-specific: insight detail page (slug-driven). Bespoke BEM nav (.nav__*). */
    :root { --pad-x: 24px; }
    @media (min-width: 768px)  { :root { --pad-x: 48px; } }
    @media (min-width: 1100px) { :root { --pad-x: 80px; } }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x); }
    body { line-height: 1.6; }

    /* Reading progress bar */
    #progressBar { position: fixed; top: 64px; left: 0; z-index: 99; height: 3px; width: 0%; background: var(--accent); transition: width .1s linear; }

    /* Breadcrumb */
    .breadcrumb { padding: 80px var(--pad-x) 16px; border-bottom: 1px solid var(--mid); font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--stone); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .breadcrumb a { color: var(--stone); text-decoration: none; transition: color .15s; }
    .breadcrumb a:hover { color: var(--ink); }
    .breadcrumb span { color: var(--mid); }
    .breadcrumb span:last-child { color: var(--ink); }

    /* Loading / redirect */
    #loadingState { padding: 120px var(--pad-x); text-align: center; color: var(--stone); font-family: 'Poppins', sans-serif; font-size: 14px; }
    #articleContent { display: none; }
    #redirectScreen { display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: var(--pad-x); text-align: center; gap: 24px; }
    #redirectScreen h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(22px, 4vw, 36px); }
    #redirectScreen p { color: var(--stone); font-size: 16px; }
    #redirectLink { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }

    /* Hero image */
    .article-hero { display: none; width: 100%; aspect-ratio: 21/8; overflow: hidden; background: var(--bg); }
    @media (max-width: 767px) { .article-hero { aspect-ratio: 4/3; } }
    .article-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Article header */
    .article-header { padding: 56px var(--pad-x) 40px; max-width: 820px; }
    .article-cat { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 20px; }
    .article-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(28px, 5vw, 52px); line-height: 1.08; color: var(--ink); margin-bottom: 24px; }
    .article-byline { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .article-byline .sep { color: var(--mid); }
    .byline-author-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
    .byline-author-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
    .byline-updated { color: var(--mid); font-style: italic; }

    /* Article body + sidebar layout */
    .article-wrap { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 0 var(--pad-x) 80px; }
    @media (min-width: 1100px) { .article-wrap { grid-template-columns: minmax(0, 700px) 220px; gap: 80px; align-items: start; } }
    .article-body { max-width: 700px; }
    .article-body p { font-size: 18px; line-height: 1.85; color: var(--ink); font-weight: 300; margin-bottom: 32px; }
    .article-body h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 26px); color: var(--ink); margin-top: 56px; margin-bottom: 20px; padding-top: 32px; border-top: 1px solid var(--mid); }
    .article-body h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 32px; margin-bottom: 12px; }
    .article-body blockquote { border-left: 3px solid var(--accent); padding-left: 24px; margin: 40px 0; font-family: 'DM Sans', sans-serif; font-style: normal; font-size: 22px; line-height: 1.55; color: var(--ink); font-weight: 400; }
    .article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 28px; }
    .article-body li { font-size: 17px; line-height: 1.75; color: var(--ink); font-weight: 300; margin-bottom: 8px; }
    .article-body strong { font-weight: 600; }
    .article-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }

    /* Sidebar (share + back) */
    .article-sidebar { position: sticky; top: 88px; }
    .sidebar-share { border-top: 2px solid var(--ink); padding-top: 24px; margin-bottom: 32px; }
    .sidebar-share__label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-bottom: 16px; }
    .sidebar-share__links { display: flex; flex-direction: column; gap: 10px; }
    .sidebar-share__links a { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--stone); text-decoration: none; transition: color .15s; }
    .sidebar-share__links a:hover { color: var(--ink); }
    .sidebar-cta { display: block; margin-top: 32px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--accent); text-decoration: none; border-top: 1px solid var(--mid); padding-top: 20px; transition: letter-spacing .15s; }
    .sidebar-cta:hover { letter-spacing: .08em; }
    .sidebar-back { display: block; margin-top: 16px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--stone); text-decoration: none; transition: color .15s; }
    .sidebar-back:hover { color: var(--ink); }

    /* Related */
    .related-section { padding: 64px var(--pad-x); border-top: 1px solid var(--mid); display: none; }
    .related-section__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
    .related-section__title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
    .related-section__all { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
    .related-grid { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media (min-width: 600px) { .related-grid { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 1100px) { .related-grid { grid-template-columns: repeat(3,1fr); } }
    .related-card { display: block; text-decoration: none; color: var(--ink); background: var(--bg); transition: transform .22s ease, box-shadow .22s ease; }
    .related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(12,12,11,.08); }
    .related-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/2; }
    .related-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .related-card:hover img { transform: scale(1.03); }
    .related-card__cat { position: absolute; top: 12px; left: 12px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; background: var(--white); color: var(--ink); padding: 4px 9px; }
    .related-card__info { padding: 18px 20px 22px; }
    .related-card__info :is(h3,h4) { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 6px; line-height: 1.3; }
    .related-card__info p { font-size: 13px; color: var(--stone); line-height: 1.5; }

    /* CTA strip */
    .cta-strip { background: var(--accent); padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 24px; }
    @media (min-width: 768px) { .cta-strip { flex-direction: row; align-items: center; justify-content: space-between; } }
    .cta-strip__headline { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(24px, 4vw, 40px); color: var(--white); line-height: 1.1; }
    .cta-strip__link { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--white); border: 2px solid var(--white); padding: 16px 36px; white-space: nowrap; transition: background .15s, color .15s; }
    .cta-strip__link:hover { background: var(--white); color: var(--accent); }