/* ==========================================================================
   Brutalist - built from the guidelines at brutalist-web.design rather than
   copied from any one page: "start with left-aligned black text on a white
   background, and apply styling only to solve a specific problem." Every
   rule below is here for a stated reason.

   - No JavaScript at all. Plain links and anchors; the back button and
     scrolling are the browser's own.
   - Colours are the browser's system colours (Canvas / CanvasText /
     LinkText), so dark mode and forced high-contrast modes come for free.
     --accent, when the site sets one, replaces only the link colour.
   - Links are always underlined. Nothing else is clickable.
   - Headings in Helvetica/system sans, body in a serif; one readable
     column (~65 characters) that works from a phone up.
   - Pictures are the lightweight thumbnails, lazy-loaded, each with a
     plain "View full size" link to the original.
   ========================================================================== */

:root { color-scheme: light dark; }

/* Readable measure on any screen; body text in a serif. */
body {
  max-width: 65ch;
  margin: 0;
  padding: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: CanvasText;
  background: Canvas;
}

/* Headings and small labels in a plain sans, to tell them apart from text. */
h1, h2, .label, .contents, footer {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.1;
  margin: 1.5rem 0 0.75rem;
}
h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

/* Links look like links: underlined, always. */
a {
  color: var(--accent, LinkText);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.lede { margin: 0 0 1rem; }

.social-links {
  display: block;
  font-size: 1rem;
}
.social-links a { margin-right: 1em; }

.site-cover {
  display: block;
  /* A real width, so small/medium/large always differ (a max alone did
     nothing to a cover already under it); never wider than the screen. */
  width: calc(20rem * var(--cover-scale, 1));
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0 0;
}

/* Small uppercase labels: dates. */
.label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

/* A thick rule is the one structural decoration: it separates sections
   so a long scroll still reads as distinct pieces. */
nav,
article {
  border-top: 4px solid CanvasText;
  padding-top: 1rem;
  margin-top: 2.5rem;
}

/* The list of posts: plain lines, no numbers or bullets. */
.contents {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

/* Anchored jumps shouldn't land with the heading flush to the edge. */
article { scroll-margin-top: 1rem; }

.permalink {
  font-weight: normal;
  margin-left: 0.25em;
}

.body p { margin: 0 0 1em; }

figure { margin: 1.25rem 0; }
figure img {
  display: block;
  max-width: min(100%, 480px); /* the box the 480px thumbnail used to set */
  max-height: 480px;
  height: auto;
  border: 1px solid CanvasText;
}
footer {
  border-top: 4px solid CanvasText;
  margin-top: 2.5rem;
  padding: 1rem 0 3rem;
  font-size: 1rem;
}