/* ============================================
           PICTURE TAG CSS FIX (Ensures layouts don't break)
           ============================================ */
        picture {
            display: contents;
        }

        /* ============================================
           BRIDGE: map interviews variables to global theme tokens
           so theme switching works on this page too
           ============================================ */
        :root {
            --padding-desktop: 4rem;
            --font-poetry: 'Cormorant Garamond', Georgia, serif;
            --bg-primary: var(--color-bg-base);
            --bg-secondary: var(--color-bg-elevated);
            --bg-tertiary: var(--color-bg-elevated);
            --bg-dark: var(--color-bg-elevated, #1A1A1A);
            --text-primary: var(--color-text-primary);
            --text-secondary: var(--color-text-secondary);
            --text-tertiary: var(--color-text-muted);
            --text-light: #FFFFFF;
            --accent-gold: var(--color-accent);
            --accent-rose: #D4A5A5;
            --accent-copper: var(--color-accent-dark);
            --border-light: var(--color-border-medium);
            --border-dark: var(--color-border-strong);
            --shadow-soft: rgba(0, 0, 0, 0.08);
            --shadow-medium: rgba(0, 0, 0, 0.15);
            --card-bg: var(--color-bg-card-solid);
            --context-bg: var(--color-bg-elevated);
            --sidebar-width: 280px;
            --nav-height: 62px;
            /* --font-display and --font-body intentionally NOT overridden here —
               global.css definitions apply (Montserrat / Cormorant Garamond) for page-wide consistency */
            --font-script: 'Dancing Script', cursive;
            --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
            --space-sm: clamp(0.5rem, 1vw, 1rem);
            --space-md: clamp(1rem, 2vw, 2rem);
            --space-lg: clamp(2rem, 4vw, 4rem);
            --space-xl: clamp(3rem, 6vw, 6rem);
            --transition-fast: 0.2s ease;
            --transition-base: 0.4s ease;
            --transition-slow: 0.6s ease;
        }

        /* Ensure the global nav sits on top of everything */
        /* Ensure global nav sits on top and doesn't overlap content */
        .site-nav-wrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; }
        .site-nav { position: relative; }
        /* Dark theme overrides removed — handled by global.css theme system
           via the bridge variables above */

        /* Reset removed — handled by global.css */

        body {
            /* font-family and font-size deferred to global.css for consistency */
            color: var(--text-primary);
            background: var(--bg-primary);
            /* overflow-x: clip removed — html already has it; on body it computes to hidden and breaks sticky */
            padding-top: var(--nav-height, 62px); /* push content below fixed nav */
        }

        /* ============================================
           ANIMATED BACKGROUND ICONS
           ============================================ */
        .bg-animations {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .floating-icon {
            position: absolute;
            opacity: 0.04;
            animation: float 25s infinite ease-in-out;
            /* SCROLL-006: blur(0.5px) removed — invisible at opacity .04 but it
               forced a per-frame re-raster of all 8 icons; without a filter the
               transform animation runs purely on the compositor. */
        }

        .floating-icon:nth-child(1) { top: 5%; left: 3%; animation-delay: 0s; }
        .floating-icon:nth-child(2) { top: 15%; right: 8%; animation-delay: 4s; }
        .floating-icon:nth-child(3) { top: 35%; left: 10%; animation-delay: 8s; }
        .floating-icon:nth-child(4) { top: 55%; right: 3%; animation-delay: 12s; }
        .floating-icon:nth-child(5) { top: 75%; left: 5%; animation-delay: 16s; }
        .floating-icon:nth-child(6) { top: 25%; right: 15%; animation-delay: 20s; }
        .floating-icon:nth-child(7) { top: 65%; right: 10%; animation-delay: 6s; }
        .floating-icon:nth-child(8) { top: 45%; left: 2%; animation-delay: 14s; }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
            25% { transform: translateY(-30px) rotate(8deg) scale(1.02); }
            50% { transform: translateY(15px) rotate(-5deg) scale(0.98); }
            75% { transform: translateY(-20px) rotate(4deg) scale(1.01); }
        }

        /* ============================================
           ABOVE-THE-FOLD: one viewport (hero + timeline + map)
           ============================================ */
        .interviews-above-fold {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: visible;
            position: relative;
            z-index: 10;
        }

        /* ============================================
           TITLE AREA — matches poems-hero layout exactly
           ============================================ */
        .hero-title-area {
            position: relative;
            flex: 1.5 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem var(--padding-desktop, 4rem) 0.5rem;
            background: transparent;
            overflow: hidden;
        }

        /* Star background — fills entire above-fold section, scrolls away with it */
        .bg-particles {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        /* Title position matches poems-hero-content + poems-hero-title */
        .header-content {
            text-align: center;
            max-width: 700px;
            position: relative;
            z-index: 2;
        }

        /* Matches .poems-hero-title exactly */
        .interviews-title {
            font-family: var(--font-poetry, 'Cormorant Garamond', serif);
            font-size: clamp(2.4rem, 5vw, 4.5rem);
            font-weight: 400;
            font-style: italic;
            letter-spacing: 0.05em;
            color: var(--text-primary);
            margin: 1rem 0;
        }

        /* Matches .poems-hero-subtitle exactly */
        .interviews-subtitle {
            font-family: var(--font-poetry, 'Cormorant Garamond', serif);
            font-size: clamp(1.1rem, 2vw, 1.4rem);
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ============================================
           TIMELINE SECTION — 1 part of the 3-part flex column
           ============================================ */
        .interviews-above-fold .timeline-section {
            flex: 0.75 0 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--space-sm) var(--space-lg) var(--space-md);
            background: transparent;
            overflow: visible;
        }

        .interviews-above-fold .timeline-section .section-title {
            margin-bottom: var(--space-sm);
        }

        .timeline-section {
            position: relative;
            z-index: 10;
            padding: var(--space-xl) var(--space-lg);
            background: transparent;
            margin-bottom: 0;
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(1.45rem, 3vw, 2.1rem);
            font-weight: 400;
            text-align: center;
            margin-bottom: var(--space-lg);
            color: var(--text-primary);
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: var(--accent-gold);
        }

        /* Timeline & Map section titles: smaller, centered */
        .timeline-section .section-title,
        .map-section .section-title {
            font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
        }

        /* Desktop: overflow visible so dot rings/shadows are not clipped */
        .timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            padding: var(--space-md) 0;
            overflow: visible;
            gap: var(--space-sm);
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
            opacity: 0.3;
        }

        .timeline-year {
            position: relative;
            text-align: center;
            cursor: pointer;
            transition: background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
            flex-shrink: 0;
            padding: 0 var(--space-sm);
            /* button element reset */
            background: none;
            border: none;
            -webkit-appearance: none;
            appearance: none;
            color: inherit;
            font-family: inherit;
            /* column layout: dot → year label → count */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .timeline-year:hover {
            transform: translateY(-5px);
        }

        .timeline-dot {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-gold);
            margin: 0 auto var(--space-xs);
            position: relative;
            z-index: 1;
            transition: transform var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
            box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 6px var(--accent-gold);
        }

        .timeline-year:hover .timeline-dot {
            transform: scale(1.3);
            box-shadow: 0 0 20px var(--accent-gold), 0 0 0 4px var(--bg-primary), 0 0 0 6px var(--accent-gold);
        }

        .timeline-label {
            font-size: clamp(1.35rem, 1.3rem + 0.75vw, 1.6rem);
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: 0.1em;
        }

        .timeline-count {
            font-size: clamp(1.05rem, 1rem + 0.38vw, 1.22rem);
            color: var(--text-secondary);
            margin-top: 3px;
        }

        /* ============================================
           MAP SECTION (2 parts in 1:2 split)
           ============================================ */
        .interviews-above-fold .map-section {
            flex: 2 0 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            padding: var(--space-sm) var(--space-md) var(--space-md);
            background: transparent;
            overflow: visible;
        }

        .interviews-above-fold .map-section .section-title {
            margin-bottom: var(--space-sm);
        }

        .interviews-above-fold .map-section .world-map {
            flex: 1;
            min-height: 0;
            display: flex;
            align-items: center;
        }

        .interviews-above-fold .map-section .map-svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .map-section {
            position: relative;
            z-index: 10;
            padding: var(--space-md) var(--space-sm);
            background: transparent;
        }

        .world-map {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .map-svg {
            width: 100%;
            height: auto;
            display: block;
        }

        .map-location {
            cursor: pointer;
            transition: color var(--transition-base), background-color var(--transition-base);
        }

        .map-location:hover .map-pin {
            transform: scale(1.5);
            filter: drop-shadow(0 0 15px var(--accent-gold));
        }

        .map-pin {
            fill: var(--accent-gold);
            transition: transform 0.3s ease, filter 0.3s ease;
            animation: pinGlow 3s ease-in-out infinite;
            cursor: pointer;
            filter: drop-shadow(0 0 6px var(--accent-gold));
        }

        @keyframes pinGlow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.65; }
        }

        .map-label {
            font-size: clamp(0.93rem, 0.76rem + 0.43vw, 1.7rem);
            font-weight: 600;
            fill: var(--text-primary);
            text-anchor: middle;
            font-family: var(--font-body);
            pointer-events: none;
        }

        /* Mobile phone — SVG scale ~0.34, need ~41px CSS to render ~14px on screen */
        @media (max-width: 480px) {
            .map-label {
                font-size: 2.6rem;
            }
        }

        /* Tablet portrait — SVG scale ~0.5-0.69, need ~28px CSS for ~14-20px on screen */
        @media (min-width: 481px) and (max-width: 768px) {
            .map-label {
                font-size: 1.8rem;
            }
        }

        /* Touch target for mobile */
        .map-touch-target {
            fill: transparent;
            cursor: pointer;
        }

        .map-touch-target:hover + .map-pin {
            transform: scale(1.5);
            filter: drop-shadow(0 0 15px var(--accent-gold));
        }

        /* ============================================
           MAP PIN MOTION — CSS offset-path (compositor-threaded, like books.html
           decor-rect stroke-dashoffset). Autostarts on every platform instantly.
           JS rAF loop in initMapAnimation() runs only on old Safari < 15.4.
           keypoints 0→100%→0% matches original SMIL keyPoints="0;1;0".
           Negative animation-delay = stagger offset (mirrors SMIL begin="-Xs").
           ============================================ */
        @supports (offset-path: path("M0,0")) {
            @keyframes mapMoveAlong {
                0%, 100% { offset-distance: 0%; }
                50%      { offset-distance: 100%; }
            }

            /* Line 1 */
            #map-loc-romania {
                offset-path: path('M100,150 Q150,100 200,130 T300,120 Q400,100 500,130 T650,110 Q750,90 850,120 T950,140');
                offset-rotate: 0deg;
                animation: mapMoveAlong 50s linear infinite;
            }
            #map-loc-germany {
                offset-path: path('M100,150 Q150,100 200,130 T300,120 Q400,100 500,130 T650,110 Q750,90 850,120 T950,140');
                offset-rotate: 0deg;
                animation: mapMoveAlong 65s linear infinite;
                animation-delay: -25s;
            }

            /* Line 2 */
            #map-loc-usa {
                offset-path: path('M80,200 Q130,180 180,200 T280,190 Q380,180 480,200 T650,180 Q780,160 900,190');
                offset-rotate: 0deg;
                animation: mapMoveAlong 45s linear infinite;
            }
            #map-loc-austria {
                offset-path: path('M80,200 Q130,180 180,200 T280,190 Q380,180 480,200 T650,180 Q780,160 900,190');
                offset-rotate: 0deg;
                animation: mapMoveAlong 58s linear infinite;
                animation-delay: -22s;
            }

            /* Line 3 */
            #map-loc-belgium {
                offset-path: path('M100,280 Q180,260 260,280 T400,270 Q550,250 700,270 T900,260');
                offset-rotate: 0deg;
                animation: mapMoveAlong 40s linear infinite;
            }
            #map-loc-denmark {
                offset-path: path('M100,280 Q180,260 260,280 T400,270 Q550,250 700,270 T900,260');
                offset-rotate: 0deg;
                animation: mapMoveAlong 52s linear infinite;
                animation-delay: -18s;
            }
        }

        /* ============================================
           MAIN LAYOUT WITH SIDEBAR (Desktop)
           ============================================ */
        .main-layout {
            display: flex;
            max-width: 1800px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        /* Sidebar - Desktop only */
        .sidebar {
            width: var(--sidebar-width);
            flex-shrink: 0;
            position: sticky;
            /* Laptop (1024–1400px): filter sticks flush below nav bar */
            top: var(--nav-height);
            height: calc(100vh - var(--nav-height));
            overflow: visible;
            background: var(--bg-primary);
            border-right: 1px solid var(--border-light);
            padding: var(--space-xs) 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        /* Wide desktop with tall viewport: sidebar centred vertically
           in the space below the nav — closer to the user's eye */
        @media (min-width: 1800px) and (min-height: 1000px) {
            .sidebar {
                top: 20vh;
                height: calc(80vh);
            }
        }

        /* Filter section — card aligned to the right of the sidebar */
        .sidebar-section:first-child {
            background: var(--card-bg);
            border-radius: 8px;
            padding: var(--space-sm);
            border: 1px solid var(--border-light);
            margin-left: auto;
            margin-right: var(--space-xs);
            width: calc(100% - var(--space-xs));
            flex-shrink: 0;
        }

        /* Tag cloud section — breaks out to the left viewport edge */
        .sidebar-section:last-child {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            /* Breakout: these are set dynamically by JS */
            margin-left: var(--tagcloud-offset, 0px);
            width: calc(100% - var(--tagcloud-offset, 0px));
        }

        .sidebar-title {
            font-family: var(--font-display);
            font-size: var(--text-base);
            color: var(--text-primary);
            margin-bottom: var(--space-sm);
            padding-bottom: var(--space-xs);
            border-bottom: 1px solid var(--border-light);
        }

        /* Filter groups — buttons flow horizontally, up to ~4 per row */
        .sidebar .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: var(--space-xs);
        }

        .sidebar .filter-group-title {
            width: 100%;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-xs);
        }

        .sidebar .filter-btn {
            flex: 1 1 auto;
            min-width: 0;
            padding: 6px 10px;
            border: 1px solid var(--border-light);
            background: transparent;
            font-family: var(--font-body);
            font-size: clamp(0.92rem, 0.86rem + 0.24vw, 1.04rem);
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
            border-radius: 4px;
            color: var(--text-secondary);
            text-align: center;
            white-space: nowrap;
        }

        .sidebar .filter-btn:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .sidebar .filter-btn.active {
            background: var(--accent-gold);
            color: var(--bg-primary);
            border-color: var(--accent-gold);
        }

        .sidebar .clear-filters {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: 1px dashed var(--border-light);
            color: var(--text-tertiary);
            font-size: 1rem;
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
            border-radius: 4px;
            margin-top: var(--space-xs);
        }

        .sidebar .clear-filters:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        /* Tag cloud in sidebar — centered, using full width */
        .sidebar .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }

        .sidebar .cloud-tag {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }

        .sidebar .cloud-tag:hover {
            background: var(--accent-gold);
            color: var(--bg-primary);
            border-color: var(--accent-gold);
        }

        /* Main content area */
        .main-content {
            flex: 1;
            padding: var(--space-xl);
            min-height: 100vh;
        }

        /* Mobile filter bar (hidden on desktop) */
        .mobile-filter-bar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-light);
            padding: var(--space-sm);
        }

        .mobile-filter-toggle {
            display: flex;
            gap: var(--space-sm);
            align-items: center;
        }

        .filter-toggle-btn, .clear-filters-mobile {
            padding: 10px 16px;
            border: 1px solid var(--border-light);
            background: var(--card-bg);
            font-family: var(--font-body);
            font-size: var(--text-xs);
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
            border-radius: 4px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .filter-toggle-btn:hover, .clear-filters-mobile:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .filter-toggle-btn.active {
            background: var(--accent-gold);
            color: var(--bg-primary);
            border-color: var(--accent-gold);
        }

        .mobile-filters {
            display: none;
            padding: var(--space-md);
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-light);
        }

        .mobile-filters.visible {
            display: block;
        }

        /* Mobile tag cloud */
        .mobile-tag-cloud-container {
            display: none;
            padding: var(--space-sm) 0;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .mobile-tag-cloud-container::-webkit-scrollbar {
            display: none;
        }

        .mobile-tag-cloud {
            display: flex;
            gap: 8px;
            padding: 0 var(--space-sm);
            flex-wrap: nowrap;
        }

        .mobile-tag-cloud .cloud-tag {
            flex-shrink: 0;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 1rem;
            background: var(--card-bg);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
        }

        /* ============================================
           ASYMMETRIC MASONRY GRID
           ============================================ */
        .interviews-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-md);
            grid-auto-flow: dense;
        }

        /* ============================================
           INTERVIEW CARD - LUXURY STYLING
           ============================================ */
        .interview-card {
            background: var(--card-bg);
            border: 1px solid var(--border-light);
            position: relative;
            overflow: hidden;
            transition: border-color var(--transition-base), box-shadow var(--transition-base);
            display: flex;
            flex-direction: column;
            border-radius: 4px;
        }

        .interview-card::before,
        .interview-card::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid var(--accent-gold);
            opacity: 0.4;
            transition: opacity var(--transition-base), transform var(--transition-base);
            pointer-events: none;
        }

        .interview-card::before {
            top: 10px;
            left: 10px;
            border-right: none;
            border-bottom: none;
        }

        .interview-card::after {
            bottom: 10px;
            right: 10px;
            border-left: none;
            border-top: none;
        }

        /* SCROLL-015: was width/height 30→40px — an (untransitioned) layout hit
           per hover. scale() runs on the compositor and is now smoothly animated
           (transform is already in the transition list). Note: the 2px border
           reads ~2.7px while enlarged (transforms scale strokes) — accepted. */
        .interview-card::before { transform-origin: top left; }
        .interview-card::after  { transform-origin: bottom right; }
        .interview-card:hover::before,
        .interview-card:hover::after {
            opacity: 0.8;
            transform: scale(1.3333);
        }

        .card-border-highlight {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, 
                var(--accent-gold) 0%, 
                var(--accent-rose) 50%, 
                var(--accent-gold) 100%);
            opacity: 0.6;
            animation: borderShimmer 4s infinite;
        }

        @keyframes borderShimmer {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.8; }
        }

        .interview-card:hover {
            box-shadow: 0 25px 80px var(--shadow-medium);
            transform: translateY(-5px);
        }

        .interview-card.hidden {
            display: none;
        }

        .handwritten-accent {
            position: absolute;
            top: 15px;
            right: 15px;
            font-family: var(--font-script);
            font-size: var(--text-xs);
            color: var(--accent-gold);
            opacity: 0.7;
            transform: rotate(-5deg);
            pointer-events: none;
            z-index: 5;
            max-width: 150px;
            text-align: right;
        }

        .card-thumbnail {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
            isolation: isolate; /* predictable stacking: overlay vs. ::after (WebKit / iOS tap targets) */
        }

        .card-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }

        .interview-card:hover .card-thumbnail img {
            transform: scale(1.05);
        }

        .thumbnail-overlay {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0; /* Safari 14.0 */
            z-index: 4; /* must exceed copyright :hover::after (z-index:3) so “Open Original” stays visible/tappable on macOS Safari hover and iOS Safari */
            background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6) 100%);
            display: flex;
            align-items: flex-end;
            padding: var(--space-sm);
        }

        .original-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: white;
            font-size: 0.875rem;
            text-decoration: none;
            background: rgba(0,0,0,0.7);
            padding: 8px 14px;
            border-radius: 4px;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
            position: relative;
            z-index: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
            touch-action: manipulation;
        }

        .original-link:hover {
            background: var(--accent-gold);
        }

        .card-header {
            position: relative;
            padding: var(--space-md);
            padding-left: calc(var(--space-md) + 4px);
            border-bottom: 1px solid var(--border-light);
        }

        .card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
            margin-bottom: var(--space-sm);
        }

        .meta-tag {
            font-size: 0.875rem;
            padding: 4px 10px;
            border-radius: 3px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        .meta-tag.year {
            background: var(--accent-gold);
            color: var(--bg-primary);
        }

        .meta-tag.location {
            background: var(--accent-rose);
            color: var(--bg-primary);
        }

        .meta-tag.type {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }

        .card-title {
            font-family: var(--font-display);
            font-size: clamp(1.35rem, 1.6vw, 1.6rem);
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: var(--space-xs);
            color: var(--text-primary);
        }

        .card-venue {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            font-style: italic;
        }

        .card-keywords {
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-light);
        }

        .keywords-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: var(--space-xs);
            align-items: center;
        }

        .keywords-row:last-child {
            margin-bottom: 0;
        }

        .keywords-lang-label {
            font-size: 0.875rem;
            color: var(--text-tertiary);
            margin-right: 4px;
            text-transform: uppercase;
            font-weight: 600;
            min-width: 24px;
        }

        .keyword {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
            padding: 3px 8px;
            border: 1px solid var(--border-light);
            border-radius: 3px;
            transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
            cursor: pointer;
        }

        .keyword:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .card-content {
            padding: var(--space-md);
            padding-left: calc(var(--space-md) + 4px);
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .original-content-wrapper {
            margin-bottom: var(--space-sm);
        }

        .content-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) 0;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
            transition: color var(--transition-fast);
        }

        .content-toggle:hover {
            color: var(--accent-gold);
        }

        .content-toggle h4 {
            font-family: var(--font-body);
            font-size: var(--text-xs);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .toggle-icon {
            transition: transform var(--transition-fast);
        }

        .content-toggle.expanded .toggle-icon {
            transform: rotate(180deg);
        }

        .original-content {
            font-family: var(--font-poetry, 'Cormorant Garamond', serif);
            font-size: clamp(1.25rem, 1.8vw, 1.375rem);
            line-height: 1.7;
            color: var(--color-text-secondary);
            /* SCROLL-009: was max-height 0→3000px (layout animation with a huge
               overshoot — closing spent most of the transition invisibly between
               3000px and the real height). grid-template-rows 0fr↔1fr animates
               the EXACT content height; .oc-inner (single grid child, added in
               the interviews.js template) provides the overflow clip.
               Pre-2023 browsers: instant open/close (graceful). */
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows var(--transition-slow);
        }

        .original-content > .oc-inner {
            overflow: hidden;
            min-height: 0;
        }

        .original-content.expanded {
            grid-template-rows: 1fr;
            padding-top: var(--space-sm);
        }

        /* Default expanded state */
        .original-content.default-expanded {
            grid-template-rows: 1fr;
            padding-top: var(--space-sm);
        }

        .original-content p {
            margin-bottom: var(--space-sm);
            text-align: start;
            text-wrap: balance;
        }

        .original-content em {
            color: var(--accent-gold);
            font-style: italic;
        }

        /* Description/Descriere paragraphs — gold label, description size */
        .original-content p.desc-paragraph strong {
            font-weight: 600;
            color: var(--accent-gold, var(--accent, #d4af37));
        }

        /* All other paragraphs (Duration, Language, Durată, Limbă, etc.)
           — smaller size, white text */
        .original-content p:not(.desc-paragraph) {
            font-size: var(--text-sm);
            color: var(--text-primary);
        }

        .original-content p:not(.desc-paragraph) strong {
            font-weight: 700;
            color: var(--text-primary);
        }

        .video-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-md);
            background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
            color: white;
            text-decoration: none;
            font-size: var(--text-xs);
            letter-spacing: 0.05em;
            transition: color var(--transition-fast), opacity var(--transition-fast);
            margin-bottom: var(--space-sm);
            border-radius: 4px;
            align-self: flex-start;
        }

        .video-link:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(233, 30, 99, 0.4);
        }

        .additional-context {
            background: var(--context-bg);
            border-left: 3px solid var(--accent-gold);
            padding: var(--space-md);
            margin-bottom: var(--space-sm);
            border-radius: 0 4px 4px 0;
        }

        .context-header {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            margin-bottom: var(--space-sm);
        }

        .context-icon {
            width: 18px;
            height: 18px;
            fill: var(--accent-gold);
        }

        .context-title {
            font-family: var(--font-body);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--accent-gold);
            font-weight: 600;
        }

        .context-text {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            line-height: 1.7;
        }

        .card-gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 120px;
            grid-auto-flow: row dense;
            gap: 4px;
            margin-top: var(--space-sm);
        }

        .gallery-thumb {
            overflow: hidden;
            cursor: pointer;
            position: relative;
            border-radius: 3px;
            display: block;
        }

        /* Span classes for mosaic layouts */
        .gallery-thumb.span-wide  { grid-column: span 2; }
        .gallery-thumb.span-tall  { grid-row: span 2; }
        .gallery-thumb.span-large { grid-column: span 2; grid-row: span 2; }

        /* Button reset */
        button.gallery-thumb {
            border: none;
            background: #0d0d0f;
            padding: 0;
            font: inherit;
            -webkit-appearance: none;
            appearance: none;
        }

        .gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0.88;
            transition: opacity 0.25s ease;
        }

        .gallery-thumb:hover img {
            opacity: 1;
        }

        .gallery-thumb::after {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0; /* Safari 14.0 */
            background: rgba(0, 0, 0, 0);
            transition: background var(--transition-fast);
        }

        .gallery-thumb:hover::after {
            background: rgba(0, 0, 0, 0.2);
        }

        /* Per-image fit override: add data-fit="cover" to use cover cropping */
        button.gallery-thumb[data-fit="cover"] img {
            object-fit: cover;
        }

        /* === Copyright overlay — pure CSS, no JS === */

        /* Card thumbnail: © top-left (under overlay’s transparent band) so it stays visible;
           z-index below .thumbnail-overlay — avoids iOS blocking taps on “Open Original”. */
        .card-thumbnail[data-copyright]::after {
            content: "\00A9";
            position: absolute;
            top: 10px;
            left: 8px;
            bottom: auto;
            font-size: 0.875rem;
            font-family: var(--font-display, 'Montserrat', sans-serif);
            color: rgba(255, 255, 255, 0.88);
            background: rgba(0, 0, 0, 0.48);
            border-radius: 3px;
            padding: 1px 4px;
            pointer-events: none;
            z-index: 1;
            line-height: 1.4;
            letter-spacing: 0;
            white-space: nowrap;
            transition: padding 0.2s ease, font-size 0.2s ease, background 0.2s ease;
        }

        .card-thumbnail[data-copyright]:hover::after {
            content: attr(data-copyright);
            top: auto;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3;
            padding: 0.55rem 0.8rem 0.4rem;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 100%);
            border-radius: 0;
            text-align: right;
            white-space: normal;
        }

        /* Gallery thumbs: ::before for copyright (::after is the existing hover-darken layer) */
        .gallery-thumb[data-copyright]::before {
            content: "\00A9";
            position: absolute;
            bottom: 4px;
            left: 5px;
            font-size: 0.875rem;
            font-family: var(--font-display, 'Montserrat', sans-serif);
            color: rgba(255, 255, 255, 0.88);
            background: rgba(0, 0, 0, 0.48);
            border-radius: 3px;
            padding: 1px 3px;
            pointer-events: none;
            z-index: 5;
            line-height: 1.4;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .gallery-thumb[data-copyright]:hover::before {
            content: attr(data-copyright);
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.45rem 0.55rem 0.3rem;
            font-size: 0.875rem;
            letter-spacing: 0.04em;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
            border-radius: 0;
            text-align: right;
            white-space: normal;
        }

        @media (max-width: 768px) {
            .card-thumbnail[data-copyright]::after,
            .card-thumbnail[data-copyright]:hover::after,
            .gallery-thumb[data-copyright]::before,
            .gallery-thumb[data-copyright]:hover::before {
                font-size: 0.875rem;
            }
            .keyword {
                font-size: 0.875rem;
            }
        }

        /* Grenzgängerin thumbnail: responsive position so face stays visible at all widths */
        /* Small phones (narrow cards): image needs lower crop to show face */
        article[data-id="2"] .card-thumbnail img {
            object-position: center 65%;
        }
        /* Medium phones: reduce offset as card gets wider */
        @media (min-width: 430px) {
            article[data-id="2"] .card-thumbnail img {
                object-position: center 38%;
            }
        }
        /* Tablets / desktop: show upper portion of image */
        @media (min-width: 530px) {
            article[data-id="2"] .card-thumbnail img {
                object-position: center 18%;
            }
        }

        .related-section {
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-tertiary);
            border-top: 1px solid var(--border-light);
        }

        .related-title {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-tertiary);
            margin-bottom: var(--space-sm);
        }

        .related-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
        }

        .related-item {
            font-size: 0.875rem;
            color: var(--text-secondary);
            padding: 4px 10px;
            background: var(--card-bg);
            border: 1px solid var(--border-light);
            border-radius: 3px;
            cursor: pointer;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .related-item:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        /* ============================================
           FOOTER
           ============================================ */
        footer {
            position: relative;
            z-index: 10;
            padding: var(--space-xl) var(--space-lg);
            background: var(--bg-dark);
            color: var(--text-light);
            text-align: center;
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .footer-quote {
            font-family: var(--font-script);
            font-size: clamp(1.3rem, 2.5vw, 2rem);
            color: var(--accent-gold);
            margin-bottom: var(--space-md);
        }

        .footer-text {
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.1em;
            line-height: 1.8;
        }

        /* ============================================
           SCROLL ANIMATIONS
           ============================================ */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================
           RESPONSIVE - MOBILE
           ============================================ */
        @media (max-width: 1024px) {
            .sidebar {
                display: none;
            }

            .main-content {
                padding: var(--space-md);
            }

            .interviews-grid {
                grid-template-columns: 1fr;
            }

            .mobile-filter-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .mobile-tag-cloud-container {
                display: block;
            }

            .interview-card {
                grid-column: span 1;
                grid-row: span 1;
            }
        }

        @media (max-width: 768px) {
            .hero-title-area {
                flex: 1.2 0 0;
                padding: 2rem var(--padding-desktop, 1.5rem) 1rem;
            }

            .interviews-above-fold .timeline-section {
                flex: 1.5 0 0;
                overflow-x: auto;
                overflow-y: visible;
            }

            .interviews-above-fold .map-section {
                flex: 2.5 0 0;
            }

            /* Mobile: horizontal scroll when needed; scrollbar hidden for clean look */
            .timeline {
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: visible;
                max-width: 100%;
                padding-bottom: var(--space-sm);
                scrollbar-width: none;
            }

            .timeline::-webkit-scrollbar {
                display: none;
            }

            .timeline::before {
                display: none;
            }

            .card-gallery {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 100px;
            }

            /* Collapse span classes to single cell on mobile */
            .gallery-thumb.span-wide,
            .gallery-thumb.span-large { grid-column: span 1; }
            .gallery-thumb.span-tall,
            .gallery-thumb.span-large { grid-row: span 1; }

            /* ---- Mobile font-size boosts (~30%) ---- */
            .section-title {
                font-size: clamp(1.75rem, 5vw, 2.4rem);
            }
            .timeline-label {
                font-size: clamp(1.65rem, 4vw, 2rem);
            }
            .timeline-count {
                font-size: clamp(1.3rem, 3vw, 1.6rem);
            }
            .card-title {
                font-size: 1.25rem;
            }
            .original-content {
                font-size: 1.1875rem;
            }
            .context-text {
                font-size: 1.0625rem;
            }
            .meta-tag {
                font-size: 1rem;
            }
            .filter-toggle-btn,
            .clear-filters-mobile {
                font-size: clamp(0.95rem, 2.5vw, 1.15rem);
            }
            .mobile-tag-cloud .cloud-tag {
                font-size: clamp(0.95rem, 2.5vw, 1.1rem);
            }
        }

        /* ============================================
           RESPONSIVE — TABLET / LAPTOP TOUCH (768px–1024px)
           All fonts increased ~20%
           ============================================ */
        @media (min-width: 769px) and (max-width: 1024px) {
            .section-title {
                font-size: clamp(1.75rem, 3.6vw, 2.5rem);
            }
            .timeline-label {
                font-size: clamp(1.62rem, 1.56rem + 0.9vw, 1.92rem);
            }
            .timeline-count {
                font-size: clamp(1.26rem, 1.2rem + 0.46vw, 1.46rem);
            }
            .map-label {
                font-size: clamp(1.12rem, 0.91rem + 0.52vw, 2.04rem);
            }
            .card-title {
                font-size: clamp(1.4rem, 1.92vw, 1.625rem);
            }
            .meta-tag {
                font-size: 1rem;
            }
            .mobile-tag-cloud .cloud-tag {
                font-size: 1.02rem;
            }
        }

        /* ============================================
           RESPONSIVE — LAPTOP MDPI (1280px–1440px)
           Map labels especially increased; others +15%
           ============================================ */
        @media (min-width: 1280px) and (max-width: 1440px) {
            .section-title {
                font-size: clamp(1.67rem, 3.45vw, 2.42rem);
            }
            .timeline-label {
                font-size: clamp(1.55rem, 1.5rem + 0.86vw, 1.84rem);
            }
            .timeline-count {
                font-size: clamp(1.21rem, 1.15rem + 0.44vw, 1.4rem);
            }
            .map-label {
                font-size: clamp(1.2rem, 1rem + 0.62vw, 2.3rem);
            }
            .card-title {
                font-size: clamp(1.4rem, 1.84vw, 1.625rem);
            }
            .meta-tag {
                font-size: 1rem;
            }
            .sidebar .filter-group-title {
                font-size: 1.0625rem;
            }
            .sidebar .filter-btn {
                font-size: clamp(1.06rem, 0.99rem + 0.28vw, 1.2rem);
            }
            .sidebar .cloud-tag {
                font-size: 1.0625rem;
            }
            .sidebar .clear-filters {
                font-size: 1.0625rem;
            }
        }

        /* ============================================
           RESPONSIVE — LAPTOP HiDPI (device-pixel-ratio >= 2, wide screens)
           All fonts increased ~17%
           ============================================ */
        @media (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2),
               (min-width: 1280px) and (min-resolution: 192dpi) {
            .section-title {
                font-size: clamp(1.7rem, 3.5vw, 2.46rem);
            }
            .timeline-label {
                font-size: clamp(1.58rem, 1.52rem + 0.88vw, 1.87rem);
            }
            .timeline-count {
                font-size: clamp(1.23rem, 1.17rem + 0.45vw, 1.43rem);
            }
            .map-label {
                font-size: clamp(1.09rem, 0.89rem + 0.5vw, 1.99rem);
            }
            .card-title {
                font-size: clamp(1.4rem, 1.87vw, 1.625rem);
            }
            .meta-tag {
                font-size: 1rem;
            }
            .sidebar .filter-group-title {
                font-size: 1rem;
            }
            .sidebar .filter-btn {
                font-size: clamp(1.08rem, 1.01rem + 0.28vw, 1.22rem);
            }
            .sidebar .cloud-tag {
                font-size: 1rem;
            }
            .sidebar .clear-filters {
                font-size: 1rem;
            }
        }

        @media print {
            .bg-animations, .sidebar, .mobile-filter-bar, .scroll-indicator, .gv-modal, .theme-toggle {
                display: none !important;
            }
        }

/* ============================================================
   SCROLL-008 — render cost containment (audit P1-3, 2026-06-13)
   Skip style/layout/paint for interview cards outside the viewport.
   "auto 520px" = estimate until first render, then real size is kept.
   Older browsers ignore both properties (progressive perf only).
   ============================================================ */
.interview-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}