/* Juanito Thompson shared color palette — warm ember / teal accent theme */
:root {
    --jt-bg:           #0a0a0c;
    --jt-surface:      #1c1e22;
    --jt-raised:        #2e3038;
    --jt-mid:          #383c44;
    --jt-borders:       #4a5060;
    --jt-steel:         #606878;
    --jt-deep:          #7a3010;
    --jt-dark-rust:      #5a2008;
    --jt-brick:         #a84830;
    --jt-cta:           #c85a18;
    --jt-amber:         #e8900a;
    --jt-pale-warm:      #f0b878;
    --jt-gold:          #f5c842;
    --jt-body:          #f0b878;
    --jt-teal:          #1a7a5e;
    --jt-teal-bright:   #2a9070;
    --jt-taupe:         #8a7060;
    --jt-offwhite:      #f8f0e4;
    --jt-green:         #39ff84;

    /* Text hierarchy */
    --jt-text-dim:      #a0a8b0;
    --jt-text-muted:    #707880;
    --jt-text-faint:    #505860;

    /* Rust/fire extended */
    --jt-lava:          #e86828;
    --jt-blaze:         #ff7a30;
    --jt-hot:           #ff9a50;
    --jt-ember:         #3a1005;

    /* Amber/gold extended */
    --jt-honey:         #d4780a;
    --jt-brass:         #c8a030;
    --jt-pale-gold:     #f8e090;

    /* Teal extended */
    --jt-teal-deep:     #0d4a38;
    --jt-teal-mid:      #1f8868;
    --jt-teal-pale:     #60b898;
    --jt-teal-mist:     #a0d8c8;

    /* Cool surface variants */
    --jt-surface-cool:  #1a1c24;
    --jt-raised-cool:   #262a34;
    --jt-border-bright: #606878;

    /* Neon green extended */
    --jt-green-dim:     #20a858;
    --jt-green-deep:    #0a5030;
    --jt-green-glow:    #80ffb0;

    /* Accents */
    --jt-red:           #e03020;
    --jt-blue-steel:    #4a6888;
    --jt-purple:        #6a4888;
}

/* Sub-nav button colors — all pages use these */
body.jt-page { background: var(--jt-bg); --credit-color: var(--jt-mid); --nav-accent: var(--jt-cta); --nav-glow: rgba(200,90,24,0.4); --nav-brand: #e88848; --nav-brand-glow: rgba(232,136,72,0.7); }
body.jt-page .sub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
body.jt-page .sub-nav .nav-card {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    padding: 12px 20px;
    border: 2px solid;
    text-decoration: none;
}
body.jt-page .sub-nav .nav-card::after { display: none; }
body.jt-page .sub-nav .nav-card:hover { background: inherit !important; color: inherit !important; box-shadow: none !important; }

/* Back button: transparent + page accent color */
body.jt-page .sub-nav .nav-card.c-back,
body.jt-page .sub-nav .nav-card.jt-back { background: transparent; color: var(--jt-cta); border-color: var(--jt-cta); }
body.jt-page .sub-nav .nav-card.c-back:hover,
body.jt-page .sub-nav .nav-card.jt-back:hover { background: var(--jt-cta); color: var(--jt-bg); }

/* c-about: solid taupe (about page) */
body.jt-page .sub-nav .nav-card.c-about { background: var(--jt-taupe); color: var(--jt-bg); border-color: var(--jt-taupe); }
body.jt-page .sub-nav .nav-card.c-about:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-music-videos: solid pale warm (music videos) */
body.jt-page .sub-nav .nav-card.c-music-videos { background: var(--jt-pale-warm); color: var(--jt-deep); border-color: var(--jt-pale-warm); }
body.jt-page .sub-nav .nav-card.c-music-videos:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-network: solid teal (network) */
body.jt-page .sub-nav .nav-card.c-network { background: var(--jt-teal); color: var(--jt-bg); border-color: var(--jt-teal); }
body.jt-page .sub-nav .nav-card.c-network:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-photography: solid steel blue (photography) */
body.jt-page .sub-nav .nav-card.c-photography { background: var(--jt-steel); color: var(--jt-bg); border-color: var(--jt-steel); }
body.jt-page .sub-nav .nav-card.c-photography:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-recordings: solid amber (recordings) */
body.jt-page .sub-nav .nav-card.c-recordings { background: var(--jt-amber); color: var(--jt-bg); border-color: var(--jt-amber); }
body.jt-page .sub-nav .nav-card.c-recordings:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-releases: solid brick red (releases) */
body.jt-page .sub-nav .nav-card.c-releases { background: var(--jt-brick); color: var(--jt-bg); border-color: var(--jt-brick); }
body.jt-page .sub-nav .nav-card.c-releases:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-works: solid gold (works) */
body.jt-page .sub-nav .nav-card.c-works { background: var(--jt-gold); color: var(--jt-bg); border-color: var(--jt-gold); }
body.jt-page .sub-nav .nav-card.c-works:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-games: solid green (games) */
body.jt-page .sub-nav .nav-card.c-games { background: var(--jt-green); color: var(--jt-bg); border-color: var(--jt-green); }
body.jt-page .sub-nav .nav-card.c-games:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-links: solid purple (links button) */
body.jt-page .sub-nav .nav-card.c-links { background: var(--jt-purple); color: var(--jt-offwhite); border-color: var(--jt-purple); }
body.jt-page .sub-nav .nav-card.c-links:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-events: alias for music-videos (used by artist_links.js template) */
body.jt-page .sub-nav .nav-card.c-events { background: var(--jt-pale-warm); color: var(--jt-deep); border-color: var(--jt-pale-warm); }
body.jt-page .sub-nav .nav-card.c-events:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

/* c-cyan: fallback for template COLOR_MAP (games/network) */
body.jt-page .sub-nav .nav-card.c-cyan { background: var(--jt-teal-pale); color: var(--jt-bg); border-color: var(--jt-teal-pale); }
body.jt-page .sub-nav .nav-card.c-cyan:hover { background: inherit !important; color: var(--jt-offwhite) !important; box-shadow: none !important; }

body.jt-page .nav-card::after { display: none; }

body.jt-page footer { color: var(--jt-mid); }
body.jt-page footer span { color: var(--jt-cta); }