/* Every page, the index included, gets its typography from lists.js. */
:root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fbf8f1; color: #1b1b1b; }

/* List pages: neutral until lists.js picks the typography for this visit. */
.list { font-family: Georgia, serif; overflow-x: hidden; }
.list nav { font: 12px/1.5 var(--mono); padding: 12px 16px; }
.list nav a { color: inherit; opacity: .6; text-decoration: none; }
.list nav a:hover { opacity: 1; text-decoration: underline; }
.list main { padding: 4vh 16px 12vh; }
.list:not(.styled) main { visibility: hidden; }
.list h1 { font-size: inherit; margin: 0 0 .6em; line-height: 1.05; }
.list p { margin: 0 0 .8em; }
.list ul, .list ol { margin: 0; padding: 0 0 0 1.4em; }
.list li { margin: 0 0 .25em; }
.list a { color: inherit; text-decoration-thickness: .04em; text-underline-offset: .12em; }
.list .sub { display: block; font-size: .55em; line-height: 1.3; opacity: .65; margin: .1em 0 .3em; }

/* Kid-sign lines: run to the edge, then turn the corner (or cram). */
.kid { display: inline; }
.run { white-space: nowrap; }
.kid .down { display: inline-block; vertical-align: top; white-space: nowrap; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.12em; line-height: 1; }
.kid .down span { display: inline-block; transform: rotate(45deg); }
.kid .cram { display: block; text-align: right; line-height: 1; }

/* Top-of-page buttons: rainbow restyles everything, * changes only the bullets. */
.tools { display: flex; gap: 10px; margin: 16px 16px 0; }
.tools button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .4s ease;
}
.tools button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.tools button:disabled { opacity: .6; cursor: progress; }
.restyle {
  background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff2d55, #ff3b30);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 1px 4px rgba(0, 0, 0, .25);
}
.restyle:hover { transform: rotate(90deg); }
.restyle:active { transform: rotate(180deg) scale(.92); }
.bullets {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
  font: 700 30px/44px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding-top: 8px;
}
.bullets:hover { transform: rotate(72deg); }
.bullets:active { transform: rotate(144deg) scale(.92); }
.list:not(.styled) .tools { visibility: hidden; }