/* VARIABLES */
:root {
    --bard-bg: #0f0f12;
    --bard-text: #e5d5c0; /* Parchment Gold */
    --bard-accent: #c8a165;

    --shaw-bg: #f0f0f0;
    --shaw-text: #1a1a1a;
    --shaw-accent: #ff4400; /* Modern Orange */
}

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    height: 100vh; 
    overflow: hidden; 
    background: #000;
    
    /* PREVENT HIGHLIGHTING */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}

/* NAV */
.nav-back {
    position: absolute; top: 20px; left: 20px; z-index: 100;
    font-family: 'Space Mono', monospace; color: #888; text-decoration: none;
    font-size: 0.8rem; mix-blend-mode: difference;
}

/* THEME INDICATOR */
.theme-display {
    position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
    z-index: 100; text-align: center;
    mix-blend-mode: difference; color: #fff;
    width: 300px;
}

.theme-guidance {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    margin-bottom: 5px;
    opacity: 0.7;
    text-transform: uppercase;
}

#theme-text {
    font-family: 'Space Mono', monospace;
    font-size: 1.4rem; 
    letter-spacing: 1px;
    display: block; 
    margin-bottom: 5px;
    font-weight: bold;
}

.theme-counter {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.5;
    margin-bottom: 10px;
}

.nav-arrows {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-arrows button {
    background: rgba(255,255,255,0.1); /* Slight background for visibility */
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 40px; height: 40px;
    color: #fff;
    font-size: 1.2rem; 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}

.nav-arrows button:hover { 
    background: #fff; 
    color: #000;
    transform: scale(1.1);
}

/* SPLIT CONTAINER */
.split-container {
    position: relative; width: 100vw; height: 100vh;
}

/* LAYERS */
.layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.content-wrap {
    width: 80%; max-width: 600px;
    padding: 2rem;
    transition: transform 0.1s ease-out; /* Parallax feel */
}

/* BARD STYLES */
.layer-bard {
    background-color: var(--bard-bg);
    color: var(--bard-text);
}
.layer-bard .author {
    font-family: 'Playfair Display', serif; font-style: italic;
    color: var(--bard-accent); font-size: 1rem; margin-bottom: 2rem;
}
.layer-bard .quote {
    font-family: 'Playfair Display', serif; font-size: 2rem;
    line-height: 1.3; margin-bottom: 2rem;
    white-space: pre-line; /* Respects line breaks in poetry */
}
.layer-bard .source {
    font-family: 'Space Mono', monospace; opacity: 0.6; font-size: 0.8rem;
}
.layer-bard .read-more-btn {
    background: transparent; border: 1px solid var(--bard-accent);
    color: var(--bard-accent);
}

/* SHAW STYLES */
.layer-shaw {
    background-color: var(--shaw-bg);
    color: var(--shaw-text);
    /* Key Property: Clip the right side initially */
    /* We update this via JS */
}
.layer-shaw .author {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
    color: var(--shaw-accent); font-size: 1rem; margin-bottom: 2rem;
}
.layer-shaw .quote {
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 2rem; line-height: 1.3; margin-bottom: 2rem;
}
.layer-shaw .source {
    font-family: 'Space Mono', monospace; opacity: 0.6; font-size: 0.8rem;
}
.layer-shaw .read-more-btn {
    background: transparent; border: 1px solid var(--shaw-accent);
    color: var(--shaw-accent);
}

/* SHARED BUTTON */
.read-more-btn {
    margin-top: 2rem; padding: 10px 20px; cursor: pointer;
    font-family: 'Space Mono', monospace; font-size: 0.8rem;
    transition: all 0.3s;
}
.read-more-btn:hover {
    background: currentColor; color: var(--bard-bg); /* Invert */
}

/* HANDLE */
.handle {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 4px; background: #fff;
    cursor: col-resize; z-index: 50;
    display: flex; align-items: center; justify-content: center;
}
.handle-line {
    width: 1px; height: 100%; background: #000;
}
.handle-icon {
    position: absolute; width: 40px; height: 40px;
    background: #fff; border-radius: 50%; border: 2px solid #000;
    display: flex; align-items: center; justify-content: center;
    font-family: monospace; color: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* MODAL */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 200;
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
    display: flex; align-items: center; justify-content: center;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-content {
    background: #1a1a1a; 
    color: #fff; 
    width: 90%; 
    max-width: 700px;
    max-height: 80vh; 
    overflow-y: auto; 
    padding: 3rem;
    position: relative; 
    border: 1px solid #333;

    /* RE-ENABLE TEXT SELECTION HERE */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.close-modal {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer;
}
#modal-title { font-family: 'Space Mono', monospace; color: #888; margin-bottom: 1rem; }
.modal-meta { font-family: 'Space Mono', monospace; font-size: 0.8rem; margin-bottom: 2rem; color: #666; border-bottom: 1px solid #333; padding-bottom: 1rem;}
.modal-text-body { font-size: 1.2rem; line-height: 1.6; white-space: pre-line; }
.modal-footer { margin-top: 2rem; text-align: right; }
#modal-link { color: #fff; font-family: 'Space Mono', monospace; text-decoration: none; font-size: 0.8rem; border-bottom: 1px solid #fff;}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .layer .quote { font-size: 1.2rem; }
    .modal-content { padding: 1.5rem; }
}