/* Grid: measure, sections, folio, rules. 4 cols phone, 8 tablet, 12 desktop. */
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.page { margin-top: var(--sec); }
.folio {
  position: relative; display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 16px; color: var(--ink-soft);
}
.folio span:nth-child(2) { color: var(--ink); }
.folio::after, .rule2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--ink); }
.folio::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; border-top: 3px solid var(--ink); }
.folio { padding-bottom: 14px; }
.rule2 { position: relative; height: 6px; border-top: 3px solid var(--ink); transform-origin: left center; }
.col-rule { display: none; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); transform-origin: top center; pointer-events: none; }
@media (min-width: 768px) { .folio { margin-bottom: 24px; } }
@media (min-width: 1024px) {
  .folio { margin-bottom: 40px; }
}