:root {
    --sansFont: "Inter var";
    --monoFont: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace
}

@supports (font-variation-settings:normal) {
    :root {
        --sansFont: "Inter var", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        --monoFont: jbmono, ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace
    }
}

:root {
    --fontSize: 18px;
    --h1-size: 2.25rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;
    --h4-size: 1.1rem;
    --background-color: #f9f7fc;
    --background-color-rgb: 249, 247, 252;
    --foreground-color-rgb: 0, 0, 0;
    --bgcolor-level1: rgba(0, 0, 0, .1);
    --link-color: #6F30EB;
    --link-color-rgb: 111, 48, 235;
    --link-underline-color: rgba(var(--foreground-color-rgb), 0.4);
    --blockquote-bg: #6F30EB;
    --high-vis-fg: var(--foreground-color);
    color-scheme: light dark;
    font-synthesis: none;
    font-weight: 460
}

.orange {
    --link-color: #FF9D06;
    --link-color-rgb: 255, 157, 6;
    --link-underline-color: rgba(var(--foreground-color-rgb), 0.4);
    --blockquote-bg: #FF9D06;
}

@media (prefers-color-scheme:dark) {
    .orange {}
}

@media (prefers-color-scheme:dark) {
    :root {
        --background-color: #191614;
        --background-color-rgb: 25, 22, 20;
        --foreground-color-rgb: 249, 241, 257;
        --bgcolor-level1: rgba(0, 0, 0, .3);
        --link-color: #9667f4;
        --link-underline-color: rgba(var(--foreground-color-rgb), 0.5);
        --blockquote-bg: #6F30EB;
        --high-vis-fg: #FBFBFB;
        --code-bg: #242120
    }
}

body {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1024px;
    min-height: 100vh;
    padding: calc(var(--lineHeight)*2);
    padding-top: calc(var(--lineHeight)*1.4)
}

@media only screen and (max-width: 720px) {
    body {
        padding: calc(var(--lineHeight)*1);
    }
}

@media only screen and (max-width: 720px) {
    h1.large, .h1.large {
        --h1-size: 3rem;
        line-height: calc(var(--lineHeight) * 2);
        font-weight: 730;
    }
}

ol>li, ul>li {
    margin-bottom: calc(var(--blockSpacingBottom)*.25)
}

li>p+ol, li>p+ul, p+ol, p+ul {
    margin-top: calc(var(--blockSpacingBottom)*-.75)
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-variation-settings: "opsz"32;
    font-feature-settings: 'kern'1, 'dlig'1, 'rlig'1, 'liga'1, 'calt'1, 'cv10'0, 'dlig'1, 'ss03'1, 'cv05'1;
    font-weight: 600;
    color: var(--high-vis-fg);
    -webkit-hyphens: none;
    hyphens: none;
    word-break: break-word;
}

.large.hyphenate {
    -webkit-hyphens: manual;
    hyphens: manual;
}

@media only screen and (max-width: 840px) {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

h1 {
    font-weight: 650;
    letter-spacing: -.02em;
    hanging-punctuation: first last;
}

h2 {
    letter-spacing: 0
}

h3, h4, h5, h6 {
    font-family: var(--sansFont);
    letter-spacing: -.01em
}

.eyebrow {
    font-variation-settings: "opsz"32;
    font-feature-settings: 'kern'1, 'dlig'1, 'rlig'1, 'liga'1, 'calt'1, 'cv10'0, 'dlig'1, 'ss03'0, 'cv05'0;
    font-weight: 600;

    margin-bottom: unset;

    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    letter-spacing: .015em;
    opacity: 0.666;
}

h2.eyebrow {
    margin-top: calc(var(--lineHeight) * 2);
}

h3.eyebrow {
    margin-top: var(--lineHeight);
}

.eyebrow+h1, .eyebrow+h2, .eyebrow+h3, .eyebrow+h4 {
    margin-top: unset;
}

a {
    display: inline;
    white-space: normal;
    color: var(--high-vis-fg);
    text-decoration: underline var(--link-color);
    -webkit-text-decoration: underline var(--link-color);
}

a:hover {
    color: var(--link-color)
}

em {
    letter-spacing: .01em
}

.small, small {
    font-size: .75em
}

blockquote {
    color: rgba(var(--foreground-color-rgb), 0.8);
    border-left: calc(2 * var(--pixel)) solid rgba(var(--foreground-color-rgb), 0.8);
    padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 0.25);
    padding-left: calc(var(--lineHeight) * 1 - calc(4 * var(--pixel)));
}

h2, .h2 {
    line-height: calc(var(--lineHeight) * 1.5);
}

.pull-quote blockquote {
    border: unset;
    color: var(--high-vis-fg);
    padding: unset;
}

.pull-quote {
    border: unset;

    width: 50%;
    float: left;
    margin-right: calc(var(--lineHeight) * 1);
    margin-bottom: calc(var(--lineHeight) * 0.5);
    margin-left: calc(var(--lineHeight) * -6);

    font-family: 'Inter var experimental', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    font-size: var(--h2-size);
    font-style: normal;
    font-variation-settings: 'wght'400, 'slnt'-6;
    font-synthesis: none;
    font-feature-settings: 'kern'1, 'dlig'1, 'rlig'1, 'liga'1, 'calt'1, 'cv10'0, 'dlig'1, 'ss01'1, 'ss03'1, 'cv05'1;
    letter-spacing: -0.027em;
    line-height: calc(var(--lineHeight) * 1.5);

    border-right: calc(2 * var(--pixel)) solid var(--blockquote-bg);
    padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 1);
    padding-right: calc(var(--lineHeight) * 1 - calc(2 * var(--pixel)));
    /* padding-right: 0; */

    text-align: right;
}

.pull-quote blockquote {
    position: relative;
}

.pull-quote blockquote::before {
    content: "»";
    color: var(--gradient-color-1);
    display: inline;
    padding-right: 0.125ch;
}

.pull-quote blockquote::after {
    content: "«";
    color: var(--gradient-color-1);
    display: inline;
    padding-left: 0.125ch;
}

@media only screen and (max-width: 1250px) {
    .pull-quote {
        margin-left: calc(var(--lineHeight) * -2);
        font-size: var(--h3-size);
        line-height: calc(var(--lineHeight) * 1.25);
    }
}

@media only screen and (max-width: 1040px) {
    .pull-quote {
        hanging-punctuation: first last;
        -webkit-hyphens: auto;
        hyphens: auto;

        font-size: var(--h4-size);
        line-height: calc(var(--lineHeight) * 1.25);

        float: none;
        margin: unset;
        padding: unset;
        text-align: left;
        width: unset;

        border-left: calc(2 * var(--pixel)) solid var(--blockquote-bg);
        border-right: unset;

        padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 0.25);

        margin: unset;
        margin-top: var(--blockSpacingTop);
        margin-bottom: var(--blockSpacingBottom);

        padding-left: calc(var(--lineHeight) * 1 - calc(4 * var(--pixel)));
    }

    .pull-quote blockquote::before {
        position: relative;
        left: unset;
    }
}

hr:not(:first-child) {
    margin-top: calc(var(--lineHeight)*2)
}

.dim {
    opacity: 0.6;
}

@media (prefers-contrast: more) {
    .dim {
        opacity: 1;
    }
}

.box {
    padding: calc(var(--lineHeight) * 1 - 2px) calc(var(--lineHeight) * 1.5 - 2px);
    border: 1px solid rgba(var(--link-color-rgb), 0.2);
    background-color: rgba(var(--link-color-rgb), 0.05);
    border-radius: 1em;

    font-family: 'Inter var experimental', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.box p {
    font-variation-settings: 'wght'400, 'slnt'-6;
}

.box>*:first-child {
    margin-top: unset;
    padding-top: unset;
}

#header img {
    border-radius: 0.5em;
    overflow: hidden;
}

#nav-container {
    align-self: start;
    align-self: end;
}

#nav-container nav a:last-child {
    margin-bottom: calc(var(--lineHeight) + 0.4rem);
}

#logo-container {
    align-self: start;
    top: calc(var(--lineHeight) * 9);
}

#logo {
    margin-top: unset;

    height: calc(var(--lineHeight) * 8);
    position: relative;
    left: calc(var(--lineHeight) * -0.25);
    top: calc(var(--lineHeight) * -0.75);
}

#nav-container nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    text-align: right;
}

#mini-nav-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

    margin: calc(var(--lineHeight) * 1) auto;
}

#mini-nav-container nav a::after {
    content: " / ";
    color: rgba(var(--foreground-color-rgb), 0.5);
}

#mini-nav-container nav a:last-child:after {
    content: none;
}

nav {
    text-transform: uppercase;
    font-feature-settings: 'kern'1, 'dlig'1, 'rlig'1, 'liga'1, 'calt'1, 'cpsp'1, 'dlig'1, 'ss02'0, 'cv05'0;

    font-weight: 720;
    font-size: var(--h3-size);
    line-height: calc(var(--lineHeight) * 1.25);
    letter-spacing: 0.005em;
}

#mini-nav-container nav {
    font-size: var(--h4-size);
    font-weight: 600;
}

nav a {
    text-decoration: none;
}

nav a:hover, nav a[selected] {
    color: var(--link-color);
}

nav a[selected]::before {
    content: "→";
}

@media only screen and (max-width: 720px) {
    #nav-container {
        order: -1;

        position: unset;
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
    }

    .eyebrow:first-of-type {
        margin-top: unset;
    }

    nav {
        padding: unset;
        margin: calc(var(--lineHeight) * 0.5);
    }

    nav a {
        text-transform: uppercase;
        text-decoration: none;

        font-weight: 720;
        font-size: var(--h4-size);
        line-height: calc(var(--lineHeight) * 1);
        letter-spacing: 0.005em;
    }


    #logo-container {
        position: unset;
        top: unset;
    }
}

button, input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    margin: 0;
    padding: 0;
    height: auto;

    cursor: pointer;
}

.button-list {
    display: flex;
    flex-direction: row;
    align-items: baseline;

    gap: calc(var(--lineHeight) * 0.25);
}

.button, .button:active, .button:visited {
    box-sizing: border-box;

    max-width: 50%;

    text-transform: capitalize;
    font-weight: 600;
    font-size: calc(var(--fontSize) * 0.8);
    line-height: calc(var(--lineHeight) * 1);

    padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 1);
    border-radius: calc(var(--lineHeight) * 0.4);
    border: 1px solid rgba(var(--link-color-rgb), 1);

    background-color: rgba(var(--link-color-rgb), 0.75);
    color: white;

    text-decoration: none;
}

.button:hover {
    background-color: rgba(var(--link-color-rgb), 0.5);
    color: white;
}

body:not(.feature-native-share) .share.button {
    display: none;
}

#imprint[open] summary {
    margin-bottom: calc(var(--lineHeight) * 0.5);
}

.embeddable-buttondown-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: end;

    font-variation-settings: none;


    gap: calc(var(--lineHeight) * 0.25);
}

@media only screen and (max-width: 720px) {
    .embeddable-buttondown-form {
        flex-direction: column;
    }
}

.embeddable-buttondown-form input[type="email"], .embeddable-buttondown-form input[type="submit"] {
    box-sizing: border-box;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    margin: 0;
    padding: 0;
    height: auto;

    font-weight: 600;
    font-size: calc(var(--fontSize) * 0.8);
    line-height: calc(var(--lineHeight) * 1);

    text-decoration: none;

    padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 0.5);
    border-radius: calc(var(--lineHeight) * 0.4);

    border: 1px solid rgba(var(--foreground-color-rgb), 0.25);
    border-bottom: 1px solid rgba(var(--foreground-color-rgb), 0.35);
    border-right: 1px solid rgba(var(--foreground-color-rgb), 0.35);
    background-color: rgba(var(--background-color-rgb), 0.5);
}

.embeddable-buttondown-form label {
    padding-left: 0.25ch;
}

.embeddable-buttondown-form input[type="email"] {
    display: block;
    width: 100%;
}

.embeddable-buttondown-form input[type="submit"] {
    padding: calc(var(--lineHeight) * 0.25) calc(var(--lineHeight) * 1);
    border: 1px solid rgba(var(--link-color-rgb), 1);
    background-color: rgba(var(--link-color-rgb), 0.75);
    color: white;
}

.embeddable-buttondown-form .item:first-child {
    width: 100%;
    /* border: 1px solid red; */
}