<section class="page-content">
  <navigation label="Character" page :collection="char" webc:nokeep></navigation>

  <slot></slot>
</section>

<style>
  .page-content {
    width: 100%;

    background-color: var(--clr-box-background);
    border: var(--border-thin) solid var(--clr-box-border);
    border-radius: var(--border-radius);

    & :where(h1, h2, h3, h4, h5, h6) {
      --heading-spacing: 0.25em;
      position: relative;
      font-weight: bold;
      margin-block: 0 var(--heading-spacing);
      padding-block: 0 var(--heading-spacing);

      &::after {
        content: '';
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
        height: 0.125em;
        width: 2em;
        border-radius: 1em;
        background: linear-gradient(
          to right,
          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
        );
      }
    }

    & h1 {
      font-size: 3em;
    }

    & h2 {
      font-size: 2em;
    }

    & p {
      text-align: justify;
    }

    & article a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.1875em;
      text-decoration-thickness: 0.125em;
      text-decoration-skip-ink: all;
      text-decoration-color: var(--clr-link-underline);
      transition: color 0.2s ease;

      &:hover {
        color: var(--clr-link);
      }
    }
  }
</style>
