@import url(css/root18.css);
@import url(css/static2.css);
@import url(css/article18.css);
@import url(css/card15.css);
@import url(css/nav19.css);
@import url(css/footer2.css);
@import url(css/byline13.css);
@import url(css/form10.css);
@import url(css/footnote3.css);
@import url(css/profile1.css);
@import url(css/spot4.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: 1090px) {
    .header-article {
        grid-template-columns: auto;
        grid-template-rows: repeat(3, auto) 1fr;
    }
    .header-article > .sh-article-wide {
    grid-column: unset;
    }

    .header-article:has(> .sh-article-wide) .fig-hero{
        grid-row: unset;
    }

    .header-article:has(> .sh-article-wide) .__byline {
        align-self:unset;  
    }

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

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

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

    body, html {
        font-size: 17px;
    }
    .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));
    }

    .form-full {
        padding-block: 0.6em;
        row-gap: 0.5em;
        padding-inline: 4vw;
    }
}
@media screen and (max-width: 500px) {
    .header-article-content .fig-hero .img-hero,
    .img-hero,
    .img-card {
        aspect-ratio: 16 / 9;
    }
    
}

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

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

.--dark .nav-footer,
.--dark .header-static,
.--dark .__card,
.--dark .__byline__datetime,
.--dark .__byline,
.--dark .box,
.--dark.__footer .socials-border {
    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,
.--light.__footer .__socials__icon {
    fill: hsl(var(--b));
}
.--light .sh-article,
.--light .__byline__datetime,
.--light .__byline,
.--light.__footer .socials-border {
    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{
    border-color: hsl(0, 0%, 95%);
}

.__navbar.--dark{
    border-color: hsl(0, 0%, 20%);
}

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

.__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);
}

.animated {
    transition: all 400ms ease-out;
}