@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
    --bg-color-light: rgb(251, 246, 232);
    --text-color-light: #555;
    --link-color-light: #555;
    --title-color-light: #555;
    --sidebar-bg-light: rgb(251, 246, 232);
    --content-box-bg-light: rgb(251, 246, 232);
    --border-color-light: #ccc;
    --button-hover-bg-light: #f0f0f0;
    --button-hover-text-light: #333;
    --essay-date-color-light: #666;

    --bg-color-dark: #1e2022; /* Base for opaque elements in dark mode */
    --text-color-dark: #f0f0f0;
    --link-color-dark: #70ab8a;
    --title-color-dark: #ff4f24;
    --sidebar-bg-dark: #1e2022; /* Opaque sidebar background */
    --content-box-bg-dark: #1e2022; /* Opaque content box background */
    --border-color-dark: #444;
    --button-hover-bg-dark: #333;
    --button-hover-text-dark: #70ab8a;
    --essay-date-color-dark: #aaa;

    /* Arcade palette */
    --arcade-neon-primary: #39ff14; /* neon green */
    --arcade-neon-secondary: #ff2bd6; /* neon magenta */
    --arcade-neon-accent: #00e5ff; /* neon cyan */
    --arcade-bg-deep: #0a0b10; /* deep dark backdrop */
    --arcade-panel: rgba(15, 18, 30, 0.65);
    --arcade-border: rgba(57, 255, 20, 0.75);
    --arcade-shadow: 0 0 12px rgba(57,255,20,0.55), 0 0 28px rgba(255,43,214,0.35);

    --theme-transition-duration: 0.2s;
}

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

/* Visually hidden (for accessible, non-visual headings) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* HTML base */
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Important for Vanta to not cause horizontal scroll */
    scroll-behavior: smooth;
}

/* Vanta Background Container - sits behind everything */
#vanta-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Base layer */
}

/* Ensure Vanta's canvas fills the #vanta-background container */
#vanta-background > canvas {
    width: 100% !important;
    height: 100% !important;
    display: block; /* Often good for canvas to remove potential whitespace */
}

/* Consolidated Body styles */
body {
    width: 100%;
    height: 100%; /* Ensure body is fixed to viewport height */
    font-family: 'Roboto Mono', monospace;
    color: var(--text-color-light);
    background-color: var(--bg-color-light); /* Fallback, Vanta will cover in dark mode */
    position: relative; /* For stacking context */
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
    overflow: hidden; /* Prevent body-level scrolling by default */
}

/* Sidebar (Desktop) */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 180px;
    height: 100vh;
    background-color: var(--sidebar-bg-light);
    padding: 48px 32px 0 32px;
    z-index: 2; /* Above .main-wrapper content, below theme toggle */
    transition: background-color var(--theme-transition-duration) ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Main container (wraps sidebar and content-area in HTML, but not strictly needed for this CSS if body has padding) */
.main-wrapper {
    position: relative; /* To sit above Vanta and contain flow */
    z-index: 1; /* Above Vanta */
    width: 100%;
    height: 100%; /* Ensure wrapper is fixed to viewport height */
    padding-left: 180px; /* Space for fixed sidebar on desktop */
    box-sizing: border-box;
    background-color: transparent; /* Wrapper itself is transparent */
    /* overflow-y: auto; /* Remove this if body is overflow:hidden and specific children handle scroll */
}

/* Content Area - Sits to the right of the sidebar */
.content-area {
    width: 100%; /* Fills the space provided by .main-wrapper's padding */
    height: 100%; /* Ensure content-area is fixed to viewport height */
    box-sizing: border-box;
    /* The content-box inside this will have margins and its own background */
}

/* Title styles (within sidebar) */
.title {
    font-family: "Roboto Mono", monospace;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    color: var(--title-color-light);
    white-space: nowrap;
    transition: color var(--theme-transition-duration) ease;
}

/* Links container (within sidebar) */
.links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.5rem;
    margin-bottom: 24px;
}

/* Link styles (within sidebar) */
.link {
    font-family: "Roboto Mono", monospace;
    color: var(--link-color-light);
    text-decoration: none;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: opacity 0.2s, color var(--theme-transition-duration) ease;
    line-height: 1.3;
}

.link:hover {
    opacity: 0.6;
    text-decoration: underline;
}

#pages {
    width: 100%;
    position: relative;
    height: 100%; /* Ensure #pages container is fixed to viewport height */
}

.page {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s;
    min-height: 100%; /* Fill #pages */
}

.page.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0s;
    z-index: 1; /* Active page on top of other (hidden) pages */
    height: 100%; /* Ensure active page is fixed to viewport height */
    /* overflow-y: auto; /* Scroll should be handled by .content-box or .essays-page-content */
}

.content-box {
    width: 850px;
    max-width: calc(100% - 96px);
    /* min-height: calc(100vh - 48px - 24px); Let's use fixed height from parent */
    height: calc(100% - 48px - 24px); /* Calculate height based on parent, assuming parent is 100vh/100% */
    display: flex;
    flex-direction: column;
    margin: 48px auto 24px auto;
    background: var(--content-box-bg-light);
    position: relative; /* For stacking context of its children if needed */
    transition: background-color var(--theme-transition-duration) ease;
    z-index: 1; /* To ensure it sits within .main-wrapper context properly */
    box-sizing: border-box;
}

.page-content {
    font-family: "Roboto Mono", monospace;
    font-size: 1rem;
    color: var(--text-color-light);
    line-height: 1.5;
    text-align: center;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.contact-link {
    font-family: "Roboto Mono", monospace;
    color: var(--link-color-light);
    text-decoration: underline;
    font-size: 1rem;
    transition: opacity 0.2s, color var(--theme-transition-duration) ease;
}

.contact-link:hover {
    opacity: 0.6;
}

#live-clock {
    font-family: "Roboto Mono", monospace;
    font-size: 1rem;
    color: var(--text-color-light);
    margin-top: 0.75rem;
    text-align: center;
    width: 100%;
}

/* Essay Page Specific Styles */
.essays-page-content { /* This is a .page-content div */
    flex-grow: 1;
    overflow-y: auto; /* This should allow essay list to scroll */
    text-align: left; /* Override default text-align: center from .page-content */
    padding: 15px 48px 40px 48px; /* Further Reduced top padding to 15px */
    /* scrollbar-width: thin; */ /* REPLACED */
    /* scrollbar-color: rgba(0, 0, 0, 0.2) transparent; */ /* REPLACED */
    /* &::-webkit-scrollbar { width: 8px; } */ /* REPLACED - invalid CSS outside SCSS */
    /* &::-webkit-scrollbar-track { background: transparent; } */ /* REPLACED */
    /* &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } */ /* REPLACED */
    /* &::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); } */ /* REPLACED */
    /* NEW SCROLLBAR HIDING STYLES */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Separate rule for Webkit scrollbar hiding */
.essays-page-content::-webkit-scrollbar {
    display: none;  /* Webkit browsers */
}

.essay-entry {
    margin-bottom: 2.5rem; /* Space between essay entries */
}

.essay-date {
    font-family: "Roboto Mono", monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #333; /* Specific color, consider var if needed */
    margin-bottom: 0.75rem;
}

.essay-text p {
    font-family: "Roboto Mono", monospace;
    font-size: 1rem;
    color: #555; /* Specific color, consider var if needed */
    line-height: 1.6;
    margin-bottom: 1rem; /* Space between paragraphs within an essay */
}

.essay-text p:last-child {
    margin-bottom: 0;
}

/* Styles for essay titles */
.essay-text .essay-title-main {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--title-color-light);
    margin-bottom: 0.75em;
}

.essay-text .essay-title-section {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--title-color-light);
    margin-bottom: 0.5em;
    margin-top: 1.5em; /* Added some top margin */
}

/* Custom text style for introductory remarks or highlights in essays */
.essay-text .custom-text {
    font-size: 1.15em;
    color: #555555; /* Gray for light theme */
    font-weight: bold;
    font-style: italic;
    margin-bottom: 1.5em;
}

/* Responsive image container for essays */
.responsive-image-container {
    text-align: center;
    margin: 25px 0;
}

.responsive-image-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Keep shadow for depth */
}

/* Dark mode overrides for essay titles and custom text */
body.dark-mode #essay-display-area .essay-text .essay-title-main,
body.dark-mode #essay-display-area .essay-text .essay-title-section {
    color: var(--link-color-dark); /* Green for titles in dark mode */
}

body.dark-mode #essay-display-area .essay-text .custom-text {
    color: var(--link-color-dark); /* Green for custom text in dark mode */
    font-weight: normal; /* As per original template spec for dark mode */
}

/* Ensure images in dark mode don't have an overly bright default background if transparent */
body.dark-mode .responsive-image-container img {
    background-color: transparent; /* Or a subtle dark bg if needed for specific image types */
}

/* Essay Search Styles */
.essay-search-controls {
    position: absolute;
    top: 15px;  /* Relative to .content-box or .essays-page-content if it creates a stacking context */
    right: 25px;
    z-index: 10; /* Above .page-content flow */
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-color-light); /* Needs dark mode var */
    padding: 5px;
    border-radius: 15px;
    transition: background-color var(--theme-transition-duration) ease;
}

.search-toggle-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa; /* Needs dark mode var */
    transition: color 0.2s;
}
.search-toggle-button svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5px;
}
.search-toggle-button:hover {
    color: #333; /* Needs dark mode var */
}

/* Visibility control */
#essay-search-close-toggle {
    display: none; /* Initially hidden */
}

.essay-search-controls.active #essay-search-open-toggle {
    display: none; /* Hide search icon when active */
}

.essay-search-controls.active #essay-search-close-toggle {
    display: flex; /* Show close icon when active */
}

/* Adjust flex order when active */
.essay-search-controls.active #essay-search-input {
    order: -1;
}
.essay-search-controls.active .search-nav-button {
    order: 0;
}
.essay-search-controls.active .search-toggle-button {
    order: 1; /* Ensure toggle is last */
}

#essay-search-input {
    border: 1px solid #eee; /* Needs dark mode var */
    border-radius: 15px;
    padding: 6px 12px;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s, background-color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease;
    order: -1;
    background-color: var(--bg-color-light); /* Needs dark mode var */
}

.essay-search-controls.active #essay-search-input {
    width: 220px;
    opacity: 1;
    visibility: visible;
    border-color: #ccc; /* Needs dark mode var */
}

/* Navigation Buttons */
.search-nav-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: #ccc; /* Needs dark mode var */
    transition: color 0.2s, opacity 0.3s, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.essay-search-controls.has-results .search-nav-button {
    opacity: 1;
    visibility: visible;
    width: auto;
    color: #aaa; /* Needs dark mode var */
}

.search-nav-button:hover:not(:disabled) {
    color: #333; /* Needs dark mode var */
}

.search-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Highlighting Style */
.highlight { /* This applies to text within essays */
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(85, 85, 85, 0.5); /* Needs dark mode var if 555 is text color */
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    background-color: transparent;
    color: inherit; /* Good, inherits themed text color */
}

/* Style for hidden essay entries */
.essay-entry.hidden {
    display: none;
}

/* Mobile Styles */
@media (max-width: 700px) {
    .main-wrapper {
        padding-left: 0; /* Remove sidebar padding */
        /* overflow-y: visible; /* If body is overflow:hidden, this won't make body scroll */
        height: 100%; /* Ensure it still respects viewport height */
        display: flex; /* New: manage sidebar and content-area flow */
        flex-direction: column; /* New: stack them vertically */
    }
    .sidebar {
        width: 100%;
        height: auto;
        position: relative; /* No longer fixed, part of page flow */
        padding: 24px 24px 0 24px;
        z-index: auto;
        flex-shrink: 0; /* New: Prevent sidebar from shrinking */
    }
    .content-area {
        /* min-height: unset; This was on .content-area before, but it's actually on .content-box */
        flex-grow: 1; /* New: Take remaining space */
        min-height: 0; /* New: Allows content-area to shrink if needed and grow, robust for flex children. */
        /* Its children (#pages > .page.active > .content-box) will be height: 100% of this. */
        /* overflow: hidden; /* Optional: To clip any misbehaving children of content-area itself.
                                 The actual scrolling should be in .essays-page-content.
                                 Let's keep it clean for now and add if necessary. */
    }
    .content-box {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 24px;
        /* min-height: unset; */ /* REMOVED this line */
        height: 100%; /* CHANGE: from auto */
        box-sizing: border-box; /* Ensure this is present (it's in global *, so it's fine) */
        /* display: flex and flex-direction: column are inherited from desktop styles and are good */
    }
    .page.active {
        padding: 0; /* Remove desktop specific padding */
        /* height: 100% is inherited from desktop and is good */
        /* overflow-y: auto; /* Not needed here if .essays-page-content handles its own scroll */
    }
    .page-content {
        text-align: left; 
        padding: 0; /* Let parent .content-box provide outer padding. */
        font-size: 1rem; /* Standardize base font size for page content on mobile */
    }
    .contact-link {
        text-align: left;
    }
    .essays-page-content {
        /* padding: 24px 0; /* Old mobile rule */
        padding: 0; /* Align with general .page-content for mobile; parent .content-box has 24px padding. */
        text-align: left; /* Already in existing mobile .essays-page-content specific rule */
        /* flex-grow: 1; is inherited from .page-content and is good */
        /* overflow-y: auto; IS INHERITED FROM DESKTOP AND IS KEY */
    }
    .essay-date {
        text-align: left;
    }
    .essay-text p {
        text-align: left;
    }
    .essay-search-controls {
        left: 24px;
        right: 24px;
        width: auto; /* Allow it to fit content */
        top: 10px; /* Adjust based on new layout */
    }
    .search-nav-button {
        margin: 0 8px;
    }
    .essay-search-controls.active #essay-search-input {
        width: calc(100% - 100px); /* Adjust based on button sizes */
    }
    #page-contact .page-content,
    #page-contact .contact-link {
        text-align: left;
    }
    #live-clock {
        font-size: 1rem;
        text-align: center; 
    }

    #page-forbes .page-content,
    #page-contact .page-content {
        text-align: center;
        align-self: stretch; 
        width: 100%; 
        margin: 0; 
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1; 
        font-size: 1rem;
    }

    #page-contact .contact-link { /* Explicitly set contact link font size for mobile */
        font-size: 1rem;
    }

    /* Essays list font size for mobile */
    ul.essay-headlines-list a {
        font-size: 1rem !important; /* Override other media query if necessary */
    }
     ul.essay-headlines-list .essay-list-date {
        font-size: 0.8em; /* Keep date smaller relative to the new 1rem title */
    }

    #essay-content-container { /* Mobile adjustments for essay view */
        width: 100%;
        max-width: 100%;
        height: 100%; 
        margin: 0;
        padding: 20px; /* Mobile padding for essay box */
    }
    #essay-display-area { padding-left: 0; }

    /* Homepage Bullet Points Mobile Styles - container styling */
    .homepage-bullet-points {
        padding: 0; /* Match .essays-page-content mobile padding */
        /* width: 100%; */ /* Inherited from desktop */
        /* box-sizing: border-box; */ /* Inherited from desktop */
    }

    /* REMOVE THE FOLLOWING MOBILE-SPECIFIC RULES as .essay-headlines-list styles should take over */
    /*
    .homepage-bullet-points ul {
        width: 100%; 
    }

    .homepage-bullet-points li {
        margin-bottom: 10px;
        padding-bottom: 6px; 
        line-height: 1.4; 
        font-size: 1rem; 
        width: 100%;
        box-sizing: border-box;
    }

    .homepage-bullet-points li a {
        display: block; 
        margin-left: 1.2em; 
        font-size: 1rem !important; 
        font-weight: 400; 
        color: var(--link-color-light); 
        text-decoration: none; 
    }
    */

    /* body.dark-mode .page-content { color: var(--text-color-dark); } */

    #page-contact .page-content,
    #page-contact .contact-link {
        text-align: left;
    }

    body.dark-mode .page-content {
        color: var(--text-color-dark);
    }

    /* Dark mode for homepage bullet points - Match essay list headlines */
    body.dark-mode .homepage-bullet-points li a {
        color: var(--link-color-dark);
    }

    body.dark-mode .homepage-bullet-points li::before {
        color: var(--text-color-dark); /* EXACT MATCH: Essay list bullet color in dark mode */
    }

    body.dark-mode .contact-link {
        color: var(--link-color-dark);
    }
}

/* Essay Headline List (index.html) */

ul.essay-headlines-list {
    list-style-type: none; 
    padding-left: 0; 
    margin-top: 0;
    margin-bottom: 0;
}

ul.essay-headlines-list li {
    padding-left: 1.2em; 
    position: relative; 
    margin-bottom: 0.5rem; 
}

ul.essay-headlines-list li::before {
    content: "•"; 
    color: var(--text-color-light); 
    position: absolute;
    left: 0;
    top: 0; 
    font-size: 1em; 
    line-height: inherit; 
}

ul.essay-headlines-list li:last-child {
    border-bottom: none;    
    margin-bottom: 0;
}

ul.essay-headlines-list .essay-list-date {
    font-size: 0.8em;       
    color: var(--essay-date-color-light);
    margin-left: 8px;    
    transition: color var(--theme-transition-duration) ease;
}

ul.essay-headlines-list a {
    font-size: 1.05em;       
    color: var(--link-color-light); 
    text-decoration: none;  
    font-weight: 400;       
    line-height: 1.4;
    transition: color var(--theme-transition-duration) ease;
}

ul.essay-headlines-list a:hover {
    color: #0056b3; /* Needs dark var */
    text-decoration: underline; 
}

@media (max-width: 768px) { /* This is a different breakpoint from the main mobile one */
    ul.essay-headlines-list li {
        margin-bottom: 10px; 
        padding-bottom: 6px; 
    }

    ul.essay-headlines-list .essay-list-date {
        font-size: 0.75em; /* This will be overridden by 700px query if screen is <= 700px */
        margin-left: 6px; 
    }

    ul.essay-headlines-list a {
        font-size: 0.9em; /* This will be overridden by 700px query if screen is <= 700px */
    }
    /* These paddings might conflict with general mobile .essays-page-content */
    /* .page#page-essays .essays-page-content { 
        padding-left: 0; 
        padding-right: 0; 
    } */
}

/* Theme Toggle Button */
#theme-toggle-button {
    position: fixed;
    bottom: 30px; 
    left: 32px;  /* Aligns with sidebar's left padding for desktop */
    width: 40px;   
    height: 40px;  
    padding: 8px;  
    background-color: var(--sidebar-bg-light); /* Match sidebar, or make it distinct */
    border: 1px solid var(--border-color-light);
    color: var(--link-color-light); 
    cursor: pointer;
    border-radius: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 101; /* Highest z-index */
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease;
}

#theme-toggle-button:hover {
    background-color: var(--button-hover-bg-light);
    /* color var for icon hover can be added if needed */
}

#theme-toggle-button .theme-icon {
    width: 20px;  
    height: 20px;
}

@media (max-width: 700px) { /* Mobile styles for theme toggle button */
    #theme-toggle-button {
        left: auto; 
        right: 15px;  
        bottom: 20px; 
    }
}

/* DARK MODE STYLES */
body.dark-mode {
    background-color: transparent !important; /* Body itself is transparent, Vanta shows through */
    color: var(--text-color-dark);
}

body.dark-mode .main-wrapper { background: transparent; }

body.dark-mode .sidebar {
    background-color: transparent !important; /* Make sidebar transparent to show Vanta */
}

body.dark-mode .title {
    color: var(--title-color-dark);
}

body.dark-mode .link {
    color: var(--link-color-dark);
}

body.dark-mode .content-box {
    background-color: transparent !important; /* Make content-box transparent to show Vanta */
}

body.dark-mode .page-content {
    color: var(--text-color-dark);
}

body.dark-mode .contact-link {
    color: var(--link-color-dark);
}

body.dark-mode #live-clock {
    color: var(--text-color-dark);
}

/* Dark mode for essay search elements */
body.dark-mode .essay-search-controls {
    background-color: var(--button-hover-bg-dark); /* A slightly different dark shade */
}
body.dark-mode .search-toggle-button {
    color: var(--essay-date-color-dark); /* Using a muted color */
}
body.dark-mode .search-toggle-button:hover {
    color: var(--link-color-dark); /* Brighter on hover */
}
body.dark-mode #essay-search-input {
    background-color: var(--bg-color-dark);
    border-color: var(--border-color-dark);
    color: var(--text-color-dark);
}
body.dark-mode #essay-search-input:focus { /* Added focus style */
    border-color: var(--link-color-dark);
}
body.dark-mode .search-nav-button {
    color: var(--essay-date-color-dark);
}
body.dark-mode .search-nav-button:hover:not(:disabled) {
    color: var(--link-color-dark);
}
body.dark-mode .search-nav-button:disabled {
    color: var(--border-color-dark); /* Very muted */
}

/* Dark mode for essay list bullets and dates */
body.dark-mode ul.essay-headlines-list li::before {
    color: var(--text-color-dark); 
}

body.dark-mode ul.essay-headlines-list .essay-list-date {
    color: var(--essay-date-color-dark);
}

body.dark-mode ul.essay-headlines-list a {
    color: var(--link-color-dark);
}

body.dark-mode ul.essay-headlines-list a:hover {
    color: var(--link-color-dark); 
    filter: brightness(1.2); 
}

/* Dark mode for theme toggle button */
body.dark-mode #theme-toggle-button {
    background-color: var(--sidebar-bg-dark); /* Match dark sidebar or a specific dark button color */
    border-color: var(--border-color-dark);
    color: var(--link-color-dark); /* Icon color */
}

body.dark-mode #theme-toggle-button:hover {
    background-color: var(--button-hover-bg-dark);
    color: var(--button-hover-text-dark);
}

body.dark-mode #theme-toggle-button .theme-icon {
    /* fill: var(--link-color-dark); /* If SVG uses fill */
    stroke: var(--link-color-dark); /* If SVG uses stroke */
}

/* Arcade Toggle Button (fixed, sits above the theme toggle) */
#arcade-toggle-button {
    position: fixed;
    bottom: 80px; /* above theme button which is 30px from bottom */
    left: 32px;  /* default aligns with desktop theme button on index */
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: var(--sidebar-bg-light);
    border: 1px solid var(--border-color-light);
    color: var(--link-color-light);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 102; /* above theme button */
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, transform 0.2s ease;
}

#arcade-toggle-button:hover {
    background-color: var(--button-hover-bg-light);
    transform: translateY(-1px);
}

/* Mobile adjustment for arcade button */
@media (max-width: 700px) {
    #arcade-toggle-button {
        bottom: 70px; /* 50px above theme button's 20px */
        left: auto;
        right: 15px; /* default mobile position mirrors theme button */
    }
    /* Essays view: ensure back button keeps dark-mode styling on mobile */
    body.dark-mode .go-back-button {
        background-color: var(--sidebar-bg-dark) !important;
        color: var(--accent-color-dark, #70ab8a) !important;
        border: 1px solid var(--accent-color-dark, #70ab8a) !important;
    }
}

/* Hide arcade toggle entirely on essays views */
body.has-essays-view #arcade-toggle-button { display: none !important; }

/* Dark mode styling for arcade button to match theme button */
body.dark-mode #arcade-toggle-button {
    background-color: var(--sidebar-bg-dark);
    border-color: var(--border-color-dark);
    color: var(--link-color-dark);
}
body.dark-mode #arcade-toggle-button:hover {
    background-color: var(--button-hover-bg-dark);
}

/* Arcade MODE global visuals */
body.arcade-mode {
    background-color: var(--arcade-bg-deep) !important;
    color: var(--arcade-neon-primary);
    font-family: 'VT323', 'Roboto Mono', monospace; /* retro terminal-like */
}

/* Keep 'Om Kharche' title a fixed size in Arcade mode across PC & Mobile */
body.arcade-mode .title {
    font-size: 1.5rem !important; /* fixed, no viewport-based scaling */
}

/* Swap key typographic accents to pixel font */
body.arcade-mode .title,
body.arcade-mode h1,
body.arcade-mode h2,
body.arcade-mode h3,
body.arcade-mode .essay-date {
    font-family: 'Press Start 2P', cursive;
    letter-spacing: 0.02em;
}

/* Neon link styling */
body.arcade-mode a,
body.arcade-mode .link,
body.arcade-mode .contact-link {
    color: var(--arcade-neon-accent);
    text-shadow: 0 0 6px rgba(0,229,255,0.8), 0 0 16px rgba(0,229,255,0.45);
}
body.arcade-mode a:hover,
body.arcade-mode .link:hover,
body.arcade-mode .contact-link:hover {
    filter: brightness(1.2);
    text-decoration: underline;
}

/* Panels and boxes neon chrome */
body.arcade-mode .content-box,
body.arcade-mode .essay-container {
    background: var(--arcade-panel) !important;
    border: none; /* neon border rendered via ::before inset */
    box-shadow: none;
    backdrop-filter: blur(4px) saturate(130%);
}

/* Inset neon border leaving a little space on all sides */
body.arcade-mode .content-box::before,
body.arcade-mode .essay-container::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 2px solid var(--arcade-border);
    box-shadow: var(--arcade-shadow);
    pointer-events: none;
}

@media (max-width: 700px) {
    body.arcade-mode .content-box::before,
    body.arcade-mode .essay-container::before {
        top: 10px; right: 10px; bottom: 10px; left: 10px;
    }
}

/* In Arcade on non-essays, optional border removal (Pac-Man removed) */
/* body.arcade-mode:not(.has-essays-view) .content-box { border: 0 !important; box-shadow: none !important; } */

/* Sidebar transparency; neon title */
body.arcade-mode .sidebar {
    background: transparent !important;
}
body.arcade-mode .title {
    color: var(--arcade-neon-secondary);
    text-shadow: 0 0 10px rgba(255,43,214,0.8), 0 0 30px rgba(255,43,214,0.5);
}

/* Essay list bullets & dates neon */
body.arcade-mode ul.essay-headlines-list li::before {
    color: var(--arcade-neon-primary);
    text-shadow: 0 0 8px rgba(57,255,20,0.8);
}
body.arcade-mode ul.essay-headlines-list .essay-list-date {
    color: var(--arcade-neon-secondary);
}

/* Search controls neon */
body.arcade-mode .essay-search-controls {
    background-color: rgba(10,11,16,0.55);
    border: 1px solid var(--arcade-border);
    box-shadow: var(--arcade-shadow);
}
body.arcade-mode #essay-search-input {
    background-color: rgba(10,11,16,0.85);
    border-color: var(--arcade-neon-accent);
    color: var(--arcade-neon-accent);
}
body.arcade-mode .search-toggle-button,
body.arcade-mode .search-nav-button {
    color: var(--arcade-neon-primary);
}

/* Theme + Arcade buttons in arcade mode */
body.arcade-mode #theme-toggle-button,
body.arcade-mode #arcade-toggle-button {
    background-color: rgba(10,11,16,0.65);
    border-color: var(--arcade-neon-accent);
    color: var(--arcade-neon-accent);
    box-shadow: var(--arcade-shadow);
}
body.arcade-mode #theme-toggle-button:hover,
body.arcade-mode #arcade-toggle-button:hover {
    filter: brightness(1.1);
}

/* Hide theme toggle entirely in Arcade mode; reposition arcade button */
body.arcade-mode #theme-toggle-button { display: none !important; }
body.arcade-mode #arcade-toggle-button { bottom: 30px; }

/* Neon highlight */
body.arcade-mode .highlight {
    text-decoration-color: var(--arcade-neon-secondary);
}

/* Arcade Essays View: make neon border wrap full content with proper padding */
/* Allow page-level scrolling on essays view in arcade mode so the container can grow with content */
body.arcade-mode.has-essays-view {
    overflow-y: auto !important;
}

/* Let the essay container size to its content (with a floor), and disable internal scrolling */
body.arcade-mode.has-essays-view .essay-container {
    width: 850px;
    max-width: calc(100% - 48px);
    margin: 24px auto;
    height: auto !important;
    min-height: calc(100vh - 48px);
    max-height: none !important;
    overflow: visible !important;
    padding: 24px; /* ensures smooth, even padding inside neon border */
    position: relative; /* maintain for ::before border */
}

/* Ensure essay content isn't constrained; let it define container height */
body.arcade-mode.has-essays-view #essay-display-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0; /* rely on container padding for bottom spacing */
}

@media (max-width: 700px) {
    body.arcade-mode.has-essays-view .essay-container {
        width: 100%;
        max-width: 100%;
        margin: 0; /* edge-to-edge on mobile, neon inset provides breathing room */
        padding: 20px; /* matches mobile comfort spacing */
        min-height: 100vh; /* at least full screen */
    }
}

/* Animated arcade background + scanlines */
body.arcade-mode #vanta-background {
    background:
      radial-gradient(1200px 600px at 20% 120%, rgba(0,229,255,0.08), transparent 60%),
      radial-gradient(1000px 500px at 80% -20%, rgba(255,43,214,0.08), transparent 60%),
      radial-gradient(900px 900px at 50% 50%, rgba(57,255,20,0.06), transparent 60%),
      linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(10,11,16,0.9) 100%);
    animation: arcadeGradientDrift 22s linear infinite;
}

@keyframes arcadeGradientDrift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    50% { background-position: 30px 40px, -40px -60px, 20px -20px, 0 0; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0; }
}

/* Global scanlines overlay (non-blocking) */
body.arcade-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 3px,
      transparent 5px
    );
    opacity: 0.25;
    z-index: 5;
    animation: scanlineFlicker 3s ease-in-out infinite;
}

@keyframes scanlineFlicker {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.3; }
}

/* Arcade Intro Overlay */
#arcade-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(800px 400px at 50% 50%, rgba(0,229,255,0.1), rgba(10,11,16,0.98) 60%);
    overflow: hidden;
}
#arcade-intro-overlay .intro-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 3px,
        transparent 5px
    );
    mix-blend-mode: overlay;
    animation: introScan 1.6s linear infinite;
}
@keyframes introScan { 0%{transform: translateY(-10px);} 100%{transform: translateY(10px);} }

#arcade-intro-overlay .intro-content {
    text-align: center;
    color: var(--arcade-neon-primary);
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 0 12px rgba(57,255,20,0.85), 0 0 28px rgba(255,43,214,0.55);
    animation: introPop 0.5s ease-out both;
}
@keyframes introPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#arcade-intro-overlay .intro-title {
    font-size: clamp(1.1rem, 3.5vw, 2rem);
    margin-bottom: 14px;
}
#arcade-intro-overlay .intro-sub {
    font-size: clamp(0.7rem, 2.5vw, 1.1rem);
    color: var(--arcade-neon-accent);
    margin-bottom: 18px;
}
#arcade-intro-overlay .intro-progress {
    width: min(420px, 70vw);
    height: 8px;
    border: 1px solid var(--arcade-neon-accent);
    box-shadow: var(--arcade-shadow);
    background: rgba(10,11,16,0.6);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 999px;
}
#arcade-intro-overlay .intro-progress .bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--arcade-neon-primary), var(--arcade-neon-secondary), var(--arcade-neon-accent));
    animation: introLoad 1.8s ease-in-out forwards;
}
@keyframes introLoad { 0% { width: 0%; } 100% { width: 100%; } }

/* Arcade Exit Overlay (faster) */
#arcade-exit-overlay {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(700px 350px at 50% 50%, rgba(255,43,214,0.12), rgba(10,11,16,0.98) 60%);
    overflow: hidden;
}
#arcade-exit-overlay .intro-content { text-align: center; color: var(--arcade-neon-secondary); font-family: 'Press Start 2P', cursive; text-shadow: 0 0 12px rgba(255,43,214,0.85), 0 0 28px rgba(0,229,255,0.55); animation: introPop 0.35s ease-out both; }
#arcade-exit-overlay .intro-title { font-size: clamp(1rem, 3vw, 1.6rem); margin-bottom: 10px; }
#arcade-exit-overlay .intro-sub { font-size: clamp(0.65rem, 2vw, 1rem); color: var(--arcade-neon-accent); margin-bottom: 14px; }
#arcade-exit-overlay .intro-progress { width: min(380px, 65vw); height: 7px; border: 1px solid var(--arcade-neon-secondary); box-shadow: var(--arcade-shadow); background: rgba(10,11,16,0.6); margin: 0 auto; overflow: hidden; border-radius: 999px; }
#arcade-exit-overlay .intro-progress .bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--arcade-neon-secondary), var(--arcade-neon-primary)); animation: introExitLoad 1.2s ease-in-out forwards; }
@keyframes introExitLoad { 0% { width: 0%; } 100% { width: 100%; } }

/* Pac-Man visuals removed per request */

/* Pac-Man path animation using container size vars */
@keyframes pac-run {
    0%   { transform: translate(var(--m), var(--m)) rotate(0deg); }
    25%  { transform: translate(calc(var(--m) + var(--w)), var(--m)) rotate(90deg); }
    50%  { transform: translate(calc(var(--m) + var(--w)), calc(var(--m) + var(--h))) rotate(180deg); }
    75%  { transform: translate(var(--m), calc(var(--m) + var(--h))) rotate(270deg); }
    100% { transform: translate(var(--m), var(--m)) rotate(360deg); }
}


/* Specific Dark Mode Highlighting */
body.dark-mode .highlight {
    text-decoration-color: var(--link-color-dark); /* Brighter underline for dark mode */
    /* Optionally, slightly change background or text color for highlighted part if needed */
}

/* Override hover effect for homepage bullet points (which use .essay-headlines-list) */
.homepage-bullet-points ul.essay-headlines-list a:hover {
    text-decoration: none; /* Remove underline */
}

body.dark-mode .homepage-bullet-points ul.essay-headlines-list a:hover {
    text-decoration: none; /* Remove underline in dark mode too */
    /* If the brightness filter is also from the main essay list hover, and you want to remove it: */
    /* filter: none; */ 
}

/* Fallback for the .container class if it's still used from old HTML */
.container { max-width: 1200px; margin: 0 auto; }

/* Remove duplicate/problematic rules explicitly if they existed from previous edits */
/* The edit tool should replace the whole file, making manual cleanup of old rules less necessary, */
/* but this comment serves as a reminder of what was fixed. */
/* Removed old #vanta-background rule with z-index:100 and background-color. */
/* Removed old body rule that didn't have full width/height and padding-left. */
/* Consolidated body styles into one primary rule. */

/* Styles for individual essay view (essays.html) */
/* This container is analogous to .content-box and holds the essay display area */
.essay-container { /* MODIFIED: from #essay-content-container to .essay-container */
    width: 850px; 
    max-width: calc(100% - 48px); /* Desktop: allows for 24px margin on each side */
    /* height: calc(100% - 48px); */ /* Let's try viewport height minus margins for more robustness */
    height: calc(100vh - 48px); /* Desktop: viewport height minus 24px margin top & bottom */
    margin: 24px auto; /* Centering and top/bottom margins */
    display: flex; 
    flex-direction: column;
    background: var(--content-box-bg-light); 
    padding: 24px; 
    box-sizing: border-box;
    position: relative;
    z-index: 1; 
    transition: background-color var(--theme-transition-duration) ease;
    overflow: hidden; /* ADDED: Ensure this container does not scroll */
}

#essay-display-area {
    height: 100%; 
    overflow-y: auto;
    color: var(--text-color-light);
    padding-bottom: 100px; /* Added for extra scroll room */
    /* Scrollbar hiding */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#essay-display-area::-webkit-scrollbar {
    display: none;  /* Webkit browsers */
}

#page-forbes .page-content,
#page-contact .page-content {
    text-align: center; /* MODIFIED: Ensure text content of children is centered */
    align-self: stretch; 
    width: 100%; 
    margin: 0; 
    /* padding-top: 30px; */ /* REMOVED custom padding from last attempt */
    padding-top: 15px; /* REVERTED/SET to 15px for potentially better alignment */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */ /* This was removed, so not full vertical center */
    justify-content: flex-start; /* ADDED: Align items to the start (top) of the container */
    align-items: center;   /* Horizontal centering for the flex items */
    flex-grow: 1; 
    font-size: 1rem; /* Ensure this container also respects/sets the 1rem base */
}

#page-contact .contact-link { /* Explicitly set contact link font size for mobile */
    font-size: 1rem;
}

@media (max-width: 700px) {
    /* ... other rules from previous diff for .main-wrapper, .sidebar, .content-area, .content-box ... */
    
    .essay-container { /* MODIFIED: from #essay-content-container to .essay-container */
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        padding: 20px; /* Mobile padding for essay box */
        background: var(--content-box-bg-light); /* ensure not transparent on mobile to avoid dark overlay look */
        overflow: hidden; 
    }
    #essay-display-area { padding-left: 0; background: transparent; }
}

body.dark-mode .essay-container { background-color: transparent !important; }

body.dark-mode #essay-display-area { color: var(--text-color-dark); }

/* Resetting and simplifying homepage bullet point styles */

/* Remove all previous .homepage-bullet-points ul, li, a, ::before rules. */
/* The following are the ONLY rules that should exist for .homepage-bullet-points */

/* Homepage Bullet Points CONTAINER Styles - To match .essays-page-content context */
.homepage-bullet-points {
    text-align: left;
    padding: 15px 48px; /* Desktop padding */
    font-family: "Roboto Mono", monospace; 
    line-height: 1.4; /* Base line-height */
    width: 100%; 
    box-sizing: border-box; 
}

@media (max-width: 700px) {
    .homepage-bullet-points {
        padding: 0; /* Mobile padding - relies on .content-box for 24px side padding */
    }
}

/* ALL OTHER STYLES for the list itself (ul.essay-headlines-list, li, a, li::before) */
/* will now come from the existing .essay-headlines-list rules in this file. */

/* Ensure to manually delete any other .homepage-bullet-points child rules found elsewhere in the file. */

/* ... rest of styles.css file from .highlight or other known good section onwards ... */ 
/* For example, starting from: */

/* Highlighting Style */
.highlight { 
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(85, 85, 85, 0.5); 
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    background-color: transparent;
    color: inherit; 
}

/* ... continue with the rest of the original file ... */