/* site/units/unit-textpage.css: the reading pages built with unit-textpage.js
   (About, Credits, Cookies, Privacy, Sell). Link after unit.css. Layout lives in
   the JS (whole squares); this file only styles the words. */

/* Page title: one yellow band, centred on the grid. Yellow is a fill. */
.tp-title { margin: 0; text-align: center; line-height: calc(var(--S) * 2); }
.tp-title span {
  display: inline-block; padding: 0 .6em; background: var(--yellow); color: var(--on-yellow);
  font-size: calc(var(--S) * 1.1); font-weight: 800; line-height: 1.5;
}
.tp-lede { margin: 0; text-align: center; font-size: calc(var(--S) * .6); font-weight: 500; line-height: 1.5; }

/* Cards: risen, static. Heading on a yellow band, then the copy. */
.tp-card > .body > .face { display: block; white-space: normal; font-weight: 400; }
.tp-inner { padding: calc(var(--S) * .8) calc(var(--S) * .9); }
.tp-inner h2 {
  display: inline-block; margin: 0 0 calc(var(--S) * .45); padding: .05em .7em .12em;
  background: var(--yellow); color: var(--on-yellow);
  font-size: calc(var(--S) * .65); font-weight: 800; line-height: 1.35;
}
.tp-inner p, .tp-inner li { margin: 0; font-size: calc(var(--S) * .55); line-height: 1.6; }
.tp-inner p + p, .tp-inner p + ul, .tp-inner ul + p { margin-top: calc(var(--S) * .4); }
.tp-inner ul { margin: 0; padding: 0 0 0 1.2em; }
.tp-inner li + li { margin-top: calc(var(--S) * .2); }
.tp-inner a { color: var(--ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.tp-inner a:hover { background: var(--yellow); color: var(--on-yellow); }
.tp-inner .meta { color: var(--muted); font-size: calc(var(--S) * .45); }
.tp-inner strong { font-weight: 700; }
/* Storage key names: a small technical tag, so the mono face (the one approved extra). */
.tp-inner .key { font-family: var(--font-mono); font-size: .82em; font-weight: 600; white-space: nowrap; }
/* An inline icon (Material Symbols Rounded), for the pages that load the font. */
.ms {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: calc(var(--S) * .66);
  line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; -webkit-font-smoothing: antialiased; flex: none;
}

/* ── WITHOUT JAVASCRIPT: #copy reads as a plain page. With it (html.js), the copy
   waits off-screen until unit-textpage.js adopts it, so it never flashes. ── */
.js #copy { position: absolute; left: -99999px; top: 0; }
html:not(.js) #copy {
  position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  background: var(--tan); line-height: 1.6;
}
html:not(.js) #copy h1 { font-size: 2.4rem; margin: .2em 0 .6em; }
html:not(.js) #copy section { margin: 0 0 2rem; }
html:not(.js) #copy a { color: var(--ink); }