/* Element defaults live in this layer, not in `default`: in the flat legacy
   sheet `a:hover` (0,1,1) beat `.heimr-menu__item` (0,1,0), and a lower layer
   would invert that. */
@layer styles {
  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  address {
    font-size: var(--font__size);
    font-style: normal;
  }

  body {
    color: var(--font__color);
    font-family: var(--font__family);
    font-size: 16px;
    font-weight: var(--font__weight);
    min-height: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font__alternative);
  }

  p {
    font-size: var(--font__size);
    line-height: 1.5;
    max-width: 100ch;
  }

  p:not(:last-child) {
    margin-bottom: var(--space--small);
  }

  hr {
    margin: 0;
  }

  .fixed-image {
    display: block;
  }

  .constrained-image {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: top;
  }

  .page__column {
    padding-left: var(--page__margin);
    padding-right: var(--page__margin);
  }

  .article__heading {
    font-size: 2.2rem;
    font-weight: var(--font__weight);
    padding-bottom: var(--space--small);
  }

  .separator {
    border-bottom: none;
    border-top: 0.5px solid grey;
  }

  .row {
    display: flow-root;
  }

  @media (min-width: 600px) {
    :root {
      --page__margin: var(--space--small);
    }
  }

  @media (min-width: 900px) {
    :root {
      --page__margin: var(--space--medium);
    }
  }

  @media (min-width: 1200px) {
    :root {
      --page__margin: 0;
    }

    .row {
      margin-left: auto;
      margin-right: auto;
      max-width: var(--grid-width);
    }
  }
}