/* ---- FONTS ----
   Self-hosted rather than pulled from fonts.googleapis.com. That stylesheet is
   render blocking and cross origin, so a visitor whose network was slow to
   reach Google saw a white page until the request resolved, which is what was
   happening to people on mobile data. Same families, same weights, and the very
   same files Google serves, so nothing about the type changes.

   Only the latin and latin-ext subsets are here, which covers everything the
   site's copy uses. Adding Greek or Cyrillic copy means adding those subsets
   too, from the same css2 URL, or that text quietly falls back. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-mono-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-mono-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- RESET ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---- DESIGN TOKENS ---- */
:root {
    --bg: #F0F0F0;
    --fg: #000;
    --muted: #777;
    --hairline: #D5D5D5;
    --dim: #333;
    --mono: 'Space Mono', monospace;
    --sans: 'Inter', -apple-system, Helvetica, Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout. --gutter-x keeps the header, footer and page content on the same
       left edge at every width, whether or not the page uses a --maxw wrap. */
    --side: clamp(1.5rem, 5vw, 3rem);
    --maxw: 1320px;
    --gutter-x: max(var(--side), calc((100% - var(--maxw)) / 2));
}

/* In-page anchors glide instead of jumping, and land clear of the sticky nav. */
html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 7rem;
}

/* ---- BODY ---- */
body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-weight: 300;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--fg);
    color: var(--bg);
}

/* Cross-document fade on navigation. No-op where unsupported. */
@view-transition {
    navigation: auto;
}

/* ---- NAV ----
   One header for every page: sticky, opaque, and it grows a hairline once the
   page has scrolled (see scripts/site.js). Pages must not restyle it. */
nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding-block: 2rem;
    padding-inline: var(--gutter-x);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

nav.scrolled {
    border-bottom-color: var(--hairline);
}

.logo {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg);
    white-space: nowrap;
    transition: letter-spacing 0.6s var(--ease);
}

@media (min-width: 601px) {
    .logo:hover {
        letter-spacing: 0.6em;
    }
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

nav a.nav-link {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

nav a.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--fg);
    transition: width 0.4s var(--ease);
}

nav a.nav-link:hover::after,
nav a.nav-link[aria-current='page']::after {
    width: 100%;
}

nav a.nav-link:hover,
nav a.nav-link[aria-current='page'] {
    color: var(--fg);
}

/* ---- FOOTER ---- */
footer {
    margin-top: auto;
    padding-block: 2rem;
    padding-inline: var(--gutter-x);
    text-align: center;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--muted);
}

footer a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: var(--fg);
}

/* ---- RULE DIVIDER ---- */
.rule {
    width: 60px;
    height: 1px;
    background: var(--fg);
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandRule {
    from { width: 0; }
    to { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Not covered by the durations above, so it needs saying separately. */
    html {
        scroll-behavior: auto;
    }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    nav,
    footer {
        padding-block: 1.5rem;
    }

    .nav-links {
        gap: 1rem;
    }
}