/*
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;
}