@layer components {
    .monogram {
        fill: var(--textTitle);
        transition: fill var(--durationL) ease
    }

    .monogram__highlight {
        fill: var(--accent);
        opacity: 0;
        transform: scale3d(1, 0, 1);
        transform-origin: top;
        transition: opacity .1s ease var(--durationM)
    }

    @media (prefers-reduced-motion: no-preference) {
        .monogram__highlight {
            transition: transform var(--durationM) var(--bezierFastoutSlowin), opacity .1s ease var(--durationM)
        }
    }

    :is(a:hover, .monogram:hover) .monogram__highlight {
        opacity: 1;
        transform: scaleZ(1);
        transform-origin: bottom;
        transition: opacity .1s ease
    }

    @media (prefers-reduced-motion: no-preference) {
        :is(a:hover, .monogram:hover) .monogram__highlight {
            transition: transform var(--durationM) var(--bezierFastoutSlowin), opacity .1s ease
        }
    }
}

@layer layout {
    .menu-toggle {
        --offset: var(--spaceXS);
        --inset: calc(var(--spaceOuter) - var(--offset));
        position: fixed;
        top: var(--inset);
        right: var(--inset);
        z-index: var(--zIndex4);
        display: none
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .menu-toggle {
            display: flex
        }
    }

    .menu-toggle__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%
    }

    .menu-toggle__icon {
        --iconSize: var(--spaceXL);
        position: absolute;
        transition-property: opacity, fill;
        transition-duration: var(--durationM);
        transition-timing-function: var(--bezierFastoutSlowin);
        opacity: 1;
        transform: rotate(0);
        fill: var(--textBody);
        width: var(--iconSize);
        height: var(--iconSize)
    }

    @media (prefers-reduced-motion: no-preference) {
        .menu-toggle__icon {
            transition-delay: .1s;
            transition-property: opacity, transform, fill
        }
    }

    .menu-toggle__icon[data-open=true] {
        opacity: 0
    }

    @media (prefers-reduced-motion: no-preference) {
        .menu-toggle__icon[data-open=true] {
            transition-delay: 0s;
            transform: rotate(45deg)
        }
    }

    .menu-toggle__icon[data-close=true] {
        opacity: 0
    }

    @media (prefers-reduced-motion: no-preference) {
        .menu-toggle__icon[data-close=true] {
            transition-delay: 0s;
            transform: rotate(-45deg)
        }
    }

    .menu-toggle__icon[data-open=true][data-close=true] {
        opacity: 1
    }

    @media (prefers-reduced-motion: no-preference) {
        .menu-toggle__icon[data-open=true][data-close=true] {
            transition-delay: .1s;
            transform: rotate(0)
        }
    }
}

@layer layout {
    .theme-toggle {
        --offset: 6px;
        --inset: calc(var(--spaceOuter) - var(--offset));
        position: fixed;
        z-index: var(--zIndex4);
        top: var(--inset);
        right: var(--inset);
        transform: translateZ(0)
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .theme-toggle:not([data-mobile=true]) {
            display: none
        }
    }

    .theme-toggle[data-mobile=true] {
        --offset: var(--spaceXS);
        --inset: calc(var(--spaceXL) - var(--offset));
        top: unset;
        bottom: var(--inset);
        margin-top: 0;
        margin-right: 0
    }

    .theme-toggle__circle {
        fill: currentColor;
        transform: scale(.6);
        transform-origin: center
    }

    @media (prefers-reduced-motion: no-preference) {
        .theme-toggle__circle {
            transition-property: transform, fill;
            transition-duration: var(--durationL);
            transition-delay: 0s;
            transition-timing-function: var(--bezierFastoutSlowin)
        }
    }

    .theme-toggle__circle[data-mask=true] {
        fill: #fff
    }

    body[data-theme=dark] .theme-toggle__circle {
        transform: none
    }

    @media (prefers-reduced-motion: no-preference) {
        body[data-theme=dark] .theme-toggle__circle {
            transition-delay: .3s
        }
    }

    .theme-toggle__mask {
        fill: #000;
        transform: translate3d(100%, -100%, 0)
    }

    @media (prefers-reduced-motion: no-preference) {
        .theme-toggle__mask {
            transition: transform var(--durationL) var(--bezierFastoutSlowin);
            transition-delay: 0s
        }
    }

    body[data-theme=dark] .theme-toggle__mask {
        transform: none
    }

    @media (prefers-reduced-motion: no-preference) {
        body[data-theme=dark] .theme-toggle__mask {
            transition-delay: .3s
        }
    }

    .theme-toggle__path {
        stroke: currentColor;
        fill: none;
        stroke-linecap: round;
        stroke-width: 3;
        stroke-dasharray: 7 7;
        stroke-dashoffset: 0;
        opacity: 1
    }

    @media (prefers-reduced-motion: no-preference) {
        .theme-toggle__path {
            transition-property: stroke-dashoffset, opacity;
            transition-duration: var(--durationL);
            transition-timing-function: var(--bezierFastoutSlowin);
            transition-delay: .3s
        }
    }

    body[data-theme=dark] .theme-toggle__path {
        stroke-dashoffset: 7;
        opacity: 0
    }

    @media (prefers-reduced-motion: no-preference) {
        body[data-theme=dark] .theme-toggle__path {
            transition-delay: 0s
        }
    }
}

@layer layout {
    .navbar {
        --headerNavFontSize: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        width: var(--space2XL);
        position: fixed;
        top: var(--spaceOuter);
        left: var(--spaceOuter);
        bottom: var(--spaceOuter);
        z-index: var(--zIndex4);
        isolation: isolate
    }

    @media (max-width: 696px) {
        .navbar {
            --headerNavFontSize: 1.375rem
        }
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .navbar {
            bottom: auto
        }
    }

    .navbar__logo {
        display: flex;
        position: relative;
        padding: var(--spaceS) var(--spaceS) var(--spaceL);
        z-index: var(--zIndex2)
    }

    @media (max-width: 696px) {
        .navbar__logo {
            padding-bottom: var(--spaceS)
        }
    }

    .navbar__nav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 1 1 auto;
        max-width: var(--space2XL)
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .navbar__nav {
            display: none
        }
    }

    .navbar__list {
        transform: rotate(180deg);
        display: flex;
        flex-direction: row-reverse;
        position: relative;
        writing-mode: vertical-lr
    }

    .navbar__link {
        padding: var(--spaceM);
        color: color-mix(in lab, var(--text) 80%, transparent);
        font-weight: var(--fontWeightMedium);
        font-size: var(--headerNavFontSize);
        text-decoration: none;
        position: relative;
        transition: color var(--durationS) ease .1s;
        line-height: 1;
        display: inline-flex;
        align-items: center
    }

    .navbar__link:hover,
    .navbar__link:active,
    .navbar__link[aria-current=page] {
        color: var(--textBody)
    }

    .navbar__link:after {
        content: "";
        position: absolute;
        inset-inline-start: var(--spaceS);
        inset-inline-end: var(--spaceS);
        block-size: 4px;
        background: var(--accent);
        transform: scaleY(0) translateZ(0);
        transform-origin: bottom
    }

    @media (prefers-reduced-motion: no-preference) {
        .navbar__link:after {
            transition: transform var(--durationM) var(--bezierFastoutSlowin)
        }
    }

    .navbar__link:hover:after,
    .navbar__link:active:after,
    .navbar__link[aria-current=page]:after {
        transform: scaleY(1) translateZ(0);
        transform-origin: top
    }

    .navbar__icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: var(--zIndex2)
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .navbar__icons {
            flex-direction: row;
            position: absolute;
            bottom: var(--spaceXL);
            left: var(--spaceXL)
        }
    }

    @media (max-width: 820px) and (max-height: 420px) {
        .navbar__icons {
            left: var(--spaceL);
            transform: none;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }
    }

    .navbar__icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spaceS);
        width: var(--space2XL);
        height: var(--space2XL);
        color: var(--textLight);
        transition: color var(--durationM) var(--bezierFastoutSlowin)
    }

    .navbar__icon-link:hover,
    .navbar__icon-link:active {
        color: var(--accent)
    }

    .navbar__icon {
        fill: currentColor;
        transition: fill var(--durationM) ease
    }

    .navbar__mobile-nav {
        --backdrop: blur(24px) saturate(120%);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: color-mix(in lab, var(--background) 70%, transparent);
        transform: translate3d(0, -100%, 0);
        transition-property: background;
        transition-duration: var(--durationL);
        transition-timing-function: var(--bezierFastoutSlowin);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        -webkit-backdrop-filter: var(--backdrop);
        backdrop-filter: var(--backdrop)
    }

    @media (max-width: 696px),
    (max-height: 696px) {
        .navbar__mobile-nav {
            display: flex
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .navbar__mobile-nav {
            transition-property: transform, background
        }
    }

    .navbar__mobile-nav[data-visible=true] {
        transform: none
    }

    .navbar__mobile-nav-link {
        width: 100%;
        font-size: var(--headerNavFontSize);
        text-align: center;
        text-decoration: none;
        color: var(--textBody);
        padding: var(--spaceL);
        opacity: 0;
        transition-property: opacity;
        transition-duration: var(--durationS);
        transition-timing-function: var(--bezierFastoutSlowin);
        transition-delay: var(--transitionDelay);
        position: relative;
        top: calc(var(--spaceM) * -1)
    }

    @media (prefers-reduced-motion: no-preference) {
        .navbar__mobile-nav-link {
            transition-property: transform, opacity;
            transform: translate3d(0, calc(var(--spaceXL) * -1), 0)
        }
    }

    @media (max-width: 820px) and (max-height: 420px) {
        .navbar__mobile-nav-link {
            top: auto
        }
    }

    @media (max-width: 400px),
    (max-height: 360px) {
        .navbar__mobile-nav-link {
            --headerNavFontSize: 1.125rem
        }
    }

    .navbar__mobile-nav-link:after {
        content: "";
        position: absolute;
        top: 50%;
        right: var(--space3XL);
        left: var(--space3XL);
        height: 4px;
        background: var(--accent);
        transform: scaleX(0) translateY(-1px);
        transform-origin: right
    }

    @media (prefers-reduced-motion: no-preference) {
        .navbar__mobile-nav-link:after {
            transition: transform var(--durationM) var(--bezierFastoutSlowin)
        }
    }

    .navbar__mobile-nav-link:hover:after,
    .navbar__mobile-nav-link:active:after,
    .navbar__mobile-nav-link:focus:after {
        transform: scaleX(1) translateY(-1px);
        transform-origin: left
    }

    .navbar__mobile-nav-link[data-visible=true] {
        opacity: 1;
        transform: none
    }
}

@layer components {
    .progress-bar {
        --duration: .5s;
        --progress: 0;
        --delay: .3s;
        --opacity: 1;
        height: 2px;
        background: var(--accent);
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: var(--zIndex4);
        opacity: var(--opacity);
        transform: scaleX(var(--progress));
        transform-origin: left;
        transition: transform var(--duration) var(--bezierFastoutSlowin) var(--delay)
    }

    [data-theme=light] .progress-bar {
        height: 3px
    }

    .progress-bar[data-status=idle][data-complete=true] {
        --progress: 0;
        --delay: .3s;
        --opacity: 0;
        transition: transform var(--duration) var(--bezierFastoutSlowin) var(--delay), opacity var(--duration) var(--bezierFastoutSlowin)
    }

    .progress-bar[data-status=loading] {
        --progress: .6
    }

    .progress-bar[data-status=idle][data-complete=false] {
        --progress: 1
    }

    .progress-bar[data-visible=false] {
        transform: scaleX(0);
        opacity: 0
    }
}

@layer layout {
    .page {
        width: 100%;
        position: relative;
        transition: opacity .4s var(--bezierFastoutSlowin)
    }

    .page[data-loading=true] {
        opacity: 0
    }

    .page__skip-link {
        isolation: isolate;
        color: var(--background);
        z-index: var(--zIndex4)
    }

    .page__skip-link:focus {
        padding: var(--spaceS) var(--spaceM);
        position: fixed;
        top: var(--spaceM);
        left: var(--spaceM);
        text-decoration: none;
        font-weight: var(--fontWeightMedium);
        line-height: 1;
        box-shadow: 0 0 0 4px var(--background), 0 0 0 8px var(--text)
    }

    .page__skip-link:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--primary);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
        z-index: -1
    }
}

@layer base {
    :root {
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased
    }

    :where(html, body) {
        min-height: 100%;
        width: 100%
    }

    :where(*, *:before, *:after) {
        box-sizing: border-box;
        margin: 0;
        min-width: 0
    }

    :where(input, textarea, select, button) {
        font: inherit;
        color: inherit;
        border: 0;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    :where(button, a) {
        touch-action: manipulation
    }

    :where(svg, img, picture, video, iframe, canvas) {
        display: block
    }

    :any-link {
        text-decoration: none
    }

    ul {
        padding: 0
    }
}

@layer base {
    :root {
        --mobileNavOffset: calc(var(--spaceOuter) * 2 + var(--space2XL))
    }

    html body {
        font-family: var(--fontStack);
        font-weight: var(--fontWeightRegular);
        background-color: var(--background);
        transition: var(--durationM) ease;
        transition-property: background, opacity;
        color: var(--textBody);
        width: 100vw;
        overflow-x: hidden;
        opacity: 1
    }

    html body:focus {
        outline: none
    }

    :where(code, pre) {
        font-family: var(--monoFontStack)
    }

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

    :focus {
        outline: 4px solid var(--text);
        outline-offset: 4px
    }

    :focus:not(:focus-visible) {
        outline: none
    }

    @keyframes fade-in {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes reveal {
        0% {
            transform: scale3d(0, 1, 1);
            transform-origin: left
        }

        50% {
            transform: scaleZ(1);
            transform-origin: left
        }

        51% {
            transform: scaleZ(1);
            transform-origin: right
        }

        to {
            transform: scale3d(0, 1, 1);
            transform-origin: right
        }
    }
}