/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #f3f3f3;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
    color: #000;
    cursor: crosshair;
}

.page {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    opacity: 0;
    animation: fadeInPage 0.9s ease forwards;
    animation-delay: 0.15s;
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* UI */
.title,
.back-link,
.heading {
    position: absolute;
    z-index: 20;
}

.title {
    top: 2.5vh;
    left: 2.5vw;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: 2px;
}

.heading {
    font-size: clamp(15px, 1.35vw, 18px);
    letter-spacing: 3px;
    opacity: 0.65;
    pointer-events: none;
}

.nav {
    position: absolute;
    font-size: clamp(16px, 1.45vw, 20px);
    letter-spacing: 2px;
    text-decoration: none;
    color: #000;
    transition: 0.2s ease;
    z-index: 20;
}

.nav:hover {
    opacity: 0.4;
    transform: translateY(-2px);
}

.back-link {
    top: 2.5vh;
    left: 12vw;
    opacity: 0.7;
}

.back-link:hover {
    opacity: 1;
}

/* INDEX */
.divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #000;
    z-index: 2;
}

.new-title { top: 11%; left: 8%; }
.old-title { top: 13%; right: 13%; }

/* INDEX LINKS */
.page > a[href="eps.html"] {
    top: 22% !important;
    left: 18% !important;
    right: auto !important;
    bottom: auto !important;
}

.comps {
    top: 34% !important;
    left: 20% !important;
    right: auto !important;
}

.mix-new {
    top: 50% !important;
    left: 14% !important;
    right: auto !important;
}

.collabs {
    top: 68% !important;
    left: 20% !important;
    right: auto !important;
}

.mix-old {
    top: 42% !important;
    right: 18% !important;
    left: auto !important;
}

.singles {
    top: 62% !important;
    right: 20% !important;
    left: auto !important;
}

/* RESPONSIVE ALBUM SYSTEM */
.album-link {
    position: absolute;
    display: block;
    z-index: 10;
    text-decoration: none;
}

.album-link:hover {
    opacity: 0.82;
}

.album-link img {
    display: block;
    width: clamp(170px, 22vw, 320px);
    height: auto;
    border-radius: clamp(3px, 0.45vw, 6px);
}

.release {
    position: absolute;
    font-size: clamp(16px, 1.35vw, 22px);
    letter-spacing: 2px;
    z-index: 10;
    text-align: center;
}

.release span {
    display: block;
}

.release-note {
    font-size: clamp(10px, 0.8vw, 12px);
    letter-spacing: 3px;
    opacity: 0.6;
    margin-top: 8px;
}

/* EP PAGE */
.eps-heading { top: 12%; left: 8%; }

.ep-me-cover {
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ep-me-text {
    top: calc(47% + clamp(112px, 15.5vw, 175px));
    left: 50%;
    transform: translateX(-50%);
}

/* SINGLES PAGE */
.singles-heading { top: 12%; left: 8%; }

.single-something-cover {
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.single-something-text {
    top: calc(47% + clamp(112px, 15.5vw, 175px));
    left: 50%;
    transform: translateX(-50%);
}

/* MIXTAPES PAGE */
.mixtapes-heading { top: 14%; left: 8%; }

.mixtapes-page .album-link img {
    width: clamp(150px, 19vw, 280px);
}

.mixtape-burn-cover {
    top: 47%;
    left: 32%;
    transform: translate(-50%, -50%);
}

.mixtape-burn-text {
    top: calc(47% + clamp(100px, 13.5vw, 155px));
    left: 32%;
    transform: translateX(-50%);
}

.mixtape-feom-cover {
    top: 47%;
    left: 68%;
    transform: translate(-50%, -50%);
}

.mixtape-feom-text {
    top: calc(47% + clamp(100px, 13.5vw, 155px));
    left: 68%;
    transform: translateX(-50%);
}

/* MODULAR PAGES: COMPS + COLLABS */
.comps-heading,
.collabs-heading {
    top: 12%;
    left: 8%;
}

.comps-grid,
.collabs-grid {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    justify-items: center;
    align-items: start;
    width: min(76vw, 980px);
    gap: clamp(22px, 3vw, 48px);
    padding-bottom: 8vh;
}

.comp-item,
.collab-item {
    width: min(100%, 210px);
    text-align: center;
}

.comps-page .album-link,
.collabs-page .album-link {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block;
    width: 100%;
    z-index: 10;
}

.comps-page .album-link img,
.collabs-page .album-link img {
    width: 100%;
    max-width: 210px;
    height: auto;
}

.comps-page .release,
.collabs-page .release {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 12px;
    font-size: clamp(13px, 1.1vw, 18px);
    line-height: 1.15;
}

.comps-page .release-note,
.collabs-page .release-note {
    font-size: clamp(8px, 0.65vw, 11px);
    letter-spacing: clamp(2px, 0.35vw, 4px);
    line-height: 1.25;
}

/* ME PAGE */
.me-heading { top: 14%; left: 10%; }

.me-message,
.embed-message {
    position: absolute;
    top: 28%;
    left: 8%;
    width: min(34vw, 500px);
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.4;
    letter-spacing: 1px;
    z-index: 10;
}

/* EMBED PAGES */
.embed-heading { top: 14%; left: 8%; }

.embed-row {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 2vw;
    width: min(82vw, 1000px);
    z-index: 5;
}

.embed-gif {
    width: 30%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: clamp(3px, 0.45vw, 6px);
}

.untitled-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(360px, 42vw, 560px);
    height: clamp(260px, 25vw, 344px);
    transform: translate(-50%, -50%);
    border: 2px solid #000;
    border-radius: clamp(3px, 0.45vw, 6px);
    z-index: 10;
}

.embed-row .untitled-embed {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 70%;
    max-width: none;
    height: clamp(220px, 24vw, 360px);
}

.bandlab-embed,
.embed-page iframe.bandlab-embed {
    position: absolute;
    top: 52%;
    left: 50%;
    width: clamp(360px, 46vw, 620px);
    height: clamp(260px, 26vw, 353px);
    transform: translate(-50%, -50%);
    border: 2px solid #000;
    border-radius: 6px;
    z-index: 5;
}

.bandcamp-embed {
    position: absolute;
    top: 56%;
    left: 50%;
    width: clamp(280px, 26vw, 350px);
    height: clamp(520px, 48vw, 654px);
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    z-index: 5;
}

/* OTHER PAGES */
.tapnews-heading,
.live-heading {
    top: 12%;
    left: 8%;
}

.tapnews-feed {
    position: absolute;
    top: 55%;
    left: 50%;
    width: clamp(360px, 42vw, 620px);
    height: min(620px, 72vh);
    transform: translate(-50%, -50%);
    border: 2px solid #000;
    border-radius: 6px;
    overflow: auto;
    background: #f3f3f3;
    z-index: 5;
}

.live-container {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.live-box {
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px;
    background: #f3f3f3;
}

.live-video {
    width: clamp(320px, 55vw, 600px);
    background: #000;
    border-radius: 4px;
}

.live-container .release {
    position: static;
    margin-top: 14px;
}

.footer-text {
    position: absolute;
    bottom: 2vh;
    left: 2.5vw;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 10;
}

/* SMALL HEIGHT SCREENS */
@media (max-height: 780px) and (min-width: 769px) {
    .comps-grid,
    .collabs-grid {
        top: 58%;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: clamp(16px, 2.2vw, 34px);
        width: min(80vw, 980px);
    }

    .comp-item,
    .collab-item {
        width: min(100%, 185px);
    }

    .comps-page .album-link img,
    .collabs-page .album-link img {
        max-width: 185px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .back-link { left: 28vw; }

    .new-title { top: 12%; left: 8%; }
    .old-title { top: 12%; right: 8%; }

    .page > a[href="eps.html"] {
        top: 24% !important;
        left: 10% !important;
    }

    .comps { top: 36% !important; left: 15% !important; }
    .mix-new { top: 50% !important; left: 7% !important; }
    .collabs { top: 66% !important; left: 12% !important; }

    .mix-old { top: 43% !important; right: 8% !important; }
    .singles { top: 62% !important; right: 8% !important; left: auto !important; }

    .comps-grid,
    .collabs-grid {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        grid-template-columns: 1fr;
        width: 90vw;
        gap: 40px;
        margin: 28vh auto 8vh;
    }

    .comp-item,
    .collab-item {
        width: clamp(180px, 58vw, 300px);
    }

    .embed-row {
        top: 58%;
        flex-direction: column;
        width: 90vw;
        gap: 20px;
    }

    .embed-gif {
        width: 70%;
        max-width: none;
    }

    .embed-row .untitled-embed {
        width: 100%;
        height: 300px;
    }
}