/* =========================================================
   ONE GUILD
   REVISED MASTER STYLESHEET
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap');


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #08090b;
    color: #eeeeee;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --black: #08090b;
    --black-2: #0d0f12;
    --graphite: #14171b;
    --graphite-2: #1b1e23;

    --white: #f4f4f1;
    --silver: #c9cbd0;
    --muted: #777b84;

    --gold: #c6a25b;
    --red: #a83b42;
    --green: #638d70;
    --violet: #8b6fd1;
    --cyan: #4fa8c5;
    --amber: #b47c45;

    --border: rgba(255,255,255,.11);

    --max-width: 1250px;
}


/* =========================================================
   GLOBAL SECTION SIZING
========================================================= */

.section {
    padding: 55px 30px;
}

.project-section {
    position: relative;

    padding: 55px 30px;

    background: #0a0c0f;

    border-top: 1px solid rgba(255,255,255,.055);

    overflow: hidden;
}

.section-inner {
    width: min(var(--max-width), 100%);
    margin: auto;
    position: relative;
    z-index: 2;
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading h2 {

    font-family: "Orbitron", sans-serif;

    font-size: clamp(21px, 1.5vw, 48px);

    letter-spacing: .08em;

    font-weight: 500;

    line-height: 1.05;

    color: var(--white);

}

.section-heading p {

    margin-top: 9px;

    color: var(--muted);

    font-size: 12px;

    letter-spacing: .07em;

}

.centered {
    text-align: center;
}

.eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--silver);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

}

.gold {
    color: var(--gold);
}

.green {
    color: var(--green);
}

.violet {
    color: var(--violet);
}

.red {
    color: var(--red);
}

.cyan {
    color: var(--cyan);
}

.amber {
    color: var(--amber);
}

.silver {
    color: var(--silver);
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    min-height: 68px;

    padding: 12px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    z-index: 1000;

    background:
        linear-gradient(
            to bottom,
            rgba(5,6,8,.88),
            rgba(5,6,8,.15)
        );

    backdrop-filter: blur(8px);

}

.nav-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    font-family: "Orbitron", sans-serif;

    font-size: 11px;

    letter-spacing: .13em;

}

.nav-mark-img {

    width: 28px;
    height: 28px;

    object-fit: contain;

    filter: drop-shadow(0 0 8px rgba(255,255,255,.25));

}

.site-nav nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 20px;

}

.site-nav nav a {

    font-size: 9px;

    letter-spacing: .12em;

    color: #aaaeb5;

    transition: .25s ease;

    white-space: nowrap;

}

.site-nav nav a:hover {

    color: white;

    text-shadow:
        0 0 15px white;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    height: 100vh;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #050607;

}

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .92;

    filter:
        grayscale(.35)
        contrast(1.05)
        brightness(.95);

}

.hero-bottom-action {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

    text-align: center;

}

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 12px 22px;

    border: 1px solid rgba(255,255,255,.6);

    background: rgba(0,0,0,.45);

    backdrop-filter: blur(5px);

    font-size: 9px;

    letter-spacing: .2em;

    color: white;

    transition: .3s ease;

}

.hero-button:hover {

    background: rgba(255,255,255,.15);

    border-color: white;

    box-shadow:
        0 0 30px rgba(255,255,255,.35);

}


/* =========================================================
   COMPANY
========================================================= */

.intro {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.035),
            transparent 55%
        ),
        #0b0d10;

}

.intro-content {

    max-width: 760px;

    margin: auto;

    text-align: center;

}

.intro-large {

    font-size: clamp(17px, 2vw, 23px);

    line-height: 1.4;

    color: #ddd;

    margin-bottom: 13px;

}

.intro-content p:last-child {

    max-width: 620px;

    margin: auto;

    color: #858991;

    line-height: 1.55;

    font-size: 12px;

}


/* =========================================================
   SECTION AURA
========================================================= */

.project-section::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.025),
            transparent 65%
        );

    pointer-events: none;

    transition: .8s ease;

}

.project-section.section-active::before {

    transform:
        translate(-50%, -50%)
        scale(1.25);

}


/* =========================================================
   BUTTONS
========================================================= */

.outline-button {

    display: inline-block;

    padding: 10px 14px;

    border: 1px solid rgba(255,255,255,.18);

    color: #ddd;

    font-size: 8px;

    letter-spacing: .13em;

    transition: .3s ease;

}

.outline-button:hover {

    border-color: white;

    color: white;

    box-shadow:
        0 0 25px rgba(255,255,255,.1);

}

.disabled-button {
    opacity: .75;
    cursor: default;
    border-color: rgba(255,255,255,.12);
}

.disabled-button:hover {
    border-color: rgba(255,255,255,.12);
    color: #ddd;
    box-shadow: none;
}


/* =========================================================
   APPS (Evenly Balanced Centered Layout & Frame-Filling Icons)
========================================================= */

.apps-section {

    background:
        linear-gradient(
            135deg,
            #090a0c,
            #11100c
        );

}

.apps-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    max-width: 900px;

    margin: 0 auto;

    gap: 45px;

    align-items: center;

}

.app-showcase {

    width: 100%;

    max-width: 365px;

    margin: 0 auto;

}

.apps-banner {

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border: 1px solid rgba(198,162,91,.25);

    box-shadow:
        0 0 40px rgba(198,162,91,.08);

}

.app-icons {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 7px;

    margin-top: 10px;

}

.app-icon {

    aspect-ratio: 1;

    background: #111;

    border: 1px solid rgba(255,255,255,.1);

    padding: 0;

    overflow: hidden;

    display: block;

    transition: .3s ease;

}

.app-icon img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.app-icon:hover {

    transform: translateY(-4px);

    border-color: var(--gold);

    box-shadow:
        0 0 25px rgba(198,162,91,.2);

}

.project-info {

    width: 100%;

    max-width: 400px;

    margin: 0 auto;

    border-left: 1px solid rgba(255,255,255,.1);

    padding-left: 30px;

}

.info-line {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 11px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);

}

.info-line span {

    color: #686b72;

    font-size: 11px;

    letter-spacing: .13em;

}

.info-line strong {

    color: #ddd;

    font-size: 10px;

    letter-spacing: .08em;

    font-weight: 500;

}

.info-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;

}


/* =========================================================
   MUSIC (Symmetrical Dimensions & 3, 3, 1 Rows)
========================================================= */

.music-section {

    --music-accent: #a83b42;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(168,59,66,.12),
            transparent 40%
        ),
        #0b0c0f;

    transition:
        background .6s ease;

}

.music-section.lofi-mode {

    --music-accent: #5874c4;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(88,116,196,.15),
            transparent 40%
        ),
        #090c12;

}

.music-switch {

    display: flex;

    justify-content: center;

    margin-bottom: 25px;

    border: 1px solid rgba(255,255,255,.12);

    width: fit-content;

    margin-left: auto;
    margin-right: auto;

}

.music-toggle {

    background: transparent;

    border: 0;

    color: #686b72;

    padding: 9px 24px;

    font-family: inherit;

    font-size: 8px;

    letter-spacing: .2em;

    cursor: pointer;

}

.music-toggle.active {

    color: white;

    background: rgba(255,255,255,.08);

}

.music-label {

    color: var(--music-accent);

}

.music-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: stretch;

}

.streaming-area {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.streaming-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 10px;

    margin-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.1);

}

.streaming-heading span {

    color: var(--music-accent);

    font-size: 8px;

    letter-spacing: .15em;

}

.streaming-heading strong {

    font-size: 9px;

    letter-spacing: .1em;

}

/* 3 columns -> rows of 3, 3, 1 */
.streaming-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    flex: 1;

}

.streaming-icon {

    min-height: 82px;

    padding: 12px 6px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 9px;

    border: 1px solid rgba(255,255,255,.07);

    background: rgba(255,255,255,.015);

    transition: .3s ease;

}

.streaming-icon i {

    font-size: 24px;

    color: #eee;

    transition: .3s ease;

}

.streaming-icon span {

    color: #777b83;

    font-size: 8px;

    text-align: center;

    letter-spacing: .08em;

}

.streaming-icon:hover {

    transform: translateY(-4px);

    border-color: var(--music-accent);

    box-shadow:
        0 0 20px rgba(255,255,255,.1);

}

.streaming-icon:hover i {

    color: #fff;

    text-shadow: 0 0 12px rgba(255,255,255,.6);

}

.streaming-icon.streaming-icon-centered {

    grid-column: 2;

}

.music-playlists {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.playlist {

    display: none;

    height: 100%;

}

.playlist.active-playlist {

    display: flex;

    flex-direction: column;

    height: 100%;

}

.playlist-heading {

    display: flex;

    justify-content: space-between;

    padding-bottom: 10px;

    margin-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.1);

    font-size: 8px;

    letter-spacing: .12em;

}

.playlist-heading span {

    color: var(--music-accent);

}

.playlist iframe {

    display: block;

    width: 100%;

    height: 285px;

    border: 0;

    border-radius: 8px;

    flex: 1;

}

.music-footer {

    text-align: center;

    margin-top: 25px;

}


/* =========================================================
   TOMES OF MORTAL ETERNALS
========================================================= */

.tomes-section {
    padding-top: 58px;
    padding-bottom: 58px;
}

.tomes-section .section-heading {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.books-stack {
    height: 330px;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 1200px;
}

.book {
    position: absolute;

    width: 145px;
    height: 220px;

    cursor: pointer;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .35s ease,
        z-index .35s ease;
}

.book img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    box-shadow: 0 20px 35px rgba(0,0,0,.5);
}

.book-1 {
    transform: translateX(-190px) rotate(-7deg);
    z-index: 1;
}

.book-2 {
    transform: translateX(-95px) rotate(-3deg);
    z-index: 2;
}

.book-3 {
    transform: translateX(0) rotate(0);
    z-index: 3;
}

.book-4 {
    transform: translateX(95px) rotate(3deg);
    z-index: 2;
}

.book-5 {
    transform: translateX(190px) rotate(7deg);
    z-index: 1;
}

.book.is-front {
    z-index: 30 !important;
    transform:
        translateX(var(--front-x, 0px))
        translateY(-25px)
        scale(1.12)
        rotate(0deg);
    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.9))
        drop-shadow(0 0 35px rgba(255,255,255,.45));
}

.tomes-description {
    max-width: 650px;
    margin: 22px auto 0;
    text-align: center;
}

.tomes-description h3 {
    font-family: "Orbitron", sans-serif;
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--white);
}

.tomes-description p {
    margin-bottom: 0;
    color: #858991;
    font-size: 12px;
    line-height: 1.6;
}

.tomes-footer {

    text-align: center;

    margin-top: 25px;

}


/* =========================================================
   PHILOSOPHY (Solid White Glowing Outline)
========================================================= */

.philosophy-section {

    background: #0b0c0f;

}

.philosophy-layout {

    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap: 50px;

    align-items: center;

}

.philosophy-books {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 32px;

    padding: 15px;

}

.philosophy-book {

    width: 28%;

    position: relative;

    display: block;

    transition: transform .35s ease;

}

.philosophy-book img {

    width: 100%;

    box-shadow:
        0 20px 50px rgba(0,0,0,.5);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.philosophy-book::before {

    content: "";

    position: absolute;

    inset: -3px;

    border: 2px solid #ffffff;

    border-radius: 2px;

    opacity: 0;

    pointer-events: none;

    box-shadow:
        0 0 15px rgba(255,255,255,.85),
        0 0 32px rgba(255,255,255,.4);

    transition: opacity .25s ease;

}

.philosophy-book:hover::before {

    opacity: 1;

}

.philosophy-book:hover img {

    transform: scale(1.05);

    box-shadow:
        0 25px 60px rgba(0,0,0,.6);

}

.thinker-panel {

    text-align: center;

    padding: 35px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.035),
            transparent 70%
        );

}

.thinker-symbol {

    font-family: Georgia, serif;

    font-size: 80px;

    line-height: 1;

    color: #aaa;

    opacity: .35;

    margin-bottom: 12px;

}

.thinker-panel h3 {

    font-family: "Orbitron", sans-serif;

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 10px;

}

.thinker-panel p {

    color: #777b83;

    font-size: 12px;

    line-height: 1.6;

    margin-bottom: 18px;

}


/* =========================================================
   DIGITAL ART (Multi-directional Orbit, Flat Facing Center)
========================================================= */

.digital-art-section {
    padding-top: 58px;
    padding-bottom: 58px;
}

.nft-interactive {
    position: relative;

    width: 370px;
    height: 370px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.nft-orbit {
    position: absolute;
    inset: 0;

    transform-style: preserve-3d;

    cursor: pointer;
}

.orbit-ring {
    position: absolute;
    inset: 16%;

    border: 1px solid rgba(134,92,255,.35);
    border-radius: 50%;
    transform-origin: center center;
}

.ring-one {
    transform: rotateX(65deg) rotateZ(15deg);
}

.ring-two {
    transform: rotateY(65deg) rotateZ(-35deg);
}

.ring-three {
    transform: rotateX(72deg) rotateY(45deg);
}

.particle-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.track-clockwise {
    transform: rotateZ(0deg);
}

.track-counter {
    transform: rotateX(55deg) rotateY(20deg);
}

.orbit-particle {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px #fff,
        0 0 22px #7d5fff;
}

.particle-one {
    top: 10%;
    left: 45%;
}

.particle-two {
    top: 35%;
    right: 12%;
}

.particle-three {
    bottom: 14%;
    right: 32%;
}

.particle-four {
    bottom: 22%;
    left: 10%;
}

.particle-five {
    top: 40%;
    left: 15%;
}

.particle-six {
    top: 14%;
    right: 30%;
}

/* Center image remains flat */
.nft-center {
    position: relative;
    z-index: 25;

    width: 155px;
    height: 155px;

    padding: 0;

    border-radius: 50%;
    overflow: hidden;

    border: 2px solid rgba(255,255,255,.8);

    background: #080808;

    cursor: pointer;

    box-shadow:
        0 0 15px rgba(255,255,255,.35),
        0 0 45px rgba(108,77,255,.25);

    transform: none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.nft-center:hover {
    transform: scale(1.05) !important;

    box-shadow:
        0 0 20px rgba(255,255,255,.9),
        0 0 50px rgba(108,77,255,.55);
}

.nft-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* All 3 rings spin in completely different directions */
.nft-orbit.spinning .ring-one {
    animation: spinRingOne 1.25s cubic-bezier(.25,.7,.2,1) forwards;
}

.nft-orbit.spinning .ring-two {
    animation: spinRingTwo 1.25s cubic-bezier(.25,.7,.2,1) forwards;
}

.nft-orbit.spinning .ring-three {
    animation: spinRingThree 1.25s cubic-bezier(.25,.7,.2,1) forwards;
}

/* All particle tracks orbit in different directions */
.nft-orbit.spinning .track-clockwise {
    animation: spinTrackClockwise 1.25s cubic-bezier(.25,.7,.2,1) forwards;
}

.nft-orbit.spinning .track-counter {
    animation: spinTrackCounter 1.25s cubic-bezier(.25,.7,.2,1) forwards;
}

@keyframes spinRingOne {
    0% { transform: rotateX(65deg) rotateZ(15deg); }
    100% { transform: rotateX(65deg) rotateZ(375deg); }
}

@keyframes spinRingTwo {
    0% { transform: rotateY(65deg) rotateZ(-35deg); }
    100% { transform: rotateY(65deg) rotateZ(-395deg); }
}

@keyframes spinRingThree {
    0% { transform: rotateX(72deg) rotateY(45deg); }
    100% { transform: rotateX(432deg) rotateY(-315deg); }
}

@keyframes spinTrackClockwise {
    0% { transform: rotateZ(0deg) rotateX(15deg); }
    100% { transform: rotateZ(360deg) rotateX(15deg); }
}

@keyframes spinTrackCounter {
    0% { transform: rotateX(55deg) rotateY(20deg) rotateZ(0deg); }
    100% { transform: rotateX(55deg) rotateY(20deg) rotateZ(-360deg); }
}

.nft-info {
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
}

.nft-info p {
    margin-bottom: 16px;
    color: #858991;
    font-size: 12px;
}


/* =========================================================
   MERCH (Centered Frame Content & Glowing Border)
========================================================= */

.merch-section {

    background: #0b0c0f;

}

.merch-content {

    max-width: 1000px;

    margin: auto;

}

.merch-intro {

    max-width: 720px;

    margin: 0 auto 28px;

    text-align: center;

    color: #858991;

    font-size: 12px;

    line-height: 1.6;

}

.merch-sites {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}

.merch-site {

    min-height: 115px;

    padding: 16px 10px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    gap: 10px;

    border: 1px solid rgba(255,255,255,.09);

    background: rgba(255,255,255,.015);

    transition: .3s ease;

}

.merch-site:hover {

    border-color: #ffffff;

    box-shadow:
        0 0 18px rgba(255,255,255,.7),
        0 0 32px rgba(255,255,255,.2);

    transform: translateY(-4px);

}

.merch-site span {

    color: #5f636a;

    font-size: 8px;

    letter-spacing: .15em;

}

.merch-site strong {

    font-size: 9px;

    letter-spacing: .12em;

    color: var(--white);

}

.merch-site small {

    color: #777b82;

    font-size: 7px;

    letter-spacing: .15em;

}


/* =========================================================
   BEAT ARCHIVE (8 Pre-mapped MP3s & Gold Speaker)
========================================================= */

.beats-section {

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(180,124,69,.08),
            transparent 35%
        ),
        #0c0c0d;

}

.beats-layout {

    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap: 45px;

    align-items: center;

}

.beat-machine {

    border: 1px solid rgba(255,255,255,.12);

    background: #101113;

    padding: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.4);

}

.machine-top {

    display: flex;

    justify-content: space-between;

    color: #777;

    font-size: 8px;

    letter-spacing: .15em;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.08);

}

.pads {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    margin: 15px 0;

}

.pad {

    aspect-ratio: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 6px;

    background: #181a1d;

    border: 1px solid rgba(255,255,255,.08);

    color: #5f636a;

    font-size: 9px;

    transition: .2s ease;

    cursor: pointer;

}

.pad-num {
    font-size: 8px;
    letter-spacing: .1em;
}

.pad-icon {
    font-size: 11px;
}

.pad:hover {

    background: rgba(180,124,69,.15);

    border-color: var(--amber);

    color: #fff;

}

/* Active pad with Gold Speaker */
.pad.pad-active {

    background: rgba(198,162,91,.22);

    border-color: var(--gold);

    color: var(--gold);

    box-shadow:
        0 0 20px rgba(198,162,91,.4),
        inset 0 0 10px rgba(198,162,91,.2);

}

.pad.pad-active .pad-icon {
    color: var(--gold);
    animation: speakerPulse .8s infinite alternate ease-in-out;
}

@keyframes speakerPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
}

.machine-display {

    padding: 12px;

    background: #08090a;

    color: var(--gold);

    text-align: center;

    font-size: 8px;

    letter-spacing: .2em;

    border: 1px solid rgba(255,255,255,.04);

}

.beats-info h3 {

    font-family: "Orbitron", sans-serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.3;

    margin-bottom: 12px;

}

.beats-info p {

    color: #7e8188;

    line-height: 1.6;

    font-size: 12px;

    margin-bottom: 18px;

}

.beats-button-wrap {
    display: block;
}


/* =========================================================
   ORIGINAL ARTIST (Square + 2 Opposing Diamonds)
========================================================= */

.artist-section {

    background: #090a0c;

}

.artist-stage {

    min-height: 330px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

}

.artist-shape-stage {

    width: 250px;

    height: 250px;

    position: relative;

    margin: auto;

    display: grid;

    place-items: center;

}

.artist-shape-square {

    position: absolute;

    inset: 0;

    border: 1px solid rgba(168,59,66,.45);

    box-shadow: 0 0 20px rgba(168,59,66,.12);

    transition: border-color .4s ease, box-shadow .4s ease;

}

.artist-shape-diamond {

    position: absolute;

    border: 1px solid rgba(168,59,66,.6);

    transform-origin: center center;

    transition: transform .6s cubic-bezier(.2,.8,.2,1);

}

.artist-shape-diamond-1 {

    width: 170px;

    height: 170px;

    transform: rotate(45deg);

}

.artist-shape-diamond-2 {

    width: 120px;

    height: 120px;

    transform: rotate(45deg);

    border-color: rgba(255,255,255,.3);

}

.artist-core {

    position: relative;

    z-index: 10;

    width: 75px;

    height: 75px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border: 1px solid rgba(255,255,255,.4);

    background: #090a0c;

    color: #eee;

    font-family: "Orbitron", sans-serif;

    font-size: 9px;

    letter-spacing: .15em;

    cursor: pointer;

    transition: .3s ease;

}

.artist-core i {

    font-size: 18px;

    color: var(--red);

    transition: .3s ease;

}

.artist-shape-stage:hover .artist-shape-square {

    border-color: var(--red);

    box-shadow: 0 0 25px rgba(168,59,66,.45);

}

.artist-shape-stage:hover .artist-shape-diamond-1 {

    transform: rotate(225deg) scale(1.06);

    border-color: var(--red);

    box-shadow: 0 0 18px rgba(168,59,66,.4);

}

.artist-shape-stage:hover .artist-shape-diamond-2 {

    transform: rotate(-135deg) scale(0.92);

    border-color: #fff;

    box-shadow: 0 0 20px rgba(255,255,255,.4);

}

.artist-shape-stage:hover .artist-core {

    border-color: #fff;

    box-shadow: 0 0 20px rgba(255,255,255,.3);

}

.artist-shape-stage:hover .artist-core i {

    color: #fff;

    text-shadow: 0 0 10px rgba(255,255,255,.8);

}

.artist-copy {

    padding-left: 40px;

    border-left: 1px solid rgba(255,255,255,.1);

}

.artist-copy span {

    color: var(--red);

    font-size: 8px;

    letter-spacing: .2em;

}

.artist-copy h3 {

    font-family: "Orbitron", sans-serif;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 500;

    margin: 10px 0;

}

.artist-copy p {

    color: #777b82;

    line-height: 1.6;

    max-width: 400px;

    font-size: 12px;

}


/* =========================================================
   GAMES (Active Blinking Status Dot)
========================================================= */

.games-section {

    background:
        radial-gradient(
            circle at center,
            rgba(79,168,197,.06),
            transparent 60%
        ),
        #080b0d;

}

.game-terminal {

    max-width: 850px;

    margin: auto;

    background: #070809;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);

}

.terminal-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 14px;

    background: #111316;

    border-bottom: 1px solid rgba(255,255,255,.08);

}

.terminal-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #444;

}

.terminal-active-dot {

    background: #4fa8c5;

    box-shadow: 0 0 8px #4fa8c5;

    animation: terminalBlink 1s infinite alternate ease-in-out;

}

@keyframes terminalBlink {

    0% {

        opacity: .25;

        transform: scale(.85);

    }

    100% {

        opacity: 1;

        transform: scale(1.2);

        box-shadow: 0 0 14px #4fa8c5;

    }

}

.terminal-title {

    margin-left: 10px;

    color: #666b72;

    font-size: 8px;

    letter-spacing: .15em;

}

.terminal-body {

    padding: 25px;

    min-height: 220px;

    font-family: monospace;

    color: #666f74;

    font-size: 11px;

    line-height: 1.9;

}

.terminal-body strong {

    color: #8d989c;

    font-weight: normal;

}

.terminal-cursor {

    color: var(--cyan);

    animation: cursorBlink .8s infinite;

}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* =========================================================
   FUTURE TIMELINE (Horizontal Left-To-Right Always)
========================================================= */

.future-section {

    background: #0b0c0e;

}

.timeline {

    position: relative;

    max-width: 1000px;

    height: 130px;

    margin: 35px auto 0;

}

.timeline-line {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.3),
            transparent
        );

}

.timeline-node {

    position: absolute;

    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 90px;

    text-align: center;

    cursor: pointer;

    transition: .3s ease;

}

.timeline-node::before {

    content: "";

    width: 9px;
    height: 9px;

    display: block;

    margin: auto auto 12px;

    border-radius: 50%;

    background: #d4d5d8;

    box-shadow:
        0 0 8px rgba(255,255,255,.2);

    transition: .3s ease;

}

.timeline-node span {

    display: block;

    color: #656970;

    font-size: 7px;

    margin-bottom: 4px;

    transition: .3s ease;

}

.timeline-node strong {

    display: block;

    font-size: 8px;

    letter-spacing: .1em;

    transition: .3s ease;

}

.timeline-node:hover {

    transform:
        translate(-50%, -50%)
        scale(1.08);

}

.timeline-node:hover::before {

    transform: scale(1.8);

    background: white;

    box-shadow:
        0 0 10px white,
        0 0 25px white,
        0 0 45px rgba(255,255,255,.7);

}

.timeline-node:hover span,
.timeline-node:hover strong {

    color: white;

    text-shadow:
        0 0 8px white,
        0 0 18px rgba(255,255,255,.5);

}

.node-1 {
    left: 5%;
}

.node-2 {
    left: 22%;
}

.node-3 {
    left: 40%;
}

.node-4 {
    left: 58%;
}

.node-5 {
    left: 78%;
}

.node-6 {
    left: 95%;
}


/* =========================================================
   ARCHIVE
========================================================= */

.archive-section {

    position: relative;

    min-height: 700px;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;

    background: #050607;

    padding-top: 110px;

}

.archive-background {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );

}

.archive-content {

    position: relative;

    z-index: 2;

}

.archive-content h2 {

    font-family: "Orbitron", sans-serif;

    font-size: clamp(27px, 4vw, 48px);

    line-height: 1.05;

    font-weight: 500;

}

.archive-content p {

    color: #777b82;

    margin-top: 12px;

    font-size: 11px;

}

.fractal-vault {

    position: relative;

    width: 245px;
    height: 245px;

    margin: 38px auto 18px;

    display: grid;

    place-items: center;

    cursor: pointer;

    transform-style: preserve-3d;

    transform:
        rotateX(35deg)
        rotateY(0deg)
        rotateZ(0deg);

    transition:
        transform .75s cubic-bezier(.2,.8,.2,1);

    outline: none;

}

.fractal-layer {

    position: absolute;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(255,255,255,.45);

    transform-style: preserve-3d;

    transition:
        border-color .3s,
        box-shadow .3s;

}

.layer-1 {

    transform:
        rotateX(55deg)
        rotateY(25deg)
        rotateZ(45deg);

}

.layer-2 {

    transform:
        rotateX(35deg)
        rotateY(65deg)
        rotateZ(15deg);

    width: 190px;
    height: 190px;

}

.layer-3 {

    transform:
        rotateX(75deg)
        rotateY(10deg)
        rotateZ(75deg);

    width: 115px;
    height: 115px;

}

.layer-4 {

    transform:
        rotateX(20deg)
        rotateY(45deg)
        rotateZ(90deg);

    width: 215px;
    height: 215px;

}

.fractal-core {

    width: 55px;
    height: 55px;

    border: 1px solid white;

    transform:
        rotateX(45deg)
        rotateY(45deg);

    box-shadow:
        0 0 25px rgba(255,255,255,.3);

}

.fractal-vault:hover .fractal-layer,
.fractal-vault:focus .fractal-layer {

    border-color: white;

    box-shadow:
        0 0 10px rgba(255,255,255,.4),
        0 0 25px rgba(255,255,255,.12);

}

.archive-hint {

    color: #555a61;

    font-size: 7px;

    letter-spacing: .18em;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    background: #060708;

    border-top:
        1px solid rgba(255,255,255,.07);

}

.footer-top {

    width: min(1400px, 100%);

    margin: auto;

    padding: 45px 35px 35px;

    display: grid;

    grid-template-columns:
        1.5fr
        repeat(8, 1fr);

    gap: 28px;

}

.footer-brand {

    padding-right: 20px;

}

.footer-logo {

    display: flex;

    align-items: center;

    gap: 8px;

    font-family: "Orbitron", sans-serif;

    font-size: 16px;

    letter-spacing: .12em;

    margin-bottom: 10px;

}

.footer-logo-img {

    width: 20px;

    height: 20px;

    object-fit: contain;

}

.footer-brand p {

    color: #555a61;

    font-size: 9px;

    margin-bottom: 20px;

}

.footer-top-link {

    color: #888c93;

    font-size: 8px;

    letter-spacing: .12em;

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.footer-column h4 {

    font-size: 8px;

    color: #ddd;

    letter-spacing: .15em;

    margin-bottom: 5px;

}

.footer-column a {

    color: #5f636a;

    font-size: 8px;

    line-height: 1.4;

    transition: .2s ease;

}

.footer-column a i {

    margin-right: 4px;

}

.footer-column a:hover {

    color: white;

    text-shadow:
        0 0 10px rgba(255,255,255,.5);

}

.footer-bottom {

    padding: 18px 35px;

    border-top:
        1px solid rgba(255,255,255,.06);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #4e5259;

    font-size: 8px;

}

.footer-bottom a:hover {

    color: white;

}

.footer-divider {

    padding: 0 8px;

    color: #33363b;

}


/* =========================================================
   PRIVACY POLICY
========================================================= */

.privacy-modal {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

}

.privacy-modal.privacy-open {

    display: flex;

}

.privacy-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.85);

    backdrop-filter:
        blur(12px);

}

.privacy-window {

    position: relative;

    z-index: 2;

    width: min(800px, 100%);

    max-height: 85vh;

    overflow-y: auto;

    padding: 40px;

    background:
        linear-gradient(
            145deg,
            #111317,
            #090a0c
        );

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        0 30px 100px rgba(0,0,0,.8);

}

.privacy-window h2 {

    font-family: "Orbitron", sans-serif;

    font-size: 30px;

    font-weight: 500;

    margin-bottom: 25px;

}

.privacy-close {

    position: absolute;

    top: 15px;
    right: 18px;

    background: transparent;

    border: 0;

    color: #777;

    font-size: 30px;

    cursor: pointer;

}

.privacy-close:hover {

    color: white;

}

.privacy-content {

    color: #858991;

    font-size: 12px;

    line-height: 1.7;

}

.privacy-content h3 {

    color: #ddd;

    font-size: 12px;

    margin:
        22px 0 6px;

}

.privacy-content p {

    margin-bottom: 10px;

}

.privacy-updated {

    margin-top: 25px;

    color: #555a61;

    font-size: 9px;

}


/* =========================================================
   RESPONSIVE (Tablet)
========================================================= */

@media (max-width: 1150px) {

    .footer-top {

        grid-template-columns:
            repeat(4, 1fr);

    }

    .footer-brand {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 900px) {

    .site-nav {

        padding:
            10px 18px;

    }

    .site-nav nav {

        gap: 10px;

    }

    .site-nav nav a {

        font-size: 7px;

    }

    .project-section,
    .section {

        padding:
            45px 20px;

    }

    .apps-layout,
    .music-layout,
    .philosophy-layout,
    .beats-layout,
    .artist-stage {

        grid-template-columns: 1fr;

    }

    .project-info,
    .artist-copy {

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.1);

        padding:
            25px 0 0;

    }

    .project-info {
        max-width: 420px;
    }

    .books-stack {

        height: 330px;

    }

    .philosophy-books {

        max-width: 600px;

        margin: auto;

    }

    .artist-stage {

        gap: 20px;

    }

    .artist-copy {

        text-align: center;

    }

    .artist-copy p {

        margin: auto;

    }

    .footer-top {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


/* =========================================================
   MOBILE (<= 600px)
========================================================= */

@media (max-width: 600px) {

    .site-nav {

        min-height: 60px;

        padding:
            8px 14px;

    }

    .nav-logo {

        font-size: 9px;

    }

    .site-nav nav {

        display: none;

    }

    .hero {

        min-height: 550px;

    }

    .section-heading h2 {

        font-size: 25px;

    }

    /* Top Tier Apps: Buttons Centered on Mobile */
    .info-links {

        justify-content: center;

    }

    .music-layout {

        gap: 25px;

    }

    .streaming-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .streaming-icon {

        min-height: 70px;

    }

    .books-stack {

        transform:
            scale(.58);

        margin-left:
            -70px;

        margin-right:
            -70px;

    }

    .philosophy-books {

        gap: 13px;

    }

    .thinker-panel {

        padding:
            25px 18px;

    }

    /* Goods: 2 columns with 5th option centered below */
    .merch-sites {

        grid-template-columns: repeat(2, 1fr);

    }

    .merch-site:nth-child(5) {

        grid-column: 1 / -1;

        width: 60%;

        margin: 0 auto;

    }

    /* Beat Archive: Centered info text & button on mobile */
    .beats-info {

        text-align: center;

    }

    .beats-info h3,
    .beats-info p {

        margin-left: auto;

        margin-right: auto;

    }

    .beats-button-wrap {

        display: flex;

        justify-content: center;

    }

    /* Future Timeline: Horizontal Left to Right on Mobile */
    .timeline {

        height: 110px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        margin-top: 25px;

    }

    .timeline-node {

        width: 58px;

    }

    .timeline-node span {

        font-size: 6px;

    }

    .timeline-node strong {

        font-size: 6.5px;

    }

    .timeline-node::before {

        width: 7px;

        height: 7px;

        margin-bottom: 8px;

    }

    .artist-shape-stage {

        width: 200px;

        height: 200px;

    }

    .artist-shape-diamond-1 {
        width: 140px;
        height: 140px;
    }

    .artist-shape-diamond-2 {
        width: 95px;
        height: 95px;
    }

    .footer-top {

        grid-template-columns:
            repeat(2, 1fr);

        padding:
            35px 20px;

    }

    .footer-brand {

        grid-column:
            1 / -1;

    }

    .footer-bottom {

        padding:
            15px 20px;

        flex-direction: column;

    }

    .privacy-window {

        padding:
            30px 20px;

    }

}