/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow{
  width: 100%;
  max-width: var(--narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
}

.section-alt{
  background: var(--bg-deep);
  border-block: 1px solid var(--border);
}

.section-head{
  max-width: 62ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head .eyebrow{ margin-bottom: var(--s4); }
.section-head h2{ margin-bottom: var(--s4); }

/* Heading with a trailing hairline that fills the remaining width */
.rule-head{
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-bottom: var(--s6);
}
.rule-head h2,
.rule-head h3{ flex: none; }
.rule-head::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

/* --- Scroll progress --------------------------------------------------- */

.progress{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.progress-bar{
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}