* { box-sizing: border-box; }
body {
  min-height: 100vh; margin: 0; padding: 36px 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: Arial, Helvetica, sans-serif; color: #302b29;
  background: #fffaf7;
}
.page {
  width: 100%; max-width: 720px; padding: 24px; text-align: center;
  background: #fff; border: 1px solid #eadfd8; border-radius: 16px;
  box-shadow: 0 6px 24px rgba(48, 43, 41, .13);
}
.cover { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 10px; }
h1 { margin: 22px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.2; color: #641a2e; }
.byline { margin: 0 0 22px; color: #746a65; font-size: 17px; }
audio { display: block; width: 100%; margin: 0 auto 24px; }
.track-list { list-style: none; margin: 26px auto 20px; padding: 0; max-width: 560px; text-align: left; counter-reset: tracks; }
.track-list li { counter-increment: tracks; margin: 10px 0; }
.track-list a { display: flex; gap: 12px; align-items: center; padding: 13px 15px; color: #511528; background: #fff7f3; border: 1px solid #e9cbc2; border-radius: 9px; font-weight: 700; text-decoration: none; }
.track-list a::before { content: counter(tracks); display: grid; place-items: center; flex: 0 0 32px; height: 32px; color: #fff; background: #a51f42; border-radius: 50%; }
.track-list a:hover, .track-list a:focus-visible { background: #f9e5df; }
.subtitle { display: block; margin-top: 3px; font-size: .9em; font-weight: 400; }
.button { display: inline-block; padding: 11px 20px; color: #fff; background: #8b2942; border-radius: 7px; font-size: 15px; font-weight: 700; text-decoration: none; }
.button:hover, .button:focus-visible { background: #651c30; }
.copyright { margin: 22px 0 0; color: #746a65; font-size: 13px; }
@media (max-width: 600px) { body { padding: 16px 12px; align-items: flex-start; } .page { padding: 14px; } h1 { font-size: 26px; } }