@layer layouts {
  /* One knob for how far figures may exceed the reading measure.
     Text is 46rem (736px). At 900px a table or grid gets meaningfully more
     room while only bleeding ~82px past the text on each side, so it reads as
     related to the column rather than detached from it. Filling the full
     1136px column put figures 200px clear of the text on both sides, which
     looked like a separate layout. Both figure modules read this. */
  :root { --figure-width: 900px; }

  #hero {
    padding-block: 8rem 0;
    .backlink {
      display: flex;
      align-items: center;
      gap: .5em;
      padding: .2rem .8rem;
      margin-block: 0 1rem;
      color: black;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      &:hover {
        text-decoration: underline;
        text-underline-offset: .4em;
      }
      svg {
        width: 1rem;
        height: 1rem;
      }
    }
    h1 {
      margin-block: 0;
      font-size: clamp(2rem, 3.4vw + 1rem, 3.7rem);
    }
    .byline {
      margin-block: 1rem 0;
      font-size: .95rem;
      color: #555;
    }
  }

  /* Every block shares the base layout's 1200px column
     (main section { padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem) }),
     which is what the hero and the comparison table already sit on. They each
     used a narrower centred container before, which gave the tl;dr, the body
     and the recap three different left edges. Width is now controlled on the
     contents rather than by narrowing these containers, so prose and figures
     can differ while staying visually related. */
  #tldr, #case, #content, #summary {
    padding-inline: max((100% - 1200px) / 2 + 2rem, 2rem);
    max-width: 1200px;
    margin: 0 auto;
  }

  /* One centred text column, with tables and figures breaking out of it.
     Everything a reader reads as prose shares this measure, including the h1,
     so the headline sits directly above the body copy rather than 200px to its
     left. The comparison table and the edge-case grid are deliberately not in
     this list: they fill the column and so extend equally past the text on
     both sides, which reads as an intentional figure rather than the
     mismatched left edges this layout had before. */
  #hero > *,
  #tldr > *,
  #case > *,
  #summary > *,
  article > :is(p, ul, ol, h2, h3, h4, blockquote, .callout) {
    max-width: 46rem;
    margin-inline: auto;
  }

  /* tl;dr above the table. Deliberately compact: a reader should get the
     verdict without scrolling. */
  #tldr {
    padding-block: 2.5rem 0;
    .tldr-intro {
      margin-block: 0 1.5rem;
      font-size: 1.15rem;
      line-height: 1.6;
    }
    ul {
      margin-block: 0;
      padding: 1.3rem 1.8rem 1.3rem 2.6rem;
      background-color: #eef1ff;
      border-left: .3rem solid #245aff;
      border-radius: .2rem .5rem .5rem .2rem;
      list-style: disc;
    }
    li {
      margin: .5rem 0;
      font-size: 1.05rem;
      line-height: 1.55;
      &:first-child { margin-top: 0; }
      &:last-child { margin-bottom: 0; }
    }
  }

  /* Closing recap, after the body. Carries its own heading so it does not
     read as a continuation of the last body section. */
  #case {
    padding-block: 3rem 0;
    h2 {
      margin-block: 0 1rem;
      font-size: 2rem;
    }
    .case-intro {
      margin-block: 0;
      font-size: 1.05rem;
    }
    .key-takeaways { margin-top: 1.5rem; }
  }

  #summary {
    padding-block: 3rem 0;
    & > :first-child { margin-top: 0; }
    .callout {
      padding: 1.2rem 1.5rem;
      margin-block: 0 2rem;
      border-radius: .2rem .5rem .5rem .2rem;
      &.callout-answer {
        font-size: 1.15rem;
        font-weight: 500;
        background-color: #eef1ff;
        border-left: .3rem solid #245aff;
      }
      & > :last-child { margin-bottom: 0; }
    }
  }

  #content {
    padding-block: 1rem 0;
  }

  article {
    & > :first-child { margin-top: 0; }
    & > h2 {
      font-size: 2rem;
      margin-block: 2.5em 1em;
    }
    & > h3 {
      font-size: 1.4rem;
      margin-block: 2em 1em;
    }
    & > h4 {
      font-size: 1.15rem;
      margin-block: 2em .6rem;
    }
    /* margin-block, never the shorthand: the shorthand resets margin-inline
       to 0 and beats the centring rule above on specificity, which strands
       the element at the left edge while its neighbours centre. Same applies
       to every rule in this file. */
    & > p { margin-block: 1.4em; }
    & > p:not(h2 ~ p){ font-size: 1.1rem; }
    :is(p, li) a {
      color: #245aff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
    & > .callout {
      padding: 1.2rem 1.5rem;
      margin-block: 2rem;
      border-radius: .2rem .5rem .5rem .2rem;
      &.callout-answer {
        font-size: 1.15rem;
        font-weight: 500;
        background-color: #eef1ff;
        border-left: .3rem solid #245aff;
      }
      & > :last-child { margin-bottom: 0; }
    }
  }
}