/* jsseely.com — no build step, just CSS.
   Type: Spectral (text) / Instrument Sans (labels), self-hosted latin subsets. */

@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/spectral-regular.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: "Spectral";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/spectral-medium.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: "Instrument Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/instrument-sans-semibold.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;
}

/* Palette: cool paper, cobalt accent. Dark follows the system. */

:root {
    color-scheme: light;
    --bg: #fbfbfc;
    --ink: #1b1c1e;
    --muted: #82848c;
    --link: #2a52be;
    --link-hover: #1d3f9c;
    --link-soft: rgba(42, 82, 190, 0.38);
    --sel: rgba(42, 82, 190, 0.13);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #131418;
        --ink: #d5d6da;
        --muted: #7e8088;
        --link: #8fb0f0;
        --link-hover: #b2c8f5;
        --link-soft: rgba(143, 176, 240, 0.42);
        --sel: rgba(143, 176, 240, 0.2);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--sel);
}

body {
    font-family: "Spectral", Georgia, serif;
    font-size: 1.03rem;
    line-height: 1.68;
    background: var(--bg);
    color: var(--ink);
    max-width: 34rem;
    margin: 0 auto;
    padding: 7rem 1.5rem 6rem;
}

@media (max-width: 600px) {
    body {
        padding-top: 4rem;
    }
}

header {
    margin-bottom: 3.5rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: 500;
}

section {
    margin-bottom: 2.6rem;
}

h2 {
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    margin-bottom: 0.55rem;
}

ul {
    list-style: none;
    margin-top: 0.55rem;
}

li {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    margin-bottom: 0.4rem;
}

.year {
    color: var(--muted);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 0.92em;
    padding-top: 0.05em;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--link-soft);
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
}

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

@media (prefers-color-scheme: dark) {
    a:hover {
        color: var(--link-hover);
    }
}

a:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
    border-radius: 1px;
}