/* https://www.taggmaiwald.com/layout-prose.css */
/* PROSE PAGE LAYOUT */
/* collapse for narrow viewports */
@media (max-width: 1039px) {
  .page-grid {
    display: block;
    padding: var(--page-padding-y) var(--page-padding-x);
  }
}

/* widescreen prose layout */
@media (min-width: 1040px) {
  .page-grid {
    display: grid;
    grid-template-columns:
      [main-start] 3fr
      [aside-start] 1fr
      [end];
    gap: 1.5rem;
    width: 100%;
    padding: var(--page-padding-y) var(--page-padding-x);
  }

  /* main text column */
  .col-main {
    grid-column: main-start;
    max-width: 60ch; /* readable prose width */
  }

  /* right-side callouts / notes */
  .col-aside {
    grid-column: aside-start;
    max-width: 30ch; /* visually balanced */
  }

  /* full-width items (tables, figures, section headers) */
  .span-full {
    grid-column: main-start / end;
  }
}