/* Element defaults - reset, page background, base typography, the .shell rail.
   No components here. If it needs a class name, it belongs somewhere else. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--ink); text-wrap: balance; }
a { color: inherit; text-decoration: none; }
/* height:auto lets an image's CSS width + aspect-ratio decide its box. Without it the HTML
   height attribute (a presentational hint) wins whenever no author rule sets height, and every
   aspect-ratio box silently renders at the intrinsic pixel height instead. */
img { max-width: 100%; height: auto; }
::selection { background-color: var(--blue); color: #fff; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }