/* Public article reading experience. Scoped to avoid affecting other pages. */
.habililab-page .public-article {
    padding: 72px 0 88px;
}

.habililab-page .public-article__header {
    max-width: 1080px;
}

.habililab-page .public-article__header .breadcrumb {
    color: rgba(230, 242, 249, 0.72);
    font-size: 14px;
    margin: 0 0 22px;
}

.habililab-page .public-article__header .eyebrow {
    color: #00e0ff;
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.habililab-page .public-article__header h1 {
    color: #fafafa;
    font-family: "Quicksand", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
    max-width: 1000px;
    text-shadow: 0 3px 18px rgba(1, 9, 30, 0.38);
}

.habililab-page .public-article__header .lead {
    color: #dbe8f3;
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.65;
    margin: 28px 0 18px;
    max-width: 920px;
}

.habililab-page .public-article__header .article-meta {
    color: #b9d0df;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 10px 22px;
    margin-bottom: 18px;
}

.habililab-page .public-article__header .article-meta a {
    color: #00e0ff;
    font-weight: 700;
}

.habililab-page .public-article__header .article-meta a:hover {
    color: #ff715b;
}

.habililab-page .public-article__header .share-bar__trigger {
    background: #fafafa;
    border-color: #fafafa;
    color: #003b73;
}

.habililab-page .public-article__header .share-bar__trigger:hover,
.habililab-page .public-article__header .share-bar.is-open .share-bar__trigger {
    background: #00e0ff;
    border-color: #00e0ff;
    color: #01091e;
}

.habililab-page .article-cover {
    margin: 38px 0 0;
}

.habililab-page .article-cover img {
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(0, 224, 255, 0.3);
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(1, 9, 30, 0.38);
    max-height: none;
    object-fit: cover;
}

.habililab-page .article-cover figcaption {
    color: #b9d0df;
    font-size: 13px;
    margin-top: 10px;
}

.habililab-page .public-article__body {
    background: rgba(1, 9, 30, 0.88);
    border: 1px solid rgba(0, 224, 255, 0.24);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(1, 9, 30, 0.32);
    color: #e8f1f6;
    font-family: "Quicksand", sans-serif;
    font-size: clamp(18px, 1.5vw, 20px);
    line-height: 1.8;
    margin-top: 42px;
    max-width: 900px;
    padding: clamp(30px, 5vw, 58px);
}

.habililab-page .public-article__body .article-text-block,
.habililab-page .public-article__body .article-html-block,
.habililab-page .public-article__body p,
.habililab-page .public-article__body li {
    color: #e8f1f6;
}

.habililab-page .public-article__body p,
.habililab-page .public-article__body .article-text-block {
    margin: 0 0 1.35em;
}

.habililab-page .public-article__body h2,
.habililab-page .public-article__body h3,
.habililab-page .public-article__body h4 {
    color: #fafafa;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 1.8em 0 0.65em;
}

.habililab-page .public-article__body h2 {
    font-size: clamp(28px, 3vw, 36px);
}

.habililab-page .public-article__body h3 {
    color: #00e0ff;
    font-size: clamp(22px, 2.4vw, 28px);
}

.habililab-page .public-article__body a {
    color: #00e0ff;
    font-weight: 700;
    text-decoration-color: rgba(0, 224, 255, 0.55);
    text-underline-offset: 3px;
}

.habililab-page .public-article__body a:hover {
    color: #ff715b;
    text-decoration-color: #ff715b;
}

.habililab-page .public-article__body strong {
    color: #ffffff;
}

.habililab-page .public-article__body .article-text--highlight {
    background: rgba(0, 167, 160, 0.24);
    color: #ffffff;
}

.habililab-page .public-article__body .article-quote {
    background: rgba(0, 167, 160, 0.16);
    border-left: 4px solid #ff715b;
    color: #fafafa;
    margin: 2em 0;
    padding: 22px 26px;
}

.habililab-page .public-article__body .article-separator {
    border-color: rgba(0, 224, 255, 0.32);
    margin: 34px 0;
}

.habililab-page .public-article__body .article-inline-image img,
.habililab-page .public-article__body .article-html-block img {
    border: 1px solid rgba(0, 224, 255, 0.24);
    border-radius: 10px;
}

.habililab-page .public-article__body figcaption,
.habililab-page .public-article__body .article-inline-image figcaption {
    color: #b9d0df;
}

.habililab-page .public-article__body .article-link-card,
.habililab-page .public-article__body .article-attachments {
    background: rgba(0, 59, 115, 0.42);
    border-color: rgba(0, 224, 255, 0.28);
    color: #e8f1f6;
}

.habililab-page .public-article__body .article-attachments h2 {
    color: #fafafa;
}

.habililab-page .article-related-section {
    background: rgba(1, 9, 30, 0.45);
    border-top: 1px solid rgba(0, 224, 255, 0.16);
}

.habililab-page .article-related-section .section-title h2 {
    color: #fafafa;
}

.habililab-page .article-related-section .section-title > a {
    color: #00e0ff;
    font-weight: 700;
}

.habililab-page .article-related-section .column-card {
    background: rgba(1, 9, 30, 0.78);
    border-color: rgba(0, 224, 255, 0.2);
}

.habililab-page .article-related-section .column-card h3 a,
.habililab-page .article-related-section .column-card p,
.habililab-page .article-related-section .column-card .meta {
    color: #e8f1f6;
}

@media (max-width: 820px) {
    .habililab-page .public-article {
        padding: 48px 0 64px;
    }

    .habililab-page .public-article__header h1 {
        font-size: clamp(36px, 11vw, 48px);
    }

    .habililab-page .article-cover {
        margin-top: 28px;
    }

    .habililab-page .article-cover img {
        border-radius: 10px;
    }

    .habililab-page .public-article__body {
        border-radius: 10px;
        font-size: 17px;
        line-height: 1.72;
        margin-top: 28px;
        padding: 26px 20px;
    }
}