/* ==========================================================================
           PRECOMPILED STATIC TAILWIND UTILITY RULES (115 CLASSES)
           Zero-Runtime Overhead - 100% Drop-In Replacement for cdn.tailwindcss.com
           ========================================================================== */

        /* 1. Layout & Flexbox */
        .fixed { position: fixed; }
        .relative { position: relative; }
        .inset-0 { inset: 0; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        .inline-flex { display: inline-flex; }
        .items-center { align-items: center; }
        .justify-center { justify-content: center; }
        .hidden { display: none !important; }
        .w-0 { width: 0; }
        .w-12 { width: 3rem; }
        .w-64 { width: 16rem; }
        .w-full { width: 100%; }
        .h-1 { height: 0.25rem; }
        .h-full { height: 100%; }
        .h-px { height: 1px; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-5xl { max-width: 64rem; }
        .min-h-screen { min-height: 100vh; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .overflow-hidden { overflow: hidden; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-50 { z-index: 50; }
        .z-\[9990\] { z-index: 9990; }

        /* 2. Spacing (Padding, Margin & Gaps) */
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-5 { gap: 1.25rem; }
        .gap-8 { gap: 2rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
        .pb-4 { padding-bottom: 1rem; }
        .pb-10 { padding-bottom: 2.5rem; }
        .pt-2 { padding-top: 0.5rem; }
        .pt-8 { padding-top: 2rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-12 { margin-top: 3rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-8 { margin-bottom: 2rem; }

        /* 3. Typography & Text Styling */
        .font-bold { font-weight: 700; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-5xl { font-size: 3rem; line-height: 1; }
        .leading-relaxed { line-height: 1.625; }
        .text-center { text-align: center; }
        .uppercase { text-transform: uppercase; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-wider { letter-spacing: 0.05em; }
        .tracking-\[0\.18em\] { letter-spacing: 0.18em; }
        .no-underline { text-decoration-line: none; }
        .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

        /* Color utilities */
        .text-white { color: #ffffff; }
        .text-stone-100 { color: #f5f5f4; }
        .text-stone-200 { color: #e7e5e4; }
        .text-stone-300 { color: #d6d3d1; }
        .text-stone-400 { color: #a8a29e; }
        .text-\[\#ff7575\] { color: #ff7575; }

        /* 4. Backgrounds & Gradients */
        .bg-stone-800 { background-color: #292524; }
        .bg-stone-950 { background-color: #0c0a09; }
        .bg-stone-900\/80 { background-color: rgba(28, 25, 23, 0.8); }
        .bg-stone-950\/95 { background-color: rgba(12, 10, 9, 0.95); }
        .bg-fixed { background-attachment: fixed; }
        .bg-center { background-position: center; }
        .bg-cover { background-size: cover; }
        .bg-no-repeat { background-repeat: no-repeat; }

        /* Gradient generator utilities */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
        }
        .from-transparent {
            --tw-gradient-from: transparent;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
        }
        .to-transparent {
            --tw-gradient-to: transparent;
        }
        .from-\[\#365f44\] {
            --tw-gradient-from: #365f44;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(54, 95, 68, 0));
        }
        .via-\[\#638b56\] {
            --tw-gradient-to: rgba(99, 139, 86, 0);
            --tw-gradient-stops: var(--tw-gradient-from), #638b56, var(--tw-gradient-to);
        }
        .via-\[\#638b56\]\/50 {
            --tw-gradient-to: rgba(99, 139, 86, 0);
            --tw-gradient-stops: var(--tw-gradient-from), rgba(99, 139, 86, 0.5), var(--tw-gradient-to);
        }
        .to-\[\#95b26b\] {
            --tw-gradient-to: #95b26b;
        }

        /* 5. Borders & Radii */
        .border { border-width: 1px; border-style: solid; border-color: rgba(68, 64, 60, 0.6); }
        .border-t { border-top-width: 1px; border-top-style: solid; }
        .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
        .rounded-full { border-radius: 9999px; }
        .border-stone-700\/80 { border-color: rgba(68, 64, 60, 0.8); }
        .border-stone-800\/60 { border-color: rgba(41, 37, 36, 0.6); }
        .border-stone-800\/80 { border-color: rgba(41, 37, 36, 0.8); }
        .hover\:border-\[\#ff7575\]\/70:hover { border-color: rgba(255, 117, 117, 0.7); }
        .hover\:border-\[\#638b56\]\/70:hover { border-color: rgba(99, 139, 86, 0.7); }

        /* 6. Effects, Transitions & Interactions */
        .cursor-pointer { cursor: pointer; }
        .cursor-zoom-out { cursor: zoom-out; }
        .opacity-0 { opacity: 0; }
        .backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .duration-300 { transition-duration: 300ms; }
        .duration-400 { transition-duration: 400ms; }
        .duration-500 { transition-duration: 500ms; }
        .duration-700 { transition-duration: 700ms; }
        .hover\:scale-105:hover { transform: scale(1.05); }
        .hover\:text-stone-300:hover { color: #d6d3d1; }
        .hover\:text-white:hover { color: #ffffff; }
        .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .object-cover { object-fit: cover; }
        .object-top { object-position: top; }

        /* 7. Responsive Utilities (min-width: 768px) */
        @media (min-width: 768px) {
            .md\:gap-6 { gap: 1.5rem; }
            .md\:gap-14 { gap: 3.5rem; }
            .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
            .md\:pb-16 { padding-bottom: 4rem; }
            .md\:mb-12 { margin-bottom: 3rem; }
            .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
            .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
            .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
            .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
            .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
        }

        /* 8. Typographic Voice Utility Classes (Consolidated 2-Family Architecture) */
        .font-cormorant { font-family: var(--font-editorial); }
        .font-space-mono { font-family: var(--font-archival); }
        .font-lato { font-family: var(--font-system); }
        .font-oswald { font-family: var(--font-archival); }
        .font-montserrat { font-family: var(--font-archival); }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
            font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
        }
        p {
            font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
        }
        body {
            font-family: var(--font-system);
            background-color: var(--color-canvas-base);
            background-image: linear-gradient(rgba(12, 10, 9, 0.88), rgba(12, 10, 9, 0.88)), url('../images/bg-texture.jpg');
        }
        html { overflow-y: scroll; scroll-behavior: smooth; }
        .md3-transition { transition: all 0.4s cubic-bezier(0.2, 0.0, 0, 1.0); }

        /* Bespoke Coral Keyboard Focus Halo (WCAG 2.2 AA/AAA) */
        :is(a, button, [role="button"]):focus-visible {
            outline: 1.5px solid #ff7575 !important;
            outline-offset: 5px;
            border-radius: 6px;
            box-shadow: 0 0 0 4px rgba(255, 117, 117, 0.16);
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Animated Title Letters & Broad Ambient Drift */
        .letter {
            display: inline-block;
            will-change: transform, opacity;
            position: relative;
            pointer-events: none;
            mix-blend-mode: screen;
            z-index: 20;
            transition: opacity 2.5s ease;
        }

        /* Continuous Slow Buoyant Water Float */
        @keyframes waterFloat1 {
            0%, 100% { transform: translate3d(0px, 0px, 0) rotate(0deg); }
            33% { transform: translate3d(2.5px, -2.5px, 0) rotate(-0.85deg); }
            66% { transform: translate3d(-1.8px, 2.2px, 0) rotate(0.65deg); }
        }
        @keyframes waterFloat2 {
            0%, 100% { transform: translate3d(0px, 0px, 0) rotate(0deg); }
            33% { transform: translate3d(-2px, 2.2px, 0) rotate(0.7deg); }
            66% { transform: translate3d(2.2px, -2.2px, 0) rotate(-0.75deg); }
        }

        @keyframes oceanWave {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        @keyframes gradientMove {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        @keyframes fadeCascade {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* Clean, Non-Minimizing Editorial Header */
        #main-header {
            position: relative;
            width: 100%;
            height: auto;
            padding-top: 2.25rem;
            padding-bottom: 1rem;
            z-index: 50;
            background: transparent;
            pointer-events: auto;
        }

        #header-layout {
            position: relative;
            width: 100%;
            max-width: 64rem;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #main-title {
            position: relative;
            font-size: clamp(1.5rem, 5vw, 2.2rem);
            line-height: 1.15;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-decoration: none;
            width: auto;
            height: auto;
        }
        @media (min-width: 768px) {
            #main-title { font-size: 2.35rem; }
        }

        .word-group {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        .word-group-1 {
            margin-bottom: 0.15em;
        }
        .word-group-2 {
            margin-top: 0;
        }
        .word-water-float {
            display: inline-flex;
            align-items: center;
            will-change: transform;
        }
        .word-group-1 .word-water-float {
            animation: waterFloat1 11s ease-in-out infinite;
        }
        .word-group-2 .word-water-float {
            animation: waterFloat2 13s ease-in-out infinite;
        }

        #profile-container {
            display: none !important;
        }

        #mini-contact-btn {
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%) scale(0.5);
            opacity: 0;
            pointer-events: none;
            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            color: #d6d3d1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.4rem;
            border-radius: 9999px;
        }
        @media (min-width: 768px) {
            #mini-contact-btn { right: 48px; }
        }
        #main-header.minimized #mini-contact-btn {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-50%) scale(1);
        }
        #main-header.minimized #mini-contact-btn:hover {
            transform: translateY(-50%) scale(1.12);
            color: #ff7575;
            filter: drop-shadow(0 0 8px rgba(255, 117, 117, 0.45));
        }

        #main-container {
            padding-top: 1.5rem;
            min-height: calc(100vh - 180px);
            display: flex;
            flex-direction: column;
        }
        @media (min-width: 768px) {
            #main-container { padding-top: 2rem; }
        }

        /* Navigation & Watercolour Cloud Filter Chips */
        .nav-btn {
            font-family: var(--font-archival);
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: #a8a29e;
            background: transparent !important;
            border: none !important;
            outline: none;
            cursor: pointer;
            padding: 0.25rem 0.5rem 0.65rem 0.5rem;
            transition: color 0.4s cubic-bezier(0.2, 0.0, 0, 1.0);
        }
        .nav-btn:hover { color: var(--color-accent-coral); }
        .nav-btn.active {
            color: #ff7575;
        }
        @media (min-width: 768px) {
            .nav-btn { font-size: 1.1rem; }
        }

        /* Slowly Shifting Alive Brushstroke Navigation Indicator */
        #nav-indicator {
            position: absolute;
            bottom: -1.5px;
            left: 0;
            height: 3.5px;
            border-radius: 9999px;
            background: linear-gradient(270deg, #ff7575, #fb923c, #365f44, #638b56, #95b26b, #ff7575);
            background-size: 400% 400%;
            animation: gradientMove 10s ease infinite;
            mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.85) 18%, black 50%, rgba(0,0,0,0.85) 82%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.85) 18%, black 50%, rgba(0,0,0,0.85) 82%, transparent);
            filter: blur(0.4px);
            pointer-events: none;
            transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Non-Resetting View Layering & Tactile Cotton-Rag Paper Grain */
        .view-panel {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .view-panel.view-inactive {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transform: translateY(6px);
            pointer-events: none;
            z-index: -1;
        }
        #paper-grain {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 90;
            opacity: 0.055;
            mix-blend-mode: screen;
            background-repeat: repeat;
            background-size: 240px 240px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ragNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch' result='fine'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12 0.38' numOctaves='2' stitchTiles='stitch' result='fibers'/%3E%3CfeBlend mode='multiply' in='fine' in2='fibers' result='paper'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0.88 0' in='paper'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ragNoise)'/%3E%3C/svg%3E");
        }

        /* True Downward Drop-Cap & Small-Cap Lead-In in Bio View (Upright Roman) */
        #bio-view {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #bio-text {
            text-align: left;
            text-wrap: pretty;
        }
        .bio-dropcap-char {
            float: left;
            font-family: 'Cormorant Garamond', serif;
            font-style: normal;
            font-size: 3.45em;
            line-height: 0.78;
            padding-top: 0.06em;
            padding-right: 0.12em;
            padding-bottom: 0.04em;
            color: #ff7575;
            font-weight: 600;
            text-shadow: 0 2px 14px rgba(255, 117, 117, 0.28);
        }
        .bio-smallcaps-char {
            font-variant-caps: small-caps;
            letter-spacing: 0.08em;
            color: #ffffff;
            font-weight: 600;
        }
        .word-unit {
            display: inline;
            white-space: nowrap;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        /* Category Filter Headings & Mobile Swipeable Ribbon */
        #filter-container {
            position: relative;
            border-bottom: 1px solid rgba(41, 37, 36, 0.8);
            padding-bottom: 0.85rem;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
            gap: 0.5rem 0.65rem;
            max-width: 44rem;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
        }
        #filter-container::-webkit-scrollbar {
            display: none;
        }

        .filter-chip {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            scroll-snap-align: center;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            font-family: var(--font-archival);
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            background: rgba(28, 25, 23, 0.45);
            color: #a8a29e;
            border: 1px solid rgba(68, 64, 60, 0.35);
            border-radius: 9999px;
            outline: none;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.35s cubic-bezier(0.2, 0.0, 0, 1.0);
        }
        .filter-chip:hover {
            color: #f5f5f4;
            border-color: rgba(149, 178, 107, 0.5);
            background: rgba(41, 37, 36, 0.65);
        }
        .filter-chip.active {
            color: #ecfccb;
            background: linear-gradient(135deg, rgba(54, 95, 68, 0.55), rgba(99, 139, 86, 0.38));
            border-color: rgba(149, 178, 107, 0.8);
            box-shadow: 0 0 16px -3px rgba(99, 139, 86, 0.42);
        }
        @media (min-width: 768px) {
            #filter-container {
                flex-wrap: wrap;
                overflow-x: visible;
                justify-content: center;
                mask-image: none;
                -webkit-mask-image: none;
                gap: 0.55rem 0.95rem;
                padding-left: 0;
                padding-right: 0;
            }
            .filter-chip {
                min-height: 38px;
                padding: 0.48rem 0.95rem;
                font-size: 0.8rem;
            }
        }

        /* Hardware-Accelerated Portfolio Card Transitions (Replaces DOM Spans) */
        .portfolio-item .item-title,
        .portfolio-item .item-desc {
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.5s ease, transform 0.5s ease;
            will-change: opacity, transform;
        }
        .portfolio-item.is-revealed .item-title,
        .portfolio-item.is-revealed .item-desc {
            opacity: 1;
            transform: translateY(0);
        }
        .portfolio-item .item-desc {
            transition-delay: 0.12s;
        }

        /* Typewriter & Link Gradients */
        .char-reveal {
            opacity: 0;
            transition: opacity 0.08s ease;
        }
        .char-visible { opacity: 1; }
        .cursor-blink {
            display: inline-block;
            margin-left: 2px;
            color: #ff7575;
            animation: blink 1s step-start infinite;
            font-weight: 400;
        }

        .link-hover-gradient { transition: all 0.4s ease; }
        .link-hover-gradient:hover {
            background-image: linear-gradient(270deg, #ff7575, #fb923c, #f43f5e, #ff7575);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: gradientMove 3s ease infinite;
        }

        /* Pure Unicode Text External Link Indicator on Linked Portfolio Titles */
        .item-title a::after {
            content: '\2197\FE0E';
            font-variant-emoji: text;
            display: inline-block;
            margin-left: 0.22rem;
            font-family: var(--font-archival);
            font-size: 0.36em;
            font-weight: 400;
            color: #ff7575;
            -webkit-text-fill-color: #ff7575;
            opacity: 0.65;
            vertical-align: super;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
        }
        .item-title a:hover::after {
            transform: translate(3px, -3px);
            opacity: 1;
        }

        /* Organic Contoured Portfolio Cards (Australian Biome Asymmetric River Stone) */
        .portfolio-item {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 0.85rem;
            align-items: start;
            width: 100%;
            margin-bottom: 0.9rem;
            border: 1px solid var(--color-stone-line);
            background: linear-gradient(135deg, rgba(28, 25, 23, 0.45), rgba(15, 13, 12, 0.28));
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border-radius: 24px 32px 22px 30px / 20px 26px 22px 24px;
            padding: 1.25rem 1.15rem;
            transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1), border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
        }
        .portfolio-item > * {
            position: relative;
            z-index: 1;
        }
        .portfolio-item:nth-child(even) {
            border-radius: 30px 22px 32px 24px / 24px 20px 26px 22px;
        }
        .portfolio-item:nth-child(3n) {
            border-radius: 26px 34px 24px 28px / 22px 28px 20px 26px;
        }
        .portfolio-item:hover {
            background: linear-gradient(135deg, rgba(28, 25, 23, 0.68), rgba(149, 178, 107, 0.06));
            border-color: rgba(149, 178, 107, 0.42);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 24px -8px rgba(149, 178, 107, 0.16);
            transform: translateY(-2px);
        }
        .portfolio-item.hidden {
            display: none;
        }
        @media (min-width: 768px) {
            .portfolio-item {
                grid-template-columns: repeat(12, minmax(0, 1fr));
                gap: 2rem;
                padding: 1.85rem 1.75rem;
                margin-bottom: 1.1rem;
            }
        }

        .item-meta {
            position: relative;
            order: 3;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-top: 0.25rem;
            border-left: 2px solid rgba(68, 64, 60, 0.5);
            padding-left: 0.75rem;
        }
        @media (min-width: 768px) {
            .item-meta {
                order: 1;
                grid-column: span 3 / span 3;
                text-align: right;
                align-items: flex-end;
                border-left: 0;
                border-right: 1px solid rgba(68, 64, 60, 0.35);
                padding-left: 0;
                padding-right: 1.25rem;
            }
        }

        .item-date {
            font-family: var(--font-archival);
            font-size: 0.8125rem;
            line-height: 1.2rem;
            color: #a8a29e;
            margin-bottom: 0.25rem;
            font-variant-numeric: tabular-nums;
        }
        @media (min-width: 768px) {
            .item-date { font-size: 0.875rem; line-height: 1.3rem; }
        }

        .item-org {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.875rem;
            font-weight: 700;
            color: #d6d3d1;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.65rem;
        }
        .item-org a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .item-org a:hover {
            color: #95b26b;
        }
        @media (min-width: 768px) {
            .item-org { font-size: 0.9375rem; }
        }

        .item-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            width: fit-content;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: none;
            color: #d6d3d1;
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.8125rem;
            font-weight: 600;
            font-style: normal;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }
        @media (min-width: 768px) {
            .item-badge { font-size: 0.875rem; }
        }

        .item-body {
            order: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 0;
            padding-top: 0.15rem;
        }
        @media (min-width: 768px) {
            .item-body {
                order: 2;
                grid-column: span 9 / span 9;
            }
            .portfolio-item:has(.item-media) .item-body {
                grid-column: span 7 / span 7;
            }
        }

        .item-title {
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 1.3;
            color: #f5f5f4;
            letter-spacing: -0.015em;
            margin-bottom: 0.5rem;
            display: block;
        }
        .item-title a {
            display: inline-block;
            outline: none;
        }
        @media (min-width: 768px) {
            .item-title { font-size: 1.55rem; }
        }

        .item-desc {
            color: #d6d3d1;
            font-size: 0.9375rem;
            line-height: 1.65;
        }
        @media (min-width: 768px) {
            .item-desc { font-size: 1.05rem; }
        }

        .item-media {
            order: 2;
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
        @media (min-width: 768px) {
            .item-media {
                order: 3;
                grid-column: span 2 / span 2;
                justify-content: flex-end;
            }
        }

        .expandable-wrap {
            position: relative;
            display: inline-block;
            max-width: 140px;
            width: 100%;
            border-radius: 0.5rem;
            overflow: hidden;
            cursor: zoom-in;
        }
        .expandable-image {
            width: 100%;
            max-width: 140px;
            height: auto;
            display: block;
            object-fit: cover;
            border-radius: 0.5rem;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
            cursor: zoom-in;
            transition: transform 0.35s ease, opacity 0.2s ease;
        }
        .expandable-wrap:hover .expandable-image {
            transform: scale(1.03);
            opacity: 0.9;
        }

        /* Subtle & Transparent Visual Magnifier Marker */
        .zoom-marker {
            position: absolute;
            bottom: 6px;
            right: 6px;
            width: 18px;
            height: 18px;
            border-radius: 9999px;
            background: rgba(12, 10, 9, 0.28);
            backdrop-filter: blur(3px);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(231, 229, 228, 0.55);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            transition: all 0.35s ease;
        }
        .expandable-wrap:hover .zoom-marker {
            transform: scale(1.06);
            border-color: rgba(255, 255, 255, 0.28);
            color: rgba(255, 255, 255, 0.85);
            background: rgba(12, 10, 9, 0.48);
        }
        #profile-container .zoom-marker {
            bottom: 10%;
            right: 10%;
            opacity: 0;
            transform: scale(0.85);
        }
        #profile-container:hover .zoom-marker {
            opacity: 0.78;
            transform: scale(1);
            border-color: rgba(255, 255, 255, 0.28);
            color: rgba(255, 255, 255, 0.85);
            background: rgba(12, 10, 9, 0.45);
        }
        #main-header.minimized #profile-container .zoom-marker {
            width: 13px;
            height: 13px;
            bottom: 1px;
            right: 1px;
        }