/* Layout: wrap, grid, chapter rhythm and grounds (role A3). PLAN §7.3.
   Grid: 12 columns at >= 1100 px, 8 columns at 861-1099 px, 1 column at <= 860 px (engine mobile).
   Column placements for each chapter live in chapters.css. */

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
}
@media (min-width: 861px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---- chapters ---------------------------------------------------------- */
.chapter {
  position: relative;
  scroll-margin-top: 64px;
}
.chapter:not(.hero) {
  padding-top: var(--pad-top);
  padding-bottom: var(--pad-bottom);
}
.chapter[data-ground="paper"] { background: var(--paper); }
.chapter[data-ground="paper-2"] { background: var(--paper-2); }
.chapter[data-ground="ink"] { background: var(--ink-ground); }
.chapter[data-ground="forest"] { background: var(--forest); }

/* Two consecutive paper chapters read as one page: a hairline marks the turn instead of a colour change. */
.chapter:not(.hero)[data-ground="paper"] + .chapter[data-ground="paper"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  right: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  height: 1px;
  background: var(--rule);
}

.chapter__head { margin-bottom: var(--s-7); }
.chapter__head > .h2 + * { margin-top: var(--s-5); }
.chapter__head > .lede + * { margin-top: var(--s-4); }
@media (min-width: 861px) {
  .chapter__head { margin-bottom: var(--s-8); }
}

/* Pinned and panned chapters own their own height; their padding lives inside the stage. */
.chapter[data-sc-act="pin"]:not(.hero),
.chapter[data-sc-act="pan"] {
  padding-top: 0;
  padding-bottom: 0;
}
.chapter[data-sc-act="pin"]:not(.hero) + .chapter,
.chapter[data-sc-act="pan"] + .chapter { padding-top: calc(var(--pad-top) * 0.75); }

/* The hero is followed by the first reading chapter; keep the turn quiet. */
.hero + .chapter { padding-top: calc(var(--pad-top) * 0.8); }