/* MODERN MOODY PHOTOGRAPHY THEME 
  Focus: Minimalism, Deep Tones, and Fluid Mobile Design
*/

:root {
  --bg-color: #0a0a0a;         /* Deep obsidian */
  --card-bg: #141414;          /* Subtle elevation */
  --accent: #F39C12;           /* Your signature orange */
  --text-main: #e0e0e0;        /* Off-white for less eye strain */
  --text-muted: #888;          /* Low-priority text */
  --nav-height: 70px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100%;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 2rem 80px 2rem; /* Clear header + side padding */
    width: 90%;
}

/* Header Layout Adjustments */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

/* BRAND STYLING - Fixing the Color & Underline */
.brand a, 
.brand a:visited, 
.brand a:link {
    color: #ffffff !important; /* Force white color */
    text-decoration: none !important; /* Remove the underline */
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    line-height: 1;
}

.brand a:hover {
    color: var(--accent) !important;
}
/* Home Page Description Style */
.home-hero {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.home-hero h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.description {
    max-width: 600px;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    /* Stack the brand and nav vertically */
    .header-container {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    #navBar {
        height: auto; /* Allow the bar to grow for two rows */
        padding: 10px 0;
    }

    .navBar {
        gap: 1.2rem;
        justify-content: center;
        width: 100%;
    }

    .navBar a {
        font-size: 0.75rem; /* Slightly smaller for a cleaner look */
        letter-spacing: 1px;
    }
    /* 1. Tighten the content gap */
    .content-wrapper {
        padding-top: 80px !important; /* 60px for nav + 20px breathing room */
    }

    /* 2. Optional: Adjust the gallery title spacing */
    .gallery-header h2 {
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
        letter-spacing: 2px;
    }

    /* 3. Ensure the main tag doesn't have its own padding fighting us */
    main {
        padding-top: 0 !important;
    }
}

/* NAVIGATION */
#navBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; 
    background-color: rgba(10, 10, 10, 0.6); 
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center; /* Vertical center */
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navBar {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.navBar a, 
.navBar a:visited {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: var(--transition);
}

.navBar a:hover {
    color: var(--accent);
}

/* IMAGES & GALLERY */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: var(--transition);
}
/* 1. The Wrapper (The Placeholder) */
.blur-load {
    width: 100%;
    height: 100%; 
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blur-load img {
    width: 100%;
    height: 100%;
    /* This forces the image to fill the square without stretching */
    object-fit: cover; 
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The state when loaded */
.blur-load.loaded {
    filter: blur(0);
}

.blur-load.loaded img {
    opacity: 1;
}
#body img, #blog img {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  margin-bottom: 2rem;
}

/* TYPOGRAPHY */
h1, h2, h3 {
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
  color: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    margin-top: 40px;
}

.about-image {
    width: 100%;
    border: 1px solid #222;
    filter: grayscale(30%);
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* --- THE HERO AREA --- */
.home-hero-fullscreen {
    position: relative;
    width: 100vw;
    height: 100vh;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* This handles the vertical centering */
}

/* The background layer */
/*.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/digital/img-1019.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    z-index: 1;
} 

/* The text/button content */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    /* This ensures the text block itself is centered */
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 90%;
}

.hero-content h1 {
    font-size: clamp(2.2rem, 8vw, 4rem);
    letter-spacing: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.1;
}

.hero-content .description {
    max-width: 650px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    margin-bottom: 40px;
}

/* --- THE CTA BUTTON --- */
.cta-button {
    display: inline-block;
    padding: 18px 45px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.cta-button:hover {
    background: rgba(255, 255, 255, 0.8);
    color: #000000;
    transform: scale(1.05);
}
/* --- MOBILE TWEAKS --- */
@media (max-width: 768px) {
    .home-hero-fullscreen {
        height: 100svh; /* More accurate for mobile browsers */
        min-height: -webkit-fill-available;
        padding-top: 0; /* Ensures content isn't pushed down by the nav */
    }
    .hero-content {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content h1 {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    .hero-content .description {
        width: 85%; /* Give the text some breathing room from the edges */
        text-align: center;
    }
    .home-hero h2 {
        font-size: 2rem;
    }
}

/* Custom CSS Arrows (Removing the old borders for cleaner lines) */
#next div, #prev div {
  border: solid var(--text-main);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 6px;
  opacity: 1 !important; /* Overriding old opacity:0 */
}

#next div { transform: rotate(-45deg); margin-right: 4px; }
#prev div { transform: rotate(135deg); margin-left: 4px; }

#next:hover, #prev:hover {
  background: var(--accent);
  transform: scale(1.1);
}

/* --- THE DOTS (Indicators) --- */
#dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  list-style: none;
  z-index: 20;
  pointer-events: auto;
}

#dots li {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border: none; /* Cleaner look */
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

#dots li.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* --- FOOTER & SOCIALS --- */
#footer {
    background-color: var(--card-bg);
    padding: 60px 0;
    border-top: 1px solid #1a1a1a;
    text-align: center;
}

#icons {
    display: flex;
    justify-content: center;
    gap: 40px; /* Wider spacing for better mobile tap targets */
    margin-bottom: 20px;
}

#icons img {
    width: 24px;
    height: 24px;
    transition: var(--transition);
    /* Filter makes standard black icons look white/grey */
    filter: invert(1) opacity(0.5); 
}

#icons a:hover img {
    filter: invert(1) opacity(1);
    transform: translateY(-3px);
}

.copyright {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* This creates the square 'box' */
    overflow: hidden;
    background-color: #111;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* This is the magic line: it crops the image to fill the square 
       without stretching it, much like an Instagram grid */
    object-fit: cover; 
    /* Centers the crop on the most important part of the photo */
    object-position: center; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.6s ease;
}

.gallery-item img:hover {
    transform: scale(1.08); /* Subtle zoom on hover */
    filter: brightness(1.1);
}

/* --- LIGHTBOX STYLES --- */
.photo-meta {
    position: absolute;
    bottom: -30px;
    left: 0;
    font-family: 'Courier New', Courier, monospace; /* Monospace for that dev look */
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
/* --- GALLERY INTRO & INSIGHTS (Desktop) --- */
.gallery-intro {
    max-width: 1200px; /* Aligns with your grid's max width */
    margin: 0 auto;
    padding: 30px 0 30px 0;
}

.gallery-intro h1 {
    font-size: 3.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 8px;
}

.medium-insight {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6); /* Dimmed text for mood */
    max-width: 600px; /* Prevents long, unreadable lines */
    margin: 0;
    padding-left: 25px;
    border-left: 3px solid var(--accent); /* Your signature orange */
    position: relative;
    
    /* Subtle glow to mimic a terminal screen */
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.1); 
}

/* Optional: Fade-in animation for the insight */
.medium-insight {
    animation: fadeInIntro 1.2s ease-out forwards;
}

@keyframes fadeInIntro {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
/* The background overlay */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Deep dark background */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    backdrop-filter: blur(8px); /* Adds a heavy blur to the gallery behind the photo */
    z-index: 2000;
}

/* When the ID is clicked/targeted, show the lightbox */
.lightbox:target {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh; /* Ensures it fits on mobile screens */
    object-fit: contain; /* Prevents cropping */
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
    border: 1px solid #222;
    transform: scale(0.95);
    transition: transform 0.4s ease;
}
.lightbox:target .lightbox-content img {
    transform: scale(1);
}

/* Invisible area around the image to click and exit */
.lightbox-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}

/* Visible 'X' button */
.close-button {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    text-decoration: none;
    font-weight: 200;
    transition: var(--transition);
}

.close-button:hover {
    color: var(--accent);
}

/* 1. The Global Fixed Background */
.fixed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/digital/img-1019.webp'); /* Ensure path is correct */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This creates the 'locked' parallax look */
    filter: brightness(0.3);
    z-index: 1;
}

/* 2. Update your Mobile Media Query */
@media (max-width: 768px) {
    /* Disable the old method to prevent conflicts */
    .home-hero-fullscreen, body {
        background-attachment: scroll !important;
        background-image: none !important; /* Let the .fixed-bg handle it */
    }
    
    /* Ensure the body is transparent so the fixed-bg shows through */
    body {
        background-color: transparent;
    }
}

@media (max-width: 600px) {
    .gallery-intro {
        padding: 60px 15px 35px 15px; /* Increased top padding to clear the navbar */
        text-align: left;
    }
    .medium-insight {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--text-muted); /* Assuming you have a #888 or similar */
        max-width: 450px;
        margin-top: 15px;
        border-left: 2px solid var(--accent); /* A subtle vertical line for "vibe" */
        padding-left: 15px;
            opacity: 0.8;
    }

    /* Tighten the gap between title and grid */
    .grid {
        grid-template-columns: 1fr; /* Single column on phones */
        gap: 5px;
    }
}

/* --- GALLERY NAVIGATION FOOTER --- */
.gallery-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0 40px 0; /* Plenty of breathing room after the grid */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separation */
    margin-top: 60px;
}

.gallery-nav-link {
    display: inline-block;
    padding: 15px 35px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Softer border than the main CTA */
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 400;
    transition: var(--transition);
    background: transparent;
}

.gallery-nav-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(243, 156, 18, 0.05); /* Very faint orange glow */
    transform: translateY(-3px); /* Subtle physical lift */
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .gallery-footer {
        padding: 60px 0 20px 0;
    }
    .gallery-nav-link {
        font-size: 0.7rem;
        padding: 12px 25px;
        letter-spacing: 2px;
    }
    .gallery-intro {
        padding: 50px 15px 35px 15px; /* Increased top padding to clear the navbar */
        text-align: left;
    }
    .gallery-intro h1 {
        font-size: 1.8rem;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 5px;
    }
    .medium-insight {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--text-muted); /* Assuming you have a #888 or similar */
        max-width: 450px;
        margin-top: 15px;
        border-left: 2px solid var(--accent); /* A subtle vertical line for "vibe" */
        padding-left: 15px;
            opacity: 0.8;
    }
    /* Tighten the gap between title and grid */
    .grid {
        grid-template-columns: 1fr; /* Single column on phones */
        gap: 10px;
    }
}
/* MOBILE OPTIMIZATIONS (1000px and down) */
@media (max-width: 768px) {

  main, #body, #blog {
    width: 100%;
    padding-top: calc(var(--nav-height) + 20px);
  }
}

/* ABOUT STORY STYLING */
.about-story {
    max-width: 800px;
    margin: 60px auto;
}

.story-block {
    display: grid;
    grid-template-columns: 200px 1fr; /* Label on left, text on right */
    gap: 40px;
    margin-bottom: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle separator */
    padding-top: 40px;
}

.story-label {
    font-family: 'Courier New', Courier, monospace; /* Technical, dev vibe */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--accent); /* Your signature orange */
    padding-top: 5px;
}

.story-block p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-main);
    font-weight: 300;
}
.story-content-with-image {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.about-portrait {
    flex-shrink: 0;
    width: 170px; /* Small and non-commanding */
    filter: grayscale(100%) contrast(1.1) brightness(0.8);
    opacity: 0.7; /* Blends into the dark background */
    transition: var(--transition);
}

.about-portrait:hover {
    opacity: 1;
    filter: grayscale(0%); /* Subtle reveal on hover */
}

.about-portrait img {
    width: 100%;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .story-content-with-image {
        flex-direction: column-reverse;
    }
    .about-portrait {
        width: 100px;
        margin-bottom: 20px;
    }
    .story-block {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 60px;
    }
    
    .story-label {
        font-size: 0.7rem;
    }
}

/* BOOKS PAGE STYLING */
.books-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
}

.section-title {
    text-align: center;
    letter-spacing: 5px;
    margin-bottom: 60px;
    color: var(--text-main);
    font-size: 2.5rem;
    font-weight: 300;
}

.book-entry {
    display: flex;
    gap: 60px;
    margin-bottom: 120px;
    align-items: center;
}

.book-cover {
    flex: 1;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.7);
    transition: var(--transition);
}

.book-cover img {
    width: 100%;
    border: 1px solid #222;
    display: block;
}

.book-cover:hover {
    transform: translateY(-10px) rotate(-1deg);
}

.book-info {
    flex: 1.2;
}

.book-info h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 600;
}

.book-description {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 35px;
    font-size: 1rem;
}

/* Unified Button Styling */
.buy-button {
    display: inline-block;
    padding: 14px 35px;
    border: 1px solid var(--accent);
    color: var(--accent) !important; /* Force the color away from blue */
    text-decoration: none !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition);
}

.buy-button:hover {
    background: var(--accent);
    color: #000 !important;
}

/* --- 4. MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .about-grid, .book-entry {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .book-cover {
        max-width: 320px;
        margin: 0 auto;
    }
}
.error-container {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, #111 0%, #0a0a0a 100%);
}

.error-content h1 {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    margin: 0;
    color: var(--accent);
    letter-spacing: -5px;
    position: relative;
}

/* Subtle Glitch Effect */
.glitch::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.error-msg {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 4px;
    color: #fff;
    margin-top: -20px;
}

.error-details {
    color: var(--text-muted);
    margin: 20px 0 40px 0;
    font-style: italic;
}

@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 50px, 0); }
    20% { clip: rect(80px, 9999px, 100px, 0); }
    100% { clip: rect(20px, 9999px, 60px, 0); }
}

/* --- WEB DEV PROJECTS --- */
.projects-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
}

.projects-header .section-title {
    text-align: left;
    margin-bottom: 15px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
    padding: 20px 0 60px 0;
}

.project-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 156, 18, 0.4);
}

.project-thumb-link {
    display: block;
}

.project-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
}

.project-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    color: var(--text-muted);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
}

.project-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-title {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 600;
}

.project-tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.stack-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pill {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid rgba(243, 156, 18, 0.35);
    color: var(--accent);
    background: rgba(243, 156, 18, 0.06);
    border-radius: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.case-study-link {
    margin-top: auto;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: var(--transition);
}

.case-study-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- CASE STUDY PAGE --- */
.back-link {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 30px;
    transition: var(--transition);
}

.back-link:hover {
    color: var(--accent);
}

.case-study-title {
    text-align: left;
    margin-bottom: 10px;
}

.case-study-tagline {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 700px;
    margin-bottom: 25px;
}

.case-study-hero {
    margin: 30px 0 50px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.case-study-hero img {
    width: 100%;
    border-radius: 0;
}

.case-study-body {
    max-width: 800px;
}

.case-study-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    margin-bottom: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
}

.case-study-block p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-main);
    font-weight: 300;
}

@media (max-width: 600px) {
    .case-study-block {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 40px;
    }
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* --- CUSTOM SCROLLBAR --- */

/* 1. The width of the entire scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Keeps it thin and elegant */
    z-index: 1001;
}

/* 2. The Track (the background path) */
::-webkit-scrollbar-track {
    background: var(--bg-color); 
    z-index: 1001;
}

/* 3. The Thumb (the moving part) */
::-webkit-scrollbar-thumb {
    background: #222; /* Very subtle against the obsidian background */
    border-radius: 12px;
    border: 2px solid var(--bg-color); /* Creates "padding" around the thumb */
}

/* 4. The Thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent); /* Your signature orange reveals on interaction */
}

/* For Firefox (Firefox uses different properties) */
* {
    scrollbar-width: thin;
    scrollbar-color: #222 var(--bg-color);
}