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

/* Hide focus outline when element is focused by mouse/trackpad but keep for keyboard users */
.project-images:focus {
    outline: none;
}
.project-images:focus-visible {
    outline: 2px solid rgba(0,0,0,0.2);
}

body {
    font-family: 'Times New Roman', serif;
    background-color: white;
    color: black;
    text-transform: lowercase;
    height: 100vh;
    overflow: hidden;
}

a {
    color: grey;
    text-decoration: underline;
  }

.container {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 300px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    z-index: 30;
}

.portfolio-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
    cursor: pointer;
}

.portfolio-header h1 {
    font-size: 12.6px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.category {
    margin-bottom: 0px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    font-size: 12.6px;
}

.toggle {
    font-size: 14px;
}

.category.active .toggle {
    transform: rotate(45deg);
}

.projects-list {
    max-height: 0;
    overflow: hidden;
}

.category.active .projects-list {
    max-height: 1000px;
}

.project-item {
    padding: 12px 15px 12px 30px;
    cursor: pointer;
    font-size: 11.2px;
}

.project-item.active {
    text-decoration: underline;
}

/* Make content area use fixed space; horizontal scroller will live inside project-images */
.content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 40px;
}

/* project-display becomes full-size scroller container */
.project-display {
    width: 100%;
    height: 100%;
    display: block;
    position: relative; /* anchor for overlay indicators */
    z-index: 0;
}

/* images column: horizontal scroller that now contains the description as first item */
.project-images {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 80px); /* account for .content vertical padding */
    align-items: flex-start; /* align items to top so description lines up with image top */
    /* use proximity snapping for smoother, less aggressive snapping during scroll */
    scroll-snap-type: x proximity;
    position: relative; /* make hint absolute position relative to this container */
    z-index: 10;

    /* hide scrollbar visually */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}
.project-images::-webkit-scrollbar { display: none; }

/* scroll indicator as a DOM element (so it never blocks clicks) */
.scroll-indicator {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: block;
    background: transparent;
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease;
    opacity: 1;
    z-index: 40;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}

/* draw the white triangle inside the clickable area */
.scroll-indicator::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid rgba(255,255,255,0.95);
}

/* hide indicator when not needed */
.project-display.no-indicator .scroll-indicator {
    opacity: 0;
    transform: translateY(-50%) translateX(6px);
}

/* remove pointer-events overrides to avoid blocking sidebar interactions */

/* right-hand triangle indicator for horizontal scrollability */
/* indicator removed to avoid interfering with sidebar clicks; can be reintroduced as DOM node if needed */

/* DESCRIPTION: now the first scroller item. set fixed width (1/3) and full height so it 'glues' to first image */
.project-description {
    flex: 0 0 33%; /* 1/3 width */
    height: 100%;
    box-sizing: border-box;
    /* remove top padding so title aligns with image top */
    padding: 0 20px 20px 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scroll-snap-align: start;
    overflow-y: auto; /* allow internal vertical overflow if description is long */
}

.project-title {
    margin-top: 0;
}

/* Each project-image keeps the same height and avoids shrinking */
.project-image {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: flex-start; /* align image to top so it lines up with description */
    /* align to start to avoid large center-snapping jumps */
    scroll-snap-align: start;
}

/* Image fills the container height, keep aspect ratio */
.project-image img {
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: top; /* ensure image aligns from the top so description lines up */
    display: block;
}



/* fallback and other styles */
.about-item {
    margin-bottom: 0px;
}

.about-item .category-header {
    cursor: pointer;
}

.about-item.active .category-header span:first-child {
    text-decoration: underline;
}

.about-image {
    width: 100%;
    margin-bottom: 30px;
    display: block;
}

.about-image img {
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
}

.about-text {
    font-size: 12.6px;
    line-height: 1.3;
    max-width: 400px;
}

.placeholder {
    color: #999;
    font-size: 12.6px;
    margin-bottom: 20px;
}

.contact-info {
    color: #999;
    font-size: 12.6px;
}

/* position contact info at bottom-left of the sidebar */
.sidebar .contact-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
}

/* hide email (contact-info) when sidebar is hidden on mobile */
.sidebar.mobile-hidden .contact-info {
    display: none;
}

/* rest of styles unchanged */
.project-details {
    font-size: 12.6px;
    margin-bottom: 20px;
    color: #666;
}

.project-text {
    font-size: 12.6px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.image-placeholder {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #999;
    font-size: 9.8px;
}

/* Mobile / phone behaviour (portrait + landscape phones) */
@media (max-width: 720px), (max-height: 520px) and (pointer: coarse) {
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    .container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    /* Header: fixed at very top, no white space (extends into safe area) */
    .portfolio-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        min-height: calc(48px + env(safe-area-inset-top, 0));
        padding: env(safe-area-inset-top, 0) 16px 0 16px;
        background: white;
        display: flex;
        align-items: center;
        z-index: 60;
        border-bottom: 1px solid #999;
        margin: 0;
    }

    .portfolio-header h1 {
        font-size: 12.6px;
        margin: 0;
        padding: 0;
    }

    /* Sidebar: full height below header, scrollable; email in flow at end */
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ccc;
        height: calc(100vh - env(safe-area-inset-top, 0));
        height: calc(100dvh - env(safe-area-inset-top, 0));
        max-height: none;
        overflow-y: auto;
        padding: 12px;
        padding-top: calc(48px + env(safe-area-inset-top, 0));
        z-index: 40;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
    }

    .sidebar .contact-info {
        position: static;
        margin-top: auto;
        margin-bottom: 20px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .sidebar.mobile-hidden {
        display: none;
    }

    .content {
        flex: 0 0 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* When sidebar hidden (project view), content fills screen */
    .sidebar.mobile-hidden + .content {
        flex: 1 1 0;
        min-height: 0;
    }

    /* Mobile top bar in project view: pinned to top like home */
    .mobile-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        min-height: calc(48px + env(safe-area-inset-top, 0));
        padding: env(safe-area-inset-top, 0) 16px 0 16px;
        background: white;
        display: flex;
        align-items: center;
        z-index: 55;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        text-transform: lowercase;
        font-size: 12.6px;
        font-weight: bold;
    }

    /* Project view: keep top/bottom spacing, remove side margins */
    .content.has-top-bar {
        padding: calc(48px + env(safe-area-inset-top, 0) + 85px) 0 calc(64px + env(safe-area-inset-bottom, 0)) 0;
    }

    /* Project display fills content; locked to top */
    .project-display {
        height: 100%;
        display: block;
        position: relative;
    }

    /* Image strip: fills available project area */
    .project-images,
    .content.has-top-bar .project-images {
        height: 100%;
        align-items: flex-start;
    }

    .project-images {
        gap: 20px;
    }

    /* All images: same height (full strip), locked aspect ratio, no overlap */
    .project-image {
        flex: 0 0 auto;
        flex-shrink: 0;
        height: 100%;
        width: auto;
        align-items: flex-start;
    }

    .project-image img {
        height: 100%;
        width: auto;
        object-fit: contain;
        object-position: top center;
        display: block;
    }

    .project-description {
        flex: 0 0 70%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-indicator {
        z-index: 100;
        pointer-events: auto;
    }

    .placeholder {
        padding-top: 20px;
    }

    .about-image {
        margin-bottom: 20px;
    }

    .about-text {
        max-width: 100%;
        padding-right: 0;
    }
}

/* Keep this AFTER the mobile block so it wins in landscape phones */
@media (orientation: landscape) and (pointer: coarse) {
    .content.has-top-bar {
        padding: calc(48px + env(safe-area-inset-top, 0)) 0 env(safe-area-inset-bottom, 0) 0 !important;
    }
}