/* A6.6: the credits page. Tokens only (tokens.css, tokens-a6.css, type.css); the masthead and the footer are Home's own markup and styles. */
/* The faces Home adds by script in its head (Newsreader 400, IBM Plex Sans 400, IBM Plex Mono 400 and 600) and its fallback face; type.css holds the other weights. */
@font-face { font-family: 'Newsreader'; font-weight: 400; font-display: block; src: url('../fonts/Newsreader-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: block; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: block; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: block; src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'DispA Fallback'; font-weight: 400; src: local('Georgia'); size-adjust: 100.6%; ascent-override: 73.6%; descent-override: 25.8%; line-gap-override: 0%; }
.cr { padding-top: calc(var(--nav-h) + var(--sp6-8)); padding-bottom: var(--sp6-9); }
.cr-in { max-width: 1200px; }
.cr-h1 { font-family: var(--font6-head); font-weight: var(--w6-head); font-size: var(--type-display); line-height: var(--lh6-display); letter-spacing: var(--tr6-display); color: var(--ink-strong); }
.cr-lead { margin: var(--sp6-5) 0 0; max-width: var(--measure6); font-size: var(--type-lead); line-height: 1.45; color: var(--ink-soft); }
.cr-toc { display: flex; flex-wrap: wrap; gap: var(--sp6-1) var(--sp6-5); margin: var(--sp6-6) 0 0; padding: 0; list-style: none; }
.cr-toc a { display: inline-block; padding-block: var(--sp6-3); font-family: var(--mono); font-weight: 600; font-size: var(--type-mono-min); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.cr-toc a:hover { color: var(--ink-strong); }
.cr-sec { margin-top: var(--sp6-8); scroll-margin-top: calc(var(--nav-h) + var(--sp6-4)); }
.cr-h2 { font-family: var(--font6-head); font-weight: var(--w6-head); font-size: var(--type-title); line-height: var(--lh6-title); letter-spacing: var(--tr6-head); color: var(--ink-strong); }
.cr-note { margin: var(--sp6-3) 0 0; max-width: var(--measure6); font-size: var(--type-ui); line-height: var(--lh6-body); color: var(--secondary); }
.cr-notice { margin: var(--sp6-4) 0 0; max-width: 48em; padding: var(--sp6-3) var(--sp6-4); border: var(--panel-rule); font-size: var(--type-ui); line-height: var(--lh6-body); color: var(--ink); }
.cr-list { margin: var(--sp6-5) 0 0; padding: 0; list-style: none; border-bottom: var(--row-rule); }
.cr-row, .cr-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--sp6-6); }
.cr-cols { margin-top: var(--sp6-5); padding-bottom: var(--sp6-2); font-family: var(--mono); font-weight: 600; font-size: var(--type-mono-min); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--secondary); }
.cr-cols + .cr-list { margin-top: 0; }
.cr-row { padding-block: var(--sp6-4); border-top: var(--row-rule); font-size: var(--type-ui); line-height: var(--lh6-body); }
.cr-row > div { min-width: 0; overflow-wrap: anywhere; }
.cr-row { scroll-margin-top: calc(var(--nav-h) + var(--sp6-4)); }
.cr-row:target { box-shadow: inset 2px 0 0 var(--accent); padding-left: var(--sp6-4); }
.cr-what { color: var(--ink-strong); }
.cr-credit { color: var(--ink-soft); }
.cr-lic { color: var(--secondary); }
.cr-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cr a { text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out); }
.cr-row a:hover { color: var(--ink-strong); }
.cr-open { color: var(--ink); }
@media (max-width: 720px) {
  .cr { padding-top: calc(var(--nav-h) + var(--sp6-6)); padding-bottom: var(--sp6-8); }
  .cr-cols { display: none; }
  .cr-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp6-2); padding-block: var(--sp6-5); }
  .cr-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; margin-bottom: 2px; font-family: var(--mono); font-weight: 600; font-size: var(--type-mono-min); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--secondary); }
  .cr-what .cr-k { display: none; }
  .cr-sec { margin-top: var(--sp6-7); }
}
@media (prefers-reduced-motion: reduce) { .cr a, .cr-toc a { transition: none; } }
/* integrate-r5, Q11: redesign/phase-a6/TYPE-STANDARD.md on this page. Rule 2 the title, rule 3 the section headings (Newsreader 44 px,
   36 px under 1024), rule 6 every label (the contents list, the column heads, the row cells, the notes and notices: Plex Sans 400, 13 px,
   line height 1.4, normal spacing, sentence case, secondary ink; never mono), rule 14 (no label outside the header in the header's
   style), rule 17 (from 1920 px, 13 to 15 and 20 to 24). Sizes are written out; the same values as the standard's lines. */
.cr-h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; }
.cr-h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; }
@media (max-width: 1023px) { .cr-h2 { font-size: 36px; } }
.cr-toc a, .cr-cols, .cr-k, .cr-row, .cr-note, .cr-notice { font-family: var(--sans, 'IBM Plex Sans', system-ui, sans-serif); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: normal; text-transform: none; }
.cr-toc a, .cr-cols, .cr-k, .cr-lic, .cr-note { color: var(--secondary); }
@media (max-width: 720px) { .cr-k { font-family: var(--sans, 'IBM Plex Sans', system-ui, sans-serif); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: normal; text-transform: none; } }
@media (min-width: 1920px) {
  .cr-toc a, .cr-cols, .cr-k, .cr-row, .cr-note, .cr-notice { font-size: 15px; }
  .cr-lead { font-size: 24px; }
}