/* Short chapter headings stay with their own section. Native sticky positioning
   handles both scroll directions and releases at the section boundary. */
:root { --section-heading-height:64px; }
.has-section-heading { position:relative; isolation:isolate; }
/* Put section breathing room after the heading, not before it. The old heading
   stays until the new one reaches it, with no empty strip between chapters. */
.material-page[data-site-page] .has-section-heading { padding-block:0; }
.has-section-heading:not(.method-stage) > .wrap:last-child { padding-bottom:clamp(52px,5vw,96px); }
.section-heading-bar {
  position:sticky;
  top:var(--header);
  z-index:30;
  min-height:var(--section-heading-height);
  margin:0;
  padding:12px 0;
  color:inherit;
  background:inherit;
  box-shadow:0 1px 0 #8883;
}
.section-heading-bar > .wrap { min-height:40px; display:flex; align-items:center; }
.section-heading-bar + .wrap { padding-top:clamp(32px,4vw,60px); }
.material-page .section-heading-bar :is(.stage-name,.eyebrow,.label,.section-heading-label) {
  display:flex;
  align-items:center;
  gap:15px;
  width:auto;
  margin:0;
  padding:0;
  color:inherit;
  font:600 19px/1.3 var(--site-font);
  letter-spacing:-.015em;
  word-spacing:normal;
}
.material-page .section-heading-bar .stage-name > span {
  width:36px;
  height:36px;
  flex:0 0 36px;
  font-size:17px;
  box-shadow:3px 3px 0 #777;
}
.team-section > .section-heading-bar > .wrap { max-width:1120px; }
/* Keep sticky artwork and keyboard destinations below both lines of context. */
.has-section-heading :is(a,button,summary,input,h2,h3,[tabindex]) {
  scroll-margin-top:calc(var(--section-heading-height) + 18px);
}
@media (min-width:600px) and (min-height:501px) {
  .method-page .stage-visual { top:calc(var(--header) + var(--section-heading-height) + 24px); }
  .about-page .drivers-panel { top:calc(var(--header) + var(--section-heading-height) + 24px); }
}
@media (max-width:900px) {
  :root { --section-heading-height:54px; }
  .section-heading-bar { padding:10px 0; }
  .section-heading-bar + .wrap { padding-top:23px; }
  .section-heading-bar > .wrap { min-height:34px; }
  .material-page .section-heading-bar :is(.stage-name,.eyebrow,.label,.section-heading-label) { font-size:16px; gap:12px; }
  .material-page .section-heading-bar .stage-name > span { width:30px; height:30px; flex-basis:30px; font-size:15px; box-shadow:2px 2px 0 #777; }
}
@media (max-height:500px) {
  :root { --section-heading-height:44px; }
  .section-heading-bar { padding-block:7px; }
  .section-heading-bar > .wrap { min-height:30px; }
  .material-page .section-heading-bar :is(.stage-name,.eyebrow,.label,.section-heading-label) { font-size:15px; }
  .method-page .stage-visual,.about-page .drivers-panel { position:relative; top:auto; }
}