/* Base: reset, selection, scrollbars, the focus ring, the document and its
   body text, and the screen-reader-only utility. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* text selection stays inside the palette (the browser default blue
   shatters the mood the instant a reader copies a verse) */
::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--paper);
}

/* quiet, thin scrollbars on the pages that scroll (poems, faq): recessive
   but perceivable on both grounds */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--paper-dim) 35%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--paper-dim) 35%, transparent); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* one focus ring for every control: an outline, so forced-colors modes
   keep it; a control may add its own colour change, never remove it */
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

html, body { height: 100%; overflow: hidden; background: var(--ink-void); }
body {
  color: var(--paper);
  font-family: var(--font-verse);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-season) var(--ease-breath);
}

/* text for screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}