/* ==============================
Articles
============================== */

.article-page {
padding-block:
    var(--spacing-xl);
}

.article-layout {
display: grid;

grid-template-columns:
    152px
    minmax(0, var(--content-width));

gap: var(--spacing-lg);
align-items: start;
}

.article-sidebar {
position: sticky;
top: 104px;
}

.article-category {
margin-block:
    0.65rem
    var(--spacing-md);

color: var(--muted);
font-size: 0.9rem;
}

.content-nav {
margin-top:
    var(--spacing-md);

padding-top:
    var(--spacing-md);

border-top:
    1px solid var(--border);
}

.content-nav p {
color: var(--muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.content-nav ol {
margin-top:
    var(--spacing-sm);

list-style: none;
}

.content-nav li + li {
margin-top:
    0.55rem;
}

.content-nav li.h3 {
padding-left:
    0.85rem;
}

.content-nav a {
display: block;

color: var(--muted);
font-size: 0.84rem;
line-height: 1.35;

border-left:
    2px solid transparent;

padding-left:
    0.65rem;

transition:
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.content-nav a:hover,
.content-nav a.is-active {
border-color: var(--accent);
color: var(--text);
transform: translateX(3px);
}

.content-nav-mobile {
display: none;
}

.article-hero {
padding-bottom:
    var(--spacing-lg);

border-bottom:
    1px solid var(--border);
}

.article-hero h1 {
margin-top:
    var(--spacing-sm);

font-size: clamp(
    2.6rem,
    7vw,
    5.8rem
);

line-height: 0.95;
letter-spacing: -0.06em;
}

.article-summary {
max-width: 680px;

margin-top:
    var(--spacing-md);

color: var(--muted);
font-size: clamp(
    1.15rem,
    2vw,
    1.45rem
);
line-height: 1.45;
}

.longform {
padding-top:
    var(--spacing-lg);
}

.longform > * + * {
margin-top:
    1.1rem;
}

.longform h2 {
margin-top:
    var(--spacing-lg);

scroll-margin-top:
    104px;

font-size: clamp(
    1.6rem,
    3vw,
    2.35rem
);

line-height: 1.1;
letter-spacing: -0.035em;
}

.longform h3 {
margin-top:
    var(--spacing-md);

scroll-margin-top:
    104px;

font-size: 1.25rem;
line-height: 1.25;
}

.longform p,
.longform li {
color: var(--text);
font-size: 1.05rem;
line-height: 1.75;
}

.longform ul,
.longform ol {
padding-left:
    1.2rem;
}

.longform li + li {
margin-top:
    0.45rem;
}

.longform a {
color: var(--accent);
border-bottom:
    1px solid color-mix(
        in srgb,
        var(--accent) 45%,
        transparent
    );
}

.longform img {
width: 100%;
height: auto;
display: block;

margin-block:
    var(--spacing-md);

border:
    1px solid var(--border);

background: var(--surface);
}

.longform em {
color: var(--muted);
font-size: 0.92rem;
line-height: 1.5;
}

.longform blockquote {
padding-left:
    var(--spacing-md);

border-left:
    2px solid var(--accent);

color: var(--muted);
}

.longform code {
padding:
    0.12rem
    0.32rem;

background: var(--surface);
border:
    1px solid var(--border);

font-size: 0.92em;
}

.longform pre {
overflow-x: auto;

padding:
    var(--spacing-sm);

background: var(--surface);
border:
    1px solid var(--border);
}

.longform pre code {
padding: 0;
border: none;
background: transparent;
}

.longform table {
width: 100%;
border-collapse: collapse;

font-size: 0.95rem;
}

.longform th,
.longform td {
padding:
    0.65rem
    0.8rem;

border:
    1px solid var(--border);

text-align: left;
vertical-align: top;
}

.longform th {
background: var(--surface);
}

.mobile-back-to-top {
display: none;
}

@media (max-width: 640px) {
.article-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.article-sidebar {
    position: static;
}

.content-nav-desktop {
    display: none;
}

.content-nav-mobile {
    display: block;

    margin-top:
        var(--spacing-md);

    margin-bottom:
        var(--spacing-md);
}

.content-nav-mobile ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.content-nav-mobile li + li {
    margin-top: 0;
}

.content-nav-mobile a {
    min-height: 42px;

    display: flex;
    align-items: center;
}

.mobile-back-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 90;

width: 44px;
height: 44px;

display: inline-flex;
align-items: center;
justify-content: center;

background: var(--text);
color: var(--background);

border:
    1px solid var(--text);

font-size: 1.25rem;
font-weight: 600;
line-height: 1;

box-shadow:
    0 10px 24px rgba(32, 36, 35, 0.12);

opacity: 1;
transform: translateY(0);

transition:
    opacity var(--transition),
    transform var(--transition),
    background var(--transition),
    color var(--transition);
}

.mobile-back-to-top:hover,
.mobile-back-to-top:focus-visible {
background: var(--background);
color: var(--text);
}

.mobile-back-to-top[hidden] {
display: inline-flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
}