@font-face {
    font-family: "PP Neue Montreal Medium";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("PP Neue Montreal Medium"),url(./fonts/ppneuemontreal-medium.woff) format("woff")
}

@font-face {
    font-family: "PP Neue Montreal Bold";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("PP Neue Montreal Bold"),url(./fonts/ppneuemontreal-bold.woff) format("woff")
}

:root {
    --positionX: 50vw;
    --positionX-opposit: calc(100% - var(--positionX));
    --positionY: 50vh;
    --positionY-opposit: calc(100% - var(--positionY)); 

    --colorText: black;
    --colorBackground: #f3f0eb;
    /*--red: #D65259;*/
    --red: #C8102E;
    --orange: #F76614;
    --blue: #0057a4;
    --cream: #f3f0eb;
}
html {
    font-size: 16px;
}
body {
    margin: 0;
    font-family: sans-serif;
    block-size: 100%;
    overflow: hidden;
}

svg.logo {
    inline-size: 100%;
    block-size: auto;
    position: absolute;
    inset: 0 0 auto 0;
    mix-blend-mode: difference;
    margin-block-start: 1.875em;
    padding-inline: 1.875em;
    box-sizing: border-box;
    pointer-events: none;
    path {
        fill: var(--red);
    }
}
video {
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
}
video.hero {
    pointer-events: none;
    inline-size: 100lvw;
    block-size: 100lvh;
}
[data-mute] {
    cursor: pointer;
    position: absolute;
    inset: auto auto 2em 2em;
    mix-blend-mode: difference;
    > * {
        pointer-events: none;
    }
    circle {
        fill: var(--red);
    }
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* body:has([data-mute]:hover) #icon,
body:has([data-page="info"].open) #icon {
    opacity: 0;
} */
/* body:has(.home-body video:hover) #icon {
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='31' fill='white' stroke='black' stroke-width='2'/%3E%3Cpath d='M18.8523 37V28.42H22.2603C23.8323 28.42 25.0443 29.116 25.0443 30.916C25.0443 32.716 23.8323 33.412 22.2603 33.412H19.9323V37H18.8523ZM19.9323 32.452H22.3323C23.4003 32.452 23.9163 31.96 23.9163 30.916C23.9163 29.872 23.4003 29.38 22.3323 29.38H19.9323V32.452ZM26.1296 28.42H27.2096V36.04H31.7096V37H26.1296V28.42ZM37.7673 34.852H33.9873L33.2313 37H32.1153L35.2833 28.42H36.4953L39.6873 37H38.5233L37.7673 34.852ZM34.3473 33.892H37.4193L35.8953 29.416H35.8713L34.3473 33.892ZM38.4774 28.42H39.6414L42.1254 32.656H42.1494L44.6454 28.42H45.8094L42.6774 33.484V37H41.5974V33.484L38.4774 28.42Z' fill='black'/%3E%3C/svg%3E%0A");
} */


[data-page] {
    position: absolute;
    top: 0;
    inline-size: 100%;
    block-size: 100%;
    box-sizing: border-box;
    overflow: auto;
    block-size: 100%;
}
[data-page="home"] {
    color: var(--colorText);
    background-color: var(--colorBackground);
}
[data-page="info"] {
    color: var(--colorText);
    background-color: white;
    padding: .9375em;
    translate: 0 100%;
    transition: translate .3s cubic-bezier(0.215, 0.610, 0.355, 1);
    transition-delay: .3s;

    &.open {
        translate: 0 0%;
        transition-delay: 0s;
        cursor: pointer;
    }
}

.home-body {
    padding-inline: .9375em;
}
.home-body img {
    /*margin-inline: auto;*/
    display: block;
    /*inline-size: 100%;*/
    block-size: auto;
    /*max-inline-size: 28.4375em;*/
    width: calc(100% + 1.875em);
    margin-inline: -0.9375em;
}
.home-body video {
    margin-inline: -0.9375em;
    inline-size: calc(100% + (2 * .9375em));
    cursor: pointer;
}
.video-box {
    position: relative;
}
.video-box::after {
    /* content: ''; */
    pointer-events: none;
    position: absolute;
    inset: 0;
    place-self: center;

    transition: opacity .1666s linear;

    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjYwIiBjeT0iNjAiIHI9IjU5IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIvPgo8cGF0aCBkPSJNNzYgNTkuMzMzM0w0NiA4NS4zMTRMNDYgMzMuMzUyNUw3NiA1OS4zMzMzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
}
.video-box:has(video.play)::after {
    opacity: 0;
}



.gridy {
    display: grid;
    gap: 2.8125em .9375em;
    grid-template-columns: repeat(auto-fit, minmax(min(100%,440px), 1fr));
    list-style: none;
    padding-inline: 0;
}

ul.simple {
    padding-inline: 0;
    list-style: none;
    columns: 2 375px;
    gap: 1em;
}

hr {
    border: none;
    padding: 0;
    margin: 5.5em 0;
    border-top: 10px solid var(--colorText);
}
[data-page="info"] hr {
    border-color: var(--blue);
}

strong, h1, h2, h3, h4, h5, h6 {
    font-family: "PP Neue Montreal Bold", Arial Black, Arial Bold, Gadget, sans-serif;
    font-weight: normal;
}



[data-page] {
    font-family: "PP Neue Montreal Medium", sans-serif;
    font-size: clamp(1.125rem, 1.617vw + 0.707rem, 2rem);
    line-height: 1.05;
    letter-spacing: calc(-1em / 100);
}
[data-page="info"] {
    .gridy h3 {
        margin-block: 0;
    }
    .gridy p {
        margin-block: .5em 0;
    }
}

.size-128 {
    font-size: clamp( .8rem, 1rem + 8vw, 4em);
    text-wrap-style: balance;
}
.size-96 {
    font-size: 3em;
}
.size-48 {
    font-size: 1.5em;
}
.size-32 {
    font-size: 1em;
    line-height: 1.3;
}

a[href] {
    word-break: break-all;
    color: inherit;
    text-decoration-thickness: from-font;
    &:hover, &:focus-visible {
        color: var(--colorText);
    }
    > * {
        pointer-events: none;
    }
}

.split {
    /*   opacity: 0; */
    will-change: transform;
}
.split * {
    will-change: transform;
}
.line-mask {
    overflow: clip;
    display: inline-block;
    &:has(hr) {
        display: block;
    }
}
li.line-mask {
    display: block;
}
.line-mask span.line {
    display: block;
}
.line-mask div.line {
    display: inline-block;
}
.line-mask .line {
    will-change: translate;
    transition: translate .666s cubic-bezier(0.215, 0.610, 0.355, 1);
    translate: 0% 100%;
}
.line-mask.show .line {
    will-change: translate;
    translate: 0% 0%;
}

.logo-text svg {
    width: auto;
    height: 1.05cap;
    display: inline;
    path {
        fill: var(--blue);
    }
}


nav {
    position: sticky;
    z-index: 1;
    bottom: 1.5em;
    inline-size: fit-content;
    margin-inline: auto 1em;
}
.btn-details {
    font-size: 2rem;
    cursor: pointer;
    inline-size: 3em;
    aspect-ratio: 1;
    margin-inline: 0;
    border: none;
    background: none;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTQiIGhlaWdodD0iOTQiIHZpZXdCb3g9IjAgMCA5NCA5NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNDciIGN5PSI0NyIgcj0iNDYiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiLz4KPHBhdGggZD0iTTcyLjQxOTkgNDUuMzZDNzQuNjQzOSA0NS44ODggNzYuNjc1OSA0Ni40IDc2LjY3NTkgNDguODMyQzc2LjY3NTkgNTAuNzIgNzUuNDQzOSA1Mi4yMjQgNzIuNTk1OSA1Mi4yMjRDNjkuNzMxOSA1Mi4yMjQgNjcuNzQ3OSA1MC43MiA2Ny41ODc5IDQ4LjE2SDY5LjA5MTlDNjkuMjUxOSA0OS43NDQgNzAuMTQ3OSA1MC45NiA3Mi41MzE5IDUwLjk2Qzc0LjU5NTkgNTAuOTYgNzUuMTcxOSA1MC4wNDggNzUuMTcxOSA0OC44OEM3NS4xNzE5IDQ3LjI4IDc0LjA1MTkgNDcuMDg4IDcxLjgyNzkgNDYuNTI4QzcwLjA5OTkgNDYuMDk2IDY4LjA2NzkgNDUuNTY4IDY4LjA2NzkgNDMuMzZDNjguMDY3OSA0MS41MzYgNjkuNDc1OSA0MC4zMzYgNzEuOTM5OSA0MC4zMzZDNzQuNTMxOSA0MC4zMzYgNzYuMTE1OSA0MS42NDggNzYuMzA3OSA0My45NTJINzQuODAzOUM3NC41OTU5IDQyLjQxNiA3My43OTU5IDQxLjYgNzEuOTU1OSA0MS42QzcwLjM1NTkgNDEuNiA2OS41NzE5IDQyLjIwOCA2OS41NzE5IDQzLjI5NkM2OS41NzE5IDQ0LjcyIDcwLjk0NzkgNDUuMDA4IDcyLjQxOTkgNDUuMzZaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNNTkuNjQ5NCA0MC41Nkg2MS4wODk0VjUwLjcySDY3LjA4OTRWNTJINTkuNjQ5NFY0MC41NloiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik01Ni4xMzM3IDQwLjU2SDU3LjU3MzdWNTJINTYuMTMzN1Y0MC41NloiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik01Mi40NjMxIDQ5LjEzNkg0Ny40MjMxTDQ2LjQxNTEgNTJINDQuOTI3MUw0OS4xNTExIDQwLjU2SDUwLjc2NzFMNTUuMDIzMSA1Mkg1My40NzExTDUyLjQ2MzEgNDkuMTM2Wk00Ny45MDMxIDQ3Ljg1Nkg1MS45OTkxTDQ5Ljk2NzEgNDEuODg4SDQ5LjkzNTFMNDcuOTAzMSA0Ny44NTZaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNNDEuMzYyNCA1MlY0MS44NEgzNy41NTQ0VjQwLjU2SDQ2LjYxMDRWNDEuODRINDIuODAyNFY1Mkg0MS4zNjI0WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTMwLjEyMDYgNDUuNDRIMzUuODMyNlY0Ni43MkgzMC4xMjA2VjUwLjcySDM2Ljc5MjZWNTJIMjguNjgwNlY0MC41NkgzNi42MDA2VjQxLjg0SDMwLjEyMDZWNDUuNDRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTcuODUyNSA1MlY0MC41NkgyMS45OTY1QzI1LjE0ODUgNDAuNTYgMjcuMDg0NSA0Mi42MDggMjcuMDg0NSA0Ni4yODhDMjcuMDg0NSA0OS45NjggMjUuMTQ4NSA1MiAyMS45OTY1IDUySDE3Ljg1MjVaTTE5LjI5MjUgNDEuODRWNTAuNzJIMjEuOTk2NUMyNC45MDg1IDUwLjcyIDI1LjU4MDUgNDguNTI4IDI1LjU4MDUgNDYuMjg4QzI1LjU4MDUgNDQuMDQ4IDI0LjkwODUgNDEuODQgMjEuOTk2NSA0MS44NEgxOS4yOTI1WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==');
    background-repeat: no-repeat;
    background-position: center;
}
.btn-details > * {
    pointer-events: none;
}

body:has([data-page="info"].open) .btn-details {
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMzAiIGZpbGw9IiNGNzY2MTQiLz4KPHBhdGggZD0iTTE5IDE5TDQwLjIxMzIgNDAuMjEzMiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xOSA0MEw0MC4yMTMyIDE4Ljc4NjgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K');*/
    background-image: url('close.png');
    background-repeat: no-repeat;
    background-size: contain;
}



main footer > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em 3.5em;

    margin-block-end: 1em;
    padding-inline: .9375em;
}

main footer > div.social {
    /*justify-content: center;*/
    padding-block-start: .9375em;
    border-top: 1px solid var(--colorText);
}

main footer > div.social svg {
    width:1.5em;
    min-width: 50px;
}

main footer p {
    margin-block: 0;
}