/* ============================
   1. CORE STYLES
   ============================ */

:root {
    --text-primary: #2d4a6e;
    --accent-color: #f97316;
    /* Sun gradient orange */
}

/* Lazy loading — keep images always visible, no opacity fade */
img[loading="lazy"] {
    opacity: 1;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src]:not([src=""]) {
    opacity: 1;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
    overflow: hidden;

    /* --- UPDATED GRADIENT BACKGROUND --- */
    /*
       1. #1e40af (0%): Lighter glow directly behind the sun.
       2. #1e3a8a (30%): The MAIN DEEP BLUE you requested, covering the menu area.
       3. #172554 (60%): A transitional dark blue.
       4. #020617 (100%): Deep void black/navy at the edges for infinite depth.
    */
    background: radial-gradient(circle at center,
            #1e40af 0%,
            #1e3a8a 30%,
            #172554 60%,
            #020617 100%);

    background-size: 160% 160%;
    background-position: center;

    /* The Breathing Animation */
    animation: sky-pulse 12s ease-in-out infinite;
}

/* OPTIMIZATION: Paused class to stop animations when body has .paused */
body.paused,
body.paused *,
body.paused .solar-system,
body.paused .sun-content,
body.paused .ray-wrapper,
body.paused .menu-link::after {
    animation-play-state: paused !important;
}

/* Prevent language flash on load - hide AND stop animations until ready */
body:not(.lang-ready) .menu-link,
body:not(.lang-ready) .first-name,
body:not(.lang-ready) .last-name,
body:not(.lang-ready) .ray-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

/* Only show and animate after language is initialized */
body.lang-ready .menu-link,
body.lang-ready .first-name,
body.lang-ready .last-name,
body.lang-ready .ray-wrapper {
    visibility: visible;
}

@keyframes sky-pulse {

    0%,
    100% {
        background-size: 140% 140%;
        filter: brightness(1);
    }

    50% {
        background-size: 180% 180%;
        filter: brightness(1.1);
        /* Slightly increased brightness for the pulse */
    }
}

#app-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}



/* --- GLOBAL APP BAR --- */
.app-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 50;
    pointer-events: none;
}

.lang-container {
    pointer-events: auto;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    transition: all 0.3s ease;
}

.lang-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 5px;
    color: inherit;
    /* Inherit white from parent */
}

.lang-btn:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
    transform: scale(1.05);
}

.lang-btn.active {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================
   2. HOME VIEW (SUN MENU)
   ============================ */
#home-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    touch-action: none;
}

#home-view.hidden {
    opacity: 0;
    transform: scale(3);
    pointer-events: none;
}

.solar-system {
    position: relative;
    width: 700px;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: spin-right 60s linear infinite;
    z-index: 5;
    /* OPTIMIZATION: GPU acceleration */
    will-change: transform;
}

/* PAUSE ANIMATION ON TEXT HOVER */
.solar-system:has(.menu-link:hover) {
    animation-play-state: paused;
}

.solar-system:has(.menu-link:hover) .sun-content {
    animation-play-state: paused;
}

.center-point {
    z-index: 15;
}

/* --- ENHANCED CENTER SUN --- */
.sun {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* Yellow to orange gradient */
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);

    color: #ffffff;

    /* White halo glow */
    box-shadow:
        0 0 40px rgba(255, 255, 255, 0.6),
        0 0 80px rgba(255, 255, 255, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 -5px 15px rgba(0, 0, 0, 0.1);

    position: relative;
    overflow: hidden;

    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;

    /* Enhanced loading animation */
    animation: sun-intro 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sun-intro {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    60% {
        transform: scale(1.15) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        box-shadow:
            0 0 40px rgba(255, 255, 255, 0.6),
            0 0 80px rgba(255, 255, 255, 0.3),
            0 10px 30px rgba(0, 0, 0, 0.2),
            inset 0 -5px 15px rgba(0, 0, 0, 0.1);
    }
}

.sun::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Softer orange gradient on hover */
    background: linear-gradient(135deg, #fcd34d, #fbbf24, #fb923c);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.sun:hover {
    box-shadow:
        0 0 60px rgba(255, 255, 255, 0.8),
        0 0 100px rgba(255, 255, 255, 0.5),
        0 15px 50px rgba(0, 0, 0, 0.3),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2);
}

.sun:hover::after {
    opacity: 1;
}

.sun-content {
    animation: spin-left 60s linear infinite;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    /* OPTIMIZATION: GPU acceleration */
    will-change: transform;
}

.sun h1 {
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Outfit', sans-serif;
}

.first-name {
    display: block;
    font-size: 18px;
    font-weight: 300;
    opacity: 0;
    animation: fadeIn 0.8s 0.6s forwards;
    /* Visible abundant shadow with multiple layers */
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.last-name {
    display: block;
    font-size: 22px;
    font-weight: 600;
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: fadeIn 0.8s 0.8s forwards;
    /* Same shadow as first-name */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* RAYS */
.ray-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 2px;
    transform-origin: 0% 50%;
    pointer-events: none;
    display: flex;
    align-items: center;
    transform: rotate(calc(var(--i) * 45deg)) translateY(-50%);
    opacity: 0;
    animation: rayAppear 0.6s calc(0.8s + var(--i) * 0.1s) forwards;

    /* Glowing halo effect like the sun */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 15px rgba(251, 191, 36, 0.2));
}

@keyframes rayAppear {
    from {
        opacity: 0;
        width: 240px;
    }

    to {
        opacity: 1;
        width: 340px;
    }
}

/* --- ANIMATED MENU LINKS --- */
.menu-link {
    position: absolute;
    left: 150px;
    width: 240px;

    color: #ffffff;
    /* White Text */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Outfit', sans-serif;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;

    padding-bottom: 5px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    overflow: hidden;
}

/* OPTIMIZATION: White Ray Animation - Only runs on hover (not continuously) */
.menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    /* White Ray to match sky feel */
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    transform: translateX(-100%);
    /* Animation paused by default - only runs on hover */
    animation: none;
}

/* Start ray animation only on hover */
.ray-wrapper:hover .menu-link::after {
    animation: sun-ray-shoot 2s linear infinite;
}

@keyframes sun-ray-shoot {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Hover State */
.ray-wrapper:hover {
    /* Enhanced glow on hover */
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)) drop-shadow(0 0 25px rgba(217, 119, 6, 0.4));
}

.ray-wrapper:hover .menu-link,
.menu-link:active {
    /* Animated yellow to orange gradient */
    background: linear-gradient(90deg,
            #fde047 0%,
            #fbbf24 25%,
            #f97316 50%,
            #fbbf24 75%,
            #fde047 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

.ray-wrapper:hover .menu-link::after {
    /* Keep animation but change to orange ray */
    background: linear-gradient(90deg, transparent 0%, #d97706 50%, transparent 100%);
    box-shadow: 0 0 5px #d97706;
}

@keyframes spin-right {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-left {
    100% {
        transform: rotate(-360deg);
    }
}

@media (max-width: 768px) {
    .app-bar {
        padding: 15px 20px;
    }

    .solar-system {
        width: 100vw;
        height: 100vw;
        animation: spin-right 50s linear infinite;
    }

    .sun-content {
        animation: spin-left 50s linear infinite;
    }

    .sun {
        width: 150px;
        height: 150px;
    }

    .first-name {
        font-size: 14px;
    }

    .last-name {
        font-size: 18px;
    }

    .ray-wrapper {
        width: 280px;
        /* Override animation to NOT animate width - prevents text reflow glitch */
        animation: rayAppearMobile 0.6s calc(0.8s + var(--i) * 0.1s) forwards;
    }

    @keyframes rayAppearMobile {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .menu-link {
        left: 90px;
        min-width: 165px;
        white-space: nowrap;
        font-size: 12px;
        padding: 5px 8px;
        letter-spacing: 0.3px;
    }
}

/* ============================
   3. CONTENT VIEWS
   ============================ */

.section-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #1e3a8a 0%, #1e3a8a 60px, white 60px);
    opacity: 1;
    visibility: hidden;
    z-index: 20;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-view.active {
    opacity: 1;
    visibility: visible;
}

.section-view .page-header {
    flex-shrink: 0;
}

.section-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    position: relative; /* Needed for sticky positioning context */
}

/* Site-wide footer copyright — shown on every .section-view (all pages except
   home). Sits at the bottom of the scrollable content, not fixed. */
.section-view .section-content::after {
    content: '© 2026 NDJINNS';
    display: block;
    text-align: center;
    padding: 28px 20px;
    margin-top: 60px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #94a3b8;
    letter-spacing: 0.5px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

/* Custom scrollbar styling - grey theme */
.section-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.section-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.section-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.section-content::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Firefox scrollbar */
.section-content,
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* White flash transition overlay — disabled, no fade on page transitions */
.transition-flash {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.transition-flash.active {
    opacity: 0;
    display: none;
}

/* Section title centered */
.section-hero {
    text-align: center;
    padding: 60px 20px 30px;
    display: none;
}

.section-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    color: #2d4a6e;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.section-hero p {
    font-size: 16px;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sub-navigation tabs */
.sub-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px 20px;
    flex-wrap: wrap;
}

/* Main navigation - larger, more prominent */
#main-nav {
    padding: 20px;
    gap: 20px;
}

#main-nav .sub-nav-btn {
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #1e3a8a;
    background: white;
    color: #1e3a8a;
}

#main-nav .sub-nav-btn:hover,
#main-nav .sub-nav-btn.active {
    background: white;
    color: #f97316;
    border-color: #f97316;
}

/* Team navigation - same style as main nav */
#team-nav {
    padding: 20px;
    gap: 20px;
}

#team-nav .sub-nav-btn {
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #1e3a8a;
    background: white;
    color: #1e3a8a;
}

#team-nav .sub-nav-btn:hover,
#team-nav .sub-nav-btn.active {
    background: white;
    color: #f97316;
    border-color: #f97316;
}

/* Custom dropdown styling */
.back-arrow {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.back-arrow:hover {
    transform: translateY(-50%) translateX(-3px);
}

.back-arrow:hover .material-symbols-outlined {
    color: #1e3a8a;
}

.main-dropdown-container {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 280px;
}

.main-dropdown-btn {
    width: 100%;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    background: white;
    color: #f97316;
    border: 1.5px solid #f97316;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
}

.main-dropdown-btn::after {
    content: '\25BC';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: transform 0.3s ease;
    color: #f97316;
}

.main-dropdown-btn.open::after {
    transform: translateY(-50%) rotate(180deg);
}

.main-dropdown-btn:hover {
    background: white;
    color: #1e3a8a;
    border-color: #f97316;
}

.main-dropdown-btn:hover::after {
    color: #1e3a8a;
}

.main-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid #f97316;
    border-radius: 12px;
    overflow: hidden;
    z-index: 100;
    display: none;
    margin-top: 4px;
}

.main-dropdown-menu.open {
    display: block;
}

.main-dropdown-item {
    padding: 10px 16px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #f97316;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #fed7aa;
    text-align: center;
}

.main-dropdown-item:last-child {
    border-bottom: none;
}

.main-dropdown-item:hover,
.main-dropdown-item.active {
    background: white;
    color: #1e3a8a;
}

/* Detail content container - overflow must be visible for sticky to work */
#docu-detail-content {
    overflow: visible;
}

/* Sticky navigation header for detail pages */
.sticky-nav-header {
    /* Wrapper is no longer sticky — only the inner .detail-nav-bar is.
       That keeps the back arrow + dropdown pinned at the top of the scroll
       area while the intro text and the sub-nav tabs scroll away naturally. */
    background: transparent;
}

.detail-nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px 15px 70px;
    min-height: 60px;
    background: white;
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#section-intro {
    display: block;
    padding: 16px 30px;
    background: white;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #1e3a8a;
    text-align: center !important;
    white-space: pre-line;
}

#section-intro:empty {
    display: none;
}

/* Desktop-only forced line break inside #section-intro — collapses on mobile
   so narrow viewports wrap naturally without an awkward extra break. */
@media (max-width: 767px) {
    #section-intro br.desktop-br {
        display: none;
    }
}

/* Inline CTA button inside #section-intro (e.g. "EXPOSITION" link to the
   Multimedia Exhibition). Matches the pill style used by #sub-nav buttons. */
.intro-cta-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #1e3a8a;
    background: white;
    border: 1.5px solid #1e3a8a;
    border-radius: 25px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.intro-cta-btn:hover,
.intro-cta-btn:focus {
    color: #f97316;
    border-color: #f97316;
    outline: none;
}

/* Sub navigation - smaller, secondary */
#sub-nav {
    padding: 10px 20px 20px;
    background: white;
}

.sub-nav-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.3s ease;
}

.sub-nav-btn:hover,
.sub-nav-btn.active {
    color: var(--accent-color);
    background: transparent;
}

/* Section-tab buttons inside the detail-page sticky header (Koubanao, Dakar,
   Women, Workers, etc.): pill buttons with a navy border, orange on active/hover. */
#sub-nav .sub-nav-btn {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    border: 1.5px solid #1e3a8a;
    background: white;
    color: #1e3a8a;
}

#sub-nav .sub-nav-btn:hover,
#sub-nav .sub-nav-btn.active {
    background: white;
    color: #f97316;
    border-color: #f97316;
}

/* Profile grid - Thumbnail layout */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px 40px 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.profile-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    image-rendering: smooth;
    -webkit-image-rendering: smooth;
    filter: contrast(1.02) brightness(1.01);
}

.profile-card .card-name {
    padding: 12px 15px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2d4a6e;
    text-align: center;
}

/* Photo gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 40px 40px;
    max-width: 1200px;
    margin: 0 auto;
    max-height: calc(100vh - 150px);
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    max-height: calc((100vh - 230px) / 2);
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Daily Life gallery - preserves original aspect ratios */
.daily-grid {
    column-count: 2;
    column-gap: 20px;
    padding: 20px 40px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.daily-grid .daily-item {
    break-inside: avoid;
    margin-bottom: 20px;
}

.daily-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.daily-grid img:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .daily-grid {
        column-count: 1;
        padding: 15px;
    }
}

/* Link cards for external links */
.link-list {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.link-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 22px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    color: #2d4a6e;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.link-card .link-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.link-card .link-text {
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Make IDENTITE PLURIELLE and ITHACA bigger */
.research-big-title {
    font-size: 256px !important;
}

.link-card .link-url {
    font-size: 12px;
    color: #94a3b8;
    word-break: break-all;
    display: block;
}

/* Research project titles - match other page title styles */
.research-title-link {
    color: #1e3a8a;
    transition: color 0.3s ease;
}

.research-title-link:hover {
    color: #f97316;
}

.research-title-link:hover .link-url {
    color: #f97316;
}

[data-key="comingSoon"] {
    text-transform: uppercase;
}

/* Profile detail modal */
.profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: white;
    z-index: 200;
}

.profile-modal.open {
    display: block;
}

.modal-content {
    background: white;
    position: absolute;
    inset: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 60px; /* Account for modal header */
}

/* Landscape image styling */
.modal-content.landscape .modal-image-container img {
    max-height: calc(70vh - 60px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* .modal-close and .lightbox-close are now defined in index.html inline styles */

.modal-image-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 20px 15px 0 15px;
    flex-shrink: 0;
}

.modal-content img {
    width: auto;
    max-width: 100%;
    max-height: calc(80vh - 60px);
    object-fit: contain;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}

.modal-body {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 50px 60px;
    background: white;
    display: flex;
    flex-direction: column;
}

.modal-body h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 30px;
    line-height: 1.3;
}

.modal-body .modal-text {
    font-size: 16px;
    line-height: 1.8;
    color: #334e68;
    margin-bottom: 0;
}

.modal-body .modal-text .intro {
    font-style: normal;
    margin-bottom: 20px;
    display: block;
}

.modal-body .modal-text .quote {
    font-style: italic;
    display: block;
}

.modal-body .modal-text .quote::before {
    content: '';
}

.modal-body .modal-text .quote::after {
    content: '';
}

.modal-audio-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.profile-section {
    border-bottom: 1px solid #e2e8f0;
}

.profile-section:last-child {
    border-bottom: none;
}

.photo-credit {
    font-size: 11px;
    color: #94a3b8;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
}

@media (max-width: 968px) {
    .modal-content img {
        max-height: calc(60vh - 60px);
    }

    .modal-body {
        padding: 30px 25px 40px;
    }

    .modal-body h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .modal-body .modal-text {
        font-size: 15px;
    }
}

/* Lightbox for gallery images */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    z-index: 300;
    flex-direction: column;
    cursor: pointer;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: calc(85vh - 60px);
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-credit {
    margin-top: 10px;
    font-size: 13px;
    color: #94a3b8;
    font-family: 'Poppins', sans-serif;
}

/* Show credit under picture on all devices, header shows title */
.lightbox-credit {
    display: block;
}

.lightbox-credit-header {
    display: block;
}

@media (max-width: 768px) {
    .profile-grid {
        padding: 15px;
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Shared Stories gallery - preserve aspect ratio on mobile */
    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        max-height: none;
    }

    .gallery-grid > div {
        width: 100%;
    }

    .gallery-grid img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .link-list {
        padding: 15px;
    }

    .section-hero h1 {
        font-size: 26px;
    }

    .section-hero {
        padding: 40px 15px 20px;
    }

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

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #1e3a8a;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.nav-right {
    flex: 1;
    justify-content: flex-end;
}

.home-icon {
    cursor: pointer;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    /* Yellow to orange gradient - same as sun */
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    /* Subtle white glow */
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
}

.home-icon svg {
    display: none;
}

.home-icon:hover {
    /* Enhanced glow on hover */
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

.logo {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lang-wrapper {
    font-size: 18px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.lang-wrapper .lang-btn {
    color: #ffffff;
    /* White for content pages */
    font-size: 18px;
    font-weight: 300;
}

.lang-wrapper .lang-btn:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
}

.lang-wrapper .lang-btn.active {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 300;
}

.hamburger {
    font-size: 28px;
    cursor: pointer;
    padding-left: 0;
    border-left: none;
    line-height: 1;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.hamburger:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
}

/* COMING SOON TEXT */
.coming-soon-container {
    text-align: center;
}

.coming-soon-text {
    font-size: 48px;
    font-weight: 600;
    color: #64748b;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Mobile styles for coming soon text */
@media (max-width: 768px) {
    .coming-soon-text {
        font-size: 50px;
        font-weight: 300;
        word-spacing: 100vw;
        line-height: 1.1;
    }

    /* Force page header to always be two lines on mobile */
    .page-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-left {
        flex: 0 0 auto;
    }

    .nav-right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* OVERLAY MENU */
#nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1e40af 0%, #1e3a8a 30%, #172554 60%, #020617 100%);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Reserve space so the centered menu can't overlap the absolutely-positioned
       close/lang controls (top) and social icons (bottom). Firefox renders the
       menu taller than Chrome due to different default line metrics, which made
       the last items collide with the FB/Instagram icons. */
    padding: 70px 20px 110px;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.overlay-close {
    position: absolute;
    top: 17px;
    right: 30px;
    font-size: 35px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.3s ease;
    line-height: 1;
}

.overlay-close:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
    transform: rotate(90deg) scale(1.2);
}

.overlay-lang-container {
    position: absolute;
    top: 25px;
    left: 30px;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    line-height: 1;
}

.overlay-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.overlay-menu > li {
    margin: 0;
}

.menu-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay-item {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;

    /* Start hidden for stagger animation */
    opacity: 0;
    transform: translateX(-30px);
}

/* Stagger animation when menu opens */
#nav-overlay.open .overlay-menu>li:nth-child(1) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(1)>.overlay-item {
    animation: slideIn 0.4s 0.05s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(2) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(2)>.overlay-item {
    animation: slideIn 0.4s 0.1s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(3) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(3)>.overlay-item {
    animation: slideIn 0.4s 0.15s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(4) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(4)>.overlay-item {
    animation: slideIn 0.4s 0.2s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(5) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(5)>.overlay-item {
    animation: slideIn 0.4s 0.25s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(6) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(6)>.overlay-item {
    animation: slideIn 0.4s 0.3s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(7) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(7)>.overlay-item {
    animation: slideIn 0.4s 0.35s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(8) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(8)>.overlay-item {
    animation: slideIn 0.4s 0.4s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(9) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(9)>.overlay-item {
    animation: slideIn 0.4s 0.45s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(10) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(10)>.overlay-item {
    animation: slideIn 0.4s 0.5s forwards;
}

#nav-overlay.open .overlay-menu>li:nth-child(11) .overlay-item,
#nav-overlay.open .overlay-menu>li:nth-child(11)>.overlay-item {
    animation: slideIn 0.4s 0.55s forwards;
}

.overlay-social {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    transform: translateY(10px);
    z-index: 10;
}

@media (max-width: 600px) {
    /* MOBILE HAMBURGER MENU - Complete layout fix */
    #nav-overlay {
        /* Use space-between to push social icons to bottom naturally */
        justify-content: space-between !important;
        align-items: center;
        padding: 50px 20px 25px;
        /* CRITICAL: Disable scrolling on overlay - menu will scroll internally */
        overflow: hidden !important;
    }

    /* Make menu scrollable if needed, but constrain height */
    .overlay-menu {
        gap: 8px;
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px); /* Dynamic viewport height for mobile */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 1;
    }

    /* Smaller, more compact menu items */
    .overlay-item {
        font-size: 17px;
        line-height: 1.05;
    }

    /* More compact submenus */
    .submenu-item {
        font-size: 12px;
        padding: 3px 10px;
    }

    .menu-item-with-submenu:hover .submenu {
        margin-top: 4px;
    }

    /* CRITICAL: Social icons use FLEXBOX positioning, not fixed/absolute */
    .overlay-social {
        position: relative !important;
        bottom: auto !important;
        margin-top: 12px;
        flex-shrink: 0;
        opacity: 1 !important;
        transform: none !important;
        z-index: 10;
        padding-bottom: 10px;
    }

    /* No animation on mobile - instant visibility */
    #nav-overlay.open .overlay-social {
        animation: none !important;
        opacity: 1 !important;
    }
}

#nav-overlay.open .overlay-social {
    animation: slideInUp 0.5s 0.65s forwards;
}

.overlay-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, border-color 0.3s, color 0.3s;
}

.overlay-social-link:hover {
    transform: translateY(-3px) scale(1.08);
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    border-color: transparent;
    color: #1e3a8a;
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.overlay-item:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
}

/* Submenu styles */
.menu-item-with-submenu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
                margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.menu-item-with-submenu:hover .submenu {
    max-height: 120px;
    opacity: 1;
    margin-top: 10px;
    transform: translateY(0);
}

.menu-item-with-submenu:hover .submenu.submenu-multi {
    max-height: 180px;
}

.submenu-item {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 8px 20px;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
}

.submenu-item:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Expandable synopsis styles */
.synopsis-container {
    margin-bottom: 35px;
}

.synopsis-short {
    display: inline;
}

.synopsis-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    margin-left: 8px;
    vertical-align: middle;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.3);
}

.synopsis-expand-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
}

.synopsis-expand-btn.expanded {
    transform: rotate(45deg);
}

.synopsis-expand-btn.expanded:hover {
    transform: rotate(45deg) scale(1.1);
}

.synopsis-long {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.3s ease;
    margin-top: 0;
}

.synopsis-long.expanded {
    max-height: 2000px;
    opacity: 1;
    margin-top: 20px;
}

.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    /* Smooth, synchronized transitions with polished easing */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.menu-group:hover .sub-menu {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 10px;
}

.sub-item {
    font-size: 18px;
    font-weight: 300;
    margin: 8px 0;
    color: #64748b;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease,
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered animation for sub-items on reveal */
.menu-group:hover .sub-item {
    opacity: 1;
    transform: translateY(0);
}

.menu-group:hover .sub-item:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-group:hover .sub-item:nth-child(2) {
    transition-delay: 0.15s;
}

.menu-group:hover .sub-item:nth-child(3) {
    transition-delay: 0.2s;
}

.menu-group:hover .sub-item:nth-child(4) {
    transition-delay: 0.25s;
}

.menu-group:hover .sub-item:nth-child(5) {
    transition-delay: 0.3s;
}

.sub-item:hover {
    background: linear-gradient(135deg, #fde047, #fbbf24, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Sun gradient on hover */
}

/* CONTENT WITH STAGGER ANIMATION */
.content-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 20px 80px 20px;
}

.content-container>* {
    opacity: 1;
    transform: none;
}

#article-view.active .content-container>*,
#about-view.active .content-container>*,
#films-view.active .content-container>*,
#podcasts-view.active .content-container>*,
#contact-view.active .content-container>* {
    animation: none;
}

#article-view.active .content-container>*:nth-child(1),
#about-view.active .content-container>*:nth-child(1),
#films-view.active .content-container>*:nth-child(1),
#podcasts-view.active .content-container>*:nth-child(1),
#contact-view.active .content-container>*:nth-child(1) {
    animation-delay: 0.1s;
}

#article-view.active .content-container>*:nth-child(2),
#about-view.active .content-container>*:nth-child(2),
#films-view.active .content-container>*:nth-child(2),
#podcasts-view.active .content-container>*:nth-child(2),
#contact-view.active .content-container>*:nth-child(2) {
    animation-delay: 0.2s;
}

#article-view.active .content-container>*:nth-child(3),
#about-view.active .content-container>*:nth-child(3),
#films-view.active .content-container>*:nth-child(3),
#podcasts-view.active .content-container>*:nth-child(3),
#contact-view.active .content-container>*:nth-child(3) {
    animation-delay: 0.3s;
}

#article-view.active .content-container>*:nth-child(4),
#about-view.active .content-container>*:nth-child(4),
#films-view.active .content-container>*:nth-child(4),
#podcasts-view.active .content-container>*:nth-child(4),
#contact-view.active .content-container>*:nth-child(4) {
    animation-delay: 0.4s;
}

#article-view.active .content-container>*:nth-child(5),
#about-view.active .content-container>*:nth-child(5),
#films-view.active .content-container>*:nth-child(5),
#podcasts-view.active .content-container>*:nth-child(5) {
    animation-delay: 0.5s;
}

#article-view.active .content-container>*:nth-child(6),
#about-view.active .content-container>*:nth-child(6),
#films-view.active .content-container>*:nth-child(6),
#podcasts-view.active .content-container>*:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-image {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 30px;
    display: block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.hero-image:hover {
    transform: translateY(-4px);
}

.article-title {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.article-meta {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.quote-block {
    font-size: 18px;
    padding: 20px 20px 20px 25px;
    margin: 30px 0;
    border-left: 4px solid var(--accent-color);
    font-style: italic;
    color: #475569;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
}

.audio-player {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 12px;
    margin-top: 40px;
    background: #fafafa;
    transition: all 0.3s ease;
}

.audio-player:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.play-btn {
    width: 40px;
    height: 40px;
    background: #1e3a8a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    margin-right: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.play-btn:hover {
    background: #f97316;
}

.play-btn::after {
    content: '';
    border-left: 10px solid white;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}

.play-btn.playing::after {
    content: '';
    border-left: 4px solid white;
    border-right: 4px solid white;
    border-top: none;
    border-bottom: none;
    width: 4px;
    height: 14px;
    margin-left: 0;
}

.play-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.play-btn.loading::after {
    content: '';
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin: 0;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.progress-bar {
    flex-grow: 1;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.time-stamp {
    margin-left: 15px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.audio-label {
    margin-left: 15px;
    font-size: 12px;
    color: #1e3a8a;
    font-style: italic;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .time-stamp {
        display: none;
    }
    .audio-label {
        margin-left: 10px;
        font-size: 11px;
    }
}

.back-btn-container {
    text-align: center;
    margin-top: 50px;
}

.back-btn {
    padding: 15px 40px;
    border: 2px solid #333;
    background: transparent;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    border-radius: 4px;
}

.back-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
}

.bio-text {
    font-size: 15px;
    line-height: 1.7;
    color: #334e68;
    margin-bottom: 20px;
}

/* Contact form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Poppins', sans-serif;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-field label {
    font-size: 14px;
    font-weight: 500;
    color: #1e3a8a;
    letter-spacing: 0.3px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #1e293b;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.contact-field textarea {
    min-height: 160px;
    line-height: 1.6;
}

.contact-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e3a8a'><path d='M8 11L3 6h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: #1e3a8a;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

.contact-field select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e3a8a'><path d='M8 11L3 6h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

.contact-error {
    font-size: 14px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px 14px;
    border-radius: 6px;
}

.contact-status {
    font-size: 14px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 10px 14px;
    border-radius: 6px;
}

.contact-submit {
    margin-top: 10px;
    align-self: center;
    min-width: 220px;
    padding: 14px 28px;
    background: #1e3a8a;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.contact-submit:hover {
    background: #172554;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.contact-submit:active {
    transform: translateY(0);
}