/* ── CYBER KENDRA — Main Stylesheet ── All colors via :root CSS variables — change once, applies everywhere. ── */

    /* ── Material Symbols ──────────────────────────────────────────────────────── */
    .material-symbols-outlined {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        font-display: block;
    }



    /* ── Light Mode (default) ────────────────────────────────────────────────── */
    :root {
        /* Brand */
        /* --clr-primary: #b7ec34;
        --clr-primary-dark: #85b208;
        --clr-primary-text: #1a2600; */


        /* Backgrounds & Surfaces */
        /* --clr-bg: #fafbfa;
        --clr-surface: #ffffff;
        --clr-surface-alt: #f1f3e9;
        --clr-hero-overlay: rgba(0, 0, 0, 0.75); */

        /* Text */
        /* --clr-text: #12140d;
        --clr-text-muted: #2d3126;
        --clr-text-dim: #6d7560; */

        /* Borders */
        /* --clr-border: #e2e5d8;
        --clr-border-dim: #e2e5d880; */

        /* Components */
        /* --clr-nav-bg: #ffffff;
        --clr-footer-bg: #ffffff;
        --clr-footer-text: #45483e; */

        /* Spacing */
        --sp-1: 4px;
        --sp-2: 8px;
        --sp-4: 16px;
        --sp-6: 24px;
        --sp-8: 32px;
        --sp-10: 40px;
        --sp-20: 80px;
        --gutter: 20px;
        --max-w: 1280px;

        /* Typography */
        /* --font-display: 'Space Grotesk', sans-serif; */
        /* --font-ui: 'DM Sans', sans-serif;
        --font-body: 'Source Serif 4', serif;
        --font-mono: 'JetBrains Mono', monospace; */

        /* --font-display: 'Garamond', serif;
        --font-ui: 'Garamond', serif;
        --font-body: 'Garamond', serif;
        --font-mono: 'Garamond', serif; */

        /* Radius */
        --radius: 0px;
        --radius-sm: 2px;
        --md: 8px;
        --sm: 4px;

        /* Icons */
        --theme-icon: 'light_mode';
    }

    /* ── Dark Mode ───────────────────────────────────────────────────────────── */
    /* 
    [data-theme="dark"] {
        --clr-primary: #b7ec34;
        --clr-primary-dark: #d4ff52;
        --clr-primary-text: #1A1D15;

        --clr-bg: #0b0c09;
        --clr-surface: #12150e;
        --clr-surface-alt: #181d13;
        --clr-hero-overlay: #000000d1;

        --clr-text: #e9ece3;
        --clr-text-muted: #a3ab95;
        --clr-text-dim: #6d7560;

        --clr-border: #242a19;
        --clr-border-dim: #242a1980;

        --clr-nav-bg: #191919;
        --clr-footer-bg: #191919;
        --clr-footer-text: #9aa882;
    } 
        */

    /* System preference fallback */

    /* ── Reset & Base ────────────────────────────────────────────────────────── */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--font-ui);
        font-size: 16px;
        background-color: var(--clr-bg) !important;
        color: var(--clr-text);
        overflow-x: hidden;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    img {
        display: block;
        max-width: 100%;
    }

    ul {
        list-style: none;
    }

    ::selection {
        background: var(--clr-link);
        color: #fff;
    }

    /* Scroll reveal */
    [data-animate] {
        opacity: 0;
        /* transform: translateY(16px); */
        transition: opacity 0.45s ease-out, transform 0.45s ease-out;
        will-change: opacity, transform;
    }

    [data-animate].visible {
        opacity: 1;
        /* transform: translateY(0); */
    }

    @media (prefers-reduced-motion: reduce) {
        [data-animate] {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }

    /* ========= NAVIGATION ========= */
    .ck-nav {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        padding: 0.5rem 0rem;
        z-index: 100;
        background: var(--clr-nav-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--clr-border);
    }

    .ck-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--sp-6);
    }

    .ck-logo {
        width: 140px;
    }

    .ck-nav__links {
        display: none;
        align-items: center;
    }

    .ck-theme-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-text-muted);
        border-radius: var(--sm);
        transition: color 0.2s;
    }

    .ck-theme-btn:hover {
        color: var(--clr-text);
    }

    .ck-theme-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    [data-theme="dark"] #logo-dark,
    [data-theme="light"] #logo-light,
    [data-theme="dark"] #theme-icon-sun,
    [data-theme="light"] #theme-icon-dark {
        display: inline-block;
    }

    [data-theme="light"] #logo-dark,
    [data-theme="dark"] #logo-light,
    [data-theme="dark"] #theme-icon-dark,
    [data-theme="light"] #theme-icon-sun {
        display: none;
    }

    .ck-nav__link {
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-text-muted);
        text-decoration: none;
        transition: color 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .ck-nav__link:hover {
        color: var(--clr-primary);
        border-bottom: 2px solid var(--clr-primary);
        padding-bottom: 2px;
    }

    .ck-nav__link--active {
        color: var(--clr-primary);
        font-weight: 600;
        border-bottom: 2px solid var(--clr-primary);
        padding-bottom: 2px;
    }

    /* ========= HERO ========= */
    main {
        margin-top: 6.5rem;
    }

    .ck-hero {
        padding: var(--sp-4) var(--sp-6);
        max-width: var(--max-w);
        margin-inline: auto;
    }

    .ck-hero__layout {
        display: grid;
        gap: 0;
        width: 100%;
    }

    .ck-hero__layout--single {
        grid-template-columns: 1fr;
    }

    .ck-hero__layout--split {
        grid-template-columns: 1fr;
    }

    .ck-hero__featured {
        display: block;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    .ck-hero__featured-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #0a0a0a;
        border-radius: var(--md);
    }

    .ck-hero__featured-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
        display: block;
    }

    .ck-hero__featured:hover .ck-hero__featured-img {
        transform: scale(1.04);
    }

    .ck-hero__featured-body {
        padding: 1.1rem 1.2rem 0 0;
    }

    .ck-badge {
        display: inline-block;
        padding: 0.8rem 1rem;
        margin-bottom: 0.6rem;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: var(--sm);
        width: fit-content;
    }

    .ck-hero__title {
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 2.4vw, 1.75rem);
        font-weight: 700;
        color: var(--clr-text);
        line-height: 1.2;
        margin-bottom: 0.55rem;
        transition: color 0.2s;
    }

    .ck-hero__featured:hover .ck-hero__title {
        color: var(--clr-primary);
    }

    .ck-hero__excerpt {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--clr-text-muted);
        line-height: 1.55;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-hero__meta {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        font-family: var(--font-ui);
        font-size: 0.78rem;
        color: var(--clr-text-muted);
    }

    .ck-hero__author {
        color: var(--clr-primary);
        font-weight: 700;
    }

    .ck-hero__sep {
        opacity: 0.35;
    }

    /* Sidebar Posts */
    .ck-hero__sidebar {
        display: flex;
        flex-direction: column;
        border-left: 1px dashed var(--clr-border);
        margin-left: 1.5rem;
        padding-left: 1.5rem;
        gap: 1.5rem;
    }

    .ck-hero__sidebar>*+* {
        border-top: 1px dashed var(--clr-border);
        padding-top: 1.5rem;
    }

    .ck-hero__side-card {
        display: grid;
        grid-template-rows: 1fr auto;
        gap: 0.85rem;
        align-items: start;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: background 0.2s;
    }

    .ck-hero__side-img-wrap {
        aspect-ratio: 3 / 2;
        overflow: hidden;
        background: #0a0a0a;
        border-radius: var(--md);
    }

    .ck-hero__side-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        display: block;
    }

    .ck-hero__side-card:hover .ck-hero__side-img {
        transform: scale(1.06);
    }

    .ck-hero__side-body {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .ck-hero__side-title {
        font-family: var(--font-ui);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
    }

    .ck-hero__side-card:hover .ck-hero__side-title {
        color: var(--clr-primary);
    }

    .ck-hero__side-date {
        font-family: var(--font-ui);
        font-size: 0.72rem;
        color: var(--clr-text-dim);
        margin-top: 0.2rem;
    }

    /* ========= SECTION HEADERS ========= */
    .ck-section {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: var(--sp-10) var(--sp-6);
    }

    .ck-section__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.38rem;
    }

    .ck-section__title {
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: -3.9%;
        text-transform: uppercase;
        color: var(--clr-text-muted);
        border-left: 3px solid var(--clr-primary);
        padding: 0.25rem 0rem;
        padding-left: 1.1rem;
    }

    .ck-section__more {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        color: var(--clr-primary);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: gap 0.2s;
    }

    .ck-section__more:hover {
        gap: 8px;
    }

    /* ========= FEATURED CARDS — 4 Column Grid ========= */
    .ck-featured-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--gutter);
    }

    .ck-feat-card {
        cursor: pointer;
        transition: box-shadow 0.3s;
        border-radius: var(--md);
    }

    .ck-feat-card:hover {
        box-shadow: 0 0 28px rgba(183, 236, 52, 0.18);
    }

    .ck-feat-card__thumb {
        aspect-ratio: 16/9;
        overflow: hidden;
        background: #0c0c0c;
        margin-bottom: 1.1rem;
        border-radius: var(--md);
    }

    .ck-feat-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: filter 0.5s, transform 0.5s;
    }

    .ck-feat-card:hover .ck-feat-card__img {
        transform: scale(1.08);
    }

    .ck-feat-card__content {
        padding: 0rem 1.38rem 1.38rem 1.38rem;
        border-radius: var(--md);
    }

    .ck-feat-card__cat {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--clr-primary);
        display: block;
        margin-bottom: 7px;
    }

    .ck-feat-card__title {
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.35;
        letter-spacing: -2%;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-feat-card:hover .ck-feat-card__title {
        color: var(--clr-primary);
    }

    /* ========= RECENT ARTICLES — 3 Column Grid ========= */
    .ck-recent {
        padding-block: var(--sp-10);
    }

    /* ── Section Head: badge + trailing line ─────────────────────────────────── */
    .ck-recent__head {
        display: flex;
        align-items: center;
        margin-bottom: 2.2rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        gap: 0;
        width: 100%;
        position: static;
    }

    /* Trailing gradient line */
    .ck-recent__head::after {
        content: "";
        flex: 1;
        height: 1.5px;
        background: linear-gradient(
            to right,
            color-mix(in srgb, var(--clr-primary) 50%, transparent),
            transparent 80%
        );
        margin-left: -1rem;
    }

    /* Badge: primary-color bg + diagonal right cut */
    .ck-recent__head h2,
    .ck-recent__head .ck-section__title {
        display: inline-block;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 0.5rem 2.2rem 0.5rem 1.1rem;
        margin: 0;
        border: none;
        border-radius: 10px 3px 0 10px;
        border-left: none !important;
        white-space: nowrap;
        /* Diagonal right-edge cut */
        clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
        position: relative;
        z-index: 1;
        line-height: 1.4;
    }

    .ck-articles-grid {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1rem;
        column-gap: 1rem;
        padding-bottom: 2rem;
    }

    .ck-art {
        cursor: pointer;
        border-radius: var(--md);
        padding: 1.38rem 1.38rem;
        border: 1px solid var(--clr-border);
    }

    .ck-art:hover {
        box-shadow: 0 0 28px rgba(183, 236, 52, 0.18);
    }

    .ck-art__content {
        border-radius: var(--md);
    }

    .ck-art__thumb {
        position: relative;
        overflow: hidden;
        background: #0c0c0c;
        margin-bottom: 1.19rem;
        border-radius: var(--md);
        aspect-ratio: 4 / 3;
    }

    .ck-art__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

    .ck-art:hover .ck-art__img {
        transform: scale(1.05);
    }

    .ck-art__tag {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 3px 7px;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-mono);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: var(--sm);
    }

    .ck-art__index {
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 5%;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        margin-bottom: 6px;
    }

    .ck-art__title {
        font-family: var(--font-ui);
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.4;
        margin-bottom: 9px;
        transition: color 0.2s;
        letter-spacing: -2%;
    }

    .ck-art:hover .ck-art__title {
        color: var(--clr-primary);
    }

    .ck-art__author {
        font-family: var(--font-ui);
        font-size: 0.75rem;
        color: var(--clr-text-dim);
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ck-art__author:hover {
        color: var(--clr-primary);
    }

    /* ========= PAGINATION ========= */
    .ck-pagination {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 2.6rem 0rem;
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--clr-border);
    }

    .ck-pager {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
    }

    .ck-page {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-ui);
        font-size: 0.875rem;
        font-weight: 500;
        border: 1px solid var(--clr-border);
        color: var(--clr-text);
        transition: border-color 0.2s, color 0.2s;
        cursor: pointer;
    }

    .ck-page:hover {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
    }

    .ck-page--active {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        border-color: var(--clr-primary);
        font-weight: 700;
    }

    .ck-page--dots {
        border: none;
        color: var(--clr-text-dim);
        cursor: default;
        width: auto;
        padding-inline: var(--sp-2);
    }

    /* ========= LOAD MORE ========= */
    .ck-loadmore-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem var(--sp-6) 3rem;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .ck-loadmore-wrap.is-done {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }

    .ck-loadmore-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.7rem 2.4rem;
        background: transparent;
        border: 1.5px solid var(--clr-primary);
        color: var(--clr-text);
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: var(--md);
        transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
                    box-shadow 0.22s ease, transform 0.18s ease;
        outline: none;
    }

    .ck-back-btn {
        color: var(--clr-primary);
        padding: 0.7rem 2.4rem;
        background: transparent;
        border: 1.5px solid var(--clr-primary);
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        border-radius: var(--md);
        transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
                    box-shadow 0.22s ease, transform 0.18s ease;
    }
    .ck-back-btn:hover{
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        box-shadow: 0 0 22px -10px var(--clr-primary);
        transform: translateY(-1px);
    }

    .ck-explore-btn {
    color: var(--clr-text);
        padding: 0.7rem 2.4rem;
        background: transparent;
        border: 1.5px solid var(--clr-border);
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        border-radius: var(--md);
        transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
                    box-shadow 0.22s ease, transform 0.18s ease;
    }

    [data-theme="dark"] .ck-explore-btn{
        border-color: color-mix(in srgb, var(--clr-border-dim) 80%, #fff);
    }

    .ck-explore-btn:hover{
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        box-shadow: 0 0 22px -10px var(--clr-primary);
        transform: translateY(-1px);
        border: 1.5px solid var(--clr-primary);
    }

    .ck-loadmore-btn:hover:not(:disabled) {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        box-shadow: 0 0 22px rgba(183, 236, 52, 0.28);
        transform: translateY(-1px);
    }

    .ck-loadmore-btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: none;
    }

    .ck-loadmore-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        border-color: var(--clr-border);
    }

    /* Spinner */
    .ck-loadmore-btn__loader {
        display: none;
        width: 13px;
        height: 13px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        flex-shrink: 0;
        animation: ck-lm-spin 0.65s linear infinite;
    }

    .ck-loadmore-btn.is-loading .ck-loadmore-btn__loader {
        display: inline-block;
    }

    .ck-loadmore-btn.is-loading .ck-loadmore-btn__arrow {
        display: none;
    }

    .ck-loadmore-btn.is-loading .ck-loadmore-btn__text {
        opacity: 0.7;
    }

    /* Down arrow — subtle bounce */
    .ck-loadmore-btn__arrow {
        font-size: 1rem;
        line-height: 1;
        animation: ck-lm-bounce 1.6s ease-in-out infinite;
        display: inline-block;
    }

    @keyframes ck-lm-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes ck-lm-bounce {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(3px); }
    }

    /* ========= NEWSLETTER & CTA ========= */
    .ck-newsletter {
        background: var(--clr-surface-alt);
        padding: var(--sp-20) var(--sp-6);
    }

    .ck-newsletter__inner {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-bottom: var(--sp-6);
        display: flex;
        flex-direction: column;
        gap: var(--sp-6);
        align-items: flex-start;
    }

    .ck-newsletter__copy {
        /* max-width: 600px; */
        padding: 0rem 0.4rem;
        margin-bottom: 1rem;
    }

    .ck-newsletter__title {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--clr-primary);
        margin-bottom: 0.6rem;
        line-height: 1.3;
        font-family: var(--font-display);
    }

    .ck-newsletter__desc {
        font-family: var(--font-ui);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
        line-height: 1.5;
    }

    .ck-newsletter__form {
        display: flex;
        width: 100%;
        flex-shrink: 0;
    }

    .ck-newsletter__input {
        flex: 1;
        padding: 0.8rem 1.2rem;
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        font-family: var(--font-mono);
        font-size: 0.875rem;
        line-height: 1rem;
        letter-spacing: 0.05em;
        color: var(--clr-text);
        outline: none;
        transition: border-color 0.2s;
        border-radius: var(--md) 0px 0px var(--md);
    }

    .ck-newsletter__input::placeholder {
        color: var(--clr-text-dim);
    }

    .ck-newsletter__input:focus {
        border-color: var(--clr-primary);
    }

    .ck-newsletter__btn {
        padding: 0 2.5rem;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.2s;
        margin-right: 6px;
        border-radius: 0 var(--md) var(--md) 0;
    }

    .ck-newsletter__btn:hover {
        background: var(--clr-primary-dark);
    }

    .ck-newsletter__wrap {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        align-items: flex-start;
    }

    .ck-nl-cta {
        max-width: var(--max-w);
        padding: var(--sp-6) 0 0 0;
    }

    .ck-nl-cta__inner {
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: 24px;
        padding: var(--sp-6);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--sp-6);
        position: relative;
        overflow: hidden;
    }

    .ck-nl-cta__glow {
        position: absolute;
        width: 260px;
        height: 260px;
        background: rgba(183, 236, 52, 0.08);
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        user-select: none;
    }

    .ck-nl-cta__glow--tr {
        top: -80px;
        right: -80px;
    }

    .ck-nl-cta__glow--bl {
        bottom: -80px;
        left: -80px;
    }

    [data-theme="dark"] .ck-nl-cta__inner {
        background: #171a0f;
    }

    /* ========= FOOTER ========= */
    .ck-footer {
        background: var(--clr-footer-bg);
        padding-top: var(--sp-10);
        padding-bottom: var(--sp-6);
        border-top: 1px solid var(--clr-border);
    }

    .ck-footer__logo {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-top: 0;
    }

    .ck-footer__inner {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--sp-6);
    }

    .ck-footer__bottom {
        display: flex;
        gap: var(--sp-4);
        padding: 2.6rem 0.5rem 2.6rem 0.5rem;
        border-top: 1px solid var(--clr-border);
        justify-content: space-between;
            align-items: center;
    }

    .ck-footer__legal {
        font-family: var(--font-mono);
        font-size: 1rem;
        letter-spacing: 0.08em;
        color: var(--clr-text-dim);
    }

    .ck-footer__legal a {
        color: var(--clr-primary);
        margin-inline: 4px;
    }

    .ck-footer__social-label {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--clr-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ck-footer__social {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
    }

    .ck-footer__social-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    [data-theme="dark"] .ck-footer__social-row img {
        filter: brightness(0) invert(1);
    }

    .ck-social-link {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--clr-border);
        color: var(--clr-text-muted);
        border-radius: 4px;
        padding: 0.4rem;
        transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    .ck-social-link img {
        width: 16px;
        height: 16px;
        display: block;
        fill: currentColor;
        flex-shrink: 0;
        transition: filter 0.2s;
    }

    .ck-social-link:hover {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
        background: color-mix(in srgb, var(--clr-primary) 10%, transparent);
    }

    .ck-social-link:hover img {
        filter: grayscale(0);
    }

    .ck-footer__legal-links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 20px;
    }

    .ck-footer__legal-links li {
        position: relative;
    }

    .ck-footer__legal-links li:not(:last-child)::after {
        content: "|";
        position: absolute;
        right: -16px;
        color: color-mix(in srgb, var(--clr-primary) 50%, #fff);
    }

    .ck-footer__legal-links a {
        text-decoration: none;
        color: var(--clr-primary);
        font-size: 0.8rem;
        letter-spacing: 1%;
        font-weight: 400;
        text-underline-offset: 2px;
        text-decoration-thickness: 0px;
        transition: text-underline-offset 0.25s cubic-bezier(0, 0, 0.2, 1);
        padding: 0.5rem 0;
    }

    .ck-footer__legal-links a:hover {
        text-underline-offset: 0.5rem;
    }

    /* ========= CATEGORY HIGHLIGHTS SECTION ========= */
    .ck-cat-section {
        /* padding: var(--sp-20) var(--sp-6); */
        padding: var(--sp-10) var(--sp-6);
        max-width: var(--max-w);
        margin-inline: auto;
    }

    .ck-cat-section__inner {
        width: 100%;
    }

    .ck-cat-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ck-cat-grid>*:not(:nth-child(-n+2)) {
        border-top: 1px dashed var(--clr-border);
    }

    .ck-cat-block {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 1rem;
    }

    .ck-cat-block:nth-child(odd) {
        border-right: 1px dashed var(--clr-border);
    }

    .ck-cat-block__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.1rem;
    }

    .ck-cat-block__name {
        font-family: var(--font-display);
        font-size: 0.8rem;
        border: 3px solid var(--clr-primary);
        background: color-mix(in srgb, var(--clr-primary) 100%, transparent);
        padding: 0.1rem 0.5rem;
        border-radius: 5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-primary-text);
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .ck-cat-block__name:hover {
        opacity: 0.75;
    }

    .ck-cat-block__view-all {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--clr-text-dim);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        transition: color 0.2s, gap 0.2s;
    }

    .ck-cat-block__view-all:hover {
        color: var(--clr-primary);
        gap: 6px;
    }

    .ck-cat-block__posts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ck-cat-feat {
        display: block;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        height: 100%;
        border-right: 1px dashed var(--clr-border);
    }

    .ck-cat-feat a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        margin-right: 1rem;
    }

    .ck-cat-feat__img-wrap {
        width: 100%;
        aspect-ratio: 4 / 4;
        overflow: hidden;
        background: var(--clr-surface-alt);
        border-radius: var(--md);
        margin-bottom: 1.2rem;
    }

    .ck-cat-feat__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .ck-cat-feat a:hover .ck-cat-feat__img {
        transform: scale(1.05);
    }

    .ck-cat-feat__body {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .ck-cat-feat__title {
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
        margin-bottom: 0.5rem;
    }

    .ck-cat-feat a:hover .ck-cat-feat__title {
        color: var(--clr-primary);
    }

    .ck-cat-feat__excerpt {
        font-family: var(--font-body);
        font-size: 0.7rem;
        color: var(--clr-text-muted);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-cat-feat__meta {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: wrap;
        font-family: var(--font-ui);
        font-size: 0.7rem;
        color: var(--clr-text-dim);
    }


    .ck-cat-side {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding-left: 1rem;
    }

    .ck-cat-side>*+* {
        border-top: 1px dashed var(--clr-border);
        padding-top: 1.5rem;
    }

    .ck-cat-side__card {
        display: grid;
        grid-template-rows: 1fr auto;
        gap: 0rem;
        align-items: start;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }

    .ck-cat-side__card:last-child {
        border-bottom: none;
    }

    /*.ck-cat-side__card:hover {*/
    /*    background: color-mix(in srgb, var(--clr-primary) 5%, transparent);*/
    /*    border-radius: var(--sm);*/
    /*}*/

    .ck-cat-side__body {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        min-width: 0;
    }

    .ck-cat-side__title {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
        margin-bottom: 0.5rem;
    }

    .ck-cat-side__card:hover .ck-cat-side__title {
        color: var(--clr-primary);
    }

    .ck-cat-side__meta {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-family: var(--font-ui);
        font-size: 0.68rem;
        color: var(--clr-text-dim);
    }


    .ck-cat-side__img-wrap {
        aspect-ratio: 4 / 2;
        overflow: hidden;
        background: var(--clr-surface-alt);
        border-radius: var(--md);
        margin-bottom: 1rem;
    }

    .ck-cat-side__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .ck-cat-side__card:hover .ck-cat-side__img {
        transform: scale(1.08);
    }

    .ck-cat-feat__author {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 2rem;
        display: none;
    }

    .ck-cat-feat__avatar img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .ck-cat-feat__author-name {
        font-family: var(--font-ui);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--clr-text);
    }

    /* ========= ARCHIVE PAGE ========= */
    .site-main--archive {
        min-height: 60vh;
    }

    .ck-archive-hero {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 3.5rem var(--sp-6) 2.5rem;
        border-bottom: 1px solid var(--clr-border);
    }

    .ck-archive-hero__inner {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        max-width: 760px;
    }

    .ck-archive-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--clr-primary);
    }

    .ck-archive-hero__eyebrow-line {
        display: inline-block;
        width: 32px;
        height: 2px;
        background: var(--clr-primary);
        border-radius: 2px;
        flex-shrink: 0;
    }

    .ck-archive-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 5.5vw, 3rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        color: var(--clr-text);
        line-height: 1.05;
    }

    .ck-archive-hero__author-row {
        display: flex;
        align-items: center;
        gap: var(--sp-6);
        flex-wrap: wrap;
    }

    .ck-archive-hero__author-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--clr-border);
        flex-shrink: 0;
    }

    .ck-archive-hero__author-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ck-archive-hero__title--author {
        font-size: clamp(1.8rem, 4vw, 3rem);
    }

    .ck-archive-hero__desc {
        font-family: var(--font-ui);
        font-size: 1rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
        max-width: 600px;
    }

    .ck-archive-hero__desc p {
        margin: 0;
        color: var(--clr-text-muted);
    }

    .ck-archive-hero__bio {
        font-family: var(--font-ui);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
        max-width: 560px;
    }

    .ck-archive-hero__meta {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        margin-top: var(--sp-2);
    }

    .ck-archive-hero__count {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        padding: 4px 10px;
        border: 1px solid var(--clr-border);
        border-radius: 2px;
    }

    .ck-archive-hero__sep {
        color: var(--clr-text-dim);
        font-size: 0.8rem;
    }

    .ck-archive-hero__date-label {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
    }

    .ck-archive-filters {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: var(--sp-6) var(--sp-6) 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ck-archive-filters::-webkit-scrollbar {
        display: none;
    }

    .ck-archive-filters__inner {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding-bottom: var(--sp-4);
        width: max-content;
        min-width: 100%;
    }

    .ck-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 6px 14px;
        font-family: var(--font-mono);
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-muted);
        border: 1px solid var(--clr-border);
        border-radius: 2px;
        white-space: nowrap;
        transition: border-color 0.2s, color 0.2s, background 0.2s;
        text-decoration: none;
    }

    .ck-filter-pill:hover {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
    }

    .ck-filter-pill--active {
        background: var(--clr-primary);
        border-color: var(--clr-primary);
        color: var(--clr-primary-text);
    }

    .ck-filter-pill--active:hover {
        color: var(--clr-primary-text);
        background: var(--clr-primary-dark);
    }

    .ck-filter-pill__count {
        font-size: 0.75rem;
        opacity: 0.7;
    }

    .ck-archive-body {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 0 var(--sp-6);
    }

    .ck-archive-section {
        padding-top: var(--sp-10);
    }

    .ck-archive-hero-post-wrap {
        border-bottom: 1px solid var(--clr-border);
        padding-bottom: var(--sp-10);
    }

    .ck-archive-hero-post {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-10);
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .ck-archive-hero-post:hover {
        opacity: 0.92;
    }

    .ck-archive-hero-post__thumb {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
        border-radius: var(--md);
        background: var(--clr-surface-alt);
        border: 1px solid var(--clr-border);
    }

    .ck-archive-hero-post__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }

    .ck-archive-hero-post:hover .ck-archive-hero-post__thumb img {
        transform: scale(1.04);
    }

    .ck-archive-hero-post__no-img {
        width: 100%;
        height: 100%;
        background: var(--clr-surface-alt);
    }

    .ck-archive-hero-post__badge {
        position: absolute;
        top: 14px;
        left: 14px;
        font-family: var(--font-mono);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--clr-primary-text);
        background: var(--clr-primary);
        padding: 4px 10px;
        border-radius: 2px;
    }

    .ck-archive-hero-post__body {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        padding: var(--sp-4) 0;
    }

    .ck-archive-hero-post__meta {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        flex-wrap: wrap;
    }

    .ck-archive-hero-post__author {
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--clr-text);
        background: var(--clr-surface-alt);
        padding: 0.8rem 0.8rem;
        border-radius: 5rem;
        line-height: 0;
    }

    .ck-archive-hero-post__dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--clr-text-dim);
        display: inline-block;
        flex-shrink: 0;
    }

    .ck-archive-hero-post__date,
    .ck-archive-hero-post__read {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
    }

    .ck-archive-hero-post__title {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3vw, 2.4rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.12;
        color: var(--clr-text);
        transition: color 0.2s;
    }

    .ck-archive-hero-post:hover .ck-archive-hero-post__title {
        color: var(--clr-primary);
    }

    .ck-archive-hero-post__excerpt {
        font-family: var(--font-ui);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
    }

    .ck-archive-hero-post__cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--clr-primary);
        padding: 8px 0;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s, gap 0.2s;
        width: fit-content;
        margin-top: var(--sp-2);
    }

    .ck-archive-hero-post:hover .ck-archive-hero-post__cta {
        border-color: var(--clr-primary);
        gap: 10px;
    }

    .ck-archive-card {
        display: flex;
        flex-direction: column;
        gap: 0;
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .ck-archive-card__no-img {
        width: 100%;
        height: 100%;
        background: var(--clr-surface-alt);
        box-shadow: inset 0 0 0 1px var(--clr-border);
    }



    .ck-archive-card__arrow {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--clr-primary);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.25s, transform 0.25s;
        margin-top: var(--sp-2);
        display: inline-block;
        width: fit-content;
    }

    .ck-archive-card:hover .ck-archive-card__arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .ck-archive-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--sp-6);
        padding: 6rem var(--sp-6);
        max-width: 480px;
        margin-inline: auto;
    }

    .ck-archive-empty__icon {
        font-size: 3rem;
        color: var(--clr-text-dim);
        opacity: 0.4;
    }

    .ck-archive-empty__title {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        text-transform: uppercase;
        color: var(--clr-text);
    }

    .ck-archive-empty__msg {
        font-family: var(--font-ui);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
        line-height: 1.6;
    }

    .ck-archive-empty__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--clr-primary);
        padding: 10px 20px;
        border: 1px solid var(--clr-primary);
        border-radius: 2px;
        transition: background 0.2s, color 0.2s;
        text-decoration: none;
    }

    .ck-archive-empty__btn:hover {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
    }

    .ck-archive-pagination {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: var(--sp-10) var(--sp-6) 5rem;
        border-top: 1px solid var(--clr-border);
        margin-top: var(--sp-10);
    }


    .ck-archive-pagination .prev,
    .ck-archive-pagination .next {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding-inline: var(--sp-6);
    }

    [data-theme="dark"] .ck-archive-hero-post__thumb,
    [data-theme="dark"] .ck-archive-card__thumb {
        border-color: var(--clr-border);
    }

    /* ========= ARTICLE PAGE ========= */
    #scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        background: var(--clr-primary);
        z-index: 9999;
        width: 0%;
        transition: width 0.1s linear;
    }

    .ck-art-hero {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 0rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .ck-art-hero__left {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.25rem 0;
        margin-bottom: 2rem;
    }

    .ck-art-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4.5vw, 2.75rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.025em;
        color: var(--clr-text);
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .ck-art-hero__subtitle {
        font-family: var(--font-ui);
        font-size: 1.15rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--clr-text-muted);
        margin-bottom: 0.5rem;
    }

    .ck-art-hero__meta-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        font-family: var(--font-ui);
        font-size: 0.88rem;
        color: var(--clr-text-dim);
        margin-top: 0.25rem;
    }

    .ck-art-hero__by-author {
        color: var(--clr-text-muted);
        font-weight: 400;
    }

    .ck-art-hero__by-author a {
        color: #059669;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    [data-theme="dark"] .ck-art-hero__by-author a {
        color: #10b981;
    }

    .ck-art-hero__by-author a:hover {
        text-decoration: underline;
    }

    /* ──────────────────────────────────────────────────────────────────────────
    AUTHOR HOVER CARD POPUP
    ────────────────────────────────────────────────────────────────────────── */
    .ck-art-hero__by-author {
        position: relative;
        z-index: 20;
        color: var(--clr-text-muted);
        font-weight: 400;
    }

    .ck-author-hover-wrapper {
        position: relative;
        display: inline-block;
    }

    .ck-author-hover-link {
        color: #059669;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    [data-theme="dark"] .ck-author-hover-link {
        color: #10b981;
    }

    .ck-author-hover-link:hover {
        text-decoration: underline;
    }

    .ck-author-hover-card {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 320px;
        max-width: 88vw;
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.25s;
    }

    .ck-author-hover-card::before {
        content: '';
        position: absolute;
        top: -14px;
        left: 0;
        width: 100%;
        height: 14px;
    }

    .ck-author-hover-card__arrow {
        position: absolute;
        top: -6px;
        left: 24px;
        width: 10px;
        height: 10px;
        background: var(--clr-surface);
        border-left: 1px solid var(--clr-border);
        border-top: 1px solid var(--clr-border);
        transform: rotate(45deg);
    }

    .ck-author-hover-wrapper:hover .ck-author-hover-card,
    .ck-author-hover-card:hover {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .ck-author-hover-card__header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .ck-author-hover-card__avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--clr-border);
        flex-shrink: 0;
    }

    .ck-author-hover-card__meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ck-author-hover-card__role {
        font-size: 0.73rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--clr-text-muted);
        opacity: 0.9;
    }

    .ck-author-hover-card__name {
        font-size: 0.98rem;
        font-weight: 700;
        color: var(--clr-primary);
        text-decoration: none;
    }

    .ck-author-hover-card__name:hover {
        text-decoration: underline;
    }

    .ck-author-hover-card__bio {
        font-size: 0.84rem;
        line-height: 1.55;
        color: var(--clr-text);
    }

    .ck-author-hover-card__bio p {
        margin: 0 0 8px 0;
    }

    .ck-author-hover-card__bio p:last-child {
        margin-bottom: 0;
    }

    .ck-author-hover-card__footer {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--clr-border-dim);
    }

    .ck-author-hover-card__icon-link {
        color: var(--clr-text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .ck-author-hover-card__icon-link:hover {
        color: var(--clr-primary);
        transform: translateY(-1px);
    }

    .ck-art-hero__meta-sep {
        color: var(--clr-text-dim);
        opacity: 0.4;
        font-size: 0.85rem;
        user-select: none;
    }

    .ck-art-hero__pub-date,
    .ck-art-hero__read-time {
        color: var(--clr-text-muted);
        font-weight: 400;
    }

    .ck-art-hero__comments-count {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        color: var(--clr-text-muted);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .ck-art-hero__comments-count:hover {
        color: #059669;
    }

    [data-theme="dark"] .ck-art-hero__comments-count:hover {
        color: #10b981;
    }

    .ck-art-hero__share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
        color: var(--clr-text-muted);
        cursor: pointer;
        transition: color 0.15s ease, transform 0.15s ease;
    }

    .ck-art-hero__share-btn:hover {
        color: #059669;
        transform: scale(1.15);
    }

    [data-theme="dark"] .ck-art-hero__share-btn:hover {
        color: #10b981;
    }

    .ck-art-hero__sep-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--clr-border);
        display: inline-block;
    }

    .ck-art-layout {
        /* max-width: var(--max-w); */
        margin-inline: auto;
        padding: 0 var(--sp-6) var(--sp-10);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-10);
        align-items: start;
    }

    .ck-art-content {
        display: flex;
        flex-direction: column;
        gap: var(--sp-10);
        max-width: 100%;
    }

    .ck-art-body {
        display: flex;
        flex-direction: column;
        gap: var(--sp-6);
        font-family: var(--font-ui);
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--clr-text-muted);
        margin: 0 0.25rem;
    }

    .ck-art-body p {
        color: var(--clr-text-muted);
        font-size: 1.15rem;
        font-family: var(--font-ui);
        letter-spacing: -2%;
        line-height: 1.4;
    }

    /* ========= ENTRY CONTENT TYPOGRAPHY (.ck-entry-content) ========= */
    .ck-entry-content {
        font-family: var(--font-body);
        font-size: 1.05rem;
        line-height: 1.78;
        color: var(--clr-text-muted);
    }

    .ck-entry-content .note {
        background: #e8f0fe;
        padding: 1.5rem;
        margin: 1.5rem 0;
        border-radius: var(--md);
        display: flex;
        align-items: start;
        gap: var(--sp-4);
    }

    .ck-entry-content .note p {
        color: var(--clr-link);
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: 1%;
        margin: 0;
    }

    .ck-entry-content .note::before {
        content: "★";
        color: var(--clr-link);
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .ck-entry-content .note p code {
        background: #0000;
        padding: 0;
        border: 0;
    }

    .ck-entry-content .note.er {
        background: #ffdada;
    }

    .ck-entry-content .note.tp {
        background: #ccffbe;
    }

    .ck-entry-content .note.wr {
        background: #faedab;
    }

    .ck-entry-content .note.er p {
        color: #a61717;
    }

    .ck-entry-content .note.tp p {
        color: #17a64e;
    }

    .ck-entry-content .note.wr p {
        color: #c87300;
    }

    .ck-entry-content .note.er::before {
    content: "⚠";
        color: #a61717;
    }

    .ck-entry-content .note.wr::before {
        content: "⚠";
        color: #c87300;
    }

    .ck-entry-content .note.tp::before {
        content: "\1F4A1";   
        color: #17a64e;

    }

    .ck-entry-content p {
        font-family: var(--font-ui);
        /* font-size: 0.9rem; */
        font-size: var(--p-font-size);
        font-weight: var(--p-font-weight);
        line-height: 1.75rem;
        color: var(--clr-text-muted);
        margin-bottom: clamp(1.8rem, 5vw, 2rem);
    }

    .ck-entry-content p:last-child {
        margin-bottom: 0;
    }

    .ck-entry-content li p {
        margin-bottom: 0;
    }

    .ck-entry-content code {
        /* direction: ltr;
        display: inline-block;
        font-family: inherit;
        overflow-wrap: break-word;
        text-align: initial;
        white-space: pre-wrap; */


            border: 1px solid #dadce0;
        border-radius: 4px;
        font: 500 90% / 1em Roboto Mono,monospace;
        word-break: break-word;
        padding: 1px 4px;
    }

    /* ──────────────────────────────────────────────────────────────────────────
    DYNAMIC DETAILS & SUMMARY (ACCORDION) STYLING & PURE CSS SMOOTH ANIMATION
    ────────────────────────────────────────────────────────────────────────── */
    :root {
        interpolate-size: allow-keywords;
    }

    .ck-entry-content details {
        border-radius: 12px;
        border: 1px solid var(--clr-border);
        background: var(--clr-surface);
        position: relative;
        overflow: hidden;
        margin: 1.5rem 0;
        padding: 0;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .ck-entry-content details[open] {
        border-color: var(--clr-primary);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .ck-entry-content details summary {
        font-family: var(--font-ui);
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--clr-text);
        padding: 1.1rem 1.4rem;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .ck-entry-content details summary::-webkit-details-marker {
        display: none;
    }

    .ck-entry-content details summary::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--clr-text-muted);
        border-bottom: 2px solid var(--clr-text-muted);
        transform: rotate(45deg);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
        margin-left: 1rem;
        flex-shrink: 0;
    }

    .ck-entry-content details[open] summary::after {
        transform: rotate(-135deg);
        border-color: var(--clr-primary);
    }

    .ck-entry-content details summary:hover {
        color: var(--clr-primary);
        background: color-mix(in srgb, var(--clr-primary) 4%, transparent);
    }

    /* Pure CSS Smooth Content Animation for all browsers */
    .ck-entry-content details > *:not(summary) {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding-inline: 1.4rem;
        padding-top: 0;
        padding-bottom: 0;
        transform: translateY(-8px);
        transition: max-height 0.4s cubic-bezier(0, 1, 0, 1),
                    opacity 0.3s ease,
                    transform 0.3s ease,
                    padding 0.3s ease;
    }

    .ck-entry-content details[open] > *:not(summary) {
        max-height: 2500px;
        opacity: 1;
        transform: translateY(0);
        animation: ckDetailsExpand 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.35s ease 0.04s,
                    transform 0.35s ease 0.04s,
                    padding 0.3s ease;
    }

    .ck-entry-content details[open] > *:not(summary):first-of-type {
        padding-top: 0.5rem;
    }

    .ck-entry-content details[open] > *:not(summary):last-child {
        padding-bottom: 1.4rem;
    }

    @keyframes ckDetailsExpand {
        0% {
            opacity: 0;
            transform: translateY(-8px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Modern CSS ::details-content support */
    .ck-entry-content details::details-content {
        opacity: 0;
        block-size: 0;
        overflow: hidden;
        transition: opacity 0.35s ease, block-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.35s allow-discrete;
    }

    .ck-entry-content details[open]::details-content {
        opacity: 1;
        block-size: auto;
    }

    /* Headings */
    .ck-entry-content :where(h1, h2, h3, h4, h5, h6) {
        font-family: var(--font-display);
        color: var(--clr-text);
    }

    .ck-entry-content :where(:not(h2, h3)) {
        border-left: none;
        padding-left: 0;
    }

    .ck-entry-content h1 {
        font-size: var(--h1-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h1-font-weight);
    }

    .ck-entry-content h2 {
        font-size: var(--h2-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h2-font-weight);
    }

    .ck-entry-content h3 {
        font-size: var(--h3-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h3-font-weight);
    }

    .ck-entry-content h4 {
        font-size: var(--h4-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h4-font-weight);
    }

    .ck-entry-content h5 {
        font-size: var(--h5-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h5-font-weight);
    }

    .ck-entry-content h6 {
        font-size: var(--h6-font-size);
        margin-bottom: var(--sp-2);
        font-weight: var(--h6-font-weight);
    }


    /* Links */
    .ck-entry-content .article-content-wrapper a {
        color: var(--clr-primary);
        text-decoration: underline;
        text-decoration-color: rgba(183, 236, 52, 0.4);
        text-underline-offset: 3px;
        transition: text-decoration-color 0.2s, color 0.2s;
    }


    .ck-entry-content a:hover {
        color: var(--clr-primary-dark);
        text-decoration-color: var(--clr-primary);
    }

    /* Enhanced Link Contrast Visibility */
    .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link) {
        color: var(--clr-link);
        /* color: rgb(23, 78, 166); */
        /* color: #5f8500 !important; */
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--clr-link) 50%, transparent);
        /* text-decoration-color: rgba(95, 133, 0, 0.3); */
        text-underline-offset: 3px;
        transition: all 0.2s ease;
    }

    .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link):hover {
        color: var(--clr-link-hover);
        /* color: #1e8e3e; */
        text-decoration-color: color-mix(in srgb, var(--clr-link-hover) 50%, transparent);
    }

    [data-theme="dark"] .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link) {
        color: var(--clr-link) !important;
        text-decoration-color: color-mix(in srgb, var(--clr-link) 50%, transparent);
        text-decoration: underline;
    }

    [data-theme="dark"] .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link):hover {
        color: var(--clr-link-hover) !important;
        text-decoration-color: color-mix(in srgb, var(--clr-link-hover) 50%, transparent);
    }

    /* Blockquote */
    .ck-entry-content blockquote {
        border: 1px solid var(--clr-primary);
        padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-10);
        margin: 1rem 0;
        position: relative;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .ck-entry-content blockquote p {
        font-family: var(--font-body);
        font-size: 1rem;
        font-style: italic;
        color: var(--clr-primary);
        margin-bottom: 0;
        line-height: 1.5;
        letter-spacing: 3%;
    }

    .ck-entry-content blockquote::before {
        content: '“';
        position: absolute;
        font-style: italic;
        top: -1.2rem;
        left: 10px;
        font-family: var(--font-display);
        font-size: 6rem;
        color: var(--clr-primary);
        display: flex;
        line-height: 0.9;
        height: 2rem;
        background: var(--clr-bg);
        padding: 0 1.2rem 0 0rem;
    }

    /* Lists */
    .ck-entry-content ul,
    .ck-entry-content ol {
        padding-left: 1.5rem;
        margin-bottom: var(--sp-6);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        list-style-position: inside;
    }

    .ck-entry-content ul {
        list-style: none;
    }

    .ck-entry-content ul li {
        position: relative;
        padding-left: 1.2rem;
        font-family: var(--font-ui);
        font-size: var(--also-read-content-text-font-size);
        font-weight: var(--also-read-content-text-font-weight);
        color: var(--clr-text-muted);
        line-height: 1.65;
    }

    .ck-entry-content ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.58em;
        width: 6px;
        height: 6px;
        background: var(--clr-primary);
        border-radius: 50%;
    }

    .ck-entry-content ol li {
        padding-left: 0.4rem;
        font-family: var(--font-ui);
        font-size: 1rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
    }

    .ck-entry-content ol li::marker {
        color: var(--clr-primary);
        font-weight: 700;
        font-family: var(--font-mono);
    }

    .ck-entry-content ul ul,
    .ck-entry-content ol ol,
    .ck-entry-content ul ol,
    .ck-entry-content ol ul {
        margin-top: var(--sp-2);
        margin-bottom: 0;
    }

    .ck-entry-content .wp-block-accordion-heading {
        border-left: none;
        padding-left: 0;
    }

    .ck-entry-content .wp-block-accordion-item {
        padding: 0.5rem 1rem;
        border: 1px solid var(--clr-border);
        box-shadow: 0 0 28px rgba(183, 236, 52, 0.18);
        margin-bottom: 1rem;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .ck-entry-content .wp-block-accordion-item:hover {
        box-shadow: 0 0 28px rgba(183, 236, 52, 0.48);
    }

    .ck-entry-content .wp-block-accordion-panel {
        border-top: 1px solid var(--clr-border);
        padding: 1rem;
    }

    /* Code & Pre */
    pre {
        position: relative;
        padding: 45px 20px 20px;
        background: #1e1e1e;
        color: #d4d4d4;
        border-radius: 12px;
        overflow-x: auto;
        font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
        font-size: 15px;
        line-height: 1.7;
        border: 1px solid #333;
    }

    pre::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 18px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ff5f57;
        box-shadow: 20px 0 #febc2e, 40px 0 #28c840;
    }

    /* Images & Figures */
    .ck-entry-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        display: block;
        margin: var(--sp-6) 0;
        border: 1px solid var(--clr-border);
    }

    .ck-entry-content figure {
        margin: 3rem 0 !important;
    }

    .ck-entry-content figure img {
        margin: 0;
        width: 100%;
    }

    .ck-entry-content figcaption {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        text-align: center;
        margin-top: var(--sp-2);
        padding-top: var(--sp-2);
        border-top: 1px solid var(--clr-border);
    }

    /* Responsive Embeds & Social Media */
    .ck-entry-content iframe,
    .ck-entry-content object,
    .ck-entry-content embed,
    .ck-entry-content video {
        max-width: 100%;
        border: 0;
        border-radius: 12px;
        display: block;
        margin: 2rem auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        background: var(--clr-surface-alt);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    [data-theme="dark"] .ck-entry-content iframe,
    [data-theme="dark"] .ck-entry-content object,
    [data-theme="dark"] .ck-entry-content embed {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .wp-block-embed,
    .ck-entry-content .wp-block-embed {
        margin: 2.5rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .wp-block-embed__wrapper {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Telegram Embed */
    iframe[id^="telegram-post"],
    iframe[src*="telegram.org"] {
        margin: 2rem auto !important;
        display: block !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Facebook Embed */
    iframe[src*="facebook.com"],
    .fb-post,
    .fb-video {
        margin: 2rem auto !important;
        display: block !important;
        max-width: 100% !important;
        border-radius: 8px;
        border: 1px solid var(--clr-border) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }

    [data-theme="dark"] iframe[src*="facebook.com"] {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    }

    /* LinkedIn Embed */
    iframe[src*="linkedin.com"],
    .wp-block-embed-linkedin iframe {
        width: 100% !important;
        height: 600px;
        border-radius: 12px;
        border: 1px solid var(--clr-border) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
    }

    [data-theme="dark"] iframe[src*="linkedin.com"] {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    }

    .ck-entry-content blockquote.twitter-tweet,
    .ck-entry-content blockquote.instagram-media,
    .ck-entry-content blockquote.fb-xfbml-parse-ignore {
        border: 1px solid var(--clr-border) !important;
        background: var(--clr-surface-alt) !important;
        padding: 1.5rem !important;
        margin: 2rem auto !important;
        max-width: 550px;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    .ck-entry-content blockquote.twitter-tweet::before,
    .ck-entry-content blockquote.instagram-media::before {
        display: none !important;
    }

    .ck-entry-content .alignleft {
        float: left;
        margin-right: var(--sp-6);
        margin-bottom: var(--sp-4);
        max-width: 45%;
    }

    .ck-entry-content .alignright {
        float: right;
        margin-left: var(--sp-6);
        margin-bottom: var(--sp-4);
        max-width: 45%;
    }

    .ck-entry-content .aligncenter {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* ── Tables ──────────────────────────────────────────────────────────────── */

    /* Responsive scroll wrapper — Gutenberg block */
    .ck-entry-content figure.wp-block-table,
    .ck-entry-content .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: var(--sp-6) 0;
        border-radius: 12px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09);
    }

    .ck-entry-content figure.wp-block-table table,
    .ck-entry-content .wp-block-table table {
        margin: 0; /* margin is on the wrapper */
        box-shadow: none;
        border-radius: 12px;
    }

    .ck-entry-content .wp-block-columns {
        background: var(--clr-surface);
        padding: 1rem;
    }

    .ck-entry-content figure {
        border-radius: 12px;
    border: 1px solid var(--clr-border);
    }

    .ck-entry-content table {
        width: 100%;
        border-collapse: collapse !important;
        border: none !important;
        margin: var(--sp-6) 0;
        font-family: var(--font-ui);
        font-size: 0.9rem;
        background: var(--clr-surface);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09);
    }

    .ck-entry-content table *{
        border: none !important;
    }

    /* ── Header row ─────────────────────────────────────────────────────────── */
    .ck-entry-content table thead {
        /* background: var(--clr-primary); */
        border-width: 1px;
    }

    .ck-entry-content table tbody tr {
        border-bottom: 1px solid var(--clr-border) !important;
    }

    .ck-entry-content table tbody tr:last-child {
        border: none !important;
    }

    .ck-entry-content table tbody tr td:not(:last-child) {
        border-right: 1px solid var(--clr-border) !important;
    }


    .ck-entry-content th {
        background: linear-gradient(90deg, var(--clr-primary), color-mix(in srgb, var(--clr-primary) 70%, #fff));
        color: var(--clr-primary-text);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        padding: 14px 18px;
        text-align: left;
        border: none;
        white-space: nowrap;
    }

    /* Round header corners */
    .ck-entry-content thead tr th:first-child { border-radius: 12px 0 0 0; }
    .ck-entry-content thead tr th:last-child  { border-radius: 0 12px 0 0; }

    /* ── Body rows ──────────────────────────────────────────────────────────── */
    .ck-entry-content td {
        padding: 14px 18px;
        border-bottom: 1px solid var(--clr-border);
        color: var(--clr-text);
        vertical-align: middle;
        font-size: 0.88rem;
        background: var(--clr-surface);
        transition: background 0.15s ease;
    }



    .ck-entry-content tbody tr:hover td {
        background: var(--clr-surface-alt);
    }

    /* Last row — remove border + round corners */
    .ck-entry-content tr:last-child td {
        border-bottom: none;
    }

    .ck-entry-content tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; }
    .ck-entry-content tbody tr:last-child td:last-child  { border-radius: 0 0 12px 0; }


    .ck-entry-content hr {
        border: none;
        border-top: 1px solid var(--clr-border);
        margin: 2.5rem 0;
    }

    .ck-entry-content pre {
        padding: 0;
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .ck-entry-content pre code {
        border: 0;
    }

    .ck-entry-content .also-read {
        border-radius: 12px;
        border: 1px solid var(--clr-primary);
        padding: 1.5rem;
        background: var(--clr-surface);
        position: relative;
        overflow: hidden;
        margin: 2rem 0;
    }

    .ck-entry-content .also-read ul {
        margin: 0;
        padding: 0;
    }

    .ck-entry-content .also-read ul li a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link) {
        color: var(--clr-text) !important;
        font-family: var(--font-ui);
        text-decoration: none !important;
    }
    .ck-entry-content .also-read ul li a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link):hover {
        color: var(--clr-primary) !important;
    }

    .ck-entry-content .also-read h4 {
        font-size: var(--also-read-title-font-size);
        color: var(--clr-primary-text);
        padding: 1px 1rem;
        border-radius: 4px;
        display: inline-block;
        font-weight: var(--also-read-title-font-weight);
        position: relative;
        z-index: 1;
        transform: translateX(-1rem);
        margin-bottom: 1rem;
    }
    .ck-entry-content .also-read h4::before {
        content: '';
        position: absolute;
        inset: 0;
        left: -1rem;
        background: var(
            --clr-primary
        );
        z-index: -1;
        border-radius: 0 1rem 1rem 0;
    }


    [data-theme="dark"] .ck-entry-content code,
    [data-theme="dark"] .ck-entry-content pre {
        background: #1a1f0f;
    }


    /* Related Articles */
    .ck-art-related {
        padding: var(--sp-10) 0;
        border-top: 1px solid var(--clr-border);
        border-bottom: 1px solid var(--clr-border);
    }

    .ck-art-related__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--gutter);
    }

    .ck-art-rel-card {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        cursor: pointer;
    }

    .ck-art-rel-card__thumb {
        aspect-ratio: 16/9;
        overflow: hidden;
        border: 1px solid var(--clr-border);
        border-radius: 4px;
    }

    .ck-art-rel-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

    .ck-art-rel-card:hover .ck-art-rel-card__thumb img {
        transform: scale(1.06);
    }

    .ck-art-rel-card__title {
        font-family: var(--font-ui);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.35;
        transition: color 0.2s;
    }

    .ck-art-rel-card:hover .ck-art-rel-card__title {
        color: var(--clr-primary);
    }

    /* Sidebar & Cards */
    .ck-art-sidebar {
        display: none;
        flex-direction: column;
        gap: var(--sp-10);
        position: sticky;
        top: calc(90px + 0.5rem);
    }

    .ck-sidebar-card {
        border: 1px solid var(--clr-primary);
        border-radius: 8px;
        padding: var(--sp-2) var(--sp-4);
        padding-top: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .ck-sidebar-card.ck-article-social-card {
        all: unset;
    }

    .ck-sidebar-card__title {
        margin-top: -0.75rem;
        margin-bottom: 0.75rem;
        background: var(--clr-bg);
        padding: 0 0.75rem;
        width: fit-content;
    }

    .ck-sidebar-latest__link {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-4);
        padding: 6px 8px;
        border-radius: 4px;
        text-decoration: none;
        color: inherit;
        transition: background 0.18s;
    }

    .ck-sidebar-latest__link:hover {
        background: var(--clr-surface-alt);
    }

    .ck-toc-divider {
        border: none;
        border-top: 1px solid var(--clr-border);
        margin: 4px 0;
    }

    .ck-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ck-toc-link {
        display: block;
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-weight: 400;
        color: var(--clr-text-muted);
        padding: 5px 8px 5px 10px;
        border-radius: 4px;
        border-left: 2px solid transparent;
        text-decoration: none;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .ck-toc-link:hover {
        background: var(--clr-surface-alt);
        color: var(--clr-text);
    }

    .ck-toc-link.toc-active {
        color: var(--clr-primary);
        font-weight: 600;
        border-left-color: var(--clr-primary);
        background: color-mix(in srgb, var(--clr-primary) 8%, transparent);
    }

    .ck-toc-list__sub .ck-toc-link {
        padding-left: 22px;
        font-size: 0.78rem;
        color: var(--clr-text-dim);
    }

    .ck-toc-list__sub .ck-toc-link.toc-active {
        color: var(--clr-primary);
    }

    /* Latest Posts Sidebar Widget */
    .ck-sidebar-latest {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ck-sidebar-latest__item {
        border-radius: 4px;
        overflow: hidden;
    }

    .ck-sidebar-latest__item+.ck-sidebar-latest__item {
        border-top: 1px solid var(--clr-border-dim);
    }

    .ck-sidebar-latest__thumb {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        border-radius: 4px;
        overflow: hidden;
        background: var(--clr-surface-alt);
    }

    .ck-sidebar-latest__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

    .ck-sidebar-latest__link:hover .ck-sidebar-latest__thumb img {
        transform: scale(1.06);
    }

    .ck-sidebar-latest__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ck-sidebar-latest__cat {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--clr-primary);
    }

    .ck-sidebar-latest__title {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.35;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-sidebar-latest__link:hover .ck-sidebar-latest__title {
        color: var(--clr-primary);
    }

    .ck-sidebar-latest__date {
        font-family: var(--font-mono);
        font-size: 0.57rem;
        color: var(--clr-text-dim);
        letter-spacing: 0.04em;
    }

    /* Sidebar & Footer Ad Units */
    .ck-sidebar-ad,
    .ck-comments-ad,
    .ck-footer-ad {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        overflow: hidden;
    }

    .ck-comments-ad,
    .ck-footer-ad {
        margin-top: var(--sp-8);
        margin-bottom: var(--sp-8);
        margin-left: auto;
        margin-right: auto;
        max-width: 760px;
        width: 100%;
    }

    .ck-sidebar-ad__label,
    .ck-comments-ad__label,
    .ck-footer-ad__label {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        text-align: center;
        display: block;
        padding-bottom: 2px;
        border-bottom: 1px solid var(--clr-border-dim);
    }

    .ck-sidebar-ad__unit {
        width: 100%;
        min-height: 60px;
        overflow: hidden;
        border-radius: 4px;
    }

    .ck-comments-ad__unit,
    .ck-footer-ad__unit {
        width: 100%;
        min-height: 100px;
        overflow: hidden;
        border-radius: 4px;
    }

    .ck-sidebar-ad__unit .adsbygoogle,
    .ck-comments-ad__unit .adsbygoogle,
    .ck-footer-ad__unit .adsbygoogle {
        display: block;
        width: 100%;
    }

    /* Sidebar Social Grid */
    .ck-sidebar-social-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
        margin-top: var(--sp-4);
    }

    .ck-article-social-card {
        margin-top: var(--sp-8);
    }

    .ck-sidebar-social-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 6px;
        text-decoration: none !important;
        transition: all 0.2s ease-in-out;
        color: #fff !important;
    }

    .ck-sidebar-social-item img,
    .ck-sidebar-social-item svg {
        width: 18px;
        height: 18px;
        object-fit: contain;
        fill: currentColor;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .ck-sidebar-social-item img {
        filter: brightness(0) invert(1);
    }

    .ck-sidebar-social-name {
        font-family: var(--font-ui);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: capitalize;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        line-height: normal;
    }

    .ck-sidebar-social-item:hover {
        transform: translateY(-1.5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .ck-sidebar-social-item:hover img,
    .ck-sidebar-social-item:hover svg {
        transform: scale(1.08);
    }

    .ck-sidebar-social-item--facebook {
        background: #1877F2;
        color: #ffffff;
    }

    .ck-sidebar-social-item--facebook:hover {
        background: #1565C0;
    }

    .ck-sidebar-social-item--twitter {
        background: #0f1419;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .ck-sidebar-social-item--twitter:hover {
        background: #000000;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .ck-sidebar-social-item--linkedin {
        background: #0A66C2;
        color: #ffffff;
    }

    .ck-sidebar-social-item--linkedin:hover {
        background: #08529C;
    }

    .ck-sidebar-social-item--youtube {
        background: #FF0000;
        color: #ffffff;
    }

    .ck-sidebar-social-item--youtube:hover {
        background: #CC0000;
    }

    .ck-sidebar-social-item--telegram {
        background: #0088cc;
        color: #ffffff;
    }

    .ck-sidebar-social-item--telegram:hover {
        background: #0077b5;
    }

    .ck-sidebar-social-item--whatsapp {
        background: #25D366;
        color: #ffffff;
    }

    .ck-sidebar-social-item--whatsapp:hover {
        background: #128C7E;
    }

    .ck-sidebar-social-item--reddit {
        background: #FF4500;
        color: #ffffff;
    }

    .ck-sidebar-social-item--reddit:hover {
        background: #E03D00;
    }

    .ck-sidebar-social-item--instagram,
    .ck-sidebar-social-item--insta {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        color: #ffffff;
    }

    .ck-sidebar-social-item--instagram:hover,
    .ck-sidebar-social-item--insta:hover {
        background: linear-gradient(45deg, #e08322 0%, #d5572b 25%, #cb1632 50%, #bb1255 75%, #ab0777 100%);
        filter: brightness(1.1);
    }

    /* Post Featured Image & Callouts */
    .ck-post-featured-image {
        width: 100%;
        margin-bottom: var(--sp-6);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--clr-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        aspect-ratio: 16 / 9;
    }

    .ck-post-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .ck-post-featured-image:hover img {
        transform: scale(1.02);
    }

    .ck-tldr {
        background: var(--clr-surface-alt);
        border-left: 4px solid var(--clr-primary);
        border-radius: 0 12px 12px 0;
        padding: 1.5rem 1.75rem;
        margin-bottom: 2.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        position: relative;
        overflow: hidden;
    }

    [data-theme="dark"] .ck-tldr {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .ck-tldr::after {
        content: 'TL;DR';
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        font-family: var(--font-mono);
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--clr-text);
        opacity: 0.08;
        pointer-events: none;
        user-select: none;
        letter-spacing: -0.05em;
    }

    [data-theme="dark"] .ck-tldr::after {
        opacity: 0.03;
    }

    .ck-tldr__header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.85rem;
    }

    .ck-tldr__icon {
        color: var(--clr-primary-dark);
        font-size: 1.35rem;
        display: inline-flex;
        align-items: center;
    }

    [data-theme="dark"] .ck-tldr__icon {
        color: var(--clr-primary);
    }

    .ck-tldr__title {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--clr-text);
    }

    .ck-tldr__content {
        font-family: var(--font-ui);
        font-size: 0.98rem;
        line-height: 1.65;
        color: var(--clr-text-muted);
    }

    .ck-tldr__content p {
        margin-bottom: 0.75rem !important;
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
    }

    .ck-tldr__content p:last-child {
        margin-bottom: 0 !important;
    }

    .ck-tldr__content ul,
    .ck-tldr__content ol {
        margin: 0.75rem 0 !important;
        padding-left: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--sp-2) !important;
        list-style-position: outside !important;
    }

    .ck-tldr__content ul {
        list-style-type: disc !important;
    }

    .ck-tldr__content ol {
        list-style-type: decimal !important;
    }

    .ck-tldr__content li {
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
        padding-left: 0.25rem !important;
        position: static !important;
    }

    .ck-tldr__content ul li::before,
    .ck-tldr__content ol li::before {
        display: none !important;
    }


    .ck-key-highlights {
        border: 1px solid var(--clr-primary);
        border-radius: 12px;
        padding: 1.5rem;
        padding-top: 0;
        position: relative;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
        position: relative;
    }

    .ck-key-highlights__header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: -1rem;
        padding: 0 0.75rem;
        width: fit-content;
        background: var(--clr-bg);
        transition: all 0.2s ease;
    }

    .ck-key-highlights__header:not(.is-expanded) {
        margin-top: 1.5rem;
    }

    .ck-key-highlights ul {
        padding: 0;
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .ck-key-highlights ul.is-expanded {
        padding-top: 3rem;
    }

    .ck-key-highlights__icon {
        color: var(--clr-primary-dark);
        font-size: 1.5rem;
    }

    [data-theme="dark"] .ck-key-highlights__icon {
        color: var(--clr-primary);
    }

    .ck-key-highlights__title {
        font-family: var(--font-display);
        font-size: var(--key-highlights-title-font-size);
        font-weight: var(--key-highlights-title-font-weight);
        letter-spacing: normal;
        color: var(--clr-text);
    }

    .ck-key-highlights__list {
        list-style: none;
        padding: 0;
        margin: 0 0 0 !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ck-highlights-item {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .ck-highlights-item--hidden {
        display: none;
        opacity: 0;
        transform: translateY(8px);
    }

    .ck-highlights-link {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        color: var(--clr-text-muted);
        font-family: var(--font-ui);
        font-size: var(--key-highlights-content-text-font-size);
        font-weight: var(--key-highlights-content-text-font-weight);
        line-height: 1.4;
        transition: all 0.25s ease;
        height: 100%;
    }

    .ck-highlights-num {
        font-family: var(--font-mono);
        font-size: 0.95rem;
        color: var(--clr-primary-dark);
    }

    [data-theme="dark"] .ck-highlights-num {
        color: var(--clr-primary);
    }

    .ck-key-highlights__toggle-btn__wrapper {
        display: flex;
        justify-content: end;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
    }

    .ck-key-highlights__toggle-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--clr-text-muted);
        font-family: var(--font-ui);
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        background:#0000;
        border-radius: 20px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }


    .ck-key-highlights__toggle-btn:hover {
        background: var(--clr-surface-alt);
        color: var(--clr-text);
        border-color: var(--clr-text-dim);
    }

    .ck-key-highlights.is-expanded .ck-highlights-item--hidden {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .ck-key-highlights__list li {
        padding-left: 0 !important;
    }

    .ck-key-highlights__list li::before {
        display: none !important;
    }

    /* Google News & Follow Box */
    .ck-google-follow-box {
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1rem 0;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    }

    .ck-google-follow-box__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .ck-google-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.5rem;
        font-family: var(--font-ui);
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 8px;
        border: 1px solid var(--clr-border);
        color: var(--clr-text) !important;
        background: var(--clr-surface-alt);
        transition: all 0.25s ease;
        cursor: pointer;
        text-decoration: none !important;
    }

    .ck-google-btn:hover {
        text-decoration: none !important;
    }

    .ck-google-btn--gnews:hover {
        border-color: #4285f4;
        background: #4285f4;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
    }

    .ck-google-btn--preferred:hover {
        border-color: #ea4335;
        background: #ea4335;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3);
    }

    .ck-google-btn__logo {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .ck-google-btn__icon {
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    /* ========= POST NAVIGATION (Prev / Next) ========= */
    .post-navigation {
        max-width: 760px;
        display: flex;
        justify-content: space-between;
        gap: var(--sp-6);
    }

    .nav-links {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: var(--sp-6);
    }

    .nav-previous,
    .nav-next {
        flex: 1;
    }

    .nav-next {
        text-align: right;
    }

    .nav-previous a,
    .nav-next a {
        display: flex;
        gap: var(--sp-4);
        align-items: center;
        text-decoration: none;
        transition: color 0.2s;
    }

    .nav-previous a {
        flex-direction: row;
    }

    .nav-next a {
        flex-direction: row-reverse;
        text-align: right;
    }

    .nav-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .nav-thumb {
        width: 80px;
        height: 60px;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid var(--clr-border);
        background: var(--clr-surface-alt);
    }

    .nav-thumb__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

    .nav-previous a:hover .nav-thumb__img,
    .nav-next a:hover .nav-thumb__img {
        transform: scale(1.08);
    }

    .nav-previous a:hover,
    .nav-next a:hover {
        color: var(--clr-primary);
    }

    .nav-subtitle {
        font-family: var(--font-mono);
        font-size: 1rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
    }

    .nav-title {
        font-family: var(--font-ui);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--clr-text);
        line-height: 1.3;
        transition: color 0.2s;
    }

    .nav-previous a:hover .nav-title,
    .nav-next a:hover .nav-title {
        color: var(--clr-primary);
    }

    /* ========= COMMUNITY DISCUSSION — Comment Section ========= */
    .ck-discussion {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 2.25rem 2rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);
        text-align: left;
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .ck-discussion__head {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--clr-border);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .ck-discussion__title-row {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.4rem;
    }

    .ck-discussion__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--clr-primary) 15%, transparent);
        color: var(--clr-primary);
        flex-shrink: 0;
    }

    .ck-discussion__title {
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 2.5vw, 1.75rem);
        font-weight: 700;
        color: var(--clr-text);
        line-height: 1.2;
        margin: 0;
    }

    .ck-discussion__subtitle {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--clr-text-muted);
        line-height: 1.55;
    }

    .ck-discussion__meta-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: var(--sp-2);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--clr-border-dim);
    }

    .ck-discussion__count {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: var(--font-mono);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--clr-text-muted);
        background: var(--clr-surface-alt);
        padding: 0.3rem 0.7rem;
        border-radius: 100px;
    }

    .ck-comment-list,
    .ck-comment-list .children {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ck-comment-list {
        display: flex;
        flex-direction: column;
        gap: var(--sp-10);
        order: 2;
    }

    .ck-comment {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem 0;
        border-bottom: 2px solid var(--clr-border);
    }

    .ck-comment-list>.ck-comment:last-child {
        border-bottom: none;
    }

    .ck-comment__avatar {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid var(--clr-border);
        position: relative;
        z-index: 3;
    }

    .ck-comment__avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        border: 1px solid var(--clr-border);
        object-fit: cover;
        display: block;
        background-color: var(--clr-surface-muted, #27272a);
    }

    .ck-comment__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .ck-comment__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.6rem;
        flex-wrap: wrap;
    }

    .ck-comment__author-row {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .ck-comment__name {
        font-family: var(--font-ui);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--clr-text);
        text-decoration: none;
        transition: color 0.2s;
    }

    a.ck-comment__name:hover {
        color: var(--clr-primary);
    }

    .ck-comment__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 100px;
    }

    .ck-comment__badge--author {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
    }

    .ck-comment__badge--member {
        background: var(--clr-surface-alt);
        color: var(--clr-text-muted);
        border: 1px solid var(--clr-border);
    }

    .ck-comment__date {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: var(--clr-text-dim);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ck-comment__moderation {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        color: var(--clr-text-dim);
        font-style: italic;
        margin-bottom: 0.5rem;
        padding: 0.4rem 0.8rem;
        border-left: 3px solid var(--clr-border);
        background: var(--clr-surface-alt);
    }

    .ck-comment__text {
        font-family: var(--font-body);
        font-size: 0.92rem;
        color: var(--clr-text);
        line-height: 1.65;
        margin-bottom: 0.65rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .ck-comment__text p {
        margin: 0 0 0.5em;
        font-family: var(--font-body);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
    }

    .ck-comment__text p:last-child {
        margin-bottom: 0;
    }

    .ck-comment__actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .ck-comment__reply {
        display: inline-flex;
    }

    .ck-comment__reply a,
    .ck-comment__reply .comment-reply-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-family: var(--font-ui);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--clr-text-dim);
        text-decoration: none;
        padding: 0.25rem 0.6rem;
        border: 1px solid var(--clr-border-dim);
        border-radius: 100px;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .ck-comment__reply a:hover,
    .ck-comment__reply .comment-reply-link:hover {
        color: var(--clr-primary);
        border-color: var(--clr-primary);
        background: color-mix(in srgb, var(--clr-primary) 8%, transparent);
    }

    .children>.ck-comment:last-child {
        border-bottom: none;
    }

    .ck-comment .children .ck-comment {
        gap: var(--sp-2);
    }

    .ck-comment .children .ck-comment__avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .ck-comment .children .ck-comment__author {
        font-size: 0.82rem;
    }

    .ck-comment .children .ck-comment__date {
        font-size: 0.55rem;
    }

    .ck-comment .children .ck-comment__text {
        font-size: 0.88rem;
    }

    .ck-no-comments {
        text-align: center;
        padding: 1.5rem 1rem;
        color: var(--clr-text-muted);
        font-family: var(--font-ui);
        font-size: 0.95rem;
        border: 1px dashed var(--clr-border);
        border-radius: var(--radius-sm);
    }

    .ck-comment-pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin: 1.5rem 0 2.5rem;
    }

    .ck-comment-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 0.6rem;
        font-family: var(--font-ui);
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--clr-text-muted);
        border: 1px solid var(--clr-border);
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    .ck-comment-pagination .page-numbers:hover {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
    }

    .ck-comment-pagination .page-numbers.current {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        border-color: var(--clr-primary);
        font-weight: 700;
    }

    .ck-comment-wrap {
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--clr-border);
        order: 1;
    }

    .ck-comment-form-col {
        width: 100%;
    }

    #respond {
        width: 100%;
    }

    #reply-title {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--clr-text);
        margin-bottom: 1.2rem;
        display: block;
    }

    #reply-title small {
        font-size: 0.8rem;
        font-weight: 400;
        margin-left: 0.75rem;
    }

    #reply-title small a {
        color: var(--clr-text-dim);
        font-family: var(--font-ui);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.2s;
    }

    #reply-title small a:hover {
        color: var(--clr-primary);
    }

    .ck-form-note {
        font-family: var(--font-ui);
        font-size: 0.78rem;
        color: var(--clr-text-dim);
    }

    #commentform {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .comment-form-author,
    .comment-form-email,
    .comment-form-url,
    .comment-form-comment {
        margin: 0;
        position: relative;
    }

    .ck-field-icon {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        color: var(--clr-text-dim);
        pointer-events: none;
        z-index: 1;
    }

    #commentform input[type="text"],
    #commentform input[type="email"],
    #commentform input[type="url"] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        font-family: var(--font-ui);
        font-size: 0.9rem;
        color: var(--clr-text);
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-sm);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    #commentform input[type="text"]::placeholder,
    #commentform input[type="email"]::placeholder,
    #commentform input[type="url"]::placeholder {
        color: var(--clr-text-dim);
    }

    #commentform input[type="text"]:focus,
    #commentform input[type="email"]:focus,
    #commentform input[type="url"]:focus {
        border-color: var(--clr-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 15%, transparent);
    }

    #commentform textarea#comment {
        width: 100%;
        padding: 0.85rem 1rem;
        font-family: var(--font-ui);
        font-size: 0.9rem;
        color: var(--clr-text);
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-sm);
        resize: vertical;
        min-height: 130px;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        line-height: 1.6;
    }

    #commentform textarea#comment::placeholder {
        color: var(--clr-text-dim);
    }

    #commentform textarea#comment:focus {
        border-color: var(--clr-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 15%, transparent);
    }

    .comment-form-cookies-consent {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0;
    }

    .comment-form-cookies-consent input[type="checkbox"] {
        margin-top: 2px;
        accent-color: var(--clr-primary);
        flex-shrink: 0;
    }

    .comment-form-cookies-consent label {
        font-family: var(--font-ui);
        font-size: 0.78rem;
        color: var(--clr-text-muted);
        line-height: 1.5;
        cursor: pointer;
    }

    .ck-comment-fields-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
        width: 100%;
    }

    .ck-comment-privacy-note {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--font-ui);
        font-size: 0.78rem;
        color: var(--clr-text-muted);
        margin-top: 0.5rem;
    }

    .ck-comment-privacy-note svg {
        color: var(--clr-primary, #059669);
        flex-shrink: 0;
    }

    /* Captcha Verification Widget */
    .ck-captcha-wrapper {
        margin: 1.25rem 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .ck-captcha-wrapper .g-recaptcha,
    .ck-captcha-wrapper .cf-turnstile {
        min-height: 78px;
        border-radius: var(--radius-sm, 4px);
    }

    .ck-captcha-error {
        display: none;
        align-items: center;
        gap: 6px;
        color: #ef4444;
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-weight: 500;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        padding: 6px 12px;
        border-radius: var(--sm, 4px);
    }

    .ck-captcha-error svg {
        flex-shrink: 0;
        stroke: #ef4444;
    }

    @keyframes ckShake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-5px); }
        40%, 80% { transform: translateX(5px); }
    }

    .ck-shake {
        animation: ckShake 0.4s ease-in-out;
    }

    .form-submit {
        margin: 0;
    }

    #commentform .submit,
    #commentform button[type="submit"] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.75rem;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-ui);
        font-size: 0.9rem;
        font-weight: 700;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: background 0.2s, transform 0.15s;
    }

    #commentform .submit:hover,
    #commentform button[type="submit"]:hover {
        background: var(--clr-primary-dark);
        transform: translateY(-1px);
    }

    /* Inline Reply Form inside Comment List */
    .ck-comment-list .comment-respond {
        margin-top: var(--sp-6);
        padding: var(--sp-6);
        border: 1px solid var(--clr-border);
        border-radius: var(--md);
        background: var(--clr-surface);
    }

    .ck-comment-list .comment-respond h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: var(--clr-text);
        margin-bottom: var(--sp-4);
    }

    .ck-comment-list .comment-respond .comment-form {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .ck-comment-list .comment-respond .comment-form-author,
    .ck-comment-list .comment-respond .comment-form-email,
    .ck-comment-list .comment-respond .comment-form-url,
    .ck-comment-list .comment-respond .comment-form-comment {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .ck-comment-list .comment-respond label {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
    }

    .ck-comment-list .comment-respond input[type="text"],
    .ck-comment-list .comment-respond input[type="email"],
    .ck-comment-list .comment-respond input[type="url"],
    .ck-comment-list .comment-respond textarea {
        padding: 10px 14px;
        background: var(--clr-bg);
        border: 1px solid var(--clr-border);
        font-family: var(--font-ui);
        font-size: 0.88rem;
        color: var(--clr-text);
        outline: none;
        border-radius: var(--radius-sm);
        transition: border-color 0.2s;
        width: 100%;
    }

    .ck-comment-list .comment-respond input[type="text"]:focus,
    .ck-comment-list .comment-respond input[type="email"]:focus,
    .ck-comment-list .comment-respond input[type="url"]:focus,
    .ck-comment-list .comment-respond textarea:focus {
        border-color: var(--clr-primary);
    }

    .ck-comment-list .comment-respond textarea {
        min-height: 120px;
        resize: vertical;
    }

    .ck-comment-list .comment-respond .comment-form-cookies-consent {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .ck-comment-list .comment-respond .submit {
        padding: 10px 24px;
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: background 0.2s;
    }

    .ck-comment-list .comment-respond .submit:hover {
        background: var(--clr-primary-dark);
    }

    #cancel-comment-reply-link {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        text-decoration: none;
        margin-left: var(--sp-4);
        transition: color 0.2s;
    }

    #cancel-comment-reply-link:hover {
        color: var(--clr-primary);
    }

    [data-theme="dark"] .ck-discussion__count svg,
    [data-theme="dark"] .ck-comment-form-col textarea,
    [data-theme="dark"] .ck-comment-form-col input[type="text"],
    [data-theme="dark"] .ck-comment-form-col input[type="email"] {
        background: #111509;
    }

    [data-theme="dark"] .ck-comment__avatar img {
        border-color: var(--clr-border);
    }

    [data-theme="dark"] #commentform input[type="text"],
    [data-theme="dark"] #commentform input[type="email"],
    [data-theme="dark"] #commentform input[type="url"],
    [data-theme="dark"] #commentform textarea#comment {
        background: var(--clr-surface-alt);
    }

    [data-theme="dark"] .ck-comment__moderation {
        background: var(--clr-surface-alt);
    }

    [data-theme="dark"] .ck-comment-list .comment-respond {
        background: #1a1f0f;
    }

    [data-theme="dark"] .ck-comment-list .comment-respond input[type="text"],
    [data-theme="dark"] .ck-comment-list .comment-respond input[type="email"],
    [data-theme="dark"] .ck-comment-list .comment-respond input[type="url"],
    [data-theme="dark"] .ck-comment-list .comment-respond textarea {
        background: #111509;
    }

    /* ========= MAGAZINE FEATURED SECTION (.ck-mag-*) ========= */
    .ck-mag-section {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: var(--sp-10) var(--sp-6);
    }

    .ck-mag-section__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--clr-border);
        padding-bottom: 0.85rem;
    }

    .ck-mag-empty {
        font-family: var(--font-ui);
        color: var(--clr-text-dim);
        font-size: 0.9rem;
        padding: 2rem 0;
    }

    .ck-mag-row1 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--clr-border);
    }

    .ck-mag-hero {
        position: relative;
        display: block;
        text-decoration: none;
        overflow: hidden;
        aspect-ratio: 4/3;
        background: #0a0a0a;
        border-radius: var(--md);
    }

    .ck-mag-hero__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.7s ease;
    }

    .ck-mag-hero:hover .ck-mag-hero__img {
        transform: scale(1.05);
    }

    .ck-mag-hero__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.04) 100%);
        display: flex;
        align-items: flex-end;
        padding: 1.5rem 1.6rem;
    }

    .ck-mag-hero__title {
        font-family: var(--font-display);
        font-size: clamp(1rem, 2.2vw, 1.5rem);
        font-weight: 700;
        color: #ffffff;
        line-height: 1.25;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-mag-hero:hover .ck-mag-hero__title {
        color: var(--clr-primary);
    }

    .ck-mag-text {
        display: flex;
        flex-direction: column;
    }

    .ck-mag-text__meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.9rem;
    }

    .ck-mag-text__cat {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        text-decoration: none;
        transition: color 0.2s;
    }

    .ck-mag-text__cat:hover {
        color: var(--clr-primary);
    }

    .ck-mag-text__sep {
        font-size: 0.6rem;
        color: var(--clr-border);
    }

    .ck-mag-text__date {
        font-family: var(--font-ui);
        font-size: 0.68rem;
        color: var(--clr-text-dim);
    }

    .ck-mag-text__title {
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 2.5vw, 1.75rem);
        font-weight: 700;
        color: var(--clr-text);
        line-height: 1.25;
        margin-bottom: 0.85rem;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-mag-text__title a {
        text-decoration: none;
        color: inherit;
    }

    .ck-mag-text:hover .ck-mag-text__title {
        color: var(--clr-primary);
    }

    .ck-mag-text__excerpt {
        font-family: var(--font-body);
        font-size: 0.875rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-mag-card__cat {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--clr-text-dim);
        text-decoration: none;
        transition: color 0.2s;
    }

    .ck-mag-card__cat:hover {
        color: var(--clr-primary);
    }

    .ck-mag-card__sep {
        font-size: 0.6rem;
        color: var(--clr-border);
    }

    .ck-mag-card__date {
        font-family: var(--font-ui);
        font-size: 0.68rem;
        color: var(--clr-text-dim);
    }

    .ck-mag-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ck-mag-card {
        display: flex;
        flex-direction: column;
    }

    .ck-mag-card__thumb-wrap {
        position: relative;
        display: block;
        aspect-ratio: 16/10;
        background: #0a0a0a;
        margin-bottom: 0.95rem;
        text-decoration: none;
        border-radius: var(--md);
        overflow: hidden;
    }

    .ck-mag-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

    .ck-mag-card:hover .ck-mag-card__img {
        transform: scale(1.06);
    }

    .ck-mag-card__img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, #000000e0 0%, #00000059 50%, #00000005 100%);
        display: flex;
        align-items: flex-end;
        padding: 0.8rem 0.9rem;
    }

    .ck-mag-card__img-label {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-mag-card__body {
        flex: 1;
    }

    .ck-mag-card__meta {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.55rem;
    }

    .ck-mag-card__title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--clr-text);
        line-height: 1.35;
        margin-bottom: 0.5rem;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ck-mag-card__title a {
        text-decoration: none;
        color: inherit;
    }

    .ck-mag-card:hover .ck-mag-card__title {
        color: var(--clr-primary);
    }










    .category-title{
        display:flex;
        align-items:center;
        gap:14px;
        padding:14px 18px;
        margin:40px 0 24px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:14px;
        box-shadow:0 6px 18px rgba(0,0,0,.05);
    }

    .category-title::before{
        content:"";
        width:5px;
        height:28px;
        border-radius:20px;
        background:linear-gradient(180deg,#84cc16,#22c55e);
    }

    .category-title h2{
        margin:0;
        font-size:1.2rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:1px;
        color:#1f2937;
    }

    .category-icon{
        color:#22c55e;
        font-size:1.2rem;
    }


    .ck-mag-card__excerpt {
        font-family: var(--font-body);
        font-size: 0.82rem;
        color: var(--clr-text-muted);
        line-height: 1.58;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    [data-theme="dark"] .ck-mag-hero__overlay {
        background: linear-gradient(to top, #000000eb 0%, #00000066 55%, #0000000d 100%);
    }

    [data-theme="dark"] .ck-mag-card__img-overlay {
        background: linear-gradient(to top, #000000e0 0%, #00000059 50%, #00000005 100%);
    }

    .ck-mag-cta {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1.4rem 1.5rem;
        border-radius: 16px;
        min-height: 240px;
        position: relative;
        overflow: hidden;
    }

    .ck-mag-cta__icon {
        font-size: 1.4rem;
        line-height: 1;
        color: #1a1d15;
        margin-bottom: 0.25rem;
    }

    .ck-mag-cta__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .ck-mag-cta__heading {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 800;
        color: #1a1d15;
        line-height: 1.25;
        margin: 0;
    }

    .ck-mag-cta__subtext {
        font-family: var(--font-ui);
        font-size: 1.2rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 1.5;
        margin: 0;
    }

    .ck-mag-cta__btn {
        display: block;
        width: 100%;
        background: #1a1d15;
        color: #ffffff;
        font-family: var(--font-ui);
        font-size: 0.88rem;
        font-weight: 700;
        padding: 0.75rem 1.2rem;
        border-radius: 100px;
        text-decoration: none;
        text-align: center;
        transition: opacity 0.2s, transform 0.15s;
        margin-top: auto;
    }

    .ck-mag-cta__btn:hover {
        opacity: 0.82;
        transform: translateY(-1px);
        color: #ffffff;
    }

    /* ========== TOOL SECTION (.ck-tools-*) ========= */
    .ck-tools-section {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--sp-6);
        padding-block: var(--sp-10);
    }

    .ck-tools-inner {
        display: flex;
        align-items: stretch;
        gap: 0;
        border-radius: var(--md);
        overflow: hidden;
        background: var(--clr-surface);
    }

    .ck-tools-intro {
        flex: 0 0 350px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.6rem;
    }

    .ck-tools-intro__title {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--clr-text);
        line-height: 1.25;
        margin: 0;
    }

    .ck-tools-intro__desc {
        font-family: var(--font-ui);
        font-size: 0.8rem;
        color: var(--clr-text-muted);
        line-height: 1.6;
        margin: 0;
    }

    .ck-tools-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 2rem;
        gap: 1rem;
        border-left: 1px solid var(--clr-border);
    }

    .ck-tool-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 1rem 1.4rem;
        text-decoration: none;
        color: var(--clr-text-muted);
        border: 1px solid var(--clr-border);
        background: var(--clr-surface);
        border-radius: var(--md);
        transition: color 0.2s, background 0.2s;
    }

    .ck-tool-item:hover {
        color: var(--clr-text);
        background: var(--clr-surface-alt);
    }

    .ck-tool-item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: color 0.2s;
    }

    .ck-tool-item__icon svg {
        display: block;
        stroke: var(--clr-text-muted);
        transition: stroke 0.2s;
    }

    .ck-tool-item__icon svg [fill="currentColor"] {
        fill: var(--clr-text-muted);
        transition: fill 0.2s;
    }

    .ck-tool-item:hover .ck-tool-item__icon svg {
        stroke: var(--clr-primary);
    }

    .ck-tool-item:hover .ck-tool-item__icon svg [fill="currentColor"] {
        fill: var(--clr-primary);
    }

    .ck-tool-item__name {
        font-family: var(--font-ui);
        font-size: 0.85rem;
        font-weight: 600;
        color: inherit;
        white-space: nowrap;
    }

    [data-theme="dark"] .ck-tools-inner {
        background: var(--clr-surface);
    }

    /* ============================================================
    BREADCRUMBS
    ============================================================ */
    .ck-breadcrumbs {
        margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
        width: 100%;
    }

    .ck-breadcrumbs__list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 6px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: var(--font-ui);
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .ck-breadcrumbs__item {
        display: inline-flex;
        align-items: center;
        color: var(--clr-text-dim);
    }

    .ck-breadcrumbs__link {
        color: var(--clr-text-muted);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.18s ease;
    }

    .ck-breadcrumbs__link:hover {
        color: var(--clr-primary);
    }

    .ck-breadcrumbs__sep {
        color: var(--clr-primary);
        opacity: 0.8;
        font-size: 0.75rem;
        user-select: none;
        margin-inline: 2px;
    }

    .ck-breadcrumbs__current__text {
        color: var(--clr-text-dim);
        font-weight: 500;
        max-width: min(450px, 80vw);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }

    /* Scoped hero breadcrumbs integration */
    .ck-art-hero .ck-breadcrumbs {
        margin-bottom: var(--sp-4);
    }

    .ck-archive-hero .ck-breadcrumbs,
    .ck-about-hero .ck-breadcrumbs,
    .ck-contact-hero .ck-breadcrumbs,
    .ck-legal-hero .ck-breadcrumbs {
        margin-bottom: var(--sp-4);
    }

    .site-main--page > .container > .ck-breadcrumbs {
        padding-top: var(--sp-6);
    }


    .ck-404-hero {
        text-align: center;
        max-width: 680px;
        margin-inline: auto;
        padding: var(--sp-10) var(--sp-6);
        background: var(--clr-bg-card, rgba(255, 255, 255, 0.03));
        border-radius: var(--radius-lg, 16px);
        position: relative;
        overflow: hidden;
        margin-bottom: var(--sp-10);
    }

    .ck-404-hero::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        height: 360px;
        background: radial-gradient(circle, rgba(183, 236, 52, 0.085) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    .ck-404-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--clr-primary, #b7ec34);
        box-shadow: 0 0 8px var(--clr-primary, #b7ec34);
        animation: ck-pulse 2s infinite;
    }

    .ck-404-code {
        font-family: var(--font-mono);
        font-size: clamp(4.5rem, 11vw, 7.5rem);
        font-weight: 900;
        line-height: 0.8;
        letter-spacing: -0.04em;
        margin: 0 0 0.75rem;
        background: linear-gradient(135deg, var(--clr-text) 30%, var(--clr-primary, #b7ec34) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    [data-theme="dark"] .ck-404-code {
        background: linear-gradient(135deg, var(--clr-text) 30%, var(--clr-text) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    .ck-404-code span {
        font-size: 22rem;
        font-weight: 500; 
        position: relative;
    }
    .ck-404-code::before {
        position: absolute;
        content: '';
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2.8rem;
        height: 1.5rem;
        background: linear-gradient(135deg, var(--clr-text) 30%, var(--clr-primary, #b7ec34) 100%);
        border-radius: 50%;
    }
    .ck-404-code span::before {
        position: absolute;
        content: '';
        top: 45%;
        left: 40%;
        transform: translate(-50%, -50%);
        width: 0.8rem;
        height: 0.8rem;
        background: linear-gradient(135deg, var(--clr-text) 30%, var(--clr-primary, #b7ec34) 100%);
        border-radius: 50%;
    }
    .ck-404-code span::after {
        position: absolute;
        content: '';
        top: 45%;
        left: 62%;
        transform: translate(-50%, -50%);
        width: 0.8rem;
        height: 0.8rem;
        background: linear-gradient(135deg, var(--clr-text) 30%, var(--clr-primary, #b7ec34) 100%);
        border-radius: 50%;
    }

    .ck-404-title {
        font-family: var(--font-ui);
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        font-weight: 800;
        color: var(--clr-text);
        margin-bottom: 0.5rem;
        margin-top: 1rem;
    }

    .ck-404-text {
        font-family: var(--font-ui);
        font-size: 0.95rem;
        color: var(--clr-text-muted);
        line-height: 1.6;
        max-width: 460px;
        margin: 0 auto 1.75rem;
    }

    .ck-404-search {
        max-width: 440px;
        margin: 0 auto 1.75rem;
        width: 100%;
    }

    .ck-404-search {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ck-404-hero form, .ck-404-hero form label { width: 100%; }

    .ck-404-hero form input:not([type="submit"]) {
        width: 100%;
        border: 1px solid var(--clr-primary);
    }

    .ck-404-hero form input[type="submit"] {
        background: var(--clr-primary);
        color: var(--clr-primary-text);
        cursor: pointer;
    }


    .ck-404-hero input {
        background: transparent;
        color: var(--clr-text-dim);
        border: 1px solid var(--clr-border);
        padding: var(--sp-2) var(--sp-4);
        border-radius: 0.51rem;
    }

    .ck-404-search .search-form {
        display: flex;
        gap: 8px;
    }

    .ck-404-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .ck-404-recent {
        margin-top: var(--sp-10);
    }

    /* Comment Form Author & Email Side-by-Side */
    .ck-comment-fields-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        width: 100%;
        margin-bottom: 1rem;
    }

    .ck-comment-fields-row .comment-form-author,
    .ck-comment-fields-row .comment-form-email {
        margin-bottom: 0;
        width: 100%;
    }

    .ck-comment-privacy-note {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-family: var(--font-ui);
        font-size: 0.82rem;
        color: var(--clr-text-muted);
        margin-top: 0.85rem;
        opacity: 0.88;
    }

    .ck-comment-privacy-note svg {
        color: var(--clr-primary, #059669);
        flex-shrink: 0;
    }

    [data-theme="dark"] .ck-comment-privacy-note svg {
        color: var(--clr-primary, #059669);
    }

    /* ── Smart Stretched Card Link Utility ───────────────────────────────────── */
    .ck-art,
    .ck-mag-card,
    .post-card,
    .ck-mag-text,
    .ck-hero__featured,
    .ck-hero__side-card,
    .ck-art-rel-card,
    .ck-sidebar-latest__item,
    .ck-feat-card {
        position: relative;
    }

    .ck-card-link {
        color: inherit;
        text-decoration: none;
    }

    .ck-card-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /* Elevate meta & category containers above full card link overlay */
    .ck-art__thumb,
    .ck-mag-card__thumb-wrap,
    .ck-hero__featured-img-wrap,
    .ck-hero__side-img-wrap,
    .ck-mag-card__meta,
    .ck-mag-text__meta,
    .post-card__meta,
    .ck-art__author {
        position: relative;
        z-index: 10;
    }

    /* Maintain independent clickability & hover states for category & author links */
    .ck-card-meta-link,
    .ck-mag-text__cat,
    .ck-mag-card__cat,
    .post-card__category,
    .ck-art__tag,
    .ck-author-hover-wrapper,
    .ck-badge {
        position: relative;
        z-index: 15;
        pointer-events: auto;
    }

    /* ── Sleek Modern Comments & Threaded Discussion Styling ─────────────────── */
    .ck-comment-list,
    .ck-comment-list .children {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ck-comment-list {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        margin-bottom: 2.5rem;
    }

    /* Base Root Comment */
    .ck-comment {
        position: relative;
        display: block;
        width: 100%;
    }

    .ck-comment__inner {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        width: 100%;
    }

    /* Avatar styling */
    .ck-comment__avatar {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }


    /* Comment Body */
    .ck-comment__body {
        flex: 1;
        min-width: 0;
    }

    /* Header */
    .ck-comment__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .ck-comment__author-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .ck-comment__dot {
        color: var(--clr-text-muted, #71717a);
        font-size: 0.85rem;
    }

    .ck-comment__date {
        font-size: 0.82rem;
        color: var(--clr-text-muted, #71717a);
    }

    /* Author badge */
    .ck-comment__badge {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.15rem 0.45rem;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .ck-comment__badge--author {
        background: rgba(168, 214, 60, 0.15);
        color: var(--clr-primary, #a8d63c);
    }

    /* Comment Text */
    .ck-comment__text {
        font-size: 0.938rem;
        line-height: 1.55;
        color: var(--clr-text-muted, #d4d4d8);
        margin-bottom: 0.5rem;
    }

    .ck-comment__text p {
        margin: 0 0 0.5rem 0;
    }

    .ck-comment__text p:last-child {
        margin-bottom: 0;
    }

    /* Reply Link */
    .ck-comment__actions {
        display: flex;
        align-items: center;
        margin-top: 0.35rem;
    }

    .ck-comment__reply a,
    .comment-reply-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--clr-primary, #a8d63c) !important;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    .ck-comment__reply a:hover,
    .comment-reply-link:hover {
        opacity: 0.85;
    }

    /* ── Threaded Nested Replies (.children) ────────────────────────────────── */
    .ck-comment-list .children {
        width: 100%;
        position: relative;
        margin-top: 1.25rem;
        padding-left: 3.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        box-sizing: border-box;
    }

    /* Vertical Thread Connector Line */
    .ck-comment-list .children::before {
        content: '';
        position: absolute;
        top: -0.75rem;
        bottom: 2.5rem;
        left: 21px;
        width: 2px;
        border-radius: 22rem;
        background: color-mix(in srgb, var(--clr-border, #3f3f46) 20%, #fff);
    }

    /* Nested Reply Card Container */
    .ck-comment-list .children > li.ck-comment {
        position: relative;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Junction Ring Dot on Connector Line */
    .ck-comment-list .children > li.ck-comment::before {
        content: '';
        position: absolute;
        left: -2.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--clr-primary, #a8d63c);
        background: var(--clr-bg, #0b0c0e);
        z-index: 3;
    }

    /* Light mode adjustments */
    [data-theme="light"] .ck-comment-list .children > li.ck-comment {
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    [data-theme="light"] .ck-comment-list .children::before {
        background: #cbd5e1;
    }

    [data-theme="light"] .ck-comment-list .children > li.ck-comment::before {
        box-shadow: 0 0 0 3px #ffffff;
    }