:root { color-scheme: light; background: #fff; color: #000; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; }
a, a:visited { color: #000; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.timeline-page { --date-width: 88px; --rail-width: 16px; --gap: 16px; width: min(100%, 820px); margin: 0 auto; padding: 32px; }
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: calc(var(--date-width) + var(--gap) + var(--rail-width) / 2); top: 10px; bottom: 32px; width: 1px; background: #000; }
.timeline-entry { position: relative; display: grid; grid-template-columns: var(--date-width) var(--rail-width) minmax(0, 1fr); gap: var(--gap); padding-bottom: 32px; }
.entry-date { padding-top: 3px; text-align: right; font-size: 10px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.entry-date span { display: block; }
.entry-dot { z-index: 1; justify-self: center; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #000; }
.entry-body { min-width: 0; }
.entry-copy { margin: 0 0 12px; max-width: 65ch; }
figure { min-width: 0; margin: 0; }
.media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 212px; max-width: 100%; }
.media-pair img { display: block; width: 100%; height: auto; }
.cover-pair img { aspect-ratio: 1; object-fit: cover; }
figcaption { margin-top: 6px; font-size: 10px; }
figcaption strong { font-weight: 400; }
.lyrics-image { width: 560px; max-width: 100%; }
.lyrics-image > a, .lyrics-image img { display: block; width: 100%; height: auto; }
.song-figure { width: 160px; max-width: 100%; }
.purchase-copy { margin: 0 0 8px; }
.sale-price { margin: 0 0 8px; font-size: 13px; }
.sale-dates { margin: 0 0 8px; font-size: 11px; }
.nft-link { margin: 0; font-size: 11px; }
@media (max-width: 680px) {
  :root { font-size: 12px; }
  .timeline-page { --date-width: 64px; --rail-width: 16px; --gap: 12px; padding: 24px 16px; }
  .timeline-entry { padding-bottom: 28px; }
  .media-pair { gap: 10px; width: 210px; }
}
@media (max-width: 360px) { .timeline-page { --date-width: 52px; --gap: 8px; } }

#tunes .media-pair, #covers .media-pair { width: 172px; gap: 12px; }
#tunes figcaption, #covers figcaption { font-size: 9px; }

.page-header { padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid #000; }
.page-header h1 { margin: 0; font: inherit; font-size: 20px; font-weight: 400; }
.page-footer-line { margin: 32px 0 0; border: 0; border-top: 1px solid #000; }
.lyrics-box { position: relative; border: 1px solid #000; padding: 48px 24px 24px; }
.lyrics-replay { position: absolute; top: 12px; right: 12px; padding: 0; border: 0; background: #fff; color: #000; font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lyrics-text { margin: 0; font: 15px/1.75 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.lyrics-character { opacity: 0; transition: opacity 80ms linear; }
.lyrics-character.is-visible { opacity: 1; }
.launch-tweet { width: 360px; max-width: 100%; border: 1px solid #000; padding: 12px; }
.launch-tweet img { display: block; width: 100%; height: auto; }
.launch-tweet + .launch-tweet { margin-top: 12px; }
@media (max-width: 680px) { .lyrics-box { padding: 40px 16px 20px; } .lyrics-text { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .lyrics-character { transition: none; } }

.timeline-opener { margin: 0 0 32px; max-width: 65ch; }