/* 
 * Bare elements and web fonts. 
 */

/* Roboto Serif, latin. One file per weight/style the CSS actually uses:
   400 body, 700 headings and <strong>, 400 italic for <em> and .poem.
   Without a real file the browser fakes bold/italic. Bold italic is unused,
   so it is left to synthesis rather than shipping a fourth file. */
@font-face {
  font-display: swap;
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-serif-v17-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-serif-v17-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Roboto Serif";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto-serif-v17-latin-italic.woff2") format("woff2");
}

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

  * {
    margin: 0;
  }

  body {
    background-color: var(--base);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    /* Unitless. With a unit this computes to px once and children inherit that
       number, so small text inside a heading would get absurd leading. */
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
  }

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

  h2 {
    font-size: var(--text-section);
  }

  /* h3–h6 all sit at body size and lean on weight instead. Going smaller than
     body text to signal "deeper" makes headings harder to read than the prose. */
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--text-body);
  }

  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  ul,
  ol {
    padding-inline-start: var(--space-l);
  }

  ul {
    list-style-type: circle;
  }

  /* .flow spaces block children; list items need their own smaller rhythm. */
  li + li {
    margin-block-start: var(--space-2xs);
  }

  /* The underline is switched off here and added back for prose below.
     Scoping the prose rule alone is not enough: the underline on a nav link
     comes from the UA stylesheet, so it has to be removed explicitly. */
  a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--motion-fast);
  }

  /* Underline prose links only. Nav links are identified by position — the
     standard WCAG 1.4.1 exemption — and underlining them all adds noise. */
  main a,
  footer a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  main a:hover,
  footer a:hover {
    text-decoration-thickness: 2px;
  }

  /* One attribute does two jobs: it styles the current page and screen readers
     announce it. Works for the header nav and the Phase 3 circle nav alike. */
  [aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  img,
  svg {
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }
}