@import url(css/root16.css);
@import url(css/static1.css);
@import url(css/article15.css);
@import url(css/card14.css);
@import url(css/nav16.css);
@import url(css/footer1.css);
@import url(css/byline12.css);
@import url(css/form7.css);
@import url(css/footnote2.css);
@import url(css/profile1.css);
@import url(css/spot2.css);
@import url(css/search2.css);



@media screen and (max-height: 1067px),
    screen and (max-width: 1160px) {
    .header-article-content {
        max-width: 900px;
    }
}

@media screen and (max-width: 1280px) {
    .header-article {
        display: flex;
        flex-direction: column;
    }
    .fig-hero {
        margin-bottom: 1rem;
    }

    .form-full {
        padding-inline: 5vw;
    }
    .h-form-full{
        font-size: min(11.4vw, 2.5rem);
        grid-column: unset;
        margin-bottom: 1rem;
    }
    .sh-form-full{
        font-size: max(1rem, 1.6vw);
        margin-bottom: 1rem;
    }
}
@media screen and (max-width: 1065px) {
    .__card__col__container {
        display: block;
    }
    .col-1 {
        margin-bottom: 5rem;
    }
}

@media screen and (max-width: 800px) {

    .col-1 {
        margin-bottom: 5rem;
    }

}
@media screen and (max-width: 550px) {
    .header-article{
        margin-bottom: 2rem;
    }
    .nav-navbar {
        width: 100%;
    }
    .__nav__btn__tgl:checked ~ .__navbar__container .__nav__btn__inner::before,
    .__nav__btn__tgl:checked ~ .__navbar__container .__nav__btn__inner::after {
        background-color: hsl(var(--w));
    }
    .__nav__btn__tgl:checked ~ .__navbar__container {
        padding-inline: var(--nav-pd-l);
    }

    .--dark, .--light {
        box-shadow: none;
    }

    .col-m::before,
    .col-l::before {
        display: none;
    }
    .col-1, .col-2 {
        display: block;
    }
    .col-2::before,
    .col-1::before, 
    .col-2::after,
    .col-1::after,
    .col-container::after {
        display: none;
    }
    .col-container {
        border: solid 1px hsl(var(--b));
        background-color: hsl(var(--b));
        justify-content: flex-start;
        margin-bottom: 0.6rem;
        padding-block: 0.6rem;
        top: calc(var(--nav-h));
        box-shadow: 0px 0.15rem 0.5rem hsl(var(--b));
    }
}
@media screen and (max-width: 500px) {
    .header-article-content .fig-hero .img-hero,
    .img-hero,
    .img-card {
        aspect-ratio: 16 / 9;
    }   

    .list-footer {
        display: flex;
        flex-direction: column;
        gap: 0.7em;
        justify-content: space-between;
    
    }
    
}

@media screen and (max-width: 450px) {
    .form-full .custom-substack-widget {
        display: grid;
        row-gap: 0.7rem;
    }
}

.--dark {
    background-color: hsl(var(--b));
    color: hsl(var(--w));
}

.--dark > .__navbar__container .__logo,
.--dark > .__footer__container .__logo {
    fill: hsl(var(--w));
}

.--dark .nav-footer,
.--dark .header-static,
.--dark .__card,
.--dark .__byline__datetime,
.--dark .__byline {
    border-color: hsl(var(--ch));
}

.--dark .__article .bar, 
.--dark .__header .h-article {
    --beforeColor: hsl(var(--w));
}
.--dark .__nav__btn__inner {
    background-color: hsl(var(--w));
}
.--dark .h-article{
    --beforeColor: hsl(var(--w));
}

.--light {
    background-color: hsl(var(--w));
    color: hsl(var(--b));
}

.--light > .__navbar__container .__logo,
.--light > .__footer__container .__logo {
    fill: hsl(var(--b));
}
.--light .sh-article,
.--light .__byline__datetime,
.--light .__byline {
    border-color: hsl(var(--b));
}
.--light .__article .bar,
.--light .__header .h-article {
    --beforeColor: hsl(var(--b));
}
.--light .__nav__btn__inner {
    background-color: hsl(var(--b));
}
.--light .h-article{
    --beforeColor: hsl(var(--w));
}

.__navbar.--light::after{
    background: hsl(0, 0%, 80%);
}

.__navbar.--dark::after{
    background: hsl(0, 0%, 12%);
}

body:has(.__article) .__navbar.--dark::after {
    animation: border-in 600ms ease-out 300ms forwards;
}

@keyframes border-in {
    from{
        background: hsl(0, 0%, 12%);
    }
    to {
        background: hsl(0, 0%, 80%);
    }
}

.__main {
    margin-top: calc(1.6 * var(--nav-h));
    margin-inline: auto;
    padding-inline: var(--pd-l);
    box-sizing: border-box;
    max-width: 1600px;
}

.__f {
    font-family: 'Barlow', 'Arial', 'Helvetica', sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin-block: 0.88em;
}

.--underline {
    text-decoration: underline;
}

.break {
    margin-bottom: 3.5rem;
}

.a-contact {
    text-decoration-color: hsla(var(--w), 0.6);
}