/* Standard article media frames: fit the entire upload instead of cropping it. */
.security-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.article-image {
    height: auto;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fbff, #e5eff9);
    border: 1px solid #dce7f2;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.article-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    background: radial-gradient(circle at 50% 45%, #fff 0 18%, transparent 45%), linear-gradient(145deg, #edf6ff, #dcebf8);
    color: var(--blue);
}

.article-placeholder b {
    width: 54px;
    height: 54px;
    margin: auto;
    display: grid;
    place-items: center;
    border: 1px solid #9fc2ea;
    background: #fff;
    font: 800 14px Manrope;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
}

.article-placeholder small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.article-cover {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: min(82vh, 920px);
    object-fit: contain;
    margin: 55px auto;
    padding: 0;
    background: linear-gradient(145deg, #f8fbff, #e5eff9);
    border: 1px solid #dce7f2;
}

.article-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 55px 0;
    overflow: hidden;
    outline: none;
}

.article-slides {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #dce7f2;
    background: linear-gradient(145deg, #f8fbff, #e5eff9);
}

.article-slide {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.article-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(82vh, 920px);
    object-fit: contain;
    margin: 0 auto;
}

.slider-arrow {
    position: absolute;
    top: calc(50% - 25px);
    width: 44px;
    height: 44px;
    border: 1px solid #c6d7e9;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--blue);
    box-shadow: 0 8px 22px rgba(16,55,96,.14);
    cursor: pointer;
    font-size: 18px;
}

.slider-arrow.previous { left: 18px; }
.slider-arrow.next { right: 18px; }
.slider-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.slider-footer>span { color: var(--muted); font-size: 11px; }
.slider-dots { display: flex; gap: 7px; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c6d3e1; cursor: pointer; }
.slider-dots button.active { width: 24px; border-radius: 8px; background: var(--blue); }

@media (max-width: 700px) {
    .article-detail {
        width: 100%;
        max-width: 100%;
        padding-right: 16px;
        padding-left: 16px;
        overflow-x: hidden;
    }
    .article-cover {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: 72vh;
        margin: 30px auto;
    }
    .article-slider { width: 100%; max-width: 100%; margin: 30px 0; }
    .article-slides, .article-slide { width: 100%; max-width: 100%; }
    .article-slide { padding: 0; }
    .article-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 72vh;
    }
    .slider-arrow { width: 38px; height: 38px; top: calc(50% - 20px); }
    .slider-arrow.previous { left: 9px; }
    .slider-arrow.next { right: 9px; }
}

.prose h2 {
    margin: 42px 0 14px;
    color: var(--ink);
    font: 700 32px/1.2 Manrope, sans-serif;
    letter-spacing: -1px;
}

.prose h3 {
    margin: 32px 0 12px;
    color: var(--ink);
    font: 700 23px/1.3 Manrope, sans-serif;
}

.prose p { margin: 0 0 24px; }
.prose ul, .prose ol { margin: 0 0 26px; padding-left: 25px; }
.prose li { margin: 7px 0; padding-left: 4px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--blue);
    background: #eef6ff;
    color: #31445d;
}
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }