/* ============================================================================
   /about on the sub page system (9 Oct 2026). No instrument: chapters, a record list of the
   five beliefs, the road so far as a ledger, the mission held in a callout, the founder.
   Loaded in PageStyles, right after sub.css. Every rule under .sp, tokens only (no hex,
   canon guard rule 4). Mobile first: rules outside media queries are the 390px phone.
   ============================================================================ */

/* the role under a person's name (the founder chapter's head) */
.sp .about-role { margin-top: 12px; font-size: 18px; line-height: 1.4; color: var(--lp-ink-2); }

/* 02 the beliefs: numbered records, the sentence in ink */
.sp .about-beliefs .lg-k { color: var(--lp-accent-text); font-weight: 600; }
.sp .about-beliefs .lg-x { font-size: 18px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
@media (min-width: 600px) {
  .sp .ledger.about-beliefs li { grid-template-columns: 40px minmax(0, 1fr); }
}

/* 03 the road so far: the date, then the title over its sentence; the two marked moments
   (commercial launch, today) carry the orange square on their date */
.sp .about-road .lg-h { display: block; font-size: 17px; line-height: 1.35; color: var(--lp-ink); }
.sp .about-road .lg-b { display: block; margin-top: 4px; color: var(--lp-ink-2); }
.sp .about-road li.is-on .lg-k { display: flex; align-items: center; gap: 8px; color: var(--lp-accent-text); font-weight: 600; }
.sp .about-road li.is-on .lg-k::after { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
@media (min-width: 600px) {
  .sp .about-road li.is-on .lg-k { align-items: flex-start; }
  .sp .about-road li.is-on .lg-k::after { margin-top: 6px; }
}

/* the mission: one held statement across the page, its status the record over it */
.sp .ch.about-today { padding-block: 40px 56px; }
.sp .about-today .ch-b { margin-top: 0; }
.sp .about-today .callout { padding: 24px 20px 28px; }
.sp .about-today .callout .big { margin-top: 12px; font-size: clamp(28px, 7.6vw, 60px); line-height: 1.06; letter-spacing: -.035em; overflow-wrap: normal; text-wrap: balance; }
html[lang^="de"] .sp .about-today .callout .big { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 760px) {
  .sp .about-today .callout { padding: 40px 44px 48px; }
}
@media (min-width: 1180px) {
  .sp .ch.about-today { padding-block: 80px; }
  .sp .about-today .ch-b { grid-column: 1 / -1; }
  .sp .about-today .callout { padding: 56px 64px 64px; }
}