html {
  background: rgb(var(--color-brown));
  color: rgb(var(--color-white));
  scrollbar-color: rgb(var(--color-yellow)) rgb(var(--color-brown));
}

body {
  font-family: var(--font-family-1);
  font-size: var(--font-size-3);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--line-height-2);
  min-block-size: 100svb;
}

attic-app {
  display: flex;
  flex-direction: column;
  justify-content: start;
  min-block-size: 100svb;

  & > :is(header, footer, main) {
    display: grid;
    grid-template-columns:
      [full-start]
      1fr
      [margin-start]
      var(--app-margin)
      [main-start]
      minmax(260px, calc((900 / 16) * 1rem))
      [main-end]
      var(--app-margin)
      [margin-end]
      1fr
      [full-end];

    & > * {
      grid-column: main;
    }
  }

  & > header {
    padding-block: 30px;

    & > nav {
      column-gap: 20px;
      display: flex;
      flex-wrap: wrap;
      row-gap: 10px;

      & a {
        display: block;

        &[aria-current] {
          &:not(:hover) {
            color: rgb(var(--color-light-yellow));
          }
        }
      }
    }
  }

  & > footer {
    color: rgb(var(--color-white) / 0.7);
    margin-block-start: auto;
    padding-block: 60px 30px;

    & a {
      color: currentColor;
    }

    & p small {
      column-gap: 10px;
      display: flex;
      flex-wrap: wrap;
    }
  }

  & > main {
    row-gap: 30px;
  }
}

:focus-visible {
  outline: 4px solid magenta;
  outline-offset: 2px;
}

:is(a[href], button) {
  &:hover {
    anchor-name: --pointer;
  }
}

:where(body:not(:has(a[href]:hover, button:hover))) {
  & :focus-visible {
    anchor-name: --pointer;
  }
}

dialog {
  inline-size: 100%;
  max-block-size: 100vb;
  margin-inline: 0;
  overscroll-behavior: contain;
  padding-block: 10px;

  & > form {
    inline-size: calc(100vi - 20px);
    margin-inline: auto;
  }

  @media (width >= 600px) {
    padding-block: 30px;

    & > form {
      inline-size: min(min(100%, 900px), calc(100vi - (2 * var(--app-margin))));
    }
  }

  & [command="close"] {
    inset-block-start: 20px;
    inset-inline-end: 0;
    position: absolute;
    z-index: 1;

    &::before {
      content: "×" / "";
    }
  }

  &::backdrop {
    background: rgb(var(--color-brown) / 0.5);
    backdrop-filter: blur(5px);
  }
}