/* #6/#7 text pages (about, impressum, datenschutz): one style. pipeline/pages.py links it with ?v=<content hash>.
   No url() in here (only the HTML gets versioned URLs): @font-face lines stay in the pages. */
  /* running text: ui.fonts.body (pages.py sets --tf-body, size factor --tf-bs, line-height factor --tf-lh, letter-spacing --tf-ls and
     --tf-snap: sizes rounded to the font's pixel grid; browsers without CSS round() keep the plain size). Pixel fonts only for headings/buttons */
  :root { --ink: #20232b; --paper: #f6f0df; --muted: #6b6a66; --pin: #d8452f; }
  html { background: var(--tf-bg, #ece6d4); }
  body { margin: 0; padding: max(14px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom)); color: var(--ink);
         font: calc(17px * var(--tf-bs, 1))/calc(1.6 * var(--tf-lh, 1)) var(--tf-body, "Pixelify Sans", ui-monospace, monospace);
         font-size: round(calc(17px * var(--tf-bs, 1)), var(--tf-snap, .01px)); -webkit-text-size-adjust: 100%; }
  main p:not(.back), main li { letter-spacing: var(--tf-ls, 0); }
  main { max-width: 660px; margin: 0 auto; padding: 18px 20px 14px; background: var(--paper); border: 3px solid var(--ink);
         box-shadow: 4px 4px 0 rgba(20,22,28,.55); }
  a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 2px; }
  a:hover { color: var(--pin); }
  .hero { display: block; width: 100%; height: auto; border: 3px solid var(--ink); box-sizing: border-box; image-rendering: auto; margin: 6px 0 4px; }
  h1 { margin: 14px 0 2px; font: 700 30px/1.1 "Silkscreen", ui-monospace, monospace; letter-spacing: .02em; }
  h2 { margin: 26px 0 6px; font: 700 18px/1.2 "Silkscreen", ui-monospace, monospace; letter-spacing: .03em; }
  h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--pin); border: 2px solid var(--ink); vertical-align: 1px; }
  p { margin: 6px 0; }
  .tag { margin-top: 0; color: var(--muted); }
  .prog { margin-top: 14px; }
  .bar { height: 10px; border: 2px solid var(--ink); background: #cdc3ab; margin: 4px 0 2px; }
  .bar i { display: block; height: 100%; min-width: 3px; background: var(--pin); }
  ol { margin: 6px 0; padding: 0; list-style: none; counter-reset: s; }
  ol li { counter-increment: s; position: relative; padding-left: 34px; margin: 8px 0; }
  ol li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; display: grid; place-items: center;
                  background: var(--ink); color: var(--paper); font: 700 12px/1 "Silkscreen", ui-monospace, monospace; }
  ul.credits { margin: 6px 0; padding-left: 0; list-style: none; font-size: calc(15px * var(--tf-bs, 1)); font-size: round(calc(15px * var(--tf-bs, 1)), var(--tf-snap, .01px));
               line-height: calc(1.5 * var(--tf-lh, 1)); }
  ul.credits li { position: relative; padding-left: 16px; margin: 6px 0; }
  ul.credits li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--ink); }
  footer { margin-top: 26px; padding-top: 10px; border-top: 2px dashed #9d937b; }
  .back { font: 700 13px/1.4 "Silkscreen", ui-monospace, monospace; }
  .back a { text-decoration: none; }
  @media (max-width: 520px) { body { font-size: calc(16px * var(--tf-bs, 1)); font-size: round(calc(16px * var(--tf-bs, 1)), var(--tf-snap, .01px)); padding-left: 8px; padding-right: 8px; } main { padding: 12px 13px 10px; } h1 { font-size: 24px; } h2 { font-size: 15px; } }
  /* #7 legal pages (German): long words wrap, small date line */
  html[lang="de"] main { hyphens: auto; -webkit-hyphens: auto; }
  h1, h2 { overflow-wrap: break-word; }
  .stand { margin-top: 22px; color: var(--muted); }