/* Import luxury fonts - Tan Meringue for main title, Didot LP Display for headings, Garamond for body text */
/* ===================================== */
/* EXTRACTED COLOR PALETTE FROM HERO    */
/* Natural botanical tones from botanical-fireplace-interior-design-reference.jpg */
/* ===================================== */
:root {
    --forest-green: #4a5a3f;
    --moss-green: #6b7a5d;
    --sage-green: #8a9b7c;
    --deep-burgundy: #5d3a4f;
    --plum: #4a2d3e;
    --warm-brown: #6d4c3d;
    --bark-tone: #8b6f47;
    --muted-purple: #7d5f6f;
    --mauve: #6b4d5f;
    --cream: #e8e0d5;
    --light-beige: #d4c9b8;
}

@import url('https://fonts.googleapis.com/css2?family=Tan+Meringue&family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didot+LP+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');

/* ========== GLOBAL TYPOGRAPHY - ELEGANT SERIF STYLE ========== */
* {
    font-family: 'Times New Roman', Times, serif;
}

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(232, 224, 213, 0.9);
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #e8e0d5;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
}

p, li, span, a, button, input, textarea, label {
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: -0.01em;
}

/* ========== PURPLE GRADIENT GLASSMORPHISM BACKGROUND ========== */
/* Apply to any page by adding class="purple-gradient-bg" to body tag */
/* Used in: articles.html, observational-notes-oslo-library.html, research-thefuturisticlearninglaboratory-lilafredrikablom.html */
.purple-gradient-bg {
    background: transparent;
    position: relative;
    min-height: 100vh;
}

.purple-gradient-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(54, 37, 62, 0.7) 0%,      /* Deep purple */
        rgba(58, 43, 57, 0.7) 15%,     /* Dark purple-brown */
        rgba(91, 79, 85, 0.6) 30%,     /* Muted purple-grey */
        rgba(141, 131, 132, 0.5) 50%,  /* Mid grey-mauve */
        rgba(167, 159, 156, 0.5) 70%,  /* Light grey */
        rgba(194, 186, 212, 0.4) 85%,  /* Lavender-grey */
        rgba(213, 207, 197, 0.3) 100%); /* Cream-beige */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: -2;
    pointer-events: none;
}

/* ========== SOPHISTICATED VERTICAL NAVIGATION ========== */

.vertical-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 160px; /* Reduced fixed width */
    height: 100vh;
    background: linear-gradient(180deg, 
        #8a9b7c 0%, 
        #7d5f6f 50%, 
        #6d4c3d 100%);
    backdrop-filter: blur(25px) saturate(1.2);
    border-right: 2px solid rgba(138, 155, 124, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.08);
    background-color: white;
}

/* Remove hover width change */
.vertical-nav:hover {
    width: 160px; /* Same width - no change */
}

.nav-logo-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.logo-symbol {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #333333, #555555);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Didot LP Display', serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;  /* Changed from 0 to 1 to ensure visibility */
    transform: translateX(0);  /* Changed from -20px to 0 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}

.vertical-nav:hover .logo-text {
    opacity: 1;
    transform: translateX(0);
}

.logo-primary {
    font-family: 'Didot LP Display', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--forest-green);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.logo-academic {
    font-family: 'Didot LP Display', serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555555;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.logo-secondary {
    font-family: 'EB Garamond', serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #666666;
    letter-spacing: 1.5px;
    font-style: italic;
    text-transform: lowercase;
}

.vertical-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.vertical-nav-item {
    position: relative;
}

.vertical-nav-link {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #000000; /* Changed to black */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 4px;
    position: relative;
    overflow: visible;
    white-space: nowrap;
    width: 50px;
    justify-content: center;
}

/* Elegant left border indicator */
.vertical-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, 
        var(--sage-green) 0%, 
        var(--forest-green) 50%, 
        var(--moss-green) 100%);
    border-radius: 0 3px 3px 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

/* Sophisticated shimmer effect on hover */
.vertical-nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(138, 155, 124, 0.2) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.vertical-nav-link:hover::after {
    left: 100%;
}

.vertical-nav:hover .vertical-nav-link {
    width: 180px;
    justify-content: center;
}

.nav-icon {
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 20px;
    text-align: center;
    font-weight: 300;
    color: #555555;
    font-family: 'Didot LP Display', serif;
    position: relative;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-text {
    font-family: 'Gill Sans', 'Calibri', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #000000; /* Changed to black */
    position: relative;
}

.vertical-nav:hover .nav-text {
    opacity: 1;
    transform: translateX(0);
}

/* Hover state - sophisticated and elegant */
.vertical-nav-link:hover {
    transform: translateX(4px);
}

/* Only show hover background when nav is expanded */
.vertical-nav:hover .vertical-nav-link:hover {
    background: linear-gradient(135deg, 
        rgba(138, 155, 124, 0.12) 0%, 
        rgba(232, 224, 213, 0.25) 100%);
}

.vertical-nav-link:hover .nav-text {
    color: var(--forest-green);
}

/* Active state - only show background when nav is expanded */
.vertical-nav-link.active {
    color: var(--forest-green);
}

.vertical-nav:hover .vertical-nav-link.active {
    background: linear-gradient(135deg, 
        rgba(138, 155, 124, 0.18) 0%, 
        rgba(232, 224, 213, 0.35) 100%);
}

/* Only show vertical line indicator when nav is expanded */
.vertical-nav:hover .vertical-nav-link.active::before {
    transform: translateY(-50%) scaleY(1);
    height: 70%;
    opacity: 1;
}


.vertical-nav-link.active .nav-text {
    color: var(--forest-green);
    font-weight: 600;
}

/* Contact Button in Nav */
.nav-contact-trigger {
    padding: 1.5rem 0;
    margin: 0 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-contact-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--moss-green) 100%);
    color: var(--cream);
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(74, 90, 63, 0.25);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav-contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(74, 90, 63, 0.35);
    background: linear-gradient(135deg, var(--moss-green) 0%, var(--sage-green) 100%);
}

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

.contact-icon {
    font-size: 1.1em;
}

.contact-text {
    white-space: nowrap;
}

/* Legal Links Section */
.nav-legal-section {
    padding: 1rem 0;
    margin: 0 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin-bottom: 1rem;
}

.nav-legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-legal-item {
    margin: 0;
}

.nav-legal-link {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #000000; /* Changed to black */
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    position: relative;
    overflow: visible;
    white-space: nowrap;
    width: 50px;
    justify-content: center;
}

/* Left border indicator - same as main nav */
.nav-legal-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, 
        var(--sage-green) 0%, 
        var(--forest-green) 50%, 
        var(--moss-green) 100%);
    border-radius: 0 3px 3px 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

/* Shimmer effect on hover - same as main nav */
.nav-legal-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(138, 155, 124, 0.2) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
}

.nav-legal-link:hover::after {
    left: 100%;
}

/* Expand width on nav hover - same as main nav */
.vertical-nav:hover .nav-legal-link {
    width: 180px;
    justify-content: flex-start;
    padding-left: 1.5rem;
}

.nav-legal-link:hover {
    color: var(--forest-green);
    transform: translateX(4px);
}

/* Only show hover background when nav is expanded */
.vertical-nav:hover .nav-legal-link:hover {
    background: linear-gradient(135deg, 
        rgba(138, 155, 124, 0.12) 0%, 
        rgba(232, 224, 213, 0.25) 100%);
}

.nav-legal-link:hover::before {
    transform: translateY(-50%) scaleY(1);
    height: 70%;
    opacity: 1;
}

.legal-text {
    margin-left: 1.5rem;
    white-space: nowrap;
    font-family: 'Gill Sans', 'Calibri', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #000000; /* Changed to black */
    position: relative;
}

.vertical-nav:hover .legal-text {
    opacity: 1;
    transform: translateX(0);
}

.nav-legal-link:hover .legal-text {
    color: var(--forest-green);
}

.nav-social-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.social-link-vertical {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.social-link-vertical:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--forest-green);
    transform: scale(1.1);
}

.social-icon {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Didot LP Display', serif;
    letter-spacing: 1px;
    color: #555555;
}

.nav-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60px;
    background: linear-gradient(180deg, transparent, #333333, transparent);
    border-radius: 0 3px 3px 0;
    opacity: 0.6;
    animation: indicatorPulse 3s ease-in-out infinite;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) scaleY(0.8); }
    50% { opacity: 0.8; transform: translateY(-50%) scaleY(1.2); }
}

/* ========== MAIN CONTENT ADJUSTMENT FOR VERTICAL NAV ========== */
main {
    margin-left: 80px;
    transition: margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 10;
}

/* Override main margin for cinematic nav pages */
.has-cinematic-nav main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .vertical-nav {
        width: 60px;
        padding: 1rem 0;
    }
    
    .vertical-nav:hover {
        width: 60px;
    }
    
    .logo-text,
    .nav-text,
    .contact-text,
    .legal-text {
        display: none;
    }
    
    .logo-symbol {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
    
    .nav-icon {
        font-size: 1.2rem;
    }
    
    .social-icon {
        font-size: 0.75rem;
    }
    
    .vertical-nav-link {
        width: 40px;
        padding: 0.8rem;
    }
    
    .vertical-nav:hover .vertical-nav-link {
        width: 40px;
        justify-content: center;
        padding-left: 0.8rem;
    }
    
    /* Contact Button Mobile */
    .nav-contact-trigger {
        padding: 1rem 0;
        margin: 0 0.5rem;
    }
    
    .nav-contact-button {
        padding: 10px;
        justify-content: center;
        min-width: 48px;
    }
    
    .contact-icon {
        font-size: 1.3em;
    }
    
    /* Legal Links Mobile */
    .nav-legal-section {
        padding: 0.8rem 0;
        margin: 0 0.5rem;
    }
    
    .nav-legal-link {
        padding: 1rem;
        justify-content: center;
    }
    
    .legal-text {
        font-size: 0.8rem;
    }
    
    main {
        margin-left: 60px;
    }
}

/* ========== TABLET RESPONSIVE ========== */
@media (max-width: 1024px) and (min-width: 769px) {
    .vertical-nav {
        width: 70px;
    }
    
    .vertical-nav:hover {
        width: 200px;
    }
    
    .logo-primary {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }
    
    .nav-text {
        font-size: 0.85rem;
        letter-spacing: 1.8px;
    }
    
    main {
        margin-left: 70px;
    }
}

/* ========== FLOATING ELEMENTS ========== */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: none;
    opacity: 0;
}

.floating-note, .floating-academia {
    position: absolute;
    font-size: 2rem;
    opacity: 0;
    animation: none;
    transition: all 0.3s ease;
    display: none;
}

.note-1 { top: 10%; left: 10%; animation-delay: 0s; color: #ffffff; }
.note-2 { top: 20%; left: 80%; animation-delay: -5s; color: #cccccc; }
.note-3 { top: 60%; left: 15%; animation-delay: -10s; color: #999999; }
.note-4 { top: 80%; left: 70%; animation-delay: -15s; color: #666666; }
.note-5 { top: 40%; left: 85%; animation-delay: -3s; color: #dddddd; }

.academia-1 { top: 30%; left: 5%; animation-delay: -7s; color: #888888; }
.academia-2 { top: 70%; left: 90%; animation-delay: -12s; color: #ffffff; }
.academia-3 { top: 50%; left: 50%; animation-delay: -18s; color: #bbbbbb; }

@keyframes floatDance {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-20px) rotate(90deg) scale(1.1); }
    50% { transform: translateY(-40px) rotate(180deg) scale(0.9); }
    75% { transform: translateY(-20px) rotate(270deg) scale(1.05); }
}

/* Mouse interaction with floating elements */
.floating-note:hover, .floating-academia:hover {
    opacity: 0.8;
    transform: scale(1.5) !important;
    animation-play-state: paused;
}

/* ========== SCROLL PROGRESS INDICATOR ========== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 160px;
    width: calc(100% - 160px);
    height: 15px;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

/* Full width scroll progress for cinematic nav pages */
.has-cinematic-nav .scroll-progress,
.article-page .scroll-progress {
    left: 0;
    width: 100%;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg,
        rgba(138, 43, 226, 0.3) 0%,
        rgba(186, 85, 211, 0.6) 50%,
        rgba(221, 160, 221, 0.4) 100%);
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

/* ========== PARALLAX SECTIONS ========== */
.parallax-section {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* ========== MORPHING TEXT EFFECTS ========== */
@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }
}

.glow-text {
    animation: textGlow 3s ease-in-out infinite;
}

/* ========== BLEND MODE EFFECT - GLOBAL UTILITY ========== */
@property --width {
    syntax: '<length>';
    inherits: false;
    initial-value: 500px;
}

@property --height {
    syntax: '<length>';
    inherits: false;
    initial-value: 650px;
}

@property --scale {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --translate-x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --translate-y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --rotate {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.explosion-gallery {
    padding: 60px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Visual Duo (two-column side-by-side layout) */
.visual-duo {
    padding: 80px 0;
    background: transparent;
}

.visual-duo-title {
    margin-bottom: 3rem;
}

.visual-duo .duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.visual-duo .duo-column {
    position: relative;
}

/* Ensure inner gallery blocks don't over-expand */
.visual-duo .explosion-gallery-container {
    margin-top: 1.5rem;
}

/* Stack on tablets/phones */
@media (max-width: 1024px) {
    .visual-duo .duo-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}

.explosion-gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    margin-top: 3rem;
}

.scene {
    width: var(--width);
    height: var(--height);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.wrapper-images {
    position: relative;
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
}

.wrapper-images img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 280px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: 
        translate(-50%, -50%) 
        translateX(var(--translate-x)) 
        translateY(var(--translate-y)) 
        rotate(var(--rotate)) 
        scale(var(--scale));
    filter: grayscale(0.2) brightness(0.9);
}

.wrapper-images img:hover {
    z-index: 10;
    transform: 
        translate(-50%, -50%) 
        translateX(var(--translate-x)) 
        translateY(var(--translate-y)) 
        rotate(0deg) 
        scale(1.2);
    filter: grayscale(0) brightness(1.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Initial stacked state */
.wrapper-images img {
    --scale: 1;
    --translate-x: 0px;
    --translate-y: 0px;
    --rotate: 0deg;
}

/* Explosion effect on scene hover */
.scene:hover .wrapper-images img {
    --scale: 0.8;
}

.scene:hover .wrapper-images img:nth-child(1) { --translate-x: -150px; --translate-y: -100px; --rotate: -15deg; }
.scene:hover .wrapper-images img:nth-child(2) { --translate-x: 150px; --translate-y: -80px; --rotate: 12deg; }
.scene:hover .wrapper-images img:nth-child(3) { --translate-x: -120px; --translate-y: 80px; --rotate: -8deg; }
.scene:hover .wrapper-images img:nth-child(4) { --translate-x: 120px; --translate-y: 100px; --rotate: 10deg; }
.scene:hover .wrapper-images img:nth-child(5) { --translate-x: -180px; --translate-y: -20px; --rotate: -20deg; }
.scene:hover .wrapper-images img:nth-child(6) { --translate-x: 180px; --translate-y: 20px; --rotate: 18deg; }
.scene:hover .wrapper-images img:nth-child(7) { --translate-x: -80px; --translate-y: -150px; --rotate: -12deg; }
.scene:hover .wrapper-images img:nth-child(8) { --translate-x: 80px; --translate-y: 150px; --rotate: 15deg; }

.gallery-description {
    text-align: center;
    max-width: 800px;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
    font-style: italic;
}

.gallery-stats {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-item .stat-number {
    display: block;
    font-family: 'Didot LP Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #666666;
    margin-bottom: 0.5rem;
}

.stat-item .stat-label {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .scene {
        --width: 350px;
        --height: 500px;
    }
    
    .wrapper-images {
        width: 250px;
        height: 350px;
    }
    
    .wrapper-images img {
        width: 150px;
        height: 200px;
    }
    
    .scene:hover .wrapper-images img:nth-child(1) { --translate-x: -80px; --translate-y: -60px; }
    .scene:hover .wrapper-images img:nth-child(2) { --translate-x: 80px; --translate-y: -50px; }
    .scene:hover .wrapper-images img:nth-child(3) { --translate-x: -70px; --translate-y: 50px; }
    .scene:hover .wrapper-images img:nth-child(4) { --translate-x: 70px; --translate-y: 60px; }
    .scene:hover .wrapper-images img:nth-child(5) { --translate-x: -100px; --translate-y: -10px; }
    .scene:hover .wrapper-images img:nth-child(6) { --translate-x: 100px; --translate-y: 10px; }
    .scene:hover .wrapper-images img:nth-child(7) { --translate-x: -50px; --translate-y: -80px; }
    .scene:hover .wrapper-images img:nth-child(8) { --translate-x: 50px; --translate-y: 80px; }
    
    .gallery-stats {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'EB Garamond', 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.7;
    color: #2c2c2c;
    background: transparent;
    min-height: 100vh;
    font-weight: 400;
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Animated gradient keyframes */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 75%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========== BLEND MODE EFFECT - GLOBAL UTILITY ========== */
/* Apply this to any element for the inverted contrast effect */
.blend-mode-effect {
    mix-blend-mode: difference;
    backdrop-filter: grayscale(1) contrast(100);
    -webkit-backdrop-filter: grayscale(1) contrast(100);
}

/* ========== ARTICLE PAGE STYLES ========== */
/* Shared styles for all article blog posts with vertical scroll layout */

/* Article-specific body overrides */
body.article-page {
    margin: 0;
    padding: 0;
    background: #1a1410;
    color: #e8e0d5;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Article Navigation Toggle */
.article-page .menu-toggle {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 1000;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.article-page .menu-toggle img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.article-page .menu-toggle:hover {
    transform: scale(1.1);
}

/* Vertical Scroll Container */
.article-horizontal-container {
    display: block;
    width: 100%;
}

.article-scroll-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

.article-section {
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 6vw;
    position: relative;
}

/* Header Section */
.article-header-section {
    text-align: center;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.article-category {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(232, 224, 213, 0.6);
    margin-bottom: 2rem;
}

.article-main-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: #e8e0d5;
    margin: 0;
    line-height: 1.1;
    width: 100%;
}

.article-subtitle {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: rgba(232, 224, 213, 0.7);
    font-style: italic;
    margin-top: 2rem;
}

/* Content Section */
.article-content-section {
    width: 100%;
    max-width: 100%;
}

/* 3-Column Grid */
.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.three-column-grid > div {
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
}

.article-content-section h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: #e8e0d5;
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.article-content-section h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    color: rgba(232, 224, 213, 0.9);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.article-content-section p {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    color: rgba(232, 224, 213, 0.8);
    margin-bottom: 1.2rem;
}

.article-content-section strong {
    color: #e8e0d5;
    font-weight: 700;
}

.article-content-section blockquote {
    border-left: 3px solid rgba(232, 224, 213, 0.3);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: rgba(232, 224, 213, 0.7);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.article-content-section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.article-content-section li {
    margin-bottom: 0.8rem;
    line-height: 1.7;
    color: rgba(232, 224, 213, 0.8);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

/* Back Button */
.back-button {
    display: inline-block;
    margin-bottom: 2rem;
    padding: 0.8rem 1.5rem;
    background: rgba(232, 224, 213, 0.1);
    color: #e8e0d5;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.back-button:hover {
    background: rgba(232, 224, 213, 0.2);
    transform: translateX(-5px);
}

/* Void-pulse textured gradient background - FIXED on entire page */

/* ========== UNIVERSAL CINEMATIC NAV RESET ========== */
/* This overrides ALL navbar offsets for pages with cinematic navigation */

/* Reset HTML and BODY completely */
html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.has-cinematic-nav {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.has-cinematic-nav * {
    box-sizing: border-box !important;
}

/* Reset ALL sections - remove navbar offset */
.has-cinematic-nav section {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Reset ALL containers - centered with max-width */
.has-cinematic-nav .container,
.has-cinematic-nav .hero-content,
.has-cinematic-nav .renaissance-section-redesigned .container,
.has-cinematic-nav .articles-thoughts-redesigned .container,
.has-cinematic-nav .visuals-section-3d .container,
.has-cinematic-nav .portfolio-section-redesigned .container,
.has-cinematic-nav .contact-section-redesigned .container,
.has-cinematic-nav .about .container,
.has-cinematic-nav .academic-section-redesigned .container,
.has-cinematic-nav .articles-blog-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Preserve the card background styling */
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Hero specific */
.has-cinematic-nav .hero {
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.has-cinematic-nav .hero-content {
    padding: 1rem 2rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    /* Override card styling for hero */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hero elements - centered */
.has-cinematic-nav .hero-top-image,
.has-cinematic-nav .hero-main-title,
.has-cinematic-nav .hero-subtitle-enhanced,
.has-cinematic-nav .hero-subtitle-secondary {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

/* Section padding reset */
.has-cinematic-nav .renaissance-section-redesigned,
.has-cinematic-nav .articles-thoughts-redesigned,
.has-cinematic-nav .visuals-section-3d,
.has-cinematic-nav .portfolio-section-redesigned,
.has-cinematic-nav .contact-section-redesigned,
.has-cinematic-nav .about,
.has-cinematic-nav .academic-section-redesigned {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Section vertical spacing */
.has-cinematic-nav section {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Footer reset - remove left padding for navbar */
.has-cinematic-nav footer {
    padding: 1.5rem 0 1rem 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override scroll padding for navbar */
.has-cinematic-nav.smooth-scroll,
html.has-cinematic-nav.smooth-scroll {
    scroll-padding-top: 0 !important;
}

/* Override any calc() widths that account for navbar */
.has-cinematic-nav [style*="calc(100vw - 320px)"],
.has-cinematic-nav [style*="calc(100vw - 160px)"] {
    max-width: 100vw !important;
}



/* ========== ARTICLE PAGE UNIVERSAL RESET ========== */
/* Clean reading experience for article pages - hide vertical nav */
.article-page .vertical-nav {
    display: none !important;
}

.article-page {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.article-page section {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.article-page .container {
    max-width: 900px !important; /* Optimal reading width for articles */
    padding: 0 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.article-page .article-body {
    max-width: 800px;
    margin: 0 auto;
}

/* Luxury Typography Hierarchy - Tan Meringue Focus */
h1, h2, h3, h4 {
    font-family: 'Tan Meringue', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
    color: #666666;
}

/* Main logo/brand title */
.logo h1 {
    font-size: 2rem;
    color: #666666;
    text-shadow: 1px 1px 2px rgba(102, 102, 102, 0.3);
    margin: 0;
}

/* Section titles */
h2 {
    font-family: 'Didot LP Display', 'Times New Roman', serif;
    font-size: 2.8rem;
    color: #666666;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

/* Subsection titles */
h3 {
    font-family: 'Didot LP Display', 'Times New Roman', serif;
    font-size: 1.8rem;
    color: #666666;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Card titles */
h4 {
    font-family: 'Didot LP Display', 'Times New Roman', serif;
    font-size: 1.4rem;
    color: #666666;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Header and Navigation - Sophisticated Animated Menu */
header {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(139, 69, 19, 0.1);
}

/* Hero Section */
.hero {
    background: transparent;
    color: #2c2c2c;
    padding: 0;
    text-align: center;
    margin-top: 0;
    position: relative;
    overflow-x: hidden; /* Only hide horizontal overflow */
    overflow-y: visible; /* Allow vertical overflow for bottom ornament */
    width: 100%;
    max-width: 100vw; /* Prevent expansion beyond viewport */
    height: 100vh; /* Fixed height at viewport height */
    min-height: 600px; /* Minimum height for small screens */
    max-height: 900px; /* Absolute maximum to prevent expansion at 100% zoom */
    display: flex;
    flex-direction: column; /* Change to column to stack content and ornament */
    align-items: center;
    justify-content: center;
    /* Hero is now visible by default - no clip-path */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="20" opacity="0.1">🎵�🎹💻📚</text></svg>') repeat;
    opacity: 0;
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem calc(160px + 4rem) 1rem calc(160px + 4rem); /* Add vertical padding for breathing room */
    gap: 1rem; /* Add spacing between elements */
    /* Make hero content visible by default */
    opacity: 1;
}

/* Override hero-content padding for cinematic nav pages */
.has-cinematic-nav .hero-content {
    padding: 1rem 2rem; /* Reset to simple padding, no offset */
    max-width: 1400px;
    margin: 0 auto;
}

/* Optional fade in animation if class is added */
.hero-content.animate-content {
    animation: fade-in 0.75s 0s linear forwards;
    will-change: opacity;
}

.hero .container {
    max-width: 100%;
    padding: 0;
}

.hero-content h1 {
    font-family: 'Tan Meringue', Georgia, serif;
    font-size: 4.5rem;
    margin-bottom: 2rem;
    line-height: 1.1;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3);
    letter-spacing: 1px;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    color: #FFF8DC;
}

.hero-subtitle {
    font-family: 'Tan Meringue', Georgia, serif;
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    font-style: italic;
    color: #FFF8DC;
    text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.hero-description {
    font-size: 1.4rem;
    margin-bottom: 3rem;
    opacity: 0.92;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    font-weight: 300;
    color: #FFF8DC;
    letter-spacing: 0.3px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


.cta-button {
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: white;
    color: #000000;
}

.cta-button.primary {
    background: linear-gradient(45deg, #666666, #888888);
    color: var(--forest-green);
    box-shadow: 0 4px 15px rgba(102, 102, 102, 0.4);
}

.cta-button.secondary {
    background: transparent;
    color: var(--forest-green);
    border: 2px solid #fff;
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.cta-button:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s ease;
}

.cta-button.primary:hover {
    background: linear-gradient(45deg, #606060, #808080);
}

.cta-button.secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* About Section */
.about {
    padding: 50px 0;
    background: transparent;
}

/* About Section - Magazine Style Design */
.about {
    padding: 50px 0;
    background: transparent;
    perspective: 1000px;
    overflow: hidden;
    position: relative;
}

.about .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    transform-style: preserve-3d;
}

.about h2 {
    text-align: center;
    margin-bottom: 4rem;
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
    position: relative;
    transform-style: preserve-3d;
}



/* ========== GSAP ENHANCEMENT STYLES ========== */

/* Ensure smooth GSAP animations */
.gsap-enhanced {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Enhanced 3D transforms for GSAP */
.hero-main-title,
.portfolio-card-enhanced,
.journey-chapter {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Improved animation performance */
.cursor-glow,
.cursor-trail,
.floating-note,
.floating-academia {
    will-change: transform;
    contain: layout style paint;
}

/* GSAP Scroll trigger indicators (hidden by default) */
.scroll-trigger-start,
.scroll-trigger-end {
    position: absolute;
    width: 100%;
    height: 1px;
    background: transparent;
    pointer-events: none;
}

/* Enhanced button hover states for GSAP */
.primary-enhanced,
.secondary-enhanced {
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
}

/* Smooth text animations */
.title-line-1,
.title-line-2,
.title-line-3 {
    will-change: transform, opacity;
    transform-origin: center bottom;
}

/* Portfolio grid optimization */
.portfolio-grid {
    perspective: 1000px;
}

.portfolio-card-enhanced {
    transform-origin: center;
    backface-visibility: hidden;
}


}

/* ========================================= */
/* Typography consolidation per user request */
/* - Times New Roman for hero & all headings */
/* - Consistent sans for all buttons         */
/* ========================================= */

/* Extend serif heading family to h1–h6 */
main h1, section h1, .container h1, h1,
main h2, section h2, .container h2, h2,
main h3, section h3.title, .container h3.title,
main h4, section h4, .container h4, h4,
main h5, section h5, .container h5, h5,
main h6, section h6, .container h6, h6 {
    font-family: Times, "Times New Roman", Georgia, serif;
}

/* Hero titles explicitly in Times New Roman */
.hero-main-title,
.hero-main-title .title-line-1,
.hero-main-title .title-line-2,
.hero-main-title .title-line-3 {
    font-family: Times, "Times New Roman", Georgia, serif !important;
}

/* Card and module titles coerced to Times */
.chapter-title-large,
.card-title-large,
.portfolio-card h3,
.portfolio-card-enhanced h3,
.research-card h3,
.article-card h3,
.current-studies-featured h3,
.academic-portfolio h3 {
    font-family: Times, "Times New Roman", Georgia, serif !important;
    text-transform: none;
}

/* Uniform button font stack (uppercase sans) */
button,
[role="button"],
.button,
.btn,
.btn-primary,
.btn-secondary,
.btn-primary-academic,
.btn-secondary-academic,
.action-buttons button,
.cta-button,
.hero-buttons .cta-button,
.hero-buttons-enhanced .cta-button,
.primary-enhanced,
.secondary-enhanced,
.geometric-section .read-more button,
.research-card .action-buttons button {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", Verdana, sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =============================== */
/* Final typography lock (Times)   */
/* Ensures absolute consistency    */
/* =============================== */

:root {
    --font-serif: Times, "Times New Roman", Georgia, serif;
    --font-sans: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", Verdana, sans-serif;
    --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

/* Force Times for all headings and designated title classes */
h1, h2, h3, h4, h5, h6,
.hero-content h1,
.hero-main-title,
.hero-main-title .title-line-1,
.hero-main-title .title-line-2,
.hero-main-title .title-line-3,
.chapter-title-large,
.card-title-large,
.portfolio-card h3,
.portfolio-card-enhanced h3,
.research-card h3,
.article-card h3,
.current-studies-featured h3,
.academic-portfolio h3 {
    font-family: var(--font-serif) !important;
    text-transform: none;
}

/* Unify all small labels/badges/subtitles to the sans stack (matches buttons) */
.section-label-scattered,
.section-number-scattered,
.about-section-label,
.subtitle-line,
.subtitle-line-large,
.description-label,
.chapter-subtitle,
.chapter-meta,
.degree-badge,
.in-progress-badge,
.planning-badge,
.coming-soon-badge,
.highlight-badge,
.focus-item-large,
.stat-item .stat-label,
.mini-stat .stat-label,
.category,
.date,
.sidebar-label,
.pursuit,
.read-more span,
.geometric-section .read-more button span {
    font-family: var(--font-sans) !important;
}

/* Mobile adjustments for the new default h2 size */
@media (max-width: 768px) {
    main h2, section h2, .container h2, h2 {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -1px;
    }
}
/* ====================== */
/* Global Heading Tweaks  */
/* (User-requested test)  */
/* ====================== */
/* Note: Placed late in the file to ensure it wins over generic element styles.
   Class selectors (e.g., .title-word, .chapter-title-large) may still override
   these; we can adjust those too if you want this look everywhere. */

h3 {
    font-family: Gill Sans, Verdana, sans-serif;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

h2 {
    font-family: Times, "Times New Roman", Georgia, serif;
    color: #444;
    margin: 0;
    padding: 0 0 6px 0;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
}

/* Enhanced section transitions */
section {
    will-change: transform;
    contain: layout style;
}

/* Optimize floating elements container */
.floating-elements {
    will-change: transform;
    contain: layout style paint;
    pointer-events: none;
}

/* GSAP Timeline indicators */
.timeline-narrative {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.journey-chapter {
    transform-origin: left center;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: box-shadow 0.3s ease;
}

.journey-chapter:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Enhanced credential items */
.credential-item {
    will-change: transform, opacity;
    transform-origin: center;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Sidebar cards 3D enhancement */
.essence-card-enhanced,
.experience-overview-enhanced {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: box-shadow 0.4s ease;
}

.essence-card-enhanced:hover,
.experience-overview-enhanced:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Quote mark enhancement */
.quote-mark-large {
    transform-origin: center;
    will-change: transform;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ========== CHAPTER INDICATORS ========== */
.chapter-indicators {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.chapter-indicators .indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.8));
    border: 2px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Didot LP Display', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
    will-change: transform;
}

.chapter-indicators .indicator.active {
    background: linear-gradient(135deg, #666666, #888888);
    color: #ffffff;
    border-color: #666666;
}

.chapter-indicators .indicator:hover {
    background: linear-gradient(135deg, #888888, #aaaaaa);
    color: #ffffff;
    border-color: #888888;
}

/* Experience numbers enhancement */
.exp-number-huge {
    transform-origin: center;
    will-change: transform, color;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Highlight badges and focus items */
.highlight-badge,
.focus-item-large,
.pursuit-enhanced {
    transform-origin: center;
    will-change: transform;
    transition: all 0.3s ease;
}

/* Smooth scroll progress */
.scroll-progress-bar {
    will-change: width;
    contain: strict;
}

/* Mobile GSAP optimizations */
@media (max-width: 768px) {
    .gsap-enhanced {
        will-change: auto;
    }
    
    .floating-note,
    .floating-academia {
        animation-duration: 30s; /* Slower on mobile */
    }
    
    /* Reduce complexity on mobile */
    .cursor-glow,
    .cursor-trail {
        display: none !important;
    }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .floating-note,
    .floating-academia,
    .title-line-1,
    .title-line-2,
    .title-line-3 {
        animation: none !important;
    }
    
    .gsap-enhanced {
        will-change: auto;
    }
}

/* ========== END GSAP ENHANCEMENT STYLES ========== */

/* ========== IMAGE GALLERY SECTION ========== */

.image-gallery {
    padding: 50px 0;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    position: relative;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.gallery-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.gallery-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.image-placeholder {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-card:hover .image-placeholder img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: var(--forest-green);
    padding: 2rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.gallery-card:hover .image-overlay {
    transform: translateY(0);
    opacity: 1;
}

.image-overlay h3 {
    font-family: 'Didot LP Display', serif;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--forest-green);
}

.image-overlay p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* ========== ARTICLES PREVIEW SECTION ========== */

.articles-preview {
    padding: 50px 0;
    background: transparent;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.article-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border-top: 4px solid #666666;
}

.article-card.featured {
    grid-column: span 2;
    border-top-color: #404040;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.article-image {
    height: 200px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
    border-radius: 0;
}

.article-card:hover .article-image img {
    transform: scale(1.05);
}

.article-content {
    padding: 2rem;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.category {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(102, 102, 102, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
}

.date {
    font-size: 0.9rem;
    color: #888888;
    font-style: italic;
}

.article-content h3 {
    font-family: 'Didot LP Display', serif;
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-content p {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.5rem;
}

.read-more {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    color: #666666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #404040;
}

/* ========== RESPONSIVE VISUAL ELEMENTS ========== */

@media (max-width: 768px) {
    .visual-divider {
        height: 120px;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .article-card.featured {
        grid-column: span 1;
    }
    
    .geometric-shapes .shape {
        opacity: 0.3;
    }
    
    .pattern-grid {
        width: 80%;
        gap: 1rem;
    }
}

/* ========== END VISUAL ELEMENTS ========== */

/* Hero Quote Section */
.journey-hero {
    margin-bottom: 5rem;
}

.journey-quote {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.9) 100%);
    padding: 4rem 3rem;
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(139, 69, 19, 0.1);
}

.quote-mark {
    font-family: 'Didot LP Display', serif;
    font-size: 8rem;
    color: rgba(139, 69, 19, 0.2);
    position: absolute;
    top: -2rem;
    left: 2rem;
    line-height: 1;
}

.lead-quote {
    font-family: 'Didot LP Display', serif;
    font-size: 1.6rem;
    color: #666666;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Timeline Narrative Layout - Fixed */
.journey-timeline {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
}

@media (max-width: 1024px) {
    .journey-timeline {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
}

.timeline-narrative {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: stretch;
    width: 100%;
    position: relative;
    z-index: 1;
}

.journey-chapter {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    border-top: 4px solid #000;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    transform: none !important;
    transform-style: flat !important;
}

.journey-chapter:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.chapter-header-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    flex-shrink: 0;
}

.chapter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chapter-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1rem;
    flex: none;
}

.journey-highlights {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.highlight-badge {
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--forest-green);
}

.highlight-badge.classical {
    background: linear-gradient(45deg, var(--forest-green), var(--moss-green));
}

.highlight-badge.jazz {
    background: linear-gradient(45deg, var(--moss-green), var(--sage-green));
}

.highlight-badge.tech {
    background: linear-gradient(45deg, var(--sage-green), var(--light-beige));
}

/* ========== ENHANCED JOURNEY CHAPTER ELEMENTS ========== */

.chapter-header-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    min-height: 120px;
}

.chapter-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.chapter-year {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666666;
    letter-spacing: 1px;
}

.chapter-duration {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chapter-title-large {
    font-family: 'Didot LP Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--forest-green);
    margin: 0.5rem 0;
    line-height: 1.2;
}

.chapter-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1rem;
    color: #666666;
    font-style: italic;
    margin-bottom: 1rem;
}

.journey-highlights-enhanced {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.achievement-stats-enhanced {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.mini-stat-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number-large {
    font-family: 'Didot LP Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #666666;
    line-height: 1;
}

.stat-label-enhanced {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.current-focus-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.focus-item-large {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666666;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.8rem 1.2rem;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
    transition: all 0.3s ease;
}

.focus-item-large:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #cccccc;
}

.achievement-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.mini-stat {
    text-align: center;
    background: rgba(139, 69, 19, 0.1);
    padding: 1rem;
    border-radius: 15px;
    min-width: 80px;
}

.stat-number {
    display: block;
    font-family: 'Didot LP Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #666666;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

.current-focus {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.focus-item {
    background: rgba(102, 102, 102, 0.08);
    color: #666666;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(102, 102, 102, 0.15);
}

/* Sidebar */
.journey-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-self: start;
    position: sticky;
    top: 2rem;
}

.sidebar-label {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
}

.essence-card-enhanced, 
.experience-overview-enhanced {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.9) 100%);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: box-shadow 0.4s ease;
}

.card-header-accent {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    text-align: center;
}

.card-title-large {
    font-family: 'Didot LP Display', serif;
    font-size: 1.4rem;
    color: #666666;
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.3;
}

.essence-text-enhanced {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: center;
    font-style: italic;
}

.creative-pursuits-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.pursuit-enhanced {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #666666;
    padding: 0.6rem 1.2rem;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
    transition: all 0.3s ease;
    transform-origin: center;
    will-change: transform;
}

.experience-grid-enhanced {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.exp-item-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform-origin: center;
    will-change: transform;
}

.exp-number-huge {
    font-family: 'Didot LP Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #666666;
    line-height: 1;
    transform-origin: center;
    will-change: transform, color;
    cursor: pointer;
    transition: all 0.3s ease;
}

.exp-label-enhanced {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.5rem;
    line-height: 1.3;
}

.creative-pursuits {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pursuit {
    background: rgba(139, 69, 19, 0.05);
    padding: 0.8rem;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.exp-item {
    text-align: center;
    background: rgba(139, 69, 19, 0.05);
    padding: 1.2rem 0.8rem;
    border-radius: 15px;
}

.exp-number {
    display: block;
    font-family: 'Didot LP Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #666666;
}

.exp-label {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.3rem;
    line-height: 1.3;
}

/* Portfolio Section - 2x2 Grid Layout */
.portfolio {
    padding: 50px 0;
    background: transparent;
}

.portfolio h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
    line-height: 1.2;
}

/* ========== SOMEFOLK-INSPIRED PORTFOLIO ENHANCEMENTS ========== */

/* Portfolio Section Labels */
.portfolio-label {
    color: #666666 !important;
}

.portfolio-title-enhanced {
    margin-bottom: 3rem;
}

.portfolio-subtitle {
    margin-bottom: 4rem;
}

/* Portfolio Showcase Header */
.portfolio-showcase-enhanced {
    margin-bottom: 4rem;
    text-align: center;
}

.showcase-header {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.9) 100%);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #ffffff;
}

.showcase-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.showcase-year, .showcase-count {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666666;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.showcase-description {
    font-family: 'Didot LP Display', serif;
    font-size: 1.4rem;
    color: #333;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

/* Enhanced Portfolio Cards */
.portfolio-card-enhanced {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.9) 100%);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.portfolio-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ffffff, #cccccc, #666666);
}

.portfolio-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* Card Labels and Numbers */
.card-label-scattered {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--moss-green);
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(15deg);
    opacity: 0.8;
}

.card-number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: 'Didot LP Display', serif;
    font-size: 3rem;
    color: rgba(200, 200, 200, 0.2);
    font-weight: 300;
    line-height: 1;
}

/* Enhanced Card Typography */
.card-title-enhanced {
    font-family: 'Didot LP Display', serif;
    font-size: 2rem;
    color: var(--forest-green);
    margin: 2rem 0 1rem 0;
    font-weight: 500;
    line-height: 1.3;
}

.card-subtitle-enhanced {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.portfolio-card-enhanced p {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 2rem;
}

/* Enhanced Skills Tags */
.enhanced-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: auto;
}

.enhanced-tags span {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666666;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.enhanced-tags span:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Portfolio Grid */
.portfolio .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 2.5rem !important;
    margin-top: 3rem;
}

/* ========== END SOMEFOLK-INSPIRED PORTFOLIO ENHANCEMENTS ========== */

.section-subtitle {
    text-align: center;
    font-size: 1.6rem;
    color: #000;
    margin-bottom: 3.5rem;
    font-style: italic;
    line-height: 1.4;
}

.portfolio .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.portfolio-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.9) 100%);
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(139, 69, 19, 0.1);
    transform-style: preserve-3d;
}

.portfolio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(205, 133, 63, 0.1) 0%, transparent 50%, rgba(139, 69, 19, 0.1) 100%);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.portfolio-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(205, 133, 63, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: all 0.6s ease;
    pointer-events: none;
    transform: scale(0) rotate(0deg);
}

.portfolio-card:hover {
    transform: translateY(-20px) scale(1.03) rotateX(5deg);
    box-shadow: 
        0 35px 70px rgba(74, 90, 63, 0.35),
        0 0 50px rgba(107, 122, 93, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(138, 155, 124, 0.6);
}

.portfolio-card:hover::before {
    opacity: 1;
}

.portfolio-card:hover::after {
    opacity: 1;
    transform: scale(1) rotate(180deg);
}

.portfolio-card:hover h3 {
    color: var(--warm-brown);
    text-shadow: 0 0 15px rgba(109, 76, 61, 0.6);
    transform: translateZ(10px);
}

.portfolio-card:hover p {
    transform: translateZ(5px);
    color: #666666;
}

.portfolio-card:hover .skills-tags span {
    transform: translateY(-5px) translateZ(8px);
    box-shadow: 0 8px 20px rgba(74, 90, 63, 0.3);
    background: linear-gradient(45deg, rgba(138, 155, 124, 0.3), rgba(107, 122, 93, 0.2));
}

.portfolio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.portfolio-card.music::before {
    background: linear-gradient(90deg, #666666, #888888);
}

.portfolio-card.education::before {
    background: linear-gradient(90deg, #666666, #888888);
}

.portfolio-card.creative::before {
    background: linear-gradient(90deg, #666666, #888888);
}

.portfolio-card.tech::before {
    background: linear-gradient(90deg, #666666, #888888);
}

/* ========== INTERACTIVE PORTFOLIO ENHANCEMENTS ========== */

/* Interactive Skill Constellation */
.skill-constellation {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 20px;
    position: relative;
}

.constellation-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.skill-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skill-node:nth-child(1) { top: 20px; left: 20px; }
.skill-node:nth-child(2) { top: 20px; right: 20px; }
.skill-node:nth-child(3) { bottom: 60px; left: 20px; }
.skill-node:nth-child(4) { bottom: 60px; right: 20px; }

.node-core {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #333 0%, #555 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.node-core::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.skill-node:hover .node-core::before {
    left: 100%;
}

.node-label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skill-level {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest-green);
    font-weight: bold;
}

.skill-node:hover {
    transform: scale(1.1);
}

.skill-node:hover .node-core {
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #444 0%, #666 100%);
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.connection-line {
    stroke-dasharray: 5, 5;
    animation: dashAnimation 3s linear infinite;
}

@keyframes dashAnimation {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 20; }
}

/* Project Preview */
.project-preview {
    margin-top: 1rem;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(45deg, rgba(0,212,255,0.1), rgba(0,153,204,0.1));
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(0,212,255,0.2);
}

.preview-icon {
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

.preview-text {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

/* Interactive Portfolio Stats */
.portfolio-stats-interactive {
    margin: 4rem 0;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.9) 100%);
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.8);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    font-family: 'Didot LP Display', serif;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stat-bar {
    margin-top: 1rem;
    height: 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.stat-progress {
    height: 100%;
    background: linear-gradient(90deg, #333, #555, #333);
    border-radius: 2px;
    width: 0%;
    transition: width 2s ease-out;
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive Design for Interactive Elements */
@media (max-width: 768px) {
    .constellation-container {
        height: 250px;
    }
    
    .skill-node {
        transform: scale(0.9);
    }
    
    .stats-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

.portfolio-card:hover {
    transform: translateY(-15px) rotateX(5deg);
    box-shadow: 0 25px 50px rgba(74, 90, 63, 0.25), 0 0 30px rgba(138, 155, 124, 0.3);
}

.portfolio-card:hover::before {
    opacity: 0.9;
    transform: scale(1.1);
}

.portfolio-card:hover h3 {
    transform: translateY(-5px);
    color: #666666;
}

.portfolio-card:hover p {
    transform: translateY(-3px);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.portfolio-card h3 {
    color: #000;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
}

.portfolio-card p {
    color: #000;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    flex-grow: 1;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1rem;
}

.skills-tags span {
    background: #f0f0f0;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    color: #000;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.skills-tags span:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #e8e8e8;
}

/* Contact Section */
.contact {
    padding: 50px 0;
    background: transparent;
}

.contact h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
}

.contact .section-subtitle {
    color: #000;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-info h3 {
    color: #666666;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    padding: 0.8rem 0;
    color: #000;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
}

.contact-form-container {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #666666;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form button {
    background: linear-gradient(45deg, #666666, #888888);
    color: var(--forest-green);
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.contact-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 102, 102, 0.4);
}

/* Academic Section - Sophisticated Design */
.academic {
    padding: 50px 0;
    background: transparent;
    color: #2c2c2c;
}

.academic h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
}

.academic .section-subtitle {
    color: #000;
    text-align: center;
    margin-bottom: 4rem;
    font-size: 1.6rem;
    font-style: italic;
}

/* Featured Current Studies Section */
.academic-hero {
    margin-bottom: 5rem;
}

.current-studies-featured {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.9) 100%);
    border-radius: 25px;
    padding: 3.5rem;
    box-shadow: 0 20px 60px rgba(139, 69, 19, 0.15);
    border: 1px solid rgba(139, 69, 19, 0.1);
    position: relative;
    overflow: hidden;
}

.current-studies-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #777777, #999999, #aaaaaa);
}

.degree-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 25%, #404040 50%, #2d2d2d 75%, #1a1a1a 100%);
    color: var(--forest-green);
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.planning-badge {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #1e3a8a 100%) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.coming-soon-badge {
    background: linear-gradient(135deg, #064e3b 0%, #059669 25%, #10b981 50%, #059669 75%, #064e3b 100%) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.in-progress-badge {
    background: linear-gradient(135deg, #7c2d12 0%, #dc2626 25%, #ef4444 50%, #dc2626 75%, #7c2d12 100%) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

/* Luxurious badge hover effects and shimmer */
.degree-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.degree-badge:hover::before {
    left: 100%;
}

.degree-badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.planning-badge:hover {
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.coming-soon-badge:hover {
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.current-studies-featured h3 {
    font-family: 'Didot LP Display', serif;
    font-size: 2.2rem;
    color: #666666;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.degree-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 2rem;
    text-align: justify;
}

.study-highlights {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.highlight-item {
    background: rgba(102, 102, 102, 0.1);
    color: #666666;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(102, 102, 102, 0.2);
}

/* Different badge colors for project status */
.planning-badge {
    background: linear-gradient(45deg, #2563eb, #3b82f6) !important;
}

.coming-soon-badge {
    background: linear-gradient(45deg, #059669, #10b981) !important;
}

/* Action Buttons for Academic Cards */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn-primary-academic {
    background: linear-gradient(45deg, #404040, #666666);
    color: var(--forest-green);
    border: none;
    padding: 0.8rem 1.8rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-secondary-academic {
    background: transparent;
    color: #666;
    border: 2px solid #666;
    padding: 0.8rem 1.8rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-primary-academic:hover {
    background: linear-gradient(45deg, #333, #555);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-secondary-academic:hover {
    background: #666;
    color: var(--forest-green);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Academic Portfolio Section */
.academic-portfolio {
    max-width: 1100px;
    margin: 0 auto;
}

.portfolio-title {
    font-family: 'Didot LP Display', serif;
    font-size: 2rem;
    text-align: center;
    color: #666666;
    margin-bottom: 3rem;
    position: relative;
}

.portfolio-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #777777, #999999);
}

/* Research Grid - Using Current Studies Card Style */
.research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

/* Research cards inherit current-studies-featured styling */
.research-card {
    /* All styling inherited from .current-studies-featured */
    position: relative;
}

/* Apply NAV gradient colors to research cards */
.research-grid .research-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(74, 90, 63, 0.15) 0%, rgba(107, 122, 93, 0.12) 100%);
    border: 1px solid rgba(74, 90, 63, 0.3);
    box-shadow: 0 20px 60px rgba(74, 90, 63, 0.2);
}

.research-grid .research-card:nth-child(1)::before {
    background: linear-gradient(90deg, var(--forest-green), var(--moss-green));
}

.research-grid .research-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.15) 0%, rgba(109, 76, 61, 0.12) 100%);
    border: 1px solid rgba(138, 155, 124, 0.3);
    box-shadow: 0 20px 60px rgba(138, 155, 124, 0.2);
}

.research-grid .research-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--sage-green), var(--warm-brown));
}

.research-grid .research-card:nth-child(3) {
    background: linear-gradient(135deg, rgba(125, 95, 111, 0.15) 0%, rgba(93, 58, 79, 0.12) 100%);
    border: 1px solid rgba(125, 95, 111, 0.3);
    box-shadow: 0 20px 60px rgba(125, 95, 111, 0.2);
}

.research-grid .research-card:nth-child(3)::before {
    background: linear-gradient(90deg, var(--muted-purple), var(--deep-burgundy));
}

.research-card.featured {
    transform: perspective(1000px) rotateY(-2deg) rotateX(3deg);
}

/* Enhanced article meta styling for research cards */
.research-card .article-meta .category {
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.research-card .article-meta .date {
    color: #666;
    font-weight: 500;
    font-size: 0.8rem;
}

.research-card .research-tags {
    margin-top: 1.5rem;
}

.research-card .research-tags span {
    background: #f8f9fa;
    color: #333;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    border: 1px solid #e9ecef;
}

/* Experience Section */
.experience {
    padding: 50px 0;
    background: transparent;
}

.experience h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #666666, #888888);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    width: 15px;
    height: 15px;
    background: #666666;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.year {
    flex: 0 0 120px;
    font-weight: bold;
    color: #666666;
    font-size: 1.1rem;
    text-align: center;
    padding: 1rem;
}

.content {
    flex: 1;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 0 2rem;
}

.content h3 {
    color: #000;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.content p {
    color: #000;
    line-height: 1.6;
}

/* Footer */
footer {
    background: transparent;
    color: var(--forest-green);
    text-align: center;
    padding: 1.5rem 2rem 1rem 2rem;
    position: relative;
    overflow: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}

/* Block grain effect in footer */
footer::after {
    content: none;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--cream),
        var(--sage-green),
        var(--cream),
        transparent);
    z-index: 1;
}

footer > p {
    font-family: "Gill Sans", Verdana, sans-serif;
    letter-spacing: 1px;
    font-size: 0.95rem;
    color: var(--cream);
    position: relative;
    z-index: 1;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
}

.footer-link {
    color: var(--forest-green);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: "Gill Sans", Verdana, sans-serif;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 3px;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--forest-green);
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: var(--moss-green);
}

.footer-link:hover::after {
    width: 100%;
}

.footer-separator {
    color: rgba(232, 224, 213, 0.4);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    footer {
        padding: 2.5rem 0 1.5rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-separator {
        display: none;
    }
}

/* ========================================== */
/* LEGAL PAGE STYLES */
/* ========================================== */

.legal-page {
    min-height: 100vh;
    background: linear-gradient(135deg, 
        var(--cream) 0%, 
        var(--light-beige) 30%,
        var(--sage-green) 100%);
    padding: 6rem 2rem 4rem;
    position: relative;
}

.legal-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(180deg,
        rgba(74, 90, 63, 0.08) 0%,
        transparent 100%);
    pointer-events: none;
}

.legal-container {
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 4rem 3.5rem;
    border-radius: 20px;
    box-shadow: 
        0 20px 60px rgba(74, 90, 63, 0.15),
        0 0 0 1px rgba(138, 155, 124, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
}

.legal-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--forest-green),
        var(--moss-green),
        var(--sage-green),
        var(--warm-brown),
        var(--muted-purple));
    border-radius: 20px 20px 0 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--forest-green);
    text-decoration: none;
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.back-link:hover {
    color: var(--warm-brown);
    transform: translateX(-5px);
}

.legal-container h1 {
    font-family: Times, "Times New Roman", Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #000;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    font-weight: 400;
    line-height: 1.2;
    background: linear-gradient(135deg,
        var(--forest-green) 0%,
        var(--warm-brown) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.last-updated {
    color: var(--moss-green);
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 0.9rem;
    margin-bottom: 3rem;
    font-style: italic;
    letter-spacing: 0.5px;
}

.legal-section {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(138, 155, 124, 0.2);
}

.legal-section:last-of-type {
    border-bottom: none;
}

.legal-section h2 {
    font-family: Times, "Times New Roman", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--forest-green);
    margin-bottom: 1.2rem;
    letter-spacing: 0.01em;
    font-weight: 400;
    position: relative;
    padding-left: 1.5rem;
}

.legal-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg,
        var(--forest-green),
        var(--sage-green));
    border-radius: 2px;
}

.legal-section p {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
}

.legal-section ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.legal-section li {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 0.5rem;
}

.legal-section li::marker {
    color: var(--sage-green);
}

.legal-section li strong {
    color: var(--forest-green);
    font-weight: 600;
}

.legal-section ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.legal-section ul ul li {
    font-size: 1rem;
}

.legal-footer {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(138, 155, 124, 0.3);
    text-align: center;
}

.legal-footer p {
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.legal-footer p strong {
    color: var(--forest-green);
}

.legal-footer .cta-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg,
        var(--forest-green),
        var(--moss-green));
    color: white;
    text-decoration: none;
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(74, 90, 63, 0.3);
}

.legal-footer .cta-button:hover {
    background: linear-gradient(135deg,
        var(--warm-brown),
        var(--muted-purple));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(74, 90, 63, 0.4);
}

/* Contact Form Section */
.contact-form-section {
    background: linear-gradient(135deg,
        rgba(138, 155, 124, 0.05) 0%,
        rgba(232, 224, 213, 0.05) 100%);
    padding: 3rem;
    border-radius: 15px;
    margin-top: 3rem;
    border: 1px solid rgba(138, 155, 124, 0.2);
}

.contact-form-section h2 {
    font-family: Times, "Times New Roman", Georgia, serif;
    font-size: 2rem;
    color: var(--forest-green);
    margin-bottom: 1rem;
    text-align: center;
}

.contact-form-section p {
    text-align: center;
    color: var(--moss-green);
    margin-bottom: 2rem;
    font-family: "Gill Sans", Verdana, sans-serif;
}

.licensing-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 0.95rem;
    color: var(--forest-green);
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-family: Georgia, serif;
    font-size: 1rem;
    border: 2px solid rgba(138, 155, 124, 0.3);
    border-radius: 8px;
    background: white;
    transition: all 0.3s ease;
    color: #333;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 90, 63, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(232, 224, 213, 0.9);
    color: #2a2520;
    border: none;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.form-submit:hover {
    background: #e8e0d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.form-note {
    font-size: 0.85rem;
    color: var(--moss-green);
    font-style: italic;
    margin-top: 1rem;
    text-align: center;
}

/* Legal Page Responsive */
@media (max-width: 768px) {
    .legal-page {
        padding: 3rem 1rem 2rem;
    }
    
    .legal-container {
        padding: 2.5rem 1.8rem;
    }
    
    .legal-container h1 {
        font-size: 2rem;
    }
    
    .legal-section h2 {
        font-size: 1.5rem;
        padding-left: 1rem;
    }
    
    .legal-section p,
    .legal-section li {
        font-size: 1rem;
    }
    
    .legal-section ul {
        margin-left: 1.5rem;
    }
    
    .contact-form-section {
        padding: 2rem 1.5rem;
    }
}

/* Responsive Design */
/* Tablet Responsive - 2 column grid for research cards */
@media (max-width: 1024px) and (min-width: 769px) {
    .research-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    /* About Section Responsive */
    .journey-timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }
    
    .timeline-narrative {
        gap: 1.5rem;
    }
    
    .journey-chapter {
        padding: 1.5rem;
        min-height: 200px;
        border-radius: 12px;
        margin-bottom: 0;
    }
    
    .chapter-header-enhanced {
        margin-bottom: 1rem;
        gap: 0.6rem;
    }
    
    .chapter-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }
    
    .journey-quote {
        padding: 3rem 2rem;
    }
    
    .lead-quote {
        font-size: 1.3rem;
    }
    
    .quote-mark {
        font-size: 6rem;
        top: -1rem;
        left: 1rem;
    }
    
    .chapter-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .chapter-number {
        font-size: 2rem;
    }
    
    .journey-highlights {
        justify-content: center;
    }
    
    .achievement-stats {
        justify-content: center;
    }
    
    .experience-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }
    
    /* Academic Section Responsive */
    .current-studies-featured {
        padding: 2.5rem 2rem;
    }
    
    .current-studies-featured h3 {
        font-size: 1.8rem;
    }
    
    .degree-description {
        font-size: 1rem;
        text-align: left;
    }
    
    .research-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .research-card {
        padding: 2rem;
    }
    
    .study-highlights {
        justify-content: center;
    }
    
    .academic-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: column !important;
    }
    
    .timeline-item::before {
        left: 20px;
        transform: translateX(-50%);
    }
    
    .year {
        flex: none;
        text-align: left;
        margin-left: 40px;
    }
    
    .content {
        margin: 0 0 0 40px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    nav {
        padding: 1rem;
    }
    
    .logo .tagline {
        display: none;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
/* ========== RESPONSIVE MAGIC OPTIMIZATIONS ========== */
@media (max-width: 768px) {
    /* Reduce floating elements on mobile */
    .floating-note, .floating-academia {
        font-size: 1.5rem;
        opacity: 0.2;
    }
    
    /* Simplify 3D effects on mobile */
    .tilt-3d:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 15px 30px rgba(139, 69, 19, 0.2);
    }
    
    /* Optimize cursor effects for touch */
    .cursor-glow, .cursor-trail {
        display: none;
    }
    
    /* Enhance mobile portfolio cards */
    .portfolio-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 40px rgba(139, 69, 19, 0.25);
    }
    
    /* Mobile research cards */
    .research-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 25px 50px rgba(139, 69, 19, 0.2);
    }
    
    /* Reduce animation intensity on mobile */
    .floating-note, .floating-academia {
        animation-duration: 30s;
    }
}

/* ========== PERFORMANCE OPTIMIZATIONS ========== */
.portfolio-card, .research-card, .journey-chapter {
    will-change: transform, box-shadow;
}

/* ========== ACCESSIBILITY FEATURES ========== */
@media (prefers-reduced-motion: reduce) {
    .portfolio-card, .research-card {
        transition-duration: 0.1s;
    }
    
    .cursor-glow, .cursor-trail {
        display: none;
    }
}

/* ========== RESPONSIVE HERO PROPORTIONS ========== */
@media (max-width: 768px) {
    .hero {
        padding: 0;
        margin-top: 0;
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 0;
        margin-top: 0;
        min-height: 100vh;
    }
}

@media (min-width: 1200px) {
    .hero {
        padding: 0;
        margin-top: 0;
        min-height: 100vh;
    }
}

/* ========== ACADEMIC SECTION REDESIGNED ========== */

.academic-section-redesigned {
    padding: 2.5rem 0; /* Remove side padding to allow container to control width */
    background: transparent;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Add semi-transparent background to academic container */
.academic-section-redesigned .container {
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent creamy white background */
    padding: 3rem;
    border-radius: 20px;
    position: relative;
    z-index: 10;
    width: 1200px; /* Fixed width instead of max-width */
    max-width: calc(100vw - 320px); /* Maximum width accounting for navbar (160px) and margins */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 
                0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Header */
.academic-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.academic-main-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem); /* Further reduced from 6vw/6rem */
    line-height: 1;
    margin: 2rem 0 1.5rem 0;
    font-weight: 400;
}

.academic-main-title .title-line {
    display: block;
    font-size: 0.35em;
    letter-spacing: 0.15em;
    color: var(--forest-green);
    font-weight: 500;
    margin-bottom: 0.2em;
}

.academic-main-title .title-line-large {
    display: block;
    font-size: 2em;
    letter-spacing: 0.05em;
    color: #2c2c2c;
    font-weight: 300;
}

.academic-subtitle {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-green);
    font-weight: 500;
    margin-top: 1rem;
}

/* Featured Current Studies Card - Creative Highlight */
.academic-featured-card {
    width: 100%; /* Take full container width */
    max-width: 1100px;
    margin: 0 auto 5rem auto;
    background: linear-gradient(135deg, rgba(74, 90, 63, 0.08) 0%, rgba(138, 155, 124, 0.06) 100%);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(74, 90, 63, 0.12);
    border-left: 5px solid var(--forest-green);
}

.featured-badge {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    display: inline-block;
    margin-bottom: 2rem;
    box-shadow: 0 6px 20px rgba(74, 90, 63, 0.3);
}

.featured-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

.featured-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
}

.featured-description {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin: 0;
}

.featured-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.featured-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.highlight-tag {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.7rem 1.2rem;
    background: white;
    color: var(--forest-green);
    border-radius: 10px;
    border-left: 3px solid var(--sage-green);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.highlight-tag:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 16px rgba(74, 90, 63, 0.15);
}

.featured-timeline {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.timeline-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.timeline-label {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--moss-green);
}

.timeline-value {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--forest-green);
    line-height: 1;
}

/* Research Section Title */
.research-section-title {
    max-width: 800px;
    margin: 0 auto 3rem auto;
    text-align: center;
}

.research-section-title h3 {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 1rem 0;
}

.title-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--forest-green), var(--sage-green));
    margin: 0 auto;
    border-radius: 2px;
}

/* Research Cards Grid */
.academic-research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
    width: 100%; /* Ensure grid takes full container width */
}

.academic-card-new {
    background: white;
    border-radius: 16px;
    padding: 1.75rem; /* Reduced from 2.5rem */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid transparent;
    width: 100%; /* Card takes full grid cell width */
}

.academic-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transition: all 0.4s ease;
}

.academic-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Card Colors - Using botanical palette already applied */
.card-articles::before {
    background: linear-gradient(90deg, var(--forest-green), var(--moss-green));
}

.card-articles:hover {
    box-shadow: 0 20px 60px rgba(74, 90, 63, 0.25);
}

.card-projects::before {
    background: linear-gradient(90deg, var(--sage-green), var(--warm-brown));
}

.card-projects:hover {
    box-shadow: 0 20px 60px rgba(138, 155, 124, 0.25);
}

.card-publications::before {
    background: linear-gradient(90deg, var(--muted-purple), var(--deep-burgundy));
}

.card-publications:hover {
    box-shadow: 0 20px 60px rgba(125, 95, 111, 0.25);
}

/* Status Badges - Creative Variation */
.card-status-badge {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.6rem; /* Reduced from 0.65rem */
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: white;
    padding: 0.4rem 0.8rem; /* Reduced from 0.5rem 1rem */
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-progress {
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
}

.badge-planning {
    background: linear-gradient(135deg, var(--sage-green), var(--warm-brown));
}

.badge-soon {
    background: linear-gradient(135deg, var(--muted-purple), var(--deep-burgundy));
}

/* Card Elements */
.academic-card-new .card-header {
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 1rem; /* Reduced from 1.5rem */
}

.academic-card-new .card-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.25rem; /* Reduced from 1.5rem */
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.academic-card-new .card-duration {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem; /* Reduced from 0.8rem */
    font-weight: 500;
    color: var(--moss-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.academic-card-new .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reduced from 1.5rem */
}

.academic-card-new .card-description {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9rem; /* Reduced from 1rem */
    line-height: 1.6; /* Reduced from 1.7 */
    color: #4a4a4a;
    margin: 0;
}

/* Card Tags */
.academic-card-new .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem; /* Reduced from 0.6rem */
}

.academic-card-new .card-tags .tag {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.65rem; /* Reduced from 0.7rem */
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.8rem; /* Reduced from 0.5rem 1rem */
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.12), rgba(107, 122, 93, 0.08));
    color: var(--forest-green);
    border-radius: 20px;
    border: 1px solid rgba(138, 155, 124, 0.2);
    transition: all 0.3s ease;
}

.academic-card-new .card-tags .tag:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.18), rgba(107, 122, 93, 0.12));
    transform: translateY(-2px);
}

/* Action Buttons - Academic Style */
.card-actions {
    display: flex;
    gap: 0.75rem; /* Reduced from 1rem */
    margin-top: 0.5rem;
}

.btn-academic-primary,
.btn-academic-secondary {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem; /* Reduced from 0.8rem */
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem; /* Reduced from 0.8rem 1.5rem */
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-academic-primary {
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    color: white;
    box-shadow: 0 4px 12px rgba(74, 90, 63, 0.3);
}

.btn-academic-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 90, 63, 0.4);
}

.btn-academic-secondary {
    background: white;
    color: var(--forest-green);
    border: 2px solid var(--sage-green);
}

.btn-academic-secondary:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.1), rgba(107, 122, 93, 0.05));
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .featured-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .academic-research-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .academic-section-redesigned {
        padding: 5rem 0;
    }
    
    .academic-featured-card {
        padding: 2rem;
    }
    
    .featured-title {
        font-size: 1.75rem;
    }
    
    .featured-timeline {
        flex-direction: column;
        gap: 1rem;
    }
    
    .academic-card-new {
        padding: 2rem;
    }
    
    .card-actions {
        flex-direction: column;
    }
}


/* ========== ARTICLES & THOUGHTS SECTION REDESIGNED ========== */

.articles-thoughts-redesigned {
    padding: 0 calc(160px + 4rem) 2.5rem calc(160px + 4rem);
    background: transparent;
    position: relative;
    overflow: visible; /* Change to visible so it doesn't cut off the herobottom image */
    margin-top: 0; /* No negative margin - section starts right after herobottom */
    padding-top: 0; /* Remove top padding */
}

/* Add semi-transparent background to articles container */
.articles-thoughts-redesigned .container {
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent creamy white background */
    padding: 3rem;
    border-radius: 20px;
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 
                0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Botanical Animation Keyframes */
@keyframes botanical-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes botanical-sway {
    0%, 100% {
        transform: translateX(0px) rotate(0deg);
    }
    25% {
        transform: translateX(-3px) rotate(-0.5deg);
    }
    75% {
        transform: translateX(3px) rotate(0.5deg);
    }
}

@keyframes botanical-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(107, 122, 93, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(107, 122, 93, 0.5);
    }
}

@keyframes botanical-grow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes leaf-rustle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: rotate(5deg) scale(1.1);
        opacity: 0.8;
    }
}

/* Section Header */
.articles-header {
    text-align: center;
    margin-bottom: 5rem;
    margin-top: 0; /* Remove top margin */
    padding-top: 0; /* Remove top padding */
    position: relative;
}

.articles-main-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem); /* Further reduced from 6vw/6rem */
    line-height: 1.2;
    margin: 2rem 0 1.5rem 0; /* Fixed: removed massive negative margin */
    font-weight: 400;
}

.articles-main-title .title-line {
    display: block;
    font-size: 0.35em;
    letter-spacing: 0.15em;
    color: var(--forest-green);
    font-weight: 500;
    margin-bottom: 0.3em;
}

.articles-main-title .title-line-large {
    display: block;
    font-size: 1.4em; /* Reduced from 2em to prevent overflow */
    letter-spacing: 0.05em;
    color: #2c2c2c;
    font-weight: 300;
}

.articles-subtitle {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-green);
    font-weight: 500;
    margin-top: 1rem;
}

/* Featured Article Card with Botanical Float Animation */
.featured-article-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 4rem;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--forest-green), var(--moss-green), var(--sage-green)) 1;
}

.botanical-float {
    animation: botanical-float 6s ease-in-out infinite;
}

.featured-article-image {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.featured-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.featured-article-card:hover .featured-article-image img {
    transform: scale(1.08);
}

.botanical-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 90, 63, 0.3) 0%, rgba(138, 155, 124, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.featured-article-card:hover .botanical-overlay {
    opacity: 1;
}

.featured-article-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-badge-featured {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(74, 90, 63, 0.3);
    animation: botanical-pulse 3s ease-in-out infinite;
}

.article-meta-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.article-category {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(232, 224, 213, 0.15);
    color: #e8e0d5;
    border: 1px solid rgba(232, 224, 213, 0.3);
}

.category-education {
    background: rgba(74, 90, 63, 0.15);
    color: var(--forest-green);
    border-color: var(--moss-green);
}

.category-creativity {
    background: rgba(138, 155, 124, 0.15);
    color: var(--sage-green);
    border-color: var(--sage-green);
}

.category-performance {
    background: rgba(109, 76, 61, 0.15);
    color: var(--warm-brown);
    border-color: var(--warm-brown);
}

.category-learning {
    background: rgba(107, 122, 93, 0.15);
    color: var(--moss-green);
    border-color: var(--moss-green);
}

.article-date,
.article-read-time,
.read-time {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.featured-article-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.featured-article-excerpt {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin: 0 0 2rem 0;
}

/* Botanical Tags with Animation */
.article-tags-botanical {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.tag-botanical {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.12), rgba(107, 122, 93, 0.08));
    color: var(--forest-green);
    border-radius: 20px;
    border: 1px solid rgba(138, 155, 124, 0.25);
    transition: all 0.3s ease;
    position: relative;
}


.tag-botanical:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.2), rgba(107, 122, 93, 0.15));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 122, 93, 0.2);
}

/* Botanical Buttons */
.btn-article-primary {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    color: white;
    box-shadow: 0 6px 20px rgba(74, 90, 63, 0.3);
    transition: all 0.3s ease;
    align-self: flex-start;
}

.botanical-grow {
    animation: botanical-grow 4s ease-in-out infinite;
}

.btn-article-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(74, 90, 63, 0.4);
}

/* Articles Grid */
.articles-grid-redesigned {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

/* Article Cards with Botanical Sway */
.article-card-new {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-top: 3px solid transparent;
}

.article-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--forest-green), var(--sage-green));
    transition: all 0.4s ease;
}

.botanical-sway {
    animation: botanical-sway 8s ease-in-out infinite;
}

.article-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(74, 90, 63, 0.15);
}

.article-card-new:hover::before {
    height: 5px;
}

.article-card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.article-card-new:hover .article-card-image img {
    transform: scale(1.1);
}

/* Botanical Leaf Accent */
.botanical-leaf-accent {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--sage-green), var(--moss-green));
    border-radius: 0 0 16px 0;
    opacity: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

.article-card-new:hover .botanical-leaf-accent {
    opacity: 0.9;
    bottom: 0;
    right: 0;
}

.article-card-content {
    padding: 2rem;
}

.article-card-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 1rem 0;
    line-height: 1.3;
}

.article-card-excerpt {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0 0 1.5rem 0;
}

.article-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-article-secondary {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    border: 2px solid var(--sage-green);
    cursor: pointer;
    background: white;
    color: var(--forest-green);
    transition: all 0.3s ease;
}

.botanical-pulse:hover {
    animation: botanical-pulse 1.5s ease-in-out infinite;
}

.btn-article-secondary:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.15), rgba(107, 122, 93, 0.1));
    transform: translateY(-2px);
    border-color: var(--moss-green);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .featured-article-card {
        grid-template-columns: 1fr;
    }
    
    .featured-article-image {
        height: 400px;
    }
    
    .articles-grid-redesigned {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .articles-thoughts-redesigned {
        padding: 5rem 0;
    }
    
    .featured-article-content {
        padding: 2rem;
    }
    
    .featured-article-title {
        font-size: 1.75rem;
    }
    
    .featured-article-image {
        height: 300px;
    }
    
    .article-card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}


/* ========== CONTACT SECTION REDESIGNED ========== */

.contact-section-redesigned {
    padding: 2.5rem 0; /* Remove side padding to allow container to control width */
    position: relative;
    display: flex;
    justify-content: center;
}

/* Add semi-transparent background to contact container */
.contact-section-redesigned .container {
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent creamy white background */
    padding: 3rem;
    border-radius: 20px;
    position: relative;
    z-index: 10;
    width: 1200px; /* Fixed width instead of max-width */
    max-width: calc(100vw - 320px); /* Maximum width accounting for navbar (160px) and margins */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 
                0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Section Header */

.contact-header {
    text-align: center;
    position: relative;
    margin-bottom: 5rem;
    z-index: 1;
}

.contact-main-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem); /* Further reduced from 6vw/6rem */
    line-height: 1;
    margin: 2rem 0 1.5rem 0;
    font-weight: 400;
}

.contact-main-title .title-line {
    display: block;
    font-size: 0.35em;
    letter-spacing: 0.15em;
    color: var(--forest-green);
    font-weight: 500;
    margin-bottom: 0.2em;
}

.contact-main-title .title-line-large {
    display: block;
    font-size: 2em;
    letter-spacing: 0.05em;
    color: #2c2c2c;
    font-weight: 300;
}

.contact-subtitle {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-green);
    font-weight: 500;
    margin-top: 1rem;
}

/* Contact Content Centered Layout */
.contact-content-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Contact Content Grid (Legacy - kept for reference) */
.contact-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Collaboration Card */
.collaboration-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 50px rgba(74, 90, 63, 0.12);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--forest-green), var(--sage-green)) 1;
}

.collaboration-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(138, 155, 124, 0.2);
}

.collaboration-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.collab-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.08), rgba(107, 122, 93, 0.05));
    border-radius: 12px;
    border-left: 3px solid var(--sage-green);
    transition: all 0.3s ease;
}

.collab-item:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.15), rgba(107, 122, 93, 0.1));
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(74, 90, 63, 0.15);
}

.collab-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.collab-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1rem;
    color: #2c2c2c;
    font-weight: 500;
}

/* Contact CTA Card - Redesigned Hub */
.contact-cta-card {
    background: linear-gradient(135deg, var(--cream) 0%, var(--light-beige) 100%);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(74, 90, 63, 0.15);
    border: 2px solid var(--sage-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    max-width: 90%;
    transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
    overflow: visible;
}

.contact-content-centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cta-content {
    text-align: center;
    width: 400px;
    position: relative;
    z-index: 2;
}

.cta-title {
    font-family: Times, Georgia, serif;
    font-size: 2.2em;
    color: var(--forest-green);
    margin-bottom: 20px;
    font-weight: 700;
}

.cta-description {
    font-family: Georgia, serif;
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--warm-brown);
    margin-bottom: 35px;
}

.cta-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--moss-green) 100%);
    color: var(--cream);
    padding: 20px 45px;
    border-radius: 4px;
    font-size: 1.15em;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(74, 90, 63, 0.3);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
}

.cta-contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(74, 90, 63, 0.4);
    background: linear-gradient(135deg, var(--warm-brown), var(--muted-purple));
}

.cta-contact-button:active {
    transform: translateY(-1px);
}

.cta-button-icon {
    font-size: 1.3em;
}

.cta-divider {
    margin: 35px 0 25px;
    position: relative;
    text-align: center;
}

.cta-divider::before,
.cta-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--sage-green), transparent);
}

.cta-divider::before {
    left: 0;
}

.cta-divider::after {
    right: 0;
}

.cta-divider span {
    font-family: Georgia, serif;
    font-size: 0.9em;
    color: var(--moss-green);
    font-style: italic;
    background: linear-gradient(135deg, var(--cream) 0%, var(--light-beige) 100%);
    padding: 0 15px;
}

.social-links-hub {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.social-hub-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--sage-green);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 85px;
}

.social-hub-link:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(74, 90, 63, 0.2);
    border-color: var(--forest-green);
}

.social-hub-icon {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--forest-green);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.social-hub-label {
    font-size: 0.85em;
    color: var(--moss-green);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.response-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(138, 155, 124, 0.15);
    border-radius: 8px;
    margin-top: 20px;
}

.response-icon {
    font-size: 1.1em;
}

.response-text {
    font-size: 0.9em;
    color: var(--moss-green);
    font-family: Georgia, serif;
    font-style: italic;
}

/* Old Contact Form Card Styles - Kept for Legacy/Other Uses */
.contact-form-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 50px rgba(74, 90, 63, 0.12);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--moss-green), var(--warm-brown)) 1;
}

.form-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(138, 155, 124, 0.2);
}

/* Form Styles */
.contact-form-redesigned {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--forest-green);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    padding: 1rem;
    border: 2px solid rgba(138, 155, 124, 0.3);
    border-radius: 10px;
    background: white;
    color: #2c2c2c;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(138, 155, 124, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.btn-contact-submit {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1.2rem 3rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    color: white;
    box-shadow: 0 8px 25px rgba(74, 90, 63, 0.3);
    transition: all 0.3s ease;
    align-self: flex-start;
}

.btn-contact-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(74, 90, 63, 0.4);
    background: linear-gradient(135deg, var(--moss-green), var(--sage-green));
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-content-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .contact-content-centered {
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .contact-section-redesigned {
        padding: 5rem 0;
    }
    
    .contact-content-centered {
        padding: 0 1rem;
    }
    
    .collaboration-card,
    .contact-cta-card {
        padding: 2rem;
    }
    
    .collaboration-title,
    .cta-title {
        font-size: 1.5rem;
    }
    
    .cta-description {
        font-size: 1rem;
    }
    
    .cta-contact-button {
        padding: 18px 35px;
        font-size: 1.05em;
    }
    
    .social-links-hub {
        flex-direction: column;
        gap: 10px;
    }
    
    .social-hub-link {
        flex-direction: row;
        justify-content: center;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .cta-divider::before,
    .cta-divider::after {
        width: 35%;
    }
}


/* ========================================== */
/* COPYRIGHT PROTECTION STYLES */
/* ========================================== */

/* Disable text selection on images */
img,
.gallery-img,
.gallery-item img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
}

/* Copyright Notice Popup */
#copyright-notice {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(42, 37, 32, 0.25);
    backdrop-filter: blur(30px);
    padding: 2.5rem 3rem;
    border-radius: 20px;
    border: 1px solid rgba(232, 224, 213, 0.15);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(232, 224, 213, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

#copyright-notice.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.copyright-notice-content {
    text-align: center;
    color: white;
}

.copyright-notice-content h3 {
    font-family: Times, "Times New Roman", Georgia, serif;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    color: var(--cream);
    letter-spacing: 0.5px;
}

.copyright-notice-content p {
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--light-beige);
    letter-spacing: 0.3px;
}

.copyright-notice-content a {
    color: var(--cream);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.copyright-notice-content a:hover {
    color: white;
}

/* Watermark on hover enhancement */
.gallery-item:hover .image-watermark {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

/* ========== TERMS CONSENT POPUP ========== */
.terms-consent-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2);
    z-index: 9999;
    transform: translateY(150%);
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.terms-consent-popup.show {
    transform: translateY(0);
}

.terms-consent-content h3 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5rem;
    color: #e8e0d5;
    margin: 0 0 0.75rem 0;
    font-weight: 700;
    opacity: 1 !important;
}

.terms-consent-content p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.95rem;
    color: rgba(232, 224, 213, 0.95);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    opacity: 1 !important;
}

.terms-consent-content a {
    color: #e8e0d5;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.terms-consent-content a:hover {
    color: #fff;
}

.terms-consent-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.terms-accept-btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    background: rgba(232, 224, 213, 0.9);
    color: #2a2520;
    border: none;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-accept-btn:hover {
    background: #e8e0d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.terms-learn-more {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    color: rgba(232, 224, 213, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-learn-more:hover {
    color: #e8e0d5;
}

@media (max-width: 480px) {
    .terms-consent-popup {
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto;
    }
    
    .terms-consent-buttons {
        flex-direction: column;
    }
    
    .terms-accept-btn {
        width: 100%;
    }
}

/* Enhanced Hover Watermark */
.image-watermark-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.gallery-item:hover .image-watermark-hover {
    opacity: 1;
}

/* Mobile responsiveness for copyright notice */
@media (max-width: 768px) {
    #copyright-notice {
        width: 90%;
        max-width: 350px;
        padding: 2rem 1.5rem;
    }
    
    .copyright-notice-content h3 {
        font-size: 1.5rem;
    }
    
    .copyright-notice-content p {
        font-size: 0.9rem;
    }
    
    .image-watermark-hover {
        padding: 15px 20px;
        font-size: 0.85rem;
    }
}

/* ========== END COPYRIGHT PROTECTION ========== */


/* ========================================== */
/* ENHANCED PROTECTION FEATURES */
/* ========================================== */

/* Old Terms Modal CSS Removed - Now using side notification banner */

/* Protection Banner */
.protection-banner {
    background: linear-gradient(135deg, rgba(74, 90, 63, 0.12), rgba(107, 122, 93, 0.12));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 90, 63, 0.25);
    color: var(--forest-green);
    padding: 0.875rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(74, 90, 63, 0.08);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.protection-banner:hover {
    background: linear-gradient(135deg, rgba(74, 90, 63, 0.18), rgba(107, 122, 93, 0.18));
    border-color: rgba(74, 90, 63, 0.35);
    box-shadow: 0 4px 12px rgba(74, 90, 63, 0.12);
}

.banner-icon {
    font-size: 1.3rem;
    opacity: 0.85;
}

.banner-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--moss-green);
    letter-spacing: 0.3px;
}

.banner-link {
    color: var(--forest-green);
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    background: rgba(74, 90, 63, 0.1);
    border: 1px solid rgba(74, 90, 63, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.banner-link:hover {
    background: rgba(74, 90, 63, 0.18);
    border-color: var(--forest-green);
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(74, 90, 63, 0.15);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .protection-banner {
        padding: 1rem;
        text-align: center;
    }
    
    .banner-text {
        font-size: 0.85rem;
        width: 100%;
        text-align: center;
    }
}

/* ========== END ENHANCED PROTECTION ========== */


/* ========================================== */
/* CONTACT POPUP FORM */
/* ========================================== */

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 10500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Contact Popup */
.contact-popup {
    position: fixed;
    top: 50%;
    right: -500px;
    transform: translateY(-50%);
    width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    background: rgba(42, 37, 32, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(232, 224, 213, 0.2);
    z-index: 10501;
    overflow: hidden;
    transition: right 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.contact-popup.active {
    right: 20px;
}

/* Popup Header */
.popup-header {
    background: linear-gradient(135deg,
        #36253e 0%,
        #3a2b39 15%,
        #5b4f55 30%,
        #8d8384 50%,
        #a79f9c 70%,
        #c2bad4 85%,
        #d5cfc5 100%);
    backdrop-filter: blur(20px);
    padding: 2rem 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.popup-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    pointer-events: none;
}

.popup-header h3 {
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #e8e0d5;
    margin: 0;
    text-align: center;
    position: relative;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.popup-header p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    color: rgba(212, 201, 184, 0.9);
    text-align: center;
    margin: 0.5rem 0 0;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

/* Close Button */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.popup-close::before,
.popup-close::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background: white;
}

.popup-close::before {
    transform: rotate(45deg);
}

.popup-close::after {
    transform: rotate(-45deg);
}

/* Popup Body */
.popup-body {
    padding: 2rem;
    max-height: calc(90vh - 150px);
    overflow-y: auto;
}

.popup-body::-webkit-scrollbar {
    width: 6px;
}

.popup-body::-webkit-scrollbar-track {
    background: rgba(138, 155, 124, 0.1);
    border-radius: 10px;
}

.popup-body::-webkit-scrollbar-thumb {
    background: var(--sage-green);
    border-radius: 10px;
}

/* Popup Form */
.popup-form .form-group {
    margin-bottom: 1.3rem;
}

.popup-form label {
    display: block;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.95rem;
    color: rgba(212, 201, 184, 0.7);
    margin-bottom: 0.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

.popup-form input,
.popup-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    border: 2px solid rgba(212, 201, 184, 0.3);
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s ease;
    color: rgba(232, 224, 213, 0.9);
    box-sizing: border-box;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

.popup-form input:hover,
.popup-form textarea:hover {
    border-color: rgba(212, 201, 184, 0.5);
}

.popup-form input:focus,
.popup-form textarea:focus {
    outline: none;
    border-color: rgba(212, 201, 184, 0.7);
    box-shadow: 0 0 0 3px rgba(212, 201, 184, 0.1);
}

.popup-form input:focus::placeholder,
.popup-form textarea:focus::placeholder {
    color: rgba(212, 201, 184, 0.5);
    font-style: italic;
}

.popup-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 1.2rem 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--forest-green);
}

.checkbox-group label {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(212, 201, 184, 0.7);
    cursor: pointer;
    line-height: 1.5;
}

.checkbox-group label a {
    color: rgba(212, 201, 184, 0.9);
    text-decoration: underline;
}

.checkbox-group label a:hover {
    color: rgba(232, 224, 213, 1);
}

/* Submit Button */
.popup-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(232, 224, 213, 0.9);
    color: #2a2520;
    border: none;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.popup-submit:hover {
    background: #e8e0d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.popup-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Submit button for articles page */
.submit-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(232, 224, 213, 0.9);
    color: #2a2520;
    border: none;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-btn:hover {
    background: #e8e0d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Success Message */
.popup-success {
    display: none;
    padding: 1.5rem;
    background: rgba(74, 144, 63, 0.1);
    border: 2px solid rgba(74, 144, 63, 0.3);
    border-radius: 4px;
    text-align: center;
    margin-top: 1rem;
}

.popup-success.show {
    display: block;
    animation: slideDown 0.4s ease;
}

.popup-success h4 {
    font-family: Times, "Times New Roman", Georgia, serif;
    color: var(--forest-green);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.popup-success p {
    font-family: Georgia, serif;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

/* Contact Trigger Button (floating) */
.contact-trigger {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 150px;
    height: 150px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    z-index: 9997;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-trigger:hover {
    transform: scale(1.1);
    box-shadow: none;
}

.contact-trigger::before {
    content: '';
    width: 150px;
    height: 150px;
    background-image: url('images/background/contact.gif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.contact-trigger.active {
    transform: scale(0.9);
}

/* ================================
   TERMS NOTICE BANNER (Side Notification)
   ================================ */

.terms-notice {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    max-width: calc(100vw - 60px);
    background: linear-gradient(135deg,
        #36253e 0%,
        #3a2b39 15%,
        #5b4f55 30%,
        #8d8384 50%,
        #a79f9c 70%,
        #c2bad4 85%,
        #d5cfc5 100%);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 
        0 10px 40px rgba(138, 43, 226, 0.3),
        0 0 0 1px rgba(186, 85, 211, 0.2);
    z-index: 10003;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    opacity: 0;
    transform: translateX(400px);
}

.terms-notice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terms-notice-close:hover {
    color: var(--forest-green);
    transform: rotate(90deg);
}

.terms-notice-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.terms-notice-content {
    flex: 1;
    padding-right: 1.5rem;
}

.terms-notice-content h4 {
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 1.1rem;
    color: var(--forest-green);
    margin: 0 0 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.terms-notice-content p {
    font-family: Georgia, serif;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.terms-notice-link {
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 0.875rem;
    color: var(--moss-green);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.terms-notice-link:hover {
    color: var(--forest-green);
    gap: 0.5rem;
}

/* Mobile Responsive for Terms Notice */
@media (max-width: 768px) {
    .terms-notice {
        bottom: 20px;
        right: 20px;
        left: 20px;
        width: auto;
        max-width: none;
        padding: 1.25rem;
    }
    
    .terms-notice-icon {
        font-size: 1.5rem;
    }
    
    .terms-notice-content h4 {
        font-size: 1rem;
    }
    
    .terms-notice-content p {
        font-size: 0.85rem;
    }
}

/* ================================
   CINEMATIC FULLSCREEN NAVIGATION
   ================================ */

/* Hamburger Menu Toggle Button */
.menu-toggle {
    position: fixed;
    top: 30px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10002;
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px;
    transition: all 0.3s ease;
}

/* Show hamburger menu only on pages with cinematic nav */
.has-cinematic-nav .menu-toggle {
    display: flex;
}

/* Hide vertical nav on pages with cinematic nav */
.has-cinematic-nav .vertical-nav {
    display: none;
}

.menu-toggle:hover {
    transform: scale(1.1);
}

.menu-toggle-line {
    width: 30px;
    height: 2px;
    background: var(--forest-green);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-origin: center;
}

.menu-toggle.active .menu-toggle-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background: var(--cream);
}

.menu-toggle.active .menu-toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle.active .menu-toggle-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background: var(--cream);
}

/* Fullscreen Navigation Container */
.fullscreen-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
}

.fullscreen-nav.active {
    pointer-events: auto;
}

/* Animated Background */
.fullscreen-nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        #36253e 0%,
        #3a2b39 15%,
        #5b4f55 30%,
        #8d8384 50%,
        #a79f9c 70%,
        #c2bad4 85%,
        #d5cfc5 100%);
    backdrop-filter: blur(20px);
    clip-path: circle(0% at 100% 0%);
    transition: clip-path 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.fullscreen-nav.active .fullscreen-nav-bg {
    clip-path: circle(150% at 100% 0%);
}

/* Content Container */
.fullscreen-nav-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: visible;
    padding: 2rem;
}

.fullscreen-nav.active .fullscreen-nav-content {
    opacity: 1;
}

/* Cinematic Navigation */
.cinematic-nav {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    overflow: visible;
}

/* Navigation Rows */
.nav-row {
    margin-bottom: 1.5rem;
}

.cinematic-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.cinematic-nav-item {
    overflow: visible;
    flex: 1 1 auto;
    min-width: 250px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1 !important;
}

.cinematic-nav-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--cream);
    font-family: Times, "Times New Roman", Georgia, serif;
    position: relative;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1 !important;
    border: 1px solid rgba(232, 224, 213, 0.15);
    border-radius: 2px;
    background: rgba(232, 224, 213, 0.03);
    backdrop-filter: blur(10px);
}

/* Top row of nav link - number and title */
.nav-link-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.fullscreen-nav.active .cinematic-nav-link {
    opacity: 1;
}

.nav-number {
    font-family: "Gill Sans", Verdana, sans-serif;
    font-size: 1.2rem;
    color: var(--light-beige);
    opacity: 0.6;
    min-width: 50px;
    flex-shrink: 0;
}

.nav-label-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.nav-label {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1;
}

.nav-description {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    color: rgba(212, 201, 184, 0.9);
    opacity: 0.9;
    letter-spacing: -0.01em;
    font-weight: 300;
    line-height: 1.3;
}

.nav-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cream);
    transition: width 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.cinematic-nav-link:hover .nav-label::after {
    width: 100%;
}

.cinematic-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}


/* Navigation Footer */
.nav-footer {
    margin-top: 4rem;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease 0.5s;
}

.fullscreen-nav.active .nav-footer {
    opacity: 1;
    transform: translateY(0);
}

.nav-footer-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.nav-footer-link {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    color: rgba(212, 201, 184, 0.9);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
    line-height: 1.6;
    padding: 0.8rem 1.5rem;
    background: rgba(232, 224, 213, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(232, 224, 213, 0.15);
    border-radius: 2px;
    display: inline-block;
}

.nav-footer-link:hover {
    color: #e8e0d5;
    background: rgba(232, 224, 213, 0.08);
}

.nav-footer-tagline {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.95rem;
    color: rgba(232, 224, 213, 0.8);
    opacity: 0.9;
    font-style: italic;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

/* Decorative Circles */
.nav-decorative {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.nav-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: all 1s ease;
}

.fullscreen-nav.active .nav-circle {
    opacity: 1;
}

.nav-circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 10%;
    transition-delay: 0.3s;
}

.nav-circle-2 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    left: 15%;
    transition-delay: 0.5s;
}

.nav-circle-3 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 20%;
    transition-delay: 0.7s;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        top: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .menu-toggle-line {
        width: 25px;
    }
    
    .cinematic-nav {
        padding: 0 1rem;
    }
    
    .nav-row {
        margin-bottom: 2rem;
    }
    
    .cinematic-nav-list {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cinematic-nav-item {
        min-width: 100%;
    }
    
    .cinematic-nav-link {
        padding: 1.25rem;
        gap: 1rem;
    }
    
    .nav-label {
        font-size: 1.8rem;
    }
    
    .nav-description {
        font-size: 0.8rem;
    }
    
    .nav-number {
        font-size: 0.9rem;
        min-width: 40px;
    }
    
    .nav-footer {
        margin-top: 2rem;
    }
    
    .nav-footer-links {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .nav-footer-link {
        font-size: 0.85rem;
    }
    
    .nav-circle-1,
    .nav-circle-2,
    .nav-circle-3 {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .nav-label {
        font-size: 1.5rem;
    }
    
    .nav-description {
        font-size: 0.75rem;
    }
}

/* ========== RESPONSIVE BREAKPOINTS FOR CINEMATIC NAV ========== */
@media (max-width: 1200px) {
    .has-cinematic-nav .container,
    .has-cinematic-nav .hero-content,
    .has-cinematic-nav .articles-blog-container {
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    .has-cinematic-nav section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 768px) {
    .has-cinematic-nav .container,
    .has-cinematic-nav .hero-content,
    .has-cinematic-nav .articles-blog-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .has-cinematic-nav section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .article-page .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .has-cinematic-nav .container,
    .has-cinematic-nav .hero-content,
    .has-cinematic-nav .articles-blog-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .has-cinematic-nav section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .article-page .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-popup {
        width: 95vw;
        right: -100%;
    }
    
    .contact-popup.active {
        right: 2.5vw;
    }
    
    .popup-header h3 {
        font-size: 1.6rem;
    }
    
    .popup-body {
        padding: 1.5rem;
    }
    
    .contact-trigger {
        bottom: 20px;
        right: 20px;
        width: 80px;
        height: 80px;
    }
    
    .contact-trigger::before {
        width: 80px;
        height: 80px;
    }
}

/* ========== END CONTACT POPUP ========== */


/* ========== PORTFOLIO PAGE STYLES ========== */

.portfolio-page-content {
    margin-left: 160px; /* Account for fixed navbar */
    padding: 2rem 4rem;
    min-height: 100vh;
}

/* Back to Home Link (same as gallery) */
.portfolio-page-content .gallery-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--forest-green);
    text-decoration: none;
    margin-bottom: 2rem;
    padding: 0.8rem 2rem;
    border: 2px solid var(--forest-green);
    transition: all 0.3s ease;
}

.portfolio-page-content .gallery-back-link:hover {
    background: var(--forest-green);
    color: white;
    transform: translateX(-5px);
}

/* Page Header */
.portfolio-page-header {
    text-align: center;
    padding: 4rem 0 3rem 0;
    margin-bottom: 3rem;
}

.page-subtitle {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--moss-green);
    font-weight: 500;
    margin-bottom: 1rem;
}

.page-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    margin: 1rem 0;
    font-weight: 400;
}

.page-title .title-line {
    display: block;
    font-size: 0.35em;
    letter-spacing: 0.15em;
    color: var(--forest-green);
    font-weight: 500;
}

.page-title .title-line-large {
    display: block;
    font-size: 2em;
    letter-spacing: 0.05em;
    color: #2c2c2c;
    font-weight: 300;
}

.page-description {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-green);
    font-weight: 500;
    margin-top: 1rem;
}

/* Portfolio Details Container */
.portfolio-details-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* Detail Sections */
.portfolio-detail-section {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.portfolio-detail-section:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Color-coded sections */
.card-music-detail {
    border-left: 4px solid #6b7a5d;
}

.card-education-detail {
    border-left: 4px solid #8a9b7c;
}

.card-visual-detail {
    border-left: 4px solid #7d5f6f;
}

.card-tech-detail {
    border-left: 4px solid #6d4c3d;
}

/* Detail Header */
.detail-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.detail-category-badge {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, #2c2c2c, #4a4a4a);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1rem;
}

.detail-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0.5rem 0;
}

.detail-subtitle {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--moss-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Detail Content */
.detail-content {
    line-height: 1.8;
}

.detail-description {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 2rem;
}

.detail-section-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c2c2c;
    margin: 2rem 0 1rem 0;
}

.detail-list {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.detail-list li {
    margin-bottom: 0.75rem;
    position: relative;
}

.detail-list li::marker {
    color: var(--forest-green);
}

/* Detail Tags */
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.detail-tag {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.12), rgba(107, 122, 93, 0.08));
    color: var(--forest-green);
    border-radius: 20px;
    border: 1px solid rgba(138, 155, 124, 0.2);
    transition: all 0.3s ease;
}

.detail-tag:hover {
    background: linear-gradient(135deg, rgba(138, 155, 124, 0.18), rgba(107, 122, 93, 0.12));
    transform: translateY(-2px);
}

/* CTA Button */
.detail-cta-button {
    background: linear-gradient(135deg, var(--forest-green), var(--moss-green));
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(74, 90, 63, 0.3);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    margin-top: 2rem;
}

.detail-cta-button:hover {
    background: linear-gradient(135deg, var(--warm-brown), var(--muted-purple));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(74, 90, 63, 0.4);
}

/* Portfolio Page Footer */
.portfolio-page-footer {
    text-align: center;
    padding: 4rem 0 2rem 0;
}

.back-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, #2c2c2c, #4a4a4a);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-button:hover {
    background: linear-gradient(135deg, #4a4a4a, #2c2c2c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .portfolio-page-content {
        margin-left: 0;
        padding: 2rem 1.5rem;
    }

    .portfolio-detail-section {
        padding: 2rem 1.5rem;
    }

    .detail-title {
        font-size: 2rem;
    }

    .detail-list {
        margin-left: 1.5rem;
    }
}

/* ===============================================
   ARTICLES BLOG PAGE STYLES
   =============================================== */

/* Magazine-Style Two-Column Layout for Articles */
.articles-blog-container {
    display: flex;
    gap: 4rem;
    padding: 4rem 4rem;
    max-width: 1800px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Two equal columns */
.articles-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Left column with divider */
.articles-column.left {
    padding-right: 2rem;
    border-right: 1px solid rgba(107, 122, 93, 0.15);
}

/* Right column */
.articles-column.right {
    padding-left: 2rem;
}

/* Responsive - Stack on Mobile */
@media (max-width: 968px) {
    .articles-blog-container {
        flex-direction: column;
        gap: 4rem;
        padding: 4rem 2rem;
    }

    .articles-column.left {
        border-right: none;
        border-bottom: 1px solid rgba(107, 122, 93, 0.15);
        padding-right: 0;
        padding-bottom: 2rem;
    }

    .articles-column.right {
        padding-left: 0;
        padding-top: 2rem;
    }
}

.blog-article-card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid rgba(107, 122, 93, 0.2);
}

.blog-article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(107, 122, 93, 0.25);
    border-color: var(--forest-green);
}

.article-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-article-card:hover .article-image img {
    transform: scale(1.08);
}

.article-content {
    padding: 2rem;
}

.article-title {
    font-family: 'EB Garamond', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--forest-green);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--moss-green);
    margin-bottom: 1rem;
    font-family: "Gill Sans", Verdana, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.article-excerpt {
    font-size: 1rem;
    line-height: 1.7;
    color: #2c2c2c;
    margin-bottom: 1.5rem;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.article-tags .tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    background: rgba(107, 122, 93, 0.15);
    color: var(--forest-green);
    border-radius: 20px;
    font-family: "Gill Sans", Verdana, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
}

.article-read-more {
    display: inline-block;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: #2a2520;
    background: rgba(232, 224, 213, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    border: none;
}

.article-read-more::after {
    display: none;
}

.article-read-more:hover::after {
    display: none;
}

.article-read-more:hover {
    background: #e8e0d5;
    color: #2a2520;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.article-coming-soon {
    opacity: 0.7;
}

.article-coming-soon .article-content {
    filter: grayscale(0.3);
}

/* Responsive for Articles */
@media (max-width: 768px) {
    .articles-blog-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }
    
    .article-image {
        height: 220px;
    }
    
    .article-title {
        font-size: 1.4rem;
    }
}