diff --git a/drafts/site-b/script.js b/drafts/site-b/script.js
new file mode 100644
index 00000000..529a5515
--- /dev/null
+++ b/drafts/site-b/script.js
@@ -0,0 +1,84 @@
+// Magic Civilization: Age of Dwarves - Landing Site
+// Minimal interactive enhancements
+
+(function() {
+    'use strict';
+
+    // Smooth scroll behavior for internal links (fallback for older browsers)
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const href = this.getAttribute('href');
+            if (href !== '#') {
+                e.preventDefault();
+                const target = document.querySelector(href);
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+        });
+    });
+
+    // Lazy-load intersection observer for subtle fade-in on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // Observe all major content blocks
+    document.querySelectorAll('.layer, .clan-card, .age-card').forEach(el => {
+        el.style.opacity = '0';
+        observer.observe(el);
+    });
+
+    // Add animation keyframes if not present
+    if (!document.getElementById('anim-styles')) {
+        const style = document.createElement('style');
+        style.id = 'anim-styles';
+        style.textContent = `
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Simple analytics event tracking (stub for future integration)
+    window.trackEvent = function(eventName, eventData) {
+        console.log('Event:', eventName, eventData);
+        // Replace with actual analytics call when ready
+    };
+
+    // Track button clicks
+    document.querySelectorAll('a.btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const label = this.textContent.trim();
+            window.trackEvent('cta_click', { label: label });
+        });
+    });
+
+    // Track platform badge clicks
+    document.querySelectorAll('.platform-badge').forEach(badge => {
+        badge.addEventListener('click', function() {
+            const platform = this.textContent.trim();
+            window.trackEvent('platform_click', { platform: platform });
+        });
+    });
+
+    console.log('Age of Dwarves landing site initialized.');
+})();
diff --git a/drafts/site-b/styles.css b/drafts/site-b/styles.css
new file mode 100644
index 00000000..deca21a8
--- /dev/null
+++ b/drafts/site-b/styles.css
@@ -0,0 +1,599 @@
+/* ============================================================================
+   Magic Civilization: Age of Dwarves - Landing Site
+   Editorial typography, geological palette, strong vertical rhythm
+   ============================================================================ */
+
+:root {
+    /* Color palette: granite, rust, dwarven brass */
+    --color-bg: #1a1512;
+    --color-fg: #f5f1eb;
+    --color-accent: #c9a876;
+    --color-accent-dark: #8b6f47;
+    --color-stone: #3a3228;
+    --color-border: #4a4238;
+
+    /* Typography: EB Garamond (editorial), IBM Plex Mono (code/data) */
+    --font-serif: 'EB Garamond', serif;
+    --font-mono: 'IBM Plex Mono', monospace;
+
+    /* Spacing: 8px base unit for rhythm */
+    --spacing-unit: 8px;
+    --spacing-xs: calc(var(--spacing-unit) * 1);   /* 8px */
+    --spacing-sm: calc(var(--spacing-unit) * 2);   /* 16px */
+    --spacing-md: calc(var(--spacing-unit) * 3);   /* 24px */
+    --spacing-lg: calc(var(--spacing-unit) * 4);   /* 32px */
+    --spacing-xl: calc(var(--spacing-unit) * 6);   /* 48px */
+    --spacing-2xl: calc(var(--spacing-unit) * 8);  /* 64px */
+
+    /* Line height for editorial feel */
+    --lh-tight: 1.25;
+    --lh-body: 1.7;
+    --lh-loose: 1.9;
+}
+
+/* ============================================================================
+   Global
+   ============================================================================ */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-serif);
+    font-size: 18px;
+    line-height: var(--lh-body);
+    color: var(--color-fg);
+    background-color: var(--color-bg);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+
+a {
+    color: var(--color-accent);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #e6c89f;
+}
+
+/* ============================================================================
+   Container & Layout
+   ============================================================================ */
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-lg);
+}
+
+/* ============================================================================
+   Hero
+   ============================================================================ */
+
+.hero {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.hero-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.hero-svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    max-width: 720px;
+    padding: var(--spacing-xl);
+}
+
+.hero h1 {
+    font-size: clamp(2.5rem, 8vw, 4.5rem);
+    font-weight: 700;
+    line-height: var(--lh-tight);
+    margin-bottom: var(--spacing-lg);
+    letter-spacing: -0.02em;
+    color: #fff8ef;
+    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+}
+
+.hero-tagline {
+    font-size: clamp(1.1rem, 3vw, 1.35rem);
+    line-height: var(--lh-loose);
+    color: #e6d5c3;
+    margin-bottom: var(--spacing-xl);
+    font-weight: 400;
+    letter-spacing: 0.01em;
+}
+
+/* ============================================================================
+   Buttons
+   ============================================================================ */
+
+.btn {
+    display: inline-block;
+    padding: var(--spacing-sm) var(--spacing-lg);
+    font-family: var(--font-serif);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border: 2px solid var(--color-accent);
+    background-color: transparent;
+    color: var(--color-accent);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 2px;
+}
+
+.btn:hover {
+    background-color: var(--color-accent);
+    color: var(--color-bg);
+    transform: translateY(-2px);
+}
+
+.btn-primary {
+    border-color: #fff8ef;
+    color: #fff8ef;
+}
+
+.btn-primary:hover {
+    background-color: #fff8ef;
+    color: var(--color-bg);
+    border-color: #fff8ef;
+}
+
+/* ============================================================================
+   Sections
+   ============================================================================ */
+
+section {
+    padding: var(--spacing-2xl) 0;
+    border-top: 1px solid var(--color-border);
+}
+
+section:first-of-type {
+    border-top: none;
+}
+
+h2 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    font-weight: 700;
+    line-height: var(--lh-tight);
+    margin-bottom: var(--spacing-md);
+    letter-spacing: -0.01em;
+    color: #fff8ef;
+}
+
+h3 {
+    font-size: 1.35rem;
+    font-weight: 700;
+    line-height: var(--lh-tight);
+    color: var(--color-accent);
+}
+
+.section-intro {
+    font-size: 1.1rem;
+    line-height: var(--lh-loose);
+    color: #d4c4b9;
+    max-width: 650px;
+    margin-bottom: var(--spacing-2xl);
+    font-weight: 400;
+}
+
+/* ============================================================================
+   World Layers Section
+   ============================================================================ */
+
+.world-layers {
+    background: linear-gradient(180deg, #1a1512 0%, #201c14 100%);
+}
+
+.layers-stack {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-2xl);
+}
+
+.layer {
+    padding: var(--spacing-lg);
+    background-color: rgba(58, 50, 40, 0.5);
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+.layer:hover {
+    background-color: rgba(58, 50, 40, 0.8);
+    border-color: var(--color-accent);
+    transform: translateY(-3px);
+}
+
+.layer-number {
+    display: inline-block;
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--color-accent);
+    margin-bottom: var(--spacing-sm);
+    padding: 4px 8px;
+    background-color: rgba(201, 168, 118, 0.1);
+    border-radius: 2px;
+}
+
+.layer h3 {
+    margin-bottom: var(--spacing-sm);
+    font-size: 1.25rem;
+}
+
+.layer p {
+    font-size: 0.95rem;
+    line-height: var(--lh-loose);
+    color: #d4c4b9;
+}
+
+.layer-icon {
+    width: 60px;
+    height: 60px;
+    margin-top: var(--spacing-md);
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+}
+
+.layer:hover .layer-icon {
+    opacity: 1;
+}
+
+/* ============================================================================
+   Clans Section
+   ============================================================================ */
+
+.clans {
+    background: linear-gradient(180deg, #201c14 0%, #1a1512 100%);
+}
+
+.clans-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-2xl);
+}
+
+.clan-card {
+    padding: var(--spacing-lg);
+    border-left: 4px solid var(--clan-color);
+    background: linear-gradient(135deg,
+        rgba(58, 50, 40, 0.6) 0%,
+        rgba(42, 36, 32, 0.4) 100%);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.clan-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -100px;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, var(--clan-color), transparent);
+    opacity: 0.05;
+    transition: opacity 0.3s ease;
+}
+
+.clan-card:hover {
+    border-left-width: 6px;
+    background: linear-gradient(135deg,
+        rgba(58, 50, 40, 0.85) 0%,
+        rgba(42, 36, 32, 0.65) 100%);
+}
+
+.clan-card:hover::before {
+    opacity: 0.1;
+}
+
+.clan-header {
+    margin-bottom: var(--spacing-md);
+    position: relative;
+    z-index: 1;
+}
+
+.clan-header h3 {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-xs);
+    color: #fff8ef;
+}
+
+.clan-archetype {
+    display: inline-block;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    color: var(--color-accent);
+    text-transform: uppercase;
+}
+
+.clan-card p {
+    position: relative;
+    z-index: 1;
+    font-size: 0.95rem;
+    line-height: var(--lh-loose);
+    color: #d4c4b9;
+}
+
+/* ============================================================================
+   Future Ages Section
+   ============================================================================ */
+
+.future-ages {
+    background: linear-gradient(180deg, #1a1512 0%, #201c14 100%);
+}
+
+.ages-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-2xl);
+}
+
+.age-card {
+    padding: var(--spacing-lg);
+    border: 2px solid var(--color-accent);
+    background-color: rgba(201, 168, 118, 0.08);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.age-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-xs);
+    color: #fff8ef;
+}
+
+.age-status {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    color: var(--color-accent);
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-md);
+}
+
+.age-card p:last-child {
+    font-size: 0.95rem;
+    line-height: var(--lh-loose);
+    color: #d4c4b9;
+}
+
+.age-future {
+    opacity: 0.75;
+    border-color: rgba(201, 168, 118, 0.5);
+    background-color: rgba(201, 168, 118, 0.04);
+}
+
+.age-future:hover {
+    opacity: 1;
+    border-color: var(--color-accent);
+    background-color: rgba(201, 168, 118, 0.08);
+}
+
+/* ============================================================================
+   Footer
+   ============================================================================ */
+
+.footer {
+    background: linear-gradient(180deg, #0f0d0a 0%, #000 100%);
+    border-top: 2px solid var(--color-border);
+    padding: var(--spacing-2xl) 0;
+    text-align: center;
+}
+
+.footer h3 {
+    font-size: 1.5rem;
+    color: #fff8ef;
+    margin-bottom: var(--spacing-lg);
+}
+
+.platforms {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-lg);
+    flex-wrap: wrap;
+    margin-bottom: var(--spacing-lg);
+}
+
+.platform-badge {
+    display: inline-block;
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 1px solid var(--color-border);
+    background-color: rgba(58, 50, 40, 0.5);
+    color: var(--color-accent);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+.platform-badge:hover {
+    background-color: rgba(201, 168, 118, 0.15);
+    border-color: var(--color-accent);
+    transform: translateY(-2px);
+}
+
+.footer-note {
+    font-size: 0.9rem;
+    color: #8b7355;
+    font-style: italic;
+    margin-bottom: var(--spacing-md);
+}
+
+.copyright {
+    font-size: 0.85rem;
+    color: #6b5a4a;
+    font-family: var(--font-mono);
+    letter-spacing: 0.02em;
+}
+
+/* ============================================================================
+   Responsive: Tablet (768px)
+   ============================================================================ */
+
+@media (max-width: 768px) {
+    :root {
+        font-size: 16px;
+        --spacing-lg: calc(var(--spacing-unit) * 3);
+        --spacing-xl: calc(var(--spacing-unit) * 5);
+        --spacing-2xl: calc(var(--spacing-unit) * 6);
+    }
+
+    .hero h1 {
+        font-size: 2rem;
+    }
+
+    .hero-tagline {
+        font-size: 1rem;
+    }
+
+    h2 {
+        font-size: 1.75rem;
+    }
+
+    .layers-stack,
+    .clans-grid,
+    .ages-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
+    }
+
+    .platforms {
+        gap: var(--spacing-md);
+    }
+
+    .clan-card {
+        border-left-width: 3px;
+    }
+
+    .clan-card:hover {
+        border-left-width: 4px;
+    }
+}
+
+/* ============================================================================
+   Responsive: Mobile (480px)
+   ============================================================================ */
+
+@media (max-width: 480px) {
+    :root {
+        font-size: 15px;
+        --spacing-md: calc(var(--spacing-unit) * 2.5);
+        --spacing-lg: calc(var(--spacing-unit) * 2.5);
+    }
+
+    .container {
+        padding: 0 var(--spacing-md);
+    }
+
+    .hero-content {
+        padding: var(--spacing-lg) var(--spacing-md);
+    }
+
+    .hero h1 {
+        font-size: 1.5rem;
+        margin-bottom: var(--spacing-md);
+    }
+
+    .hero-tagline {
+        font-size: 0.95rem;
+        margin-bottom: var(--spacing-lg);
+    }
+
+    h2 {
+        font-size: 1.35rem;
+    }
+
+    h3 {
+        font-size: 1.1rem;
+    }
+
+    section {
+        padding: var(--spacing-xl) 0;
+    }
+
+    .layer,
+    .clan-card,
+    .age-card {
+        padding: var(--spacing-md);
+    }
+
+    .platforms {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing-sm);
+    }
+
+    .platform-badge {
+        width: 100%;
+        text-align: center;
+    }
+
+    .layer-icon {
+        width: 50px;
+        height: 50px;
+    }
+}
+
+/* ============================================================================
+   Print
+   ============================================================================ */
+
+@media print {
+    body {
+        background-color: #fff;
+        color: #000;
+    }
+
+    .hero-backdrop {
+        display: none;
+    }
+
+    section {
+        page-break-inside: avoid;
+    }
+
+    a {
+        color: #000;
+        text-decoration: underline;
+    }
+}