/*
 * A chapter: one surface, generous padding between chapters, a hard edge where
 * the surface changes and a hairline where it does not. The hairline is the
 * ledger's own grammar — two paper chapters in a row are two ruled pages.
 */

.section {
  --section-rule: var(--rule);
  padding-block: var(--section-y);
  position: relative;
}

/* A hairline only between two light chapters; a surface change is the edge. */
[data-surface="paper"] + .section:not(.ink):not(.navy),
[data-surface="alt"] + .section:not(.ink):not(.navy) {
  border-top: var(--hairline) solid var(--section-rule);
}

/* The chapter directly under the hero or a title block: closer to it, since
   the band above has already paid its own bottom padding. */
.first {
  border-top: 0 !important;
  padding-top: calc(var(--section-y) * 0.6);
}

.tight {
  padding-block: calc(var(--section-y) / 2);
}

.ink {
  --section-rule: var(--rule-dark);
  background: var(--ink);
  color: var(--paper);
}

/* The system's surface. Only a chapter whose subject is the program running. */
.navy {
  --section-rule: var(--rule-navy);
  background: var(--navy);
  color: #fff;
}

.alt {
  background: var(--paper-2);
}

.label {
  margin: 0 0 var(--s4);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ink .label,
.navy .label {
  color: var(--blue-2);
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin-bottom: var(--s7);
}

.heading {
  max-width: 62ch;
}

.heading h2 {
  max-width: 22ch;
}

.lead {
  color: var(--ink-2);
  max-width: 58ch;
  margin-top: var(--s4);
  font-size: 1.0625rem;
}

.ink .lead,
.navy .lead {
  color: var(--mat);
}

.action {
  flex: 0 0 auto;
  padding-bottom: var(--s1);
}

/* ---- The chapter entrance ---------------------------------------------- */

/*
 * One verb: post. The heading is cut up from its baseline — type being set,
 * not type loading — and the lead and the action are then simply *there*, in
 * one step, the way a line is either written in a ledger or it is not. Nothing
 * on this site fades in.
 *
 * Written against `[data-enter="out"]`, which only components/SectionEntrance
 * sets, and only on chapters below the fold. No JavaScript, reduced motion,
 * print: this block does nothing and the chapter is finished.
 */

.headingInner {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  [data-enter="out"] .lead,
  [data-enter="out"] .action {
    visibility: hidden;
  }

  [data-enter="out"] .headingInner {
    clip-path: inset(0 0 100% 0);
  }

  [data-enter="in"] .headingInner {
    animation: heading-cut 340ms var(--ease-out) both;
  }

  [data-enter="in"] .lead,
  [data-enter="in"] .action {
    animation: post 1ms linear 260ms both;
  }

  /* The mask ends past the baseline so descenders are never clipped. */
  @keyframes heading-cut {
    from {
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.18em);
    }
    to {
      clip-path: inset(0 0 -25% 0);
      transform: none;
    }
  }

  @keyframes post {
    from {
      visibility: hidden;
    }
    to {
      visibility: visible;
    }
  }
}