/* Basic Reset & Globals */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --font-thin-body: 'Roboto', sans-serif;
    --font-book-title: 'IBM Plex Mono', monospace;
    --font-cover-overlay: 'IBM Plex Mono', monospace;

    --text-color-base: #222222;
    --text-color-medium: #555555;
    --text-color-light: #888888;
    --text-color-overlay: #3f3f3f;
    
    --bg-color: #ffffff;
    --header-bg: rgba(255, 255, 255, 0.9);
    --card-bg: #ffffff;
    --border-color: #eeeeee;
    --footer-bg: #fdfdfd;

    --card-cover-height: 350px; 
    --card-cover-height-mobile: 280px;
}

body {
    font-family: var(--font-primary);
    line-height: 1.7;
    background-color: var(--bg-color);
    color: var(--text-color-base);
    overflow-x: hidden; /* Crucial */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* == FONT DEFINITIONS == */
h1, h2, .main-nav .logo {
    font-family: var(--font-secondary);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-color-base);
}
h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 0.7em; }
h2 { font-size: 2.2rem; line-height: 1.3; margin-top: 1em; }
.main-nav .logo { font-size: 1.7rem; font-weight: 700; min-height: 1.2em; }
.book-card .book-info h3 {
    font-family: var(--font-book-title); font-weight: 400; font-size: 1.5rem;
    color: var(--text-color-base); margin-bottom: 0.4em; letter-spacing: 0.01em;
}
/* Fallback for any other h3 if used */
h3 { 
    font-family: var(--font-secondary); 
    font-weight: 500; 
    color: var(--text-color-base);
}
.thin-text { 
    font-family: var(--font-thin-body); 
    font-weight: 100; 
    font-size: 1.1rem; 
    color: var(--text-color-medium); 
}

/* == GENERAL ELEMENT STYLES == */
a { color: var(--text-color-medium); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--text-color-base); }
img { max-width: 100%; height: auto; display: block; }

/* == LAYOUT & COMPONENTS == */
/* Navigation */
.site-header { 
    background-color: var(--header-bg); padding: 0.8rem 1.5rem; /* Adjusted horizontal padding for desktop */
    position: sticky; top: 0; left: 0; width: 100%; 
    z-index: 1000; backdrop-filter: blur(10px); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.02); 
    border-bottom: 1px solid var(--border-color); 
}
.main-nav { 
    display: flex; justify-content: space-between; align-items: center; 
    /* max-width: 1200px; margin: 0 auto; /* Removed for full-width content */
}
.main-nav > img { /* Targeting the logo image directly */
    height: 40px; /* User confirmed size */
    width: auto;
    margin-left: 0; /* Align with parent's padding */
}
.nav-links { list-style: none; display: flex; }
.nav-links li { margin-left: 28px; }
.nav-links li a { 
    font-family: var(--font-book-title);
    color: var(--text-color-medium); font-weight: 300; font-size: 0.9rem; 
    padding: 0.5rem 0; letter-spacing: 0.01em; transition: color 0.2s ease; 
}
.nav-links li a:hover { color: var(--text-color-base); }

/* Hamburger Menu */
.hamburger-menu { 
    display: none; background: none; border: none; padding: 0; cursor: pointer; 
    z-index: 1001; width: 30px; height: 22px; position: relative; 
}
.hamburger-menu__line { 
    display: block; width: 100%; height: 2px; 
    background-color: var(--text-color-base); 
    border-radius: 2px; position: absolute; 
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; 
}
.hamburger-menu__line:nth-child(1) { top: 0; }
.hamburger-menu__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-menu__line:nth-child(3) { bottom: 0; }
.hamburger-menu.is-active .hamburger-menu__line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger-menu.is-active .hamburger-menu__line:nth-child(2) { opacity: 0; }
.hamburger-menu.is-active .hamburger-menu__line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Hero Section */
.hero-section { 
    min-height: 90vh; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; text-align: center; 
    position: relative; padding-bottom: 120px; 
}
.hero-content h1 { 
    color: var(--text-color-base); margin-bottom: 0.5em; font-size: 3.2rem; 
}
.hero-content .hero-sub-text { 
    font-size: 1.3rem; color: var(--text-color-medium); 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em; 
    max-width: 650px; 
    line-height: 1.6; 
}

/* Text Highlight Styling */
.highlight-text { color: var(--text-color-light); }

/* Typing Cursor */
.typing-cursor { 
    display: inline-block; width: 2px; height: 1em; 
    background-color: currentColor; animation: blink 0.7s infinite; 
    margin-left: 1px; position: relative; bottom: -0.15em; 
}
@keyframes blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0; } 
}

/* Scroll Indicator */
.scroll-indicator { 
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); 
    display: flex; flex-direction: column; align-items: center; 
    cursor: pointer; color: var(--text-color-medium); 
}
.scroll-indicator:hover { color: var(--text-color-base); }
.scroll-text { 
    font-family: var(--font-primary); font-size: 0.9rem; 
    letter-spacing: 0.05em; margin-bottom: 8px; font-weight: 500; 
}
.arrow-down {
    width: 28px;
    height: 28px;
    /* fill is currentColor from SVG HTML attribute, color inherited from .scroll-indicator */
    animation-name: bounceArrow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes bounceArrow { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    40% { transform: translateY(-10px); } 
    60% { transform: translateY(-5px); } 
}

/* Standard Content Section */
.content-section { 
    padding: 60px 1rem; max-width: 900px; margin: 0 auto; 
}

/* Override for Hero Section to be wider */
#hero.content-section {
    max-width: none; /* Allow it to span full width */
    padding-left: 1.5rem; /* Match header padding */
    padding-right: 1.5rem; /* Match header padding */
}

/* Full Width Section */
.full-width-section { 
    padding-top: 60px; padding-bottom: 60px; 
}
.section-title-container { 
    max-width: 900px; margin: 0 auto 2em auto; 
    padding: 0 1rem; text-align: center; 
}

/* Book Grid */
.book-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
}

.book-card {
    background-color: var(--card-bg);
    overflow: hidden;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.book-card:hover { z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.book-card a {
    display: flex; flex-direction: column; flex-grow: 1;
    color: inherit; text-decoration: none;
    width: 100%; height: 100%;
}

.book-cover-wrapper {
    width: 100%;
    height: var(--card-cover-height);
    position: relative;
    overflow: hidden;
    background-color: #333;
}

.book-card .book-cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cover Text Overlay - Block Animation */
.cover-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--text-color-overlay);
    font-family: var(--font-cover-overlay);
    font-size: 2.8rem;
    font-weight: 400;
    text-align: center;
    z-index: 3;
    /* text-shadow: 1px 1px 4px rgba(0,0,0,0.6); */
    width: 90%;
}

.animate-cover-text { /* Class on the .cover-text-overlay div */
    opacity: 0;
    transform: translate(-50%, calc(-50% + 40px));
    transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.animate-cover-text.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.book-card .book-info {
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    background-color: var(--card-bg);
    flex-grow: 1;
    font-family: var(--font-book-title);
    color: var(--text-color-base);
}
.book-card .author {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

/* Targeting general paragraphs specifically within book-info if more control is needed */
.book-card .book-info p {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400; 
    color: #000000; 
    line-height: 1.6;
}

/* CTA Link Styling (Palantir-inspired) */
.cta-link-container {
    margin-top: 1.5rem; 
}

.styled-cta-link {
    display: inline-flex; /* Crucial for icon and text on same line */
    align-items: center; /* Vertically aligns icon and text */
    gap: 0.4em; /* Consistent spacing using em, replaces .link-icon margin-right */
    position: relative; 
    color: var(--text-color-base);
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace; 
    font-size: 0.9rem;
    font-weight: 400; 
    transition: color 0.2s ease;
}

/* Remove dash style */
.styled-cta-link::before {
    content: "";
    margin-right: 0;
}

.link-icon {
    display: inline-block;
    width: 1em; 
    height: 1em; 
    vertical-align: middle; /* Explicitly try to vertically align with text */
    /* margin-right: 0.4em; /* Replaced by gap on parent */
    background-color: currentColor; 
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H10ZM17 3H21V7H19V4.41421L13.4142 10L12 8.58579L17.5858 3H17V3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H10ZM17 3H21V7H19V4.41421L13.4142 10L12 8.58579L17.5858 3H17V3Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transform: translateX(-5px); /* Start slightly to the left for animation */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.styled-cta-link:hover {
    color: var(--text-color-light); 
    text-decoration: underline;
    text-underline-offset: 0.2em; 
}

/* Remove hover style for dash */
.styled-cta-link:hover::before {
    opacity: 0; 
}

.styled-cta-link:hover .link-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Footer */
.site-footer { 
    background-color: var(--footer-bg); text-align: center; 
    padding: 2.5rem 1rem; margin-top: 5rem; 
    font-size: 0.9rem; color: var(--text-color-medium); 
    border-top: 1px solid var(--border-color); 
}

/* == ANIMATIONS == */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.hero-content h1,
.animate-on-scroll.section-title-container h2 { 
    transform: translateY(50px); /* Initial state for these is covered by .animate-on-scroll */
    /* transition-delay is handled by JS or defaults based on parent */
}
.animate-on-scroll.hero-sub-text { 
    transition-delay: 0.1s; /* Specific CSS delay for this one */
}

/* == RESPONSIVE ADJUSTMENTS == */
@media (max-width: 768px) {
    h1 { font-size: 2.4rem; }
    .hero-content h1 { font-size: 2.6rem; }
    .hero-content .hero-sub-text { font-size: 1.15rem; }
    h2 { font-size: 1.9rem; }
    .book-card .book-info h3 { font-size: 1.3rem; }
    
    .cover-text-overlay { font-size: 2.2rem; }
    .animate-cover-text {
        transform: translate(-50%, calc(-50% + 25px));
    }

    .book-grid,
    .book-grid.single-column-sm { grid-template-columns: 1fr; }
    
    .book-cover-wrapper { height: var(--card-cover-height-mobile); }
    
    .site-header { padding: 0.8rem 1rem; }
    .main-nav .nav-links { 
        position: fixed; top: 0; right: 0; width: 75%; height: 100vh; 
        background-color: var(--bg-color); flex-direction: column; 
        align-items: center; justify-content: center; 
        transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
        box-shadow: -2px 0 15px rgba(0,0,0,0.1); padding-top: 60px; 
    }
    .main-nav .nav-links.is-active { transform: translateX(0); }
    .main-nav .nav-links li { margin: 1.5rem 0; }
    .main-nav .nav-links li a { font-size: 1.2rem; color: var(--text-color-base); }
    .main-nav .nav-links li a:hover { color: var(--text-color-medium); }
    .hamburger-menu { display: block; }
    .content-section { padding: 40px 1rem; }
    .full-width-section { padding-top: 40px; padding-bottom: 40px; }
    .section-title-container { padding: 0 1rem; }
    .hero-section { padding-bottom: 100px; min-height: 80vh; }
    .scroll-indicator { bottom: 25px; }
}

/* Additional media query for very narrow screens (e.g., smaller phones in portrait) */
@media (max-width: 420px) {
    .hero-content h1 {
        font-size: 1.8rem; /* Further reduce font size for hero title */
        /* Consider letter-spacing: -0.03em; if text still feels too wide */
    }

    .hero-content .hero-sub-text {
        font-size: 1rem; /* Adjust sub-text if needed too */
    }
}