/* =========================================================
   ECHTLEDERJACKEN
   Blog Index + Single Article
   blog.css
   ========================================================= */


/* ---------------------------------------------------------
   FOUNDATION
   --------------------------------------------------------- */

body.blog
.entry-title,
body.single-post
.entry-title,
body.blog
.page-header,
body.single-post
.page-header {
    display: none;
}


body.blog
.site-main,
body.blog
#main,
body.single-post
.site-main,
body.single-post
#main {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.blog-index,
.article-page {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

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

    overflow-x: clip;
}


.blog-container,
.article-container {
    width: 100%;
    max-width: 1560px;

    margin-inline: auto;

    padding-inline:
        clamp(1.5rem, 4.5vw, 5rem);
}


.article-container--wide {
    max-width:
        1560px;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.55rem;

    margin-bottom:
        clamp(2rem, 4vw, 3.5rem);

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

    font-size:
        0.57rem;

    font-weight:
        650;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.blog-breadcrumb
a {
    color:
        inherit;

    text-decoration:
        none;
}


.blog-breadcrumb
a:hover {
    color:
        var(--color-accent-gold);
}


/* ---------------------------------------------------------
   BLOG HERO
   --------------------------------------------------------- */

.blog-index__hero {
    padding:
        clamp(2.5rem, 5vw, 5rem)
        0
        clamp(3.5rem, 6vw, 6rem);

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


.blog-index__hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 540px);

    gap:
        clamp(4rem, 8vw, 9rem);

    align-items:
        end;
}


.blog-index__hero
h1 {
    max-width:
        920px;

    margin: 0;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

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

    font-weight:
        400;

    line-height:
        0.92;

    letter-spacing:
        -0.055em;
}


.blog-index__hero-grid
> p {
    max-width:
        520px;

    margin:
        0
        0
        0.45rem;

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

    font-size:
        0.98rem;

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   FEATURED ARTICLE
   --------------------------------------------------------- */

.blog-featured {
    padding:
        clamp(3.5rem, 7vw, 7rem)
        0;
}


.blog-featured__article {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, 0.85fr);

    min-height:
        580px;

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

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


.blog-featured__media {
    position:
        relative;

    display:
        block;

    min-height:
        580px;

    overflow:
        hidden;

    background-color:
        var(--color-primary);
}


.blog-featured__image {
    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        580px;

    object-fit:
        cover;

    transition:
        transform 500ms ease;
}


.blog-featured__media:hover
.blog-featured__image {
    transform:
        scale(1.018);
}


.blog-featured__placeholder,
.blog-card__placeholder {
    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    width:
        100%;
    height:
        100%;

    min-height:
        inherit;

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            #24343a
        );
}


.blog-featured__placeholder
span,
.blog-card__placeholder
span {
    color:
        rgba(205, 145, 60, 0.72);

    font-family:
        var(--font-display);

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

    font-style:
        italic;
}


.blog-featured__content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(2rem, 5vw, 5rem);
}


.blog-featured__meta,
.blog-card__meta,
.article-hero__meta {
    display:
        flex;

    align-items:
        center;
    flex-wrap:
        wrap;

    gap:
        0.6rem;

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

    font-size:
        0.55rem;

    font-weight:
        650;

    letter-spacing:
        0.065em;

    text-transform:
        uppercase;
}


.blog-category-label {
    color:
        var(--color-accent-gold) !important;

    text-decoration:
        none;
}


.blog-featured__eyebrow {
    display:
        block;

    margin:
        clamp(3rem, 6vw, 6rem)
        0
        0.65rem;

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

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.blog-featured__content
h2 {
    max-width:
        680px;

    margin:
        0
        0
        1.15rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.5rem, 4vw, 4.5rem);

    font-weight:
        400;

    line-height:
        0.98;
}


.blog-featured__content
h2
a {
    color:
        var(--color-primary);

    text-decoration:
        none;
}


.blog-featured__content
> p {
    max-width:
        600px;

    margin:
        0
        0
        1.8rem;

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

    font-size:
        0.86rem;

    line-height:
        1.75;
}


.blog-featured__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    width:
        fit-content;

    padding-bottom:
        0.35rem;

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

    color:
        var(--color-primary);

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.blog-featured__link
span {
    color:
        var(--color-accent-gold);

    transition:
        transform var(--transition-fast);
}


.blog-featured__link:hover
span {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   CATEGORY NAVIGATION
   --------------------------------------------------------- */

.blog-categories {
    border-top:
        1px solid var(--color-border);

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


.blog-categories__inner {
    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap:
        2rem;

    align-items:
        center;

    min-height:
        78px;
}


.blog-categories__label {
    color:
        var(--color-primary);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.blog-categories__nav {
    display:
        flex;

    align-items:
        center;

    gap:
        0.55rem;

    overflow-x:
        auto;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.blog-categories__nav::-webkit-scrollbar {
    display:
        none;
}


.blog-categories__nav
a {
    flex:
        0 0
        auto;

    padding:
        0.55rem
        0.8rem;

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

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

    font-size:
        0.56rem;

    font-weight:
        650;

    letter-spacing:
        0.055em;

    text-decoration:
        none;

    text-transform:
        uppercase;

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


.blog-categories__nav
a:hover {
    border-color:
        var(--color-primary);

    color:
        var(--color-primary);
}


/* ---------------------------------------------------------
   BLOG LISTING
   --------------------------------------------------------- */

.blog-listing,
.related-articles {
    padding:
        clamp(4.5rem, 8vw, 8rem)
        0;
}


.blog-section-heading {
    max-width:
        900px;

    margin-bottom:
        clamp(2.5rem, 5vw, 4.5rem);
}


.blog-section-heading
h2 {
    margin: 0;

    color:
        var(--color-primary);

    font-size:
        clamp(2.6rem, 4vw, 4.4rem);

    line-height:
        0.98;
}


.blog-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(2.5rem, 4vw, 4.5rem)
        clamp(1rem, 2vw, 2rem);
}


.blog-card {
    min-width:
        0;
}


.blog-card__media {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background-color:
        var(--color-background-alt);
}


.blog-card__image {
    display:
        block;

    width:
        100% !important;
    height:
        100% !important;

    object-fit:
        cover;

    transition:
        transform 450ms ease;
}


.blog-card__media:hover
.blog-card__image {
    transform:
        scale(1.025);
}


.blog-card__body {
    padding-top:
        1.15rem;
}


.blog-card
h3 {
    margin:
        0.9rem
        0
        0.75rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.45rem, 2vw, 2rem);

    font-weight:
        400;

    line-height:
        1.08;
}


.blog-card
h3
a {
    color:
        var(--color-primary);

    text-decoration:
        none;
}


.blog-card
h3
a:hover {
    text-decoration:
        underline;

    text-decoration-color:
        var(--color-accent-gold);

    text-underline-offset:
        0.15em;
}


.blog-card__body
> p {
    margin:
        0
        0
        1.15rem;

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

    font-size:
        0.78rem;

    line-height:
        1.7;
}


.blog-card__footer {
    display:
        flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        1rem;

    padding-top:
        0.85rem;

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

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

    font-size:
        0.55rem;

    font-weight:
        650;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


.blog-card__footer
a {
    color:
        var(--color-accent-gold);

    font-size:
        1rem;

    text-decoration:
        none;

    transition:
        transform var(--transition-fast);
}


.blog-card__footer
a:hover {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.blog-pagination {
    margin-top:
        clamp(3rem, 6vw, 5rem);
}


.blog-pagination
.navigation {
    margin: 0;
}


.blog-pagination
.nav-links {
    display:
        flex;

    align-items:
        center;

    gap:
        0.45rem;

    flex-wrap:
        wrap;
}


.blog-pagination
.page-numbers {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    min-width:
        40px;

    min-height:
        40px;

    padding:
        0.55rem
        0.75rem;

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

    color:
        var(--color-primary);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.blog-pagination
.page-numbers.current,
.blog-pagination
.page-numbers:hover {
    background-color:
        var(--color-primary);

    border-color:
        var(--color-primary);

    color:
        var(--color-secondary);
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.blog-empty {
    max-width:
        760px;

    padding:
        3rem
        0;

    border-top:
        1px solid var(--color-primary);

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


.blog-empty
> span {
    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.8rem;

    font-style:
        italic;
}


.blog-empty
h2 {
    margin:
        2.5rem
        0
        0.8rem;

    font-size:
        clamp(2rem, 4vw, 3.5rem);
}


.blog-empty
p {
    margin: 0;

    color:
        var(--color-text-muted);
}


/* =========================================================
   SINGLE ARTICLE
   ========================================================= */


/* ---------------------------------------------------------
   ARTICLE HERO
   --------------------------------------------------------- */

.article-hero {
    padding:
        clamp(2.5rem, 5vw, 5rem)
        0
        clamp(3.5rem, 6vw, 6rem);

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


.article-hero__inner {
    max-width:
        1120px;

    margin-inline:
        auto;
}


.article-hero__meta {
    margin-bottom:
        clamp(1.75rem, 3vw, 2.5rem);
}


.article-hero
h1 {
    max-width:
        1120px;

    margin:
        0;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(3.4rem, 6vw, 6.5rem);

    font-weight:
        400;

    line-height:
        0.94;

    letter-spacing:
        -0.05em;
}


.article-hero__lead {
    max-width:
        850px;

    margin:
        clamp(1.5rem, 3vw, 2.2rem)
        0
        0;

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

    font-size:
        clamp(1rem, 1.25vw, 1.16rem);

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   ARTICLE FEATURED IMAGE
   --------------------------------------------------------- */

.article-featured {
    padding-top:
        clamp(2rem, 4vw, 4rem);
}


.article-featured__figure {
    margin: 0;
}


.article-featured__image {
    display:
        block;

    width:
        100% !important;

    max-height:
        820px;

    object-fit:
        cover;
}


.article-featured
figcaption {
    max-width:
        900px;

    margin:
        0.7rem
        auto
        0;

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

    font-size:
        0.62rem;

    line-height:
        1.55;

    text-align:
        center;
}


/* ---------------------------------------------------------
   ARTICLE LAYOUT
   --------------------------------------------------------- */

.article-layout {
    display:
        grid;

    grid-template-columns:
        250px
        minmax(0, 820px);

    gap:
        clamp(4rem, 7vw, 8rem);

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}


.article-sidebar {
    min-width:
        0;
}


.article-sidebar__inner {
    position:
        sticky;

    top:
        145px;
}


.article-sidebar__eyebrow {
    display:
        block;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid var(--color-primary);

    color:
        var(--color-primary);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.article-sidebar__links
a {
    display:
        grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    gap:
        0.55rem;

    align-items:
        start;

    padding:
        1rem
        0;

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

    color:
        var(--color-primary);

    text-decoration:
        none;
}


.article-sidebar__links
a
> span:first-child {
    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.68rem;

    font-style:
        italic;
}


.article-sidebar__links
strong {
    display:
        block;

    font-family:
        var(--font-display);

    font-size:
        0.92rem;

    font-weight:
        400;

    line-height:
        1.25;
}


.article-sidebar__links
small {
    display:
        block;

    margin-top:
        0.25rem;

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

    font-size:
        0.56rem;

    line-height:
        1.45;
}


.article-sidebar__links
a
> span:last-child {
    color:
        var(--color-accent-gold);

    transition:
        transform var(--transition-fast);
}


.article-sidebar__links
a:hover
> span:last-child {
    transform:
        translateX(3px);
}


.article-sidebar__topics {
    margin-top:
        2rem;
}


.article-sidebar__topics
> span {
    display:
        block;

    margin-bottom:
        0.7rem;

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

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.article-sidebar__topics
> div {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.4rem;
}


.article-sidebar__topics
a {
    padding:
        0.45rem
        0.6rem;

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

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

    font-size:
        0.52rem;

    font-weight:
        650;

    letter-spacing:
        0.045em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.article-main {
    min-width:
        0;
}


/* ---------------------------------------------------------
   LONG-FORM CONTENT
   --------------------------------------------------------- */

.article-content {
    color:
        var(--color-primary);

    font-size:
        clamp(1rem, 1.1vw, 1.08rem);

    line-height:
        1.85;
}


.article-content
> *:first-child {
    margin-top:
        0;
}


.article-content
p {
    margin:
        0
        0
        1.5em;
}


.article-content
h2 {
    margin:
        2.3em
        0
        0.65em;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(2.2rem, 3.5vw, 3.5rem);

    font-weight:
        400;

    line-height:
        1.02;

    letter-spacing:
        -0.025em;
}


.article-content
h3 {
    margin:
        2em
        0
        0.65em;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.55rem, 2.3vw, 2.2rem);

    font-weight:
        400;

    line-height:
        1.1;
}


.article-content
h4 {
    margin:
        1.8em
        0
        0.6em;

    color:
        var(--color-primary);

    font-size:
        0.84rem;

    font-weight:
        750;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.article-content
a {
    color:
        var(--color-primary);

    text-decoration-color:
        var(--color-accent-gold);

    text-decoration-thickness:
        1px;

    text-underline-offset:
        0.18em;
}


.article-content
strong {
    font-weight:
        700;
}


.article-content
ul,
.article-content
ol {
    margin:
        0
        0
        1.75em;

    padding-left:
        1.4em;
}


.article-content
li {
    margin-bottom:
        0.55em;

    padding-left:
        0.25em;
}


.article-content
li::marker {
    color:
        var(--color-accent-gold);
}


.article-content
blockquote {
    position:
        relative;

    margin:
        2.5rem
        0;

    padding:
        1.5rem
        1.5rem
        1.5rem
        2rem;

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

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

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

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);

    line-height:
        1.5;
}


.article-content
blockquote
p:last-child {
    margin-bottom:
        0;
}


.article-content
figure {
    margin:
        2.5rem
        0;
}


.article-content
img {
    display:
        block;

    max-width:
        100%;

    height:
        auto;
}


.article-content
figcaption,
.article-content
.wp-caption-text {
    margin-top:
        0.65rem;

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

    font-size:
        0.62rem;

    line-height:
        1.55;
}


.article-content
hr {
    margin:
        3rem
        0;

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


/* Tables */

.article-content
.wp-block-table,
.article-content
table {
    width:
        100%;

    margin:
        2rem
        0;

    overflow-x:
        auto;
}


.article-content
table {
    border-collapse:
        collapse;
}


.article-content
th,
.article-content
td {
    padding:
        0.8rem
        0.9rem;

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

    text-align:
        left;

    vertical-align:
        top;
}


.article-content
th {
    border-bottom-color:
        var(--color-primary);

    color:
        var(--color-primary);

    font-size:
        0.58rem;

    font-weight:
        750;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.article-content
td {
    color:
        var(--color-text-muted);

    font-size:
        0.82rem;
}


/* WordPress buttons */

.article-content
.wp-block-button__link,
.article-content
.button {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    min-height:
        48px;

    padding:
        0.8rem
        1rem;

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

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

    border-radius:
        var(--radius-small);

    color:
        var(--color-secondary);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.065em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


/* Pullquote */

.article-content
.wp-block-pullquote {
    margin:
        3rem
        0;

    padding:
        2rem
        0;

    border-top:
        1px solid var(--color-primary);

    border-bottom:
        1px solid var(--color-primary);

    text-align:
        left;
}


/* Gallery */

.article-content
.wp-block-gallery {
    gap:
        0.75rem;
}


/* Embedded media */

.article-content
iframe,
.article-content
video {
    max-width:
        100%;
}


/* ---------------------------------------------------------
   ARTICLE FOOTER
   --------------------------------------------------------- */

.article-footer {
    display:
        flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        clamp(3.5rem, 6vw, 5rem);

    padding:
        1.5rem
        0;

    border-top:
        1px solid var(--color-primary);

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


.article-footer__meta
span {
    display:
        block;

    margin-bottom:
        0.25rem;

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

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.article-footer__meta
strong {
    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        1rem;

    font-weight:
        400;
}


.article-footer__back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--color-primary);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.065em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.article-footer__back
span {
    color:
        var(--color-accent-gold);
}


/* ---------------------------------------------------------
   RELATED ARTICLES
   --------------------------------------------------------- */

.related-articles {
    background-color:
        var(--color-background-alt);

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


/* ---------------------------------------------------------
   FINAL ARTICLE CTA
   --------------------------------------------------------- */

.article-cta {
    padding:
        clamp(4.5rem, 8vw, 8rem)
        0;

    background-color:
        var(--color-primary);
}


.article-cta__inner {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items:
        end;
}


.article-cta
.eyebrow {
    color:
        var(--color-accent-gold);
}


.article-cta
h2 {
    max-width:
        980px;

    margin: 0;

    color:
        var(--color-secondary);

    font-size:
        clamp(2.6rem, 4.5vw, 4.8rem);

    line-height:
        0.98;
}


.article-cta__button {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        1.4rem;

    min-width:
        245px;

    min-height:
        54px;

    background-color:
        var(--color-secondary) !important;

    border-color:
        var(--color-secondary) !important;

    color:
        var(--color-primary) !important;
}


.article-cta__button
span {
    color:
        var(--color-accent-gold);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .blog-index__hero-grid,
    .blog-featured__article {
        grid-template-columns:
            1fr;
    }


    .blog-featured__article,
    .blog-featured__media,
    .blog-featured__image {
        min-height:
            0;
    }


    .blog-featured__media {
        aspect-ratio:
            16 / 10;
    }


    .blog-featured__content {
        min-height:
            440px;
    }


    .blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .article-layout {
        grid-template-columns:
            1fr;

        max-width:
            920px;

        gap:
            2.5rem;
    }


    .article-sidebar__inner {
        position:
            static;
    }


    .article-sidebar__links {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            0.75rem;
    }


    .article-sidebar__links
    a {
        padding:
            1rem;

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


    .article-cta__inner {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .blog-container,
    .article-container {
        padding-inline:
            1.25rem;
    }


    .blog-index__hero,
    .article-hero {
        padding-top:
            2rem;
    }


    .blog-index__hero
    h1 {
        font-size:
            clamp(3.5rem, 17vw, 5.3rem);
    }


    .blog-featured {
        padding-top:
            2rem;

        padding-bottom:
            4rem;
    }


    .blog-featured__article {
        border-left:
            0;
        border-right:
            0;
    }


    .blog-featured__content {
        min-height:
            0;

        padding:
            1.5rem;
    }


    .blog-featured__eyebrow {
        margin-top:
            2.5rem;
    }


    .blog-categories__inner {
        grid-template-columns:
            1fr;

        gap:
            0.75rem;

        padding-top:
            1rem;

        padding-bottom:
            1rem;
    }


    .blog-grid {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .blog-card__media {
        aspect-ratio:
            4 / 3;
    }


    .article-hero
    h1 {
        font-size:
            clamp(3rem, 14vw, 4.8rem);
    }


    .article-featured
    .article-container--wide {
        padding-inline:
            0;
    }


    .article-featured__image {
        max-height:
            none;

        aspect-ratio:
            4 / 3;

        object-fit:
            cover;
    }


    .article-layout {
        padding-top:
            3rem;

        padding-bottom:
            5rem;
    }


    .article-sidebar__links {
        grid-template-columns:
            1fr;
    }


    .article-content {
        font-size:
            1rem;

        line-height:
            1.8;
    }


    .article-content
    h2 {
        font-size:
            clamp(2rem, 10vw, 3rem);
    }


    .article-content
    h3 {
        font-size:
            clamp(1.5rem, 8vw, 2.1rem);
    }


    .article-content
    .wp-block-table {
        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .article-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .article-cta__button {
        width:
            100%;

        min-width:
            0;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-featured__image,
    .blog-card__image,
    .blog-featured__link
    span,
    .blog-card__footer
    a,
    .article-sidebar__links
    a
    > span:last-child {
        transition:
            none !important;
    }


    .blog-featured__media:hover
    .blog-featured__image,
    .blog-card__media:hover
    .blog-card__image,
    .blog-featured__link:hover
    span,
    .blog-card__footer
    a:hover,
    .article-sidebar__links
    a:hover
    > span:last-child {
        transform:
            none !important;
    }

}

/* =========================================================
   BLOG ARCHIVES
   ========================================================= */

.blog-archive__intro {
    max-width:
        540px;

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

    line-height:
        1.8;
}


.blog-archive__intro
p {
    margin:
        0
        0
        1rem;
}


.blog-archive__intro
p:last-child {
    margin-bottom:
        0;
}


.blog-archive__back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    margin-top:
        clamp(3rem, 6vw, 5rem);

    color:
        var(--color-primary);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.065em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.blog-archive__back
span {
    color:
        var(--color-accent-gold);
}