/* Site-wide touches, loaded on every page right after fonts.css. One file so
   every page gets them the same way; selectors start with `html` so they win
   over the per-page <style> blocks without editing them. */

/* Pixel dots: the colour markers on rows are tiny squares, not circles. */
html .link-dot,
html .release-dot,
html .credit-dot,
html .press-dot {
    border-radius: 1px;
}

/* Platform dot colours, one source for every page. A page's own .d-* rule
   loses to these, so a platform can never show two different colours. */
html .d-spotify { background: #1ed760; }
html .d-apple { background: #fc3c4c; }
html .d-tidal { background: #e8e8e8; }
html .d-deezer { background: #a238ff; }
html .d-soundcloud { background: #ff5500; }
html .d-youtube { background: #ff0033; }
html .d-bandcamp { background: #1da0c3; }
html .d-instagram { background: #e1306c; }
html .d-tiktok { background: #00f2ea; }
html .d-x { background: #777; }
html .d-genius { background: #ffff64; }
html .d-shop { background: #ffb02e; }

/* Labels in lowercase, in the site's own voice, instead of tiny spaced-out caps. */
html .section-label,
html .release-meta,
html .credit-role,
html .press-meta,
html .eyebrow {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* A calmer background: one corner glow instead of two, and lighter grain. */
html body::after { display: none; }
html .grain { opacity: 0.18; }

/* Rows stay put on hover; the title glitch below is the hover. */
html .link:hover,
html .release:hover,
html .credit:hover,
html .press:hover {
    padding-left: 0;
}

/* Glitch hover: a hairline pink/cyan split on a row's title. Static, no motion. */
html .link .link-name,
html .release .release-title,
html .credit .credit-title,
html .press .press-head {
    transition: text-shadow 0.15s;
}

html .link:hover .link-name,
html .release:hover .release-title,
html .credit:hover .credit-title,
html .press:hover .press-head {
    text-shadow: -1px 0 rgba(255, 45, 123, 0.6), 1px 0 rgba(0, 229, 255, 0.5);
}