:root {
    /* Colors */
    --color-bg: #f2f2f2;
    --color-text: #1a1a1a;
    --color-accent: #ff00ff;
    /* Magenta for personality */
    --color-tally: #ff3b3b;
    /* RED for REC/Tally */
    --color-guide: rgba(20, 20, 20, 0.15);
    /* Safe area lines */
    --color-guide-strong: rgba(20, 20, 20, 0.4);

    /* Fonts */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing & Layout */
    --container-width: 1200px;
    --padding-safe: 5vw;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
}

/* === Viewfinder Overlay === */
.monitor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    padding: 30px;
    /* Outer Safety Margin */
}

/* Title Safe & Action Safe Areas */
.safe-area-action {
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    border: 1px solid var(--color-guide);
}

.safe-area-title {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 1px dashed var(--color-guide);
}

/* Crosshair */
.crosshair-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.crosshair-center.hidden {
    opacity: 0;
}

.crosshair-center::before,
.crosshair-center::after {
    content: '';
    position: absolute;
    background: var(--color-guide-strong);
}

.crosshair-center::before {
    top: 9px;
    width: 20px;
    height: 2px;
}

.crosshair-center::after {
    left: 9px;
    width: 2px;
    height: 20px;
}

/* Corner Markers */
.corner-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--color-text);
    border-style: solid;
    border-width: 0;
}

.top-left {
    top: 30px;
    left: 30px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.top-right {
    top: 30px;
    right: 30px;
    border-top-width: 2px;
    border-right-width: 2px;
}

.bottom-left {
    bottom: 30px;
    left: 30px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}

.bottom-right {
    bottom: 30px;
    right: 30px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

/* REC & Timecode */
.rec-indicator {
    position: absolute;
    top: 40px;
    right: 45px;
    font-family: var(--font-mono);
    color: var(--color-tally);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    pointer-events: auto;
    cursor: pointer;
}

.rec-indicator .dot {
    width: 10px;
    height: 10px;
    background: var(--color-tally);
    border-radius: 50%;
    animation: blink 2s infinite;
}

.timecode {
    position: absolute;
    bottom: 40px;
    right: 45px;
    font-family: var(--font-mono);
    color: var(--color-text);
    font-weight: 500;
}

/* === Layout === */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 12vw;
    /* X-Axis Padding for Viewfinder Safety */
    position: relative;
    z-index: 10;
}

/* Header */
.site-header {
    padding-top: 12vh;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-text);
    letter-spacing: -0.5px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--color-accent);
    text-decoration: underline;
    /* Standard underline for links */
}

/* Typography Helpers */
.mono-label {
    font-family: var(--font-mono);
    color: var(--color-accent);
    display: block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Hero */
.hero-section {
    padding: 6rem 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.hero-content {
    flex: 2;
}

.hero-visual {
    flex: 1;
    max-width: 350px;
    display: flex;
    justify-content: center;
}

/* Viewfinder Interaction for Hero */
.viewfinder-image-wrapper:hover .project-image {
    filter: grayscale(0%);
}

.viewfinder-image-wrapper:hover .viewfinder-corner {
    border-color: var(--color-accent);
    width: 25px;
    height: 25px;
}

.hero-content h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.hero-content h1:last-child {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-text);
}

/* Work Section */
.work-section {
    padding: 6rem 0;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    margin-top: 2rem;
}

.work-card {
    border-top: 1px solid var(--color-text);
    padding-top: 1rem;
}

.card-header h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.card-body p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #444;
}

.link-arrow {
    font-family: var(--font-mono);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    border: 1px solid var(--color-text);
    padding: 10px 15px;
    display: inline-block;
    transition: all 0.2s;
}

.link-arrow:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

/* Contact Section */
.contact-section {
    padding: 8rem 0;
    text-align: left;
}

.contact-content h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-weight: 800;
}

.mail-link {
    font-size: clamp(1rem, 3vw, 2rem);
    font-family: var(--font-mono);
    color: var(--color-accent);
    text-decoration: none;
}

.mail-link:hover {
    background: var(--color-accent);
    color: white;
}

/* Footer */
.site-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--color-guide-strong);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-top: 4rem;
}

.footer-meta {
    display: flex;
    justify-content: space-between;
}

/* Animation */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* === Sub-Page Styles === */
.page-intro {
    padding: 2rem 0;
    max-width: 800px;
}

.intro-text {
    font-size: 1.5rem;
    margin-top: 1rem;
    color: #444;
}

.spacer-top {
    margin-top: 6rem;
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 2rem;
}

.project-item {
    border-left: 2px solid var(--color-text);
    padding-left: 1.5rem;
}

.project-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.mono-meta {
    font-family: var(--font-mono);
    color: #666;
    font-size: 0.9rem;
}

.compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.compact-grid .project-item {
    border-left: 1px solid var(--color-guide-strong);
}

/* === Compact Cards & Viewfinder === */
.compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.compact-grid .project-item {
    border-left: 1px solid var(--color-guide-strong);
    padding-left: 1rem;
}

.compact-grid h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.compact-grid .link-arrow {
    padding: 10px 15px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.project-image-container,
.viewfinder-image-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
    padding: 5px;
    /* Space for markers */
}

/* Constrain Image Size */
.project-image {
    max-width: 100%;
    max-height: 350px;
    /* Reduced height */
    width: auto;
    height: auto;
    display: block;
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

.work-card:hover .project-image,
.project-item:hover .project-image {
    filter: grayscale(0%);
}

/* Viewfinder Corners */
.viewfinder-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--color-text);
    transition: all 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.vf-tl {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.vf-tr {
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0;
}

.vf-bl {
    bottom: 0;
    left: 0;
    border-right: 0;
    border-top: 0;
}

.vf-br {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
}

.work-card:hover .viewfinder-corner,
.project-item:hover .viewfinder-corner {
    border-color: var(--color-accent);
    width: 25px;
    height: 25px;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .monitor-overlay {
        padding: 15px;
    }

    .safe-area-action {
        left: 10px;
        right: 10px;
    }

    .hero-section {
        padding: 4rem 0;
    }

    /* Move indicators inside the corner markers (markers are at 30px) */
    .rec-indicator {
        right: 25px;
        top: 55px;
    }

    .timecode {
        right: 25px;
        bottom: 55px;
    }

    .container {
        padding: 0 8vw;
    }

    /* New Hero Grid Responsive */
    .hero-grid {
        flex-direction: column-reverse;
        /* Image on top or bottom? usually image top or below text. Let's put image above text for profile? Or below. User said "below or next to". Let's try regular column which puts text first (as it is first in HTML) then image. Wait, flex-direction column puts text (first child) then visual (second child).  */
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .hero-visual {
        width: 100%;
        max-width: 280px;
    }
}

/* === Lightbox / Modal === */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.95);
    /* Very dark background */
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 2vw;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    border: 2px solid var(--color-text);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    /* White for visibility on dark background */
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-mono);
    line-height: 1;
    z-index: 10001;
    transition: color 0.3s;
}

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

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    /* White for visibility */
    font-family: var(--font-mono);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10002;
    transition: all 0.3s ease;
    user-select: none;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Cursor for zoomable images */
.viewfinder-image-wrapper img {
    cursor: zoom-in;
}

.viewfinder-image-wrapper video {
    cursor: default;
    /* Videos have their own controls */
}

/* === Signal Lost Easter Egg === */
.signal-lost-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #000;
    display: none;
    pointer-events: none;
}

.signal-lost-overlay.active {
    display: block;
}

.color-bars {
    display: flex;
    width: 100%;
    height: 100%;
}

.bar {
    flex: 1;
    height: 100%;
}

.bar.white {
    background-color: #ffffff;
}

.bar.yellow {
    background-color: #ffff00;
}

.bar.cyan {
    background-color: #00ffff;
}

.bar.green {
    background-color: #00ff00;
}

.bar.magenta {
    background-color: #ff00ff;
}

.bar.red {
    background-color: #ff0000;
}

.bar.blue {
    background-color: #0000ff;
}

.noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.glitch-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem;
    color: white;
    background: black;
    padding: 10px 20px;
    font-weight: bold;
    animation: blink 0.1s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* VHS Tracking Animation */
/* Clean Image Component */
.viewfinder-image-wrapper {
    position: relative;
    /* Wrapper for image and corners */
}

/* Base Image */
.hero-visual .project-image {
    opacity: 0.9;
    filter: grayscale(100%) contrast(1.1);
    position: relative;
    z-index: 1;
}

/* Hover: Show Clean Image */
.viewfinder-image-wrapper:hover .project-image {
    opacity: 1;
    filter: grayscale(0%);
}

/* === Collapsible Details === */
.live-edit-details summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding-right: 30px;
}

.live-edit-details summary::-webkit-details-marker {
    display: none;
}

.live-edit-details summary h3 {
    display: inline-block;
}

.live-edit-details summary::after {
    content: '[+]';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-weight: bold;
}

.live-edit-details[open] summary::after {
    content: '[-]';
}

.live-edit-details .details-content {
    animation: fadeIn 0.3s ease-in-out;
    margin-top: 1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}