/* Incremental Tim — a plain black/white serif site.
   Dark mode is two token blocks and nothing else. */

:root {
    --cta: #4ade80;
    --cta-soft: #65e68a;
    --accent: #16a34a;
    --accent-glow: #16a34a33;
    --cta-ink: #0b0b0b;
    --ink: #101010;
    --ink-muted: #6b6b6b;
    --ink-faint: #a8a8a8;
    --paper: #fbfbf9;
    --rule: #101010;
    --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8e6e1;
        --ink-muted: #9a9892;
        --ink-faint: #5e5c58;
        --paper: #121211;
        --rule: #e8e6e1;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1.25rem;
    background: var(--paper);
    color: var(--ink);
    font-family: Iowan Old Style, Palatino, Palatino Linotype, Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

main { max-width: var(--measure); margin: 0 auto; padding: 4rem 0 6rem; }

/* The masthead, on every page: portrait on the left, title and tagline to its
   right. `align-items: stretch` (the default) lets the portrait take its
   height from the text beside it, so the three edges line up. */
/* The portrait is sized to the writing beside it: the title's cap height plus
   the gap plus the tagline, derived from the same type scale rather than
   guessed, so changing a font size moves both together.

   h1 cap  1.75rem * 0.72 (cap ratio of the serif stack)
   gap     0.25rem
   tagline 0.875rem * 1.7 (body line-height) */
.masthead {
    --masthead-size: calc(1.75rem * 0.72 + 0.25rem + 0.875rem * 1.7);
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
}
.masthead > div { min-width: 0; }

/* The site name: an <h1> on the home page, a link to it everywhere else. Both
   are drawn identically, so the header does not shift between pages — only the
   markup underneath differs, which is what keeps one <h1> per document. */
.masthead h1,
.masthead .masthead-name {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}
.masthead .masthead-name a { text-decoration: none; }
.masthead .masthead-name a:hover { text-decoration: underline; text-decoration-style: dotted; }
.masthead p.muted { margin: 0.25rem 0 0; }
/* The flex item the portrait fills. It stretches to the row's height (set by
   the text block), which is what gives the image inside a definite height to
   take 100% of. */
.masthead-portrait { display: block; flex-shrink: 0; align-self: stretch; }

/* Trim the half-leading above the title's caps and below the tagline's
   baseline, so the text block's box matches the text you actually see. Without
   this the portrait is flush with the *boxes* and reads as too tall against
   the writing. Supported everywhere the site's serif stack is; where it is
   not, the fallback is the old couple-of-pixels overhang. */
.masthead h1,
.masthead .masthead-name { text-box: trim-both cap alphabetic; }
.masthead p.muted { text-box: trim-end alphabetic; }

/* Softened corners, no border — the portrait carries its own edge.

   Width is fixed; height stretches to whatever the text beside it comes to, so
   the top meets the title's cap and the bottom the tagline's last baseline
   however many lines the tagline wraps to. `--masthead-size` is the one-line
   height and so also the width: on a wide screen the two agree and it is
   square, and when the tagline wraps it grows into a portrait rectangle with
   `object-fit: cover` keeping the face centred rather than stretched.

   Do NOT size this with `aspect-ratio` + `align-self: stretch` to keep it
   square instead: width would then derive from height, height from the text,
   and the text's height from the width left to it — a loop that resolves at
   absurd sizes. */
.avatar {
    display: block;
    width: var(--masthead-size);
    height: 100%;
    min-height: var(--masthead-size);
    /* Stop it becoming a sliver. Below ~340px the title wraps too, and matching
       that height would draw a 48x130 strip: aligned, but not a portrait. Past
       this the flex item still stretches, so the image just centres within it
       rather than growing further. */
    max-height: calc(var(--masthead-size) * 1.75);
    border-radius: 0.375rem;
    object-fit: cover;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

/* The page title, under the masthead. Smaller than the site name above it —
   the masthead is the louder of the two — but still ahead of the <h2>s within
   the page, so the three levels stay distinct. The masthead's own h1 opts back
   out to 1.75rem above. */
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.5rem; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-style: dotted; }

/* Dotted borders, used for every division on the site. */
.rule { border: 0; border-top: 1px dotted var(--rule); opacity: 0.45; margin: 2.5rem 0; }

blockquote {
    margin: 2.25rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 1px dotted var(--rule);
    color: var(--ink-muted);
    font-style: italic;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.875rem; }

/* Consent banner. Only ever in the page when analytics is configured and the
   reader has not yet chosen — see src/analytics.js. Dotted, like everything. */
#consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--paper);
    border-top: 1px dotted var(--rule);
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
}

#consent-banner > * {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

#consent-banner p { margin: 0 0 0.6rem; color: var(--ink-muted); }

#consent-banner .consent-actions { margin: 0; }

#consent-banner button {
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px dotted var(--rule);
    padding: 0.35rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

#consent-banner button:hover { border-style: solid; }

/* The one call to action, borrowed from liminal-spaces: a lime chip with
   near-black text, sharp corners, and a soft glow on hover. Its label sits on
   the lime rather than on the page, so the same colour works in both schemes
   and needs no dark variant. */
.cta {
    border: 1.5px solid var(--cta);
    background: var(--cta);
    color: var(--cta-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0.55rem 1.4rem;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
}

.cta:hover {
    background: var(--cta-soft);
    box-shadow: 0 0 18px var(--accent-glow);
}

.cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Text inputs in the introduce form pick up the accent on focus, so the lime
   reads as one idea rather than a lone button. */
.field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}