@font-face {
    font-family: "Play";
    font-style: normal;
    font-weight: 400;
    /* "block": the header/nav text stays invisible (rather than showing in
       the fallback sans-serif) for a short timeout while this loads. Worth
       it here since the subsetted file is only a few KB and self-hosted —
       fast enough that blocking briefly beats the fallback-then-reflow of
       "swap", given how different Play's metrics are from the fallback. */
    font-display: block;
    src: url("/fonts/play-latin-400-normal.woff2") format("woff2"),
         url("/fonts/play-latin-400-normal.woff") format("woff");
}

:root {
    /* Fixed dark theme, matching the original site — no light variant, no
       prefers-color-scheme switching. */
    color-scheme: dark;

    --color-bg: #111;
    --color-text: #aaa;
    --color-link: #357edd;
    --color-nav-bg: #aaa;
    --color-nav-text: #111;
    --color-nav-active-bg: #444;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
}

a {
    color: var(--color-link);
    text-decoration: underline;
}

header {
    text-align: center;
    font-family: "Play", sans-serif;
    h1 {
        margin: 0;
        /* Matches the original's tachyons f1/f-headline-ns: 3rem below the
           "not-small" breakpoint, 6rem at and above it. */
        font-size: 3rem;
        font-weight: normal;
        a {
            color: inherit;
            text-decoration: none;
        }
    }
}

@media (min-width: 30em) {
    header h1 {
        font-size: 6rem;
    }
}

nav {
    /* Deliberately not flex/inline-block: the original's <a> links are
       plain inline elements with no whitespace between them in the markup
       (see site-header.njk), so their 2px top/bottom borders overlap the
       text line instead of adding to the box height the way a block-level
       flex item's border would — that's what made the buttons look taller
       than the original despite matching padding values exactly. */
    text-align: center;
    background-color: var(--color-nav-bg);
    font-family: "Play", sans-serif;
    a {
        color: var(--color-nav-text);
        text-decoration: none;
        border: 2px solid var(--color-nav-text);
        padding: 0 2px;
    }

    a:first-of-type {
        border-left-width: 4px;
    }

    a:last-of-type {
        border-right-width: 4px;
    }

    a:hover {
        text-shadow: blue 0 0 5px;
    }

    a[aria-current="page"] {
        background-color: var(--color-nav-active-bg);
        color: white;
        text-shadow: white 0 0 5px;
    }
}

main, footer {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* The original had a single page with a real <h1> per section ("Introduction",
   "Projects", "Contact Info") and <h2> subsections ("Personal", "Professional").
   Each page here has its own URL now, so the page title is an <h2> and
   subsections are <h3> (the site name in the header is the page's one <h1>) —
   but sized/spaced like the original's h1/h2 so the vertical rhythm matches. */
main h2 {
    font-size: 2em;
    font-weight: bold;
    margin-block: 0.67em;
}

main h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-block: 0.83em;
}

footer {
    padding: 1rem;
    font-size: 0.875rem;
}

.profilePhoto {
    display: block;
    float: left;
    /* The original's <img width="120em"> attribute gets parsed by browsers'
       lenient legacy-dimension rules as plain "120" (stops at the first
       non-digit character), i.e. 120px, regardless of screen size — not
       responsive. No extra margin either: just the image's own padding
       separates it from the wrapped text, so the column width (and line
       wraps) matches the original exactly. */
    width: 120px;
    height: auto;
    margin-bottom: 1em;
    padding: 0.5rem;
}

section::after {
    content: "";
    display: table;
    clear: both;
}

dt {
    font-weight: bold;
    margin-top: 0.75rem;
}

dd {
    margin: 0.25rem 0 0;
}

.disclaimer {
    font-size: 0.875rem;
}

ul.contactList {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.contactList li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
}

@media (max-width: 29.9375em) {
    /* Below the original's float breakpoint (30em/480px) the photo isn't
       floated, just centered above the text — still 120px, not resized. */
    .profilePhoto {
        float: none;
        margin: 0 auto 1rem;
    }
}