/* ================================
   GRAPHIC PAGE BASE
================================ */
.portfolio-page section {
    min-height: 100vh;
    scroll-margin-top: 35px;
}

.graphic-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    text-align: center;
    padding: 120px 80px;
}

.graphic-hero p {
    margin-top: 1rem;
    font-size: 1.1rem;
    opacity: 0.5;
}

/* ================================
    NAVBAR
================================ */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
    height: 35px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--white );
    z-index: 1000;
}

nav .left a {
    color: var(--light-grey);
    padding-left: 20px;
    font-size: 22px;
    font-weight: 600;
}

nav .left a:hover {
    color: var(--carbon-black);
}

nav .right a {
    display: inline-flex;    
    align-items: center;     
    margin: 0 20px;
    padding: 0 40px;
    color: var(--light-grey);
    transform: translateY(-4px);
    font-weight: 200;
    font-size: 14px;
}

nav .right a:hover {
    color: var(--carbon-black);
}

/* Add these two lines */
nav .right a span {
    display: inline-flex;
    align-items: center;
    transform: translateY(4px);
   
}

nav .right a svg {
  height: 1.1em;
  width: 1.1em;
}

@media(max-width: 600px) {
    /*NAVBAR*/
    nav {
        padding: 20px;
    }

    nav .right a {
        font-size: 24px;

    }

    nav .right a:last-child {
        color: var(--carbon-black);
        background: transparent;
        padding: 0;
    }

    nav .right a span {
        display: none;
    }

    /* Adjust section text for mobile */
    .quote-overlay h1 {
        font-size: 2rem;
    }

    .quote-overlay p {
        font-size: 1.2rem;
    }

    .section-overlay h2 {
        font-size: 2rem;
    }

    .section-overlay p {
        font-size: 1rem;
    }

    /* Disable parallax on mobile */
    section {
        background-attachment: scroll;
    }
}

/* ================================
   HERO
================================ */
.hero-title-wrap {
    position: absolute;
    bottom: 40vh;        /* distance from bottom — increase to move up */
    left: 16px;         /* distance from left edge */
    pointer-events: none;
    z-index: 0;
}

.graphic-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    /* background: #171717; */
}

.graphic-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0em;
    font-size: clamp(5rem, 14vw, 9rem);
    text-decoration: none;
    color: var(--bright-indigo);
}

.graphic-hero p {
    opacity: 20%;
    font-size: clamp(1rem, 2vw, 1rem);
}