:root {
    --muddy-waters: #BA9266;
    --grey: #888;
    --offwhite: #F4EFE8;
    --green: #909E63;
    --orange: #EF8D1E;
    --yellow: #FDCC30;
    --blue: #0888BA;
    --heading-01: clamp(4.25rem, -3.5735rem + 13.9706vw, 9rem);
    --heading-02: clamp(3rem, -0.1429rem + 5.6122vw, 5.75rem);
    --heading-03: clamp(3rem, 0.9412rem + 3.6765vw, 4.25rem);
    --heading-04: clamp(2rem, 0.8571rem + 2.0408vw, 3rem);
    --heading-05: clamp(1.5rem, 0.6765rem + 1.4706vw, 2rem);
    --heading-06: clamp(1.125rem, 0.5592rem + 1.0453vw, 1.5rem);
    --heading-07: 18px;
    --logo-type: clamp(2.38rem, calc(1.86rem + 2.10vw), 3.75rem);
    --heavy-border: clamp(1rem, 0.4286rem + 1.0204vw, 1.5rem);
    --step-article-body: clamp(1.25rem, calc(0.84rem + 0.74vw), 1.50rem);
}
::selection {
    background: #fff;
}
@media screen and (max-width: 896px) {
    :root {
        --step-article-body: clamp(1.25rem, calc(0.74rem + 1.35vw), 1.50rem);
        --heading-01: clamp(3.00rem, calc(0.47rem + 6.76vw), 4.25rem);
        --heading-03: clamp(2rem, -0.0339rem + 5.4237vw, 3rem);
    }
}
@font-face {
    font-family:"Altissima Compact 009";
    src:url("/fonts/AltissimaCompact009GX/AltissimaCompact009GX.woff2") format("woff2"),
        url("/fonts/AltissimaCompact009GX/AltissimaCompact009GX.woff") format("woff"),
        url("/fonts/AltissimaCompact009GX/AltissimaCompact009GX.otf") format("opentype");
    font-style:normal; font-weight:100 500;
}
@font-face {
    font-family:"PP Radio Grotesk";
    src:url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Light.woff2") format("woff2"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Light.woff") format("woff"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Light.otf") format("opentype");
    font-style:normal;font-weight:300;
}
@font-face {
    font-family:"PP Radio Grotesk";
    src:url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Regular.woff2") format("woff2"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Regular.woff") format("woff"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Regular.otf") format("opentype");
    font-style:normal;font-weight:400;
}
@font-face {
    font-family:"PP Radio Grotesk";
    src:url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Bold.woff2") format("woff2"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Bold.woff") format("woff"),
        url("/fonts/PPRadioGrotesk/PPRadioGrotesk-Bold.otf") format("opentype");
    font-style:normal;font-weight:700;
}
*, *:before, *:after {
    box-sizing: border-box;
}
body {
    font-family:"PP Radio Grotesk";
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-size: clamp(1.125rem, 0.5074rem + 1.1029vw, 1.5rem); /* 24 @ 1440 - 18 @ 896 */
    font-feature-settings: "liga" 1;
}
p {
    margin: 0 0 1em;
}
a {
    color: inherit;
    text-decoration: none;
}
.h1, h1 {
    font-size:var(--heading-01);
}
.h2, h2 {
    font-size: var(--heading-02);
}
.h3, h3 {
    font-size: var(--heading-03);
    line-height: .88;
    /* margin: 0 0 72px; */
}
.h4,h4 {
    font-size:var(--heading-04);
    line-height: 1;
}
.h5, h5 {
    /* font-size: 24px;*/
    font-size: var(--heading-05);
}
.h6, h6 {
    /* font-size: 24px;*/
    font-size: var(--heading-06);
}
.h7 {
    font-size: var(--heading-07);
    line-height: 1.2;
}
.top-border-heavy {
    border-top: var(--heavy-border) solid #000;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5, h6,.h6 {
    font-family:"PP Radio Grotesk";
    font-weight: 400;
    line-height: 1;
    margin: 0;
}
/* @font-face {
    font-family: 'Signifier';
    font-display: block;
    src: url('/fonts/signifier-regular.woff2');
} */
html,
body {
    height: 100%;
}
html {
    background: var( --offwhite);
}
body {
    min-height: 100%;
    /* overflow: auto;
    position: absolute;
    width: 100%; */
    margin: 0;
    font-family:"PP Radio Grotesk";
    font-weight: 400;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
main {
    flex:1;
}
.main-wrap {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 32px;
}
.site-header {
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    height: 64px;
    border-bottom: 1px solid;
    z-index: 2;
    transition: transform .2s;   
    background-color: transparent;
}
.site-header.hidden {
    transform: translate(0,-100%);
}
.site-header.scrolled {
    background-color: var(--offwhite);
}
.site-header .main-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}
.site-header .main-menu {
    margin: auto 0 auto auto;
}
.site-header.inverted.visible {
    background-color: var(--offwhite);
    color: #000;
}
.site-header.inverted,
.site-header.inverted > * {
    color: var(--offwhite);
}
.site-header.inverted {
    border-bottom: 1px solid rgba(244, 239, 232, .5);
}
.site-header.inverted.visible,
.site-header.inverted.visible > * {
    color: #000;
    border-bottom: 1px solid #000;
}
.site-header.compressed svg {
    width: 20%;
}
.main-menu a {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#000));
    background-image: -webkit-linear-gradient(#000,#000);
    background-image: linear-gradient(#000,#000);
    background-position: right 92%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    -webkit-transition: background-size .3s;
    transition: background-size .3s;
    background-position: right 96%!important;
}
@media (hover: hover) and (pointer: fine) {
    .main-menu a:hover {
        background-size: 100% 1px;
    }
}
.site-title {
    font-family:"Altissima Compact 009";
    font-size: var(--logo-type);
    line-height: 1;
    margin: -.06em 0 0;

}
.site-title a {
    color:inherit;
    text-decoration: none;
}
.main-menu {
    font-size: 18px;
    letter-spacing: 0.02em;
}
.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-menu ul li {
    display: inline-block;
    margin: 0 0 0 24px;
}
.tags,
.related-articles {
    margin: 48px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid #000;
}
.tags h6,
.related-articles h6 {
    margin: 0;
    font-family:"PP Radio Grotesk";
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
}
.btn, button {
    border: 1px solid #000;
    border-radius: 999px;
    line-height: 32px;
    font-family:"PP Radio Grotesk";
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 18px;
    padding: 0 16px;
    text-decoration: none;
    color:inherit;
    display: inline-block;
    background: transparent;
    white-space: nowrap;
}
button.arrow:after,
.btn.arrow:after {
    content: " →";
    display: inline-block;
    margin-left: .3em;
}
@media (hover: hover) and (pointer: fine) {
    button.arrow:after,
    .btn.arrow:after {
        transition: transform .3s;
    }
    button.arrow:hover:after,
    .btn.arrow:hover:after {
        transform: translateX(.2em);
    }
}
.btn.lrg, button.lrg {
    border: 1px solid #000;
    border-radius: 1em;
    line-height: 2em;
    letter-spacing: 0.02em;
    font-size: clamp(1.125rem, 0.5074rem + 1.1029vw, 1.5rem);
    padding: 0 1em;
}
.portrait {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 0 16px;
}
.portrait img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
}
.related-articles .article-card.no-image .title {
    background-color: transparent !important;
}
@media (hover: hover) and (pointer: fine) {
    .btn, button {
        transition: all .2s;
    }
    .btn:hover,
    button:hover {
        background: #000;
        color: #F4EFE8;
    }
}
.site-footer {
    margin: 96px 0 0;
    padding: 16px 0;
    border-top: 1px solid;
}
.site-footer .main-wrap {
    display: grid;
}
.site-footer .site-title {
    font-size: clamp(12.375rem, 7.2321rem + 9.1837vw, 16.875rem);/* 270px - 198px */
    line-height: .73;
    margin: -0.06em 0 0 -.02em;
    display: block;
    height: 0.735em;
    overflow: hidden;
    grid-column: 1;
    grid-row: 1 / 3;
}
.site-footer .main-menu {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: flex-start; 
}
.site-footer .copy {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: flex-end;
    font-size: 12px;
    color: var(--grey);
    letter-spacing: .02em;
    text-align: right;
}
.feat-img img {
    width: 100%;
    height: auto;
    display: block;
}
.feat-img.illustration {
    padding: 8px;
}
.feat-img.illustration img {
    mix-blend-mode: multiply;
}
@media screen and (max-width: 895px) {
    .articles-list .article .feat-img {
        width: 37.5%;
        margin: 0 0 0 auto;
    }
    .site-footer {
        padding-top: 70px;
        position: relative;
    }
    .site-footer .site-title {
        grid-column: 1;
        grid-row: 2;
        font-size: clamp(6.375rem, -5.8284rem + 32.5424vw, 12.375rem);/* 198px - 102px */
    }
    .site-footer .main-menu {
        justify-self: start;
        margin: 0;
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        overflow: auto;
        padding: 16px 32px;
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    .site-footer .main-menu::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
    .site-footer .main-menu ul li {
        margin: 0 16px 0 0;
    }
    .site-footer .copy {
        width: 134px;
    }
}
@media screen and (max-width: 600px) {
    .main-wrap {
        padding: 0 16px;
    }
    .site-header {
        overflow: auto;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .site-header::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
    .site-header .main-wrap {
        padding: 0;
    }
    .site-header .site-title {
        padding: 0 16px;
    }
    .site-footer .main-menu {
        padding: 16px;
    }
    .main-menu ul {
        white-space: nowrap;
    }
}    

.error-msg {
    max-width: 1680px;
    margin: 0 auto;
    padding: 120px 32px;
}