:root {
    --page-bg: white;
}
html.dark {
    --page-bg: #191716;
}

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

html {
    scrollbar-gutter: stable;
}
body {
    font-family: "Iowan Old Style", Georgia, serif;
    background-color: #ffffff;
    min-height: 100vh;
    transition: background-color 0s ease;
}


header {
    display: flex;
    align-items: flex-start;
    padding: 40px 40px 32px 20px;
}

.grid-icon {
    position: fixed;
    top: 52px;
    right: 40px;
    z-index: 51;
    cursor: pointer;
    flex-shrink: 0;
}

nav {
    padding: 0 20px;
}   

h1 {
    letter-spacing: 0.3em;
    font-size: 1.8rem;
    font-weight: normal;
    margin-bottom: 0;
    color: #555;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

h1:hover {
    color: transparent;
}

h1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.64 9.76055'%3E%3Cpath d='M0.20918 8.0334C0.0825197 8.15938 0 8.32344 0 8.5168C0 8.90049 0.29004 9.1875 0.670705 9.1875C0.861037 9.1875 1.04092 9.12686 1.15108 9.0002L8.571 1.20909L7.71074 1.20909L15.1246 9.0002C15.2445 9.12686 15.4244 9.1875 15.605 9.1875C15.9887 9.1875 16.2787 8.90049 16.2787 8.5168C16.2787 8.32344 16.1992 8.1624 16.0726 8.03945L8.66836 0.247559C8.52959 0.0953126 8.33994 0 8.14121 0C7.93272 0 7.75283 0.0922853 7.60733 0.244532Z' fill='%23555'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(-50%) rotate(180deg);
    transition: opacity 0.15s ease;
}

h1:hover::after {
    opacity: 1;
}

body.scrolled h1::after {
    transform: translateY(-50%) rotate(0deg);
}

html.dark h1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.64 9.76055'%3E%3Cpath d='M0.20918 8.0334C0.0825197 8.15938 0 8.32344 0 8.5168C0 8.90049 0.29004 9.1875 0.670705 9.1875C0.861037 9.1875 1.04092 9.12686 1.15108 9.0002L8.571 1.20909L7.71074 1.20909L15.1246 9.0002C15.2445 9.12686 15.4244 9.1875 15.605 9.1875C15.9887 9.1875 16.2787 8.90049 16.2787 8.5168C16.2787 8.32344 16.1992 8.1624 16.0726 8.03945L8.66836 0.247559C8.52959 0.0953126 8.33994 0 8.14121 0C7.93272 0 7.75283 0.0922853 7.60733 0.244532Z' fill='white'/%3E%3C/svg%3E");
}

nav ul{
    list-style: none;
}

nav ul li {
    margin-bottom: 4px;
}

nav ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin-left: -12px;
    border-radius: 3px;
    border: 0.5px solid transparent;
    width: 35%;
    text-decoration: none;
    color: #555;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}

nav ul li a:hover {
    background: #fbfbfb;
    color: #000;
    text-decoration: none;
    border-color: rgba(0, 0, 0, 0.08);
}

.meta {
    font-size: 0.825rem;
    text-decoration: none;
    color: #999;
}

nav ul li a .meta {
    opacity: 0;
    transition: opacity 0.15s ease;
}

nav ul li a:hover .meta {
    opacity: 1;
}   

.proj-name {
    text-decoration: none;
}

nav ul li a:hover .proj-name {
    text-decoration: underline;
}

/* ── Dark mode image variants ───────────────────────────── */
.img-light, .img-dark {
    transition: opacity 0s ease;
}
.img-dark {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html.dark .img-light { opacity: 0; }
html.dark .img-dark  { opacity: 1; }

/* Dark mode */
html.dark body {
    background-color: #191716;
}

html.dark h1 {
    color: #fff;
}

html.dark h1:hover {
    color: transparent;
}

html.dark nav ul li a {
    color: #999;
}

html.dark nav ul li a:hover {
    background: rgba(255, 255, 255, 0.01);
    color: #ddd;
    border-width: 0.25px;
    border-color: rgba(255, 255, 255, 0.05);
}

html.dark .meta {
    color: #555;
}

/* ── View toggle icons ──────────────────────────────────── */
.icon-grid path, .icon-list path {
    fill: #aaa;
    transition: fill 0.15s ease;
}

body.grid-mode .icon-list { display: none; }
body:not(.grid-mode) .icon-grid { display: none; }

#view-toggle:hover .icon-grid path,
#view-toggle:hover .icon-list path { fill: #696B6F; }

html.dark .icon-grid path,
html.dark .icon-list path { fill: #666; }

html.dark #view-toggle:hover .icon-grid path,
html.dark #view-toggle:hover .icon-list path { fill: #aaa; }

html.dark header {
    box-shadow: 0 25px 100px rgba(25, 23, 22, 0);
}

/* Desktop */
@media (min-width: 768px) {

    /* Landing default: header fixed, visually centered via transform only */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(calc(45vh - 50%));
        padding: 0 18vw 0 18vw;
        min-height: 10vh;
        align-items: flex-end;
        justify-content: space-between;
        background: transparent;
        box-shadow: 0 25px 100px rgba(255, 255, 255, 0);
        z-index: 50;
        will-change: transform;
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0s ease;
    }

    header::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: white;
        -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.65) 100%);
        mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.62) 100%);
        transition: background-color 0s ease;
        z-index: -1;
        pointer-events: none;
    }

    header.dark-mode::before {
        background-color: #191716;
    }

    .grid-icon {
        position: relative;
        top: auto;
        right: auto;
        z-index: 1;
        flex-shrink: 0;
        width: 20px;
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header h1 {
        flex: none;
    }

    nav {
        visibility: hidden;
        padding: 0 18vw 0 18vw;
    }

    nav ul li {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
    }

    nav ul li.nav-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* After scroll: header pinned, nav waterfalls in */
    body.scrolled header {
        transform: translateY(0);
    }

    body.shadow-active header {
        box-shadow: 0 25px 100px white;
    }

    html.dark body.shadow-active header {
        box-shadow: 0 25px 100px #191716;
    }

    body.scrolled header::before {
        top: -200px;
    }

    body.scrolled nav {
        visibility: visible;
        padding: 16vh 18vw 40px 18vw;
    }

    /* Grid items hidden until waterfall fires */
    .grid-item {
        opacity: 0;
    }

}

/* ── Grid view ─────────────────────────────────────────────── */

.grid-view {
    display: none;
}

body.grid-mode .list-view {
    display: none;
}

body.grid-mode .grid-view {
    display: block;
}

.grid-container {
    padding: 16vh 18vw 40px 18vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item[hidden] { display: none; }

.grid-item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: transform 0.35s ease;
    position: relative;
}

body.scrolled .grid-item:hover {
    transform: scale(1.04);
}


body.scrolled .grid-item {
    pointer-events: auto;
}

@keyframes grid-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.grid-item.grid-animate {
    animation: grid-fade-in 0.3s ease-out both;
}

html.dark .grid-item {
    background: rgba(255, 255, 255, 0.1);
}

.grid-item:has(img) {
    background: transparent;
}

html.dark .grid-item:has(img) {
    background: transparent;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0s ease;
}

@media (max-width: 768px) {
    h1:hover { color: #555; }
    html.dark h1:hover { color: #fff; }
    h1::after { display: none; }

    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(calc(45vh - 50%));
        padding: 0 50px;
        min-height: 70px;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        box-shadow: 0 25px 50px white;
        z-index: 50;
        will-change: transform;
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0s ease;
    }

    header::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: white;
        -webkit-mask-image: linear-gradient(to bottom, black 55%, rgba(0,0,0,0.6) 100%);
        mask-image: linear-gradient(to bottom, black 55%, rgba(0,0,0,0.6) 100%);
        transition: background-color 0s ease;
        z-index: -1;
        pointer-events: none;
    }

    header.dark-mode::before {
        background-color: #191716;
    }

    header.dark-mode {
        box-shadow: 0 25px 50px #191716;
    }

    .grid-icon {
        position: relative;
        top: auto;
        right: auto;
    }

    .grid-icon svg {
        width: 14px;
        height: 14px;
    }


    body.scrolled header {
        transform: translateY(0);
        box-shadow: none;
    }

    .grid-container {
        padding: 80vh 10px 40px 10px;
        gap: 7px;
        transition: padding-top 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.scrolled .grid-container {
        padding: 85px 10px 40px 10px;
    }

    .grid-item {
        opacity: 1;
        pointer-events: auto;
    }

    h1 {
        font-size: 1.2rem;
    }

    nav ul li {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
    }

    nav ul li.nav-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    nav ul li a {
        width: 100%;
    }

    body.scrolled nav {
        padding: 85px 50px 40px 50px;
    }
}