/* pages/song.css
   Split from the original monolithic styles.css.
   Rules kept in original source order to preserve the cascade.
   74 rules. */

.license-selector {
    background: var(--ink-800);
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(4, 8, 18, 0.45);
    border: 1px solid var(--line);
    overflow: hidden;
}

.license-tabs {
    display: flex;
    background-color: var(--ink-850);
    padding: 0.5rem;
    gap: 0.5rem;
}

.license-tab-content {
    padding: 2.5rem;
}

.license-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.license-option:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(240, 172, 63, 0.1);
}

.license-option-info h4 {
    font-size: 1.2rem;
    color: var(--text-hi);
    margin: 0 0 0.5rem;
}

.license-option-info p {
    font-size: 0.9rem;
    color: var(--text-mid);
    margin: 0;
    line-height: 1.6;
}

.license-option-price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.license-option-price span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-hi);
}

.more-details-container {
    grid-column: 1 / -1;
}

.more-details-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    color: var(--text-mid);
    line-height: 1.7;
    font-size: 0.9rem;
    padding-top: 0;
}

.song-page {
    padding-top: 80px;
    min-height: 100vh;
    background-color: var(--ink-800);
}

.song-hero {
    background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
    padding: 4rem 0;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.song-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
    radial-gradient(circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%);
    pointer-events: none;
}

.song-hero-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: center;
}

.song-cover {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.song-info {
    max-width: 800px;
}

.song-info h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.song-info .artist-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.song-info .release-date {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.song-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.share-button {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-hi);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.song-details-section {
    padding: 4rem 0;
    background-color: var(--ink-850);
}

.song-metadata {
    max-width: 800px;
    margin: 4rem auto 0;
}

.metadata-group {
    background: var(--ink-800);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(4, 8, 18, 0.45);
    border: 1px solid var(--line);
}

.metadata-group h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-hi);
}

.metadata-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.metadata-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.metadata-label {
    min-width: 150px;
    font-weight: 600;
    color: var(--text-hi);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metadata-label i {
    width: 20px;
    text-align: center;
    opacity: 0.8;
}

.metadata-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.metadata-tag {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.track-description {
    line-height: 1.8;
    color: var(--text-mid);
}

.license-section {
    max-width: 1000px;
    margin: 0 auto;
}

.license-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-hi);
}

.license-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-mid);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.license-selector {
    background: var(--ink-800);
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(4, 8, 18, 0.45);
    border: 1px solid var(--line);
    overflow: hidden;
}

.license-tabs {
    display: flex;
    background-color: var(--ink-850);
    padding: 0.5rem;
    gap: 0.5rem;
}

.license-tab-content {
    padding: 2.5rem;
}

.license-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.license-option:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(240, 172, 63, 0.1);
}

.license-option-info h4 {
    font-size: 1.2rem;
    color: var(--text-hi);
    margin: 0 0 0.5rem;
}

.license-option-info p {
    font-size: 0.9rem;
    color: var(--text-mid);
    margin: 0;
    line-height: 1.6;
}

.license-option-price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.license-option-price span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-hi);
}

@media (max-width: 1024px) {
    .song-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .song-cover {
        margin: 0 auto;
    }

    .song-actions {
        justify-content: center;
    }

    .metadata-row {
        flex-direction: column;
        gap: 1rem;
    }

    .metadata-label {
        min-width: 0;
    }

}

@media (max-width: 768px) {
    .song-hero {
        padding: 2rem 0;
    }

    .song-cover {
        width: 250px;
        height: 250px;
    }

    .song-info h1 {
        font-size: 2rem;
    }

    .song-info .artist-name {
        font-size: 1.2rem;
    }

    .metadata-group {
        padding: 1.5rem;
    }

    .license-tabs {
        flex-direction: column;
    }

    .license-tab-content {
        padding: 1.5rem;
    }

    .license-option {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .license-option-price {
        text-align: center;
        margin-top: 1rem;
    }

}

.more-details-container {
    grid-column: 1 / -1;
}

.more-details-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    color: var(--text-mid);
    line-height: 1.7;
    font-size: 0.9rem;
    padding-top: 0;
}

@media (max-width: 1024px) {
    .song-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .song-cover {
        margin: 0 auto;
    }

    .song-actions {
        justify-content: center;
    }

    .metadata-row {
        flex-direction: column;
        gap: 1rem;
    }

    .metadata-label {
        min-width: 0;
    }

    .license-option {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }

    .license-option-price {
        text-align: center;
        margin-top: 0;
    }

}

.license-promo {
    background-color: var(--ink-700);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.license-promo p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.5;
}

.license-promo p .fa-star {
    color: var(--gold);
    margin-right: 8px;
}

.license-promo a {
    font-weight: bold;
    text-decoration: underline;
    color: var(--gold);
    margin-left: 10px;
}

.license-promo a:hover {
    text-decoration: none;
}

/* ---- moved inline from song.php ---- */
/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background-color: var(--ink-800);
    margin: 5% auto;
    padding: 30px;
    border: 1px solid var(--text-low);
    width: 80%;
    max-width: 800px;
    border-radius: 10px;
    position: relative;
    animation: slideIn 0.3s;
}
@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.close-btn {
    color: var(--text-low);
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
    color: var(--text-hi);
    text-decoration: none;
    cursor: pointer;
}
.modal-content h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 15px;
}
.agreement-text {
    height: 60vh;
    overflow-y: auto;
    margin-top: 20px;
    padding-top: 10px;
    padding-right: 15px; /* for scrollbar */
    line-height: 1.6;
    white-space: pre-wrap; /* This will preserve line breaks and spaces */
}
.license-option-price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}
.preview-agreement-link {
    color: var(--gold);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}
.preview-agreement-link:hover {
    text-decoration: none;
}
/* Stack price and Add-to-Cart vertically on small screens */
@media (max-width: 768px) {
    .license-option-price {
        flex-direction: column;
        align-items: center;
        margin-left: 0; /* reset auto margin */
        gap: 0.75rem;
    }
}
.license-promo {
    background-color: var(--ink-700);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}
.license-promo p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.5;
}
.license-promo p .fa-star {
    color: var(--gold);
    margin-right: 8px;
}
.license-promo a {
    font-weight: bold;
    text-decoration: underline;
    color: var(--gold);
    margin-left: 10px;
}

/* ============================================================================
   TSMG SKIN — song page
   Ported from Song.dc.html. This is the last layer in the file and wins over
   everything above it, which is the older skin kept for the modals.

   Three bands, as the design has them: a dark hero with the player, a paper
   licence section, then white track details. The category tabs are not in the
   design (it lists every licence flat) but the live catalogue is far bigger
   than the four the mock shows, so they stay and are restyled to match.
   ========================================================================= */

.song-page {
    background: #FFFFFF;
    padding-top: 0;   /* body already offsets the fixed nav */
    min-height: 100vh;
}

/* The design lays this page out on a 1000px measure, narrower than the site
   container, which is what keeps the licence rows readable. */
.song-page .container {
    max-width: 1000px;
}

/* ---- Hero ---------------------------------------------------------------- */

.song-hero {
    background: linear-gradient(180deg, #060D1F 0%, #0A1733 100%);
    border-bottom: none;
    padding: 96px 0 80px;
}

.song-back {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #8FA2C4;
    text-decoration: none;
    transition: color .2s;
}
.song-back:hover { color: #9FBBEA; }

/* Cover art beside the titling.
   Named .song-artwork rather than .song-cover on purpose: .song-cover still has
   rules further up this file from a grid layout that is no longer in the
   markup (width: 250px, margin: 0 auto inside two media queries), and reusing
   the name would inherit them.
   The whole block collapses to nothing when a track has no cover, because the
   img is not rendered at all. */
.song-headline {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 30px;
}
.song-headline-text { min-width: 0; flex: 1; }
/* The wrapper already provides the offset. */
.song-headline .song-titling { margin-top: 0; }

.song-artwork {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
}
.song-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 700px) {
    .song-headline { gap: 20px; }
    .song-artwork { width: 88px; height: 88px; }
}

/* Title and byline share a baseline, and wrap as a unit on narrow screens. */
.song-titling {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.song-hero h1 {
    font-size: clamp(38px, 6vw, 84px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
    color: #F4F6FB;
}
.song-hero .artist-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    color: #9FBBEA;
    margin: 0;
}

.song-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.song-hero-tag {
    font-size: 12px;
    color: #B6C2DB;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 5px 14px;
    border-radius: 999px;
}

/* ---- Player -------------------------------------------------------------- */

.song-player {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

.song-hero .play-button.large {
    position: static;   /* it used to be absolutely placed over the cover art */
    flex-shrink: 0;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: none;
    background: #F4F6FB;
    color: #060D1F;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: none;
    opacity: 1;
    transition: background .2s;
}
.song-hero .play-button.large:hover { background: #9FBBEA; }
/* .play-button i is var(--text-hi) — near-white, from when the button sat over
   dark cover art. On the pale button it was invisible. */
.song-hero .play-button.large i {
    color: #060D1F;
    font-size: 19px;
    margin-left: 3px;   /* optical centring: the triangle is left-heavy */
}
.song-hero .play-button.large .fa-pause { margin-left: 0; }

/* .waveform-time has to stay inside .waveform-container for song.js, so the
   container is the flex row rather than a wrapper around one. */
.song-player .waveform-container {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
/* components.css draws .waveform as a standalone grey box — 120px tall inside
   .song-hero, with a rounded background and a gold sheen on hover. That was
   the old player's placeholder. Wavesurfer paints a canvas in here, so the box
   has to go or it shows through behind the bars at the wrong height. */
.song-player .waveform {
    flex: 1;
    min-width: 0;
    height: 72px;
    background: none;
    border-radius: 0;
}
.song-player .waveform::before { content: none; }
/* In the library the clock floats over the bars as two pills pinned to the
   bottom corners. Here it is a plain readout sitting after the waveform, so
   the absolute positioning and the pill backgrounds both have to be undone. */
.song-player .waveform-time {
    position: static;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    justify-content: flex-start;
    font-size: 15px;
    color: #8FA2C4;
    font-variant-numeric: tabular-nums;
}
.song-player .waveform-time span {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}
.song-player .waveform-time .sep { color: #35548F; }

.song-actions {
    display: flex;
    gap: 14px;
    margin-top: 44px;
    flex-wrap: wrap;
}
.song-actions .license-button.primary {
    background: #F4F6FB;
    color: #060D1F;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 30px;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    transition: background .2s;
}
.song-actions .license-button.primary:hover { background: #9FBBEA; }
.song-actions .share-button {
    background: none;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #F4F6FB;
    font-size: 15px;
    padding: 13px 30px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.song-actions .share-button:hover { border-color: #9FBBEA; color: #9FBBEA; }

/* ---- Licences (paper) ---------------------------------------------------- */

.song-details-section {
    background: #F4F6FB;
    color: #0A1733;
    padding: 110px 0;
}
.song-details-section .license-section h2 {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #0A1733;
    margin: 0 0 14px;
}
.song-details-section .license-section h2 em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: #35548F;
}
.song-details-section .license-subtitle {
    font-size: 16px;
    color: #4A5A7A;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 0 40px;
}

/* The licence area was a dark rounded panel floating on a dark page: an ink
   card, an inset tab bar and 2.5rem of inner padding. On paper it read as a
   navy slab in the middle of the section. Flattened back to the page. */
.song-details-section .license-selector {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.song-details-section .license-tab-content { padding: 0; }

.song-details-section .license-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    background: none;
    border-bottom: none;
    padding: 0;
}
.song-details-section .license-tab {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid #C9D4E8;
    background: transparent;
    color: #4A5A7A;
    cursor: pointer;
    transition: all .2s;
}
.song-details-section .license-tab:hover {
    background: transparent;
    border-color: #35548F;
    color: #35548F;
}
.song-details-section .license-tab.active {
    background: #0A1733;
    border-color: #0A1733;
    color: #F4F6FB;
}

.song-details-section .license-panel {
    display: none;
    flex-direction: column;
    gap: 20px;
}
.song-details-section .license-panel.active { display: flex; }

.song-details-section .license-option {
    display: block;
    background: #FFFFFF;
    border: 1px solid #DDE3EE;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
}
.song-details-section .license-option:hover {
    border-color: #C9D4E8;
    transform: none;
    box-shadow: none;
}

/* Upsell strip: inside the card, above the row, as in the design. */
.song-details-section .license-promo {
    background: #0A1733;
    color: #B6C2DB;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    padding: 10px 32px;
    margin: 0;
    border: none;
    border-radius: 0;
}
.song-details-section .license-promo strong { color: #F4F6FB; font-weight: 600; }
.song-details-section .license-promo a {
    color: #9FBBEA;
    border-bottom: 1px solid #9FBBEA;
    text-decoration: none;
    white-space: nowrap;
}

.license-option-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 30px 32px;
}
.song-details-section .license-option-info h4 {
    font-size: 19px;
    font-weight: 600;
    color: #0A1733;
    margin: 0 0 8px;
}
.song-details-section .license-option-info p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4A5A7A;
    max-width: 58ch;
    margin: 0;
}
.song-details-section .license-option-price {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    border: none;
}
.song-details-section .license-option-price > span {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 34px;
    font-weight: 400;
    color: #0A1733;
}
.song-details-section .license-option-price button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 26px;
    border-radius: 999px;
    border: none;
    background: #0A1733;
    color: #F4F6FB;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.song-details-section .license-option-price button:hover { background: #35548F; }
.song-details-section .license-option-price button:disabled {
    background: transparent;
    color: #8FA2C4;
    border: 1px solid #DDE3EE;
    cursor: default;
}

/* Owned / in-cart states. Both are outlined rather than solid, so a card you
   cannot act on does not compete with one you can. */
.song-details-section .license-owned-btn,
.song-details-section .license-incart-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 25px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.song-details-section .license-owned-btn {
    background: transparent;
    color: #35548F;
    border: 1px solid #35548F;
}
.song-details-section .license-owned-btn:hover { background: #35548F; color: #F4F6FB; }
.song-details-section .license-incart-btn {
    background: transparent;
    color: #0A1733;
    border: 1px solid #0A1733;
}
.song-details-section .license-incart-btn:hover { background: #0A1733; color: #F4F6FB; }

.song-details-section .license-note {
    padding: 0 32px 22px;
    margin-top: -14px;
    font-size: 12.5px;
    color: #8FA2C4;
}
.song-details-section .license-preview-row { margin-top: 15px; }
.song-details-section .license-empty { font-size: 15px; color: #4A5A7A; }

/* Further explanation, folded into the bottom of the card. */
.song-details-section .more-details-container {
    border-top: 1px solid #E4E8F0;
    margin: 0;
    padding: 0;
}
.song-details-section .more-details-toggle {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 14px 32px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #4A5A7A;
    cursor: pointer;
    transition: color .2s;
}
.song-details-section .more-details-toggle:hover { color: #35548F; }
.song-details-section .more-details-toggle i { transition: transform .2s; }
.song-details-section .more-details-container.active .more-details-toggle i { transform: rotate(180deg); }
.song-details-section .more-details-content {
    padding: 0 32px 26px;
    font-size: 14px;
    line-height: 1.7;
    color: #4A5A7A;
    background: none;
    border: none;
}
.song-details-section .preview-agreement-link {
    color: #35548F;
    border-bottom: 1px solid #C9D4E8;
    text-decoration: none;
    font-size: 13.5px;
}
.song-details-section .preview-agreement-link:hover { border-color: #35548F; }

/* ---- Track details (white) ----------------------------------------------- */

.song-meta-section {
    background: #FFFFFF;
    color: #0A1733;
    padding: 100px 0 120px;
    border-top: 1px solid #E4E8F0;
}
.song-meta-section h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #0A1733;
    margin: 0 0 50px;
}
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
}
.song-meta-section .metadata-group {
    border: none;
    padding: 0;
    background: none;
}
.song-meta-section .metadata-label {
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #8FA2C4;
    margin-bottom: 14px;
}
.song-meta-section .metadata-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.song-meta-section .metadata-tag {
    font-size: 13px;
    color: #35548F;
    background: transparent;
    border: 1px solid #C9D4E8;
    padding: 5px 14px;
    border-radius: 999px;
}

.song-meta-section .track-description {
    margin-top: 56px;
    max-width: 68ch;
    color: #4A5A7A;
    background: none;
    border: none;
    padding: 0;
}
.song-meta-section .track-description p {
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0;
}

.song-nav {
    margin-top: 80px;
    border-top: 1px solid #E4E8F0;
    padding-top: 36px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
}
.song-nav a {
    font-size: 15px;
    color: #4A5A7A;
    text-decoration: none;
    transition: color .2s;
}
.song-nav a:hover { color: #35548F; }
.song-nav .song-nav-all {
    font-weight: 500;
    color: #0A1733;
    border-bottom: 1px solid #0A1733;
    padding-bottom: 2px;
}

@media (max-width: 900px) {
    .metadata-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .song-hero { padding: 64px 0 56px; }
    .song-titling { gap: 10px; }
    .song-player { gap: 16px; }
    .song-hero .play-button.large { width: 58px; height: 58px; font-size: 16px; }
    .song-player .waveform-container { gap: 14px; }
    /* The clock is the first thing to go: the bars need the width more. */
    .song-player .waveform-time { display: none; }
    .song-details-section { padding: 64px 0; }
    .license-option-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }
    .song-details-section .license-option-price { justify-content: space-between; }
    .song-details-section .license-promo { padding: 10px 24px; }
    .song-details-section .more-details-toggle { padding: 14px 24px; }
    .song-details-section .more-details-content { padding: 0 24px 22px; }
    .song-meta-section { padding: 64px 0 80px; }
    .metadata-grid { grid-template-columns: 1fr; gap: 28px; }
    .song-nav { flex-direction: column; align-items: flex-start; gap: 14px; }
}