/* Page-specific styles for illustration.html */
.nav-hover-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-arrow svg { width: 0.85rem; height: 0.85rem; display: block; fill: none; stroke: currentColor; stroke-width:1.2; opacity: 0.9; transition: transform .18s ease, opacity .18s ease; }
.nav-label:hover .nav-arrow svg { transform: translateX(4px); opacity: 1; }
.portfolio-hero .hero-subtitle .subtitle-text { color: var(--accent-color) !important; font-weight: inherit; filter:none; letter-spacing: inherit; }
.portfolio-hero .hero-subtitle .subtitle-line { background: var(--secondary-color); opacity:.3; }
.portfolio-hero .hero-description { color:#f5f5f5 !important; font-weight:300; letter-spacing:.05em; text-shadow:0 0 4px rgba(255,255,255,0.25); }

/* Override works-section background for illustration page */
.works-section {
    background: var(--background) !important;
}

.series-block { margin-bottom: 6rem; }
.series-header { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.series-title { font-family: var(--font-secondary); font-size: clamp(2rem, 4vw, 3rem); font-weight:400; line-height:1; letter-spacing:.03em; color:var(--text-primary); position:relative; padding-bottom:.6rem; }
.series-title:after { content: ''; position:absolute; left:0; bottom:0; width:80px; height:2px; background:var(--accent-color); }
.series-meta { max-width:600px; font-family:var(--font-secondary); font-size:1rem; line-height:1.6; color:var(--text-light); }
.series-gallery-wrapper { position:relative; }
.series-gallery-wrapper:before, .series-gallery-wrapper:after { content: ''; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:2; }
.series-gallery-wrapper:before { left:0; background: linear-gradient(to right, var(--background) 0%, rgba(0,0,0,0)100%); }
.series-gallery-wrapper:after { right:0; background: linear-gradient(to left, var(--background) 0%, rgba(0,0,0,0)100%); }
.series-gallery.works-grid { display:flex !important; gap:1.5rem; overflow-x:auto; padding:1rem 0 1.5rem; scroll-snap-type:x mandatory; scroll-padding:1rem; }
.series-gallery .work-item { flex:0 0 250px; scroll-snap-align:start; position:relative; }
@media (min-width:1200px){ .series-gallery .work-item { flex:0 0 300px; } }
.series-gallery .work-image { aspect-ratio:4/5; overflow:hidden; position:relative; border:1px solid var(--border-color); background:var(--bg-secondary); }
.series-gallery .work-image img { width:100%; height:100%; object-fit:cover; filter:none; transition:.8s ease; }
.series-gallery .work-item:hover img { filter:none; transform:scale(1.05); }
.series-badge { display:inline-block; font-size:.65rem; letter-spacing:.15em; font-weight:500; text-transform:uppercase; background:var(--accent-color); color:white; padding:.35rem .6rem; border-radius:2px; margin-right:.5rem; }
.series-gallery .work-overlay { background: rgba(0,0,0,0.7); }
.series-gallery .work-info h3 { font-size:.9rem; letter-spacing:.05em; }
.series-gallery .work-info .work-category { font-size:.6rem; letter-spacing:.15em; }
.series-gallery .work-item[data-type="text"] .work-image { border-style: dashed; }
.lightbox-series-description { color:#fff !important; font-family:var(--font-secondary); font-size:.9rem; line-height:1.5; margin-top:1rem; opacity:.95; }

/* Remove forced grayscale for gallery images on this Illustration page only */
.series-gallery .work-image img, .works-grid .work-image img, .work-image img { filter: none !important; }

/* Mobile overlay nav */
.mobile-nav { display:none; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:1100; }
.mobile-nav.mobile-open { display:flex; }
.mobile-nav-inner { display:flex; flex-direction:column; gap:1rem; padding:1rem 2rem; width:100%; max-width:420px; }
.mobile-nav-link { color:#fff; font-size:1.05rem; text-decoration:none; padding:.75rem 1rem; background:rgba(255,255,255,0.05); border-radius:6px; text-align:center; }
.mobile-nav-link:hover { background:rgba(255,255,255,0.1); }
.menu-toggle .menu-line { background:#000 !important; mix-blend-mode:normal !important; transition:background .3s ease; }
@media (max-width:700px){ .menu-toggle { position:fixed !important; top:2rem !important; right:2rem !important; width:40px; height:40px; display:flex !important; align-items:center; justify-content:center; z-index:1300 !important; } .side-nav { display:none !important; pointer-events:none !important; } .mobile-nav-inner { padding-top:4.5rem; } }
