/**
 * Pawsies - Base layer
 *
 * Reset, document defaults and the typographic contract. Everything here was
 * previously copy-pasted into every page's inline <style>; the rules below
 * are the verbatim consensus, not a redesign:
 *
 *   *      identical in 20 of 21 styled files (the 21st, includes/404.php,
 *          is a partial and inherits from its host page)
 *   html   identical in 19; blog.php and landing/sections.php additionally
 *          set overflow-x: hidden, which body already sets - redundant, so
 *          dropping it changes nothing
 *   body   identical in 20; landing/sections.php deliberately runs
 *          line-height 1.65 for long-form reading and keeps that as a
 *          one-line page override
 *   h1-h5  identical in all 22 files carrying the bogart display face
 *
 * THE ROOT FONT SIZE IS LOAD-BEARING and it is now FLUID. Every rem on the
 * site is measured against it - type, padding, gaps, radii, tap targets - so
 * this one line rescales the whole site, which is exactly why it is one line
 * in one file.
 *
 * It was a flat 18px. 18px is generous on a monitor and too big on a phone:
 * a paragraph set at 18px in a 350px column runs about seven words to the
 * line, so a page of running text becomes a column of fragments, and every
 * rem-based gap around it is 12% larger than it should be at the width with
 * the least room to spare. The home page opened with 280px of white above
 * the headline for that reason.
 *
 * 16px at 390px, 18px from 1024px up, straight-line between. Not a media
 * query: a step at one width would put a visible jump in the middle of a
 * resize, and the thing being scaled here is every measurement on the site
 * at once. Below 390 it holds at 16 - a 320px phone needs the type no
 * smaller, it needs the column narrower, which it already is.
 *
 * Loaded on every page by includes/header.php, after tokens.css (it consumes
 * var(--cream) and var(--text-primary)) and before any page stylesheet.
 */

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

html {
    scroll-behavior: smooth;
    /* 16px at 390, 18px at 1024. See the note above: the slope is what makes
       the two ends meet, and the clamp is what stops it running past either. */
    font-size: clamp(16px, 14.77px + 0.3155vw, 18px);
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cream);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Display face for headings. h4 is deliberately NOT bogart - it sits inside
   body copy as a run-in label, where the serif reads as a mis-set paragraph
   rather than a heading. */
h1, h2, h3, h5 {
    font-family: 'bogart', Georgia, serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-weight: 500; }

h4 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}