/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
    --font-primary: 'Fraunces', serif;
    --color-text: #181715;
    --color-text-light: #3a3834;
    --color-text-lighter: #666;
    --color-background: #fbf5e9;
    --color-border: #181715;
    --color-accent-blue: #0c11a6;
    --color-accent-red: #a31515;
    --color-white: #fff;
    --color-black: rgba(0, 0, 0, 0.9);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-light: rgba(247, 243, 233, 0.95);
    --color-border-alpha: rgba(24, 23, 21, 0.3);
    --color-border-light: rgba(24, 23, 21, 0.1);
    --color-white-alpha: rgba(255, 255, 255, 0.6);
    --color-filter-hover: rgba(173, 216, 230, 0.3);
    --color-filter-active: rgba(173, 216, 230, 0.6);
    --spacing: 2rem;

    /* Chat-log speaker colors */
    --color-chat-moderator: #000000;
    --color-chat-modernist: #46801f;
    --color-chat-postmodern: #b8510a;
}

/* ===== RESET & BASE ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;  /* Base font size - you can change this! */
    font-weight: 300;
    font-optical-sizing: auto;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

/* External links styling */
a[href^="http"]:not([href*="monocultured.com"]),
a[href^="https"]:not([href*="monocultured.com"]),
a[href^="mailto"],
a[target="_blank"] {
    background-color: var(--color-filter-hover);
    color: var(--color-accent-blue);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* All links in project descriptions get cream background button styling */
.section-description a[href^="http"],
.section-description a[href^="https"],
.section-description a[href^="mailto"],
.section-description a[target="_blank"],
.section-description a[href*="monocultured.com"] {
    background-color: var(--color-filter-hover) !important;
    color: inherit !important;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.section-description a:hover {
    color: var(--color-accent-red);
}

/* Blog links styling - for monocultured.com/blog links */
a[href*="monocultured.com/blog"] {
    background-color: var(--color-filter-hover);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

a[href^="http"]:not([href*="monocultured.com"]):hover,
a[href^="https"]:not([href*="monocultured.com"]):hover,
a[href^="mailto"]:hover,
a[target="_blank"]:hover,
a[href*="monocultured.com/blog"]:hover {
    background-color: var(--color-filter-active);
}

/* Project description links hover - override with higher specificity */
.section-description a[href^="http"]:hover,
.section-description a[href^="https"]:hover,
.section-description a[href^="mailto"]:hover,
.section-description a[target="_blank"]:hover,
.section-description a[href*="monocultured.com"]:hover {
    background-color: var(--color-filter-active) !important;
    color: var(--color-accent-red) !important;
}

a[href^="http"]:not([href*="monocultured.com"]):visited,
a[href^="https"]:not([href*="monocultured.com"]):visited,
a[href^="mailto"]:visited,
a[target="_blank"]:visited,
a[href*="monocultured.com/blog"]:visited {
    background-color: var(--color-filter-hover);
}

/* Local anchor links styling - exclude all heading tags */
a[href^="#"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    background-color: var(--color-filter-hover);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

a[href^="#"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):hover {
    background-color: var(--color-filter-active);
}

/* Exclude anchors that are direct children of heading elements */
h1 a[href^="#"],
h2 a[href^="#"],
h3 a[href^="#"],
h4 a[href^="#"],
h5 a[href^="#"],
h6 a[href^="#"] {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

blockquote {
    font-style: italic;
    margin-top: 2rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-background);
    backdrop-filter: blur(10px);
    border-bottom: 1px dashed var(--color-border-alpha);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Nav hiding only applies on mobile screens */
@media (max-width: 768px) {
    .site-header.nav-hidden .filter-nav,
    .site-header.nav-hidden .info-btn {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: 0;
        overflow: hidden;
    }

    .site-header .filter-nav,
    .site-header .info-btn {
        opacity: 1;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .site-header.nav-hidden .header-content {
        padding: 0.5rem 1rem;
        transition: padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    transition: padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-title {
    flex: 0 0 auto;
}

.site-title a {
    font-size: 28px;  /* Site title size - same as section headings now! */
    font-weight: 700;
    font-optical-sizing: auto;
    color: var(--color-text);
}

.site-title a:hover {
    opacity: 0.7;
}

.filter-nav {
    display: flex;
    gap: 1.5rem;
}

.filter-btn {
    font-size: 16px;  /* Navigation font size - you can change this! */
    font-weight: 400;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    padding: 0.5rem 0;
}

.filter-btn:hover,
.filter-btn.active {
    color: var(--color-accent-blue);
}

.info-btn {
    font-size: 14px;
    color: var(--color-text-light);
    transition: color 0.2s ease;
    padding: 0.5rem 0;
}

.info-btn:hover {
    color: var(--color-accent-red);
}

/* Hide mobile info button on desktop */
.info-btn-mobile {
    display: none;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    width: 100%;
    padding: 100px 2rem 4rem;
}

/* ===== PROJECT SECTIONS ===== */
.project-section {
    margin-bottom: 3rem;
    border-bottom: 1px dashed var(--color-border-alpha);
    padding-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.project-section:last-child {
    border-bottom: none;
    margin-bottom: 2rem;
}

.project-section.hidden {
    display: none;
}

.section-header {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 28px;  /* Section title size - you can change this! */
    font-weight: 700;
    font-optical-sizing: auto;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.section-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.section-link:hover {
    opacity: 0.7;
}

.section-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.section-year {
    font-size: 14px;  /* Meta text size - you can change this! */
    color: var(--color-text-lighter);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-category {
    font-size: 14px;  /* Meta text size - you can change this! */
    color: var(--color-text-lighter);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-description {
    font-size: 18px;  /* Body/description text size - you can change this! */
    line-height: 1.5;
    color: var(--color-text-light);
    max-width: 700px;
}

/* ===== FLEXIBLE IMAGE LAYOUTS ===== */
.section-content {
    margin-top: 2rem;
}

/* Single image */
.image-layout-single {
    display: block;
    max-width: 600px;
}

.image-layout-single img {
    width: 100%;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.image-layout-single img:hover {
    opacity: 0.9;
}

/* Image layout grid systems */
.image-layout-1up {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-layout-2up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-layout-3up {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-layout-4up {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-layout-1up img,
.image-layout-2up img,
.image-layout-3up img,
.image-layout-4up img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.image-layout-1up img:hover,
.image-layout-2up img:hover,
.image-layout-3up img:hover,
.image-layout-4up img:hover {
    opacity: 0.9;
}

/* More images indicator */
.more-images-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 12px;
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: color 0.2s ease;
}

.more-images-indicator:hover {
    color: var(--color-text);
}

.more-images-indicator::before {
    content: '+';
    font-size: 14px;
}

/* ===== EXPANDABLE TEXT ===== */
.section-description {
    position: relative;
}

.section-description.expandable {
    max-height: 4em;
    overflow: hidden;
}

.section-description.expandable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5em;
    background: linear-gradient(to bottom, transparent, var(--color-background));
    pointer-events: none;
}

.section-description.expanded {
    max-height: none;
}

.section-description.expanded::after {
    display: none;
}

.expand-text-btn {
    display: block;
    margin-top: 0.5rem;
    font-size: 12px;
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.expand-text-btn:hover {
    color: var(--color-text);
}

.expand-text-btn::before {
    content: '+ ';
}

.expand-text-btn.expanded::before {
    content: '− ';
}

/* ===== ESSAY LAYOUT ===== */
.essay-section .essay-content {
    max-width: 1000px;
    margin: 2rem 0;
    column-count: 1;
    line-height: 1.7;
    text-align: left;
    hyphens: auto;
}

.essay-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 2rem 0 1rem 0;
    color: var(--color-text);
    break-after: avoid;
    break-inside: avoid;
}

.essay-content h3:first-child {
    margin-top: 0;
}

.essay-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--color-text-light);
    break-inside: avoid;
}

.essay-content p:last-child {
    margin-bottom: 0;
}

/* Chat-log styling for specific essay */
.essay-content .chat-log {
    background: rgba(247, 244, 206, 0.3);
    margin: 0;
    padding: 20px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    color: var(--color-text);
    break-inside: auto;
    page-break-inside: auto;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

/* Override default div spacing in chat-log */
.chat-log div {
    display: block;
    margin: 0 !important;
    padding: 0;
}

/* Make usernames bold and give each speaker a color */
.chat-log strong {
    font-weight: 700;
}

/* Color coding for different speakers */
.chat-log .mod {
    color: var(--color-chat-moderator);
    margin-bottom: 2px !important;
    line-height: 1.4;
}

.chat-log .ist {
    color: var(--color-chat-modernist);
    margin-bottom: 2px !important;
    line-height: 1.4;
}

.chat-log .hell {
    color: var(--color-chat-postmodern);
    margin-bottom: 2px !important;
    line-height: 1.4;
}

.chat-log .sys {
    color: var(--color-text-lighter);
    font-style: italic;
    margin-bottom: 2px !important;
    line-height: 1.4;
}

/* Special styling for chat-log essay */
.essay-content[data-project-id="virtual-photography-essay-2005"] {
    hyphens: none;
}

/* Mobile responsiveness for essays */
@media (max-width: 768px) {
    .essay-section .essay-content {
        max-width: 100%;
    }
}

/* ===== MEDIA PLAYERS ===== */
.media-content {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

.video-player {
    width: 100%;
    max-width: 600px;
}

.video-player iframe {
    width: 100%;
    height: 338px;
    border: none;
}

/* Local video elements */
.video-player video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


/* Responsive video sizing - lower resolution videos stay at native size */
@media (max-width: 720px) {
    .video-player video {
        max-width: min(100vw, 720px);
    }
}

@media (min-width: 721px) {
    .video-player video {
        max-width: min(100%, 1200px);
    }
}

/* ===== VIDEO CAROUSEL ===== */
.video-carousel-container {
    margin-top: 1rem;
}

.video-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 650px;
}

.video-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-text-light);
    aspect-ratio: 16/9;
    border: 1px dashed rgba(24, 23, 21, 0.3);
    transition: transform 0.2s ease;
}

.video-preview:hover,
.video-preview:focus {
    transform: translateY(-2px);
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    background: rgba(247, 244, 206, 0.8);
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.video-preview:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.play-button {
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: scale(1);
    transition: transform 0.2s ease;
}

.video-preview:hover .play-button {
    transform: scale(1.2);
}


/* Video expandable grid */
.video-grid-full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    max-width: 650px;
}

.video-grid-full.expanded {
    display: grid;
}

/* Mobile responsive for video grid */
@media (max-width: 768px) {
    .video-grid-full {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .video-preview-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.audio-player {
    width: 100%;
    max-width: 400px;
}

.audio-player audio {
    width: 100%;
    height: 40px;
}

.audio-title {
    font-size: 12px;
    color: var(--color-text-lighter);
    margin-bottom: 0.5rem;
}

/* Multiple audio players container */
.audio-players-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

/* When multiple audio players are stacked, give them consistent styling */
.audio-players-container .audio-player {
    max-width: 100%;
    padding: 0.75rem;
    background-color: var(--color-filter-hover);
    border-radius: 6px;
    border: 1px dashed rgba(24, 23, 21, 0.3);
}

.audio-players-container .audio-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

/* ===== FULLSCREEN VIEWER ===== */
.fullscreen-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.fullscreen-viewer.active {
    display: flex;
}

.viewer-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 24px;
    color: var(--color-white);
    z-index: 1001;
    padding: 0.5rem;
}

.viewer-close:hover {
    opacity: 0.7;
}

.viewer-prev,
.viewer-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    color: var(--color-white);
    z-index: 1001;
    padding: 1rem;
    transition: opacity 0.2s ease;
}

.viewer-prev:hover,
.viewer-next:hover {
    opacity: 0.7;
}

.viewer-prev {
    left: 2rem;
}

.viewer-next {
    right: 2rem;
}

.viewer-prev.hidden,
.viewer-next.hidden {
    display: none;
}

.viewer-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.viewer-info {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: auto;
    max-width: 300px;
    text-align: left;
    color: var(--color-white);
    background: var(--color-overlay-dark);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

.viewer-counter {
    font-size: 12px;
    color: var(--color-white-alpha);
    margin-bottom: 0.5rem;
}

.viewer-title {
    font-size: 16px;
    color: var(--color-white);
}

/* ===== INFO OVERLAY ===== */
.info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-light);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}

.info-overlay.active {
    display: flex;
}

.info-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 24px;
    color: var(--color-text);
    z-index: 501;
    padding: 0.5rem;
}

.info-close:hover {
    opacity: 0.7;
}

.info-content {
    max-width: 600px;
    padding: 2rem;
}

.info-content h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 2rem;
    color: var(--color-text);
}

.info-section {
    margin-bottom: 2rem;
}

.info-section h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.info-section p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.info-section p:last-child {
    margin-bottom: 0;
}

.info-section ul {
    list-style: none;
}

.info-section li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.info-section li::before {
    content: '—';
    position: absolute;
    left: 0;
}

/* ===== RESPONSIVE ===== */
/* Intermediate screen sizes - reduce navigation gap */
@media (max-width: 900px) {
    .filter-nav {
        gap: 1rem;
    }

    .header-content {
        padding: 1rem 1rem;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        align-items: center;
    }

    .site-header.nav-hidden .header-content {
        padding: 0.5rem 1rem;
        gap: 0;
    }

    /* Create a combined nav container in mobile */
    .filter-nav {
        gap: 0.75rem;
        position: relative;
    }

    /* Mobile info button styles */
    .info-btn-mobile {
        display: inline-block;
        font-size: 16px;
        color: var(--color-text-light);
        transition: color 0.2s ease;
        padding: 0.25rem 0;
        margin-left: 0.75rem;
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
    }

    .info-btn-mobile:hover {
        color: var(--color-accent-red);
    }

    /* Hide the separate info button on mobile */
    .info-btn {
        display: none;
    }

    .filter-btn {
        padding: 0.25rem 0;
        line-height: 1.2;
    }

    .main-content {
        padding: 200px 1rem 2rem;
    }

    .project-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 20px;
    }

    .image-layout-2up,
    .image-layout-3up,
    .image-layout-4up {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .image-layout-1up img,
    .image-layout-2up img,
    .image-layout-3up img,
    .image-layout-4up img {
        height: auto;
    }

    .image-layout-single {
        max-width: 100%;
    }

    .viewer-prev,
    .viewer-next {
        font-size: 24px;
        padding: 2rem 1rem;
    }

    .viewer-prev {
        left: 1rem;
    }

    .viewer-next {
        right: 1rem;
    }

    .viewer-info {
        top: 1rem;
        left: 1rem;
        max-width: 250px;
        font-size: 14px;
        padding: 0.5rem 0.75rem;
    }

    .viewer-counter {
        font-size: 10px;
    }

    .viewer-title {
        font-size: 14px;
    }

    .info-content {
        padding: 1rem;
        max-width: 90vw;
    }

    /* Video carousel mobile styles */
    .video-preview-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .video-preview {
        min-height: 180px;
    }

    .play-button {
        font-size: 28px;
    }

}

@media (max-width: 600px) {
    .filter-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-content {
        padding: 220px 1rem 2rem;
    }

    .section-meta {
        flex-direction: row;
        gap: 1rem;
    }

    .section-meta .section-category::before {
        content: "•";
        margin-right: 1rem;
        color: var(--color-text-lighter);
    }
}

@media (max-width: 360px) {
    .viewer-close,
    .info-close {
        top: 1rem;
        right: 1rem;
    }
}

/* ===== FOCUS STATES ===== */
.filter-btn:focus,
.info-btn:focus,
.viewer-close:focus,
.viewer-prev:focus,
.viewer-next:focus,
.info-close:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

/* Image focus states */
.image-layout-single img:focus,
.image-layout-1up img:focus,
.image-layout-2up img:focus,
.image-layout-3up img:focus,
.image-layout-4up img:focus {
    outline: 3px solid var(--color-accent-blue);
    outline-offset: 3px;
    opacity: 0.9;
}

.more-images-indicator:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
    color: var(--color-text);
}

/* Expand text button focus */
.expand-text-btn:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

/* ===== ULTRA-WIDE SCREENS (2560px+) ===== */
@media (min-width: 2560px) {
    .main-content {
        padding: 120px 4rem 5rem;
    }

    .project-section {
        max-width: 1600px;
        margin-bottom: 4rem;
        padding-bottom: 3rem;
    }

    .section-title {
        font-size: 32px;
    }

    .section-description {
        font-size: 16px;
        line-height: 1.6;
        max-width: 900px;
    }

    .image-layout-1up,
    .image-layout-2up,
    .image-layout-3up,
    .image-layout-4up {
        gap: 2rem;
    }

    .image-layout-single {
        max-width: 800px;
    }

    .video-player {
        max-width: 1200px;
    }

    .video-player iframe {
        height: 450px;
    }

    .audio-player {
        max-width: 600px;
    }

    .audio-players-container {
        max-width: 600px;
    }

    .header-content {
        padding: 1.5rem 4rem;
    }

    .filter-nav {
        gap: 2rem;
    }

    .filter-btn {
        font-size: 16px;
    }

    .site-title a {
        font-size: 18px;
    }
}

/* ===== ANIMATIONS ===== */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}