/* ==========================================================================
   MNVL — neon reskin for Faircamp 1.7
   Loaded via catalog.eno `site_assets` + `site_metadata`.
   Faircamp's markup, class names and JavaScript are untouched; everything
   below is theming on top of site.css / theme-*.css.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subsets from Google Fonts, OFL) ----------- */

@font-face {
    font-display: swap;
    font-family: 'Monoton';
    font-style: normal;
    font-weight: 400;
    src: url('monoton-latin.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    src: url('archivo-black-latin.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    src: url('space-mono-latin.woff2') format('woff2');
}

/* --- Design tokens ------------------------------------------------------- */

html:root {
    --ground:        #07080a;
    --panel:         #0d0f13;
    --ink:           #fff2fa;
    --ink-2:         #e4dfe8;
    --ink-3:         #b9b3bd;
    --ink-4:         #7d7784;
    --neon-magenta:  #ff8fd0;
    --neon-cyan:     #6ee7f0;
    --hairline:      rgba(255, 242, 250, 0.10);
    --border:        rgba(255, 242, 250, 0.12);
    --border-strong: rgba(255, 242, 250, 0.28);

    --glow-logo: 0 0 2px #fff, 0 0 7px #ff8fd0, 0 0 14px rgba(214, 58, 140, .75), 0 0 34px rgba(88, 14, 58, .5);
    --glow-cyan: 0 0 10px rgba(110, 231, 240, .7);
    --glow-hover: 0 0 22px rgba(214, 58, 140, .45);
    --halo: radial-gradient(ellipse 620px 420px at 50% 26%, rgba(120, 20, 76, .34), rgba(7, 8, 10, 0) 62%);
    --scanlines: repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 4px);

    --gutter: 56px;

    /* Remap Faircamp's own palette so untouched components land in-theme. */
    --bg-1: var(--ground);
    --bg-1-90: rgba(7, 8, 10, .9);
    --bg-1-overlay: rgba(7, 8, 10, .8);
    --bg-2: var(--panel);
    --bg-2-overlay: rgba(13, 15, 19, .8);
    --bg-3: #1a1d23;
    --bg-acc: #241a22;
    --bg-acc-overlay: rgba(36, 26, 34, .85);
    --bg-mg: #2a2730;
    --fg-1: var(--ink);
    --fg-1-focus: var(--neon-magenta);
    --fg-1-veil: rgba(255, 242, 250, .03);
    --fg-2: var(--ink-2);
    --fg-3: var(--ink-3);
    --fg-3-focus: var(--ink);
    --fg-acc: var(--ink);
    --fg-mg: var(--ink-4);
    --mg: var(--ink-4);
    --mg-acc: var(--neon-magenta);
    --mg-acc-overlay: rgba(255, 143, 208, .8);
    --cover-border-radius: 0;

    /* Faircamp's own horizontal page margin — we own the gutter now. */
    --page-margin-h: var(--gutter);
}

@media (max-width: 52rem) {
    html:root { --gutter: 24px; }
}

/* --- Ground, decorative layers, base type -------------------------------- */

body {
    background: var(--ground);
    color: var(--ink-3);
    position: relative;
}

body,
button,
input,
select,
textarea {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Halo (index only) and scanlines: decorative, never above text. */
body::before,
body::after {
    content: '';
    pointer-events: none;
    z-index: 0;
}

body::before {
    background: var(--scanlines);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

body:has(.page_grid)::after {
    background: var(--halo);
    height: 760px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

body > .layout,
body > #browser,
body > .js_notice,
body > .skip_to_content {
    position: relative;
    z-index: 1;
}

body main {
    align-content: start;
}

body h1 {
    color: var(--ink);
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    letter-spacing: -.01em;
}

/* Square edges everywhere. */
body a,
body button,
body input,
body img,
body .button,
body .embed_code_wrapper,
body .unlisted {
    border-radius: 0;
}

/* --- Focus ---------------------------------------------------------------- */

body :focus-visible {
    outline: 1px solid var(--neon-cyan);
    outline-offset: 2px;
}

/* Faircamp swaps some focus rings for background fills — restore the ring. */
body header .browse:focus-visible,
body header > div a:focus-visible,
body .track a.title:focus-visible,
body #browser input:focus-visible,
body #overlay button:focus-visible {
    background: none;
    color: inherit;
    margin: 0;
    outline: 1px solid var(--neon-cyan);
    outline-offset: 2px;
    padding: 0;
}

/* --- Header --------------------------------------------------------------- */

body > .layout > header {
    align-items: center;
    border-bottom: 1px solid var(--hairline);
    font-size: 1rem;
    padding: 22px var(--gutter);
}

body header #logo {
    padding: 0;
}

body header #logo svg {
    display: none;
}

body header #logo span {
    color: var(--ink);
    font-family: 'Monoton', cursive;
    font-size: 22px;
    letter-spacing: 0;
    text-shadow: 0 0 2px #fff, 0 0 8px var(--neon-magenta), 0 0 18px rgba(214, 58, 140, .7);
}

body header .browse {
    color: var(--ink-3);
    font-size: 12px;
    letter-spacing: .22em;
    padding: 0;
    text-transform: uppercase;
}

body header .browse svg {
    display: none;
}

body header .browse:hover,
body header #logo:hover span {
    color: var(--ink);
}

/* --- Page scaffolding ----------------------------------------------------- */

body .page_center > *,
body .page_grid > *,
body .page_split > * {
    margin: 0;
    max-width: none;
}

body .page_grid,
body .page_split {
    align-items: stretch;
    display: block;
    min-height: 0;
}

body .page_center {
    align-items: stretch;
    min-height: 0;
}

/* Everything in a .page_center that isn't the tracklist (download pages,
   long-form text, embed pages …) keeps a plain padded column. */
body .page_center > :not(.tracks) {
    box-sizing: content-box;
    margin: 44px 0 56px;
    max-width: 60rem;
    padding: 0 var(--gutter);
}

/* --- Index: hero ---------------------------------------------------------- */

/* The index hero is the .page_split that carries no cover. */
body .page_split:not(:has(.cover)) {
    padding: 96px var(--gutter) 84px;
}

body .page_split:not(:has(.cover)) .abstract {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
    max-width: none;
    text-align: center;
}

body .page_split:not(:has(.cover)) h1 {
    color: var(--ink);
    font-family: 'Monoton', cursive;
    font-size: clamp(44px, 11vw, 104px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-shadow: var(--glow-logo);
    white-space: nowrap;
}

/* Cyan rule under the wordmark. */
body .page_split:not(:has(.cover)) h1::after {
    background: var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan);
    content: '';
    display: block;
    height: 1px;
    margin: 30px auto 0;
    width: min(340px, 100%);
}

/* Synopsis becomes the tagline. Faircamp writes inline margins on it. */
body .page_split:not(:has(.cover)) .abstract > div:not(.actions) {
    color: var(--neon-cyan);
    font-size: 13px;
    letter-spacing: .3em;
    margin: 0 !important;
    text-indent: .3em; /* compensate the trailing letter-space when centred */
    text-shadow: var(--glow-cyan);
    text-transform: uppercase;
}

/* --- Chips (link row) ------------------------------------------------------ */

body .page_split:not(:has(.cover)) .actions {
    column-gap: 10px;
    justify-content: center;
    margin: 0;
    max-width: 780px;
    row-gap: 10px;
}

body .page_split:not(:has(.cover)) .actions a {
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-size: 11px;
    letter-spacing: .16em;
    padding: 9px 16px;
    text-transform: uppercase;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

body .page_split:not(:has(.cover)) .actions a svg {
    display: none;
}

body .page_split:not(:has(.cover)) .actions a:hover,
body .page_split:not(:has(.cover)) .actions a:focus-visible {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 14px rgba(214, 58, 140, .5);
    color: var(--ink);
}

/* The feed chip is an action → cyan, and it sits last in the row. */
body .page_split:not(:has(.cover)) .actions a[href$="subscribe/"] {
    border-color: rgba(110, 231, 240, .45);
    color: var(--neon-cyan);
    order: 1;
}

body .page_split:not(:has(.cover)) .actions a[href$="subscribe/"] span::before {
    content: 'Feed / ';
}

body .page_split:not(:has(.cover)) .actions a[href$="subscribe/"]:hover,
body .page_split:not(:has(.cover)) .actions a[href$="subscribe/"]:focus-visible {
    border-color: rgba(110, 231, 240, .45);
    box-shadow: 0 0 14px rgba(110, 231, 240, .45);
    color: var(--neon-cyan);
}

/* --- Index: section bar + release grid ------------------------------------ */

body .page_grid > div {
    counter-reset: releases;
    display: grid;
    gap: 34px 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 var(--gutter) 72px;
    position: relative;
}

/* Section bar. The count comes from a CSS counter over .release, which is
   resolved in document order, so ::after (last in the tree) sees the total
   even though `order` paints it at the top. */
body .page_grid > div::before {
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    content: 'Releases';
    font-family: 'Archivo Black', sans-serif;
    font-size: 15px;
    grid-column: 1 / -1;
    letter-spacing: .16em;
    order: -1;
    padding-bottom: 22px;
    text-transform: uppercase;
}

body .page_grid > div::after {
    color: var(--ink-4);
    content: counter(releases) ' — Newest first';
    font-size: 12px;
    letter-spacing: .16em;
    position: absolute;
    right: var(--gutter);
    text-transform: uppercase;
    top: 3px;
}

body .release {
    counter-increment: releases;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
}

body .release > :first-child {
    margin-bottom: 0;
}

body .release img {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    box-sizing: border-box;
    object-fit: cover;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
    width: 100%;
}

body .release > a:first-child:hover img,
body .release > a:first-child:focus-visible img {
    border-color: var(--neon-magenta);
    box-shadow: var(--glow-hover);
}

body .release > a:not(:first-child) {
    color: var(--ink);
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    line-height: 1.35;
}

@media (max-width: 70rem) {
    body .page_grid > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
    body .page_grid > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
    body .page_grid > div { grid-template-columns: minmax(0, 1fr); }
}

/* --- Release page: split ---------------------------------------------------- */

body .page_split:has(.cover) {
    align-items: start;
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 380px minmax(0, 1fr);
    padding: var(--gutter);
}

body .page_split:has(.cover) .cover img {
    border: 1px solid rgba(255, 242, 250, .14);
    box-sizing: border-box;
}

body .page_split:has(.cover) .abstract {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: none;
}

body .page_split:has(.cover) .abstract::before {
    color: var(--ink-4);
    content: 'Release';
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* A single-track page carries its number inside the h1 — label it accordingly. */
body .page_split:has(.cover) .abstract:has(h1 .number)::before {
    content: 'Track';
}

body .page_split:has(.cover) h1 {
    color: var(--ink);
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
}

body .page_split:has(.cover) .release_artists {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body .page_split:has(.cover) .release_artists a {
    color: var(--ink-3);
    text-decoration: none;
}

body .page_split:has(.cover) .release_artists a:hover {
    color: var(--ink);
}

@media (max-width: 52rem) {
    body .page_split:has(.cover) {
        grid-template-columns: minmax(0, 1fr);
    }
    body .page_split:has(.cover) .cover {
        max-width: 380px;
    }
}

/* --- Buttons (Listen / Download / Embed …) ---------------------------------- */

body .actions.primary {
    column-gap: 10px;
    font-size: 1rem;
    margin: 18px 0 0;
    row-gap: 10px;
}

body .actions.primary a,
body .actions.primary button,
body a.button,
body button.button,
body form button {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-size: 11px;
    letter-spacing: .16em;
    padding: 12px 16px;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

body .actions.primary > .emphasized {
    background: none;
    border-color: rgba(110, 231, 240, .45);
    color: var(--neon-cyan);
}

body .actions.primary a:hover,
body .actions.primary button:hover,
body .actions.primary a:focus-visible,
body .actions.primary button:focus-visible,
body a.button:hover,
body button.button:hover,
body form button:hover {
    background: none;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 14px rgba(214, 58, 140, .5);
    color: var(--ink);
}

body .actions.primary > .emphasized:hover,
body .actions.primary > .emphasized:focus-visible {
    background: none;
    border-color: rgba(110, 231, 240, .45);
    box-shadow: 0 0 14px rgba(110, 231, 240, .45);
    color: var(--neon-cyan);
}

body .actions.primary svg {
    display: none;
}

body .actions:not(.primary) {
    margin: 0;
}

body .actions:not(.primary) a,
body .actions:not(.primary) button {
    color: var(--ink-4);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body .actions:not(.primary) a:hover,
body .actions:not(.primary) button:hover {
    color: var(--ink);
}

body .page_split:has(.cover) .actions:not(.primary) svg {
    display: none;
}

/* --- Tracklist -------------------------------------------------------------- */

body .page_center > .tracks {
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    padding: 0 var(--gutter) 72px;
    width: 100%;
}

/* On wide screens the list sits under the release column, aligned with the
   title — the cover column stays clear on the left. */
@media (min-width: 64rem) {
    body .page_center > .tracks {
        padding-left: calc(380px + var(--gutter) * 2);
    }
}

/* Rows are two lines tall once the waveform is in — align everything to the
   title's line rather than centring it against the whole cell. */
body .track {
    align-items: start;
    column-gap: 18px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 70px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

body .track:not(:first-child) {
    margin-top: 0;
}

body .track:last-child {
    border-bottom: 1px solid var(--border);
}

/* Playback control: no fill, no cover thumbnail — just the glyph. */
body .track .track_playback,
body .js_enabled .track .track_playback {
    background: none;
    color: var(--ink-4);
    font-size: 14px;
    height: 24px;
    justify-content: flex-start;
    margin-top: -3px;
    padding: 0;
    width: 24px;
}

body .track .track_playback img {
    display: none;
}

body .js_enabled .track .track_playback:hover,
body .js_enabled .track .track_playback:focus-visible {
    background: none;
    color: var(--ink);
}

body .track.active .track_playback,
body .track.active .track_playback:hover,
body .track.active .track_playback:focus-visible {
    background: none;
    color: var(--neon-magenta);
    filter: drop-shadow(0 0 8px rgba(214, 58, 140, .8));
}

body .track > :nth-child(2) {
    overflow: hidden;
}

body .track .number {
    color: var(--ink-4);
    display: inline-block;
    font-size: 12px;
    margin-inline-end: 14px;
    min-width: 1.8em;
}

body .track a.title {
    color: var(--ink-2);
    font-size: 16px;
}

body .track a.title:not(:focus-visible):hover {
    color: var(--ink);
}

body .track.active .number {
    color: var(--neon-magenta);
    text-shadow: 0 0 8px rgba(214, 58, 140, .8);
}

body .track.active a.title {
    color: var(--ink);
    text-shadow: 0 0 10px rgba(214, 58, 140, .55);
}

body .track > :nth-child(3) {
    padding-top: 2px;
    text-align: right;
}

/* --- Waveforms ---------------------------------------------------------------- */

/* player.js builds the gradients and sets their stops to var(--fg-1) /
   var(--fg-3); we recolour the stops directly so the played and hovered
   portions read magenta (current state) and cyan (an action you can take). */
body .waveform {
    margin-top: 10px;
}

body .waveform path.base {
    stroke: rgba(255, 242, 250, .26);
    stroke-width: .03px;
}

body .waveform.seek path.base {
    stroke: rgba(255, 242, 250, .4);
}

body .waveform linearGradient.playback stop:nth-child(1) {
    stop-color: var(--neon-magenta);
}

body .waveform linearGradient.seek stop:nth-child(1) {
    stop-color: var(--neon-cyan);
}

/* The played portion only glows on the track that is actually playing. */
body .track.active .waveform path.playback {
    filter: drop-shadow(0 0 6px rgba(214, 58, 140, .8));
}

/* Keyboard seek indicator: a cyan frame, no fill. */
body .waveform .decoration {
    background: none;
    border: 1px solid var(--neon-cyan);
    border-radius: 0;
}

/* We own the row grid now, so the duration column stays put; Faircamp hides
   it below 25rem, we collapse the whole column instead (see below). */
body .track .time {
    color: var(--ink-3);
    display: inline;
    font-size: 12px;
    margin: 0;
}

@media (max-width: 22rem) {
    body .track { grid-template-columns: 24px minmax(0, 1fr); }
    body .track > :nth-child(3) { display: none; }
}

/* Track page: the leading number in the release title stays quiet. */
body .page_split:has(.cover) h1 .number {
    color: var(--ink-4);
    font-size: .5em;
    margin-inline-end: .4em;
    vertical-align: .35em;
}

/* --- Docked player ---------------------------------------------------------- */

body .docked_player .elements {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--panel);
    border-top: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: .2em;
    padding-inline: var(--gutter);
}

body .docked_player .track_info,
body .docked_player .time,
body .docked_player .number {
    color: var(--ink-3);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

body .docked_player .time {
    margin-inline-start: auto;
}

body .docked_player button {
    color: var(--ink-3);
}

body .docked_player button:hover,
body .docked_player button:focus-visible {
    color: var(--ink);
}

body .docked_player button[disabled] {
    color: var(--ink-4);
}

body .docked_player .timeline .base,
body .docked_player .timeline .progress {
    height: 3px;
}

body .docked_player .timeline .base {
    background: rgba(255, 242, 250, .14);
}

body .docked_player .timeline .progress,
body .docked_player .timeline.focus:not(.focus_from_click) .progress {
    background: var(--neon-magenta);
    box-shadow: 0 0 12px rgba(214, 58, 140, .9);
}

/* --- Footer ------------------------------------------------------------------ */

body > .layout > footer {
    border-top: 1px solid var(--hairline);
    color: var(--ink-4);
    font-size: 11px;
    letter-spacing: .18em;
    margin: 0;
    padding: 26px var(--gutter) 34px;
    text-transform: uppercase;
    width: auto;
}

body footer a,
body footer .browse {
    color: var(--ink-4);
}

body footer a:hover,
body footer .browse:hover {
    color: var(--ink);
}

body footer > span > a::after {
    content: ' — Instrumental rock music';
}

body footer .browse svg,
body footer .faircamp_signature svg {
    display: none;
}

body.player_active footer {
    margin-bottom: 7rem;
}

/* --- Search overlay ----------------------------------------------------------- */

body #browser {
    background: rgba(7, 8, 10, .92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body #browser input {
    border-bottom: 1px solid var(--border-strong);
    color: var(--ink);
    letter-spacing: .16em;
}

body #browser input:focus-visible {
    border-bottom-color: var(--neon-cyan);
}

body #browser img,
body #browser .placeholder {
    border: 1px solid var(--border);
    box-sizing: border-box;
}

/* --- Long-form text (about, download, embed pages) ----------------------------- */

body .text {
    color: var(--ink-3);
    line-height: 1.6;
}

body .text a {
    color: var(--neon-cyan);
    text-decoration-color: rgba(110, 231, 240, .45);
}

body .text h1,
body .text h2,
body h2 {
    color: var(--ink);
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    letter-spacing: -.01em;
}

/* --- Reduced motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        animation: none !important;
        transition: none !important;
    }
}