/* =========================================
   Base Styles & Typography
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
    --accent-color: #888888;
    /* This stack mimics the clean, premium feel of Proxima Nova or Helvetica Neue */
    --font-family: "Cormorant Garamond",-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    margin: 0; 
    padding: 0;
    font-family: var(--font-family);
    color: var(--text-color); 
    background-color: var(--bg-color);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { 
    color: inherit; 
    text-decoration: none; 
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.6;
}

/* =========================================
   Header & Navigation
   ========================================= */
.site-header { 
    padding: 4rem 5% 2rem; /* Slightly reduced top padding so it sits nicely on the left */
}

/* =========================================
   Homepage-Specific Floating Header
   ========================================= */
.floating-header .site-header { 
    position: absolute; /* Rips the header out of the document flow */
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 100; /* Ensures it stays stacked on top of the video */
    box-sizing: border-box; /* Prevents padding from breaking the full width */
}

/* Because the video is dark, make the homepage text white! */
.floating-header .site-title a,
.floating-header .nav-links a {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Soft shadow so it's readable over light parts of the video */
}

/* Make the mobile hamburger icon white on the homepage */
.floating-header .nav-toggle-label span, 
.floating-header .nav-toggle-label span::before, 
.floating-header .nav-toggle-label span::after {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.header-inner { 
    display: flex; 
    flex-direction: column; /* Keeps the logo and nav stacked */
    justify-content: flex-start; 
    align-items: flex-start; /* Pushes everything to the left edge */
    text-align: left; /* Ensures the text itself is left-aligned */
    max-width: 100%; /* Allows it to align with the video cards */
    margin: 0 auto; 
}

.site-title { 
    margin-bottom: 1.5rem; /* Slightly tighter spacing below the title */
}

.site-title a { 
    font-size: 1.2rem; /* Shrunk down from 1.6rem for a more understated look */
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 0.15em; 
    color: #111; 
}

.nav-links { 
    list-style: none; 
    display: flex; 
    gap: 2.5rem; /* Slightly tighter gap between links */
    margin: 0; 
    padding: 0; 
}

.nav-links { 
    list-style: none; 
    display: flex; 
    gap: 3rem; 
    margin: 0; 
    padding: 0; 
}

.nav-links a { 
    font-size: 0.85rem; 
    text-transform: capitalize; 
    letter-spacing: 0.05em; 
    color: #555; 
}

.nav-toggle, .nav-toggle-label { 
    display: none; 
}

/* =========================================
   Cinematic Portfolio Cards
   ========================================= */
.content { 
    max-width: 100%; /* Allows the cards to stretch */
    margin: 0; 
    padding: 0; 
}

.portfolio-list { 
    display: flex; 
    flex-direction: column; /* This strictly enforces the vertical stack */
    gap: 2rem; /* The vertical space between videos. Change to 0 if you want them touching seamlessly! */
    padding: 0; /* Removed the 5% padding so it touches the edges */
    width: 100%;
    max-width: 100vw; /* Forces it to the exact width of the viewport */
    margin: 0;
}

.portfolio-card { 
    position: relative; 
    display: block; 
    width: 100%; /* Guarantees full screen width */
    height: 85vh; /* Takes up 85% of the screen height for a massive, immersive feel */
    min-height: 400px; 
    overflow: hidden; 
    background: #000;
}

/* The Looping Video Layer */
.video-background { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 1; 
}

.video-background video, 
.video-background img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Ensures the video fills the card without stretching */
    opacity: 0.6; /* Dims the video so the text is readable */
    transition: opacity 0.5s ease, transform 3s ease-out; 
}

.portfolio-card:hover .video-background video,
.portfolio-card:hover .video-background img {
    opacity: 0.4; /* Dims further on hover */
    transform: scale(1.03); /* Extremely slow, premium zoom effect */
}

/* The Text Floating Over the Video */
.card-content { 
    position: relative; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    text-align: center; 
    padding: 2rem; 
}

.card-content .item-title { 
    color: #ffffff; /* White text to pop against the video */
    font-size: 2.5rem; 
    font-weight: 400;
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
    margin: 0 0 0.5rem 0; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.4); /* Shadow ensures readability even on bright videos */
}

.card-content .item-meta { 
    color: rgba(255, 255, 255, 0.85); 
    font-size: 0.9rem; 
    font-weight: 300;
    letter-spacing: 0.05em; 
    margin: 0; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .portfolio-list { gap: 1rem; padding: 0 0 2rem; }
    .portfolio-card { height: 50vh; }
    .card-content .item-title { font-size: 1.8rem; }
}

/* =========================================
   Single Pages (About / Contact)
   ========================================= */
.single-page { 
    max-width: 700px; 
    margin: 0 auto; 
    text-align: center; /* Center all copy on text pages */
}

.single-page h1 {
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
}

.content-body {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #444;
    font-weight: 300;
}

.content-body p {
    margin-bottom: 1.5rem;
}

/* =========================================
   Footer
   ========================================= */
.site-footer { 
    text-align: center; 
    padding: 4rem 5% 5rem; 
    font-size: 0.8rem; 
    color: var(--accent-color); 
    letter-spacing: 0.05em;
}

.site-footer a { 
    text-decoration: none; 
    margin-bottom: 10px; 
    display: inline-block;
    text-transform: uppercase;
}

.site-footer p {
    margin: 0;
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
@media (max-width: 768px) {

    /* Keep mobile dropdown links dark so they show up on the white background */
    .floating-header .nav-links a {
        color: #111;
        text-shadow: none;
    }
    .site-header { 
        padding: 2rem 5%; /* Tighter padding for mobile screens */
    }
    
    .header-inner {
        flex-direction: row; /* Forces the title and hamburger onto the same line */
        justify-content: space-between; /* Pushes title to the far left, hamburger to the far right */
        align-items: center; /* Perfectly centers them vertically with each other */
    }

    .site-title {
        margin-bottom: 0; /* Removes the bottom spacing so the row stays perfectly aligned */
    }
    
    .nav-toggle-label { 
        display: block; 
        cursor: pointer; 
        z-index: 100; 
        margin-top: 0;
    }
    
    .nav-toggle-label span, 
    .nav-toggle-label span::before, 
    .nav-toggle-label span::after {
        display: block; 
        background: var(--text-color); 
        height: 1px; 
        width: 28px; 
        position: relative;
    }
    
    .nav-toggle-label span::before, 
    .nav-toggle-label span::after { content: ''; position: absolute; }
    .nav-toggle-label span::before { bottom: 8px; }
    .nav-toggle-label span::after { top: 8px; }
    
    /* The Dropdown Menu */
    .nav-links {
        display: none; 
        position: absolute; 
        top: 80px; /* Anchors the dropdown right below the header */
        left: 0; 
        width: 100%;
        background: rgba(255, 255, 255, 0.98); /* Almost solid white so the videos don't bleed through */
        flex-direction: column; 
        align-items: center;
        padding: 2rem 0; 
        gap: 2rem; 
        z-index: 99;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05); /* Adds a very soft drop shadow */
    }
    
    .nav-toggle:checked ~ .nav-links { display: flex; }
    
    /* Mobile Portfolio Cards */
    .portfolio-list { gap: 1rem; padding: 0; }
    .portfolio-card { height: 50vh; }
    .card-content .item-title { font-size: 1.8rem; }
}

/* =========================================
   Single Project Pages
   ========================================= */
.project-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Fills the entire screen on load */
    min-height: 500px;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
}

.hero-title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 15px rgba(0,0,0,0.5);
}

.hero-meta {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- Project Markdown Content Styling --- */
.project-body {
    max-width: 800px;
    margin: 6rem auto;
    padding: 0 5%;
}

/* Magic: Forces the very first paragraph to be huge (Synopsis) */
.project-body > p:first-of-type {
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 5rem;
    font-weight: 400;
}

/* Big production pictures */
.project-body img {
    max-width: 100%;
    height: auto;
    margin: 3rem auto 1.5rem;
    display: block;
}

/* Magic: To make "profile pictures" smaller, tell your friend 
   to crop the files to portrait or square before uploading. */

/* Name under the picture */
.project-body h3 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 0.2rem 0;
}

/* Role / Character Name */
.project-body h4 {
    text-align: center;
    font-size: 1rem;
    color: var(--accent-color);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1.5rem 0;
}

.project-body p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 2.5rem;
}