/*
Theme Name: Logic as Art
Theme URI: https://example.com/logic-as-art
Author: Heckle & Code Team
Author URI: https://heckleandcode.com
Description: A minimalist, retro-architectural theme for showcasing software engineering as a fine art. Features dark mode, typewriter aesthetics, and curator-style layouts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: logic-as-art
*/

/*
    Logic as Art Theme Styles
*/

:root {
    /* Gallery Palette */
    --bg-color: #050505;       /* Deepest Matte Black */
    --surface-color: #0f1012;  /* Slightly lighter for cards/frames */
    --text-primary: #e0e0e0;   /* Off-white for readability */
    --text-muted: #888888;     /* Museum caption grey */
    --accent-gold: #c5a365;    /* Gold leaf for rare accents */
    --spotlight: rgba(255, 255, 255, 0.08); /* Spotlight effect */

    /* Typography */
    --font-heading: 'Cinzel', serif; /* Museum/Classical feel */
    --font-body: 'Inter', sans-serif; /* Clean modern reading */
    --font-code: 'Fira Code', monospace; /* The Art Medium */

    /* Spacing */
    --gallery-spacing: 4rem;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll from 3D effects */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

code, pre {
    font-family: var(--font-code);
}

/* Core Layout */
.gallery-container {
    max-width: 1024px; /* Exact match for Hero Image width */
    margin: 0 auto;
    padding: 0 2rem; /* Keep padding for mobile breathing room */
    width: 100%;
    box-sizing: border-box;
}

/*
   Museum Footer (The Plaque)
   Implemented from contact_mocks.html
*/
.museum-footer {
    background-color: #0c0c0c;
    border-top: 1px solid #222;
    padding: 60px 20px 30px; /* Added bottom padding for copyright */
    text-align: center;
    position: relative;
    margin-top: 4rem;
}

.museum-footer::before {
    content: '\2756'; /* Stylistic Diamond (Black Diamond Minus White X) */
    color: var(--accent-gold);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0c0c0c;
    padding: 0 10px;
    font-family: var(--font-heading);
}

.plaque-content {
    display: inline-block;
    border: 1px solid #333;
    padding: 30px 50px;
    background: linear-gradient(180deg, #111, #0a0a0a);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 30px;
}

.plaque-name {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
}

.plaque-details {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #aaa;
    letter-spacing: 1px;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Safe for mobile */
}

.plaque-separator {
    color: #444;
    font-size: 0.8rem;
}

.plaque-link {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s;
}
.plaque-link:hover {
    color: #fff;
}

.site-info .copyright {
    font-size: 0.75rem;
    color: #444;
    font-family: var(--font-body);
}

.site-info .copyright a {
    color: #555;
    text-decoration: none;
}/* Main Gallery Styles */

/* -------------------------------------------------------------------------- */
/*                                 Reset & Base                               */
/* -------------------------------------------------------------------------- */

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    /* perspective removed to fix scrolling/hit-test issues */
}

/* -------------------------------------------------------------------------- */
/*                               Header & Nav                                 */
/* -------------------------------------------------------------------------- */

.site-header {
    padding: 3rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(5,5,5,0.95), transparent);
    pointer-events: none;
    transition: background 0.3s ease;
}

.site-header .gallery-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
    width: 100%; /* Ensure it fills the 1200px max-width from style.css */
    box-sizing: border-box; /* Strict boxing */
}

/* Site Title */
.site-title {
    font-family: var(--font-heading);
    font-size: 1.1rem; /* Reduced from 1.5rem */
    letter-spacing: 0.25em;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    line-height: 1;
}

.site-title a {
    text-decoration: none;
    color: #ffffff !important;
}

/* Navigation Menu - Strict Loophole Fixes */
.main-navigation ul,
.main-navigation .menu,
#primary-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 3rem;
    flex-wrap: wrap;
    align-items: center;
}

.main-navigation li {
    display: block;
    margin: 0;
}

.main-navigation a {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--accent-gold);
    text-shadow: 0 0 10px rgba(197, 163, 101, 0.4);
}

/* Default: Hide Toggle on Desktop */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 0;
}

/* Mobile Menu Styles */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block !important;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 10, 10, 0.98);
        border-bottom: 1px solid #333;
        padding: 2rem;
        clip-path: inset(0 0 100% 0); /* Hidden by default */
        transition: clip-path 0.4s ease-in-out;
    }

    .main-navigation.toggled {
        clip-path: inset(0 0 0 0); /* Reveal */
    }

    .main-navigation ul,
    .main-navigation .menu,
    #primary-menu {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem;
    }
}

.exhibition-hall {
    padding-top: 20vh;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gallery-spacing);
    /* transform-style removed */
}

/* The Frame */
.art-frame {
    width: 350px;
    height: 500px;
    background: linear-gradient(145deg, #151515, #0a0a0a); /* Subtle gradient surface */
    border: 4px solid #222; /* Thick dark bezel */
    position: relative;
    /* Ensure it sits in 3D space but interactions work */
    z-index: 10;
    box-shadow:
        0 0 0 1px #444, /* Metallic highlight ring */
        0 20px 50px rgba(0,0,0,0.6);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
    cursor: pointer; /* Force pointer to indicate clickability */
    /* Overflow hidden removed so wires can stick out top */
}

/* Suspended Wires Effect */
.art-frame::before,
.art-frame::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Start at top of card */
    width: 1px;
    height: 300px; /* Restored to original length */
    background: linear-gradient(to top, rgba(200,200,200,0.5), transparent); /* Restored visibility */
    pointer-events: none;
    z-index: -1; /* Behind frame */
}
.art-frame::before { left: 40px; }
.art-frame::after { right: 40px; }


.art-frame:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 0 0 1px var(--accent-gold), /* Gold highlight on hover */
        0 30px 60px rgba(0,0,0,0.8),
        0 0 30px var(--spotlight);
    border-color: #333;
    z-index: 20; /* Pop above neighbors on hover */
}

/* Featured Image on Cards */
.frame-thumbnail {
    width: 100%;
    height: 180px; /* Specific height for visual balance */
    overflow: hidden;
    border-bottom: 1px solid #333;
    margin-bottom: 0;
}

.frame-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1); /* Black & White Aesthetic */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Reveal colors on hover */
.art-frame:hover .frame-thumbnail img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
}

/* Link Wrapper - Fills the card */
.frame-link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden; /* Clip content inside the border */
}

.frame-content {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align Top */
}

/* Header Alignment - Force fixed height */
.frame-content .entry-header {
    min-height: 90px; /* Consistent start position for content */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #222;
    padding-bottom: 1rem;
}

.code-abstract {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.9; /* Improved visibility */
    margin-bottom: 2rem;
    overflow: hidden;
    min-height: 10em; /* Ensure space for ~6-8 lines */
    /* Remove aggressive mask to show full content */
}

.frame-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.frame-meta {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

/* Spotlight Effect via CSS Radial Gradient */
.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 50%, transparent 10%, rgba(0,0,0,0.8) 80%);
    pointer-events: none;
    z-index: 50;
    opacity: 0.6;
}

/* -------------------------------------------------------------------------- */
/*                               Single Project                               */
/* -------------------------------------------------------------------------- */

.project-split {
    display: flex;
    min-height: 100vh;
}

.project-art {
    flex: 1;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.project-art img {
    max-width: 80%;
    max-height: 80vh;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.project-details {
    flex: 1;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #111;
}

.curator-note {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 2rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.project-meta-table {
    margin-top: auto;
    border-top: 1px solid #222;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.meta-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.meta-value {
    display: block;
    font-family: var(--font-code);
    font-size: 0.9rem;
    color: var(--accent-gold);
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */

.site-footer {
    text-align: center;
    padding: 3rem 0;
    margin-top: 4rem;
    border-top: 1px solid #111;
}

.footer-credit {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/*                            Static Mount (Single View)                      */
/* -------------------------------------------------------------------------- */

.art-frame.static-mount {
    width: 100%;
    height: auto; /* Grow with content */
    cursor: default;
    margin-bottom: 4rem;
}

/* Disable the 3D tilt/lift on the reading frame */
.art-frame.static-mount:hover {
    transform: none;
    z-index: 10; /* Keep baseline z-index */
    /* Keep the shadow glow though, it's nice */
    border-color: #999; /* Don't flash white borders while reading */
}

/* New Inner Container for Reading content */
.frame-inner-surface {
    background: linear-gradient(145deg, #151515, #0a0a0a);
    border: 1px solid #333;
    padding: 4rem 3rem; /* Spacious padding for reading */
    min-height: 60vh;
}

.static-mount .entry-content {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* -------------------------------------------------------------------------- */
/*                               Curator Desk View                            */
/* -------------------------------------------------------------------------- */

.curator-desk-view {
    position: relative;
    min-height: 100vh;
    background-color: #1a1a1a;
    overflow-x: hidden;
}

/* The Desk Surface (Background) */
.desk-surface {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(//daptl.com/wp-content/themes/logic-as-art/assets/images/curator-desk-bg.webp);
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(0.7); /* ensure text readability */
}

.desk-layout {
    position: relative;
    z-index: 10;
    display: flex;
    /* Align items to the TOP corner as requested */
    align-items: flex-start;
    justify-content: center;
    /* Reduced gap to bring frame closer */
    gap: 2rem;
    padding-top: 15vh;
    padding-bottom: 5rem;
    min-height: 90vh;
    perspective: 1200px;
}

/* ------------------ Object 1: Standing Frame ------------------ */

.frame-zone {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
    /* Move frame UP relative to the row */
    margin-top: -3rem;
}

.standing-mount-point {
    transform-style: preserve-3d;
    transform-origin: bottom center;
    /* Flat Angle: Just -12deg turn, no lean back */
    transform: rotateZ(-12deg);
    /* No hover effect requested */
    transition: transform 0.4s ease;
}

/* The Glass Panel */
.frame-glass {
    position: relative;
    width: 300px;
    height: 400px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,0.15);

    /* Grounding Shadows */
    box-shadow:
        -10px 15px 30px rgba(0,0,0,0.5), /* Cast Shadow */
        -1px 2px 5px rgba(0,0,0,0.6); /* Contact Shadow */
}

/* The Photo Container */
.photo-matte {
    position: absolute;
    top: 7%; left: 7%; width: 86%; height: 86%;
    /* Requested Black Border */
    border: 8px solid #050505;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.framed-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    display: block;
}

/* Hardware: Clips */
.clip {
    position: absolute; width: 14px; height: 32px;
    background: linear-gradient(to right, #ccc, #fff, #999);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 10;
    border-radius: 2px;
}
.c-top { top: -2px; left: 50%; transform: translateX(-50%); }
.c-bot { bottom: -2px; left: 50%; transform: translateX(-50%); }

/* Hardware: Easel Leg */
.easel-leg {
    position: absolute;
    top: 15%; left: 40%; width: 20%; height: 80%;
    background: #050505;
    /* Pushed behind glass */
    transform: translateZ(-40px) rotateX(-25deg);
    transform-origin: top center;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.8);
    border-radius: 2px;
    z-index: -1;
}

/* ------------------ Object 2: Bio Paper ------------------ */

.paper-zone {
    flex: 0 0 500px;
    perspective: 1000px;
    /* Push Bio DOWN relative to the row (Reduced from 4rem to 1rem) */
    margin-top: 1rem;
}

.bio-paper {
    background-color: #f8f1e0; /* Fallback beige */
    background-image: url(//daptl.com/wp-content/themes/logic-as-art/assets/images/parchment-bg.webp);
    background-size: cover;
    background-blend-mode: multiply;

    color: #222;
    padding: 4rem;
    position: relative;

    /* Box Shadow (Needs drop-shadow filter because of clip-path) */
    filter: drop-shadow(0 15px 10px rgba(0,0,0,0.3));

    transform: rotate(-1deg) translateZ(0); /* Subtle rotation */

    /* Rough Edges via Clip Path */
    clip-path: polygon(
        0% 0%,
        5% 0.5%, 10% 0%, 25% 1%, 50% 0.5%, 80% 0%, 100% 1%,
        99.5% 20%, 100% 50%, 99% 80%, 100% 100%,
        80% 99.5%, 50% 100%, 20% 99%, 0% 100%,
        0.5% 80%, 0% 50%, 0.5% 20%
    );

    /* Remove standard border since we have rough edges */
    border: none;
}

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

.bio-paper .entry-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    text-align: center;
    color: #111;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #ccc; /* Underline emphasizing the doc title */
    padding-bottom: 1rem;
    display: inline-block;
    width: 100%;
}

.decorative-separator {
    display: none; /* Hide for this clean look */
}

.bio-paper .entry-content {
    font-family: 'Georgia', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 2rem;
}

.bio-paper .entry-content p {
    margin-bottom: 1.5rem;
}

.paper-footer {
    margin-top: 3rem;
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.signature {
    font-family: 'Questrial', sans-serif;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* Responsive */
@media screen and (max-width: 900px) {
    .desk-layout {
        flex-direction: column;
        padding-top: 12vh;
        gap: 3rem;
    }
    .frame-zone {
        flex: 0 0 auto;
    }
    .standing-frame-wrapper {
        transform: none;
        width: 200px;
        height: 280px;
    }
    .bio-paper {
        padding: 2rem;
        transform: none;
    }
}

/* Force all content links to handle color explicitly */
a {
    color: inherit; /* Inherit text color by default */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--accent-gold);
}

/* Specific Overrides for Titles overrides any parents */
.entry-title a {
    color: #ffffff !important;
}

.entry-title a:hover {
    color: var(--accent-gold) !important;
}

/* Return to Collection Link */
.entry-footer a {
    color: var(--text-muted) !important;
    font-family: var(--font-code);
}
.entry-footer a:hover {
    color: var(--accent-gold) !important;
}


/* Header Glassmorphism */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0.8) 60%, rgba(5,5,5,0) 100%);
    backdrop-filter: blur(5px);
}/*
   Logic as Art - PrismJS Theme
   Palette: Deep Dark Background, Gold/White/Grey Syntax
*/

/* Code Blocks */
code[class*="language-"],
pre[class*="language-"] {
	color: #e0e0e0; /* Off-white text */
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.9em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.6;
	tab-size: 4;
	hyphens: none;
}

/* Container */
pre[class*="language-"] {
	padding: 1.5em;
	margin: 1.5em 0;
	overflow: auto;
    background: #0f1012; /* Dark frame background */
    border: 1px solid #333; /* Subtle border */
    border-left: 3px solid #c5a365; /* Gold Accent Bar */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Slight lift */
    border-radius: 2px;
}

/* Inline Code */
:not(pre) > code[class*="language-"] {
	background: #1a1a1a;
	padding: 0.1em 0.3em;
	border-radius: 0.3em;
	white-space: normal;
}

/* Syntax Tokens - Museum Aesthetic (Refined v2) */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #7a7a7a; /* Medium Grey */
    font-style: italic;
}

.token.punctuation {
	color: #a0a0a0; /* Lighter Grey */
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #c5a365; /* Standard Gold */
}

.token.boolean,
.token.number {
	color: #e6bf83; /* Pale Copper */
}

/* Strings - Pure White for high contrast */
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
	color: #ffffff; /* Pure White */
}

/* Keywords - Structure */
.token.atrule,
.token.keyword,
.token.selector {
	color: #c5a365; /* Standard Gold */
    font-weight: bold;
}

/* Logic - The Action -> Now GOLD as requested */
.token.function,
.token.class-name {
	color: #ffd700; /* Bright/Yellow Gold */
    text-shadow: none;
}

/* Operators */
.token.operator,
.token.entity,
.token.url {
	color: #ccc; /* Silver */
}

.token.important,
.token.bold {
	font-weight: bold;
    color: #ffd700;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}/* =========================================
   LAA 3D CAROUSEL STYLES
   used on: Resume (page-resume.php), Manifesto (page-manifesto.php)
   ========================================= */

.resume-wrapper {
    padding-top: 40px;
    text-align: center;
}

.resume-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
}

.resume-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #c5a365;
    margin: 0 0 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.resume-header .instruct {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 1px;
}

/* Core Stage */
.exhibit-stage {
    height: 600px; /* Increased from 500px to prevent bottom-clipping on Resume */
    perspective: 1500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 100px;
    padding-top: 40px;
    overflow: hidden;
}

/* ... (omitted lines) ... */

.card-scroll-area {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
    padding-right: 5px;
    padding-bottom: 20px; /* Space for content above bottom border */
}

/* ... (omitted lines) ... */

/* ==================
   CARD STYLES
   ================== */

/* Frame Style */
.style-frame { background: #000; border: 8px solid #1a1a1a; padding: 0; }
.style-frame:hover { border-color: #c5a365 !important; } /* Force Gold on Hover */

.frame-img { height: 70px; width: 100%; background-size: cover; background-position: center; opacity: 0.8; border-bottom: 1px solid #333; }

.exhibit-stage.stage-manifesto {
    height: 750px;
    margin-top: 40px;
}

.exhibit-stage::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: radial-gradient(circle, #333, transparent 70%);
    opacity: 0.5;
}

/* Watermark & Labels */
.exhibit-watermark {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    color: #222;
    font-size: 4rem;
    z-index: 0;
    opacity: 0.2;
    letter-spacing: 10px;
    white-space: nowrap;
    pointer-events: none;
}

.stage-label {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fira Code', monospace;
    color: #c5a365;
    font-size: 0.8rem;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #050505;
    padding: 5px 15px;
    border: 1px solid #333;
}

/* Navigation Layer */
.nav-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

.nav-btn {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: rgba(10,10,10,0.8);
    border: 1px solid #444;
    color: #c5a365;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.nav-btn:hover {
    background: #c5a365;
    color: #000;
    transform: scale(1.1);
}

.nav-prev { left: 8%; }
.nav-next { right: 8%; }

/* Pivot & Cards */
.carousel-pivot {
    width: 0;
    height: 0;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.card {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -130px;
    margin-top: -180px;
    width: 260px;
    height: 360px;
    box-sizing: border-box;
    background: #080808;
    border: 1px solid #333;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    transform-style: preserve-3d;
    transition: border-color 0.3s;
    overflow: hidden;
    border-radius: 2px;
}

.card:hover {
    border-color: #c5a365;
}

.card-scroll-area {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
    padding-right: 5px;
}

.card-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.card-scroll-area::-webkit-scrollbar-thumb {
    background: #333;
}

/* ==================
   CARD STYLES
   ================== */

/* Frame Style */
.style-frame { background: #000; border: 8px solid #1a1a1a; padding: 0; }
.frame-img {
    height: 70px;
    width: 100%;
    opacity: 0.8;
    border-bottom: 1px solid #333;
    /* Default dark branding if no image is present */
    background: linear-gradient(to bottom, #111, #080808);
    background-size: cover;
    background-position: center;
}
.frame-body { padding: 15px; }
.frame-title { font-family: 'Cinzel', serif; color: #fff; margin: 0 0 5px; font-size: 1.1rem; }
.frame-tech { font-family: 'Fira Code', monospace; color: #c5a365; font-size: 0.55rem; text-transform: uppercase; }
.frame-loc { display: block; font-size: 0.65rem; color: #666; margin-bottom: 10px; }
/* Frame Style */
/* Frame Style */
.frame-desc {
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    color: #d2d2d2; /* RGB 210, 210, 210 */
    line-height: 1.6;
    font-weight: 400;
    list-style: none !important; /* Removed circles */
    padding: 0;
    margin: 0;
    margin-top: 10px; /* Moved from inline style */
    text-align: left !important; /* Force Left Alignment */
}
.frame-desc li {
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* Force Left Alignment */
}
.frame-desc li::before {
    content: '›';
    color: #c5a365;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Plaque Style */
.plaque-header {
    position: relative;
    /* padding-right removed to ensure perfect centering */
    padding-top: 25px; /* Vertical separation for Badge */
    margin-bottom: 10px;
}
.plaque-role {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-align: center; /* Center the Title */
}
.plaque-year {
    position: absolute;
    top: 0;
    right: 0;
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem; /* Very small, crisp badge */
    color: #c5a365;
    font-weight: bold;
    opacity: 1;
}
.plaque-org { display: block; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; color: #ccc; margin-top: 4px; }
.plaque-loc { display: block; font-size: 0.65rem; color: #aaa; margin-top: 2px; font-style: italic; }
.plaque-tech {
    display: block;
    margin-top: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.55rem;
    color: #8a7246;
    border-top: 1px dashed #333;
    padding-top: 5px;
    text-transform: uppercase;
}
.plaque-desc {
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    color: #d2d2d2; /* RGB 210, 210, 210 */
    line-height: 1.6;
    font-weight: 400;
    padding-left: 0;
    margin-top: 10px;
    list-style: none !important;
    margin-left: 0;
    text-align: left; /* Force Left Alignment */
}
.plaque-desc li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}
.plaque-desc li::before {
    content: '›';
    color: #c5a365;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Obsidian Style */
.obsidian-meta { color: #888; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; border-top: 1px solid #333; padding-top: 15px; width: 100%; }
.obsidian-desc {
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    color: #d2d2d2; /* RGB 210, 210, 210 */
    line-height: 1.6;
    font-weight: 400;
    padding-left: 0;
    margin-top: 10px;
    list-style: none !important;
    margin-left: 0;
    text-align: left;
    width: 100%;
}
.obsidian-desc li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* Was center, now Left */
}
.obsidian-desc li::before {
    content: '›';
    color: #c5a365;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Monolith Style */
.style-monolith { background: #0d0d0d; border: 1px solid #222; }
.monolith-header {
    width: 100%;
    border-bottom: 2px solid #c5a365;
    padding-bottom: 10px;
    margin-bottom: 25px; /* Increased Spacing */
    text-align: center;
}
.monolith-cat {
    font-family: 'Cinzel', serif !important; /* Force Title Font */
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.monolith-list {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    text-align: left; /* Force Left Alignment */
}
.monolith-list li {
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    color: #d2d2d2; /* RGB 210, 210, 210 */
    line-height: 1.6;
    font-weight: 400;
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    justify-content: flex-start; /* Changed to flex-start to align bullet */
}
.monolith-list li::before {
    content: '›';
    color: #c5a365;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Manifesto Overrides */
.stage-manifesto .code-black pre {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem !important;
    color: #d2d2d2; /* RGB 210, 210, 210 */
    white-space: pre-wrap;
    margin: 0;
}
.monolith-list li:hover { color: #c5a365; }

/* Responsive */
@media(max-width: 768px) {
    .exhibit-stage { height: 600px !important; } /* Standardized Height */

    .card {
        width: 280px !important;
        height: 300px !important; /* Shortened to prevent clipping */
        margin-left: -140px !important;
        margin-top: -150px !important; /* Re-centered (-Height/2) */
    }

    /* Scale down Plaque/Obsidian Text */
    .plaque-desc, .obsidian-desc, .monolith-list li, .frame-desc {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
    }
}

/* =========================================
   MANIFESTO SPECIFIC OVERRIDES
   ========================================= */
.stage-manifesto .card {
    width: 440px;          /* Wider for code blocks */
    height: 420px;
    margin-left: -220px;   /* -Width/2 */
    margin-top: -210px;    /* -Height/2 */
}

.stage-manifesto .frame-body {
    padding: 20px !important;
}

.stage-manifesto .frame-title {
    font-size: 1.1rem !important; /* Smaller title */
    margin-bottom: 12px !important;
}

/* Manifesto specific code block styles */
.stage-manifesto .code-black {
    background: #080808;
    border-left: 2px solid #c5a365;
    padding: 12px;
    margin-bottom: 15px;
}

/* MOBILE RESPONSIVE FIX (Manifesto) */
@media (max-width: 768px) {
    .stage-manifesto .card {
        width: 280px !important;       /* Narrower */
        height: 300px !important;      /* Shortened to match Resume */
        margin-left: -140px !important;
        margin-top: -150px !important; /* Re-centered */
    }

    .stage-manifesto .code-black pre {
        font-size: 0.55rem !important; /* Tiny code font */
        padding: 5px;
    }

    .stage-manifesto .frame-body {
        padding: 10px !important; /* Tight padding */
    }

    .exhibit-stage.stage-manifesto {
        height: 600px; /* Reduced stage height */
    }
}

/* HEADER OVERLAP FIX (Mobile) */
@media (max-width: 768px) {
    .exhibit-stage {
        padding-top: 60px !important; /* Reduced top pad */
        align-items: flex-start !important;
    }

    .carousel-pivot {
        margin-top: 280px; /* Centered pivot for new height */
    }

    .stage-label {
        top: 0px !important;
        z-index: 100;
    }

    /* Manifesto Adjustment */
    .stage-manifesto .carousel-pivot {
        margin-top: 280px !important; /* Match Resume pivot */
    }
}