* {
    box-sizing: border-box;
}

html {
    cursor: url('../images/regularcursor.webp') 4 4, auto;
}

:root {
    --charcoal: #1C1C1C;
    --blood-red: #7f0811;
    --gold: #CAAA49;
    --chev-h: 2rem;
    --slope: 168.7deg;
}

@media (min-width: 48rem) {
    :root {
        --chev-h: 3rem;
        --slope: 174deg;
    }
}


header {
    display: flex;
    align-items: center;
    height: 3.5rem;
    background-color: var(--charcoal);
    position: relative;
    z-index: 1;

}

body {
    background-color: var(--blood-red);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

}

.menu-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.menu-toggle {
    position: relative;
    z-index: 2;
    margin-left: 1rem;
}

label {
    display: flex;
    cursor: url('../images/hovercursor.webp') 2 16, pointer;


}

label:hover span {
    background-color: var(--gold);

}

.menu-checkbox:focus-visible + .menu-toggle .chevron-link {
    background-color: var(--gold);
}

.chevron-link {
    display: block;
    clip-path: polygon(0 0,
            calc(100% - 0.75rem) 0,
            100% 50%,
            calc(100% - 0.75rem) 100%,
            0 100%,
            0.75rem 50%);
    background-color: var(--blood-red);
    height: var(--chev-h);
    width: 1.5rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}


.side-menu {
    overflow: hidden;
}

.side-menu ul {
    display: flex;
    gap: 0.25em;
    margin: .5rem;
    padding: 0;
    list-style: none;
    transform: translateX(-130%);
        visibility: hidden;
    transition: transform 0.4s ease, visibility 0.4s;
}

.menu-checkbox:checked~.side-menu ul {
    transform: translateX(0);
        visibility: visible;
}

.side-menu ul {
    list-style: none;
    display: flex;
    padding: 0;
    gap: 0.5rem;
}

.side-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 0.75rem 0rem;
    background-color: var(--blood-red);
    color: var(--gold);
    clip-path: polygon(0 0,
            calc(100% - var(--point)) 0,
            100% 50%,
            calc(100% - var(--point)) 100%,
            0 100%,
            var(--point) 50%);
    font-family: 'Antonio', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0em;
    --h: 2rem;
    --point: calc(var(--chev-h) * 0.3);
    height: var(--chev-h);
    width: 3.75rem;
    font-size: 0.8rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}



.side-menu li a:hover, .side-menu li a:focus-visible {
    background-color: var(--gold);
    cursor: url('../images/hovercursor.webp') 2 16, pointer;
    color: var(--charcoal)
}

ul {
    list-style: none;
}


.diagonal {
    width: 100%;
    aspect-ratio: 3 / 1;
    background: linear-gradient(var(--slope),
            var(--charcoal) 0 calc(44% - 0.5px),
            transparent calc(44% + 0.5px) calc(46% - 0.5px),
            var(--charcoal) calc(46% + 0.5px) calc(48% - 0.5px),
            transparent calc(48% + 0.5px) calc(50% - 0.5px),
            var(--charcoal) calc(50% + 0.5px) calc(51% - 0.5px),
            transparent calc(51% + 0.5px));
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.hero {
    position: relative;
}

.heroimage {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    animation: slide-in 1s ease-out both;
    right: 0;
    top: calc(20vh - 10rem);
    bottom: -2rem;
    margin-right: 1rem;


}

@media (min-width: 48rem) {


    .side-menu li a {
        width: 6rem;
        font-size: 1.25rem;

    }
}

.heroimage img {
    display: block;
    Height: 90%;
    width: auto;
    margin-left: auto;
}

@keyframes slide-in {
    from {
        transform: translateX(-10rem);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.black-wedge {
    width: 100%;
    aspect-ratio: 5 / 1;
    background: linear-gradient(var(--slope),
            transparent calc(50% - 0.5px),
            var(--charcoal) calc(50% + 0.5px));
    position: relative;
    z-index: 3;
    margin-bottom: -1px;
}

@media (min-width: 48rem) {
    :root {
        --chev-h: 3rem;
        --slope: 174deg;
    }

    .diagonal {
        aspect-ratio: 6 / 1;
    }

    .black-wedge {
        aspect-ratio: 8 / 1;
    }

    .heroimage {
        top: max(calc(20vh - 15rem), 0rem);
        margin-right: 20%;
    }
}


h2 {
    font-family: 'Antonio', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0em;

}

.content {

    background-color: var(--charcoal);
    flex: 1;
    padding: 1rem;
    color: #e8dfcf;
    z-index: 3;
}

.content section {
    display: none;
}

.content section:target {
    display: block;
}

.content:not(:has(section:target)) #home {
    display: block;
}

.content section:target,
.content:not(:has(section:target)) #home {
    animation: fade-in 0.4s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

p {
    padding: 0;
    margin: 0;
    line-height: 1.5;

}



h1,
li,
a,
body,
header {
    font-family: 'Work Sans', sans-serif;
}

section a:link {
    text-decoration: none;
    color: var(--gold);
}

section a:visited {
    text-decoration: none;
    color: var(--gold);
}

section a:hover, section a:focus-visible {
    color: var(--blood-red);
    cursor: url('../images/hovercursor.webp') 2 16, pointer;
}


.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.project-card {
    position: relative;
    display: block;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease-in-out;
}

.project-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(46, 40, 41, 0.75);
    padding: 1.25rem 0.5rem 0.5rem;
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
    color: #e8dfcf;
    font-family: 'Antonio', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
}

@media (min-width: 48rem) {
    .project-title {
        padding: 2.5rem 1rem 1rem;
        font-size: 1.5rem;
    }

    .project-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.project-card:hover img, .project-card:focus-visible img {
    transform: scale(1.05);
}

.project-card:hover .project-title, .project-card:focus-visible .project-title {

    color: var(--gold);
    background: rgba(0, 0, 0, 0.9);
    transition: color 0.3s ease-in-out;
}

section ul {
    padding-left: 0;

}

footer {
    background-color: var(--charcoal);
    color: var(--gold);
    text-align: center;
    padding: 1rem;
    margin-top: auto;
    font-size: .5rem;
}


/* claude use link: https://claude.ai/share/eb9f703a-9817-4356-a689-109a0c714227

used for a lot of the animation stuff and div shape creation 
used for content swap links 
used for getting that stupid image in the right spot
used for helping getting the menu to slide properly and hide when not clicked
it also taught me to define document colors
used to help make the custom cursor stuff work
used to do some of the responsive slope for the imagery as well as anti-aliasing
got the idea to use my hover for focus-visible stuff. 
overall claude wasn't used to write the code directly into the file but many blocks were assessed and modified after being pulled from claude.*/