/**
 * Blog article + listing styles.
 * Matches the dark system used across the site (see blueprint.html / nav.css).
 */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --bg: #08080d;
    --txt: #f0f0f5;
    --txt2: rgba(255, 255, 255, .62);
    --txt3: rgba(255, 255, 255, .34);
    --acc: #818cf8;
    --bdr: rgba(255, 255, 255, .07);
    --mx: clamp(16px, 5vw, 80px);
    --ease: cubic-bezier(.23, 1, .32, 1)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.6
}

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

.art {
    max-width: 760px;
    margin: 0 auto;
    padding: 104px var(--mx) 90px
}

/* HEADER */
.art-head {
    padding-bottom: 30px;
    margin-bottom: 38px;
    border-bottom: 1px solid var(--bdr)
}

.crumbs {
    font-size: .78rem;
    color: var(--txt3);
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.crumbs a:hover {
    color: var(--acc)
}

.crumbs .crumb-cur {
    color: var(--txt2)
}

.art-cat {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #a5b4fc;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(129, 140, 248, .28);
    border-radius: 9999px;
    padding: 6px 13px;
    margin-bottom: 20px
}

.art h1 {
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: 16px
}

.art-excerpt {
    font-size: clamp(.98rem, 1.4vw, 1.1rem);
    color: var(--txt2);
    line-height: 1.75;
    margin-bottom: 22px
}

.art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    color: var(--txt3)
}

.art-meta .art-author {
    color: var(--txt2);
    font-weight: 600
}

.art-meta .dot {
    opacity: .5
}

/* BODY */
.art-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .8)
}

.art-body h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin: 46px 0 16px;
    line-height: 1.3
}

.art-body h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight: 650;
    color: #fff;
    margin: 34px 0 12px
}

.art-body p {
    margin-bottom: 20px
}

.art-body ul,
.art-body ol {
    margin: 0 0 22px 1.15rem
}

.art-body li {
    margin-bottom: 10px;
    padding-left: 4px
}

.art-body li::marker {
    color: var(--acc)
}

.art-body strong {
    color: #fff;
    font-weight: 650
}

.art-body a {
    color: #a5b4fc;
    border-bottom: 1px solid rgba(165, 180, 252, .32);
    transition: color .2s ease
}

.art-body a:hover {
    color: #c7ceff
}

.art-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .87em;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 2px 6px;
    color: #c7ceff;
    word-break: break-word
}

.art-body blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--acc);
    border-radius: 0 12px 12px 0;
    background: rgba(99, 102, 241, .07);
    color: var(--txt2);
    font-style: italic
}

.art-body blockquote p:last-child {
    margin-bottom: 0
}

.art-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px
}

/* Wide content must scroll inside itself, never the page. */
.art-body pre,
.art-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto
}

/* CTA */
.art-cta {
    margin-top: 56px;
    padding: 32px 30px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, .2);
    background: radial-gradient(circle at top right, rgba(99, 102, 241, .16), transparent 52%),
        linear-gradient(180deg, rgba(19, 19, 32, .96), rgba(9, 9, 16, .96))
}

.art-cta h2 {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px
}

.art-cta p {
    font-size: .92rem;
    color: var(--txt2);
    line-height: 1.75;
    margin-bottom: 22px
}

.art-cta-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.btn-primary,
.btn-ghost {
    font-size: .88rem;
    font-weight: 650;
    padding: 12px 22px;
    border-radius: 12px;
    transition: all .25s var(--ease)
}

.btn-primary {
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 12px 30px rgba(79, 70, 229, .3)
}

.btn-primary:hover {
    background: #6366f1
}

.btn-ghost {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--bdr);
    color: #fff
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .1)
}

/* RELATED */
.related {
    margin-top: 52px;
    padding-top: 30px;
    border-top: 1px solid var(--bdr)
}

.related h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 16px
}

.related ul {
    list-style: none
}

.related li {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px
}

.related li:last-child {
    border-bottom: none
}

.related a {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .84)
}

.related a:hover {
    color: var(--acc)
}

.related span {
    font-size: .76rem;
    color: var(--txt3);
    white-space: nowrap
}

/* LISTING */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.post-card {
    padding: 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--bdr);
    background: rgba(255, 255, 255, .025);
    transition: border-color .3s var(--ease), transform .3s var(--ease)
}

.post-card:hover {
    border-color: rgba(99, 102, 241, .26);
    transform: translateY(-2px)
}

.post-cat {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txt3);
    margin-bottom: 10px
}

.post-card h2 {
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-bottom: 8px
}

.post-card h2 a:hover {
    color: var(--acc)
}

.post-card p {
    font-size: .88rem;
    color: var(--txt2);
    line-height: 1.7;
    margin-bottom: 12px
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .78rem;
    color: var(--txt3)
}

@media(max-width:600px) {
    .art-cta {
        padding: 26px 22px
    }

    .related li {
        flex-direction: column;
        gap: 4px
    }
}