tractatus/public/index.html
2026-03-14 18:22:11 +13:00

643 lines
42 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
<meta name="description" content="Architectural governance for AI systems. Some decisions require human judgment — enforced structurally, not left to AI discretion.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://agenticgovernance.digital/">
<meta property="og:title" content="Tractatus AI Safety Framework">
<meta property="og:description" content="Architectural constraints for human agency. Plural moral values enforced structurally, not aspirationally.">
<meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Tractatus Framework">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://agenticgovernance.digital/">
<meta name="twitter:title" content="Tractatus AI Safety Framework">
<meta name="twitter:description" content="Architectural constraints for human agency. Plural moral values enforced structurally, not aspirationally.">
<meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0ea5e9">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css?v=0.1.2.1773465731103">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1773465731103">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1773465731103">
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
</style>
</head>
<body class="bg-gray-50">
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Skip to main content</a>
<!-- Navigation -->
<div id="navbar-placeholder" class="min-h-16"></div>
<script src="/js/components/navbar.js?v=0.1.2.1773465731103"></script>
<!-- Hero Section -->
<header role="banner">
<section class="text-white bg-gradient-tractatus">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-20">
<div class="text-center">
<div class="flex justify-center mb-6">
<img src="/images/tractatus-icon-animated.svg"
alt="Tractatus Framework"
width="256" height="256" class="w-32 h-32 md:w-44 md:h-44"
loading="eager">
</div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight text-shadow-md" data-i18n="hero.title">
Architectural Governance for AI Systems
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed text-shadow-sm" data-i18n="hero.subtitle">
Some decisions require human judgment &mdash; architecturally enforced, not left to AI discretion, however well trained.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button data-research-papers-trigger
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1 cursor-pointer"
data-i18n="hero.cta_research">
Read the Research
</button>
<a href="/village-case-study.html"
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-emerald-700 text-white hover:bg-emerald-800 hover:shadow-lg hover:-translate-y-1"
data-i18n="hero.cta_production">
See It in Production
</a>
</div>
</div>
</div>
</section>
</header>
<main id="main-content" role="main">
<!-- What's New -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
<div class="text-center mb-8">
<span class="inline-block bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide mb-3" data-i18n="whats_new.badge">March 2026</span>
<h2 class="text-2xl font-bold text-gray-900" data-i18n="whats_new.heading">What&rsquo;s New</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="/blog-post.html?slug=guardian-agents-philosophy-of-ai-accountability" 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-600 to-emerald-600 p-4">
<span class="text-teal-100 text-xs font-semibold uppercase tracking-wide" data-i18n="whats_new.card1_label">New Research</span>
</div>
<div class="p-5">
<h3 class="font-bold text-gray-900 mb-2 group-hover:text-teal-700 transition" data-i18n="whats_new.card1_title">Guardian Agents and the Philosophy of AI Accountability</h3>
<p class="text-sm text-gray-600" data-i18n="whats_new.card1_desc">How Wittgenstein, Berlin, Ostrom, and Te Ao M&#257;ori converge on the same architectural requirements for governing AI in community contexts.</p>
</div>
</a>
<a href="/village-ai.html#guardian-agents" 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-600 to-purple-600 p-4">
<span class="text-indigo-100 text-xs font-semibold uppercase tracking-wide" data-i18n="whats_new.card2_label">Deployed</span>
</div>
<div class="p-5">
<h3 class="font-bold text-gray-900 mb-2 group-hover:text-indigo-700 transition" data-i18n="whats_new.card2_title">Guardian Agents in Production</h3>
<p class="text-sm text-gray-600" data-i18n="whats_new.card2_desc">Four-phase verification using mathematical similarity, not generative checking. Confidence badges, claim-level analysis, and adaptive learning &mdash; all tenant-scoped.</p>
</div>
</a>
<a href="/village-case-study.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-amber-500 to-orange-500 p-4">
<span class="text-amber-100 text-xs font-semibold uppercase tracking-wide" data-i18n="whats_new.card3_label">Case Study</span>
</div>
<div class="p-5">
<h3 class="font-bold text-gray-900 mb-2 group-hover:text-amber-700 transition" data-i18n="whats_new.card3_title">Village: Tractatus in Production</h3>
<p class="text-sm text-gray-600" data-i18n="whats_new.card3_desc">The first deployment of constitutional AI governance in a live community platform. Production metrics, honest limitations, and what we have learned since October 2025.</p>
</div>
</a>
</div>
</section>
<!-- The Problem -->
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="problem.heading">The Problem</h2>
</div>
<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-6 leading-relaxed" data-i18n="problem.intro">
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&rsquo;s training patterns conflict with a user&rsquo;s explicit instructions, the patterns win.
</p>
<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" data-i18n="problem.incident_title">The 27027 Incident</h3>
<p class="text-red-800" data-i18n="problem.incident_text">
A user told Claude Code to use port 27027. The model used 27017 instead &mdash; not from forgetting, but because MongoDB&rsquo;s default port is 27017, and the model&rsquo;s statistical priors &ldquo;autocorrected&rdquo; the explicit instruction. Training pattern bias overrode human intent.
</p>
</div>
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n="problem.corollary_summary">
The same mechanism operates in every AI conversation. When a user from a collectivist culture asks for family advice, the model defaults to Western individualist framing. When a M&#257;ori user asks about data guardianship, the model offers property-rights language. Training data distributions override user context &mdash; in code the failure is binary and detectable, in conversation it is gradient and invisible.
</p>
<div class="flex flex-wrap gap-4 items-center">
<a href="/docs.html?doc=pattern-bias-from-code-to-conversation" class="text-indigo-700 font-semibold hover:text-indigo-900 transition text-sm" data-i18n="problem.corollary_link">
Read the full analysis &rarr;
</a>
</div>
</div>
</div>
</section>
<!-- Section 2: The Philosophical Foundations -->
<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-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="approach.heading">The Approach</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto" data-i18n="approach.subtitle">
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-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" data-i18n="approach.berlin_title">Isaiah Berlin &mdash; Value Pluralism</h3>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="approach.berlin_text">
Some values are genuinely incommensurable. You cannot rank &ldquo;privacy&rdquo; against &ldquo;safety&rdquo; on a single scale without imposing one community&rsquo;s priorities on everyone else. AI systems must accommodate plural moral frameworks, not flatten them.
</p>
</div>
<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" data-i18n="approach.wittgenstein_title">Ludwig Wittgenstein &mdash; The Limits of the Sayable</h3>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="approach.wittgenstein_text">
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-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="approach.tiriti_title">Te Tiriti o Waitangi &mdash; Indigenous Sovereignty</h3>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="approach.tiriti_text">
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-6 shadow-sm border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="approach.alexander_title">Christopher Alexander &mdash; Living Architecture</h3>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="approach.alexander_text">
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-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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span data-i18n="approach.download_pdf">Download: The Philosophical Foundations of the Village Project (PDF)</span>
</a>
</div>
</div>
</section>
<!-- Governance Architecture -->
<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-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="services.heading">Governance Architecture</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto" data-i18n="services.subtitle">
Six governance services in the critical path, plus Guardian Agents verifying every AI response. Bypasses require explicit flags and are logged.
</p>
</div>
<!-- Guardian Agents — featured -->
<div class="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-xl p-6 md:p-8 border-2 border-teal-200 mb-8 max-w-5xl mx-auto">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-teal-600 to-emerald-600 flex items-center justify-center flex-shrink-0">
<svg class="w-7 h-7 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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<div>
<div class="flex items-center gap-3 mb-2">
<h3 class="text-xl font-bold text-gray-900" data-i18n="services.guardian_title">Guardian Agents</h3>
<span class="bg-emerald-100 text-emerald-800 text-xs font-semibold px-2 py-0.5 rounded-full" data-i18n="services.guardian_badge">NEW &mdash; March 2026</span>
</div>
<p class="text-gray-700 text-sm mb-4" data-i18n="services.guardian_desc">
Four-phase verification using embedding cosine similarity &mdash; mathematical measurement, not generative checking. The watcher operates in a fundamentally different epistemic domain from the system it watches, avoiding common-mode failure.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="bg-white rounded-lg p-3 border border-teal-100 text-center">
<div class="text-xs font-mono text-teal-700 mb-1">Phase 1</div>
<div class="text-xs text-gray-700 font-semibold" data-i18n="services.guardian_p1">Response Verification</div>
</div>
<div class="bg-white rounded-lg p-3 border border-teal-100 text-center">
<div class="text-xs font-mono text-teal-700 mb-1">Phase 2</div>
<div class="text-xs text-gray-700 font-semibold" data-i18n="services.guardian_p2">Claim-Level Analysis</div>
</div>
<div class="bg-white rounded-lg p-3 border border-teal-100 text-center">
<div class="text-xs font-mono text-teal-700 mb-1">Phase 3</div>
<div class="text-xs text-gray-700 font-semibold" data-i18n="services.guardian_p3">Anomaly Detection</div>
</div>
<div class="bg-white rounded-lg p-3 border border-teal-100 text-center">
<div class="text-xs font-mono text-teal-700 mb-1">Phase 4</div>
<div class="text-xs text-gray-700 font-semibold" data-i18n="services.guardian_p4">Adaptive Learning</div>
</div>
</div>
<div class="mt-4">
<a href="/village-ai.html" class="text-teal-700 font-semibold hover:text-teal-900 transition text-sm" data-i18n="services.guardian_cta">Full Guardian Agents architecture &rarr;</a>
</div>
</div>
</div>
</div>
<!-- Six Governance Services -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">BoundaryEnforcer</h3>
<p class="text-gray-600 text-sm" data-i18n="services.boundary_desc">
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-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">InstructionPersistenceClassifier</h3>
<p class="text-gray-600 text-sm" data-i18n="services.instruction_desc">
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-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">CrossReferenceValidator</h3>
<p class="text-gray-600 text-sm" data-i18n="services.validator_desc">
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-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">ContextPressureMonitor</h3>
<p class="text-gray-600 text-sm" data-i18n="services.pressure_desc">
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-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">MetacognitiveVerifier</h3>
<p class="text-gray-600 text-sm" data-i18n="services.metacognitive_desc">
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-5 border border-gray-200">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center mb-3">
<svg class="w-5 h-5 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-base font-semibold text-gray-900 mb-2">PluralisticDeliberationOrchestrator</h3>
<p class="text-gray-600 text-sm" data-i18n="services.deliberation_desc">
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-8">
<a href="/village-ai.html" class="inline-block px-8 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
<span data-i18n="services.cta">See the full architecture &rarr;</span>
</a>
</div>
</div>
</section>
<!-- Section 4: Production Evidence -->
<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-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" data-i18n="evidence.badge">Production Evidence</span>
<h2 class="text-2xl font-bold mb-4" data-i18n="evidence.heading">Tractatus in Production: The Village Platform</h2>
<p class="text-base text-teal-100 max-w-3xl mx-auto" data-i18n="evidence.subtitle">
Village AI applies all six governance services to every user interaction in a live community platform.
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white/10 backdrop-blur rounded-lg p-5 text-center">
<div class="text-3xl font-bold mb-2">4</div>
<div class="text-teal-200 text-sm" data-i18n="evidence.stat_guardian">Guardian verification phases per response</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-5 text-center">
<div class="text-3xl font-bold mb-2">6</div>
<div class="text-teal-200 text-sm" data-i18n="evidence.stat_services">Governance services in the critical path</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-5 text-center">
<div class="text-3xl font-bold mb-2">5</div>
<div class="text-teal-200 text-sm" data-i18n="evidence.stat_months">Months in production</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-5 text-center">
<div class="text-3xl font-bold mb-2">~5%</div>
<div class="text-teal-200 text-sm" data-i18n="evidence.stat_overhead">Governance overhead per interaction</div>
</div>
</div>
<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-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
<span data-i18n="evidence.cta_case_study">Technical Case Study &rarr;</span>
</a>
<a href="/village-ai.html"
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"
data-i18n="evidence.cta_village_ai">
About Village AI &rarr;
</a>
</div>
<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 data-i18n="evidence.limitations_label">Limitations:</strong> <span data-i18n="evidence.limitations_text">Early-stage deployment across four federated tenants, self-reported metrics, operator-developer overlap. Independent audit and broader validation scheduled for 2026.</span>
</p>
</div>
</div>
</section>
<!-- Section 5: Three Audience Paths -->
<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" data-i18n="roles.heading">Explore by Role</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto" data-i18n="roles.subtitle">
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-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-5">
<h3 class="text-xl font-bold text-white" data-i18n="roles.researcher_title">For Researchers</h3>
<p class="text-purple-100 text-sm mt-1" data-i18n="roles.researcher_subtitle">Academic and technical depth</p>
</div>
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li data-i18n="roles.researcher_f1">Formal foundations and proofs</li>
<li data-i18n="roles.researcher_f2">Failure mode analysis</li>
<li data-i18n="roles.researcher_f3">Open research questions</li>
<li data-i18n="roles.researcher_f4">Production audit data from live deployment</li>
</ul>
<div class="mt-5 text-purple-600 font-semibold group-hover:underline text-sm" data-i18n="roles.researcher_cta">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-5">
<h3 class="text-xl font-bold text-white" data-i18n="roles.implementer_title">For Implementers</h3>
<p class="text-indigo-100 text-sm mt-1" data-i18n="roles.implementer_subtitle">Code and integration guides</p>
</div>
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li data-i18n="roles.implementer_f1">Working code examples</li>
<li data-i18n="roles.implementer_f2">API integration patterns</li>
<li data-i18n="roles.implementer_f3">Service architecture diagrams</li>
<li data-i18n="roles.implementer_f4">Deployment patterns</li>
</ul>
<div class="mt-5 text-indigo-600 font-semibold group-hover:underline text-sm" data-i18n="roles.implementer_cta">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-5">
<h3 class="text-xl font-bold text-white" data-i18n="roles.leader_title">For Leaders</h3>
<p class="text-teal-100 text-sm mt-1" data-i18n="roles.leader_subtitle">Strategic AI governance</p>
</div>
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-700">
<li data-i18n="roles.leader_f1">Executive briefing and business case</li>
<li data-i18n="roles.leader_f2">Regulatory alignment (EU AI Act)</li>
<li data-i18n="roles.leader_f3">Implementation roadmap</li>
<li data-i18n="roles.leader_f4">Risk management framework</li>
</ul>
<div class="mt-5 text-teal-700 font-semibold group-hover:underline text-sm" data-i18n="roles.leader_cta">View leadership resources &rarr;</div>
</div>
</a>
</div>
</section>
<!-- Section 6: Research Papers -->
<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-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="papers.heading">Architectural Alignment</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto" data-i18n="papers.subtitle">
The research paper in three editions, each written for a different audience.
</p>
<p class="text-sm text-gray-600 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-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-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-2" data-i18n="papers.academic_title">Academic</h3>
</div>
<div class="p-6">
<p class="text-sm text-gray-600 mb-3" data-i18n="papers.academic_desc">
Full academic treatment with formal proofs, existential risk context, and comprehensive citations.
</p>
<span class="text-emerald-700 font-semibold group-hover:underline text-sm" data-i18n="papers.read_cta">Read &rarr;</span>
</div>
</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-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-2" data-i18n="papers.community_title">Community</h3>
</div>
<div class="p-6">
<p class="text-sm text-gray-600 mb-3" data-i18n="papers.community_desc">
Practical guide for organisations evaluating the framework for adoption.
</p>
<span class="text-blue-600 font-semibold group-hover:underline text-sm" data-i18n="papers.read_cta">Read &rarr;</span>
</div>
</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-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-2" data-i18n="papers.policymakers_title">Policymakers</h3>
</div>
<div class="p-6">
<p class="text-sm text-gray-600 mb-3" data-i18n="papers.policymakers_desc">
Regulatory strategy, certification infrastructure, and policy recommendations.
</p>
<span class="text-purple-600 font-semibold group-hover:underline text-sm" data-i18n="papers.read_cta">Read &rarr;</span>
</div>
</a>
</div>
<div class="mt-8 text-center">
<p class="text-gray-600 text-sm mb-3" data-i18n="papers.pdf_label">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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span data-i18n="papers.pdf_academic">Academic</span>
</a>
<a href="/downloads/architectural-alignment-community.pdf" class="inline-flex items-center gap-2 text-gray-600 hover:text-blue-600 transition-colors text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span data-i18n="papers.pdf_community">Community</span>
</a>
<a href="/downloads/architectural-alignment-policymakers.pdf" class="inline-flex items-center gap-2 text-gray-600 hover:text-purple-600 transition-colors text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span data-i18n="papers.pdf_policymakers">Policymakers</span>
</a>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="max-w-6xl 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" data-i18n="timeline.heading">Research Evolution</h2>
<p class="text-base text-gray-600 max-w-3xl mx-auto" data-i18n="timeline.subtitle">
From a port number incident to Guardian Agents in production &mdash; five months, 3,400+ commits across both projects.
</p>
</div>
<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-3 gap-6 text-center mb-8">
<div>
<div class="text-sm font-semibold text-blue-600 mb-2" data-i18n="timeline.date_oct_2025">Oct 2025</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.oct_2025">Framework inception &amp; 6 governance services</div>
</div>
<div>
<div class="text-sm font-semibold text-purple-600 mb-2" data-i18n="timeline.date_oct_nov_2025">Oct-Nov 2025</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.oct_nov_2025">Alexander principles, Agent Lightning, i18n</div>
</div>
<div>
<div class="text-sm font-semibold text-emerald-700 mb-2" data-i18n="timeline.date_dec_2025">Dec 2025</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.dec_2025">Village case study &amp; Village AI deployment</div>
</div>
<div>
<div class="text-sm font-semibold text-gray-900 mb-2" data-i18n="timeline.date_jan_2026">Jan 2026</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.jan_2026">Research papers (3 editions) published</div>
</div>
<div>
<div class="text-sm font-semibold text-indigo-600 mb-2" data-i18n="timeline.date_feb_2026">Feb 2026</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.feb_2026">Sovereign training, steering vectors research</div>
</div>
<div>
<div class="text-sm font-semibold text-teal-700 mb-2" data-i18n="timeline.date_mar_2026">Mar 2026</div>
<div class="text-gray-700 text-sm" data-i18n="timeline.mar_2026">Guardian Agents deployed, beta pilot open</div>
</div>
</div>
<div class="text-center">
<a href="/timeline.html" class="inline-block px-8 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
<span data-i18n="timeline.cta">View the full research timeline &rarr;</span>
</a>
</div>
</div>
</section>
<!-- Intellectual Honesty Note -->
<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-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" data-i18n="claims.heading">A note on claims</h2>
<p class="text-amber-800 text-sm leading-relaxed">
<span data-i18n="claims.text">This is early-stage research with a small-scale federated deployment across four tenants. 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</span>
<a href="/korero-counter-arguments.html" class="text-amber-700 underline hover:text-amber-900" data-i18n="claims.counter_link">counter-arguments document</a> <span data-i18n="claims.counter_suffix">engages directly with foreseeable criticisms.</span>
</p>
</div>
</section>
<!-- Section: Koha — Sustain This Research -->
<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-4" data-i18n="koha.heading">Koha &mdash; Sustain This Research</h2>
<p class="text-base text-white max-w-2xl mx-auto mb-6" data-i18n="koha.intro">
<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-6 max-w-2xl mx-auto mb-8">
<p class="text-white text-sm mb-4" data-i18n="koha.explanation">
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">
<span data-i18n="koha.option_1">One-time or monthly</span>
<span data-i18n="koha.option_2">Full financial transparency</span>
<span data-i18n="koha.option_3">No paywall, ever</span>
</div>
</div>
<a href="/koha.html"
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"
data-i18n="koha.cta">
Offer Koha &rarr;
</a>
<p class="text-sm text-blue-300 mt-8">
<a href="/koha/transparency.html" class="inline-block py-2 text-blue-300 hover:text-white underline" data-i18n="koha.transparency_link">View our financial transparency report</a>
</p>
</div>
</section>
</main>
<!-- Version Management -->
<script src="/js/version-manager.js?v=0.1.2.1773465731103"></script>
<!-- Share CTA functionality -->
<script src="/js/share-cta.js?v=0.1.2.1773465731103"></script>
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.2.1773465731103"></script>
<script src="/js/components/language-selector.js?v=0.1.2.1773465731103"></script>
<!-- Scroll Animations -->
<script src="/js/scroll-animations.js?v=0.1.2.1773465731103"></script>
<script src="/js/page-transitions.js?v=0.1.2.1773465731103"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js?v=0.1.2.1773465731103"></script>
<!-- Feedback System -->
<script src="/js/components/feedback.js?v=0.1.2.1773465731103"></script>
<!-- Newsletter Subscription Modal -->
<script src="/js/components/newsletter.js?v=0.1.2.1773465731103"></script>
</body>
</html>