From 9e1ca62515664ff756dfff750d75994ed39dabf9 Mon Sep 17 00:00:00 2001
From: Michael DiLeo <michael_dileo@proton.me>
Date: Tue, 9 Jun 2026 15:07:50 +0900
Subject: [PATCH] fix styling of headers and nav bar

---
 minify-build.js                             |  18 +-
 public/about.html                           |  14 +-
 public/getting-started-structured-data.json |  54 ++++++
 public/getting-started.html                 |  74 ++++-----
 public/index.html                           |  40 ++---
 public/site-styles/style.css                | 174 ++++++++++----------
 public/structured-data.json                 |  38 -----
 7 files changed, 212 insertions(+), 200 deletions(-)
 create mode 100644 public/getting-started-structured-data.json

diff --git a/minify-build.js b/minify-build.js
index 01f1e44..666cf03 100644
--- a/minify-build.js
+++ b/minify-build.js
@@ -167,9 +167,10 @@ async function createOptimizedBuild() {
         // Copy SEO files
         try {
             await fs.copyFile('public/structured-data.json', 'dist/structured-data.json');
+            await fs.copyFile('public/getting-started-structured-data.json', 'dist/getting-started-structured-data.json');
             await fs.copyFile('public/sitemap.xml', 'dist/sitemap.xml');
             await fs.copyFile('public/robots.txt', 'dist/robots.txt');
-            console.log('   ✅ SEO files copied (structured-data.json, sitemap.xml, robots.txt)');
+            console.log('   ✅ SEO files copied (structured-data.json, getting-started-structured-data.json, sitemap.xml, robots.txt)');
         } catch (err) {
             console.log('   ⚠️  Some SEO files not found, skipping...');
         }
@@ -314,16 +315,16 @@ async function copyDirectoryRecursive(src, dest) {
     }
 }
 
-async function injectStructuredData(html) {
+async function injectStructuredData(html, jsonPath) {
     try {
-        const json = await fs.readFile('public/structured-data.json', 'utf8');
+        const json = await fs.readFile(jsonPath, 'utf8');
         const minified = JSON.stringify(JSON.parse(json));
         return html.replace(
             /<script type="application\/ld\+json">[\s\S]*?<\/script>/,
             `<script type="application/ld+json">${minified}</script>`
         );
     } catch (err) {
-        console.log('   ⚠️  structured-data.json not found, skipping injection');
+        console.log(`   ⚠️  ${jsonPath} not found, skipping injection`);
         return html;
     }
 }
@@ -338,8 +339,13 @@ async function minifyHTMLFile(inputPath, outputPath) {
                 '<link rel="stylesheet" href="css/bundle.css">')
         .replace(/<script src="site-scripts\/theme-toggle\.js"><\/script>/g, ''); // Remove individual script references
 
-    if (path.basename(inputPath) === 'index.html') {
-        updatedHTML = await injectStructuredData(updatedHTML);
+    const structuredDataByPage = {
+        'index.html': 'public/structured-data.json',
+        'getting-started.html': 'public/getting-started-structured-data.json',
+    };
+    const structuredDataPath = structuredDataByPage[path.basename(inputPath)];
+    if (structuredDataPath) {
+        updatedHTML = await injectStructuredData(updatedHTML, structuredDataPath);
     }
 
     const minified = await htmlMinify(updatedHTML, {
diff --git a/public/about.html b/public/about.html
index 205f7d4..a2275be 100644
--- a/public/about.html
+++ b/public/about.html
@@ -52,8 +52,17 @@
                 </li>
             </ul>
             <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="getting-started.html">Getting Started</a></li>
+                <li class="nav-page-link"><a href="index.html">Home</a></li>
+                <li class="nav-page-link"><a href="getting-started.html">Getting Started</a></li>
+                <li class="nav-pages-dropdown">
+                    <details class="dropdown">
+                        <summary role="button" class="secondary">Pages</summary>
+                        <ul>
+                            <li><a href="index.html">Home</a></li>
+                            <li><a href="getting-started.html">Getting Started</a></li>
+                        </ul>
+                    </details>
+                </li>
                 <li>
                     <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                         <span id="theme-icon">🌙</span>
@@ -72,6 +81,7 @@
         <p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was not a space specifically for nomads, so I thought I would make it.</p>
         
         <h2>What to expect and commitments</h2>
+        <p><strong>Code of Conduct</strong> - This community is welcoming and accepting, thus it does not tolerate bigotry, hate speech, or homo/trans-phobic comments. More details can be found on each instance's policies.</p>
         <p><strong>Moderation style</strong> - 
         An online community of respect and courtesy that is simultaneously light on moderation and banning, yet firm on not tolerating bigotry, hatred, etc. Be kind and we'll all have a good time.</p>
         <p><strong>Sign ups</strong> - 
diff --git a/public/getting-started-structured-data.json b/public/getting-started-structured-data.json
new file mode 100644
index 0000000..0322e62
--- /dev/null
+++ b/public/getting-started-structured-data.json
@@ -0,0 +1,54 @@
+[
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "@id": "https://www.keyboardvagabond.com/getting-started.html#webpage",
+        "url": "https://www.keyboardvagabond.com/getting-started.html",
+        "name": "Getting Started | Keyboard Vagabond Fediverse Guide for Digital Nomads",
+        "description": "Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. An introductory guide for digital nomads joining our federated online community.",
+        "isPartOf": {
+            "@id": "https://www.keyboardvagabond.com/#website"
+        },
+        "about": {
+            "@id": "https://www.keyboardvagabond.com/#organization"
+        }
+    },
+    {
+        "@context": "https://schema.org",
+        "@type": "HowTo",
+        "@id": "https://www.keyboardvagabond.com/getting-started.html#howto",
+        "name": "How to join Keyboard Vagabond",
+        "description": "Sign up on a Keyboard Vagabond fediverse service and customize your feed to connect with digital nomads, remote workers, and travelers.",
+        "totalTime": "PT15M",
+        "step": [
+            {
+                "@type": "HowToStep",
+                "position": 1,
+                "name": "Complete the sign up form",
+                "text": "Complete the sign up form on Piefed, Pixelfed, Mastodon, Bookwyrm, or Write Freely and give a good answer to the question so that we know you're a human.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 2,
+                "name": "Wait for approval and explore",
+                "text": "Wait for approval, but browse and explore communities and hashtags.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 3,
+                "name": "Subscribe and customize your feed",
+                "text": "Follow the guide below and subscribe to communities, feeds, topics, and hashtags. On Piefed, check the box to limit or hide political posts if you want. Look under settings to customize your view, or block what you don't want to see.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 4,
+                "name": "Use scaled and active sortings on Piefed",
+                "text": "On Piefed, check out the scaled and active sortings. They help bring smaller communities into view that may not have a lot of votes or comments.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            }
+        ]
+    }
+]
diff --git a/public/getting-started.html b/public/getting-started.html
index 82b45de..eac52d4 100644
--- a/public/getting-started.html
+++ b/public/getting-started.html
@@ -19,6 +19,11 @@
         <meta property="og:description" content="Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. A step-by-step guide for digital nomads joining our federated online community.">
         <meta property="og:site_name" content="Keyboard Vagabond">
 
+        <!-- Structured Data -->
+        <script type="application/ld+json">
+
+        </script>
+
         <link rel="stylesheet" href="css/pico.jade.min.css">
         <link rel="stylesheet" href="site-styles/style.css">
     </head>
@@ -51,8 +56,17 @@
                 </ul>
 
                 <ul>
-                    <li><a href="index.html">Home</a></li>
-                    <li><a href="about.html">About</a></li>
+                    <li class="nav-page-link"><a href="index.html">Home</a></li>
+                    <li class="nav-page-link"><a href="about.html">About</a></li>
+                    <li class="nav-pages-dropdown">
+                        <details class="dropdown">
+                            <summary role="button" class="secondary">Pages</summary>
+                            <ul>
+                                <li><a href="index.html">Home</a></li>
+                                <li><a href="about.html">About</a></li>
+                            </ul>
+                        </details>
+                    </li>
                     <li>
                         <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                             <span id="theme-icon">🌙</span>
@@ -66,13 +80,20 @@
             <h1>Get started with Keyboard Vagabond</h1>
             <p>New to the fediverse? This guide walks you through signing up on Keyboard Vagabond and customizing your feed. Accounts require manual approval to prevent spam—allow a little time after you sign up. For background on how the community works, see our <a href="about.html">about page</a>.</p>
 
-            <h2>Join a Keyboard Vagabond service</h2>
-            <section aria-labelledby="join-heading">
-                <p id="join-heading">If you want to make Keyboard Vagabond your home, sign up on <strong><a href="https://piefed.keyboardvagabond.com">Piefed</a></strong>,
-                    <strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong>, <strong><a href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong>,
-                    <strong><a href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong>, or <strong><a href="https://blog.keyboardvagabond.com">Write Freely</a></strong>.
-                    Then start customizing your feed.</p>
+            <section aria-labelledby="basic-steps-heading">
+                <h2 id="basic-steps-heading">Basic steps for getting started</h2>
+                <ol>
+                    <li>Complete the sign up form on <strong><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></strong>,
+                        <strong><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong>, <strong><a target="_blank" href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong>,
+                        <strong><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong>, or <strong><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></strong> and give a <em>good</em> answer to the question so that we know you're a human.</li>
+                    <li>Wait for approval, but browse and explore communities and hashtags</li>
+                    <li>Follow the guide below and subscribe to communities, feeds, topics, and hashtags. On Piefed, check the box to limit or hide political posts if you want. Look under settings to customize your view, or block what you don't want to see.</li>
+                    <li>On Piefed, check out the scaled and active sortings. They help bring smaller communities into view that may not have a lot of votes or comments.</li>
+                </ol>
+            </section>
 
+            <h2>Navigating Communities and Following Hashtags</h2>
+            <section>
                 <h3>Piefed</h3>
                 <p>Browse the home page to see all known posts, or click the Local button to see posts made on this server.</p>
                 <figure>
@@ -84,7 +105,7 @@
                 </figure>
 
                 <h3>Mastodon</h3>
-                <p>After creating your account, head over to <a href="https://fedidevs.com/starter-packs/" rel="nofollow">fedidevs.com/starter-packs</a>
+                <p>After creating your account, head over to <a target="_blank" href="https://fedidevs.com/starter-packs/" rel="nofollow">fedidevs.com/starter-packs</a>
                     and search for accounts that fit your interests.</p>
                 <figure>
                     <img src="https://picsur.keyboardvagabond.com/i/43db7444-0d38-4761-aa68-2681085115c4.png?width=1000&shrinkOnly=true" alt="Screenshot of starter pack search on fedidevs.com" loading="lazy">
@@ -107,7 +128,7 @@
                 <h3>Other fediverse servers</h3>
                 <ul>
                     <li><a href="https://piefed.keyboardvagabond.com/auth/instance_chooser">Piefed Instance Chooser</a> — find other Piefed servers. <a href="https://piefed.social/" rel="nofollow">Piefed.social</a> is the flagship instance.</li>
-                    <li><a href="https://join-lemmy.org/instances" rel="nofollow">Join Lemmy</a> — the original Reddit alternative, with <a href="https://lemmy.zip/" rel="nofollow">Lemmy.zip</a> as a popular choice.</li>
+                    <li><a href="https://join-lemmy.org/instances" rel="nofollow">Join Lemmy</a> — the original Reddit alternative; <a href="https://lemmy.zip/" rel="nofollow">Lemmy.zip</a> as a popular choice.</li>
                     <li><a href="https://joinmastodon.org/servers" rel="nofollow">Join Mastodon</a> — Twitter alternative; <a href="https://mastodon.social" rel="nofollow">Mastodon.social</a> is the flagship instance.</li>
                     <li><a href="https://pixelfed.org/servers" rel="nofollow">Join Pixelfed</a> — photo sharing / Instagram alternative; <a href="https://pixelfed.social" rel="nofollow">Pixelfed.social</a> is the flagship instance.</li>
                 </ul>
@@ -116,39 +137,10 @@
             <h2>Codes of Conduct</h2>
             <section>
                 <p>While corporate media is primarily interested in the Terms of Service, the fediverse cares about the
-                    Code of Conduct—the agreement for how we treat each other and what behavior is and is not tolerated.
-                    Each instance should have one, including those of Keyboard Vagabond. These agreements help us
+                    Code of Conduct, the agreement for how we treat each other and what behavior is and is not tolerated.
+                    Each instance should have one and Keyboard Vagabond does. These agreements help us
                     create welcoming spaces that are free of harassment and bigotry.</p>
             </section>
-
-            <h2>Creating your experience</h2>
-            <section>
-                <p>In the fediverse, there are no algorithms. No one is trying to harvest your data or monetize your attention.
-                    You control what you see by choosing who and what to follow. On Piefed, use the Explore button, Posts/Hashtags/News tabs,
-                    local communities, and topics to discover nomad-focused content.</p>
-                <div class="photo-gallery">
-                    <div class="photo-item">
-                        <small>Check out that Explore button on the main page.</small>
-                        <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=600"
-                            alt="Explore button on main page" loading="lazy">
-                    </div>
-                    <div class="photo-item">
-                        <small>Visit the Posts, Hashtags, and News tabs to see what's on the server.</small>
-                        <img src="https://picsur.keyboardvagabond.com/i/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
-                            alt="Posts, Hashtags, and News tabs" loading="lazy">
-                    </div>
-                    <div class="photo-item">
-                        <small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following. Following communities on other instances will result in them being shown here.</small>
-                        <img src="https://picsur.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?width=700"
-                            alt="Communities, Local Communities" loading="lazy">
-                    </div>
-                    <div class="photo-item">
-                        <small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
-                        <img src="https://picsur.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
-                            alt="Local topics" loading="lazy">
-                    </div>
-                </div>
-            </section>
         </main>
 
         <footer class="container" role="contentinfo">
diff --git a/public/index.html b/public/index.html
index 64aa44c..a4b4bfe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -92,8 +92,17 @@
             </ul>
             
             <ul>
-                <li><a href="getting-started.html">Getting Started</a></li>
-                <li><a href="about.html">About</a></li>
+                <li class="nav-page-link"><a href="getting-started.html">Getting Started</a></li>
+                <li class="nav-page-link"><a href="about.html">About</a></li>
+                <li class="nav-pages-dropdown">
+                    <details class="dropdown">
+                        <summary role="button" class="secondary">Pages</summary>
+                        <ul>
+                            <li><a href="getting-started.html">Getting Started</a></li>
+                            <li><a href="about.html">About</a></li>
+                        </ul>
+                    </details>
+                </li>
                 <li>
                     <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                         <span id="theme-icon">🌙</span>
@@ -144,29 +153,9 @@
         </section>
 
         <section aria-labelledby="nomad-community-heading">
-            <h2 id="nomad-community-heading">Social media and online communities for digital nomads</h2>
-            <p>Looking for social media for digital nomads or a remote worker community that isn't driven by ads and algorithms? Keyboard Vagabond is an online community hub built for people who work and travel. Instead of one corporate platform, we connect a suite of federated services—each focused on a different way to connect.</p>
-            <p>Mastodon handles microblogging and networking, Piefed hosts forums and topic-based discussions, Pixelfed is for sharing travel photos, Bookwyrm covers book clubs and reviews, and Write Freely supports long-form blogging. All of these services talk to each other through the fediverse, so you can follow, reply, and participate across platforms from one nomad-focused community. <a href="about.html">Learn about our community values</a>, or jump straight to our <a href="getting-started.html">getting started guide</a> if you are ready to sign up.</p>
-        </section>
-
-        <section aria-labelledby="faq-heading">
-            <h2 id="faq-heading">Frequently asked questions</h2>
-            <details>
-                <summary><strong>What social media do digital nomads use?</strong></summary>
-                <p>Digital nomads often use a mix of platforms depending on their needs. Many join Mastodon for microblogging and networking, Reddit-style forums through Lemmy or Piefed for discussions, and Instagram alternatives like Pixelfed for photo sharing. Keyboard Vagabond offers all of these in one federated community built specifically for nomads and remote workers.</p>
-            </details>
-            <details>
-                <summary><strong>Where can digital nomads find online communities?</strong></summary>
-                <p>Digital nomads can find online communities on Keyboard Vagabond, a hub connecting Mastodon (social posts), Piefed (forums and topics), Pixelfed (photos), Bookwyrm (books), and Write Freely (blogging). Each platform is part of the fediverse, so you can follow and interact across them from a single community focused on travel and remote work.</p>
-            </details>
-            <details>
-                <summary><strong>What is Keyboard Vagabond?</strong></summary>
-                <p>Keyboard Vagabond is an online community and social media hub for digital nomads, remote workers, and travel enthusiasts. It runs a collection of federated services—Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely—on community-run infrastructure free of advertising and algorithmic feeds. See our <a href="about.html">about page</a> for more on how the community works.</p>
-            </details>
-            <details>
-                <summary><strong>How is this different from Facebook or Reddit?</strong></summary>
-                <p>Unlike Facebook or Reddit, Keyboard Vagabond is ad-free, community-run, and has no algorithms harvesting your attention. You control what you see by choosing who and what to follow. The fediverse services connect to each other, so you can participate in forums, photos, and posts from one ecosystem without a corporation monetizing your data.</p>
-            </details>
+            <h2 id="nomad-community-heading">Social media and online communities for digital nomads and travelers</h2>
+            <p>Looking for social media for digital nomads or a remote worker community that isn't driven by ads and algorithms? Keyboard Vagabond is an online community hub built for people who work and travel. Instead of one corporate platform, we connect a suite of federated services, each focused on a different way to connect.</p>
+            <p>Mastodon handles microblogging and networking, Piefed hosts forums and topic-based discussions, Pixelfed is for sharing photos, Bookwyrm covers book clubs and reviews, and Write Freely supports long-form blogging. All of these services talk to each other through the fediverse, so you can follow, reply, and participate across platforms from one nomad-focused community with no one harvesting or tracking your attention. <a href="about.html">Learn about our community values</a>, or jump straight to our <a href="getting-started.html">getting started guide</a> if you are ready to sign up.</p>
         </section>
         
         <section aria-labelledby="services-heading">
@@ -302,7 +291,6 @@
             <h2 id="get-started-heading">Ready to join?</h2>
             <p>New to the fediverse? Our <a href="getting-started.html">getting started guide</a> walks you through signing up on Mastodon, Piefed, Pixelfed, and the rest of Keyboard Vagabond, then customizing your feed to find nomads, travelers, and remote workers.</p>
         </section>
-        
     </main>
 
     <!-- Footer -->
diff --git a/public/site-styles/style.css b/public/site-styles/style.css
index 9c601d8..dca3212 100644
--- a/public/site-styles/style.css
+++ b/public/site-styles/style.css
@@ -2,6 +2,7 @@
     position: relative;
     width: 100%;
     overflow: hidden;
+    margin-bottom: 0;
 }
 
 .banner-container picture {
@@ -24,108 +25,69 @@
     display: block;
 }
 
+.banner-title,
+.banner-subtitle {
+    position: static;
+    width: 100%;
+    max-width: none;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--pico-spacing);
+    padding-right: var(--pico-spacing);
+    box-sizing: border-box;
+    text-shadow: none;
+}
+
 .banner-title {
-    position: absolute;
-    top: var(--pico-spacing);
-    left: var(--pico-spacing);
-    right: var(--pico-spacing);
-    color: white; /* Keep white for banner overlay readability */
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-    margin: 0;
+    margin-top: var(--pico-spacing);
+    margin-bottom: 0;
+    color: var(--pico-h1-color);
     font-family: var(--pico-font-family);
-    font-size: 2.5rem;
+    font-size: 1.8rem;
     font-weight: 700;
-    z-index: 10;
 }
 
 .banner-subtitle {
-    position: absolute;
-    bottom: var(--pico-typography-spacing-vertical);
-    left: var(--pico-spacing);
-    right: var(--pico-spacing);
-    color: white;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: var(--pico-spacing);
+    color: var(--pico-muted-color);
     font-family: var(--pico-font-family);
     font-size: var(--pico-font-size);
     font-weight: var(--pico-font-weight);
-    z-index: 10;
-}
-
-/* Responsive positioning to match Pico container */
-@media (min-width: 576px) {
-    .banner-title {
-        left: 50%;
-        right: auto;
-        transform: translateX(-50%);
-        max-width: 510px;
-        width: 100%;
-    }
-}
-
-@media (min-width: 768px) {
-    .banner-title {
-        max-width: 700px;
-    }
-}
-
-@media (min-width: 1024px) {
-    .banner-title {
-        max-width: 950px;
-    }
-}
-
-@media (min-width: 1280px) {
-    .banner-title {
-        max-width: 1200px;
-    }
-}
-
-@media (min-width: 1536px) {
-    .banner-title {
-        max-width: 1450px;
-    }
-}
-
-@media (max-width: 768px) {
-    .banner-title {
-        font-size: 1.8rem;
-        top: calc(var(--pico-typography-spacing-vertical) * 0.5);
-        /* left: 50%; */
-        right: auto;
-        /* transform: translateX(-50%); */
-    }
 }
 
 @media (min-width: 576px) {
+    .banner-title,
     .banner-subtitle {
-        left: 50%;
-        right: auto;
-        transform: translateX(-50%);
         max-width: 510px;
-        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
     }
 }
 
 @media (min-width: 768px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 700px;
     }
 }
 
 @media (min-width: 1024px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 950px;
     }
 }
 
 @media (min-width: 1280px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 1200px;
     }
 }
 
 @media (min-width: 1536px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 1450px;
     }
@@ -235,17 +197,19 @@
     color: #2d5016 !important;
 }  */
 
-/* Theme toggle button styling */
+/* Theme toggle button styling — match nav link height */
 #theme-toggle {
-    margin: 0;
-    padding: calc(var(--pico-spacing) * 0.5);
+    margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
+    padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
     min-height: auto;
+    height: auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--pico-border-radius);
-    font-size: 1.2rem;
-    transition: all 0.2s ease;
+    font-size: inherit;
+    line-height: var(--pico-line-height);
+    transition: transform 0.2s ease;
 }
 
 #theme-toggle:hover {
@@ -268,6 +232,10 @@
     display: flex;
 }
 
+.nav-pages-dropdown {
+    display: none;
+}
+
 /* Mobile breakpoint - hide desktop nav and show mobile nav */
 @media (max-width: 767px) {
     .desktop-nav {
@@ -277,6 +245,15 @@
     .mobile-nav {
         display: flex;
         flex: 0 0 auto;
+        gap: calc(var(--pico-spacing) * 0.5);
+    }
+
+    .nav-page-link {
+        display: none;
+    }
+
+    .nav-pages-dropdown {
+        display: inline-block;
     }
     
     /* Arrange mobile nav items horizontally */
@@ -304,12 +281,19 @@
         margin: 0;
     }
     
-    .mobile-nav .dropdown {
+    .mobile-nav li,
+    .nav-pages-dropdown {
+        position: relative;
+    }
+
+    .mobile-nav .dropdown,
+    .nav-pages-dropdown .dropdown {
         width: auto;
-        min-width: 120px;
+        min-width: auto;
     }
     
-    .mobile-nav .dropdown summary {
+    .mobile-nav .dropdown summary,
+    .nav-pages-dropdown .dropdown summary {
         margin: 0;
         padding: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
         border-radius: var(--pico-border-radius);
@@ -317,16 +301,18 @@
         user-select: none;
     }
     
-    .mobile-nav .dropdown[open] summary {
+    .mobile-nav .dropdown[open] summary,
+    .nav-pages-dropdown .dropdown[open] summary {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
     
-    .mobile-nav .dropdown ul {
+    .mobile-nav .dropdown ul,
+    .nav-pages-dropdown .dropdown ul {
         position: absolute;
         top: 100%;
-        left: 0;
-        right: 0;
+        width: auto;
+        min-width: 100%;
         background: var(--pico-background-color);
         border: 1px solid var(--pico-muted-border-color);
         border-top: none;
@@ -336,18 +322,32 @@
         margin: 0;
         padding: 0;
         list-style: none;
+        white-space: nowrap;
+    }
+
+    .mobile-nav .dropdown ul {
+        left: 0;
+        right: auto;
+    }
+
+    .nav-pages-dropdown .dropdown ul {
+        left: auto;
+        right: 0;
     }
     
-    .mobile-nav .dropdown ul li {
+    .mobile-nav .dropdown ul li,
+    .nav-pages-dropdown .dropdown ul li {
         margin: 0;
         border-bottom: 1px solid var(--pico-muted-border-color);
     }
     
-    .mobile-nav .dropdown ul li:last-child {
+    .mobile-nav .dropdown ul li:last-child,
+    .nav-pages-dropdown .dropdown ul li:last-child {
         border-bottom: none;
     }
     
-    .mobile-nav .dropdown ul li a {
+    .mobile-nav .dropdown ul li a,
+    .nav-pages-dropdown .dropdown ul li a {
         display: block;
         padding: calc(var(--pico-spacing) * 0.75) var(--pico-spacing);
         text-decoration: none;
@@ -355,15 +355,11 @@
         transition: background-color 0.2s ease;
     }
     
-    .mobile-nav .dropdown ul li a:hover {
+    .mobile-nav .dropdown ul li a:hover,
+    .nav-pages-dropdown .dropdown ul li a:hover {
         background-color: var(--pico-muted-color);
         opacity: 0.1;
     }
-    
-    /* Ensure proper positioning context */
-    .mobile-nav li {
-        position: relative;
-    }
 }
 
 /* Services Summary Styling */
@@ -501,6 +497,10 @@ header nav {
         align-items: flex-start;
         flex-wrap: wrap;
     }
+
+    header nav > ul {
+        align-items: flex-start;
+    }
     
     .main-nav {
         order: 1;
diff --git a/public/structured-data.json b/public/structured-data.json
index cd5750b..57064a0 100644
--- a/public/structured-data.json
+++ b/public/structured-data.json
@@ -167,43 +167,5 @@
         "about": {
             "@id": "https://www.keyboardvagabond.com/#organization"
         }
-    },
-    {
-        "@context": "https://schema.org",
-        "@type": "FAQPage",
-        "mainEntity": [
-            {
-                "@type": "Question",
-                "name": "What social media do digital nomads use?",
-                "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "Digital nomads often use a mix of platforms depending on their needs. Many join Mastodon for microblogging and networking, Reddit-style forums through Lemmy or Piefed for discussions, and Instagram alternatives like Pixelfed for photo sharing. Keyboard Vagabond offers all of these in one federated community built specifically for nomads and remote workers."
-                }
-            },
-            {
-                "@type": "Question",
-                "name": "Where can digital nomads find online communities?",
-                "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "Digital nomads can find online communities on Keyboard Vagabond, a hub connecting Mastodon (social posts), Piefed (forums and topics), Pixelfed (photos), Bookwyrm (books), and Write Freely (blogging). Each platform is part of the fediverse, so you can follow and interact across them from a single community focused on travel and remote work."
-                }
-            },
-            {
-                "@type": "Question",
-                "name": "What is Keyboard Vagabond?",
-                "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "Keyboard Vagabond is an online community and social media hub for digital nomads, remote workers, and travel enthusiasts. It runs a collection of federated services—Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely—on community-run infrastructure free of advertising and algorithmic feeds."
-                }
-            },
-            {
-                "@type": "Question",
-                "name": "How is this different from Facebook or Reddit?",
-                "acceptedAnswer": {
-                    "@type": "Answer",
-                    "text": "Unlike Facebook or Reddit, Keyboard Vagabond is ad-free, community-run, and has no algorithms harvesting your attention. You control what you see by choosing who and what to follow. The fediverse services connect to each other, so you can participate in forums, photos, and posts from one ecosystem without a corporation monetizing your data."
-                }
-            }
-        ]
     }
 ]