/* Book One reader: isolated readable colour system */
:root { color-scheme: light dark; }

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.reader-shell,
.reader-sidebar,
.reader-article,
.reader-copy,
.reader-copy p,
.reader-nav,
.reader-bottom-nav {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  html,
  body,
  .reader-shell,
  .reader-sidebar,
  .reader-article {
    background: #ffffff !important;
    color: #101820 !important;
  }

  .reader-article h2,
  .reader-article .reader-count,
  .reader-sidebar h1,
  .reader-sidebar label,
  .reader-sidebar .reader-kicker,
  .reader-copy,
  .reader-copy p,
  .reader-nav a,
  .reader-bottom-nav a {
    color: #101820 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .reader-sidebar select {
    background: #ffffff !important;
    color: #101820 !important;
    border-color: rgba(16, 24, 32, .22) !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  html,
  body,
  .reader-shell,
  .reader-sidebar,
  .reader-article {
    background: #071923 !important;
    color: #f5f7f8 !important;
  }

  .reader-article h2,
  .reader-article .reader-count,
  .reader-sidebar h1,
  .reader-sidebar label,
  .reader-sidebar .reader-kicker,
  .reader-copy,
  .reader-copy p,
  .reader-nav a,
  .reader-bottom-nav a {
    color: #f5f7f8 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
  }

  .reader-sidebar select {
    background: #0c2531 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .22) !important;
  }
}

.reader-shell {
  width: 100% !important;
  min-height: calc(100vh - 80px);
  overflow-x: clip !important;
}

.reader-sidebar select {
  width: 100% !important;
  max-width: 100% !important;
}

.reader-copy {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.reader-copy p {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: clamp(1.08rem, 2.2vw, 1.22rem) !important;
  line-height: 1.82 !important;
  max-width: 72ch;
  margin: 0 0 1.35em !important;
  overflow-wrap: break-word;
}

.reader-article h2 {
  max-width: 100% !important;
  line-height: .98 !important;
  overflow-wrap: break-word;
  word-break: normal;
}

.reader-nav a,
.reader-bottom-nav a {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .reader-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 28px 20px 56px !important;
    margin: 0 !important;
  }

  .reader-sidebar {
    width: 100% !important;
    padding: 0 0 28px !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .reader-article {
    width: 100% !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
  }

  .reader-article h2 {
    width: 100% !important;
    font-size: clamp(2.45rem, 12vw, 4.2rem) !important;
    overflow-wrap: break-word !important;
  }

  .reader-copy p {
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
  }

  .reader-nav,
  .reader-bottom-nav {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}