/* Keep the Life, site styles: box sizing, the page, paragraphs, buttons, focus and redaction bars. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
}

:focus-visible {
  outline: var(--l-2px) solid var(--focus);
  outline-offset: var(--l-2px);
}

kbd {
  font: 500 var(--l-0-75rem) var(--mono);
  border: var(--l-1px) solid var(--rule-2);
  border-bottom-width: var(--l-2px);
  border-radius: var(--l-3px);
  padding: 0 0.3em;
}

.redact {
  display: inline-block;
  background: var(--redact);
  color: transparent;
  border: var(--l-1px) solid var(--redact-edge);
  line-height: 1;
  letter-spacing: -0.05em;
  user-select: none;
}
/* with the Redactions setting on static, a bar plays a burst of static
   when it is clicked or tapped */
.redact-static .redact {
  cursor: pointer;
}

/* text for screen readers only. It stays inline: positioned absolutely, the
   browser would report it as a block, and NVDA starts a new line at every
   block, which broke the reading at each redaction. A box one pixel wide,
   cancelled by its margin, keeps it in the line without moving the text */
.vh {
  display: inline-block;
  width: var(--l-1px);
  height: var(--l-1px);
  margin-right: calc(var(--l-1px) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  vertical-align: baseline;
}

/* translation of a foreign phrase, inline after it */
.tr {
  color: var(--mute);
  font-size: 0.92em;
}