/* ===========================================
   NOBODYS Gallery - 2D Stream Prototype
   sunday_61 - January 2026
   =========================================== 
   
   TABLE OF CONTENTS:
   
   1. RESET & ROOT VARIABLES (~line 12)
      - CSS custom properties for colors, spacing
   
   2. BODY & SPLASH STATES (~line 22)
      - Body styles, splash-active, splash-exiting
   
   3. SPLASH CONTAINER (~line 45)
      - Wordmark container, corner-mode positioning
   
   4. NAVIGATION (~line 330)
      - .nav, .nav-logo, .nav-section, .nav-items
      - .nav-item, .nav-divider
      - All sections use consistent classes
   
   5. FOG OVERLAY (~line 495)
      - Background overlay for text pages
   
   6. TEXT CONTENT (~line 515)
      - Text pages container, columns, entries
   
   8. STREAM PANELS (~line 630)
      - .stream-panel, panel images, hover states
      - Teaser video styling
   
   9. TOOLTIP (~line 780)
      - Hover tooltips with gooey blur effect
   
   10. BIO PANEL (~line 880)
       - Director/photographer biography panel
   
   11. PHOTO GALLERY (~line 1100)
       - Vertical scrolling photographer gallery
       - Sticky captions
   
   12. FULLSCREEN MODE (~line 1350)
       - Video fullscreen, controls, navigation
   
   13. COMBINED INFO PAGE (~line 1620)
       - About/Contacts/Representation multi-column view
       - Active/inactive blur states
   
   =========================================== */

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

::selection {
    background: var(--hover-fg);
    color: var(--hover-bg);
}

::-moz-selection {
    background: var(--hover-fg);
    color: var(--hover-bg);
}

body.mobile-landscape-block {
    overflow: hidden !important;
}

body.mobile-landscape-block #mobile-flow {
    display: none !important;
}

.mobile-landscape-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    z-index: 10000;
    background: var(--hover-bg);
    color: var(--hover-bg);
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

body.mobile-landscape-block .mobile-landscape-overlay {
    display: flex;
}

.mobile-landscape-logo {
    width: min(70vw, 420px);
}

.mobile-landscape-logo svg {
    width: 100%;
    height: auto;
    display: block;
}

.mobile-landscape-logo svg path,
.mobile-landscape-logo svg * {
    fill: currentColor !important;
}

.mobile-landscape-message {
    font-size: 16px;
    letter-spacing: 0.02em;
}

.mobile-landscape-message h3 {
    font-size: var(--markdown-heading-size, 30px);
    font-weight: bold;
    line-height: 1.15;
    margin: 0;
}

.mobile-landscape-message p {
    margin: 0;
}

.mobile-landscape-message .text-line-break {
    margin: 0.6em 0;
}

.mobile-landscape-message a {
    color: inherit;
}

@media (pointer: coarse) and (hover: none) and (max-height: 540px) {
    .mobile-landscape-overlay {
        gap: 10px;
        padding: 16px;
    }

    .mobile-landscape-logo {
        width: min(52vw, 280px);
    }

    .mobile-landscape-message {
        font-size: 14px;
    }

    .mobile-landscape-message h3 {
        font-size: min(24px, 6vw);
    }

    .mobile-landscape-message .text-line-break {
        margin: 0.35em 0;
    }
}

/* Lower the typographic polish so the custom serif feels rougher and sharper
   without introducing more SVG filters. */
.nav-section,
.nav-section *,
.nav-item,
.nav-item *,
#text-content-container .text-content-column,
#text-content-container .text-content-column *,
.panel-tooltip,
.panel-tooltip *,
.biography-panel,
.biography-panel *,
.photo-gallery-caption,
.photo-gallery-caption *,
.fullscreen-nav,
.fullscreen-nav *,
.video-info-panel,
.video-info-panel *,
.mobile-landscape-message,
.mobile-landscape-message * {
    font-smooth: never;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    font-optical-sizing: none;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
}

:root {
    --gap: var(--panel-gap, 20px);
    --columns: 4;
    --bg: #1a1a1a;
    --fg: #ffffff;
    --depth-effect: 0;
    --hover-bg: #1a1a1a;
    --hover-fg: #ffffff;
    --vh: 1vh;
    --ui-dash-width: 16px;
    --ui-line-thickness: 2px;
    --ui-line-radius: 1px;
    --ui-dash-offset-y: -4px;
    --ui-inline-dash-gap: 0.18em;
}

html {
    /* iOS edge-to-edge support */
    height: 100%;
    height: -webkit-fill-available;
    overscroll-behavior: none;
}

body {
    background: var(--hover-bg);
    color: var(--hover-fg);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    padding: 0;
    /* Prevent overscroll-triggered navigation on desktop browsers.
       iOS Safari support is limited but harmless; mobile scroll protection
       is handled via touch event prevention in JS. */
    overscroll-behavior: none;
}


/* Splash colors - higher specificity to override default body styles */
body.splash-active {
    background: var(--splash-bg, #c2d1d1) !important;
    color: var(--splash-fg, #000000) !important;
}

body.splash-active:not(.splash-exiting),
body.splash-active:not(.splash-exiting) * {
    cursor: pointer !important;
}

/* Slower color transition when info page is active */
body.info-page-active {
    /* No transition - GSAP handles animation */
}

/* Slow color transition when exiting splash - GSAP handles timing via duration parameter */
body.splash-exiting {
    /* No CSS transition - GSAP animates the colors */
}

/* Hide stream content during splash */
body.splash-active .stream-container-desktop,
body.splash-active .stream-container-mobile {
    opacity: 0;
}

body.splash-active .stream-container-desktop .stream-panel,
body.splash-active .stream-container-mobile .stream-panel {
    visibility: hidden !important;
}

/* After first interaction, stream starts while splash video remains on top. */
body.splash-active.splash-stream-live .stream-container-desktop,
body.splash-active.splash-stream-live .stream-container-mobile {
    opacity: 1;
}

body.splash-active.splash-stream-live .stream-container-desktop .stream-panel,
body.splash-active.splash-stream-live .stream-container-mobile .stream-panel {
    visibility: visible !important;
}

/* Keep panels hidden until splash animation fully completes */
body.panels-hidden .stream-container-desktop .stream-panel,
body.panels-hidden .stream-container-mobile .stream-panel {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Splash Video Background - contained to match logo size */
.splash-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7; /* Video-only splash behaves as background media layer */
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    transition: opacity 1s ease;
}

/* Desktop splash letterbox area: keep full viewport box on client default bg during fade. */
@media (min-width: 1025px) {
    body.splash-active .splash-video-container,
    body.splash-exiting .splash-video-container {
        background: var(--client-default-bg, var(--splash-bg, #c2d1d1));
    }
}

/* When in background mode, keep splash video behind interactive content */
.splash-video-container.background-mode {
    z-index: 7;
}

.splash-video-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-video-container {
    opacity: 1;
}

body.splash-active .splash-video-container,
body.splash-active .splash-video-container video,
body.splash-active .splash-video-container iframe {
    cursor: pointer;
}

body.splash-exiting .splash-video-container {
    opacity: 0;
    pointer-events: none;
}

.splash-video-container video,
.splash-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
}

/* Allow scroll in filter mode */
body.filter-mode {
    overflow: hidden; /* Keep body hidden, scroll happens on container */
    overscroll-behavior: none;
}

html.photo-gallery-mode,
body.photo-gallery-mode {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.photo-gallery-mode {
    touch-action: pan-y;
}

/* ===========================================
   Navigation - in the last column
   Position set dynamically by JS
   =========================================== */
.nav {
    position: fixed;
    /* Position at edge-margin from top - nav-logo serves as wordmark placeholder */
    top: var(--edge-margin, 20px);
    right: var(--edge-margin, 20px);
    width: var(--nav-width, 200px);
    height: calc((var(--vh, 1vh) * 100) - var(--edge-margin, 20px) * 2);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    background: transparent;
    /* Start invisible during splash, fade in after splash ends */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* After splash ends and fonts loaded, nav becomes visible */
.nav.fonts-loaded.visible {
    opacity: 1;
    visibility: visible;
}

/* Allow nav interaction during video-only splash hold. */
body.splash-active.splash-nav-enabled .nav.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.nav-mobile-bar {
    display: block;
    width: 100%;
}

.nav-logo-link {
    display: block;
    width: 100%;
}

.nav-logo-hit-area {
    display: none;
}

.nav-mobile-toggle {
    display: none;
}

.nav-logo {
    width: 100%;
    aspect-ratio: 1;
    background: none;
    margin-bottom: var(--nav-divider-margin-bottom, 5px);
    display: block;
    box-sizing: border-box;
    color: var(--hover-fg);
    overflow: visible;
    /* Matching divider borders */
    border-top: var(--nav-divider-height, 3px) solid var(--hover-fg);
    border-bottom: var(--nav-divider-height, 3px) solid var(--hover-fg);
}

.nav-logo svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
}

.nav-logo svg text {
    fill: currentColor;
}

.nav-section {
    font-size: var(--nav-section-title-size, 30px);
    letter-spacing: 0px;
    cursor: pointer;
    opacity: 1;
    transition: none;
    color: var(--hover-fg);
    line-height: 1.0;
    /* Filter applied dynamically per-element */
}

.nav-section::after {
    content: '';
    display: inline-block;
    width: var(--ui-dash-width);
    height: var(--ui-line-thickness);
    background: currentColor;
    border-radius: var(--ui-line-radius);
    margin-left: var(--ui-inline-dash-gap);
    transform: translateY(var(--ui-dash-offset-y));
}

.nav-section:first-of-type::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--nav-divider-height, 3px);
    background: var(--hover-fg);
    margin-top: var(--nav-divider-margin-top, 5px);
    margin-bottom: var(--nav-divider-margin-bottom, 5px);
}

.nav-section.sharp {
    filter: none;
}

.nav-items {
    font-size: var(--nav-link-font-size, 20px);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    margin-bottom: 0;
}

.nav-item {
    cursor: pointer;
    opacity: 1;
    transition: none;
    color: var(--hover-fg);
    line-height: 1.0;
    display: flex;
    align-items: baseline;
    /* Filter applied dynamically per-element */
}

@media (min-width: 769px) {
    .nav-item {
        line-height: 1.2;
    }
}

.nav-item-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(var(--ui-dash-width) + var(--ui-inline-dash-gap));
    flex: 0 0 calc(var(--ui-dash-width) + var(--ui-inline-dash-gap));
    text-align: left;
}

.nav-item.sharp {
    filter: none;
}

.nav-item.active {
    font-weight: 600;
}

.nav-item.active .nav-item-prefix::before {
    content: '';
    display: inline-block;
    width: var(--ui-dash-width);
    height: var(--ui-line-thickness);
    background: currentColor;
    border-radius: var(--ui-line-radius);
    transform: translateY(var(--ui-dash-offset-y));
}

.nav-divider {
    height: var(--nav-divider-height, 3px);
    background: var(--hover-fg);
    margin-top: var(--nav-divider-margin-top, 5px);
    margin-bottom: var(--nav-divider-margin-bottom, 5px);
    filter: none;
}

@media (min-width: 769px) {
    /* Optional nav tilt (logo excluded). */
    .nav-section,
    .nav-items,
    .nav-divider {
        transform: rotate(var(--nav-rotation, 0deg));
        transform-origin: left center;
    }
}

/* ===========================================
   Fog Overlay (click-capture only for text pages)
   =========================================== */
.fog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hover-bg);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.4s ease;
}

.fog-overlay.text-page {
    opacity: 0;
    background: transparent;
    pointer-events: auto;
}

.fog-overlay.veil-50 {
    opacity: 0.5;
    pointer-events: none;
}

/* ===========================================
   Text Content Overlay
   =========================================== */
#text-content-container {
    position: fixed;
    top: 0;
    left: var(--gap);
    right: var(--gap);
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    display: grid;
    /* Use all columns - JS will ensure last column stays empty for nav */
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    padding: 60px 0;
    overflow-y: auto;
    color: var(--hover-fg, inherit);
}

#text-content-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.text-content-column {
    position: relative;
    font-family: 'ITC Garamond W01 Bold', 'ITCGaramondStd', Georgia, serif;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    opacity: 0;
    will-change: transform, opacity, filter;
    /* Crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Page-specific text sizes */
#text-content-container.page-contacts .text-content-column {
    font-size: var(--contacts-text-size, 14px);
}

/* Mobile contacts page: center text content in mobile flow only */
#mobile-flow.page-contacts .mobile-info-entry,
#mobile-flow.page-contacts .mobile-info-entry h2,
#mobile-flow.page-contacts .mobile-info-entry h3,
#mobile-flow.page-contacts .mobile-info-entry p {
    text-align: center;
}

/* Contacts: keep paragraph structure but remove vertical paragraph spacing */
#text-content-container.page-contacts .text-content-column p,
#mobile-flow.page-contacts .mobile-info-entry p {
    margin: 0;
}

/* Unified paragraph spacing across About, Contacts, Biography, Awards, and News */
#text-content-container.page-about-us .text-content-column p,
#text-content-container.page-contacts .text-content-column p,
#mobile-flow.page-about-us .mobile-flow-info .text-content-column p,
#mobile-flow.page-contacts .mobile-flow-info .text-content-column p,
.biography-text p,
.biography-section-content p {
    margin: 0;
}

.text-content-column.visible {
    opacity: 1;
}

.text-content-column h2 {
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: normal;
}

.text-content-column h3 {
    font-size: var(--markdown-heading-size, 30px);
    margin-bottom: 15px;
    margin-top: 0;
    font-weight: normal;
}

/* Text size classes from WYSIWYG */
.text-content-column .text-large {
    font-size: 1.3em;
}

.text-content-column .text-small {
    font-size: 0.85em;
}

.text-content-column p {
    margin: 0;
}

.text-content-column p.text-line-break,
.biography-text p.text-line-break,
.biography-section-content p.text-line-break {
    margin: 0 !important;
    min-height: 1em;
    line-height: 1;
}

#text-content-container.page-about-us .text-content-column {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    font-size: var(--bio-text-size, 20px);
    line-height: 1.15;
    margin-top: 0 !important;
}

#text-content-container.page-about-us .text-content-column h2 {
    font-size: var(--bio-name-size, 30px);
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 0.3em 0;
}

#text-content-container.page-about-us .text-content-column h3,
.biography-text h3,
.biography-section-content h3 {
    font-size: var(--markdown-heading-size, 30px);
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 0.3em 0;
}

.text-content-column .manual-tab,
.biography-text .manual-tab,
.biography-section-content .manual-tab,
.mobile-landscape-message .manual-tab {
    display: inline;
    white-space: pre;
}

.text-content-column em,
.biography-text em,
.biography-section-content em,
.mobile-landscape-message em {
    font-style: italic;
    font-weight: 400;
}

.text-content-column a {
    color: inherit;
    text-decoration: none;
}

.text-content-column a:hover {
    text-decoration: underline;
}

a[href^='mailto:'] {
    font-family: '1913TypewriterCarbon', 'Courier New', Courier, monospace !important;
    font-weight: 700 !important;
    font-size: var(--email-link-size, 20px) !important;
}

/* Multiple entries within same column */
.text-entry {
    margin-bottom: 2em;
}

.text-entry:last-child {
    margin-bottom: 0;
}

/* Inline continuation chunks created by [followon] markers. */
.text-entry-followon {
    display: inline;
    margin: 0;
    vertical-align: baseline;
}

.text-entry-followon p {
    display: inline;
    margin: 0;
}

.biography-text .text-entry-followon,
.biography-section-content .text-entry-followon {
    display: inline;
    white-space: normal;
    margin: 0;
    vertical-align: baseline;
}

.text-goo-level {
    display: inline;
}

.text-rotate-fragment {
    display: inline-block;
    transform: rotate(var(--text-rotate-angle, 0deg));
    transform-origin: 50% 65%;
}

.text-goo-level-1 {
    /* Intentionally empty: SVG filter is applied inline by JS. */
}

.text-goo-level-2 {
    /* Intentionally empty: SVG filter is applied inline by JS. */
}

.text-goo-level-3 {
    /* Intentionally empty: SVG filter is applied inline by JS. */
}

.text-goo-level-4 {
    /* Intentionally empty: SVG filter is applied inline by JS. */
}

.text-goo-level-5 {
    /* Intentionally empty: SVG filter is applied inline by JS. */
}

.text-content-column strong {
    font-weight: 600;
}

/* ===========================================
   Stream container - full width
   =========================================== */
.stream-container-desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    overflow: visible;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 10;
}

.stream-container-mobile {
    display: none;
}

/* Filter mode - make scrollable */
body.filter-mode .stream-container-desktop,
body.filter-mode .stream-container-mobile {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    pointer-events: auto;
    perspective: none;  /* Disable 3D for proper scrolling */
    transform-style: flat;
}

.photo-gallery-scroll-lock {
    overflow: hidden !important;
}

body.filter-mode .stream-container-desktop::-webkit-scrollbar,
body.filter-mode .stream-container-mobile::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Inner wrapper for rotation */
.stream-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    pointer-events: none;
    overflow: visible;
}

/* In filter mode, stream-inner expands to fit content */
body.filter-mode .stream-inner {
    transform-style: flat;  /* Disable 3D for proper scrolling */
}

body.filter-mode .stream-container-mobile .stream-inner {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
    height: auto;
    bottom: auto;
}

body.filter-mode .stream-container-desktop .stream-inner {
    /* Keep live 3D environment fixed while only the 2D filtered layer scrolls. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Dedicated desktop 2D layer for filtered cards (separate from 3D stream-inner). */
.filtered-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0;
    height: 0;
    pointer-events: none;
    z-index: 120;
    overflow: visible;
}

.filtered-layer.active {
    pointer-events: auto;
}

body.fullscreen-deeplink-boot:not(.fullscreen-active) .filtered-layer,
body.fullscreen-deeplink-boot:not(.fullscreen-active) .biography-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ===========================================
   Stream panels
   =========================================== */
.stream-panel {
    position: absolute;
    will-change: transform, filter, border-radius;
    transform-style: preserve-3d;
    cursor: pointer;
    pointer-events: auto;
    background: var(--hover-bg);
    transition: background-color 0.3s linear;
    /* Limit repaint scope — panels are absolutely positioned so layout
       changes inside them cannot affect siblings or ancestors. */
    contain: layout;
}

/* Hide panel background in 2D filter mode - only needed for 3D fog effect */
body.filter-mode .stream-panel {
    background: transparent;
}

/* Panel image wrapper for border-radius clipping */
.stream-panel .panel-image-wrapper {
    overflow: hidden;
    border-radius: inherit;
    position: relative;
    cursor: pointer;
    background: rgba(128, 128, 128, 0.1);  /* Subtle placeholder while loading */
    /* Promote to compositing layer — blur/filter changes are applied here
       frequently by updatePanelBlurs and gooey animations. */
    will-change: filter;
}

/* ---- Depth-of-field blur tiers (set by updatePanelBlurs via classList) ----
   Using CSS classes instead of per-frame inline style writes lets the browser
   cache the composited layer for each tier. Safari benefits substantially
   because it avoids rebuilding the filter pipeline on every unique blur value. */
.panel-image-wrapper.depth-blur-1 { filter: blur(1px); border-radius: 6px; }
.panel-image-wrapper.depth-blur-2 { filter: blur(2px); border-radius: 11px; }
.panel-image-wrapper.depth-blur-3 { filter: blur(3px); border-radius: 17px; }
.panel-image-wrapper.depth-blur-env { filter: blur(8px); border-radius: 0; }

/* Optional: remove desktop stream panel color blocks so fog fades to transparency. */
body.transparent-panel-bg .stream-container-desktop .stream-panel,
body.transparent-panel-bg .stream-container-desktop .stream-panel .panel-image-wrapper {
    background: transparent;
}

/* Desktop Safari clips info-page background blur to the image wrapper unless
   the wrapper is allowed to overflow. Scope this narrowly to Safari only. */
body.desktop-safari.info-page-active .stream-container-desktop .stream-panel .panel-image-wrapper {
    overflow: visible;
}

/* Play button overlay for panels with full video */
.panel-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    --panel-play-glyph-width: 28px;
    --panel-play-glyph-height: 34px;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--hover-fg);
    opacity: 1;
    filter: none;
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    pointer-events: auto;
    cursor: pointer;
}

.panel-play-button::before {
    content: '';
    display: block;
    width: var(--panel-play-glyph-width);
    height: var(--panel-play-glyph-height);
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M62.8,199.5c-1,0.8-2.4,0.6-3.3-0.4c-0.4-0.5-0.6-1.1-0.5-1.8V42.6c-0.2-1.3,0.7-2.4,1.9-2.6c0.7-0.1,1.3,0.1,1.9,0.4l154.7,77.7c2.1,1.1,2.1,2.8,0,3.8L62.8,199.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M62.8,199.5c-1,0.8-2.4,0.6-3.3-0.4c-0.4-0.5-0.6-1.1-0.5-1.8V42.6c-0.2-1.3,0.7-2.4,1.9-2.6c0.7-0.1,1.3,0.1,1.9,0.4l154.7,77.7c2.1,1.1,2.1,2.8,0,3.8L62.8,199.5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: translateX(1px);
}

.panel-play-button:active {
    border-radius: 0;
}

.panel-video-error {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(80%, 220px);
    padding: 8px 10px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: var(--hover-bg);
    color: var(--hover-fg);
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 14;
}

.panel-video-error.visible {
    opacity: 1;
    visibility: visible;
}

/* Exit-filter cursor marker (shown near pointer over background click area). */
.exit-cursor-indicator {
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(-9999px, -9999px);
    color: var(--hover-fg);
    width: var(--ui-dash-width);
    height: var(--ui-dash-width);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.08s linear;
    user-select: none;
}

.exit-cursor-indicator::before,
.exit-cursor-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-dash-width);
    height: var(--ui-line-thickness);
    background: currentColor;
    border-radius: var(--ui-line-radius);
    transform-origin: center center;
}

.exit-cursor-indicator::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.exit-cursor-indicator::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.exit-cursor-indicator.visible {
    opacity: 1;
}

.panel-play-button i {
    display: none;
}

.stream-panel.fullscreen .panel-play-button {
    display: none;
}

.stream-panel.inline-full .panel-play-button {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
}

.stream-panel.inline-full.full-video-ended .panel-play-button {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.stream-panel.teaser-playing .panel-play-button {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
}

/* Keep poster visible even when videos play (avoids unreliable hide/show). */

/* Video preloader - rotating arc in bottom-left corner */
.video-preloader {
    display: none !important;
}

.stream-panel img {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    mix-blend-mode: normal;
    filter: none;
    transition: opacity 0.4s ease, filter 0.35s ease;
}

/* Filtered 2D entry is position/blur-driven; suppress opacity tweening to avoid card flicker. */
body.filter-mode .stream-panel img {
    transition: filter 0.35s ease;
}

/* Uniform knocked-back environment treatment for background 3D cards. */
.stream-panel.environment-knockback .panel-image-wrapper {
    background: var(--hover-fg);
    isolation: isolate;
}

.stream-panel.environment-knockback .panel-image-wrapper img {
    mix-blend-mode: luminosity;
    filter: grayscale(1) saturate(0) contrast(1.15);
}
body.filter-mode .stream-panel.environment-knockback .panel-image-wrapper {
    background: transparent;
    isolation: auto;
    overflow: visible;
}

body.filter-mode .stream-panel.environment-knockback .panel-image-wrapper img {
    mix-blend-mode: normal;
    filter: none;
    transform: scale(1.02);
    transform-origin: center;
}

.stream-panel.hovered {
    z-index: 100;
}

/* When fullscreen is active, hide all non-fullscreen panels */
.stream-inner.has-fullscreen .stream-panel:not(.fullscreen) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.stream-panel.fullscreen {
    position: fixed;
    z-index: 200;
    pointer-events: auto;
    cursor: pointer;
}

/* ===========================================
   Video Info Panel - Fixed bottom left
   =========================================== */
.video-info-panel {
    position: fixed;
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.video-info-panel.visible {
    pointer-events: auto;
}

.fullscreen-back-button {
    position: fixed;
    z-index: 251;
    opacity: 0;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hover-fg);
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s linear;
}

.fullscreen-back-button.visible {
    pointer-events: auto;
}

.fullscreen-back-label {
    display: inline-block;
    line-height: 1.2;
}

.video-tooltip-area {
    position: relative;
    margin-bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.45fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        'prev-name current-name next-name'
        'prev-details current-details next-details';
    align-items: start;
    column-gap: 18px;
    row-gap: 2px;
}

.video-tooltip-name {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    color: var(--hover-fg);
    transition: color 0.3s linear;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    grid-area: current-name;
    align-self: start;
}

.video-tooltip-details-area {
    position: relative;
    min-height: 44px;
    width: 100%;
    grid-area: current-details;
    min-width: 0;
}

.video-current-details,
.video-hover-details {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    line-height: 1.1;
    text-align: center;
    color: var(--hover-fg);
    transition: color 0.3s linear;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.video-current-details {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.video-current-details.hidden {
    opacity: 0;
}

.video-hover-details {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
    white-space: nowrap;
}

.video-hover-details.visible {
    opacity: 1;
    filter: url(#nav-gooey) blur(0px);
}

.video-hover-details.sharp {
    filter: none;
}

.video-current-details .tooltip-brand,
.video-hover-details .tooltip-brand {
    font-weight: bold;
}

.video-current-details .tooltip-commercial,
.video-hover-details .tooltip-commercial {
    font-style: italic;
    font-weight: 400;
}

.video-current-details .tooltip-detail,
.video-hover-details .tooltip-detail {
    font-size: 28px;
    font-weight: bold;
    line-height: 0.95em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.video-tooltip-name .tooltip-name {
    width: auto;
}

.video-prev-preview,
.video-next-preview {
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    opacity: 0;
    pointer-events: none;
}

.video-prev-preview {
    grid-column: 1;
    grid-row: 1 / span 2;
    text-align: left;
}

.video-next-preview {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
}

.video-prev-preview.visible,
.video-next-preview.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.video-prev-preview-name,
.video-prev-preview-details,
.video-next-preview-name,
.video-next-preview-details {
    color: var(--hover-fg);
    transition: color 0.3s linear;
}

.video-prev-preview-name,
.video-next-preview-name {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.video-prev-preview-details,
.video-next-preview-details {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    margin-top: 2px;
}

.video-prev-preview-details .tooltip-detail,
.video-next-preview-details .tooltip-detail {
    font-size: 28px;
    font-weight: bold;
    line-height: 0.95em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.video-prev-preview-details .tooltip-detail .commercial,
.video-next-preview-details .tooltip-detail .commercial {
    font-style: italic;
    font-stretch: condensed;
    font-weight: 400;
}

.fullscreen-prev-preview-name-row,
.fullscreen-next-preview-name-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    font-size: 20px;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-weight: normal;
    line-height: 1.2;
    min-height: var(--tooltip-name-row-height, 24px);
    height: var(--tooltip-name-row-height, 24px);
    white-space: nowrap;
    overflow: visible;
}

.fullscreen-prev-preview-name-row {
    justify-content: flex-start;
}

.fullscreen-next-preview-name-row {
    justify-content: flex-end;
}

.fullscreen-tooltip-name-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-inline-dash-gap);
    width: max-content;
    min-width: 0;
    max-width: 100%;
    font-size: 20px;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-weight: normal;
    line-height: 1.2;
    min-height: var(--tooltip-name-row-height, 24px);
    height: var(--tooltip-name-row-height, 24px);
    white-space: nowrap;
    overflow: visible;
}

.fullscreen-nav-text,
.fullscreen-name-text {
    width: auto;
    max-width: none;
    display: inline-block;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.fullscreen-tooltip-dash {
    display: inline-block !important;
    flex: 0 0 auto;
    width: var(--ui-dash-width) !important;
    min-width: var(--ui-dash-width) !important;
    max-width: var(--ui-dash-width) !important;
    height: var(--ui-line-thickness);
    margin-left: 0;
    background: currentColor;
    border-radius: var(--ui-line-radius);
    overflow: visible;
    transform: translateY(calc(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y)) * 0.35));
    transform-origin: center center;
    will-change: transform;
    vertical-align: middle;
}

.fullscreen-tooltip-dash.loading {
    animation: tooltip-dash-icon-spin 0.8s linear infinite;
}

@keyframes tooltip-dash-icon-spin {
    0% {
        transform: translateY(calc(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y)) * 0.3)) rotate(0deg);
    }
    100% {
        transform: translateY(calc(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y)) * 0.3)) rotate(360deg);
    }
}

.video-current-details .tooltip-detail .commercial,
.video-hover-details .tooltip-detail .commercial {
    font-style: italic;
    font-stretch: condensed;
    font-weight: 400;
}

.fullscreen-nav-row {
    grid-area: nav;
    display: none !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    align-self: start;
    line-height: 1.2;
}

body.mobile-flow.fullscreen-active .fullscreen-nav-row,
body.mobile-flat.fullscreen-active .fullscreen-nav-row {
    display: none;
}

body.mobile-flow.fullscreen-active .video-next-preview,
body.mobile-flat.fullscreen-active .video-next-preview {
    display: none;
}

.fullscreen-nav-prev,
.fullscreen-nav-next {
    cursor: pointer;
    color: var(--hover-fg);
    transition: color 0.3s linear;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2em;
    line-height: 1.2;
}

.fullscreen-nav-prev {
    justify-self: auto;
}

.fullscreen-nav-next {
    justify-self: auto;
}

.fullscreen-nav-counter {
    display: none !important;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 14px;
    color: var(--hover-fg);
    transition: color 0.3s linear;
    white-space: nowrap;
    text-align: center;
    align-items: center;
    gap: 0;
    justify-self: auto;
    flex: 0 0 auto;
    line-height: 1.2;
    min-height: var(--tooltip-name-row-height, 24px);
    height: var(--tooltip-name-row-height, 24px);
}

.counter-slot-wrapper,
.counter-divider,
#fullscreen-total {
    display: none !important;
}

.counter-slot-wrapper {
    display: inline-block;
    position: relative;
    width: 2ch;
    height: 1em;
    overflow: hidden;
    vertical-align: bottom;
}

.counter-slot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
}

.ui-arrow-icon {
    --ui-arrow-width: 1.1em;
    --ui-arrow-height: 0.7em;
    --ui-arrow-offset-y: 0px;
    --ui-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6H13.5M9.5 1.8L13.8 6 9.5 10.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    --ui-arrow-shift-x: 0px;
    display: inline-block !important;
    flex: 0 0 auto;
    width: var(--ui-arrow-width) !important;
    min-width: var(--ui-arrow-width) !important;
    max-width: var(--ui-arrow-width) !important;
    height: var(--ui-arrow-height);
    position: relative;
    overflow: visible;
    vertical-align: middle;
    top: var(--ui-arrow-offset-y);
    background: currentColor;
    -webkit-mask: var(--ui-arrow-mask) center / 100% 100% no-repeat;
    mask: var(--ui-arrow-mask) center / 100% 100% no-repeat;
    transform: translate3d(var(--ui-arrow-shift-x), 0, 0);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ui-arrow-icon-prev {
    transform: translate3d(var(--ui-arrow-shift-x), 0, 0) scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
    .fullscreen-back-button:hover .ui-arrow-icon-prev,
    .video-prev-preview:hover .ui-arrow-icon-prev,
    .photo-gallery-back-link:hover .ui-arrow-icon-prev {
        --ui-arrow-shift-x: -4px;
    }

    .video-next-preview:hover .ui-arrow-icon-next {
        --ui-arrow-shift-x: 4px;
    }
}

.fullscreen-back-button:focus-visible .ui-arrow-icon-prev,
.photo-gallery-back-link:focus-visible .ui-arrow-icon-prev {
    --ui-arrow-shift-x: -4px;
}

.fullscreen-arrow-icon {
    --ui-arrow-offset-y: calc(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y)) * 0.35);
}

.fullscreen-next-preview-arrow {
    width: 1.1em !important;
    min-width: 1.1em !important;
    max-width: 1.1em !important;
}

.video-info-panel.compact-nav .video-tooltip-area {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        'prev-name current-name next-name'
        '. current-details .';
    column-gap: 14px;
}

.video-info-panel.compact-nav .video-prev-preview-details,
.video-info-panel.compact-nav .video-next-preview-details,
.video-info-panel.compact-nav .video-prev-preview-name .tooltip-text,
.video-info-panel.compact-nav .video-next-preview-name .tooltip-text {
    display: none;
}

.video-info-panel.compact-nav .video-prev-preview,
.video-info-panel.compact-nav .video-next-preview {
    align-self: center;
}

.fullscreen-nav-label {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.1;
    text-align: right;
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
    margin-bottom: 5px;
    min-height: 22px;
}

.fullscreen-nav-label.visible {
    opacity: 1;
    filter: url(#nav-gooey) blur(0px);
}

.fullscreen-nav-label.sharp {
    filter: none;
}

.fullscreen-nav-label .nav-commercial {
    font-style: italic;
    font-weight: 400;
    display: block;
}

/* Photographer gallery (scrollable fullscreen) */
.photo-gallery {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hover-bg);
    z-index: 180;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, background-color 0.3s linear;
    scrollbar-width: none;  /* Firefox */
}

.photo-gallery.visible {
    opacity: 1;
    pointer-events: auto;
}

.photo-gallery::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.photo-gallery-inner {
    padding: var(--photo-gallery-edge, var(--edge-margin, 20px));
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.photo-gallery-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.photo-gallery-intro-name,
.photo-gallery-intro-project,
.photo-gallery-intro-text {
    color: var(--hover-fg);
    max-width: min(100%, 34rem);
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
}

.photo-gallery-intro-name {
    margin-bottom: 6px;
}

.photo-gallery-intro-name-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 6px 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.photo-gallery-intro-project {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: var(--ui-inline-dash-gap, 0.32em);
}

.photo-gallery-intro-project-label {
    display: inline-block;
}

.photo-gallery-intro-project-dash {
    flex: 0 0 auto;
}

.photo-gallery-intro-text {
    margin-bottom: 8px;
}

.photo-gallery-intro-text p {
    margin-bottom: 0;
}

.photo-gallery-intro-text a {
    color: inherit;
    text-decoration: underline;
}

.photo-gallery-row {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    align-items: start;
    position: relative;
}

.photo-gallery-image {
    position: relative;
    align-self: start;
    /* grid-column set by JS */
    /* Animation handled by GSAP */
}

.photo-gallery-image.revealed {
    /* Animation complete */
}

.photo-gallery-image img {
    width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
    backface-visibility: hidden;
}

.photo-gallery-caption {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    color: var(--hover-fg);
    line-height: 1.4;
    --caption-sticky-top: 20px;
    /* Animation handled by GSAP */
}

.photo-gallery-caption.revealed {
    /* Animation complete */
}

/* Caption below image */
.photo-gallery-caption.caption-below {
    margin-top: -3px;
}

/* Caption in adjacent column - sticky at top */
.photo-gallery-caption.caption-adjacent {
    position: relative;
    top: auto;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
}

.photo-caption-main {
    position: -webkit-sticky;
    position: sticky;
    top: var(--caption-sticky-top);
    display: block;
    z-index: 2;
}

.photo-caption-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

.photo-gallery-caption.caption-first {
    position: relative;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.photo-caption-first-top {
    position: sticky;
    top: var(--caption-sticky-top);
    z-index: 2;
    display: flow-root;
}

.photo-caption-first-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

.photo-caption-first-bottom {
    position: sticky;
    top: var(--first-caption-bottom-top, calc(var(--caption-sticky-top) + 56px));
    z-index: 1;
    display: flow-root;
}

.photo-gallery-caption.caption-first.caption-first-crowded .photo-caption-first-bottom {
    position: relative;
    top: auto;
}

.photo-gallery-caption.caption-last {
    position: relative;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.photo-caption-last-main {
    position: sticky;
    top: var(--caption-sticky-top);
    display: flow-root;
}

.photo-caption-last-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

/* Caption to the left of image - right align with padding */
.photo-gallery-caption.caption-left {
    text-align: right;
    padding-right: 0;
}

/* Photo caption panel - positioned absolutely next to image panels */
.photo-caption-panel {
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, serif;
    font-size: 20px;
    color: var(--hover-fg);
    line-height: 1.4;
    padding-top: 0;
    z-index: 10;
}

.photo-caption-panel.caption-left {
    text-align: right;
    padding-right: var(--gap);
}

/* First image caption - project title */
.photo-caption-title {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.photo-caption-title-row {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ui-inline-dash-gap, 0.32em);
    margin-bottom: 0.5em;
}

.photo-caption-title-label {
    display: inline-block;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
}

.photo-caption-title-dash {
    flex: 0 0 auto;
}

/* First image caption - project description */
.photo-caption-description {
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 1.5em;
    line-height: 1.5;
    opacity: 0.85;
}

/* First image caption - regular caption text */
.photo-caption-text {
    font-size: 20px;
    margin-top: 0;
}

.photo-caption-text a,
.photo-caption-description a {
    color: inherit;
    text-decoration: underline;
    pointer-events: auto;
}

.photo-caption-first-bottom .photo-caption-text {
    margin-top: 1em;
}

.photo-caption-seq {
    display: inline-block;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.8em;
    line-height: 1;
    font-style: italic;
    font-weight: 400;
}

.photo-caption-seq-row {
    margin-top: 0;
    line-height: 1.1;
    text-align: left;
}

.photo-gallery-caption.caption-left .photo-caption-seq-row {
    text-align: inherit;
}

.photo-caption-panel.caption-left .photo-caption-seq-row {
    text-align: inherit;
}

.photo-gallery-back-link {
    margin-top: 1em;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
    text-align: inherit;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    opacity: 0.85;
}

.photo-gallery-caption.caption-left .photo-gallery-back-link {
    margin-left: 0;
    justify-content: flex-end;
}

.photo-gallery-back-label {
    display: inline-block;
    line-height: 1.1;
}

.photo-gallery-back-icon {
    --ui-arrow-width: var(--ui-dash-width);
    --ui-arrow-height: var(--ui-dash-width);
    --ui-arrow-head-size: calc(var(--ui-dash-width) * 0.42);
    --ui-arrow-head-overlap: calc(var(--ui-dash-width) * 0.1);
    --ui-arrow-offset-y: -2px;
}

.photo-gallery-back-link:hover,
.photo-gallery-back-link:focus,
.photo-gallery-back-link:active {
    text-decoration: none;
}

.stream-panel.span-2 {
    /* Wider panels that span 2 columns */
}

/* ===========================================
   Tooltip - Garamond with gooey blur effect
   =========================================== */
.panel-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    font-size: var(--tooltip-font-size, 16px);
    color: var(--hover-fg);
    max-width: 100%;
    opacity: 0;
    filter: none; /* JS applies filter during animation only */
    -webkit-filter: none;
    transition: color 0.3s linear;
    letter-spacing: 0px;
    text-align: left;
    pointer-events: none;
    margin-top: 10px;
    z-index: 200;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    --tooltip-name-row-height: calc(20px * 1.2);
}

/* When tooltip flips above panel, keep DIRECTOR line nearest the image. */
.panel-tooltip.tooltip-above {
    display: flex;
    flex-direction: column-reverse;
}

.stream-panel.inline-full .tooltip-name {
    opacity: 0;
    pointer-events: none;
}

.stream-panel.inline-full .panel-tooltip {
    margin-top: 10px;
    pointer-events: auto;
}

/* Hide panel tooltip in fullscreen - we show it in video controls instead */
.stream-panel.fullscreen .panel-tooltip {
    display: none !important;
}

/* No background or arrow - just text */
.panel-tooltip::before {
    display: none;
}

.stream-panel:hover .panel-tooltip {
    /* Controlled by JS gooey animation, not CSS */
}

.stream-panel.settled .panel-tooltip {
    /* Controlled by JS gooey animation */
}

.tooltip-name {
    font-size: 20px !important;
    font-weight: normal;
    margin-bottom: 0;
    line-height: 1.2;
    min-height: var(--tooltip-name-row-height, 24px);
    height: var(--tooltip-name-row-height, 24px);
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(var(--ui-dash-width), 1fr);
    align-items: center;
    column-gap: var(--ui-inline-dash-gap);
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.22s ease;
}

.tooltip-name.tooltip-name-sequenced {
    grid-template-columns: minmax(0, max-content) minmax(var(--ui-dash-width), 1fr) max-content;
}

.tooltip-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tooltip-seq {
    display: inline-block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    font-size: 0.8em;
    line-height: 1.08;
    font-style: italic;
    font-weight: 400;
    box-sizing: border-box;
    /* Preserve left italic overhang so leading glyphs are not clipped. */
    padding-inline-start: 0.08em;
    margin-inline-start: -0.08em;
}

.tooltip-seq-row {
    margin-top: 2px;
    line-height: 1.1;
    text-align: left;
}

.tooltip-dash {
    display: inline-block;
    height: var(--ui-line-thickness);
    width: var(--ui-dash-width);
    max-width: 100%;
    min-width: var(--ui-dash-width);
    background: currentColor;
    border-radius: var(--ui-line-radius);
    transform-origin: center center;
    transform: translateY(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y)));
    justify-self: start;
    will-change: width, transform;
}

.tooltip-dash.loading {
    width: var(--ui-dash-width);
    animation: tooltip-dash-spin 0.8s linear infinite;
}

@keyframes tooltip-dash-spin {
    0% {
        transform: translateY(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y))) rotate(0deg);
    }
    100% {
        transform: translateY(var(--tooltip-dash-offset-y, var(--ui-dash-offset-y))) rotate(360deg);
    }
}

body:not(.filter-mode) .stream-panel:not(.fullscreen) {
    --tooltip-dash-offset-y: calc(var(--ui-dash-offset-y) + 2px);
}

/* Hide director name in filtered view on mobile only */
body.mobile-flow.filter-mode .tooltip-name,
body.mobile-flat.filter-mode .tooltip-name {
    visibility: hidden;
    pointer-events: none;
}

.tooltip-detail {
    font-size: 28px;
    font-weight: bold;
    line-height: 0.95em;
    /* Crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.tooltip-detail .commercial {
    font-style: italic;
    font-stretch: condensed;
    font-weight: 400;
    display: inline-block;
    box-sizing: border-box;
    /* Preserve left italic overhang so leading glyphs are not clipped. */
    padding-inline-start: 0.08em;
    margin-inline-start: -0.08em;
}

.tooltip-more {
    display: inline-block;
    margin-top: 6px;
    font-size: 16px;
    color: var(--hover-fg);
    text-decoration: none;
    opacity: 0.9;
    pointer-events: auto;
}

.tooltip-more:hover {
    opacity: 1;
}

body.filter-mode .tooltip-more {
    display: none;
}

/* 2D filtered mode: allow tooltip lines to wrap instead of truncating with ellipsis. */
body.filter-mode .tooltip-name {
    min-height: 0;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0;
    column-gap: calc(var(--ui-inline-dash-gap) + 3px);
    white-space: normal;
    overflow: visible;
}

body.filter-mode .tooltip-name.tooltip-name-sequenced {
    display: flex;
}

body.filter-mode .tooltip-text,
body.filter-mode .tooltip-seq {
    display: inline;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

body.filter-mode .tooltip-dash {
    /* Allow JS teaser progress to animate width in 2D filtered mode. */
    flex: 0 0 auto;
}

body.filter-mode .stream-panel:not(.fullscreen) {
    --tooltip-dash-offset-y: calc(var(--ui-dash-offset-y) - 4px);
}

body.filter-mode .tooltip-seq-row {
    text-align: left;
}

body.directors.filter-mode .filtered-layer .panel-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Photographers mode - tooltip color inherits from --hover-fg */
body.photographers .panel-tooltip {
    /* Color handled by CSS variable */
}


/* ===========================================
   Biography Panel (top-left, shown when filtering)
   =========================================== */
.biography-panel {
    position: absolute;
    top: var(--edge-margin, 20px);
    left: var(--edge-margin, 20px);
    /* Width set dynamically by JS to match 2 columns */
    width: 400px;
    max-width: 480px;
    font-family: 'ITCGaramondStd', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
    color: var(--hover-fg);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: color 0.3s linear;
    overflow: hidden;
    box-sizing: border-box;
    /* Crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.biography-panel.visible {
    pointer-events: auto;
}

.biography-name {
    font-size: var(--markdown-heading-size, var(--bio-name-size, 30px));
    font-weight: bold;
    margin-bottom: 6px;
    line-height: 1.15;
}

.biography-name:empty {
    display: none;
}

.biography-text {
    font-size: var(--bio-text-size, 20px);
    line-height: 1.15;
    margin-bottom: 8px;

}

.biography-text p {
    margin-bottom: 0;
}

.biography-main-toggle {
    margin: 0 0 10px 0;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.biography-panel.bio-main-collapsed .biography-text,
.biography-panel.bio-main-collapsed .biography-section {
    display: none !important;
}

/* Biography collapsible sections */
.biography-section {
    margin-top: var(--bio-section-margin-top, 15px);
}

.biography-section-divider {
    width: 100%;
    height: var(--bio-divider-thickness, 1px);
    background: currentColor;
    opacity: var(--bio-divider-opacity, 0.5);
    margin-bottom: 10px;
}

.biography-section-toggle {
    font-size: var(--bio-toggle-size, 20px);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.biography-section-toggle:hover {
    opacity: 1.0;
}

.biography-section-label {
    display: inline-block;
    line-height: 1;
}

.biography-section-symbol {
    position: relative;
    width: var(--ui-dash-width);
    min-width: var(--ui-dash-width);
    height: var(--ui-dash-width);
    display: inline-block;
    transform: translateY(-2px);
}

.biography-section-symbol-line {
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: var(--ui-line-radius);
    transform-origin: center center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.biography-section-symbol-line.line-h {
    width: var(--ui-dash-width);
    height: var(--ui-line-thickness);
    transform: translate(-50%, -50%) scaleX(1);
}

.biography-section-symbol-line.line-v {
    width: var(--ui-line-thickness);
    height: var(--ui-dash-width);
    transform: translate(-50%, -50%) rotate(0deg);
}

.biography-section-toggle.is-open .biography-section-symbol-line.line-v {
    transform: translate(-50%, -50%) rotate(90deg);
}

.biography-section-content {
    font-size: var(--bio-text-size, 20px);
    line-height: 1.15;
    display: none;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
}

/* Separate text sizes for awards and news */
.biography-section-content#bio-awards-content {
    font-size: var(--awards-text-size, 16px);
}

.biography-section-content#bio-news-content {
    font-size: var(--news-text-size, 16px);
}

.biography-section-content.open {
    display: block;
    margin-top: var(--bio-section-margin-top, 10px);
}

.biography-section-content p {
    margin: 0;
}

.biography-section-content a {
    color: var(--hover-fg);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.biography-section-content a:hover {
    opacity: 1.0;
}


/* ===========================================
   Video Wrapper - JWPlayer Integration
   =========================================== */
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
    overflow: hidden;
}

.video-player-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
    contain: layout paint;
    box-sizing: border-box;
}

/* Keep video fully edge-to-edge over the image */
.stream-panel.fullscreen .video-wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Vimeo source badge - top left */
.video-source-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    opacity: 1.0;
    transition: opacity 0.3s ease, color 0.3s ease;
    font-size: 18px;
    color: var(--hover-bg);
    pointer-events: none;
}

.video-wrapper:hover .video-source-badge {
    opacity: 1;
}

.video-wrapper.active {
    opacity: 1;
}

/* Only enable pointer events on fullscreen video wrapper (for controls) */
.stream-panel.fullscreen .video-wrapper.active {
    pointer-events: auto;
    overflow: visible; /* Allow controls to show below */
}

/* Also need panel-image-wrapper to allow overflow in fullscreen */
.stream-panel.fullscreen .panel-image-wrapper {
    overflow: visible;
}

.stream-panel.fullscreen .video-player-shell {
    overflow: hidden !important;
}

/* Hide video wrappers when panel is not fullscreen AND wrapper is not active/playing */
.stream-panel:not(.fullscreen) .video-wrapper:not(.active):not(.playing) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* During fullscreen exit animation, immediately hide all videos */
.stream-panel.exiting-fullscreen .video-wrapper,
.stream-panel.exiting-fullscreen video,
.stream-panel.exiting-fullscreen .jwplayer {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Force JWPlayer to fill the strict player shell completely */
.video-player-shell > div,
.video-player-shell .jwplayer,
.video-player-shell .jw-wrapper,
.video-player-shell .jw-media,
.video-player-shell .jw-preview {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Video element - stretch to fill exactly like the image */
.video-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* When video wrapper is hidden, hide the video too */
.video-wrapper[style*="visibility: hidden"] video,
.video-wrapper[style*="opacity: 0"] video,
.stream-panel:not(.fullscreen) .video-wrapper:not(.active):not(.playing) video {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Fullscreen video - enable interaction and allow overflow */
.stream-panel.fullscreen .video-wrapper {
    pointer-events: auto;
    z-index: 10;
    overflow: visible !important;
}

.stream-panel.fullscreen .video-wrapper video {
    object-fit: cover !important;
}

.stream-panel.fullscreen .panel-image-wrapper {
    overflow: visible !important;
}

/* Teaser video - no pointer events (let panel handle hover/click) */
.stream-panel:not(.fullscreen) .video-wrapper {
    pointer-events: none;
}