@layer docs {
  .info-page {
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .info-header {
    position: sticky;
    top: 0;
    z-index: var(--gr-layer-sticky);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
    background: var(--gr-color-canvas);
  }

  .info-header__row,
  .info-footer__row {
    min-height: var(--gr-control-touch);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gr-space-2) var(--gr-space-6);
    padding-block: var(--gr-space-2);
  }

  .info-logo {
    display: block;
    width: 6.5rem;
    text-decoration: none;
  }

  .info-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .info-nav,
  .info-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gr-space-2) var(--gr-space-4);
  }

  .info-nav a,
  .info-footer a {
    min-height: var(--gr-control-touch);
    display: inline-flex;
    align-items: center;
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
    text-underline-offset: var(--gr-space-1);
  }

  .info-nav a[aria-current="page"] {
    color: var(--gr-color-text);
    font-weight: var(--gr-weight-medium);
    text-decoration-thickness: 2px;
  }

  .info-main {
    padding-block: var(--gr-space-12) var(--gr-space-16);
  }

  .info-heading {
    max-width: var(--gr-reading-width);
    display: grid;
    gap: var(--gr-space-3);
    padding-bottom: var(--gr-space-8);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border-strong);
  }

  .info-heading h1 {
    font-size: clamp(2.5rem, 12vw, 5.5rem);
    font-weight: var(--gr-weight-medium);
    letter-spacing: -0.055em;
    line-height: var(--gr-leading-tight);
  }

  .info-heading__lead {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-lg);
  }

  .info-content {
    max-width: var(--gr-reading-width);
    display: grid;
    gap: var(--gr-space-12);
    padding-top: var(--gr-space-8);
  }

  .license-copy,
  .release-copy {
    display: grid;
    gap: var(--gr-space-4);
  }

  .license-copy p,
  .release-copy li {
    line-height: var(--gr-leading-body);
  }

  .release {
    display: grid;
    gap: var(--gr-space-4);
    padding-bottom: var(--gr-space-8);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
  }

  .release:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .release__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gr-space-2) var(--gr-space-6);
  }

  .release h2,
  .license-copy h2 {
    font-size: var(--gr-text-2xl);
  }

  .release time,
  .license-copy__meta {
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .release ul {
    display: grid;
    gap: var(--gr-space-2);
    margin: 0;
    padding-inline-start: var(--gr-space-6);
  }

  .info-footer {
    border-top: var(--gr-border-width) solid var(--gr-color-border);
  }

  .info-footer__row {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  @media (pointer: fine) and (min-width: 45rem) {
    .info-header__row,
    .info-footer__row {
      min-height: var(--gr-control-compact);
    }

    .info-nav a,
    .info-footer a {
      min-height: var(--gr-control-compact);
    }
  }
}
