/* Tot Up's own pages: how to play, mental maths, about, contact and privacy.
   A readable column on the game's paper, loaded after style.css so its tokens,
   fonts, .btn and .link apply here too. */

.page {
  max-width: 640px; margin: 0 auto;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.page-top { min-height: 56px; display: flex; align-items: center; }
.back { gap: 2px; margin-left: -4px; }
.back svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
.prose { font-size: 1.0625rem; line-height: 1.55; overflow-wrap: break-word; }
.prose h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.15; margin-top: 8px; text-wrap: balance; }
.prose h2 {
  font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--hairline); text-wrap: balance; scroll-margin-top: 12px;
}
.prose h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin-top: 22px; text-wrap: balance; }
.prose p, .prose ul, .prose ol { margin-top: 10px; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: 8px; }
.prose a:not(.btn) {
  color: var(--ink); font-weight: 600; text-decoration: underline 2px var(--biro);
  text-underline-offset: 3px; text-decoration-skip-ink: none; overflow-wrap: anywhere;
}
.prose a:not(.btn):active { text-decoration-thickness: 4px; }
.prose a[href^="mailto:"] { white-space: nowrap; }
.updated { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.lede { font-size: 1.125rem; }
.prose .lede { margin-top: 18px; }
.list { padding-left: 1.25em; list-style: disc; }
.list li + li { margin-top: 6px; }
.list li::marker { color: var(--biro); }
.items { border-bottom: 1px solid var(--hairline); }
.prose .items { margin-top: 14px; }
.items li { padding: 12px 0; border-top: 1px solid var(--hairline); }
.items .k { display: block; margin-top: 4px; color: var(--ink-2); font-size: 1rem; }
.prose code { font: 600 .875em/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink-2); overflow-wrap: anywhere; }
.box { padding: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.prose .box { margin-top: 20px; }
.prose .box h3 { margin-top: 0; }
.toc { padding: 10px 0 12px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.prose .toc { margin-top: 22px; }
.toc h2 { all: unset; display: block; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.toc ol { margin-top: 4px; }
.toc li a { display: inline-block; padding: 5px 0; }
/* The contents list's own bottom rule stands in for the first section's. */
.prose .toc + h2 { border-top: 0; padding-top: 0; margin-top: 28px; }
.foot { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.foot nav { flex-basis: 100%; }
.pages { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 4px; }
.pages a[aria-current="page"] { color: var(--ink); text-decoration: none; }