:root {
    color-scheme: dark;
    --gutter: 1.25rem;
    --bg: #0a0b0c;
    --panel: #131517;
    --ink: #f2f0ea;
    --muted: #9a9a97;
    --line: rgba(255, 255, 255, 0.14);
    --signal: #b8ff32;
    --signal-soft: rgba(184, 255, 50, 0.12);
}
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    padding: 2.5rem var(--gutter) 3rem;
    line-height: 1.5;
    text-align: center;
    background: var(--bg);
    color: var(--ink);
}
main {
    max-width: 28rem;
    margin: 0 auto;
}
.artwork {
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.75rem;
    margin: 0 auto 1.5rem;
    display: block;
}
.artwork-placeholder {
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    margin: 0 auto 1.5rem;
    background: var(--panel);
}
h1 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
}
.artist {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1rem;
}
.description {
    margin: 0 0 2rem;
    font-size: 0.95rem;
    color: var(--muted);
}
.destinations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.destination-link, .hero-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--panel);
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.destination-link:hover, .hero-link:hover {
    transform: translateY(-1px);
}

/* Icon box stays a fixed size regardless of whether a platform has an
   icon, so rows never shift depending on content. */
.platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ink);
}
.platform-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.destination-label {
    min-width: 0;
    overflow-wrap: break-word;
}
.hero-link {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    border-color: var(--signal);
}

/*
 * Official platform brand colours, applied to the icon glyph only (the
 * SVGs themselves stay fill="currentColor" -- colour is layered on here
 * in CSS, never baked into the asset). Button background/border/text
 * stay on the shared dark palette above so the page reads as one
 * cohesive system rather than a row of unrelated brand chips.
 * Sources: see the "Brand colors verified" note in the PR/commit this
 * shipped with -- Simple Icons' curated dataset, cross-referenced
 * against each platform's own press kit/brand guidelines where one is
 * published. Apple Music and Amazon Music do not publish an official
 * hex value; both use the best-corroborated community-sourced value.
 * TIDAL intentionally keeps the default white/ink colour above -- that
 * is TIDAL's own correct high-contrast brand treatment, not an omission.
 * Instagram (#E4405F) and Facebook (#1877F2) are each brand's own
 * documented primary accent colour.
 */
.platform-icon--spotify { color: #1DB954; }
.platform-icon--beatport { color: #01FF95; }
.platform-icon--apple-music { color: #FA243C; }
.platform-icon--soundcloud { color: #FF5500; }
.platform-icon--deezer { color: #A238FF; }
.platform-icon--instagram { color: #E4405F; }
.platform-icon--facebook { color: #1877F2; }
.platform-icon--youtube,
.platform-icon--youtube-music { color: #FF0000; }

/*
 * Amazon Music has no verified icon-only official asset (see
 * public/icons/README.md) -- forcing its wide wordmark into this
 * square icon slot would distort it, so there is deliberately no SVG
 * glyph here. Its destination label stays white/ink, exactly like
 * every other platform's label -- brand colour is confined to a
 * small centred accent dot inside the same fixed-size icon box every
 * other destination uses, so the row stays aligned with the rest of
 * the list and the missing icon reads as an intentional, restrained
 * treatment rather than a rendering bug.
 */
.platform-icon--amazon-music {
    position: relative;
}
.platform-icon--amazon-music::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #00A8E1;
}

.destination-link:hover .platform-icon--spotify,
.destination-link:focus-visible .platform-icon--spotify,
.hero-link:hover .platform-icon--spotify,
.hero-link:focus-visible .platform-icon--spotify { filter: drop-shadow(0 0 6px rgba(29, 185, 84, 0.65)); }

.destination-link:hover .platform-icon--beatport,
.destination-link:focus-visible .platform-icon--beatport,
.hero-link:hover .platform-icon--beatport,
.hero-link:focus-visible .platform-icon--beatport { filter: drop-shadow(0 0 6px rgba(1, 255, 149, 0.65)); }

.destination-link:hover .platform-icon--apple-music,
.destination-link:focus-visible .platform-icon--apple-music,
.hero-link:hover .platform-icon--apple-music,
.hero-link:focus-visible .platform-icon--apple-music { filter: drop-shadow(0 0 6px rgba(250, 36, 60, 0.65)); }

.destination-link:hover .platform-icon--soundcloud,
.destination-link:focus-visible .platform-icon--soundcloud,
.hero-link:hover .platform-icon--soundcloud,
.hero-link:focus-visible .platform-icon--soundcloud { filter: drop-shadow(0 0 6px rgba(255, 85, 0, 0.65)); }

.destination-link:hover .platform-icon--deezer,
.destination-link:focus-visible .platform-icon--deezer,
.hero-link:hover .platform-icon--deezer,
.hero-link:focus-visible .platform-icon--deezer { filter: drop-shadow(0 0 6px rgba(162, 56, 255, 0.65)); }

.destination-link:hover .platform-icon--instagram,
.destination-link:focus-visible .platform-icon--instagram,
.hero-link:hover .platform-icon--instagram,
.hero-link:focus-visible .platform-icon--instagram { filter: drop-shadow(0 0 6px rgba(228, 64, 95, 0.65)); }

.destination-link:hover .platform-icon--facebook,
.destination-link:focus-visible .platform-icon--facebook,
.hero-link:hover .platform-icon--facebook,
.hero-link:focus-visible .platform-icon--facebook { filter: drop-shadow(0 0 6px rgba(24, 119, 242, 0.65)); }

.destination-link:hover .platform-icon--youtube,
.destination-link:focus-visible .platform-icon--youtube,
.destination-link:hover .platform-icon--youtube-music,
.destination-link:focus-visible .platform-icon--youtube-music,
.hero-link:hover .platform-icon--youtube,
.hero-link:focus-visible .platform-icon--youtube,
.hero-link:hover .platform-icon--youtube-music,
.hero-link:focus-visible .platform-icon--youtube-music { filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.65)); }

.destination-link:hover .platform-icon--amazon-music::after,
.destination-link:focus-visible .platform-icon--amazon-music::after,
.hero-link:hover .platform-icon--amazon-music::after,
.hero-link:focus-visible .platform-icon--amazon-music::after { box-shadow: 0 0 6px 1px rgba(0, 168, 225, 0.65); }

.destination-link:hover, .destination-link:focus-visible,
.hero-link:hover, .hero-link:focus-visible {
    border-color: var(--signal);
    background: var(--signal-soft);
}

a:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
}
.empty-state {
    color: var(--muted);
    font-size: 0.95rem;
}
.brand {
    margin-top: 3rem;
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .destination-link:hover, .hero-link:hover { transform: none; }
}

@media (max-width: 480px) {
    body { padding-top: 1.75rem; }
    .artwork, .artwork-placeholder { max-width: 15rem; }
}