/* ============================================================================
   /manifesto on the sub page system (9 Oct 2026). A READING page: no instrument, no chapter
   heads holding still beside the text. One calm column at a reading measure (about 65 to 75
   characters a line): each principle its number, its title and its sentence; then the closing
   question, held; then the final lines, before the master's close band.

   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.
   ============================================================================ */

.sp.man { --man-col: 46rem; }

/* ---- the twenty principles ---- */
.sp .man-doc { padding-block: 0 64px; }
.sp .man-list { max-width: var(--man-col); border-top: 1px solid var(--lp-ink); }
.sp .man-list > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 26px 0 30px; border-bottom: 1px solid var(--lp-rule); scroll-margin-top: 80px; }
.sp .man-n { grid-row: 1 / 3; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--lp-accent-text); }
.sp .man-list h2 { grid-column: 2; font-size: clamp(22px, 5.8vw, 28px); line-height: 1.2; letter-spacing: -.025em; }
.sp .man-list p { grid-column: 2; margin-top: 10px; max-width: 36em; font-size: 17px; line-height: 1.65; color: var(--lp-ink-2); }
.sp .man-list > li:target h2 { text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---- the closing question: held in a frame, the answer under it with the orange square ---- */
.sp .man-q { padding-block: 8px 56px; }
.sp .man-q-in { max-width: var(--man-col); border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 26px 22px 28px; }
.sp .man-q-l { font: 600 clamp(26px, 7vw, 44px)/1.12 var(--tos-font-body); letter-spacing: -.03em; color: var(--lp-ink); text-wrap: balance; }
.sp .man-q-c { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--lp-ink); }
.sp .man-q-c::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; transform: translateY(-2px); }

/* ---- the final lines: four that will change, muted; the one that will not, in ink ---- */
.sp .man-final { padding-block: 8px 88px; }
.sp .man-lines { max-width: var(--man-col); border-top: 1px solid var(--lp-rule); padding-top: 32px; }
.sp .man-lines li { font: 500 clamp(22px, 5.6vw, 32px)/1.3 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-muted); }
.sp .man-lines li + li { margin-top: 4px; }
.sp .man-lines li.is-strong { margin-top: 20px; font-weight: 600; color: var(--lp-ink); text-wrap: balance; }
.sp .man-lines li.is-coda { margin-top: 24px; max-width: 34em; font: 400 18px/1.6 var(--tos-font-body); letter-spacing: 0; color: var(--lp-ink-2); }

@media (min-width: 760px) {
  .sp .man-list > li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 0; padding: 34px 0 38px; }
  .sp .man-q-in { padding: 40px 44px 44px; }
}
@media (min-width: 1180px) {
  .sp .man-doc { padding-block: 0 96px; }
  .sp .man-list h2 { font-size: 32px; }
  .sp .man-list p { font-size: 19px; }
  .sp .man-q { padding-block: 16px 80px; }
  .sp .man-final { padding-block: 16px 140px; }
  .sp .man-lines li.is-coda { font-size: 19px; }
}