@font-face {
    font-family: 'Days One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("days-one-latin.woff2") format("woff2");
}


.text-isologo {
    font-family: 'Days One', sans-serif;
    font-size: 1.75rem;
}


#header-layout-logo {
    --logo-text-color: var(--pico-muted-color);
    --logo-bird-color: #5582f3;
}
.layout-logo {
    inline-size: 8rem;
    block-size: 8rem;
    
    --logo-eye-color: var(--pico-background-color);
}




#nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.topbar {
    display: flex;
    align-items: center;
    gap: var(--pico-spacing);
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--pico-background-color);
}
.nav-open, .nav-close {
    cursor: pointer;
}
.nav-open svg, .nav-close svg {
    inline-size: 2rem;
    block-size: 2rem;
}

#sidebar .nav-close {
    position: absolute;
    inset-block-start: var(--pico-spacing);
    inset-inline-end: var(--pico-spacing);
    margin: 0;
}


#sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 20;
    inline-size: min(80vw, 18rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--pico-spacing);
    background: var(--pico-background-color);
    border-inline-end: 1px solid var(--pico-muted-border-color);
    transform: translateX(-100%);
    transition: transform .25s ease;
}
body:has(#nav-toggle:checked) #sidebar {
    transform: translateX(0);
}


label.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, .5);
}
body:has(#nav-toggle:checked) label.nav-backdrop {
    display: block;
}
body:has(#nav-toggle:checked) {
    overflow: hidden;
}

html {
    scrollbar-gutter: stable;
}


#sidebar nav {
    margin-block-start: calc(var(--pico-nav-element-spacing-vertical) * 0.5);
    
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
#sidebar nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

#sidebar nav > ul + ul {
    margin-block-start: auto;
    padding-block-start: var(--pico-spacing);
}

#sidebar nav li {
    list-style: none;
    padding-block: calc(var(--pico-nav-element-spacing-vertical) * 0.5);
    padding-inline: 0;
}
#sidebar nav li > :is(a, [aria-current]) {
    display: block;
}



#sidebar nav li > [aria-current] {
    font-weight: bold;
    margin-block: calc(var(--pico-nav-link-spacing-vertical) * -1);
    margin-inline: calc(var(--pico-nav-link-spacing-horizontal) * -1);
    padding-block: var(--pico-nav-link-spacing-vertical);
    padding-inline: var(--pico-nav-link-spacing-horizontal);
}

.lang-flag {
    inline-size: 1.5em;
    block-size: 1em;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: -0.15em;
    margin-inline-end: 0.4em;
}


body:has(#nav-toggle:focus-visible) .nav-open svg,
body:has(#nav-toggle:focus-visible) .nav-close svg {
    outline: 2px solid var(--pico-primary);
    outline-offset: 2px;
}


body > main {
    min-block-size: 100svh;
}


body:has(.coming-soon) {
    position: relative;
}
.coming-soon {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 100svh;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.coming-soon h1 {
    margin-block-end: 0;
    text-align: center;
    pointer-events: auto;
}


.chronology .chrono-year {
    display: block;
}
@media (min-width: 768px) {
    .chronology > p {
        position: relative;
        padding-inline-start: 5rem;
    }
    .chronology .chrono-year {
        position: absolute;
        inset-inline-start: 0;
        inline-size: 4.5rem;
        text-align: start;
    }
}


:root {
    --footer-bg: #5582f3;
    --footer-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --footer-bg: #ffffff;
        --footer-fg: #5582f3;
    }
}


body > footer {
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    margin: 0;
    max-width: none;
    padding: 0;
    position: relative;
    z-index: 30;
    background: var(--footer-bg);
}

#footer-layout-logo {
    --logo-text-color: var(--footer-fg);
    --logo-bird-color: var(--footer-fg);
}

body > footer .layout-logo {
    inline-size: min(50vw, 50vh);
    block-size: min(50vw, 50vh);
    --logo-eye-color: var(--footer-bg);
}


body > footer .logo-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: 90s linear infinite;
}
body > footer .logo-eye-left {
    animation-name: logo-blink-left;
}
body > footer .logo-eye-right {
    animation-name: logo-blink-right;
}
@keyframes logo-blink-left {
    0% { transform: scaleY(1); }
    4.444% { transform: scaleY(1); animation-timing-function: ease-in; }
    4.489% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    4.533% { transform: scaleY(1); }
    4.644% { transform: scaleY(1); animation-timing-function: ease-in; }
    4.689% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    4.733% { transform: scaleY(1); }
    19.444% { transform: scaleY(1); animation-timing-function: ease-in; }
    19.489% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    19.533% { transform: scaleY(1); }
    29.222% { transform: scaleY(1); animation-timing-function: ease-in; }
    29.267% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    29.311% { transform: scaleY(1); }
    29.422% { transform: scaleY(1); animation-timing-function: ease-in; }
    29.467% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    29.511% { transform: scaleY(1); }
    45.556% { transform: scaleY(1); animation-timing-function: ease-in; }
    45.600% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    45.644% { transform: scaleY(1); }
    65.222% { transform: scaleY(1); animation-timing-function: ease-in; }
    65.267% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    65.311% { transform: scaleY(1); }
    65.422% { transform: scaleY(1); animation-timing-function: ease-in; }
    65.467% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    65.511% { transform: scaleY(1); }
    88.000% { transform: scaleY(1); animation-timing-function: ease-in; }
    88.044% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    88.089% { transform: scaleY(1); }
    88.200% { transform: scaleY(1); animation-timing-function: ease-in; }
    88.244% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    88.289% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}
@keyframes logo-blink-right {
    0% { transform: scaleY(1); }
    4.500% { transform: scaleY(1); animation-timing-function: ease-in; }
    4.544% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    4.589% { transform: scaleY(1); }
    4.700% { transform: scaleY(1); animation-timing-function: ease-in; }
    4.744% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    4.789% { transform: scaleY(1); }
    19.544% { transform: scaleY(1); animation-timing-function: ease-in; }
    19.589% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    19.633% { transform: scaleY(1); }
    29.278% { transform: scaleY(1); animation-timing-function: ease-in; }
    29.322% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    29.367% { transform: scaleY(1); }
    29.478% { transform: scaleY(1); animation-timing-function: ease-in; }
    29.522% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    29.567% { transform: scaleY(1); }
    45.556% { transform: scaleY(1); animation-timing-function: ease-in; }
    45.600% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    45.644% { transform: scaleY(1); }
    65.300% { transform: scaleY(1); animation-timing-function: ease-in; }
    65.344% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    65.389% { transform: scaleY(1); }
    65.500% { transform: scaleY(1); animation-timing-function: ease-in; }
    65.544% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    65.589% { transform: scaleY(1); }
    88.056% { transform: scaleY(1); animation-timing-function: ease-in; }
    88.100% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    88.144% { transform: scaleY(1); }
    88.256% { transform: scaleY(1); animation-timing-function: ease-in; }
    88.300% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    88.344% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}
@keyframes logo-blink-hover {
    0% { transform: scaleY(1); animation-timing-function: ease-in; }
    15% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    30%, 65% { transform: scaleY(1); animation-timing-function: ease-in; }
    80% { transform: scaleY(0.1); animation-timing-function: ease-out; }
    100% { transform: scaleY(1); }
}
@media (hover: hover) {
    body > footer .layout-logo:hover .logo-eye-left {
        animation: logo-blink-hover .27s 1;
    }
    body > footer .layout-logo:hover .logo-eye-right {
        animation: logo-blink-hover .27s 1 .05s;
    }
}
@media (prefers-reduced-motion: reduce) {
    body > footer .layout-logo .logo-eye,
    body > footer .layout-logo:hover .logo-eye {
        animation: none;
    }
}


.footer-copyright,
.footer-lang {
    font-size: max(24px, 1.2rem);
}
.footer-copyright {
    justify-self: start;
    padding: var(--pico-spacing);
    color: var(--footer-fg);
}

.footer-copyright a {
    color: inherit;
    text-decoration: underline;
}
.footer-copyright a:focus-visible {
    outline: 2px solid var(--footer-fg);
    outline-offset: 2px;
}



.footer-band {
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
    gap: var(--pico-spacing);
    padding: var(--pico-spacing);
    color: var(--footer-fg);
}
.footer-band > *,
.footer-links > * {
    grid-column: 1;
}
.footer-links {
    display: contents;
}

nav.footer-social ul {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--pico-spacing);
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-social li {
    padding: 0;
}
.footer-social a {
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    padding: 0;
    
    color: var(--footer-fg);
}
.footer-social svg {
    inline-size: 100%;
    block-size: 100%;
}
.footer-social a:focus-visible {
    outline: 2px solid var(--footer-fg);
    outline-offset: 2px;
}
.footer-lang {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pico-spacing) / 2);
}


.scroll-to-top {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--footer-fg);
    color: var(--footer-bg);
    border: 1px solid var(--footer-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.scroll-to-top svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}
.scroll-to-top:focus-visible {
    outline: 2px solid var(--footer-bg);
    outline-offset: 2px;
}


@media (width < 768px) {
    .footer-social a {
        inline-size: 3rem;
        block-size: auto;
    }
    .footer-social svg {
        display: block;
        block-size: auto;
        aspect-ratio: 1;
    }
    .footer-social svg.glyph-narrow {
        aspect-ratio: 448 / 512;
    }
    .footer-lang .lang-flag {
        inline-size: 3rem;
        block-size: 2rem;
        margin-inline-end: 0;
    }
    .footer-lang-name {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    
    #nav-toggle,
    .nav-close,
    .topbar {
        display: none;
    }
    
    label.nav-backdrop,
    body:has(#nav-toggle:checked) label.nav-backdrop {
        display: none;
    }
    
    #sidebar {
        inline-size: 18rem;
        transform: none;
        border-inline-end: none;
    }
    body > main {
        margin-inline-start: 18rem;
        
        max-width: calc(100% - 18rem - var(--pico-spacing));
    }
    
    body > footer {
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr auto;
    }
    body > footer .layout-logo {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .footer-copyright {
        grid-row: 2;
    }
    
    .footer-band {
        grid-row: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-block-size: calc(3rem + 2 * var(--pico-spacing));
        padding-inline-end: 5rem;
    }
    .footer-links {
        display: flex;
        align-items: center;
        gap: var(--pico-spacing);
    }
    nav.footer-social ul {
        flex-direction: row;
        align-items: center;
    }
    .scroll-to-top {
        position: fixed;
        inset-block-end: var(--pico-spacing);
        inset-inline-end: var(--pico-spacing);
        z-index: 40;
    }
    @supports (animation-timeline: scroll()) {
        .scroll-to-top {
            opacity: 0;
            animation: reveal-scroll-to-top linear both;
            animation-timeline: scroll();
            animation-range: 400px 500px;
        }
        @keyframes reveal-scroll-to-top {
            to { opacity: 1; }
        }
    }
}