/*
  Static, no build step, no dependencies. Cloudflare Pages serves these files as they
  are, which keeps deploys instant and means the site cannot break because a toolchain
  moved on.
*/

:root {
    --bg: #fbfaf7;
    --surface: #ffffff;
    --border: #e6e2d9;
    --text: #1b1a17;
    --muted: #6b675e;
    /* Restrained nod to the domain — used for rules and links, never for large areas. */
    --accent: #b8860b;
    --accent-hover: #8f6908;
    --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16151a;
        --surface: #1d1c22;
        --border: #2e2c35;
        --text: #eceaf0;
        --muted: #9d98a8;
        --accent: #e8b44c;
        --accent-hover: #f5cd6b;
    }
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
    max-width: calc(var(--measure) + 3rem);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Slightly larger than default: this is a page of prose, meant to be read. */
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
}

/* Visible only when focused, so keyboard users get a way past the header. */
.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1.5rem;
    top: 1rem;
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--accent);
    padding: .5rem .8rem;
    border-radius: 6px;
    z-index: 10;
}

/* ---- Type ------------------------------------------------------------------- */

h1 {
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

h2 {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 1.5rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

h3 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin: 0;
}

p { margin: 0 0 1.1rem; }

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover { color: var(--accent-hover); }

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

/* ---- Hero ------------------------------------------------------------------- */

.hero {
    padding: clamp(3.5rem, 12vw, 6rem) 0 3rem;
}

.lede {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: var(--measure);
}

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.75rem;
    font-size: .95rem;
}

/* ---- Sections --------------------------------------------------------------- */

section { margin-bottom: 4rem; }

.project {
    padding: 1.5rem 0 0;
    margin-bottom: 2.75rem;
}

.project:last-child { margin-bottom: 0; }

.project-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .9rem;
}

.tags {
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .01em;
}

.project p { max-width: var(--measure); }

.project-links {
    margin-top: 1.25rem;
    font-size: .95rem;
}

/* ---- Tools ------------------------------------------------------------------ */

.tools {
    margin: 0;
    display: grid;
    gap: 1.4rem;
}

.tools dt {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: .3rem;
}

.tools dd {
    margin: 0;
    color: var(--muted);
    max-width: var(--measure);
}

/* ---- Footer ----------------------------------------------------------------- */

footer {
    border-top: 1px solid var(--border);
    padding-top: 1.75rem;
    font-size: .9rem;
    color: var(--muted);
}

footer p { max-width: var(--measure); }

.footer-contact { margin-bottom: 0; }

/* On wider screens the label/value split reads better side by side. */
@media (min-width: 40rem) {
    .tools div {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .tools dt { margin-bottom: 0; padding-top: .2rem; }
}