/**
 * PEGASUS GALLERY DESIGN SYSTEM - FULL ARCHITECTURAL REWRITE
 * Modular, token-based, and maintainable structure.
 */

:root {
    /* --- DESIGN TOKENS --- */

    /* Colors: Gallery Environment */
    --color-wall: #4D4452;
    --color-mat-dark: #554957;
    --color-mat-outer: #f2ebd5;
    --color-slip: #e6e0d3;

    /* Colors: Functional Elements */
    --color-ink-dark: #2c2826;
    --color-ink-light: #f2f0eb;
    --color-accent-gold: #c4a16b;
    --color-accent-red: #ff0000;
    --color-metal-steel: #bdc3c7;
    --color-metal-brass: #d4af37;
    --color-pegasus-blue: #15448c;

    /* Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Proza Libre', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Spacing Units */
    --sp-xs: 0.5rem;
    --sp-s: 1rem;
    --sp-m: 2rem;
    --sp-l: 3.5rem;
    --sp-xl: 5rem;

    /* Textures */
    --tex-noise-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    --tex-noise-coarse: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");

    /* Effects */
    --shadow-lift: 0 25px 50px rgba(0, 0, 0, 0.5);
    --shadow-mat: inset 0 0 30px rgba(0, 0, 0, 0.2);
    --shadow-letterpress-light: -0.5px -1px 0.5px rgba(0, 0, 0, 0.3), 0.5px 1px 1px #fff;
    --shadow-letterpress-dark: 0 1px 0px #fff, 0 -1px 0px rgba(0, 0, 0, 0.1);
    --shadow-inset-soft: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* --- 1. BASE LAYERS --- */

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

body {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    background-color: var(--color-mat-dark);
    background-image: var(--tex-noise-fine);
    background-attachment: fixed;
    color: var(--color-ink-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    text-align: left;
}

/* Global Atmosphere Overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image: var(--tex-noise-fine);
    z-index: 1000;
}

/* Emoji styling - edit opacity here */
.emoji {
    display: inline-block !important;
    opacity: 0.5 !important;
    -webkit-text-stroke: 0px transparent !important;
    transform: translateZ(0);
    filter: none !important;
    isolation: isolate;
}

/* --- 2. LAYOUT LAYERS --- */

.container {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: 100vh;
}

.artwork-section {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12vh var(--sp-m) var(--sp-m) var(--sp-m);
}

.info-panel {
    background-color: #ffffff;
    background-image: var(--tex-noise-coarse);
    padding: var(--sp-xl) var(--sp-l);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
    order: -1;
}

/* --- 3. COMPONENTS: ART & FRAME --- */

.frame-system {
    position: relative;
    display: inline-block;
    line-height: 0;
    cursor: zoom-in;
}

.outer-frame {
    position: relative;
    padding: 40px;
    background: #deb887;
    box-shadow: var(--shadow-lift);
}

.frame-side {
    position: absolute;
    background-color: #dcb382;
    z-index: 1;
}

/* Procedural Wood Grain Engine */
.frame-side.top {
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%);
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(160, 82, 45, 0.05) 3px, transparent 6px), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.1));
}

.frame-side.bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 100%, 0 100%);
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(160, 82, 45, 0.05) 3px, transparent 6px), linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
}

.frame-side.left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    clip-path: polygon(0 0, 100% 40px, 100% calc(100% - 40px), 0 100%);
    background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgba(160, 82, 45, 0.05) 3px, transparent 6px), linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.1));
}

.frame-side.right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 calc(100% - 40px));
    background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgba(160, 82, 45, 0.05) 3px, transparent 6px), linear-gradient(to left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
}

.outer-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 5px rgba(0, 0, 0, 0.2);
}

.slip {
    padding: 8px;
    background-color: var(--color-slip);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.05)), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.outer-paper-mat {
    padding: 60px;
    background-color: var(--color-mat-dark);
    background-image: var(--tex-noise-fine);
    box-shadow: var(--shadow-mat);
    z-index: 2;
}

.frame-system img {
    max-height: 55vh;
    width: auto;
    max-width: 100%;
    display: block;
    transition: all 0.8s ease;
}

/* --- 4. TYPOGRAPHY SYSTEM --- */
.red-link {
    color: #ff0000;
    text-decoration: none;
    text-decoration-color: #ff0000;
    text-underline-offset: 3px;
    font-weight: inherit;
    /* Inherit boldness if inside bold tag */
}

.red-link:hover {
    text-decoration: underline;
}

.title {
    font-family: var(--font-sans);
    font-size: 8rem;
    font-weight: 800;
    font-style: italic;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    transform: rotate(-3deg);
    margin-bottom: var(--sp-l);
    text-wrap: balance;
    word-break: keep-all;
    /* Prevent breaking within words with emoji */
    overflow-wrap: normal;

    /* Expansion: Break out of the info-panel column */
    position: relative;
    width: 155%;
    z-index: 100;
    pointer-events: none;

    /* Solid White with Outline */
    background: none;
    -webkit-text-fill-color: initial;
    color: #ffffff;

    /* Black Outline */
    -webkit-text-stroke: 1px #000000;

    /* Shadows for depth and separation from complex background */
    filter:
        /* Soft glow for separation */
        drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2))
        /* Hard shadow for pop */
        drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.3));

    /* Typography & Contrast */
    opacity: 1;
}

/* Unified Functional Font Override */
.nameplate,
.nameplate-pale,
.logistics,
.contact-area,
.offer-card,
.price-display,
.price-note,
.context-text,
.view-btn,
.beneficiary-note-on-card,
.object-status {
    font-family: var(--font-sans) !important;
}

/* --- 5. COMPONENTS: PLAQUES & NAMEPLATES --- */

/* Base Plaque Style */
.nameplate,
.nameplate-pale {
    position: relative;
    display: block;
    margin: var(--sp-m) auto;
    text-align: center;
    border-radius: 1px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4);
}

/* Original Pargue (Framed Mode) */
.nameplate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;

    /* Brushed Metal - matching frame burlywood tones */
    background: linear-gradient(135deg,
            #c9a87c 0%,
            /* Darker tan */
            #deb887 25%,
            /* Burlywood (frame color) */
            #c4a070 50%,
            /* Mid tan */
            #deb887 75%,
            /* Burlywood */
            #c9a87c 100%);
    /* Darker tan */
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 28px var(--sp-m);
    border-radius: 2px 2px 0 0;

    /* Matching Site Shadows */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 1px 1px 2px rgba(255, 255, 255, 0.35);
}

/* Simulated Screws */
.nameplate::before,
.nameplate::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #e9d5a3, #8a7346);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.nameplate::before {
    left: 15px;
}

.nameplate::after {
    right: 15px;
}

.nameplate .author-link {
    color: #4a3c28;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    /* Letterpress / Engraving Effect */
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.4),
        -0.5px -0.5px 1px rgba(0, 0, 0, 0.4);

    line-height: 1.2;
}

.nameplate .year-label {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 6px;
    color: #3d3122;
    /* High-contrast dark bronze */
    letter-spacing: 0.25em;

    /* Subtle Engraving */
    text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.3);
}



/* Pale Metal Plaque (Manifesto Mode) */
.nameplate-pale {
    width: 100%;
    margin: 0;
    padding: 22px 65px;
    background: linear-gradient(135deg, #d1d5d8, #e2e5e7, #d1d5d8, #f0f2f3, #d1d5d8, #b8bdc1);
    color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Machined Screws Utility */
.nameplate::before,
.nameplate::after,
.nameplate-pale::before,
.nameplate-pale::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 11;
    background-image: linear-gradient(45deg, transparent 45%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.6) 55%, transparent 55%), radial-gradient(circle at center, #bdc3c7, #7f8c8d);
    box-shadow: 0.5px 0.5px 1px #fff, inset -1px -1px 2px rgba(0, 0, 0, 0.3);
}

.nameplate::before,
.nameplate-pale::before {
    left: 12px;
}

.nameplate::after,
.nameplate-pale::after {
    right: 12px;
}

/* --- 6. COMPONENTS: PRICE & MANIFESTO --- */

.module {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-m);
}

.price-display {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;

    /* Physical "Heavy Cardstock" depth */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        /* Main lift */
        inset 0 0 50px rgba(0, 0, 0, 0.25),
        /* Ambient depth */
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    /* Top cut-edge highlight */

    /* Restored "Deep Pegasus" Multi-Point Gradient */
    background: linear-gradient(115deg,
            #f4f9ff 0%,
            /* Icy White */
            #dcecf9 10%,
            /* Pale Sky */
            #bdd4e7 20%,
            /* Soft Blue */
            #9ab7d3 30%,
            /* Serenity */
            #7a9ac0 40%,
            /* Cool Blue */
            #5d80ab 50%,
            /* Steel Blue */
            #456695 60%,
            /* Deep Steel */
            #304d7f 70%,
            /* Dark Azure */
            #1f3668 80%,
            /* Midnight */
            #12224d 90%,
            /* Deep Navy */
            #0a1135 100%
            /* Abyss */
        );
    background-image:
        var(--tex-noise-coarse),
        /* Base grain */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), transparent),
        /* Light wash center */
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 255, 255, 0.04) 1px, rgba(255, 255, 255, 0.04) 2px),
        /* Fine horizontal fibers */
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.04) 1px, rgba(0, 0, 0, 0.04) 2px);
    /* Fine vertical fibers */
    background-blend-mode: overlay, screen, overlay, overlay;
    background-size: 200px 200px, 100% 100%, 100% 3px, 3px 100%;

    color: #ffffff;
    text-decoration: none;
    margin-top: var(--sp-m);
    margin-left: -3.5rem;
    margin-right: -10rem;
    border-bottom: 5px solid rgba(0, 0, 0, 0.3);
    /* Physical cut edge thickness */
    z-index: 999;
    overflow: hidden;
}

.price-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 70px 35px 0;
    /* significantly more vertical space */
}

.buy-tab {
    width: 70px;
    /* Reverted to good horizontal size */
    min-width: 70px;
    background-color: var(--color-accent-red);
    background-image: var(--tex-noise-coarse);
    /* Inherit grain */
    background-blend-mode: multiply;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
    box-shadow: inset 5px 0 15px rgba(0, 0, 0, 0.2);
    /* Depth from main body */
}

.price-display:hover .buy-tab {
    background-color: #d40000;
}

.buy-tab span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    /* Debossed Effect on Red */
    text-shadow:
        -1px -1px 1.5px rgba(0, 0, 0, 0.6),
        /* Inner shadow */
        1px 1px 0.5px rgba(255, 255, 255, 0.2);
    /* Surface catch */
}

.price-value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;

    /* Dark Pegasus Blue Gradient Text */
    background: linear-gradient(135deg,
            #1f3668 0%,
            /* Midnight */
            #12224d 25%,
            /* Deep Navy */
            #0a1135 50%,
            /* Abyss */
            #12224d 75%,
            /* Deep Navy */
            #1f3668 100%
            /* Midnight */
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Deep Letterpress / Debossed Effect */
    filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.3)) drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.6));

    margin: 0;
}

.beneficiary-note-on-card {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-left: 65px;
    /* Visual centering offset */
}

.price-note {
    /* Restore Manifesto Paper Box Style */
    background-color: #f7f3eb;
    background-image: var(--tex-noise-fine), linear-gradient(135deg, rgba(235, 225, 210, 0.4), transparent);
    padding: var(--sp-l);
    color: #332f2b;
    font-size: 1.15rem;
    /* Smaller text as requested */
    line-height: 1.6;

    /* Letterpress/Embossed Effect */
    box-shadow: var(--shadow-lift), var(--shadow-inset-soft), 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: var(--shadow-letterpress-light);

    margin-top: var(--sp-m);
    border-radius: 2px 2px 0 0;

    /* Non-italic as requested */
    font-style: normal;
    font-weight: 500;
}

.offer-card {
    background-color: #e3dccf;
    background-image: var(--tex-noise-fine);
    padding: var(--sp-l);
    color: var(--color-ink-dark);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    text-shadow: var(--shadow-letterpress-light);
}

/* --- 7. VIGNETTES & DECOR --- */

.vignette {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.75rem 0;
    color: var(--color-accent-red);
}

.vignette::before,
.vignette::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor 50%, transparent);
    opacity: 0.7;
}

.vignette.no-lines::before,
.vignette.no-lines::after {
    display: none;
}

.rose-icon {
    width: 32px;
    height: 32px;
    margin: 0 1.25rem;
    fill: currentColor;
}

/* --- 8. WALL INSCRIPTIONS (LOGISTICS & CONTACTS) --- */

.logistics,
.contact-area {
    margin-top: var(--sp-l);
    /* Painted on Wall Effect */
    color: rgba(255, 255, 255, 0.9);
    mix-blend-mode: hard-light;
    /* Interacts with wall texture */
    text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.2);
}

.logistics p {
    margin-bottom: 2rem;
}

.logistics strong,
.contact-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.4);
    /* Muted label paint */
    margin-bottom: 0.6rem;
}

.email-link {
    font-size: 2.1rem;
    /* Prominent painted address */
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
}

.organizer {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.contact-area {
    padding-top: 0;
    border-top: none;
}

.context-statement {
    margin: var(--sp-l) 0;
    padding: var(--sp-m) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.context-text {
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    color: var(--color-ink-light);
}

.object-status {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    font-weight: 500;
}

/* --- 9. STATES & RESPONSIVE --- */

/* Paper View Engine */
.frame-system.is-paper .outer-frame,
.frame-system.is-paper .outer-paper-mat,
.frame-system.is-paper .slip {
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
}

.frame-system.is-paper .outer-frame::after,
.frame-system.is-paper .outer-frame::before {
    display: none;
}

.frame-system.is-paper img {
    max-height: 85vh;
    max-width: 90vw;
    margin: 0 auto;
    background: #000;
    padding: 10px;
    box-shadow: 0 40px 100px #000;
    cursor: zoom-out;
}

.frame-system.is-paper .nameplate {
    display: none;
}

/* Control Buttons */
.view-controls {
    margin-top: var(--sp-l);
    text-align: center;
    font-size: 3.5rem;
    letter-spacing: 0.25em;
}

.view-btn {
    background: none;
    border: none;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.view-btn.active {
    color: var(--color-accent-gold);
    border-bottom-color: var(--color-accent-gold);
}

/* Scrollable View Overrides */
body.is-paper-mode {
    background-color: #1a1a1a;
    overflow: auto;
}

body.is-paper-mode .container {
    grid-template-columns: 1fr;
    display: block;
}

body.is-paper-mode .info-panel {
    display: none;
}

body.is-paper-mode .artwork-section {
    height: auto;
    padding: 2rem 0;
    display: block;
}

body.is-paper-mode .view-controls {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.5rem;
}

/* Responsiveness */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
    }

    .info-panel {
        order: 1;
        padding: var(--sp-m);
    }

    .artwork-section {
        position: relative;
        height: auto;
        padding-top: var(--sp-m);
    }

    .title {
        font-size: 4rem;
    }
}

@media (max-width: 768px) {
    .view-controls {
        font-size: 1.2rem;
    }

    .price-display {
        margin-right: -3.5rem;
        padding-right: 0;
    }
}

/* --- GRAFFITI ELEMENT --- */
.graffiti-footer {
    display: block;
    width: 70%;
    margin: var(--sp-xl) auto 0 auto;
    opacity: 0.75;
    mix-blend-mode: multiply;
    filter: contrast(120%) grayscale(100%);
    transform: rotate(-2deg);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}