/* ==========================================================================
   1. BRAND ARCHITECTURE & DESIGN SYSTEMS
   ========================================================================== */
:root {
    /* Main Professional Editorial Palette */
    --primary: #002447;          /* Midnight Navy */
    --accent: #990000;           /* Deep Crimson */
    --blue-tory: #0087dc;        /* Tory Blue Accent */
    
    /* Document Copy & Surface Tones */
    --text-dark: #2d3748;        /* Slate Charcoal */
    --text-light: #4a5568;       /* Muted Body Copy */
    --bg-light: #f4f6f8;         /* Light Gray Background */
    --bg-pure: #ffffff;          /* Pure Document White */
    --border: #e2e8f0;           /* Clean Soft Grid Lines */
    
    /* Section 10: Harmonized Timeline Surface Engine */
    --timeline-bg: #001830;      /* Dark Westminster Navy (Matches Footer) */
    --timeline-card: #002447;    /* Deep Midnight Navy Base Card */
    --timeline-cyan: #0087dc;    /* Active Tory Blue Trace */
    --timeline-pink: #990000;    /* Alternate Deep Crimson Path Flash */
}

/* Base Document Overrides */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; backface-visibility: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text-dark); background-color: var(--bg-light); line-height: 1.7; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Global Headline Standards */
h1, h2, h3 { font-family: 'Georgia', Times, serif; font-weight: 700; color: var(--primary); }

/* ==========================================================================
   2. UNIFIED NAVIGATION HEADER
   ========================================================================== */
.navbar { background-color: var(--bg-pure); box-shadow: 0 2px 5px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 1000; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 20px; }
.nav-logo { font-size: 1.25rem; font-weight: 700; color: var(--primary); text-decoration: none; letter-spacing: 0.5px; }
.nav-menu { display: flex; list-style: none; gap: 30px; }
.nav-link { text-decoration: none; color: #555555; font-weight: 500; transition: color 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--blue-tory); font-weight: 700; }
.menu-toggle, .hamburger { display: none; }

/* ==========================================================================
   3. UNIFIED BRAND HERO MODULES (HOMEPAGE, ABOUT, & BLOG)
   ========================================================================== */
.hero-section, .about-hero, .blog-hero { background: linear-gradient(135deg, var(--primary) 0%, #003366 100%); color: var(--bg-pure); padding: 40px 0; text-align: center; border-bottom: 4px solid var(--accent); min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero-section { min-height: 440px; } /* Distinct prominent height exclusively for your main landing page */
.hero-content h1, .about-hero h1, .blog-hero h1 { font-family: 'Georgia', Times, serif; font-size: 3rem; font-weight: 700; margin-top: 0; margin-bottom: 12px; letter-spacing: -0.5px; color: var(--bg-pure); }
.hero-subtitle { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--blue-tory); margin-bottom: 12px; font-weight: 700; }
.lead-text, .hero-content p { font-size: 1.2rem; max-width: 700px; margin: 0 auto; padding: 0 20px; opacity: 0.95; line-height: 1.7; color: #e2e8f0; }

/* Hero Section Buttons Layout */
.hero-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
.btn { display: inline-block; padding: 14px 32px; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; }
.btn-primary { background-color: var(--blue-tory); color: var(--bg-pure); }
.btn-primary:hover { background-color: #006cb0; }
.btn-secondary { border: 2px solid var(--bg-pure); color: var(--bg-pure); }
.btn-secondary:hover { background-color: var(--bg-pure); color: var(--primary); }

/* ==========================================================================
   4. CONTENT LAYOUT GRIDS & CARDS
   ========================================================================== */
.overview-section { padding: 95px 0; background-color: var(--bg-light); }
.section-title { text-align: center; font-size: 2.4rem; margin-bottom: 60px; color: var(--primary); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; }

.card { background: var(--bg-pure); padding: 45px 35px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 36, 71, 0.04); text-align: center; transition: all 0.3s; border-top: 3px solid var(--primary); }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 36, 71, 0.08); border-top-color: var(--blue-tory); }
.card-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 65px; height: 65px; background-color: #f0f6fa; border-radius: 50%; margin-bottom: 25px; }
.card-icon { font-size: 1.5rem; color: var(--primary); }
.card h3 { margin-bottom: 15px; font-size: 1.35rem; color: var(--primary); }
.card p { color: var(--text-light); font-size: 0.95rem; }

/* ==========================================================================
   5. INTERACTIVE AUDIO PATHWAYS (TIMELINE ENGINE)
   ========================================================================== */
.timeline-container { padding: 140px 0; background-color: var(--timeline-bg); position: relative; overflow: hidden; }
.timeline-wrapper { position: relative; max-width: 1050px; margin: 0 auto; }
.timeline-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.timeline-svg path { fill: none; stroke-width: 6px; stroke-linecap: round; }
.path-bg { stroke: rgba(255, 255, 255, 0.08); }
.path-draw { stroke: var(--timeline-cyan); filter: drop-shadow(0 0 12px var(--timeline-cyan)) drop-shadow(0 0 4px #0072ff); transition: stroke-dashoffset 0.25s ease-out; will-change: stroke-dashoffset; }
.timeline-node { display: flex; align-items: center; position: relative; margin-bottom: 180px; width: 100%; z-index: 2; }
.timeline-node:last-child { margin-bottom: 60px; }
.timeline-node.left-node { flex-direction: row-reverse; }
.timeline-node.right-node { flex-direction: row; }

/* Central Node Track Interfaces */
.node-icon { width: 60px; height: 60px; background-color: #1e293b; color: #94a3b8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 0 4px var(--timeline-bg), 0 4px 20px rgba(0,0,0,0.6); position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.timeline-node.active-path .node-icon { background-color: var(--timeline-cyan); color: var(--timeline-bg); font-weight: bold; transform: translateX(-50%) rotate(360deg) scale(1.25); box-shadow: 0 0 0 4px var(--timeline-bg), 0 0 30px rgba(0, 135, 220, 0.8); }

/* Unified Media Panels & Glow System */
.node-content { width: 42%; background: var(--timeline-card); padding: 35px; border-radius: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); border: 1px solid #1e293b; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); transform: translateZ(0); will-change: transform, background-color, border-color; }
.timeline-node.active-path .node-content { background: #1e293b; border-color: var(--timeline-cyan); transform: scale(1.03); box-shadow: 0 0 25px rgba(0, 135, 220, 0.25), 0 20px 40px rgba(0,0,0,0.6); }

.node-tag { display: inline-block; font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; transition: color 0.4s; }
.timeline-node.active-path .node-tag { color: var(--timeline-cyan); }
.node-content h3 { color: var(--bg-pure); font-size: 1.45rem; margin-bottom: 12px; }
.node-content p { color: #e2e8f0; font-size: 0.95rem; }

/* ==========================================================================
   6. THE CHAMBER BRIEF (EDITORIAL BLOG LAYER)
   ========================================================================== */
.blog-hero { background-color: var(--primary); color: var(--bg-pure); padding: 70px 0; text-align: center; border-bottom: 4px solid var(--accent); }
.blog-hero h1 { font-size: 2.6rem; margin-bottom: 8px; color: var(--bg-pure); }
.blog-container { max-width: 850px; margin: 0 auto; padding: 80px 20px; min-height: 60vh; }
.blog-grid { display: flex; flex-direction: column; gap: 45px; }

.post-card { background: var(--bg-pure); padding: 40px; border-radius: 4px; box-shadow: 0 4px 15px rgba(0, 36, 71, 0.04); border-left: 4px solid var(--primary); transition: all 0.3s; }
.post-card:hover { transform: translateX(5px); border-left-color: var(--blue-tory); box-shadow: 0 8px 25px rgba(0, 36, 71, 0.08); }
.post-meta { display: block; font-size: 0.8rem; font-weight: 700; color: var(--blue-tory); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.post-card h2 { color: var(--primary); font-size: 1.7rem; margin-bottom: 15px; line-height: 1.3; }
.post-excerpt { color: var(--text-light); line-height: 1.65; margin-bottom: 20px; font-size: 1rem; }
.read-more-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: color 0.2s; }
.read-more-btn:hover { color: var(--blue-tory); }

/* Reading Screen Configurations */
.back-to-feed-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-bottom: 40px; transition: color 0.2s; }
.back-to-feed-btn:hover { color: var(--primary); }
.full-post-title { font-size: 2.5rem; color: var(--primary); line-height: 1.25; margin-top: 10px; margin-bottom: 20px; }
.editorial-divider { border: 0; height: 1px; background-color: var(--border); margin-bottom: 35px; }
.full-post-body p { font-size: 1.1rem; color: #2d3748; line-height: 1.8; margin-bottom: 25px; }
.full-post-body blockquote { font-family: 'Georgia', Times, serif; font-style: italic; font-size: 1.25rem; color: var(--text-light); border-left: 4px solid var(--accent); padding-left: 25px; margin: 35px 0; }

/* ==========================================================================
   7. RUNTIME ROOT FOOTER
   ========================================================================== */
.main-footer { padding: 45px 0; background-color: #001830; color: #a0aec0; font-size: 0.9rem; border-top: 1px solid var(--primary); }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.social-links a { color: #a0aec0; font-size: 1.2rem; margin-left: 20px; transition: color 0.3s; }
.social-links a:hover { color: var(--blue-tory); }

/* ==========================================================================
   8. SYSTEM RESPONSIVENESS (MEDIA MEDIA QUERIES)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .hamburger { display: block; font-size: 1.5rem; cursor: pointer; color: var(--primary); }
    .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background-color: var(--bg-pure); width: 100%; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; box-shadow: 0 4px 5px rgba(0,0,0,0.05); }
    .nav-menu li { width: 100%; text-align: center; }
    .nav-link { display: block; padding: 20px; border-top: 1px solid #eee; }
    .menu-toggle:checked ~ .nav-menu { max-height: 300px; }
    .hero-section { padding: 80px 0; }
    .footer-content { flex-direction: column; gap: 20px; text-align: center; }
    .social-links a { margin: 0 10px; }
    
    /* Responsive timeline mechanics */
    .timeline-node { flex-direction: column !important; margin-bottom: 80px; }
    .node-content { width: 85%; margin-top: 20px; }
    .node-icon { position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 10px; }
    .timeline-node.active-path .node-icon { transform: translateX(-50%) rotate(360deg) scale(1.1); }
}

@media screen and (max-width: 576px) {
    .hero-content h1 { font-size: 2.3rem; }
    .hero-content p { font-size: 1.1rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn { width: 100%; max-width: 280px; }
}

/* ==========================================================================
   9. HARDWARE ACCELERATED TEXT SELECTION FIXES
   ========================================================================== */
/* Force clean text selection behavior inside your custom Navy headers */
.hero-section ::selection, .about-hero ::selection, .blog-hero ::selection { 
    background-color: rgba(255, 255, 255, 0.25); /* Elegant semi-transparent overlay */
    color: var(--bg-pure);                       /* Keeps your heading text crisp white */
}

/* Fallback engine for older browser layout engines */
.hero-section ::-moz-selection, .about-hero ::-moz-selection, .blog-hero ::-moz-selection { 
    background-color: rgba(255, 255, 255, 0.25); 
    color: var(--bg-pure); 
}