/**
 * L Marshall — Aesthetic v2 · Centered Chamber
 * Dev clone only · Echo/Hollow doctrine preserved
 * Biomimetic Exogear: subtle shop lane only — does not drive palette
 */

:root {
    --ink: #0a0b0f;
    --ink-soft: #12141a;
    --ink-veil: rgba(10, 11, 15, 0.72);
    --mist: #e6e2dc;
    --mist-dim: rgba(230, 226, 220, 0.72);
    --bronze: #b8956b;
    --bronze-bright: #d4b896;
    --bronze-dim: #7a6348;
    --ember: #c4a35a;
    --depth-navy: #0f1419;

    /* Legacy aliases — soften old harsh gold */
    --gold: var(--bronze);
    --dark-gold: var(--bronze-dim);
    --pure-black: var(--ink);
    --dark-black: var(--ink-soft);
    --off-white: var(--mist);
}

body.dev-clone {
    background: var(--ink);
    color: var(--mist);
}

/* Static photography — no background video in dev */
body.dev-clone .background-video,
body.dev-clone.professional-ui .background-video,
html.professional-ui body.dev-clone .background-video {
    display: none !important;
}

body.dev-clone .background-video-overlay {
    background:
        linear-gradient(180deg, rgba(10, 11, 15, 0.72) 0%, rgba(10, 11, 15, 0.94) 100%),
        url('../media-library/airdrop/portrait-editorial-01.png') center 20% / cover no-repeat;
}

body.dev-clone.agoge-mode .background-video-overlay,
body.agoge-mode.dev-clone .background-video-overlay {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(196, 163, 90, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, rgba(8, 8, 12, 0.9) 0%, rgba(10, 11, 15, 0.97) 100%),
        url('../media-library/airdrop/portrait-seated-pinstripe-editorial.jpg') center / cover no-repeat;
}

/* Phoenix — canonical emblem */
body.dev-clone .phoenix-logo:not(.nav-phoenix-logo):not(.footer-phoenix-logo) {
    content: normal;
    width: min(42vw, 520px);
    height: auto;
    max-height: 38vh;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(184, 149, 107, 0.35));
    opacity: 0.92;
}

body.dev-clone .nav-phoenix-logo,
body.dev-clone .footer-phoenix-logo {
    width: 42px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(184, 149, 107, 0.4));
}

body.dev-clone .hollow-loading-logo .phoenix-logo,
body.dev-clone .loading-logo .phoenix-logo {
    width: 120px;
    height: auto;
}

/* Symbolic overlay — hidden in professional dev mode */
html.professional-ui body.dev-clone .symbolic-overlay,
html.professional-ui body.dev-clone .agoge-symbols,
html.professional-ui body.dev-clone .agoge-particles,
html.professional-ui body.dev-clone #agoge-background {
    display: none !important;
}

body.dev-clone .symbolic-overlay {
    opacity: 0.35;
}

body.dev-clone.agoge-mode .symbolic-overlay,
body.agoge-mode.dev-clone .symbolic-overlay {
    opacity: 0.55;
}

html.professional-ui body.dev-clone .phoenix-logo:not(.nav-phoenix-logo):not(.footer-phoenix-logo):not(.hollow-section .phoenix-logo) {
    opacity: 0.18;
    width: min(36vw, 420px);
}

/* Navigation — centered, breathable */
body.dev-clone .main-nav {
    background: rgba(10, 11, 15, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(184, 149, 107, 0.12);
}

body.dev-clone .nav-link {
    color: var(--mist-dim);
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    text-transform: uppercase;
}

body.dev-clone .nav-link:hover {
    color: var(--bronze-bright);
}

/* Hero — still water */
body.dev-clone .hero-title .title-line {
    font-weight: 300;
    letter-spacing: 0.22em;
    color: var(--mist);
}

body.dev-clone .hero-title .title-subtitle {
    color: var(--bronze);
    font-weight: 400;
    letter-spacing: 0.35em;
    font-size: 0.85rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

body.dev-clone .hero-description {
    color: var(--mist-dim);
    font-weight: 300;
    max-width: 36rem;
    line-height: 1.75;
}

/* Sections — chamber panels */
body.dev-clone .section {
    background: transparent;
}

body.agoge-mode.dev-clone .section-header .section-title,
body.dev-clone.agoge-mode .section-header .section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0.12em;
}

body.dev-clone .section-subtitle {
    color: var(--mist-dim);
    font-weight: 300;
}

body.dev-clone .shop-item,
body.dev-clone .date-item,
body.dev-clone .fragment-item,
body.dev-clone .album-card,
body.dev-clone .single-card {
    background: rgba(18, 20, 26, 0.72);
    border: 1px solid rgba(184, 149, 107, 0.14);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

body.dev-clone .shop-item:hover,
body.dev-clone .fragment-item:hover {
    border-color: rgba(184, 149, 107, 0.32);
    transform: translateY(-2px);
}

/* Exogear lane — embedded, not dominant */
body.dev-clone .shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.dev-clone .shop-item.exogear-lane {
    border-color: rgba(138, 145, 153, 0.22);
}

body.dev-clone .shop-item.exogear-lane .shop-info h3 {
    color: var(--mist);
}

body.dev-clone .exogear-tag {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(138, 145, 153, 0.9);
}

/* CTA buttons — bronze not shouty gold */
body.dev-clone .cta-button.primary {
    background: linear-gradient(135deg, var(--bronze-dim), var(--bronze));
    color: var(--ink);
    border: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

body.dev-clone .cta-button.secondary {
    background: transparent;
    border: 1px solid rgba(184, 149, 107, 0.45);
    color: var(--bronze-bright);
}

/* AGOGE player panel */
body.dev-clone .album-artwork img,
body.dev-clone .horizontal-player-container {
    border-radius: 12px;
}

body.dev-clone .album-description {
    color: var(--mist-dim);
    font-weight: 300;
    line-height: 1.7;
}

/* Toggle — refined */
body.dev-clone .agoge-toggle-container {
    border-color: rgba(184, 149, 107, 0.45) !important;
    background: rgba(10, 11, 15, 0.88) !important;
}

body.dev-clone .agoge-toggle {
    color: var(--bronze-bright) !important;
}

/* Footer */
body.dev-clone .main-footer {
    background: rgba(8, 9, 12, 0.95);
    border-top: 1px solid rgba(184, 149, 107, 0.1);
}

/* Presence section backdrop */
body.dev-clone .touring-section .map-placeholder {
    background:
        linear-gradient(rgba(10, 11, 15, 0.45), rgba(10, 11, 15, 0.88)),
        url('../media-library/airdrop/portrait-editorial-02.png') center 30% / cover no-repeat;
    min-height: 280px;
    border-radius: 12px;
    border: 1px solid rgba(184, 149, 107, 0.12);
}

/* Archive mood */
body.dev-clone .archive-section {
    position: relative;
}

body.dev-clone .archive-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../media-library/airdrop/portrait-editorial-04.png') center / cover no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

/* Live feed diary — calmer */
body.dev-clone .live-feed-background {
    background: rgba(10, 11, 15, 0.94);
}

body.dev-clone .live-feed-placeholder {
    background:
        linear-gradient(rgba(10, 11, 15, 0.4), rgba(10, 11, 15, 0.9)),
        url('../media-library/airdrop/portrait-seated-pinstripe-editorial.jpg') center / cover no-repeat;
}

html.professional-ui body.dev-clone .loading-symbol {
    display: none;
}