/* ============================================================================
   /log/{slug} (sub page system v1.1, 9 Oct 2026): a READING page, no instrument.
   Also loaded by /facts/{slug} for the parts the two share: the closing ask (.ps-ask, the
   .log-cta hook log-cta.js watches) and the floating ask (.log-float).

   The entry is stored HTML (TimerSitePosts.BodyHtml, per post and per language, never edited):
   paragraphs, emphasis, and the occasional figure (.log-figure > .log-compare > div(.is-us) >
   h4 + p, figcaption). It is styled here, under .sp .ps-body, on top of the system's .prose.

   The reading column: on a phone the gutter to gutter width; on a desktop (1180px and up) the
   header, the text and the end of the entry all start at the third of the twelve columns and the
   text keeps the system's prose measure (42em, about 70 characters a line), so the page reads as
   one calm column instead of a line of text pinned to one edge. A figure may run wider than the
   text (to the tenth column): only its width grows, from the inline start, so Arabic mirrors it
   with no rule of its own.
   Tokens only (no hex outside tos-site.css), every rule under .sp, logical properties only.
   ============================================================================ */

/* ---- the header ---- */
.sp .ps-head h1 { overflow-wrap: break-word; }
@media (min-width: 1180px) {
  .sp .ps-head.is-plain > .hd-a, .sp .ps-head.is-plain > .hd-b { margin-inline-start: calc(100% / 6); max-width: 900px; }
  .sp .ps-head.is-plain { padding-block: 88px 64px; }
}

/* ---- the entry ---- */
.sp .ps-read { padding-block: 40px 56px; }
.sp .ps-body > p:first-child { font-size: 19px; line-height: 1.55; color: var(--lp-ink); }
.sp .ps-body em { font-style: italic; }
.sp .ps-body p { overflow-wrap: break-word; }
html[lang^="de"] .sp .ps-body p { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 1180px) {
  .sp .ps-read { display: block; padding-block: 72px 96px; }
  .sp .ps-read > .ps-body { margin-inline-start: calc(100% / 6); }
  .sp .ps-body > p:first-child { font-size: 21px; line-height: 1.5; }
  .sp .ps-body > * + * { margin-top: 20px; }
}

/* a figure in an entry: a contrast drawn on the paper, never boxed. The two sides sit under
   one ink rule, each with its record label (the side that is ours carries the orange square),
   and the caption under a hairline, in the body face */
.sp .ps-body .log-figure { margin-block: 40px; margin-inline: 0; }
.sp .ps-body .log-compare { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--lp-ink); }
.sp .ps-body .log-compare > div { padding: 16px 0 18px; border-bottom: 1px solid var(--lp-rule); }
.sp .ps-body .log-compare h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 450 12px/1.5 var(--tos-font-mono); letter-spacing: 0; text-transform: none; color: var(--lp-muted); }
.sp .ps-body .log-compare h4::before { content: ""; width: 7px; height: 7px; background: var(--lp-rule-2); flex: none; }
.sp .ps-body .log-compare .is-us h4 { color: var(--lp-ink); font-weight: 600; }
.sp .ps-body .log-compare .is-us h4::before { background: var(--lp-accent); }
.sp .ps-body .log-compare p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }
.sp .ps-body .log-compare .is-us p { color: var(--lp-ink); }
.sp .ps-body .log-figure figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
@media (min-width: 700px) {
  .sp .ps-body .log-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sp .ps-body .log-compare > div { padding: 18px 0 22px; }
}
@media (min-width: 1180px) {
  .sp .ps-body .log-figure { margin-block: 56px; width: min(940px, calc((100vw - 2 * var(--dl-g)) * 2 / 3)); }
  .sp .ps-body .log-compare p { font-size: 17px; }
}

/* ---- the end of the entry: the ask, then Earlier / All entries / Later ---- */
.sp .ps-end { padding-block: 48px 64px; }
.sp .ps-ask { padding: 22px 20px 24px; }
.sp .callout.ps-ask .ps-ask-t { display: flex; align-items: flex-start; gap: 12px; margin: 0; font: 600 clamp(22px, 6vw, 30px)/1.2 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); text-wrap: balance; }
.sp .callout.ps-ask .ps-ask-t::before { content: ""; width: 10px; height: 10px; margin-top: .45em; background: var(--lp-accent); flex: none; }
.sp .ps-ask p:not(.ps-ask-t) { margin-top: 12px; max-width: 40em; font-size: 16px; line-height: 1.6; color: var(--lp-ink-2); }
.sp .ps-ask .cta { margin-top: 22px; }
.sp .ps-ask .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; }
.sp .ps-nav { margin-top: 48px; }
.sp .ps-nav .lk-t { overflow-wrap: break-word; }
@media (min-width: 760px) {
  .sp .ps-ask { padding: 32px; }
  .sp .ps-ask p:not(.ps-ask-t) { font-size: 17px; }
}
@media (min-width: 1180px) {
  .sp .ps-end { display: block; padding-block: 96px 120px; }
  .sp .ps-end > .ps-ask, .sp .ps-end > .ps-nav { margin-inline-start: calc(100% / 6); max-width: 940px; }
  /* words on the left, the two buttons on the right: the ask uses the width it is given */
  .sp .ps-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; padding: 36px 40px; }
  .sp .ps-ask > .ps-ask-t, .sp .ps-ask > p { grid-column: 1; }
  .sp .ps-ask > .cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-direction: column; flex-wrap: nowrap; }
  .sp .ps-nav { margin-top: 64px; }
}

/* ---- the floating ask (desktop only; log-cta.js shows it past the first screen and retires it
   once the ask above is on screen, through the CSSOM). A framed card on the paper, an ink
   hairline, no shadow; without JavaScript it never appears. ---- */
.sp .log-float { display: none; position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 60; width: 320px; padding: 20px 20px 22px; background: var(--lp-paper); border: 1px solid var(--lp-ink); opacity: 0; transform: translateY(14px); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }
@media (min-width: 1024px) { .sp .log-float { display: block; } }
.sp .log-float-text { margin: 0 0 16px; padding-inline-end: 36px; font-size: 15px; line-height: 1.55; color: var(--lp-ink); }
.sp .log-float .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.sp .log-float-close { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--lp-muted); font-size: 20px; line-height: 1; }
.sp .log-float-close:hover { color: var(--lp-ink); }

/* ---- the reading measure at every width: the column is 714px at 1024 (82 characters a line);
   capped at about 70, as on a desktop ---- */
.sp .ps-body > p, .sp .ps-body > ul, .sp .ps-body > ol, .sp .ps-body > blockquote, .sp .ps-body > h2, .sp .ps-body > h3, .sp .ps-body > h4 { max-width: 36em; }