html {
        scroll-behavior: smooth;
}

section#author img.pfp {
        width: 3.6em;
        height: 3.6em;
        object-fit: cover;
        object-position: center;
        border-radius: 20em;
}

section#author {
        padding: 7em 1rem 3em;
}

section#author h4 {
        padding: 0 1rem;
}

div.header {
        display: flex;
}

/*
@font-face {
        font-family: "inter";
        font-weight: 100 900;
        font-display: swap;
        font-style: oblique 0deg 10deg;
        src: url("inter.woff2") format("woff2");
}
*/
@font-face {
        font-family: "Social";
        font-display: swap;
        src: url("ABCSocialPlusVariable-Trial.woff2") format("woff2");
}

body {
        --background: #fff;
        --typo: #333;
        --large: 1.4em;
        margin: 0;
        font-family: "inter", sans-serif;
        font-family: "Social", sans-serif;
        background: var(--background);
        color: var(--typo);
}

header,
article,
article + nav > a > div,
div.wrap {
        margin: 0 auto;
        max-width: 56em;
        grid-gap: 15em 1em;
}

article + nav,
div.wrap + article,
div.wrap + div.wrap {
        padding-top: 15em;
}

@media (prefers-color-scheme: dark) {
        body {
                --background: black;
                --typo: #ccc;
        }
}

body > * {
        grid-column: 2;
}

* {
        padding: 0;
        margin: 0;
}

a {
        color: inherit;
}

section a.button:hover span {
        background: var(--typo);
        color: var(--background);
}
section a.button {
        text-decoration: none;
        display: block;
        margin: 2em 0;
}
section a.button span {
        border: 1px solid;
        border-radius: 5em;
        padding: 1rem 3rem 1.1rem;
}
section.space-s div {
        margin: 0 50%;
        height: 5em;
        border-left: 1px solid;
}

section.space-m div {
        margin: 0 50%;
        height: 10em;
        border-left: 1px solid;
}
section.space-l div {
        margin: 0 50%;
        height: 20em;
        border-left: 1px solid;
}

figure video,
figure img {
        max-width: 100%;
}

header h1,
header p,
article h2,
article q,
article figcaption,
article p {
        padding: 0 1rem 1rem;
}

header h1 {
        padding-bottom: 0;
}

nav.service a {
        text-decoration: none;
        padding: 0.7rem 2em 4em;
        display: inline-block;
}

body.awl nav.service {
        color: black;
        transform: translate(0, -100vh);
}

main > header {
        padding-top: 20vw;
        padding-bottom: 2em;
}

article h2 {
        padding-bottom: 3rem;
}

nav.service > a,
header > p,
figcaption,
article h2,
#author p,
nav a > div > h3:after {
        margin-top: 0.5em;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 1.2px;
        text-transform: uppercase;
}

section.visual,
section.embed {
        display: flex;
        justify-content: center;
}

@keyframes fadein {
        from {
                opacity: 0;
        }
}

header {
        animation: fadein 1s ease both 0s;
}

article {
        padding-top: 7em;
        animation: fadein 1s ease both 1s;
}

article strong {
        font-weight: 800;
}

article section {
        padding-bottom: 5em;
}

article section.g2 {
        display: flex;
}

h3:after {
        display: block;
        content: attr(data-details);
}

a.home h2,
h1,
h4,
h3,
q::before,
q::after,
section a.button span,
article p {
        line-height: 1.2;
        font-weight: 300;
        font-size: var(--large);
}

a h3 {
        padding: 0 1rem;
}

article q {
        display: block;
        white-space: pre-line;
}

article q p {
        font-weight: 400;
        display: inline;
        padding-right: 0;
}

q {
        quotes: '"' '"' "'" "'";
}

q::before {
        content: open-quote;
}

q::after {
        content: close-quote;
}

article li {
        list-style: none;
        list-style-position: inside;
}

article li p::before {
        content: "";
        border-radius: 3em;
        margin-right: 0.3em;
        display: inline-block;
        width: 0.7em;
        height: 0.7em;
        background: currentcolor;
}

#visual {
        width: 100%;
        height: 100vh;
}

#visual canvas {
        width: 100%;
        height: 100%;
}

article + nav > a {
        /*
        position: sticky;
        top: 0;
*/
        text-decoration: none;
        padding-top: 0.5em;
        display: block;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.5s ease var(--delay);
        position: relative;
}

article + nav > a:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 0%;
        background: white;
        transition: height 0.3s ease var(--delay);
        z-index: -1;
}

article + nav > a:hover ~ a:before,
article + nav > a:hover:before {
        height: 100%;
}

article + nav > a:hover,
article + nav > a:hover ~ a {
        color: black;
}

/*
article + nav a:after{
        display: inline-block;
        background: currentColor;
        width: 0.5em;
        height: 1px;
        content: "";
        position: absolute;
         left: 2px;
        top: 0;
}
*/
article + nav a > div:after {
        height: 4em;
        display: block;
        content: "";
}

@media (min-width: 60em) {
        body {
                grid-gap: 15em 50vw;
                --large: 2em;
                line-height: 1.3;
        }
        article + nav a > div:after {
                height: 6em;
        }
        nav.service > a {
                padding-right: 5em;
        }

        article + nav > a:last-child {
                padding-bottom: 7vw;
        }

        figure > img,
        figure > video {
                padding: 0 1em;
        }
}


/* Static-v2 accessibility and layout refinements */
figure img, figure video { height: auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }