/* One-note-at-a-time Bytes & Pieces presentation. */
.bp-note-frame {
  min-height: clamp(22rem, 54vh, 34rem);
  display: flex;
  align-items: stretch;
}

.bp-notes {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Without JavaScript, a hash opens its note and the final (newest) note is the default. */
.bp-note {
  display: none;
  width: 100%;
  scroll-margin-top: 5rem;
}

.bp-note:target {
  display: block;
}

.bp-notes:not(:has(.bp-note:target)) .bp-note:last-child {
  display: block;
}

.bp-note h1 {
  margin-bottom: var(--space-3);
  color: var(--pb-heading);
}

.bp-note p {
  max-width: 72ch;
  margin-bottom: 0;
  white-space: pre-line;
}

.bp-note-pagination {
  min-height: 48px;
}

.bp-note-pagination .pb-arrow {
  padding: 0;
  background: transparent;
  color: var(--pb-body);
  cursor: pointer;
}

.bp-note-pagination .pb-arrow:hover:not(.is-disabled) {
  border-color: var(--pb-accent);
  color: var(--pb-accent);
}

.bp-note-pagination .pb-arrow.is-disabled {
  color: var(--pb-faint);
  cursor: default;
  opacity: 0.55;
}

.bp-note-pagination .pb-dot {
  border-radius: 50%;
}

@media (max-width: 640px) {
  .bp-note-frame {
    min-height: clamp(28rem, 68vh, 38rem);
  }

  .bp-notes {
    align-items: flex-start;
  }

  .bp-note h1 {
    font-size: clamp(2.2rem, 12vw, 3.35rem);
    text-align: center;
  }
}