:root {
    /* Background */
    --bg-primary: #f5f2eb;      /* Aged paper */
    --bg-secondary: #faf8f3;    /* Cleaner paper */
    --bg-card: #ffffff;         /* White paper */
    
    /* Ink colors */
    --text-primary: #2a2520;    /* Soft black */
    --text-secondary: #6b6560;  /* Gray ink */
    --text-accent: #8b4513;     /* Rust/brown */
    --text-red: #8b0000;   /* Deep red */
    
    /* Texture */
    --border-rough: #d4cfc7;
    
    /* Typography
    --font-heading: 'Times New Roman', Times, serif;
    --font-body: 'Courier New', Courier, monospace;
    
    /* Layout */
    --right-margin: 6vw;
    --content-width: 650px;
}

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

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

nav {
    position: fixed;
    left: var(--right-margin);
    top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    z-index: 100;
}

.nav-tab {
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    text-transform: lowercase;
    text-align: left;
}

.nav-tab:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-accent);
}

.nav-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}


/* MAIN CONTAINER - Right aligned =============================================================================================================== */

main {
    margin-left: auto;
    margin-right: var(--right-margin);
    max-width: var(--content-width);
    padding: 4rem 1rem 4rem 8rem;
    min-height: 100vh;
}


/* HOME PAGE - Header & Text =============================================================================================================== */

.header-image-container {
    width: 100%;
    margin-bottom: 3rem;
    position: relative;
}


.header-image {
    width: 100%;
    height: auto;
    display: block;
}

.text-section {
    width: 100%;
    text-align: right;
}

.text-section h1 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 2rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.text-section p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-align: right;
    hyphens: auto;
}


/* PROJECTS PAGE =============================================================================================================== */

.projects-section h1 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 3rem;
    text-align: right;
    color: var(--text-primary);
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.project-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 1rem;
    width: calc(100% + 6rem);
    margin-left: -6rem;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border: 1px solid var(--border-rough);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: right;
    position: relative;
}

.project-year {
    position: absolute;
    left: 1rem;
    top: 3.5rem;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-red);
    letter-spacing: 0.1em;
    white-space: nowrap;
}


.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 1rem;
}


/* border */
.project-card::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: -2px;
    bottom: -2px;
    background: var(--bg-primary);
    z-index: -1;
    opacity: 0.6;
}

.project-card:hover {
    transform: translate(-3px, -3px);
    border-color: var(--text-accent);
}

.project-card:hover::before {
    transform: translate(3px, 3px);
    opacity: 0.8;
}

.project-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-rough);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(0.3) contrast(0.9);
}

.project-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply; /* Ink-like blending */
}

.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.project-content h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: normal;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.project-content p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 90%;
}


/* LINKS =============================================================================================================== */

.links-section h1,
.contact-section h1 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 3rem;
    text-align: right;
}

.links-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-rough);
}

.link-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-rough);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    position: relative;
}

.link-item:hover {
    padding-right: 1rem;
    color: var(--text-accent);
}

.link-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.link-url {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

/* IN-TEXT LINKS =============================================================================================================== */

.inline-link {
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: inherit;
    border-bottom: 1px solid var(--text-accent);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.inline-link:hover {
    color: var(--text-red);
    border-bottom-color: var(--text-red);
}

/* CONTACT =============================================================================================================== */

.contact-content {
    text-align: right;
}

.contact-content p {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
    line-height: 1.8;
}

.contact-methods {
    display: grid;
    grid-template-columns: 60px 60px;
    grid-template-rows: repeat(3, 60px);
    gap: 1rem;
    justify-content: end;
    margin-right: -1.1rem;
}

.contact-method {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 0.2s ease;
}

.contact-method:hover {
    transform: scale(1.1);
}

.contact-method img {
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(42%) sepia(8%) saturate(300%) hue-rotate(10deg) brightness(0.9) contrast(0.9); /* gray ink */
    transition: filter 0.2s ease;
}

.contact-method:nth-child(1) img { /* Twitter */
    width: 30px;
    height: 30px;
}

.contact-method:nth-child(2) img { /* Bluesky */
    width: 30px;
    height: 30px;
}

.contact-method:nth-child(3) img { /* Instagram */
    width: 30px;
    height: 30px;
}

.contact-method:nth-child(4) img { /* Itch.io */
    width: 32px;
    height: 32px;
}

.contact-method:nth-child(5) img { /* Substack */
    width: 30px;
    height: 30px;
}

.contact-method:nth-child(6) img { /* Mail */
    width: 45px;
    height: 45px;
}

.contact-method:hover img {
    filter: brightness(0) saturate(100%) invert(29%) sepia(50%) saturate(1500%) hue-rotate(350deg) brightness(0.7) contrast(1.1); /* rust/brown */
}


/* Right column - 3 items from top */
.contact-method:nth-child(1) { grid-column: 2; grid-row: 1; }
.contact-method:nth-child(2) { grid-column: 2; grid-row: 2; }
.contact-method:nth-child(3) { grid-column: 2; grid-row: 3; }

/* Left column - 3 items from top */
.contact-method:nth-child(4) { grid-column: 1; grid-row: 1; }
.contact-method:nth-child(5) { grid-column: 1; grid-row: 2; }
.contact-method:nth-child(6) { grid-column: 1; grid-row: 3; }


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


footer {
    text-align: right;
    padding: 4rem 0 3rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 4rem;
    max-width: calc(var(--content-width) + var(--right-margin));
    margin-left: auto;
    margin-right: var(--right-margin);
    padding-right: 1rem
}

/* DECORATIVE ELEMENTS =============================================================================================================== */

/* Page number style */
.page-number {
    position: fixed;
    bottom: 3rem;
    left: var(--right-margin);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-red);
}
/* RESPONSIVE =============================================================================================================== */

@media (max-width: 768px) {
    :root {
        --right-margin: 1.5rem;
        --content-width: 100%;
    }
    
    nav {
        position: relative;
        right: auto;
        top: auto;
        flex-direction: row;
        justify-content: flex-end;
        padding: 1.5rem var(--right-margin);
        gap: 1.5rem;
    }
    
    main {
        padding-top: 2rem;
    }
    
    .project-card {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
    
    .vertical-text {
        display: none;
    }
}