From 5dfca4fdcad043ee6190ce54c016b69a66b79940 Mon Sep 17 00:00:00 2001
From: autocommit <autocommit@ftw.codes>
Date: Sun, 17 May 2026 19:38:20 -0700
Subject: [PATCH] =?UTF-8?q?ui(site):=20=F0=9F=92=84=20Update=20Site=20A=20?=
 =?UTF-8?q?styling=20and=20interactivity=20with=20new=20CSS=20and=20JavaSc?=
 =?UTF-8?q?ript=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 drafts/site-a/script.js  |  64 ++++
 drafts/site-a/styles.css | 628 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 692 insertions(+)
 create mode 100644 drafts/site-a/script.js
 create mode 100644 drafts/site-a/styles.css

diff --git a/drafts/site-a/script.js b/drafts/site-a/script.js
new file mode 100644
index 00000000..ccc66646
--- /dev/null
+++ b/drafts/site-a/script.js
@@ -0,0 +1,64 @@
+// Age of Dwarves Landing — Interactive AI Picker
+
+const descriptions = {
+  learned: {
+    default: 'Neural net trained on 50k games vs MCTS'
+  },
+  scripted: {
+    ironhold: 'Ironhold: fortress-builder, walls up, feeds production',
+    blackhammer: 'Blackhammer: warmonger with personality',
+    goldvein: 'Goldvein: merchant, trades, counts gold',
+    deepforge: 'Deepforge: isolationist, goes tall, perfects craft',
+    runesmith: 'Runesmith: tech scholar, balanced play',
+    skyforge: 'Skyforge: tech rusher, spreads thin'
+  }
+};
+
+// Slot 1: Learned (default) or Scripted (rotate through clans)
+document.querySelectorAll('input[name="slot1"]').forEach(radio => {
+  radio.addEventListener('change', (e) => {
+    const preview = document.getElementById('slot1-preview');
+    const clans = ['ironhold', 'blackhammer', 'goldvein', 'deepforge', 'runesmith', 'skyforge'];
+
+    if (e.target.value === 'learned') {
+      preview.textContent = descriptions.learned.default;
+      preview.className = 'picker-preview learned';
+    } else {
+      const clan = clans[Math.floor(Math.random() * clans.length)];
+      preview.textContent = descriptions.scripted[clan];
+      preview.className = 'picker-preview scripted';
+    }
+  });
+});
+
+// Slot 2: Scripted (default) or Learned
+document.querySelectorAll('input[name="slot2"]').forEach(radio => {
+  radio.addEventListener('change', (e) => {
+    const preview = document.getElementById('slot2-preview');
+    const clans = ['ironhold', 'blackhammer', 'goldvein', 'deepforge', 'runesmith', 'skyforge'];
+
+    if (e.target.value === 'scripted') {
+      const clan = clans[Math.floor(Math.random() * clans.length)];
+      preview.textContent = descriptions.scripted[clan];
+      preview.className = 'picker-preview scripted';
+    } else {
+      preview.textContent = descriptions.learned.default;
+      preview.className = 'picker-preview learned';
+    }
+  });
+});
+
+// Slots 3–4: Scripted (default) or Learned
+document.querySelectorAll('input[name="slots34"]').forEach(radio => {
+  radio.addEventListener('change', (e) => {
+    const preview = document.getElementById('slots34-preview');
+
+    if (e.target.value === 'learned') {
+      preview.textContent = 'Two learned nets: unpredictable chaos, novel strategies';
+      preview.className = 'picker-preview learned';
+    } else {
+      preview.textContent = 'Goldvein & Ironhold: traders and fortress-builders';
+      preview.className = 'picker-preview scripted';
+    }
+  });
+});
diff --git a/drafts/site-a/styles.css b/drafts/site-a/styles.css
new file mode 100644
index 00000000..ea2b5796
--- /dev/null
+++ b/drafts/site-a/styles.css
@@ -0,0 +1,628 @@
+/* Age of Dwarves Landing Site */
+
+/* === VARIABLES === */
+:root {
+  /* Dwarven palette: deep copper, slate, gold accents */
+  --bg-dark: #0f0e0d;
+  --bg-card: #1a1815;
+  --bg-alt: #2a2520;
+  --text-primary: #f5f1ed;
+  --text-secondary: #d4cec5;
+  --accent-copper: #c98c5c;
+  --accent-gold: #d4af37;
+  --accent-slate: #5a6c7d;
+  --accent-learned: #6b4dff;
+  --accent-scripted: #ff6b4d;
+  --border-subtle: #3a3530;
+
+  /* Typography */
+  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+
+  /* Spacing */
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4rem;
+
+  /* Typography scale */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 2rem;
+  --text-3xl: 2.5rem;
+  --text-4xl: 3.5rem;
+}
+
+/* === RESET & BASE === */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1512 100%);
+  color: var(--text-primary);
+  line-height: 1.6;
+  letter-spacing: -0.3px;
+}
+
+/* === TYPOGRAPHY === */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  letter-spacing: -1px;
+}
+
+h1 {
+  font-size: var(--text-4xl);
+  line-height: 1.1;
+  margin-bottom: var(--space-md);
+}
+
+h2 {
+  font-size: var(--text-3xl);
+  margin-bottom: var(--space-lg);
+  text-align: center;
+  background: linear-gradient(135deg, var(--accent-copper), var(--accent-gold));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h3 {
+  font-size: var(--text-xl);
+  margin-bottom: var(--space-sm);
+}
+
+p {
+  margin-bottom: var(--space-sm);
+}
+
+a {
+  color: var(--accent-copper);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--accent-gold);
+}
+
+/* === SECTIONS === */
+section {
+  padding: var(--space-2xl) var(--space-lg);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-intro {
+  text-align: center;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2xl);
+  font-size: var(--text-lg);
+}
+
+/* === HERO === */
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(
+    180deg,
+    rgba(107, 77, 255, 0.05) 0%,
+    rgba(201, 140, 92, 0.03) 50%,
+    var(--bg-dark) 100%
+  );
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.1), transparent 70%);
+  pointer-events: none;
+}
+
+.hero-content {
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: var(--space-lg);
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 8vw, 4.5rem);
+  margin-bottom: var(--space-md);
+  letter-spacing: -2px;
+  color: var(--text-primary);
+}
+
+.tagline {
+  font-size: var(--text-xl);
+  color: var(--accent-gold);
+  margin-bottom: var(--space-md);
+  font-weight: 600;
+}
+
+.subtitle {
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2xl);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cta-primary {
+  display: inline-block;
+  padding: 1rem 2.5rem;
+  background: linear-gradient(135deg, var(--accent-copper), #d4793d);
+  color: var(--bg-dark);
+  font-weight: 700;
+  font-size: var(--text-lg);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 2px solid transparent;
+  margin-bottom: var(--space-lg);
+}
+
+.cta-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(201, 140, 92, 0.3);
+  color: var(--bg-dark);
+}
+
+.cta-primary:active {
+  transform: translateY(0);
+}
+
+.availability {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+/* === TWO MINDS === */
+.two-minds {
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.minds-comparison {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-2xl);
+  align-items: stretch;
+  margin-top: var(--space-2xl);
+}
+
+@media (min-width: 1024px) {
+  .minds-comparison {
+    grid-template-columns: 1fr 1.2fr 1fr;
+    gap: var(--space-lg);
+  }
+}
+
+.mind {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.mind.learned {
+  border-color: var(--accent-learned);
+}
+
+.mind.scripted {
+  border-color: var(--accent-scripted);
+}
+
+.mind-icon {
+  width: 80px;
+  height: 80px;
+  margin-bottom: var(--space-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mind.learned .mind-icon {
+  color: var(--accent-learned);
+}
+
+.mind.scripted .mind-icon {
+  color: var(--accent-scripted);
+}
+
+.mind-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.mind h3 {
+  margin-bottom: var(--space-md);
+  font-size: var(--text-xl);
+}
+
+.mind-traits {
+  list-style: none;
+  margin-bottom: var(--space-md);
+  text-align: left;
+  flex: 1;
+}
+
+.mind-traits li {
+  padding: var(--space-xs) 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.mind-traits li:last-child {
+  border-bottom: none;
+}
+
+.mind-cta {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* === MIND PICKER === */
+.mind-picker {
+  background: rgba(255, 255, 255, 0.02);
+  border: 2px dashed var(--border-subtle);
+  border-radius: 8px;
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.picker-label {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  color: var(--accent-gold);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: -var(--space-sm);
+}
+
+.picker-controls {
+  display: flex;
+  gap: var(--space-md);
+  justify-content: center;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  user-select: none;
+}
+
+.radio-label input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-subtle);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.radio-label input[type="radio"]:hover {
+  border-color: var(--text-secondary);
+}
+
+.radio-label input[type="radio"]:checked {
+  background: var(--accent-slate);
+  border-color: var(--accent-slate);
+}
+
+.radio-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.radio-indicator.learned {
+  background: var(--accent-learned);
+}
+
+.radio-indicator.scripted {
+  background: var(--accent-scripted);
+}
+
+.picker-preview {
+  background: rgba(255, 255, 255, 0.04);
+  border-left: 4px solid var(--accent-slate);
+  padding: var(--space-md);
+  border-radius: 4px;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  font-style: italic;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.picker-preview.learned {
+  border-left-color: var(--accent-learned);
+}
+
+.picker-preview.scripted {
+  border-left-color: var(--accent-scripted);
+}
+
+/* === CLANS === */
+.clans {
+  background: var(--bg-dark);
+}
+
+.clans-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-lg);
+}
+
+.clan-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  padding: var(--space-lg);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.clan-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--clan-color, var(--accent-copper)), transparent);
+}
+
+.clan-card.ironhold { --clan-color: #c98c5c; }
+.clan-card.blackhammer { --clan-color: #8b4513; }
+.clan-card.goldvein { --clan-color: #d4af37; }
+.clan-card.deepforge { --clan-color: #5a6c7d; }
+.clan-card.runesmith { --clan-color: #a78bfa; }
+.clan-card.skyforge { --clan-color: #60a5fa; }
+
+.clan-card:hover {
+  border-color: var(--clan-color);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  transform: translateY(-4px);
+}
+
+.clan-icon {
+  width: 60px;
+  height: 60px;
+  margin-bottom: var(--space-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clan-color);
+}
+
+.clan-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.clan-card h3 {
+  margin-bottom: var(--space-md);
+  color: var(--text-primary);
+}
+
+.clan-axes {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 4px;
+  padding: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.axis {
+  font-size: var(--text-sm);
+  margin-bottom: var(--space-sm);
+  color: var(--text-secondary);
+  font-family: 'Courier New', monospace;
+  letter-spacing: -0.5px;
+}
+
+.axis:last-child {
+  margin-bottom: 0;
+}
+
+.clan-strategy {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* === MOD AI === */
+.mod-ai {
+  background: linear-gradient(135deg, rgba(107, 77, 255, 0.1), rgba(201, 140, 92, 0.05));
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.mod-teaser {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  padding: var(--space-lg);
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.mod-teaser p {
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-bottom: var(--space-md);
+}
+
+.mod-teaser p:last-child {
+  margin-bottom: 0;
+}
+
+.mod-note {
+  font-size: var(--text-sm);
+  color: var(--accent-gold);
+  font-weight: 500;
+}
+
+/* === FOOTER === */
+.footer {
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--space-2xl) var(--space-lg);
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.footer h3 {
+  color: var(--accent-gold);
+  margin-bottom: var(--space-sm);
+}
+
+.footer p {
+  color: var(--text-secondary);
+}
+
+.platforms {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-lg);
+  margin: var(--space-2xl) 0;
+}
+
+.platform {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  padding: var(--space-lg);
+}
+
+.platform strong {
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: var(--space-sm);
+  font-size: var(--text-lg);
+}
+
+.platform p {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+.footer-note {
+  margin-top: var(--space-lg);
+  font-size: var(--text-xs);
+  color: var(--accent-slate);
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 768px) {
+  section {
+    padding: var(--space-xl) var(--space-md);
+  }
+
+  h1 {
+    font-size: var(--text-2xl);
+  }
+
+  h2 {
+    font-size: var(--text-2xl);
+  }
+
+  .hero-content {
+    padding: var(--space-md);
+  }
+
+  .minds-comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .cta-primary {
+    font-size: var(--text-base);
+    padding: 0.875rem 2rem;
+  }
+
+  .clans-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .platforms {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --text-4xl: 2rem;
+    --text-3xl: 1.75rem;
+    --space-2xl: 2rem;
+  }
+
+  section {
+    padding: var(--space-lg) var(--space-md);
+  }
+
+  .hero {
+    min-height: auto;
+    padding: var(--space-2xl) 0;
+  }
+
+  .mind-picker {
+    gap: var(--space-md);
+  }
+
+  .picker-controls {
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .radio-label {
+    justify-content: center;
+  }
+}