Release 0.3.5

The relay's ack path is drawn under the stroke when the key's version
nibble is >= 2 (ADR-0014's ordered turning chain decodes to the
stroke itself); a v1 key's blob stays hidden. Safe to ship ahead of
the relay: nothing shows until the relay encodes v2.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitea/workflows/deploy.yml

@@ -1,133 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  deploy:
-    runs-on: bare
-    env:
-      # The bare runner's own systemd service intentionally has a minimal
-      # PATH/HOME (no rustup default toolchain in reach) - point it at the
-      # shared toolchain install directly rather than assuming an ambient
-      # dev shell environment.
-      CARGO_HOME: /var/local/cargo
-      RUSTUP_HOME: /var/local/rustup
-      PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
-      # Shared with interactive dev builds (see ~/.config/fish/config.fish)
-      # so a crate compiled once, by either a manual build or CI, is
-      # cached for the other - real cache hits, not just a warm toolchain.
-      # SCCACHE_SERVER_PORT deliberately differs from the interactive
-      # dev shell's (4227): sccache's server is discovered by a fixed
-      # TCP port shared by every local user, so if both contexts used
-      # the same port, whichever one's server happened to be running
-      # would silently "win" and serve build requests it doesn't have
-      # filesystem permission for. Separate ports keep each context's
-      # own server answering its own requests; the cache directory
-      # (not the server process) is what's actually shared.
-      SCCACHE_DIR: /var/local/sccache
-      SCCACHE_SERVER_PORT: "4228"
-      CARGO_TARGET_DIR: /var/local/cargo-target
-      # cargo-leptos's own downloaded tools (wasm-bindgen, wasm-opt) cache
-      # under $XDG_CACHE_HOME - left at its default that resolves inside
-      # this unit's systemd StateDirectory, files it creates there end up
-      # owned by the kernel's overflow "nobody" uid instead of the
-      # runner's own dynamic uid (a StateDirectory quirk, not something
-      # in our control), so a later run can't execute what an earlier run
-      # downloaded. Redirecting it to our own known-good shared dir avoids
-      # that entirely.
-      XDG_CACHE_HOME: /var/local/leptos-cache
-    steps:
-      - uses: actions/checkout@v4
-
-      # SITE_NAME is read via option_env! (src/app.rs) - compile-time,
-      # not a runtime env var - so it has to be set here, not just in
-      # the "Write service env" step below.
-      - name: Build
-        run: SITE_NAME=${{ vars.PORTAL_SITE_NAME }} cargo leptos build --release
-
-      # cargo-leptos only builds the leptos bin-target ("portal") - the
-      # question-lint utility binary needs its own plain cargo build.
-      - name: Build question-lint
-        run: cargo build --release --bin question_lint --features ssr
-
-      - name: Ship release
-        run: |
-          set -euo pipefail
-          rel="/srv/app/uhhm-portal/releases/${{ github.sha }}"
-          mkdir -p "$rel"
-          cp "$CARGO_TARGET_DIR/release/portal" "$rel/uhhm-portal"
-          # questions' own CI execs this directly by path (same bare-metal
-          # runner/host as this job, no artifact download needed) instead
-          # of running its own hand-maintained yq/jq subset of these rules.
-          cp "$CARGO_TARGET_DIR/release/question_lint" "$rel/question_lint"
-          # site-root ("target/site" in Cargo.toml) is project-relative,
-          # not affected by CARGO_TARGET_DIR - only the plain `cargo build`
-          # outputs (release/, front/) move with that override.
-          cp -r target/site "$rel/site"
-          ln -sfn "$rel" /srv/app/uhhm-portal/current
-
-      # Sourced from this repo's own Settings -> Actions Variables/Secrets,
-      # not typed onto the host by hand - see the infrastructure repo's
-      # deploy-runner plan for the exact names/values to configure once.
-      - name: Write service env
-        run: |
-          cat > /etc/app/uhhm-portal.env <<EOF
-          NATS_URL=${{ secrets.PORTAL_NATS_URL }}
-          KANIDM_URL=${{ vars.PORTAL_KANIDM_URL }}
-          OAUTH2_CLIENT_ID=${{ vars.PORTAL_OAUTH2_CLIENT_ID }}
-          OAUTH2_CLIENT_SECRET=${{ secrets.PORTAL_OAUTH2_CLIENT_SECRET }}
-          PUBLIC_URL=${{ vars.PORTAL_PUBLIC_URL }}
-          COOKIE_SECURE=true
-          CONTENT_REPO=https://project.uhhm.no/uhhm/questions
-          CONTENT_BRANCH=main
-          SITE_NAME=${{ vars.PORTAL_SITE_NAME }}
-          LEPTOS_SITE_ADDR=0.0.0.0:3010
-          # Cargo.toml's site-root ("target/site") is a build-time path;
-          # the deploy layout copies the bundle to releases/<sha>/site
-          # (no target/ prefix) - override so the running binary looks
-          # in the right place for /pkg/*.
-          LEPTOS_SITE_ROOT=site
-          AUTOMATION_READ_TOKEN=${{ secrets.PORTAL_AUTOMATION_READ_TOKEN }}
-          # Read-only (read:user,read:repository,read:organization),
-          # used only by the GiteaStarred/GiteaOrgRepos resource sources
-          # (src/resource.rs) - the repo-contents/repo-info calls
-          # content loading already makes stay anonymous.
-          GITEA_API_TOKEN=${{ secrets.PORTAL_GITEA_API_TOKEN }}
-          EOF
-
-      # No sudo: the runner's own unit sets NoNewPrivileges=yes, which
-      # blocks setuid escalation outright (sudo can't work at all under
-      # it, regardless of sudoers config) - systemctl talks to PID1 over
-      # D-Bus instead, authorized by a polkit rule scoped to deploy-runner
-      # + this unit pattern (see /etc/polkit-1/rules.d/10-deploy-runner.rules
-      # on the host).
-      - name: Restart service
-        run: systemctl restart app@uhhm-portal.service
-
-      # No sudo here either - the runner is already in the `docker` group,
-      # so it can talk to the Docker socket directly.
-      # Apex and www are separate cookie scopes (no shared Domain
-      # attribute on the session cookie), but Kanidm's redirect_uri is
-      # fixed to PUBLIC_URL - a login started on the other host set its
-      # session cookie there, then landed on PUBLIC_URL's callback with
-      # an empty session ("no login in progress"). Redirecting www to
-      # the naked domain keeps every visit on one canonical host
-      # instead - PUBLIC_URL (repo variable) is set to https://{$DOMAIN}
-      # to match.
-      - name: Update Caddy routing
-        run: |
-          cat > /etc/caddy/services.d/uhhm-portal.caddy <<'EOF'
-          www.{$DOMAIN} {
-          	redir https://{$DOMAIN}{uri} permanent
-          }
-
-          {$DOMAIN} {
-          	reverse_proxy host.docker.internal:3010
-          	log {
-          		output file /var/log/caddy/www.log
-          	}
-          }
-          EOF
-          docker exec caddy caddy reload --config /etc/caddy/Caddyfile --adapter caddyfile

.gitea/workflows/publish.yml

@@ -0,0 +1,104 @@
+name: Publish release
+
+# Portal does not deploy itself. Cutting a version is deliberate:
+# `cargo release <level>` bumps Cargo.toml, commits, tags v<semver>,
+# and pushes; this workflow reacts to the tag and publishes the
+# artifact as a Gitea release. Each content repo (uhhm/questions,
+# redoal/questions) pins PORTAL_RELEASE to one of these tags in its
+# own deploy workflow - bumping the pin there is what rolls a version
+# out to a site. Plain main pushes only run test.yml.
+
+on:
+  push:
+    tags: ["v*"]
+
+jobs:
+  publish:
+    runs-on: bare
+    env:
+      # The bare runner's own systemd service intentionally has a minimal
+      # PATH/HOME (no rustup default toolchain in reach) - point it at the
+      # shared toolchain install directly rather than assuming an ambient
+      # dev shell environment.
+      CARGO_HOME: /var/local/cargo
+      RUSTUP_HOME: /var/local/rustup
+      PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
+      # Shared with interactive dev builds (see ~/.config/fish/config.fish)
+      # so a crate compiled once, by either a manual build or CI, is
+      # cached for the other - real cache hits, not just a warm toolchain.
+      # SCCACHE_SERVER_PORT deliberately differs from the interactive
+      # dev shell's (4227): sccache's server is discovered by a fixed
+      # TCP port shared by every local user, so if both contexts used
+      # the same port, whichever one's server happened to be running
+      # would silently "win" and serve build requests it doesn't have
+      # filesystem permission for. Separate ports keep each context's
+      # own server answering its own requests; the cache directory
+      # (not the server process) is what's actually shared.
+      SCCACHE_DIR: /var/local/sccache
+      SCCACHE_SERVER_PORT: "4228"
+      CARGO_TARGET_DIR: /var/local/cargo-target
+      # cargo-leptos's own downloaded tools (wasm-bindgen, wasm-opt) cache
+      # under $XDG_CACHE_HOME - left at its default that resolves inside
+      # this unit's systemd StateDirectory, files it creates there end up
+      # owned by the kernel's overflow "nobody" uid instead of the
+      # runner's own dynamic uid (a StateDirectory quirk, not something
+      # in our control), so a later run can't execute what an earlier run
+      # downloaded. Redirecting it to our own known-good shared dir avoids
+      # that entirely.
+      XDG_CACHE_HOME: /var/local/leptos-cache
+    steps:
+      - uses: actions/checkout@v4
+
+      # SITE_NAME is read via option_env! (src/app.rs) - compile-time,
+      # not a runtime env var. It is only the last-resort fallback name:
+      # each instance's site.yaml (content-driven branding) overrides it,
+      # so one artifact serves every site.
+      - name: Build
+        run: SITE_NAME=${{ vars.PORTAL_SITE_NAME }} cargo leptos build --release
+
+      # cargo-leptos only builds the leptos bin-target ("portal") - the
+      # question-lint utility binary needs its own plain cargo build.
+      - name: Build question-lint
+        run: cargo build --release --bin question_lint --features ssr
+
+      - name: Package
+        run: |
+          set -euo pipefail
+          tag="${{ github.ref_name }}"
+          stage=$(mktemp -d)
+          cp "$CARGO_TARGET_DIR/release/portal" "$stage/portal"
+          cp "$CARGO_TARGET_DIR/release/question_lint" "$stage/question_lint"
+          # hash-files = true: leptos resolves hash.txt next to the running
+          # binary, so it ships beside portal in the release dir.
+          cp "$CARGO_TARGET_DIR/release/hash.txt" "$stage/hash.txt"
+          # site-root ("target/site" in Cargo.toml) is project-relative,
+          # not affected by CARGO_TARGET_DIR - only the plain `cargo build`
+          # outputs (release/, front/) move with that override.
+          cp -r target/site "$stage/site"
+          tar -C "$stage" -czf "portal-$tag.tar.gz" portal question_lint hash.txt site
+          rm -rf "$stage"
+
+      # The run's own ephemeral token has write access to this repo -
+      # no long-lived PAT to manage. The tag already exists (cargo
+      # release pushed it), so the release attaches to it; a re-run
+      # finds the existing release instead of failing.
+      - name: Publish release
+        run: |
+          set -euo pipefail
+          tag="${{ github.ref_name }}"
+          api="${{ github.server_url }}/api/v1/repos/${{ github.repository }}"
+          auth="Authorization: token ${{ secrets.GITHUB_TOKEN }}"
+          subject=$(git log -1 --format=%s)
+          body=$(printf '{"tag_name":"%s","name":"%s"}' \
+            "$tag" "$tag: $(echo "$subject" | sed 's/"/\\"/g')")
+          id=$(curl -sf -X POST -H "$auth" -H 'Content-Type: application/json' \
+            -d "$body" "$api/releases" | jq .id) \
+            || id=$(curl -sf -H "$auth" "$api/releases/tags/$tag" | jq .id)
+          # Replace the asset if a re-run already uploaded one.
+          for aid in $(curl -sf -H "$auth" "$api/releases/$id/assets" | jq '.[].id'); do
+            curl -sf -X DELETE -H "$auth" "$api/releases/$id/assets/$aid"
+          done
+          curl -sf -X POST -H "$auth" \
+            -F "attachment=@portal-$tag.tar.gz" \
+            "$api/releases/$id/assets?name=portal-$tag.tar.gz" > /dev/null
+          echo "published $tag"

.gitea/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Test
+
+# Publishing only happens on v* tags (publish.yml), so this is what
+# keeps plain main pushes honest between releases.
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: bare
+    env:
+      # Same shared-toolchain/cache story as publish.yml.
+      CARGO_HOME: /var/local/cargo
+      RUSTUP_HOME: /var/local/rustup
+      PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
+      SCCACHE_DIR: /var/local/sccache
+      SCCACHE_SERVER_PORT: "4228"
+      CARGO_TARGET_DIR: /var/local/cargo-target
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Test
+        run: cargo test --features ssr

.gitignore

@@ -1 +1,2 @@
 /target
+.claude/

Cargo.lock

@@ -2948,7 +2948,7 @@ dependencies = [
 
 [[package]]
 name = "portal"
-version = "0.1.0"
+version = "0.3.5"
 dependencies = [
  "anyhow",
  "arc-swap",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "portal"
-version = "0.1.0"
+version = "0.3.5"
 edition = "2021"
 
 [lib]
@@ -19,7 +19,7 @@ axum = { version = "0.8", features = ["multipart"], optional = true }
 aws-sdk-s3 = { version = "1", optional = true }
 tokio = { version = "1", features = ["rt-multi-thread", "macros", "signal"], optional = true }
 tower = { version = "0.5", optional = true }
-tower-http = { version = "0.6", features = ["fs"], optional = true }
+tower-http = { version = "0.6", features = ["fs", "set-header"], optional = true }
 tower-sessions = { version = "0.14", optional = true }
 async-nats = { version = "0.38", optional = true }
 arc-swap = { version = "1", optional = true }
@@ -131,3 +131,18 @@ bin-default-features = false
 lib-features = ["hydrate"]
 lib-default-features = false
 lib-profile-release = "wasm-release"
+# Content-hashed pkg names (portal.<hash>.js/wasm/css) + hash.txt: a
+# freshly served page can never reference a stale cached bundle - an
+# iPhone kept a heuristically-cached portal.js across three releases
+# and paired it with new wasm, silently killing hydration. Runtime
+# needs LEPTOS_HASH_FILES=true (set in each content repo's deploy env).
+hash-files = true
+
+# cargo release <level> is how a portal version is cut: bump, commit,
+# tag v{{version}}, push. CI (publish.yml) reacts to the tag and
+# publishes the release artifact; nothing on crates.io.
+[package.metadata.release]
+publish = false
+push = true
+tag-name = "v{{version}}"
+pre-release-commit-message = "Release {{version}}"

README.md

@@ -1,17 +1,44 @@
 # portal
 
-The question runtime behind [uhhm.no](https://uhhm.no). Every page,
+A content-driven question engine: one Rust binary that turns a Git
-form, review desk, and state machine it serves is declared in the
+repo of YAML into a live site — pages, forms, review desks, and state
-[`questions`](https://project.uhhm.no/uhhm/questions) content repo —
+machines, with a durable event-sourced record of every answer
-this codebase is the engine that renders, enforces, and records, and
+underneath. The engine special-cases nothing: everything a site
-it special-cases none of it.
+serves is declared in its content repo, and the same build serves any
+number of sites.
+
+Point an instance at a content repo and that repo *is* the site:
+pages, copy, state graphs, branding, and even the landing hero
+(`site.yaml`: title, wordmark, and `hero: {kind: module, module:
+hero.js}` — a JavaScript module the content repo ships, served
+same-origin at `/site/<path>`, that portal mounts at parse time and
+stops on navigation; the YES canvas and redoal's sine swings are both
+content, not engine). Content
+pushes hot-reload every running instance; instances differ only by
+env vars. [uhhm.no](https://uhhm.no)
+([uhhm/questions](https://project.uhhm.no/uhhm/questions)) and
+[redoal.com](https://redoal.com)
+([redoal/questions](https://project.uhhm.no/redoal/questions)) are
+two faces of the same binary, deployed from the same release
+artifact.
+
+It composes with the surrounding stack rather than bundling it: Gitea
+hosts and serves the content, NATS JetStream stores events and
+projections, Kanidm provides identity, and anything downstream
+(automations, newsletters, onboarding) subscribes to the answer
+stream.
 
 ## What the engine provides
 
 - **Content-driven pages** (`src/content.rs`, `src/app.rs`): YAML
   loaded from Gitea at boot and hot-swapped on a NATS reload signal;
-  a bad push keeps the last-good content serving. A page's `id` is
+  a bad push keeps the last-good content serving. The `questions/`
-  its URL; `qualifies` gates it to a Kanidm group.
+  tree IS the router — file paths become URLs, `_section.yaml`
+  applies criteria to a whole directory, `[name].yaml` pages serve
+  any `/dir/<value>` with the segment fed into resource keys, and
+  `requires_chain` gates a page on verifiable answer provenance next
+  to `qualifies`' Kanidm-group identity gate (see
+  `docs/design/filesystem-routes.md`).
 - **State machines as content** (`src/aggregates/`): `aggregates.yaml`
   declares each bucket's states and legal transitions; the engine
   replays a record's event history and refuses undeclared moves, with
@@ -28,8 +55,13 @@ it special-cases none of it.
   lineage; `?chain=` links carry it, and self-service transitions
   (unsubscribe) authorize by holding one.
 - **Live resources** (`src/resource.rs`): content can pull a KV
-  bucket, Gitea starred/org repos, or any public JSON URL (SSRF
+  bucket, Gitea starred/org repos/releases, or any public JSON URL
-  fail-closed), reshaped by a content-declared `jq` filter.
+  (SSRF fail-closed), reshaped by a content-declared `jq` filter.
+- **Input kinds as content**: a requirement's `type:` picks the
+  widget — plain fields, a rich-text editor, or a `gesture` drawing
+  canvas that can connect to a redoal relay so similar strokes echo
+  between visitors live. Submitted values are arbitrary JSON; the
+  engine records what the widget produced.
 - **Review desks**: any Kv resource with `transitions` renders rows
   with per-state action buttons and one shared confirm per
   alternative — owners walk records through their graphs without
@@ -38,9 +70,10 @@ it special-cases none of it.
 ## Binaries
 
 - `portal` — the server (Leptos SSR + hydrate, Axum underneath).
-- `question_lint` — headless content validation, run by the
+- `question_lint` — headless content validation, shipped inside every
-  `questions` repo's CI against a prebuilt copy this repo's deploy
+  release artifact so each content repo's CI lints with the exact
-  publishes; also works offline: `question_lint --path <dir>`.
+  portal version its instance runs; also works offline:
+  `question_lint --path <dir>`.
 
 ## Development
 
@@ -50,17 +83,58 @@ cargo test --features ssr     # engine tests
 cargo build --features ssr --bin question_lint
 ```
 
-Runtime configuration is env vars (see `src/main.rs` and
+Runtime configuration is env vars (see `src/main.rs`, and each
-`.gitea/workflows/deploy.yml`): `NATS_URL`, `CONTENT_REPO`/
+content repo's `.gitea/workflows/deploy.yml` for the values in
-`CONTENT_BRANCH`, Kanidm OIDC (`KANIDM_URL`, `OAUTH2_CLIENT_*`),
+production): `NATS_URL`, `CONTENT_REPO`/`CONTENT_BRANCH`, Kanidm OIDC
-optional `GARAGE_*` for uploads, `GITEA_API_TOKEN` for authenticated
+(`KANIDM_URL`, `OAUTH2_CLIENT_*`), optional `GARAGE_*` for uploads,
-resource pulls, `AUTOMATION_READ_TOKEN` for the automation KV read
+`GITEA_API_TOKEN` for authenticated resource pulls,
-endpoint.
+`AUTOMATION_READ_TOKEN` for the automation KV read endpoint.
 
-## Deploy
+## Release and deploy
 
-Pushing `main` triggers `.gitea/workflows/deploy.yml` on the
+Portal doesn't deploy itself — it publishes versions, and each site
-bare-metal runner: release build, ship to
+decides when to take one. The whole day-to-day surface is two
-`/srv/app/uhhm-portal/releases/<sha>`, flip the `current` symlink,
+commands:
-restart `app@uhhm-portal`, reload Caddy. Content changes never come
+
-through here — they hot-reload live from the `questions` repo.
+**Cut a release** (here):
+
+```sh
+cargo release patch        # or minor / major
+```
+
+That bumps `Cargo.toml`, tags `v<version>`, and pushes; CI
+(`.gitea/workflows/publish.yml`) reacts to the tag, builds once, and
+attaches `portal-v<version>.tar.gz` (`portal` + `question_lint` +
+`hash.txt` + `site/`) to the Gitea release. Pkg files are
+content-hashed (`hash-files = true`; instances run with
+`LEPTOS_HASH_FILES=true`), so a freshly served page can never pair a
+stale cached bundle with new wasm. Plain pushes to `main` only run the
+tests (`test.yml`) — nothing reaches production from this repo.
+
+**Roll it out** (in a content repo): edit one line in that repo's
+`.gitea/workflows/deploy.yml` —
+
+```yaml
+env:
+  PORTAL_RELEASE: v0.1.1   # <- bump, commit, push
+```
+
+Its CI downloads the pinned artifact, ships
+`/srv/app/<instance>/releases/<tag>`, flips `current`, rewrites the
+instance env from that repo's own Actions variables/secrets, restarts
+`app@<instance>`, and refreshes the Caddy route. Every rollout is a
+commit, so reverting a bad version is `git revert` + push. Sites
+upgrade independently: uhhm.no (uhhm/questions → `app@uhhm-portal`,
+:3010) and redoal.com (redoal/questions → `app@redoal-portal`,
+:3020) can pin different versions.
+
+Content changes never come through any of this — they hot-reload
+live from the content repos over NATS.
+
+**Add a site**: new content repo with a copy of an existing
+`deploy.yml` (change `INSTANCE`, port, domains), Actions variables
+(`KANIDM_URL`, `OAUTH2_CLIENT_ID`, `PUBLIC_URL`, `SITE_NAME`) and
+secrets (`NATS_URL`, `OAUTH2_CLIENT_SECRET`,
+`PORTAL_GITEA_API_TOKEN` — Gitea reserves the `GITEA_` prefix for
+secret names), a Kanidm OAuth2 client, and DNS. `site.yaml` in the
+content repo handles all branding; no portal changes needed.

docs/design/filesystem-routes.md

@@ -0,0 +1,133 @@
+# Filesystem routes, sections, and where chains fit
+
+Status: implemented in v0.2.0 (2026-08-24) — all three phases, with
+one deviation: dynamic-page params substitute into resource keys via
+server-side `resolve_question` at lookup time (get_question,
+find_feature, submit_answer all resolve concrete paths), so no param
+threading exists client-side. The user-facing routing contract is
+documented in uhhm/questions' README ("Routing: the tree is the
+router"); this file stays as the design rationale.
+
+## What exists today, precisely
+
+- A question's `id` doubles as its URL. Filenames are meaningless:
+  `questions/` is loaded as a **flat** directory (both the Gitea
+  loader and `question_lint --path`), every `*.yaml` becomes a
+  `Question` keyed by its own declared `id`.
+- Hierarchy exists only as strings: `action: /proposed` edges, plus a
+  manual `followup: true` flag that hides post-submission pages from
+  the nav. The graph is invisible in a repo listing — you open every
+  file to learn the flow. (uhhm's actual graph: `/` fans out to three
+  followups; `/develop` → `/develop-proposal` → `/proposed` is a
+  two-step flow flattened into three top-level files.)
+- Criteria are per-file: `qualifies: <kanidm-group>` on a question,
+  `requires_group` on a resource. Gating a whole area means
+  repeating the flag in every file of that area.
+- Chains are query-string lineage: submitting hashes
+  `(question, parents, responses, ts)` into `chain_hash`, the next
+  page is `action + ?chain=<hash>`, and holding a chain is itself a
+  capability (`self_transition` + email second factor). `chain.rs`
+  reserves DAG shape (multiple parents) but nothing produces it yet.
+- `Question.route` is a declared-but-never-read field — a fossil of
+  this exact idea.
+
+## The proposal, in three phases
+
+### Phase 1 — the tree is the router
+
+Directory structure becomes the URL structure, next-js style:
+
+```
+questions/
+  index.yaml              → /
+  applied.yaml            → /applied
+  develop/
+    index.yaml            → /develop
+    proposal.yaml         → /develop/proposal
+    proposed.yaml         → /develop/proposed
+  review/
+    index.yaml            → /review
+```
+
+- `id:` becomes optional and **derived from the path** (`index.yaml`
+  names its directory). An explicit `id:` still wins so both content
+  repos keep working unchanged; lint warns when it disagrees with the
+  path, and the field can retire later along with `route`.
+- `action:` accepts **relative references**: `action: proposed`
+  resolves against the file's directory, `action: /subscribed` stays
+  absolute. Resolution happens at load time, so validation and the
+  runtime see absolute ids exactly as today. A flow directory becomes
+  self-contained: rename `develop/` and every internal edge moves
+  with it.
+- **`followup:` is inferred**: `index.yaml` files are nav pages,
+  non-index files are followups unless they say `nav: true`. This
+  matches the real content exactly (uhhm's four `followup: true`
+  files are precisely its non-index leaf pages) and deletes a flag
+  people must remember.
+- Loader: switch from the per-directory contents API to Gitea's git
+  trees API (`/git/trees/{branch}?recursive=true`) — one request for
+  the whole tree instead of one per directory, which the flat loader
+  should be using anyway.
+
+### Phase 2 — sections: criteria scoped by URL prefix
+
+A `_section.yaml` in any directory applies to everything beneath it
+(underscore = not a page, like next's private folders):
+
+```
+questions/review/_section.yaml:
+  qualifies: portal_owners
+  responsible: { name: Bendik, contact: … }
+```
+
+This is the URL/criteria interplay actually worth having: **a URL
+prefix becomes a trust boundary**. "Everything under /review is
+owner-only" is one line in one place, instead of a flag per file that
+drifts. Per-question `qualifies` still overrides (tighter or looser —
+lint should warn on looser). Sections are also the natural home for
+shared `responsible` contacts and, later, per-section branding
+accents.
+
+### Phase 3 — dynamic segments, and chains stay out of the path
+
+Two criteria axes exist: **who you are** (Kanidm group) and **what
+you've done** (holding a chain). Phase 2 scopes the first by prefix;
+phase 3 does the same for the second, plus gives records addresses:
+
+- `[record].yaml` — a dynamic segment, one YAML file rendered per
+  record: `questions/review/[record].yaml` serves `/review/<key>`,
+  with the param available to the page's `ResourceSpec.key`. Today a
+  single record is only reachable through a desk row or a
+  `?chain=` link; this gives every record a real, gated URL —
+  linkable from review desks, automations, and n8n notifications.
+- `requires_chain: <question-ref>` (page- or section-level): the page
+  only renders for a visitor whose chain tip answers the referenced
+  question. Today's followup pages are soft-hidden (out of nav) but
+  fully reachable; this makes "you must have come from X" an actual
+  criterion, declared with a relative ref like actions are.
+
+**Deliberately not proposed: encoding the chain in the path.** The
+page tree is static structure; the chain is runtime lineage and a
+bearer capability. Putting it in the path makes it look canonical and
+shareable — exactly what a capability URL shouldn't invite — and a
+DAG (the reserved multi-parent shape) doesn't linearize into a path
+anyway. `?chain=` stays a query parameter: pages keep one canonical
+URL, lineage rides along only when it's actually held.
+
+## Migration
+
+Phase 1 is fully backward compatible (explicit `id` wins, flat repos
+are just trees of depth one). The content repos migrate by `git mv`:
+uhhm's develop flow nests under `develop/`, its followups either stay
+top-level (`/applied` keeps its URL) or move with their flows if URL
+churn is acceptable; redoal's three files are already the tree. Lint
+learns the same resolution rules in the same commit, so a bad
+reference stays a caught push, never a 404.
+
+## Order of value
+
+Phase 1 is cheap and pays immediately (the repo listing becomes the
+sitemap). Phase 2 is small and unlocks gated areas properly. Phase 3
+is the real feature work — `[record]` pages change what desks and
+automations can link to — and can wait until something concrete needs
+it.

gesture.js

@@ -0,0 +1,317 @@
+// The `type: gesture` requirement widget: draw one stroke on a canvas,
+// and the stroke becomes the field's value. Mirrors the two house
+// patterns at once:
+//
+// - prosekit-editor.js's hidden-input bridge: the widget writes JSON
+//   into a paired hidden <input> and fires a real bubbling `input`
+//   event, so the Rust side reuses the exact same RwSignal/on:input
+//   wiring every other field kind uses - no bespoke value channel.
+// - yes.js's lifecycle: mountGesture returns a handle whose stop()
+//   tears everything down (socket, listeners, rAF), because SPA
+//   navigation never unloads the document.
+//
+// When a relay URL is given, the widget also speaks the redoal-relay
+// protocol (ADR-0013 in the redoal repo): announce the stroke, receive
+// an ack carrying the stroke's gesture key plus the key's own decoded
+// path - "what the network heard", drawn as a ghost under the stroke
+// when the key is v2 or later (ADR-0014's ordered turning chain; a v1
+// key's histogram decode is a blob and stays hidden) - and receive
+// echoes of similar strokes other visitors drew, shown as thumbnails.
+// Everything network is best-effort: no relay, refused connection, or
+// a dropped socket all degrade to a plain offline drawing input.
+//
+// Canvas colors can't come from CSS custom properties (same
+// constraint yes.js documents), so the widget carries its own copy of
+// the palette for both themes - any palette change must land here AND
+// in style/main.css.
+
+const THEMES = {
+    dark: {
+        stroke: '#8ec2c0',
+        echo: '#8ec2c0',
+        ghost: 'rgba(255, 255, 255, 0.28)',
+    },
+    light: {
+        stroke: '#47807e',
+        echo: '#47807e',
+        ghost: 'rgba(29, 29, 27, 0.30)',
+    },
+};
+
+const MIN_POINT_DISTANCE = 3; // css px between recorded points
+const MAX_ECHOES = 8;
+const RECONNECT_BASE_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+
+class GestureWidget {
+    constructor(container, hidden, relayUrl) {
+        this.container = container;
+        this.hidden = hidden || null;
+        this.relayUrl = relayUrl || '';
+        this.ghost = null;
+        this.points = [];
+        this.drawing = false;
+        this.stopped = false;
+        this.ws = null;
+        this.reconnectDelay = RECONNECT_BASE_MS;
+        this.reconnectTimer = null;
+        this.pendingAnnounce = null;
+
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'gesture-canvas';
+        container.appendChild(this.canvas);
+        this.echoes = document.createElement('div');
+        this.echoes.className = 'gesture-echoes';
+        container.appendChild(this.echoes);
+        if (this.relayUrl) {
+            this.status = document.createElement('span');
+            this.status.className = 'gesture-status offline';
+            this.status.setAttribute('aria-label', 'relay connection');
+            container.appendChild(this.status);
+        }
+
+        this._themeQuery = window.matchMedia('(prefers-color-scheme: light)');
+        this._onTheme = () => this.render();
+        this._themeQuery.addEventListener('change', this._onTheme);
+
+        this._onResize = () => { this.sizeCanvas(); this.render(); };
+        window.addEventListener('resize', this._onResize);
+        this.sizeCanvas();
+
+        this._onDown = (e) => this.beginStroke(e);
+        this._onMove = (e) => this.extendStroke(e);
+        this._onUp = (e) => this.endStroke(e);
+        this.canvas.addEventListener('pointerdown', this._onDown);
+        this.canvas.addEventListener('pointermove', this._onMove);
+        this.canvas.addEventListener('pointerup', this._onUp);
+        this.canvas.addEventListener('pointercancel', this._onUp);
+
+        if (this.relayUrl) this.connect();
+    }
+
+    theme() {
+        return this._themeQuery.matches ? THEMES.light : THEMES.dark;
+    }
+
+    sizeCanvas() {
+        const rect = this.canvas.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = Math.max(1, Math.round(rect.width * dpr));
+        this.canvas.height = Math.max(1, Math.round(rect.height * dpr));
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.scale(dpr, dpr);
+        this.cssWidth = rect.width;
+        this.cssHeight = rect.height;
+    }
+
+    pos(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+
+    beginStroke(e) {
+        e.preventDefault();
+        this.canvas.setPointerCapture(e.pointerId);
+        // One stroke only - a new pointerdown replaces the old drawing
+        // (and any ghost from the previous round).
+        this.drawing = true;
+        this.ghost = null;
+        this.points = [this.pos(e)];
+        this.render();
+    }
+
+    extendStroke(e) {
+        if (!this.drawing) return;
+        const p = this.pos(e);
+        const last = this.points[this.points.length - 1];
+        const dx = p.x - last.x, dy = p.y - last.y;
+        if (Math.sqrt(dx * dx + dy * dy) < MIN_POINT_DISTANCE) return;
+        this.points.push(p);
+        this.render();
+    }
+
+    endStroke() {
+        if (!this.drawing) return;
+        this.drawing = false;
+        if (this.points.length < 2) return;
+        const normalized = this.normalized();
+        this.setValue({ points: normalized, key: null });
+        this.announce(normalized);
+    }
+
+    // Canvas-frame normalization into the -1..1 square (the relay
+    // re-normalizes around the stroke itself before keying - this
+    // just bounds the payload and keeps the stored value
+    // resolution-independent).
+    normalized() {
+        const half = Math.max(this.cssWidth, this.cssHeight) / 2;
+        const cx = this.cssWidth / 2, cy = this.cssHeight / 2;
+        return this.points.map((p) => [
+            Math.round(((p.x - cx) / half) * 10000) / 10000,
+            Math.round(((p.y - cy) / half) * 10000) / 10000,
+        ]);
+    }
+
+    setValue(value) {
+        if (!this.hidden) return;
+        this.hidden.value = JSON.stringify(value);
+        this.hidden.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
+    // ── Relay ──────────────────────────────────────────────────────
+
+    connect() {
+        if (this.stopped) return;
+        let ws;
+        try {
+            ws = new WebSocket(this.relayUrl);
+        } catch {
+            this.scheduleReconnect();
+            return;
+        }
+        this.ws = ws;
+        ws.addEventListener('open', () => {
+            if (this.stopped) return;
+            this.reconnectDelay = RECONNECT_BASE_MS;
+            this.status?.classList.replace('offline', 'live');
+            if (this.pendingAnnounce) {
+                ws.send(JSON.stringify({ type: 'announce', points: this.pendingAnnounce }));
+                this.pendingAnnounce = null;
+            }
+        });
+        ws.addEventListener('message', (e) => this.onMessage(e));
+        ws.addEventListener('close', () => {
+            this.status?.classList.replace('live', 'offline');
+            this.ws = null;
+            this.scheduleReconnect();
+        });
+        // 'error' is always followed by 'close'; nothing to do here.
+    }
+
+    scheduleReconnect() {
+        if (this.stopped || this.reconnectTimer) return;
+        this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
+            this.connect();
+        }, this.reconnectDelay);
+        this.reconnectDelay = Math.min(this.reconnectDelay * 2, RECONNECT_MAX_MS);
+    }
+
+    announce(points) {
+        if (!this.relayUrl) return;
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({ type: 'announce', points }));
+        } else {
+            this.pendingAnnounce = points;
+        }
+    }
+
+    onMessage(e) {
+        let msg;
+        try {
+            msg = JSON.parse(e.data);
+        } catch {
+            return;
+        }
+        if (msg.type === 'ack') {
+            if (this.points.length >= 2) {
+                this.setValue({ points: this.normalized(), key: msg.key });
+            }
+            // Version nibble is the key's first hex digit.
+            const version = parseInt((msg.key || '0')[0], 16);
+            this.ghost = version >= 2 && Array.isArray(msg.path) ? msg.path : null;
+            this.render();
+        } else if (msg.type === 'echo') {
+            this.addEchoThumbnail(msg);
+        }
+        // 'error' frames are intentionally silent: the widget is a
+        // form field first, and a rate-limited announce shouldn't
+        // alarm anyone mid-form.
+    }
+
+    addEchoThumbnail(msg) {
+        const thumb = document.createElement('canvas');
+        thumb.className = 'gesture-echo';
+        // Closer strokes render stronger; 500 is comfortably past the
+        // relay's default threshold, so everything stays visible.
+        const strength = Math.max(0.35, Math.min(1, 1 - msg.distance / 500));
+        thumb.style.setProperty('--echo-strength', String(strength));
+        this.echoes.prepend(thumb);
+        while (this.echoes.children.length > MAX_ECHOES) {
+            this.echoes.lastChild.remove();
+        }
+        const dpr = window.devicePixelRatio || 1;
+        const rect = thumb.getBoundingClientRect();
+        thumb.width = Math.max(1, Math.round(rect.width * dpr));
+        thumb.height = Math.max(1, Math.round(rect.height * dpr));
+        const ctx = thumb.getContext('2d');
+        ctx.scale(dpr, dpr);
+        this.drawPath(ctx, msg.path, rect.width, rect.height, this.theme().echo, 1.5, 0.15);
+        // A timeout, not requestAnimationFrame: the class must land on
+        // a later tick for the opacity transition to run, and rAF
+        // doesn't tick at all in headless engines.
+        setTimeout(() => thumb.classList.add('shown'), 30);
+    }
+
+    // ── Rendering ──────────────────────────────────────────────────
+
+    // Draw a normalized (-1..1) path fitted into w×h with padding.
+    drawPath(ctx, path, w, h, color, width, pad) {
+        if (!path || path.length < 2) return;
+        const scale = (Math.min(w, h) / 2) * (1 - pad);
+        const cx = w / 2, cy = h / 2;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        path.forEach(([x, y], i) => {
+            const px = cx + x * scale, py = cy + y * scale;
+            if (i === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+        });
+        ctx.stroke();
+    }
+
+    render() {
+        if (!this.ctx) return;
+        const t = this.theme();
+        this.ctx.clearRect(0, 0, this.cssWidth, this.cssHeight);
+        if (this.ghost) {
+            this.drawPath(this.ctx, this.ghost, this.cssWidth, this.cssHeight, t.ghost, 2, 0.2);
+        }
+        if (this.points.length >= 1) {
+            this.ctx.strokeStyle = t.stroke;
+            this.ctx.lineWidth = 2;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
+            this.ctx.beginPath();
+            this.points.forEach((p, i) => {
+                if (i === 0) this.ctx.moveTo(p.x, p.y);
+                else this.ctx.lineTo(p.x, p.y);
+            });
+            this.ctx.stroke();
+        }
+    }
+
+    stop() {
+        this.stopped = true;
+        if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+        if (this.ws) {
+            // The close event still fires, but scheduleReconnect
+            // no-ops once stopped is set.
+            try { this.ws.close(); } catch { /* already dead */ }
+            this.ws = null;
+        }
+        window.removeEventListener('resize', this._onResize);
+        this._themeQuery.removeEventListener('change', this._onTheme);
+        this.canvas.removeEventListener('pointerdown', this._onDown);
+        this.canvas.removeEventListener('pointermove', this._onMove);
+        this.canvas.removeEventListener('pointerup', this._onUp);
+        this.canvas.removeEventListener('pointercancel', this._onUp);
+    }
+}
+
+export function mountGesture(container, hidden, relayUrl) {
+    return new GestureWidget(container, hidden, relayUrl);
+}

prosekit-editor.js

@@ -129,15 +129,17 @@ function defineGiteaRepoEmbed() {
           'data-description': description,
           'data-url': url,
           style:
-            'display:block;border:1px solid #ddd;border-radius:8px;' +
+            'display:block;border:0.06em solid #ddd;border-radius:0.5em;' +
-            'padding:12px 16px;margin:8px 0;font-family:inherit;',
+            'padding:0.75em 1em;margin:0.5em 0;font-family:inherit;',
         },
         [
           'a',
           { href: url, style: 'font-weight:600;text-decoration:none;color:inherit;' },
           `${owner}/${repo}`,
         ],
-        ['div', { style: 'opacity:0.7;font-size:0.9em;margin-top:4px;' }, description],
+        // Solid mid-gray, not opacity - dim on both the newsletter's
+        // light client background and this app's dark paper.
+        ['div', { style: 'color:#9a9a9a;font-size:0.9rem;margin-top:0.25em;' }, description],
       ]
     },
   })
@@ -283,8 +285,11 @@ function buildToolbar(editor) {
 }
 
 export function mountEditor(container, hiddenInput, initial) {
+  // Only the structural stylesheet (placeholder, lists, gap cursor).
+  // Deliberately NOT prosekit/basic/typography.css: it sizes content in
+  // fixed px, which fights the app's responsive root font-size. All
+  // editor typography lives in our own stylesheet, in rem.
   ensureStylesheet('https://esm.sh/prosekit/basic/style.css')
-  ensureStylesheet('https://esm.sh/prosekit/basic/typography.css')
 
   const extension = union(
     defineBasicExtension(),

src/aggregates/mod.rs

@@ -30,6 +30,12 @@ pub struct AggregateSchema {
     pub event_for_state: HashMap<String, String>,
     pub state_for_event: HashMap<String, String>,
     pub transitions: HashMap<String, Vec<String>>,
+    /// Names what consumes this bucket's answers when no page in the
+    /// content repo reads it (e.g. "n8n newsletter compose").
+    /// Free-text - it exists so `validate_questions`' attended-bucket
+    /// rule has an explicit, auditable opt-out instead of a silent
+    /// one, and so the next reader knows where the answers go.
+    pub attended_by: Option<String>,
 }
 
 impl AggregateSchema {
@@ -57,6 +63,8 @@ struct RawAggregateSchema {
     states: HashMap<String, RawState>,
     #[serde(default)]
     transitions: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    attended_by: Option<String>,
 }
 
 #[derive(Debug, serde::Deserialize)]
@@ -123,6 +131,7 @@ pub fn parse_aggregates_yaml(raw: &str) -> anyhow::Result<HashMap<String, Aggreg
                 event_for_state,
                 state_for_event,
                 transitions: raw_schema.transitions,
+                attended_by: raw_schema.attended_by,
             },
         );
     }

src/answers.rs

@@ -101,7 +101,7 @@ pub struct TransitionItem {
 /// (the shared per-alternative Confirm button). Items are independent
 /// - per-item CAS, no cross-item transaction - so one failure doesn't
 /// roll back the others; failures are collected and reported together.
-#[server]
+#[server(endpoint = "transition_answers")]
 pub async fn transition_answers(
     question_id: String,
     alternative: String,
@@ -289,7 +289,7 @@ async fn apply_transition(
 /// itself. Deliberately returns the same generic error for "no such
 /// item" and "email doesn't match", so an unsubscribe link can't be
 /// used to probe which hashes or emails exist.
-#[server]
+#[server(endpoint = "self_transition_answer")]
 pub async fn self_transition_answer(
     question_id: String,
     alternative: String,

src/app.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
+use leptos_meta::{provide_meta_context, HashedStylesheet, MetaTags, Title};
 use leptos_router::{
     components::{Route, Router, Routes},
     hooks::{use_location, use_navigate, use_query_map},
@@ -9,7 +9,7 @@ use serde::{Deserialize, Serialize};
 
 use crate::answers::{Answer, SelfTransitionAnswer, TransitionAnswers, TransitionItem};
 use crate::auth::{current_user, User};
-use crate::content::{is_qualified, Alternative, Question, Responsible, Transition};
+use crate::content::{is_qualified, Alternative, Question, Responsible, SiteConfig, Transition};
 use crate::resource::{get_requirement_binding, get_requirement_options, get_resource};
 
 /// The visible site name/wordmark - "portal" is just this codebase's
@@ -39,6 +39,9 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
                 // once loaded via <link>/<img> on Safari/iOS.
                 <link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/>
                 <link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/>
+                // Server-side, so it can read hash.txt and link the
+                // content-hashed stylesheet (hash-files = true).
+                <HashedStylesheet id="leptos" options=options.clone()/>
                 <AutoReload options=options.clone()/>
                 <HydrationScripts options/>
                 <MetaTags/>
@@ -54,20 +57,60 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
 pub fn App() -> impl IntoView {
     provide_meta_context();
 
+    // ONE site resource and ONE <Title> for the whole app, both living
+    // outside the router. Two dueling Title components (a static
+    // SITE_NAME fallback here + a per-page override) turned every SPA
+    // navigation into a remount race that the compile-time fallback
+    // kept winning - redoal.com's tab flipped to "uhhm" on the first
+    // client-side nav. App never remounts, so this Title never
+    // unmounts; the Suspense makes SSR await the resolved title so the
+    // served <head> is right too. Pages read the same resource via
+    // context instead of fetching their own copy.
+    let site = Resource::new(|| (), |_| get_site());
+    provide_context(site);
+
     view! {
-        <Stylesheet id="leptos" href="/pkg/portal.css"/>
+        <Suspense fallback=|| ()>
-        <Title text=SITE_NAME/>
+            {move || {
+                site.get()
+                    .map(|res| {
+                        let title = res
+                            .ok()
+                            .and_then(|s| s.title)
+                            .unwrap_or_else(|| SITE_NAME.to_string());
+                        view! { <Title text=title/> }
+                    })
+            }}
+        </Suspense>
         <Router>
-            <Routes fallback=|| view! { <NotFound/> }>
+            <PortalShell/>
-                <Route path=path!("") view=QuestionPage/>
-                <Route path=path!("/*any") view=QuestionPage/>
-            </Routes>
         </Router>
     }
 }
 
+/// Every server-fn resource the pages read, created exactly once for
+/// the app's lifetime and handed down via context. Wrapper structs
+/// because a bare `Resource<T>` context is claimed by whoever provides
+/// that T last.
+#[derive(Clone, Copy)]
+struct QuestionRes(Resource<Result<Option<Page>, ServerFnError>>);
+#[derive(Clone, Copy)]
+struct UserRes(Resource<Result<Option<User>, ServerFnError>>);
+#[derive(Clone, Copy)]
+struct NavRes(Resource<Result<Vec<(String, String)>, ServerFnError>>);
+
+/// Owns the app's data resources, above the routes and reactive on the
+/// location instead of recreated per page. Route components creating
+/// their own resources broke on the first client-side navigation: the
+/// remounted component's fresh Resource consumed a stale SSR hydration
+/// buffer instead of fetching - concretely, the nav list
+/// `[[id, name], ..]` deserialized as a `Page` (serde fills a struct
+/// from a sequence in field order), rendering the landing question
+/// gated behind its own nav entry. Stable resources + context makes
+/// that class of misalignment impossible: navigation only changes a
+/// key, and a key change always refetches.
 #[component]
-fn QuestionPage() -> impl IntoView {
+fn PortalShell() -> impl IntoView {
     let location = use_location();
     let query = use_query_map();
     let path = Memo::new(move |_| {
@@ -78,11 +121,37 @@ fn QuestionPage() -> impl IntoView {
             p
         }
     });
+    let chain = Memo::new(move |_| query.with(|q| q.get("chain")));
+
+    let question = Resource::new(
+        move || (path.get(), chain.get()),
+        |(path, chain)| get_question(path, chain),
+    );
+    let user = Resource::new(|| (), |_| current_user());
+    let nav = Resource::new(move || chain.get().is_some(), list_qualifying_questions);
+    provide_context(QuestionRes(question));
+    provide_context(UserRes(user));
+    provide_context(NavRes(nav));
+
+    view! {
+        <Routes fallback=|| view! { <NotFound/> }>
+            <Route path=path!("") view=QuestionPage/>
+            <Route path=path!("/*any") view=QuestionPage/>
+        </Routes>
+    }
+}
+
+#[component]
+fn QuestionPage() -> impl IntoView {
+    let query = use_query_map();
     let parent_hash = Memo::new(move |_| query.with(|q| q.get("chain")));
     let query_email = Memo::new(move |_| query.with(|q| q.get("email")));
 
-    let question = Resource::new(move || path.get(), get_question);
+    // All shared, app-lifetime resources (see PortalShell / App) -
-    let user = Resource::new(|| (), |_| current_user());
+    // never created per navigation.
+    let QuestionRes(question) = expect_context();
+    let UserRes(user) = expect_context();
+    let site = expect_context::<Resource<Result<SiteConfig, ServerFnError>>>();
 
     view! {
         <Suspense fallback=|| {
@@ -99,16 +168,19 @@ fn QuestionPage() -> impl IntoView {
                 // has already resolved.
                 let user_res = user.get();
                 let question_res = question.get();
+                let site_cfg = site.get().and_then(|r| r.ok()).unwrap_or_default();
                 question_res
                     .map(|res| match res {
-                        Ok(Some(q)) => {
+                        Ok(Some(page)) => {
                             let current = user_res.and_then(|r| r.ok()).flatten();
                             view! {
                                 <QuestionView
-                                    question=q
+                                    question=page.question
+                                    chain_gate=page.chain_gate
                                     parent_hash=parent_hash.get()
                                     query_email=query_email.get()
                                     user=current
+                                    site=site_cfg
                                 />
                             }
                                 .into_any()
@@ -123,11 +195,45 @@ fn QuestionPage() -> impl IntoView {
 #[component]
 fn QuestionView(
     question: Question,
+    chain_gate: Option<(String, String)>,
     parent_hash: Option<String>,
     query_email: Option<String>,
     user: Option<User>,
+    site: SiteConfig,
 ) -> impl IntoView {
     let question_id = question.id.clone();
+    let has_chain = parent_hash.is_some();
+
+    // The provenance counterpart to the qualifies gate below: a
+    // requires_chain page whose visitor holds no verifiable lineage to
+    // the required question renders a pointer there instead of its
+    // alternatives.
+    if let Some((target, target_name)) = chain_gate {
+        let label = if target_name.is_empty() {
+            target.clone()
+        } else {
+            target_name
+        };
+        return view! {
+            <Hero
+                title=question.name.clone()
+                description=question.description.clone()
+                landing=question_id == "/"
+                site=site.clone()
+            />
+            <div class="alternatives">
+                <section class="alt-card gate-card">
+                    <p>"This page follows from an answer you don't seem to carry yet."</p>
+                    <a class="alt-submit" href=target>
+                        {label}
+                    </a>
+                </section>
+            </div>
+            // A gate is never a dead end: the same nav as every page.
+            <QuestionNav current_id=question_id has_chain=has_chain/>
+        }
+        .into_any();
+    }
 
     // Generic: any question with `qualifies` set renders this same gate
     // instead of its alternatives - "/review" isn't a special case, it's
@@ -138,7 +244,8 @@ fn QuestionView(
             <Hero
                 title=question.name.clone()
                 description=question.description.clone()
-                show_yes=question_id == "/"
+                landing=question_id == "/"
+                site=site.clone()
             />
             <div class="alternatives">
                 <section class="alt-card gate-card">
@@ -159,6 +266,7 @@ fn QuestionView(
                     }}
                 </section>
             </div>
+            <QuestionNav current_id=question_id has_chain=has_chain/>
         }
         .into_any();
     }
@@ -168,14 +276,14 @@ fn QuestionView(
     // on pages where some alternative actually declares a deck.
     let needs_swiper = question.alternatives.iter().any(|a| a.images.len() > 1);
 
-    let has_chain = parent_hash.is_some();
 
     view! {
         {needs_swiper.then(|| view! { <leptos_meta::Script src="/swiper-element-bundle.min.js"/> })}
         <Hero
             title=question.name.clone()
             description=question.description.clone()
-            show_yes=question_id == "/"
+            landing=question_id == "/"
+            site=site.clone()
         />
         <div class="alternatives">
             <For
@@ -230,7 +338,8 @@ fn QuestionView(
 /// claiming front-page space (an owner also sees the gated desks here).
 #[component]
 fn QuestionNav(current_id: String, has_chain: bool) -> impl IntoView {
-    let nav = Resource::new(move || has_chain, list_qualifying_questions);
+    let _ = has_chain; // keyed into the shared resource by PortalShell
+    let NavRes(nav) = expect_context();
     view! {
         <Suspense fallback=|| ()>
             {move || {
@@ -300,27 +409,6 @@ fn ResponsibleNote(responsible: Responsible) -> impl IntoView {
     }
 }
 
-// Binds the actual "YES - Rasterized Lines" piece live at uhhm.no
-// (ported to `public/yes.js`, an ES module now instead of a page-owning
-// script) as a typed JS class - the idiomatic wasm-bindgen way to drive
-// an existing JS module from Rust, rather than re-implementing canvas
-// animation logic here.
-#[cfg(feature = "hydrate")]
-mod yes {
-    use wasm_bindgen::prelude::*;
-
-    #[wasm_bindgen(module = "/yes.js")]
-    extern "C" {
-        #[wasm_bindgen(js_name = RasterizedYES)]
-        pub type RasterizedYes;
-
-        #[wasm_bindgen(constructor, js_class = "RasterizedYES")]
-        pub fn new() -> RasterizedYes;
-
-        #[wasm_bindgen(method)]
-        pub fn stop(this: &RasterizedYes);
-    }
-}
 
 // Same idiomatic-typed-module approach as `yes` above, for the
 // prosekit-backed rich-text requirement kind (`prosekit-editor.js`,
@@ -347,64 +435,132 @@ mod prosekit {
     }
 }
 
+// The `type: gesture` drawing widget (`gesture.js`, crate root):
+// prosekit's hidden-input bridge for the value, yes.js's typed-handle
+// lifecycle for cleanup - it may own a live WebSocket to a
+// redoal-relay, which SPA navigation must close (`stop()`).
+#[cfg(feature = "hydrate")]
+mod gesture {
+    use wasm_bindgen::prelude::*;
+
+    #[wasm_bindgen(module = "/gesture.js")]
+    extern "C" {
+        pub type GestureWidget;
+
+        #[wasm_bindgen(js_name = mountGesture)]
+        pub fn mount_gesture(
+            container: &web_sys::HtmlDivElement,
+            hidden: &web_sys::HtmlInputElement,
+            relay_url: &str,
+        ) -> GestureWidget;
+
+        #[wasm_bindgen(method)]
+        pub fn stop(this: &GestureWidget);
+    }
+}
+
 #[component]
-fn Hero(title: String, description: String, show_yes: bool) -> impl IntoView {
+fn Hero(title: String, description: String, landing: bool, site: SiteConfig) -> impl IntoView {
-    // Only the landing page gets the full interactive piece - it's the
+    // Only the landing page gets a piece - it's the one page a hero is
-    // one page this is actually "the" hero for; other pages (thank-you
+    // actually "the" hero for; every other page gets the plain header.
-    // pages, /review) get the plain dark header below. Starts the
+    // WHAT the piece is belongs to the content repo: site.yaml's
-    // animation once the canvas elements exist, and explicitly stops
+    // `hero: {kind: module, module: hero.js}` names a JavaScript module
-    // the requestAnimationFrame loop on unmount - the original
+    // (served same-origin at /site/<path>) exporting
-    // page-owning script never needed this since navigating away meant
+    // `mount(container) -> handle` with `handle.stop()`. Portal knows
-    // a full document unload, which doesn't happen in an SPA.
+    // nothing about what it draws.
-    let raster_ref: NodeRef<leptos::html::Canvas> = NodeRef::new();
+    let module = if landing && site.hero.kind == "module" {
+        site.hero.module.clone()
+    } else {
+        None
+    };
+    let has_module = module.is_some();
+    let wordmark = site.wordmark.clone().unwrap_or_else(|| "/wordmark.svg".to_string());
+    let site_title = site.title.clone().unwrap_or_else(|| SITE_NAME.to_string());
+
+    let piece_ref: NodeRef<leptos::html::Div> = NodeRef::new();
     #[cfg(feature = "hydrate")]
-    if show_yes {
+    if has_module {
-        // `on_cleanup` requires Send + Sync (even single-threaded, wasm),
+        use wasm_bindgen::JsCast;
-        // which a JS-backed value never is - `StoredValue`'s `LocalStorage`
+        // Handle = whatever the module's mount() returned; kept as a
-        // variant is the established way around this (same pattern
+        // raw JsValue so the contract stays "has a stop()", nothing
-        // cnats' WebRTC call state uses for its own non-Send peer map).
+        // typed on the Rust side.
-        let instance: StoredValue<Option<yes::RasterizedYes>, LocalStorage> =
+        let handle: StoredValue<Option<wasm_bindgen::JsValue>, LocalStorage> =
             StoredValue::new_local(None);
-        // Gated on the canvas NodeRef resolving, not just "the Effect
-        // ran" - on a fresh page load the DOM is already there by the
-        // time this fires, but navigating back to `/` client-side hit a
-        // real race: the Effect ran before the new view's <canvas> was
-        // actually inserted, RasterizedYES::new() (yes.js) did an
-        // unchecked `document.getElementById(...).getContext(...)` on
-        // null and threw mid-reactive-update - which then corrupted
-        // wasm_bindgen_futures' single-threaded executor state badly
-        // enough to panic ("RefCell already borrowed") on the next
-        // tick. Waiting for the NodeRef itself guarantees DOM presence
-        // the same way the prosekit editor's own mount Effect does.
         Effect::new(move |_| {
-            if raster_ref.get().is_none() {
+            let Some(container) = piece_ref.get() else {
+                return;
+            };
+            if handle.with_value(|h| h.is_some()) {
                 return;
             }
-            instance.set_value(Some(yes::RasterizedYes::new()));
+            // Adopt the inline early-mount's instance (started at HTML
+            // parse time) if it's there; otherwise (client-side
+            // navigation back to /) mount fresh through the helper the
+            // inline script left on window. Either order is safe.
+            let global = js_sys::global();
+            let _ = js_sys::Reflect::set(&global, &"__heroAdopted".into(), &true.into());
+            let early = js_sys::Reflect::get(&global, &"__heroEarly".into())
+                .ok()
+                .filter(|v| !v.is_undefined() && !v.is_null());
+            match early {
+                Some(v) => {
+                    let _ = js_sys::Reflect::delete_property(&global, &"__heroEarly".into());
+                    handle.set_value(Some(v));
+                }
+                None => {
+                    if let Ok(mounter) = js_sys::Reflect::get(&global, &"__mountHero".into()) {
+                        if let Some(f) = mounter.dyn_ref::<js_sys::Function>() {
+                            if let Ok(promise) = f.call1(&global, &container) {
+                                let promise: js_sys::Promise = promise.unchecked_into();
+                                leptos::task::spawn_local(async move {
+                                    if let Ok(h) =
+                                        wasm_bindgen_futures::JsFuture::from(promise).await
+                                    {
+                                        handle.set_value(Some(h));
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            }
         });
         on_cleanup(move || {
-            instance.update_value(|opt| {
+            handle.update_value(|opt| {
-                if let Some(inst) = opt.take() {
+                if let Some(h) = opt.take() {
-                    inst.stop();
+                    if let Ok(stop) = js_sys::Reflect::get(&h, &"stop".into()) {
+                        if let Some(f) = stop.dyn_ref::<js_sys::Function>() {
+                            let _ = f.call0(&h);
+                        }
+                    }
                 }
             });
         });
     }
 
+    // The inline script starts the piece at HTML parse time instead of
+    // waiting out the wasm bundle; it also leaves __mountHero for the
+    // hydrate side's client-side-navigation case. Module path is
+    // validated to plain segments by SiteConfig::validate, so it can't
+    // break out of the string here.
+    let early_script = module.as_ref().map(|m| {
+        format!(
+            "const url = '/site/{m}'; window.__mountHero = (el) => import(url).then((mod) => mod.mount(el)); if (!window.__heroAdopted && !window.__heroEarly) window.__mountHero(document.querySelector('.hero-piece')).then((h) => {{ if (!window.__heroAdopted) window.__heroEarly = h; else if (h && h.stop) h.stop(); }});"
+        )
+    });
+
     view! {
-        <header class="hero" class:hero-yes=show_yes>
+        <header class="hero" class:hero-module=has_module>
-            {show_yes
+            {has_module
                 .then(|| {
                     view! {
-                        <div class="hero-canvas" aria-hidden="true">
+                        <div class="hero-piece" aria-hidden="true" node_ref=piece_ref></div>
-                            <canvas id="lineCanvas"></canvas>
+                        <script type="module" inner_html=early_script.unwrap_or_default()></script>
-                            <canvas id="rasterCanvas" node_ref=raster_ref></canvas>
-                        </div>
                     }
                 })}
             <div class="hero-copy">
                 <a class="wordmark" href="/">
-                    <img src="/wordmark.svg" alt=SITE_NAME/>
+                    <img src=wordmark alt=site_title/>
                 </a>
                 <h1>{title}</h1>
                 <p>{description}</p>
@@ -536,6 +692,10 @@ fn AlternativeCard(
     let mut select_field_map: std::collections::HashMap<String, RwSignal<Vec<String>>> =
         std::collections::HashMap::new();
     let mut select_multi: std::collections::HashMap<String, bool> = std::collections::HashMap::new();
+    // Gesture fields share field_map (their hidden input carries a
+    // JSON string), but submit re-parses them so the stored answer
+    // holds a real {points, key} object, not a double-encoded string.
+    let mut gesture_fields: std::collections::HashSet<String> = std::collections::HashSet::new();
     for feature in &alternative.features {
         for req in &feature.requirements {
             if req.kind == "file" {
@@ -546,6 +706,9 @@ fn AlternativeCard(
                     .or_insert_with(|| RwSignal::new(Vec::new()));
                 select_multi.insert(req.name.clone(), req.multiple);
             } else {
+                if req.kind == "gesture" {
+                    gesture_fields.insert(req.name.clone());
+                }
                 field_map
                     .entry(req.name.clone())
                     .or_insert_with(|| RwSignal::new(String::new()));
@@ -571,6 +734,7 @@ fn AlternativeCard(
     let file_refs_for_submit = file_refs.clone();
     let select_field_map_for_submit = select_field_map.clone();
     let select_multi_for_submit = select_multi.clone();
+    let gesture_fields_for_submit = gesture_fields.clone();
     let question_id_for_transition = question_id.clone();
     let alt_name_for_transition = alternative.name.clone();
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
@@ -597,13 +761,22 @@ fn AlternativeCard(
         let file_refs_for_submit = file_refs_for_submit.clone();
         let select_field_map_for_submit = select_field_map_for_submit.clone();
         let select_multi_for_submit = select_multi_for_submit.clone();
+        let gesture_fields_for_submit = gesture_fields_for_submit.clone();
         let question_id_for_submit = question_id_for_submit.clone();
         let alt_name_for_submit = alt_name_for_submit.clone();
         let parent_hash_for_submit = parent_hash_for_submit.clone();
         leptos::task::spawn_local(async move {
             let mut map = serde_json::Map::new();
             for (name, sig) in field_map_for_submit.iter() {
-                map.insert(name.clone(), serde_json::Value::String(sig.get()));
+                let value = if gesture_fields_for_submit.contains(name) {
+                    // The widget's hidden input holds {points, key} as
+                    // JSON; store the object itself (empty/never-drawn
+                    // becomes null, not "").
+                    serde_json::from_str(&sig.get()).unwrap_or(serde_json::Value::Null)
+                } else {
+                    serde_json::Value::String(sig.get())
+                };
+                map.insert(name.clone(), value);
             }
             for (name, sig) in select_field_map_for_submit.iter() {
                 let ids = sig.get();
@@ -727,6 +900,7 @@ fn AlternativeCard(
                                                 alternative=alt_name.clone()
                                                 feature_name=feature_name.clone()
                                                 transitions=spec.transitions.clone()
+                                                empty=spec.empty.clone()
                                                 pending_transitions=pending_transitions
                                                 transition_batch=transition_batch
                                             />
@@ -850,6 +1024,60 @@ fn AlternativeCard(
                                                     .into_any();
                                                 }
 
+                                                if req.kind == "gesture" {
+                                                    let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
+                                                    let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
+
+                                                    // A div, not a label: a label would forward
+                                                    // every click to the hidden input, and this
+                                                    // field is drawn on, not clicked into.
+                                                    #[cfg(feature = "hydrate")]
+                                                    {
+                                                        let relay = req.relay.clone().unwrap_or_default();
+                                                        // Unlike prosekit's fire-and-forget mount,
+                                                        // the widget may own a live WebSocket -
+                                                        // yes.js's StoredValue + on_cleanup pattern
+                                                        // closes it on SPA navigation.
+                                                        let widget: StoredValue<Option<gesture::GestureWidget>, LocalStorage> =
+                                                            StoredValue::new_local(None);
+                                                        Effect::new(move |_| {
+                                                            let (Some(container), Some(hidden)) =
+                                                                (container_ref.get(), hidden_ref.get())
+                                                            else {
+                                                                return;
+                                                            };
+                                                            if widget.with_value(|w| w.is_some()) {
+                                                                return;
+                                                            }
+                                                            widget.set_value(Some(gesture::mount_gesture(
+                                                                &container, &hidden, &relay,
+                                                            )));
+                                                        });
+                                                        on_cleanup(move || {
+                                                            widget.update_value(|opt| {
+                                                                if let Some(w) = opt.take() {
+                                                                    w.stop();
+                                                                }
+                                                            });
+                                                        });
+                                                    }
+
+                                                    return view! {
+                                                        <div class="field">
+                                                            {label_text}
+                                                            <input
+                                                                id=field_id
+                                                                type="hidden"
+                                                                node_ref=hidden_ref
+                                                                prop:value=move || sig.get()
+                                                                on:input=move |ev| sig.set(event_target_value(&ev))
+                                                            />
+                                                            <div class="gesture-wrap" node_ref=container_ref></div>
+                                                        </div>
+                                                    }
+                                                    .into_any();
+                                                }
+
                                                 if req.kind == "prosekit" {
                                                     let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
                                                     let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
@@ -949,7 +1177,17 @@ fn AlternativeCard(
                                     children=move |e| view! { <p class="alt-encouragement">{e}</p> }
                                 />
                             </div>
-                            {if is_gateway {
+                            {if alternative.disabled {
+                                // Advertised, not yet takeable: the label
+                                // stays (it says what will be possible),
+                                // the button doesn't act.
+                                view! {
+                                    <button type="button" class="alt-submit soon" disabled=true title="Not yet">
+                                        {button_label.clone()}
+                                    </button>
+                                }
+                                .into_any()
+                            } else if is_gateway {
                                 let href = alternative.action.clone().unwrap_or_default();
                                 view! {
                                     <a class="alt-submit" href=href>{button_label.clone()}</a>
@@ -992,6 +1230,7 @@ fn ResourceFeature(
     alternative: String,
     feature_name: String,
     transitions: Vec<Transition>,
+    empty: Option<String>,
     pending_transitions: RwSignal<std::collections::HashMap<(String, String), String>>,
     transition_batch: ServerAction<TransitionAnswers>,
 ) -> impl IntoView {
@@ -1025,6 +1264,7 @@ fn ResourceFeature(
                 {move || {
                     let feature_name = feature_name.clone();
                     let transitions = transitions.clone();
+                    let empty = empty.clone().unwrap_or_else(|| "Nothing here yet.".to_string());
                     data.get()
                         .map(|res| match res {
                             Ok(value) => {
@@ -1032,6 +1272,7 @@ fn ResourceFeature(
                                     <ResourceValue
                                         feature_name=feature_name
                                         transitions=transitions
+                                        empty=empty
                                         value=value
                                         pending_transitions=pending_transitions
                                         transition_batch=transition_batch
@@ -1058,11 +1299,23 @@ fn ResourceFeature(
 fn ResourceValue(
     feature_name: String,
     transitions: Vec<Transition>,
+    empty: String,
     value: serde_json::Value,
     pending_transitions: RwSignal<std::collections::HashMap<(String, String), String>>,
     transition_batch: ServerAction<TransitionAnswers>,
 ) -> impl IntoView {
+    // A jq like `.[] | {...}` over an empty list yields no output at
+    // all - that arrives as null, and it's the same silence as [].
+    if value.is_null() {
+        return view! { <p class="resource-empty">{empty}</p> }.into_any();
+    }
     if let serde_json::Value::Array(items) = &value {
+        // Before the Answer parse below: an empty list deserializes as
+        // an (empty) Vec<Answer> too, and rendered as a blank
+        // answer-list instead of saying anything.
+        if items.is_empty() {
+            return view! { <p class="resource-empty">{empty}</p> }.into_any();
+        }
         if let Ok(answers) = serde_json::from_value::<Vec<Answer>>(value.clone()) {
             let mut answers = answers;
             answers.sort_by(|a, b| {
@@ -1095,9 +1348,6 @@ fn ResourceValue(
             }
             .into_any();
         }
-        if items.is_empty() {
-            return view! { <p class="resource-empty">"Nothing here yet."</p> }.into_any();
-        }
         // A list of plain objects (e.g. a jq-shaped GiteaStarred/Url
         // resource) - render as cards rather than dumping raw JSON.
         // Generic on purpose, no content-declared "kind": `name`/`title`
@@ -1484,18 +1734,73 @@ fn NotFound() -> impl IntoView {
     }
 }
 
-#[server]
+/// What a URL resolves to: the question (dynamic pages arrive with
-pub async fn get_question(path: String) -> Result<Option<Question>, ServerFnError> {
+/// their segment value already substituted, see
+/// `content::resolve_question`) plus whether a `requires_chain` gate
+/// blocked it - `(target id, target name)` so the gate can point the
+/// visitor at where the required answer comes from.
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct Page {
+    pub question: Question,
+    pub chain_gate: Option<(String, String)>,
+}
+
+#[server(endpoint = "get_question")]
+pub async fn get_question(
+    path: String,
+    chain: Option<String>,
+) -> Result<Option<Page>, ServerFnError> {
+    use crate::content::{path_matches, resolve_question};
     use crate::server::AppState;
     let state = expect_context::<AppState>();
-    Ok(state.questions.load().get(&path).cloned())
+    let questions = state.questions.load();
+    let Some(question) = resolve_question(&questions, &path) else {
+        return Ok(None);
+    };
+    let mut chain_gate = None;
+    if let Some(target) = &question.requires_chain {
+        // The claimed lineage must verifiably end at the required
+        // question - an unindexed or absent hash reads as unverified,
+        // and the gate stays shut. Dynamic targets match any concrete
+        // answer of theirs.
+        let verified = match &chain {
+            Some(hash) => crate::chain::lookup_node(&state.jetstream, hash)
+                .await
+                .is_some_and(|node| {
+                    node.question_id == *target
+                        || path_matches(target, &node.question_id).is_some()
+                }),
+            None => false,
+        };
+        if !verified {
+            let name = questions
+                .get(target)
+                .map(|q| q.name.clone())
+                .unwrap_or_default();
+            chain_gate = Some((target.clone(), name));
+        }
+    }
+    Ok(Some(Page {
+        question,
+        chain_gate,
+    }))
+}
+
+/// The content repo's branding (`site.yaml`) - title, wordmark, hero
+/// kind. Defaults (= the historical uhhm look) when the repo declares
+/// nothing.
+#[server(endpoint = "get_site")]
+pub async fn get_site() -> Result<SiteConfig, ServerFnError> {
+    use crate::server::AppState;
+    let state = expect_context::<AppState>();
+    Ok(state.site.load().as_ref().clone())
 }
 
 /// Every question the current visitor qualifies for, as (id, name) -
 /// the site nav's data. Context-dependent: an owner session sees the
 /// gated pages too, and `followup` pages only appear once the visitor
 /// carries an answer chain.
-#[server]
+#[server(endpoint = "list_qualifying_questions")]
 pub async fn list_qualifying_questions(
     has_chain: bool,
 ) -> Result<Vec<(String, String)>, ServerFnError> {
@@ -1515,7 +1820,9 @@ pub async fn list_qualifying_questions(
         .load()
         .values()
         .filter(|q| is_qualified(user.as_ref(), q))
-        .filter(|q| !q.followup || has_chain)
+        .filter(|q| !q.is_followup() || has_chain)
+        // A dynamic page has no URL of its own to link to.
+        .filter(|q| !q.is_dynamic())
         .map(|q| (q.id.clone(), q.name.clone()))
         .collect();
     out.sort();
@@ -1528,7 +1835,7 @@ pub struct SubmitResult {
     pub chain_hash: String,
 }
 
-#[server]
+#[server(endpoint = "submit_answer")]
 pub async fn submit_answer(
     question_id: String,
     alternative: String,
@@ -1543,11 +1850,10 @@ pub async fn submit_answer(
     use crate::server::AppState;
 
     let state = expect_context::<AppState>();
-    let question = state
+    // resolve_question, not a plain map get: a dynamic page's concrete
-        .questions
+    // path (what the client holds as its question id) resolves to the
-        .load()
+    // pattern page it came from.
-        .get(&question_id)
+    let question = crate::content::resolve_question(&state.questions.load(), &question_id)
-        .cloned()
         .ok_or_else(|| ServerFnError::new("unknown question"))?;
 
     let session: tower_sessions::Session = leptos_axum::extract().await?;
@@ -1564,6 +1870,9 @@ pub async fn submit_answer(
         .iter()
         .find(|a| a.name == alternative)
         .ok_or_else(|| ServerFnError::new("unknown alternative"))?;
+    if alt.disabled {
+        return Err(ServerFnError::new("this alternative isn't open yet"));
+    }
     let next = alt.action.clone();
     let record_as = alt.record_as.clone();
 
@@ -1588,6 +1897,14 @@ pub async fn submit_answer(
     .await
     .map_err(|e| ServerFnError::new(format!("nats publish failed: {e}")))?;
 
+    // Index the node so requires_chain pages can verify lineage.
+    // Best-effort: the NATS event above is the durable record.
+    if let Err(e) =
+        crate::chain::record_node(&state.jetstream, &chain_hash, &question_id, timestamp_ms).await
+    {
+        tracing::error!("failed to index chain node: {e}");
+    }
+
     // Best-effort: a bucket-write hiccup shouldn't fail a submission the
     // NATS event has already recorded.
     if let Some(bucket) = &record_as {

src/auth.rs

@@ -19,7 +19,7 @@ pub struct User {
 pub const SESSION_USER_KEY: &str = "user";
 
 /// Returns the currently signed-in user, if any.
-#[server]
+#[server(endpoint = "current_user")]
 pub async fn current_user() -> Result<Option<User>, ServerFnError> {
     let session: tower_sessions::Session = leptos_axum::extract().await?;
     let user = session

src/bin/question_lint.rs

@@ -32,12 +32,15 @@ async fn main() -> anyhow::Result<()> {
         }
     }
 
-    let (questions, aggregates_map) = if let Some(dir) = path {
+    let (questions, aggregates_map, site) = if let Some(dir) = path {
-        (load_from_dir(&dir)?, load_aggregates_from_dir(&dir)?)
+        (load_from_dir(&dir)?, load_aggregates_from_dir(&dir)?, load_site_from_dir(&dir)?)
     } else if let Some(repo_url) = repo {
         let questions = content::load_questions_from_gitea(&repo_url, &branch, &subdir).await?;
         let aggregates_map = content::load_aggregates_from_gitea(&repo_url, &branch).await?;
-        (questions, aggregates_map)
+        // load_site_from_gitea already validates; a missing file is
+        // the default config, same as at portal boot.
+        let site = content::load_site_from_gitea(&repo_url, &branch).await?;
+        (questions, aggregates_map, site)
     } else {
         eprintln!(
             "usage: question-lint --repo <gitea-url> [--branch main] [--subdir questions] | --path <local-dir>"
@@ -45,6 +48,10 @@ async fn main() -> anyhow::Result<()> {
         std::process::exit(2);
     };
 
+    if let Err(e) = site.validate() {
+        eprintln!("FAIL: {e}");
+        std::process::exit(1);
+    }
     match content::validate_questions(&questions, &aggregates_map) {
         Ok(()) => {
             println!(
@@ -61,6 +68,22 @@ async fn main() -> anyhow::Result<()> {
     }
 }
 
+/// The offline counterpart to `content::load_site_from_gitea` -
+/// `site.yaml` lives at the repo root like `aggregates.yaml`, and is
+/// just as optional locally: missing means default branding.
+fn load_site_from_dir(dir: &str) -> anyhow::Result<content::SiteConfig> {
+    let site_path = std::path::Path::new(dir)
+        .parent()
+        .unwrap_or_else(|| std::path::Path::new("."))
+        .join("site.yaml");
+    if !site_path.exists() {
+        return Ok(content::SiteConfig::default());
+    }
+    let raw = std::fs::read_to_string(&site_path)
+        .map_err(|e| anyhow::anyhow!("reading {}: {e}", site_path.display()))?;
+    serde_yaml::from_str(&raw).map_err(|e| anyhow::anyhow!("parsing {}: {e}", site_path.display()))
+}
+
 /// The offline counterpart to `content::load_aggregates_from_gitea` -
 /// `aggregates.yaml` lives at the repo root, one level up from the
 /// pages directory `--path` names, so `dir`'s parent is where it's
@@ -85,23 +108,38 @@ fn load_aggregates_from_dir(
 }
 
 /// The offline counterpart to `content::load_questions_from_gitea` -
-/// same "every `*.yaml` file becomes a `Question` keyed by its own
+/// the same recursive tree walk and `content::build_questions`
-/// `id`" shape, just reading a local checkout instead of Gitea's API,
+/// pipeline (derived ids, relative refs, sections, followup
+/// inference), just reading a local checkout instead of Gitea's API,
 /// for linting a branch that hasn't been pushed yet.
 fn load_from_dir(
     dir: &str,
 ) -> anyhow::Result<std::collections::HashMap<String, content::Question>> {
-    let mut out = std::collections::HashMap::new();
+    let base = std::path::Path::new(dir);
+    let mut files = Vec::new();
+    collect_yaml(base, base, &mut files)?;
+    content::build_questions(&files)
+}
+
+fn collect_yaml(
+    base: &std::path::Path,
+    dir: &std::path::Path,
+    out: &mut Vec<(String, String)>,
+) -> anyhow::Result<()> {
     for entry in std::fs::read_dir(dir)? {
-        let entry = entry?;
+        let path = entry?.path();
-        let path = entry.path();
+        if path.is_dir() {
-        if path.extension().and_then(|e| e.to_str()) != Some("yaml") {
+            collect_yaml(base, &path, out)?;
-            continue;
+        } else if path.extension().and_then(|e| e.to_str()) == Some("yaml") {
+            let rel = path
+                .strip_prefix(base)
+                .expect("walked paths sit under their base")
+                .to_string_lossy()
+                .replace('\\', "/");
+            let raw = std::fs::read_to_string(&path)
+                .map_err(|e| anyhow::anyhow!("reading {}: {e}", path.display()))?;
+            out.push((rel, raw));
         }
-        let raw = std::fs::read_to_string(&path)?;
-        let question: content::Question = serde_yaml::from_str(&raw)
-            .map_err(|e| anyhow::anyhow!("parsing {}: {e}", path.display()))?;
-        out.insert(question.id.clone(), question);
     }
-    Ok(out)
+    Ok(())
 }

src/chain.rs

@@ -9,6 +9,60 @@ use sha2::{Digest, Sha256};
 /// submitted responses, and a timestamp. Parents are sorted first so the
 /// hash doesn't depend on the order multiple parents happened to arrive
 /// in.
+/// Where submitted chain nodes are indexed - hash → which question was
+/// answered. Small on purpose (no responses), and shared by every
+/// portal instance on the JetStream (hashes are globally unique, so
+/// cross-site collisions can't happen). This is what lets
+/// `requires_chain` pages verify a visitor's `?chain=` actually ends
+/// at the question they claim to have answered.
+pub const CHAIN_BUCKET: &str = "portal_chains";
+
+#[derive(serde::Serialize, serde::Deserialize)]
+pub struct ChainNode {
+    pub question_id: String,
+    pub timestamp_ms: i64,
+}
+
+/// Indexes one submitted node. Best-effort by design (the caller logs
+/// and continues): the NATS event is the durable record, this is a
+/// lookup convenience.
+pub async fn record_node(
+    js: &async_nats::jetstream::Context,
+    chain_hash: &str,
+    question_id: &str,
+    timestamp_ms: i64,
+) -> anyhow::Result<()> {
+    let store = match js.get_key_value(CHAIN_BUCKET).await {
+        Ok(store) => store,
+        Err(_) => {
+            js.create_key_value(async_nats::jetstream::kv::Config {
+                bucket: CHAIN_BUCKET.to_string(),
+                ..Default::default()
+            })
+            .await?
+        }
+    };
+    let node = ChainNode {
+        question_id: question_id.to_string(),
+        timestamp_ms,
+    };
+    store.put(chain_hash, serde_json::to_vec(&node)?.into()).await?;
+    Ok(())
+}
+
+/// Looks a chain hash up - `None` covers both "no such node" and
+/// "bucket not created yet" (no submissions anywhere), which read the
+/// same to a `requires_chain` check: the claimed lineage can't be
+/// verified, so the gate stays shut.
+pub async fn lookup_node(
+    js: &async_nats::jetstream::Context,
+    chain_hash: &str,
+) -> Option<ChainNode> {
+    let store = js.get_key_value(CHAIN_BUCKET).await.ok()?;
+    let bytes = store.get(chain_hash).await.ok()??;
+    serde_json::from_slice(&bytes).ok()
+}
+
 pub fn hash_node(
     question_id: &str,
     parent_hashes: &[String],

src/main.rs

@@ -29,12 +29,15 @@ async fn main() -> anyhow::Result<()> {
         .unwrap_or_else(|_| "https://project.uhhm.no/uhhm/questions".to_string());
     let content_branch = std::env::var("CONTENT_BRANCH").unwrap_or_else(|_| "main".to_string());
     let gitea_base = content::gitea_api_base(&content_repo)?;
+    let content_raw_base = content::gitea_raw_base(&content_repo)?;
     let aggregates = content::load_aggregates_from_gitea(&content_repo, &content_branch).await?;
     let questions = content::load_questions_from_gitea(&content_repo, &content_branch, "questions").await?;
     content::validate_questions(&questions, &aggregates)?;
+    let site = content::load_site_from_gitea(&content_repo, &content_branch).await?;
     tracing::info!(count = questions.len(), repo = %content_repo, branch = %content_branch, "loaded content");
     let questions = Arc::new(arc_swap::ArcSwap::from_pointee(questions));
     let aggregates = Arc::new(arc_swap::ArcSwap::from_pointee(aggregates));
+    let site = Arc::new(arc_swap::ArcSwap::from_pointee(site));
 
     let nats_url =
         std::env::var("NATS_URL").unwrap_or_else(|_| "nats://127.0.0.1:4222".to_string());
@@ -65,10 +68,11 @@ async fn main() -> anyhow::Result<()> {
     tokio::spawn(content::watch_for_reload(
         nats.clone(),
         content_repo,
-        content_branch,
+        content_branch.clone(),
         "questions".to_string(),
         questions.clone(),
         aggregates.clone(),
+        site.clone(),
     ));
 
     let state = AppState {
@@ -77,7 +81,10 @@ async fn main() -> anyhow::Result<()> {
         jetstream,
         questions,
         aggregates,
+        site,
         gitea_base,
+        content_raw_base,
+        content_branch: content_branch.clone(),
         oidc: oidc_state,
         garage,
     };
@@ -134,8 +141,25 @@ async fn main() -> anyhow::Result<()> {
         .route("/api/{*fn_name}", any(server_fn_handler))
         .route("/upload", post(upload::upload))
         .route("/gitea-repo", get(content::gitea_repo_handler))
+        // Content-shipped assets (hero module etc.), same-origin.
+        .route("/site/{*path}", get(content::site_asset_handler))
         .route("/automation/kv/{bucket}", get(content::automation_kv_handler))
-        .nest_service("/pkg", ServeDir::new(pkg_dir))
+        // no-cache = "revalidate before reuse", not "don't cache":
+        // pkg files keep the same names across releases (portal.js,
+        // portal.wasm), and without this browsers heuristically cache
+        // them - a stale wasm from the previous release then talks to
+        // a server whose server-fn wire format has moved on and every
+        // page renders as its error branch. A 304 per load is the
+        // price of never shipping that skew again.
+        .nest_service(
+            "/pkg",
+            tower::ServiceBuilder::new()
+                .layer(tower_http::set_header::SetResponseHeaderLayer::overriding(
+                    axum::http::header::CACHE_CONTROL,
+                    axum::http::HeaderValue::from_static("no-cache"),
+                ))
+                .service(ServeDir::new(pkg_dir)),
+        )
         .nest_service("/fonts", ServeDir::new(fonts_dir))
         .route_service("/favicon-light.svg", ServeFile::new(favicon_light_path))
         .route_service("/favicon-dark.svg", ServeFile::new(favicon_dark_path))

src/resource.rs

@@ -16,7 +16,7 @@ use leptos::prelude::*;
 /// fetch (`GiteaStarred`/`GiteaOrgRepos`/`Url`), the mechanism behind
 /// "a resource parameterized by other form fields"; a `Kv` resource
 /// ignores them entirely, same as today.
-#[server]
+#[server(endpoint = "get_resource")]
 pub async fn get_resource(
     question_id: String,
     alternative: String,
@@ -49,7 +49,7 @@ pub async fn get_resource(
 /// of whether it's displayed read-only or offered as choices to pick
 /// from, so this deliberately doesn't duplicate the source-dispatch or
 /// jq-shaping logic - see `fetch_resource_value`.
-#[server]
+#[server(endpoint = "get_requirement_options")]
 pub async fn get_requirement_options(
     question_id: String,
     alternative: String,
@@ -80,7 +80,7 @@ pub async fn get_requirement_options(
 /// `get_requirement_options`: fetches the resource a bound field
 /// loads its value from, parameterized by the watched sibling's value
 /// (already inside `params`, keyed by the bind's param name).
-#[server]
+#[server(endpoint = "get_requirement_binding")]
 pub async fn get_requirement_binding(
     question_id: String,
     alternative: String,
@@ -122,11 +122,12 @@ fn find_feature(
     alternative: &str,
     feature_name: &str,
 ) -> Result<crate::content::Feature, ServerFnError> {
-    let question = state
+    // resolve_question, not a plain map get: a dynamic page's client
-        .questions
+    // holds its concrete path as the question id, and resolution is
-        .load()
+    // also what substitutes the URL segment into the page's resource
-        .get(question_id)
+    // keys - so this lookup is where a `/review/<record>` page's
-        .cloned()
+    // feature acquires its record-specific key.
+    let question = crate::content::resolve_question(&state.questions.load(), question_id)
         .ok_or_else(|| ServerFnError::new("unknown question"))?;
     question
         .alternatives
@@ -220,6 +221,10 @@ async fn fetch_resource_value(
         ResourceSource::GiteaOrgRepos { org } => {
             fetch_gitea_json(state, &format!("/api/v1/orgs/{org}/repos"), params).await?
         }
+        ResourceSource::GiteaReleases { owner, repo } => {
+            fetch_gitea_json(state, &format!("/api/v1/repos/{owner}/{repo}/releases"), params)
+                .await?
+        }
         ResourceSource::Url { url } => fetch_url_json(url, params).await?,
     };
 
@@ -442,10 +447,14 @@ mod tests {
     use super::*;
 
     /// A canned, Gitea-API-shaped fixture - the same fields the real
-    /// `/users/{username}/starred` endpoint returns - run through the
+    /// `/users/{username}/starred` endpoint returns (Gitea 1.27:
+    /// `stars_count`, not GitHub's `stargazers_count`; `website` is ""
+    /// when the repo's Website setting is empty) - run through the
     /// filter `index.yaml`'s "What we've built" resource actually
     /// declares, confirming the `jaq` integration produces the shape
-    /// the frontend showcase card expects.
+    /// the frontend showcase card expects: the Website setting wins
+    /// over the repo url, and a private repo without one gets a null
+    /// url (unlinked card) instead of a link that 404s for visitors.
     #[test]
     fn jq_shapes_gitea_repo_list_for_the_showcase() {
         let input = serde_json::json!([
@@ -453,28 +462,86 @@ mod tests {
                 "name": "cnats",
                 "description": "A NATS-backed chat client",
                 "html_url": "https://project.uhhm.no/bl/cnats",
-                "stargazers_count": 3,
+                "website": "",
+                "stars_count": 3,
                 "private": false
             },
             {
-                "name": "portal",
+                "name": "secret-product",
-                "description": "This app",
+                "description": "Private repo advertised via its homepage",
-                "html_url": "https://project.uhhm.no/uhhm/portal",
+                "html_url": "https://project.uhhm.no/uhhm/secret-product",
-                "stargazers_count": 1,
+                "website": "https://secret-product.example",
-                "private": false
+                "stars_count": 2,
+                "private": true
+            },
+            {
+                "name": "internal-tool",
+                "description": "Private repo with no homepage",
+                "html_url": "https://project.uhhm.no/uhhm/internal-tool",
+                "website": "",
+                "stars_count": 1,
+                "private": true
             }
         ]);
-        let filter = ".[] | {name: .name, description: .description, url: .html_url, stars: .stargazers_count}";
+        let filter = r#".[] | {name: .name, description: .description,
+            stars: .stars_count,
+            url: (if .website != null and .website != "" then .website
+            elif .private then null
+            else .html_url end)}"#;
+
+        let shaped = apply_jq(filter, &input).expect("filter runs");
+        let items = shaped.as_array().expect("array output");
+        assert_eq!(items.len(), 3);
+        // Public without a website still links to the repo.
+        assert_eq!(items[0]["name"], "cnats");
+        assert_eq!(items[0]["url"], "https://project.uhhm.no/bl/cnats");
+        assert_eq!(items[0]["stars"], 3);
+        // Private with a website links there, never to the repo.
+        assert_eq!(items[1]["url"], "https://secret-product.example");
+        // Private without a website gets no link at all.
+        assert_eq!(items[2]["url"], serde_json::Value::Null);
+        // The filter never mentions `private` - confirms shaping
+        // actually drops fields, not just passes the object through.
+        assert!(items[0].get("private").is_none());
+    }
+
+    /// Gitea-1.27-shaped release fixtures through the filter
+    /// redoal/questions' "Our Composition" feature declares. While the
+    /// repo is private the filter pins `url: null` - a private
+    /// release's html_url 404s for anonymous visitors, so the card
+    /// must render an unlinked heading instead.
+    #[test]
+    fn jq_shapes_gitea_release_list_for_redoal() {
+        let input = serde_json::json!([
+            {
+                "name": "varde bring-up",
+                "tag_name": "v0.3.0",
+                "body": "Embedded varde-core on iOS.",
+                "published_at": "2026-08-16T09:00:00Z",
+                "html_url": "https://project.uhhm.no/redoal/redoal/releases/tag/v0.3.0",
+                "draft": false,
+                "prerelease": true
+            },
+            {
+                "name": "first echo",
+                "tag_name": "v0.1.0",
+                "body": "Gesture keys round-trip.",
+                "published_at": "2026-05-01T09:00:00Z",
+                "html_url": "https://project.uhhm.no/redoal/redoal/releases/tag/v0.1.0",
+                "draft": false,
+                "prerelease": false
+            }
+        ]);
+        let filter = ".[] | {name: .name, description: .body, tag: .tag_name, published: .published_at, url: null}";
 
         let shaped = apply_jq(filter, &input).expect("filter runs");
         let items = shaped.as_array().expect("array output");
         assert_eq!(items.len(), 2);
-        assert_eq!(items[0]["name"], "cnats");
+        assert_eq!(items[0]["name"], "varde bring-up");
-        assert_eq!(items[0]["url"], "https://project.uhhm.no/bl/cnats");
+        assert_eq!(items[0]["tag"], "v0.3.0");
-        assert_eq!(items[0]["stars"], 3);
+        assert_eq!(items[0]["description"], "Embedded varde-core on iOS.");
-        // The filter never mentions `private` - confirms shaping
+        assert_eq!(items[0]["url"], serde_json::Value::Null, "no public link while private");
-        // actually drops fields, not just passes the object through.
+        assert!(items[0].get("html_url").is_none());
-        assert!(items[0].get("private").is_none());
     }
 
     #[test]

src/server/mod.rs

@@ -28,11 +28,20 @@ pub struct AppState {
     /// with no entry here isn't event-sourced - plain KV mutate-in-place
     /// still works (see `answers.rs`).
     pub aggregates: Arc<ArcSwap<HashMap<String, crate::aggregates::AggregateSchema>>>,
+    /// Site branding from the content repo's optional `site.yaml`
+    /// (title, wordmark, hero kind) - hot-swapped with `questions`/
+    /// `aggregates` on the same reload. Default = the historical uhhm
+    /// look.
+    pub site: Arc<ArcSwap<crate::content::SiteConfig>>,
     /// `scheme://host` of the Gitea instance content is loaded from
     /// (see `content::gitea_api_base`) - kept alongside `questions`
     /// rather than re-derived per call, since `resolve_gitea_repo` needs
     /// it too and has no other reason to see `CONTENT_REPO` itself.
     pub gitea_base: String,
+    /// `{gitea}/api/v1/repos/{owner}/{repo}/raw` and the branch - what
+    /// `content::site_asset_handler` proxies content-shipped assets from.
+    pub content_raw_base: String,
+    pub content_branch: String,
     pub oidc: Arc<oidc::Oidc>,
     /// `None` when `GARAGE_*` env vars aren't set - uploads are the one
     /// optional feature, everything else works without Garage.

style/main.css

@@ -47,20 +47,67 @@
   --accent-soft: rgba(142, 194, 192, 0.16);
 
   --paper: #0a0a0a;
-  --paper-raised: #161616;
   --ink: #ededed;
   --ink-dim: #9a9a9a;
   --line: #2a2a2a;
 
+  /* Cards float over a sticky hero piece - translucent so the piece
+     reads faintly through them (paired with backdrop-filter on
+     .alt-card), shadowed so their edge against the animated backdrop
+     is a soft lift rather than a hard contrast line. */
+  --card-bg: rgba(22, 22, 22, 0.35);
+  --card-bg-opaque: rgba(22, 22, 22, 0.84);
+  --card-shadow: rgba(0, 0, 0, 0.5);
+
+  --error: #ff6b6b;
+  /* Behind .hero-copy: dark halo on dark stock, paper halo on light. */
+  --hero-glow: rgba(0, 0, 0, 0.8);
+
   --heading: "Quicksand", var(--sans);
   --sans: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
 
   --radius: 1.1rem;
 
+  /* The single place absolute units are allowed: this IS the base every
+     other length derives from (rem/em everywhere else - px is banned in
+     stylesheets). First line is the fallback for engines without lvmin. */
   font-size: 17px;
   font-size: max(12px, calc(2.1lvmin + 3pt));
 }
 
+/* Light theme: the same muted-press idea on white stock - warm paper,
+   near-black ink, and the accent deepened from dusty cyan to a teal
+   ink that actually carries as text on light paper (the dark theme's
+   #8ec2c0 washes out there). Canvas-drawing modules (gesture.js, and
+   content-shipped hero modules) mirror this palette on their own,
+   since canvas paint can't read CSS vars. */
+@media (prefers-color-scheme: light) {
+  :root {
+    --accent: #47807e;
+    --accent-soft: rgba(71, 128, 126, 0.16);
+
+    --paper: #f6f5f1;
+    --ink: #1d1d1b;
+    --ink-dim: #6d6c66;
+    --line: #d9d7cf;
+
+    --card-bg: rgba(252, 251, 248, 0.35);
+    --card-bg-opaque: rgba(252, 251, 248, 0.84);
+    --card-shadow: rgba(50, 48, 42, 0.18);
+
+    --error: #a83a32;
+    --hero-glow: rgba(246, 245, 241, 0.85);
+  }
+
+  /* The wordmark SVG is a hardcoded white stroke (also used raw in
+     dark contexts elsewhere) - flip it to ink here rather than fork
+     the asset. */
+  .wordmark img {
+    filter: invert(0.92);
+  }
+
+}
+
 * {
   box-sizing: border-box;
 }
@@ -112,7 +159,7 @@ main.not-found {
 /* hero */
 
 .hero {
-  max-width: 780px;
+  max-width: 46rem;
   margin: 0 auto;
   padding: 4rem 1.5rem 2.5rem;
   display: flex;
@@ -148,80 +195,25 @@ main.not-found {
   max-width: 46ch;
 }
 
-/* the actual "YES - Rasterized Lines" piece live at uhhm.no (see
+/* A content-shipped hero module (site.yaml hero.kind: module) draws
-   public/yes.js) - landing page only. Full-viewport so it's a real
+   into .hero-piece; the module owns its look (it may restyle .hero
-   moment, not a thumbnail; hero-copy overlays near the bottom rather
+   itself). Portal only reserves the box so the copy doesn't jump when
-   than interrupting the canvas. */
+   the module mounts - plain-vh fallback first, as everywhere. */
-
+.hero-module .hero-piece {
-.hero-yes {
   position: relative;
-  max-width: none;
   width: 100%;
-  /* svh here is only the pre-JS/no-JS fallback (and first paint before
+  min-height: 55vh;
-     yes.js's constructor runs). Once yes.js mounts, it overwrites this
+  min-height: 55svh;
-     with an inline `height: <px>` frozen from a single measurement -
-     see setupCanvas()'s comment in yes.js for why: on real mobile
-     Safari, content bottom-aligned inside this box kept sliding down
-     as the address bar collapsed even with a spec'd-stable viewport
-     unit here, so the box's actual height can't be trusted to stay
-     put on that unit alone. An inline style set from JS always wins
-     the cascade over this rule, so that frozen number is what
-     actually governs once the page is interactive.
-     Plain-vh fallback declared first - an engine without svh support
-     ignores the invalid second line rather than falling through to
-     auto height, which would collapse this to the height of its
-     in-flow content and clip the canvas via overflow:hidden below. */
-  height: 100vh;
-  height: 100svh;
-  padding: 0;
-  justify-content: flex-end;
-  overflow: hidden;
-}
-
-.hero-canvas {
-  position: absolute;
-  inset: 0;
-}
-
-.hero-canvas canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-}
-
-.hero-canvas #rasterCanvas {
-  mix-blend-mode: overlay;
-  opacity: 0.5;
-}
-
-.hero-yes .hero-copy {
-  position: relative;
-  z-index: 1;
-  padding: 0 1.5rem 3.5rem;
-  gap: 0.6rem;
-  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
-}
-
-/* Softens the otherwise hard cut where the full-bleed canvas meets the
-   page background right below it - fades to the same --paper color
-   over the last few ems instead of stopping dead. Non-interactive so
-   it never steals clicks meant for the canvas underneath. */
-.hero-yes::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 8rem;
-  background: linear-gradient(to bottom, transparent, var(--paper));
-  pointer-events: none;
-  z-index: 1;
 }
 
 /* alternatives */
 
+/* position + z-index on these three: everything that scrolls over the
+   sticky canvas must be a positioned box above the hero's z-index 0,
+   or the (positioned) hero would paint over it. */
 .alternatives {
+  position: relative;
+  z-index: 1;
   max-width: 75ch;
   margin: 0 auto 5rem;
   padding: 0 1.5rem;
@@ -229,7 +221,13 @@ main.not-found {
   gap: 1.25rem;
 }
 
-@media (max-width: 700px) {
+.question-nav,
+.question-responsible {
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 43.75rem) {
   .alternatives {
     padding: 0;
     gap: 3.5rem;
@@ -263,7 +261,7 @@ main.not-found {
 .question-nav a {
   color: var(--ink-dim);
   text-decoration: none;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 0.06rem solid var(--line);
 }
 
 .question-nav a:hover {
@@ -292,10 +290,25 @@ main.not-found {
 }
 
 .alt-card {
-  background: var(--paper-raised);
+  background: var(--card-bg);
-  border: 1px solid var(--line);
+  /* Frosted glass over the animated canvas behind: the blur is what
+     keeps text on a translucent card readable while the piece still
+     reads through it in color and motion. */
+  -webkit-backdrop-filter: blur(0.8rem);
+  backdrop-filter: blur(0.8rem);
+  border: 0.06rem solid var(--line);
   border-radius: var(--radius);
   padding: 1.75rem 1.9rem;
+  box-shadow: 0 1.1rem 2.4rem var(--card-shadow);
+}
+
+/* Without backdrop blur, 0.55-alpha cards put text straight over the
+   moving canvas - illegible. Engines lacking the filter get a
+   near-opaque card instead. */
+@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
+  .alt-card {
+    background: var(--card-bg-opaque);
+  }
 }
 
 .alt-image {
@@ -363,7 +376,7 @@ main.not-found {
 }
 
 .feature {
-  border-left: 3px solid var(--feature-accent, transparent);
+  border-left: 0.18rem solid var(--feature-accent, transparent);
 }
 
 .feature-icon {
@@ -413,7 +426,7 @@ textarea {
   font: inherit;
   color: var(--ink);
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   padding: 0.65rem 0.8rem;
   width: 100%;
@@ -438,21 +451,106 @@ input:focus,
 textarea:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: 0 0 0 0.18rem var(--accent-soft);
+}
+
+/* One placeholder treatment for every input-like surface: solid
+   ink-dim, no translucency. opacity: 1 also undoes the UA's own
+   placeholder dimming (Firefox) and ProseKit's 0.3 on its
+   placeholder pseudo-element, which read far dimmer than the
+   native inputs next to it. */
+::placeholder,
+.prosekit-editor .prosekit-placeholder::before,
+.prosekit-editor.prosekit-placeholder::before {
+  color: var(--ink-dim);
+  opacity: 1;
 }
 
 .prosekit-wrap {
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   overflow: hidden;
 }
 
+/* The gesture drawing field (gesture.js). Stroke/ghost/echo colors
+   live in the JS module's own palette table - canvas can't read these
+   custom properties - so palette changes go there AND here. */
+.gesture-wrap {
+  position: relative;
+  width: 100%;
+}
+
+/* The canvas is created by JS only after wasm hydration - reserve its
+   3/2 box until then so content below doesn't jump. Scoped to :empty
+   on purpose: on the mounted wrap (a stretched item inside the flex
+   .field) the same aspect-ratio turned the echo strip's extra height
+   into extra WIDTH and the whole card ballooned past the viewport
+   after the first stroke. */
+.gesture-wrap:empty {
+  aspect-ratio: 3 / 2;
+}
+
+.gesture-canvas {
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  background: var(--paper);
+  border: 0.06rem solid var(--line);
+  border-radius: 0.6rem;
+  cursor: crosshair;
+  /* Load-bearing on touch: without it the browser pans instead of
+     letting the stroke happen. */
+  touch-action: none;
+}
+
+.gesture-echoes {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  min-height: 3rem;
+}
+
+.gesture-echoes:empty {
+  display: none;
+}
+
+.gesture-echo {
+  width: 3rem;
+  height: 3rem;
+  background: var(--paper);
+  border: 0.06rem solid var(--line);
+  border-radius: 0.4rem;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.gesture-echo.shown {
+  opacity: var(--echo-strength, 1);
+}
+
+.gesture-status {
+  position: absolute;
+  top: 0.55rem;
+  right: 0.55rem;
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: var(--ink-dim);
+  opacity: 0.35;
+  transition: opacity 0.3s ease, background 0.3s ease;
+}
+
+.gesture-status.live {
+  background: var(--accent);
+  opacity: 0.9;
+}
+
 .prosekit-toolbar {
   display: flex;
   gap: 0.2rem;
   padding: 0.4rem;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 0.06rem solid var(--line);
   flex-wrap: wrap;
 }
 
@@ -461,7 +559,7 @@ textarea:focus {
   font-size: 0.9rem;
   color: var(--ink-dim);
   background: transparent;
-  border: 1px solid transparent;
+  border: 0.06rem solid transparent;
   border-radius: 0.4rem;
   padding: 0.3rem 0.55rem;
   cursor: pointer;
@@ -491,60 +589,63 @@ textarea:focus {
 
 .prosekit-wrap:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: 0 0 0 0.18rem var(--accent-soft);
 }
 
-/* ProseKit's typography.css (loaded from esm.sh at mount time) sets
+/* The editor's whole type scale, in rem. ProseKit's own typography.css
-   fixed px font sizes on .ProseMirror, so they ignore the responsive
+   is deliberately not loaded (it sizes content in fixed px - see
-   root font-size. Re-state them in rem/em at the same proportions,
+   mountEditor in prosekit-editor.js), so these rules are the only
-   with .prosekit-editor prefixed so these win on specificity. */
+   typography the editor gets, on top of UA defaults (em-based, they
-.prosekit-editor .ProseMirror p {
+   scale fine for lists/blockquote/code). NOTE: editor.mount() turns the
+   .prosekit-editor div itself into the .ProseMirror root, so content
+   elements are its direct children - no .ProseMirror in the selector. */
+.prosekit-editor p {
   font-size: 1rem;
   line-height: 1.5;
   margin: 0 0 0.6em;
 }
 
-.prosekit-editor .ProseMirror p:last-child {
+.prosekit-editor p:last-child {
   margin-bottom: 0;
 }
 
-.prosekit-editor .ProseMirror h1 {
+.prosekit-editor h1 {
   font-size: 2.5rem;
   line-height: 1.1;
   margin: 0.9em 0 0.1em;
 }
 
-.prosekit-editor .ProseMirror h2 {
+.prosekit-editor h2 {
   font-size: 1.875rem;
   line-height: 1.3;
   margin: 1.05em 0 0.13em;
 }
 
-.prosekit-editor .ProseMirror h3 {
+.prosekit-editor h3 {
   font-size: 1.5rem;
   line-height: 1.33;
   margin: 0.9em 0 0.04em;
 }
 
-.prosekit-editor .ProseMirror h4 {
+.prosekit-editor h4 {
   font-size: 1.25rem;
   line-height: 1.3;
   margin: 0.8em 0 0.05em;
 }
 
-.prosekit-editor .ProseMirror h5 {
+.prosekit-editor h5 {
   font-size: 1.125rem;
   line-height: 1.22;
   margin: 0.78em 0 0.06em;
 }
 
-.prosekit-editor .ProseMirror h6 {
+.prosekit-editor h6 {
   font-size: 1rem;
   line-height: 1.25;
   margin: 0.75em 0 0.06em;
 }
 
-.prosekit-editor .ProseMirror :is(h1, h2, h3, h4, h5, h6):first-child {
+.prosekit-editor :is(h1, h2, h3, h4, h5, h6):first-child {
   margin-top: 0;
 }
 
@@ -552,7 +653,7 @@ textarea:focus {
   font-family: var(--sans);
   font-weight: 600;
   font-size: 0.95rem;
-  color: #0a0a0a;
+  color: var(--paper);
   background: var(--accent);
   border: none;
   border-radius: 0.7rem;
@@ -566,7 +667,7 @@ textarea:focus {
 }
 
 .alt-submit:active {
-  transform: translateY(1px);
+  transform: translateY(0.06em);
 }
 
 .alt-submit:disabled {
@@ -574,6 +675,13 @@ textarea:focus {
   cursor: wait;
 }
 
+/* A content-disabled alternative (`disabled: true`): announced, not
+   yet takeable - reads as a promise, not as a stuck form. */
+.alt-submit.soon:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .gate-card {
   text-align: center;
 }
@@ -591,13 +699,13 @@ textarea:focus {
 }
 
 .resource-error {
-  color: #ff6b6b;
+  color: var(--error);
   font-size: 0.9rem;
 }
 
 .resource-raw {
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   padding: 0.8rem;
   font-size: 0.82rem;
@@ -611,7 +719,7 @@ textarea:focus {
 }
 
 .answer-row {
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.8rem;
   padding: 1rem 1.1rem;
   display: grid;
@@ -624,7 +732,7 @@ textarea:focus {
 
 .answer-fields {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
   gap: 0.5rem 1rem;
 }
 
@@ -674,7 +782,7 @@ textarea:focus {
 }
 
 .item-card {
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.8rem;
   padding: 1rem 1.1rem;
   display: grid;
@@ -736,8 +844,8 @@ textarea:focus {
   font-size: 0.85rem;
   color: var(--ink);
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
-  border-radius: 999px;
+  border-radius: 999rem;
   padding: 0.4rem 0.9rem;
   cursor: pointer;
   transition: border-color 120ms, color 120ms, background 120ms;
@@ -759,7 +867,7 @@ textarea:focus {
   cursor: not-allowed;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 40rem) {
   .hero {
     padding: 3rem 1.25rem 2rem;
   }

yes.js

@@ -1,490 +0,0 @@
-// Ported from ~/repos/webpage/content/visualize/ah.html ("YES - Rasterized
-// Lines"), the piece currently live at uhhm.no - kept as the actual asset,
-// not reinvented. Two changes from the original: exported as a class (no
-// auto-init on `window load`, since Leptos controls when this mounts) and
-// a `stop()` method that actually breaks the requestAnimationFrame loop -
-// the original ran forever once started, fine for a static page that's
-// the whole document, not fine in an SPA where this hero mounts/unmounts
-// as you navigate.
-
-export class RasterizedYES {
-    constructor() {
-        this.rasterCanvas = document.getElementById('rasterCanvas');
-        this.lineCanvas = document.getElementById('lineCanvas');
-
-        // The Rust side only constructs this once it's confirmed (via a
-        // NodeRef) that the canvas is mounted, but that guard has shown
-        // a real gap on fast client-side re-navigation back to `/` -
-        // this is the actual failure point, so it gets its own defense
-        // rather than depending on getting that timing exactly right
-        // from the other side of the wasm boundary. Leaving the
-        // instance otherwise-inert (no crash, no animation) rather than
-        // throwing mid-render - `stop()` already tolerates a partially
-        // (non-)initialized instance.
-        if (!this.rasterCanvas || !this.lineCanvas) {
-            console.warn('RasterizedYES: canvas not in DOM yet, skipping');
-            this.destroyed = true;
-            return;
-        }
-
-        this.rasterCtx = this.rasterCanvas.getContext('2d');
-        this.lineCtx = this.lineCanvas.getContext('2d');
-
-        this.lines = [];
-        this.rasterData = null;
-        this.isActive = true;
-        this.destroyed = false;
-        this.time = 0;
-
-        this.mouseX = 0.5;
-        this.mouseY = 0.5;
-        this.containmentStrength = 0.5;
-        this.wiggleAmount = 0.5;
-
-        // .hero-canvas is inset:0 inside this - freezing an inline
-        // height here (below) is what actually locks the box, not
-        // just reading its rect.
-        this.heroEl = this.rasterCanvas.closest('.hero');
-
-        this.setupCanvas();
-        this.setupResizeHandler();
-        this.setupMouseTracking();
-        this.setupClickHandler();
-        this.rasterizeText();
-        this.initializeLines();
-        this.animate();
-    }
-
-    stop() {
-        this.destroyed = true;
-        if (this._resizeHandler) {
-            window.removeEventListener('resize', this._resizeHandler);
-        }
-    }
-
-    // Reading .hero-canvas's rendered rect (a prior attempt at this)
-    // only helps if that rect actually stays put - and on real mobile
-    // Safari it didn't: .hero-copy (bottom-aligned via flexbox inside
-    // .hero-yes) kept sliding down as the address bar collapsed, even
-    // with a spec'd-stable viewport unit (svh, then lvh) driving the
-    // box's height. Either the browser isn't holding up its end, or
-    // something in the cascade is still landing on a live value - not
-    // provable from here without the device. Rather than keep
-    // guessing at which CSS viewport unit actually holds still, yes.js
-    // becomes the source of truth instead: it freezes .hero-yes's
-    // rendered height to a literal inline px value once, up front. An
-    // inline style always wins the cascade over the stylesheet's
-    // `height: 100svh`, so once this runs, nothing the browser does
-    // with that unit afterward can move the box - the number is fixed
-    // in the DOM, not recomputed from a unit at all.
-    setupCanvas() {
-        const pixelRatio = window.devicePixelRatio || 1;
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-
-        if (this.heroEl) {
-            this.heroEl.style.height = height + 'px';
-        }
-
-        this.rasterCanvas.style.width = width + 'px';
-        this.rasterCanvas.style.height = height + 'px';
-        this.lineCanvas.style.width = width + 'px';
-        this.lineCanvas.style.height = height + 'px';
-
-        this.rasterCanvas.width = width * pixelRatio;
-        this.rasterCanvas.height = height * pixelRatio;
-        this.lineCanvas.width = width * pixelRatio;
-        this.lineCanvas.height = height * pixelRatio;
-
-        this.rasterCtx.scale(pixelRatio, pixelRatio);
-        this.lineCtx.scale(pixelRatio, pixelRatio);
-
-        this.displayWidth = width;
-        this.displayHeight = height;
-        this.pixelRatio = pixelRatio;
-    }
-
-    setupResizeHandler() {
-        // Gate on width, not height: mobile Safari's address-bar
-        // animation changes window.innerHeight continuously with no
-        // real layout change to react to (that's the live value this
-        // whole method exists to stop trusting). A genuine resize -
-        // orientation change, desktop window drag - always changes
-        // width too, so that's the real signal to re-freeze on.
-        this._resizeHandler = () => {
-            if (window.innerWidth === this.displayWidth) return;
-            this.setupCanvas();
-            this.rasterizeText();
-        };
-        window.addEventListener('resize', this._resizeHandler);
-    }
-
-    setupMouseTracking() {
-        const updatePosition = (clientX, clientY) => {
-            this.mouseX = clientX / this.displayWidth;
-            this.mouseY = clientY / this.displayHeight;
-            this.containmentStrength = 0.1 + (this.mouseX * 0.9);
-            this.wiggleAmount = 0.1 + (this.mouseY * 1.9);
-        };
-
-        window.addEventListener('mousemove', (e) => {
-            updatePosition(e.clientX, e.clientY);
-        });
-
-        // Scoped to the canvas itself, not `window` (see below), and
-        // no longer calling preventDefault(): the original standalone
-        // page was the whole document, so blocking default touch
-        // behavior was harmless (nothing else to scroll to). Embedded
-        // as a hero above a longer page, .hero-yes covers the entire
-        // first screen - preventDefault() here was fighting the
-        // browser's own native scroll for any touch gesture starting
-        // in that region, which is what actually caused scrolling to
-        // jump/stutter (only once this component had mounted and
-        // attached these listeners - a plain page scroll never needed
-        // default prevented in the first place, just the position for
-        // the cosmetic line-cluster tracking below).
-        this.lineCanvas.addEventListener('touchmove', (e) => {
-            if (e.touches.length > 0) {
-                const touch = e.touches[0];
-                updatePosition(touch.clientX, touch.clientY);
-            }
-        }, { passive: true });
-
-        this.lineCanvas.addEventListener('touchstart', (e) => {
-            if (e.touches.length > 0) {
-                const touch = e.touches[0];
-                updatePosition(touch.clientX, touch.clientY);
-            }
-        }, { passive: true });
-
-        this.mouseX = 0.5;
-        this.mouseY = 0.5;
-        this.containmentStrength = 0.55;
-        this.wiggleAmount = 1.05;
-    }
-
-    setupClickHandler() {
-        this.lineCanvas.addEventListener('click', () => {
-            this.restartAnimation();
-        });
-    }
-
-    restartAnimation() {
-        this.time = 0;
-        this.lineCtx.fillStyle = '#0a0a0a';
-        this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
-        this.initializeLines();
-        this.isActive = true;
-    }
-
-    rasterizeText() {
-        const width = this.displayWidth;
-        const height = this.displayHeight;
-
-        const aspectRatio = width / height;
-        let fontSize;
-        if (aspectRatio < 1) {
-            fontSize = width * 0.4;
-        } else {
-            fontSize = height * 0.5;
-        }
-
-        this.fontSize = fontSize;
-
-        this.rasterCtx.font = `bold ${fontSize}px Arial, sans-serif`;
-        this.rasterCtx.textAlign = 'left';
-        this.rasterCtx.textBaseline = 'middle';
-
-        const fullTextMetrics = this.rasterCtx.measureText('YES');
-        const textWidth = fullTextMetrics.width;
-        const textStartX = (width - textWidth) / 2;
-        const textY = height / 2;
-
-        const letters = ['Y', 'E', 'S'];
-        this.letterPositions = [];
-        let currentX = textStartX;
-
-        for (let i = 0; i < letters.length; i++) {
-            const letterMetrics = this.rasterCtx.measureText(letters[i]);
-            this.letterPositions[i] = {
-                x: currentX,
-                y: textY,
-                width: letterMetrics.width,
-                centerX: currentX + letterMetrics.width / 2
-            };
-            currentX += letterMetrics.width;
-        }
-
-        this.letterRasters = [];
-
-        for (let i = 0; i < 3; i++) {
-            this.rasterCtx.fillStyle = '#111';
-            this.rasterCtx.fillRect(0, 0, width, height);
-
-            this.rasterCtx.fillStyle = '#ffffff';
-            this.rasterCtx.fillText(letters[i], this.letterPositions[i].x, this.letterPositions[i].y);
-
-            this.letterRasters[i] = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
-        }
-
-        this.rasterCtx.fillStyle = '#111';
-        this.rasterCtx.fillRect(0, 0, width, height);
-        this.rasterCtx.fillStyle = '#ffffff';
-        this.rasterCtx.fillText('YES', textStartX, textY);
-
-        this.rasterData = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
-    }
-
-    isInSpecificLetter(x, y, letterIndex) {
-        const canvasX = x * this.pixelRatio;
-        const canvasY = y * this.pixelRatio;
-
-        if (!this.letterRasters || !this.letterRasters[letterIndex] ||
-            canvasX < 0 || canvasY < 0 ||
-            canvasX >= this.rasterCanvas.width || canvasY >= this.rasterCanvas.height) {
-            return false;
-        }
-
-        const index = (Math.floor(canvasY) * this.rasterCanvas.width + Math.floor(canvasX)) * 4;
-        const red = this.letterRasters[letterIndex].data[index];
-        return red > 128;
-    }
-
-    initializeLines() {
-        this.lines = [];
-        const numLines = 60;
-
-        const letterCentroids = this.calculateLetterCentroids();
-
-        for (let i = 0; i < numLines; i++) {
-            const letterIndex = Math.floor(i / (numLines / 3));
-            let startX, startY, centerX, centerY;
-
-            if (letterCentroids[letterIndex]) {
-                centerX = letterCentroids[letterIndex].x;
-                centerY = letterCentroids[letterIndex].y;
-
-                const startVariation = this.fontSize * 0.1;
-                startX = centerX + (Math.random() - 0.5) * startVariation;
-                startY = centerY + (Math.random() - 0.5) * startVariation;
-
-                if (!this.isInSpecificLetter(startX, startY, letterIndex)) {
-                    const nearestPoint = this.findNearestSpecificLetterPixel(startX, startY, letterIndex);
-                    if (nearestPoint) {
-                        startX = nearestPoint.x;
-                        startY = nearestPoint.y;
-                    } else {
-                        startX = centerX;
-                        startY = centerY;
-                    }
-                }
-            } else {
-                const letterPos = this.letterPositions[letterIndex];
-                startX = letterPos.centerX;
-                startY = letterPos.y;
-                centerX = startX;
-                centerY = startY;
-            }
-
-            const colors = [
-                'hsl(180, 90%, 70%)',
-                'hsl(300, 90%, 70%)',
-                'hsl(60, 90%, 70%)'
-            ];
-
-            this.lines.push({
-                relativeX: (startX - centerX) / this.fontSize,
-                relativeY: (startY - centerY) / this.fontSize,
-                prevRelativeX: (startX - centerX) / this.fontSize,
-                prevRelativeY: (startY - centerY) / this.fontSize,
-                angle: Math.random() * Math.PI * 2,
-                color: colors[letterIndex],
-                letterIndex: letterIndex,
-                lastSeenInside: { x: (startX - centerX) / this.fontSize, y: (startY - centerY) / this.fontSize },
-                outsideDuration: 0
-            });
-        }
-    }
-
-    calculateLetterCentroids() {
-        const centroids = [];
-
-        for (let letterIndex = 0; letterIndex < 3; letterIndex++) {
-            let sumX = 0, sumY = 0, count = 0;
-
-            const letterPos = this.letterPositions[letterIndex];
-            const searchStartX = Math.max(0, letterPos.x - this.fontSize * 0.1);
-            const searchEndX = Math.min(this.displayWidth, letterPos.x + letterPos.width + this.fontSize * 0.1);
-            const searchStartY = Math.max(0, letterPos.y - this.fontSize * 0.6);
-            const searchEndY = Math.min(this.displayHeight, letterPos.y + this.fontSize * 0.6);
-
-            const step = Math.max(1, Math.floor(this.fontSize * 0.02));
-            for (let y = searchStartY; y <= searchEndY; y += step) {
-                for (let x = searchStartX; x <= searchEndX; x += step) {
-                    if (this.isInSpecificLetter(x, y, letterIndex)) {
-                        sumX += x;
-                        sumY += y;
-                        count++;
-                    }
-                }
-            }
-
-            if (count > 0) {
-                centroids[letterIndex] = {
-                    x: sumX / count,
-                    y: sumY / count
-                };
-            } else {
-                centroids[letterIndex] = {
-                    x: letterPos.centerX,
-                    y: letterPos.y
-                };
-            }
-        }
-
-        return centroids;
-    }
-
-    updateLines() {
-        this.time += 0.016;
-        if (!this.isActive) return;
-
-        const letterCentroids = this.calculateLetterCentroids();
-
-        this.lines.forEach(line => {
-            line.prevRelativeX = line.relativeX;
-            line.prevRelativeY = line.relativeY;
-
-            const centroid = letterCentroids[line.letterIndex];
-            if (!centroid) return;
-
-            const currentX = centroid.x + line.relativeX * this.fontSize;
-            const currentY = centroid.y + line.relativeY * this.fontSize;
-
-            const currentlyInside = this.isInSpecificLetter(currentX, currentY, line.letterIndex);
-
-            if (currentlyInside) {
-                line.outsideDuration = 0;
-                line.lastSeenInside = { x: line.relativeX, y: line.relativeY };
-            } else {
-                line.outsideDuration++;
-            }
-
-            const visionDistance = 0.08 * this.fontSize;
-            const centerX = currentX + Math.cos(line.angle) * visionDistance;
-            const centerY = currentY + Math.sin(line.angle) * visionDistance;
-            const leftX = currentX + Math.cos(line.angle - 0.4) * visionDistance;
-            const leftY = currentY + Math.sin(line.angle - 0.4) * visionDistance;
-            const rightX = currentX + Math.cos(line.angle + 0.4) * visionDistance;
-            const rightY = currentY + Math.sin(line.angle + 0.4) * visionDistance;
-
-            const centerSees = this.isInSpecificLetter(centerX, centerY, line.letterIndex);
-            const leftSees = this.isInSpecificLetter(leftX, leftY, line.letterIndex);
-            const rightSees = this.isInSpecificLetter(rightX, rightY, line.letterIndex);
-
-            let speed = 0.02;
-
-            const attractionThreshold = Math.floor(15 + (1 - this.containmentStrength) * 45);
-
-            if (line.outsideDuration > attractionThreshold) {
-                const targetX = line.lastSeenInside.x;
-                const targetY = line.lastSeenInside.y;
-                const deltaX = targetX - line.relativeX;
-                const deltaY = targetY - line.relativeY;
-                const angleToTarget = Math.atan2(deltaY, deltaX);
-
-                let angleDiff = angleToTarget - line.angle;
-                while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
-                while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
-
-                const baseAttraction = Math.min(0.4, line.outsideDuration / 80);
-                const attractionStrength = baseAttraction * this.containmentStrength;
-                line.angle += angleDiff * attractionStrength;
-            }
-
-            if (centerSees) {
-                const baseWiggle = 0.15;
-                line.angle += (Math.random() - 0.5) * baseWiggle * this.wiggleAmount;
-            } else {
-                speed *= (0.3 + this.containmentStrength * 0.4);
-
-                const baseTurnStrength = 0.3 + (this.containmentStrength * 0.4);
-                const randomTurnAmount = 0.2 * this.wiggleAmount;
-
-                if (leftSees && !rightSees) {
-                    line.angle -= baseTurnStrength + Math.random() * randomTurnAmount;
-                } else if (rightSees && !leftSees) {
-                    line.angle += baseTurnStrength + Math.random() * randomTurnAmount;
-                } else {
-                    const randomTurn = (Math.random() - 0.5) * (0.8 + this.wiggleAmount * 0.7);
-                    line.angle += randomTurn;
-                }
-            }
-
-            line.relativeX += Math.cos(line.angle) * speed;
-            line.relativeY += Math.sin(line.angle) * speed;
-
-            line.relativeX = Math.max(-1.7, Math.min(1.7, line.relativeX));
-            line.relativeY = Math.max(-1.7, Math.min(1.7, line.relativeY));
-        });
-    }
-
-    findNearestSpecificLetterPixel(x, y, letterIndex) {
-        const searchRadius = this.fontSize * 0.08;
-        const step = Math.max(1, Math.floor(this.fontSize * 0.01));
-        let nearestPoint = null;
-        let nearestDistance = Infinity;
-
-        for (let dy = -searchRadius; dy <= searchRadius; dy += step) {
-            for (let dx = -searchRadius; dx <= searchRadius; dx += step) {
-                const testX = x + dx;
-                const testY = y + dy;
-
-                if (this.isInSpecificLetter(testX, testY, letterIndex)) {
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (distance < nearestDistance) {
-                        nearestDistance = distance;
-                        nearestPoint = { x: testX, y: testY };
-                    }
-                }
-            }
-        }
-
-        return nearestPoint;
-    }
-
-    draw() {
-        this.lineCtx.fillStyle = 'rgba(10, 10, 10, 0.03)';
-        this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
-
-        const letterCentroids = this.calculateLetterCentroids();
-
-        this.lines.forEach(line => {
-            const centroid = letterCentroids[line.letterIndex];
-            if (!centroid) return;
-
-            const currentX = centroid.x + line.relativeX * this.fontSize;
-            const currentY = centroid.y + line.relativeY * this.fontSize;
-            const prevX = centroid.x + line.prevRelativeX * this.fontSize;
-            const prevY = centroid.y + line.prevRelativeY * this.fontSize;
-
-            if (prevX === currentX && prevY === currentY) return;
-
-            this.lineCtx.strokeStyle = line.color.replace('70%)', '80%, 0.8)');
-            this.lineCtx.lineWidth = this.fontSize * 0.003;
-            this.lineCtx.lineCap = 'round';
-
-            this.lineCtx.beginPath();
-            this.lineCtx.moveTo(prevX, prevY);
-            this.lineCtx.lineTo(currentX, currentY);
-            this.lineCtx.stroke();
-        });
-    }
-
-    animate() {
-        if (this.destroyed) return;
-        this.updateLines();
-        this.draw();
-        requestAnimationFrame(() => this.animate());
-    }
-}