/*
  Article page layout. Loaded only on article pages.
*/

@layer pages {

  .article-top { padding-top: 36px; }
  .article-top .article-head { grid-column: 1 / span 9; }
  .article-top .article-side {
    grid-column: 10 / span 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: var(--line);
    padding-left: var(--gutter);
    align-self: end;
  }

  .article-hero { padding-top: 30px; }
  .article-hero figure { grid-column: 1 / span 9; }
  .article-hero .article-toc {
    grid-column: 10 / span 3;
    display: flex;
    flex-direction: column;
    border-left: var(--hair);
    padding-left: var(--gutter);
  }
  .article-hero .article-toc .lbl { padding-bottom: 8px; }

  .article-body { padding-top: 40px; }
  .article-body .prose { grid-column: 2 / span 7; }
  .article-body .rail { grid-column: 10 / span 3; gap: 32px; }

  @media (max-width: 1100px) {
    .article-top .article-head { grid-column: 1 / span 8; }
    .article-top .article-side { grid-column: 9 / span 4; }
    .article-hero figure { grid-column: 1 / span 8; }
    .article-hero .article-toc { grid-column: 9 / span 4; }
    .article-body .prose { grid-column: 1 / span 8; }
    .article-body .rail { grid-column: 9 / span 4; }
  }

  @media (max-width: 720px) {
    .article-top, .article-hero, .article-body { padding-top: 20px; }
    .article-top .article-head,
    .article-top .article-side,
    .article-hero figure,
    .article-hero .article-toc,
    .article-body .prose,
    .article-body .rail { grid-column: auto; }
    .article-top .article-side { border-left: 0; padding-left: 0; align-self: start; }
    .article-hero .article-toc { display: none; }
  }
}