/* Section head and section scaffold (design-016). Tokens only, from ../tokens.css.

   HOW TO USE
   <section class="sec" data-section="s1-chief">
     <div class="sec__in">
       <header class="sec-head">
         <p class="sec-head__label"><span class="num">1</span>Your Chief of Staff</p>
         <div class="sec-head__row">
           <h2 class="sec-head__h t-h2"><span>Meet Marcus.</span> <span class="tone">He runs the team.</span></h2>
           <p class="sec-head__body t-sec-body">Body copy.</p>
         </div>
       </header>
       ...the stage or other content, 56px under the head (use .sec-head + .stage, or .sec__gap)...
     </div>
   </section>

   Night band: add `band--night` to the <section>. Label, rule, headline and tone switch to the night tokens.
   Label: sentence case, numeral then the name, 14px --muted, a full-width 1px rule 16 below.
   THE HEADLINE RULE (design-027), set here once; no section sets its own headline column or size:
   from 1024 up the headline takes columns 1 to 8 (grid-column: 1 / 9) at --t-h2 (clamp(40px, 5.15vw, 74px));
   the body takes columns 9 to 12 with 24px of extra left padding, so the gap between them is 48. The body is
   bottom-aligned to the headline's last baseline. Two tones (.tone is --muted). Below 1024 everything is one
   column, body max 34em. Sections whose label row is not followed by a headline (section 7) use
   .sec-head__label alone.
   Section padding: 160 (desktop), 112 (834), 88 (390) on top; the bottom is set by the section, 160/112/88 too. */

.sec { padding-block: var(--s-96) var(--s-96); background: var(--cream); color: var(--ink); }
.sec__in { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 834px) { .sec { padding-block: var(--s-128) var(--s-128); } }
@media (min-width: 1280px) { .sec { padding-block: var(--s-160) var(--s-160); } }

.sec-head { display: block; }
.sec-head__label {
  margin: 0; padding-bottom: var(--s-16); border-bottom: 1px solid var(--line);
  font-family: var(--f-text); font-weight: 500; font-size: var(--t-label); line-height: 1; letter-spacing: 0;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.sec-head__label .num { display: inline-block; min-width: 1ch; margin-right: .9em; }
.sec-head__row { margin-top: var(--s-32); display: grid; grid-template-columns: 1fr; row-gap: var(--s-20); }
.sec-head__h { margin: 0; color: var(--ink); }
.sec-head__h > span { display: block; }
.sec-head__h .tone { color: var(--muted); }
.sec-head__body { margin: 0; max-width: 34em; color: var(--ink-2); text-wrap: pretty; }

@media (min-width: 1024px) {
  .sec-head__row {
    margin-top: var(--s-40);
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-24); row-gap: 0;
    align-items: end; align-items: last baseline;
  }
  .sec-head__h { grid-column: 1 / 9; }
  .sec-head__body { grid-column: 9 / 13; max-width: none; padding-left: var(--s-24); }
}

/* the stage follows the head by 56 (40 on mobile) */
.sec-head + .stage, .sec-head + .sec__gap { margin-top: var(--s-40); }
@media (min-width: 834px) { .sec-head + .stage, .sec-head + .sec__gap { margin-top: var(--s-56); } }

/* night band (sections 5 and 6): one class, clean full-bleed edges */
.band--night { background: var(--night); color: var(--on-night); }
.band--night .sec-head__label { color: var(--on-night-2); border-bottom-color: var(--line-night); }
.band--night .sec-head__h { color: var(--on-night); }
.band--night .sec-head__h .tone { color: var(--on-night-2); }
.band--night .sec-head__body { color: var(--on-night-2); }