/* =============================================================================
   catherinebrewer.github.io — minimal stylesheet
   =============================================================================
   One file, used by every Jekyll page via _layouts/default.html.

   Design rules, if you're editing:
     - dark navy and blue, nothing else
     - left aligned, flush to a single column
     - monospace for the chrome (nav, dates, headings, back links), serif for
       reading text. The mono bits are the machine talking; the serif bits are
       Catherine talking.
     - sparse: generous whitespace, hairline rules, no decoration

   To retheme, change the variables in :root.
   To change either typeface, change --mono or --serif.
   ============================================================================= */

/* --- Palette and type ------------------------------------------------------
   The site is dark only — there's no light theme and no toggle. */
:root {
    --text: #e6edf5;
    --background: #0d1219;  /* deep navy, not grey, so it stays in the blues */
    --secondary: #8fa3b8;   /* muted blue-grey: dates, captions, rules */
    --link: #79aaff;
    --rule: #22303f;        /* hairlines */

    /* Tells the browser to render form controls, scrollbars and the like in
       their dark variants, so nothing flashes white at the edges. */
    color-scheme: dark;

    /* Georgia first: a screen serif from the same era as the look we're after,
       and far more readable at length than Times. */
    --serif: Georgia, "Times New Roman", Times, serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "DejaVu Sans Mono", "Liberation Mono", monospace;

    --max-width: 36rem;
    --gutter: 2.5rem;
}

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

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

body {
    font-family: var(--serif);
    color: var(--text);
    background: var(--background);
    line-height: 1.65;
    padding: var(--gutter);
    /* Left aligned: the column sits against the left gutter, not centred. */
    text-align: left;
}

.container {
    max-width: var(--max-width);
    width: 100%;
}

/* --- Headings --------------------------------------------------------------
   Monospace, and barely larger than body text. On a sparse page the font
   change alone is enough to mark a heading; size isn't needed too. */
h1, h2, h3, .post-title, .post-date-header, .post-date,
.links, .back-link, .footnotes {
    font-family: var(--mono);
}

h1 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 1.6rem;
}

h2 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2.5rem;
    margin-bottom: 0.7rem;
}

h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
}

/* --- Text ------------------------------------------------------------------ */
p {
    margin-bottom: 1.1rem;
}

/* Lists.
   NOTE: the global `* { padding: 0 }` reset above strips the browser's default
   padding-left on <ul>/<ol>, which is what makes room for the marker. The
   padding-left here restores it — don't swap it for margin-left, and keep this
   rule global rather than scoped to .post-content, or bullets on plain pages
   like /projects/ hang off the left edge of the column. */
ul, ol {
    padding-left: 1.4rem;
    margin-bottom: 1.1rem;
}

li > ul,
li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

small, .muted {
    color: var(--secondary);
    font-family: var(--mono);
    font-size: 0.78rem;
}

/* --- Links -----------------------------------------------------------------
   Underlined by default. On a page this plain the underline is the affordance;
   removing it and adding it back on hover just hides where you can click. */
a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    text-decoration: none;
}

/* --- Home page nav row -----------------------------------------------------
   Flex (not plain inline text) so the whitespace between the <a> tags in the
   HTML source doesn't land on one side of the separator only — with gap, the
   spacing either side of each dot is identical. Wraps on narrow screens for
   free. */
.links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
    font-size: 0.8rem;
    text-transform: lowercase;
}

.links a + a::before {
    content: "·";
    color: var(--secondary);
    display: inline-block;
    margin-right: 0.5rem;
    text-decoration: none;
}

/* --- Post lists (WIP index, any future index) ------------------------------
   Date and title on one row, the dates forming a clean mono column down the
   left because tabular-nums keeps every digit the same width. */
.post-list {
    list-style: none;
    padding-left: 0;     /* overrides the global ul rule above */
    margin-top: 2rem;
}

.post-list li {
    margin-bottom: 0.6rem;
}

.post-date {
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    margin-right: 1rem;
}

/* --- Individual posts ------------------------------------------------------ */
.post-header {
    margin-bottom: 2.2rem;
}

.post-date-header {
    color: var(--secondary);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.post-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.post-subtitle {
    color: var(--secondary);
    font-style: italic;
    margin-top: 0.3rem;
}

/* Standfirst under the WIP heading */
.wip-disclaimer {
    color: var(--secondary);
    font-style: italic;
}

.post-content li {
    margin-bottom: 0.35rem;
}

.post-content blockquote {
    border-left: 2px solid var(--rule);
    padding-left: 1.1rem;
    margin: 1.4rem 0;
    color: var(--secondary);
}

.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4rem 0;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

code, pre {
    font-family: var(--mono);
    font-size: 0.82rem;
}

.post-content code {
    background: var(--rule);
    padding: 0.1em 0.3em;
}

.post-content pre {
    background: var(--rule);
    padding: 0.9rem;
    overflow-x: auto;
    margin-bottom: 1.1rem;
    line-height: 1.5;
}

.post-content pre code {
    background: none;
    padding: 0;
}

/* --- Back link -------------------------------------------------------------- */
.back-link {
    margin-top: 3.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
}

/* --- Footnotes -------------------------------------------------------------- */
.footnotes {
    margin-top: 3.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--secondary);
}

/* --- Home page tree ----------------------------------------------------------
   The fractal tree that unfurls in the bottom-right corner on load (drawn by
   assets/js/leaves.js). z-index -1 keeps it behind the text; the mask fades it
   out towards the top-left so it never competes with the column. Hidden on
   narrow screens, where it would sit under the text. */
#leaves {
    position: fixed;
    right: 0;
    bottom: 0;
    width: min(56vw, 740px);
    height: min(74vh, 600px);
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 45%, rgba(0, 0, 0, .55) 70%, transparent 100%);
            mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 45%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}

@media (max-width: 800px) {
    #leaves {
        display: none;
    }
}

/* --- Mobile ------------------------------------------------------------------ */
@media (max-width: 600px) {
    :root {
        --gutter: 1.25rem;
    }

    html {
        font-size: 17px;
    }
}

/* --- Print -------------------------------------------------------------------- */
@media print {
    #leaves {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}