/* Small, documented improvements layered after YOUR existing style.css.
 * About widths remain in about-layout.css; gallery labels remain hidden by
 * gallery-clean.css. This file deliberately inherits your selected text size.
 */

/* Show blank lines typed into the biography instead of flattening its text. */
#about-copy {
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* Keyboard users can jump over the repeated navigation to the page content. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 12px 18px;
  background: #efeee9;
  color: #0a0a0a;
  transform: translateY(-160%);
  font-weight: 700;
}
.skip-link:focus {
  transform: none;
}
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.page-status {
  margin: 20px;
  padding: 15px;
  border: 1px solid currentColor;
}

/* A visible Pause control complements hover, keyboard and reduced-motion support. */
.ticker {
  position: relative;
}
.ticker-control {
  position: absolute;
  right: 6px;
  top: 5px;
  z-index: 2;
  border: 1px solid #777;
  background: #efeee9;
  color: #0a0a0a;
  padding: 5px 8px;
  font:
    700 0.7rem Arial,
    sans-serif;
  cursor: pointer;
}
.ticker[data-paused="true"] .ticker-track {
  animation-play-state: paused;
}
.cover-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cover-pause {
  border: 1px solid #777;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}

/* Generic loading/error states inherit the same simple site typography. */
.empty-state {
  padding: 25px 0;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-control {
    display: none;
  }
}

/* Long record titles can wrap naturally; the single word Forgiveness stays whole. */
#cover-title {
  white-space: normal;
  overflow-wrap: normal;
}
#cover-title.keep-word {
  white-space: nowrap;
}

/* Records heading otherwise exceeds a narrow phone when Impact is unavailable. */
@media (max-width: 420px) {
  .covers-section .section-top h2 {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }
}