/*
 * Global styles for the combined Andre Elijah portfolio site.  The
 * typography, spacing and muted colour palette are inspired by the
 * original andreelijah.com.  The selected work section implements
 * a full‑screen slider inspired by Brandon Walkin’s project carousel.
 */

/* Hide mobile message by default - only show on screens < 1200px */
.mobile-only-message {
    display: none !important;
    visibility: hidden !important;
}

/* Typography and base styles */
@font-face {
    font-family: 'Graphik Light';
    src: url('fonts/Graphik-Light-Web.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik Thin';
    src: url('fonts/Graphik-Thin-Web.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik Wide';
    src: url('fonts/GraphikWide-Regular-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    /* Use San Francisco on Apple devices, fall back to our custom Graphik fonts on other platforms */
    font-family: -apple-system, BlinkMacSystemFont, 'Graphik Light', 'Graphik Thin', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    /* Reserve space on the left for the vertical nav */
    padding-left: 0;
    /* Prevent horizontal scrolling */
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box;
}

/* Headings use a wider font on non‑Apple platforms */
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Graphik Wide', 'Graphik Light', Arial, sans-serif;
}

main {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;

    /* Leave visual room for the vertical nav */
    padding-left: 120px;
}

/* Generic container to constrain content width */
.container {
    max-width: 960px;
    margin: 0 auto;
    /* Fluid vertical + horizontal spacing inspired by COLLINS */
    padding: clamp(32px, 6vh, 72px) clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Section titles */
.section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: normal;
    text-transform: lowercase;
}

/* Hero section styling */
#hero .name {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    text-transform: lowercase;
    font-weight: normal;
}

#hero .subtitle {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
    font-weight: normal;
    text-transform: lowercase;
}

#hero .bio {
    margin-bottom: 1rem;
}

/* Ensure the hero section occupies at least a full viewport height so that
   the navigation highlighting correctly activates the “about” link when
   scrolled back to the top of the page.  Using flexbox centres the
   introductory text vertically on larger screens. */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hero a {
    color: #000;
    text-decoration: underline;
}

#social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

#social-links a {
    color: #000;
    text-decoration: none;
    font-size: 0.875rem;
    text-transform: lowercase;
    transition: opacity 0.25s ease;
    opacity: 0.5;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#social-links a:hover {
    opacity: 1;
}

/* Selected work carousel */
#selected-work-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

#selected-work-carousel .slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#selected-work-carousel .slide {
    flex: 0 0 100%;
    height: 100%;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
}

/* Navigation for the carousel */
#selected-work-carousel .nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.7rem;
    white-space: nowrap;
}

#selected-work-carousel .nav li {
    cursor: pointer;
    color: #b7b7b7;
    transition: color 0.3s ease;
    user-select: none;
}

#selected-work-carousel .nav li.active {
    color: #000;
}

#selected-work-carousel .nav li:hover {
    color: #000;
}

/* Fade gradients on left and right edges to simulate the original design */
#selected-work-carousel .fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
}

#selected-work-carousel #leftFade {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

#selected-work-carousel #rightFade {
    right: 0;
    background: linear-gradient(-90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

/* Client list styling */
.client-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}

.client-list li {
    margin-bottom: 0.5rem;
    text-transform: lowercase;
    font-size: 0.7rem;
}

/* Awards styling */
.awards-group {
    margin-bottom: 0.75rem;
}

.award-category {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
    text-transform: lowercase;
}

.award-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.award-list li {
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
}

.award-item {
    font-size: 0.7rem;
}

/* Rejected section styling */
#rejected .rejected-cards {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    gap: 0;
    padding: 10px 0;
    margin-bottom: 2rem;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#rejected .rejected-cards::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#rejected .rejected-card {
    flex: 0 0 auto;
    width: 240px;
    height: 348px;
    border-radius: 16px; /* more visible rounded corners */
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s ease-out;
}

/* images inherit the card radius so corners look clean */
#rejected .rejected-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
    transition: transform 0.25s ease-out;
    pointer-events: none;
    /* Make all rejected images black and white by default */
    filter: grayscale(100%);
    transition: filter 0.5s ease-out;
}
#rejected .rejected-card:hover {
    /* Subtle lift on hover inspired by the original rejected cards design */
    transform: translateY(-30px);
}

/* On hover the image should remain attached to its container (do not counter‑translate) */
#rejected .rejected-card:hover img {
    transform: none;
    /* Restore colour when hovering */
    filter: grayscale(0%);
}

/* Overlap subsequent cards by 60% for layering effect */
#rejected .rejected-card:not(:first-child) {
    margin-left: -144px;
}

/* When a rejected card is active (the one whose modal is open) it should
 * rise slightly and appear fully opaque.  Non‑active cards become
 * semi‑transparent and drop back to give a sense of depth and ordering. */
#rejected .rejected-card.active-card {
    z-index: 2;
    opacity: 1;
    transform: translateY(-40px) scale(1);
}
#rejected .rejected-card.inactive {
    z-index: 0;
    opacity: 1; /* no transparency on inactive cards */
    transform: translateY(0) scale(1);
}

/* Smooth transitions when cards change state */
#rejected .rejected-card {
    transition: transform 0.35s ease, opacity 0.35s ease;
    /* Position relative to support sheen overlay */
    position: relative;
    overflow: hidden;
}

/* Add a sheen overlay using a pseudo-element.  The overlay starts off‑screen to the left and sweeps across the card on hover, creating a reflective effect. */
#rejected .rejected-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    opacity: 0.0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
}

#rejected .rejected-card:hover::before {
    transform: translateX(150%) skewX(-20deg);
    opacity: 0.7;
}

/* Colors for rejected cards - REMOVED per user request */

/* PDF container styling on rejected pages */
.pdf-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin: 2rem 0;
}

/* ===================================================================== */
/* Artifacts carousel styling                                           */
/*
 * The artifacts section presents 3D game assets and objects in a
 * horizontally scrolling slider similar to the selected work carousel.
 * Each slide contains a <model> element for Apple Vision Pro devices,
 * accompanied by a fallback <img> element for browsers that cannot
 * display USDZ models.  Images start out desaturated and regain
 * colour on hover, with a subtle sheen sweeping across the slide.
 */

/* Container for the artifacts carousel */
#artifacts-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* The row of slides */
#artifacts-carousel .slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Individual slide */
#artifacts-carousel .slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ensure the model and fallback images fill the slide */
#artifacts-carousel .slide model,
#artifacts-carousel .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback images are shown by default and start off in grayscale */
.artifact-fallback {
    filter: grayscale(100%);
    transition: filter 0.6s ease;
}

/* Restore colour when hovering over the slide */
#artifacts-carousel .slide:hover .artifact-fallback {
    filter: grayscale(0%);
}

/* Sheen overlay on slides */
#artifacts-carousel .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
}

/* Animate the sheen across the slide on hover */
#artifacts-carousel .slide:hover::before {
    transform: translateX(150%) skewX(-20deg);
    opacity: 0.7;
}

/* Navigation dots for artifacts */
#artifacts-carousel .nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#artifacts-carousel .nav li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #b7b7b7;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#artifacts-carousel .nav li.active {
    background-color: #000;
}

#artifacts-carousel .nav li:hover {
    background-color: #000;
}

/* Fade gradients on the left and right edges to soften the scroll */
#artifacts-carousel .fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
}

#artifacts-carousel #artifacts-leftFade {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
}

#artifacts-carousel #artifacts-rightFade {
    right: 0;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
}

.pdf-scroll iframe {
    width: 1200px;
    height: 600px;
    border: none;
    background-color: #f8f8f8;
}

/* Horizontal image scroller for rejected project slides */
.image-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin: 2rem 0;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.image-scroll img {
    flex: 0 0 auto;
    max-width: 90%;
    height: 70vh;
    width: auto;
    object-fit: contain;
    scroll-snap-align: start;
    border-radius: 8px;
    filter: grayscale(100%);
    transition: filter 0.4s ease, box-shadow 0.4s ease;
}

/* Restore colour and add sheen effect on hover for image slides */
.image-scroll img:hover {
    filter: grayscale(0%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.back-link {
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 2rem;
    color: #000;
    text-decoration: underline;
    font-size: 0.875rem;
}

/* Scroll indicator (animated mouse) */
/* Scroll indicator fixed to the top of the viewport rather than the bottom */
.scroll-indicator {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* Hide scroll indicator on mobile landscape */
@media (max-width: 1199px) and (orientation: landscape) {
    .scroll-indicator {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Also hide on mobile portrait */
@media (max-width: 1199px) {
    .scroll-indicator {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}
.scroll-indicator .mouse {
    width: 24px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 12px;
    position: relative;
    box-sizing: border-box;
}
.scroll-indicator .mouse .wheel {
    width: 4px;
    height: 8px;
    background-color: #000;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s infinite;
}
@keyframes scroll-wheel {
    0% { opacity: 0; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, 8px); }
    100% { opacity: 0; transform: translate(-50%, 16px); }
}

/* Bottom arrow for project pages */
.bottom-arrow {
    text-align: center;
    font-size: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #000;
}

/* Modal overlay and content styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal.active {
    display: flex;
}
.modal-inner {
    background-color: #fff;
    padding: 2rem;
    max-width: 80%;
    max-height: 95%;
    overflow-y: auto;
    overflow-x: visible; /* allow the child scroller's horizontal bar to render */
    border-radius: 8px;
    position: relative;
}
.modal-inner h2 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: lowercase;
}
.modal-inner p {
    margin-bottom: 1rem;
}
.modal-arrow {
    text-align: center;
    font-size: 2rem;
    margin-top: 1rem;
    color: #000;
}

/* Secret arrow at bottom centre of the page.  It floats above other content and triggers a hidden image when clicked 13 times. */
#secret-arrow {
    position: fixed !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    text-align: center;
    font-size: 2rem;
    color: #000000 !important;
    text-shadow: none !important;
    cursor: pointer;
    z-index: 9999 !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Section navigation bar styling */
#section-nav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reduce the gap between nav items to accommodate all sections,
       including the new press section, within the vertical space */
    gap: 15px;
    padding: 20px 10px;
    /* Place nav on the same white slab as the main content */
    background: #ffffff;
    font-size: 0.75rem;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    z-index: 999;
    width: 100px;
}

/* Mobile styles - hide nav and show only about section */
/* Portrait-specific wrapping fixes for mobile */
@media (max-width: 1199px) and (orientation: portrait) {
    /* Override the min-width rule that forces desktop layout */
    .container {
        min-width: 0 !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    main {
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
    
    #hero {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-width: 0 !important;
    }
    
    #hero .container {
        min-width: 0 !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure all paragraphs and text containers respect container width */
    #hero .container > * {
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    /* Force all direct children to wrap */
    #hero .container > p,
    #hero .container > div,
    #hero .container > h1,
    #hero .container > h3 {
        max-width: calc(100vw - 2rem) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    #hero * {
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    #hero p,
    #hero .bio,
    #hero p.bio {
        max-width: calc(100vw - 2rem) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    #hero .name,
    #hero .subtitle {
        max-width: calc(100vw - 2rem) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    #hero a,
    #hero .bio a,
    #hero p a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile-only message wrapping - force wrapping */
    .mobile-only-message,
    #hero .mobile-only-message,
    #hero p.mobile-only-message,
    #hero p.bio.mobile-only-message,
    p.mobile-only-message,
    p.bio.mobile-only-message,
    #hero .container p.mobile-only-message,
    #hero .container p.bio.mobile-only-message {
        max-width: calc(100vw - 2rem) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }
    
    #hero #social-links,
    #hero .container #social-links {
        max-width: calc(100vw - 2rem) !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    #hero #social-links a,
    #hero .container #social-links a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1199px) {
    /* Hide rotation overlay completely on mobile */
    #rotation-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #rotation-overlay.active {
        display: none !important;
        visibility: hidden !important;
    }
    
    body.portrait-mode #rotation-overlay,
    html.portrait-mode #rotation-overlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide left navigation bar completely on mobile */
    #section-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Remove left padding from main on mobile */
    main {
        padding-left: 0 !important;
    }
    
    /* Hide all sections except hero/about on mobile */
    #selected-work,
    #rejected,
    #artifacts,
    #selected-clients,
    #press,
    #talks,
    #awards {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show mobile-only message - ONLY on screens < 1200px */
    .mobile-only-message {
        display: block !important;
        visibility: visible !important;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-style: italic;
        opacity: 0.7;
        color: #555;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure hero section is visible and properly styled on mobile */
    #hero {
        display: flex !important;
        visibility: visible !important;
        min-height: 100vh;
        padding: 2rem 1rem;
    }
    
    /* Adjust container padding on mobile */
    .container {
        padding: clamp(24px, 4vh, 48px) clamp(16px, 4vw, 24px);
    }
    
    /* Scale down content on mobile to fit better */
    html {
        font-size: 85%;
    }
    
    body {
        font-size: 1.176em; /* Compensate for html font-size reduction */
    }
    
    /* Ensure text wraps and prevent horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    main {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .container {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: clamp(32px, 6vh, 72px) 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Make ALL body text the same font size on mobile */
    #hero p,
    #hero .bio,
    #hero p.bio,
    #hero .bio a,
    #hero a:not(.name),
    .mobile-only-message,
    #hero #social-links,
    #hero #social-links a {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Exclude name and subtitle from uniform sizing */
    #hero .name,
    #hero .subtitle {
        font-size: inherit;
    }
    
    /* Keep name and subtitle sizes but ensure they wrap */
    #hero .name {
        font-size: 2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    #hero .subtitle {
        font-size: 1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Ensure all text elements wrap and don't overflow */
    #hero {
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    #hero *,
    #hero p,
    #hero .container,
    #hero .bio,
    #hero a,
    #hero .name,
    #hero .subtitle {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto;
    }
    
    /* Force wrapping on all text content */
    #hero .name,
    #hero .subtitle {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Ensure container doesn't cause overflow */
    #hero .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: clamp(32px, 6vh, 72px) !important;
        padding-bottom: clamp(32px, 6vh, 72px) !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure main doesn't cause overflow */
    main {
        padding-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Force all text to wrap - aggressive wrapping */
    #hero p,
    #hero .bio,
    #hero p.bio {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Prevent any element from causing horizontal scroll */
    #hero * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure links wrap properly - break long URLs and text */
    #hero a,
    #hero .bio a,
    #hero p a,
    #hero .reel-link,
    #hero .contact-link {
        display: inline !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    
    /* Ensure social links wrap */
    #hero #social-links {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    #hero #social-links a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
    }
    
    /* Force wrapping on subtitle which has long text */
    #hero .subtitle {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

/* Desktop styles - hide mobile message and ensure normal display */
@media (min-width: 1200px) {
    /* Hide mobile message on desktop - use most specific selector */
    body section#hero p.bio.mobile-only-message,
    body #hero section p.bio.mobile-only-message,
    body #hero p.bio.mobile-only-message,
    body #hero p.mobile-only-message,
    body #hero .bio.mobile-only-message,
    body #hero .mobile-only-message,
    body p.bio.mobile-only-message,
    body .bio.mobile-only-message,
    body .mobile-only-message,
    section#hero p.bio.mobile-only-message,
    #hero section p.bio.mobile-only-message,
    #hero p.bio.mobile-only-message,
    #hero p.mobile-only-message,
    #hero .bio.mobile-only-message,
    #hero .mobile-only-message,
    p.bio.mobile-only-message,
    .bio.mobile-only-message,
    .mobile-only-message {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
        font-size: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
        content: "" !important;
    }
    
    /* Ensure mobile message is hidden by default on desktop */
    .mobile-only-message {
        display: none !important;
    }
    
    /* Ensure all sections are visible on desktop */
    #selected-work,
    #rejected,
    #artifacts,
    #selected-clients,
    #press,
    #talks,
    #awards {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Ensure nav is visible on desktop */
    #section-nav {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Reset mobile font scaling on desktop */
    html {
        font-size: 16px;
    }
    
    body {
        font-size: 16px;
    }
}

#section-nav a {
    color: #000;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#section-nav a:hover,
#section-nav a.active {
    opacity: 1;
    font-weight: bold;
}

/* Scroll progress bar styling */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: #000;
    width: 0%;
    z-index: 1000;
}

/* Rotation overlay for mobile portrait mode */
/* Rotation overlay - hidden by default, only shows on mobile portrait */
#rotation-overlay {
    display: none !important;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    background-color: #ffffff;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#rotation-overlay.active {
    display: flex !important;
    visibility: visible !important;
    pointer-events: all;
    opacity: 1;
}

/* Prevent scrolling when overlay is active */
body.portrait-mode,
html.portrait-mode {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ffffff !important;
}

/* Ensure body background is white when overlay is active */
body.portrait-mode {
    background-color: #ffffff !important;
}

html.portrait-mode {
    background-color: #ffffff !important;
}

/* Ensure overlay stays visible when portrait-mode is active */
body.portrait-mode #rotation-overlay,
html.portrait-mode #rotation-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
    z-index: 999999 !important;
    pointer-events: all !important;
}

.rotation-content {
    text-align: center;
    color: #000000;
    padding: 2rem;
    max-width: 90%;
    width: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.rotation-icon {
    width: 180px;
    height: 300px;
    margin: 0 auto 3rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate-phone 3s ease-in-out infinite;
    flex-shrink: 0;
}

.rotation-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

@keyframes rotate-phone {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.rotation-title {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 1.5rem;
    text-transform: lowercase;
    color: #000000;
    width: 100%;
    max-width: 90%;
}

.rotation-message {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 0;
    opacity: 0.9;
    color: #000000;
    width: 100%;
    max-width: 90%;
    padding: 0 1rem;
}

/* Hide all content when rotation overlay is active */
body.portrait-mode main,
body.portrait-mode #section-nav,
body.portrait-mode #scroll-progress,
body.portrait-mode .scroll-indicator,
body.portrait-mode #secret-arrow {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure overlay is the only visible element */
body.portrait-mode #rotation-overlay,
body.portrait-mode #rotation-overlay.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
    z-index: 999999 !important;
}

/* Ensure overlay content is visible */
body.portrait-mode #rotation-overlay .rotation-content,
body.portrait-mode #rotation-overlay .rotation-icon,
body.portrait-mode #rotation-overlay .rotation-title,
body.portrait-mode #rotation-overlay .rotation-message {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000000 !important;
}

body.portrait-mode #rotation-overlay .rotation-icon {
    display: flex !important;
}

/* Disable mobile responsive styles - force desktop layout */
@media (max-width: 1200px) {
    html, body {
        overflow-x: auto;
    }
    
    main {
        min-width: 1200px;
    }
    
    .container {
        min-width: 960px;
    }
}

/* Ensure all primary sections (selected work, rejected, clients, awards)
   occupy at least a full viewport height.  This spacing mirrors the gap
   between the hero and selected work sections and helps ensure that
   clicking a navigation item noticeably scrolls the page.  The content
   within remains vertically centered for a balanced layout. */
#selected-work,
#rejected,
#artifacts,
#selected-clients,
#press,
#talks,
#awards {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Press section styling */
#press {
    /* ensure the press section occupies at least one viewport height */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#press .press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    flex: 1;
}

#press .press-item {
    /* Minimal styling for press entries.  Remove borders and
       background to create a quieter appearance that blends into
       the page. */
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#press .press-item:hover {
    /* On hover, subtly reduce opacity instead of translating the card */
    opacity: 0.7;
}

#press .press-publication {
    /* Publication names appear smaller and slightly darker
       than article titles to maintain hierarchy */
    font-weight: 500;
    font-size: 0.65rem;
    color: #333;
    margin: 0 0 0.2rem 0;
}

#press .press-article {
    font-size: 0.7rem;
    color: #555;
    margin: 0;
}

/* Press modal styling */
.press-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.press-modal.active {
    display: flex;
}

.press-modal img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
}

/* Talks + Interviews section styling - Magazine layout */
#talks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#talks .talks-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

#talks .talks-item {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    padding-bottom: 0.5rem;
}

#talks .talks-item:hover {
    transform: translateX(10px);
    opacity: 0.7;
}

#talks .talks-publication {
    font-weight: 500;
    font-size: 0.65rem;
    color: #333;
    margin: 0 0 0.2rem 0;
}

#talks .talks-title {
    font-size: 0.7rem;
    color: #555;
    margin: 0;
}

/* Video modal styling */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.video-modal.active {
    display: flex;
}

.video-modal-content {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-content video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.video-modal .modal-close {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    font-family: inherit;
    z-index: 3001;
}

/* 3D models section styling */
#models {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#models .models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.model-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

.model-placeholder {
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio placeholder */
    background-color: #f0f0f0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.model-placeholder::after {
    content: 'model placeholder';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: #666;
    text-transform: lowercase;
    pointer-events: none;
}

.models-description {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    max-width: 600px;
}

.press-modal .modal-close {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    font-family: inherit;
}

/* Secret modal used to display the hidden image after 13 clicks of the arrow */
#secret-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
#secret-modal.active {
    display: flex;
}
#secret-modal .secret-modal-inner {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    padding: 1rem;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    text-align: center;
}
#secret-modal .secret-modal-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
#secret-modal .secret-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #000;
}

/* Force-visible state used when a modal opens or while interacting */
.modal .image-scroll.show-scrollbars,
.modal .pdf-scroll.show-scrollbars {
  scrollbar-color: rgba(0,0,0,0.45) transparent !important; /* Firefox */
}

/* WebKit thumb visibility while "show-scrollbars" is set */
.modal .image-scroll.show-scrollbars::-webkit-scrollbar-thumb,
.modal .pdf-scroll.show-scrollbars::-webkit-scrollbar-thumb {
  opacity: 1 !important;
  background: rgba(0,0,0,0.45) !important;
}

/* Base styling (from earlier) — keep these if you haven’t added them */
.modal-inner .image-scroll,
.modal-inner .pdf-scroll {
  overflow-x: scroll !important;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent; /* Firefox at rest */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* WebKit rails + thumb (at rest: subtle) */
.modal-inner .image-scroll::-webkit-scrollbar,
.modal-inner .pdf-scroll::-webkit-scrollbar {
  height: 10px;
  background: transparent;
}

.modal-inner .image-scroll::-webkit-scrollbar-thumb,
.modal-inner .pdf-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  opacity: 0;                        /* hidden until we show it */
  transition: background .3s ease, opacity .4s ease;
}

.modal-inner .image-scroll::-webkit-scrollbar-thumb:hover,
.modal-inner .pdf-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.55);
}

/* ================= Scrollbars inside rejected modals ================= */

/* Make the horizontal bar always reserve space and be scrollable */
.modal-inner .image-scroll,
.modal-inner .pdf-scroll {
  overflow-x: scroll !important;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: rgba(0,0,0,0.25) transparent;  /* Firefox at rest */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
}

/* WebKit (Safari/Chrome/Edge) base rail */
.modal-inner .image-scroll::-webkit-scrollbar,
.modal-inner .pdf-scroll::-webkit-scrollbar {
  height: 10px;
  background: transparent;
}

/* Thumb (subtle by default) */
.modal-inner .image-scroll::-webkit-scrollbar-thumb,
.modal-inner .pdf-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  opacity: 0;                                     /* hidden until we force-show */
  transition: background .3s ease, opacity .4s ease;
}

.modal-inner .image-scroll::-webkit-scrollbar-thumb:hover,
.modal-inner .pdf-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.55);
}

/* Force-visible state toggled by JS on open/interaction */
.modal .image-scroll.show-scrollbars,
.modal .pdf-scroll.show-scrollbars {
  scrollbar-color: rgba(0,0,0,0.45) transparent !important; /* Firefox */
}

.modal .image-scroll.show-scrollbars::-webkit-scrollbar-thumb,
.modal .pdf-scroll.show-scrollbars::-webkit-scrollbar-thumb {
  opacity: 1 !important;
  background: rgba(0,0,0,0.45) !important;
}
/* Lock page scroll when a modal is open */
html.modal-open,
body.modal-open {
  position: fixed;         /* freezes the document */
  overflow: hidden;        /* hides native scroll */
  width: 100%;
}

/* optional: keep layout from shifting when scrollbar disappears */
:root { scrollbar-gutter: stable both-edges; }


/* --- HARD PAGE LOCK WHEN A MODAL IS OPEN --- */
html.modal-open,
body.modal-open {
  position: fixed;
  inset: 0;            /* freeze viewport */
  height: 100%;
  width: 100%;
  overflow: hidden !important;
  overscroll-behavior: none !important;    /* kill rubber-band */
}

/* Ensure the overlay itself never scrolls; only the inner content does */
.modal {
  position: fixed;     /* already fixed, but enforce */
  inset: 0;
  overflow: hidden !important;
  touch-action: none;  /* block background panning */
}

/* Allow vertical scroll ONLY inside the modal content area */
.modal-inner {
  max-height: calc(100vh - 6rem);  /* keep nice margins but contain height */
  overflow-y: auto;
  overflow-x: clip;                 /* vertical container shouldn’t shift horizontally */
  overscroll-behavior: contain;     /* stop scroll chaining at the edges */
  touch-action: pan-y;              /* vertical scroll permitted here */
}

/* Make sure images or wide content inside .modal-inner don’t cause body scroll */
.modal-inner img,
.modal-inner video,
.modal-inner iframe {
  max-width: 100%;
}

#artifacts {
  display: none !important;
}

#section-nav a[href="#artifacts"] {
  display: none !important;
}

/* Mobile responsive styles disabled - desktop only */


/* Mobile responsive styles disabled - desktop only */


/* Mobile responsive styles disabled - desktop only */
/* === COLLINS‑inspired responsive corner radius === */
/* As the viewport grows and side margins increase, corners gently square off. */
#selected-work-carousel .slide,
#artifacts-carousel .slide,
#rejected .rejected-card {
  --br1: clamp(0.75rem, calc(1.5rem - var(--margin)), 1.5rem);
  --br2: clamp(0.75rem, calc(1.5rem - var(--margin)), 1.5rem);
  --br3: clamp(0rem, var(--margin), 1rem);
  --br4: clamp(0rem, var(--margin), 1rem);
  border-radius: var(--br1) var(--br2) var(--br3) var(--br4);
  overflow: hidden;
}

/* === Progressive reveal (Collins‑inspired) === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.19,1,.22,1),
              transform 0.6s cubic-bezier(.19,1,.22,1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Ensure rejected card imagery follows the COLLINS-style rounded corners */
#rejected .rejected-card img {
  border-radius: inherit;
}

/*
 * Selected work update (2025-12-06)
 * Convert the selected work slides from background images to separate image
 * and video elements contained within a .slide-media wrapper.  This
 * allows the still image to appear in black & white by default and
 * smoothly fade to the corresponding video on hover.  Captions sit
 * below the media and include a project title and an optional date.
 * The navigation bar is centred below the slider and constrained to a
 * single line on desktop by preventing wrapping and shrinking the
 * spacing.  These rules override earlier selected-work definitions.
 */
#selected-work-carousel .slide {
  /* Disable the older background image properties */
  background-image: none !important;
  background-size: cover;
  background-position: center;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding-bottom: 3rem;
}

/* Media container spans the available height */
#selected-work-carousel .slide-media {
  position: relative;
  flex: 1;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Position images and videos absolutely to cover their container */
#selected-work-carousel .slide-media img,
#selected-work-carousel .slide-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Start with the image visible and desaturated */
#selected-work-carousel .slide-media img {
  filter: grayscale(100%);
  opacity: 1;
}

/* Hide the video until hover */
#selected-work-carousel .slide-media video {
  opacity: 0;
}

/* When a slide has the .hovering class (set in JS) cross‑fade to video */
#selected-work-carousel .slide.hovering .slide-media img {
  opacity: 0;
}

#selected-work-carousel .slide.hovering .slide-media video {
  opacity: 1;
}

/* Caption containing project title and date */
#selected-work-carousel .slide-caption {
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  text-transform: lowercase;
}

#selected-work-carousel .project-title {
  font-weight: normal;
}

#selected-work-carousel .project-date {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* When a slide becomes active the JS adds .show-date to reveal the date */
#selected-work-carousel .slide.show-date .project-date {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation: centre below the carousel, on one line.  Prevent wrapping on
   desktop and use smaller spacing so all labels fit. */
#selected-work-carousel .nav {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* hide scrollbar in Firefox */
  -ms-overflow-style: none; /* hide scrollbar in IE */
  z-index: 10;
}

/* Ensure carousel nav is visible on mobile */
@media (max-width: 1199px) {
#selected-work-carousel {
    overflow: visible !important;
  }
  
  #selected-work-carousel .nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.6rem !important;
    gap: 10px !important;
    position: absolute !important;
    bottom: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
  }
  
  #selected-work-carousel .nav li {
    display: inline-block !important;
    visibility: visible !important;
  }
}
#selected-work-carousel {
  margin-bottom: 2rem;
}
#selected-work-carousel .nav li {
  cursor: pointer;
  color: #b7b7b7;
  transition: color 0.3s ease;
  user-select: none;
  white-space: nowrap;
}

#selected-work-carousel .nav li.active,
#selected-work-carousel .nav li:hover {
  color: #000;
}

/* Adjust fade overlays to stop above captions/nav */
#selected-work-carousel .fade {
  top: 0;
  bottom: 4rem;
  width: 80px;
  pointer-events: none;
}

#selected-work-carousel #leftFade {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

#selected-work-carousel #rightFade {
  right: 0;
  background: linear-gradient(-90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

/* Mobile responsive styles disabled - desktop only */

/* Hide navigation scrollbar on WebKit browsers */
#selected-work-carousel .nav::-webkit-scrollbar {
  display: none;
}