/* One stylesheet for the whole site. Plain CSS, no build step, no framework.
   The colors are defined once as custom properties and swapped for a reader
   whose system asks for a dark theme.

   Every pair below was measured rather than chosen by eye. Body text is
   17.8:1 in light and 16.7:1 in dark, the muted tagline 7.0:1 and 8.3:1, and
   links 8.8:1 and 10.3:1 -- all well past the 4.5:1 that WCAG AA asks of body
   text, which is the point: this page is mostly one short paragraph, and
   there is nothing here that a little extra contrast costs. */

/* Lato, served from this site rather than from a font service, so a visitor's
   browser talks to nobody but us.

   The licence allows this and the SIL FAQ says so in as many words: an OFL
   font may be hosted "on the same server as other site assets", because that
   is distribution and distribution is exactly what the licence grants
   (FAQ 2.1). Two conditions shape how it is done here.

   The copyright notice and the licence travel with the font. OFL 1.1
   condition 2 wants them in each copy; they are in fonts/OFL.txt beside the
   files, and also inside each .woff2 in its own name table, which is where a
   tool that inspects the font looks.

   The files are converted but never subsetted, and that is what lets them
   keep the name. "Lato" is a Reserved Font Name -- declared in the font
   binary, though the Debian copyright file omits it -- so a Modified Version
   may not call itself Lato. A format conversion is a modification (FAQ 2.2)
   and subsetting certainly is (FAQ 2.6), but a conversion that preserves
   Functional Equivalence may keep the name (FAQ 2.7): the same full character
   inventory, the same behaviour. These carry all 3,026 glyphs and all 2,166
   mapped characters of the originals, checked after converting. Subsetting to
   Latin would save about three quarters of the bytes and would mean renaming
   the family, so it is not done. */
@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    /* Show the fallback at once and swap when the file lands, rather than
       holding the text invisible while 200 KB arrives. */
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #14161a;
    --ink-muted: #54585e;
    --page: #fdfdfb;
    --rule: #e0ded8;
    --link: #134a86;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f2f0ec;
        --ink-muted: #adaba6;
        --page: #0f1012;
        --rule: #2b2d32;
        --link: #9cc2f0;
    }
}

html {
    /* A readable body size that grows a little on a wide screen and never
       shrinks below 17px on a phone. */
    font-size: clamp(17px, 0.6rem + 0.5vw, 19px);
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    /* Lato, shipped from this site. Two weights, no italic, because the page
       uses two weights and no italic. The fallbacks are Helvetica and Arial:
       close enough in width that the swap below does not reflow a paragraph. */
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    /* macOS renders light text on a dark ground noticeably heavier than Linux
       or Windows do, which is why this page looked bolder in life than in the
       screenshots it was designed from. These two ask for grayscale
       antialiasing instead of the subpixel-weighted default, which is the one
       lever that thins it back. Safari and Chrome honour the first; Firefox on
       macOS honours the second; every other platform ignores both, and on
       those the page is unchanged. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Belt and braces: the page renders correctly before style.css loads and
       when it fails to, because the browser's own default is close enough. */
    -webkit-text-size-adjust: 100%;
}

main {
    /* 34rem is about 70 characters at this size, which is the measure prose
       is easiest to read at. The padding is what keeps it off the edge of a
       phone screen. */
    max-width: 34rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
}

header {
    margin-bottom: 3rem;
}

h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0;
    /* Tighter than the serif this replaced wanted. A sans face at display size
       sets loose by default, and the name is the one thing on the page whose
       spacing is worth an opinion. */
    letter-spacing: -0.02em;
}

.tagline {
    margin: 0.6rem 0 0;
    color: var(--ink-muted);
    font-size: 1.05rem;
}

h2 {
    font-size: 1.15rem;
    margin: 2.5rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--rule);
    /* 700 rather than 600, because 600 is not a weight this page ships. CSS
       weight matching resolves an unavailable 600 upward to the 700 face, so
       the declaration was already rendering as bold and only read as if it
       were not. If this heading should be lighter, the answer is to ship
       Lato Semibold beside the other two, not to ask for a weight that is
       not there. */
    font-weight: 700;
    /* The opposite of the h1, and for the opposite reason: a section heading
       at body size needs the extra air to read as a label rather than as a
       bolder paragraph. */
    letter-spacing: 0.015em;
}

p {
    margin: 0 0 1.1rem;
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

ul {
    padding-left: 1.2rem;
}

li {
    margin-bottom: 0.4rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}