@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  figure {
    margin: 0;
  }

  /* Declares which grounds we actually paint, so the parts of the page the
     browser draws for itself follow the theme too — a select's open option
     list, the caret, scrollbars. Without this they stay light on the dark
     ground, and no stylesheet can reach them. */
  :root {
    color-scheme: light dark;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
  }

  h1 {
    font-size: var(--text-2xl);
  }

  /* A heading carries the space below it, which belongs to the heading
     wherever it appears. The space above belongs to whatever contains it — a
     section's margin, a grid gap — so it isn't set here. Headings that instead
     label a tile, a footnote, or a flex row zero this out where they set their
     own spacing, as does any layout that already spaces its own children:
     margins add to a grid gap rather than collapsing into it. */
  h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
  }

  h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }

  a {
    color: var(--color-accent);
  }

  img {
    max-width: 100%;
    display: block;
  }

  /* Keyboard focus is aether: the ring marks where the page's energy is, and
     it stays clear of brass so it never reads as part of the chrome. */
  :focus-visible {
    outline: 2px solid var(--color-aether);
    outline-offset: 2px;
  }

  .site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .site-header__inner {
    max-width: var(--site-width);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    /* On narrow screens the nav and search drop to their own lines instead
       of forcing the page wider than the viewport. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }

  .wordmark {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-display);
    color: var(--color-ink);
    text-decoration: none;
  }

  /* The logo SVG is black-on-transparent; rendering it as a mask lets the
     mark take its color from a token in both themes — brass, the metal the
     rest of the site's chrome is made of. */
  .wordmark__mark {
    width: var(--space-6);
    height: var(--space-6);
    background-color: var(--color-accent);
    mask: url("/assets/vulcan-symbol-8c0c05f2.svg") no-repeat center / contain;
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .site-nav a {
    color: var(--color-ink);
    text-decoration: none;
  }

  .site-nav a:hover {
    color: var(--color-accent);
  }

  .bluesky-link svg {
    display: block;
    width: var(--text-lg);
    height: var(--text-lg);
    fill: currentColor;
  }

  /* Brass at rest, so the one off-site link in the header row doesn't read as
     a fifth page. The hover inverts the nav links, which are ink until hovered. */
  .site-header .bluesky-link {
    color: var(--color-accent);
  }

  .site-header .bluesky-link:hover {
    color: var(--color-ink);
  }

  .site-search {
    margin-left: auto;
  }

  .page-intro,
  .empty-state {
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
  }

  .page-note {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-block: var(--space-3);
  }

  .site-main {
    flex: 1;
    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;
    padding: var(--space-6) var(--space-4);
  }

  .site-footer {
    border-top: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .site-footer__inner {
    max-width: var(--site-width);
    margin-inline: auto;
    padding: var(--space-5) var(--space-4);
    display: grid;
    gap: var(--space-3);
  }

  .site-footer a {
    color: inherit;
  }

  .site-footer__links {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
}