@import url('reset.css');

/* These fonts are NOT free software according to the FSF definition;
   they are distributed under the ‘Aladdin Free Public License’. This
   is sufficient to allow essentially unrestricted web font use, since
   we don’t charge for access to the fonts, which is the main
   restriction this licence imposes.

   <https://spdx.org/licenses/Aladdin.html>
*/
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    src: url('/fonts/univers/URWClassicSans-Regular.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    src: url('/fonts/univers/URWClassicSans-Bold.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    src: url('/fonts/univers/URWClassicSans-RegularIt.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: italic;
    font-stretch: normal;
    src: url('/fonts/univers/URWClassicSans-BoldItalic.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
    src: url('/fonts/univers/URWClassicSansCond-Regular.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: normal;
    font-stretch: condensed;
    src: url('/fonts/univers/URWClassicSansCond-Bold.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: italic;
    font-stretch: condensed;
    src: url('/fonts/univers/URWClassicSansCond-Italic.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: italic;
    font-stretch: condensed;
    src: url('/fonts/univers/URWClassicSansCond-BdItalic.woff2');
}

@property --hue-degree {
    syntax: '<number>';
    initial-value: 0;
    inherits: false; }

:root {
    --grid-column-width: calc(100vw / 12);
    --grid-column-start: 0px; }


html {
    font-size: 18px;
    line-height: 24px;
    color: #333;
    text-decoration-thickness: 0.06667em;
    background-color: oklch(93% 0.03 var(--hue-degree));

    & body {
        font-size: inherit;
        line-height: inherit;
        font-family: 'Univers', 'Helvetica Neue', 'Helvetica', sans-serif;

        & header {
            margin: 1rem;
            & hgroup {
                font-size: 36px;
                line-height: 48px;
                & h1, & p {
                    display: inline; }
                & h1 {
                    font-weight: bold;
                    @media (max-width: 600px) {
                        text-transform: lowercase;
                        & .non-initial {
                            display: none; } } } }

            & nav ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.5rem;

                & li {
                    & a:link, & a:visited, & a:hover, & a:active {
                        text-decoration: underline; }
                    & a:link, & a:visited {
                        color: #666;

                        &[rel=self] { color: inherit; } }

                    & a:hover { color: #444; }
                    & a:active { color: inherit; }

                    &.hfill-after { flex-grow: 1; } } } }

        & figure {
            flex-basis: content;
            position: relative;
            margin: 0 1rem;
            scroll-snap-align: center;
            background-color: white;

            > :is(img) {
                display: block;
                box-sizing: border-box;
                max-height: 90vh;
                max-width: min(100vh, 100cqw);
                border: 24px solid white;
                pointer-events: none;
                &:has(+ figcaption), &:is(picture:has(+ figcaption) img) {
                    border-bottom-width: 0px; } }
            & figcaption {
                width: 100%;
                padding: 12px 24px;
                background-color: white;
                box-sizing: border-box; } }
        & :is(a:link, a:hover, a:active, a:visited) figcaption::after {
            content: '›';
            color: #666;
            float: right;
            margin-top: -0.2rem;
            font-size: 2rem; }
        
        @media (hover: hover) {
            & figure img {
                &:has(+ figcaption), &:is(picture:has(+ figcaption) img) {
                    border-bottom-width: 24px; } }
            & figure figcaption {
                position: absolute;
                padding: 12px;
                bottom: 0px;
                z-index: 100;
                opacity: 0%;
                transition: opacity 0.333s;
                background-color: rgba(255, 255, 255, 0.9); }
            & figure:hover figcaption {
                opacity: 100%; } }
        & main {
            position: relative;
            & .homepage-nav {
                font-size: 24px;
                line-height: 36px;
                margin: 1rem 2rem;

                & li.break-before { margin-top: 1rem; }

                & a:link, & a:visited, & a:hover, & a:active {
                    text-decoration: underline; }
                & a:link, & a:visited {
                    color: #666;

                    &[rel=self] { color: inherit; } }

                & a:hover { color: #444; }
                & a:active { color: inherit; } }
            & .article {
                position: relative;
                --grid-column-start: calc((var(--grid-column-width) * 2) + 0.5rem);
                left: var(--grid-column-start);
                width: min(calc((var(--grid-column-width) * 8) - 0.5rem), 75ch);
                @media (max-width: 600px) {
                    left: 1rem;
                    width: calc(100% - 2rem); }
                
                & a:link, & a:visited, & a:hover, & a:active {
                    text-decoration: underline; }
                & a:link, & a:visited {
                    color: #666;

                    &[rel=self] { color: inherit; } }

                & a:hover { color: #444; }
                & a:active { color: inherit; }

                & .horizontal-scroll-controls {
                    margin-left: -0.5rem;
                    width: calc((var(--grid-column-width) * 10)); } } }

        & .single-centered {
            position: relative;
            container-type: inline-size;
            margin: 1rem auto;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        & .horizontal-scroll-controls {
            position: relative;
            container-type: inline-size;
            margin: 1rem 0;
            & .scroll-left-control, & .scroll-right-control {
                display: flex;
                background-color: rgba(0,0,0,0);
                border: none;
                padding: 0;
                flex-direction: column;
                justify-content: center;
                width: 48px;
                z-index: 200;
                position: absolute;
                height: 100%;
                cursor: pointer;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                transition: opacity 0.5s;
                opacity: 0;
                @media not (scripting: enabled) {
                    display: none; }

                & .scroll-button {
                    background-color: rgba(255,255,255,0.8);
                    width: 24px;
                    height: 144px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center; }
                &:hover .scroll-button {  background-color: white; }
                & svg {
                    fill: #444;
                    max-width: 12px; } }
            & .scroll-left-control {
                align-items: start;
                left: 0px;
                & svg { margin-right: 2px; } }
            & .scroll-right-control {
                align-items: end;
                right: 0px;
                & svg { margin-left: 2px; } }

            & .horizontal-scroll {
                min-height: 100%;
                overflow-x: scroll;
                scroll-snap-type: x mandatory;
                display: flex;
                flex-direction: row;
                align-content: center;
                align-items: center;
                padding-bottom: 6px;
                @media (scripting: enabled) {
                    @supports not selector(*::-webkit-scrollbar) {
                        scrollbar-width: thin;
                        scrollbar-gutter: stable;
                        scrollbar-color: #777 oklch(93% 0.03 var(--hue-degree)); } }
                &::-webkit-scrollbar { height: 6px; }
                &::-webkit-scrollbar-thumb {
                    background-color: #666;
                    border-radius: 3px;
                    margin-top: 6px; }
                &::-webkit-scrollbar-track {
                    background-color: rgba(0,0,0,0); }

                &::before, &::after {
                    content: "";
                    width: -1px;
                    flex-basis: 50vw;
                    flex-grow: 0;
                    flex-shrink: 0;
                    align-self: normal; }

                &.left-aligned {
                    & figure {
                        scroll-snap-align: start; }
                    &::before {
                        content: none; } } } }

        & main {
            & h2 {
                font-size: 48px;
                line-height: 60px;
                margin: 3rem 0 1rem 0; }
            & p { margin: 1rem 0; } }

        & > footer {
            margin: 1rem;
            text-align: center;
            color: #777;

            & .footer-nav {
                display: flex;
                flex-direction: row;
                gap: 1rem;
                justify-content: center;
                & a:link, & a:visited, & a:hover, & a:active {
                    text-decoration: underline; }
                & a:hover {
                    color: #555; }
                & a:active {
                    color: #333; } } } } }

h1, h2, h3, h4, h5, h6, hgroup {
    text-wrap: balance; }

a:link, a:visited, a:hover, a:active {
    text-decoration: inherit;
    color: inherit; }

p:not(hgroup > p) {
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    hanging-punctuation: first force-end; }

b, strong { font-weight: bold; }
i, em, cite { font-style: italic; }

em:lang(de) {
    font-style: inherit;
    letter-spacing: 0.125em;
    margin-left: 0.125em; }