.brand { gap: 10px; letter-spacing: 0; white-space: nowrap; }
.brand-icon { width: 38px; height: 38px; flex: none; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: 2px; }
.brand-tale { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -.055em; }
.brand-amp { color: var(--accent); font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-style: italic; margin: 0 1px; }
.brand-theory { font-family: 'DM Sans', Arial, sans-serif; font-size: .78em; font-weight: 700; letter-spacing: -.055em; }
@media (max-width: 560px) {
  .brand-icon { width: 34px; height: 34px; }
  .library-source span { display: none; }
}

.cover img {
  height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: 0 6px 16px #22302d25;
}

.share-button { min-height: 36px; padding: 0 11px; }
.share-button span[aria-hidden] { font-size: 19px; line-height: 1; }
@media (max-width: 560px) {
  .share-button { width: 36px; padding: 0; }
  .share-button span:last-child, .fullscreen-button span { display: none; }
  .fullscreen-button { width: 36px; padding: 0; }
  .notes-toggle { font-size: 0; }
  .notes-toggle svg { display: block; }
}

.page-loading {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: min(280px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 18px 22px;
  text-align: center;
  line-height: 1.4;
}

.loading-spinner {
  width: 25px;
  height: 25px;
  border: 3px solid #dce6de;
  border-top-color: #56846a;
  border-radius: 50%;
  animation: loading-spin .8s linear infinite;
}

.page-loading-percent { font-size: 11px; color: #496d58; }
.page-loading-track { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 99px; background: #e4ebe5; }
.page-loading-track > span { display: block; height: 100%; border-radius: inherit; background: #6ea487; transition: width .2s ease; }
.loading-indeterminate .page-loading-track > span { animation: loading-slide 1.2s ease-in-out infinite; }

@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner, .loading-indeterminate .page-loading-track > span { animation: none; }
}