/* Layout for the static pages (landing, Get started, Questions), served at
 * /book/pages/layout.css. Loaded after each page's own styles and before
 * /theme.css.
 *
 * Mobile first: one column, as the pages always were. From 60rem the page opens
 * out to the site width (--site-w, set in chrome.css) as an editorial grid: each
 * section's label sits in a left rail and its content in a right column held to a
 * reading measure. The width is used for structure, never for longer lines.
 */
.wrap { max-width: var(--site-w, 72rem); }
.wrap > header { max-width: 46rem; }

/* Lists of short items go two across once the column can hold them. */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0 2rem; }
.pair { border-bottom: 1px solid var(--line); }
.pair > li, .pair > li:last-child { border-bottom: 0; }

/* The FAQ's index of questions. Built by the page's script; hidden until the
   rail exists, because on a phone it would only repeat the questions. */
.toc { display: none; }

@media (min-width: 60rem) {
  .wrap > header { padding-top: 4.5rem; }
  .wrap > section {
    display: grid; grid-template-columns: 12rem minmax(0, 46rem);
    column-gap: 3.5rem; align-items: start; padding-top: 4rem;
  }
  .wrap > section > * { grid-column: 2; }
  .wrap > section > h2:first-child {
    grid-column: 1; grid-row: 1 / span 40; margin: .35rem 0 0; line-height: 1.5;
  }

  /* Questions: the index takes the rail and follows the reader down the page. */
  .faq > section.qa > .toc {
    display: block; grid-column: 1; grid-row: 1 / span 400; position: sticky; top: 1.5rem;
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  }
  .toc p { margin: 0 0 .8rem; font-weight: 600; font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--dim); }
  .toc ol { list-style: none; margin: 0; padding: 0; }
  .toc li { margin: 0 0 .55rem; }
  .toc a { color: var(--dim); text-decoration: none; }
  .toc a:hover, .toc a[aria-current="true"] { color: var(--accent); }
  .faq > section.qa > h2.q:first-of-type { margin-top: 0; }
}