/* Melrose House shared color palette — cool blue-gray / dusty rose theme */
:root {
    /* ── base ── */
    --mh-deep:       #6a6e78;
    --mh-surface:    #786858;
    --mh-bread:      #3e4048;
    --mh-muted:      #9080a0;
    --mh-light:      #a0b0c8;
    --mh-cream:      #c8d4e0;
    --mh-coral:      #c87878;
    --mh-peach:      #e8a090;
    --mh-pale:       #f0c8c0;
    --mh-gold:       #d4a060;
    --mh-brand:      #6878a0;
    --mh-sage:       #7ab8a0;
    --mh-lavender:   #c8a8d0;
    --mh-sage2:      #a8c0a0;
    --mh-amber:      #e8b870;
    --mh-slate:      #5a6890;
    --mh-dark:       #2a2c30;
    --mh-bg:         #0c0d0f;

    /* ── text hierarchy ── */
    --mh-text-bright:    #f0f2f8;
    --mh-text-body:      #c8d0d8;
    --mh-text-dim:       #8890a0;
    --mh-text-faint:     #586070;
    --mh-text-disabled:  #383c44;

    /* ── dark grounds ── */
    --mh-void:          #060608;
    --mh-near-black:    #0a0a0e;
    --mh-surface-low:   #141418;
    --mh-surface-mid:   #1e2024;
    --mh-raised:        #242830;
    --mh-border-dark:   #303440;
    --mh-border-mid:    #484c58;
    --mh-border-light:  #606470;

    /* ── blue-slate ramp ── */
    --mh-navy:          #1a2038;
    --mh-deep-slate:    #2a3050;
    --mh-mid-slate:     #3a4868;
    --mh-pale-slate:    #8898b8;
    --mh-sky-pale:      #b8c8e0;
    --mh-ice:           #dce8f4;
    --mh-steel:         #4a5878;

    /* ── purple/lavender extended ── */
    --mh-deep-purple:   #2a1e38;
    --mh-violet:        #504870;
    --mh-mauve:         #806888;
    --mh-pale-mauve:    #b090b8;
    --mh-lilac:         #e0c8e8;
    --mh-lilac-mist:    #f0e8f8;

    /* ── coral/warm extended ── */
    --mh-deep-rust:     #5a2020;
    --mh-rust:          #8a3828;
    --mh-terra:         #b05038;
    --mh-salmon:        #d89080;
    --mh-blush:         #f0b8b0;
    --mh-rose-pale:     #f8d8d0;

    /* ── gold/amber extended ── */
    --mh-deep-gold:     #6a4818;
    --mh-honey:         #c89040;
    --mh-pale-gold:     #f0d098;
    --mh-butter:        #f8e8b8;
    --mh-straw:         #f0e0a0;

    /* ── sage extended ── */
    --mh-forest:        #1e3028;
    --mh-moss:          #3a5040;
    --mh-fern:          #587858;
    --mh-olive:         #789868;
    --mh-pale-sage:     #c0d4b8;
    --mh-lichen:        #d8e4d0;

    /* ── teal ── */
    --mh-teal-deep:     #183830;
    --mh-teal:          #2a6858;
    --mh-teal-mid:      #409878;
    --mh-teal-bright:   #60b898;
    --mh-teal-mist:     #a8d0c0;

    /* ── warm neutrals ── */
    --mh-bark:          #2a2018;
    --mh-taupe:         #706050;
    --mh-sand:          #b0a080;
    --mh-parchment:     #e8e0c8;

    /* ── highlight / glow ── */
    --mh-glow-coral:    #f8c0b0;
    --mh-glow-blue:     #b8d0e8;
    --mh-glow-sage:     #b8d8c0;
    --mh-glow-gold:     #f8d8a0;
    --mh-glow-lavender: #d8c0e8;

    /* ── nav ── */
    --nav-accent:      var(--mh-brand);
    --nav-glow:        rgba(104,120,160,0.4);
    --nav-brand:       var(--mh-gold);
    --nav-brand-glow:  rgba(212,160,96,0.7);
}

/* Sub-nav button colors — all pages use these */
body.mh-page { background: var(--mh-bg); --credit-color: var(--mh-muted); }
body.mh-page .sub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
body.mh-page .sub-nav .nav-card {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    padding: 10px 16px;
    border: 2px solid;
    text-decoration: none;
}
body.mh-page .sub-nav .nav-card::after { display: none; }
body.mh-page .sub-nav .nav-card:hover { background: inherit !important; color: inherit !important; box-shadow: none !important; }

/* c-about: mint */
body.mh-page .sub-nav .nav-card.c-about { background: var(--mh-sage); color: var(--mh-dark); border-color: var(--mh-sage); }
body.mh-page .sub-nav .nav-card.c-about:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-sage); }

/* c-recordings: steel blue brand */
body.mh-page .sub-nav .nav-card.c-recordings { background: var(--mh-brand); color: var(--mh-dark); border-color: var(--mh-brand); }
body.mh-page .sub-nav .nav-card.c-recordings:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-brand); }

/* c-works: gold */
body.mh-page .sub-nav .nav-card.c-works { background: var(--mh-gold); color: var(--mh-dark); border-color: var(--mh-gold); }
body.mh-page .sub-nav .nav-card.c-works:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-gold); }

/* c-green: surface */
body.mh-page .sub-nav .nav-card.c-green { background: var(--mh-surface); color: var(--mh-dark); border-color: var(--mh-surface); }
body.mh-page .sub-nav .nav-card.c-green:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-surface); }

/* c-rose: coral */
body.mh-page .sub-nav .nav-card.c-rose { background: var(--mh-coral); color: var(--mh-dark); border-color: var(--mh-coral); }
body.mh-page .sub-nav .nav-card.c-rose:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-coral); }

/* c-personnel: coral (same as c-rose) */
body.mh-page .sub-nav .nav-card.c-personnel { background: var(--mh-coral); color: var(--mh-dark); border-color: var(--mh-coral); }
body.mh-page .sub-nav .nav-card.c-personnel:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-coral); }

/* c-lavender: lavender */
body.mh-page .sub-nav .nav-card.c-lavender { background: var(--mh-lavender); color: var(--mh-deep); border-color: var(--mh-lavender); }
body.mh-page .sub-nav .nav-card.c-lavender:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-lavender); }

/* c-links: teal mid */
body.mh-page .sub-nav .nav-card.c-links { background: var(--mh-teal-mid); color: var(--mh-dark); border-color: var(--mh-teal-mid); }
body.mh-page .sub-nav .nav-card.c-links:hover { background: transparent; color: var(--mh-cream); border-color: var(--mh-teal-mid); }

/* c-photography: sky pale */
body.mh-page .sub-nav .nav-card.c-photography { background: var(--mh-sky-pale); color: var(--mh-dark); border-color: var(--mh-sky-pale); }
body.mh-page .sub-nav .nav-card.c-photography:hover { background: transparent; color: var(--mh-dark); border-color: var(--mh-sky-pale); }

/* About button self-link hider */
body.mh-page .sub-nav a[href="about.html"] {
    background: var(--mh-sage);
    color: var(--mh-dark);
    border-color: var(--mh-sage);
}

body.mh-page footer { color: var(--mh-muted); }
body.mh-page footer span { color: var(--mh-brand); }