/* ==========================================================================
   LEECOI — About (/about/)
   ==========================================================================

   A principles page. The risk with one of those is that it reads as six
   paragraphs of self-description, so each rule here is paired with a link to
   the place it can be verified, and the layout gives that link the same weight
   as the claim.
   ========================================================================== */

/* ==========================================================================
   RULES
   --------------------------------------------------------------------------
   An <ol>, and numbered, because six rules referred to by number are easier to
   discuss than six rules referred to by paraphrase. The index is a real handle,
   not decoration.
   ========================================================================== */

.rules {
  display: flex;
  flex-direction: column;
}

.rule {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);

  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--line);
}

.rule:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* Grid children default to `min-width: auto` and will not shrink below their
   content. One long unwrappable label then widens the column, the section and
   the document. */
.rule > *,
.rule__body > * {
  min-inline-size: 0;
}

@media (min-width: 56rem) {
  .rule {
    /* Title column beside the detail, so the six rules can be read as a list of
       six things before any of them is read in full. */
    grid-template-columns: 2.5rem minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .rule__body {
    display: contents;
  }

  /* With `display: contents` the body's children become grid items directly, so
     the title takes the middle column and the text and link stack in the last. */
  .rule__title {
    grid-column: 2;
  }

  .rule__text,
  .rule__body .link-action {
    grid-column: 3;
  }

  .rule__text {
    grid-row: 1;
  }
}

.rule__index {
  font-size: var(--step-micro);
  line-height: 1.9;
  letter-spacing: var(--step-micro-ls);
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.rule__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
  text-wrap: balance;
}

.rule__text {
  margin-block-start: var(--space-xs);
  color: var(--muted);
  line-height: 1.7;
  max-width: var(--width-prose);
}

@media (min-width: 56rem) {
  .rule__text {
    margin-block-start: 0;
  }
}

.rule__body .link-action {
  margin-block-start: var(--space-md);
}

/* ==========================================================================
   PROGRAMME MODEL
   --------------------------------------------------------------------------
   Three steps in sequence. Connected by a rule that runs between them on wide
   screens, because the point is that they follow one another rather than being
   three separate offerings.
   ========================================================================== */

.model {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-xl);
  counter-reset: model;
}

.model__step {
  position: relative;
  padding-block-start: var(--space-lg);
  border-block-start: 2px solid var(--line-strong);
}

/* The middle step carries the accent, the same way the hard middle does in the
   homepage's three beats. It is the same idea, so it gets the same mark. */
.model__step:nth-child(2) {
  border-block-start-color: var(--accent);
}

.model__step::before {
  counter-increment: model;
  content: counter(model, decimal-leading-zero);

  display: block;
  margin-block-end: var(--space-xs);

  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: var(--step-micro-ls);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.model__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
}

.model__text {
  margin-block-start: var(--space-sm);
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.65;
}