/*
  Principle component. Short, striking.
  List form: numbered circle + line of text.
  Detail form: large statement + longer explanation body.
*/

.principle {
  color: inherit;
}
.principle > a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: var(--space-md);
  border-block-end: 1px solid rgba(244, 236, 220, 0.12);
  font-size: clamp(.95rem, .3vw + .9rem, 1.1rem);
  line-height: 1.4;
}
.principle > a:hover { color: var(--brand); }

/* List numbering: plain large-but-faint numeral, no circle (circles are reserved
   for navigation controls). */
.principles > li { counter-increment: principle; }
.principles > li .principle > a::before {
  content: counter(principle);
  flex-shrink: 0;
  min-inline-size: 1.5rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: color-mix(in oklch, var(--ink-inverse) 25%, transparent);
}

.principles > li:last-child .principle > a { border-block-end: 0; }

/* Detail page */
.principle.detail .number {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(5rem, 15vw, 10rem);
  line-height: .9;
  color: color-mix(in oklch, var(--ink-inverse) 15%, transparent);
  margin-block-end: 0;
}
.principle.detail h1 {
  font-size: clamp(1.8rem, 3vw + 1rem, 2.8rem);
  color: var(--ink-inverse);
  max-inline-size: 20ch;
  line-height: 1.15;
}
.principle.detail .body {
  margin-block-start: var(--space-xl);
  font-size: 1.1rem;
  line-height: 1.7;
  max-inline-size: var(--width-narrow);
}