@font-face {
    font-family: "NeuSans";
    src: url("fonts/NeuSans-Regular.woff2") format("woff2"), url("fonts/NeuSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --font-sans: "NeuSans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

    --spring-easing: linear(0, 0.0014, 0.0055 1.03%, 0.024 2.23%, 0.0581, 0.1027 4.98%, 0.2046 7.56%, 0.5487 15.46%, 0.6523, 0.7415, 0.8155 23.71%, 0.8782, 0.9261 29.55%, 0.9462, 0.9631 32.64%, 0.9872 35.56%, 1.0039 38.65%, 1.0145 42.09%, 1.0194 46.04%, 1.0187 51.88%, 1.0071 66.14%, 1.0023 75.07%, 1.0001 85.21%, 0.9996 99.98%);
    --spring-duration: 1.079s;

    --fade-duration: 0.45s;

    --more-spring-easing: linear(0, 0.0158, 0.0559 3.63%, 0.5078 16.33%, 0.6624, 0.7754 27.22%, 0.831, 0.8739, 0.9065 38.1%, 0.941, 0.9631, 0.9772 54.43%, 0.9881 61.69%, 0.9948 70.76%, 0.9981 81.65%, 0.9997 99.8%);
    --more-spring-duration: 0.3320s;
    
    --more-exit-duration: 0.1s;
}

html {
    margin: 0;
    padding: 0;
    background-color: #F1FFE2;
    color: #233205;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01" 1, "ss02" 1; /* Single-story a and g */
    margin: 20px;
    margin-top: calc(20px - 0.16em);
    margin-bottom: 0px;
    padding: 0;
    font-size: 50px;
    letter-spacing: -0.0066em;
}

a, summary {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-underline-offset: 0.1em;
}

details {
    --more-gap: 3.5em;
    box-sizing: border-box;
    min-height: calc(1lh + var(--more-gap));
}

.reveal > details {
    --more-gap: 25svh;
}

details:not([open]) {
    padding-bottom: var(--more-gap);
}

summary {
    display: block;
    list-style: none;
    width: fit-content;
    margin: 0;
    transition: opacity var(--more-exit-duration) ease-out,
                transform var(--more-exit-duration) var(--more-spring-easing),
                display var(--more-exit-duration) allow-discrete;
}

.at {
    /* This avoids the underline going through the @ */
    display: inline-block;
}

a[href^="mailto:"] {
    white-space: nowrap;
}

p, h1 {
    text-wrap: pretty;
    margin: 0;
    margin-bottom: 1em;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
}

summary::-webkit-details-marker {
    display: none;
}

details[open] > summary {
    display: none;
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

details[open] > .reveal > * {
    animation: reveal-fade var(--fade-duration) ease-out both,
               reveal-rise var(--spring-duration) var(--spring-easing) both;
    animation-delay: var(--more-exit-duration);
}

details[open] > .reveal > :nth-child(2) { animation-delay: calc(var(--more-exit-duration) + 40ms); }
details[open] > .reveal > :nth-child(3) { animation-delay: calc(var(--more-exit-duration) + 80ms); }
details[open] > .reveal > :nth-child(4) { animation-delay: calc(var(--more-exit-duration) + 120ms); }
details[open] > .reveal > :nth-child(5) { animation-delay: calc(var(--more-exit-duration) + 160ms); }
details[open] > .reveal > :nth-child(n+6) { animation-delay: calc(var(--more-exit-duration) + 200ms); }

@keyframes reveal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes reveal-rise {
    from { transform: translateY(0.4em); }
    to { transform: none; }
}

/* MARK: Media Queries */

@media (prefers-reduced-motion: reduce) {
    details[open] > .reveal > * {
        animation: none;
    }
}

@media (max-width: 1024px) {
    body {
        font-size: 35px;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 30px;
    }
}