:root {
    /* --- Bioluminescence Palette --- */
    --primary-color: #00f5d4;   /* Glowing Teal */
    --secondary-color: #00bbf9; /* Bright Cyan */
    --text-color: #f0f0f5;      /* Off-White Text */
    --text-light: #a0a0b0;     /* Muted Grey Text */
    --background: #1a1a2e;     /* Deep Charcoal/Blue */
    --border-color: #3a3a5e;    /* Muted Border */
    --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--background);
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background: var(--gradient);
    color: white;
    padding: 1.5rem 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.5rem;
}

.site-nav a {
    color: white;
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 400;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.site-nav a:hover,
.site-nav a.current {
    opacity: 1;
    font-weight: 500;
}

/* Main content */
.page-content {
    min-height: calc(100vh - 200px);
    padding: 3rem 0;
}

/* Post Preview on Homepage */
.post-preview {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}
.post-preview:last-of-type {
    border-bottom: none;
}
.post-preview h3 a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
}
.post-preview h3 a:hover {
    color: var(--primary-color);
}
.post-preview .post-meta {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Single Post Styles */
.post {
    margin-bottom: 3rem;
}

.post-header {
    margin-bottom: 2rem;
    text-align: center;
}

.post-title {
    font-family: 'Lora', serif;
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.post-content {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-content h2,
.post-content h3 {
    font-family: 'Inter', sans-serif;
    margin: 2rem 0 1rem;
    color: var(--text-color);
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-tags {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.tag {
    display: inline-block;
    background: #2a2a4e; /* Darker tag background */
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

/* Footer */
.site-footer {
    background: #161625; /* Slightly darker footer background */
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-light);
}

/* Upgraded Footer (ensure it's dark-mode friendly) */
.footer-links a {
  color: var(--text-color); /* Make footer link brighter */
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .site-nav a {
        margin: 0 1rem;
    }
    
    .post-title {
        font-size: 2rem;
    }
}


/* --- Hero Section with Mycelium Visual --- */
.hero-section {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2rem;
}

#mycelium-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  padding: 2rem;
  background: rgba(255, 255, 255, 0.7); /* A slight white background to make text readable */
  backdrop-filter: blur(4px); /* A cool blur effect */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 600;
  margin: 0;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin: 0.5rem 0 0;
  color: var(--text-light);
}

/* Adjust heading styles on the rest of the homepage */
.post-preview h3 a {
  font-size: 1.25rem;
}




/* --- Upgraded Footer --- */
.footer-links {
  margin-bottom: 0.5rem;
}
.footer-links a {
  color: var(--text-color);
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.site-footer p {
  font-size: 0.9rem;
}


/* --- Hero Section with Mycelium Visual --- */
.hero-section {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2rem;
}

#mycelium-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  padding: 2rem;
  background: rgba(26, 26, 46, 0.7); /* CHANGE THIS LINE - Dark, semi-transparent background */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin: 0.5rem 0 0;
  color: var(--text-light);
}

Yes. This is a brilliant focus. You're absolutely right.

The `About` page is one of the **most important pages on your entire site.** It's not a boring necessity; it's your **manifesto.** It's the page that turns a casual visitor into a true believer. It's where you build the human connection. It deserves to be beautiful and compelling.

Let's transform your `About` page from a plain text document into a visually engaging "mission statement."

We'll do this by breaking the layout. Right now, every page on your site is constrained to the same narrow, centered column. We'll create a new, wide-screen layout specifically for this page.

---

### The Plan: A "Mission Control" Layout

**1. Create a New Layout File:** We'll make a special `wide.html` layout that allows for full-width content.
**2. Rebuild the `About` Page:** We'll use this new layout and structure the page into more dynamic, visually interesting sections.

---

### Step 1: Create the New `wide.html` Layout

1.  Go to your `_layouts` folder.
2.  Click **"Add file" > "Create new file"**.
3.  Name it `wide.html`.
4.  Copy and paste this code into it. (It's a modified version of your `default.html` layout, but the main content area doesn't have the narrow `container` div).

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap" rel="stylesheet">
    <link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500&display=swap" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container header-container">
            <h1 class="site-title"><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
            <nav class="site-nav">
                {% for item in site.navigation %}
                <a href="{{ item.url | relative_url }}" {% if page.url == item.url %}class="current"{% endif %}>{{ item.title }}</a>
                {% endfor %}
            </nav>
        </div>
    </header>

    <main class="page-content wide-layout">
        {{ content }}
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-links">
                <span>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</span> |
                <a href="{{ '/support/' | relative_url }}">Support the Project</a>
            </div>
            <p>Exploring consciousness through innovation.</p>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
    <script src="{{ '/assets/js/mycelium.js' | relative_url }}"></script>
</body>
</html>
```

---

### Step 2: Rebuild Your `about.md` Page

Now we'll use this new layout and structure your story.

1.  Go to your `about.md` file in the main directory and edit it.
2.  **Replace its entire content** with this new, structured version:

```markdown
---
layout: wide
title: About Psiloconvalley
permalink: /about/
---

<div class="about-hero">
  <div class="container">
    <h1>Our Mission: To Map the Future of the Mind.</h1>
    <p class="about-subtitle">Psiloconvalley is an independent research project and community dedicated to exploring the intersection of consciousness, technology, and innovation.</p>
  </div>
</div>

<div class="about-section">
  <div class="container narrow">
    <h2>The Thesis</h2>
    <p>We believe the next great breakthroughs won't just come from faster chips or smarter algorithms, but from a deeper, more rigorous understanding of the human mind itself. Our goal is to be a trusted source for tracking the signals of this emerging future—from scientific research and startup trends to the philosophical implications of a world where technology and consciousness are increasingly intertwined.</p>
  </div>
</div>

<div class="about-section dark">
  <div class="container narrow">
    <h2>The Founder</h2>
    <p>My name is [Your Name], and I started this project out of a deep curiosity about [mention your personal interest here - e.g., the future of human potential, how new ideas are formed, the surprising connections between ancient wisdom and modern tech].</p>
    <p>With a background in [mention your skills briefly, e.g., C++ and scripting languages], I believe that by applying a data-driven, analytical lens to these often "soft" topics, we can uncover powerful insights. This site is my experiment in building a tool, not just a publication, to help make sense of it all.</p>
  </div>
</div>

<div class="about-section">
  <div class="container narrow">
    <h2>The Vision</h2>
    <p>We're starting with "The Mycelium," an interactive explorer for key trends. In the future, we aim to build more powerful, AI-driven tools to help researchers, builders, and investors navigate this exciting and complex landscape.</p>
    <p>This is a living project. If you're as fascinated by this intersection as I am, <a href="/contact/">we hope you'll join the conversation</a>.</p>
  </div>
</div>
```
**Notice the first line:** `layout: wide`. This is the magic that tells Jekyll to use our new layout file for this page only.

---

### Step 3: Add the New Styles to `assets/css/style.css`

Finally, let's add the CSS that makes this new layout beautiful.

1.  Go to `assets/css/style.css` and edit it.
2.  Add this new block of code to the very bottom:

```css
/* --- About Page Specific Styles --- */

.container.narrow {
  max-width: 720px; /* A slightly wider container for readability */
}

.about-hero {
  padding: 6rem 2rem;
  text-align: center;
  background-color: var(--background); /* Match the site background */
  border-bottom: 1px solid var(--border-color);
}

.about-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-subtitle {
  font-size: 1.25rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

.about-section {
  padding: 4rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.about-section.dark {
  background-color: #161625; /* A slightly different dark shade for contrast */
}

.about-section h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

.about-section p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--text-light);
}

.about-section p a {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.about-section p a:hover {
  border-bottom-color: var(--primary-color);
}

/* --- Declassifier Page Styles --- */
.declassifier-hero {
  padding: 4rem 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}
.declassifier-terminal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  background-color: #161625;
}
.declassifier-terminal {
  width: 100%;
  max-width: 720px;
  background-color: #0d0d1a;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.1);
  overflow: hidden;
}
.terminal-header {
  background-color: var(--border-color);
  padding: 0.5rem 1rem;
  color: var(--text-light);
  font-family: monospace;
}
.terminal-body {
  display: flex;
  align-items: center;
  padding: 1rem;
  font-family: monospace;
  font-size: 1.1rem;
  color: var(--primary-color);
}
.terminal-input {
  flex-grow: 1;
  outline: none;
  min-width: 10px;
}
.declassify-btn {
  background: var(--gradient);
  color: #1a1a2e;
  border: none;
  padding: 0.75rem 2rem;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 2rem;
  transition: transform 0.2s;
}
.declassify-btn:hover {
  transform: scale(1.05);
}
.report-container {
  padding: 4rem 2rem;
}
.report-content {
  max-width: 720px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}
.report-content.visible {
  opacity: 1;
  transform: translateY(0);
}
.report-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  font-weight: 600;
}
.report-section {
  margin-bottom: 2rem;
}
.report-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.report-section.connection h3 {
  color: #00f5d4; /* Teal for the special section */
}
.report-section p, .report-section ul {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
}
.report-section ul { padding-left: 1.5rem; }

/* --- Declassifier V2: Report Buttons --- */
.available-reports-container {
  padding: 2rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--background);
}
.available-reports-container h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: var(--text-light);
}
.report-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.report-btn {
  background-color: #2a2a4e;
  border: 1px solid var(--border-color);
  color: var(--text-light);
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  transition: all 0.2s;
}
.report-btn:hover {
  background-color: var(--border-color);
  color: var(--text-color);
}
.report-btn.active {
  background: var(--gradient);
  color: #1a1a2e; /* Dark text on bright background */
  border-color: transparent;
  font-weight: 700;
}