/* The tribute uses the existing register's palette, type and spacing tokens. */
.tribute-page { margin: 0; }
.tribute-header { padding-top: var(--sp-5); }
.tribute-header .site-nav { margin-bottom: 0; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.tribute-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-7); align-items: center; padding-block: var(--sp-8); }
.tribute-hero h1 { font-family: var(--display); font-weight: var(--fw-regular); font-size: clamp(2.5rem, 4.5vw, 3.8rem); line-height: 1.1; margin: var(--sp-3) 0 var(--sp-5); }
.tribute-hero h1 em { color: var(--accent); font-weight: var(--fw-regular); }
.hero-intro { font-size: var(--fs-lg); color: var(--ink-soft); max-width: var(--player-max-width); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.hero-actions a:not(.home-primary) { display: inline-flex; align-items: center; min-height: var(--control-h); }
.home-primary { background: var(--accent); color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; }
.hero-portrait { margin: 0; display: flex; justify-content: center; }
.hero-portrait img { display: block; width: 100%; max-width: 19rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: 0 4px 20px -8px rgba(27, 34, 32, 0.2); }
.tribute-quote { border-left: 1px solid var(--rule-strong); padding: var(--sp-5) 0 var(--sp-5) var(--sp-6); }
.tribute-quote blockquote { margin: var(--sp-5) 0; font-family: var(--display); font-size: var(--fs-2xl); line-height: 1.25; color: var(--accent); }
.quote-credit { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-soft); }
.tribute-page h2 { font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fs-2xl); line-height: 1.25; margin: 0 0 var(--sp-4); }
.listening-section { padding-block: var(--sp-6) var(--sp-8); border-block: 1px solid var(--rule); scroll-margin-top: var(--sp-5); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-6); margin-bottom: var(--sp-5); }
.section-heading > p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.listening-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.listening-card { display: flex; flex-direction: column; padding: var(--sp-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.invitation { font-size: var(--fs-xs); color: var(--brass); margin: 0 0 var(--sp-4); }
.listening-card h3 { font-size: var(--fs-xl); font-family: var(--display); font-weight: var(--fw-medium); line-height: 1.3; margin: 0 0 var(--sp-2); }
.track-meta { color: var(--accent); margin: 0 0 var(--sp-3); }
.track-context { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 var(--sp-5); }
.listening-actions { margin-top: auto; display: flex; flex-direction: column; align-items: start; gap: var(--sp-3); font-size: var(--fs-sm); }
.listening-actions a:not(.listen-link) { display: inline-flex; align-items: center; min-height: 2rem; }
.listen-link { display: inline-flex; align-items: center; text-decoration: none; background: var(--accent-soft); color: var(--accent); gap: var(--sp-1); }
.provider { font-weight: var(--fw-regular); }
.tribute-note { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-8); padding-block: var(--sp-8); }
.note-body { font-size: var(--fs-lg); line-height: 1.75; }
.note-body > p { margin: 0 0 var(--sp-5); }
.note-body h3 { font-family: var(--display); font-size: var(--fs-xl); font-weight: var(--fw-medium); margin: var(--sp-6) 0 var(--sp-3); }
.note-body sup { margin-left: var(--sp-1); }
.explore-section { padding-bottom: var(--sp-7); }
.explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.explore-link { display: grid; gap: var(--sp-3); padding: var(--sp-5) 0; border-top: 1px solid var(--rule-strong); text-decoration: none; }
.explore-link strong { font-size: var(--fs-xl); font-weight: var(--fw-medium); }
.explore-link > span:last-child { color: var(--ink-soft); }
.explore-link:hover strong { text-decoration: underline; }
.tribute-sources { border-top: 1px solid var(--rule); padding-block: var(--sp-6); font-size: var(--fs-sm); color: var(--ink-soft); }
.tribute-sources h2 { font-family: var(--body); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.tribute-sources ol { padding-left: var(--sp-5); }
.tribute-sources li { margin-bottom: var(--sp-3); }
.skip-link { position: absolute; left: var(--sp-4); top: var(--sp-4); transform: translateY(-200%); background: var(--sheet); padding: var(--sp-3); z-index: 20; }
.skip-link:focus { transform: none; }
@media (max-width: 50rem) {
  .tribute-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-6); }
  .tribute-quote { padding-block: var(--sp-2); }
  .tribute-quote blockquote { font-size: var(--fs-xl); }
  .section-heading { display: block; }
  .listening-grid { grid-template-columns: 1fr; }
  .tribute-note { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-6); }
  .note-heading br { display: none; }
  .explore-grid { grid-template-columns: 1fr; }
}