/* =========================================================
   --- TYPOGRAPHY --- 
   ========================================================= */
.nav-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-light);
}

.about-title,
.contact-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4rem);
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1;
    text-transform: uppercase;
}

.about-bio,
.contact-desc {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.sidebar-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 50px;
    color: var(--active-color, var(--text-light));
    word-wrap: break-word;
    text-transform: uppercase;
}

.proj-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #2a1e24;
    padding-bottom: 40px;
}

.proj-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    margin-bottom: 20px;
    line-height: 0.95;
    text-transform: uppercase;
}

.proj-meta {
    color: var(--active-color, var(--text-light));
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1rem;
    font-weight: bold;
}

.proj-desc {
    font-size: 1.25rem;
    line-height: 1.7;
    max-width: 850px;
    color: var(--text-muted);
    margin-bottom: 60px;
}

/* =========================================================
   --- CUSTOM CURSOR --- 
   ========================================================= */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: var(--text-light);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s;
    mix-blend-mode: difference;
    will-change: top, left;
}

#cursor.hovered {
    width: 50px;
    height: 50px;
    background-color: var(--text-light);
}

/* Touch Device Overrides */
@media (pointer: coarse) {
    #cursor {
        display: none !important;
    }
}

/* =========================================================
   --- THE ATMOSPHERIC BLOOM (Faded & Responsive) --- 
   ========================================================= */
/* 4K FIX: Ensures intro text never hits invisible containers */
#intro,
.intro-content,
.intro-title,
.title-main,
.title-sub {
    overflow: visible !important;
}

.intro-title.splatter-hover {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.intro-title.splatter-hover::before {
    content: '';
    position: absolute;
    top: -15vw;
    left: -15vw;
    right: -15vw;
    bottom: -15vw;
    z-index: -1;
    pointer-events: none;
    opacity: 0;

    background-image:
        radial-gradient(circle, var(--c-art) 0%, transparent 70%),
        radial-gradient(circle, transparent 45%, var(--c-3d) 50%, transparent 55%),
        radial-gradient(circle, var(--c-design) 0%, transparent 70%),
        radial-gradient(circle, var(--c-anim) 0%, transparent 70%),
        radial-gradient(circle, transparent 45%, var(--c-tools) 50%, transparent 55%),
        radial-gradient(circle, var(--c-urban) 0%, transparent 70%),
        radial-gradient(circle, var(--text-light) 0%, transparent 70%),
        radial-gradient(circle, var(--c-art) 0%, transparent 70%),
        radial-gradient(circle, var(--c-3d) 0%, transparent 70%),
        radial-gradient(circle, transparent 40%, var(--text-light) 45%, transparent 50%),
        radial-gradient(circle, var(--c-design) 0%, transparent 70%),
        radial-gradient(circle, var(--c-anim) 0%, transparent 70%),
        radial-gradient(circle, transparent 49.2%, var(--c-art) 49.5%, var(--c-art) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--c-3d) 49.5%, var(--c-3d) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--c-design) 49.5%, var(--c-design) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--c-anim) 49.5%, var(--c-anim) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--c-tools) 49.5%, var(--c-tools) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--c-urban) 49.5%, var(--c-urban) 50%, transparent 50.8%),
        radial-gradient(circle, transparent 49.2%, var(--text-light) 49.5%, var(--text-light) 50%, transparent 50.8%);

    background-size:
        4vw 4vw, 3.5vw 3.5vw, 2vw 2vw, 3vw 3vw, 4vw 4vw, 1.5vw 1.5vw,
        1.2vw 1.2vw, 1vw 1vw, 1vw 1vw, 2.5vw 2.5vw, 1.5vw 1.5vw, 1.8vw 1.8vw,
        25vw 25vw, 22vw 22vw, 18vw 18vw, 24vw 24vw, 15vw 15vw, 20vw 20vw, 21vw 21vw;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: background-position 0.8s ease-in, opacity 0.3s ease-out;
}

.intro-title.splatter-hover:hover::before {
    opacity: 0.22;
    transition: background-position 1.5s cubic-bezier(0.1, 1, 0.2, 1), opacity 0.6s ease-out;
    background-position:
        15% 30%, 85% 20%, 10% 70%, 90% 80%, 50% 10%, 40% 90%, 80% 50%, 20% 50%, 30% 15%, 70% 85%, 10% 10%, 90% 90%,
        0% 5%, 100% 0%, -5% 50%, 105% 55%, 50% -10%, 15% 100%, 85% 100%;
    animation: atmospherePulse 15s ease-in-out infinite alternate;
}

@keyframes atmospherePulse {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(10px, -5px) scale(1.05);
    }
}

/* =========================================================
   --- BUTTONS & LINKS --- 
   ========================================================= */
.identity-btn,
.contact-btn {
    background: none;
    border: none;
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: lowercase;
    position: relative;
}

.identity-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-rose);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.identity-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Identity-specific rendering fix: keep underline spanning full [ ... ] box */
#nav-about {
    display: inline-block;
    width: max-content;
    white-space: nowrap;
    line-height: 1.1;
    text-decoration: none;
    font-kerning: none;
}

#nav-about::after {
    left: 0;
    right: 0;
    width: auto;
}

/* Apply the same underline-box stabilization to contact */
#nav-contact {
    display: inline-block;
    width: max-content;
    white-space: nowrap;
    line-height: 1.1;
    text-decoration: none;
    font-kerning: none;
}

#nav-contact::after {
    left: 0;
    right: 0;
    width: auto;
}

.contact-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-3d);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.contact-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.panel-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    text-transform: lowercase;
    transition: color 0.2s;
}

#about-panel .panel-close-btn:hover {
    color: var(--c-rose);
}

#contact-panel .panel-close-btn:hover {
    color: var(--c-tools);
}

.close-btn {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 80px;
    display: inline-block;
    text-transform: lowercase;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    align-self: flex-start;
}

.close-btn:hover {
    border-bottom-color: var(--active-color, var(--c-design));
}

.enter-btn {
    padding: 15px 50px;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--text-light);
    color: var(--bg-deep);
    border: 3px solid var(--text-light);
    box-shadow: 10px 10px 0px var(--c-urban);
    transition: all 0.2s;
}

.enter-btn:hover {
    background: var(--c-art);
    border-color: var(--c-art);
    box-shadow: 15px 15px 0px var(--c-tools);
    color: var(--bg-deep);
}

/* =========================================================
   --- PANELS & FORMS --- 
   ========================================================= */
.overlay-panel {
    position: fixed;
    top: -120%;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 6, 7, 0.96);
    backdrop-filter: blur(12px);
    z-index: 8500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: top 0.7s cubic-bezier(0.85, 0, 0.15, 1);
}

.overlay-panel.active {
    top: 0;
    pointer-events: auto;
}

.protected-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(197, 78, 119, 0.18), transparent 35%),
        radial-gradient(circle at bottom right, rgba(0, 229, 255, 0.14), transparent 35%),
        rgba(5, 1, 5, 0.94);
    backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9600;
}

.protected-gate.active {
    opacity: 1;
    pointer-events: auto;
}

.protected-gate-panel {
    width: min(100%, 620px);
    padding: 42px;
    background: linear-gradient(180deg, rgba(21, 12, 17, 0.98), rgba(9, 5, 9, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(197, 78, 119, 0.15) inset;
}

.protected-gate-kicker {
    margin-bottom: 16px;
    color: var(--c-art);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.protected-gate-title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--text-light);
}

.protected-gate-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 46ch;
}

.protected-gate-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.protected-gate-btn {
    min-width: 148px;
    padding: 14px 22px;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.protected-gate-btn:hover {
    transform: translateY(-2px);
}

.protected-gate-btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-muted);
}

.protected-gate-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--text-light);
}

.protected-gate-btn-primary {
    background: var(--text-light);
    color: var(--bg-deep);
    box-shadow: 8px 8px 0 rgba(197, 78, 119, 0.32);
}

.protected-gate-btn-primary:hover {
    background: var(--c-art);
    box-shadow: 12px 12px 0 rgba(0, 229, 255, 0.2);
}

.protected-gallery-placeholder {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 48px;
    background:
        linear-gradient(180deg, rgba(31, 17, 24, 0.96), rgba(12, 7, 12, 0.98)),
        var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(197, 78, 119, 0.15);
    break-inside: avoid;
}

.protected-gallery-placeholder h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--text-light);
}

.protected-gallery-placeholder p {
    margin: 0;
    max-width: 52ch;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.protected-gallery-badge {
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--c-art);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-content {
    position: relative;
    max-width: 800px;
    width: 90%;
    padding: 60px;
    background: var(--bg-panel);
    border: 3px solid var(--text-light);
    box-shadow: 20px 20px 0px var(--c-wine);
}

.contact-content {
    position: relative;
    max-width: 800px;
    width: 90%;
    padding: 60px;
    background: var(--bg-panel);
    border: 3px solid var(--c-tools);
    box-shadow: 20px 20px 0px var(--c-indigo);
    border-color: var(--c-tools);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.social-link {
    display: block;
    padding: 15px 20px;
    background: var(--bg-deep);
    color: var(--text-light);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #2a1e24;
    transition: all 0.2s;
}

.social-link:hover {
    border-color: var(--text-light);
    background: var(--text-light);
    color: var(--bg-deep);
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 0px var(--c-plum);
}

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

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-soft);
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--c-tools);
    box-shadow: 0 0 15px rgba(163, 0, 255, 0.28);
}

.form-consent {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin: 4px 0 8px;
}

.privacy-heading {
    margin: 22px 0 8px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: none;
}

.privacy-heading:first-of-type {
    margin-top: 0;
}

.contact-success {
    text-align: center;
    margin: 14px 0 0;
}

.inline-link {
    color: var(--c-tools);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.inline-link:hover {
    color: var(--text-light);
    border-bottom-color: var(--c-tools);
}

.submit-btn {
    background: var(--bg-deep);
    color: var(--c-tools);
    border: 2px solid var(--c-tools);
    padding: 15px;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
}

.submit-btn:hover {
    background: var(--c-tools);
    color: var(--bg-deep);
    box-shadow: 0 0 20px rgba(163, 0, 255, 0.55);
}

/* =========================================================
   --- BLOB SYSTEM BASE & SHAPES --- 
   ========================================================= */
#explore-center {
    --explore-scale: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--explore-scale));
    font-family: var(--font-mono);
    font-size: clamp(1rem, 1.2vw, 2rem);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 6px;
    text-transform: lowercase;
    z-index: 20;
    opacity: 0.6;
    pointer-events: none;
    transition: color 0.4s ease, text-shadow 0.4s ease, opacity 0.4s ease;
}

.block {
    --hover-scale: 1;
    --base-rot: 0deg;
    --base-skew: 0deg;
    --push-x: 0px;
    --push-y: 0px;
    --push-z: 0px;
    --blob-radius: 0;
    perspective: 1200px;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--blob-radius);
    clip-path: inset(0 round var(--blob-radius));
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(var(--base-rot)) skew(var(--base-skew)) scale(var(--hover-scale));
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, filter 0.25s ease, border-radius 0.25s ease, clip-path 0.25s ease;
    overflow: visible !important;
    /* Keep outer glow from being clipped */
    will-change: transform, filter;
    isolation: isolate;
    /* Create new stacking context */
    pointer-events: auto;
    z-index: 1;
}

.block-hitbox {
    position: absolute;
    pointer-events: none;
    overflow: visible !important;
    isolation: isolate;
    filter:
        drop-shadow(0 0 1.75rem var(--glow-color, transparent)) drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8));
    will-change: filter;
}

.block-hitbox:hover,
.block-hitbox:focus-within,
.block-hitbox.is-hovered {
    z-index: 100 !important;
}

/* Only dim when a validated blob is active. */
.blocks-container.has-active-block .block-hitbox {
    z-index: 1 !important;
}

.blocks-container.has-active-block .block-hitbox:hover,
.blocks-container.has-active-block .block-hitbox:focus-within,
.blocks-container.has-active-block .block-hitbox.is-hovered {
    z-index: 100 !important;
}

#hub.has-active-block::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.25);
}

.blocks-container.has-active-block .block {
    transition: all 0.3s ease;
}

.blocks-container.has-active-block .block:hover,
.blocks-container.has-active-block .block.is-hovered,
.blocks-container.has-active-block .block-hitbox.is-hovered .block {
    opacity: 1 !important;
    filter: brightness(1.2);
}

/* THE EARLY HOVER SENSOR: DEACTIVATED to prevent hover conflicts. */
.block::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
    pointer-events: none;
    /* DISABLED */
    background: rgba(0, 0, 0, 0);
}

.block::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background-color: transparent;
    overflow: hidden;
}

.blob-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    z-index: 10;
}

.block.has-new .semantic-label {
    position: relative;
    display: inline-block;
}

.block.has-new .semantic-label::after {
    content: '*';
    position: absolute;
    top: -0.34em;
    right: -0.58em;
    color: var(--new-dot-color, var(--text-light));
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 0.95vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 0 4px var(--new-dot-color, var(--text-light)),
        0 0 10px var(--new-dot-color, var(--text-light)),
        0 0 18px color-mix(in srgb, var(--new-dot-color, var(--text-light)) 65%, transparent);
    opacity: 0.86;
    z-index: 1;
    pointer-events: none;
    animation: newContentPulse 3.2s ease-in-out infinite;
}

@keyframes newContentPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.72; }
    50% { transform: scale(1.08) rotate(4deg); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .block.has-new .semantic-label::after {
        animation: none;
    }
}

/* CHANGED: Swapped 'span' for '.semantic-label' to support H2 tags */
.blob-label .semantic-label {
    font-family: var(--font-blobs);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 6rem);
    letter-spacing: 0px;
    text-transform: uppercase;
    color: var(--text-light);
    line-height: 1;
    text-shadow: 0px 6px 1px rgba(0, 0, 0, 1), 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1);
    margin: 0;
    /* Remove default H2 margin */
    display: block;
}

/* =========================================================
   --- INDIVIDUAL BLOBS (BASE STATE) --- 
   ========================================================= */
#hitbox-art {
    --blob-radius: 43% 57% 46% 54% / 20% 11% 89% 80%;
    --glow-color: var(--c-art);
    top: 4%;
    left: 16%;
    width: 34%;
    height: 32%;
    z-index: 6;
}

#hitbox-3d {
    --blob-radius: 92% 8% 95% 5% / 31% 53% 47% 69%;
    --glow-color: var(--c-3d);
    top: 33%;
    left: 2%;
    width: 34%;
    height: 36%;
    z-index: 5;
}

#hitbox-design {
    --blob-radius: 63% 100% 20% 100%;
    --glow-color: var(--c-design);
    top: 4%;
    right: 16%;
    width: 34%;
    height: 32%;
    z-index: 4;
}

#hitbox-anim {
    --blob-radius: 43% 57% 50% 50% / 48% 71% 29% 52%;
    --glow-color: var(--c-anim);
    top: 33%;
    right: 1%;
    width: 32%;
    height: 35%;
    z-index: 7;
}

#hitbox-tools {
    --blob-radius: 43% 57% 94% 6% / 15% 92% 8% 85%;
    --glow-color: var(--c-tools);
    bottom: 4%;
    left: 16%;
    width: 34%;
    height: 34%;
    z-index: 2;
}

#hitbox-urban {
    --blob-radius: 100% 100% 25% 25%;
    --glow-color: var(--c-urban);
    bottom: 3%;
    right: 16%;
    width: 34%;
    height: 36%;
    z-index: 1;
}

#block-art {
    --base-rot: 3deg;
    --blob-radius: 43% 57% 46% 54% / 20% 11% 89% 80%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-art);
    box-shadow: 0 0 2rem var(--c-art), inset 0 0 1.5rem var(--c-art), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-art::after {
    /* 4K STABILITY FIX: Using 25px/125px integer blocks to stop shimmering */
    background:
        radial-gradient(farthest-side at -33.33% 50%, transparent 52%, rgba(255, 255, 255, 0.1) 54% 57%, transparent 59%) 0 62.5px,
        radial-gradient(farthest-side at 50% 133.33%, transparent 52%, rgba(255, 255, 255, 0.1) 54% 57%, transparent 59%) 62.5px 0,
        radial-gradient(farthest-side at 133.33% 50%, transparent 52%, rgba(255, 255, 255, 0.1) 54% 57%, transparent 59%),
        radial-gradient(farthest-side at 50% -33.33%, transparent 52%, rgba(255, 255, 255, 0.1) 54% 57%, transparent 59%);
    background-size: 25px 125px, 125px 25px;
    mix-blend-mode: screen;
}

#block-3d {
    --base-rot: 2deg;
    --blob-radius: 92% 8% 95% 5% / 31% 53% 47% 69%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-3d);
    box-shadow: 0 0 2rem var(--c-3d), inset 0 0 1.5rem var(--c-3d), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-3d::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 2px) 0 0 / 20px 20px;
    mix-blend-mode: screen;
}

#block-design {
    --base-rot: -5deg;
    --blob-radius: 63% 100% 20% 100%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-design);
    box-shadow: 0 0 2rem var(--c-design), inset 0 0 1.5rem var(--c-design), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-design::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 25px 25px, linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 25px 25px;
    mix-blend-mode: screen;
}

#block-anim {
    --base-rot: 4deg;
    --blob-radius: 43% 57% 50% 50% / 48% 71% 29% 52%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-anim);
    box-shadow: 0 0 2rem var(--c-anim), inset 0 0 1.5rem var(--c-anim), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-anim::after {
    background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 22px);
    mix-blend-mode: screen;
}

#block-tools {
    --base-rot: -2deg;
    --blob-radius: 43% 57% 94% 6% / 15% 92% 8% 85%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-tools);
    box-shadow: 0 0 2rem var(--c-tools), inset 0 0 1.5rem var(--c-tools), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-tools::after {
    background: linear-gradient(45deg, transparent 74%, rgba(255, 255, 255, 0.1) 0 76%, transparent 0) -15px 15px / 60px 60px, linear-gradient(135deg, transparent 74%, rgba(255, 255, 255, 0.1) 0 76%, transparent 0) 15px 15px / 60px 60px, radial-gradient(circle, transparent 33%, rgba(255, 255, 255, 0.2) 33% 36%, transparent 36%) 0 0 / 30px 30px;
    mix-blend-mode: screen;
}

#block-urban {
    --base-rot: 6deg;
    --blob-radius: 100% 100% 25% 25%;
    background-color: var(--bg-interior);
    border: 0.5rem solid var(--c-urban);
    box-shadow: 0 0 2rem var(--c-urban), inset 0 0 1.5rem var(--c-urban), 0 20px 60px rgba(0, 0, 0, 0.68);
}

#block-urban::after {
    /* 4K STABILITY FIX: Integer 40px blocks and crisp hard-stop lines */
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
    mix-blend-mode: screen;
}

/* =========================================================
   --- UNIQUE HOVER PERSONALITIES --- 
   ========================================================= */

/* 1. VISUAL ART: "The Liquid Canvas" */
#block-art.is-hovered,
#hitbox-art:hover #block-art,
#hitbox-art.is-hovered #block-art {
    --hover-scale: 1.08;
    --push-z: 50px;
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(calc(var(--base-rot) + 8deg)) scale(var(--hover-scale));
    filter: hue-rotate(15deg) brightness(1.2);
    z-index: 100;
    opacity: 1;
}

#block-art.is-hovered::after,
#hitbox-art:hover #block-art::after,
#hitbox-art.is-hovered #block-art::after {
    animation: artBreathe 3s ease-in-out infinite alternate;
}

@keyframes artBreathe {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* 2. 3D DESIGN: "The Isometric Extrusion" */
#block-3d.is-hovered,
#hitbox-3d:hover #block-3d,
#hitbox-3d.is-hovered #block-3d {
    --hover-scale: 1.1;
    --push-z: 100px;
    /* 4K FIX: Perspective tilt + Physics repulsion */
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotateX(15deg) rotateY(-15deg) scale(var(--hover-scale));

    z-index: 100;
    opacity: 1;

    /* Dynamic pulsing of the extrusion depth and internal glow */
    animation: depthPulse 2.5s infinite alternate ease-in-out;
}

/* PARALLAX EFFECT: Makes the label float 40px above the blob surface */
#block-3d.is-hovered .blob-label,
#hitbox-3d:hover #block-3d .blob-label,
#hitbox-3d.is-hovered #block-3d .blob-label {
    transform: translateZ(40px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* WIREFRAME SCAN: Makes the dot grid look like a living blueprint */
#block-3d.is-hovered::after,
#hitbox-3d:hover #block-3d::after,
#hitbox-3d.is-hovered #block-3d::after {
    animation: scanGrid 3s linear infinite;
    opacity: 0.6;
}

@keyframes depthPulse {
    0% {
        box-shadow:
            -1px 1px 0px var(--c-3d), -2px 2px 0px var(--c-3d), -3px 3px 0px var(--c-3d),
            0 20px 40px rgba(0, 0, 0, 0.6);
    }

    100% {
        box-shadow:
            -1px 1px 0px var(--c-3d), -2px 2px 0px var(--c-3d), -3px 3px 0px var(--c-3d),
            -4px 4px 0px var(--c-3d), -5px 5px 0px var(--c-3d), -6px 6px 0px var(--c-3d),
            -7px 7px 0px var(--c-3d), -8px 8px 0px var(--c-3d),
            0 50px 100px rgba(0, 0, 0, 0.9);
    }
}

@keyframes scanGrid {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
}

/* 3. GRAPHIC DESIGN: "The Grid Snap" */
#block-design.is-hovered,
#hitbox-design:hover #block-design,
#hitbox-design.is-hovered #block-design {
    --hover-scale: 1.05;
    --push-z: 40px;
    --blob-radius: 0;
    border-radius: var(--blob-radius) !important;
    clip-path: inset(0 round var(--blob-radius));
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) skew(-10deg, 5deg) scale(var(--hover-scale));
    z-index: 100;
    filter: brightness(1.2);
    opacity: 1;
}

/* 4. ANIMATION: "The Shape Morpher" */
#block-anim.is-hovered,
#hitbox-anim:hover #block-anim,
#hitbox-anim.is-hovered #block-anim {
    --hover-scale: 1.08;
    --push-z: 60px;
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(var(--base-rot)) scale(var(--hover-scale));
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), filter 0.2s ease, border-radius 0.2s ease, clip-path 0.2s ease;
    animation: morphShapeBlob 3.4s ease-in-out infinite;
    filter: brightness(1.2) drop-shadow(0 0 20px var(--c-anim));
    z-index: 100;
    opacity: 1;
}

@keyframes morphShapeBlob {
    0% {
        border-radius: 43% 57% 50% 50% / 48% 71% 29% 52%;
        clip-path: inset(0 round 43% 57% 50% 50% / 48% 71% 29% 52%);
        transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(var(--base-rot)) scale(1.08);
    }

    25% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        clip-path: inset(0 round 60% 40% 30% 70% / 60% 30% 70% 40%);
        transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(calc(var(--base-rot) + 2deg)) scale(1.09);
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 40%;
        clip-path: inset(0 round 30% 60% 70% 40% / 50% 60% 30% 40%);
        transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(calc(var(--base-rot) - 2deg)) scale(1.07);
    }

    75% {
        border-radius: 40% 60% 40% 60% / 70% 30% 50% 50%;
        clip-path: inset(0 round 40% 60% 40% 60% / 70% 30% 50% 50%);
        transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(calc(var(--base-rot) + 1deg)) scale(1.08);
    }

    100% {
        border-radius: 43% 57% 50% 50% / 48% 71% 29% 52%;
        clip-path: inset(0 round 43% 57% 50% 50% / 48% 71% 29% 52%);
        transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(var(--base-rot)) scale(1.08);
    }
}

/* 5. DIGITAL TOOLS: "The Data Flow" */
#block-tools.is-hovered,
#hitbox-tools:hover #block-tools,
#hitbox-tools.is-hovered #block-tools {
    --hover-scale: 1.08;
    --push-z: 60px;
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(var(--base-rot)) scale(var(--hover-scale));
    z-index: 100;
    filter: brightness(1.2);
    opacity: 1;
}

#block-tools.is-hovered::after,
#hitbox-tools:hover #block-tools::after,
#hitbox-tools.is-hovered #block-tools::after {
    animation: flowData 2s linear infinite;
}

@keyframes flowData {
    0% {
        background-position: -15px 15px, 15px 15px, 0px 0px;
    }

    100% {
        background-position: 45px 75px, 75px 75px, 60px 60px;
    }
}

/* 6. ARCH & URBAN: "The City Grid / Systems Flow" */
#block-urban.is-hovered,
#hitbox-urban:hover #block-urban,
#hitbox-urban.is-hovered #block-urban {
    --hover-scale: 1.05;
    --push-z: 60px;
    --blob-radius: 10% 40% 10% 40%;
    border-radius: var(--blob-radius) !important;
    clip-path: inset(0 round var(--blob-radius));
    transform: translate3d(var(--push-x), var(--push-y), var(--push-z)) rotate(0deg) scale(var(--hover-scale));
    box-shadow: 0 0 2rem var(--c-urban), 0 20px 60px rgba(0, 0, 0, 0.68) !important;
    z-index: 100;
    filter: brightness(1.2);
    opacity: 1;
}

/* =========================================================
   --- PROJECT LIST & CONTENT VIEWER ITEMS --- 
   ========================================================= */
.project-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a1e24 transparent;
    scrollbar-gutter: stable;
}

.project-list::-webkit-scrollbar {
    width: 6px;
}

.project-list::-webkit-scrollbar-track {
    background: transparent;
}

.project-list::-webkit-scrollbar-thumb {
    background: #2a1e24;
    border-radius: 999px;
}

.project-list li {
    font-size: 1.1rem;
    color: var(--text-muted);
    padding-left: 15px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    text-transform: uppercase;
    font-weight: bold;
}

.project-list li.active,
.project-list li:hover {
    color: var(--text-light);
    border-left-color: var(--active-color, white);
    transform: translateX(8px);
}

/* Container for each piece of media - RESTORED TO MASONRY */
.img-ph {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    /* Standard spacing for Pinterest grids */
    break-inside: avoid;
    background: var(--bg-deep);
    border: 2px solid #2a1e24;
    display: block;
    /* Fixed from flex to restore masonry layout */
    overflow: hidden;
}

.img-ph img,
.img-ph video {
    width: 100%;
    /* Ensures natural filling of columns */
    height: auto;
    display: block;
    object-fit: cover;
}

.img-ph:hover {
    border-color: var(--active-color, white);
}

/* The Dark Gradient Banner - SLEEK VERSION */
.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Sleek gradient: tighter fade for a slight banner look */
    background: linear-gradient(to top, rgba(8, 6, 7, 0.95) 0%, rgba(8, 6, 7, 0.6) 40%, transparent 100%);
    padding: 25px 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

/* Slide banner up on hover */
.img-ph:hover .media-overlay {
    transform: translateY(0);
}

/* Banner Typography */
.overlay-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-light);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
}

.overlay-tools {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--active-color, var(--c-3d));
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* =========================================================
   --- SECTIONED PROJECT GALLERY (CORUS FRUCT) ---
   ========================================================= */
.img-grid.sectioned-gallery {
    column-count: initial;
    column-gap: 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.project-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.section-text {
    display: grid;
    gap: 12px;
    max-width: 900px;
}

.section-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(1.1rem, 2vw, 2.5rem);
    text-transform: lowercase;
    letter-spacing: 3px;
    color: var(--text-muted);
}

.section-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.section-grid {
    --section-cols: 4;
    --section-tile-width: 320px;
    --section-aspect: 4 / 3;
    display: grid;
    grid-template-columns: repeat(var(--section-cols), var(--section-tile-width));
    gap: 25px;
    width: 100%;
    justify-content: start;
}

.section-grid .img-ph {
    margin-bottom: 0;
    aspect-ratio: var(--section-aspect);
}

.section-grid .img-ph img,
.section-grid .img-ph video {
    height: 100%;
    object-fit: contain;
}

.section-grid.natural-ratio .img-ph {
    aspect-ratio: auto;
}

.section-grid.natural-ratio .img-ph img,
.section-grid.natural-ratio .img-ph video {
    height: auto;
}

.section-grid.digital-assets-grid {
    grid-template-columns: 3fr 1fr 1fr;
}

.section-grid .primary-concept {
    aspect-ratio: 16 / 9;
}

.section-grid .detail-image {
    aspect-ratio: 3 / 4;
}

@media (max-width: 1500px) {
    .section-grid {
        --section-cols: 2;
        --section-tile-width: 260px;
    }

    .section-grid.digital-assets-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .img-grid.sectioned-gallery {
        gap: 40px;
    }

    .section-grid {
        --section-cols: 1;
        --section-tile-width: min(100%, 320px);
        justify-content: stretch;
    }

    .section-grid.digital-assets-grid {
        grid-template-columns: 1fr;
    }
}

.next-project-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.next-project-btn,
#btn-next-project {
    padding: 12px 24px;
    border: 1px solid var(--active-color, var(--c-3d));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 26%, transparent);
    color: var(--active-color, var(--c-3d));
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 12px color-mix(in srgb, var(--active-color, var(--c-3d)) 35%, transparent);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.next-project-btn:hover,
#btn-next-project:hover {
    transform: scale(1.05);
    background: color-mix(in srgb, var(--active-color, var(--c-3d)) 12%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--active-color, var(--c-3d)) 60%, transparent);
}

.content {
    transition: opacity 300ms ease;
}

.content.project-crossfade-out {
    opacity: 0;
}

.content.project-crossfade-in {
    opacity: 1;
}

/* Mobile Fix: Lock the banner in place permanently */
@media (max-width: 768px) {
    /* Shrink arrows but position them absolutely so they don't steal horizontal space */
    .lightbox-nav {
        font-size: 2rem;
        padding: 12px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10001;
    }

    .lightbox-nav.prev { left: 0; }
    .lightbox-nav.next { right: 0; }

    /* Let the lightbox center just the wrapper, no side gaps from arrows */
    #lightbox {
        gap: 0;
        padding: 0 44px; /* reserve space so arrows don't overlap image */
    }

    /* Wrapper takes full available width */
    #lightbox-wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    /* Image fills as much vertical space as possible */
    #lightbox-content {
        max-width: 100%;
        max-height: 80svh;
        width: 100%;
    }

    #lightbox-content img {
        max-height: 80svh;
        max-width: 100%;
        width: auto;
        touch-action: pinch-zoom; /* native browser pinch-to-zoom */
    }

    #lightbox-content video {
        max-height: 80svh;
        max-width: 100%;
        width: auto;
    }

    /* Hide toolbar entirely on mobile — pinch handles zoom for images, native controls for video */
    .lightbox-toolbar {
        display: none;
    }

    /* Compact caption */
    #lightbox-caption {
        margin-top: 12px;
        padding: 0 8px;
    }

    #lb-title {
        font-size: 1.2rem;
    }

    #lb-meta {
        font-size: 0.8rem;
    }
}

/* =========================================================
   --- RESPONSIVE COMPONENT OVERRIDES --- 
   ========================================================= */
@media (max-width: 1366px) {
    .block-hitbox {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 90vw !important;
        max-width: 380px !important;
        height: 220px !important;
        margin: 0 auto;
        z-index: auto !important;
    }

    .block {
        transform: rotate(var(--base-rot)) !important;
        opacity: 1 !important;
    }

    .block .blob-label .semantic-label {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    }

    #explore-center {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 30px;
        text-align: center;
        display: block;
        width: 100%;
    }

    .about-content,
    .contact-content {
        width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        padding: 60px 20px 40px;
    }

    .img-ph {
        height: auto;
        /* Restoring natural height for mobile too */
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: relative;
        padding-top: 64px;
    }

    .about-content {
        box-shadow: 10px 10px 0px var(--c-wine);
        padding: 50px 20px 30px;
    }

    .contact-content {
        box-shadow: 10px 10px 0px var(--c-indigo);
        padding: 50px 20px 30px;
    }

    .block-hitbox {
        max-width: 320px !important;
        height: 180px !important;
    }

    .close-btn {
        margin-bottom: 30px;
        font-size: 0.9rem;
        position: absolute;
        top: 16px;
        left: 18px;
        margin-bottom: 0;
        z-index: 2;
    }

    .sidebar-title {
        margin-bottom: 24px;
    }

    .project-list {
        gap: 12px;
        max-height: 3.4rem;
        flex: 0 1 auto;
        overflow-y: scroll;
    }

    .sidebar-title {
        font-size: clamp(1.6rem, 6vw, 2rem);
        margin-bottom: 20px;
    }

    .project-list li {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .sidebar-footer {
        position: absolute;
        top: 16px;
        right: 18px;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        z-index: 2;
    }

    .sidebar-footer a {
        font-size: 0.95rem;
    }

    .proj-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        line-height: 1;
    }

    .proj-header {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .proj-meta {
        font-size: 0.85rem;
        letter-spacing: 1.2px;
    }

    .proj-desc {
        font-size: 1rem;
        line-height: 1.6;
    }

    .proj-desc {
        margin-bottom: 32px;
    }

    .section-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 18px;
    }

    .img-ph {
        margin-bottom: 20px;
    }
}

@media (pointer: coarse) {
    .block.is-hovered {
        filter: none !important;
        transform: rotate(var(--base-rot)) scale(1) !important;
        z-index: auto !important;
    }
}

/* =========================================================
   --- LIGHTBOX (FULLSCREEN VIEWER) --- 
   ========================================================= */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 1, 5, 0.98);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: default;
}

#lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

/* The container that stacks the image and text vertically */
#lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 80vw;
    cursor: default;
}

.lightbox-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    z-index: 10000;
}

/* PERF: hide toolbar when a video is loaded. */
.lightbox-media-is-video .lightbox-toolbar {
    display: none;
}

.lightbox-zoom-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 8, 12, 0.82);
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-transform: lowercase;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lightbox-zoom-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--active-color, var(--text-light));
    color: var(--active-color, var(--text-light));
}

.lightbox-zoom-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 80vw;
    max-height: 75vh;
}

#lightbox-content img,
#lightbox-content video {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border: 2px solid #2a1e24;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

#lightbox-content img {
    cursor: zoom-in;
    user-select: none;
    transform-origin: center center;
    transition: transform 0.18s ease;
}

#lightbox-content img.is-zoomed {
    cursor: grab;
}

#lightbox-content img.is-panning {
    cursor: grabbing;
    transition: none;
}

/* Caption Styles */
#lightbox-caption {
    margin-top: 25px;
    text-align: center;
}

#lb-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1;
}

#lb-meta {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--active-color, var(--text-light));
    text-transform: uppercase;
    font-weight: bold;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text-light);
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10001;
}

.lightbox-close:hover {
    color: var(--c-art);
}

/* Arrow Buttons */
.lightbox-nav {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 4rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 20px;
    z-index: 10000;
}

.lightbox-nav:hover {
    color: var(--text-light);
    transform: scale(1.1);
}

@media (max-width: 768px) {

    /* Take arrows out of flex flow so they don't eat horizontal space.
       Position them absolutely against the fixed #lightbox parent (= viewport). */
    .lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5rem;
        padding: 16px 8px;
        z-index: 10001;
    }

    .lightbox-nav.prev { left: 0; }
    .lightbox-nav.next { right: 0; }

    /* Remove gap - arrows are now out of flow.
       Add horizontal padding to keep image away from arrow buttons.
       Add top padding to keep image away from the close button. */
    #lightbox {
        gap: 0;
        padding: 56px 52px 12px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Wrapper fills the padded space */
    #lightbox-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Override the desktop overflow:hidden and max-width:80vw so image is never clipped
       and so that JS CSS-transform zoom is not cut off by the container */
    #lightbox-content {
        overflow: visible;
        max-width: 100%;
        max-height: none;
        width: 100%;
    }

    /* Image fills available width, capped vertically so caption stays visible */
    #lightbox-content img {
        max-height: 62svh;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        touch-action: pinch-zoom;
        display: block;
        margin: 0 auto;
    }

    /* Video - same dimensions, no pinch-zoom override needed (native controls handle it) */
    #lightbox-content video {
        max-height: 62svh;
        width: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    /* Hide zoom toolbar on mobile - pinch handles images, native controls handle video */
    .lightbox-toolbar {
        display: none;
    }

    /* Compact caption container */
    #lightbox-caption {
        margin-top: 10px;
        padding: 0 8px;
        text-align: center;
    }

    /* Override the desktop 2rem - must target the child directly or it wins over the parent */
    #lb-title {
        font-size: 1.1rem;
        line-height: 1.15;
        margin-bottom: 3px;
    }

    /* Override the desktop 1rem */
    #lb-meta {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    /* Bring the close button closer to the corner on small screens */
    .lightbox-close {
        top: 16px;
        right: 16px;
        font-size: 0.9rem;
    }
}

.img-ph {
    cursor: zoom-in;
}

/* =========================================================
   --- SEMANTIC SEO STRUCTURE SUPPORT --- 
   ========================================================= */

/* Ensure the article block maintains its layout properties */
article.block {
    display: block;
    text-decoration: none;
    cursor: none;
    /* Keep the custom cursor behavior */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, filter 0.25s ease, border-radius 0.25s ease;
}

/* Keep semantic links, but route pointer targeting through .block-hitbox */
article.block a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Ensure the label inside the link behaves like the original div */
article.block .blob-label {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Neutralize H2 defaults so they inherit the creative styles above */
.semantic-label {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
    text-align: center;
}

/* [cite: 16, 20] Enhanced visually-hidden class for SEO text */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}