/* ===========================================================================
   Page skeleton. Every section is the same three-part shape:

     <section class="section">
       <div class="ornaments">…decorative art…</div>
       <div class="section__inner stack">…content…</div>
     </section>

   Content flows normally; only the art is positioned.
   =========================================================================== */

.section {
  position: relative;
  padding-block: var(--section-pad);
  /* Deliberately no inline padding: an absolutely positioned child resolves
     its insets against the *padding* box, so a gutter here would offset every
     ornament by half a gutter. The gutter lives on .section__inner instead. */
  /* No overflow rule here either — real content must never be clipped.
     Ornaments clip themselves, see 03-ornament.css. */
}

/* The 560px reading column the original was built around. */
.section__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: calc(var(--col) + var(--gutter) * 2);
  /* padding-inline: var(--gutter); */
  margin-inline: auto;
  text-align: center;
}

/* Vertical rhythm: one knob per section instead of a margin on every child.
   Override with `style="--stack-space: …"` where a section needs more air. */
.stack > * + * {
  margin-block-start: var(--stack-space, var(--s-3));
}

/* Escape the section's inline padding without reaching the viewport edge.
   Used by art that should touch the section's sides. */
.bleed {
  margin-inline: calc(-1 * var(--gutter));
  width: auto;
  max-width: none;
}