From 3851d39edf2e5b3d7b0def725e9e5d93ee12a365 Mon Sep 17 00:00:00 2001
From: kabudu <3732230+kabudu@users.noreply.github.com>
Date: Sun, 9 Aug 2026 17:44:28 +0100
Subject: [PATCH] site: clarify mobile architecture scrolling

---
 scripts/validate-pages-site.py |  3 +++
 site/index.html                |  5 +++--
 site/styles.css                | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/scripts/validate-pages-site.py b/scripts/validate-pages-site.py
index eb11a6a..d4a9acf 100644
--- a/scripts/validate-pages-site.py
+++ b/scripts/validate-pages-site.py
@@ -111,6 +111,8 @@ def main() -> int:
         "<title>Telosieve | Question the instruction</title>",
         'property="og:url" content="https://kabudu.github.io/telosieve/"',
         'property="og:image" content="https://kabudu.github.io/telosieve/assets/social-card-1200x630.png"',
+        'figure tabindex="0" aria-describedby="architecture-scroll-instruction architecture-caption"',
+        'id="architecture-scroll-instruction"',
     ):
         if phrase not in html_text:
             errors.append(f"site metadata missing: {phrase}")
@@ -138,6 +140,7 @@ def main() -> int:
         ("980 px breakpoint", r"@media\s*\(\s*max-width:\s*980px\s*\)"),
         ("620 px breakpoint", r"@media\s*\(\s*max-width:\s*620px\s*\)"),
         ("reduced motion", r"prefers-reduced-motion\s*:\s*reduce"),
+        ("architecture keyboard focus", r"\.architecture\s+figure:focus-visible"),
     ):
         if re.search(pattern, css) is None:
             errors.append(f"responsive/accessibility CSS missing: {label}")
diff --git a/site/index.html b/site/index.html
index d1ba015..49ad5cf 100644
--- a/site/index.html
+++ b/site/index.html
@@ -71,9 +71,10 @@ <h2>A valid signature does not make an instruction true.</h2>
         <h2>One instruction. Several possible realities.</h2>
         <p>Telosieve accepts a result only after it survives the declared faults and an independent viability check.</p>
       </div>
-      <figure>
+      <p class="architecture-scroll-note" id="architecture-scroll-instruction">Swipe or use the arrow keys to explore the full architecture <span aria-hidden="true">→</span></p>
+      <figure tabindex="0" aria-describedby="architecture-scroll-instruction architecture-caption">
         <img src="assets/telosieve-architecture.svg" width="1600" height="920" alt="Goal instructions, corroborated observations, and viability rules remain separate. Telosieve verifies provenance, tests declared fault hypotheses, independently checks every surviving plan, and emits either a bounded certificate or an explicit refusal while retaining evidence.">
-        <figcaption>Current integration modes are read-only. A certificate records a bounded evaluation result; it does not authorize production actuation.</figcaption>
+        <figcaption id="architecture-caption">Current integration modes are read-only. A certificate records a bounded evaluation result; it does not authorize production actuation.</figcaption>
       </figure>
     </section>
 
diff --git a/site/styles.css b/site/styles.css
index 4f4c6e2..61962a5 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -363,6 +363,13 @@ p {
 .architecture figure {
   margin: 0;
 }
+.architecture-scroll-note {
+  display: none;
+}
+.architecture figure:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 4px;
+}
 .architecture figure img {
   display: block;
   width: 100%;
@@ -665,6 +672,17 @@ footer p {
   .architecture .section-intro {
     padding: 0 18px;
   }
+  .architecture-scroll-note {
+    align-items: center;
+    color: var(--cyan);
+    display: flex;
+    font-size: 12px;
+    font-weight: 700;
+    gap: 8px;
+    letter-spacing: 0.08em;
+    margin: -28px 18px 18px;
+    text-transform: uppercase;
+  }
   .architecture figure img {
     border-radius: 0;
     min-width: 800px;