/* =========================================
   GLOBAL RESET & GOTHIC NOIR VARIABLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark-void: #050505; 
    --bg-charcoal: #111111; 
    --text-bone: #ededed; 
    --text-muted: #8e8a9d; 
    --accent-crimson: #8b0000; 
    --highlight-neon-red: #ff1a1a; 
    --accent-neon-pink: #ff00ff;
    --accent-neon-cyan: #00e5ff;
    --bg-slate: #090e14;
    --font-gothic: 'IM Fell English SC', serif;
    --font-clean: 'Inter', sans-serif;
    --site-padding: 5%;
}

body {
    background-color: var(--bg-dark-void);
    color: var(--text-bone);
    font-family: var(--font-clean);
    line-height: 1.6;
}

/* =========================================
   CRT EFFECTS
   ========================================= */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
    opacity: 0.4;
}

/* KINETIC TYPOGRAPHY */
.glitch { animation: neon-flicker 4s infinite alternate; }
.glitch-davina { animation: neon-flicker-davina 4s infinite alternate; color: var(--text-bone); border-left: 3px solid var(--accent-neon-pink); padding-left: 1rem; margin-bottom: 1rem; line-height: 1; }

@keyframes neon-flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; text-shadow: 0 0 5px var(--accent-crimson), 0 0 10px var(--highlight-neon-red); }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.6; text-shadow: none; }
}

@keyframes neon-flicker-davina {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; text-shadow: 0 0 5px var(--accent-neon-pink), 0 0 10px var(--accent-neon-cyan); }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.6; text-shadow: none; }
}

/* FLICKER BORDERS FOR PORTRAITS */
.author-portrait {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    padding: 10px;
}

.flicker-border {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--accent-crimson);
    animation: border-flicker-red 2s infinite alternate;
}

.flicker-border-davina {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--accent-neon-pink);
    animation: border-flicker-davina 2s infinite alternate;
}

@keyframes border-flicker-red {
    from { box-shadow: 0 0 5px var(--accent-crimson); border-color: var(--accent-crimson); }
    to { box-shadow: 0 0 15px var(--highlight-neon-red); border-color: var(--highlight-neon-red); }
}

@keyframes border-flicker-davina {
    from { box-shadow: 0 0 5px var(--accent-neon-pink); border-color: var(--accent-neon-pink); }
    to { box-shadow: 0 0 15px var(--accent-neon-cyan); border-color: var(--accent-neon-cyan); }
}

/* HERO SECTION */
.hero { min-height: 80vh; padding: 10rem var(--site-padding) 4rem; display: flex; align-items: center; }
.hero-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 4rem; align-items: center; }
.author-name { font-size: 3.5rem; margin-bottom: 1rem; }
.author-bio { font-size: 1.1rem; color: var(--text-muted); font-weight: 300; }

/* NAV, LIBRARY, FOOTER ... (Existing Styles Remain) */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem var(--site-padding); background: rgba(5, 5, 5, 0.85); position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid #1a1a1a; }
.logo { font-size: 1.6rem; color: var(--text-bone); text-decoration: none; font-weight: 800; letter-spacing: 2px; }
.nav-links { list-style: none; display: flex; gap: 2rem; }
.nav-links a { color: var(--text-bone); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; }
.dropdown-content { display: none; position: absolute; background: var(--bg-charcoal); top: 100%; right: 0; z-index: 1001; }
.dropdown:hover .dropdown-content { display: block; }
.library { padding: 8rem var(--site-padding); max-width: 1400px; margin: 0 auto; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4rem; }
.book-card { background-color: var(--bg-charcoal); border: 1px solid #1a1a1a; display: flex; flex-direction: column; }
.book-cover { width: 100%; }
.book-info { padding: 2rem; flex-grow: 1; }
.buy-btn { display: block; width: 100%; padding: 1rem; border: 2px solid var(--text-bone); color: var(--text-bone); text-align: center; text-transform: uppercase; text-decoration: none; font-size: 0.8rem; letter-spacing: 2px; }
.davina-btn:hover { background-color: var(--accent-neon-pink); border-color: var(--accent-neon-pink); color: var(--bg-dark-void); }
.rights-section { padding: 6rem var(--site-padding); text-align: center; background: #080808; }
footer { text-align: center; padding: 4rem; background: var(--bg-dark-void); }

@media (max-width: 900px) { .hero-container { flex-direction: column; text-align: center; } .author-portrait { margin-bottom: 2rem; } }