* {
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
}

@font-face nb {
        font-family: nb;
        src: url(nb_international_pro_bold-webfont.ttf);
}

html {
        overscroll-behavior: none;
}

html:has(.snap) {
        scroll-snap-type: y proximity;
        header {
                scroll-snap-align: end;
        }
        section,
        #art,
        .grid {
                scroll-snap-align: start;
        }
}

body {
        background: black;
        color: #ccc;
        font-family: nb, sans-serif;
        line-height: 1.5;
}

a {
        color: inherit;
}

h1,
h2,
h3,
h4 {
        font-weight: normal;
        font-size: 1em;
        padding: 0;
}

main.layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
        grid-gap: 0 1em;
        padding: 1em 0 1em 1em;

        h2 + p {
                padding-top: 3em;
        }

        ul {
                list-style: none;
        }

        p,
        h4 {
                padding: 0 0.5em 1em 0;
                hyphens: auto;
                text-wrap: pretty;
                max-width: 60ch;
        }

        section {
                padding: 7em 0 2em;
                grid-column: 1 / -1;
        }

        details {
                cursor: pointer;
                > :last-child {
                        padding-bottom: 4em;
                }

                summary {
                        &:focus-visible,
                        &:focus {
                                outline: none;
                                box-shadow: none;
                        }
                        list-style: none;
                        p:after {
                                content: "read more…";
                        }
                }
                summary::-webkit-details-marker {
                        display: none;
                }
                &:not([open]) summary {
                        padding-bottom: 3em;
                }
                &:not([open]) summary span {
                        background-image: linear-gradient(
                                90deg,
                                white,
                                rgba(0, 0, 0, 0.1)
                        );
                        -webkit-text-fill-color: transparent;
                        -webkit-background-clip: text;
                }
                ::marker {
                        display: none;
                        content: "";
                }
                &[open] summary span {
                        background: none;
                }
                &[open] {
                        cursor: initial;
                }

                &[open] summary p:after {
                        display: none;
                }
        }
}

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

#art {
        user-select: none;
        position: relative;
        grid-column: 1 / -1;
        margin: 0 0 0 -1em;
        .btn {
                animation: fadein 0.5s ease 2s both;
                cursor: pointer;
                padding: 2em;
                position: absolute;
                top: calc(50vh - 3em);
                &.prev {
                        left: 0;
                        transform: rotate(180deg);
                }
                &.next {
                        right: 0;
                }
                &:after {
                        content: "";
                        display: inline-block;
                        height: 1.5em;
                        aspect-ratio: cos(30deg);
                        clip-path: polygon(
                                30% 75%,
                                0 75%,
                                0 25%,
                                30% 25%,
                                30% 0,
                                92% 50%,
                                30% 100%
                        );
                        background: white;
                }
                &:hover {
                        opacity: 1 !important;
                }
        }

        .btn:hover:after {
                background: linear-gradient(45deg, black, black);
        }
}

#nav {
        display: contents;
        header {
                grid-column: 1 / -1;
                padding: 0 1em 5em 1em;
                margin-left: -1em;
                background: black;
                h4,
                p,
                a {
                        padding-top: 1em;
                }
                p {
                        grid-column: 2 / -1;
                }
        }
        ul {
                list-style: none;
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: subgrid;
        }

        li {
                padding-bottom: 1em;
                cursor: pointer;
                transition: opacity 0.3s ease;
                font-style: italic;
                &:not(.active):not(:hover) {
                        opacity: 0.6;
                }
                &:not(.active):not(:hover).fade {
                        opacity: 0.3;
                }
                &:before {
                        font-style: normal;
                        content: attr(data-time);
                        display: block;
                        text-transform: uppercase;
                        font-size: 0.6em;
                        letter-spacing: 0.5px;
                }
                &.fade:before {
                        text-decoration: line-through;
                }
        }
}

#frame {
        width: 100%;
        height: 100vh;
        border: none;
        background: white;
}

@media (min-width: 50em) {
        main.layout {
                font-size: 1.2em;
                grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
                padding: 3em 0 3em 3em;

                p {
                        padding: 0 1em 1em 0;
                }

                section {
                        padding: 10em 0 4em;
                        grid-column: 2 / -1;
                }

                #art {
                        grid-column: 1 / -1;
                        margin: 0 0 0 -3em;
                }

                #nav {
                        header {
                                display: grid;
                                grid-column: 1 / -1;
                                margin-left: -3em;
                                padding-left: 3em;
                                grid-template-columns: subgrid;
                                p {
                                        grid-column-end: span 3;
                                }
                        }
                        ul {
                                grid-column: 1 / -1;
                                display: grid;
                                grid-template-columns: subgrid;
                        }
                        li {
                                padding-bottom: 2em;
                        }
                }
        }
}

@media (orientation: portrait) and (max-width: 800px) {
        #frame {
                height: calc(100vh - 6em);
        }
}