/*  CORE SETTINGS & VARIABLES */
:root {
    --gold: #FFD42C;
    --white: #F9F8F5;
    --black: #0C0701;
    --gray50: #ADADAD80;
    --gray: #ADADAD;

    --pad-x: 8vw;
    --pad-y: 10vh;

    --col-count: 6;
    --row-height: 40vh;
}

body {
    background-color: var(--white);
    color: var(--black);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    /* ONLY HORIZONTAL LINES */
    background-image: linear-gradient(to bottom, var(--gray50) 1px, transparent 1px);
    background-size: 100% var(--row-height);
    background-position: 0 var(--pad-y);
    background-repeat: repeat-y;
}

/* THE LAYOUT ENGINE */
.inner {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: 0 auto;
    min-height: 100vh;
    padding: var(--pad-y) var(--pad-x);
    box-sizing: border-box;

    /* ONLY VERTICAL LINES */
    background-image: linear-gradient(to right, var(--gray50) 1px, transparent 1px);
    /* Calculate size based on the inner width minus your side padding */
    background-size: calc((100% - (var(--pad-x) * 2)) / var(--col-count)) 100%;
    background-position: var(--pad-x) 0;
}

/* The right-most vertical border edge */
.grid-visuals,
.grid-content {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    grid-auto-rows: var(--row-height);
}

/*  LAYER 1: GRID VISUALS */
.grid-visuals {
    position: absolute;
    top: var(--pad-y);
    left: var(--pad-x);
    right: var(--pad-x);
    bottom: var(--pad-x);
    z-index: 0;
    pointer-events: none;
}

/* --- MARKERS --- */
.marker {
    grid-column: var(--col);
    grid-row: var(--row);
    width: 0;
    height: 0;
    position: relative;
    transform: translate(-50%, -50%);
}

.marker[style*="--col: 7"] {
    grid-column: 6;
    left: 100%;
    transform: translate(-50%, -50%);
}

.marker.square::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: var(--gray50) solid 1px;
    top: -7px;
    left: -7px;
}

.marker.plus::after {
    content: '+';
    position: absolute;
    font-size: 24px;
    line-height: 0;
    color: var(--black);
    transform: translate(-50%, -50%);
}

.grid-content {
    position: relative;
    z-index: 10;
}

/*  selector ======================================== */

::selection {
    background-color: var(--gray);
    color: var(--black);
}

::-moz-selection {
    background-color: var(--gray);
    color: var(--black);
}

/*  scroll bar ======================================== */
html::-webkit-scrollbar {
    width: 0px;
    /* was 10px*/
}

html::-webkit-scrollbar-track {
    border-left: var(--gray50) 1px solid;
    background: var(--white);
}

html::-webkit-scrollbar-thumb {
    background: var(--black);
}

/*  cta links */
.cta,
.tag,
.footer-menu,
.thank-you-message,
.reset-filter,
.sort,
.reset-filter {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: var(--black);
    color: var(--white);
    padding: 10px 20px;
    width: fit-content;
    height: fit-content;
    white-space: nowrap;
    cursor: pointer;
}

.tag,
.footer-menu,
.reset-filter,
.sort,
.reset-filter {
    gap: 0;
    padding: 5px 10px;
}


.sort {
    gap: 0;
    padding: 2.5px 7.5px;
}

.cta svg rect {
    fill: currentColor;
}

.thank-you-message {
    cursor: none;
}

.flip svg {
    transform: rotate(180deg);
}

.link {
    border-bottom: 3px solid var(--black);
    display: inline-block;
}



/* --- ICON BASE COLORS --- */

.icon-burger svg rect {
    fill: var(--black);
}

.icon-burger svg path {
    stroke: var(--white);
}

.icon-cancel svg rect {
    fill: var(--white);
}

.icon-cancel svg path {
    stroke: var(--gray);
}

/* --- GLOBAL HOVER STATE  --- */

@media (hover: hover) {

    .menu-trigger:hover svg rect,
    .footer-scroll:hover svg rect,
    .menu-icon:hover svg rect {
        fill: var(--gold);
    }

    .menu-icon:hover svg path {
        fill: var(--black);
    }

    .menu-trigger:hover svg path,
    .reset-filter:hover svg path {
        stroke: var(--black);
    }

    .footer-scroll:hover rect:not(:first-child) {
        fill: var(--black);
    }

    .link:hover {
        border-bottom: 3px solid var(--gold);
        color: var(--gold);
    }

    .cta:hover,
    .tag:hover,
    .footer-menu:hover,
    .reset-filter:hover,
    .sort:hover {
        background: var(--gold);
        color: var(--black);
    }

    .project-icon:hover rect {
        fill: var(--black);
    }

    .details-wrapper .tag:hover {
        background: var(--white);
    }

    .details-wrapper .cta:hover {
        background: var(--black);
        color: var(--white);
    }

    .project-bar.active button:hover {
        background: var(--white);
    }

    .project-bar.active .project-icon:hover rect {
        fill: var(--black) !important;
    }

    .project-bar button:hover {
        background: var(--gold);
    }

    .music-wrapper .cta:hover {
        background: var(--gold);
    }

    .contact-form input:hover,
    .contact-form textarea:hover {
        background: var(--gold);
        color: var(--black);
    }

    .contact-form input:hover::placeholder,
    .contact-form textarea:hover::placeholder {
        opacity: 1;
        color: var(--black);
    }

    .contact-form input:hover+label,
    .contact-form textarea:hover+label {
        opacity: 0;
    }

    .menu-item:hover {
        color: var(--gold);
    }

    .menu-trigger:hover .icon-cancel svg rect {
        fill: var(--gold);
    }

    .menu-trigger:hover .icon-cancel svg path {
        stroke: var(--black);
    }
}

.footer-scroll rect:not(:first-child) {
    fill: var(--white);
}

.footer-scroll svg rect,
.music-wrapper .cta svg path {
    fill: var(--black);
}

.ctrl-btn svg path,
.ctrl-btn svg rect {
    fill: var(--white);
}

.ctrl-btn svg path[stroke] {
    stroke: var(--white);
}

/* Ensure the trigger is sized correctly for the swap */
.menu-trigger {
    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    text-decoration: none;
}

.reset-filter svg path {
    stroke: var(--white);
}

/* custom cursor ================================ */
* {
    cursor: none !important;
}

@keyframes flicker {

    0%,
    100% {
        border-color: var(--black);
    }

    33%,
    66% {
        border-color: transparent;
    }
}

.custom-cursor.flicker {
    animation: flicker 0.2s linear 3;
}

.custom-cursor {
    width: 20px;
    height: 20px;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: var(--gold);
    border: 1px solid var(--black);
    z-index: 10001;
}

.custom-cursor.clickable {
    background: transparent;
    border: 1px solid var(--black);
}

.cross-lines {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
}

.custom-cursor.clickable .cross-lines {
    display: block;
}

.vertical-line,
.horizontal-line {
    position: fixed;
    background: none;
    z-index: 10000;
}

.vertical-line {
    width: 1px;
    height: 200vh;
    top: -100vh;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px dashed var(--gray50);
}

.horizontal-line {
    height: 1px;
    width: 200vw;
    left: -100vw;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px dashed var(--gray50);
}

.custom-cursor,
.cross-lines,
.vertical-line,
.horizontal-line {
    transition: filter 0.1s linear;
}

.vertical-line,
.horizontal-line {
    border-color: var(--black);
    opacity: 0.5;
}

.custom-cursor.active {
    background: var(--black) !important;
}

/* MOBILE ========================================= */

@media screen and (max-width: 768px) {

    :root {
        --col-count: 3;
        --pad-x: 20px;
        --pad-y: 20px;
        --row-height: 375px;
    }

    .home-page,
    .menu-overlay-layer,
    .error-404 {
        --row-height: 47.5svh !important;
    }

    .inner {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .marker[style*="--col: 7"] {
        grid-column: 3 !important;
        left: 100% !important;
    }

    .marker[style*="--col: 5"],
    .marker[style*="--col: 6"] {
        grid-column: 3 !important;
    }

    * {
        cursor: auto !important;
    }

    .custom-cursor,
    .cross-lines,
    .vertical-line,
    .horizontal-line {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .cta,
    .menu-trigger,
    .link {
        pointer-events: auto;
    }
}