/* The article list and the articles, set in the site's two typefaces: Familjen
   Grotesk for headings, labels and links, Newsreader for reading text. Loaded after
   each blog page's own styles, so it only changes type and a few alignments; the
   page layouts stay as they are. */
:root{
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{background:#FAF9FD;text-wrap:pretty}   /* inherited: no lone last word anywhere */

/* headings: Familjen, filled line by line (no balanced short lines), no single-word last line */
h1,h2,h3,article h2,.card h2{font-family:var(--sans);font-weight:600;letter-spacing:-.022em;text-wrap:pretty}
h1{letter-spacing:-.03em;line-height:1.06}
article h2{font-size:1.45em;line-height:1.2}
.card h2{font-size:22px;line-height:1.22;max-width:none}
.card:first-child h2{max-width:none}

/* reading text: Newsreader, which sets smaller than the old system face at the same size */
.head,article{font-size:calc(var(--read,18px) * 1.06)}
.dek,article p,article li,.card p,.lede{font-family:var(--serif);text-wrap:pretty}
.articles-head p{font-family:var(--serif)}
.card p{font-size:16.5px;line-height:1.55}
.card:first-child p{font-size:clamp(17px,1.3vw,19px)}
article .pull{font-family:var(--sans);font-weight:600;font-size:21px;line-height:1.35;text-wrap:pretty}

/* the soft colour washes behind the page titles read as a smudge under the header */
.head::before,.hero::before{display:none}

/* everything flush left, like the rest of the site */
.next{text-align:left}

/* article list: the newest article full width, the others two to a row */
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

/* cards: one inset for all of them, and "Read the article" sits on the bottom edge */
.card,.card:first-child{padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column}
.card .more{margin-top:auto;padding-top:16px}
.card p{margin-bottom:0}

/* a date never splits across two lines */
.byline time,.card .meta{white-space:nowrap}