.principle {
  position: absolute;
  top: calc(1.75rem + 2.5rem);
  left: var(--gutter);
  z-index: 20;
  max-width: 22ch;
  color: var(--c-ground);
  pointer-events: none;
}

.principle__index {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--c-portalith);
  font-size: var(--t-nav);
  letter-spacing: var(--tracking-nav);
}

.principle__name {
  margin-bottom: 0.6rem;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.principle__line {
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.72;
}

/* Contrast inverts the page. The rail follows it rather than fighting it. */
[data-beat="contrast"] .principle { color: var(--c-ink); }
[data-beat="contrast"] .principle__index { color: var(--c-dusted-clay); }