/* ==========================================
   NOTEBOOK STYLES
   Paper texture, open notebook layout
   Subtle color-coding per section
   ========================================== */

/* Paper texture background */
body.notebook-page {
    background: #f4f1ea url('https://www.transparenttextures.com/patterns/paper.png');
    background-attachment: fixed;
}

/* Section color palette (soft, academic) */
:root {
    --color-ta-log: #d4845f;           /* soft orange - desk notes vibe */
    --color-performance: #6b9eb5;       /* cool blue - analytical */
    --color-profiles: #b8997a;          /* neutral warm - personal */
    --color-incidents: #c26a6a;         /* red tint - urgency */
    --color-academic: #5a7a65;          /* deep green - scholarly */
    --color-leaderboard: #d4a74f;       /* gold - achievement */
    --color-chats: #8b77a3;             /* purple - chaotic energy */
    --color-misc: #6b6b6b;              /* charcoal grey */
    --color-empty: #a8a8a8;             /* soft silver */
}

/* Notebook container */
.notebook-container {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
}

/* Left page - decorative only */
.left-page {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 3rem 2.5rem;
    box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Faint collage of campus items behind the page */
.left-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    background-image: url('pictures/bg-collage.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.left-page > * {
    position: relative;
    z-index: 1;
}

.left-page::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(139, 115, 85, 0.1) 20%, 
        rgba(139, 115, 85, 0.2) 50%, 
        rgba(139, 115, 85, 0.1) 80%, 
        transparent 100%);
}

.property-label {
    font-family: 'Brush Script MT', cursive, 'Segoe Script', sans-serif;
    font-size: 1.5rem;
    color: #6b5d52;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.property-name {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #4a4035;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.doodles {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    opacity: 0.15;
    font-size: 0.9rem;
    color: #8b7355;
    line-height: 2;
}

.coffee-stain {
    position: absolute;
    bottom: 3rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.15), transparent 70%);
    opacity: 0.4;
}

/* Right page - sections list */
.right-page {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 3rem 2.5rem;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

.notebook-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    color: #4a4035;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(251, 191, 36, 0.3);
}

.sections-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-item {
    display: block;
    padding: 1.25rem 1.5rem 1.25rem 2rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(139, 115, 85, 0.15);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle color tints for each section background */
.section-item[data-section="ta-log"] { 
    background: rgba(212, 132, 95, 0.06); /* soft orange */
}
.section-item[data-section="performance"] { 
    background: rgba(107, 158, 181, 0.06); /* cool blue */
}
.section-item[data-section="profiles"] { 
    background: rgba(184, 153, 122, 0.06); /* neutral warm */
}
.section-item[data-section="incidents"] { 
    background: rgba(194, 106, 106, 0.06); /* red tint */
}
.section-item[data-section="academic"] { 
    background: rgba(90, 122, 101, 0.06); /* deep green */
}
.section-item[data-section="leaderboard"] { 
    background: rgba(212, 167, 79, 0.06); /* gold */
}
.section-item[data-section="chats"] { 
    background: rgba(139, 119, 163, 0.06); /* purple */
}
.section-item[data-section="misc"] { 
    background: rgba(107, 107, 107, 0.06); /* charcoal */
}
.section-item[data-section="empty"] { 
    background: rgba(168, 168, 168, 0.04); /* soft silver */
}

/* Left vertical accent bar per section */
.section-item[data-section="ta-log"]::after { background: var(--color-ta-log); }
.section-item[data-section="performance"]::after { background: var(--color-performance); }
.section-item[data-section="profiles"]::after { background: var(--color-profiles); }
.section-item[data-section="incidents"]::after { background: var(--color-incidents); }
.section-item[data-section="academic"]::after { background: var(--color-academic); }
.section-item[data-section="leaderboard"]::after { background: var(--color-leaderboard); }
.section-item[data-section="chats"]::after { background: var(--color-chats); }
.section-item[data-section="misc"]::after { background: var(--color-misc); }
.section-item[data-section="empty"]::after { background: var(--color-empty); }

.section-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
}

/* Intensify color tints on hover */
.section-item[data-section="ta-log"]:hover { 
    background: rgba(212, 132, 95, 0.10); 
}
.section-item[data-section="performance"]:hover { 
    background: rgba(107, 158, 181, 0.10); 
}
.section-item[data-section="profiles"]:hover { 
    background: rgba(184, 153, 122, 0.10); 
}
.section-item[data-section="incidents"]:hover { 
    background: rgba(194, 106, 106, 0.10); 
}
.section-item[data-section="academic"]:hover { 
    background: rgba(90, 122, 101, 0.10); 
}
.section-item[data-section="leaderboard"]:hover { 
    background: rgba(212, 167, 79, 0.10); 
}
.section-item[data-section="chats"]:hover { 
    background: rgba(139, 119, 163, 0.10); 
}
.section-item[data-section="misc"]:hover { 
    background: rgba(107, 107, 107, 0.10); 
}

.section-item::before {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
}

.section-item:hover {
    border-color: currentColor;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-item:hover::before {
    opacity: 0.6;
    right: 1rem;
}

.section-item:hover::after {
    width: 6px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.section-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Icon colors matching section theme */
.section-item[data-section="ta-log"] .section-icon { color: var(--color-ta-log); }
.section-item[data-section="performance"] .section-icon { color: var(--color-performance); }
.section-item[data-section="profiles"] .section-icon { color: var(--color-profiles); }
.section-item[data-section="incidents"] .section-icon { color: var(--color-incidents); }
.section-item[data-section="academic"] .section-icon { color: var(--color-academic); }
.section-item[data-section="leaderboard"] .section-icon { color: var(--color-leaderboard); }
.section-item[data-section="chats"] .section-icon { color: var(--color-chats); }
.section-item[data-section="misc"] .section-icon { color: var(--color-misc); }
.section-item[data-section="empty"] .section-icon { color: var(--color-empty); }

.section-item:hover .section-icon {
    transform: scale(1.1);
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4a4035;
}

.section-desc {
    font-size: 0.9rem;
    color: #8b7355;
    margin-left: 2.25rem;
    line-height: 1.4;
}

.empty-slot {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.empty-slot:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(139, 115, 85, 0.15);
}

/* Section page content styles */
.section-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 12px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 900px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}

/* Mobile */
@media (max-width: 968px) {
    .notebook-container {
        grid-template-columns: 1fr;
    }
    
    .left-page {
        display: none;
    }
    
    .right-page {
        border-radius: 12px;
        border: 1px solid rgba(139, 115, 85, 0.3);
    }
    
    .section-content {
        padding: 2rem;
        margin: 1rem;
    }
}
.section-content.narrow {
  max-width: 720px;
  margin: 0 auto;
}

.artifact-box {
  margin: 1.5rem 0;
  border: 2px solid #2c2c2c;
  padding: 1rem;
  background: #fff;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
}

.artifact-image {
  width: 100%;
  display: block;
  border: 1px solid #d6d2c8;
}

.poem-block {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  background: #faf7f2;
  border-left: 4px solid #2c2c2c;
  padding: 1rem 1.5rem;
  line-height: 1.6;
  margin-top: 1rem;
  white-space: pre-line;
}
.section-content.narrow {
  max-width: 720px;
  margin: 0 auto;
}

/* Artifact container */
.artifact-box {
  margin: 1.5rem 0;
  border: 2px solid #2c2c2c;
  padding: 1rem;
  background: #fff;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
}

/* Prevents gigantic images */
.artifact-image.scaled {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d6d2c8;
}

/* Poem styling */
.poem-block {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  background: #faf7f2;
  border-left: 4px solid #2c2c2c;
  padding: 1rem 1.5rem;
  line-height: 1.6;
  margin-top: 1rem;
  white-space: pre-line;
}
.code-box {
  background: #fdfcf8;
  border: 1px solid #d6d2c8;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin: 1.25rem 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  overflow-x: auto;
}

.code-content {
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.35; /* COMPACT, like Performance */
  color: #3b3b3b;
}

.code-line { display: block; }

.code-line .kw { 
  color: #7b3f00; 
  font-weight: 700; 
}

.code-line .str { 
  color: #1d6b31;
}
/* ==========================================
   TA LOG SPECIFIC STYLES
   High contrast for code artifacts
   ========================================== */

/* Container overrides */
.section-content .code-view {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    background-color: #fdfdfd; 
    border: 1px solid #d1d5db;
    border-left: 4px solid var(--color-ta-log);
    padding: 1.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5rem 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    color: #1f2937;
}

/* Syntax Highlighting */
.code-view .kwd { color: #0c4a6e; font-weight: 700; } /* Dark Blue */
.code-view .str { color: #15803d; font-weight: 500; } /* Dark Green */
.code-view .typ { color: #b45309; font-weight: 600; } /* Dark Orange */
.code-view .com { color: #6b7280; font-style: italic; } /* Grey */

/* Meta & Notes */
.section-content .intro-meta {
    font-family: 'Space Grotesk', sans-serif;
    color: #4b5563;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.section-content .margin-note {
    font-family: 'Brush Script MT', 'Comic Sans MS', cursive;
    color: #c026d3;
    font-size: 1.3rem;
    margin-top: 1rem;
    padding-left: 1rem;
    transform: rotate(-1deg);
    opacity: 0.9;
    background: rgba(255, 255, 0, 0.1);
    display: inline-block;
}

.section-separator {
    margin: 4rem 0;
    border: 0;
    border-top: 2px dashed rgba(139, 115, 85, 0.3);
}
/* ==========================================
   CRITICAL FIXES
   ========================================== */

/* 1. Force DARK text inside the white notebook pages */
.section-content {
    color: #2c2c2c !important; /* Overrides the global light text */
}

/* 2. Fix the Code Block structure and colors */
.code-view {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    background-color: #fdfdfd; 
    border: 1px solid #d1d5db;
    border-left: 4px solid #d4845f; /* Orange accent */
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    color: #1f2937; /* Dark text for code */
    
    /* CRITICAL: Preserves line breaks and spacing */
    white-space: pre; 
}

/* 3. Syntax Highlighting Colors */
.code-view .kwd { color: #005cc5; font-weight: bold; } /* Blue keywords */
.code-view .str { color: #22863a; } /* Green strings */
.code-view .typ { color: #d73a49; } /* Red/Orange types */
.code-view .com { color: #6a737d; font-style: italic; } /* Grey comments */

/* 4. Margin Note Style */
.margin-note {
    font-family: 'Brush Script MT', cursive;
    color: #8b008b; /* Dark purple */
    font-size: 1.2rem;
    margin-top: 1rem;
    transform: rotate(-1deg);
    display: block;
}
/* ==========================================
   SECTION: PROFILES (The Dossier Look)
   ========================================== */

.notebook-card {
    background: #ffffff;
    /* The Profile Accent Color from your palette */
    border: 1px solid #b8997a; 
    border-top: 5px solid #b8997a; 
    border-radius: 2px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    
    /* A hard shadow to make it look like it's sitting ON the paper */
    box-shadow: 5px 5px 0 rgba(184, 153, 122, 0.15);
    
    /* Layout */
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

/* Left Column: Photo & Stats */
.card-sidebar {
    flex: 0 0 200px; /* Fixed width for the sidebar */
    text-align: center;
    border-right: 1px dashed #e0e0e0;
    padding-right: 1.5rem;
}

.card-photo-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f4f4f4;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #bbb;
    font-size: 3rem;
}

.stat-block {
    margin-bottom: 1rem;
    text-align: left;
}

.stat-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4a4035;
}

/* Right Column: Bio Content */
.card-main {
    flex: 1;
}

.card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.card-role {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #b8997a; /* Profile accent color */
    margin-bottom: 2rem;
    font-weight: 600;
}

.card-bio {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .notebook-card { flex-direction: column; gap: 1.5rem; }
    .card-sidebar { 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px dashed #e0e0e0;
        padding-bottom: 1.5rem;
        padding-right: 0;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 1.5rem;
        text-align: left;
    }
    .card-photo-placeholder { margin-bottom: 0; }
}
/* ==========================================
   SECTION: LEADERBOARD (The Chaos Board)
   ========================================== */

/* 1. Handwriting Font for TA Notes */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Kalam:wght@700&display=swap');

.handwritten {
    font-family: 'Kalam', 'Comic Sans MS', cursive;
    color: #c0392b; /* Angry Red Pen */
    font-weight: 700;
    transform: rotate(-2deg);
    display: inline-block;
}

/* 2. The Main Graph Paper Sheet */
.graph-sheet {
    background-color: #fff;
    background-image: 
        linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    position: relative;
    margin-bottom: 3rem;
    transform: rotate(0.5deg); /* Imperfect alignment */
}

/* The "Pin" or "Tape" visual */
.tape {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 35px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    transform: translateX(-50%) rotate(-1deg);
    backdrop-filter: blur(2px);
}

/* 3. The Sticky Note */
.sticky-note {
    background: #fef3c7; /* Post-it Yellow */
    padding: 1.5rem;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
}

/* 4. The Receipt (Snack Debt) */
.receipt-paper {
    background: #fff;
    border-top: 1px dashed #bbb;
    border-bottom: 1px dashed #bbb;
    padding: 2rem;
    font-family: 'Courier New', monospace;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    transform: rotate(1deg);
}

/* Table Styles for the Graph Paper */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.rank-table th {
    text-align: left;
    border-bottom: 3px solid #333;
    padding: 0.5rem;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
}
.rank-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #ccc;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}
.rank-row-1 { background: rgba(255, 215, 0, 0.1); } /* Gold tint for #1 */
.rank-row-last { opacity: 0.6; } /* Shame fade for last place */

/* Grid Layout for the Cards */
.chaos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
/* ==========================================
   SECTION: CHATS (The Logs)
   ========================================== */

.chat-window {
    background-color: #313338; /* Discord Dark */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 3rem;
    border: 1px solid #1e1f22;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    font-family: 'gg sans', 'Helvetica Neue', Arial, sans-serif;
}

.chat-header {
    background-color: #2b2d31;
    padding: 1rem;
    border-bottom: 1px solid #1f2023;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f2f3f5;
    font-weight: bold;
}

.channel-name {
    color: #dbdee1;
    font-size: 0.95rem;
}
.channel-name::before {
    content: "#";
    color: #888;
    margin-right: 4px;
    font-size: 1.1rem;
}

.chat-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0;
}

.message:hover {
    background-color: rgba(255,255,255,0.02); /* Subtle hover */
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e1f22;
    flex-shrink: 0;
}

.msg-content {
    flex: 1;
}

.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.username {
    font-weight: 600;
    color: #f2f3f5;
    font-size: 0.95rem;
}

/* Character Specific Colors */
.user-chatgpt { color: #10a37f; } /* OpenAI Green */
.user-claude  { color: #d97757; } /* Anthropic Orange */
.user-grok    { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); } /* X White/Glow */
.user-deepseek{ color: #3b82f6; } /* Blue */
.user-llama   { color: #0668E1; } /* Meta Blue */
.user-kimi    { color: #e0aaff; } /* Pastel Purple */
.user-gemini  { color: #4aa9ff; } /* Google Blue */

.timestamp {
    font-size: 0.7rem;
    color: #949ba4;
}

.text {
    color: #dbdee1;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.mention {
    background: rgba(88, 101, 242, 0.3);
    color: #c9cdfb;
    padding: 0 2px;
    border-radius: 3px;
    cursor: pointer;
}

.system-msg {
    color: #fa777c;
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    border-top: 1px solid #3f4147;
    border-bottom: 1px solid #3f4147;
    padding: 0.5rem;
    margin: 1rem 0;
}
/* ==========================================
   BLUEPRINT LINK (Mobile Friendly)
   ========================================== */

.blueprint-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1e3a8a; /* Blueprint Blue */
    background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 2px solid #fff;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.blueprint-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.3);
}

/* "Folded Corner" effect */
.blueprint-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 40px 40px 0;
    border-style: solid;
    border-color: #fff #fff rgba(0,0,0,0.2) rgba(0,0,0,0.2);
    box-shadow: -2px 2px 2px rgba(0,0,0,0.1);
}

.blueprint-icon {
    font-size: 2rem;
    margin-right: 1rem;
}

.blueprint-text {
    flex: 1;
}

.blueprint-title {
    font-family: 'Courier New', monospace;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.25rem;
}

.blueprint-desc {
    font-size: 0.8rem;
    opacity: 0.8;
    font-family: sans-serif;
}

.blueprint-arrow {
    font-weight: bold;
    font-size: 1.2rem;
    margin-left: 1rem;
    color: #93c5fd;
}
/* ==========================================
   PAGE TURN ANIMATION SYSTEM
   ========================================== */

/* 1. Set the stage for 3D effects */
.notebook-container {
    perspective: 2000px; /* Deep perspective for realistic turning */
    transform-style: preserve-3d;
}

/* 2. The "Page Turn" Exit Animation (Index Page) */
.turn-page-exit {
    transform-origin: left center; /* Pivot from the spine */
    animation: turnPageLeft 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
    backface-visibility: hidden; /* Hide the back when flipped */
    z-index: 100;
}

@keyframes turnPageLeft {
    0% { 
        transform: rotateY(0deg); 
        box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
    }
    100% { 
        transform: rotateY(-120deg); 
        box-shadow: 20px 20px 50px rgba(0,0,0,0.1);
        opacity: 0; 
    }
}

/* 3. The "Fade In" Entry Animation (Destination Pages) */
/* This makes the new page softly appear after the turn */
body.notebook-page main {
    animation: paperFadeIn 0.8s ease-out forwards;
    opacity: 0; /* Start hidden */
}

/* We exclude the index page itself from fading in every time */
body.notebook-page .notebook-container main {
    animation: none;
    opacity: 1;
}

@keyframes paperFadeIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}