/*
 * 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.
 */

/* 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: #000000;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    /* Reserve space on the left for the vertical nav */
    padding-left: 0;
    overflow-x: hidden;
}

/* 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;
    box-sizing: border-box;

    /* 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);
}

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

.section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading-row .section-title {
    margin-bottom: 0;
}

.section-list-toggle {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: #000;
    cursor: pointer;
    font-family: monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-list-toggle:hover,
.section-list-toggle:focus-visible {
    color: #777;
}

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

.subtitle-rule {
    width: 2rem;
    height: 1px;
    background: #bbb;
    margin: 0.5rem 0 0.6rem 0;
}

#hero .subtitle {
    font-family: monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 1.25rem 0;
    font-variant: small-caps;
}

.reel-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: transparent;
    padding: 0.6em 0.9em;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
    margin-bottom: 1rem;
    cursor: pointer;
}

.reel-card:hover {
    opacity: 0.5;
}

.reel-card-eyebrow {
    font-family: monospace;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    font-variant: small-caps;
    white-space: nowrap;
}

.reel-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

.reel-inline-wink {
    display: inline-block;
    margin-left: 0.28rem;
    opacity: 0;
    color: #111;
    font-family: monospace;
    filter: grayscale(100%) saturate(0%);
    transform: translateY(2px) scale(0.9) rotate(-4deg);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.reel-inline-wink.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    animation: reel-wink-mono 0.45s ease 1;
}

@keyframes reel-wink-mono {
    0% { transform: translateY(2px) scale(0.9) rotate(-4deg); }
    40% { transform: translateY(0) scale(1.08) rotate(2deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

.reel-card-arrow {
    font-size: 0.8rem;
    color: #aaa;
    margin-left: auto;
    padding-left: 0.5rem;
}

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

#hero .bio a {
    font-size: 0.7rem;
}

/* 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;
}

#contact-block {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

#hero .reel-card,
#hero .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    min-height: 44px;
    margin: 0;
    padding: 0 1.05rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: #fff;
    color: #111;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.74rem;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    text-transform: lowercase;
}

#hero .reel-card-title,
#hero .contact-btn-title {
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
}

.contact-btn {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 0.3em 0.75em;
    font-size: 0.7rem;
    color: #000;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.contact-btn:hover {
    opacity: 0.5;
}

#social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#social-links a {
    color: #000;
    text-decoration: none;
    font-size: 0.6rem;
    font-family: monospace;
    text-transform: lowercase;
    transition: opacity 0.25s ease;
    opacity: 0.4;
}

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

.vision-spatial-env {
    margin-top: 1.25rem;
    max-width: 38rem;
}

.vision-spatial-env__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    font-family: inherit;
    font-size: 0.68rem;
    text-transform: lowercase;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vision-spatial-env__btn:hover {
    opacity: 0.75;
}

.vision-spatial-env__hint {
    margin: 0.5rem 0 0;
    font-size: 0.58rem;
    line-height: 1.45;
    color: #777;
    max-width: 34rem;
}

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

#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;
}

.client-list--all {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.client-list--all li {
    font-size: 0.7rem;
    line-height: 1.8;
    text-transform: lowercase;
    color: #555;
    width: 50%;
}

/* 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 matches selected work; 3D needs http(s), not file:// */
/* ===================================================================== */

.artifacts-local-server-hint {
    font-family: monospace;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: #333;
    background: rgba(0, 0, 0, 0.055);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin: 0 0 1rem;
    line-height: 1.5;
    max-width: 48rem;
    text-transform: lowercase;
}

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

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

#artifacts-carousel .slide.artifact-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}

#artifacts-carousel .slide-media--artifact {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#artifacts-carousel .artifact-fallback-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 0;
    background: #fff;
    pointer-events: none;
}

#artifacts-carousel .slide.artifact-slide.artifact-slide--fallback .artifact-model-viewer,
#artifacts-carousel .slide.artifact-slide.artifact-slide--fallback .artifact-model {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#artifacts-carousel .slide.artifact-slide.artifact-slide--fallback .artifact-fallback-img {
    z-index: 1;
}

#artifacts-carousel .slide-media--artifact .artifact-model {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background: #fff;
}

#artifacts-carousel .artifact-model-viewer {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

#artifacts-carousel .slide-media--artifact::before,
#artifacts-carousel .slide:hover .slide-media--artifact::before {
    display: none;
}

#artifacts-carousel .nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 16px;
    list-style: none;
    margin-left: 0;
    padding: 0;
    padding-top: 20rem;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#artifacts-carousel .nav li {
    cursor: pointer;
    color: #b7b7b7;
    transition: color 0.3s ease;
    user-select: none;
    white-space: nowrap;
}

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

#artifacts-carousel .nav::-webkit-scrollbar {
    display: none;
}

#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%);
}

@media (max-width: 768px) {
    #artifacts-carousel .nav {
        font-size: 0.6rem;
        gap: 12px;
    }
}

.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;
}
.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); }
}

@media (min-width: 1201px) {
    .scroll-indicator.scroll-indicator--past-hero {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }
}

/* 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;
    font-size: 0.7rem;
    color: #555;
    line-height: 1.6;
}
.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: relative;
    display: block;
    text-align: center;
    margin: 2rem auto 3rem auto;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    cursor: pointer;
}

/* 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;
}

#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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #selected-work-carousel {
        height: 50vh;
        min-height: 300px;
    }
    #selected-work-carousel .nav {
        font-size: 0.75rem;
        gap: 12px;
    }
    .client-list {
        columns: 1;
    }
}

/* 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,
#reference,
#talks,
#awards {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Press, talks, rejected, reference: all copy lowercase. `#rejected *` (etc.) wins over
   UA `button { text-transform: none }`, which blocked inheritance from the section alone. */
#press,
#talks,
#rejected,
#reference {
    text-transform: lowercase;
}

#press *,
#talks *,
#rejected *,
#reference * {
    text-transform: lowercase;
}

.reference-fullscreen,
.reference-fullscreen *,
#reference-modal,
#reference-modal * {
    text-transform: lowercase;
}

#press .section-list-toggle,
#talks .section-list-toggle {
    text-transform: lowercase;
}

/* 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: 1fr 1fr;
    gap: 0 4rem;
    align-items: start;
}

#press .press-col {
    display: flex;
    flex-direction: column;
}

#press .press-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#press .press-item:hover {
    opacity: 0.5;
}

#press .press-publication {
    flex: 0 0 9rem;
    font-family: monospace;
    font-size: 0.6rem;
    color: #888;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#press .press-article {
    flex: 1;
    font-size: 0.7rem;
    color: #000;
    min-width: 0;
    margin: 0;
}

/* Orderly press layout */
#press .press-grid--orderly {
    display: block;
    width: 100%;
}

#press .press-grid--orderly .press-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ececec;
}

#press .press-grid--orderly .press-item {
    display: grid;
    grid-template-columns: 160px 1fr 54px;
    align-items: start;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #ececec;
}

#press .press-grid--orderly .press-publication {
    flex: unset;
    margin: 0;
}

#press .press-grid--orderly .press-article {
    flex: unset;
    margin: 0;
    line-height: 1.5;
}

#press .press-grid--orderly .press-date {
    font-family: monospace;
    font-size: 0.6rem;
    color: #9a9a9a;
    text-align: right;
    letter-spacing: 0.04em;
}

@media (max-width: 1200px) {
    #press .press-grid--orderly .press-item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        padding: 0.7rem 0;
    }
    #press .press-grid--orderly .press-date {
        text-align: left;
    }
}

/* 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;
    width: 100%;
}

#talks .talks-item {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: -1px;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-align: left;
}

#talks .talks-item:hover {
    opacity: 0.5;
}

#talks .talks-publication {
    flex: 0 0 200px;
    font-family: monospace;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#talks .talks-title {
    flex: 1;
    font-size: 0.7rem;
    color: #000;
    min-width: 0;
}

#talks .talks-year {
    flex: 0 0 auto;
    font-family: monospace;
    font-size: 0.6rem;
    color: #aaa;
    text-align: right;
}

#press.list-collapsed .press-item:nth-child(n+7),
#talks.list-collapsed .talks-item:nth-child(n+6) {
    display: none !important;
}

/* 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%;
}

/* === AndreElijah.com mobile refinements (2025-11-11) === */

/* Hide slide titles/nav under the selected work + artifacts carousels on small screens */
@media (max-width: 900px) {
  #selected-work-carousel .nav,
  #artifacts-carousel .nav {
    display: none !important;
  }
}

/* Mobile nav — lowercase, subtle glass */
#mobile-nav {
  position: sticky;
  top: 0;
  z-index: 3000;
  display: none;
  backdrop-filter: saturate(1.2) blur(14px);
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#mobile-nav .mn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

#mobile-nav .mn-brand {
  text-decoration: none;
  color: #000;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

#mobile-nav #mobile-nav-toggle {
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* minimalist “hamburger” */
#mobile-nav .mn-icon {
  width: 18px; height: 18px; position: relative; display: inline-block;
}
#mobile-nav .mn-icon::before,
#mobile-nav .mn-icon::after {
  content: ""; position: absolute; left: 0; right: 0; margin: auto;
  width: 100%; height: 1px; background: #111;
}
#mobile-nav .mn-icon::before { top: 5px; }
#mobile-nav .mn-icon::after  { bottom: 5px; }
#mobile-nav #mobile-nav-toggle[aria-expanded="true"] .mn-icon::before { transform: translateY(5px) rotate(45deg); }
#mobile-nav #mobile-nav-toggle[aria-expanded="true"] .mn-icon::after  { transform: translateY(-5px) rotate(-45deg); }

#mobile-nav #mobile-nav-links {
  display: none;
  padding: 8px 10px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

#mobile-nav #mobile-nav-links a {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  color: #000;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 0.95rem;
}

/* Only show this bar on mobile; hide the left sidebar there */
@media (max-width: 900px) {
  #mobile-nav { display: block; }
  #section-nav { display: none !important; }
  html, body { padding-left: 0; }
}
/* === End mobile refinements === */


/* === Mobile adjustments (2025-11-11, pass 2) === */
@media (max-width: 900px) {

  /* 1) Mobile nav links: remove circles/pills */
  #mobile-nav #mobile-nav-links a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 4px !important;
    margin: 6px 10px 0 0 !important;
    text-decoration: none;
  }
  #mobile-nav #mobile-nav-links a:active,
  #mobile-nav #mobile-nav-links a:focus,
  #mobile-nav #mobile-nav-links a:hover {
    text-decoration: underline;
  }

  /* 2) Rejected rail: keep within screen and enable swipe */
  #rejected { overflow: visible !important; }
  #rejected .rejected-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 12px 2px 16px !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    touch-action: pan-x !important;
  }
  #rejected .rejected-card {
    flex: 0 0 auto !important;
    width: 78vw !important;          /* slightly narrower than viewport to avoid clipping */
    aspect-ratio: 4 / 3 !important;  /* consistent card proportion */
    height: auto !important;
    border-radius: 12px !important;
    margin-left: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
    overflow: hidden;
  }
  #rejected .rejected-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* 3) Reduce spacing between sections on mobile */
  #selected-work, #rejected, #artifacts, #press, #reference, #talks, #awards {
    margin: 20px 0 !important;
    padding: 16px 16px !important;
  }
  .section-title, h2, h3 {
    margin: 8px 0 12px 0 !important;
  }
  .container {
    padding: 20px 14px !important;
  }
}
/* === End mobile adjustments pass 2 === */


/* === Mobile rejected overlap & full-image view (2025-11-11, pass 3) === */
@media (max-width: 900px) {

  /* Horizontal scroller baseline */
  #rejected .rejected-cards {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;                          /* overlap uses negative margins instead of gaps */
    padding: 14px 0 18px 16px !important;       /* left pad for first card */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    touch-action: pan-x !important;
  }

  /* Overlap sizing + behavior */
  #rejected .rejected-cards {
    --card-w: 82vw;     /* base card width on mobile */
    --card-h: 58vw;     /* base card height on mobile */
    --overlap: 14vw;    /* how much the next card overlaps the previous */
  }

  #rejected .rejected-card {
    flex: 0 0 var(--card-w) !important;
    width: var(--card-w) !important;
    height: var(--card-h) !important;
    border-radius: 12px !important;
    transform: none !important;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    margin-left: calc(var(--overlap) * -1) !important;  /* create the stack overlap */
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    background: #fff;
  }

  /* First card should not shift left */
  #rejected .rejected-card:first-child {
    margin-left: 0 !important;
  }

  /* Images show fully (no cropping) */
  #rejected .rejected-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* show entire image */
    object-position: center center !important;
    background: #fff;                 /* subtle background behind letterboxed areas */
    display: block;
  }

  /* Spacer so the final card can be fully revealed */
  #rejected .rejected-cards::after {
    content: "";
    flex: 0 0 calc(var(--overlap) + 24px);
  }
}
/* === End pass 3 === */
/* === 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;
}

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

/* 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.mobile-active-color .slide-media img {
  filter: grayscale(0%);
}

#selected-work-carousel .slide.mobile-active-color .slide-media--gif .slide-poster {
  filter: grayscale(100%);
}

#selected-work-carousel .slide.hovering .slide-media img {
  opacity: 0;
}

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

#selected-work-carousel .slide-media--gif {
  cursor: default;
}

#selected-work-carousel .slide-media img.slide-gif {
  z-index: 2;
  opacity: 0;
  filter: none;
  pointer-events: none;
}

#selected-work-carousel .slide.hovering .slide-media img.slide-gif {
  opacity: 1;
  filter: none;
}

#selected-work-carousel .slide-media img.slide-mobile-gif {
  z-index: 3;
  display: none;
  opacity: 0;
  filter: none;
  pointer-events: none;
}

/*
 * Touch devices use GIFs exclusively. Only the active project's GIF is
 * hydrated by script, so Safari never exposes native video controls and the
 * carousel does not download every animation at once.
 */
@media (hover: none), (pointer: coarse), (max-width: 1200px) {
  #selected-work-carousel .slide-media video,
  #selected-work-carousel .slide-media img.slide-gif {
    display: none !important;
  }

  #selected-work-carousel .slide-media img.slide-mobile-gif {
    display: block;
  }

  #selected-work-carousel .slide.mobile-active-color .slide-media > img:not(.slide-mobile-gif) {
    opacity: 0;
  }

  #selected-work-carousel .slide.mobile-active-color .slide-media img.slide-mobile-gif[src] {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #selected-work-carousel .slide-media img.slide-gif {
    display: none;
  }

  #selected-work-carousel .slide-media img.slide-mobile-gif {
    display: none !important;
  }

  #selected-work-carousel .slide.mobile-active-color .slide-media > img:not(.slide-mobile-gif) {
    opacity: 1;
  }
}

.selected-work-expand-indicator {
  position: absolute;
  right: clamp(10px, 1.5vw, 16px);
  bottom: clamp(10px, 1.5vw, 16px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #111;
  font-family: monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#selected-work-carousel .slide--case-study:hover .selected-work-expand-indicator,
#selected-work-carousel .slide--case-study.mobile-active-color .selected-work-expand-indicator {
  border-color: #111;
}

@media (min-width: 901px) {
  .selected-work-expand-indicator {
    right: clamp(44px, 4vw, 72px);
  }
}

.selected-work-modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.95), rgba(247, 247, 244, 0.92) 52%, rgba(238, 238, 234, 0.9)),
    rgba(248, 248, 246, 0.92);
  backdrop-filter: blur(34px) saturate(1.1);
  -webkit-backdrop-filter: blur(34px) saturate(1.1);
  color: #111;
  box-sizing: border-box;
}

.selected-work-modal.active {
  display: flex;
}

html.selected-work-modal-open,
body.selected-work-modal-open {
  overflow: hidden !important;
}

.selected-work-bento {
  position: relative;
  width: min(1320px, 100%);
  height: min(720px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.55fr) minmax(280px, 0.74fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.25vw, 18px);
}

.selected-work-bento-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(18px, 1.9vw, 30px);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.075);
}

.selected-work-bento-card--intro {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 2.6vw, 38px);
}

.selected-work-bento-card--thumb {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: #fff;
}

.selected-work-bento-card--video {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: #050505;
}

.selected-work-bento-card--meta {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.86);
}

.selected-work-bento-card--meta div {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 2vw, 28px);
}

.selected-work-bento-card--meta div + div {
  border-top: 1px solid rgba(0, 0, 0, 0.075);
}

.selected-work-bento-card--meta dt,
.selected-work-bento-label,
.selected-work-kicker {
  margin: 0 0 0.55rem;
  font-family: monospace;
  font-size: 0.58rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: #9a9a9a;
  text-transform: uppercase;
}

.selected-work-bento-card--meta dd {
  margin: 0;
  font-size: clamp(0.72rem, 0.86vw, 0.95rem);
  line-height: 1.5;
  color: #111;
  text-transform: lowercase;
}

.selected-work-bento-card--intro h2 {
  max-width: 16ch;
  margin: 0 0 1.15rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Graphik Wide', 'Graphik Light', Arial, sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: normal;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-transform: lowercase;
}

.selected-work-bento-card--intro p:last-child {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem);
  line-height: 1.6;
  color: #444;
}

.selected-work-bento-label {
  position: absolute;
  top: clamp(14px, 1.7vw, 24px);
  left: clamp(16px, 2vw, 28px);
  z-index: 2;
}

.selected-work-bento-card--thumb video,
.selected-work-bento-card--video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.selected-work-bento-card--thumb video {
  object-fit: contain;
}

.selected-work-bento-card--video video {
  object-fit: contain;
}

.selected-work-bento-card--video video {
  background: #000;
}

@media (min-width: 901px) and (max-width: 1120px) {
  .selected-work-bento {
    grid-template-columns: minmax(230px, 0.75fr) minmax(420px, 1.45fr) minmax(240px, 0.8fr);
  }

  .selected-work-bento-card--intro h2 {
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  }

  .selected-work-bento-card--intro p:last-child,
  .selected-work-bento-card--meta dd {
    font-size: 0.7rem;
  }
}

.selected-work-modal-close,
.press-modal .modal-close,
.video-modal .modal-close,
#reference-modal .reference-modal-close,
.reference-fullscreen-close,
.rejected-modal-close,
#secret-modal .secret-modal-close {
  position: absolute;
  top: clamp(8px, 1vw, 14px);
  right: clamp(8px, 1vw, 14px);
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #111;
  cursor: pointer;
  font: 1.25rem/1 monospace;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.selected-work-modal-close:hover,
.selected-work-modal-close:focus-visible,
.press-modal .modal-close:hover,
.press-modal .modal-close:focus-visible,
.video-modal .modal-close:hover,
.video-modal .modal-close:focus-visible,
#reference-modal .reference-modal-close:hover,
#reference-modal .reference-modal-close:focus-visible,
.reference-fullscreen-close:hover,
.reference-fullscreen-close:focus-visible,
.rejected-modal-close:hover,
.rejected-modal-close:focus-visible,
#secret-modal .secret-modal-close:hover,
#secret-modal .secret-modal-close:focus-visible {
  background: #111;
  color: #fff;
}

@media (max-width: 900px) {
  .selected-work-modal {
    --selected-work-mobile-gap: 10px;
    padding: var(--selected-work-mobile-gap);
    overflow-y: auto;
    align-items: flex-start;
  }

  .selected-work-bento {
    height: auto;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--selected-work-mobile-gap);
  }

  .selected-work-bento-card,
  .selected-work-bento-card--intro,
  .selected-work-bento-card--thumb,
  .selected-work-bento-card--video,
  .selected-work-bento-card--meta {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }

  .selected-work-bento-card--intro {
    min-height: 280px;
  }

  .selected-work-bento-card--thumb {
    height: 220px;
  }

  .selected-work-bento-card--video {
    height: 300px;
  }

  .selected-work-bento-card--meta {
    display: flex;
  }

  .selected-work-bento-card--meta div {
    min-height: 98px;
  }
}

/* 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 {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  padding-top: 20rem;
  padding-bottom: -10rem;
  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 */
}
#selected-work-carousel {
  margin-bottom: 40rem; /* increase or decrease to taste */
}
#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: 3.5rem;
  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%);
}

@media (max-width: 768px) {
  #selected-work-carousel .nav {
    font-size: 0.6rem;
    gap: 12px;
  }
}

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

/* === 2026-02 layout + color fixes === */

/* Keep page background white edge-to-edge */
html,
body {
  background-color: #fff;
}

/* Selected work: keep nav close to the media with a small gap */
#selected-work-carousel {
  height: auto;
  min-height: 0;
  margin-bottom: 2rem;
}

#selected-work-carousel .slides {
  height: 60vh;
  min-height: 400px;
}

#selected-work-carousel .nav {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin-top: 0.75rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* Rejected cards: side-by-side with no overlap */
#rejected .rejected-cards {
  overflow-x: visible;
  gap: 8px;
}

#rejected .rejected-card:not(:first-child) {
  margin-left: 0;
}

/* Desktop: shrink cards so the full row fits in-view */
@media (min-width: 901px) {
  #rejected .rejected-cards {
    justify-content: space-between;
  }

  #rejected .rejected-card {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: 240 / 348;
  }
}

@media (max-width: 900px) {
  #rejected .rejected-cards {
    gap: 12px !important;
    padding: 12px 0 16px !important;
  }

  #rejected .rejected-card {
    margin-left: 0 !important;
  }

  #rejected .rejected-cards::after {
    content: none !important;
    flex: 0 0 0 !important;
  }
}

/* Bottom arrow should be black on white */
#secret-arrow {
  color: #000;
  background: #fff;
  text-shadow: none;
}

/* Rejected section — accordion */
#rejected .rejected-accordion {
  width: 100%;
}

#rejected .rejected-accordion-item {
  border-top: 1px solid #e0e0e0;
}

#rejected .rejected-accordion-item:last-child {
  border-bottom: 1px solid #e0e0e0;
}

#rejected .rejected-accordion-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.75rem 0;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: opacity 0.15s ease;
}

#rejected .rejected-accordion-header:hover {
  opacity: 0.6;
}

#rejected .rejected-accordion-title {
  font-size: 0.7rem;
  color: #222;
  flex: 1;
}

#rejected .rejected-accordion-client {
  font-family: monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: #aaa;
}

#rejected .rejected-accordion-chevron {
  font-size: 1rem;
  color: #aaa;
  transition: transform 0.25s ease;
  line-height: 1;
}

#rejected .rejected-accordion-item.is-open .rejected-accordion-chevron {
  transform: rotate(90deg);
}

#rejected .rejected-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

#rejected .rejected-accordion-item.is-open .rejected-accordion-body {
  max-height: 600px;
}

#rejected .rejected-accordion-context {
  font-size: 0.7rem;
  color: #555;
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}

#rejected .rejected-accordion-slides {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  padding-bottom: 1rem;
  overflow-x: auto;
}

#rejected .rejected-accordion-slides img {
  height: 100px;
  width: auto;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}

#rejected .rejected-slides-more {
  flex-shrink: 0;
  height: 100px;
  min-width: 80px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 0.6rem;
  color: #aaa;
  letter-spacing: 0.05em;
  background: #fafafa;
}

/* Reference section */
#reference .reference-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}

#reference .reference-tagline {
  margin: 0;
  font-size: 0.7rem;
  color: #888;
  line-height: 1.6;
  max-width: 480px;
}

#reference .reference-controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

#reference-refresh,
#reference-expand-btn,
.reference-fullscreen-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid #ccc;
  background: transparent;
  color: #555;
  font-size: 0.6rem;
  font-family: monospace;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0.3em 0.65em;
  border-radius: 4px;
  line-height: 1;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

#reference-mobile-fullscreen {
  display: none;
}

#reference-refresh:hover,
#reference-expand-btn:hover,
.reference-fullscreen-refresh:hover {
  opacity: 0.6;
}

/* Reference fullscreen overlay */
.reference-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  overflow: hidden;
  overscroll-behavior: none;
}

.reference-fullscreen.active {
  opacity: 1;
  visibility: visible;
}

.reference-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.reference-fullscreen-title {
  font-size: 1rem;
  font-weight: normal;
  color: #555;
  margin: 0;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.reference-fullscreen-close {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #666;
  line-height: 1;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
  font-family: inherit;
}

.reference-fullscreen-close {
  font-size: 1.4rem;
}

.reference-fullscreen-refresh {
  width: auto;
  height: 34px;
}

.reference-fullscreen-close:hover {
  opacity: 1;
  color: #222;
}

.reference-fullscreen-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-right: 54px;
}

.reference-view-toggle {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #666;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.reference-view-toggle:hover {
  opacity: 1;
  color: #222;
}

.reference-fullscreen-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: #f8f8f8;
  /* Fullscreen strips: explicit visual thickening controls */
  --reference-fullscreen-strip-height: 2400px;
}

.reference-fullscreen-grid::-webkit-scrollbar { width: 6px; }
.reference-fullscreen-grid::-webkit-scrollbar-track { background: transparent; }
.reference-fullscreen-grid::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }

.reference-fullscreen-item {
  border: none;
  padding: 0;
  width: 100%;
  display: block;
  background: #f3f3f3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.18s;
}

.reference-fullscreen-item:hover { opacity: 0.75; }

.reference-fullscreen .reference-fullscreen-item img,
.reference-fullscreen .reference-fullscreen-item video {
  width: 100%;
  height: var(--reference-fullscreen-strip-height) !important;
  display: block;
  object-fit: cover;
  transform: none !important;
  transform-origin: center;
  will-change: auto;
}

.reference-fullscreen-item video { background: #000; }

.reference-fullscreen-grid.is-full-previews {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.reference-fullscreen-grid.is-full-previews .reference-fullscreen-item {
  aspect-ratio: auto;
}

.reference-fullscreen-grid.is-full-previews .reference-fullscreen-item img,
.reference-fullscreen-grid.is-full-previews .reference-fullscreen-item video {
  height: 120px;
  object-fit: cover;
}

/* reference-modal sits above the fullscreen overlay when both are open */
.reference-fullscreen.active ~ #reference-modal.active { z-index: 5000; }

html.reference-fullscreen-open,
body.reference-fullscreen-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

@media (max-width: 1100px) {
  .reference-fullscreen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reference-fullscreen-grid.is-full-previews { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 680px) {
  .reference-fullscreen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem 1rem; }
  .reference-fullscreen .reference-fullscreen-item img,
  .reference-fullscreen .reference-fullscreen-item video {
    height: 1900px !important;
    transform: none !important;
  }
  .reference-fullscreen-header { padding: 1rem; }
  .reference-fullscreen-grid.is-full-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reference-fullscreen-grid.is-full-previews .reference-fullscreen-item img,
  .reference-fullscreen-grid.is-full-previews .reference-fullscreen-item video {
    height: 1900px !important;
    transform: none !important;
  }
}

#reference .reference-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  grid-auto-flow: row dense;
}

#reference .reference-item {
  border: none;
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
  appearance: none;
  background: #f3f3f3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

#reference .reference-item img,
#reference .reference-item video {
  width: 100%;
  height: 120px !important;
  display: block;
  object-fit: cover !important;
}

#reference .reference-item video {
  background: #000;
}

#reference .reference-empty {
  font-size: 0.7rem;
  color: #555;
}

#reference-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3500;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#reference-modal.active {
  display: flex;
}

#reference-modal-content {
  width: min(96vw, 1400px);
  height: min(92vh, 92vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

#reference-modal-content img,
#reference-modal-content video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#reference-modal-content video {
  width: 100%;
  height: 100%;
  background: #000;
}

/* Reel / reference video: control chip matches reference refresh (mono, bordered); placed low so it clears the circular close control. */
#reference-modal .reference-modal-audio-toggle {
  position: absolute;
  bottom: clamp(18px, 3.5vh, 42px);
  right: clamp(16px, 3vw, 28px);
  top: auto;
  left: auto;
  z-index: 5002;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0.3em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
  background: rgba(22, 22, 22, 0.58);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.6rem;
  font-family: monospace;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#reference-modal .reference-modal-audio-toggle:hover {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(36, 36, 36, 0.62);
}

#reference-modal .reference-modal-audio-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  #reference .reference-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #reference .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #reference .reference-item img,
  #reference .reference-item video {
    height: 95px !important;
  }
}

/* Close button for rejected project modals */
.rejected-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #aaa;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s ease;
  z-index: 10;
}

.rejected-modal-close:hover {
  color: #000;
}

/* Use one close-button language across every modal surface. */
.selected-work-modal-close,
.press-modal .modal-close,
.video-modal .modal-close,
#reference-modal .reference-modal-close,
.reference-fullscreen-close,
.rejected-modal-close,
#secret-modal .secret-modal-close {
  position: absolute !important;
  top: clamp(8px, 1vw, 14px) !important;
  right: clamp(8px, 1vw, 14px) !important;
  left: auto !important;
  z-index: 5001;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #111;
  cursor: pointer;
  font: 1.25rem/1 monospace;
  text-align: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.selected-work-modal-close:hover,
.selected-work-modal-close:focus-visible,
.press-modal .modal-close:hover,
.press-modal .modal-close:focus-visible,
.video-modal .modal-close:hover,
.video-modal .modal-close:focus-visible,
#reference-modal .reference-modal-close:hover,
#reference-modal .reference-modal-close:focus-visible,
.reference-fullscreen-close:hover,
.reference-fullscreen-close:focus-visible,
.rejected-modal-close:hover,
.rejected-modal-close:focus-visible,
#secret-modal .secret-modal-close:hover,
#secret-modal .secret-modal-close:focus-visible {
  border-color: #111;
  background: #111;
  color: #fff;
}

/* Reference fullscreen refresh: grid-lanes inspired masonry behavior */
.reference-fullscreen-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 7px !important;
  /* `dense` re-places the whole grid on every insert and can freeze main thread at hundreds of tiles. */
  grid-auto-flow: row !important;
  gap: 10px !important;
  padding: 1rem 2rem 2rem !important;
}

.reference-fullscreen-item {
  position: relative;
  border-radius: 10px !important;
  overflow: hidden;
  background: #f1f1f1 !important;
  min-height: 0;
  grid-row: span 28;
  contain: layout style;
}

.reference-fullscreen-item.lane-s { grid-row: span 20; }
.reference-fullscreen-item.lane-m { grid-row: span 28; }
.reference-fullscreen-item.lane-l { grid-row: span 36; }
.reference-fullscreen-item.lane-xl { grid-row: span 48; }

.reference-fullscreen .reference-fullscreen-item img,
.reference-fullscreen .reference-fullscreen-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Keep tile height stable when lazy-unload clears img/video src (avoids grid relayout + IO storms). */
.reference-fullscreen .reference-fullscreen-item .reference-preview-media {
  min-height: 12rem;
  background: #e5e5e5;
}

.reference-fullscreen-sentinel {
  grid-column: 1 / -1;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Safari / WebKit: `contain` + subgrid-like masonry can mis-layout; IO on overflow roots is flaky. */
.reference-fullscreen.fs-webkit-fs .reference-fullscreen-item {
  contain: none;
}

.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

/* WebKit fullscreen: one fixed batch per view — same idea as .is-full-previews (explicit media height). */
.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid.fs-webkit-simple-grid {
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  contain: none;
}

.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid.fs-webkit-simple-grid .reference-fullscreen-item {
  grid-row: auto !important;
  aspect-ratio: unset !important;
  min-height: 188px !important;
  height: auto !important;
  align-self: start;
}

.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid.fs-webkit-simple-grid .reference-fullscreen-item img,
.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid.fs-webkit-simple-grid .reference-fullscreen-item video {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  object-fit: cover !important;
}

.reference-fullscreen.fs-webkit-fs .reference-fullscreen-grid.fs-webkit-simple-grid .reference-fullscreen-item .reference-preview-media {
  min-height: 180px !important;
  height: 180px !important;
  display: block !important;
}

.reference-fullscreen.fs-webkit-fs .reference-fullscreen-header {
  position: relative !important;
}

.reference-fullscreen-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.reference-fullscreen-item:hover::after {
  opacity: 1;
}

/* Reference modal share controls — bottom-left so video “copy link” never stacks on the unmute chip (bottom-right). */
#reference-modal .reference-modal-share {
  position: absolute;
  left: clamp(16px, 3vw, 22px);
  right: auto;
  bottom: clamp(18px, 3.5vh, 42px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: min(92vw, 420px);
  pointer-events: auto;
}

#reference-modal .reference-share-btn {
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-family: monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

#reference-modal .reference-share-btn:hover {
  opacity: 0.8;
  border-color: rgba(255,255,255,0.75);
}

@media (max-width: 1100px) {
  .reference-fullscreen-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .reference-fullscreen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 6px !important;
    padding: 0.75rem 1rem 1.25rem !important;
  }
  .reference-fullscreen-item.lane-s { grid-row: span 18; }
  .reference-fullscreen-item.lane-m { grid-row: span 24; }
  .reference-fullscreen-item.lane-l { grid-row: span 30; }
  .reference-fullscreen-item.lane-xl { grid-row: span 40; }

  #reference-modal .reference-modal-share {
    left: 14px;
    right: auto;
    bottom: 14px;
    width: auto;
    max-width: min(94vw, 460px);
  }
}

/* Interaction hardening without typography changes */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

#reference-refresh,
#reference-expand-btn,
#reference-modal .reference-share-btn,
.reference-modal-close,
#reference-modal .reference-modal-audio-toggle,
.reference-fullscreen-close,
.modal .modal-close,
.rejected-modal-close {
  min-width: 34px;
  min-height: 34px;
}

#section-nav a {
  padding: 6px 0;
}

@media (prefers-reduced-motion: reduce) {
  html, body {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #selected-work-carousel .slides,
  #artifacts-carousel .slides {
    transition: none !important;
  }
}

/* === 2026 responsive index: replaces the retired mobile.html path === */
@media (max-width: 1200px) {
  html,
  body {
    width: 100%;
    padding-left: 0 !important;
    overflow-x: hidden;
    background: #fff;
    color: #333;
    font-size: 16px;
    line-height: 1.55;
  }

  main {
    width: 100%;
    margin: 0;
    padding-left: 44px !important;
    background: #fff;
    box-sizing: border-box;
  }

  .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: clamp(36px, 8vh, 68px) 20px !important;
    box-sizing: border-box;
  }

  #hero,
  #selected-work,
  #rejected,
  #selected-clients,
  #press,
  #reference,
  #talks,
  #awards {
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 !important;
  }

  #hero {
    min-height: auto !important;
    justify-content: flex-start;
    padding-top: clamp(56px, 12vh, 96px) !important;
  }

  #hero .name,
  .section-title {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 1rem !important;
    font-weight: normal;
  }

  .subtitle-rule {
    width: 2rem;
    margin: 0.5rem 0 0.6rem;
  }

  #hero .subtitle {
    font-size: 0.6rem;
    line-height: 1.45;
    letter-spacing: 0.08em;
    max-width: 30ch;
    color: #999;
  }

  #hero .bio,
  #hero .bio a,
  .modal-inner p,
  #rejected .rejected-accordion-context,
  #reference .reference-tagline,
  .award-item,
  .award-list li {
    font-size: 0.72rem;
    line-height: 1.65;
  }

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

  .reel-card,
  .contact-btn {
    min-height: 34px;
    align-items: center;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    font-size: 0.7rem;
  }

  .reel-card {
    margin-bottom: 0;
  }

  .reel-card-title {
    font-size: 0.7rem;
  }

  #contact-block {
    gap: 0.75rem;
  }

  #social-links {
    gap: 14px;
  }

  #social-links a {
    font-size: 0.6rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  #hero .reel-card,
  #hero .contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 0.95rem;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-family: inherit;
    font-size: 0.74rem;
    text-align: center;
    text-transform: lowercase;
    text-decoration: none !important;
    box-sizing: border-box;
    line-height: 1;
  }

  #hero .reel-card-title,
  #hero .contact-btn-title {
    display: block;
    position: static;
    transform: none;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
  }

  #hero #contact-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  #hero #social-links {
    grid-column: 1 / -1;
  }

  #mobile-nav {
    display: none !important;
  }

  #mobile-nav .mn-bar {
    min-height: 56px;
    padding: 0 18px;
  }

  #mobile-nav .mn-brand {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }

  #mobile-nav #mobile-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: #111;
    font-family: inherit;
    font-size: 0.76rem;
    text-transform: lowercase;
  }

  #mobile-nav #mobile-nav-links {
    display: none;
    padding: 2px 18px 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  #mobile-nav #mobile-nav-links a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #111;
    font-size: 0.92rem;
    text-decoration: none;
  }

  .scroll-indicator,
  .scroll-indicator * {
    display: none !important;
  }

  #section-nav {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: 0;
    width: 44px;
    min-height: 0;
    transform: translateY(-50%);
    padding: 10px 0;
    gap: 14px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    z-index: 3100;
  }

  #section-nav a {
    display: block;
    padding: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #000;
    opacity: 0.42;
    text-decoration: none;
  }

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

  #scroll-progress {
    height: 2px;
  }

  #selected-work-carousel {
    width: min(58vw, 240px);
    margin: 1.4rem auto 0;
    overflow: visible;
  }

  #selected-work-carousel .slides {
    height: min(34vh, 280px);
    min-height: 0;
  }

  #selected-work-carousel .slide-media {
    border-radius: 10px;
    background: transparent;
  }

  #selected-work-carousel .slide-media img,
  #selected-work-carousel .slide-media video {
    object-fit: contain !important;
  }

  #selected-work-carousel .nav {
    display: flex !important;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 0.65rem;
    padding: 0.1rem 0 0.45rem;
    overflow-x: auto;
    font-size: 0.65rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    color: #b7b7b7;
    max-width: 100%;
  }

  #selected-work-carousel .nav li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }

  #selected-work-carousel::after {
    content: "swipe work \2192";
    display: block;
    margin-top: 0.15rem;
    font-family: monospace;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: #aaa;
    text-transform: uppercase;
    text-align: center;
  }

  #selected-work,
  #rejected,
  #selected-clients,
  #press,
  #talks,
  #awards,
  #reference {
    text-align: left;
  }

  #selected-work-carousel .fade {
    display: none;
  }

  #rejected .rejected-accordion-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title chevron"
      "client chevron";
    align-items: center;
    gap: 0.2rem 1rem;
    min-height: 64px;
    padding: 0.85rem 0;
  }

  #rejected .rejected-accordion-title {
    grid-area: title;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  #rejected .rejected-accordion-client {
    grid-area: client;
    font-size: 0.65rem;
    line-height: 1.2;
  }

  #rejected .rejected-accordion-chevron {
    grid-area: chevron;
    font-size: 1.4rem;
  }

  #rejected .rejected-accordion-item.is-open .rejected-accordion-body {
    max-height: 760px;
  }

  #rejected .rejected-accordion-slides {
    gap: 0.65rem;
    padding-bottom: 1.2rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #rejected .rejected-accordion-slides img,
  #rejected .rejected-slides-more {
    height: 128px;
    border-radius: 10px;
    scroll-snap-align: start;
  }

  #selected-clients .client-list--all {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.15rem;
  }

  #selected-clients .client-list--all li {
    width: auto;
    font-size: 0.72rem;
    line-height: 1.55;
  }

  #press .press-grid,
  #press .press-grid--orderly,
  #talks .talks-grid {
    display: block;
  }

  #press .press-grid--orderly .press-item,
  #talks .talks-item {
    grid-template-columns: 1fr;
    display: grid;
    gap: 0.22rem;
    min-height: 58px;
    padding: 0.85rem 0;
  }

  #press.mobile-collapsed .press-item:nth-child(n+7),
  #talks.mobile-collapsed .talks-item:nth-child(n+6) {
    display: none !important;
  }

  #press .press-publication,
  #press .press-grid--orderly .press-publication,
  #press .press-date,
  #talks .talks-publication,
  #talks .talks-year {
    font-size: 0.68rem;
    text-align: left;
  }

  #press .press-article,
  #talks .talks-title {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .mobile-section-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 0.85rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #000;
    font-family: monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.55;
  }

  .mobile-section-toggle:hover,
  .mobile-section-toggle:focus-visible {
    opacity: 1;
  }

  .award-category {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
  }

  #reference .reference-header {
    display: block;
  }

  #reference .reference-tagline {
    max-width: none;
    margin-bottom: 1rem;
  }

  #reference .reference-controls {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  #reference-refresh,
  #reference-expand-btn,
  .reference-fullscreen-refresh {
    min-height: 44px;
    border-radius: 999px;
    padding: 0 1rem;
    font-size: 0.72rem;
  }

  #reference .reference-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  #reference-expand-btn {
    display: none;
  }

  #reference-refresh,
  #reference-mobile-fullscreen,
  .reference-fullscreen-refresh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 0.95rem;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-family: inherit;
    font-size: 0.74rem;
    text-align: left;
    text-transform: lowercase;
    cursor: pointer;
  }

  #reference-mobile-fullscreen::after {
    content: "\2197";
    font-family: monospace;
    font-size: 0.9rem;
    color: #aaa;
  }

  .reference-fullscreen-refresh {
    width: auto;
    min-width: 92px;
  }

  #reference .reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  #reference .reference-item {
    border-radius: 12px;
  }

  #reference .reference-item img,
  #reference .reference-item video {
    height: clamp(120px, 32vw, 180px) !important;
  }

  .modal,
  .press-modal,
  .video-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-inner {
    width: 100%;
    max-width: none;
    max-height: min(82svh, 760px) !important;
    padding: 1.2rem;
    border-radius: 22px 22px 0 0;
  }

  .modal-inner h2 {
    font-size: 1.25rem;
    line-height: 1.15;
    padding-right: 2rem;
  }

  .image-scroll {
    gap: 0.75rem;
  }

  .image-scroll img {
    max-width: 86vw;
    height: 56svh;
    border-radius: 12px;
  }

  .video-modal-content {
    width: 100%;
  }

  .press-modal img {
    max-width: 96vw;
    max-height: 84svh;
  }

  .reference-fullscreen-header {
    padding: 0.85rem 1rem !important;
  }

  .reference-fullscreen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 1rem !important;
  }

  #reference-modal {
    padding: 14px;
  }

  #reference-modal .reference-modal-close,
  #reference-modal .reference-modal-audio-toggle,
  .rejected-modal-close,
  .modal .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  .container {
    padding-left: 16px !important;
    padding-right: 20px !important;
  }

  #selected-work-carousel {
    width: min(58vw, 220px);
  }

  #selected-work-carousel .slides {
    height: min(32vh, 260px);
  }

  #selected-clients .client-list--all {
    grid-template-columns: 1fr;
  }

  #hero .bio,
  #hero .bio a,
  .modal-inner p,
  #rejected .rejected-accordion-context,
  #reference .reference-tagline,
  .award-item,
  .award-list li {
    font-size: 0.72rem;
  }
}

/* Final hero CTA alignment: keep both labels optically centered. */
#hero #contact-block .reel-card,
#hero #contact-block .contact-btn {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}

#hero #contact-block .reel-card-title,
#hero #contact-block .contact-btn-title {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}