@font-face {
    font-family: "Raveo Display";
    font-weight: 500;
    font-display: block;
    src: url("/fonts/Raveo Display Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Raveo Display";
    font-weight: 400;
    font-display: block;
    src: url("/fonts/Raveo Display Regular.woff2") format("woff2");
}


@font-face {
    font-family: "Raveo Variable";
    font-weight: 400 730;
    font-display: block;
    src: url("/fonts/RaveoVF-subsetted.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Instrument Serif";
    font-weight: 400;
    font-display: block;
    src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
}

::selection {
    background: var(--highlight);
    color: white;
}

@layer defaults {
    :not(:defined) {
        display: block;
    }
}

html {
    scrollbar-color: var(--primary-text) transparent;
}

.dark-colors {
    --is-dark-mode: true;

    --background: hsl(0,0%,8%);
    --highlight: #2917D5;

    --text-on-highlight: rgba(255,255,255,0.9);

    --primary-text: hsl(0,0%,96%);
    --secondary-text: hsl(0,0%,64%);
    --secondary-text-matted: hsl(0,0%,64%);
    --tertiary-text: hsl(0,0%,40%);
    --quaternary-text: hsl(0,0%,32%);

    --link-underline: hsl(0,0%,36%);

    --tooltip-anchor-background: white;
    --tooltip-anchor-text: hsl(0,0%,10%);
}

.light-colors {
    --background: rgb(240,240,240);
    --highlight: #2917D5;

    --text-on-highlight: rgba(255,255,255,0.9);
    --primary-text: hsl(0,0%,1%);
    --secondary-text: hsl(0,0%,40%);
    --secondary-text-matted: hsl(0,0%,40%);
    --tertiary-text: hsla(0,0%,0%,40%);
    --quaternary-text: hsla(0,0%,0%,28%);

    --link-underline: hsl(0,0%,0%,12%);
    --link-hover: var(--primary-text);

    --tooltip-anchor-background: black;
    --tooltip-anchor-text: hsl(0,0%,90%);
}

body {
    --font-family-display: "Instrument Serif", sans-serif;
    --font-family-display-alt: "Raveo Display", sans-serif;
    --font-family-default: "Raveo Variable", "Inter", sans-serif;

    --grid-unit: round(min(2vw, 2vh), 8px);
    --break-point: 876px;




    background: var(--background);
    color: var(--primary-text);

    font-family: var(--font-family-default);
    font-weight: 400;

    font-optical-sizing: auto;
    font-style: normal;

    font-size: 18px;
    line-height: 1.5;
}

.constrained {
    max-width: var(--break-point);
    padding-left: 60px;
    padding-right: 60px;

    margin-left: auto;
    margin-right: auto;

    @media (max-width: 1024px) {
        padding-left: calc(4.5 * var(--grid-unit));
        padding-right: calc(4.5 * var(--grid-unit));
    }
}

hr {
    height: 1px;
    border: 0;
    background: rgba(255,255,255,0.08);
}


a, a:visited, a:active, a:hover {
    color: var(--link, inherit);
    text-decoration: none;
    user-select: none;

    border-bottom: 1px solid var(--link-underline, currentcolor);

    &:hover {
        border-bottom: 1px solid var(--link-underline-hover, currentcolor);
        color: var(--link-hover, currentcolor)
    }

    hover-tooltip & {
        border-bottom: none !important;
        cursor: none;
    }
}



h1, h2, h3 {
    font-family: var(--font-family-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1 {
    max-width: 454px;
    font-size: 72px;
    line-height: 72px;

    .compact & {
        font-size: min(10vw, 42px);
        line-height: 1.18;
    }
}

h2 {
    font-size: 24px;

    .compact & {
        font-size: 16px;
    }
}

hover-tooltip {
    color: inherit;
    border-bottom: 1px solid var(--link-underline, currentcolor);
    transition: border-bottom-color 0.15s linear 0.0s;

    position: relative;
    z-index: 0;

    display: unset;
    cursor: none;
    white-space: nowrap;

    anchor-scope: --tooltip-anchor;
    anchor-name: --tooltip-anchor;

    /* hover state on anchor */
    &:not([tooltip-highlight="false"]) {
        &::after {
            content: " ";
            background: var(--tooltip-anchor-background);

            position: absolute;
            left: -4px;
            right: -4px;
            top: -1px;
            bottom: -3px;
            z-index: -1;

            border-radius: 5px;

            box-shadow: 0 2px 20px rgba(0,0,0,0.2);

            scale: 0;
            opacity: 0;
            transition: scale 0s linear 0.15s, opacity 0.15s linear;
        }


        &:hover {
            transition: border-bottom-color 0s;
            border-bottom-color: transparent;

            color: var(--tooltip-anchor-text);

            &::after {
                scale: 1;
                opacity: 1;
                transition: scale 0.25s cubic-bezier(0, 1.4, 0.4, 1), opacity 0.25s cubic-bezier(0, 1.4, 0.4, 1);
            }
        }
    }


    /* popup */
    tooltip-image, tooltip-text {
        position: fixed;
        top: calc(var(--cursor-y, -9999px) + 10px);
        left: var(--cursor-x, 0);

        /*!* prevent cursor hovering over tooltip, mangling :hover *!*/
        pointer-events: none;
        transform-origin: top left;

        .near-bottom:not([tooltip-align=center]) &:not(.compact *) {
            top: unset;
            bottom: calc(100vh - var(--cursor-y, -9999px) + 6px);
            transform-origin: bottom left;
        }

        /* mobile chrome appears to be slightly buggy sometimes, positioning tooltip
           above the anchor rather than below. hopefully will be fixed in time. */
        .compact & {
            position-anchor: --tooltip-anchor;
            position-area: bottom center;

            /* fixes unreliable positioning on mobile, where anchors get incorrectly flipped due to stale layout calcs */
            /* flip-block forces re-check */
            position-try-fallbacks: flip-block;

            top: unset;
            left: unset;
            bottom: unset;

            transform-origin: top center;
            margin: 4px 2px;
        }


        opacity: 0;
        transform: scaleX(0.8) scaleY(0.8);
        transition: opacity 0.1s linear, transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);


        [tooltip-align=center] & {
            translate: -50% -80%;
            transform-origin: center center;
        }


        /* insta-hide tooltips on scroll. prevents jank when position flips due to change in near-bottom status */
        .is-scrolling & {
            transition-duration: 0s, 0s;
        }

        br {
            display: block;
            margin: 3px 0;
        }
    }

    tooltip-text {
        /* 
 for newline */
        content: attr(text);
        white-space: initial;

        overflow: visible;

        background: var(--highlight);
        font-size: 14px;
        line-height: 20px;

        width: max-content;
        max-width: var(--max-width, 272px);

        padding: 8px 12px;

        color: var(--text-on-highlight);
    }

    tooltip-image {
        background-color: var(--secondary-text);

        mask: var(--image-src);
        mask-size: cover;

        width: var(--image-width);
        height: var(--image-height);
    }

    &:hover&:not(:active)&:not(.is-scrolling &) {
        tooltip-text, tooltip-image {
            opacity: 1;
            transform: scaleX(1) scaleY(1);

            &:not(.compact &):not([tooltip-highlight="false"] &){
                transition-delay: 0.18s;
            }
        }
    }
}

visibility-marker {
    height: 1px;
    margin-bottom: -1px;
}

crossfade-container {
    --crossfade-interval-ms: 2000;
    --crossfade-fadein-duration: calc(var(--crossfade-fadein-ms, 500) * 1ms);
    background: red;

    > * {
        position: absolute;
        transition: opacity 0s linear;
        transition-delay: var(--crossfade-fadein-duration);
        opacity: 0;
    }
    :first-child:not(:has(~.visible)) {
        opacity: 1;
    }
    > .visible {
        opacity: 1;
        z-index: 1;
        transition: opacity var(--crossfade-fadein-duration) linear;
    }
}


body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;

    background: linear-gradient(
        0deg,
        var(--background) 0%,
        var(--background) 33.3%,
        transparent 66.6%,
        transparent 100%
    );
    background-size: 100% 300%;

    pointer-events: none;

    animation-name: wipeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;

    z-index: 9999;
}

@keyframes wipeIn {
    from { background-position: bottom; }
    to { background-position: top; }
}

date-range {
    &::before {
        content: attr(from) "–";
    }
    &::after {
        content: attr(to);
    }
}

hover-tooltip#scroll-up-area, hover-tooltip#scroll-down-area {
    /* hide default underline */
    border: none;

    position: fixed;
    height: 8vh;
    left: 0;
    right: 0;

    &:is(#scroll-up-area) {
        top: 0;

        body:has(visibility-marker.body-start[visible=true]) & {
            display: none;
        }
    }
    &:is(#scroll-down-area) {
        bottom: 0;

        body:has(visibility-marker.body-end[visible=true]) & {
            display: none;
        }
    }

    .compact & {
        display: none;
    }
}