:root{
    --bg:#171512;
    --paper:#ede3c8;
    --paper-dim:#e0d5b6;
    --ink:#1b1912;
    --rust:#b8441c;
    --gold:#c9a227;
    --olive:#6e7a5c;
    --line: rgba(27,25,18,0.14);
    --white: #fff;
    --black: #000;
    --his-reflection: #A7B4BD;
    --his-reflection-font: #D9DBDC;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    background:var(--olive);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");    /* background-image: url('/images/er-record-store-background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
    color:var(--paper);
    font-family:'Space Grotesk', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- header ---------- */

header{
    padding: 64px 24px 10px;
    text-align:center;
    max-width:1000px;
    margin:0 auto;
}

.logo{
    max-width: min(280px, 70%);
    height:auto;
    display:block;
    margin: 0 auto;
    margin-bottom: 3rem;
}

.logotype{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:0;
    line-height:0.95;
}

.logotype span{ color:var(--rust); }

.tagline{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    margin: 10px 0 26px;
    color: var(--white);
}

.bio{
    font-size:0.88rem;
    line-height:1.50;
    color: rgba(237,227,200,0.8);
    max-width:1000px;
    margin:0 auto;

    u{ color: var(--paper) }
}

/* replace this text block with real bio */
.bio em{ color:var(--white); font-style:normal; font-weight:bold; }

/* ---------- section labels ---------- */

.section-label{
    max-width:1080px;
    margin: 0 auto;
    padding: 0 24px;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:30px;
    margin-bottom:10px;
    }

.section-label .rule{
    flex:1;
    height:1px;
    background: rgba(237,227,200,0.18);
}

.section-label span{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    white-space:nowrap;
}

/* ---------- catalog grid ---------- */

.shelf, .catalog{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap:22px;
    max-width:1080px;
    margin:0 auto;
    padding: 0 24px 20px;
}

.sleeve{
    position:relative;
    aspect-ratio: 1 / 1;
    cursor:pointer;
    z-index:1;
}

.card{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex: 0 0 151px;
}

.card:has(.track-title:hover) .disc{
    transform: translateX(32%) rotate(300deg);
}

.card:has(.track-title:hover) .sleeve{
    z-index:6;
}

.card:has(.sleeve:hover) .track-title,
.card:has(.sleeve:focus-within) .track-title,
.card:has(.sleeve.is-open) .track-title{
    color: var(--white);
}

.caption{
    color: var(--paper);
    display:flex;
    flex-direction:column;
    flex:1;
}

.caption .track-meta{
    color: rgba(237,227,200,0.55);
}

.sleeve:hover,
.sleeve:focus-within,
.sleeve.is-open{
    z-index:6; /* rise above neighboring tiles so the reveal isn't clipped */
}

/* the vinyl disc — lives behind the sleeve, slides out on hover/open */
.disc{
    position:absolute;
    top:6%;
    left:6%;
    width:88%;
    height:88%;
    border-radius:50%;
    background:
        radial-gradient(circle at center, var(--gold) 0 5px, var(--ink) 6px 7px, #100f0d 8px 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
    transition: transform 0.55s cubic-bezier(.2,.7,.2,1);
    transform: translateX(0%) rotate(0deg);
    z-index:1;
}

.disc::before{
    content:"";
    position:absolute; inset:0;
    border-radius:50%;
    background: repeating-radial-gradient(circle at center, transparent 0 3px, rgba(0,0,0,0.35) 3px 4px);
    opacity:0.5;
}

.sleeve:hover .disc,
.sleeve:focus-within .disc,
.sleeve.is-open .disc{
    transform: translateX(32%) rotate(300deg);
}

.sleeve-inner{
    position:absolute; inset:0;
    color:var(--ink);
    border-radius:4px;
    background:var(--paper)
        repeating-linear-gradient(135deg, rgba(27,25,18,0.03) 0 2px, transparent 2px 5px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    z-index:2;
    background-size: cover;
    background-position: center;
}

.sleeve-inner::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.05) 55%);
    z-index:-1;
}

.cat-no{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    letter-spacing:0.08em;
    color: var(--paper-dim);
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(237,227,200,0.2);
    border-radius:2px;
    padding:2px 6px;
    margin-top:auto;
    width:fit-content;
}

.track-title{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:0.92rem;
    text-transform:uppercase;
    letter-spacing:0.005em;
    line-height:1.15;
    color: var(--paper);
    cursor:pointer;
}

.track-title:hover{ color: var(--white); }

.track-meta{
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    color: rgba(27,25,18,0.55);
    letter-spacing:0.04em;
}

/* platform picker — appears stuck to the sliver of disc that's peeked out */
.platforms{
    position:absolute;
    top:50%;
    right:-8px;
    transform: translate(100%, -50%);
    display:none;
    flex-direction:column;
    gap:6px;
    z-index:3;
    width:max-content;
}

.sleeve.is-open .platforms{ display:flex; }

/* ---------- profile tiles ---------- */

.profiles{
    max-width:1080px;
    margin:0 auto;
    padding: 0 24px 10px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:18px;
}

.profile-tile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 12px;
    background: transparent;
    border:1px solid rgba(237,227,200,0.22);
    border-radius:4px;
    text-decoration:none;
    color:var(--paper);
    transition: border-color 0.15s ease, background 0.15s ease;

    .profile-icon-logo{
        width: 24px;
        height: 24px;

        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}

.profile-tile:hover{
    border-color: var(--gold);
    background: rgba(201,162,39,0.06);
}

.profile-tile .name{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.8rem;
}

.profile-tile .arrow{ color:var(--gold); font-family:'JetBrains Mono', monospace; }

.player-modal{
    position:fixed; inset:0;
    background: rgba(0,0,0,0.7);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
    padding:20px;
}

.player-modal.is-open{ display:flex; }

.player-modal-inner{
    background: var(--his-reflection);
    border-radius:8px;
    padding:20px;
    width:100%;
    max-width:420px;
    position:relative;
}

.player-close{
    position:absolute;
    top:8px; right:12px;
    background:none;
    border:none;
    font-size:1.4rem;
    cursor:pointer;
    color: var(--ink);
}

.player-tabs{
    display:flex;
    gap:6px;
    margin-bottom:14px;
}

.player-tab{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    padding:6px 12px;
    border-radius:20px;
    border:1px solid rgba(27,25,18,0.2);
    background:transparent;
    color: var(--ink);
    cursor:pointer;
}

.player-tab.is-active{
    background: #495357;
    color: var(--white);
    border-color: var(--white);
}

.player-frame-wrap iframe{
    width:100%;
    height:152px;
    border-radius:6px;
}

.player-frame-wrap.is-album iframe{
    height: 352px;
}

.player-modal-inner.is-album{
    max-width: 480px;
}

.contact-information{
    max-width:1080px;
    margin:0 auto;
    padding: 0 24px 10px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color: rgba(237,227,200,0.35);

    .email-address{
        color: var(--white);
        /* text-decoration:none; */
    }
}

footer{
    text-align:center;
    padding: 24px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color: rgba(237,227,200,0.35);
}

@media screen and (max-width: 600px){
    header{
        padding: 36px 24px 0px 24px;
    }

    .tagline{
        margin: 8px 0 18px;
    }

    .bio{
        font-size: 0.88rem;
        line-height: 1.5;
        max-width: 90%;
        margin: 0 auto;

        .bio-intro{
        display:none;
        }
    }

    .cta-hint{
        margin-top: 14px;
    }

    .player-modal{
        padding: 10px;
    }

    .player-modal-inner{
        padding: 12px;
        max-width: 100%;
    }

    .player-modal-inner.is-album{
        max-width: 100%;
    }
}

/* ============================================
   HIS REFLECTION — press kit page only
   ============================================ */
body.page-his-reflection{
    background:var(--his-reflection);

    header{
        padding: 40px 24px 10px;
        text-align:center;
        max-width:1000px;
        margin:0 auto;
    }

    .logo{
        min-width: min(450px, 70%);
        height:auto;
        display:block;
        margin: 0 auto;
        margin-bottom: 2rem;
    }

    .bio{
        color: var(--white);
        margin-bottom: 2rem;
    }

    .bio u{ color:var(--white); font-style:normal; font-weight:bold; }

    .card{
        display:center;
        gap:22px;
        max-width:500px;
        margin:0 auto;
        padding: 0 24px 0px;

        .cat-no{
            color: var(--white);
            margin-top:auto;
        }
    }

    .profiles{
        max-width:25%;
        margin:0 auto;
        padding: 30px 24px 10px;
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap:18px;
        justify-items: center;

        .profile-tile{
            background: #495357;
            max-width: 150px;

            .name{
                color: var(--white);
            }

            .arrow{
                color: var(--his-reflection-font);
            }
        }

        .profile-tile:hover{
            border-color: var(--white);
            background: rgba(201,162,39,0.06);
        }
    }

    .track-title{
        color: var(--his-reflection-font);
    }

    footer{
        background:var(--his-reflection);
        color: var(--white);

        .footer{
            display:flex;
            flex-direction:column;
        }
    }

    .player-modal-inner{
        background: var(--his-reflection);
        color: var(--his-reflection-font);
    }

    .player-tab.is-active{
        background: #495357;
        color: var(--white);
        border-color: var(--white);
    }
}