/*
Theme Name: Aktuell
Description: A minimal, custom creative portfolio theme built for contemporary digital experiences.
Author: Aktuell Studio
Version: 1.0.8
Updated: 2026-08-26 - Notes renamed to Writings (/writings); Independent ECD added to About
*/

/* Custom Fonts */
@font-face {
    font-family: 'HaasGrotTextR-55Roman';
    src: url('/fonts/HaasGrotTextR-55Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InspirationFont';
    src: url('/fonts/bbe0068e6a910003-s.p.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Legacy fonts - keeping for fallback */
@font-face {
    font-family: 'Aktuell-Regular';
    src: url('/fonts/a1d2a6c40cd8551c-s.p.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Medium';
    src: url('/fonts/0daaad169a541695-s.p.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Bold';
    src: url('/fonts/bbe0068e6a910003-s.p.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Light';
    src: url('/fonts/ee42aa98e9a220f1-s.p.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

/* Initialize CSS custom property for smooth hover animations */
:root {
    --hover-progress: 0;
}

/* Website links styling (2manybooks.com, artand.services / defined.space, trulytype.com) */
/* Ultra-specific selectors to override any conflicting styles */
.page-about .grid-module .grid-container .grid-item a.website-link,
.page-about .grid-module .grid-container .grid-item a.website-link:link,
.page-about .grid-module .grid-container .grid-item a.website-link:visited,
.page-about .grid-module .grid-container .grid-item a.website-link:active,
.page-about .grid-module .grid-container .grid-item a.website-link:focus,
.grid-item a.website-link,
.grid-item a.website-link:link,
.grid-item a.website-link:visited,
.grid-item a.website-link:active,
.grid-item a.website-link:focus {
    color: #000 !important; /* Black default state - override browser defaults */
    text-decoration: none !important; /* Remove underline */
    text-decoration-line: none !important; /* Extra override */
    text-decoration-color: transparent !important; /* Make underline invisible */
    border-bottom: none !important; /* Remove any bottom borders */
    outline: none !important; /* Remove focus outlines */
    transition: color 0.3s ease !important;
    /* Nuclear option - inline style override */
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
}

.page-about .grid-module .grid-container .grid-item a.website-link:hover,
.grid-item a.website-link:hover {
    color: #808080 !important; /* Grey on hover - same as nav links */
    text-decoration: none !important; /* Keep no underline on hover */
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    color: #000;
    background: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll during animations / 100vw full-bleed */
    max-width: 100%;
    position: relative;
    transition: background-color 0.8s ease, color 0.8s ease;
}

/* Dark background state for scroll */
body.dark-background {
    background: #000 !important;
    color: #fff !important;
}

/* Test to make sure the class is being applied */
body.dark-background * {
    color: #fff !important;
}

/* Connect FAB inverts with the page. More specific than body.dark-background * { color: #fff }
   so the envelope stays black on the white chip (currentColor would vanish). */
html body.dark-background .aktuell-connect-fab,
html body.dark-transition .aktuell-connect-fab {
    background-color: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    outline-color: rgba(0, 0, 0, 0.1);
    isolation: isolate;
    mix-blend-mode: normal;
    filter: none;
}

html body.dark-background .aktuell-connect-fab svg,
html body.dark-background .aktuell-connect-fab svg *,
html body.dark-transition .aktuell-connect-fab svg,
html body.dark-transition .aktuell-connect-fab svg * {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    stroke: #111 !important;
    fill: none !important;
}

/* Projects subnav + Images strip chrome stay black over dark photography.
   Writings #fnStrip is restyled separately — do not include .fn-nav-strip. */
body.dark-background .projects-filter-pill,
body.dark-background .projects-filter-pill *,
body.dark-transition .projects-filter-pill,
body.dark-transition .projects-filter-pill *,
body.dark-background #inspirationStrip,
body.dark-background #inspirationStrip *,
body.dark-transition #inspirationStrip,
body.dark-transition #inspirationStrip *,
body.dark-background .inspiration-nav-strip:not(.fn-nav-strip),
body.dark-background .inspiration-nav-strip:not(.fn-nav-strip) *,
body.dark-transition .inspiration-nav-strip:not(.fn-nav-strip),
body.dark-transition .inspiration-nav-strip:not(.fn-nav-strip) * {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

body.dark-background .projects-filter-pill,
body.dark-transition .projects-filter-pill,
body.dark-background #inspirationStrip,
body.dark-transition #inspirationStrip,
body.dark-background .inspiration-nav-strip:not(.fn-nav-strip),
body.dark-transition .inspiration-nav-strip:not(.fn-nav-strip) {
    isolation: isolate;
    mix-blend-mode: normal;
    filter: none;
}

body.dark-background .projects-filter-pill,
body.dark-transition .projects-filter-pill {
    background: #fff !important;
}

body.dark-background .projects-filter-pill svg,
body.dark-background .projects-filter-pill svg *,
body.dark-transition .projects-filter-pill svg,
body.dark-transition .projects-filter-pill svg *,
body.dark-background #inspirationStrip svg,
body.dark-background #inspirationStrip svg *,
body.dark-transition #inspirationStrip svg,
body.dark-transition #inspirationStrip svg *,
body.dark-background .inspiration-nav-strip:not(.fn-nav-strip) svg,
body.dark-background .inspiration-nav-strip:not(.fn-nav-strip) svg *,
body.dark-transition .inspiration-nav-strip:not(.fn-nav-strip) svg,
body.dark-transition .inspiration-nav-strip:not(.fn-nav-strip) svg * {
    color: #111 !important;
    stroke: #111;
    fill: none;
}

/* Main nav stays rest-black over dark photography.
   Beats body.dark-background * { color: #fff !important } so .nav-letter,
   #mainNav a, and count chrome are not painted white. */
html body.dark-background #mainNav,
html body.dark-background #mainNav a,
html body.dark-background #mainNav .nav-letter,
html body.dark-background #mainNav .nav-count,
html body.dark-background #mainNav *,
html body.dark-transition #mainNav,
html body.dark-transition #mainNav a,
html body.dark-transition #mainNav .nav-letter,
html body.dark-transition #mainNav .nav-count,
html body.dark-transition #mainNav *,
html body.nav-on-dark #mainNav,
html body.nav-on-dark #mainNav a,
html body.nav-on-dark #mainNav .nav-letter,
html body.nav-on-dark #mainNav .nav-count,
html body.nav-on-dark #mainNav *,
html body.fn-nav-on-dark #mainNav,
html body.fn-nav-on-dark #mainNav a,
html body.fn-nav-on-dark #mainNav .nav-letter,
html body.fn-nav-on-dark #mainNav .nav-count,
html body.fn-nav-on-dark #mainNav * {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body.dark-background #mainNav,
html body.dark-transition #mainNav,
html body.nav-on-dark #mainNav,
html body.fn-nav-on-dark #mainNav {
    isolation: isolate;
    mix-blend-mode: normal;
    filter: none;
}

/* Count pills keep black fill + white numerals (not the invert white). */
html body.dark-background #mainNav :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.dark-transition #mainNav :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.nav-on-dark #mainNav :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.fn-nav-on-dark #mainNav :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #000 !important;
    background-color: #000 !important;
}

html body.dark-background #mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.dark-background #mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.dark-transition #mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count),
html body.dark-transition #mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount, .nav-count) {
    opacity: 0.5 !important;
}

/* Navigation */
.main-nav {
    position: fixed;
    left: 50%;
    top: 40px;
    z-index: 1000;
    isolation: isolate;
    mix-blend-mode: normal;
    /* Only transform — animating top + translateY together is what made the splash nav drift. */
    transition: transform 1.8s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)),
        opacity 1.8s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
    will-change: transform, opacity;
    visibility: visible; /* Ensure nav is visible by default */
}

/* Centered intro: same lock top as rest, Y offset only. 50% is this element's height. */
.main-nav.first-visit {
    top: 40px;
    transform: translate3d(-50%, calc(50vh - 40px - 50%), 0);
    transform: translate3d(-50%, calc(50dvh - 40px - 50%), 0);
    opacity: 0;
}

.main-nav.fade-in {
    top: 40px;
    transform: translate3d(-50%, calc(50vh - 40px - 50%), 0);
    transform: translate3d(-50%, calc(50dvh - 40px - 50%), 0);
    opacity: 1;
}

.main-nav.slide-to-top {
    top: 40px;
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
}

/* Default state for pages */
.main-nav:not(.first-visit):not(.fade-in):not(.slide-to-top) {
    top: 40px;
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
}

/* Scroll down: slide out. Scroll up: slide back. Interruptible — not a keyframe. */
.main-nav.is-scroll-ready {
    transition-property: transform, opacity;
    transition-duration: 320ms;
    transition-timing-function: var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
}

.main-nav.slide-to-top.is-scroll-hidden,
.main-nav.is-scroll-hidden:not(.first-visit):not(.fade-in) {
    transform: translate3d(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px)), 0);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav.is-scroll-ready {
        transition-duration: 0.01ms;
    }
}

/* Ensure nav items are visible in default state */
.main-nav:not(.first-visit) .nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.nav-links {
    list-style: none;
    display: flex;
    position: relative;
    gap: 8px; /* Reduced gap for tighter spacing */
    white-space: nowrap; /* Prevent wrapping on mobile */
    margin: 0;
    padding: 0;
}

/* Staggered fade-up animation for nav items */
.nav-links li {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)),
        transform 0.8s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
}

.nav-links li.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Nav link styles with sweep animation */
.nav-links a {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Increased from 10px */
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 8px 6px; /* 6 + 8px flex gap + 6 = 20px between labels */
    display: inline-block; /* Ensure transform works */
    white-space: nowrap; /* Keep text and pills on same line */
    color: #808080; /* Start as 50% grey (#808080) for intro animation */
    transition: color 1.5s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 1; /* Default opacity */
}

.nav-links a.sweep-animation,
.main-nav.first-visit .nav-links a.sweep-animation {
    color: #000 !important; /* Final state is black - override first-visit grey */
    transition: color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Faster transition for cycling */
}

/* First visit state - start as light grey for maximum dramatic effect */
.main-nav.first-visit .nav-links a {
    color: #cccccc !important; /* Force light grey (~80%) for maximum contrast */
}

/* First visit state - pills start as light grey too */
.main-nav.first-visit #projectCount,
.main-nav.first-visit #imageCount,
.main-nav.first-visit #fieldNotesCount {
    background: #cccccc !important; /* Start with light grey background */
    color: #000 !important; /* Black text on light grey background */
    opacity: 1;
    box-shadow: none;
    transition: background-color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transitions for both background and text */
}

/* Pills sweep to black - white text for readability */
.main-nav.first-visit #projectCount.sweep-animation,
.main-nav.first-visit #imageCount.sweep-animation,
.main-nav.first-visit #fieldNotesCount.sweep-animation {
    background: #000 !important; /* Final state is black background */
    color: #fff !important; /* White text for readability on black background */
    opacity: 1;
    box-shadow: none;
}

/* Default state for pages (non-intro) - ensure links are 100% black */
.main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]) {
    color: #000 !important; /* Force 100% black for non-active links only */
    opacity: 1; /* 100% opacity for non-active links */
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: #000; /* Ensure black color */
    opacity: 1; /* Letters fade; the count chip stays a solid fill */
}

/* Active state fade animation */
.nav-links a.fade-to-active {
    opacity: 0.4; /* Fade to active state - matches active opacity */
}

.nav-links a:hover:not(.active):not([aria-current="page"]) {
    opacity: 0.3 !important; /* Hover effect for non-active links */
}

.nav-links a.active:hover,
.nav-links a[aria-current="page"]:hover {
    opacity: 1; /* Turn black on hover for active links */
}

/* Active count pill: same solid chip at 50%. Parent <a> stays opacity 1. */
#mainNav.main-nav:not(.first-visit) .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
#mainNav.main-nav:not(.first-visit) .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
    color: #fff !important;
    background: #000 !important;
    background-color: #000 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

/* Dark photography: #mainNav stays rest-black. Do not invert letters. */
body.dark-background .nav-links a,
body.nav-on-dark .nav-links a,
body.fn-nav-on-dark .nav-links a {
    color: #111 !important;
}

body.dark-background .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
body.nav-on-dark .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]) {
    color: #111 !important;
    opacity: 1;
}

body.dark-background .nav-links a.active,
body.dark-background .nav-links a[aria-current="page"],
body.nav-on-dark .nav-links a.active,
body.nav-on-dark .nav-links a[aria-current="page"],
body.fn-nav-on-dark .nav-links a.active,
body.fn-nav-on-dark .nav-links a[aria-current="page"] {
    color: #111 !important;
    opacity: 1; /* Letters fade; count chip stays solid */
}

body.dark-background .nav-links a:hover:not(.active):not([aria-current="page"]),
body.nav-on-dark .nav-links a:hover:not(.active):not([aria-current="page"]),
body.fn-nav-on-dark .nav-links a:hover:not(.active):not([aria-current="page"]) {
    opacity: 0.3 !important; /* Hover effect for non-active links */
}

body.dark-background .nav-links a.active:hover,
body.dark-background .nav-links a[aria-current="page"]:hover,
body.nav-on-dark .nav-links a.active:hover,
body.nav-on-dark .nav-links a[aria-current="page"]:hover,
body.fn-nav-on-dark .nav-links a.active:hover,
body.fn-nav-on-dark .nav-links a[aria-current="page"]:hover {
    opacity: 1 !important; /* Full opacity on hover for active links */
}

/* Dark pages still use the white nav — pills stay solid black / white. */
body.dark-background #imageCount,
body.dark-background #projectCount,
body.dark-background #fieldNotesCount,
body.nav-on-dark #imageCount,
body.nav-on-dark #projectCount,
body.nav-on-dark #fieldNotesCount,
body.fn-nav-on-dark #imageCount,
body.fn-nav-on-dark #projectCount,
body.fn-nav-on-dark #fieldNotesCount {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Desktop dark pages: solid white nav — same fill as mobile About/Connect/Writings. */
@media (min-width: 769px) {
    body.dark-background .main-nav,
    body.dark-transition .main-nav {
        background: #fff !important;
        padding: 4px 8px;
        border-radius: 30px;
    }

    body.dark-background .nav-links a,
    body.dark-transition .nav-links a,
    body.dark-background .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
    body.dark-transition .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
    body.dark-background .nav-links a.active,
    body.dark-background .nav-links a[aria-current="page"],
    body.dark-transition .nav-links a.active,
    body.dark-transition .nav-links a[aria-current="page"] {
        color: #000 !important;
    }

    body.dark-background .main-nav #imageCount,
    body.dark-background .main-nav #projectCount,
    body.dark-background .main-nav #fieldNotesCount,
    body.dark-transition .main-nav #imageCount,
    body.dark-transition .main-nav #projectCount,
    body.dark-transition .main-nav #fieldNotesCount {
        background: #000 !important;
        background-color: #000 !important;
        color: #fff !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        opacity: 1;
    }

    body.dark-background #mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
    body.dark-background #mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount),
    body.dark-transition #mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
    body.dark-transition #mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
        background: #000 !important;
        background-color: #000 !important;
        color: #fff !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        opacity: 0.5 !important;
    }
}

/* Mobile navigation — centered pill, same as desktop, slightly tighter so it fits */
@media (max-width: 768px) {
    .main-nav,
    .main-nav.nav-idle,
    .main-nav.slide-to-top,
    .main-nav:not(.first-visit):not(.fade-in):not(.slide-to-top),
    #mainNav,
    #mainNav.main-nav {
        left: 50% !important;
        right: auto !important;
        width: max-content !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box;
        padding: 4px 14px;
        background: #fff !important;
        border-radius: 30px;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    .main-nav.first-visit,
    .main-nav.fade-in,
    #mainNav.main-nav.first-visit,
    #mainNav.main-nav.fade-in {
        top: 40px !important;
        transform: translate3d(-50%, calc(50vh - 40px - 50%), 0) !important;
        transform: translate3d(-50%, calc(50dvh - 40px - 50%), 0) !important;
    }

    .main-nav.slide-to-top,
    .main-nav:not(.first-visit):not(.fade-in):not(.slide-to-top),
    #mainNav.main-nav.slide-to-top {
        top: 40px !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    .main-nav.slide-to-top.is-scroll-hidden,
    .main-nav.is-scroll-hidden:not(.first-visit):not(.fade-in),
    #mainNav.main-nav.slide-to-top.is-scroll-hidden,
    #mainNav.main-nav.is-scroll-hidden {
        transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px))) !important;
    }
    
    .nav-links {
        width: auto;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        flex-wrap: nowrap;
        border: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }
    
    .nav-links li {
        display: inline-block;
        flex: 0 0 auto;
        border: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }
    
    .nav-links a {
        display: inline-block;
        width: auto;
        padding: 8px 4px;
        font-size: 12px;
        font-family: Helvetica, Arial, sans-serif;
        color: #000 !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    #imageCount,
    #projectCount,
    #fieldNotesCount {
        display: inline-block !important;
    }
    
    body.dark-background .main-nav,
    body.nav-on-dark .main-nav,
    body.fn-nav-on-dark .main-nav {
        background: #fff !important;
    }

    body.dark-background .main-nav .nav-links a,
    body.nav-on-dark .main-nav .nav-links a,
    body.fn-nav-on-dark .main-nav .nav-links a {
        color: #000 !important;
    }

    .nav-links li:has(a[href="/connect/"]),
    .nav-links li:has(a[href="/connect"]) {
        display: none !important;
    }
}

.aktuell-connect-fab {
    display: none;
}

@media (max-width: 768px) {
    .aktuell-connect-fab {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
        z-index: 998;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #111;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        outline: 1px solid rgba(255, 255, 255, 0.1);
        outline-offset: -1px;
        isolation: isolate;
        mix-blend-mode: normal;
        filter: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        transition-property: background-color, color, stroke, transform;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    }

    .aktuell-connect-fab svg {
        display: block;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: #fff;
        stroke: #fff;
        fill: none;
        mix-blend-mode: normal;
        filter: none;
    }

    .aktuell-connect-fab svg * {
        color: #fff;
        stroke: #fff;
        fill: none;
        mix-blend-mode: normal;
        filter: none;
    }

    .aktuell-connect-fab:active {
        transform: scale(0.96);
    }

    body:has(.page-connect) .aktuell-connect-fab,
    body.inspiration-viewer-open .aktuell-connect-fab,
    body.project-detail-open .aktuell-connect-fab {
        display: none !important;
    }
}

/* List view borders - light mode */
.projects-grid.list-view .project-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* List view awards styling - white dash for projects without awards */
.projects-grid.list-view .project-awards-list {
    color: #fff !important; /* White dash for projects without awards */
}

.projects-grid.list-view .project-item .project-awards-list {
    color: #fff !important; /* White dash for projects without awards */
}

/* Fix list view borders in dark mode */
body.dark-background .projects-grid.list-view .project-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

body.dark-background .projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

body.dark-background .project-thumbnail {
    border: none;
    outline-color: transparent;
}

body.dark-background .project-thumbnail.thumb-media-ready {
    outline-color: rgba(255, 255, 255, 0.1);
}

body.dark-background .projects-grid.list-view .project-item:hover .project-meta,
body.dark-background .projects-grid.list-view .project-item:hover .project-thumbnail,
body.dark-background .projects-grid.list-view .project-item:hover .project-awards-list {
    opacity: 0.4;
}

body.dark-background .projects-grid.list-view .project-item:hover .project-category {
    opacity: 0.2;
}

body.dark-background .projects-grid.list-view .project-item:hover {
    border-top: 1px solid #32cd32 !important; /* Lime green border on hover in dark mode too */
}

/* Hero Text Line Animation */
.hero-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-line.reveal {
    opacity: 1;
    transform: translateY(0px);
}

/* Dark background view controls - same hover behavior as nav */
body.dark-background .view-toggle {
    color: #ccc;
}

body.dark-background .projects-filter-pill .view-toggle,
body.dark-background .projects-filter-pill .density-toggle,
body.dark-transition .projects-filter-pill .view-toggle,
body.dark-transition .projects-filter-pill .density-toggle {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

body.dark-background .view-toggle:hover:not(.active) {
    opacity: 0.3 !important; /* Same as nav hover */
}

body.dark-background .view-toggle.active {
    color: #ccc; /* Keep same color as default */
    opacity: 0.3; /* Same as hover state */
    text-decoration: none;
}

body.dark-background .view-toggle.active:hover {
    opacity: 1 !important; /* Same as nav active hover */
}

/* Count pills — always a solid black chip with white numerals. */
#imageCount, #projectCount, #fieldNotesCount {
    background: #000;
    background-color: #000;
    color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    opacity: 1;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    min-width: 12px;
    text-align: center;
    box-sizing: border-box;
}

/* Inspiration Thumbnail Strip — reciprocal with #mainNav.
   Hidden at top. Slides in from the same top edge when the nav leaves. */
.inspiration-nav-strip {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px)));
    width: auto;
    max-width: 600px;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    overflow: hidden;
    pointer-events: none;
}

#mainNav.is-scroll-ready ~ .inspiration-nav-strip,
#mainNav.is-scroll-ready ~ #inspirationStrip {
    transition-property: transform, opacity;
    transition-duration: 320ms;
    transition-timing-function: var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
}

#mainNav.is-scroll-hidden ~ .inspiration-nav-strip,
#mainNav.is-scroll-hidden ~ #inspirationStrip,
.inspiration-nav-strip.is-scroll-shown {
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.inspiration-nav-strip.loading {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #mainNav.is-scroll-ready ~ .inspiration-nav-strip,
    #mainNav.is-scroll-ready ~ #inspirationStrip {
        transition-duration: 0.01ms;
    }
}

.thumbnail-container {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 10px 15px;
    gap: 2px; /* Much tighter spacing - buttoned up */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    perspective: 720px;
    transform-style: preserve-3d;
}

.thumbnail-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner look */
}

.nav-thumbnail {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    overflow: hidden;
    cursor: pointer !important;
    border: none;
    box-shadow: none;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
    position: relative;
    transform: none;
    transform-origin: center center;
    transform-style: preserve-3d;
    transition-property: transform, box-shadow, outline-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.nav-thumbnail:hover,
.nav-thumbnail:focus-visible,
.nav-thumbnail.active {
    border: none;
    box-shadow: inset 0 0 0 2px #000;
}

.nav-thumbnail:hover,
.nav-thumbnail:focus-visible {
    transform: scale(1.05);
    z-index: 2;
}

#inspirationStrip .nav-thumbnail:hover,
#inspirationStrip .nav-thumbnail:focus-visible {
    transform: scale(1.05) !important;
    -webkit-transform: scale(1.05) !important;
    transform-origin: center center;
    transform-style: flat;
    z-index: 2;
}

.nav-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform-origin: center center;
    backface-visibility: hidden;
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    animation: inspiration-thumb-reveal 0.58s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)) both;
}

.nav-thumbnail:active img {
    transform: scale(0.96);
}

@keyframes inspiration-thumb-reveal {
    from {
        opacity: 0;
        transform: rotateY(-72deg) translateZ(-8px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: rotateY(0deg) translateZ(0) scale(1);
    }
}

@keyframes inspiration-thumb-reveal-reduced {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Staggered flip-in along the strip (delay caps so very long strips stay snappy) */
.thumbnail-container .nav-thumbnail:nth-child(1) img { animation-delay: 0ms; }
.thumbnail-container .nav-thumbnail:nth-child(2) img { animation-delay: 10ms; }
.thumbnail-container .nav-thumbnail:nth-child(3) img { animation-delay: 20ms; }
.thumbnail-container .nav-thumbnail:nth-child(4) img { animation-delay: 30ms; }
.thumbnail-container .nav-thumbnail:nth-child(5) img { animation-delay: 40ms; }
.thumbnail-container .nav-thumbnail:nth-child(6) img { animation-delay: 50ms; }
.thumbnail-container .nav-thumbnail:nth-child(7) img { animation-delay: 60ms; }
.thumbnail-container .nav-thumbnail:nth-child(8) img { animation-delay: 70ms; }
.thumbnail-container .nav-thumbnail:nth-child(9) img { animation-delay: 80ms; }
.thumbnail-container .nav-thumbnail:nth-child(10) img { animation-delay: 90ms; }
.thumbnail-container .nav-thumbnail:nth-child(11) img { animation-delay: 100ms; }
.thumbnail-container .nav-thumbnail:nth-child(12) img { animation-delay: 110ms; }
.thumbnail-container .nav-thumbnail:nth-child(13) img { animation-delay: 120ms; }
.thumbnail-container .nav-thumbnail:nth-child(14) img { animation-delay: 130ms; }
.thumbnail-container .nav-thumbnail:nth-child(15) img { animation-delay: 140ms; }
.thumbnail-container .nav-thumbnail:nth-child(16) img { animation-delay: 150ms; }
.thumbnail-container .nav-thumbnail:nth-child(17) img { animation-delay: 160ms; }
.thumbnail-container .nav-thumbnail:nth-child(18) img { animation-delay: 170ms; }
.thumbnail-container .nav-thumbnail:nth-child(19) img { animation-delay: 180ms; }
.thumbnail-container .nav-thumbnail:nth-child(20) img { animation-delay: 190ms; }
.thumbnail-container .nav-thumbnail:nth-child(21) img { animation-delay: 200ms; }
.thumbnail-container .nav-thumbnail:nth-child(22) img { animation-delay: 210ms; }
.thumbnail-container .nav-thumbnail:nth-child(23) img { animation-delay: 220ms; }
.thumbnail-container .nav-thumbnail:nth-child(24) img { animation-delay: 230ms; }
.thumbnail-container .nav-thumbnail:nth-child(25) img { animation-delay: 240ms; }
.thumbnail-container .nav-thumbnail:nth-child(26) img { animation-delay: 250ms; }
.thumbnail-container .nav-thumbnail:nth-child(27) img { animation-delay: 260ms; }
.thumbnail-container .nav-thumbnail:nth-child(28) img { animation-delay: 270ms; }
.thumbnail-container .nav-thumbnail:nth-child(29) img { animation-delay: 280ms; }
.thumbnail-container .nav-thumbnail:nth-child(30) img { animation-delay: 290ms; }
.thumbnail-container .nav-thumbnail:nth-child(31) img { animation-delay: 300ms; }
.thumbnail-container .nav-thumbnail:nth-child(32) img { animation-delay: 310ms; }
.thumbnail-container .nav-thumbnail:nth-child(33) img { animation-delay: 320ms; }
.thumbnail-container .nav-thumbnail:nth-child(34) img { animation-delay: 330ms; }
.thumbnail-container .nav-thumbnail:nth-child(35) img { animation-delay: 340ms; }
.thumbnail-container .nav-thumbnail:nth-child(36) img { animation-delay: 350ms; }
.thumbnail-container .nav-thumbnail:nth-child(37) img { animation-delay: 360ms; }
.thumbnail-container .nav-thumbnail:nth-child(38) img { animation-delay: 370ms; }
.thumbnail-container .nav-thumbnail:nth-child(39) img { animation-delay: 380ms; }
.thumbnail-container .nav-thumbnail:nth-child(40) img { animation-delay: 390ms; }
.thumbnail-container .nav-thumbnail:nth-child(41) img { animation-delay: 400ms; }
.thumbnail-container .nav-thumbnail:nth-child(n+42) img { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .thumbnail-container .nav-thumbnail img {
        animation-name: inspiration-thumb-reveal-reduced;
        animation-duration: 0.22s;
        animation-timing-function: ease;
        animation-delay: 0ms !important;
        transform: none;
    }

    .nav-thumbnail:hover,
    .nav-thumbnail:focus-visible,
    #inspirationStrip .nav-thumbnail:hover,
    #inspirationStrip .nav-thumbnail:focus-visible {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

@media (hover: none) {
    .nav-thumbnail:hover,
    #inspirationStrip .nav-thumbnail:hover {
        transform: none !important;
        -webkit-transform: none !important;
        z-index: auto;
    }
}

/* Title sits under nav; gallery starts just below chrome. Adjacent-sibling
   padding never applied — a script sits between strip and page-content. */
.page-content:has(.inspiration-gallery) {
    padding-top: 0;
    margin-top: 0;
}

/* Animation Reset Button */
.reset-animation-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    cursor: pointer !important;
    z-index: 999;
    transition: all 0.2s ease;
}

.reset-animation-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
}

/* Page Content — settled state matches WordPress; slide classes override transform. */
.page-content {
    padding: 120px 0 40px;
    width: 100%;
    opacity: 1;
    transform: none;
    transition-property: transform, opacity;
    transition-duration: var(--aktuell-page-slide-duration, 0.5s);
    transition-timing-function: var(--aktuell-page-slide-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
}

.page-content.content-hidden {
    opacity: 0;
}

.page-content.content-visible {
    opacity: 1;
}

/* Slide transition states (transform only — no opacity fade) */
.page-content.slide-out-left {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
}

.page-content.slide-out-right {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
}

.page-content.slide-in-left {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
    transition: none;
}

.page-content.slide-in-right {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    transition: none;
}

.page-content.slide-active {
    transform: none;
    opacity: 1;
}

@view-transition {
    navigation: auto;
}

.page-article {
    width: 100%;
}

.page-title {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.page-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-transform: lowercase;
}

.page-text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-text p {
    margin-bottom: 20px;
}

/* Projects Hero Module — full width without 100vw (avoids horizontal scrollbars) */
.projects-hero-module {
    width: 100%;
    max-width: 100%;
    position: relative;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 60px;
    gap: 40px; /* Space between the two hero texts */
    overflow-x: clip;
}

.hero-text {
    text-align: left;
    padding: 0 30px;
    max-width: 600px;
    margin: 0;
}

.hero-text p,
.hero-text h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    letter-spacing: 0;
    margin: 0;
    font-weight: 400;
}

.hero-text {
    transition: opacity 0.1s ease-out; /* Smooth fade transition */
}

/* Blinking animation for the time - DISABLED */
.blinking-time {
    /* animation: clock-blink 1s steps(1, end) infinite; */
    opacity: 1; /* Keep time visible without blinking */
}

@keyframes clock-blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Projects Section */
.projects-section {
    margin: 80px auto 0;
    padding: 0 30px;
    width: 100%;
}

.projects-subheadline-container {
    text-align: left;
    margin: 0 0 60px 0;
}

.projects-subheadline {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    letter-spacing: 0.5px;
    margin: 0;
    display: inline-block;
}

body.dark-background .projects-subheadline {
    color: #fff;
}

.projects-footer-container {
    position: fixed;
    bottom: 20px;
    left: 40px;
    text-align: left;
    z-index: 1000;
}

.projects-footer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #fff !important;
    letter-spacing: 0.5px;
    margin: 0;
    background: none !important;
    padding: 0;
    border-radius: 0;
    display: inline-block;
    cursor: default;
    transition: none;
    text-decoration: none;
}

.projects-footer:hover {
    /* No hover effects - just clean white text */
}

.projects-footer:active {
    /* No active effects */
}

/* Dark background support - keep white text */
body.dark-background .projects-footer {
    background: none !important;
    color: #fff !important;
}

body.dark-background .projects-footer:hover {
    /* No hover effects */
}

/* Projects Grid — column count from --projects-cols (1–3), default 3 */
.projects-grid {
    display: grid;
    --projects-cols: 3;
    grid-template-columns: repeat(var(--projects-cols, 3), 1fr);
    gap: 80px; /* Increased from 60px to 80px for more white space */
    padding-bottom: 200px; /* Added padding after thumbnails */
    width: 100%;
    max-width: none;
}

.project-item {
    position: relative; /* For overlay positioning */
    width: 100%;
}

.project-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10; /* Changed from 16/9 to 16/10 */
    overflow: hidden;
    background: #000;
    border-radius: 4px; /* Reduced from 8px to 4px */
    margin-bottom: 10px; /* Reduced from 30px to 10px for closer text */
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Slower, smoother transition */
    cursor: pointer !important;
    border: none;
    outline: 1px solid transparent;
    outline-offset: -1px;
    box-shadow: none;
}

.project-thumbnail.thumb-media-ready {
    outline-color: rgba(0, 0, 0, 0.1);
    transition-property: transform, filter, outline-color;
    transition-duration: 0.8s, 0.3s, 280ms;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1), ease, var(--aktuell-ease, cubic-bezier(0.2, 0, 0, 1));
}

/* Overlay is inert — never dim the tile or the rest of the page. */
.project-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: none;
    z-index: 999;
    pointer-events: none;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item.hovered .project-hover-overlay,
.projects-grid.thumbnail-hovered .project-item .project-hover-overlay,
.projects-grid.thumbnail-hovered .project-item:not(.hovered) .project-hover-overlay {
    opacity: 0;
    visibility: hidden;
    background: transparent;
}

/* Stage 2: Keep category at same opacity as Stage 1 (no change) */

/* Subtle loading blink effect - 60% to 100% opacity */
.project-thumbnail.loading {
    animation: project-blink 1.2s ease-in-out infinite;
}

@keyframes project-blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1.0; }
}

/* Project items - dramatic opacity animation tied to scroll */
.project-item {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Add smooth transitions to the existing dark-background class */
body.dark-background {
    background: #000 !important;
    color: #fff !important;
    transition: background-color 0.8s ease !important;
}

/* Add transitions to all elements that change in dark mode */
.nav, .nav a, .nav .pill, .hero-module, .projects-subheadline, .view-toggle {
    transition: color 0.8s ease, background 0.8s ease;
}

/* Make sure nav pills transition smoothly */
#imageCount, #projectCount, #fieldNotesCount {
    transition-property: background-color, color, opacity, box-shadow;
    transition-duration: 0.8s;
    transition-timing-function: ease;
}

/* Project thumbnail hover effects */
.project-thumbnail {
    position: relative; /* For award icon positioning */
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.3s ease; /* Added filter transition */
}

/* Mini slideshow for multiple images */
.project-thumbnail .slideshow-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-thumbnail .slideshow-images img,
.project-thumbnail .slideshow-images video,
.project-thumbnail .slideshow-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1; /* Behind active element */
    transition: opacity 0.45s cubic-bezier(0.05, 0.7, 0.1, 1);
    cursor: pointer !important;
}

.project-thumbnail .slideshow-images img.active,
.project-thumbnail .slideshow-images video.active,
.project-thumbnail .slideshow-video.active {
    opacity: 1;
    z-index: 10; /* On top of other elements */
}

/* Force pointer cursor on slideshow elements */
.project-thumbnail .slideshow-images,
.project-thumbnail .slideshow-images *,
.project-thumbnail .project-awards,
.project-thumbnail .project-awards *,
.project-thumbnail-wrap > .project-awards,
.project-thumbnail-wrap > .project-awards *,
.project-thumbnail .award-icon,
.project-thumbnail-wrap .award-icon {
    cursor: pointer !important;
}

/* Zoom the still/video only — awards live on the wrap, outside this transform. */
.projects-grid:not(.list-view):not(.presentation-view) .project-thumbnail img,
.projects-grid:not(.list-view):not(.presentation-view) .project-thumbnail video {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item:hover .project-thumbnail img,
.projects-grid:not(.list-view):not(.presentation-view) .project-item:hover .project-thumbnail video {
    transform: scale(1.015);
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item:active .project-thumbnail img,
.projects-grid:not(.list-view):not(.presentation-view) .project-item:active .project-thumbnail video {
    transform: scale(0.96);
}

.project-thumbnail:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition-property: box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* OLD OPACITY HOVER EFFECTS REMOVED - Now using black overlay system */

/* OLD KEEP HOVERED OPACITY RULES REMOVED - Now using black overlay system */

/* OLD CATEGORY OPACITY RULE REMOVED - Now using black overlay system */



/* Password Modal - Frosted Glass Effect */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, backdrop-filter 0.4s ease;
}

.password-modal.active {
    opacity: 1;
    visibility: visible;
}

.password-content {
    text-align: center;
    max-width: 300px;
    width: 90%;
}

.password-content input {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
}

.password-content input:focus {
    outline: none;
}

.password-disclaimer {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #666 !important;
    margin-top: 20px;
    margin-bottom: 0;
    line-height: 1.4;
    text-align: center;
}

/* Ensure disclaimer text stays dark even in dark mode */
body.dark-background .password-disclaimer {
    color: #666 !important;
}

/* Draggable Music Widget */
.music-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 220px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 25px;
    z-index: 10000; /* Above easter egg */
    cursor: move;
    transition: all 0.3s ease;
    display: none !important; /* Completely hidden until intro completes */
    font-family: Helvetica, Arial, sans-serif;
}

/* Music widget visible state (after intro animation) */
.music-widget.intro-complete {
    display: block !important; /* Show the widget */
    opacity: 0.8;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
    animation: slideInFromBottom 0.6s ease-out;
}

/* Slide in animation for the music widget */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

.music-widget.intro-complete:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.music-controls {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    gap: 15px;
}

.music-btn {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #000;
    font-family: monospace;
}

.music-btn:hover {
    opacity: 0.6;
    transform: none;
}

.music-btn:focus,
.music-btn:active {
    outline: none;
    border: none;
}

.music-info {
    flex: 1;
    min-width: 0;
}

.music-title {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.music-title-scroll {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-endless 20s linear infinite;
}

@keyframes scroll-endless {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Dark mode support */
body.dark-background .music-widget {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-background .music-title {
    color: #fff;
}

body.dark-background .music-btn {
    color: #fff;
}

body.dark-background .music-btn:hover {
    opacity: 0.6;
}



/* Hidden YouTube player */
#youtubePlayer {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}



.password-content input::placeholder {
    color: #999;
    letter-spacing: normal;
}

/* Awards System — desktop: tucked top-left (clears 4px tile radius).
   Pinned to .project-thumbnail-wrap, not the scaled img/video. */
.project-awards {
    --award-inset: 10px;
    --award-gap: 5px;
    --award-size: 32px;
    --award-size-lg: 36px;
    --award-size-clio: 48px;
    --award-clio-shift: -12px;
    position: absolute;
    top: var(--award-inset);
    left: var(--award-inset);
    right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--award-gap);
    z-index: 50; /* Much higher z-index to stay above slideshow videos */
    pointer-events: none; /* static labels; tile is the hit target */
    transform: none;
}

.project-thumbnail-wrap > .project-awards {
    position: absolute;
    top: var(--award-inset, 10px);
    left: var(--award-inset, 10px);
    right: auto;
    z-index: 50;
    transform: none;
}

.award-icon {
    width: var(--award-size, 32px);
    height: var(--award-size, 32px);
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: 0.3s, 0.2s;
    transition-timing-function: ease, ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.award-icon:hover {
    opacity: 1;
}

.award-icon.cannes {
    background-image: url('/wp-content/uploads/awards/cannes.png');
}

.award-icon.emmy {
    background-image: url('/wp-content/uploads/awards/emmy.png');
}

.award-icon.clio {
    background-image: url('/wp-content/uploads/awards/clio.png');
    width: var(--award-size-clio, 48px) !important;
    height: var(--award-size-clio, 48px) !important;
    background-size: 120% !important; /* Moderate zoom to crop whitespace but keep logo intact */
    background-position: center var(--award-clio-shift, -12px) !important; /* Move logo much higher above the container */
}

.award-icon.dad {
    background-image: url('/wp-content/uploads/awards/dad.png');
    width: var(--award-size-lg, 36px) !important;
    height: var(--award-size-lg, 36px) !important;
    background-size: contain !important;
}

.award-icon.oneshow {
    background-image: url('/wp-content/uploads/awards/oneshow.png');
    width: var(--award-size-lg, 36px) !important;
    height: var(--award-size-lg, 36px) !important;
    background-size: contain !important;
}

/* Removed old opacity hover effects - now using overlay approach */

/* Fullscreen slideshow easter egg */
.fullscreen-slideshow {
    --slideshow-fade-ms: 600ms;
    --slideshow-ease: var(--aktuell-ease, cubic-bezier(0.2, 0, 0, 1));
    --slideshow-inset: clamp(32px, 7vmin, 80px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 800ms, 800ms;
    transition-timing-function: var(--slideshow-ease);
    cursor: pointer !important;
}

.fullscreen-slideshow.active {
    opacity: 1;
    visibility: visible;
}

.slideshow-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
}

.slideshow-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--slideshow-fade-ms);
    transition-timing-function: var(--slideshow-ease);
}

.slideshow-slide.is-active {
    opacity: 1;
}

.slideshow-item {
    display: block;
    opacity: 1;
    object-position: center;
}

.slideshow-slide.is-cover .slideshow-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow-slide.is-inset .slideshow-item {
    position: relative;
    width: auto;
    height: auto;
    max-width: calc(100vw - 2 * var(--slideshow-inset));
    max-height: calc(100vh - 2 * var(--slideshow-inset));
    object-fit: contain;
    outline: 1px solid rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .fullscreen-slideshow {
        --slideshow-fade-ms: 80ms;
        transition-duration: 80ms, 80ms;
    }
}

.slideshow-counter {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.slideshow-exit {
    position: absolute;
    top: 30px;
    right: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer !important;
    transition: opacity 0.3s ease;
}

.slideshow-exit:hover {
    opacity: 1;
    color: #fff;
}

/* DISABLED: Thumbnail hover should only be triggered by thumbnail hover, not project item hover */
/* 
.project-item:hover .project-title {
    opacity: 0.5;
}

.project-item:hover .project-category {
    opacity: 0.3;
}
*/

/* Awards System — keep inset/size vars; do not reset to raw px */
.project-awards {
    position: absolute;
    top: var(--award-inset, 10px);
    left: var(--award-inset, 10px);
    right: auto;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--award-gap, 5px);
    transform: none;
}

/* Mouse-following tooltip - Safari default style */
.tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: normal;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tooltip.show {
    opacity: 1;
}



@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.award-icon {
    width: var(--award-size, 32px);
    height: var(--award-size, 32px);
    border-radius: 4px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.award-icon.cannes {
    background-image: url('/wp-content/uploads/awards/cannes.png');
}

.award-icon.emmy {
    background-image: url('/wp-content/uploads/awards/emmy.png');
}

.award-icon.clio {
    background-image: url('/wp-content/uploads/awards/clio.png');
    width: var(--award-size-clio, 48px) !important;
    height: var(--award-size-clio, 48px) !important;
    background-size: 120% !important; /* Moderate zoom to crop whitespace but keep logo intact */
    background-position: center var(--award-clio-shift, -12px) !important; /* Move logo much higher above the container */
}

.award-icon.dad {
    background-image: url('/wp-content/uploads/awards/dad.png');
    width: var(--award-size-lg, 36px) !important;
    height: var(--award-size-lg, 36px) !important;
    background-size: contain !important;
}

.award-icon.oneshow {
    background-image: url('/wp-content/uploads/awards/oneshow.png');
    width: var(--award-size-lg, 36px) !important;
    height: var(--award-size-lg, 36px) !important;
    background-size: contain !important;
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none !important; /* Force remove any default borders */
    outline: none !important; /* Force remove any default outlines */
    box-shadow: none !important; /* Force remove any box shadows */
    background: none !important; /* Remove any background that might show as border */
}

.project-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer !important;
    border: none !important; /* Force remove any default borders */
    outline: none !important; /* Force remove any default outlines */
    box-shadow: none !important; /* Force remove any box shadows */
    background: none !important; /* Remove any background that might show as border */
    display: block;
}

/* Force remove borders from any img or video inside project thumbnails */
.project-thumbnail img,
.project-thumbnail video {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* AGGRESSIVE border removal - debug mode - EXCLUDING award icons and main thumbnail */

.project-thumbnail *:not(.award-icon),
.project-thumbnail::before,
.project-thumbnail::after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Remove background-image from everything EXCEPT award icons */
.project-thumbnail *:not(.award-icon) {
    background-image: none !important;
}

/* Remove any WordPress default styling that might add borders */
.project-thumbnail img {
    box-sizing: border-box !important;
    vertical-align: top !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
}

/* Media well stays black while the still/video loads (letterbox too). */
.project-thumbnail {
    background: #000 !important;
}

.project-meta {
    padding: 0 5px; /* Removed top padding to bring text closer to thumbnail */
}

.project-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2; /* Slightly increased for better readability */
    color: #000;
    letter-spacing: 0.5px; /* Match Selected case studies */
    margin: 0 0 2px 0;
    font-weight: normal;
    opacity: 1;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

.project-category {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2; /* Slightly increased for better readability */
    color: #000;
    letter-spacing: 0.5px; /* Match Selected case studies */
    margin: 0;
    font-weight: normal;
    opacity: 0.5;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

/* Responsive adjustments for projects section */
@media (max-width: 1024px) {
    .projects-section {
        padding: 0 40px;
    }
    
    .projects-grid:not(.list-view):not(.presentation-view) {
        grid-template-columns: repeat(var(--projects-cols, 3), 1fr);
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .projects-section {
        padding: 0 30px;
        margin-top: 60px;
    }
    
    .projects-subheadline {
        margin-bottom: 40px;
        font-size: 12px !important; /* Back to original size */
        white-space: nowrap;
    }
    
    /* Aggressive single line layout - force everything inline */
    .projects-subheadline-container {
        display: flex !important;
        flex-direction: row !important; /* Force horizontal */
        flex-wrap: nowrap !important; /* Never wrap */
        gap: 8px !important; /* Very tight spacing */
        align-items: center !important;
        overflow-x: auto !important; /* Scroll if needed */
        width: 100% !important;
    }
    
    /* Force h2 to be inline */
    .projects-subheadline {
        display: inline-block !important;
        flex-shrink: 0 !important; /* Don't shrink */
        margin: 0 !important; /* Remove margins */
    }
    
    /* Smaller view controls on mobile */
    .view-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important; /* Very tight spacing between toggles */
        flex-shrink: 0 !important; /* Prevent shrinking */
        align-items: center !important;
    }
    
    .view-toggle {
        font-size: 12px !important; /* Back to original size */
        white-space: nowrap !important; /* Prevent wrapping */
        padding: 0 !important; /* Remove any padding */
        margin: 0 !important; /* Remove any margin */
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    .projects-grid:not(.list-view):not(.presentation-view) {
        --projects-cols: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Extra small screens - even more aggressive */
@media (max-width: 480px) {
    .projects-subheadline {
        font-size: 12px !important; /* Keep original size */
        margin: 0 !important;
    }
    
    .projects-subheadline-container {
        gap: 6px !important; /* Ultra tight spacing */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .view-controls {
        gap: 6px !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    .view-toggle {
        font-size: 12px !important; /* Keep original size */
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 0 20px;
    }
    
    .projects-grid {
        gap: 30px;
    }
}

/* Grid Module System — full width without 100vw (avoids horizontal scroll) */
.grid-module {
    width: 100%;
    max-width: 100%;
    position: relative;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 1200px;
    box-sizing: border-box;
    overflow-x: clip;
}

.grid-module.hero-module {
    /* Hero module styling - same as regular grid module now */
}

/* Copyright module - make it much shorter */
.page-about .grid-module:nth-child(3) {
    min-height: 60px; /* Ultra minimal height for just copyright */
}

.page-about .grid-module:nth-child(3) .grid-container {
    height: calc(60px - 40px); /* Adjust container height accordingly */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
    height: calc(1200px - 40px); /* Full height minus padding */
}

.grid-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Updated to match navigation font size */
    color: #000;
    height: 100%; /* Full height of the container */
    padding: 10px;
    transition: font-size 0.3s ease;
}

.grid-item.span-two {
    grid-column: span 2;
}

/* Mobile responsiveness for about page */
@media (max-width: 768px) {
    .page-about .grid-container {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 15px;
        padding: 20px;
    }
    
    .page-about .grid-item {
        height: auto;
        min-height: 150px;
        padding: 15px;
        font-size: 12px;
    }
    
    .page-about .grid-item.span-two {
        grid-column: span 2;
    }
    
    /* Hide empty grid items on mobile - only show items with content */
    .page-about .grid-item:empty {
        display: none;
    }
    
    /* Ensure image spans full width in mobile */
    .page-about .grid-item img {
    max-width: 100%;
    height: auto;
    }
    
    /* Adjust text content for mobile */
    .page-about .grid-item br {
        display: block;
        margin: 10px 0;
    }
}

/* About page specific - tighter spacing between image and text */
.page-about .hero-module .grid-container {
    grid-template-rows: auto auto 1fr 1fr 1fr 1fr; /* Auto-size first two rows for tighter spacing */
    gap: 2px; /* Very tight gap for about page */
    row-gap: 2px; /* Specifically reduce vertical spacing */
    column-gap: 10px; /* Keep horizontal spacing normal */
}

/* Force light grey border on about page image with thicker bottom */
.page-about img {
    border: 18px solid #f8f8f8 !important;
    border-bottom: 38px solid #f8f8f8 !important;
    box-sizing: border-box !important;
}

.page-about .hero-module .grid-item {
    height: auto; /* Allow natural height instead of fixed height */
}

/* Fix work experience layout - override flex to allow proper line breaks and make wider */
.page-about .grid-module:nth-child(2) .grid-container .grid-item:nth-child(2) {
    display: block !important;
    grid-column: span 2; /* Make it span 2 columns for more width */
}
.page-about .about-cv-we > .grid-item:nth-child(2),
.page-about .about-cv-body {
    white-space: normal !important;
}

/* Date styling for work experience */
.work-date {
    color: #666 !important;
}


/* Random font size variations */
.grid-item.font-normal { font-size: 8px; }
.grid-item.font-medium { font-size: 12px; }
.grid-item.font-large { font-size: 16px; }
.grid-item.font-huge { font-size: 24px; }
.grid-item.font-massive { font-size: 32px; }
.grid-item.font-gigantic { font-size: 48px; }

/* Inspiration Gallery — editorial mosaic, not two even columns */
.inspiration-gallery {
    width: 100%;
    padding: 20vh 20px 0;
    min-height: 100vh;
    box-sizing: border-box;
}

.inspiration-item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    contain: layout style;
    box-sizing: border-box;
}

.inspiration-image-container {
    margin-bottom: 20px;
    padding: 0;
    text-align: left;
    contain: layout;
}

.inspiration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    transition: transform 1.5s ease;
    contain: layout;
    outline: none;
    border: none;
    box-shadow: none;
}

.inspiration-item.loaded {
    opacity: 1;
}

/* Prevent layout shift during loading */
.inspiration-gallery {
    min-height: 100vh;
}

@media (min-width: 801px) {
    .inspiration-gallery,
    .inspiration-gallery.inspiration-gallery--mosaic {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: dense;
        align-items: start;
        justify-items: stretch;
        column-gap: 0;
        row-gap: 0;
        padding-top: 20vh;
    }

    .inspiration-item {
        width: auto;
    }

    .inspiration-item:nth-child(10n + 1) {
        grid-column: 1 / 8;
        margin-top: 0;
        margin-bottom: 88px;
        padding: 0 28px 0 8px;
    }

    .inspiration-item:nth-child(10n + 2) {
        grid-column: 8 / 13;
        margin-top: 72px;
        margin-bottom: 52px;
        padding: 0 12px 0 36px;
    }

    .inspiration-item:nth-child(10n + 3) {
        grid-column: 2 / 10;
        margin-top: 16px;
        margin-bottom: 120px;
        padding: 0 20px 0 0;
    }

    .inspiration-item:nth-child(10n + 4) {
        grid-column: 6 / 13;
        margin-top: 64px;
        margin-bottom: 72px;
        padding: 0 8px 0 40px;
    }

    .inspiration-item:nth-child(10n + 5) {
        grid-column: 2 / 12;
        margin-top: 8px;
        margin-bottom: 140px;
        padding: 0 48px;
    }

    .inspiration-item:nth-child(10n + 6) {
        grid-column: 1 / 6;
        margin-top: 48px;
        margin-bottom: 64px;
        padding: 0 16px 0 24px;
    }

    .inspiration-item:nth-child(10n + 7) {
        grid-column: 6 / 13;
        margin-top: 28px;
        margin-bottom: 96px;
        padding: 0 24px 0 12px;
    }

    .inspiration-item:nth-child(10n + 8) {
        grid-column: 3 / 11;
        margin-top: 4px;
        margin-bottom: 112px;
        padding: 0 32px;
    }

    .inspiration-item:nth-child(10n + 9) {
        grid-column: 7 / 13;
        margin-top: 96px;
        margin-bottom: 48px;
        padding: 0 16px 0 8px;
    }

    .inspiration-item:nth-child(10n + 10) {
        grid-column: 1 / 7;
        margin-top: 20px;
        margin-bottom: 128px;
        padding: 0 12px 0 32px;
    }
}

.inspiration-image-container {
    margin-bottom: 20px; /* Reduced margin for closer caption */
    padding: 0;
    text-align: center;
}

.inspiration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 1.5s ease;
    outline: none;
    border: none;
    box-shadow: none;
}

.inspiration-image:hover {
    transform: scale(1.02);
}

.inspiration-caption {
    text-align: left;
    max-width: none;
    margin: 0;
    text-wrap: pretty;
}

.inspiration-caption p {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 10px; /* Reduced by 2px */
    line-height: 1.6;
    color: #666;
    letter-spacing: 0.5px;
    font-style: normal; /* Removed italic */
    margin: 0;
    text-align: left;
    text-wrap: pretty;
}

.inspiration-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.inspiration-instructions {
    margin-top: 60px;
    padding: 40px;
    background: #fafafa;
    border: 1px solid #eee;
}

.inspiration-instructions p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    margin-bottom: 20px;
}

.inspiration-instructions ol {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.inspiration-instructions li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Contact page centered layout */
.contact-centered {
    margin-top: 30vh;
}

/* Contact sits in the first viewport; booking scrolls in below. */
body:has(.contact-centered) .page-content {
    max-height: none;
    overflow: visible;
}

/* Mobile: one column, slight width/offset so it is not a perfect stack */
@media (max-width: 800px) {
    .inspiration-gallery,
    .inspiration-gallery.inspiration-gallery--mosaic {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 20vh 16px 0;
        columns: unset;
        column-gap: unset;
        overflow-x: hidden;
        max-width: 100%;
    }

    .inspiration-item {
        grid-column: auto;
        break-inside: unset;
        max-width: 100%;
        box-sizing: border-box;
    }

    .inspiration-item:nth-child(5n + 1) {
        width: 100%;
        margin: 0 0 40px;
        padding: 0;
    }

    .inspiration-item:nth-child(5n + 2) {
        width: 92%;
        margin: 0 auto 28px 0;
        padding: 0;
    }

    .inspiration-item:nth-child(5n + 3) {
        width: 88%;
        margin: 0 0 48px auto;
        padding: 0;
    }

    .inspiration-item:nth-child(5n + 4) {
        width: 96%;
        margin: 0 0 32px 2%;
        padding: 0;
    }

    .inspiration-item:nth-child(5n + 5) {
        width: 90%;
        margin: 0 0 44px 0;
        padding: 0;
    }

    .inspiration-image-container {
        padding: 0;
    }

    .inspiration-caption {
        font-size: 10px;
        padding: 0;
        text-align: left;
    }
}

/* Sort toggle styling */
.projects-subheadline-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* View Controls */
.view-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.view-toggle {
    background: none;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #666;
    cursor: pointer !important;
    padding: 0;
    text-decoration: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.3s ease;
}

.view-toggle:hover:not(.active) {
    opacity: 0.3 !important; /* Same as nav hover effect */
}

.view-toggle.active {
    color: #666; /* Keep same color as default */
    opacity: 0.3; /* Same as hover state */
    text-decoration: none;
}

.view-toggle.active:hover {
    opacity: 1; /* Same as nav active hover - turn fully black */
}

/* Ultra-smooth Grid Animations */
.projects-grid {
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
    position: relative;
}

.project-item {
    position: relative;
    background: transparent !important;
}

/* Smooth movement animation */
.project-item.moving {
    z-index: 100;
    background: transparent !important;
}

.project-item.moving .project-thumbnail {
    background: #000 !important;
}

.project-item.moving .project-title,
.project-item.moving .project-category {
    color: inherit !important;
    background: transparent !important;
}

/* Extra smooth transition for moving items */
.project-item.smooth-move {
    transition: transform 2.2s var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
}

/* Simple settling - no bounce */
.project-item.settling {
    animation: none;
}

/* List View */
.projects-grid.list-view {
    display: flex;
        flex-direction: column;
    gap: 0;
}

.projects-grid.list-view .project-item {
    display: grid;
    grid-template-columns: 100px 2fr 1fr 0.8fr 0.8fr;
    gap: 20px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
}

.projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.projects-grid.list-view .project-item .project-meta,
.projects-grid.list-view .project-item .project-thumbnail,
.projects-grid.list-view .project-item .project-awards-list,
.projects-grid.list-view .project-item .project-category,
.projects-grid.list-view .project-item .project-count,
.projects-grid.list-view .project-item .project-year {
    transition: opacity 0.3s ease;
}

.projects-grid.list-view .project-item:hover .project-meta,
.projects-grid.list-view .project-item:hover .project-thumbnail,
.projects-grid.list-view .project-item:hover .project-awards-list,
.projects-grid.list-view .project-item:hover .project-count,
.projects-grid.list-view .project-item:hover .project-year {
    opacity: 0.4;
}

.projects-grid.list-view .project-item:hover .project-category {
    opacity: 0.2;
}

.projects-grid.list-view .project-item:hover {
    border-top: 1px solid #32cd32 !important; /* Lime green border on hover */
}

.projects-grid.list-view .project-thumbnail {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
}

.projects-grid.list-view .project-meta {
    display: contents; /* Make children participate in parent grid */
}

/* Column 2: Project Info */
.projects-grid.list-view .project-info {
    /* Title & Category column */
}

.projects-grid.list-view .project-title {
    margin: 0 0 3px 0;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.5px; /* Match Selected case studies */
}

.projects-grid.list-view .project-category {
    margin: 0;
    font-size: 10px;
    opacity: 0.6;
    letter-spacing: 0.5px; /* Match Selected case studies */
}

/* Column 3: Awards */
.projects-grid.list-view .project-awards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.projects-grid.list-view .award-badge {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

.projects-grid.list-view .no-awards {
    font-size: 12px;
    opacity: 0.3;
}

/* Hide additional columns in grid view */
.project-awards-list,
.project-count,
.project-year {
    display: none;
    font-variant-numeric: tabular-nums;
}

/* Hide thumbnail award icons in list view */
.projects-grid.list-view .project-awards {
    display: none !important;
}

/* Show and style additional columns only in list view */
.projects-grid.list-view .project-awards-list,
.projects-grid.list-view .project-count,
.projects-grid.list-view .project-year {
    display: block;
}

/* Columns 3-5: Align with project title */
.projects-grid.list-view .project-awards-list {
    margin-top: 1px; /* Align with title baseline */
}

.projects-grid.list-view .project-count {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 1px; /* Align with title baseline */
}

.projects-grid.list-view .project-year {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 1px; /* Align with title baseline */
    text-align: right;
}

/* Mobile list view adjustments */
@media (max-width: 768px) {
    .projects-grid.list-view .project-item {
        grid-template-columns: 80px 3fr 1fr 0.7fr 0.7fr;
        gap: 15px;
        padding: 12px 0;
    }
    
    .projects-grid.list-view .project-thumbnail {
        width: 80px;
        height: 55px;
    }
}

@media (max-width: 480px) {
    .projects-grid.list-view .project-item {
        grid-template-columns: 70px 4fr 0.8fr 0.6fr 0.6fr;
        gap: 10px;
        padding: 10px 0;
    }
    
    .projects-grid.list-view .project-thumbnail {
        width: 70px;
        height: 48px;
    }
    
    .projects-grid.list-view .project-title,
    .projects-grid.list-view .project-category {
        font-size: 10px;
    }

    .projects-grid.list-view .project-count,
    .projects-grid.list-view .project-year {
        font-size: 11px;
    }
}

/* Mobile: centered white pill, black type — do not stretch edge-to-edge */
@media (max-width: 768px) {
    nav#mainNav.main-nav,
    #mainNav,
    .main-nav,
    body.dark-background .main-nav,
    body.dark-transition .main-nav,
    body.nav-on-dark .main-nav,
    body.fn-nav-on-dark .main-nav,
    body[class*="dark"] .main-nav {
        left: 50% !important;
        right: auto !important;
        width: max-content !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
        padding: 4px 14px !important;
        background: #fff !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    .main-nav.first-visit,
    .main-nav.fade-in,
    #mainNav.main-nav.first-visit,
    #mainNav.main-nav.fade-in {
        top: 40px !important;
        transform: translate3d(-50%, calc(50vh - 40px - 50%), 0) !important;
        transform: translate3d(-50%, calc(50dvh - 40px - 50%), 0) !important;
    }

    .main-nav.slide-to-top,
    .main-nav:not(.first-visit):not(.fade-in):not(.slide-to-top),
    #mainNav.main-nav.slide-to-top {
        top: 40px !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    .main-nav.slide-to-top.is-scroll-hidden,
    .main-nav.is-scroll-hidden:not(.first-visit):not(.fade-in),
    #mainNav.main-nav.slide-to-top.is-scroll-hidden,
    #mainNav.main-nav.is-scroll-hidden {
        transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px))) !important;
    }

    .main-nav .nav-links,
    ul.nav-links {
        display: flex !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    .main-nav .nav-links li,
    .nav-links li {
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav .nav-links a,
    .nav-links a,
    body.dark-background .main-nav .nav-links a,
    body.dark-background .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
    body.dark-background .main-nav .nav-links a.active,
    body.dark-background .main-nav .nav-links a[aria-current="page"],
    body.nav-on-dark .main-nav .nav-links a,
    body.nav-on-dark .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
    body.fn-nav-on-dark .main-nav .nav-links a,
    body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]),
    body.fn-nav-on-dark .main-nav .nav-links a.active,
    body.fn-nav-on-dark .main-nav .nav-links a[aria-current="page"] {
        display: inline-block !important;
        width: auto !important;
        padding: 8px 4px !important;
        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 12px !important;
        text-align: center !important;
        color: #000 !important;
    }

    body.dark-background .main-nav .nav-links a.active,
    body.dark-background .main-nav .nav-links a[aria-current="page"],
    body.nav-on-dark .main-nav .nav-links a.active,
    body.nav-on-dark .main-nav .nav-links a[aria-current="page"],
    body.fn-nav-on-dark .main-nav .nav-links a.active,
    body.fn-nav-on-dark .main-nav .nav-links a[aria-current="page"] {
        opacity: 1 !important;
    }

    #imageCount,
    #projectCount,
    #fieldNotesCount,
    .main-nav #imageCount,
    .main-nav #projectCount,
    .main-nav #fieldNotesCount {
        display: inline-block !important;
    }
}