:root {
    --content-border: var(--site-border);
    --content-ink: var(--site-ink);
    --content-muted: var(--site-muted);
}

.skip-link {
    background: #17202a;
    border-radius: .4rem;
    color: #fff;
    left: 1rem;
    padding: .55rem .9rem;
    position: fixed;
    top: -5rem;
    z-index: 1000000;
}

.skip-link:focus { top: 1rem; }
.content-shell { max-width: 68rem; padding-inline: clamp(1rem, 4vw, 2rem); }

.home-hero {
    margin: clamp(2.25rem, 7vw, 5rem) auto clamp(2rem, 5vw, 3.5rem);
    max-width: 48rem;
    text-align: center;
}

.home-hero h1 {
    color: #2f3740;
    font-size: clamp(2.55rem, 7vw, 4.85rem);
    font-weight: 420;
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: .7rem 0 1.35rem;
    text-wrap: balance;
}

.home-hero > p:last-child {
    color: var(--content-muted);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    margin: 0 auto;
    max-width: 36rem;
}

.eyebrow {
    color: var(--content-muted);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .15em;
    margin-bottom: .65rem;
    text-transform: uppercase;
}

.home-grid,
.article-grid {
    display: grid;
    gap: 1rem;
}

.home-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.article-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.home-card,
.article-card {
    background: var(--site-surface);
    border: 1px solid var(--content-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow);
}

.home-card {
    color: var(--content-ink);
    display: grid;
    gap: .35rem;
    min-height: 9.25rem;
    padding: 1.4rem 3rem 1.4rem 1.4rem;
    position: relative;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-card::after {
    color: #8a949e;
    content: "→";
    font-size: 1.2rem;
    position: absolute;
    right: 1.35rem;
    top: 1.25rem;
    transition: color 160ms ease, transform 160ms ease;
}

.home-card:hover {
    border-color: #aebfdf;
    box-shadow: 0 .45rem 1.5rem rgba(25, 38, 54, .09);
    color: var(--content-ink);
    text-decoration: none;
    transform: translateY(-2px);
}

.home-card:hover::after { color: var(--site-accent); transform: translateX(2px); }
.home-card strong { font-size: 1.15rem; font-weight: 650; }
.home-card span { color: var(--content-muted); font-size: .94rem; line-height: 1.55; }

.home-social {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 2rem;
}

.home-social a {
    border: 1px solid var(--content-border);
    border-radius: 999px;
    color: var(--content-muted);
    font-size: .82rem;
    padding: .35rem .75rem;
    text-decoration: none;
}

.home-social a:hover { background: var(--site-surface); border-color: #b9c7db; color: var(--site-accent); }

.listing,
.article { margin-block: clamp(1.5rem, 4vw, 2.75rem) 0; }

.listing__header,
.article__header { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.listing__header { margin-inline: auto; text-align: center; }
.listing__intro { color: var(--content-muted); margin: -.45rem 0 0; }

.listing h1,
.article h1 {
    color: #2f3740;
    font-size: clamp(2.35rem, 6vw, 4.25rem);
    font-weight: 420;
    letter-spacing: -.04em;
    line-height: 1.06;
    margin: .4rem 0 1rem;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.article__header > p:not(.article__date) {
    color: #59636d;
    font-size: clamp(1.02rem, 2vw, 1.13rem);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.article-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.35rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.article-card:hover {
    border-color: #bdc9d7;
    box-shadow: 0 .45rem 1.5rem rgba(25, 38, 54, .08);
    transform: translateY(-2px);
}

.article-card h2 { font-size: 1.22rem; line-height: 1.32; margin: .15rem 0 .65rem; }
.article-card h2 a { color: var(--content-ink); text-decoration: none; }
.article-card h2 a:hover { color: var(--site-accent); }
.article-card > p:last-child { color: #626d77; font-size: .91rem; line-height: 1.55; margin: 0; }

.article-card__date,
.article__date {
    color: var(--content-muted);
    font-size: .73rem;
    letter-spacing: .055em;
    line-height: 1.55;
    text-transform: uppercase;
}

.article-card__date { margin-bottom: .45rem; }
.article__date { margin-bottom: 0; }

.article > .breadcrumb { margin-bottom: 1.4rem; }

.runtime-breadcrumb {
    margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

.runtime-breadcrumb .breadcrumb { margin-bottom: 1.4rem; }

.draft-badge {
    background: #fff8dd;
    border: 1px solid #f2dea0;
    border-radius: 999px;
    color: #725c16;
    display: inline-block;
    font-size: .75rem;
    margin-bottom: 1rem;
    padding: .25rem .7rem;
}

.article__hero {
    border: 1px solid var(--content-border);
    border-radius: var(--site-radius);
    display: block;
    height: auto;
    margin-block: 2rem;
    width: 100%;
}

.prose {
    background: var(--site-surface);
    border: 1px solid var(--content-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow);
    font-size: 1.025rem;
    line-height: 1.72;
    overflow-wrap: break-word;
    padding: clamp(1.35rem, 4vw, 3rem);
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin-bottom: 1.25rem; }
.prose ul, .prose ol { margin-bottom: 1.35rem; padding-left: 1.4rem; }
.prose li + li { margin-top: .32rem; }
.prose li > ul, .prose li > ol { margin-block: .35rem .6rem; }

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #303840;
    font-weight: 650;
    line-height: 1.28;
    scroll-margin-top: 1.5rem;
}

.prose h2 { font-size: 1.75rem; letter-spacing: -.02em; margin: 2.7rem 0 1rem; }
.prose h3 { font-size: 1.38rem; margin: 2.15rem 0 .85rem; }
.prose h4 { font-size: 1.14rem; margin: 1.8rem 0 .7rem; }
.prose h5, .prose h6 { font-size: 1rem; margin: 1.55rem 0 .65rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose a { font-weight: 520; }
.protected-contact {
    display: inline-block;
    line-height: inherit;
    max-width: 100%;
    user-select: none;
    vertical-align: middle;
}
.protected-contact canvas { display: block; max-width: 100%; pointer-events: none; }
.protected-contact__fallback { color: var(--content-muted); font-size: .9em; }
.prose code {
    background: #f1f3f5;
    border: 1px solid #e3e7eb;
    border-radius: .28rem;
    color: #26313c;
    font-size: .88em;
    padding: .1em .32em;
}

.prose pre {
    background: #202833;
    border: 1px solid #151c24;
    border-radius: .55rem;
    color: #eef2f6;
    line-height: 1.55;
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem 1.1rem;
}

.prose pre code { background: transparent; border: 0; color: inherit; padding: 0; }
.prose img { border: 1px solid var(--content-border); border-radius: .5rem; display: block; height: auto; max-width: 100%; }
.prose p > em:only-child { color: var(--content-muted); display: block; font-size: .86rem; margin-top: -.65rem; }

.prose blockquote {
    background: #f6f8fb;
    border-left: .2rem solid #9ab4df;
    border-radius: .2rem .5rem .5rem .2rem;
    color: #4d5965;
    margin: 1.6rem 0;
    padding: 1rem 1.2rem;
}

.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { border-color: var(--content-border); margin-block: 2.5rem; opacity: 1; }

.prose table {
    border-collapse: collapse;
    display: block;
    font-size: .91rem;
    margin-block: 1.5rem;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.prose th,
.prose td { border: 1px solid var(--content-border); padding: .55rem .7rem; text-align: left; }
.prose th { background: #f3f5f7; font-weight: 650; }
.related-articles {
    border-top: 1px solid var(--content-border);
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: 2rem;
}

.related-articles > h2 { font-size: 1.45rem; margin-bottom: 1.25rem; }
.related-articles .article-card { box-shadow: none; }

.error-page { margin: clamp(3rem, 10vw, 7rem) auto; max-width: 42rem; }
.error-page__code { color: #dce1e6; font-size: clamp(6rem, 22vw, 12rem); font-weight: 750; letter-spacing: -.08em; line-height: .75; margin: 0 0 2rem; }
.error-page h1 { font-size: clamp(2rem, 5vw, 3.35rem); font-weight: 420; letter-spacing: -.035em; }

@media (max-width: 700px) {
    .content-shell { padding-inline: 1rem; }
    .listing, .article { margin-top: 1rem; }
    .article h1, .listing h1 { overflow-wrap: normal; }
    .prose {
        background: transparent;
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        box-shadow: none;
        margin-inline: -1rem;
        padding-inline: 1rem;
    }
    .related-articles .article-grid { grid-template-columns: 1fr; }
}