john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Professional spacing and Koha contrast on homepage

Browse source 
Spacing improvements across all sections:
- Section padding: py-10 (40px) → py-16/py-20 (64-80px)
- Card padding: p-4 (16px) → p-6 (24px)
- Grid gaps: gap-4 → gap-6
- Section header margins: mb-6 → mb-10
- Inner element margins increased throughout
- Button/CTA padding increased for breathing room

Koha contrast fix:
- Changed text-blue-100 to text-white on Koha section
  paragraphs for proper contrast against dark gradient background

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow 2026-02-07 15:45:40 +13:00
parent c5abf8b6fc
commit e54ddc1aa8
1 changed files with 113 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

226
public/index.html
View file

@ -90,17 +90,17 @@
<main id="main-content" role="main">
<!-- Section 1: The Problem -->
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">The Problem</h2>
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">The Problem</h2>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<div class="bg-white rounded-xl shadow-md p-8 md:p-10 border border-gray-200">
<div class="max-w-3xl mx-auto">
<p class="text-gray-700 text-base mb-4 leading-relaxed">
<p class="text-gray-700 text-base mb-6 leading-relaxed">
Current AI safety approaches rely on training, fine-tuning, and corporate governance &mdash; all of which can fail, drift, or be overridden. When an AI's training patterns conflict with a user's explicit instructions, the patterns win.
</p>
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg mb-4">
<h3 class="text-lg font-bold text-red-900 mb-2">The 27027 Incident</h3>
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg mb-6">
<h3 class="text-lg font-bold text-red-900 mb-3">The 27027 Incident</h3>
<p class="text-red-800">
A user told Claude Code to use port 27027. The model used 27017 instead &mdash; not from forgetting, but because MongoDB's default port is 27017, and the model's statistical priors "autocorrected" the explicit instruction. Training pattern bias overrode human intent.
</p>
@ -113,43 +113,43 @@
</section>
<!-- Section 2: The Philosophical Foundations -->
<section class="bg-gradient-to-br from-purple-50 via-blue-50 to-teal-50 py-10 border-y border-gray-200">
<section class="bg-gradient-to-br from-purple-50 via-blue-50 to-teal-50 py-16 md:py-20 border-y border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">The Approach</h2>
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">The Approach</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto">
Tractatus draws on four intellectual traditions, each contributing a distinct insight to the architecture.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-5xl mx-auto">
<div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-2">Isaiah Berlin &mdash; Value Pluralism</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Isaiah Berlin &mdash; Value Pluralism</h3>
<p class="text-gray-700 text-sm leading-relaxed">
Some values are genuinely incommensurable. You cannot rank "privacy" against "safety" on a single scale without imposing one community's priorities on everyone else. AI systems must accommodate plural moral frameworks, not flatten them.
</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-2">Ludwig Wittgenstein &mdash; The Limits of the Sayable</h3>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Ludwig Wittgenstein &mdash; The Limits of the Sayable</h3>
<p class="text-gray-700 text-sm leading-relaxed">
Some decisions can be systematised and delegated to AI; others &mdash; involving values, ethics, cultural context &mdash; fundamentally cannot. The boundary between the &ldquo;sayable&rdquo; (what can be specified, measured, verified) and what lies beyond it is the framework&rsquo;s foundational constraint. What cannot be systematised must not be automated.
</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-2">Te Tiriti o Waitangi &mdash; Indigenous Sovereignty</h3>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Te Tiriti o Waitangi &mdash; Indigenous Sovereignty</h3>
<p class="text-gray-700 text-sm leading-relaxed">
Communities should control their own data and the systems that act upon it. Concepts of <em>rangatiratanga</em> (self-determination), <em>kaitiakitanga</em> (guardianship), and <em>mana</em> (dignity) provide centuries-old prior art for digital sovereignty.
</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-2">Christopher Alexander &mdash; Living Architecture</h3>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Christopher Alexander &mdash; Living Architecture</h3>
<p class="text-gray-700 text-sm leading-relaxed">
Governance woven into system architecture, not bolted on. Five principles (Not-Separateness, Deep Interlock, Gradients, Structure-Preserving, Living Process) guide how the framework evolves while maintaining coherence.
</p>
</div>
</div>
<div class="text-center mt-5">
<div class="text-center mt-8">
<a href="/downloads/philosophical-foundations-village-project.pdf"
class="inline-flex items-center gap-2 text-gray-700 hover:text-purple-700 font-semibold transition text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -162,91 +162,91 @@
</section>
<!-- Section 3: The Architecture -->
<section class="bg-white py-10">
<section class="bg-white py-16 md:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Six Governance Services</h2>
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Six Governance Services</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto">
Every AI action passes through six external services before execution. Governance operates in the critical path &mdash; bypasses require explicit flags and are logged.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center mb-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">BoundaryEnforcer</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">BoundaryEnforcer</h3>
<p class="text-gray-600 text-sm">
Blocks AI from making values decisions. Privacy trade-offs, ethical questions, and cultural context require human judgment &mdash; architecturally enforced.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mb-3">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">InstructionPersistenceClassifier</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">InstructionPersistenceClassifier</h3>
<p class="text-gray-600 text-sm">
Classifies instructions by persistence (HIGH/MEDIUM/LOW) and quadrant. Stores them externally so they cannot be overridden by training patterns.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-3">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">CrossReferenceValidator</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">CrossReferenceValidator</h3>
<p class="text-gray-600 text-sm">
Validates AI actions against stored instructions. When the AI proposes an action that conflicts with an explicit instruction, the instruction takes precedence.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center mb-3">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">ContextPressureMonitor</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">ContextPressureMonitor</h3>
<p class="text-gray-600 text-sm">
Detects degraded operating conditions (token pressure, error rates, complexity) and adjusts verification intensity. Graduated response prevents both alert fatigue and silent degradation.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center mb-3">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">MetacognitiveVerifier</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">MetacognitiveVerifier</h3>
<p class="text-gray-600 text-sm">
AI self-checks alignment, coherence, and safety before execution. Triggered selectively on complex operations to avoid overhead on routine tasks.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center mb-3">
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">PluralisticDeliberationOrchestrator</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-3">PluralisticDeliberationOrchestrator</h3>
<p class="text-gray-600 text-sm">
When AI encounters values conflicts, it halts and coordinates deliberation among affected stakeholders rather than making autonomous choices.
</p>
</div>
</div>
<div class="text-center mt-5">
<a href="/architecture.html" class="inline-block px-6 py-2 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
<div class="text-center mt-8">
<a href="/architecture.html" class="inline-block px-8 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
See the full architecture &rarr;
</a>
</div>
@ -254,43 +254,43 @@
</section>
<!-- Section 4: Production Evidence -->
<section class="bg-gradient-to-r from-teal-700 to-emerald-700 text-white py-10">
<section class="bg-gradient-to-r from-teal-700 to-emerald-700 text-white py-16 md:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-6">
<span class="inline-block bg-teal-900 text-teal-200 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide mb-2">Production Evidence</span>
<h2 class="text-2xl font-bold mb-3">Tractatus in Production: The Village Platform</h2>
<div class="text-center mb-10">
<span class="inline-block bg-teal-900 text-teal-200 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide mb-3">Production Evidence</span>
<h2 class="text-2xl font-bold mb-4">Tractatus in Production: The Village Platform</h2>
<p class="text-base text-teal-100 max-w-3xl mx-auto">
Home AI applies all six governance services to every user interaction in a live community platform.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white/10 backdrop-blur rounded-lg p-4 text-center">
<div class="text-3xl font-bold mb-1">6</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white/10 backdrop-blur rounded-lg p-6 text-center">
<div class="text-3xl font-bold mb-2">6</div>
<div class="text-teal-200 text-sm">Governance services per response</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4 text-center">
<div class="text-3xl font-bold mb-1">11+</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-6 text-center">
<div class="text-3xl font-bold mb-2">11+</div>
<div class="text-teal-200 text-sm">Months in production</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4 text-center">
<div class="text-3xl font-bold mb-1">~5%</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-6 text-center">
<div class="text-3xl font-bold mb-2">~5%</div>
<div class="text-teal-200 text-sm">Governance overhead per interaction</div>
</div>
</div>
<div class="flex flex-wrap gap-4 justify-center mb-6">
<div class="flex flex-wrap gap-4 justify-center mb-8">
<a href="/village-case-study.html"
class="inline-block bg-white text-teal-700 px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition">
class="inline-block bg-white text-teal-700 px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
Technical Case Study &rarr;
</a>
<a href="/home-ai.html"
class="inline-block bg-teal-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-teal-800 transition border border-teal-500">
class="inline-block bg-teal-900 text-white px-8 py-3 rounded-lg font-semibold hover:bg-teal-800 transition border border-teal-500">
About Home AI &rarr;
</a>
</div>
<div class="bg-amber-100 border-2 border-amber-400 rounded-lg p-4 max-w-2xl mx-auto text-center">
<div class="bg-amber-100 border-2 border-amber-400 rounded-lg p-5 max-w-2xl mx-auto text-center">
<p class="text-amber-900 text-sm">
<strong>Limitations:</strong> Single implementation, self-reported metrics, operator-developer overlap. Independent audit and multi-site validation scheduled for 2026.
</p>
@ -299,84 +299,84 @@
</section>
<!-- Section 5: Three Audience Paths -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Explore by Role</h2>
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Explore by Role</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto">
The framework is presented through three lenses, each with distinct depth and focus.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="/researcher.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 p-4">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 p-5">
<h3 class="text-xl font-bold text-white">For Researchers</h3>
<p class="text-purple-100 text-sm mt-1">Academic and technical depth</p>
</div>
<div class="p-4">
<ul class="space-y-1.5 text-sm text-gray-700">
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li>Formal foundations and proofs</li>
<li>Failure mode analysis</li>
<li>Open research questions</li>
<li>3,942 audit decisions on Hugging Face</li>
</ul>
<div class="mt-4 text-purple-600 font-semibold group-hover:underline text-sm">Explore research &rarr;</div>
<div class="mt-5 text-purple-600 font-semibold group-hover:underline text-sm">Explore research &rarr;</div>
</div>
</a>
<a href="/implementer.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-indigo-500 to-indigo-600 p-4">
<div class="bg-gradient-to-r from-indigo-500 to-indigo-600 p-5">
<h3 class="text-xl font-bold text-white">For Implementers</h3>
<p class="text-indigo-100 text-sm mt-1">Code and integration guides</p>
</div>
<div class="p-4">
<ul class="space-y-1.5 text-sm text-gray-700">
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li>Working code examples</li>
<li>API integration patterns</li>
<li>Service architecture diagrams</li>
<li>Deployment patterns</li>
</ul>
<div class="mt-4 text-indigo-600 font-semibold group-hover:underline text-sm">View implementation guide &rarr;</div>
<div class="mt-5 text-indigo-600 font-semibold group-hover:underline text-sm">View implementation guide &rarr;</div>
</div>
</a>
<a href="/leader.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-teal-500 to-teal-600 p-4">
<div class="bg-gradient-to-r from-teal-500 to-teal-600 p-5">
<h3 class="text-xl font-bold text-white">For Leaders</h3>
<p class="text-teal-100 text-sm mt-1">Strategic AI governance</p>
</div>
<div class="p-4">
<ul class="space-y-1.5 text-sm text-gray-700">
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li>Executive briefing and business case</li>
<li>Regulatory alignment (EU AI Act)</li>
<li>Implementation roadmap</li>
<li>Risk management framework</li>
</ul>
<div class="mt-4 text-teal-600 font-semibold group-hover:underline text-sm">View leadership resources &rarr;</div>
<div class="mt-5 text-teal-600 font-semibold group-hover:underline text-sm">View leadership resources &rarr;</div>
</div>
</a>
</div>
</section>
<!-- Section 6: Research Papers -->
<section class="bg-gray-100 py-10">
<section class="bg-gray-100 py-16 md:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Architectural Alignment</h2>
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Architectural Alignment</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto">
The research paper in three editions, each written for a different audience.
</p>
<p class="text-sm text-gray-500 mt-1">STO-INN-0003 v2.1 | John Stroh &amp; Claude (Anthropic) | January 2026</p>
<p class="text-sm text-gray-500 mt-2">STO-INN-0003 v2.1 | John Stroh &amp; Claude (Anthropic) | January 2026</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<a href="/architectural-alignment.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-emerald-500 to-teal-600 p-4">
<div class="bg-gradient-to-r from-emerald-500 to-teal-600 p-5">
<span class="bg-white/20 text-white text-xs font-semibold px-2 py-1 rounded-full">v2.1-A</span>
<h3 class="text-lg font-bold text-white mt-1">Academic</h3>
<h3 class="text-lg font-bold text-white mt-2">Academic</h3>
</div>
<div class="p-4">
<p class="text-sm text-gray-600 mb-2">
<div class="p-6">
<p class="text-sm text-gray-600 mb-3">
Full academic treatment with formal proofs, existential risk context, and comprehensive citations.
</p>
<span class="text-emerald-600 font-semibold group-hover:underline text-sm">Read &rarr;</span>
@ -384,12 +384,12 @@
</a>
<a href="/architectural-alignment-community.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-sky-500 to-blue-600 p-4">
<div class="bg-gradient-to-r from-sky-500 to-blue-600 p-5">
<span class="bg-white/20 text-white text-xs font-semibold px-2 py-1 rounded-full">v2.1-C</span>
<h3 class="text-lg font-bold text-white mt-1">Community</h3>
<h3 class="text-lg font-bold text-white mt-2">Community</h3>
</div>
<div class="p-4">
<p class="text-sm text-gray-600 mb-2">
<div class="p-6">
<p class="text-sm text-gray-600 mb-3">
Practical guide for organisations evaluating the framework for adoption.
</p>
<span class="text-blue-600 font-semibold group-hover:underline text-sm">Read &rarr;</span>
@ -397,12 +397,12 @@
</a>
<a href="/architectural-alignment-policymakers.html" class="block bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group">
<div class="bg-gradient-to-r from-purple-500 to-violet-600 p-4">
<div class="bg-gradient-to-r from-purple-500 to-violet-600 p-5">
<span class="bg-white/20 text-white text-xs font-semibold px-2 py-1 rounded-full">v2.1-P</span>
<h3 class="text-lg font-bold text-white mt-1">Policymakers</h3>
<h3 class="text-lg font-bold text-white mt-2">Policymakers</h3>
</div>
<div class="p-4">
<p class="text-sm text-gray-600 mb-2">
<div class="p-6">
<p class="text-sm text-gray-600 mb-3">
Regulatory strategy, certification infrastructure, and policy recommendations.
</p>
<span class="text-purple-600 font-semibold group-hover:underline text-sm">Read &rarr;</span>
@ -410,8 +410,8 @@
</a>
</div>
<div class="mt-5 text-center">
<p class="text-gray-500 text-sm mb-2">PDF downloads:</p>
<div class="mt-8 text-center">
<p class="text-gray-500 text-sm mb-3">PDF downloads:</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="/downloads/architectural-alignment-academic.pdf" class="inline-flex items-center gap-2 text-gray-600 hover:text-emerald-600 transition-colors text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -437,35 +437,35 @@
</section>
<!-- Section 7: Timeline Preview -->
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-3">Research Evolution</h2>
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Research Evolution</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto">
From a port number incident to a production governance architecture, across 800 commits and one year of research.
</p>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center mb-6">
<div class="bg-white rounded-xl shadow-md p-8 md:p-10 border border-gray-200">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center mb-8">
<div>
<div class="text-sm font-semibold text-blue-600 mb-1">Oct 2025</div>
<div class="text-sm font-semibold text-blue-600 mb-2">Oct 2025</div>
<div class="text-gray-700 text-sm">Framework inception &amp; 6 governance services</div>
</div>
<div>
<div class="text-sm font-semibold text-purple-600 mb-1">Oct-Nov 2025</div>
<div class="text-sm font-semibold text-purple-600 mb-2">Oct-Nov 2025</div>
<div class="text-gray-700 text-sm">Alexander principles, Agent Lightning, i18n</div>
</div>
<div>
<div class="text-sm font-semibold text-emerald-600 mb-1">Dec 2025</div>
<div class="text-sm font-semibold text-emerald-600 mb-2">Dec 2025</div>
<div class="text-gray-700 text-sm">Village case study &amp; Home AI deployment</div>
</div>
<div>
<div class="text-sm font-semibold text-gray-900 mb-1">Jan 2026</div>
<div class="text-sm font-semibold text-gray-900 mb-2">Jan 2026</div>
<div class="text-gray-700 text-sm">Research papers (3 editions) published</div>
</div>
</div>
<div class="text-center">
<a href="/timeline.html" class="inline-block px-6 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
<a href="/timeline.html" class="inline-block px-8 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
View the full research timeline &rarr;
</a>
</div>
@ -473,9 +473,9 @@
</section>
<!-- Intellectual Honesty Note -->
<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg">
<h2 class="text-lg font-bold text-amber-900 mb-2">A note on claims</h2>
<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
<h2 class="text-lg font-bold text-amber-900 mb-3">A note on claims</h2>
<p class="text-amber-800 text-sm leading-relaxed">
This is early-stage research with a single production implementation. We present preliminary evidence, not proven results. The framework has not been independently audited or adversarially tested at scale. Where we report operational metrics, they are self-reported. We believe the architectural approach merits further investigation, but we make no claims of generalisability beyond what the evidence supports. The
<a href="/korero-counter-arguments.html" class="text-amber-700 underline hover:text-amber-900">counter-arguments document</a> engages directly with foreseeable criticisms.
@ -484,14 +484,14 @@
</section>
<!-- Section: Koha — Sustain This Research -->
<section class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-10">
<section class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-16 md:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-2xl font-bold mb-3">Koha &mdash; Sustain This Research</h2>
<p class="text-base text-blue-100 max-w-2xl mx-auto mb-5">
<h2 class="text-2xl font-bold mb-4">Koha &mdash; Sustain This Research</h2>
<p class="text-base text-white max-w-2xl mx-auto mb-6">
<strong>Koha</strong> (koh-hah) is a M&#257;ori practice of reciprocal giving that strengthens the bond between giver and receiver. This research is open access under Apache 2.0 &mdash; if it has value to you, your koha sustains its continuation.
</p>
<div class="bg-white/10 backdrop-blur rounded-lg p-4 max-w-2xl mx-auto mb-6">
<p class="text-blue-100 text-sm mb-3">
<div class="bg-white/10 backdrop-blur rounded-lg p-6 max-w-2xl mx-auto mb-8">
<p class="text-white text-sm mb-4">
All research, documentation, and code remain freely available regardless of contribution. Koha is not payment &mdash; it is participation in <em>whanaungatanga</em> (relationship-building) and <em>manaakitanga</em> (reciprocal care).
</p>
<div class="flex flex-wrap gap-6 justify-center text-xs text-blue-200">
@ -504,7 +504,7 @@
class="inline-block bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:shadow-lg hover:-translate-y-1 transition-all duration-300 text-base">
Offer Koha &rarr;
</a>
<p class="text-xs text-blue-300 mt-4">
<p class="text-xs text-blue-300 mt-5">
<a href="/koha/transparency.html" class="text-blue-300 hover:text-white underline">View our financial transparency report</a>
</p>
</div>