@import "/fonts/noto-sans/wght.css";
@import "/fonts/noto-sans/wght-italic.css";

:root {
    --border-style: solid;
    --border-width: 1px;
    --border-radius: 6px;

    --border-color: light-dark(#949fab, #616c77);
    --active-border-color: light-dark(#3f474f, #a2adb8);

    --foreground-color: light-dark(#000000, #ffffff);
    --background-color: light-dark(#eff1f3, #1e2328);
    --page-color: light-dark(#cfd5dc, #07090b);

    --background-highlight: linear-gradient(
        to bottom,
        light-dark(#ffffff, #292f35),
        transparent 8px
    );
    --background-shadow: linear-gradient(
        to top,
        light-dark(#cfd5dc, #07090b),
        transparent 8px
    );

    --accent-color: light-dark(#22619b, #73b0ef);
    --input-color: light-dark(#ffffff, #13171a);
    --button-color: light-dark(#dfe3e8, #343b42);
    --active-button-color: light-dark(#cfd5dc, #3f474f);

    --card-shadow: 0 1px 2px light-dark(#87929e, #4a535c);

    overflow-wrap: break-word;
    line-height: 1.35;
    font-family: "Noto Sans Variable", "Noto Sans", sans-serif;
    color-scheme: light dark;
    color: var(--foreground-color);
    background: var(--page-color);
}

*, *::before, *::after {
    box-sizing: border-box;
    min-inline-size: 0;
}

:focus-visible {
    outline: solid 2px var(--accent-color);
    outline-offset: 1px;
}

::selection {
    background: var(--accent-color);
    color: var(--background-color);
}

[hidden] {
    display: none !important;
}

.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

body {
    --content-width: calc(320px * 3 + 5rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100vb;
    margin: 0;

    &.wide {
        --content-width: calc(320px * 3 + 10rem);
    }

    & > * {
        max-inline-size: 100%;
    }
}

header, footer, .card {
    padding-block: 1rem;
    padding-inline: 1.5rem;
    background-color: var(--background-color);
    box-shadow: var(--card-shadow);
}

header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    inline-size: 100%;
    padding-block: 0.75rem;
    border-block-start: none;
    border-inline: none;
    background-image: var(--background-shadow);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;

    & > :is(a, h1) {
        font-size: 1.5em;
        margin: 0;
    }

    & > a + h1::before {
        margin-inline-end: 0.5rem;
        content: "›";
        content: "›" / "";
    }
}

.menu-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;

    & .icon {
        inline-size: 2rem;
    }
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    inline-size: 100%;

    & > * {
        max-inline-size: 100%;
    }
}

a {
    color: var(--accent-color);

    &:hover {
        text-decoration: none;
    }

    &:hover > .icon {
        transform: scale(1.125);
    }
}

:is(.menu-link, .gallery > li a, nav a) {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}


h1, h2, h3, h4, h5, h6 {
    margin-block: 1rem;
}

/*
 * Using flexbox here is a bad idea because headings can have links and
 * formatted text.
 */

h2 {
    margin-block-start: 1.75rem;

    & > .icon {
        inline-size: 1.75rem;
        margin-inline-end: 0.25rem;
        vertical-align: bottom;
    }
}

h3 {
    margin-block-start: 1.375rem;
}

.sticky-heading {
    position: sticky;
    background: var(--background-color);

    & > :is(h2, h3, h4) {
        margin: 0;
    }

    &:has(> h2) {
        inset-block-start: 0;
        z-index: 3;
    }
    &:has(> h3) {
        inset-block-start: 1.5lh;
        z-index: 2;
    }
    &:has(> h4) {
        inset-block-start: calc(1.5lh + 1.17lh);
        z-index: 1;
    }
}

section {
    &:has(> .sticky-heading > h3) {
        scroll-margin-block-start: 1.5lh;
    }
    &:has(> .sticky-heading > h4) {
        scroll-margin-block-start: calc(1.5lh + 1.17lh);
    }
}

.heading-anchor {
    position: absolute;
    inset-block-start: calc(50%);
    inset-inline-start: -1.6ch;
    inline-size: 1.6ch;
    text-decoration: none;
    font-size: 1.25em;
    opacity: 0.3;
    transform: translateY(-50%);

    &:focus, *:hover > & {
        opacity: 1;
    }

    &:hover {
        text-decoration: underline;
    }
}

img {
    block-size: auto;
    max-inline-size: 100%;
}

/* Removes excessive spacing without breaking the alt text. */

picture {
    line-height: 0;

    & img {
        line-height: 1.25;
    }
}

#photo {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    background: #000000;

    & > img {
        max-block-size: max(calc(100vb - 5rem), 512px);

        /*
         * inline-size: auto causes layout shifts for whatever reason. I'm not
         * entirely sure why this works, but it does.
         */

        object-fit: contain;
    }
}

#content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: var(--content-width);
    margin-block: 1rem;
}

.card {
    border-radius: var(--border-radius);
    background-image: var(--background-highlight), var(--background-shadow);

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }

    & > h2:first-child {
        margin-block-start: -0.25rem;
    }
}

.multi-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    & > * {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex-basis: 20rem;
        flex-grow: 1;
    }
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-inline-start: 1.5rem;
        border-inline-start-style: var(--border-style);
        border-inline-start-width: 2px;
        border-inline-start-color: var(--border-color);

        & > * {
            margin: 0;
        }
    }
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    list-style: none;

    & > li {
        & a {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
            text-align: center;
        }

        & img {
            /*
             * Setting height explicitly makes them shrink without preserving
             * the aspect ratio.
             */

            width: 320px;
            aspect-ratio:
                320 / 240;
            object-fit: scale-down;
            border-radius: var(--border-radius);
            background: var(--button-color);
        }

        & .caption {
            max-height: 240px;
            max-width: 320px;
        }
    }
}


dt {
    font-weight: 550;
}

dd {
    margin-block: 0.25rem 0.5rem;

    &:last-child {
        margin-block-end: 0;
    }
}

details > summary {
    inline-size: fit-content;
    padding-block: 0.375rem;
    padding-inline: 1rem;
    cursor: pointer;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    background: var(--button-color);
    transition: background 0.1s;

    &:hover {
        border-color: var(--active-border-color);
    }
    &:active {
        background: var(--active-button-color);
    }
}

details > *:last-child {
    margin-block-end: 0;
}

.adjacent-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;

    & a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    & :is(picture img, .spacer) {
        height: 64px;
        width: 86px;
        border-radius: var(--border-radius);
        background: var(--button-color);
    }

    & picture img {
        object-fit: scale-down;
    }

    & .spacer {
        &.left {
            margin-inline-start: calc(48px + 0.5rem);
        }
        &.right {
            margin-inline-end: calc(48px + 0.5rem);
        }
    }
}

.placeholder {
    text-align: center;

    & .emoji {
        margin-block-end: 1rem;
        user-select: none;
        font-size: 5em;
    }

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

footer {
    inline-size: var(--content-width);
    border-block-end: none;
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
    background-image: var(--background-highlight);

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

nav {
    margin-block: 1rem;

    & ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    & a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        padding-block: 0.25rem;
    }

    & li:first-child > a {
        padding-block-start: 0;
    }
    & li:last-child > a {
        padding-block-end: 0;
    }
}