c9feaf3f26
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>
539 lines
30 KiB
HTML
539 lines
30 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="apple-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">
|
|
<link rel="stylesheet" href="/css/tailwind.css">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
|
<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">Skip to main content</a>
|
|
|
|
<!-- Navigation -->
|
|
<div id="navbar-placeholder" class="min-h-16"></div>
|
|
<script src="/js/components/navbar.js"></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 py-14">
|
|
<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">
|
|
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">
|
|
Some decisions require human judgment — architecturally enforced, not left to AI discretion, however well trained.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/architectural-alignment.html"
|
|
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">
|
|
Read the Research
|
|
</a>
|
|
<a href="/village-case-study.html"
|
|
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-emerald-500 text-white hover:bg-emerald-600 hover:shadow-lg hover:-translate-y-1">
|
|
See It in Production
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<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-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-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">
|
|
Current AI safety approaches rely on training, fine-tuning, and corporate governance — 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-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 — 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>
|
|
</div>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
This is not an edge case. It is a category of failure that gets worse as models become more capable: stronger patterns produce more confident overrides. Safety through training alone is insufficient — the failure mode is structural, and the solution must be structural.
|
|
</p>
|
|
</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">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-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 — 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-6 shadow-sm border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Ludwig Wittgenstein — 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 — involving values, ethics, cultural context — fundamentally cannot. The boundary between the “sayable” (what can be specified, measured, verified) and what lies beyond it is the framework’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">Te Tiriti o Waitangi — 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-6 shadow-sm border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Christopher Alexander — 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-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>
|
|
Download: The Philosophical Foundations of the Village Project (PDF)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: The 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">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 — bypasses require explicit flags and are logged.
|
|
</p>
|
|
</div>
|
|
|
|
<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-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 — architecturally enforced.
|
|
</p>
|
|
</div>
|
|
|
|
<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-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-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-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-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-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-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-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-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-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-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 →
|
|
</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">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-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-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-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-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">
|
|
Technical Case Study →
|
|
</a>
|
|
<a href="/home-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">
|
|
About Home AI →
|
|
</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>Limitations:</strong> Single implementation, self-reported metrics, operator-developer overlap. Independent audit and multi-site validation scheduled for 2026.
|
|
</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">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-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">For Researchers</h3>
|
|
<p class="text-purple-100 text-sm mt-1">Academic and technical depth</p>
|
|
</div>
|
|
<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-5 text-purple-600 font-semibold group-hover:underline text-sm">Explore research →</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">For Implementers</h3>
|
|
<p class="text-indigo-100 text-sm mt-1">Code and integration guides</p>
|
|
</div>
|
|
<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-5 text-indigo-600 font-semibold group-hover:underline text-sm">View implementation guide →</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">For Leaders</h3>
|
|
<p class="text-teal-100 text-sm mt-1">Strategic AI governance</p>
|
|
</div>
|
|
<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-5 text-teal-600 font-semibold group-hover:underline text-sm">View leadership resources →</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">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-2">STO-INN-0003 v2.1 | John Stroh & 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">Academic</h3>
|
|
</div>
|
|
<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 →</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">Community</h3>
|
|
</div>
|
|
<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 →</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">Policymakers</h3>
|
|
</div>
|
|
<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 →</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<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">
|
|
<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>
|
|
Academic
|
|
</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>
|
|
Community
|
|
</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>
|
|
Policymakers
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 7: Timeline Preview -->
|
|
<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-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-2">Oct 2025</div>
|
|
<div class="text-gray-700 text-sm">Framework inception & 6 governance services</div>
|
|
</div>
|
|
<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-2">Dec 2025</div>
|
|
<div class="text-gray-700 text-sm">Village case study & Home AI deployment</div>
|
|
</div>
|
|
<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-8 py-3 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition">
|
|
View the full research timeline →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Intellectual Honesty Note -->
|
|
<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.
|
|
</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">Koha — 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āori practice of reciprocal giving that strengthens the bond between giver and receiver. This research is open access under Apache 2.0 — 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">
|
|
All research, documentation, and code remain freely available regardless of contribution. Koha is not payment — 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>One-time or monthly</span>
|
|
<span>Full financial transparency</span>
|
|
<span>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">
|
|
Offer Koha →
|
|
</a>
|
|
<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>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Version Management -->
|
|
<script src="/js/version-manager.js"></script>
|
|
|
|
<!-- Share CTA functionality -->
|
|
<script src="/js/share-cta.js"></script>
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js"></script>
|
|
<script src="/js/components/language-selector.js"></script>
|
|
|
|
<!-- Scroll Animations -->
|
|
<script src="/js/scroll-animations.js"></script>
|
|
<script src="/js/page-transitions.js"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js"></script>
|
|
|
|
<!-- Feedback System -->
|
|
<script src="/js/components/feedback.js"></script>
|
|
|
|
<!-- Newsletter Subscription Modal -->
|
|
<script src="/js/components/newsletter.js"></script>
|
|
|
|
</body>
|
|
</html>
|