:root {
    --green: rgb(2, 252, 183);
    --dark-green: rgb(18, 168, 126);
    --light-gray: #f3f3f7;
    --gray: #AAC;
    --dark-gray: #484858;
    --fontSize: calc(100vw / 60);
    --lineHeight: calc(var(--fontSize) * 1.5);
    --white: #FFFFFF;
    --accent-color: #00B7FF;

    --gradient-color-1: #41c9ff;
    --gradient-color-2: #8500FF;
}

html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
}

body {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
}

.small {
    font-size: 0.75rem;
    font-weight: 450;
}

@supports (font-variation-settings: normal) {
    html {
        font-family: 'Inter var experimental', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
}

@media print {
     :root {
        --green: black;
        --dark-green: black;
        --light-gray: white;
    }

    svg {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --fontSize: 16px;
        --h1-size: 2.1rem;
        --h2-size: 1.7rem;
        --h3-size: 1.2rem;
        --h4-size: 1.1rem;

        --columnGap: calc(var(--lineHeight));
        --rowGap: var(--lineHeight);
    }

    h1, .h1 {
        line-height: calc(var(--lineHeight) * 1.75);
        letter-spacing: -0.025em;
    }

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

@media only screen and (max-device-width: 812px) and (orientation: landscape) {
     :root {
        --fontSize: 1.7vw;
    }
}

html {
    background-color: var(--white);
    /* background-image: url('/img/noise.png'); */
    background-size: 256px 256px;
    font-feature-settings: 'kern'1, 'dlig'1, 'rlig'1, 'liga'1;
}

h1, .h1,
h2, .h2,
h3, .h3 {
    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;
    font-variation-settings: 'wght' 650;
    font-style: normal;
    word-break: normal;
}

.gradient-green {
    --gradient-color-2: #00A638;
    --gradient-color-1: #2CDA85;
}

.gradient-bleen {
    --gradient-color-2: #0e89b9;
    --gradient-color-1: #00F385;
}

.gradient-blue {
    --gradient-color-1: #41c9ff;
    --gradient-color-2: #8500FF;
}

.gradient-blink {
    --gradient-color-1: #00B7FF;
    --gradient-color-2: #FCC5F9;
}

.gradient-red {
    --gradient-color-1: #F60;
    --gradient-color-2: #E0B;
}

@media not print {
    h1 em, h2 em {
        font-style: normal;
        background: linear-gradient(182deg, var(--gradient-color-1) -5%, var(--gradient-color-2) 110%), var(--gradient-color-2);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-variation-settings: 'wght' 725;
        padding-right: 0.3rem;
        margin-right: -0.3rem;
    }

    h1 em {
        letter-spacing: -0.04em;
    }

    h2 em {
        letter-spacing: -0.02em;
    }
}

aside.instapaper_ignore {
    margin: 0;
}

svg {
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.line {
    display: inline-block;
}

.eyebrow {
    font-size: calc(var(--lineHeight) * 0.66);
    line-height: calc(var(--lineHeight) * 1);
    margin-top: calc(var(--lineHeight) * 0.75);
    margin-bottom: calc(var(--lineHeight) * 0.25);
    color: var(--gray);
    font-variation-settings: "wght" 500;
    letter-spacing: unset;
}

.eyebrow + h1 {
    margin-top: unset;
}

@media only screen and (min-width: 601px) {
    #header {
        margin-top: calc(var(--lineHeight) * 4.5)
    }

    #header h1 {
        margin-top: unset;
    }
}

#join {
    margin-top: calc(var(--lineHeight) * 1);
    margin-bottom: calc(var(--lineHeight) * 1);
}

#banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(182deg, #00B7FF 0%, #8500FF 1000%);
    color: white;
    z-index: 1;
    font-size: 0.75rem;
    text-align: center;
    padding: calc(var(--lineHeight) / 8)
}

#image-blocks {
    width: calc(var(--baseline) * 11.2 * 2);
    margin-left: -1.5rem;
    margin-top: -1.2rem;
    transform: rotate(-8deg);
}

@media only screen and (max-width: 600px) {
    #header h1 {
        margin-top: unset;
        margin-bottom: unset;
    }

    #image-blocks {
        width: calc(var(--baseline) * 8 * 2);
        margin-left: -0.25rem;
        margin-top: -0.5rem;
        margin-bottom: -1rem;
        transform: rotate(10deg);
    }
}

#image-pedestrian {
    width: calc(var(--baseline) * 3.99 * 2);
    transform: rotate(92deg);
}


#pedestrian-container {
    display: flex;
    padding: calc(var(--baseline) * 2);
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.floating-container {
    display: block;
    box-sizing: border-box;
    float: right;
    position: relative;
    /* outline: 1px solid red; */
}

.floating-container + * {
     margin-top: unset;
    padding-top: unset;
    padding-bottom: unset;
}

.floating-container svg {
    position: absolute;
    bottom: 0;
    right: 0;
}

#group-container {
    margin-right: -2rem;
    width: calc(var(--baseline) * 7.93 * 2);
    height: calc(var(--baseline) * 7.93 * 2 + 4rem);
    shape-outside: circle(calc(var(--baseline) * 10) at calc(var(--baseline) * 7) calc(var(--baseline) * 12.5));
}

#image-group {
    width: calc(var(--baseline) * 7.93 * 2);
    position: absolute;
    bottom: 0;
    right: 0;
}

#image-lone-tree {
    width: calc(var(--baseline) * 8.79 * 2);
    margin-top: -4rem;
}

#pull-container {
    display: flex;
    /* padding: calc(var(--baseline) * 2); */
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#image-pull {
    width: calc(var(--baseline) * 11.37 * 2);
}

#biker-container {
    margin-right: -2rem;
    width: calc(var(--baseline) * 4.35 * 2);
    height: calc(var(--baseline) * 4.35 * 2 + 14rem);
    shape-outside: circle(calc(var(--baseline) * 5.35) at calc(var(--baseline) * 4.35) calc(var(--baseline) * 4.35 + 14rem));
}

#lake-container {
    width: calc(var(--baseline) * 8.15 * 2);
    height: calc(var(--baseline) * 8.15 * 2 + 12rem);
    shape-outside: circle(calc(var(--baseline) * 11) at calc(var(--baseline) * 9) calc(var(--baseline) * 23));
}

@media only screen and (max-width: 600px) {
    #lake-container {
        margin-right: -4rem;
    }
}

#image-lake {
    width: calc(var(--baseline) * 8.15 * 2);
}

#signatories, #quotes {
    text-align: center;
}

#image-pair {
    width: calc(var(--baseline) * 8.86 * 2);
    transform: rotate(-0.15turn);
    margin-left: -1.25rem;
    margin-top: -1.5rem;
}

#image-biker {
    width: calc(var(--baseline) * 4.35 * 2);
}

#image-tree {
    width: calc(var(--baseline) * 10.10 * 2);
    margin-left: -6.5rem;
    margin-top: 2.5rem;
}

#big-group-container {
    display: flex;
    padding: calc(var(--baseline) * 2);
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

@media only screen and (max-width: 600px) {
    #big-group-container {
        display: none;
    }
}

#image-big-group {
    max-width: calc(var(--baseline) * 20.18 * 2);
}

.hidden {
    display: none;
}

.has-dialog {
  overflow: hidden !important;
}

[role=dialog] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overflow-x: hidden;
    padding: calc(var(--lineHeight) * 2);
    padding-bottom: calc(var(--lineHeight) * 3)
}

.spacer {
    max-height: 100%;

}

@media only screen and (max-width: 600px) {
    [role=dialog] {
        padding: var(--lineHeight);
        padding-bottom:calc(var(--lineHeight) * 2)
    }
}

[role=dialog] {
    position: fixed;
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin-bottom: 0;

    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);

    /* padding: calc(var(--lineHeight)*2); */
    /* padding-bottom: calc(var(--lineHeight)*3); */


    overflow-y: scroll;
    overflow-x: hidden;

    grid-auto-rows: min-content;
}

@supports (-webkit-backdrop-filter: blur(15px)) {
    [role=dialog] {
        background-color: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(15px);
    }

    @media (prefers-contrast: more) {
        [role=dialog] {
            background-color: white;
            -webkit-backdrop-filter: unset;
        }
    }
}

.button-list {
    display: flex;
    flex-wrap: wrap;

    padding-bottom: calc(var(--lineHeight));
}

.button-list .button {
    display: inline-block;

    margin-left: 0;
    margin-right: calc(var(--lineHeight) / 2);
    padding-left: calc(var(--lineHeight) );
    padding-right: calc(var(--lineHeight) );

    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.has-dialog #main nav {
    visibility: hidden;
}

nav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    margin-bottom: calc(var(--lineHeight) / 2);
    margin-left: calc(var(--lineHeight) / -8);
    margin-right: calc(var(--lineHeight) / -8);
}

nav > * {
    margin-left: calc(var(--lineHeight) / 2);
    margin-bottom: calc(var(--lineHeight) / 2);
}

nav > *:first-child {
    margin-left: unset;
}

.nav-button {
    cursor: pointer;

    display: flex;
  align-items: center;
  justify-content: center;

    border-radius: 100000px;
    border: 2px solid var(--accent-color);
    color: var(--accent-color) !important;
    letter-spacing: 0.01em;
    font-weight: 450;

    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 2px 10px 0px; */
    font-size: 0.75rem;

    padding-left: calc(var(--lineHeight) / 1.5);
    padding-right: calc(var(--lineHeight) / 1.5);

    text-decoration: none;

    height: calc(var(--lineHeight) * 1.5);

    vertical-align: middle;
    box-sizing: border-box;

    user-select: none;
}

.nav-button:hover {
    opacity: 0.8;
}

.nav-button[disabled] {
    --accent-color: #E80;
    cursor: default;
    pointer-events: none;
}

a {
    display: inline;
    white-space: normal;
    text-decoration: underline var(--accent-color);
    -webkit-text-decoration: underline var(--accent-color);
}

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

p {
    hyphens: manual;
}

a.button {
    --primary-color: #00B7FF;
    --secondary-color: #8500FF;

    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    background: linear-gradient(150deg, var(--primary-color) 20%, var(--secondary-color) 200%);
    padding: calc(var(--lineHeight) / 4);
    border-radius: 100000px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 2px 10px 0px;
    font-size: 0.75rem;
    margin-bottom: calc(var(--lineHeight) / 4 + var(--lineHeight) / 8);
    margin-left: calc(var(--lineHeight) / -8);
    margin-right: calc(var(--lineHeight) / -8);
    margin-top: calc(var(--lineHeight) / 8);
    height: calc(var(--lineHeight) * 1.5);

    box-sizing: border-box;
}

a.button:hover {
    background: linear-gradient(150deg, var(--primary-color) 0%, var(--secondary-color) 180%);
}

a.orange {
    --primary-color: #FF8800;
    --secondary-color: #DD4400;
}

a.green {
    --primary-color: #2CDA85;
    --secondary-color: #00A638;
}

.stroke {
    position: relative;
}

.stroke:after {
    content: '';
    background-image: url('/img/stroke1.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: block;
    top: 1px;
    left: -15px;
    height: calc(var(--lineHeight) * 2);
    width: 90%;
    position: absolute;
    z-index: -1;
    mix-blend-mode: multiply;
    opacity: 0.8;
}

.second.stroke:after {
    top: 4px;
    background-image: url('/img/stroke2.png');
}

.third.stroke:after {
    top: -2px;
    background-image: url('/img/stroke3.png');
}

.quote figure, .infobox {
    background: var(--light-gray);
    background-clip: padding-box;
    border-left: solid calc(var(--hrThickness) * 1) transparent;
    padding: calc(var(--lineHeight) * 1) calc(var(--lineHeight) * 2) calc(var(--lineHeight) * 1) calc(var(--lineHeight) * 2 - var(--hrThickness));
    position: relative;
    --accent-color: #8500FF;
}

.quote figure::before, .infobox::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--hrThickness) * -1);
    bottom: 0;
    width: calc(var(--hrThickness) * 1);
    background: linear-gradient(182deg, #00B7FF 33%, #8500FF);
}

.quote figure::after, .infobox::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--hrThickness) * -1);
    bottom: 0;
    right: 0;
    box-shadow: rgba(15, 11, 29, 0.1) 0px 1px 2px 0px, rgba(12, 8, 26, 0.08) 0px 2px 10px 0px;
    z-index: -1;
}

.quote figcaption {
    text-align: right;
    font-size: 0.8rem;
}

.quote a, .infobox a {
    white-space: normal;
    display: inline-block;
}

.pull-quote {
    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) * 2);
    padding: calc(var(--lineHeight) * 0.5);
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .pull-quote {
        font-weight: 700;
        letter-spacing: -0.03em;
        font-size: 1.8rem;
        line-height: calc(var(--lineHeight) * 1.75);
        padding: calc(var(--lineHeight) * 0.25);
    }
}

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

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

.pull-quote blockquote {
    background: linear-gradient(180deg, var(--gradient-color-1) -5%, var(--gradient-color-2) 110%), var(--gradient-color-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

@media only screen and (min-width: 601px) {
    .quote + .quote {
        margin-top: calc(var(--lineHeight) * 5);
    }
}

@media only screen and (max-width: 600px) {
    .quote {
        padding-right: calc(var(--lineHeight) * 1.5);
    }

    .quote figure {
        padding: calc(var(--lineHeight) * 1) calc(var(--lineHeight) * 1.2);
    }

    .quote a {
        word-wrap: unset;
        white-space: unset;
    }

    .quote figure:nth-child(2n) {
        margin-left: calc(var(--lineHeight) * 1);
        margin-right: calc(var(--lineHeight) * -1);
    }

    #pedestrian-container {
        display: none;
    }

    #before-pedestrian-container {
        margin-bottom: unset;
    }
}

blockquote p:first-child,
blockquote p:last-child {
    position: relative;
}

blockquote p:first-child::before,
blockquote p:last-of-type::after {
    font-weight: 600;
    font-size: 1rem;
}

blockquote p:first-child::before {
    color: var(--gradient-color-1);
}

blockquote p:last-of-type::after {
    color: var(--gradient-color-2);
}

blockquote:lang(en) p:first-child::before {
    content: '“';
    position: absolute;
    left: -.42rem;
}

blockquote:lang(en) p:last-of-type::after {
    content: '”';
    margin-left: -.05em;
}

blockquote:lang(de) p:first-child::before {
    content: '„';
    position: absolute;
    left: -.5rem;
}

blockquote:lang(de) p:last-of-type::after {
    content: '“';
    margin-left: -.05em;
    display: inline-block;
    width: 0;
}

blockquote:lang(fr) p:first-child::before {
    content: '«';
    position: absolute;
    left: -.72rem;
}

blockquote:lang(fr) p:last-of-type::after {
    content: '»';
    margin-left: -.15rem;
}

blockquote p {
    font-style: normal;
    font-variation-settings: 'slnt' -4;
}

blockquote em {
    font-style: normal;
    font-variation-settings: 'slnt' -10;
}

blockquote footer {
    font-weight: 500;
    font-size: .85rem;
    line-height: var(--lineHeight);
}

@media only screen and (min-width: 601px) {
    ul {
        padding: 0;
    }
    ul ul {
        margin-left: calc(var(--lineHeight) * 1);
    }
    li {
        margin-left: calc(var(--lineHeight) * -0.2);
        padding-left: calc(var(--lineHeight) * 0.2);
    }
}

.logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logos {
    --multiplier: 0.8;
}

.logos img {
    height: calc(var(--lineHeight) * 3 * var(--multiplier));
    padding: calc(var(--lineHeight) * 1.25) calc(var(--lineHeight) * 1.5);
    margin: 0;
    width: unset;
}

@media only screen and (max-width: 600px) {
    .logos img {
        height: calc(var(--lineHeight) * 2 * var(--multiplier));
        padding: calc(var(--lineHeight) * 0.75);
    }
}

@media screen {
    .low-contrast {
        color: var(--dark-gray);
    }
}

@media not screen {
    .only-screen,
    .only-screen * {
        display: none !important;
    }
}

@media not print {
    .only-print,
    .only-print * {
        display: none !important;
    }
}

@media only print {
     :root {
        --fontSize: 12pt;
    }
    html {
        background: none;
    }
    body {
        padding-bottom: 0;
    }
    h1,
    h2,
    h3,
    h4 {
        break-after: avoid;
    }
    h1+p,
    h2+p,
    h3+p,
    h4+p {
        break-before: avoid;
    }
    p,
    blockquote,
    img {
        break-inside: avoid;
    }
    .logos img {
        height: calc(var(--lineHeight) * 2);
    }
}