/* Reset and Base Styles */
* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'short-films', sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: #c2c2c2;
    color: #333333;
    line-height: 1.6;
    overflow-x: hidden;  /* Prevents horizontal scroll */
}
html {
    overflow-x: hidden;  /* fixes the scroll issue */
}

/* Heading Fonts */
h1, h2, h3, h4, h5, h6 {
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 400;  /* Medium weight */
    font-style: normal;
}

/* Navigation Styles */
.navbar {
    position: sticky;
    top: 0;
    z-index: 7000;
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    gap: 30px;  /* Distance from logo */
}

/* Logo */
.nav-logo {
    z-index: 10;
}

.nav-logo img {
    height: 65px;
    width: auto;
}

/* Navigation Menus */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 400;  
    letter-spacing: 0.05em;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #fdd066;
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #b1a7b4;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    padding: 12px 20px;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    color: #cfccd0;
}

/* Dropdown submenu header */
.dropdown-submenu-header {
    padding: 20px 20px 8px 20px;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    pointer-events: none;
}

/* ===== MINIMAL NAV (for gallery pages) ===== */

/* Hide desktop nav links */
.minimal-nav .nav-menu {
    display: none !important;
}

/* Hide the logo */
.minimal-nav .nav-logo {
    display: none !important;
}

/* Make navbar transparent and overlay the hero */
.minimal-nav .navbar {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Show hamburger menu and position it ALL THE WAY to the right */
.minimal-nav .mobile-menu-toggle {
    display: flex !important;
    margin-left: auto;
    margin-right: 20px;
}

/* Container takes full width */
.minimal-nav .nav-container {
    justify-content: flex-end;
    max-width: 100%;
    padding-right: 0;
}

/* Mobile menu: half-screen on desktop, full-screen on mobile */
.minimal-nav .mobile-menu {
    width: 50%;
    right: 0;
    transform: translateX(100%); /* Start off-screen (CLOSED) */
    transition: transform 0.3s ease;
}

/* When menu is opened (JavaScript adds 'active' class) */
.minimal-nav .mobile-menu.active {
    transform: translateX(0); /* Slide into view */
}

/* Full screen on mobile (below 1024px) */
@media (max-width: 1024px) {
    .minimal-nav .mobile-menu {
        width: 100%;
    }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}


.mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background-color: #fdd066;
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* hamburger when menu is open */
.mobile-menu-toggle.active span {
    background-color: #ffffff;
}


/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #333333;
    transition: right 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 80px 0 20px 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.mobile-menu a {
    display: block;
    padding: 15px 25px;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.mobile-menu a:hover {
    background-color: rgba(161, 161, 161, 0.1);
}

/* Mobile Dropdown (GALLERIES level) */
.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-link {
    display: inline-block !important;
    width: calc(100% - 50px);
}

.mobile-dropdown-toggle {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-toggle {
    transform: rotate(45deg);
}

/* Mobile Submenu (Photography + Paintings level) */
.mobile-submenu {
    display: none;
    background-color: #333333;
    padding-left: 0;
}

.mobile-dropdown.active .mobile-submenu {
    display: block;
}


.mobile-submenu a {
    padding-left: 40px;
}


.mobile-nested-link {
    display: inline-block !important;
    width: calc(100% - 50px) !important;
    padding-left: 40px !important;
}

.mobile-nested-toggle {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
}

.mobile-dropdown-nested.active .mobile-nested-toggle {
    transform: rotate(45deg);
}

/* Mobile Nested Submenu (Editorial, Personal, Wedding) */
.mobile-nested-submenu {
    display: none;
    background-color: #333333;
    padding-left: 0;
}

.mobile-dropdown-nested.active .mobile-nested-submenu {
    display: block;
}

.mobile-nested-submenu a {
    padding-left: 60px !important;
}


/* ========================================
   NESTED DROPDOWN STYLES (Desktop)
   ======================================== */

/* Nested dropdown container */
.dropdown-nested {
    position: relative;
}

/* Photography header (clickable) */
.dropdown-nested-header {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    font-family: 'monotalic-narrow', sans-serif;  /* ADD THIS */
    font-size: 1.1rem;  /* ADD THIS to match nav links */
    font-weight: 300;  /* ADD THIS */
    letter-spacing: 0.05em;  /* ADD THIS */
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.dropdown-nested-header:hover {
    color: #cfccd0;
}

/* Nested submenu (Editorial, Personal, Wedding) */
.dropdown-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #e0c6e8;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Show nested submenu on hover */
.dropdown-nested:hover .dropdown-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.dropdown-submenu li {
    padding: 0;
}

.dropdown-submenu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.dropdown-submenu a:hover {
    color: #797979;
}

/* ========================================
   NESTED DROPDOWN STYLES (Mobile)
   ======================================== */

/* Mobile nested dropdown container */
.mobile-dropdown-nested {
    position: relative;
}

/* Photography header (clickable) */
.dropdown-nested-header {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    font-family: 'monotalic', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Toggle button for nested menu */
.mobile-nested-toggle {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #5061f8;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
}

.mobile-nested-toggle:hover {
    background: #fdd066;
    transform: scale(1.1);
}

.mobile-dropdown-nested.active .mobile-nested-toggle {
    background: #ff9ceb;
    transform: rotate(90deg);
}

.mobile-dropdown-nested.active .mobile-nested-toggle:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Nested submenu (Editorial, Personal, Wedding) */
.mobile-nested-submenu {
    display: none;
    background-color: #333333;
    padding-left: 0;
}

.mobile-dropdown-nested.active .mobile-nested-submenu {
    display: block;
}

.mobile-nested-submenu a {
    padding-left: 60px;  /* Extra indent for nested items */
}
/* Remove ANYTHING inside the button */
.mobile-dropdown-toggle * {
    all: unset !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Remove ALL pseudo-elements */
.mobile-dropdown-toggle::before,
.mobile-dropdown-toggle::after,
.mobile-dropdown-toggle::-webkit-inner-spin-button,
.mobile-dropdown-toggle::-webkit-outer-spin-button,
.mobile-dropdown-toggle::-webkit-search-cancel-button,
.mobile-dropdown-toggle::-webkit-search-decoration,
.mobile-dropdown-toggle::-webkit-search-results-button,
.mobile-dropdown-toggle::-webkit-search-results-decoration {
    display: none !important;
    content: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hover state */
.mobile-dropdown-toggle:hover {
    background: #fdd066;
    transform: scale(1.1);
}

/* Active state (dropdown open) */
.mobile-dropdown.active .mobile-dropdown-toggle {
    background: #ff9ceb;
    transform: rotate(180deg);
}

.mobile-dropdown.active .mobile-dropdown-toggle:hover {
    transform: rotate(180deg) scale(1.1);
}

/* Mobile Submenu */
.mobile-submenu {
    display: none; /* Hidden by default */
    background-color:#333333;
    padding-left: 0;
}

.mobile-dropdown.active .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    padding-left: 40px;  /* Indent submenu items */
}

/* Responsive - Mobile */
@media (max-width: 1024px) {
    .nav-container {
        padding: 15px 20px;
        justify-content: space-between;  /* Logo left, hamburger right */
    }

    .mobile-menu-toggle {
        display: flex;
        order: 3;  /* Pushes hamburger to the right */
    }

    .nav-menu {
        display: none;
    }

    .nav-logo {
        order: 1;  /* Keeps logo on the left */
    }
    
    .nav-logo img {
        height: 65px;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    text-align: center;
    padding: 60px 20px;
}

header h1 {
    font-family: 'tt-frantz-a', sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 3rem;
    color: #333333;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    color: #333333;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

/* Gallery Card Link (makes entire card clickable) */
.gallery-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Gallery Card Image Container */
.gallery-card-image {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-color: #b1a7b4;
    overflow: hidden;
}

/* Gallery Card Overlay */
.gallery-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    padding: 20px;
}

/* Hover effect - black overlay */
.gallery-card-link:hover .gallery-card-overlay {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Text inside cards */
.gallery-card-overlay h2 {
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 2.2rem;
    color: #ededed;
    letter-spacing: 0.05em;  /* Adds space between letters */
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px rgba(66, 66, 66, 0.3);
    transition: transform 0.3s ease;
}

.gallery-card-overlay p {
    font-size: 1.1rem;
    color: #ededed;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect - lift text up */
.gallery-card-link:hover .gallery-card-overlay h2,
.gallery-card-link:hover .gallery-card-overlay p {
    transform: translateY(-8px);
}

/* Button */

.btn {
    display: inline-block;
    padding: 9px 18px;
    background-color: #ededed;
    opacity: 90%;
    border: 2px solid #18209b; /* Dark purply blue border */
    color: #18209b; /* Blue text */
    border-radius: 150px; /* mobile corner rounding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
    letter-spacing: 0.05em; 
    text-decoration: none;
}

.btn:hover {
    background-color: #858df4; 
    color: #fdd066; 
    border: 2px solid #858df4; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }
}
/* ========================================
   HERO SECTION (Above Carousel on home page)
   ======================================== */

.hero-section {
    width: 100%;
    background-color: #c2c2c2;
    padding: 40px 0;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Two columns */
    gap: 50px;
    align-items: center;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Rounded corners */
}

.hero-content {
    background-color: #c2c2c2;
    padding: 20px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333333;
}

.hero-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    
    .hero-content {
        padding: 20px;
        min-height: 200px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
}

/* ========================================
   FULL-WIDTH HERO IMAGE (Editorial Page)
   ======================================== */

.full-width-hero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #c2c2c2;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* Mobile: Ensure full image is visible */
@media (max-width: 768px) {
    .full-width-hero img {
        max-width: 100%;
        height: auto;
    }
}

/* ========================================
    HERO WITH SINGLE CENTERED IMAGE
   ======================================== */

.single-centered-hero  {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 111px;
    overflow: hidden;
    background-color: #c2c2c2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-centered-hero  img {
    max-width: 30%;
    height: auto;
    display: block;
}

/* Mobile: Ensure full image is visible */
@media (max-width: 768px) {
    .single-centered-hero  img {
        max-width: 100%;
        height: auto;
    }
}


/* ========================================
    FULL SIZE SINGLE CENTERED IMAGE
   ======================================== */

.single-centered-image  {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 25px;
    overflow: hidden;
    background-color: #c2c2c2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-centered-image  img {
    max-width: 65%;
    height: auto;
    display: block;
}

/* Mobile: Ensure full image is visible */
@media (max-width: 768px) {
    .single-centered-image  img {
        max-width: 100%;
        height: auto;
    }
}

/* ========================================
   CAROUSEL STYLES
   ======================================== */

.carousel {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #333333;
}

.galleries-carousel {
    position: relative;
    width: 100%;
    margin: 0;
    margin-top: -120px; /* Negative margin pulls it up behind navbar */
    overflow: hidden;
    background-color: #333333;
    z-index: 1; /* Lower than navbar */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% of viewport height */
    min-height: 500px;
    max-height: 800px;
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
    display: block;
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Covers the space while maintaining aspect ratio */
    object-position: center;
}

/* Button overlay on carousel - CENTERED */
.carousel-button-overlay {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    z-index: 10; /* Above carousel images */
    display: flex;
    gap: 20px; /* Space between buttons */
    justify-content: center;
    align-items: center;
}

/* Make sure carousel container is positioned relatively */
.galleries-carousel {
    position: relative;
}

/* Responsive: Stack buttons vertically on mobile */
@media (max-width: 768px) {
    .carousel-button-overlay {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 15px;
    }
}


/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot:hover {
    background-color: #d2042d;
}

.dot.active {
    background-color: #cc70c1;
}

/* Responsive */
@media (max-width: 768px) {
    .carousel-container {
        height: 50vh;
        min-height: 400px;
    }
    
    .carousel-btn {
        padding: 10px 15px;
        font-size: 1.2rem;
    }
    
    .carousel-btn.prev {
        left: 10px;
    }
    
    .carousel-btn.next {
        right: 10px;
    }
    
    .carousel-cta {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #b1a7b4;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #333333;
}

/* ========================================
   BUTTON BURST CIRCLES ANIMATION
   ======================================== */

/* Circle elements */
.burst-circle {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    z-index: 9999;
    pointer-events: none;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active animation state */
.burst-circle.burst-active {
    transform: translate(
        calc(-50% + var(--end-x)), 
        calc(-50% + var(--end-y))
    ) scale(1);
}

/* Smooth button fade */
.carousel-cta {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   BOTTOM GRAPHIC
   ======================================== */

.bottom-graphic {
    width: 100%;
    padding: 100px 0; /* 50px buffer top and bottom */
    text-align: center;
    background-color: #c2c2c2;
}

.bottom-graphic img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Mobile: increase padding to make section taller */
@media (max-width: 768px) {
    .bottom-graphic {
        padding: 150px 0; /* more vertical space on mobile */
        width: 200%; 

    }
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    width: 100%;
    background-color: #c2c2c2;
    color: #333333;
    padding: 30px 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-section {
    margin: 10px 0;
}

.copyright {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.contact-info {
    font-size: 0.9rem;
}

.contact-info a {
    color: #fdd066; /* Yellow gold from your palette */
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #ff9ceb; /* Pink on hover */
}

/* Mobile: Stack contact info */
@media (max-width: 768px) {
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-info a {
        display: block;
    }
}
/* Social Media Icons */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.social-icons a:hover {
    background-color: #fdd066;  
}

.social-icons img {
    width: 30px;
    height: 30px;
    display: block;
    transition: filter 0.3s ease;
}

/* Optional: Make icons white on hover for better contrast */
.social-icons a:hover img {
    filter: brightness(0) invert(1);  /* Turns icon white */
}

/* Mobile: Slightly smaller */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
    }
    
    .social-icons a {
        width: 40px;
        height: 40px;
    }
    
    .social-icons img {
        width: 25px;
        height: 25px;
    }
}

/* Mobile: Slightly smaller icons */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
    }
    
    .social-icons img {
        width: 25px;
        height: 25px;
    }
}


/* ========================================
   CROSSWALK GIF
   ======================================== */

.crosswalk-section {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -222px; 

}

.crosswalk-container {
    max-width: 1000px; 
    width: 100%;
}

.crosswalk-gif {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: Make it smaller */
@media (max-width: 768px) {
    .crosswalk-container {
        max-width: 400px;
    }
}


/* ========================================
   INDEX PAGE - Latest Work Section with Sidebar Substack
   ======================================== */

.latest-work-section {
    width: 100%;
    background-color: #c2c2c2;
    padding: 60px 0;
}

.latest-work-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left column (latest work) is bigger */
    gap: 111px;
    align-items: start;
}

/* Left Column - Latest Work Content */
.latest-work-content {
    width: 100%;
}

.latest-work-content h2 {
    font-size: 2.5rem;
    color: #333333;
    margin-bottom: 30px;
}

/* Latest Work Grid (archive-style listing) */
.latest-work-grid {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    gap: 20px;
    align-items: center;
    margin-bottom: 40px;
}

.latest-work-item {
    display: contents;
    text-decoration: none;
    color: inherit;
}

.latest-work-thumb {
    width: 120px;
    height: 120px;
    overflow: hidden;
    background-color: #b1a7b4;
    transition: transform 0.3s ease;
}

.latest-work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.latest-work-item:hover .latest-work-thumb {
    transform: scale(1.05);
}

.latest-work-title h3 {
    font-size: 1.3rem;
    color: #333333;
    transition: color 0.3s ease;
    margin: 0;
}

.latest-work-item:hover .latest-work-title h3 {
    color: #d2042d;
}

.latest-work-date-col {
    text-align: right;
}

.latest-work-date {
    font-size: 1rem;
    color: #333333;
}

.latest-work-cta {
    text-align: center;
    margin-top: 30px;
}

.loading-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #666666;
    font-size: 1.1rem;
    padding: 40px;
}

/* Right Column - Substack Sidebar */
.substack-embed-sidebar {
    width: 100%;
    position: sticky;
    top: 120px; /* Sticks when scrolling, below navbar */
}
.substack-embed-sidebar h2 {
    font-size: 2rem;
    }
    
.substack-embed-sidebar iframe {
    width: 100%;
    max-width: 480px;
    height: 320px;
    display: block;
    margin: 0 auto;
}

/* Mobile - Stack vertically */
@media (max-width: 968px) {
    .latest-work-container {
        grid-template-columns: 1fr; /* Single column */
        gap: 40px;
    }
    
    .substack-embed-sidebar {
        position: relative;
        top: 0;
        order: 2; /* Substack appears below latest work */
    }
    
    .latest-work-content {
        order: 1;
    }
    
    .latest-work-grid {
        grid-template-columns: 100px 1fr;
        gap: 15px;
    }
    
    .latest-work-thumb {
        width: 100px;
        height: 100px;
    }
    
    /* Stack date below title on mobile */
    .latest-work-date-col {
        grid-column: 2;
        text-align: left;
        margin-top: -10px;
    }
    
    .latest-work-date {
        font-size: 0.9rem;
        color: #666666;
    }
    
    .latest-work-content h2 {
        font-size: 2rem;
    }
}

/* ========================================
   ABOUT PAGE CONTENT
   ======================================== */

.about-content-section {
    width: 100%;
    padding: 60px 0;
    background-color: #c2c2c2;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 60px;
    align-items: start;
}

/* Text Column */
.about-text {
    background-color: transparent; /* Transparent background as requested */
}

.about-text h1 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: #333333;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333333;
}

/* Image Column */
.about-image {
    width: 100%;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Optional: slight rounded corners */
}

/* ========================================
   ABOUT PAGE - Centered Substack Embed
   ======================================== */

.substack-embed-centered {
    width: 100%;
    padding: 60px 0;
    background-color: #c2c2c2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.substack-embed-centered-links {
    width: 100%;
    padding: 60px 0;
    background-color: #b1a7b4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.substack-embed-centered .substack-embed-container {
    max-width: 600px;
    width: 100%;
    padding: 0 20px;
}

.substack-embed-centered iframe {
    width: 100%;
    height: 320px;
    display: block;
    margin: 0 auto;
}


/* Mobile */
@media (max-width: 768px) {
    .substack-embed-centered {
        padding: 40px 0;
    }
    
    .substack-embed-centered .substack-embed-container {
        padding: 0 15px; /* Add more padding on mobile */
    }
    
    .substack-embed-centered iframe {
        width: 100%;
        max-width: 100%; /* Allow full width on mobile */
        height: 280px;
    }
}


/* ========================================
   HERO IMAGE (Full-width behind navbar)
   ======================================== */

/* Apply to pages with class="has-hero-image" */
body.has-hero-image .hero-image-section {
    width: 100%;
    margin-top: -222px; /* Pull up behind navbar */
    padding-top: 105px; /* Compensate so image isn't cut off */
    overflow: hidden;
    z-index: 1;
}

body.has-hero-image .hero-image-section img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover; /* Covers space while maintaining aspect ratio */
    object-position: center;
    display: block;
}

/* Make navbar transparent on pages with hero image */
body.has-hero-image .navbar {
    margin-top: 0;
    background-color: rgba(194, 194, 194, 0.85);
}

/* Mobile: shorter hero image */
@media (max-width: 768px) {
    body.has-hero-image .hero-image-section img {
        height: 40vh;
        min-height: 300px;
    }
}
/* ========================================
   PHOTO PAIRS GRID (Personal Gallery)
   ======================================== */

.photo-pairs-grid {
    width: 100%;
    padding: 20px 0;
}

/* Each pair is a row */
.photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 30px;
    margin-bottom: 60px; /* Space between pairs */
    align-items: center; /* This centers landscape with portrait vertically */
}

/* Individual photo container */
.photo-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .photo-pair {
        grid-template-columns: 1fr; /* Single column */
        gap: 5px;
        margin-bottom: 20px;
    }
}

/* ========================================
   COFFEE TABLE SECTION (Editorial Page)
   ======================================== */

/* Coffee Table Section */
.coffee-table-section {
    width: 100%;
    padding: 60px 20px;
    background-color: #c2c2c2;
}

.coffee-table-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1823/1775;  
    background-image: url('../images/editorial/coffee-table-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
    width: 100%; 
    height: auto; 
}

/* Draggable Magazines */
.magazine {
    position: absolute;
    width: 180px;
    cursor: move;
    transition: transform 1s ease, box-shadow 0.5s normal;
    z-index: 1;
}

.magazine:hover {
    transform: scale(1.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.magazine.dragging {
    opacity: 0.8;
    z-index: 100;
}

.magazine img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ========================================
   SIMPLE FLIPBOOK 
   ======================================== */

.magazine-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    transition: background 0.5s normal;
}

.magazine-lightbox.active {
    display: flex;
    background: rgba(0,0,0,0.95);
}

/* Hide checkboxes */
#coverCheck, #page1Check, #page2Check, #page3Check, #page4Check, #page5Check, #page6Check, 
#page7Check, #page8Check, #page9Check, #page10Check, #page11Check, #page12Check {
    display: none;
}

/* FLIP BOOK */
#flip_book {
    width: 575px;
    height: 850px;
    position: relative;
    perspective: 2000px;
    transition: transform 1s;
}

/* Front Cover - CENTERED, covers everything */
.front_cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform-origin: left center;
    transition: transform 0.8s;
    z-index: 100;
    transform-style: preserve-3d;
}

.front_cover label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

.cover-front-side {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.cover-back-side {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.cover-front-side img,
.cover-back-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}
/* Pages - stacked behind cover */
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform-origin: left center;
    transition: transform 0.8s;
    z-index: 10;
    transform-style: preserve-3d;
}

.page label {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 10;
}
#page1 { z-index: 17; }
#page2 { z-index: 16; }
#page3 { z-index: 15; }
#page4 { z-index: 14; }
#page5 { z-index: 13; }
#page6 { z-index: 12; }
#page7 { z-index: 11; }



#page1Check:checked ~ .magazine-lightbox #flip_book #page1:not(:active),
#page2Check:checked ~ .magazine-lightbox #flip_book #page2:not(:active),
#page3Check:checked ~ .magazine-lightbox #flip_book #page3:not(:active),
#page4Check:checked ~ .magazine-lightbox #flip_book #page4:not(:active),
#page5Check:checked ~ .magazine-lightbox #flip_book #page5:not(:active),
#page6Check:checked ~ .magazine-lightbox #flip_book #page6:not(:active),
#page7Check:checked ~ .magazine-lightbox #flip_book #page7:not(:active) {
    z-index: 1;
}

.page-front-side {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: flex-start;
    background: black;
}

.page-front-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-front-side::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 3%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.page-back-side {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    justify-content: flex-end;
    background: black;
}

.page-back-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-back-side::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.3) 0%, transparent 3%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}



/* ANIMATIONS */



/* When cover flips - shift book right */
#coverCheck:checked ~ .magazine-lightbox #flip_book {
    transform: translateX(300px);
}

#coverCheck:checked ~ .magazine-lightbox #flip_book .front_cover {
    transform: rotateY(-180deg);
    z-index: 1;
    transition: transform 2s ease, z-index 0s 2s;
}
/* When a page is actively flipping OR currently flipped, bring it to the front */
.page:active {
    z-index: 10001 !important;
}

/* Keep high z-index during transition */
.page {
    transition: transform 2s, z-index 2s;
}

/* Cover needs same treatment */
.front_cover:active {
    z-index: 100 !important;
}

.front_cover:active,
.front_cover:has(input:checked) {
    z-index: 100 !important;
}
#page1Check:checked ~ .magazine-lightbox #flip_book #page1 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page2Check:checked ~ .magazine-lightbox #flip_book #page2 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page3Check:checked ~ .magazine-lightbox #flip_book #page3 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page4Check:checked ~ .magazine-lightbox #flip_book #page4 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page5Check:checked ~ .magazine-lightbox #flip_book #page5 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page6Check:checked ~ .magazine-lightbox #flip_book #page6 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#page7Check:checked ~ .magazine-lightbox #flip_book #page7 {
    transform: rotateY(-180deg);
    z-index: 1;
}

/* BUT while flipping (not yet fully checked), stay on top */
.page {
    transition: transform 2s ease, z-index 2s step-end;
}

.page:not(:checked) {
    z-index: auto;
}

/* Counter and Close Button */
.counter {
    position: fixed;
    bottom: 40px;
    color: white;
    font-size: 1.1rem;
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 2.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #d2042d;
}

/* Mobile */
@media (max-width: 768px) {
    #flip_book {
        width: 45vw;
        height: calc(45vw * 1.48);
    }
    
    #coverCheck:checked ~ .magazine-lightbox #flip_book {
        transform: translateX(22.5vw);
    }
}

/* ========================================
   EDITORIAL GRID
   ======================================== */

   .editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 60px 0;
    align-items: center;
    align-content: center;
    max-width: 2000px;
    margin: 0 auto;
}

.editorial-grid img {
    width: 100%;
    height: auto;
    align-items: center;
    align-content: center;
    display: block;
    transition: transform 0.3s ease;
}

/* Mobile */
@media (max-width: 968px) {
    .coffee-table-container {
        aspect-ratio: 1/1;
        max-height: 400px;
    }
    .magazine { 
        width: 60px; /* Smaller magazines on mobile */
    }
        .editorial-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ========================================
   LINK TREE PAGE STYLES
   ======================================== */

body.links-page {
    background-color: #b1a7b4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.links-page-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.links-container {
    width: 75%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.logo-link {
    display: inline-block;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.05);

}

.links-logo {
    max-width: 120px; /* Smaller logo */
    width: 100%;
    height: auto;
}

/* Name below logo */
.links-name {
    font-family: 'monotalic-narrow', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

/* Bio text */
.links-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.links-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-button {
    display: block;
    padding: 20px 30px;
    border-radius: 150px; /* mobile corner rounding */
    text-decoration: none;
    background-color: #b1a7b4; /* Same as page background */
    border: 2px solid #18209b; /* Dark purply blue border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #18209b; /* Blue text */
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.link-button:hover {
    transform: translateY(-3px);
    background-color: #858df4; 
    color: #fdd066; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}


.link-button span {
    display: block;
}

.mystery-button {
    opacity: 0.85;
}


/* Footer on links page */
body.links-page .site-footer {
    background-color: #b1a7b4;
}

/* Desktop */
@media (min-width: 768px) {
    .links-logo {
        max-width: 150px; /* Slightly larger on desktop */
    }
    
    .links-name {
        font-size: 2.5rem;
    }
    
    .links-bio {
        font-size: 1.1rem;
    }
    
    .logo-link {
        margin-bottom: 25px;
    }
    
    .links-grid {
        gap: 25px;
    }
    
    .link-button {
        border-radius: 150px; /* corner rounding */
        padding: 25px 40px;
        font-size: 1.3rem;
    }
}


/* ========================================
   ARCHIVE PAGE STYLES
   ======================================== */

.archive-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
    background-color: #c2c2c2;
}

.archive-header {
    text-align: center;
    margin-bottom: 50px;
}

.archive-header h1 {
    font-size: 3rem;
    color: #333333;
    margin-bottom: 10px;
}

.archive-header p {
    font-size: 1.2rem;
    color: #333333;
}

/* Filter Badge */
.filter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    padding: 12px 25px;
    background-color: #b1a7b4;
    border-radius: 25px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.filter-badge span {
    color: #ffffff;
    font-size: 1rem;
}

.filter-badge strong {
    text-transform: capitalize;
}

.filter-clear {
    background: #d2042d;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.filter-clear:hover {
    background: #982121;
    transform: rotate(90deg);
}

/* Archive Grid */
.archive-grid {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    gap: 30px;
    align-items: center;
}

/* Archive Item (each row) */
.archive-item {
    display: contents; /* Makes children act as grid items */
    text-decoration: none;
    color: inherit;
}

/* Thumbnail Column */
.archive-thumb {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background-color: #b1a7b4;
    transition: transform 0.3s ease;
}

.archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.archive-item:hover .archive-thumb {
    transform: scale(1.05);
}

/* Title Column */
.archive-title h3 {
    font-size: 1.5rem;
    color: #333333;
    transition: color 0.3s ease;
    margin: 0;
}

.archive-item:hover .archive-title h3 {
    color: #d2042d;
}

/* Date Column */
.archive-date {
    text-align: right;
}

.archive-date span {
    font-size: 1rem;
    color: #333333;
}

/* No Results Message */
.no-results {
    text-align: center;
    padding: 60px 20px;
}

.no-results p {
    font-size: 1.3rem;
    color: #333333;
    margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .archive-page-container {
        padding: 40px 20px;
    }
    
    .archive-header h1 {
        font-size: 2rem;
    }
    
    .archive-grid {
        grid-template-columns: 100px 1fr;
        gap: 15px;
    }
    
    .archive-thumb {
        width: 100px;
        height: 100px;
    }
    
    /* Stack date below title on mobile */
    .archive-date {
        grid-column: 2;
        text-align: left;
        margin-top: -10px;
    }
    
    .archive-date span {
        font-size: 0.9rem;
        color: #666666;
    }
    
    .archive-title h3 {
        font-size: 1.2rem;
    }
}

/* ========================================
   ARCHIVE PROJECT PAGES
   ======================================== */

.project-content-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px;
    background-color: #c2c2c2;
}

.project-back {
    margin-bottom: 30px;
}

.project-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid #d2042d;
}

.project-header h1 {
    font-size: 3rem;
    color: #333333;
    margin-bottom: 15px;
}

.project-date {
    font-size: 1.1rem;
    color: #666666;
    margin-bottom: 10px;
}

.project-category {
    font-size: 1rem;
    color: #b1a7b4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.project-description {
    margin-bottom: 60px;
}

.project-description p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 20px;
}

/* Project Gallery Grid */
.project-gallery {
    margin-top: 60px;
    margin-bottom: 60px;
}

.project-gallery h2 {
    font-size: 2rem;
    color: #333333;
    margin-bottom: 30px;
    text-align: center;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.project-gallery-grid img:hover {
    transform: scale(1.02);
}

/* Mobile */
@media (max-width: 768px) {
    .project-content-container {
        padding: 40px 20px;
    }
    
    .project-header h1 {
        font-size: 2rem;
    }
    
    .project-description p {
        font-size: 1.1rem;
    }
    
    .project-gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Archive youtube Embed */
.archive-youtube-embed {
    margin-top: 60px;
    margin-bottom: 100px;
}

.archive-youtube-embed h2 {
    font-size: 2rem;
    color: #333333;
    margin-bottom: 30px;
    text-align: center;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* Archive Navigation Buttons */
.archive-navigation {
    display: flex;
    gap: 20px; /* Space between buttons */
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* Allows buttons to wrap on small screens */
}

.archive-navigation .btn {
    min-width: 150px; /* Ensures buttons have consistent width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .archive-navigation {
        flex-direction: column; /* Stack buttons vertically on mobile */
        align-items: center;
        gap: 15px;
    }
    
    .archive-navigation .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    background-color: #c2c2c2;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h1 {
    font-size: 3rem;
    color: #333333;
    margin-bottom: 30px;
}

.contact-intro {
    max-width: 700px;
    margin: 0 auto;
}

.contact-intro p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 20px;
}

/* Form Container */
.contact-form-container {
    background-color: rgba(177, 167, 180, 0.2);
    padding: 40px;
    border-radius: 8px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea {
    padding: 12px 15px;
    font-size: 1rem;
    font-family: 'short-films', sans-serif;
    color: #333333;
    background-color: transparent; 
    border: 2px solid #18209b;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background-color: #e0c6e8
}

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

/* Submit Button */
.btn-submit {
    background-color: transparent; 
    align-self: flex-start;
    font-size: 1.1rem;
    padding: 12px 40px;
    cursor: pointer;
    border-radius: 150px; /* mobile corner rounding */
    border: 2px solid #18209b; /* Dark purply blue border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #18209b; /* Blue text */
    font-family: 'monotalic-narrow', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.btn-submit:disabled {
    background-color: #999999;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-submit:hover {
    transform: translateY(-3px);
    background-color: #858df4; 
    color: #fdd066; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
/* Form Note */
.form-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666666;
    font-style: italic;
}

/* Form Messages */
.form-message {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 1rem;
    text-align: center;
}

.form-message.success {
    background-color: #e0f7e0;
    color: #2d5f2d;
    border: 2px solid #5cb85c;
}

.form-message.error {
    background-color: #f7e0e0;
    color: #8b2e2e;
    border: 2px solid #d2042d;
}

/* Mobile */
@media (max-width: 768px) {
    .contact-page-container {
        padding: 40px 20px;
    }
    
    .contact-header h1 {
        font-size: 2rem;
    }
    
    .contact-intro p {
        font-size: 1.1rem;
    }
    
    .contact-form-container {
        padding: 25px;
    }
    
    .btn-submit {
        width: 100%;
    }
}




/* ========================================
   IMAGE STACK - Reusable 50% Width Images
   ======================================== */

.image-stack-section {
    width: 100%;
    padding: 40px 0;
}

.image-stack {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between images */
}

.image-stack img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers each image */
}

/* Mobile: Full width on small screens */
@media (max-width: 768px) {
    .image-stack img {
        width: 100%;
    }
}
/* ----------------------------
GALLERY PAGE NAV BUTTONS
----------------------------*/
/* Archive Navigation Buttons */
.gallery-navigation {
    display: flex;
    gap: 20px; /* Space between buttons */
    justify-content: center;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* Allows buttons to wrap on small screens */
}

.gallery-navigation .btn {
    min-width: 150px; /* Ensures buttons have consistent width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-navigation {
        flex-direction: column; /* Stack buttons vertically on mobile */
        align-items: center;
        gap: 15px;
    }
    
    .gallery-navigation .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ---------------------
ARCHIVE PAGE STYLES
-------------------------*/
/* Archive Controls Styling */
.archive-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    max-width: 1400px;
    gap: 2rem;
}

/* Filter Container */
.filter-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e3a5f;
    white-space: nowrap;
}

.custom-select {
    position: relative;
    min-width: 200px;
}

.filter-select {
    appearance: none;
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    background: transparent;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e3a5f;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.filter-select:hover {
    border-color: #858df4;
}

.filter-select:focus {
    outline: none;
    border-color: #858df4;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* Custom dropdown arrow */
.custom-select::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #1e3a5f;
    pointer-events: none;
    transition: border-top-color 0.3s ease;
}

.custom-select:hover::after {
    border-top-color: #858df4;
}

/* Filter select options - Radio button style */
.filter-select option {
    padding: 0.5rem 1rem;
    position: relative;
}

/* Sort Container */
.sort-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sort-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e3a5f;
    white-space: nowrap;
}

.sort-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: transparent;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1e3a5f;
}

.sort-toggle:hover {
    border-color: #858df4;
    color: #858df4;
}

.sort-toggle:hover .sort-icon {
    color: #858df4;
}

.sort-icon {
    transition: transform 0.3s ease, color 0.3s ease;
    color: #1e3a5f;
}

.sort-toggle[data-order="asc"] .sort-icon {
    transform: rotate(180deg);
}

.sort-toggle[data-order="desc"] .sort-icon {
    transform: rotate(0deg);
}

/* Filter Badge */
.filter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto 1.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(211, 47, 47, 0.1);
    border: 2px solid #d32f2f;
    border-radius: 8px;
    max-width: fit-content;
}

.filter-badge span {
    font-size: 0.95rem;
    color: #d32f2f;
}

.filter-badge strong {
    color: #d32f2f;
    font-weight: 600;
}

.filter-clear {
    background: #d32f2f;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.filter-clear:hover {
    background: #b71c1c;
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .archive-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .filter-container,
    .sort-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .custom-select {
        width: 100%;
    }

    .sort-toggle {
        width: 100%;
        justify-content: center;
    }

    .filter-badge {
        margin: 0 1rem 1.5rem;
    }
}

/* Loading state */
.archive-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Smooth transitions for grid updates */
.archive-item {
    animation: fadeIn 0.4s ease;
}

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