/*
 * Librarium Militaris: one report's page.
 *
 * The shell and the regions inside it. One column at every width: the record
 * first, then the parameters and tags that describe it. Nothing here is a
 * sidebar, whatever the element is called.
 *
 * In the layout layer with the archive's own shell, because that is what it is.
 */

@layer layout {
  .battle {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-24) var(--gutter);
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-32);

    @media (min-width: 1024px) {
      padding-top: var(--space-32);
      padding-bottom: var(--space-32);
    }
  }

  .battle__record,
  .battle__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    min-width: 0;
  }

  .battle__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .battle__headline {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .battle__title {
    color: var(--color-ink-bright);
    font-size: var(--text-20);
    font-weight: 500;
    line-height: var(--leading-snug);

    @media (min-width: 768px) { font-size: var(--text-24); }
  }

  .battle__stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
}