.listening-room-page { background: var(--paper); }
.listening-room-page a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.skip-link { position: absolute; z-index: 20; left: 20px; top: -100px; padding: 12px 18px; background: var(--surface); }
.skip-link:focus { top: 10px; }
.listening-intro { padding: 38px 0 30px; }
.listening-intro h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.035em; }
.listening-intro h1 span { display: inline-block; color: var(--muted); font-size: .55em; letter-spacing: -.02em; }
.listening-intro > p { max-width: 720px; margin: 14px 0 0; font-size: 1.0625rem; color: var(--muted); line-height: 1.55; }
.playlist-label { margin: 0 0 12px; font-size: .875rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-dark); }
.playlist-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; box-shadow: 0 14px 32px #182b3214; }
.reference-collection { display: grid; grid-template-columns: 320px minmax(0,1fr); grid-template-rows: auto auto auto 1fr; gap: 0 44px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; scroll-margin-top: 24px; }
.reference-collection > .playlist-cover { grid-row: 1 / 5; }
.reference-heading h2 { max-width: 540px; margin: 0; font: 500 clamp(32px, 4vw, 52px)/1.05 var(--serif); letter-spacing: -.03em; }
.reference-description { max-width: 590px; margin: 18px 0 23px; font-size: 1.0625rem; line-height: 1.65; }
.playlist-services { display: flex; flex-wrap: wrap; gap: 10px; }
.playlist-services a { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--blue-dark); border-radius: 7px; background: var(--surface); color: var(--blue-dark); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.playlist-services a:hover { color: var(--surface); background: var(--blue-dark); }
.playlist-services a span { font-size: 1.125rem; }
.session-permalink { display: inline-flex; align-items: center; gap: 9px; justify-self: start; align-self: start; min-height: 44px; padding: 10px 0; margin-top: 9px; color: var(--muted); text-underline-offset: 4px; font-size: .875rem; }
.session-permalink span { text-decoration: none; }
.listening-sessions { margin-top: 62px; padding-top: 44px; padding-bottom: 70px; border-top: 1px solid var(--line-strong); }
.sessions-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 55px; align-items: end; padding-bottom: 35px; }
.sessions-intro .playlist-label { grid-column: 1 / -1; }
.sessions-intro h2 { margin: 0; font: 500 clamp(36px, 4.3vw, 54px)/1.05 var(--serif); letter-spacing: -.035em; }
.sessions-intro > p:last-child { margin: 0; max-width: 540px; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; }
.session { min-width: 0; scroll-margin-top: 24px; }
.session-featured { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 44px; align-items: center; padding: 32px; border-radius: 18px; background: #193c50; color: #fffef9; }
.session h3 { margin: 0 0 14px; font: 500 clamp(30px, 3vw, 40px)/1.1 var(--serif); letter-spacing: -.025em; }
.session-featured h3 { font-size: clamp(38px, 4.4vw, 57px); }
.session-featured .playlist-label { color: #c2dbe8; }
.session-meta { margin: 0 0 18px; color: var(--blue-dark); font-size: .875rem; font-weight: 650; }
.session-meta span { padding-inline: 5px; }
.session-description { margin: 0 0 20px; font-size: 1rem; line-height: 1.65; }
.reference-track { margin: 0 0 22px; font-size: .9375rem; line-height: 1.5; }
.reference-track span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .875rem; }
.session-featured .session-meta, .session-featured .reference-track span, .session-featured .session-permalink { color: #c2dbe8; }
.session-featured .playlist-services a { border-color: #c2dbe8; background: transparent; color: #fffef9; }
.session-featured .playlist-services a:hover { color: #193c50; background: #fffef9; }
.session-featured a:focus-visible { outline-color: #fffef9; }
.session-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 54px; }
.session-grid .session { display: flex; flex-direction: column; }
.session-grid .session-copy { display: flex; flex: 1; flex-direction: column; padding-top: 25px; }
.session-grid .playlist-services { margin-top: auto; gap: 8px; }
.session-grid .playlist-services a { flex: 1; gap: 6px; padding-inline: 10px; font-size: .875rem; white-space: nowrap; }
.session-grid .playlist-services a span { display: none; }
@media (max-width: 1000px) {
  .reference-collection { grid-template-columns: 240px minmax(0,1fr); gap: 0 28px; padding: 25px; }
  .session-featured { grid-template-columns: 1fr 1fr; gap: 28px; padding: 25px; }
  .session-grid { gap: 25px; }
  .session-grid .playlist-services { flex-direction: column; }
  .session-grid .playlist-services a span { display: inline; }
}
@media (max-width: 760px) {
  .listening-room-page .footer-inner { padding-block: 25px; flex-direction: column; align-items: flex-start; }
  .sessions-intro { grid-template-columns: 1fr; gap: 16px; }
  .sessions-intro .playlist-label { margin: 0; }
  .session-featured { grid-template-columns: 1fr; gap: 26px; }
  .session-featured .playlist-cover { max-width: 440px; margin-inline: auto; }
  .session-grid { grid-template-columns: 1fr; gap: 38px; }
  .session-grid .session { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .session-grid .session-copy { padding-top: 0; }
}
@media (max-width: 600px) {
  .listening-intro { padding: 25px 2px 24px; }
  .listening-intro h1 { font-size: 2rem; }
  .listening-intro h1 span { display: block; margin-top: 7px; font-size: 1.125rem; }
  .listening-intro > p { margin-top: 12px; font-size: 1rem; }
  .reference-collection { grid-template-columns: 128px minmax(0,1fr); gap: 18px; padding: 16px; border-radius: 12px; }
  .reference-collection > .playlist-cover { grid-row: auto; }
  .reference-heading { align-self: center; }
  .reference-heading h2 { font-size: clamp(25px, 7vw, 34px); }
  .reference-heading .playlist-label { font-size: .75rem; letter-spacing: .06em; line-height: 1.4; margin-bottom: 9px; }
  .reference-description, .reference-collection > .playlist-services, .reference-collection > .session-permalink { grid-column: 1 / -1; }
  .reference-description { margin: 0; font-size: 1rem; }
  .playlist-services { gap: 8px; }
  .playlist-services a { flex: 1; justify-content: center; gap: 5px; padding-inline: 10px; font-size: .875rem; white-space: nowrap; }
  .playlist-services a span { display: none; }
  .reference-collection > .session-permalink { margin-top: -9px; margin-bottom: -6px; }
  .listening-sessions { margin-top: 36px; padding-top: 30px; padding-bottom: 45px; }
  .sessions-intro { padding: 0 2px 27px; }
  .sessions-intro > p:last-child { font-size: 1rem; }
  .session-featured { padding: 16px; border-radius: 12px; }
  .session-featured h3 { font-size: 2.5rem; }
  .session-featured .session-copy { padding-inline: 4px; }
  .session-grid { margin-top: 36px; gap: 34px; padding-inline: 16px; }
  .session-grid .session { display: block; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
  .session-grid .session:last-child { border-bottom: 0; }
  .session-grid .session-copy { padding-top: 22px; }
  .session-grid .playlist-services { flex-direction: row; }
  .session-grid .playlist-services a span { display: none; }
}
@media (max-width: 359px) {
  .reference-collection { grid-template-columns: 100px minmax(0,1fr); gap: 14px; padding: 12px; }
  .reference-heading h2 { font-size: 1.5rem; }
  .playlist-services a { padding-inline: 7px; }
}