/* ==========================================================
   Matthew Hanson — personal site
   Vintage two-colour letterpress: ink + oxblood on cream,
   antique gold as a sparing "foil". Palette and type are
   carried over from the `thurston` presentation theme so the
   site and the slides read as one hand.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Paper + ink */
    --paper:      #f5efe1;  /* warm cream — the press sheet */
    --paper-2:    #efe7d4;  /* deeper panel / inset */
    --ink:        #1b2233;  /* near-black ink, faintly blue */
    --ink-2:      #3a4152;  /* softened ink — secondary text */
    --muted:      #8a8272;  /* warm grey — meta, captions */

    /* Two accents — letterpress was genuinely two-colour */
    --oxblood:    #8c2f2f;  /* rules, markers, links */
    --gold:       #b8894b;  /* the foil, used sparingly */

    --hairline:   rgba(27, 34, 51, 0.22);
    --hairline-soft: rgba(27, 34, 51, 0.10);

    --serif: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif;
    --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 4.5rem 1.5rem 3.5rem;
    background-color: var(--paper);
    /* a barely-there paper tooth */
    background-image: radial-gradient(rgba(27, 34, 51, 0.022) 1px, transparent 1px);
    background-size: 4px 4px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sheet {
    max-width: var(--measure);
    margin: 0 auto;
}

/* ---------- Masthead ---------- */

.masthead {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.portrait {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border-radius: 50%;
    /* a thin gold foil ring, and a hair of separation from the paper */
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--paper);
}

.masthead h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.06;
}

.kicker {
    margin: 0.4rem 0 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--oxblood);
}

/* ---------- Rules ---------- */

.rule {
    height: 0;
    margin: 1.9rem 0;
    border: 0;
    border-top: 1px solid var(--oxblood);
    opacity: 0.5;
}

/* ---------- Lead paragraph ---------- */

.lead {
    margin: 0 0 0.9rem;
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.52;
    color: var(--ink);
}

.lead + p { margin: 0.9rem 0 0; color: var(--ink-2); }

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

section { margin-top: 2.9rem; }

.label {
    margin: 0 0 1.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hairline-soft);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--oxblood);
}

/* ---------- Entry lists (talks, projects) ---------- */

.entries {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entries > li {
    position: relative;
    margin: 0 0 1.05rem;
    padding-left: 1.15rem;
}

/* vintage catalogue marker — a rotated square, so it needs no glyph
   coverage from the body face and stays crisp at any size */
.entries > li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.58em;
    width: 5px;
    height: 5px;
    background: var(--oxblood);
    transform: rotate(45deg);
    opacity: 0.85;
}

.entry-title {
    display: block;
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.3;
}

.entry-meta {
    display: block;
    margin-top: 0.12rem;
    font-family: var(--mono);
    font-size: 0.73rem;
    letter-spacing: 0.015em;
    color: var(--muted);
}

.entry-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--ink-2);
}

/* out-links on an archive entry — abstract, video, slides */
.entry-links {
    display: block;
    margin-top: 0.22rem;
    font-family: var(--mono);
    font-size: 0.7rem;
}

.entry-links a { margin-right: 0.75rem; }

/* ---------- Sub-page masthead (no portrait) ---------- */

.masthead-sub .kicker {
    margin: 0 0 0.3rem;
    color: var(--muted);
}

.masthead-sub .kicker a {
    color: var(--muted);
    border-bottom: 0;
}

.masthead-sub .kicker a:hover { color: var(--oxblood); }

.masthead-sub h1 { font-size: 1.75rem; }

/* the "next up" flag — the one place gold does any work */
.flag {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1em 0.42em 0.12em;
    border: 1px solid var(--gold);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    vertical-align: 0.16em;
    color: var(--gold);
}

/* ---------- "more" pointer at the foot of a section ---------- */

.more {
    margin: 1.35rem 0 0;
    font-family: var(--mono);
    font-size: 0.73rem;
    letter-spacing: 0.02em;
}

/* ---------- Links ---------- */

a {
    color: var(--oxblood);
    text-decoration: none;
    border-bottom: 1px solid rgba(140, 47, 47, 0.35);
}

a:hover { border-bottom-color: var(--oxblood); }

.entry-title a { border-bottom-color: var(--hairline); color: var(--ink); }
.entry-title a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

/* ---------- Colophon ---------- */

footer {
    margin-top: 3.2rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: 0.73rem;
    color: var(--muted);
}

footer ul {
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

footer li {
    display: inline;
}

footer li:not(:last-child)::after {
    content: " \00B7 ";
    color: var(--hairline);
}

footer a { color: var(--ink-2); border-bottom-color: var(--hairline); }
footer a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

.colophon { margin: 0; opacity: 0.8; }

/* ---------- Narrow screens ---------- */

@media (max-width: 30rem) {
    body { padding: 2.75rem 1.25rem 2.5rem; }
    .masthead { gap: 0.95rem; }
    .masthead h1 { font-size: 1.6rem; }
    .portrait { width: 60px; height: 60px; }
    .lead { font-size: 1.1rem; }
}

/* ---------- Ink sheet (dark) ---------- */

@media (prefers-color-scheme: dark) {
    :root {
        --paper:   #1b2233;
        --paper-2: #232b3e;
        --ink:     #f0e9db;
        --ink-2:   #c3bcae;
        --muted:   #8d8676;
        --oxblood: #c86a63;   /* lifted so it holds contrast on ink */
        --gold:    #cfa46b;
        --hairline: rgba(240, 233, 219, 0.20);
        --hairline-soft: rgba(240, 233, 219, 0.11);
    }

    body { background-image: radial-gradient(rgba(240, 233, 219, 0.02) 1px, transparent 1px); }
    a { border-bottom-color: rgba(200, 106, 99, 0.4); }
}