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

body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Typography Root */
:root {
    --font-serif: 'Playfair Display', serif;
    --font-mono: 'Fira Code', monospace;
    --font-sans: 'Inter', sans-serif;
}

/* =========================================
   Hero Section
   ========================================= */
#hero {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 2rem;
}

.name {
    font-family: var(--font-serif);
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
    color: #000;
}

.role-container {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: #333;
}

#typing-text {
    font-weight: 600;
    border-right: 2px solid #000;
    /* Cursor */
    padding-right: 5px;
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.me-link {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
    z-index: 10;
    transition: transform 0.3s ease;
}

.me-link:hover {
    transform: scale(1.1);
    text-decoration: underline;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    animation: bounce 2s infinite;
    opacity: 0.5;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

/* =========================================
   Content Structure
   ========================================= */
#content {
    max-width: 1000px;
    /* "Clean Paper" width */
    margin: 0 auto;
    padding: 4rem 2rem;
}

.container {
    width: 100%;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* =========================================
   About / Manifesto Section
   ========================================= */
#about {
    margin-bottom: 8rem;
    padding-top: 4rem;
    /* Spacing for the anchor scroll */
}

.about-split {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.profile-column {
    flex: 0 0 300px;
    /* Fixed width for image column */
}

.profile-placeholder {
    width: 300px;
    height: 300px;
    background-color: #f0f0f0;
    border-radius: 50%;
    /* Circle */
    border: 2px solid #000;
}

.manifesto-column {
    flex: 1;
}

.manifesto-title {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: #666;
}

.manifesto-text {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.signal-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #000;
    display: flex;
    gap: 2rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.signal-label {
    font-weight: 700;
}

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

/* Response Update */
@media (max-width: 768px) {
    .about-split {
        flex-direction: column;
        text-align: center;
    }

    .signal-footer {
        justify-content: center;
    }
}

/* =========================================
   Projects Grid (2x2)
   ========================================= */
#projects {
    margin-bottom: 6rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.project-card {
    display: block;
    border: 2px solid #000;
    height: 300px;
    /* Fixed height for structure */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.card-content h3 {
    font-family: var(--font-mono);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.card-content p {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

/* Hover Effects */
.project-card:hover {
    background: #000;
    color: #fff;
}

.project-card:hover .card-content p {
    color: #ccc;
}

/* =========================================
   Writing List
   ========================================= */
#writing {
    margin-bottom: 4rem;
}

.writing-list li {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.writing-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.writing-link:hover {
    color: #444;
    /* Subtle dim */
    padding-left: 10px;
    /* Slight movement */
}

.paper-title {
    font-size: 1.25rem;
    font-weight: 500;
    font-family: var(--font-serif);
}

.paper-type {
    font-size: 0.9rem;
    font-family: var(--font-mono);
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   Footer
   ========================================= */
footer {
    text-align: center;
    margin-top: 4rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #999;
}

/* =========================================
   Responsiveness
   ========================================= */
@media (max-width: 768px) {
    .name {
        font-size: 3rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .project-card {
        height: 200px;
    }

    .blurb {
        font-size: 1.2rem;
    }
}

/* =========================================
   Slide-Over Research Terminal
   ========================================= */

/* The Container Transition */
#research-container {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smooth "OS" ease */
    width: 100%;
    max-width: 1000px;
    /* Default State */
    margin: 0 auto;
}

/* Reading Mode State (Applied via JS) */
#research-container.reading-mode {
    max-width: 100vw;
    /* Full Width */
    padding-left: 2rem;
    padding-right: 0;
    /* Flush right for the viewer */
}

/* The Header */
.research-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-right: 2rem;
    /* Align with normal container padding */
}

.close-btn {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    /* Hidden by default */
    opacity: 1;
    transition: transform 0.2s;
}

.close-btn:hover {
    text-decoration: underline;
    transform: scale(1.05);
}

#research-container.reading-mode .close-btn {
    display: block;
}

/* The Grid Layout */
.research-layout {
    display: grid;
    grid-template-columns: 1fr;
    /* Default: Single Stack */
    gap: 0;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#research-container.reading-mode .research-layout {
    grid-template-columns: 350px 1fr;
    /* Sidebar | Viewer */
    height: 85vh;
}

/* Constrain paper title width in reading mode for better text wrapping */
#research-container.reading-mode .paper-title {
    max-width: 250px;
    display: inline-block;
}

/* Consistent paper-type formatting in reading mode */
#research-container.reading-mode .paper-type {
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}

/* List Styling */
.paper-item {
    cursor: pointer;
    /* Restore original spacing */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    transition: all 0.2s ease;
}

.paper-item:hover,
.paper-item.active-paper {
    background-color: #000;
    color: #fff;
    /* Adjust padding to account for the background box so text doesn't jump too much? 
       Actually, adding horizontal padding on hover might shift text. 
       Let's add base padding to .paper-item to prevent jump or accept the "button" feel.
       To keep it clean like before, let's just color the background. 
       But purely filling it with black looks best if it has some padding. */
    padding-left: 1rem;
    padding-right: 1rem;
    /* To offset the shift, we could use negative margins, or just accept the highlight style */
    border-color: #000;
}

/* Force white text on hover */
.paper-item:hover .paper-title,
.paper-item.active-paper .paper-title {
    color: #ffffff;
}

.paper-item:hover .paper-type,
.paper-item.active-paper .paper-type {
    color: #ffffff;
    /* User asked for white, not grey */
}

/* Reset inner link padding/color to avoid conflicts */
.paper-item .writing-link {
    padding: 0;
    /* Handled by parent */
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Disable the standard link hover effect for these items */
.paper-item:hover .writing-link {
    color: #fff;
    padding-left: 0;
}

/* Viewer Pane */
.viewer-pane {
    display: none;
    background-color: #f9f9f9;
    /* Slight contrast to show edge */
    /* border-left: 1px solid #000;  <-- REMOVED to fix extensive line */
    height: 100%;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
    /* Delayed entrance */
}

/* Fix vertical line to end with content */
#research-container.reading-mode .writing-list {
    border-right: 1px solid #000;
    align-self: start;
    /* PREVENT STRETCHING */
}

#research-container.reading-mode .viewer-pane {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

#pdf-frame {
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #research-container.reading-mode .research-layout {
        grid-template-columns: 1fr;
        /* Stack interaction on mobile? Or keep separate page? */
    }

    /* For now, mobile users usually prefer new tab, 
       but for consistency let's just make the viewer take full screen or Stack */
    #research-container.reading-mode .viewer-pane {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        border-left: none;
    }

    #research-container.reading-mode .close-btn {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 10000;
        background: #fff;
        padding: 5px;
    }
}