section

<!-- Two elements: the outer band paints edge to edge and owns the rhythm, the
     inner one is the centred column. A background that stopped at the measure
     would not be a band, which is why this is two elements and not one.

     Both bands below use the same markup and differ only by attribute. -->
<section class="sk-section" aria-labelledby="sk-section-demo-1-title">
  <div class="sk-section__inner">
    <h2 id="sk-section-demo-1-title">A wide band</h2>
    <p class="sk-section__label">
      The default. The column is capped at <code>--sk-size-measure-wide</code>
      (72rem) and centred; the background runs the full width.
    </p>
  </div>
</section>

<section class="sk-section" data-surface="raised" aria-labelledby="sk-section-demo-2-title">
  <div class="sk-section__inner" data-measure="reading">
    <h2 id="sk-section-demo-2-title">A raised band, at a reading measure</h2>
    <p class="sk-section__label">
      <code>data-surface="raised"</code> alternates the background so bands
      read as separate sections without a border between them.
      <code>data-measure="reading"</code> narrows this column to
      <code>--sk-size-measure-reading</code> (65ch) — a comfortable line length
      is a count of characters, so it is expressed in characters and follows
      whatever typeface is set.
    </p>
  </div>
</section>

<section class="sk-section" aria-labelledby="sk-section-demo-3-title">
  <div class="sk-section__inner">
    <h2 id="sk-section-demo-3-title">And back to base</h2>
    <p class="sk-section__label">
      Every value here is a theme property. Set
      <code>--sk-section-padding-block</code> on <code>:root</code> and the
      whole page's rhythm changes at once.
    </p>
  </div>
</section>

/* .sk-section — the page band: vertical rhythm, surface, and a centred column.

   TWO ELEMENTS, AND THE SPLIT IS THE DESIGN. The outer element paints edge to
   edge and owns the rhythm; the inner one is the centred column. One element
   cannot do both — a background that stops at the measure is not a band — and
   that is why hand-written sections always end up with a wrapper nobody can
   name. Naming it is most of the value here.

   --_measure is declared on BOTH selectors: __inner is usable on its own
   (inside a <main> that is not a .sk-section, say), and a var() with no
   declaration anywhere above it would make max-inline-size invalid at computed
   time and silently drop the measure. The other three aliases are only ever
   read by .sk-section, so they are declared there alone.

   Specs:
   - logical properties ..... https://drafts.csswg.org/css-logical-1/
   - max-inline-size ........ https://drafts.csswg.org/css-sizing-3/#preferred-size-properties */

/* Public theme knobs (ADR 0011). Read, never declared. */
.sk-section,
.sk-section__inner {
  --_measure: var(--sk-section-measure, var(--sk-size-measure-wide));
}

.sk-section {
  --_padding-block: var(--sk-section-padding-block, var(--sk-space-3xl));
  --_padding-inline: var(--sk-section-padding-inline, var(--sk-space-lg));
  --_bg: var(--sk-section-bg, var(--sk-color-bg));

  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  background: var(--_bg);
}

/* Alternating bands down a page. Background only — the text colour is
   inherited, and check-contrast.mjs verifies it against both surfaces. */
.sk-section[data-surface="raised"] {
  --_bg: var(--sk-section-bg, var(--sk-color-surface));
}

.sk-section__inner {
  margin-inline: auto;
  max-inline-size: var(--_measure);
}

/* rem for the container, ch for the reading column: a page width should not
   stretch when the reader enlarges the typeface, and a comfortable line length
   is a count of characters and should. See the README. */
.sk-section__inner[data-measure="reading"] {
  --_measure: var(--sk-section-measure, var(--sk-size-measure-reading));
}

/* ---------------------------------------------------------------------------
   Presentation, not behaviour

   Demo copy only. Delete when copying .sk-section into your own page.
--------------------------------------------------------------------------- */

.sk-section__label {
  margin: 0;
  color: var(--sk-color-text-muted);
  font-size: var(--sk-text-sm);
}