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

/*
 * Layout: free-space-fraction positioning.
 *
 * --u is the "artwork unit": element sizes are X*var(--u) where X is the
 * element's exact width in the 4000x5000 base artwork (1u = 1% of artwork
 * width). On landscape screens --u is driven by viewport height (1.2vh) so
 * pieces scale up to fill the page; on portrait it falls back to 1vw which
 * reproduces the artwork exactly.
 *
 * Positions are a fraction of the FREE space (100% - element size), where
 * the fraction is the element's position in the base artwork. This keeps
 * the same relative arrangement at any window size: edge-hugging pieces in
 * the artwork hug the viewport edges, the moon stays centered, and nothing
 * can ever overflow the screen no matter how big --u gets.
 */
:root {
    --u: min(1vw, 1.05vh);
}

body {
    background-color: #000000;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

.canvas {
    position: relative;
    /* fill the screen, softly capped on ultrawide so the
       composition doesn't disintegrate; leave a slim strip at
       the bottom for the social footer */
    width: min(100vw, 170vh);
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    margin: 0 auto;
}

/* Homepage social footer: pinned to the strip below the canvas */
footer.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 82px;
    margin: 0;
    padding: 10px 0 8px;
    border-top: none;
    background: transparent;
    z-index: 20;
}

footer.site-footer .footer-socials {
    margin-bottom: 6px;
}

.layer {
    position: absolute;
    display: block;
    height: auto;
}

.layer img {
    display: block;
    width: 100%;
    height: auto;
}

/* Sections (clickable) sit under the stars, matching the artwork layering */
.section-link {
    cursor: pointer;
    z-index: 5;
}

.section-link:hover img {
    filter: brightness(1.12);
    transform: scale(1.02);
}

.section-link img {
    transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

.section-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 6px;
    border-radius: 12px;
}

/* Positions: artwork-fraction of free space; sizes: artwork units */
.header             { left: calc((100% - 14.975*var(--u)) * 0.5051); top: calc((100% - 9.950*var(--u))  * 0.0180); width: calc(14.975 * var(--u)); }
.newsLetterSection  { left: calc((100% - 45.250*var(--u)) * 0.0032); top: calc((100% - 33.775*var(--u)) * 0.1313); width: calc(45.250 * var(--u)); }
.videosSection      { left: calc((100% - 34.225*var(--u)) * 0.9574); top: calc((100% - 29.900*var(--u)) * 0.1638); width: calc(34.225 * var(--u)); }
.newReleasesSection { left: calc((100% - 49.500*var(--u)) * 0.5485); top: calc((100% - 44.325*var(--u)) * 0.5002); width: calc(49.500 * var(--u)); }
.musicSection       { left: calc((100% - 48.450*var(--u)) * 0.0029); top: calc((100% - 27.875*var(--u)) * 0.9063); width: calc(48.450 * var(--u)); }
.blogSection        { left: calc((100% - 43.000*var(--u)) * 0.9700); top: calc((100% - 33.475*var(--u)) * 0.9900); width: calc(43.000 * var(--u)); }

.blueStar           { left: calc((100% - 4.900*var(--u))  * 0.7024); top: calc((100% - 5.050*var(--u))  * 0.9529); width: calc(4.900 * var(--u));  }
.blueStar2          { left: calc((100% - 3.275*var(--u))  * 0.6705); top: calc((100% - 3.375*var(--u))  * 0.3955); width: calc(3.275 * var(--u));  }
.blueStar4          { left: calc((100% - 11.150*var(--u)) * 0.0408); top: calc((100% - 11.500*var(--u)) * 0.0326); width: calc(11.150 * var(--u)); }

.greenStar          { left: calc((100% - 2.325*var(--u))  * 0.0530); top: calc((100% - 2.450*var(--u))  * 0.9027); width: calc(2.325 * var(--u));  }
.greenStar2         { left: calc((100% - 4.775*var(--u))  * 0.8044); top: calc((100% - 5.075*var(--u))  * 0.6193); width: calc(4.775 * var(--u));  }
.greenStar3         { left: calc((100% - 3.200*var(--u))  * 0.5733); top: calc((100% - 3.375*var(--u))  * 0.2222); width: calc(3.200 * var(--u));  }
.greenStar4         { left: calc((100% - 10.900*var(--u)) * 0.2640); top: calc((100% - 11.550*var(--u)) * 0.5000); width: calc(10.900 * var(--u)); }

.pinkStar           { left: calc((100% - 3.250*var(--u))  * 0.4072); top: calc((100% - 3.375*var(--u))  * 0.7665); width: calc(3.250 * var(--u));  }
.pinkStar2          { left: calc((100% - 2.450*var(--u))  * 0.2112); top: calc((100% - 2.450*var(--u))  * 0.5351); width: calc(2.450 * var(--u));  }
.pinkStar3          { left: calc((100% - 4.875*var(--u))  * 0.4802); top: calc((100% - 5.050*var(--u))  * 0.1171); width: calc(4.875 * var(--u));  }
.pinkStar4          { left: calc((100% - 3.300*var(--u))  * 0.6960); top: calc((100% - 3.375*var(--u))  * 0.0382); width: calc(3.300 * var(--u));  }
.pinkStar5          { left: calc((100% - 2.400*var(--u))  * 0.9073); top: calc((100% - 2.450*var(--u))  * 0.5698); width: calc(2.400 * var(--u));  }
.pinkStar6          { left: calc((100% - 11.150*var(--u)) * 0.9156); top: calc((100% - 11.500*var(--u)) * 0.5000); width: calc(11.150 * var(--u)); }
.pinkStar7          { left: calc((100% - 4.950*var(--u))  * 0.0800); top: calc((100% - 5.075*var(--u))  * 0.6485); width: calc(4.950 * var(--u));  }
.pinkStar8          { left: calc((100% - 11.275*var(--u)) * 0.2110); top: calc((100% - 11.550*var(--u)) * 0.9833); width: calc(11.275 * var(--u)); }

.redStar            { left: calc((100% - 11.100*var(--u)) * 0.9700); top: calc((100% - 11.525*var(--u)) * 0.9300); width: calc(11.100 * var(--u)); }
.redStar2           { left: calc((100% - 3.300*var(--u))  * 0.0657); top: calc((100% - 3.325*var(--u))  * 0.4284); width: calc(3.300 * var(--u));  }
.redStar3           { left: calc((100% - 2.350*var(--u))  * 0.2896); top: calc((100% - 2.450*var(--u))  * 0.0451); width: calc(2.350 * var(--u));  }
.redStar7           { left: calc((100% - 4.875*var(--u))  * 0.3338); top: calc((100% - 5.075*var(--u))  * 0.6706); width: calc(4.875 * var(--u));  }

/* In the base artwork this star is rotated 14deg clockwise about its center.
   The standalone `rotate` property is used so the hover `transform` composes
   with it instead of overriding it. */
.yellowStar         { left: calc((100% - 11.425*var(--u)) * 0.9715); top: calc((100% - 11.250*var(--u)) * 0.0266); width: calc(11.425 * var(--u)); rotate: 14deg; }
.yellowStar2        { left: calc((100% - 2.425*var(--u))  * 0.5293); top: calc((100% - 2.400*var(--u))  * 0.9190); width: calc(2.425 * var(--u));  }
.yellowStar3        { left: calc((100% - 3.350*var(--u))  * 0.9790); top: calc((100% - 3.300*var(--u))  * 0.6000); width: calc(3.350 * var(--u));  }
.yellowStar4        { left: calc((100% - 4.925*var(--u))  * 0.4189); top: calc((100% - 4.850*var(--u))  * 0.2894); width: calc(4.925 * var(--u));  }

/* Stars */
.star {
    z-index: 8;
    transition: transform 0.25s ease-out, filter 0.25s ease-out;
    user-select: none;
    cursor: default;
}

.star:hover,
.star:focus-visible,
.star:active {
    animation: star-shimmer 0.7s ease-in-out 1;
    transform: translateY(-5px) scale(1.08);
    filter: brightness(1.35);
    cursor: pointer;
}

@keyframes star-shimmer {
    0% {
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
    50% {
        filter: brightness(1.5);
        transform: translate(-3px, -6px) scale(1.12) rotate(-4deg);
    }
    100% {
        filter: brightness(1.1);
        transform: translateY(-5px) scale(1.08);
    }
}