.blog-archive {
    padding-block: var(--section-pad-y);
    position: relative
}

.blog-archive__header {
    margin-bottom: var(--space-6)
}

.blog-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-3);
    margin-bottom: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease
}

.blog-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-outer), inset 0 0 6px 3px #9843ff40
}

.blog-feature__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg)
}

.blog-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blog-feature__body {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2)
}

.blog-feature__title {
    margin: 0
}

.blog-feature__excerpt {
    color: var(--color-text-muted);
    margin: 0
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4)
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-outer), inset 0 0 6px 3px #9843ff40
}

.blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg)
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.blog-card:hover .blog-card__media img {
    transform: scale(1.04)
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    flex: 1
}

.blog-card__title {
    margin: 0
}

.blog-card__excerpt {
    color: var(--color-text-muted);
    margin: 0;
    flex: 1
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-subtle);
    font-size: 15px;
    margin-top: var(--space-1)
}

.post-meta__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted)
}

.post-meta__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    border: 1px solid var(--color-border)
}

.post-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-text-subtle);
    display: inline-block
}

.post-category {
    align-self: flex-start;
    color: var(--color-text)
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6)
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .blog-feature {
        grid-template-columns: 1fr
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr
    }
}

/* .post {
    padding-block: var(--section-pad-y);
    position: relative
}

.post.post--gallery {
    padding-block: none;
} */

.post__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4)
}

.post__title {
    margin: 0
}

.post__dek {
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0
}

.post__featured {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    background: var(--color-surface)
}

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

.prose {
    max-width: 70ch
}

.prose>*+* {
    margin-top: var(--space-3)
}

.prose h2 {
    font-size: clamp(28px, 3.5vw, 37px);
    margin-top: var(--space-5)
}

.prose h3 {
    font-size: clamp(22px, 2.6vw, 26px);
    margin-top: var(--space-4)
}

.prose p,
.prose li {
    color: var(--color-text-muted)
}

.prose a {
    color: var(--color-brand);
    text-underline-offset: 3px
}

.prose ul,
.prose ol {
    padding-left: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.prose ul {
    list-style: disc
}

.prose ol {
    list-style: decimal
}

.prose img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border)
}

.prose figure {
    margin: var(--space-4) 0
}

.prose figcaption {
    color: var(--color-text-subtle);
    font-size: 15px;
    margin-top: var(--space-1);
    text-align: center
}

.prose blockquote {
    border-left: 3px solid var(--color-brand);
    padding: var(--space-1) var(--space-3);
    margin: var(--space-4) 0;
    font-size: 22px;
    line-height: 1.5;
    color: var(--color-text)
}

.prose pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    overflow-x: auto;
    font-size: 15px
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em
}

.prose :not(pre)>code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .1em .4em
}

.post--standard .post__inner {
    max-width: 760px;
    margin-inline: auto
}

.post--standard .post__header {
    text-align: center;
    align-items: center
}

.post--standard .post__header .post-meta {
    justify-content: center
}

.post--standard .prose {
    max-width: none
}

.post--hero {
    padding-top: 0
}

.post--hero .post__hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-7) var(--space-5);
    overflow: hidden
}

.post--hero .post__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.post--hero .post__hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.post--hero .post__hero-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0e0e1266, #0e0e12f2)
}

.post--hero .post__hero .container {
    position: relative;
    z-index: 1
}

.post--hero .post__header {
    max-width: 820px
}

.post--hero .post__body {
    margin-top: var(--space-6)
}

.post--hero .prose {
    margin-inline: auto
}

.post--sidebar .post__inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-6);
    align-items: start
}

.post--sidebar .post__aside {
    position: sticky;
    top: calc(var(--space-7) + var(--space-2));
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.post__toc-title {
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2)
}

.post__toc {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: 1px solid var(--color-border)
}

.post__toc a {
    display: block;
    padding: 4px var(--space-2);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 15px
}

.post__toc a:hover,
.post__toc a[aria-current=true] {
    color: var(--color-text);
    border-left-color: var(--color-brand)
}

.post__share {
    display: flex;
    gap: var(--space-1)
}

.post__author-card {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

@media (max-width: 900px) {
    .post--sidebar .post__inner {
        grid-template-columns: 1fr
    }

    .post--sidebar .post__aside {
        position: static;
        order: 2
    }
}

.post--minimal .post__inner {
    max-width: 680px;
    margin-inline: auto
}

.post--minimal .post__title {
    font-size: clamp(36px, 5vw, 56px)
}

.post--minimal .post__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4)
}

.post--wide .post__inner {
    max-width: 1080px;
    margin-inline: auto
}

.post--wide .post__title {
    font-size: clamp(40px, 6vw, 72px)
}

.post--wide .post__featured {
    margin-inline: calc(-1 * var(--space-5))
}

.post--wide .prose {
    max-width: 760px;
    margin-inline: auto
}

.post--wide .prose .prose__bleed {
    width: 100%;
    max-width: 1080px;
    margin-inline: -160px
}

@media (max-width: 1140px) {
    .post--wide .post__featured {
        margin-inline: 0
    }

    .post--wide .prose .prose__bleed {
        max-width: 100%;
        margin-inline: 0
    }
}

.post--magazine .post__inner {
    max-width: 920px;
    margin-inline: auto
}

.post--magazine .post__intro {
    columns: 2;
    column-gap: var(--space-5);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4)
}

.post--magazine .prose>p:first-of-type:first-letter {
    float: left;
    font-size: 4.4em;
    line-height: .78;
    padding-right: .08em;
    color: var(--color-brand);
    font-weight: 500
}

@media (max-width: 680px) {
    .post--magazine .post__intro {
        columns: 1
    }
}

.post--interview .post__inner {
    max-width: 760px;
    margin-inline: auto
}

.qa+.qa {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border)
}

.qa__q {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 var(--space-2)
}

.qa__q:before {
    content: "Q";
    flex: none;
    color: var(--color-brand);
    font-weight: 500
}

.qa__a {
    display: flex;
    gap: var(--space-2);
    color: var(--color-text-muted);
    margin: 0
}

.qa__a:before {
    content: "A";
    flex: none;
    color: var(--color-text-subtle);
    font-weight: 500
}

.post__gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-2);
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-5)
}

.post__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md)
}

.post__gallery>:first-child {
    grid-row: 1 / 3
}

.post--gallery .prose {
    margin-inline: auto
}

@media (max-width: 600px) {
    .post__gallery {
        grid-template-columns: 1fr 1fr;
        aspect-ratio: 4 / 3
    }

    .post__gallery>:first-child {
        grid-row: auto;
        grid-column: 1 / 3
    }
}

.post--technical .post__inner {
    max-width: 820px;
    margin-inline: auto
}

.post--technical .post-category {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em
}

.post--technical .prose {
    counter-reset: step
}

.post--technical .prose h2 {
    counter-increment: step;
    display: flex;
    align-items: baseline;
    gap: var(--space-2)
}

.post--technical .prose h2:before {
    content: counter(step, decimal-leading-zero);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .55em;
    color: var(--color-brand)
}

.post-callout {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3);
    box-shadow: var(--shadow-glow-inset)
}

.post-callout__label {
    color: var(--color-brand);
    margin-bottom: var(--space-1)
}

.post--split {
    padding: 0
}

.post--split .post__inner {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: start
}

.post--split .post__media-col {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden
}

.post--split .post__media-col img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.post--split .post__content-col {
    padding: var(--section-pad-y) clamp(var(--space-4), 5vw, var(--space-7))
}

@media (max-width: 900px) {
    .post--split .post__inner {
        grid-template-columns: 1fr
    }

    .post--split .post__media-col {
        position: static;
        height: 56vh
    }
}

.tpl-label {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-brand);
    color: #fff;
    padding: var(--space-1) 0;
    font-size: 14px;
    letter-spacing: .04em
}

.tpl-label .container {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2)
}

.tpl-label code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: .85
}