/* Reset & Base */
:root {
    /* Dark Mode (Default) */
    --bg-color: #0f0d0c; 
    --text-primary: #ffffff;
    --text-secondary: #c9c9c9;
    --accent: #ffffff;
    --border-color: rgba(255, 255, 255, 0.1);
    --card-hover: rgba(255, 255, 255, 0.05);
    --input-focus: #ffffff;
    
    /* Using Inter for that clean, standard modern sans look seen in the image */
    --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Light Mode Override */
body.light-mode {
    --bg-color: #f4f4f0; /* Soft off-white */
    --text-primary: #1a1a1a;
    --text-secondary: #5a5a5a;
    --accent: #000000;
    --border-color: rgba(0, 0, 0, 0.1);
    --card-hover: rgba(0, 0, 0, 0.05);
    --input-focus: #1a1a1a;
}

/* Specific Light Mode Fixes */
body.light-mode .post-hero-overlay {
    background: linear-gradient(to top, rgba(244, 244, 240, 1) 0%, rgba(244, 244, 240, 0.8) 20%, rgba(244, 244, 240, 0.2) 60%, rgba(244, 244, 240, 0.1) 100%);
}

body.light-mode .post-hero-image.fallback-hero {
    background: linear-gradient(135deg, #e0e0e0 0%, #f4f4f0 100%);
}

body.light-mode .post-meta-hero {
    color: rgba(0,0,0,0.7);
}

body.light-mode .post-hero-content .headline {
    text-shadow: none; /* Clean look for light mode */
}

body.light-mode .post-body-immersive {
    color: var(--text-secondary);
}

body.light-mode .submission-section {
    background-color: #e8e8e4; /* Distinct light grey for section */
}

body.light-mode .nav-card:hover {
    background: var(--card-hover);
}

body.light-mode .nav-card::before {
    background: radial-gradient(circle at center, rgba(0,0,0,0.05) 0%, transparent 70%);
}

body.light-mode .icon-btn:hover {
    background: rgba(0,0,0,0.05);
}

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

body {
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 0; /* Removed extra padding */
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
header {
    padding: 40px 0; /* Equal top and bottom padding for symmetry */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    
    /* Ensure header aligns with container */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    position: fixed; /* Changed to fixed for sticky behavior */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth transition */
    background: transparent; /* Start transparent */
}

/* Sticky Header State */
header.sticky {
    padding: 16px 40px; /* Compact padding */
    background: rgba(15, 13, 12, 0.9); /* Dark semi-transparent bg */
    backdrop-filter: blur(10px); /* Blur effect */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    max-width: 100%; /* Expand to full width on scroll */
}

body.light-mode header.sticky {
    background: rgba(244, 244, 240, 0.9); /* Light semi-transparent bg */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Logo scaling on sticky */
header.sticky .logo-icon {
    width: 32px;
    height: 38px;
}

header.sticky .logo-text {
    font-size: 1.2rem;
}

/* Button scaling on sticky */
header.sticky .btn-submit-header {
    height: 40px; /* Shrink button */
    padding: 0 20px;
}

header.sticky .icon-btn {
    height: 40px; /* Shrink icons */
    width: 40px;
}

/* Logo Area */
.logo-area {
    display: flex;
    align-items: center; /* Center align icon with text */
    gap: 20px; /* Increased gap */
    color: var(--text-primary);
    position: relative;
    z-index: 2000; /* Above menu overlay */
}

.logo-text {
    font-size: 2rem; /* Increased size */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    display: block;
}

.logo-icon {
    width: 48px; /* Increased icon size */
    height: auto;
    fill: var(--text-primary);
    margin-top: 0;
}

/* Header Controls */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-submit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    border-radius: 50px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-submit-header:hover {
    background: var(--text-primary);
    color: var(--bg-color);
    border-color: var(--text-primary);
}

.btn-submit-header svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .btn-submit-header .btn-text {
        display: none;
    }
    .btn-submit-header {
        padding: 8px;
        border-radius: 50%;
    }
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px; /* Increased hit area */
    transition: all 0.2s ease;
    border-radius: 50%;
    /* Removed border */
}

.icon-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.1); /* Subtle scale effect */
}

.icon-btn svg {
    width: 32px; /* Increased icon size */
    height: 32px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Header Submit Button */
.btn-submit-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--text-primary); /* Solid background */
    color: var(--bg-color); /* Contrast text */
    padding: 10px 24px; /* BIG PILL SIZING */
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
    height: 48px; /* Taller, prominent height */
    white-space: nowrap;
}

.btn-submit-header:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-submit-header svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Ensure icons are centered but keep their own size */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px; /* Match the big button height for alignment */
    width: 48px;
    padding: 0;
    border-radius: 50%; /* Circle */
    transition: background 0.2s;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.1);
}

body.light-mode .icon-btn:hover {
    background: rgba(0,0,0,0.05);
}

.icon-btn svg {
    width: 24px;
    height: 24px;
}

.btn-text {
    display: inline-block; /* Show text */
}

@media (max-width: 768px) {
    .btn-submit-header .btn-text {
        display: none;
    }
    
    .btn-submit-header {
        padding: 0;
        width: 36px;
        justify-content: center;
        background: transparent;
        color: var(--text-primary);
    }

    .btn-submit-header svg {
        width: 28px;
        height: 28px;
    }
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 1500;
    display: flex;
    justify-content: flex-end; /* Align content to right */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    overflow: hidden; /* Ensure big icon doesn't overflow */
}

/* Close Button in Menu */
.menu-close-btn {
    pointer-events: auto; /* Ensure it's clickable */
    width: 48px;
    height: 48px;
}

.menu-close-btn svg {
    width: 32px;
    height: 32px;
}

/* Large Background Icon */
.menu-bg-icon {
    position: absolute;
    left: -10%;
    bottom: -10%;
    width: 60vh;
    height: 60vh;
    opacity: 0.03; /* Very subtle */
    color: var(--text-primary);
    pointer-events: none;
    transform: rotate(-15deg);
}

.menu-bg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.menu-content {
    width: 50%; /* Right half of screen */
    height: 100%;
    padding: 120px 80px 40px; /* Top padding to clear header */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.menu-overlay.active .menu-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delay */
.menu-overlay.active .menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-overlay.active .menu-item:nth-child(2) { transition-delay: 0.2s; }
.menu-overlay.active .menu-item:nth-child(3) { transition-delay: 0.3s; }
.menu-overlay.active .menu-item:nth-child(4) { transition-delay: 0.4s; }

.menu-link {
    display: flex;
    align-items: center;
    padding: 30px 0;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    width: 100%;
}

.menu-index {
    font-size: 0.9rem;
    font-family: monospace; /* Or distinct sans */
    color: var(--text-secondary);
    margin-right: 40px;
    font-weight: 400;
}

.menu-arrow {
    margin-left: auto;
    width: 24px;
    height: 24px;
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: all 0.3s ease;
}

.menu-link:hover .menu-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Add spacing to main content because header is now fixed */
main.container {
    padding-top: 140px; /* Account for initial header height */
}

/* Hero Section */
.hero {
    padding: 160px 0; /* Equal top and bottom padding */
    width: 100vw; /* Full Viewport Width */
    margin-left: calc(-50vw + 50%); /* Breakout of container */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center Content */
    text-align: center;
    background-color: var(--bg-color); /* Use variable for theme switching */
    margin-top: -140px; /* Pull hero up behind fixed header */
    padding-top: 300px; /* Add extra top padding to compensate */
}

.hero-bg-faint {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vh; /* Scaled to viewport height */
    height: 60vh;
    transform: translate(-50%, -50%) rotate(-15deg);
    opacity: 0.05; /* Very subtle */
    color: var(--text-primary);
    z-index: 0;
    pointer-events: none;
    /* Removed image background */
}

.hero-bg-faint svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(0.6); /* Darken for readability */
}

/* Gradient Overlay to ensure text readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(15,13,12,0.4) 0%, rgba(15,13,12,0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero h1 {
    font-size: 4rem; /* Reduced size */
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: -0.04em;
    max-width: 900px;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.hero p {
    font-size: 1.25rem; /* Slightly smaller */
    color: var(--text-secondary);
    max-width: 500px; /* Tighter width */
    line-height: 1.6;
    font-weight: 400;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* Specific Light Mode Fixes for Hero */
body.light-mode .hero {
    background-color: #e0e0e0;
}
body.light-mode .hero::after {
    background: radial-gradient(circle at center, rgba(244,244,240,0.4) 0%, rgba(244,244,240,1) 100%);
}

/* Central Timeline Layout */
.content-grid {
    position: relative;
    max-width: 1200px; /* Match standard container */
    margin: 0 auto;
    padding: 60px 40px; /* Align with header padding */
}

/* The Central Line */
.content-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--border-color);
    transform: translateX(-50%);
    opacity: 0.5;
}

/* Scroll Animation Class */
.grid-item {
    position: relative;
    width: 50%;
    padding: 0 40px 60px; /* Gap from line */
    box-sizing: border-box;
    opacity: 0; /* Start hidden */
    transform: translateY(30px); /* Start lower */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth reveal */
}

.grid-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Odd Items (Left Side) */
.grid-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

/* Even Items (Right Side) */
.grid-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

/* The Timeline Dot/Marker */
.grid-item::before {
    content: '';
    position: absolute;
    top: 25px;
    width: 12px;
    height: 12px;
    background: var(--bg-color);
    border: 2px solid var(--text-primary);
    border-radius: 50%;
    z-index: 1;
    transition: background-color 0.2s;
}

/* Marker Position for Odd (Right edge) */
.grid-item:nth-child(odd)::before {
    right: -6px; /* Half of width (12px) to center on line */
}

/* Marker Position for Even (Left edge) */
.grid-item:nth-child(even)::before {
    left: -6px;
}

/* Hover Effects */
.grid-item:hover::before {
    background: var(--text-primary);
}

.item-number {
    position: absolute;
    top: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: var(--font-stack);
}

/* Number Position for Odd */
.grid-item:nth-child(odd) .item-number {
    right: -50px; /* To the right of the line */
}

/* Number Position for Even */
.grid-item:nth-child(even) .item-number {
    left: -50px; /* To the left of the line */
}

.item-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.item-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.item-link-text {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.grid-item:hover .item-link-text {
    border-bottom-color: var(--text-primary);
}

/* Mobile: Collapse to Single Column */
@media (max-width: 768px) {
    .content-grid::before {
        left: 30px; /* Line moves to left */
    }
    
    .grid-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 20px;
        text-align: left; /* Reset alignment */
    }
    
    .grid-item:nth-child(odd),
    .grid-item:nth-child(even) {
        left: 0;
        text-align: left;
    }
    
    /* Reset Marker Position */
    .grid-item:nth-child(odd)::before,
    .grid-item:nth-child(even)::before {
        left: 24px; /* Center on the new line position */
        right: auto;
    }
    
    .item-number {
        display: none;
    }
    
    .item-title {
        font-size: 1.5rem;
    }
}

/* Submit Page Styles */
.submit-page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 0;
}

.submit-header {
    margin-bottom: 80px;
    text-align: center;
}

.submit-header h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.submit-header p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.submission-form-wrapper {
    /* No background, just clean layout */
}

.submission-section h3 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Submit Button (Form) */
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--text-primary);
    color: var(--bg-color);
    padding: 10px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
    height: 56px; /* Slightly larger than header button */
    border: none;
    cursor: pointer;
    width: 100%; /* Full width on form */
    margin-top: 40px;
    font-family: var(--font-stack);
}

.submit-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* File Upload Styling */
.file-upload-wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: var(--text-primary);
    background: rgba(255,255,255,0.02);
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    pointer-events: none;
}

.upload-icon {
    font-size: 2rem;
    font-weight: 300;
}

.upload-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Form Groups */
.form-group {
    margin-bottom: 32px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
    text-align: left; /* Force center alignment */
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-stack);
    font-size: 1.5rem; /* Large input text */
    padding: 10px 0;
    transition: border-color 0.2s;
    border-radius: 0;
}

.form-group textarea {
    font-size: 1.2rem;
    line-height: 1.6;
    min-height: 150px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--text-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.3;
}

.success-message {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 20px;
    margin-bottom: 40px;
    border-radius: 4px;
}

/* Manifesto Header */
.manifesto {
    text-align: center;
    padding: 60px 20px 80px;
    max-width: 800px;
    margin: 0 auto;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.manifesto h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}

.manifesto p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 300;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .manifesto {
        padding: 40px 20px 60px;
    }
    
    .manifesto h1 {
        font-size: 3rem;
    }
    
    .manifesto p {
        font-size: 1.1rem;
    }
}

/* Feed Container Spacing */
.feed-container {
    padding-top: 120px;
}

@media (max-width: 768px) {
    .feed-container {
        padding-top: 100px;
    }
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 40px 0;
    margin-top: 80px;
    background-color: var(--bg-color);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    color: var(--text-primary);
    width: 32px; /* Much smaller */
    height: auto;
    display: flex;
    align-items: center;
}

.footer-logo svg {
    fill: var(--text-primary);
}

.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--text-primary);
}

.footer-copy {
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 1; /* Full opacity */
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }
}

/* Post Hero Layout */
.immersive-layout {
    padding: 0 0 120px; /* Remove top padding, keep bottom */
    max-width: 100%;
}

.post-hero-wrapper {
    position: relative;
    width: 100%;
    height: 80vh; /* Large impact hero */
    display: flex;
    align-items: flex-end; /* Text at bottom */
    justify-content: center;
    overflow: hidden;
    margin-bottom: 80px;
}

.post-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.post-hero-image.fallback-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0d0c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fallback-pattern {
    width: 60vh;
    height: 60vh;
    opacity: 0.03; /* Very faint watermark */
    color: var(--text-primary);
    transform: rotate(-15deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    z-index: 1;
}

.fallback-pattern svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.post-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 13, 12, 1) 0%, rgba(15, 13, 12, 0.8) 20%, rgba(15, 13, 12, 0.2) 60%, rgba(15, 13, 12, 0.1) 100%);
    z-index: 2;
}

.post-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px 60px;
    max-width: 900px;
}

.post-hero-content .headline {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.post-meta-hero {
    font-size: 1rem;
    color: var(--text-primary); /* Changed from rgba(255,255,255,0.8) to be visible in all themes */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 5; /* Ensure above overlay */
}

/* Specific for light mode to ensure contrast */
body.light-mode .post-meta-hero {
    color: var(--text-secondary);
}

.post-meta-hero .separator {
    opacity: 0.5;
}

/* Like Block (Static) */
.like-block {
    display: flex;
    justify-content: center;
    margin-top: 60px; /* Space from Hero */
    margin-bottom: 40px; /* Space to Text */
}

.like-btn-static {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 50px;
    font-family: var(--font-stack);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.like-btn-static:hover {
    border-color: #ff4081;
    color: #ff4081;
    transform: translateY(-2px);
}

.like-btn-static.liked {
    background: #ff4081;
    border-color: #ff4081;
    color: white;
}

.like-btn-static svg {
    transition: transform 0.2s;
}

.like-btn-static:active {
    transform: scale(0.95);
}

.like-btn-static.liked svg {
    fill: currentColor;
}

@media (max-width: 768px) {
    .like-block {
        margin-top: 40px;
        margin-bottom: 30px;
    }
}

/* Like Particle Animation */
.like-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff4081;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

@keyframes particle-explode {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
        opacity: 0;
    }
}

/* Post Body */
.post-body-immersive {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #d0d0d0;
    font-weight: 300;
    text-align: center; /* Centered content as requested */
    max-width: 740px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.post-body-immersive p {
    margin-bottom: 1.5em;
}

.post-body-immersive h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.post-body-immersive h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.post-body-immersive ul, 
.post-body-immersive ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
    text-align: left; /* Lists look better left-aligned usually, but let's keep center if that's the vibe, or maybe strictly left for readability? User said "clean". Centered lists are messy. Let's keep them centered for now to match body, or maybe specific align. */
    display: inline-block; /* Allows text-align center on parent to center the block, but internal text is left */
    text-align: left;
}

.post-body-immersive strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Share Section */
.share-section-immersive {
    max-width: 740px;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.share-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 12px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.share-toggle-btn:hover, .share-toggle-btn.active {
    color: var(--text-primary);
}

.chevron-icon {
    transition: transform 0.3s;
}

.share-toggle-btn.active .chevron-icon {
    transform: rotate(180deg);
}

.share-options {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
}

.share-options.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    padding-top: 10px;
}

.share-icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* Copy Button State */
.copy-btn.copied .link-icon {
    display: none;
}
.copy-btn.copied .check-icon {
    display: block !important;
    color: #4CAF50; /* Green check */
}

/* Footer & Navigation */
.post-footer-immersive {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 0; /* Remove padding */
    margin-top: 80px;
    max-width: 100%;
}

.post-navigation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
}

.nav-card {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smoother easing */
    border-right: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.nav-card:last-child {
    border-right: none;
}

/* Subtle Gradient Hover instead of hard background */
.nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.nav-card:hover::before {
    opacity: 1;
}

.nav-card.prev {
    text-align: left;
    align-items: flex-start;
}

.nav-card.next {
    text-align: right;
    align-items: flex-end;
}

.nav-content {
    position: relative;
    z-index: 1; /* Ensure text is above gradient */
}

.nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.nav-card:hover .nav-label {
    opacity: 1;
}

.nav-title {
    font-size: 1.5rem; /* Slightly smaller, more refined */
    font-weight: 600; /* Lighter weight */
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 400px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Movement on hover */
.nav-card.prev:hover .nav-title { transform: translateX(-10px); }
.nav-card.next:hover .nav-title { transform: translateX(10px); }

/* Color change removed to keep it cleaner, just motion + bg glow */

.nav-spacer {
    background: transparent;
    padding: 60px 40px;
}

/* About Page */
.about-container {
    padding-top: 120px;
}

.about-header {
    text-align: center;
    margin-bottom: 80px;
    padding: 0 20px;
}

.about-header .headline {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.about-header .sub-headline {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 600px;
    margin: 0 auto;
}

/* Legal Page */
.legal-container {
    padding-top: 60px;
    max-width: 900px;
    margin: 0 auto;
}

.legal-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.legal-tab {
    background: none;
    border: none;
    font-family: var(--font-stack);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-tab:hover {
    color: var(--text-primary);
}

.legal-tab.active {
    color: var(--text-primary);
}

.legal-tab.active::after {
    content: '';
    position: absolute;
    bottom: -21px; /* Align with border-bottom of container */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
}

.tab-pane {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive / Mobile Streamlining */
/* FAB (Mobile Only) */
.fab-submit {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--text-primary);
    color: var(--bg-color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 999;
    transition: transform 0.2s;
}

.fab-submit:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    /* Hide Header Button */
    .btn-submit-header {
        display: none !important;
    }
    
    /* Show FAB */
    .fab-submit {
        display: flex;
    }
    
    /* ... existing mobile styles ... */
    .container {
        padding: 0 20px;
    }
    
    header {
        padding: 20px;
    }
    
    header.sticky {
        padding: 12px 20px;
    }

    main.container {
        padding-top: 100px; /* Reduced top gap */
    }

    /* Typography Scaling */
    .hero h1 {
        font-size: 3rem;
    }

    .post-hero-content .headline,
    .submit-header h1 {
        font-size: 3rem;
        line-height: 1.1;
    }
    
    .post-body-immersive {
        font-size: 1.1rem;
        line-height: 1.7;
        padding: 0;
    }
    
    .post-hero-wrapper {
        height: 60vh; /* Reduced height */
        align-items: flex-end;
    }
    
    .post-hero-content {
        padding-bottom: 40px;
    }

    .post-meta-hero {
        flex-direction: column; /* Stack items */
        gap: 8px;
        font-size: 0.85rem;
        opacity: 0.9;
    }
    
    .post-meta-hero .separator {
        display: none; /* Hide dots in stack mode */
    }

    /* Grid -> Stack */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    /* Header Elements */
    .logo-text {
        display: none; /* Hide text, keep icon */
    }
    
    .nav-controls {
        gap: 15px; /* Tighter controls */
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 20px;
    }

    /* Menu Overlay */
    .menu-content {
        width: 100%;
        padding: 100px 30px;
    }
    
    .menu-link {
        font-size: 2rem;
    }
}